⭐️ Запускаем кастомные скрипты в 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.

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

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

#свежак

🚩 Представление числа в развернутом виде

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

Каждое слагаемое должно соответствовать значению цифры в числе, умноженной на соответствующую степень десяти.

Решение:

function expandedForm(number) {
return number
.toString()
.split('')
.map((digit, index, arr) => {
const power = arr.length - index - 1;
return digit === '0' ? '' : digit * 10 ** power;
})
.filter(Boolean)
.join(' + ');
}

Пиши своё решение и ход мыслей в комментариях! ✏️

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

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

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

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 может удержаться на вершине

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

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

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

#буст

😭 Страшно выкладывать свой код

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

Мы получили такой вопрос от подписчика и решили вынести его на обсуждение:

Я пишу проекты на React, стараюсь делать чисто, читаю про лучшие практики. Но вот проблема — я боюсь выкладывать код на GitHub или показывать его другим. Думаю: «А вдруг кто-то подумает, что я пишу криво? Что это не «по канону»?» Из-за этого торможу с пет-проектами и почти не участвую в open source.

Как вообще перебороть этот страх? Все ведь с чего-то начинают, но когда начинаешь — кажется, будто вокруг все профи.

❓ Было ли у вас ощущение, что ваш код «не готов» для чужих глаз? Что помогло почувствовать себя увереннее в этом?

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

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

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

📌 Команда дня: aspect-ratio

CSS-свойство aspect-ratio кардинально меняет подход к фиксированию пропорций блоков.

.element {
  aspect-ratio: 16 / 9;
  width: 100%;
}

💡 Что происходит: элемент автоматически сохраняет заданное соотношение сторон, независимо от ширины или высоты.

Для чего это:

➡️ Упрощает верстку адаптивных видео/картинок/контейнеров и позволяет отказаться от хитрых трюков с padding и позиционированием.

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

#буст