Текст «Introducing CodePen 2.0 Beta», пиксельная надпись «2.0» и 3D-блоки с логотипами Markdown, Vue и других технологий.
CodePen 2.0 вышел в публичную бету. У пенов теперь файловая система, блочная сборка, совместная работа в реальном времени, омнибар и настоящие настройки приватности. Без установки и сложной настройки. #tools #css
https://codepen.io/beta
Веб-стандарты: Лёша, Полина, Нина, Никита.
Выпуск №517. Лёша Красиков, Полина Гуртовая, Нина Торгунакова, Никита Дубко про прототип focusgroup, запись видео в Replit, а также большой холивар про Tailwind.
Лайв на Ютубе youtu.be/mtwN7EgyOY4
Слушайте на Ютубе youtu.be/_itmXvggStg
Ссылки на сайте web-standards.ru/pod...
Заголовок «The Too Early Breakpoint», фото автора и диаграмма брейкпоинтов с раскладками при Default, ≥ 220px, ≥ 350px, ≥ 480px и ≥ 620px.
Слишком ранний брейкпоинт. Ахмад Шадид показывает, почему многие сайты слишком рано переключаются на мобильную раскладку, ломая дизайн в сплитах и на планшетах. Решение: выражения от контейнера и гибкие CSS-раскладки на флексах и гридах. #css #layout
ishadeed.com/article...
Фото автора с HTML-терминами div, role, span, логотип HTMHell и заголовок «A new meta tag for respecting text scaling on mobile».
Новый мета-тег для масштабирования текста на мобильных. Мануэль Матузович показывает, как элемент <meta name="textscale"> позволяет сайтам учитывать настройки размера шрифта ОС в мобильном Chrome. Единицы em и rem масштабируются, пиксели — нет. #html #a11y
youtu.be/XVIgKEOVfVg
Заголовок «Dictionary Compression is finally here, and it’s ridiculously good», теги HTTP и Performance, страница словаря со статьёй «technology».
Словарное сжатие наконец здесь, и результаты впечатляют. Тим Перри показывает, как Compression Dictionary Transport уменьшает JS-бандлы до 90% для повторных посетителей. Уже в продакшене у Google, Shopify и Pinterest. #performance #http
httptoolkit.com/blog...
Заголовок «Define the Theme Color for Safari 26», фото автора и три окна Safari: The Verge с тёмным интерфейсом, Piccalilli с белым и красным, DevTools с background: red.
Как задать цвет темы для Safari 26. Мартин Грубингер показывает, как обойти удалённый <meta name="theme-color"> с помощью scroll-driven анимаций и скрытого фиксированного элемента для управления цветом интерфейса. #safari #css
grooovinger.com/note...
Заголовок «Native Random Values in CSS», фото автора и россыпь разноцветных игральных кубиков.
Нативная случайность в CSS. Альваро Монторо разбирает random() и random-item(), две новые CSS-функции. random() возвращает значение в диапазоне, random-item() выбирает из списка. Обе поддерживают корреляцию результатов между свойствами. Пока только Safari 26.2. #css #safari
alvaromontoro.com/bl...
Веб-стандарты: Никита, Вадим.
Выпуск №516. Никита Дубко и Вадим Макеев про новинки Firefox 148, ленивую загрузку медиа, перфоманс <img> и сжатие со словарями.
Лайв на Ютубе youtu.be/cdGJw40bWQ4
Слушайте на Ютубе youtu.be/WT24EKwFHcc
Ссылки на сайте web-standards.ru/pod...
Заголовок «Making WebAssembly a first-class language on the Web», логотип Mozilla Hacks и фрагмент кода с import image from image-lib.wasm.
WebAssembly как полноценный язык для веба. Райан Хант считает, что Component Model и WIT помогут уйти от прослойки JS-кода, упростить загрузку и ускорить вызовы для веб-API. #webassembly #firefox
hacks.mozilla.org/2026/02/maki...
Заголовок «Практическое руководство по элементу img: от основ до LCP», имя автора Joan León, фрагменты кода, оглавление и хэштеги: images, webperf, core-web-vitals, html.
Практическое руководство по элементу <img>: от основ до LCP. Джоан Леон объясняет, как srcset, sizes, современные форматы AVIF и WebP с <picture>, fetchpriority и preload для LCP помогают улучшить Core Web Vitals. #performance #html
joanleon.dev/en/guia...
Скриншот инструментов разработки с логотипом Firefox поверх и текстом «Firefox 148».
Новинки Firefox 148 для разработчиков. Релиз добавляет HTML Sanitizer API и Trusted Types, а также Iterator.zip() и zipKeyed(), функцию CSS shape(), улучшения anchor positioning и экспериментальный Document Picture-in-Picture API. #firefox #browser
developer.mozilla.or...
Лого Josh Comeau и заголовок Sprites on the Web, рядом мультперсонаж и ряд трофеев-спрайтов. Справа фрагмент кода с CSS и тегом img.
Спрайты в вебе. Джош Комо показывает, как анимировать спрайты в CSS во вьюпорте <img>: object-fit, object-position и steps(jump-none) для чёткой покадровой смены, а также разбирает, когда спрайты лучше GIF и когда лучше процедурная анимация. #css #animation
www.joshwcomeau.com/...
Фото автора рядом с заголовком «An in-depth guide to customising lists with CSS», имя Richard Rutter, фрагменты кода и лого Piccalilli.
Подробный гид по стилизации списков в CSS. Ричард Раттер показывает, как задавать отступы в lh, настраивать маркеры через ::marker, и делать кроссбраузерные символы с @counter-style, ну или использовать давно знакомый ::before, когда не хватает браузерной поддержки. #css
piccalil.li/blog/an-...
Веб-стандарты: Вадим, Полина, Никита.
Выпуск №515. Вадим Макеев, Полина Гуртовая, Никита Дубко про Chrome 145, Anchor Positioning, csskit, corner-shape и border-shape, WebMCP и MCP для Next.js.
Лайв на Ютубе youtu.be/pUmy1bXB4fc
Слушайте на Ютубе youtu.be/oC9K7sDRir4
Ссылки на сайте web-standards.ru/pod...
Диалог с текстом «border-shape: the future of the non-rectangular web» над рядом фигур: пятиугольник, шестиугольник, квадрат, треугольник, круг, звезда, трапеция.
Border-shape: будущее неквадратного веба. Юна Кравец рассказывает о border-shape, новом CSS-свойстве, которое меняет геометрию самого блока, поэтому фон, border-image, обводка фокуса и тень повторяют его форму. Уже доступно в Chrome Canary для тестирования. #css #chrome
una.im/border-shape/
Логотип TetraLogical и заголовок «Accessible building blocks for web» на фоне абстрактной сети соединённых кругов.
Доступные строительные блоки для веба. Серия коротких видео от TetraLogical про заголовки, изображения, кнопки, ссылки и поля форм, с подробностями о подписях, контрасте и семантическом HTML для пользователей клавиатур и скринридеров. #a11y #video
www.youtube.com/play...
Заголовок «Declarative Dialog Menu with Invoker Commands» над фрагментами HTML и JavaScript-кода, открытое меню с кнопкой «Close» и пунктами: Home, Services, About, Blog, Notes, Contact.
Декларативное меню на <dialog> с invoker commands. Дэвид Бушелл показывает гамбургерное меню на нативном <dialog> с новым Invoker Command API и небольшим JS-фолбэком для старых браузеров. Плюс заметки про :focus-visible в WebKit, closedby="any" и view transitions. #html #css
dbushell.com/2026/02...
Графика с текстом «New in Chrome» и цифрой «145» рядом с логотипом Chrome на фоне синей сетки.
Новинки Chrome 145. Свойство text-justify, проценты в letter-spacing и word-spacing, column-wrap и column-height, focusVisible для focus() и улучшенный overscroll. Новый объект Origin, upsert-методы для Map, window.crashReport и сокращённый user-agent.
developer.chrome.com...
Веб-стандарты: Полина, Вадим.
Выпуск №514. Полина Гуртовая, Вадим Макеев про фокус Interop 2026, новинки Safari 26.3, эластичный текст на CSS и State of React 2025.
Лайв на Ютубе youtu.be/2aqI7ZtFTpU
Слушайте на Ютубе youtu.be/EZgD-gr8LkU
Ссылки на сайте web-standards.ru/pod...
Лого State of React 2025 как мэшап логотипа React с японскими символами «リテクト». Оглавление: Introduction, T-shirt, Features, Libraries, Other Tools, Usage, Resources, Demographics, Conclusion, Metadata, About. Фрагмент графика.
Вышли результаты State of React 2025. Релиз React 19, закрытие Create React App, React Foundation и стабильный Compiler 1.0, а также споры вокруг RSC и рост вайб-кодинга с v0 и Cursor. #stateof #react
2025.stateofreact.com/
Читайте подробнее в анонсах:
Apple webkit.org/blog/17818/a...
Google web.dev/blog/interop...
Igalia www.igalia.com/news/interop...
Microsoft blogs.windows.com/msedgedev/20...
Mozilla hacks.mozilla.org/2026/02/laun...
Interop 2026 назвал 20 направлений фокуса. Apple, Google, Igalia, Microsoft и Mozilla будут работать над внедрением и тестами для anchor positioning, view transitions, Navigation API, WebTransport, WebRTC и CSS zoom, улучшая совместимость. #interop #browser
wpt.fyi/interop-2026
Окно Safari Web Inspector с таймлайнами, графиками CPU и Memory, поверх иконка Safari и заголовок «WebKit Features for Safari 26.3».
Новинки WebKit в Safari 26.3. Поддержка Zstandard для быстрой компрессии на лету и AbortSignal в Navigation API, чтобы запросы корректно отменялись при прерванной навигации. Также исправления для anchor positioning, мультиколонок, медиа и Safe Browsing. #safari #browser
webkit.org/blog/17798/w...
Женщина занимается йогой на коврике рядом с потягивающимся котом над заголовком «Debugging with AI: Can It Replace an Experienced Developer?» с фото автора.
Отладка с AI: может ли он заменить опытного разработчика? Надя Макаревич тестирует LLM на трёх багах React и Next.js, и показывает, что LLM чинит симптомы, но путается в первопричинах. #ai #react
www.developerway.com/posts/debugg...
Фото автора рядом с заголовком «Reference Target: having your encapsulation and eating it too», в центре фрагмент кода и внизу морские волны.
Reference Target: и волки сыты, и инкапсуляция цела. Элис Боксхолл представляет предложение, где элемент в shadow DOM становится целью, когда ссылаются на хоста, сохраняя инкапсуляцию. Chromium, WebKit и Firefox уже внедрили ранние прототипы. #webcomponents #a11y
blogs.igalia.com/alice/refere...
Фото автора, несколько переключателей разных цветов и фрагменты кода вокруг заголовка «input type=checkbox switch polyfill».
Полифил для HTML-элемента switch. Томас Штайнер предлагает полифил, который даёт почти нативный <input type="checkbox" switch> в браузерах помимо Safari: с доступностью, поддержкой высокой контрастности и загрузкой без FOUC-прыжков. #html #polyfill
blog.tomayac.com/2026/01/12/a...
Веб-стандарты: Вадим, Алексей.
Выпуск №513. Вадим Макеев, Алексей Симоненко про ESLint 10, нативный HTML-патчинг, результаты State of JS 2025, CSS @scope и Temporal в Safari.
Лайв на Ютубе youtu.be/HPT4_RDFKgw
Слушайте на Ютубе youtu.be/kL5P33AuicM
Ссылки на сайте web-standards.ru/podcast/513/
Фото автора рядом с заголовком «Explicit resource management in JavaScript», фрагменты кода и стрелка между ними.
Явное управление ресурсами в JavaScript. Мэтт Смит показывает, как using и await using с Symbol.dispose и Symbol.asyncDispose убирают try/finally и делают время жизни ресурсов более явным. #js #ecmasript
allthingssmitty.com/2026/02/02/e...
Два окна браузера с сетками карточек: мейсонри слева, обычная сетка справа, выше заголовок «When will CSS grid lanes arrive? How long until we can use it?»
CSS grid lanes уже ближе, чем кажется. Джен Симмонс пишет, что финальный синтаксис доступен в Safari Technology Preview, а Chrome и Firefox быстро догоняют. А пока используйте прогрессивное улучшение через @supports, JS-полифил или фолбек на CSS-гридах.
webkit.org/blog/17758/w...
Фото автора рядом с заголовком «Is it scrolled? Is it not? Let's find out with CSS @container scroll-state() queries», рядом большая мышка со стрелками вверх, вниз, влево и вправо вокруг.
Выражения scroll-state от контейнера в CSS теперь определяют прокрутку. Брехт де Рёйте показывает состояние scrolled для @container в Chrome 144, помимо stuck, snapped и scrollable, чтобы делать шапки, подсказки и стрелки прокрутки на чистом CSS. #css #scroll
utilitybend.com/blog/is-it-s...
