⚙️ Инструмент недели: как заменить ESLint и Prettier одним пакетом

Biome — это современный линтер и форматтер для JavaScript и TypeScript, родившийся из проекта Rome. После разделения команды часть разработчиков решила создать новый проект с открытой разработкой и фокусом на стабильности.

Зачем нужен:

🔵 Один инструмент вместо нескольких — Biome заменяет связку ESLint + Prettier, и при этом быстрее их обоих.

🔵 Максимальная скорость — благодаря Rust лентинг и форматирование выполняются мгновенно, даже на больших репозиториях.

🔵Официально выпускает и поддерживает свой плагин для VSCode. Линтинг и автофиксы работают прямо во время набора кода.

🔵 Умеет форматировать JSON, YAML и TOML, а не только JS/TS.

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

1️⃣ Установите Biome в проект:

npm install --save-dev @biomejs/biome

2️⃣ Инициализируйте конфиг:

npx biome init

3️⃣ Проверьте и отформатируйте код:

npx biome format

4️⃣ Установите официальный плагин VSCode — подсказки и автоисправления будут работать прямо в редакторе.

5️⃣ Добавьте Biome в pre-commit хуки через Husky или lint-staged — чтобы код всегда проходил проверку до пуша.

Что важно знать:

— Biome не делает сборку кода — его задача: проверять, анализировать и форматировать исходники. Для сборки используйте Vite, Webpack или SWC.

— Проект развивается очень активно, с прозрачным роадмапом и постоянными обновлениями.

— Хорошо подходит для монорепозиториев и крупных проектов, где важна скорость проверок.

🔗 Анонс последней версии

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

#буст

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

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

🐏 Июньские выпуски подкастов

1️⃣ 10 years of SolidJS with Ryan Carniato

Райан Карниато, создатель SolidJS, делится опытом 10 лет работы с этим фреймворком.

➡️ Обсуждаются основные моменты развития реактивных UI, философия SolidJS, отличия от других фреймворков.

2️⃣ Is HTML, CSS & JS still enough in 2025?

Разбор текущего состояния рынка труда в контексте фронтенд-разработки.

➡️ Обсуждается, насколько базовых знаний HTML, CSS и JavaScript достаточно для карьеры фронтенд-разработчика в 2025 году.

3️⃣ If Statements in CSS?

Сет и Уэст из Syntax разбираются в условной логике в CSS.

➡️ Рассматриваются последние подходы к динамическому применению стилей и возможности CSS для создания более умных и адаптивных интерфейсов, которые раньше требовали JavaScript.

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

#буст

😭 Как выйти из шаблона в разработке

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

Вот вопрос от подписчика, который решил поделиться своими сомнениями:

«Я построил несколько проектов с React, Next, Sass, Tailwind, Express.js и MongoDB. Все работает, но чувствую, что начал повторяться. Создаю одну и ту же структуру, настраиваю роутеры, стилизую компоненты — и всё. Хочу расширить свои знания, но не знаю, с чего начать. Может, стоит изучить AWS, но не уверен. Что бы вы порекомендовали изучить дальше?»

❓ Что посоветуете, чтобы выйти из рутины и развиваться дальше? Какие технологии или подходы стоит изучить, чтобы разнообразить проекты?

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

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

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

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

📌 Генерация компонента через CLI

Автоматизирует создание нового компонента с папкой, шаблоном, тестами и стилями за один вызов.

npx hygen component new MyComponent

Используется в React, Vue, Next.js, Svelte — где важна единая структура кода.

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

➡️ Экономит время на рутине и структуре

➡️ Упрощает командную разработку — все создают файлы по одним правилам

➡️ Легко обновлять шаблоны под новые стандарты проекта

💡 Лайфхаки:

— Можно завести несколько шаблонов: для компонентов, хуков, страниц и модулей.

— Для интерактивности используйте Plop — он задаёт вопросы и подставляет ответы в шаблон.

— Объедините генерацию с git hooks или npm run — тогда новые компоненты будут сразу проходить линтинг и тесты.

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

#буст

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

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

👀 Нужен ли Tailwind c Svelte: вот в чем вопрос

В Svelte уже есть изоляция стилей через scoped CSS, но стоит ли добавлять Tailwind? Этот инструмент был создан для React, чтобы бороться с проблемой «протекания» стилей, которая в Svelte не возникает.

✅ Зачем использовать Tailwind:

— Быстрая верстка без необходимости писать свой CSS.

— Готовая система цветов, шрифтов, отступов.

— Легко переносить классы и шаблоны между проектами.

— Если команда уже работает с Tailwind — проще не разводить свой CSS‑зоопарк.

⛔️ Почему можно обойтись без него:

— Шаблон может превратиться в мешанину из утилитарных классов.

— Для сложной анимации или кастомных эффектов Tailwind быстро становится неудобным.

— Встроенный scoped CSS в Svelte часто чище и понятнее.

— Чужой код на Tailwind порой тяжело читать и поддерживать.

А вы как думаете? Tailwind в Svelte — мастхэв или излишество? Делитесь в комментариях! ✏️

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

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

⭐️ Подборка материалов по работе с состояниями в Vue

В этой подборке мы сосредоточимся на использовании watch и watchEffect в Vue.js для отслеживания изменений в данных и выполнения действий в ответ на эти изменения.

1. Watch и WatchEffect на практике — примеры самых часто используемых компонентов вместе с наблюдателями.

2. Работа с состоянием во Vue и React — отличия, использование, как перекликаются между двумя фреймворками.

3. watch vs watchEffect — когда использовать какой подход

4. Как выбрать библиотеку для управления состоянием — преимущества и недостатки Vuex и Pinia, а также советы по выбору подходящего инструмента для вашего проекта.

5. watchEffect — введение в watchEffect, который автоматически отслеживает все реактивные зависимости внутри своей функции.

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

#свежак

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

Senior front-end developer (React) — от 380 000 ₽, удаленно (Москва)

Team Lead Frontend — от 300 000 ₽, удаленно (Москва)

Frontend-разработчик — гибрид (Москва)

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

Старший Frontend (JavaScript) разработчик — от 350 000 до 400 000 ₽, удаленно (Москва)

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

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

#свежак

🎮 Реактивность и вычисляемые свойства для фильтрации данных

Проблема: необходимо динамически обновлять интерфейс в зависимости от ввода пользователя, например, при фильтрации списка элементов.

Решение: в книге «Building Real-World Web Applications with Vue.js 3» автор показывает, как эффективно использовать реактивные данные и вычисляемые свойства для реализации фильтрации в реальном времени.

Пример кода:

<template>
  <div>
    <input v-model="searchQuery" placeholder="Поиск..." />
    <ul>
      <li v-for="item in filteredItems" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';

const items = ref([
  { id: 1, name: 'Яблоко' },
  { id: 2, name: 'Банан' },
  { id: 3, name: 'Вишня' },
]);

const searchQuery = ref('');

const filteredItems = computed(() => {
  return items.value.filter(item =>
    item.name.toLowerCase().includes(searchQuery.value.toLowerCase())
  );
});
</script>

Преимущества:

— Автоматическое обновление интерфейса без явных манипуляций с DOM.
— Легкость в реализации фильтрации для больших списков.
— Удобное и понятное API для работы с реактивностью.

➡️ Еще больше полезных книг — в нашем канале @progbook

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

#буст