Code Ready | Frontend

👩‍💻 Кнопка/карточка с динамичным бликом! Интерфейс кажется живым, когда есть визуальная обратная связь. В этом приёме сделаем проходящий световой блик, который появляется при наведении. Как работает:

• ::before создаёт отдельный слой блика, который движется по координате; • linear-gradient формирует мягкий центр света и прозрачные края; • keyframes sh управляет непрерывным движением без рестарта; • :hover меняет длительность анимации, но не запускает её заново, поэтому эффект ощущается отзывчивым и плавным;

Это отличный пример того, как можно управлять визуальным откликом интерфейса, делая его выразительным и предсказуемым. 📣 Code Ready | #фишка

Сеньор за полгода? 📈 Эта девушка получила оффер в IT-компанию, хотя весь её опыт — пара курсов с ютуба 😱 Она воспользовалась ИИ-помощником и легко скрыла все свои пробелы в знаниях. Теперь впереди: ⤵️ удалёнка, стартовое обучение и ставка 55$ в час. Проходи собеседования вместе с Interview Ninja 🥷 Проверь успех на себе — есть 100 бесплатных запросов на день. 👉 @interview_ninja

💅 Нашёл интересную и полезную статью на Хабре: «Заменяем JS обычным HTML»! В этой статье вы: • Узнаете, как заменить привычные JavaScript-фичи html/css; • Реализуете интерактивные элементы (аккордеоны, раскрывающиеся блоки); • Научитесь строить UI-компоненты вроде автодополнения, модальных окон и popover-меню через современные html-атрибуты; • Получите примеры, которые позволяют снижать зависимость от JavaScript там, где возможно.

🔊 Продолжайте читать на Habr!

📣 Code Ready | #статья

Получаем данные случайного пользователя! RandomUser API удобен для фронтенда: один запрос — и есть JSON с реалистичным профилем. В нормальном ответе приходит объект { results: [...] }, где results — массив профилей. Нам обычно нужен первый пользователь:

async function getRandomUser() {
  const res = await fetch("https://randomuser.me/api/");
  if (!res.ok) throw new Error(`HTTP ${res.status}`);
  const { results, error } = await res.json();
  if (error) throw new Error(error);
  if (!results?.length) throw new Error("No results");
  return results[0];
}

Достаём поля через деструктуризацию. Для UI: picture.medium — аватар среднего размера, thumbnail — для списков:

getRandomUser().then(({ name, email, location, picture }) => {
  const fullName = `${name.first} ${name.last}`;
  console.log(`Имя: ${fullName} | Страна: ${location.country}`);
  console.log(`Аватар (medium): ${picture.medium} | Email: ${email}`);
}).catch(console.error);

Когда нужен набор моков — используем ?results=N. API поддерживает крупные батч-запросы (до 5000 пользователей за один вызов), что эффективнее, чем множество одиночных запросов:

async function getRandomUsers(count = 5) {
  const res = await fetch(`https://randomuser.me/api/?results=${count}`);
  if (!res.ok) throw new Error(`HTTP ${res.status}`);
  const { results, error } = await res.json();
  if (error) throw new Error(error);
  if (!results?.length) throw new Error("No results");
  return results;
}

getRandomUsers(3).then(list => console.log(list));

🔥 При массовой загрузке учитывайте rate-limit и размер ответа. Кэшируйте профили, если они нужны повторно в рамках сессии. 📣 Code Ready | #практика

❗️❗️❗️❗️❗️❗️❗️ Самый прогерский канал, где за 10 минут ты научишься: / Поиск по фото и номеру в ТГ // Как зайти на вебку подруги /// Мануал по OSINT разведке Ссылка действительна 47 ч. 59 мин. 👇 https://t.me/+NJwm2d6XWOs2YTEy

👩‍💻 Быстрый дебаг CSS-границ без инспектора! Когда вёрстка “плывёт”, удобно временно включить универсальную подсветку границ, чтобы сразу увидеть проблемные блоки и их вложенность. Вместо того чтобы вручную писать для каждого элемента border: 1px solid red, используйте CSS-переменную и outline (он не влияет на layout):

:root {
  --debug: 1px dashed red;
}

Теперь включаем дебаг в одну строку для любого элемента:

* {
  outline: var(--debug);
}

outline не сдвигает элементы, не ломает размеры и не создаёт переполнений, поэтому дебаг абсолютно точный. Хочешь быстро отключить? Просто меняем переменную:

:root {
  --debug: none;
}

🔥 Это даёт мгновенный контроль над debug-режимом, без удаления правил по всему файлу. 📣 Code Ready | #совет

Каждый год пишу итоги, не буду отказываться и сейчас) 2025 выдался не прям продуктивным, но достаточно многое поменялось: контент, аудитория и планы. На 2026 год главная цель это набрать 50000 подписчиков. Поэтому желаю каждому чтобы новый год был еще лучше! С наступающим! 🎄

❤️ Human Who Codes — блог Николаса Закаса, одного из самых влиятельных программистов в мире JS! Это не обучающие статьи, а глубокие разборы архитектуры, устройства языка, качества кода и масштабируемых решений. Здесь много про то, как писать код: принципы, ограничения языка, реальные инженерные компромиссы. 📌 Оставляю ссылочку: humanwhocodes.com 📣 Code Ready | #ресурсы

👩‍💻 Линия-триггер внимания в меню навигации! Этот приём создаёт ощущение, что текст в меню не простая статичная надпись, а активная часть интерфейса, где underline становится визуальным индикатором состояния. Как работает:

• details заменяет необходимость в обработке клика; • position: relative делает элемент системой координат для underline; • cubic-bezier управляет «магнитностью» движения; • glow привязан к underline, а не к элементу целиком, поэтому эффект остаётся аккуратным и предсказуемым.

Так визуальная обратная связь становится структурной, улучшая восприятие интерактивности без лишних зависимостей. 📣 Code Ready | #фишка

Маленький канал. Большие мысли. Сергей Смелов — основатель финтех-компаний, где работает более 500 человек. Создал свой TG-канал в котором ⬇️

Делится опытом и инсайтами, которые получает, посещая компании Кремниевой долины и встречаясь с выдающимися людьми.

Канал можно читать как бизнес-сериал — с неожиданными сюжетами и бесконечным источником пользы для предпринимателей. В ближайших постах вы сможете прочитать о том, как Сергей посетил Университет Stanford и Berkeley, и узнал множество инсайтов о культуре и подходах . Такого эксклюзивного контента вы не найдёте нигде в Telegram-пространстве. https://t.me/smelov_77

📂 Напоминалка для работы с Map! Map — это удобная структура данных для хранения пар ключ - значение, где ключом может быть что угодно, а порядок элементов сохраняется. На картинке — часто используемые методы Map: от добавления и получения значений до перебора данных. Сохрани, чтобы не забыть! 📣 Code Ready | #ресурс

📱 Поиск по тексту с подсветкой и счётчиком совпадений! Привет! В этом гайде создаём компактный поиск по тексту с подсветкой совпадений и счётчиком вхождений. Ключевые моменты:

• HTML: структура — textarea, поле ввода запроса и область вывода результата. • CSS: контейнер, скругления, тень и прокрутка в блоке результата. • JS: поиск регулярным выражением, подсветка и подсчёт совпадений.

Такой мини-поиск отлично подойдёт для UI-демо, форм, поиска по отзывам или логам, где важно быстро найти фразу, сохранив простой интерфейс. 📣 Code Ready | #гайд

☄️В преддверии Нового года айтишник из “Matrix” скупил все курсы топовых IT-школ и выложил 5 ТБ слитых курсов к себе в каналы! 👩‍💻 Python: https://t.me/+kBPlIQ1kpHw0YmQy 👩‍💻 Все ЯП: https://t.me/+pkvOZc3g5gU3YTEy 👩‍💻 Backend: https://t.me/+QRq_LSpodJ80NjE6 📱 Frontend и Web: https://t.me/+jOItOzJamrNhOTIy 👩‍💻 Графика и дизайн: https://t.me/+lxe3X0QQXVk2NWIy Все материалы в закрепе и постоянно пополняются👆

Быстро приводим значение к boolean — без лишних проверок! В JS логические значения — это не только true и false. Любое значение в условии считается либо truthy, либо falsy. По умолчанию falsy всего несколько значений:

false
0
''
null
undefined
NaN

Всё остальное — truthy, даже пустые объекты и массивы. Если нужно явно получить boolean, а не полагаться на неявные приведения, используют оператор логического отрицания. Одно ! инвертирует значение:

!0    // true
!1    // false

Два ! подряд делают именно то, что нужно — приводят значение к true или false:

!!0        // false
!!1        // true
!!'text'   // true
!!null     // false

Это часто удобнее и короче, чем Boolean(value):

Boolean(value); // то же самое, но длиннее

🔥 Поэтому, !!value — быстрый и наглядный способ получить boolean в коде. 📣 Code Ready | #совет

Изоляция рунета ближе, чем ты думаешь

Loading … ██████████████] 99%

Роскомнадзору дали карт-бланш на блокировки, а «белые списки» сайтов тестируют уже в десятках регионов. И гайки будут закручиваться только сильнее. Чтобы в одночасье не лишиться доступа к свободному Интернету, просто сохрани Only Hack. Тут профессиональный хакер делится фишками, с которыми доступ к глобальной сети у тебя будет даже в случае ядерного апокалипсиса. Не жди момента «Х». Перестрахуйся подпиской.

😎 DevDocs — обучения через документацию! Здесь собраны структурированные документации по JS и смежным технологиям, ориентироваться в темах быстро и удобно. Можно подтянуть понимание языка: методы массивов, строки, даты, поведение консоли, обработка событий и многое другое. Открываешь документацию, понимаешь механику, ограничения и реальные сценарии использования. 📌 Оставляю ссылочку: devdocs.io 📣 Code Ready | #ресурс

Форматируем дату по приоритетной локали пользователя! Частая задача: выводить дату в понятном формате без ручного указания региона. Браузер предоставляет список предпочтительных локалей, а Intl.DateTimeFormat форматирует дату на основе данных CLDR. Базовый вывод даты (используем первую предпочтительную локаль или системную):

const now = new Date();
const locale = navigator.languages?.[0] || navigator.language;
const formatter = new Intl.DateTimeFormat(locale);
console.log(formatter.format(now));
// Примеры: 12/24/2025 или 24.12.2025

Более читаемый формат в современных браузерах:

const pretty = new Intl.DateTimeFormat(locale, {
  dateStyle: "medium",
  timeStyle: "short"
});
console.log(pretty.format(now));
// Примеры: Dec 24, 2025, 14:30 или 24 дек. 2025 г., 14:30

Собираем собственный формат даты (жёсткий порядок и разделители задаём сами):

const parts = new Intl.DateTimeFormat(locale, { day:"2-digit", month:"2-digit", year:"numeric" })
  .formatToParts(now)
  .filter(p => p.type !== "literal");

const obj = {};
for (const p of parts) obj[p.type] = p.value;

console.log(`${obj.day}.${obj.month}.${obj.year}`);
// Пример: 24.12.2025

🔥 Важно: locale влияет только на формат отображения. Часовой пояс определяется окружением браузера, при необходимости его можно зафиксировать через опцию timeZone (IANA, например UTC). 📣 Code Ready | #практика

console.log('🎄 Time for presents!') Новый год — время радовать близких людей. Поэтому мы подготовили подарки для наших подписчиков — промокоды на год от Облака Mail и VK Музыки! Условия участия простые: 🔹подпишитесь на наш канал @frontendhubvk 🔹 нажмите кнопку «Участвовать» 🔹 дождитесь 30 декабря — в этом посте мы выберем случайным образом 6 победителей В ожидании итогов не забывайте почитать по ссылке информацию об организаторе, правилах и призах. И регулярно есть мандарины!