🔥 Адаптив без медиазапросов

Медиазапросы хороши, но часто усложняют каскад. Современный CSS позволяет адаптировать сетку контекстно, без @media.

.card-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  transition: .3s;
}

.card-grid:has(.expanded) { grid-template-columns: 1fr; }

.card-grid:has(.card:hover) .card:not(:hover) {
  opacity: .4;
  transform: scale(.98);
  filter: blur(1px);
}

➡️ Что получите:

— Контейнер, «реагирующий» на состояние внутренних элементов,

— Адаптивные layout-переходы без JS и без медиазапросов,

— Гибкость, пригодную для UI-эффектов, collapsible-контента и интерактивных сеток.

➡️ Применимо для: карточек, галерей, layout-адаптации внутри компонентов, инлайн-редакторов.

⚙️ Поддержка: Chrome 105+, Safari 15.4+, Firefox 121+.

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

#readme #css

🧩 Задача на понимание устройства 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