🤗🤗

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

#pixel_pause

⭐️ Небольшая задачка на логику

Посмотрите на код (он в картинке 👆).

Какой ответ выведет консоль ❓

Объясните, почему вывод именно такой. Почините код, чтобы выводилось корректное значение счётчика.

Подсказка: исправьте код без использования bind и дополнительных временных переменных.

Ответ в комментах скрывайте под спойлер 😉

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

#code_challenge #js

🔥 Проп-спрединг без фильтрации

На картинке 3 ситуации:

➡️ Передали ...props в корневой <div> → в DOM улетают лишние атрибуты

➡️ Поймали warning в консоли и начали гадать откуда он

➡️ Правильный вариант → деструктурируем нужные props и явно прокидываем

⌨️ Рекомендации:

— Никогда не спредьте всё подряд в корень

— Лишние атрибуты → лишние баги

— Чётко указывайте только то, что действительно нужно в DOM

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

#hotfix #react

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

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