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

#pixel_pause

🦾 ESLint vs Biome: что выберете вы

Два инструмента, одна цель — чистый и красивый код. Но подходы — кардинально разные 👇

ℹ️ ESLint

— Проверенный временем стандарт
— Тысячи плагинов и правил
— Гибкая конфигурация на JS/TS
— Работает в любой экосистеме

ℹ️ Biome

— Новый формат линтинга и форматирования «в одном»
— Написан на Rust — летает даже в монорепах
— Умное кеширование и мгновенный запуск
— Простая миграция с ESLint + Prettier

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

👍 — ESLint
❤️ — Biome

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

#code_battle

🌗 Автоматическая темная тема без медиазапросов

Вместо @media (prefers-color-scheme) можно использовать color-scheme:

:root {
  color-scheme: light dark;
  background: light-dark(#fff, #111);
  color: light-dark(#111, #fff);
}

➰ Что это дает:

— Автоматическое переключение темы по системным настройкам
— Скроллбары, инпуты и формы тоже меняют стиль
— Меньше кода и больше нативности

⚙️ Поддержка: Chrome 120+, Safari 17+, Firefox 120+

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

#readme #css

🧩 Задача на область видимости

При запуске кода в консоли — ReferenceError.

❓ Почему, если ветка `if (false)` даже не выполняется:

❤️ — Переменная a находится во временной мёртвой зоне (TDZ)

🔥 — let внутри блока не создаёт TDZ

⚡️ — Ошибка синтаксиса при объявлении

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

#code_challenge #js

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

#pixel_pause

🔥 Суммирование с reduce

🏮 В примере на каждый шаг reduce создаётся новый объект (...acc)

🏮 Это значит — новая аллокация памяти и дополнительная нагрузка на GC, особенно при больших массивах

🏮 Оптимальнее использовать императивный цикл for...of, который изменяет объект напрямую — быстрее и проще читается

🎈 Рекомендации:

— Не злоупотребляйте reduce, если нужно просто накопить значения

— Для больших данных используйте явный цикл — он понятнее и быстрее

— Чистый код — это не в одну строку, а читаемый и оптимальный

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

#hotfix #js

🔗 Разбор: временная мёртвая зона

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

Правильный ответ: переменная `a` находится во временной мёртвой зоне (TDZ)

🔛 Что происходит:

JS делит выполнение на две фазы:

1. Инициализация (создание окружения) — компилятор видит let a = 2 внутри функции и создаёт для неё локальную переменную a.

2. Выполнение — когда доходит до console.log(a), движок уже знает о локальной a, но она ещё не инициализирована.

⚠️ Поэтому обращение к ней до строки let a = 2 вызывает ReferenceError, даже если код в if не выполнится.

❗️ Это и есть Temporal Dead Zone (TDZ) — период между созданием переменной и её инициализацией, когда доступ к ней невозможен.

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

#code_challenge #js