🔍 Turbopack под капотом

Компиляция обычно означает ожидание. Turbopack меняет подход: сборка ускоряется не за счёт оптимизаций, а за счёт того, что выполняется меньше вычислений.

🔴 В чём проблема классических бандлеров

Большинство систем:

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

Инкрементальность сложна и опасна при плохой реализации, но без неё быстрый dev-loop невозможен.

🔴 Как устроен Turbopack

В основе — автоматическое тонкое кеширование:

• система отслеживает не файлы, а результаты вычислений
• пересчитываются только реально затронутые части
• если результат не изменился — цепочка пересборки обрывается

🔴 Value Cells

Все данные внутри Turbopack представлены как value cells:

• файлы
• AST
• метаданные модулей
• информация о чанках и tree shaking

Зависимости фиксируются только в момент чтения данных, что даёт более точный кеш, чем ручные dependency graphs.

🔴 Распространение изменений

При изменении файла:

1. связанные ячейки помечаются как dirty
2. пересчёт идёт снизу вверх по графу
3. выполнение откладывается, пока результат реально не нужен

🔴 Aggregation Graph

Для работы с огромными графами Turbopack использует отдельный агрегационный граф, который ускоряет:

• сбор ошибок и предупреждений
• ожидание завершения подграфов
• планирование пересчётов

♾ File system cache:

Начиная с Next.js 16.1:

• кеш сохраняется на диск
• dev-сервер стартует из «тёплого» состояния
• промежуточные результаты не теряются при перезапуске

🔗 Оригинал статьи с примерами

📍 Навигация: [Вакансии]

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

#under_hood

✏️ Как писать хорошие unit-тесты и не ненавидеть их

Unit-тесты ломаются не из-за рефакторинга, а потому что тестируют не то. Этот гайд — про практику, которая даёт уверенность, а не просто проценты coverage.

Ключевые идеи:

• тестировать поведение, а не внутреннюю реализацию
• мокать границы системы, а не внутренние слои
• не бояться in-memory баз вместо сложных моков
• понимать, когда 100% coverage помогает, а когда вредит

➡️ Простой критерий качества тестов:

если можно спокойно деплоить в пятницу вечером — тесты написаны правильно 🤓

📍 Навигация: [Вакансии]

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

#read_watch

🖍 JS one-liner: dedupeByLast — дедуп с последним значением

const dedupeByLast = (arr, key) => [...new Map(arr.map(o => [o[key], o])).values()];

Что делает:

— Для каждого key оставляет последний объект
— Порядок результата — по первому появлению ключа в массиве (ключи не «переносятся» в конец при перезаписи)

🔴 Почему это удобно:

— O(n), без вложенных циклов
— Детерминированное правило: последнее обновление победило
— Отлично подходит для merge обновлений / событий

Когда использовать:

— события/метрики, где важен последний статус
— merge обновлений по ключу
— синхронизация списков с «перепришедшими» объектами

⚠️ Если o[key] бывает undefined/null, такие элементы схлопнутся в один (останется последний).

📍 Навигация: [Вакансии]

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

#readme #js

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

Middle Frontend-разработчик — от 120 000 до 170 000 ₽, удаленно (Москва)

Разработчик React / TypeScript — от 180 000 до 300 000 ₽, офис/гибрид (Москва)

Junior Frontend — 122 000 ₽, офис (Питер)

➡️ Больше офферов в канале: @jsdevjob

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

🆕 Conform 1.16 — важное обновление для форм

♓️ useFormData() теперь вызывается только когда форма доступна

→ меньше null-проверок, стабильнее SSR
→ появился fallback

useFormData(formRef, selector, { fallback: '' })

♓️ Новый configureForms (future API)

→ единая фабрика хуков
→ полная type inference
→ FormOptionsProvider помечен deprecated

♓️ Унификация constraints

→ getConstraints вместо getZodConstraint / getValibotConstraint

♓️ Мелкие фиксы TypeScript / ESLint

📎 Источник

📍 Навигация: [Вакансии]

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

#release_digest

📒 3D-dropdown: как оживить меню без Canvas и WebGL

Интересный концепт выпадающего меню с псевдо-3D эффектом и ощущением глубины.

➕ Что использовано:

HTML — структура меню

CSS — градиентные фоны и 3D-трансформации для создания глубины (поворот элементов, перспектива, сохранение 3D-пространства)

JavaScript + jQuery Makisu — эффект «складывания» пунктов, как гармошка

🔗 Ссылка на codepen

📍 Навигация: [Вакансии]

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

#readme

🎼 Итоги State of JavaScript 2025

— TypeScript окончательно стал стандартом: типы можно отключать, и код запускается нативно в стабильном Node.js

— Vite обогнал Webpack по загрузкам и фактически стал основным сборщиком

— Влияние AI резко выросло: к концу 2025 года около 30% кода пишется с помощью ИИ

— Быстро растут инструменты: Cursor, Zed, Claude, Gemini, Copilot

🔗 Источник

📍 Навигация: [Вакансии]

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

#release_digest

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

#pixel_pause

🔍 Проверяем, сжимается ли HTML на сервере

curl -I https://site.com | grep -i content-encoding

🔵 Что значит результат:

• br / gzip → HTML сжимается, всё ок
• пусто → HTML летит без сжатия

🔵 Типичный кейс:

— Lighthouse зелёный
— JS/CSS сжаты
— страница всё равно «тяжёлая»

Часто причина — несжатый HTML (особенно при SSR).

♾ Проверка пользы сжатия:

curl -sH "Accept-Encoding: identity" https://site.com | wc -c
curl -sH "Accept-Encoding: gzip" https://site.com | wc -c

Если разница в 2–5 раз — сжатие критично.

🔵 Как должно быть:

— Content-Encoding: br или gzip
— Vary: Accept-Encoding

📍 Навигация: [Вакансии]

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

#readme