Пульс веб-платформы 01.03.2024


Новости

  • вышел Firefox 123: поддерживает Declarative Shadow DOM (теперь поддерживается всеми!), пофикшен Date.parse(), улучшены SVG-градиенты, добавлена поддержка кода 103 Early Hints HTTP для предзагрузки ресурсов
  • в Mozilla выпустили MDN curriculum — учебный план для разработчиков, чтобы подтянуть базу по фронту: HTML, CSS, JS, доступность, контроль версий, перфоманс, тестирование, фреймворки, тулинг
  • в Firefox 125 будет доступен Popover API
  • в Vue отрефакторили систему реактивности и заменили структуры данных, чем уменьшили использование памяти на 56% и улучшили перф на 100-200% (а что, так можно было?)
  • вышел Git 2.44: более лучшие ребейзы командой git replay, опция —autosquash для сквоша коммитов при обычном, неинтерактивном ребейзе, настройка хинтов и другое

Проекты

  • nue — генератор статических сайтов и аппликух, дерзкий, но честный аналог Astro и Next.js
  • functional-ui-kit — есть много разных UI-китов, но мало из них классно реализовано и в коде, и в Figma: этот кит из таких
  • shoelace — ещё один UI-кит, но на этот раз на веб-компонентах (аккуратный, с возможностью использовать совместно с фреймворками)
  • picocss — минималистичный CSS-фреймворк для стилизации (практически) голого HTML
  • keyux — либа для добавления управления с клавиатуры к сайту, интегрируется с aria- и role-атрибутами в HTML

Статьи и демки

JS

CSS

  • как подогнать стили при использовании View Transitions, чтобы две картинки «бесшовно переходили» одна в другую
  • в CSS есть константное значение infinity, и с его помощью, наконец-то, можно завершить эту битву раз и навсегда — z-index: calc(infinity), только нужно иметь в виду, что это число зависит от контекста
  • псевдоэлемент ::backdrop (подложка элемента <dialog>) теперь может наследовать все наследуемые свойства родителей, и кастомные тоже (странно, что раньше не могло)
  • исчерпывающий гайд по селектору :has: такая читерская неявная связь элементов одновременно и привлекает, и отпугивает своей неявностью
  • когда нужно использовать data URL-ы: как обычно, it depends, надо сравнить насколько передача файла по сети добавляет больше байтов (заголовки, обмен сообщениями…), чем строка, закодированная в CSS
  • когда в кастомном свойстве CSS находится невалидное значение (20px задаётся для цвета, например), то срабатывает механизм Invalid At Computed Value Time (IACVT), который приводит к откату значения до unset

Платформа

  • декларативный shadow DOM пришёл, для чего же он может пригодиться: это некий «ковёр», куда можно замести детали имплементации интерфейсных частей (сомнительно, но окэй)
  • полезные настройки Git: автосквош и автостэш при ребейзе, автосоздание ветки на сервере при пуше, изменение алгоритма диффов, авторебейз при пулле, автосоздание ветки main вместо master и другое