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

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

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

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

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

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

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

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

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

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

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

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

#буст

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

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

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

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

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

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

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

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

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

🌟

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

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

🔥 Tabs vs Spaces

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

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

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

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

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

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

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

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

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

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

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

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

😎 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 механизмов

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

#свежак

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

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

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

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

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

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

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

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

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

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

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

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

#свежак

🎮 Создание пользовательского хука 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

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

#буст

🔧 Как правильно использовать 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. Для кроссбраузерности используйте полифил, как показано выше.

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

#буст

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

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