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

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

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

#буст

🐞 Как быстрее находить и устранять баги

Вместо того чтобы часами гуглить странный баг, проще сразу задать точный вопрос. Особенно если ошибка связана с нюансами рендеринга или useEffect в Next.js — ИИ часто видит то, что пролетает мимо глаз даже опытных разработчиков.

Промпт:

Why am I getting this error in my [framework] component?
[вставь сообщение об ошибке и кусок кода]

Или конкретнее:

I'm getting a hydration error in Next.js 13 when using useEffect.
Here’s the component — how can I fix it?

Что дает промпт:

➡️ Быстрая диагностика ошибок рендеринга, хуков и async‑логики

➡️ Подсветка edge-case’ов, которые сложно заметить вручную

➡️ Конкретные рекомендации по фиксам с пояснением логики

💡 Дополнительно можно запросить:

— Альтернативные способы написания кода без ошибки

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

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

#буст

Та самая фича 😑

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

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

⭐️ Инструмент для сборки фронта без боли и конфигов

Parcel — это бандлер, который позволяет собирать фронтенд без настройки Webpack’а, Vite или Rollup. Он сам определяет, как обрабатывать файлы, и просто работает из коробки.

Зачем нужен:

➡️ Zero config — Parcel не требует настройки, просто укажи entry-файл — и он соберёт проект.

➡️Поддержка всего — работает с TypeScript, JSX, SCSS, PostCSS, Vue, Elm, Rust, WASM и даже GLSL.

➡️ Встроенный HMR — обновляет страницу без перезагрузки, работает быстро и стабильно.

➡️ Кеширование и многопоточность — ускоряет сборку даже на больших проектах.

➡️ Встроенный минификатор, tree-shaking и код-сплиттинг — ничего не нужно подключать вручную.

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

1. Установите Parcel в проект:

npm install --save-dev parcel

2. Создай простой index.html и укажи путь к JS-файлу:

<script src="./index.ts"></script>

3. Запустите дев-сервер:

npx parcel index.html

4. Соберите проект для продакшна:

npx parcel build index.html

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

— Parcel сам создаёт конфигурации Babel, TypeScript и PostCSS, но ты можешь переопределить их, если нужно.

— Поддерживает alias’ы, .env-файлы и monorepo через workspaces.

— Идеально подходит для новичков, быстрых MVP или проектов, где хочется меньше ceremony.

— Отлично сочетается с React, Vue, Preact и VanillaJS.

🔗 Последняя версия v.2.15.3

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

#буст

👀 Выбираем между PWA и нативом

Современный веб давно вышел за рамки «страниц» — PWAs поддерживают офлайн и устанавливаются как обычные приложения. Но достаточно ли этого для полной замены нативного клиента?

✅ Плюсы PWA:

— Мгновенная установка: «Добавить на главный экран» без ожидания модерации

— Автоматические обновления: пользователи всегда на последней версии (Pinterest PWA +60% конверсии)

— SEO и открытость: индексируются поисковиками — новые аудитории через Google

— Кроссплатформа: единый код для веба, Android и iOS

⛔️ Ограничения PWA:

— iOS-барьеры: фоновые уведомления и Web Push в iOS работают только в активном окне

— Ограниченный API-доступ: нет полного доступа к AR/VR, Bluetooth LE, NFC и другим системным фичам

— Системные бейджи и deep linking: натив реализует их куда глубже (SMS-связывание, Universal Links)

— Heavy-duty кейсы: игры с высокой частотой кадров, фоторедакторы или видео-стриминг требуют нативной производительности.

Когда что выбрать:

➡️ Контентные проекты (новостные сайты, e-commerce): PWA для быстрого запуска, SEO и мгновенной установки

➡️ Тяжёлые» приложения (игры, AR/VR, сложные SDK): натив для полной производительности и всех API

➡️ Гибридный подход: PWA как дополнительней канал плюс нативное ядро — лучшее из обоих миров

❓ А вы уже пробовали PWA вместо нативных? В каких проектах это сработало, а где вы всё же вернулись к «родному» коду?

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

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

⭐️ Скрытые возможности Radix UI

Radix UI — это не просто компоненты, а гибкий набор примитивов с точным контролем поведения. Вот несколько фишек, которые можно использовать:

➡️ Контролируемое состояние

Большинство компонентов (Dialog, Popover, DropdownMenu) можно открыть/закрыть вручную через open и onOpenChange. Это удобно для синхронизации с глобальным состоянием или URL.

<Dialog open={isOpen} onOpenChange={setIsOpen}>
  {/* ... */}
</Dialog>

➡️ Отключать порталы при необходимости

По умолчанию контент рендерится в body через Portal. Но если нужен рендеринг в текущем DOM (для стилизации, тестирования или ограничения области), вы можете отказаться от портала.

<Dialog.Content>
  {/* ... */}
</Dialog.Content>

➡️ Проигрывать анимации исчезновения

Radix по умолчанию удаляет элементы из DOM при скрытии. Чтобы включить CSS-анимации ухода (opacity, scale, transform), используйте forceMount.

<Dialog.Content forceMount className="fade-out-animation">
  {/* ... */}
</Dialog.Content>

➡️ Свободно комбинировать компоненты

Вы можете вкладывать один компонент в другой — например, Popover в DropdownMenu или Dialog в Tabs. Radix правильно обрабатывает фокус, события и поведение, даже в сложных вложенных интерфейсах.

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

Radix UI даёт не просто готовые элементы — он предоставляет гибкий интерфейсный слой, который адаптируется под архитектуру вашего приложения.

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

#буст

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

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

🧩 Ваш базовый стек для старта проекта

Когда берёшься за новый проект, не хочется тратить время на выбор — просто ставишь то, с чем уже давно удобно. У каждого свой набор: кому-то без Tailwind некомфортно, кто-то кидает Zustand даже в самые простые задачи.

У меня сейчас так:

– Vite
– Tailwind + shadcn/ui
– Zustand
– jQuery
– Авторизация на скорую руку

Не идеал, но работать можно. Всё лишнее — позже, если понадобится.

❓ А у вас как? Что ставите в первую очередь?

Если постик зашёл, то поддержите бустом канала 🙂

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

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

⭐️ Понимание Event Loop и async/await: как JavaScript реально работает с асинхронностью

В этой подборке — лучшие статьи, симуляторы и объяснения, которые разложат асинхронность в JS по полочкам.

➡️ Event Loop 2025 — визуальный разбор Event Loop с современными Web APIs и Workers. Показывает приоритеты микротасков и макротасков в живой модели.

➡️ How we tamed Node.js event loop lag — кейс‑стади из продакшена: как обнаруживали лаги event loop, анализировали, мониторили и устраняли.

➡️ Async Made Easy — от коллбэков до async/await, с практическими примерами и разбором перехода от callback hell к современному async.

➡️ Async/Await: What Happens Under the Hood — шаг за шагом про трансляцию await в state machine, как это работает «под капотом»

➡️ Визуальный симулятор Event Loop — интерактивный playground, который показывает стек вызовов, очередь макро- и микротасков.

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

#свежак

🚨 Вопрос на внимательность

У вас есть объект настроек по умолчанию и фрагмент кода (на картинке).

Пользователь ввёл JSON:

{«__proto__": {"polluted": true}, "isAdmin": true}

Какими будут значения defaults.isAdmin и defaults.theme после выполнения этого кода ❓

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

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