🌪 CSS-баттл

Представим: старт проекта завтра. Что возьмете в основу?

➡️ Tailwind CSS

— Быстрая верстка за счёт утилитарных классов
— Чёткий дизайн-системный язык без лишнего нейминга
— Удобно для больших команд — меньше стиля-разброда

➡️ Styled Components

— Стили прямо в компоненте → чище структура
— Динамика через пропсы без костылей
— Отличная интеграция с React, всё на JS

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

👍 — Tailwind
❤️ — Styled Components

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

#code_battle

⚡️ React vs Vue: что выберете вы

Два фреймворка, два подхода, одна вечная дискуссия.

➡️ React

— Компонентная архитектура и масштабируемость
— Огромная экосистема и сообщество
— Hooks и современный подход к состоянию

➡️ Vue

— Мгновенный старт и лёгкая интеграция
— Реактивность «из коробки»
— Понятный синтаксис для шаблонов

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

👍 — React
❤️ — Vue

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

#code_battle

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

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

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

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

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

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

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

#code_challenge #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

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

➡️ React Query

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

➡️ SWR

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

Голосуем:

👍 — React Query
❤️ — SWR

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

#code_battle

📢 Навигация по каналу

Чтобы не теряться в потоке постов, мы собрали удобную навигацию по тегам. Всё нужное — в пару кликов:

#readme — код-сниппеты, CSS-трюки, JS one-liners, команды Git/CLI

#hotfix — реальные баги и проблемы с объяснением, как их исправить

#blueprint — high-level концепции и паттерны

#under_hood — разбираем, что происходит внутри фреймворков и браузера

#stack — обзоры библиотек, плагинов, инструментов

#release_digest — все важное за неделю/месяц в одном месте: новые версии фреймворков, релизы библиотек, ссылки и краткие описания

#code_challenge — интерактивные задачи с разбором на следующий день

#code_battle — столкновение технологий или подходов

#pixel_pause— мемы, юмор и забавные истории из фронтенд-жизни

#career_merge — советы по резюме, soft skills, вопросы с собеседований, обсуждение зарплат

#ux_review — изучаем интерфейсы и UX известных сайтов и приложений

#read_watch — подборки полезных материалов: статьи, конференции, GitHub, книги

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

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

🧩 Задача на понимание устройства JS

В цикле навешиваются обработчики на элементы списка.
Однако при клике на любой пункт в консоль выводится одно и то же число 🤔

❓ Как исправить поведение, чтобы при клике выводился правильный индекс элемента:

❤️ — Заменить var i на let i

🔥 — Заменить стрелочную функцию на обычную

⚡️— Перед циклом сделать i = 0;

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

#code_challenge #js

🧠 React больше не библиотека

Когда-то он был “про view”. Теперь — серверные компоненты, Suspense, компилятор, серверные экшены. Это уже не инструмент, а целая среда. React стал фреймворком.

Только делает вид, что нет.

💬 А вы всё ещё называете его библиотекой?

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

#code_battle

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

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

ℹ️ ESLint

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

ℹ️ Biome

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

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

👍 — ESLint
❤️ — Biome

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

#code_battle