Code Ready | Frontend

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

• 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 | #совет

👩‍💻 Тег для изменения настроения текста, но без семантического значения! Тег <i> используется для изменения голоса или настроения части текста, чтобы передать его другое качество: официальное название, идиома из другого языка, транслитерация или ремарки. Применяется только в том случае, если не существует более подходящего семантического элемента. Например:

• <em> — смысловое ударение в предложении; • <strong> — повышенная важность; • <mark> — выделение «маркером»; • <dfn> — термин или расшифровка сокращения.

По умолчанию браузеры применяют к <i> курсивное начертание с помощью font-style: italic. 📣 Code Ready | #атрибут

👨👨👨👨👨👨👨👨👨👨 Каналы с Junior IT вакансиями и стажировками Подписывайся и забирай свой оффер 🤘 1. Стажировки и вакансии по России и миру 2. IT вакансии по СНГ 3. IT стажировки по СНГ 4. ИИ-ассистент для автооткликов 5. IT стажировки и волонтерства 6. IT стажировки в топовых компаниях мира 7. Удалённые IT вакансии и стажировки 8. Python вакансии и стажировки 9. БИГТЕХ вакансии и стажировки 10. Design вакансии и стажировки 11. QA вакансии и стажировки 12. Junior вакансии и стажировки 13. Frontend вакансии и вопросы собесов 14. Вакансии и стажировки для аналитиков 15. Вакансии в русских стартапах за границей 16. Вакансии и стажировки для DevOps 17. Вакансии, которых нет на ХХ.РУ

Локальная обработка файлов в браузере — быстрый предпросмотр! Выполняем валидацию файла и мгновенно формируем его превью — все операции происходят локально в браузере, без передачи данных на сервер. Шаг 1 — получаем выбранный файл:

const input = document.querySelector('#file');

Шаг 2 — создаём FileReader для чтения локального файла:

const reader = new FileReader();

Шаг 3 — реагируем, когда чтение завершено:

reader.onload = () => {
  console.log('Тип:', currentFile.type);
  console.log('Размер:', currentFile.size);
  showPreview(reader.result);
};

Шаг 4 — читаем файл, когда пользователь выбирает его:

let currentFile = null;

input.addEventListener('change', () => {
  const file = input.files[0];
  if (!file) return;

  currentFile = file;
  reader.readAsDataURL(file);
});

Шаг 5 — универсальная мини-утилита для превью:

function readFilePreview(file, cb) {
  const r = new FileReader();
  r.onload = () => cb(r.result, file);
  r.readAsDataURL(file);
}

Пример использования:

readFilePreview(input.files[0], (dataUrl, file) => {
  console.log(file.type, file.size);
  previewImg.src = dataUrl;
});

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