Новости
- вышел Firefox 131: поддержана фича Text fragments — возможность ссылаться на произвольный текстовый фрагмент:
https://example.com/page[#:~:text=human] проскроллит страницу к первому встретившемуся слову «human», стилизовать его можно псевдоклассом ::target-text (поддерживается во всех браузерах); в девтулзах поповеры кастомных свойств показывают computed-значение и параметры @property- сообщество e18e, которые взяли на себя роль «санитаров платформы», ходят в популярные пакеты, предлагают улучшения перфоманса, помогают выпилить ненужные зависимости; в сентябре удалось помочь выпилить смешную (да не очень) зависимость
is-number из chokidar, также подчистили Storybook и jimp- выпущен Deno 2.0: уже рассказывал о фичах раньше, в этом релизе обратил внимание на команду
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 — клиент и сервер для синхронизации состояния по вебсокет-соединению, чтобы пользоваться приложением одновременно с нескольких устройств
- держать секреты типы паролей в env-файлах довольно удобно, но ненадёжно: env-утекают на фронте/SSR, через логи или просто во время видео-стрима, также env-ы видны в списке процессов в Unix-like-системах
- вообще-то это статья про то, как работает фича девтулзов Chrome «pause on uncaught exceptions», но меня заинтересовало другое: на сайте без драм и обсуждений используется куча веб-компонентов, например,
<devsite-code> для отображения блоков кода, причём используются они в виде «виджетов»: кастомные элементы — это обёртки, докидывающие стилизацию и часть функциональности, и в браузерах, не поддерживающих кастомные элементы, контент всё равно покажется хоть и немного коряво- нативный нестинг в CSS правилах появился без флага в Chrome 112, но с немного другим синтаксисом (нужно было проставлять дополнительный
&) и эту необходимость окончательно уберут в Chrome 130; чтобы не сесть в лужу со старыми версиями нужно в нестинге обычные правила писать перед медиа-выражениями (что и логично)- если нужно, чтобы ключами объекта было что-то, кроме строк или символов, выбираем Map
CSS
- пример реализации цветовой темы с нативной поддержкой темной/светлой схемы:
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- значение свойства
grid-template-rows можно сделать динамическим, если использовать внутри кастомное свойство --int, объявленное через @property, и анимировать егоПлатформа
- кажется мы стали забывать свои корни: роутер можно собрать на веб-компонентах (подход, популяризированный в React Router, когда вьюхи оборачиваются в «теги» роутов идеально ложатся на кастомные элементы); для связей можно использовать события
CustomEvent; компоненты нативно реагируют на смену атрибутов («пропсы»)- использование не по назначению двухбуквенных доменов названий стран имеет сайд-эффект: если страна перестаёт существовать, то что делать с неактуальным доменом? Эта ситуация коснулась домена .io «страна-владелец» которого перестаёт существовать
@web_platform | Поддержать канал 🤝