Code Ready | Frontend

💅 Нашёл интересную и полезную статью на Хабре: «Заменяем 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 победителей В ожидании итогов не забывайте почитать по ссылке информацию об организаторе, правилах и призах. И регулярно есть мандарины!

👩‍💻 Указываем направление текста внутри всего документа или отдельного элемента! Атрибут dir устанавливает направление вывода текста внутри элемента. Действие атрибута наследуется от родительского элемента, но может быть переопределено. Принимает одно из следующих значений:

• ltr — текст будет написан слева направо. Такое направление текста используется, например, для русского или английского языков; • rtl — текст будет написан справа налево. Актуально, например, для арабских языков; • auto — направление текста определяется браузером.

Может быть применён к любому HTML-элементу, но не для всех элементов имеет смысл. 📣 Code Ready | #атрибут