Митапы — это, конечно, круто и полезно. Но что может быть лучше открытой дискуссии с коллегами о наболевшем? ☑️

AvitoTech тут зовёт на классный ивент для фронтендеров. Обещают полтора часа дискуссий на самые разные темы: от роста фронтенд-инженера в тимлида до ванильного JS. И вишенка на торте — афтерпати на веранде ☄️

Всё пройдёт вечером 19 мая, так что погода не должна подкачать. Регистрация, кстати, по ссылке.

Ленивая загрузка видео и аудио в HTML уже стандарт

Ленивая загрузка в HTML для видео и аудио стала доступной через loading=lazy и помогает откладывать скачивание медиа до момента появления в вьюпорте. Разберем практики вроде poster, autoplay и сохранения размеров через width height или aspect-ratio, чтобы избежать layout shift и лишнего трафика.

https://engineering.squarespace.com/blog/2026/how-to-use-standard-html-video-and-audio-lazy-loading-on-the-web-today

Внутри нового фронтенда MDN

Пересобрали фронтенд MDN: упростили дизайн и переработали кодовую базу, чтобы уменьшить технический долг и улучшить поддержку интерактивных элементов без тяжелой клиентской логики. Разбираем архитектуру сборки из Markdown в JSON и SSR, а также причины отказа от React-обертки и проблем с CSS и поддерживаемостью.

https://developer.mozilla.org/en-US/blog/mdn-front-end-deep-dive/

WebSocket и SSE просто для собеседований и не только

Разбираем, чем отличаются двусторонний WebSocket и однонаправленный SSE, как устроены их рукопожатия и как правильно открывать соединения в браузере. Коротко разложено по событиям, отправке данных и обработке обрывов, чтобы уверенно отвечать на вопросы на интервью.

https://habr.com/ru/articles/1021414/

Компонентная библиотека под ваш проект

Доступные компоненты для Astro и Tailwind CSS, которые добавляются через CLI и остаются под вашим контролем. Быстрый старт с npx bearnie init и дальнейшая настройка, расширение и сборка своей библиотеки.

https://bearnie.dev/

33 ключевых концепта JavaScript для глубокого понимания

Пошаговый гайд по JavaScript core с примерами, диаграммами и проверками знаний: от scope и closures до event loop, async и DOM. Подходит для прокачки знаний и подготовки к интервью, плюс есть удобная документации.

https://33jsconcepts.com/

Как собрать кубик Рубика в браузере на чистом Canvas

Пошаговый туториал по созданию 3D кубика на Canvas без Three.js: от проекции и вращения граней до перехода к полноценной интерактивной симуляции, которую можно крутить прямо в браузере.

https://habr.com/ru/companies/ruvds/articles/1035748

GemShell: превращаем HTML5 игры в нативные приложения

Портируйте HTML5 игры в нативные без потерь. Подходит для фронтенд разработчиков, которые хотят выпускать web проекты как полноценные приложения.

https://gemshell.dev

Диапазоны медиа-запросов CSS

Range queries в CSS 4 делают адаптивные стили читаемыми и предсказуемыми: вместо ловушек с одинаковыми breakpoints используйте выражения вида 300px <= width <= 500px и ускоряйте отладку ваших макетов.

https://ishadeed.com/article/range-syntax/

Конец эпохи responsive images: value auto для sizes

Атрибут sizes с auto делает разметку адаптивных изображений заметно проще и убирает главный источник боли при подборе значений, а пользователи получают более незаметную и потенциально более быструю загрузку.

https://piccalil.li/blog/the-end-of-responsive-images/

Таймауты сессии как скрытый барьер доступности в аутентификации

Таймауты сессии часто ломают UX для пользователей с ограниченными возможностями и тех, кто не успевает завершить действия. Разбираем, как проектировать продление сессии, предупреждения и безопасные сценарии повторного входа без потери доступности.

https://www.smashingmagazine.com/2026/04/session-timeouts-accessibility-barrier-authentication-design/

От ASCII-арт до Markdown и Typst: как современные форматы делают документацию в Git удобной для людей и IDE

Markdown остаётся стандартом для инженерной документации, потому что исходник читается без рендера, а структура хранится рядом с кодом. Разбираются причины роста Markdown, зачем нужен Typst и как внедрять просмотр сложных форматов на вебе через WebAssembly.

https://habr.com/ru/companies/sberbank/articles/1024454/

Build-time микрофронтенды, или как упростить поддержку витрин

Build-time микрофронтенды через npm-пакеты помогают собрать разные фичи в единое приложение на этапе сборки, сохраняя SSR и SEO без переезда на новый фреймворк.

https://habr.com/ru/companies/ru_mts/articles/1034374/

Почему я больше не цепляю все подряд в JavaScript

Часто цепочки ухудшают читаемость и мешают вставлять промежуточное логирование, а ясные имена переменных и явные шаги делают код проще для отладки и поддержки.

https://allthingssmitty.com/2026/04/20/why-i-dont-chain-everything-in-javascript-anymore/

Проверьте, готов ли ваш сайт для AI агентов

Сканируйте сайт по 5 категориям: discoverability, доступность контента, контроль доступа для ботов, обнаружение протоколов вроде MCP и OAuth, а также агентская коммерция. Начните с быстрых улучшений: корректный robots.txt с правилами для AI, sitemap директивы и полезные discovery заголовки или метаданные на главной.

https://isitagentready.com/

Современный шаблон админки на React TypeScript и shadcn ui

Готовый лендинг и админский интерфейс с React, TypeScript, Vite, Next.js, Tailwind и shadcn ui v3, который удобно форкать и быстро адаптировать под свой продукт.

https://github.com/shadcnstore/shadcn-dashboard-landing-template

Массивы, объекты и теперь composites

Composites решают боль с сравнением объектов и использованием их как ключей: две структуры с одинаковыми данными считаются равными даже при разном порядке ключей. Это практичный шаг в сторону более надежной работы с составными значениями в JavaScript.

https://frontendmasters.com/blog/arrays-objects-now-composites/

Jest 30.4.0 сильный релиз для тестирования JavaScript

Jest 30.4.0 улучшает поддержку ESM, добавляет акценты вокруг Temporal и лучше работает с React 19, чтобы тесты были стабильнее и ближе к реальному окружению.

https://github.com/jestjs/jest/releases/tag/v30.4.0

Wakaru: разбор минифицированных JavaScript бандлов на модули

Инструмент принимает минифицированный бандл и возвращает читаемую структуру модулей, помогая восстановить код, провести reverse engineering или аудит безопасности. Можно использовать онлайн, чтобы быстро понять, что внутри сборки.

https://github.com/pionxzh/wakaru

OpenSkills CLI для Anthropic skills во всех AI coding агентах

Один CLI инструмент переносит skills систему Anthropic в любые агенты, которые умеют читать AGENTS.md, включая Claude Code, Cursor, Windsurf, Aider и Codex. Ускоряет настройку контекста и делает поведение агента предсказуемым.

https://github.com/numman-ali/openskills