Веб-стандарты

Progressive Web Apps, в целом, крутые. Мартин Грубингер собрал плюсы и минусы: URL и кнопка назад работают так, как задумано в вебе, приложение не занимает сотню мегабайт, а обновление доезжает до пользователя за одну перезагрузку вместо дней ревью в сторе. Из минусов — установка на iOS, непредсказуемые промты установки в Chromium, встроенный браузер для внешних ссылок и недоступное имя WiFi-сети. #pwa #browser https://grooovinger.com/notes/progressive-web-apps-mostly-rock

Пять практик, чтобы не превратить Tailwind CSS в хаос. Нина Торгунакова напоминает, что utility-first подход масштабируется только вместе с дизайн-системой и компонентами. Сокращайте наборы классов до вида py-4, задавайте семантические токены через @theme или tailwind.config.js, а порядок классов доверьте официальному плагину для Prettier. Вместо произвольных классов из пропсов описывайте готовые варианты. Tailwind 4 минифицирует сам, а 3 требует --minify. #css #tools https://evilmartians.com/chronicles/5-best-practices-for-preventing-chaos-in-tailwind-css

Как Baseline помогает писать меньше JavaScript. Джад Джубран разбирает пять групп зависимостей, которые уже заменяются возможностями платформы: форматтеры Intl вместо timeago.js и numeral, fetch() с AbortSignal.timeout() вместо axios, <dialog> и Popover API вместо библиотек для модальных окон и подсказок, structuredClone и Object.groupBy вместо Lodash. Исключение — Temporal: его полифил на 44 КБ сводит экономию на нет. #baseline #js https://www.smashingmagazine.com/2026/08/how-baseline-can-help-ship-less-javascript/

Нужны ли карты кода? Джеймс Гарбутт и Алекс Лихтер объясняют, когда npm-пакетам стоит их публиковать, а когда они лишь раздувают вес. Из-за них пакет change-case вырос с 7,2 КБ до 22,7 КБ, а magic-string без них уменьшился с 241 КБ до 155 КБ. Они оправданы, только если опубликованный код теряет информацию: минифицированный вывод или синтаксис вроде Vue SFC. Лучше публиковать читаемый код без минификации или хранить исходники удалённо через sourceRoot. #npm #performance https://e18e.dev/blog/source-maps-or-not.html

Результаты опроса State of CSS 2026. Саша Грейф и Devographics опросили 4902 разработчика: любимой новинкой года стало anchor positioning, оно возглавило и список желаемого, и список жалоб на поддержку в браузерах. То же самое с View Transitions и if(). CSS сопротивляется AI: с его помощью пишут в среднем лишь 28% кода, куда меньше, чем в других технологиях. Больше всего проблем вызывают позиционирование, :has() и выражения от контейнера. #css #survey https://2026.stateofcss.com/en-US

00:01:08 Новый ведущий 00:02:10 State of CSS: результаты 00:30:40 State of CSS: ИИ 00:47:38 State of CSS: инструменты 01:01:06 State of CSS: боль 01:15:38 Переключатель тёмной темы

Выпуск №539. Вадим Макеев, Лёша Красиков и Алексей Симоненко про результаты State of CSS 2026 и переключатель тёмной темы. — Лайв на Ютубе — Слушайте на Ютубе — Ссылки на сайте

Переключатели тёмной темы: двух состояний достаточно. Лия Веру считает, что привычный переключатель из трёх вариантов «светлая, тёмная, системная» продиктован реализацией, а не людьми: тему меняют, только когда текущая мешает, а не на будущее. Храните три состояния внутри, но показывайте два, а на кнопке — ту тему, в которую она переключит. Сбрасывать сохранённый выбор стоит только по действию пользователя. #design #color https://lea.verou.me/blog/2026/dark-mode-toggles/

Стилизация навигации: декларативное сопоставление адресов и навигации в CSS. Брамус Ван Дамм разбирает предложение CSS Route and Navigation Matching, которое позволяет стилизовать навигацию декларативно, без JavaScript. В нём: правило @route для именования адресов через URL-паттерны, @navigation для реакции на from и to при переходе, псевдокласс :nav-source для инициировавшего переход элемента и селектор :link-to() для стилизации ссылок по целевому адресу. #css #router https://www.bram.us/2026/07/30/styling-the-navigation-declarative-route-and-navigation-matching-in-css/

Гайд по 3D в CSS: perspective, preserve-3d и translateZ. Кармен Ансио разбирает, как строить полноценные 3D-сцены в CSS, показывая переход от нарисованной глубины Super Mario Bros 3 к настоящей камере Super Mario 64. В обзоре: perspective и perspective-origin для установки камеры, preserve-3d для сохранения реальной глубины, переиспользуемые кубоиды, анимация камеры и translateZ, rotateX/Y/Z, scale3d и matrix3d. Все шесть свойств — Baseline. #css #3d https://www.carmenansio.com/articles/3d-css-guide/

Liquid Glass 2.0 в CSS (месть Aqua). Джаред Уайт воссоздаёт обновлённый вид Liquid Aqua от Apple на чистом CSS: тёмные контрастные границы по горизонтали и вертикальный градиент в духе старого macOS Aqua. Он разбирает подбор цветов, прозрачности и точек градиента, использует @property для переменных, повторяющиеся состояния :active и обработчик ontouchstart для тачскринов — и напоминает не жертвовать читаемостью ради красоты. #css #design https://thathtml.blog/2026/07/liquid-glass-in-css-liquid-aqua/

Способы применения бесконечности в CSS. Адам Аргайл показывает, что умеют calc(infinity * 1px) и -infinity помимо трюка со скруглением: идеальные круги, максимальный z-index на пределе целых чисел, заморозка анимаций бесконечной длительностью для инспекции view transitions в DevTools, снятие нижней и верхней границ в clamp(), булева логика и управление диапазонами scroll-driven анимаций. Элегантно и просто весело. #css #animation https://nerdy.dev/css-infinity-use-cases

00:01:40 Новинки Chrome 151 00:40:26 Релиз Safari 26.6 00:46:10 Вышел ACP v2 01:05:08 Роутинг в CSS 01:21:55 Случайная ссылка на CSS

Выпуск №538. Никита Дубко и Полина Гуртовая про новинки Chrome 151, релиз Safari 26.6, ACP v2, роутинг и случайную ссылку на CSS. — Лайв на Ютубе — Слушайте на Ютубе — Ссылки на сайте

Шпаргалки по флексам, гридам, anchor positioning и invoker commands. Килиан Валкхоф делится четырьмя CSS-шпаргалками, которые сделал, потому что постоянно забывал синтаксис anchor positioning и grid-area. Каждая — справочник со свойствами и значениями по своей теме, чтобы держать под рукой. Их можно бесплатно скачать в PDF и PNG в формате A5, готовом к печати. #css #learn https://polypane.app/blog/cheatsheets-for-flex-grid-anchor-positioning-and-invoker-commands/

Безопасный способ выпустить npm-пакет в 2026 году. Андрей Ситник разбирает, как атаки на цепочку поставок идут полуавтоматически и компрометируют сотни пакетов в день и предлагает строить защиту как повышение стоимости атаки. Быстрые меры, большинство из которых внедряются за день: доверенная и поэтапная публикация в npm, обязательная 2FA, создание тегов только админами, экшены CI по SHA и трёхдневная выдержка обновлений. #npm #security https://evilmartians.com/chronicles/the-secure-way-to-release-an-npm-package

Новинки Chrome 151. Новый элемент <usermedia> управляет доступом к камере и микрофону и берёт на себя запросы и доставку MediaStream без отдельного вызова getUserMedia(). Атрибут shadowrootslotassignment на <template> управляет назначением слотов прямо в HTML. Две новые метрики производительности soft-navigation и interaction-contentful-paint измеряют отклик в SPA. #chrome #browser https://developer.chrome.com/release-notes/151

Новинки WebKit в Safari 26.6. Джен Симмонс разбирает небольшое, но полезное обновление: новый параметр compileOptions позволяет использовать JS String Builtins с WebAssembly compileStreaming() и instantiateStreaming(), не переключаясь на непотоковую компиляцию. Плюс восемь багфиксов в CSS, сети, service workers, веб-расширениях и WebRTC. #safari #wasm https://webkit.org/blog/18178/webkit-features-for-safari-26-6/

00:01:23 Новинки Firefox 153 00:23:35 Cross-Origin Storage API 00:45:27 Тестирование перфоманса 01:24:19 Взлёт Base UI

Выпуск №537. Вадим Макеев, Полина Гуртовая, Лёша Красиков, Никита Дубко и Алексей Симоненко про новинки Firefox 153, Cross-Origin Storage API, тестирование перфоманса и взлёт Base UI. — Лайв на Ютубе — Слушайте на Ютубе — Ссылки на сайте