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

Новости

  • вышел Firefox 131:
    • из интересного поддержана фича Text fragments — возможность ссылаться не только на якорную ссылку на странице (#anchor), но и на произвольный текстовый фрагмент, например, https://example.com/page[#:~:text=human] проскроллит страницу к первому встретившемуся слову «human», которое заодно можно стилизовать с помощью псевдокласса ::target-text (к слову фича поддерживается теперь во всех браузерах)
    • в девтулзах улучшены поповеры кастомных свойств, теперь они показывают computed-значение и параметры свойства, если оно было объявлено через @property, а также более удобным стало редактирование HTML и CSS в инспекторе
  • Server Actions в 19 React стали называться Server Functions, а точнее стали подмножеством «серверных функций», которые не обязательно являются «экшном»
  • есть такое сообщество e18e, которые взяли на себя роль «санитаров платформы», ходят к мейнтейнерам популярных пакетов, предлагают улучшения перфоманса, помогают выпилить ненужные зависимости; вот в сентябре удалось помочь выпилить смешную (да не очень) зависимость is-number из chokidar, также хорошо так подчистили Storybook и jimp; важная движуха — уважуха!
  • выпущен Deno 2.0: уже рассказывал о фичах раньше про RC, в этом релизе обратил внимание на команду deno compile , которая собирает приложение в запускаемый файл (даже с иконкой в Windows); я раньше не понимал, а потом как понял, что на самом деле Deno конкурирует больше с Bun, чем с Node, на поприще все-инструменты-в-одном
  • в Bun завезли экспериментальную поддержку сборки CSS на базе LightningCSS

Проекты

  • one — React-фреймворк, собирающий приложение в веб и нейтив: под капотом Vite, также обещают локальную БД Zero (попробовать можно командой npx one — интересно, а козырные названия пакетов, как и домены нынче покупают-продают?)
  • scalar — REST-API-клиент в формате OpenAPI (для одного пользователя бесплатно)

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

JS

  • «если хочешь сделать хорошо — сделай сам», — подумал один разработчик и написал local-first веб-приложение, в котором можно описывать путешествие текстом и сразу смотреть маршрут на карте: из интересного на клиенте используется CRDT-либа  Yjs, которая позволяет хранить данные локально на устройстве, и  Y-Sweet — клиент и сервер для синхронизации состояния на S3 по вебсокет-соединению, чтобы пользоваться приложением одновременно с нескольких устройств в реалтайме (ещё один мой фетиш detected)
  • держать секреты типы паролей в env-файлах довольно удобно, но при этом, чем больше секретов попадает env-файл, тем менее надёжной становится эта система: env-утекают на фронте/SSR, через логи или просто во время видео-стрима; отдельный прикол — env-переменные, с которыми запущен node-процесс видны в списке процессов в Unix-like-системах
  • вообще-то это статья про то, как работает фича девтулзов Chrome «pause on uncaught exceptions» (этот факт надо «предсказывать», так как в момент выбрасывания исключения неясно, будет ли оно поймано дальше в коде); но меня заинтересовало другое: на сайте используется куча веб-компонентов (без драм и обсуждений), например, <devsite-code> для отображения блоков кода, причём используются они корректно, в виде «виджетов»: кастомные элементы — это обёртки, докидывающие стилизацию и часть функциональности, а благодаря прогрессивному улучшению, в браузерах, не поддерживающих кастомные элементы, контент всё равно покажется, но немного коряво и с меньшей функциональностью, красота!
  • нативный нестинг в CSS правилах появился без флага в Chrome 112, но с немного другим синтаксисом (нужно было в некоторых случаях проставлять дополнительный &) и это окончательно починили в грядущем Chrome 130, а чтобы не сесть в лужу со старыми версиями теперь нужно в нестинге обычные правила писать перед медиа-выражениями (что и логично)
  • как на коленке собрать RSS-агрегатор с помощью Astro и rss-parser (сам тоже стал собирать RSS, но в тг-бота)
  • Map в JS пригодится, если нужно, чтобы ключами было что-то, кроме строк или символов, например, другие объекты или числа

CSS

  • хороший пример, как построить цветовую тему с нативной поддержкой темной/светлой схемы: очень выразительно и гибко получается комбинировать oklch-формат и функцию light-dark()
color: light-dark(
  oklch(from var(--secondary) var(--600)),
  oklch(from var(--secondary) var(--200))
);
  • директива @supports не может проверять доступность других директив, но есть обходной путь — проверять наличие «родственного» обычного свойства, например: @container проверяется @supports (container-type: size); в статье есть рецепты для проверки многих директив, кроме @layer, @property, @starting-style (от себя добавлю сам @supports)
  • значение свойства grid-template-rows: repeat(calc(var(--int)), 0px) можно сделать динамическим, если анимировать кастомное свойство --int, объявленное через @property

Платформа

  • кажется мы стали забывать свои корни (а они уже разрослись), вот напоминание: роутер можно собрать на веб-компонентах (подход, популяризированный в React Router, когда вьюхи оборачиваются в «теги» роутов идеально ложатся на кастомные элементы); для централизованного хранения состояния можно использовать события CustomEvent, доступные сто лет в обед; компоненты нативно реагируют на смену атрибутов («пропсы») и по умолчанию можно сделать фолбек-состояния компонентов
  • привязка названий двухбуквенных доменов к названиям стран, а точнее использование их не по назначению, имеет сайд-эффект: если страна перестаёт существовать, то что делать с более неактуальным доменом? Вот эта ситуация коснулась домена .io (Indian Ocean), «страна-владелец» которого перестаёт существовать