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

Новости

Проекты

  • satori — инструмент от vercel для конвертирования HTML-CSS в SVG (может быть для генерации OG-картинок для embed-ов)
  • svg-use — если в JS-приложении инлайнить SVG в DOM как есть, то распухает как сам DOM, так и итоговый JS-бандл; заместо этого авторы либы предлагают использовать тег <use>, который ссылается на внешний ресурс с конкретным символом без инлайнинга с возможностью задать доп стили, например, для покраски
  • react-call — API для создания асинхронных оконных диалогов (конфирмов) потипу window.confirm, но прикручиваемое к любому React-компоненту

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

JS

  • извечная история фронтендеров, которые куда-то постоянно откуда-то мигрируют, в этом случае интересно изучить итоговый vite.config.js (подсмотрел плагин viteCompression, к примеру)
  • Zod как-то обычно воспринимается как валидатор приходящих с бэка данных, но может использоваться для «типизации» по схеме пользовательского ввода в форму, в том числе через API FormData
  • children в React никак не сделать «типобезопасными», выход — использовать пропы вместо children, там где нужна типобезопасность
  • многие сайты и приложения в вебе до сих пор транспилируются в ES5, хотя чаще всего по недосмотру, так как одновременно в бандле оказываются и нетранспилированные ES6+ куски: рекомендуется не фиксировать версии в browserlist, сторонние либы нужно тоже прогонять через процесс билда
  • что происходит когда вы нажимаете copy в Figma: в буфере обмена контент оказывается в виде HTML, в data-атрибут <span> внутри записывается base64-строка, в которую закодирован мини-файл в формате .fig; также есть много другой инфы про копирование в браузере, например, что в событии copy есть поле e.isTrusted, которое в true выставляется только для событий вызванных действиями пользователя, а не синтетически стриггерённых через dispatchEvent
  • для встроенной в браузер валидации инпутов можно задать кастомное сообщение через input.setCustomValidity('MESSAGE')

CSS

  • если нужно растянуть грид на определённую высоту, но при этом нет возможности задавать высоту видимым элементам грида, то в грид можно добавить пустой элемент, на который могут накладывать другие элементы, а он будет выступать только «распоркой» (повеяло табличной вёрсткой под старые IE)
  • помимо зрелищности, свойственной туториалам Josh Comeau, этот рассказ о :has() несёт главное предназначение этого селектора: он позволяет декларативно объединять элементы не только в родительско-дочернем направлении, но и в обратном дочерне-родительском, да и вообще в любом (что раньше достигалось только императивным скриптом); самый типичный кейс — убрать у html скроллбар в момент показа модалки:
html:has([data-disable-document-scroll="true"]) {
  overflow: hidden;
}
<div data-disable-document-scroll="{isOpen}"></div>
  • ещё немного юзкейсов :has(): стилизация рядов в таблице или элементов формы в зависимости от содержимого, изменение стилей фокуса по наличию внутри элемента определённого контента
  • помимо примера «сверкающей кнопки», которая уже была в прошлом выпуске, в этом демо к кнопке применяется одновременно две одинаковых анимации, одна из которых работает по умолчанию (крутит угол градиента), а вторая (в два раза замедленная) поставлена на паузу, и по ховеру включается и оверрайдит первую анимацию, а при убирании ховера продолжается в ускоренном режиме