🦔 Лучшие материалы по фронтенду в одной подборке

Собрали топовые материалы, которые наши подписчики сохраняют чаще всего.

Эту подборку мы будем регулярно пополнять, поэтому сохраняйте тонну пользы, чтобы не потерять!

1. Как оживить веб-страницу: находки от автора курса по анимации

2. Робин Лорд создал интерактивную браузерную игру для изучения HTML и CSS

3. Селекторы CSS на практике

4. Визуализация JavaScript: Event Loop, Task Queue и Microtask Queue

5. Одна React-задача, демонстрирующая ключевые навыки на собеседовании

6. CSS-селектор, о котором вы могли не знать

7. React пора сдать в музей: почему популярный фреймворк устарел и чем его заменить

🌸 WebGPU — графический апгрейд вашего фронтенда

Видели где-то упоминание WebGPU и думали: «Это вообще нужно?» Давайте разберёмся вместе — без скучных теорий, только самое важное и реальные кейсы.

Почему все говорят про WebGPU:

🐁WebGPU даёт браузеру почти тот же уровень доступа к GPU, что и нативным приложениям. Забудьте про огрехи WebGL — теперь можно рендерить сложные 3D-сцены, запускать ML-задачи и серьёзные физические симуляции прямо на клиенте.

Основные понятия, которые пригодятся

🔷 Буферы и шейдеры: поначалу звучит страшно, но на деле это просто набор инструкций для GPU.

🔷 Пайплайны и команды: полный контроль над каждым этапом рендеринга — никакой «чёрной магии».

С чего начать:

➡️ Библиотеки-обёртки:

— wgpu для Rust-энтузиастов

— Babylon.js с экспериментальной поддержкой WebGPU

— Трио Three.js + WebGPU-рендерер

➡️ Песочницы: запускайте примеры прямо в CodeSandbox или в официальных демках GPUWeb.

Реальные кейсы использования:

🔷 Интерактивные 3D-карты и инфографика

🔷 ML-инференс в браузере — без прокаченного бэкенда

🔷 Прототипы игр с плавной физикой и анимациями

Что вы уже пробовали на WebGPU? ✏️ Пишите в комментариях, скидывайте репозитории и гифки — давайте вместе поднимем уровень фронтенда!

P.S. Если хотите задать вопрос, заполните нашу гугл-форму. Это займет 5 минут.

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

#междусобойчик

📌 Команда дня: npx browserslist

Когда твой код вроде работает, но только у тебя — пора вспомнить про browserslist. Эта команда показывает, на каких браузерах действительно должен работать твой проект. Зависит от настроек в package.json или .browserslistrc.

📍 Пример:

npx browserslist

📍 Результат:

chrome 123
edge 120
firefox 124
safari 17.3
ios_saf 17.3

▶️Зачем это нужно:

• Чтобы не поддерживать браузеры, которыми даже твоя бабушка уже не пользуется.

• Чтобы знать, под кого оптимизировать CSS и JS.

• Чтобы не гадать, почему :has() не работает.

▶️Фишка:

Скомбинируй с @babel/preset-env и autoprefixer, и твой билд будет настолько адаптивным, что захочется распечатать его и повесить на стену.

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

#буст

💃 Как языки программирования выглядят в стиле Гибли

Мы не могли пройти мимо нашумевшего тренда и попросили ИИ перенести наш любимый язык программирования во вселенную Миядзаки.

Как вам образ? Расскажите в комментариях ↓

😜 Еще больше персонажей из мира айти в стиле Гибли — в нашем канале @proglib

🚀 Автоматическая оптимизация React-приложений

21 апреля 2025 года команда React представила релиз-кандидат (RC) React Compiler — инструмента, который автоматически внедряет мемоизацию в вашем коде, улучшая производительность без необходимости ручного использования useMemo, useCallback или React.memo .

Что нового:

➡️ Авто-мемоизация: React Compiler сам определяет, где нужна мемоизация, и внедряет её без вашего участия — меньше лишних ререндеров, больше производительности.

➡️ Объединение ESLint-плагинов: react-compiler теперь встроен в react-hooks (с версии 6.0.0-rc.1) — настройка проще, подсказки умнее.

➡️ Поддержка современных сборщиков: добавлена экспериментальная поддержка swc, что позволяет использовать компилятор без Babel.

⚠️ На что обратить внимание:

— Работает с React 17+, но для версий до 19 нужно подключить react-compiler-runtime и указать минимальную версию в настройках.

— Если код нарушает правила React (например, ref в рендере), компилятор просто пропускает такие места.

— Некоторые проверки (например, ref-in-render) временно отключены, чтобы избежать ложных срабатываний.

🔗 Инструкция как использовать

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

#свежак

😄😜

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

#развлекалово

🤩 Темная тема в приложениях: забота о пользователях или дань моде

В 2025 году отсутствие темной темы — это как прийти на собеседование в пижаме: вроде можно, но все сделают вид, что ты — ошибка природы.

➡️ Почему все так обожают темную тему:

😗 Меньше убивает глаза ночью. Особенно когда третью бессонную ночь ищешь баг, который был в одной строке.

😗 Бережет батарейку. OLED-дисплеи в экстазе. Правда, процессор твой уже треснул от количества рендеров, но кого это волнует?

😗 Выглядит «умно и технологично». В тёмной теме даже TODO-приложение кажется серьезным проектом.

➡️ Почему темная тема — это часто просто маркетинговая пыль в глаза:

➖ Контент сливается в черную кашу. Когда серый текст на черном фоне видишь только под микроскопом и с молитвой.

➖ Поддерживать две темы — это в дважды больше багов. Пару переключений темы — и твой «идеальный» UI начинает вести себя как шизофреник.

➖ Не всегда нужна. Есть приложения, где светлая тема объективно удобнее, но кто будет спорить с модой?

❓ И тут резонный вопрос:

Темная тема — это действительно забота о пользователе, или просто ещё одна галочка в бесконечном списке «фич ради фич»?

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

#междусобойчик

📣 Дайджест материалов за неделю

🔘 Как устранить FOUC

🔘 Инструмент недели: Lighthouse — карманный инспектор сайта

🔘 Апрельские выпуски подкаста PodRocket

🔘 Команда дня: npx browserlist

🔘 React Compiler RC: автоматическая оптимизация React-приложений

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

#свежак

😳 Топ-вакансий для фронтендеров за неделю

Middle Frontend-разработчик (Angular) — удаленно (Москва)

Dev Team Lead — 350 000 —‍ 450 000 ₽, удаленно (Москва)

Senior Frontend Developer — офис/гибрид (Москва)

Frontend-разработчик — 180 000 —‍ 240 000 ₽, офис/гибрид (Екатеринбург/Новокузнецк)

TypeScript Developer — 3 500 —‍ 5 000 €, удаленно (Литва)

➡️ Еще больше топовых вакансий — в нашем канале Javascript jobs

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

#свежак

⚡ Новые фреймворки и мета-фреймворки

➡️ Solid.js — легковесный фреймворк без виртуального DOM, обеспечивающий высокую производительность за счет тонкой реактивности и минимального размера бандла.

➡️ Qwik — фреймворк, ориентированный на мгновенную загрузку страниц, с поддержкой серверного рендеринга и оптимизированной гидратацией.

➡️ Analog — новый фреймворк, сочетающий преимущества серверного рендеринга и статической генерации, с акцентом на производительность и простоту использования.

➡️ React Router v7 — переименованный Remix, теперь объединяет возможности серверного рендеринга и клиентского маршрутизатора, предлагая более гибкую архитектуру.

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

#свежак

🚀 Redis представляет LangCache и Vector Sets — инструменты для ускорения AI-приложений

Redis, который мы все привыкли видеть как «быстрый кэш для бэка«» внезапно делает шаг в сторону AI — и это может пригодиться и нам, фронтендерам.

Недавно они выкатили два новых инструмента:

🔴 LangCache

Это умное семантическое кэширование — Redis сам понимает, что кэшировать, чтобы запросы к LLM (типа ChatGPT) летали быстрее.
Представьте: вы делаете чат с ИИ, и Redis помогает не гонять одинаковые вопросы по 100 раз, а отвечает из памяти, как будто сам ChatGPT запомнил всё.

🔴 Vector Sets

Теперь Redis может хранить и искать вектора — например, эмбеддинги от нейросетей. Это открывает дорогу к реализации умного поиска или рекомендаций прямо у себя, без тяжёлых внешних API.

А что фронту:

➡️ Быстрее и дешевле LLM-интеграции. Теперь можно кэшировать ответы от ИИ — это снижает задержки и экономит токены.

➡️ Интеллектуальные фичи — «похожие товары», «что-то на эту тему», и даже поиск по смыслу — становятся реальными без сложных бэков.

➡️ Всё это уже можно подключить через Node.js или edge-фреймворки типа Next.js / Remix.

🔗 Читать подробнее

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

#свежак

🧩 Как сгенерировать нужный кусок кода за секунды: промпт для ChatGPT

Мелкие, но регулярные задачи вроде хуков, адаптивных блоков или забытого fetch с таймаутом съедают часы. Вместо бесконечного гуглинга — спроси у ИИ.

Один из наиболее практичных промптов из блога Requestly помогает именно с этим:

🔴 PROMPT:

Generate a code snippet for [specific task]

Например:

“Generate a code snippet for a custom React hook that syncs state with localStorage”

Чем полезен этот промпт:

1️⃣ Код появляется за пару секунд — без лишнего гуглинга.

2️⃣ ChatGPT объясняет, как и почему всё работает.

3️⃣ Подходит под любой стек — от React до Tailwind.

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

#буст

Спасибо, что сегодня последний рабочий день на неделе 🙂

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

#развлекалово

❓ Как починить баг, когда onChange в React не срабатывает

Проблема: ты повесил onChange на input, но он не триггерится. Или работает, но странно: с задержкой, через раз, или вовсе игнорирует ввод.

Возможные причины и решение:

1️⃣ Компонент неконтролируемый (uncontrolled):

<input defaultValue="test" onChange={handleChange} />

📛 onChange может не срабатывать стабильно, особенно если не следить за value.

Решение: переводи компонент в контролируемый:

const [value, setValue] = useState('');
<input value={value} onChange={(e) => setValue(e.target.value)} />

2️⃣ Используешь onInput вместо onChange:

Это не одно и то же. onInput срабатывает чаще, но может работать по-разному в разных браузерах.

Решение: если нужен универсальный UX — лучше onChange, особенно для форм.

3️⃣ Слишком агрессивный debounce или throttle:

const debouncedHandler = debounce((e) => doSomething(e.target.value), 500);
<input onChange={debouncedHandler} />

📛 Если debounce неправильно настроен, ввод «глушится».

Решение: убедись, что debounce работает корректно и не отваливается при e.persist() или вне зоны контроля React.

Пиши компонент осознанно: React не про «оно само заработает».

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

#буст

🤝 Мгновенное дублирование строки или блока в VSCode

Shift + Alt + ↓ / ↑

— дублирует текущую строку или выделенный блок вниз / вверх.

Зачем это нужно:

• Быстро копировать блоки кода без использования буфера обмена.

• Ускоряет повторяющиеся шаблоны, особенно в вёрстке или React-компонентах.

• Работает с несколькими курсорами — мощный инструмент для продуктивности.

💡 Совмести с Alt + Click для создания нескольких курсоров — и обновляй дублированные блоки одновременно.

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

#буст