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

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

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

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

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

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

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

#code_challenge #js

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

#pixel_pause

🔥 Избыточный ререндер из-за анонимных функций

➕ В компоненте на каждый рендер создаются новые функции (onClick={() => …})

➕ Из-за этого дочерние компоненты получают новые пропсы и ререндерятся без причины

➕ Решение — вынести коллбэк наружу или обернуть в useCallback

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

— Не создавайте функции прямо в JSX

— Используйте useCallback при передаче хендлеров в дочерние компоненты

— Особенно критично для списков и больших UI

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

#hotfix #react

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

1⃣ Создаем иммерсивную трехмерную визуализацию погоды

Пошаговое руководство по симуляции солнца, дождя, снега и грозы в интерактивном трехмерном приложении для прогноза погоды.

2⃣ Почему @starting-style не заменит keyframes

Автор показывает, что за красивым синтаксисом скрываются подводные камни специфичности и неожиданные баги, из-за которых старые добрые keyframes по-прежнему оказываются надёжнее.

3⃣ Почему исходный код TypeScript усеян var-ами

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

#read_watch #react #js #ts

👀 Проверяем, является ли строка палиндромом

Палиндром — это слово или фраза, которые читаются одинаково в обе стороны:
level, madam, А роза упала на лапу Азора.

const isPalindrome = str =>
  (s = str.toLowerCase().replace(/[^a-zа-яё0-9]/gi, '')) === [...s].reverse().join('');

🦾 Как это работает:

• toLowerCase() — приводит строку к одному регистру.

• replace(/[^a-zа-яё0-9]/gi, '') — убирает все символы, кроме букв и цифр.

• [...s].reverse().join('') — переворачивает строку.

• Сравниваем оригинал и перевёрнутую версию.

💡 Если важна производительность и память, используем цикл без создания копий строки:

function isPalindrome(str) {
  const s = str.toLowerCase().replace(/[^a-zа-яё0-9]/gi, '');
  for (let i = 0, j = s.length - 1; i < j; i++, j--) {
    if (s[i] !== s[j]) return false;
  }
  return true;
}

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

#readme #js

🏗️ Plugin Architecture во фронтенде

Обычно приложения растут вширь — и рано или поздно перестают помещаться в одну кодовую базу.

Плагинная архитектура решает эту проблему иначе: ядро остаётся стабильным, всё остальное — расширения.

⏬ Как это работает:

Есть core — минимальная часть с бизнес-правилами, безопасностью, логированием и общими утилитами.

А вокруг — плагины, которые подключаются через публичный API или события. Ядро не знает о них ничего — только о контракте.

⏬ Зачем это нужно:

— модульность и независимые релизы
— возможность кастомизации под клиента или регион
— развитие без трогания основного кода

🔆 VS Code, Figma, Obsidian, Grafana — все построены на этой идее.

⏯ Когда не подойдёт:

— если нет строгого API
— если плагины тесно зависят от общей логики
— если команда одна и продукт небольшой

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

#blueprint

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

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

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

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

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

#code_battle

🔑 Ключ, который ломал всё

Иногда одна мелочь рушит весь интерфейс. Компонент внезапно сбрасывает состояние и анимации — а виноват всего один key. Раньше использовался Math.random(), и React каждый раз считал, что элементы новые.

В итоге он пересоздавал их с нуля — с потерей состояния и лагами.

Как решить проблему:

➖ Дать каждому элементу стабильный и уникальный ключ — например, item.id. Теперь React спокойно обновляет только то, что реально изменилось.

💡 Меньше перерендеров, плавнее UI и спокойная жизнь фронтендера.

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

#hotfix #react

💳 Плавный ввод данных карты на Vue.js

Изящная форма с мягкими микровзаимодействиями и реалистичной анимацией переворота при вводе CVV.

♾ Автоматически форматирует номер, определяет тип карты (Visa, Mastercard, Amex) и проверяет корректность данных.

🎨 Отличный пример того, как детали делают UX «живым».

🔗 Ссылка на CodePen

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

#readme #css