📌 Подборка инструментов и плагинов в 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 может удержаться на вершине

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

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

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

#буст

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

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

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

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

Для чего это:

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

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

#буст