Как 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/

Пять практик, чтобы не превратить 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

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

https://grooovinger.com/notes/progressive-web-apps-mostly-rock

Выпуск №540. Никита Дубко и Вадим Макеев про переключатель в HTML, клик мимо диалога, PWA в 2026 и HTML по веб-сокетам.

— Лайв на Ютубе
— Слушайте на Ютубе
— Ссылки на сайте

00:01:30 Переключатель в HTML
00:22:50 Клик мимо диалога
00:41:18 PWA в 2026
01:06:29 HTML по веб-сокетам

Могут ли письма поддерживать светлую и тёмную темы? Мэтью Гуэй объясняет, что @media (prefers-color-scheme) работает примерно в 42% почтовых клиентов: Apple Mail, Outlook и Fastmail. Причём только на Apple Mail приходится около 65% открытий. Gmail, Outlook под Windows, Yahoo Mail и Thunderbird правило игнорируют, а мобильный Gmail инвертирует цвета сам. Не используйте чистый чёрный и чистый белый: некоторые клиенты из-за них инвертируют цвета. #email #css

https://buttondown.com/blog/dark-mode-emails

Новинки Firefox 154 для разработчиков. Релиз добавляет CSS-функции sibling-count() и sibling-index(), свойства text-box-trim, text-box-edge и text-box для обрезки пространства над и под текстом, а также методы итераторов includes(), join(), chunks() и windows(). В WebRTC появились getSelectedCandidatePair() и новые метрики транспорта. За флагами: line-clamp без префикса, проценты для text-decoration-inset, функция progress() и CSS Typed OM. #firefox #browser

https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/154

Почему переключателю тёмной темы нужны три состояния. Брамус Ван Дамм отвечает Лие Веру и приводит случай, который два состояния не покрывают: ОС сама меняет тему по времени суток. Выбрали днём светлую — вечером сайт всё равно станет тёмным, хотя выбор был явным. Два состояния годятся, только если автоматический вариант подписан или если хранить настоящие значения, но тогда нужен сброс. В его опросе 43 голоса за три состояния и 7 против. #design #color

https://www.bram.us/2026/08/18/the-case-for-tri-state-dark-mode-toggles/

Разбираемся с панелью Performance в Chrome DevTools. Джоан Леон на интерактивных примерах показывает цвета для скриптов, рендеринга, отрисовки, загрузки и простоя, устройство полосы сетевого запроса, две оси флеймчарта и разницу между self time и total time. Ещё есть четыре фазы LCP, сдвиги лейаута, INP, композитинг, порядок диагностики и таблицы типичных функций и запросов. #performance #devtools

https://perf.reviews/profile-guide

HTML-бойлерплейт 2026 года. Мануэль Матузович разбирает каждую строку в <head> и объясняет, зачем она нужна: кодировка перед заголовком, вьюпорт, Open Graph и отдельная таблица стилей для печати. В этом году добавились метаэлемент text-scale для системного размера текста на мобильных, SVG-фавиконка с поддержкой тёмной темы, ссылка на маркдаун-версию страницы для LLM и fediverse:creator для атрибуции в Mastodon. #html #learn

https://www.matuzo.at/blog/2026/html-boilerplate

Выпуск №541. Вадим Макеев, Лёша Красиков, Никита Дубко и Полина Гуртовая про Firefox 154, HTTP-метод QUERY, селектор с префиксом, метрику UNO и снова переключатели темы.

— Лайв на Ютубе
— Слушайте на Ютубе
— Ссылки на сайте

00:01:15 Firefox 154
00:31:08 HTTP-метод QUERY
00:43:11 Селектор с префиксом
01:00:40 Метрика UNO
01:16:03 Снова переключатели темы

Знакомимся с HTML-элементом <geolocation>. Даниэль Шварц разбирает новый элемент из Chrome 144, который заменяет Geolocation API разметкой: autolocate переиспользует ранее выданное разрешение, watch следит за перемещением, а onlocation обрабатывает результат. Таймауты браузер берёт на себя. Псевдокласс :granted стилизует кнопку, isValid и invalidReason сообщают о проблемах, а строгие правила стилизации защищают от перехвата кликов. #html #chrome

https://piccalil.li/blog/a-look-at-the-geolocation-html-element-and-how-it-works/

Firefox готовится поддержать JPEG XL. Джейк Арчибальд рассказывает, что поддержка строится на jxl-rs — декодере на Rust от Google Research, который избавляет от рисков старой реализации на C++ в 100 тысяч строк. На фотографиях AVIF по-прежнему выигрывает при сжатии с потерями, а JPEG XL — без потерь. Ещё он пережимает JPEG и умеет прогрессивную отрисовку: большие картинки появляются уже во время загрузки. #image #firefox

https://hacks.mozilla.org/2026/08/intent-to-ship-jpeg-xl/

Балансируем флекс-элементы свойством flex-wrap: balance. Ахмад Шадид начинает с вёрстки на сайте Buffer, где в последней строке остаётся один элемент, и показывает пять способов это исправить: выражения от контейнера, условный clamp() для max-width, display: contents, разделитель на псевдоэлементе и, наконец, flex-wrap: balance из Chrome 150 — всего одно объявление. Свойство flex-line-count задаёт минимальное число строк. #css #layout

https://ishadeed.com/article/flex-wrap-balance/

Новинки Chrome 152. Интерфейс CSSPseudoElement теперь работает с ::backdrop, ::scroll-marker и ::view-transition — клики по подложке диалога или маркеру прокрутки наконец получили цель. Новый CPU Performance API сообщает класс производительности устройства, а заголовок Connection-Allowlist ограничивает, куда страница может отправлять запросы. Ещё в CSS появилась функция alpha() для относительной прозрачности, а атрибут autocorrect — в редактируемых полях. #chrome #browser

https://developer.chrome.com/release-notes/152

Как ускорить длинный список: content-visibility или виртуализация. Агустин Барриентос сравнивает список из 50 тысяч карточек, отрисованный тремя способами. Свойство content-visibility: auto вместе с contain-intrinsic-size оставляет все строки в DOM и пропускает рендеринг за пределами экрана, а виртуализация выкидывает строки из DOM и заодно забирает у браузера поиск по странице, ссылки-якоря, сохранение фокуса и состояние карточек. #performance #css

https://agustinbarrientos.com/writing/senior-eye/content-visibility-vs-virtualization/

Выпуск №542. Лёша Красиков и Никита Дубко про новинки Chrome 152, вычисление кастомных свойств, виртуальные списки и отказ от RSC.

— Лайв на Ютубе
— Слушайте на Ютубе
— Ссылки на сайте

00:01:23 Новинки Chrome 152
00:47:04 Вычисление кастомных свойств
00:59:16 Виртуальные списки
01:23:17 Отказ от RSC

Как выделить фрагмент текста внутри поля. Олли Уильямс показывает, как новый OpaqueRange распространяет CSS Custom Highlight API на поля ввода. Вызовите createValueRange() у <textarea> или у <input> с типом text, password, search, tel или url, передайте результат в Highlight() и зарегистрируйте через CSS.highlights.set(). В ::highlight() доступны color, background-color, text-decoration и text-shadow. Работает в Chromium 152. #chrome #js

https://olliewilliams.xyz/blog/opaquerange/