🎮 Управление состоянием с использованием useReducer

Проблема: управление сложным состоянием в React-приложении может стать трудным и запутанным, особенно при наличии множества состояний и действий.

Решение: в книге «Learn React Hooks, 2nd Edition» автор предлагает использовать хук useReducer для централизованного управления состоянием. Это позволяет более эффективно обрабатывать сложные состояния и действия.

Пример кода:

import React, { useReducer } from 'react';

const initialState = { count: 0 };

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      throw new Error();
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    <>
      <p>Count: {state.count}</p>
      <button onClick={() => dispatch({ type: 'increment' })}>Increment</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>Decrement</button>
    </>
  );
}

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

— Централизованное управление состоянием.
— Лёгкость в добавлении новых состояний и действий.
— Чистота и предсказуемость кода.

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

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

#буст

Читать полностью…

☝️ Последний шанс купить курсы Proglib Academy с доступом навсегда!

Это не просто летняя распродажа, это финал эпохи. Мы дарим скидку 40% на все курсы, включая полностью обновлённый курс по Python (предложение НЕ ДЕЙСТВУЕТ только на курс по AI-агентам для DS-специалистов).

Но главное: с 1 августа доступ ко всем новым курсам станет ограниченным. Успейте инвестировать в свои знания на самых выгодных условиях!

👉 Выбрать курс

Читать полностью…

🎮 Прокачка без курсов: сам себе ментор и тренажер

Подборка интерактивных ресурсов, которые помогут прокачать навыки на практике.

➡️ Flexbox Froggy — классика, которая не стареет: расставляй лягушек по лилиям через Flexbox.

➡️ LittleJS Games / Code Sketches — набор мини-игр, написанных на ванильном JS. Можно редактировать и запускать прямо в браузере.

➡️ JavaScript30 от Wes Bos — 30 мини-проектов без фреймворков: часы, видеоплееры, слайдеры.

➡️ RegexLearn — интерактивное обучение регулярным выражениям: объясняет каждую часть и даёт практику с фидбеком.

➡️ JS Challenger — задачи с автофидбеком по темам: строки, числа, объекты, массивы.

➡️ CSSBattle — нестандартный челлендж: воссоздай фигуру минимальным CSS-кодом.

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

#свежак

Читать полностью…

1 строчка кода — дебаты на 17 комментариев 😁

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

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

Читать полностью…

🖥 Фишка инструмента: типо-осведомлённый линт без TypeScript

Biome умеет ловить ошибки с промисами (например, забытые await) даже в обычном JS, без TypeScript.

Например:

button.addEventListener('click', async () => {
  fetch('/api')
})

Biome подсветит: «у вас async-функция возвращает промис, и он не обработан» → потенциальная утечка ошибок.

✅ ESLint такое ловит только с TypeScript и кучей плагинов.

✅ Biome делает это быстро и без лишнего шума.

✅ Работает через правило noFloatingPromises, включается одной строкой в biome.json

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

#буст

Читать полностью…

🐶 Как отладить CSS, чтобы он не ломался в Safari и не стыдно было читать

Вёрстка может выглядеть по-разному на разных браузерах. Этот промпт поможет вам улучшить поддержку кросс-браузерных решений и сделать код более понятным и удобным.

Промпт:

Review my CSS and fix cross-browser issues, improve maintainability, and add comments explaining non-obvious parts.

Чем полезен:

➡️ Показывает несовместимые свойства и предлагает fallbacks

➡️ Рефакторит дублирующиеся или переопределяющиеся правила

➡️ Добавляет комментарии к нестандартным решениям, чтобы через месяц не забыть

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

— Советы по организации CSS (например, BEM, layers, atomic CSS)

— Рекомендации по улучшению производительности (критические стили, purge)

— Интеграцию с Autoprefixer или PostCSS

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

#буст

Читать полностью…

❗ Первый вебинар нашего курса по AI-агентам уже прошёл!

Запись уже выложили на обучающей платформе — можно влетать и догонять с комфортом.

Первые слушатели уже оставили фидбэки — и, кажется, мы попали в точку:
— «теперь наконец понял, как выбирать модели под задачу — раньше брал первую попавшуюся»
— «без лишнего, по делу, в лайве — кайф»
— «огонь, ожидания 100% оправданы лично у меня»

Если хотели вписаться, но сомневались — ещё не поздно. Вебинары идут вживую, записи сохраняются, чат работает, материалы открыты.

⏳ Ещё можно догнать и пройти всё вместе с потоком.

👉 Залетай на курс

Читать полностью…

👍 Как поднять резюме в топ на HeadHunter

Вы знаете React, пишете чистый код, но просмотров на HH — ноль. Почему? Потому что резюме видит не человек, а алгоритм. И его нужно уметь обойти.

Что в карточках:

➡️ Почему указывать город «Москва» — это не обман, а стратегия

➡️ Когда и зачем поднимать резюме вручную

➡️ Какие навыки стоит подтверждать прямо на HH

➡️ Как ключевые слова реально влияют на выдачу

➡️ И зачем фронтендеру видеовизитка

Если хотите, чтобы вас звали на собесы — начни с видимости. Алгоритм не простит пассивность.

🔗 Полный текст статьи — по ссылке

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

Читать полностью…

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

Front-End Developer — 4 000 —‍ 4 200 $, удаленно

Frontend-верстальщик с базовым знанием React — удаленно

Javascript Vue разработчик — до 200 000 ₽, удаленно (Москва)

Frontend-разработчик — до 430 000 ₽, удаленно (Москва)

Frontend-разработчик (React) — удаленно (Казань)

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

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

#свежак

Читать полностью…

😎 React Reconciliation под капотом

Разберемся, как работает сравнение виртуального DOM, зачем нужны ключи и как React сохраняет состояние при обновлении. Видео и статьи — от гайдовых до настоящего deep dive.

➖ Build Your Own Virtual DOM: Understanding React’s Reconciliation Algorithm — пошаговый гайд: строительство VDOM, diff, patch своими руками

➖ Understanding React’s Reconciliation Algorithm: How It Efficiently Updates the DOM — рациональные принципы: TypeMatcher, ContentWatcher, KeyMaster

➖ React Reconciliation: The Hidden Engine Behind Your Component — сильное deep dive с примерами про сохранение state, identity, key и позицию в дереве

➖ Under the Hood: Understanding React’s Reconciliation Algorithm — свежий доклад о внутренностях reconciliation (можно взять из плейлиста/таймлайн)

➖ The Heart of React || How React works under the hood — отличное объяснение reconciliation, Fiber, rebuilding/rendering механизмов

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

#свежак

Читать полностью…

🌟

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

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

Читать полностью…

🔵 Future Frontend 2025 — конференция для фронтендеров доступна в записи

27–28 мая в Финляндии прошло масштабное мероприятие для разработчиков, дизайнеров и UI-инженеров со всего мира.

Что обсуждали:

➡️ Новые возможности Chrome DevTools

➡️ Как проектировать дизайн-системы без привязки к фреймворкам

➡️ Что нового в React Server Components и Next.js

➡️ Как AI и LLM применяются в браузере

➡️ Защита фронтенда от пентестеров и реверса

🔗 Смотреть в записи:

День 1 — DevTools, дизайн-системы, AI-демо

День 2 — React, доступность, безопасность, AI и ML

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

#буст

Читать полностью…

🌻 Пишем код, который V8 будет любить

В первой части мы разобрали, как движок V8 исполняет JavaScript, теперь — как писать код, который работает на полной скорости.

Что внутри карточек:

➡️ Как работает Inline Caching и когда оно ломается

➡️ Что такое Hidden Classes и почему важен порядок свойств

➡️ Как движок избавляется от «мёртвого» кода

➡️ Как оптимизировать async/await и циклы

➡️ Какие антипаттерны тормозят V8

🔗 Полный текст статьи по ссылке

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

Читать полностью…

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

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

Читать полностью…

📌 Команда дня: очистка кэша и зависимостей

Полная зачистка проекта, когда «ничего не работает, а вчера работало».

rm -rf node_modules dist .vite && npm cache clean --force && npm install

Используется при переходе между ветками, конфликте зависимостей или странных сборках 💡

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

— Удаляет артефакты и кэш, которые могут ломать сборку.

— Позволяет начать «с нуля» без удаления проекта.

— Помогает при миграции зависимостей или обновлении сборщиков.

Лайфхаки:

➡️ Добавьnt alias в .zshrc или .bashrc:

alias resetnode="rm -rf node_modules dist .vite && npm cache clean --force && npm install»

➡️ Для monorepo можно чистить весь workspace:

rm -rf node_modules && lerna clean && lerna bootstrap

➡️ Если используете pnpm:

pnpm store prune && pnpm install --force

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

#буст

Читать полностью…

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

Junior Frontend Developer (React) — от 160 000 ₽, офис/гибрид (Москва)

Frontend-разработчик JavaScript — 130 000 - 165 000 ₽, удаленно (Санкт-Петербург)

Software Engineer (JavaScript) — 4 000 - 5 500$, удаленно (США)

Эксперт по web-разработке — 200 000 —‍ 240 000 ₽, удаленно (Москва)

Senior Front-End Developer — от 200 000 ₽, удаленно (Москва)

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

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

#свежак

Читать полностью…

❓ Задача: лишний ререндер

Вы заметили, что компонент повторно рендерится при каждом изменении родителя, хотя его пропсы остаются теми же.

В коде используется функциональный компонент, передаётся onClick, определённый внутри родителя как анонимная функция.

Как можно избежать лишнего рендера этого компонента? 😐

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

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

Читать полностью…

🚬 Не фича, а почти рефлекс фронтенда

Подсказка: он не виден на экране, но без него интерфейс — просто картинка. Тихий наблюдатель, который просыпается при первом твоём движении.

Какой термин зашифрован! Пишите свою версию ✏️

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

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

Читать полностью…

❓ Как работает Drag and Drop в HTML5

На собеседовании могут спросить, что такое Drag and Drop API, какие события в него входят и как реализовать перетаскивание без библиотек.

В карточках разберем:

➡️ Является ли Drag and Drop частью HTML-спецификации

➡️ Как работает встроенный API и какие события участвуют

➡️ Пример реализации перетаскивания на чистом JS

➡️ Когда лучше отказаться от стандартного API и чем его заменить

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

Читать полностью…

🔑 Как я решал проблему с аутентификацией через OAuth2 в SPA

Один из подписчиков поделился своим опытом:

«Когда мы начали интегрировать OAuth2 для аутентификации в нашем SPA на React, проблемы начали сыпаться одна за другой. Хранение токенов, обновление сессий без перезагрузки страницы — всё это стало настоящим головным болем.

Мы решили хранить токены в httpOnly cookie для безопасности — так они менее уязвимы для атак. Но вот как обновить их, не теряя сессию?

Тогда мы написали кастомный хук, который управляет аутентификацией и следит за обновлением токенов в фоне. Это немного облегчило жизнь и сделало обновление сессии почти незаметным для пользователя.

Добавили небольшой интерцептор для axios, который автоматически добавлял свежий токен в заголовки запросов, если он был обновлён. Всё заработало как часы, и пользователи больше не сталкивались с проблемами сессий.»

❓ А вы сталкивались с подобными трудностями при интеграции OAuth2? Как решали такие задачи?

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

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

Читать полностью…

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

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

Читать полностью…

🔧 Как правильно использовать requestIdleCallback для второстепенных задач

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

Почему важно:

📍 Делает сайт отзывчивее

📍 Переносит «тяжёлые» задачи на потом

📍 Улучшает производительность без ущерба для UX

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

1. Запускаем задачу, когда браузер «свободен»:

requestIdleCallback(() => {
  // Эта операция не помешает UI
  localStorage.setItem('draft', JSON.stringify(formData));
});

2. Полифил для браузеров без поддержки (например, Safari, Firefox):

const ric = window.requestIdleCallback || function (cb) {
  return setTimeout(() => cb({ timeRemaining: () => 0 }), 1);
};

3. Пример: предзагрузка данных во время простоя

requestIdleCallback(() => {
  fetch('/api/hints')
    .then(res => res.json())
    .then(storeHints);
});

4. Используем timeRemaining() для контроля:

requestIdleCallback(deadline => {
  while (deadline.timeRemaining() > 0 && tasks.length) {
    runTask(tasks.pop());
  }
});

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

— Метрики и логирование

— Предзагрузка и кеширование

— Фоновая запись в IndexedDB

— Подсказки, превью и прочий «сервисный» UI

⚠️ requestIdleCallback не поддерживается в Safari и Firefox. Для кроссбраузерности используйте полифил, как показано выше.

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

#буст

Читать полностью…

🎮 Создание пользовательского хука useFormStatus

Проблема: повторное использование логики состояния формы может привести к дублированию кода и усложнению поддержки.

Решение: в книге «Learn React Hooks, 2nd Edition» автор предлагает создать пользовательский хук useFormStatus для инкапсуляции логики состояния формы, что позволяет повторно использовать её в разных компонентах.

Пример кода:

import { useState } from 'react';

function useFormStatus() {
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [error, setError] = useState(null);

  const submit = async (action) => {
    setIsSubmitting(true);
    try {
      await action();
    } catch (err) {
      setError(err);
    } finally {
      setIsSubmitting(false);
    }
  };

  return { isSubmitting, error, submit };
}

function LoginForm() {
  const { isSubmitting, error, submit } = useFormStatus();

const handleSubmit = () => {
    submit(async () => {
      // Асинхронная отправка данных
    });
  };

  return (
    <form onSubmit={handleSubmit}>
      <button type="submit" disabled={isSubmitting}>
        {isSubmitting ? 'Submitting...' : 'Submit'}
      </button>
      {error && <p>{error.message}</p>}
    </form>
  );
}

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

— Инкапсуляция логики состояния формы.
— Повторное использование кода.
— Упрощение компонентов форм.

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

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

#буст

Читать полностью…

⭐️ Как поведёт себя элемент с box-sizing: content-box

Выше — фрагмент HTML и CSS.

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

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

Читать полностью…

🔥 Tabs vs Spaces

Каждый разработчик хотя бы раз втягивался в бой века: пробелы или табы? Это не просто про форматирование — это про стиль, привычку и философию кода.

📍 Табы — за минимализм и гибкость

— Один символ = один отступ

— Легко настраиваются в редакторе

— Меньше вес файла, чище диффы в Git

📍 Пробелы — за контроль и стабильность

— Код выглядит одинаково у всех

— Нет сюрпризов в разных IDE

— Большинство линтеров и гайдлайнов требуют пробелы

Пишите в комментариях, чем вы пользуетесь и почему именно так. И главное — были ли конфликты из-за этого в команде? ✏️

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

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

Читать полностью…

🧑‍💻 Какой самый спорный код-ревью вы проходили

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

Вопрос от подписчика:

«На одном из код-ревью мне написали: «Зачем ты делаешь четвертый кастомный компонент таблицы?», потом пошло: «Что за !important в стилях?», и вишенка — «Файл с 1000+ строк JSX — ты в порядке?». Вроде всё работало, но обсуждение было жёстким. Интересно — у других тоже бывает так?»

❓ А у вас были похожие случаи? Когда приходилось объяснять нестандартное решение или доказывать, что «так лучше»?

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

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

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

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

Читать полностью…

🧠 «Поиграйся с LLM, почитай про агентов — и сам поймёшь, как это работает»

Это один из самых бесполезных советов, который мы слышали в адрес тех, кто хочет разобраться в AI-агентах.

Поиграйся — это как?
Потыкать пару промптов в ChatGPT и решить, что теперь ты можешь строить мультиагентные системы? 🤡 Ну-ну.

AI-агенты — это не «очередная обёртка над GPT». Это архитектура. Состояния, инструменты, цепочки вызовов, память, оценка качества и адекватность поведения.

➡️ Чтобы разобраться, нужно:
— понимать, как устроен LLM под капотом
— уметь подключать внешние данные (RAG, retrievers, rerankers)
— уметь масштабировать и дебажить поведение агентов
— разбираться в фреймворках вроде AutoGen, CrewAI, LangChain
— знать, как всё это тащится в прод

Если вы реально хотите не «поиграться», а научиться собирать рабочие агентные системы — у нас стартует курс по разработке ИИ-агентов 5го июля

P.S: не упусти свой шанс, промокод: LASTCALL на 10.000₽

Читать полностью…

⭐️ Чеклист: CI для фронтенда

CI — ваш честный ревьюер. Он проверит, не забыли ли вы запустить тесты, форматировать код и не сломал ли билд.

1️⃣ Автоматическая сборка проекта

— Убедитесь, что build проходит на каждом коммите

— Добавьте проверку на размер бандла (webpack-bundle-analyzer, size-limit)

— Сравнивайте метрики между коммитами (например, с CI compare или Bundlewatch)

➡️ npm run build, vite build, next build

2️⃣ Линтинг и форматирование

— Настройте ESLint (с правилами под ваш стек: React, TS и т.д.)

— Подключите Prettier с автоформатированием

— Проверяйте линт перед пушем через lint-staged и husky

➡️ eslint ., prettier --check .

3️⃣ Юнит- и интеграционные тесты

— Запускайте тесты на каждый PR

— Покрывайте бизнес-логику, хуки, компоненты

— Минимум: jest + @testing-library/react

➡️ jest --coverage, vitest, c8

4️⃣ Проверка типов

— Включите строгую проверку TypeScript

— Ошибки типов — повод не пускать PR в main

— Не забудьте проверить .d.ts и внешние типы

➡️ tsc --noEmit, tsc -p tsconfig.json

5️⃣ Проверка production-конфига

— Убедитесь, что .env.production загружается правильно

— Добавьте в CI проверку на наличие всех нужных переменных

— Прогоните Lighthouse/Pa11y, если хочется extra-модуль

➡️ dotenv-linter, dotenv-cli, pa11y-ci

6️⃣ Визуальные/регрессионные тесты (опционально)

— Снимайте скриншоты UI (Storybook + Chromatic, Percy)

— Ловите баги до ревью

— Можно запускать раз в день/неделю в cron-режиме

7️⃣ Бейджики и отчёты

— Добавтеь бейджи покрытия, билда и линта в README

— Публикуйте отчёты в MR/PR

— Настройте уведомления в Telegram/Slack

➡️ Codecov, Coveralls, GitHub Actions Summary

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

#буст

Читать полностью…

🔥 Последняя неделя перед стартом курса по AI-агентам

Старт курса уже 5го числа! Если вы планировали вписаться — сейчас ПОСЛЕДНИЙ шанс забронировать место

На курсе:
— разложим LLM по косточкам: токенизация, SFT, PEFT, инференс
— соберём RAG и научимся оценивать его адекватно
— построим настоящую мультиагентную систему — архитектуру, которая умеет расти
— разберём CoPilot, сломаем через prompt injection (спасибо Максу)
— и наконец, посмотрим, как это работает в MCP и реальных кейсах

📍 Это 5 живых вебинаров + раздатка + домашки + чат с преподавателями

И главное — возможность реально разобраться, как проектировать системы на LLM, а не просто «поиграться с API»

👉 Курс здесь

Читать полностью…

⭐️ Как JavaScript исполняется под капотом V8 — и что с этим делать тебе

Вы пишите let x = 1 + 2, а под капотом V8 уже строит синтаксическое дерево, генерирует байт-код и думает, стоит ли компилировать это в машинный код.

Что в карточках:

➡️ Как V8 парсит и интерпретирует код

➡️ Что делает TurboFan и зачем нужен байт-код

➡️ Как работает сборка мусора

➡️ И почему порядок добавления свойств в объект — это не мелочь

Если хотите писать реально быстрый JS, нужно понимать, как его читает движок.

🔗 Полный текст статьи по ссылке

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

Читать полностью…