💳 Подборка свежих статей

1️⃣ $220K в месяц на рендеринге JavaScript

История Prerender — как простой сервис для индексации JS-сайтов вырос в SaaS с органическим ростом и стабильной выручкой.

2️⃣ «Фулстек JavaScript: Секреты для миддлов»

Обзор книги Милесии МакГрегор: переход от middle к senior, работа с legacy, архитектурные решения в NestJS и React, DevOps-подходы и важность soft-skills.

3️⃣ SolidJS под капотом: для React-разработчиков

Перевод статьи о том, как работает реактивная библиотека без виртуального DOM: сигналы, эффекты, прокси-хранилища и ловушки вроде деструктуризации пропсов.

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

#read_watch #js #react

🔑 Ограничение частоты вызова (throttle)

Когда обработчик срабатывает слишком часто (scroll, resize, mousemove) — он грузит браузер и рендер.

➡️ Решение: ограничиваем вызовы по времени с помощью throttle.

➡️ Где пригодится:

— Индикатор прогресса при скролле;
— Drag&drop;
— Частые API-запросы (real-time).

⚡️ Экономит ресурсы и делает UI отзывчивее. Компактная реализация без lodash.

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

#readme #js

🌸 Разбор задачи на this: почему счётчик выводит NaN

Раннее мы выкладывали задачу 📎

Правильный ответ: NaN

➡️ Почему так:

— В setTimeout обычная функция → её this указывает на window (или undefined в strict).

— У глобального объекта нет count.

— undefined++ → NaN.

✅ Фикс без bind и переменных:

function Counter() {
  this.count = 0;

  this.start = function() {
    setTimeout(() => {
      this.count++;
      console.log(this.count);
    }, 1000);
  }
}

📌 Стрелочные функции берут this из окружения, а не создают свой.

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

#code_challenge #js

🐈‍⬛️ Redux vs Zustand: управление состоянием фронтенда

➡️ Redux

— Строгая архитектура и предсказуемость
— Огромное комьюнити и тулзинг
— Подходит для enterprise-приложений

➡️ Zustand

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

Голосуем реакциями:

👍 — Redux
❤️ — Zustand

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

#code_battle

⭐️ Типовая ловушка с :focus-within и :not() в формах

Многие используют эти псевдоклассы для управления состояниями форм и элементов, но есть ловушки:

➡️ Почему так:

1. :focus-within реагирует только на фокус внутри самого элемента, не на внешние события.

2. :not() может «съесть» вложенные селекторы неправильно — порядок и специфичность важны.

3. Если элемент содержит другие интерактивные элементы (кнопки, ссылки), браузер может вести себя по-разному.

➡️ Как исправить:

— Использовать более точные селекторы и отдельные правила для состояния фокуса.

— Проверять вложенные элементы: :focus-within смотрит любые потомки, не только input.

— Не смешивать :not() с сложными вложенными селекторами — часто проще добавить класс через JS.

✅ Проверяйте конкретный DOM и порядок CSS-правил.

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

#hotfix #css

⚛️ React 19.2 — что нового

Свежий релиз уже на npm.

Главные фишки:

<Activity /> — новый способ управлять частями приложения (видимые/скрытые активности, предзагрузка скрытых страниц).

useEffectEvent — решение для «ивентов» внутри эффектов без лишних перезапусков.

cacheSignal — для React Server Components, помогает правильно завершать кэшированные запросы.

Performance Tracks — новые треки в Chrome DevTools для анализа производительности.

Partial Pre-rendering — частичный пререндеринг: статику можно отдать с CDN, а динамику дорисовать позже.

📌 Плюс: обновлён eslint-plugin-react-hooks v6, поддержка Web Streams в SSR и мелкие багфиксы.

🔗 Подробности — в блоге React

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

#stack #react

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

#pixel_pause

❔ Как вернуть удалённую ветку в Git

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

Решение:

git reflog
git checkout -b my-branch <commit_hash>

➡️ Что произойдёт:

— git reflog покажет историю всех действий, даже удалённых веток,
— можно найти нужный commit_hash,
— checkout -b создаст ветку заново с того же коммита.

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

#readme #git

👍 Главные новости недели

➡️ Нативные API вместо фреймворков

Браузеры становятся самостоятельной платформой: роутинг, state и компоненты всё чаще делают без React/Vue.

➡️ Платформенная инженерия для фронтенда

Команды начинают выстраивать общие библиотеки, стандарты и инструменты. Результат — меньше техдолга и ускорение разработки.

➡️ Что нового в Svelte / SvelteKit

В свежем апдейте появились улучшения remote functions (батчинг, lazy discovery) и экспериментальная async SSR в конфигурации experimental.async.

➡️ Протокол для взаимодействия backend-агентов с фронтом

Компания CopilotKit представила AG-UI — открытый протокол + UI-слой, который стандартизирует взаимодействие агентов (AI / backend) с фронтенд-частями, делая обмен состоянием, событиями и интерфейсом «из коробки».

➡️ Новинки Vue + TresJS v5

В выпуске упоминается релиз TresJS v5 — обёртка над Three.js / WebGL, интегрированная с Vue, с улучшениями DevEx и новыми возможностями 3D-визуализаций внутри Vue приложений.

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

#release_digest

🤏 Кто быстрее достанет данные из API

➡️ React Query

— Всегда помнит, что было раньше
— Отлично справляется с хитрыми API
— Настраивается под любые сценарии

➡️ SWR

— Лаконичен и лёгок
— Быстро подхватывает свежие данные
— Идеален для простых CRUD

Голосуем:

👍 — React Query
❤️ — SWR

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

#code_battle

🔍 От CSS до Event Loop: что происходит в браузере

➡️ Как работают браузеры — рендеринг страницы

Понимание критического пути рендеринга: DOM, CSSOM, Render Tree.

➡️ CSS Triggers

Интерактивный инструмент, показывающий, какие свойства CSS вызывают перерасчёт layout и перерисовку.

➡️ How V8 Optimizes Your Code

Разбираем, как движок V8 оптимизирует JS через hidden classes и inline caching.

➡️ Event Loop: Microtasks and Macrotasks

Как работает Event Loop, микротаски и макротаски, и что это значит для асинхронного JS.

➡️ HTTP/3 vs HTTP/2: Main Performance Differences

Почему новые протоколы HTTP ускоряют загрузку страниц и улучшают UX.

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

#under_hood #css