👍 Главные новости недели

➡️ Нативные API вместо фреймворков

Браузеры становятся самостоятельной платформой: роутинг, state и компоненты всё чаще делают без React/Vue.

➡️ Платформенная инженерия для фронтенда

Команды начинают выстраивать общие библиотеки, стандарты и инструменты. Результат — меньше техдолга и ускорение разработки.

➡️ Что нового в Svelte / SvelteKit

В свежем апдейте появились улучшения remote functions (батчинг, lazy discovery) и экспериментальная async SSR в конфигурации experimental.async.

➡️ Протокол для взаимодействия backend-агентов с фронтом

Компания CopilotKit представила AG-UI — открытый протокол + UI-слой, который стандартизирует взаимодействие агентов (AI / backend) с фронтенд-частями, делая обмен состоянием, событиями и интерфейсом «из коробки».

➡️ Новинки Vue + TresJS v5

В выпуске упоминается релиз TresJS v5 — обёртка над Three.js / WebGL, интегрированная с Vue, с улучшениями DevEx и новыми возможностями 3D-визуализаций внутри Vue приложений.

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

#release_digest

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

➡️ React Query

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

➡️ SWR

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

Голосуем:

👍 — React Query
❤️ — SWR

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

#code_battle

🔍 От 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