📌 Команда дня: очистка кэша и зависимостей

Полная зачистка проекта, когда «ничего не работает, а вчера работало».

rm -rf node_modules dist .vite && npm cache clean --force && npm install

Используется при переходе между ветками, конфликте зависимостей или странных сборках 💡

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

— Удаляет артефакты и кэш, которые могут ломать сборку.

— Позволяет начать «с нуля» без удаления проекта.

— Помогает при миграции зависимостей или обновлении сборщиков.

Лайфхаки:

➡️ Добавьnt alias в .zshrc или .bashrc:

alias resetnode="rm -rf node_modules dist .vite && npm cache clean --force && npm install»

➡️ Для monorepo можно чистить весь workspace:

rm -rf node_modules && lerna clean && lerna bootstrap

➡️ Если используете pnpm:

pnpm store prune && pnpm install --force

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

#буст

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

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

⭐️ Чеклист: CI для фронтенда

CI — ваш честный ревьюер. Он проверит, не забыли ли вы запустить тесты, форматировать код и не сломал ли билд.

1️⃣ Автоматическая сборка проекта

— Убедитесь, что build проходит на каждом коммите

— Добавьте проверку на размер бандла (webpack-bundle-analyzer, size-limit)

— Сравнивайте метрики между коммитами (например, с CI compare или Bundlewatch)

➡️ npm run build, vite build, next build

2️⃣ Линтинг и форматирование

— Настройте ESLint (с правилами под ваш стек: React, TS и т.д.)

— Подключите Prettier с автоформатированием

— Проверяйте линт перед пушем через lint-staged и husky

➡️ eslint ., prettier --check .

3️⃣ Юнит- и интеграционные тесты

— Запускайте тесты на каждый PR

— Покрывайте бизнес-логику, хуки, компоненты

— Минимум: jest + @testing-library/react

➡️ jest --coverage, vitest, c8

4️⃣ Проверка типов

— Включите строгую проверку TypeScript

— Ошибки типов — повод не пускать PR в main

— Не забудьте проверить .d.ts и внешние типы

➡️ tsc --noEmit, tsc -p tsconfig.json

5️⃣ Проверка production-конфига

— Убедитесь, что .env.production загружается правильно

— Добавьте в CI проверку на наличие всех нужных переменных

— Прогоните Lighthouse/Pa11y, если хочется extra-модуль

➡️ dotenv-linter, dotenv-cli, pa11y-ci

6️⃣ Визуальные/регрессионные тесты (опционально)

— Снимайте скриншоты UI (Storybook + Chromatic, Percy)

— Ловите баги до ревью

— Можно запускать раз в день/неделю в cron-режиме

7️⃣ Бейджики и отчёты

— Добавтеь бейджи покрытия, билда и линта в README

— Публикуйте отчёты в MR/PR

— Настройте уведомления в Telegram/Slack

➡️ Codecov, Coveralls, GitHub Actions Summary

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

#буст

🔵 Future Frontend 2025 — конференция для фронтендеров доступна в записи

27–28 мая в Финляндии прошло масштабное мероприятие для разработчиков, дизайнеров и UI-инженеров со всего мира.

Что обсуждали:

➡️ Новые возможности Chrome DevTools

➡️ Как проектировать дизайн-системы без привязки к фреймворкам

➡️ Что нового в React Server Components и Next.js

➡️ Как AI и LLM применяются в браузере

➡️ Защита фронтенда от пентестеров и реверса

🔗 Смотреть в записи:

День 1 — DevTools, дизайн-системы, AI-демо

День 2 — React, доступность, безопасность, AI и ML

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

#буст

🧑‍💻 Какой самый спорный код-ревью вы проходили

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

Вопрос от подписчика:

«На одном из код-ревью мне написали: «Зачем ты делаешь четвертый кастомный компонент таблицы?», потом пошло: «Что за !important в стилях?», и вишенка — «Файл с 1000+ строк JSX — ты в порядке?». Вроде всё работало, но обсуждение было жёстким. Интересно — у других тоже бывает так?»

❓ А у вас были похожие случаи? Когда приходилось объяснять нестандартное решение или доказывать, что «так лучше»?

Поделитесь опытом в комментариях ⬇️

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

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

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

🌟

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

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

🔥 Tabs vs Spaces

Каждый разработчик хотя бы раз втягивался в бой века: пробелы или табы? Это не просто про форматирование — это про стиль, привычку и философию кода.

📍 Табы — за минимализм и гибкость

— Один символ = один отступ

— Легко настраиваются в редакторе

— Меньше вес файла, чище диффы в Git

📍 Пробелы — за контроль и стабильность

— Код выглядит одинаково у всех

— Нет сюрпризов в разных IDE

— Большинство линтеров и гайдлайнов требуют пробелы

Пишите в комментариях, чем вы пользуетесь и почему именно так. И главное — были ли конфликты из-за этого в команде? ✏️

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

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

😎 React Reconciliation под капотом

Разберемся, как работает сравнение виртуального DOM, зачем нужны ключи и как React сохраняет состояние при обновлении. Видео и статьи — от гайдовых до настоящего deep dive.

➖ Build Your Own Virtual DOM: Understanding React’s Reconciliation Algorithm — пошаговый гайд: строительство VDOM, diff, patch своими руками

➖ Understanding React’s Reconciliation Algorithm: How It Efficiently Updates the DOM — рациональные принципы: TypeMatcher, ContentWatcher, KeyMaster

➖ React Reconciliation: The Hidden Engine Behind Your Component — сильное deep dive с примерами про сохранение state, identity, key и позицию в дереве

➖ Under the Hood: Understanding React’s Reconciliation Algorithm — свежий доклад о внутренностях reconciliation (можно взять из плейлиста/таймлайн)

➖ The Heart of React || How React works under the hood — отличное объяснение reconciliation, Fiber, rebuilding/rendering механизмов

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

#свежак