Code Ready | Frontend

👩‍💻 Эффект, который превращает обычный текст в динамичный скан-лоадер! В этой фишке используется всего один псевдо-элемент, который проходит по надписи и создаёт впечатление “сканирования” — без JS. Как работает:

• ::before становится движущейся полосой, перекрывающей текст; • mix-blend-mode: difference инвертирует цвет и создаёт яркий акцент; • keyframes slide задаёт траекторию движения от края до края.

Приём отлично подходит для лоадеров, hero-титров, UI-сигналов и любых сценариев, где нужно живое, цепляющее движение. 📣 Code Ready | #фишка

🔥 Фронтенд будущего: ИИ-инструменты и Docs-as-Code в ЮMoney Фронтендеры из ЮMoney поделятся опытом 6 декабря, онлайн, на бесплатной IT-конференции ЮMoneyDay, который помогает делать быстрее и качественнее: 🟣 Вайб-кодинг в финтехе: как мы используем ИИ-инструменты в ежедневных задачах, ускоряем проверку гипотез и возвращаем в работу творчество. 🟣 Docs-as-Code на фронтенде: почему выбрали Markdoc и как мы решаем практические задачи с помощью этого инструмента. Подробнее о программе и регистрации — на сайте конференции ™️

👩‍💻 Удобная работа с API внутри VS Code! REST Client - расширение, которое превращает редактор в удобный инструмент для работы с HTTP-запросами. Можно тут же получать ответ от сервера. Плагин поддерживает переменные и окружения, так что можно хранить токены, URL или параметры для разных проектов и легко подставлять их в запросы. 📣 Code Ready | #vscode

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

• HTML: контейнер, поле ввода и список элементов для фильтрации. • CSS: стеклянный эффект, аккуратные тени и анимированное скрытие элементов. • JS: обработка ввода, сравнение подстрок и переключение видимости элементов через класс hide.

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

Отменяем старые fetch-запросы — оставляем только актуальные данные! В поиске, автокомплите и живых фильтрах ответы от сервера могут приходить не по порядку, из-за чего показывается не самый свежий результат. Один из простых и надёжных способов избежать этого — отменять предыдущий запрос через AbortController. Проверяем поддержку:

console.log("AbortController" in window);

Делаем контроллер и отправляем запрос:

let controller;

function load(url) {
  if (controller) controller.abort();

  controller = new AbortController();
  return fetch(url, { signal: controller.signal });
}

Используем при вводе:

field.addEventListener("input", () => {
  load("/api/search?q=" + field.value)
    .then(r => r.json())
    .then(data => console.log("Актуальный ответ:", data))
    .catch(e => e.name === "AbortError" || console.error(e));
});

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

Как избавиться от подмен в типографике? Когда кастомный шрифт не успевает загрузиться, браузер подставляет свой стандартный generic sans-serif. Это может испортить вид интерфейса:

body {
  font-family: "PT Sans", sans-serif;
}

Но ещё хуже, когда fallback вообще не задан, тогда интерфейс может внезапно превратиться в дефолтный serif (на Windows это часто Times New Roman):

body {
  font-family: "PT Sans";
}

Современный CSS даёт более аккуратный и предсказуемый вариант, используй system-ui, чтобы браузер подставил нативный системный шрифт ОС:

body {
  font-family: "PT Sans", system-ui;
}

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

Полгода поиска vs оффер за 2 дня Вот такой отзыв прилетел недавно в чат пользователей ии-ассистента для поиска работы. "Небольшой", как и количество дней, потраченных на поиск работы с ассистентом Софи 😅 Итого у Софьи: ▫️ Полгода самостоятельных поисков ▫️ 2 дня использования ии-ассистента ▫️ Тестовое задание и собеседование ▫️ Оффер на позицию мидл дизайнера! Это самое быстрое трудоустройство среди пользователей Софи. И подтверждение того, что даже во время трехдневного тестового периода можно успеть урвать свой оффер) Набор на бесплатное тестирование ассистента совсем скоро. В этом канале. Места будут ограничены. Не пропусти ⏰

👩‍💻 Готовые шаблоны регулярных выражений! Regex Snippets — расширение, которое добавляет набор готовых шаблонов регулярных выражений: проверка email, поиск чисел, валидация пароля, извлечение групп, работа с пробелами, датами, URL и др. Пишешь короткий префикс и получаешь готовый рабочий паттерн. 📣 Code Ready | #vscode

👩‍💻 Кнопка, которая «заливается» при наведении! Большой округлый слой поднимается снизу и покрывает элемент, создавая плавный анимационный переход. За счёт формы слоя и правильной кривой движение выглядит естественно. Как работает:

• Псевдо-элемент ::before выступает как анимируемый заливочный слой; • В обычном состоянии он находится за пределами кнопки; • При наведении слой смещается вверх и перекрывает элемент, а текст своевременно меняет цвет.

Простой приём, который добавляет интерфейсу динамику без единой строки JavaScript. 📣 Code Ready | #фишка

⚡️ В сети начали массово сливать курсы и книги известных онлайн школ по айти Вот отсортированная база с тонной материала (постепенно пополняется): (363 видео, 87 книги) — Python (415 видео, 68 книги) — Frontend (143 видео, 33 книги) — ИБ/Хакинг (352 видео, 89 книги) — С/С++/C# (343 видео, 87 книги) — Java/QA (176 видео, 32 книги) — Git/Linux (174 видео, 91 книги) — DevOps (167 видео, 53 книги) — PHP/1С (227 видео, 83 книги) — SQL/БД (114 видео, 77 книги) — Сисадмин (107 видео, 43 книги) — BA/SA (181 видео, 32 книги) — Go/Rust (167 видео, 43 книги) — Kotlin/Swift (112 видео, 24 книги) — Flutter (137 видео, 93 книги) — DS/ML (113 видео, 82 книги) — GameDev (183 видео, 37 книги) — Дизайн (136 видео, 33 книги) — PM/HR Скачивать ничего не нужно — все выложили в Telegram

👩‍💻 Хотите открыть проект из GitHub, не скачивая его? Remote Repositories — расширение, которое позволяет работать с репозиторием прямо в VS Code: просматривать файлы, править код, создавать коммиты и пушить изменения, без локального клона. Идеально, когда нужно быстро проверить структуру проекта или что-то поправить. 📣 Code Ready | #vscode

📱 Виджет выбора количества товара! Привет! В этом гайде создаём компактный виджет для управления количеством — с кнопками «–» и «+», плавной анимацией и простой логикой работы. Ключевые моменты:

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

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

Программисты, это вам 👇 Держите 5 каналов, которые реально помогают изучать программирование и IT с полного нуля: 🖥 Easy Coder — все направления IT. 👩‍💻 Easy Python — всё о Python. 🌐 Easy WebDev — Frontend, Backend. 🔠 Easy InfoSec — ИБ, Хакинг. 🐱 Easy GitHub — лучшее с GitHub. Тонны полезной инфы для любого уровня подготовки ✔️

Проверяем, находится ли элемент в фокусе! Иногда нужно понять, активен ли сейчас input, textarea или любой другой интерактивный элемент. Например, чтобы не открывать подсказки, не ловить горячие клавиши или корректно управлять UI. Браузер хранит текущий фокус в document.activeElement:

console.log(document.activeElement);

Проверяем, сфокусирован ли конкретный элемент:

const input = document.getElementById('username');

if (document.activeElement === input) {
  console.log('Поле username сейчас в фокусе!');
}

Отслеживаем смену фокуса:

document.addEventListener('focusin', (e) => {
  console.log('Фокус перешёл на:', e.target);
});

Проверяем, что фокус ушёл:

document.addEventListener('focusout', (e) => {
  console.log('Элемент потерял фокус:', e.target);
});

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

📱 DOM: события элементов управления и форм! Шпаргалка по DOM-событиям, связанным с взаимодействием пользователя с формами и полями ввода: изменение текста, подтверждение выбора, фокусировка, валидация, выделение и отправка данных. Эти события обеспечивают корректную обработку пользовательского ввода и управление состояниями элементов. 📣 Code Ready | #шпора

Удаляйте ChatGPT. Вы не умеете им пользоваться. Большинство пользователей спамит в ИИ всякую чушь — просят рассказать анекдот, изливают душу и используют как Гугл. Российский тимлид OpenAI Вадим Петрич рассказывает в «Доктор GPT» как извлекать из нейронок максимум пользы. Это очень интересно: • ТОП №1 нейросеть, генерирующая видео без цензуры вообще • Готовые промты на все случаи жизни • Инсайды и разработки от китов индустрии Подпишитесь, с Доктором GPT нейронки станут инструментом роста, а не безделушкой: https://t.me/+5CgWzXmpgdhlMGEy

👩‍💻 Делаем обычные карточки интерактивными! В этой фишке карточки реагируют на наведение, расходясь веером и чуть приподнимаясь в 3D. Получается выразительный эффект без JS. Как работает:

• transform на :hover наклоняет активную карточку и поднимает её над слоем; • Соседние элементы смещаются через селектор .card:hover ~ .card, создавая веерный эффект; • z-index позволяет hovered-элементу визуально выходить вперёд.

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

🐍💩👩‍💻👩‍💻🧑‍💻🧑‍💻🐧👩‍💻🧑‍💻👩‍💻👩‍💻 Ребята сделали крутейший канал про айти Здесь сложные темы объясняют на простых картинках и понятном языке, а еще делятся полезными ресурсами и свежими новостями из мира IT Подписывайтесь: @IT_Portal

👩‍💻 Управляем состоянием интерфейса через :has()! Чтобы изменить стиль родителя, когда вложенный элемент находится в активном состоянии делают:

parent.classList.toggle('open', child.checked)

Но CSS может делать это сам:

.card:has(.toggle:checked) .content {
  max-height: 400px;
}

Если внутри .card есть элемент.toggle, который checked, то .content автоматически раскрывается. Изменение внешнего вида родителя в зависимости от действий пользователя:

.input:has(input:focus) {
  border-color: #4da3ff;
}

Подсветка активного пункта меню:

nav:has(a.active) {
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

🔥 Родитель сам понимает, что внутри есть активный элемент. 📣 Code Ready | #совет