🔥 Debounce на одной строке

Когда пользователь вводит текст в поиск или изменяет размер окна — запросы летят десятками. Debounce откладывает выполнение функции до тех пор, пока события не прекратятся.

const debounce = (fn, ms) => {
  let timer;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => fn(...args), ms);
  };
};

// Использование
const handleSearch = debounce((value) => {
  console.log('Поиск:', value);
}, 300);

// В React
<input onChange={(e) => handleSearch(e.target.value)} />

✅ Когда использовать:
— Автокомплит и live-поиск
— Обработка resize/scroll событий
— Валидация форм при вводе
— Любые частые события

💡 Почему это работает:
При каждом новом вызове старый таймер сбрасывается и создаётся новый. Функция выполнится только когда пройдёт 300ms без новых событий.

🔹 Курс «Алгоритмы и структуры данных»
🔹 Получить консультацию менеджера
🔹 Сайт Академии 🔹 Сайт Proglib

🐸 Библиотека фронтендера

#readme #js #react

📦 Container Queries — респонсив по контейнеру, а не по экрану

Проблема: карточка в гриде, сайдбаре и модалке выглядит по-разному. Media queries не помогут — они смотрят на viewport.

ℹ️ Кейсы:

— Виджеты в дашбордах
— UI-киты с гибкими компонентами
— Карточки в разных местах

🟡 Юниты: cqi, cqw — как vw, но для контейнера

⚙️ Поддержка: Chrome 105+, Safari 16+, Firefox 110+

🐸 Библиотека фронтендера

#hotfix #css

👨‍💻 Где читаете про новые фичи и лучшие практики

Официальные доки — это хорошо. Но давайте честно: половину знаний мы получаем из случайных статей, чьих-то каналов и обсуждений в комментариях.

Интересно узнать:

📌 Какие телеграм-каналы или блоги вы читаете регулярно?
📌 Есть ли YouTube-каналы, которые реально помогли разобраться в сложных темах?
📌 В каких комьюнити задаёте вопросы, когда застряли?
📌 Кто из авторов объясняет так, что всё сразу становится понятно?

🎈 Может быть, вы сами ведёте блог или делитесь опытом — расскажите об этом тоже, пришло ваше время!

Соберём список реально полезных мест для фронтендеров. Пишите в комментариях ⬇️

🐸 Библиотека фронтендера

#read_watch

🌸 Как безопасно тестировать большие изменения

Когда фича крупная или экспериментальная, лучше не рисковать основной рабочей веткой. Проще создать временную песочницу, где можно тестировать всё, что угодно — без страха что-то сломать.

🆖 Как сделать:

1. Создать временную ветку:

git switch -c sandbox

2. Перенести только нужные коммиты из своей фичи:

git cherry-pick <hash>

Можно брать по одному, можно — диапазоном.

3. Протестировать изменения в изоляции.

Никаких конфликтов, никакой порчи основной ветки.

4. Удалить песочницу, когда всё готово:

git branch -D sandbox

Используйте песочницы, если фича явно рискованная или слишком большая — это экономит время и нервы.

🤌 Бонусы для подписчиков:
— Скидка 40% на все курсы Академии
— Розыгрыш Apple MacBook
— Бесплатный тест на знание математики

🐸 Библиотека фронтендера

#readme #git

📌 Дайджест обновлений за ноябрь

🔴 Angular 21

— Новый формовый API на signals.
— Headless-компоненты с фокусом на доступности.
— MCP-сервер для AI-воркфлоу.
— AI Tutor для быстрого онбординга.

🔴 Node.js

25.2.1 (Current)
— Стабильный type stripping: TS теперь работает «из коробки».
— Откатили спорное изменение localStorage — оставили до Node 26.

24.11.1 (LTS)
— Исправлен баг в Buffer.allocUnsafe. Рекомендуется обновление.

🔤 Фреймворки и инструменты:

Git 2.52 — новая команда git last-modified для просмотра последних изменений по файлам.

Astro 5.16 — улучшения DX и интеграций.

VS Code 1.106 — стабильный Terminal IntelliSense, улучшенный diff и навигация.

PlanetScale Postgres — managed PostgreSQL за $5/мес.

🔤 Обновления библиотек:

pnpm 10.23

— pnpm self-update теперь скачивает обновления из вашего npm-регистра.
— Добавлена опция --lockfile-only для pnpm list.
— Установка падает, если optional dependency не проходит trust-политику.
— pnpm list и pnpm why показывают npm-алиасы (npm:).

MikroORM 6.6 — больше контроля над фильтрами и приватными полями.

ESLint v10 Alpha — первые изменения под будущий мажор.

pg-boss 12.4.1

— Перешли на более стабильную сборку через обычный tsc.
— Добавили поддержку AbortSignal для задач.
— Исправили неожиданные изменения аргументов и поправили несколько default-значений.

🤌 Бонусы для подписчиков:
— Скидка 40% на все курсы Академии
— Розыгрыш Apple MacBook
— Бесплатный тест на знание математики

🐸 Библиотека фронтендера

#release_digest

📎 Шпаргалка по React Hooks

Хуки сделали React-компоненты проще и мощнее. Эта шпаргалка — ваш быстрый справочник по всем основным хукам с примерами кода.

Что внутри:

Разбор каждого хука по принципу «что делает → как работает → когда использовать».

➕ Подходит и новичкам для изучения, и опытным разработчикам как quick reference в работе.

🎥 Источник

🤌 Бонусы для подписчиков:
— Скидка 40% на все курсы Академии
— Розыгрыш Apple MacBook
— Бесплатный тест на знание математики

🐸 Библиотека фронтендера

#readme #react

📱 Apple случайно раскрыла код веб-версии App Store

В начале ноября Apple запустила обновлённый веб-интерфейс App Store на фреймворке Svelte, но случайно оставила в продакшене активные source maps. Это позволило разработчику извлечь полную структуру фронтенда прямо из браузера.

Код включал UI-компоненты на Svelte/TypeScript, логику управления состояниями, интеграции с API и конфигурацию роутинга. Разработчик выложил всё на GitHub «в образовательных целях».

8 ноября репозиторий и его форки были удалены по запросу Apple через DMCA. Однако код по-прежнему доступен через зеркало в архиве Software Heritage 🔗

🙃 Отключение source maps в продакшене считается базовым шагом в современной веб-разработке, поэтому такая ошибка от Apple выглядит особенно необычно.

🤌 Бонусы для подписчиков:
— Скидка 40% на все курсы Академии
— Розыгрыш Apple MacBook
— Бесплатный тест на знание математики

🐸 Библиотека фронтендера

#read_watch