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

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

⚡️ В сети начали массово сливать курсы и книги известных онлайн школ по айти Вот отсортированная база с тонной материала (постепенно пополняется): (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