⭐️ Запускаем кастомные скрипты в WebStorm

В больших проектах рутина часто повторяется — запуск тестов, сборка, форматирование, генерация кода. Автоматизация через кастомные скрипты — лучший способ ускорить работу. Но еще руче — запускать их одним нажатием клавиши.

1️⃣ Создаем External Tool

➡️ В меню: File > Settings > Tools > External Tools

➡️ Добавьте новый инструмент, указав путь к скрипту (например, npm run lint или bash-скрипт) и настройте рабочую директорию

2️⃣ Привяжем горячую клавишу

➡️ Перейдите в Settings > Keymap и в поиске введите название External Tool

➡️ Правый клик → Add Keyboard Shortcut → назначь удобную комбинацию

💡 Комбинируйте запуск скриптов с WebStorm Live Templates и макросами для ещё более мощного ускорения.

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

#буст

🤨 Как избежать ошибок при использовании useEffect в React

useEffect — один из самых мощных, но одновременно и самых коварных хуков в React. Даже опытные разработчики порой сталкиваются с неожиданным порядком выполнения эффектов.

О чем статья:

📍 Как работает useEffect и как избежать типичных ошибок

📍 Почему порядок вызова эффектов зависит от React Fiber

📍 Чем useLayoutEffect отличается от useEffect

📍 Как понимать жизненный цикл компонентов через призму архитектуры React

С примерами, визуализациями и разбором кода — всё, что нужно для глубокого понимания и уверенной работы с эффектами в React 🔗

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

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

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

🧠 Проверьте внимательность и интуицию

В тексте на картинке скрылись 5 названий популярных фронтенд-технологий. Некоторые замаскированы, другие — спрятаны внутри слов или фраз.

Получилось найти хотя бы три? Пишите ответ в комментариях ✏️

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

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

📌 Подборка инструментов и плагинов в Figma

🔵 Figma to Code — автоматическая генерация React/HTML/Flutter кода из макетов.

➤ Отлично подходит для быстрой верстки прототипов и MVP.

🔵 Design Lint — помогает находить несогласованные отступы, цвета, стили и т.д.

➤ Снижает количество дизайнерских багов до передачи в разработку.

🔵 Figma Tokens — управление дизайн-токенами (цвета, типографика, spacing) напрямую в Figma.

➤ Подходит для проектов с дизайн-системами.

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

#свежак

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

Frontend Developer — 150 000 - 250 000 ₽, удаленно (Москва)

Teamlead Frontend (Vue) — удаленно (Москва)

Middle Frontend-разработчик — от 80 000 до 150 000 ₽, удаленно/офис (Краснознаменск)

Fullstack разработчик JS/TS — 150 000 —‍ 250 000 ₽, удаленно (Санкт-Петербург)

Fullstack-разработчик — удаленно (Санкт-Петербург)

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

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

#свежак

💻 Как обновить страницу без перезагрузки с Vite + HMR

Когда вы вносите правку, а браузер не мигает, не сбрасывает форму, не роняет состояние — это магия, имя которой Hot Module Replacement (HMR).

1️⃣ Используем Vite

npm create vite@latest my-app --template react
cd my-app
npm install
npm run dev

➡️ Из коробки вы получаете мгновенное обновление компонентов React (или Vue/Svelte), без перезагрузки всей страницы.

Что реально происходит:

⏺ Изменения в коде детектятся

⏺ Только изменённый модуль перезагружается

⏺ Состояние сохраняется (например, открытая вкладка или введённый текст)

Как можно кастомизировать:

// vite.config.js
export default defineConfig({
  server: {
    hmr: {
      overlay: true, // показывает ошибки прямо в браузере
    },
  },
})

➡️ Можно отключить overlay или переопределить WebSocket-порт, если используете Docker или WSL.

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

#буст

⚙️ Инструмент недели: CSS Peeper — стили сайта одним кликом

CSS Peeper — это минималистичное расширение для Chrome, которое позволяет мгновенно просматривать основные CSS-стили страницы: цвета, типографику и размеры элементов — удобно и наглядно.

Зачем нужен:

➡️ Быстро показывает ключевые параметры интерфейса — шрифты, цвета, отступы — без лишнего шума. Подходит для анализа чужих решений и поиска вдохновения.

➡️ Автоматически собирает используемые оттенки и отображает их в виде палитры.

➡️ Не перегружен данными, в отличие от DevTools: отображает только важную визуальную информацию.

➡️ Позволяет загружать ассеты (иконки, изображения) напрямую из интерфейса.

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

1⃣ Устанавливаем расширение

2⃣ Заходим на любой сайт, кликаем по иконке CSS Peeper в панели расширений

3⃣ Получаем чистый, аккуратный отчёт: цвета, шрифты, размеры и ассеты

А если хочется как профи:

📍 Используйте для декомпозиции чужих UI-решений и построения своих дизайн-систем

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

📍 Анализируйте лендинги без копания в DOM и стилях вручную

💡 Полезные материалы:

— Сайт CSS Peeper: подробное описание возможностей, тарифов и последних обновлений.

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

#буст

Знакомая ситуация? ✨

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

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

😋 Никаких новых фреймворков — только React

Theo рассуждает, действительно ли React — финальная точка эволюции фронтенда. Почему экосистема вокруг него стала важнее самого фреймворка, и что могут противопоставить Svelte, Solid или Qwik?

3 причины посмотреть:

➡️ Чёткий обзор фронтенд-ландшафта 2025

➡️ Аргументированный разбор, почему React может удержаться на вершине

➡️ Мнения без хайпа — только по делу

🔗 Смотреть видео

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

#буст