🔍 От CSS до Event Loop: что происходит в браузере

➡️ Как работают браузеры — рендеринг страницы

Понимание критического пути рендеринга: DOM, CSSOM, Render Tree.

➡️ CSS Triggers

Интерактивный инструмент, показывающий, какие свойства CSS вызывают перерасчёт layout и перерисовку.

➡️ How V8 Optimizes Your Code

Разбираем, как движок V8 оптимизирует JS через hidden classes и inline caching.

➡️ Event Loop: Microtasks and Macrotasks

Как работает Event Loop, микротаски и макротаски, и что это значит для асинхронного JS.

➡️ HTTP/3 vs HTTP/2: Main Performance Differences

Почему новые протоколы HTTP ускоряют загрузку страниц и улучшают UX.

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

#under_hood #css

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

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

#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, книги

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

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

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

#pixel_pause

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

Медиазапросы хороши, но часто усложняют каскад. Современный 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