#Пульс_веб_платформы 07.03.2025

🖇️ Полностью в вебе

Новости
🔡 вышел TS 5.8, с момента RC изменений нет: require(esm) ( + флаг обратной совместимости --module node18) и флаг --erasableSyntaxOnly на борту
🔡 вышел Safari Technology Preview 214: внутри долгожданная поддержка data: URL в favicon, то есть теперь можно будет во всех браузерах использовать SVG- и эмодзи-фавиконки:

<link rel="icon" type="image/noscript+xml" href="data:image/noscript+xml,[YOUR ENCODED SVG HERE]" />

🔡 вовсю идёт работа по внедрению rolldown в Vite
🔡 вышла стабильная версия TanStack Form v1 для основных фреймворков:
🔵 TS валидирует связку модели данных и значения в компоненте, причём не нужно передавать дженерики, а всё инферится з коробки
🔵 встроеная поддержка валидационных либ (Zod, ArkType…)
🔵 есть возможность задать асинхронную функцию для валидации

🔡 выпустили черновик спеки CSS Form Control Styling Level 1 про стилизацию элементов форм: appearance: base для базовой стилизации элементов, псевдоэлементы ::picker, ::thumb, ::track, ::fill и другие для стилизации UI-элементов
🔡 вышел мартовский апдейт React Aria/Spectrum с компонентами Toast, Tree и Virtualizer, также допилен хук usePress и компонент Autocomplete
🔡 вышел Chrome 134:
🔵 добавили возможность добавлять внутрь <select> дополнительные элементы помимо <option>, <optgroup> и <hr>
🔵 допилили вариации закрытия <dialog>
🔵 дополнили обратносовместимо console.timeStamp()

🔡 в Chrome 135 будет внедрён пропоузал Observable API (позиции WebKit и Mozilla по поводу этого API пока неясны):

container
 .when('click')
 .filter((e) => e.target.closest('a'))
 .subscribe({
  next: (e) => {
   // …
  },
 });

Проекты
🔡 React Scan Inspector — инструмент для анализа перерисовок React теперь в виде Chrome-плагина
🔡 openapi-fetch — типизированный fetch-клиент, согласующийся с OpenAPI схемой
🔡 CSS Voxel Editor — трёхмерный «пиксельный» редактор на базе CSS-трансформов и гридов (тут про движок)
🔡 CSS Puzzle Box — головоломка, написанная на HTML/SVG/CSS (тут про процесс создания), наполненная трюкохаками, например, «самоскрывающимся» <details>

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

JS
🔡 parseInt('1️⃣') === 1 // true, потому что внутри parseInt находит в unicode-символе сначала 1, а последующий нечисловой «вариационный» символ отбрасывается

CSS
🔡 <input type="range"> превращается в «звёздный рейтинг», чем удобно: использует нативное управления с клавиатуры, а также инпут имеет нативные атрибуты min, max, step, значения которых пробрасываются в CSS через новоиспечённый attr
🔡 только привыкли к функциям-дженерикам в TS, а как вам функции в CSS (пока что почти что фэнтези-синтаксис)?

@function --dashed-border(--color: red) {
  result: 2px dashed var(--color);
}

.argument {
  border: --dashed-border(blue);
}

.default {
  border: --dashed-border();
}

🔡 вырезаем прямоугольную прозрачную рамку внутри картинки с помощью mask и конического градиента
🔡 кастомное свойство может быть «выключено» по умолчанию, правда это хак и синтаксис выглядит сломанным:

button {
  --has-border: ; /* off by default */
  border: 1px solid var(--is-raised, rgb(0 0 0 / 0.1));
}

.bordered {
  --has-border: initial; /* turn on */
}

🔡 эффект калейдоскопа с помощью анимации кастомного свойства (@property) внутри градиента

Платформа
🔡 полезные настройки git-а в ваш .gitconfig, например, push.autoSetupRemote true для автозадания апстрима или pull.rebase true для авторебейза при пулле
🔡 скажи что-нибудь на дедовском: — кхе-кхе, ноутбук, дискета, ajax (20 назад, кстати, был обозначен, тогда были ещё актуальны XML and XSLT)!

@web_platform | Поддержать платформу ❤️

#Пульс_веб_платформы 14.03.2025

🖇️ Полностью в вебе

Новости
🔡 вышел Firefox 136, поддержали: Intl.DurationFormat, псевдокласс :open, CookieStore API, а также значение plaintext-only для атрибута contenteditable
🔡 в новый формат конфига ESLint добавили функцию defineConfig и вернули extends, это и правда удобно, чтобы замиксовать несколько предсобранных конфигов для проекта
🔡 компилятор TS будет портирован на Go к 7 версии (к ноябрю 2025 ожидается бета-версия) и ускорен в 10 раз: компилятор именно портируется, а не переписывается с нуля (Go хорошо подходит под формат уже имеющегося кода)
🔡 вышла последняя глава Web Almanac про JS:
🔵 в среднем вес JS на сайтах дорос до 500-600kb (часть кода не используется), >20 запросов за JS на странице
🔵 из бандлеров чаще всего используется webpack, с заметным отставанием Parcel
🔵 в найденных сорсмапах: TS используется в 6% сайтов, Babel — в 12% из топа 10к мобильных сайтов
🔵 jQuery используется в 74% сайтов, Swiper — в 15%, React — в 10%, веб-компоненты в 7.8%
🔵 67% сайтов включает бесполезно транспилированный JS-код

🔡 в редакторе Zed появилась поддержка GUI для работы с git (в общем, у Zed и компании есть ещё примерно полгода-год, пока TS в VSCode станет работать супербыстро, и все перестанут с него убегать)

Проекты
🔡 endoflife.date — тут можно посмотреть даты поддержки многих версий либ, программ и фреймворков
🔡 node-modules.dev — npx node-modules-inspector в вашем проекте покажет диаграмму зависимостей node_modules, их размер и связи
🔡 same.dev — AI-тула, которая походит по сайту и сгенерит аналог (работает только на простеньких лендосах, но делает их сложно 😕)

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

JS
🔡 если заходит речь про выбор фронтового фреймворка, лучше выбирать что-то поскучнее и стабильнее, правда стабильных и скучных фреймворков маловато (Next.js вендорлочит, Astro про контент, React Router всё ещё в пучине перерождений)
🔡 паттерн возвращения return await func() хорош тем, что дождётся выполнения кода, и если нужно поймать ошибку, то выбросит её, пока не произошёл выход из функции:

const helloWorld = async () => {
  try {
    return await asyncHello("World");
  } catch (e) {
    return "Whops";
  }
};

🔡 а что если «билдить» архив с вашими md-файлами просто в HTML? Навигацию можно сделать на CSS-селекторах :target, HTML-файл скачивается один раз (offline-first), не нужен JS
🔡 URL — идеальное место, чтобы хранить сериализуемое состояние приложения, но есть ограничение: на 60-80к символов в URL браузер может загнуться
🔡 база про перфоманс в React: отделяйте изменяющийся стейт рядом с тяжёлыми компонентами в отдельные компоненты для избежания ререндера
🔡 явное лучше неявного на примере выделения данных или конфигов в коде в отдельные переменные
🔡 API стейт-менеджера Jotai вдохновлено WeakMap + добавлена возможность подписки на мапу

CSS
🔡 если в вашем приложении есть отстраивание побочных цветов от основных цветов приложения (обводки, тени, градиенты, разделители, состояния UI-элементов, оттенки), то в деле поможет relative color
🔡 в Chrome 135 нас ждёт появление двух CSS-функций sign и abs: для получения знака выражения (-1 или 1) и модуля числа
🔡 в канарейке Chrome доступны функции sibling-index() и sibling-count() для получения индекса элемента и числа всех элементов на одном уровне в DOM
🔡 полупрозрачное «визуально спокойное» подчёркивание ссылок text-decoration-color: color-mix(in srgb, currentColor, transparent 75%)
🔡 существует специальное свойство для анимации движения элемента по SVG-пути — это offset
🔡 с помощью content-visibility и contain можно указать браузеру не стилизовать, не строить лейаут или не отрисовывать определённый кусок интерфейса для улучшения перфоманса (наколеночная виртуализация)

HTML
🔡 интересная идея использовать для визуального «сравнивателя» картинок <input type="range"> в качестве управляющего элемента для задания кастомного свойства с шириной картинки

Платформа
🔡 git switch - или git checkout - (для староверов) переключает на прошлую ветку в гите

@web_platform | Поддержать платформу ⭐️

Короч, я чот подумал-подумал насчёт уже выпущенного контента в тренажёрах понял, что меня повело не в ту сторону.

Практические примеры получились какими-то с одной стороны чересчур простыми, с другой неприкладными и высосанными из пальца. То есть для начинающих — мало практической пользы, для продолжающих — как-то слишком примитивно и неинтересно.

Поэтому решил всё переделать, и вот готов представить результат! Практические задания стали посложнее и пореалистичнее.

Итак, переделаны и дополнены части в тренажёре «Паттерны проектирования в JS»:
✳️ Паттерн Module (Модуль), практика: кеш с WeakMap
✳️ Паттерн Singleton (Синглтон), теория
✳️ Паттерн Singleton (Синглтон), практика: одиночный API-client
✳️ Паттерн Proxy (Прокси), теория
✳️ Паттерн Proxy (Прокси), практика: кеширование функции с Proxy
✳️ Паттерн Prototype (Прототип), практика: класс-прототип объекта

Что ещё изменилось:
✳️ для наглядности добавлен рендер в DOM (помимо вывода в консоль), то есть теперь результат выводится в окошко в виде UI
✳️ в заданиях появился React для 1) вывода результатов в UI, 2) большей реалистичности и практичности примеров (несмотря на то, что появился React, паттерны рассматриваемые в этом тренажёре, не относятся только к React, а могу быть использованы с другими библиотеками/фреймворками или без них)
✳️ улучшился вывод ошибок, так как поменялся сборщик кода: теперь ошибки кидает сам React, они более наглядные, чем прошлый вариант с parcel

Если вам есть, что сказать по поводу контента или интерфейса тренажёров, с охотой приму обратную связь в @web_platform_support или комментариях.

Дальше продолжу с того, на чём остановился в прошлый раз, паттерна Factory. Stay tuned!

@web_platform | Поддержать платформу 💙

Привет, хорошего всем экватора недели! Держимся, выходные уже не за горами, а там и май, весна, отпуск! 😏 (не обращайте внимания, это просто в СПб светит солнце и кружит голову ледяная весна)

В общем, добавил новые части в тренажёре «Паттерны проектирования в JS»:
✳️ Паттерн Factory (Фабрика), теория
✳️ Паттерн Factory (Фабрика), практика: создание формы в фабрике

А также из обновлений:
✳️ в практических заданиях тесты теперь не запускаются автоматически по любой правке кода, чтоб не грузить лишний раз систему, вместо этого для запуска тестов теперь появилась кнопка «Запустить проверку»
✳️ кроме того, теперь явно подсвечиваются как пройденные тесты, так и непройденные
✳️ код, который вы пишете в редакторах, теперь сохраняется в localStorage, при перезагрузке страницы в редакторы возвращается сохранённый код
✳️ если понадобится всё таки сбросить код до изначального, для этого появилась кнопка «Сбросить всё»

Спасибо за отзывы! Если вам есть, что сказать по поводу контента или интерфейса тренажёров, с охотой приму обратную связь в @web_platform_support или комментариях.

Следующий на очереди паттерн Strategy. Stay tuned!

@web_platform | Поддержать платформу ✨

#Пульс_веб_платформы 21.03.2025

🖇️ Полностью в вебе

Новости
🔡 в Bun v1.2.5 стала достпна поддержка Svelte и CSS modules в бандлере и дев-сервере
🔡 как и в случае Node.js vs Bun/Deno, в мире линтеров образуется похожая ситуация: к противостоянию ESLint vs Biome присоединяется вышедший в бету Oxlint, написанный на Rust, поэтому быстрый, >500 правил работает из коробки, есть автофиксы + планируют запилить поддержку кастомных ESLint-плагинов
🔡 у Vercel есть Next.js, а у Netlify теперь есть TanStack Start и это хорошо и для TanStack, так как будет деньги, и для нас, так как будет альтернатива пропушиваемой парадигме RSC, то есть появляется неиллюзорная возможность появления полноценного React-фреймворка «здорового человека»
🔡 в Safari Technology Preview 215 появились Scroll Driven Animations (в FF за флагом), CSS Anchor Positioning (в FF нет) и на десерт text-wrap-style: pretty
🔡 проект styled-components переведён в режим поддержки, так как Context API не поддерживается в серверных компонентах, экосистема в целом ушла в сторону другого подхода к написанию стилей (атомизация стилей, jit-сборка), мейнтейнер сам перестал использовать styled-components в больших приложениях. Ничего страшного: если нравится такой подход к написанию стилей (мне нравится, так позволяют часть UI логики пробрасывать внутрь стилевых компонентов) есть build-time решения со styled-like API (linaria, panda css)
🔡 Parcel v2.14.0 стал поддерживать рендер React Server Components в CSR, SSR или в build-time просто в HTML, заодно стали глубоко поддерживать MDX, и кроме того, появился инструмент миграции проекта с CRA npx cra-to-parcel

Проекты
🔡 eslint-plugin-eslint-plugin — ESLint-плагин для линтинга ESLint-плагинов, если желаете разработать свой, то может подсобить
🔡 vite-bundle-analyzer — визуальная и CLI-утилита для инспекции содержимого вашего Vite-бандла

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

JS
🔡 Document Picture-in-Picture API может быть использовано не только для показа видео-контента в отдельном окошке, в PiP можно рендерить своё кастомное содержимое
🔡 ещё один наброс на Next.js vs Vite + TanStack от человека, который устал скрестись о комплексность API и хочет, чтобы оно просто работало и на клиенте, и на сервере
🔡 если вы не поддались искушению мигрировать на Biome или Oxlint, а хотите сквозь тернии мигрировать таки ваш проект на 9 версию ESLint, то тут предлагают чеклист миграции; я пытался в миграцию полгода назад, но не осилил, так как не были готовы основные сторонние плагины, может быть пора попробовать снова
🔡 практические юзкейсы утилитарных типов в TS:
🔵 Partial в случае, если не хочется при добавлении новых полей в тип, ходить по всем местам и править это; правда встроенный Partial распространяется только на один уровень вложенности, но «deep partial» из стороннего ts-toolbet
🔵 Omit для типизации объекта, ещё не сохранённого в БД, то есть у него есть все поля, кроме id
🔵 ReturnType для вытаскивания типа, который возвращает функция
🔵 Readonly для типизации копии объекта, которую нельзя модифицировать

CSS
🔡 псевдокласс :in-range позволяет подвязаться на то, что значение в инпуте находится в пределах значений, заданных в min и max
🔡 если попробовать растянуть элемент <dialog> на всю высоту вьюпорта, то можно упереться в дефолтное браузерное значение max-height: calc(100% - 2em - 6px)
🔡 почему так сложилось — хз, тут так заведено, но есть несколько способов управлять буллетами в списках: псевдоэлемент ::marker, свойство list-style-type, счётчик  counter() и его стилизация через @counter-style, изображение в list-style-image или же старый-добрый ::before

Платформа
🔡 чем больше уровней абстракций люди строят в технологиях (энергия → чип → сервер → веб-платформа → препроцессоры → библиотеки → фреймворки…), тем больше софта требуется, чтобы это всё обслуживать; поэтому AI не лишит нас работы (ведь даже сейчас есть работа для программистов Ассемблера), а просто кратно увеличит количество разработчиков, которые будут делать ещё больше софта ещё более разнообразными способами (возможно менее оплачиваемыми)

@web_platform | Поддержать платформу 🌟

Курт Воннегут как-то сказал, что каждое предложение в истории должно или раскрывать персонажа, или развивать повествование. Этим же принципом я руководствуюсь, когда придумываю новый контент для блога и «Веб-платформы» как проекта в целом.

Эту же мысль можно замаппить и на жизнь целиком: всё, что вы делаете по жизни может или внутренне вас раскрывать, чтоб прям можно было сказать «вот это моё, вот это про меня!», или развивать сюжет вашей жизни, открывая новые части и главы.

С этой мыслью рад сообщить, что добавил новые части в тренажёре «Паттерны проектирования в JS»:
✳️ Паттерн Strategy (Стратегия), теория
✳️ Паттерн Strategy (Стратегия), практика: стратегии доступа по ролям пользователей

Если вам есть, что сказать по поводу контента или интерфейса тренажёров, с охотой приму обратную связь в @web_platform_support или комментариях.

Следующий на очереди паттерн State. Stay tuned!

@web_platform | Поддержать платформу ✨

#Пульс_веб_платформы 28.03.2025

🖇️ Полностью в вебе

Новости
🔡 в @xstate/store@3.4.0 (минималистичный стейт-менеджер под капотом xstate, который можно использовать без полного обвеса), добавили «атомарное» API createAtom() с возможностью создавать атомарные хранилища, комбинировать их друг с другом и со сторами
🔡 в техническом комитете Node.js решили исключить corepack из базовой поставки начиная с Node.js 25+ (в более ранних версиях он останется экспериментальной фичей), теперь нужно будет ставить отдельно npm install -g corepack
🔡 библиотека для анимации Motion портирована на Vue, теперь можно во так:

<template>
  <motion.div
    :initial="{ opacity: 0, scale: 0 }"
    :animate="{ opacity: 1, scale: 1 }"
  />
</template>

🔡 в Next.js найдена уязвимость (больше похожая на бэкдор), позволяющая обходить мидлвары спец-заголовком x-middleware-subrequest, то есть если у вас в мидлваре выполняется что-то важное, например, авторизация, то её сейчас можно скипнуть (если не обновить либу)
🔡 релизнулся Rsdoctor 1.0, webpack-совместимый анализатор бандла, аналог тулов webpack-bundle-analyzer и Statoscope: с помощью него можно получить ответы на вопросы «почему билд медленный», «как лучше разбить бандл на чанки», «почему увеличился размер бандла»
🔡 большое обновление Valibot v1.0.0 (рантайм-валидатора схем) спустя 15 бет и 5 rc, много добавлений/изменений
🔡 в Chrome 135 будут добавлены новые фишки:
🔵 кастомизируемый элемент <select> с помощью свойства appearance: base-select, в который можно добавить произвольный HTML
🔵 псевдоэлементы ::scroll-button() и ::scroll-marker() для создания и стилизации «нативных» каруселей

Проекты
🔡 mise — мультитул для переключения версий node, python, ruby (как nvm) + переключения env-переменных (как direnv) + запуска тасков (как make)
🔡 kaluma — мини-JS-рантайм для Raspberry Pi (вдумайтесь в параметры устройства: 300KB ROM, 64KB RAM)
🔡 http-decision-diagram — блок-схема принятия решения, какой HTTP-статус отдать клиенту
🔡 Parvus — доступный лайтбокс без зависимостей на нативном `<dialog>`-е с интернализацией

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

JS
🔡 а вы знали, что можно обратиться к текущему выполняющемуся скрипту через  document.currentScript? Это может быть полезно, чтобы, к примеру, динамически заменить скрипт на произвольный контент, получается такой дешёвый движок рантайм-шаблонов для всяких мелочей:

Come on, it’s
<noscript>
  document.currentScript.replaceWith(new Date().getFullYear());
</noscript>

CSS
🔡 ещё один юзкейс для нового типизированного attr(): прокидывание значений атрибутов value и max элемента <progress> напрямую в CSS
🔡 mask + repeating-conic-gradient + немного тригонометрии = зигзаг
🔡 если нужно что-то по-быстрому поправить в загруженном сайте без инспектора в дев-тулзах, можно использовать дизайн-режим (ввести document.designMode = "on" в консоли)
🔡 а вот и миксины подвозят в канарейку Chrome, как обычно подождём 3 года и можно будет пользовать:

@mixin --box {
  aspect-ratio: 1;
  inline-size: 100px;
  block-size: 100px;
}

.box {
  @apply --box;
}

HTML
🔡 полезные фичи <fieldset> при создании форм: можно дизейблить целиком всю группу полей через атрибут disabled у <fieldset>, а также <fieldset> может находиться отдельно от <form> и быть связанным с формой атрибутом form со значением id формы

Платформа
🔡 если вы игнорите сообщения консоли при запуске проекта Browserslist: caniuse-lite is outdated, то у вас есть шанс существенно уменьшить размер бандла с помощью команды npx update-browserslist-db@latest, так как возможно уберётся много ненужной транспиляции

@web_platform | Поддержать платформу 🌟

Фуф, это была потная катка, но таки получилось! 🅰️

В общем, сделал новый тип контента — туториал. Это чтобы не писать код, а в вайб-режиме смотреть, как код пошагово появляется, и читать описание, что происходит (скрин в комментах).

И добавил в тренажёр «Паттерны проектирования в JS» новые части:
✳️ Паттерн State (Состояние) и State Machine (Конечный автомат), теория
✳️🎉 Паттерн State Machine (Конечный автомат), туториал: игра «Угадай число»

А также из обновлений:
✳️ интерфейс немного подтюнен под мобилку
✳️ кнопки в практических заданиях и туториале переехали в отдельную панельку в самом низу экрана

Зацените, плз, и если будет что сказать по поводу контента или интерфейса тренажёров, с охотой приму обратную связь в @web_platform_support или комментариях.

Следующие на очереди паттерны Observer и Pub/Sub. Stay tuned!

@web_platform | Поддержать платформу 💙

#Пульс_веб_платформы 04.04.2025

🖇️ Полностью в вебе

Новости
🔡 вышел Chrome 135:
🔵 появились атрибуты command и commandfor для кнопок, чтобы декларативно описывать взаимодействие с поповерами и диалогами
🔵 добавили псевдоэлементы ::scroll-button() и ::scroll-marker для «нативных» каруселей
🔵 CSS-функция shape() позволяет описывать в clip-path параметрические SVG-like-формы
🔵 добавлена возможность стилизации псевдоэлемента внутри псевдоэлемента ::before::marker
🔵 поддержали Observable API и fetchLater() для отложенного запуска fetch

🔡 вышел Safari 18.4:
🔵 внедрили новый декларативный формат Web Push
🔵 также поддержали CSS-функцию shape()
🔵 обновили <input type="color" />, теперь поддерживает атрибуты alpha и colorspace
🔵 поддержали Cookie Store API

🔡 вышел Firefox 137: из интересного только выкатили группировку табов, а в ночных сборках появляется поддержка PWA
🔡 выпустили React 19.1.0: появилась фича Owner Stack для более детального отслеживания в дев-режиме иерархии рендера компонентов, а также подфиксили баги в React и React DOM
🔡 вышел Express 5.1.0, эта версия становится LTS
🔡 поддержка Node.js 18 заканчивается 30 апреля 2025, время обновить ваши .nvmrc
🔡 выпущен Material UI v7:
🔵 улучшилась поддержка ESM
🔵 устаканилось API slots и slotProps
🔵 впилили поддержку @layer для упрощения интеграции с другими либами

🔡 вышел отчёт State of Vue.js 2025:
🔵 хотят по-прежнему дожать Vapor Mode с обратной совместимостью
🔵 по популярности Vue всё ещё отстаёт от React, но количество сайтов на Vue явно больше Angular
🔵 треть проектов всё ещё на Vue 2, хоть он больше и не поддерживается (миграция вызывает сложности)
🔵 Pinia — доминирующий стейт-менеджер
🔵 комьюнити не хватает библиотек компонентов (как MUI или Radix) под Vue
🔵 Nuxt v4 уже неподалёку

🔡 со стороны WebKit появилось предложение объединить пересекающиеся части flexbox и grid в новом семействе свойств item-direction, item-wrap, item-pack, item-slack (чтобы наконец перестать вспоминать каждый раз, что эти align-smthng значат)

Проекты
🔡 ls-lint — линтер названий файлов и директорий в файловой системе

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

JS
🔡 кольцевые зависимости между модулями в JS не отлавливаются на уровне языка/среды, но они могут потенциально приводить к ошибкам типа ReferenceError: Cannot access 'a' before initialization, так как к содержимому из одного модуля может обращаться другой модуль до его инициализации и полного выполнения; беспорядочные кросс-импорты в «шареной» зоне проекта нуждаются в особом внимании, для этого есть сторонние либы для отслеживания корректности импортов madge и eslint-plugin-import
🔡 мемоизация в React изначально спроектирована довольно хрупко: простое заворачивание пропсов в useMemo`/`useCallback не повлияет на ререндеры компонента, нужно ещё замемоизировать сам компонент в React.memo, а также следить, что внутри нет спреда пропсов <Child {...props} />, нет немемоизированного прокидывания { children } (они пересоздаются каждый раз), нет дополнительных дочерних компонентов без мемоизации

CSS
🔡 аутлайн по клавиатурному фокусу на ссылках никогда не повредит:

a:focus-visible {
  outline-offset: 0.25em;
  outline-width: 0.25em;
  outline-color: currentColor;
}

🔡 про тени: три вида теней — box-shadow, filter: drop-shadow() и text-shadow —могут не только статически применяться, но и анимироваться, причём благодаря @property возможна анимация только одного из параметра тени, например, box-shadow: inset 0 0 0 var(--l) var(--c), что делает тени мощным декоративным элементом
🔡 прикольный, но хрупкий голографический эффект на скролле, построенный на режимах наложения, background-attachment: fixed и линейных градиентах

Платформа
🔡 бездумный вайб-кодинг хорош для чего-то небольшого и одноразового, так как быстро раздувает количество кода и поддержка этого дела начинает упираться в комплексность; а самый хороший способ понять систему — вдумчиво её порефакторить

@web_platform | Поддержать платформу 🌀

#Пульс_веб_платформы 11.04.2025

🖇️ Полностью в вебе

Новости
🔡 на ближайшем заседании Ecma TC39 будет обсуждаться в том числе пропоузал ECMAScript enums (stage 1): кажется это хитрый план, как сделать enum-ы легальными в JS, и тогда не придётся их болезненно выпиливать из TS при будущем «встраивании» TS в браузеры
🔡 парни из e18e продолжают участвовать в улучшении фронтенд-экосистемы и напоминают о полезных проектах для авторов пакетов:
🔵 arethetypeswrong — анализирует пакет на предмет наличия проблем с конфигурацией TS-типов
🔵 publint — линтер package.json в пакете
🔵 node-modules.dev — анализ зависимостей node_modules
🔵 eslint-plugin-depend — плагин для eslint, находящий раздутые зависимости и ненужные полифиллы

Проекты
🔡 git-mcp — меняем урл github-репозитория (github.com/username/repo → gitmcp.io/username/repo) и получаем удалённый MCP-сервер, подключенный к этому репо «на лету»
🔡 Lighthouse Scoring Calculator — наглядный калькулятор того, как отдельные метрики влияют на очки в Lighthouse (самое большое влияние у CLS, TBT, LCP)

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

JS
🔡 напоминание, что помимо Clipboard API существует ещё Web Share API (которое пока недоступно в FF), но в режиме прогрессивного улучшение вполне сгодится
🔡 и ещё одно напоминание о полезных API, о которых постоянно забываешь:
🔵 в "".replace() и "".replaceAll() можно передавать колбек и модифицировать заматченный текст
🔵 Promise.withResolvers() позволяет «вытаскивать» наружу resolve и reject при создании промиса
🔵 [10,20,30].at(-1) вернёт последний элемент массива

🔡 а также, как вы догадываетесь, ещё одно напоминание:
🔵 Object.groupBy() и Map.groupBy() сгруппируют элементы по переданному ключу
🔵 FinalizationRegistry стриггерит событие в момент, когда объект будет подчищен garbage collector-ом из памяти

🔡 что можно сделать, чтобы уменьшить размер основного React-бандла:
🔵 прочекать файлы на сайд-эффекты (`window.someBadSideEffect = 'hello'`)
🔵 не импортировать объект/класс из внешних пакетов целиком, лучше отдельными функциями
🔵 в React использовать React.lazy для ленивой подгрузки компонентов
🔵 импортировать не нужные сразу либы динамически:

const Fuse = import("fuse.js").then((module) => module.default);

CSS
🔡 currentColor или даже cUrrENtCoLOr хорошо подходит для проброса цвета внутрь инлайн-SVG (хотя то же можно сделать и кастомным свойством)

nav {
  color: salmon;

  noscript.icon {
    fill: currentColor;
    filter: drop-shadow(0 1px 0 oklch(from currentcolor calc(l - 0.25) c h));
  }
}

🔡 свежеиспеченная функция clip-path: shape() (поддерживается в Chrome и Safari) позволяет более декларативно и человекочитаемо описывать формы по сравнению с clip-path: path()
🔡 трюк, как сделать фоновые изображения полупрозрачными: если фон под изображением одноцветный и равномерный, то можно слить картинку через режимы наложения:

background-image: url(image-one.jpg);
background-color: rgba(255, 255, 255, 0.6);
background-blend-mode: lighten;

🔡 не забываем, что если завернуть любой селектор в :where(), то у него будет нулевая специфичность (годится для всяких ресетов) + годное свойство text-decoration-skip-ink для тюна подчёркивания ссылок:

:where(a:not([class])) {
  text-decoration-skip-ink: auto;
  color: currentColor;
}

HTML
🔡 так как md поддерживает HTML внутри, то в него можно вставить тег <picture> c разными вариантами картинки для тёмной/светлой темы:

<picture>
  <source media="(prefers-color-scheme: dark)" srcset="dark-image.png" />
  <source media="(prefers-color-scheme: light)" srcset="light-image.png" />
  <img src="default-image.png" />
</picture>

Платформа
🔡 незаслуженно забытый паттер проектирования Use-case, код читается как «история», вызов отдельных функций складывается в повествование:

const validatedorder = validateAndCoerceOrder (orderRequest);
const orderWithPricing = calculate0rderPricing(validated0rder);
...

@web_platform | Поддержать платформу 👁️

Что случилось? 🅰️

Я опять всё перепридумал в тренажёрах 😇

Вкратце: повкуривал и решил, что хочется сделать всё таки последовательное образование, а не просто статейки.
Целевое решение: расширенный литкод с пошаговым обучением на тему фронта, чтобы комфортно вкатиться в базу.

Что понял: 🅰️
➡️ теория → практика — недостаточно, надо так: теория → туториал → челлендж (практика)
➡️ челлендж должен строиться по принципу «вот проблема, придумай как решить»

Что изменилось: 🅰️

➡️ Переделал все практики в пошаговые туториалы в тренажёре «Паттерны проектирования в JS»:
✳️ Туториал: кеш с WeakMap
✳️ Туториал: одиночный API-клиент на axios
✳️ Туториал: кеширование функции с Proxy
✳️ Туториал: класс-прототип объекта
✳️ Туториал: создание формы в фабрике
✳️ Туториал: стратегии доступа по ролям пользователей

➡️ Добавил пробный челлендж: Челлендж: переключение цветовой темы и языка сайта 🅰️

➡️ В челленджах в тестах прикрукрутил вывод текстовой ошибки из Jest, чтобы было понятно, что именно не проходит при проверке

➡️ Обновил UI на странице тренажёра: теперь явно показывается, какая тема и какой контент внутри темы

➡️ Для отображения блоков кода впилил expressive-code, теперь всё по красоте

😋 Если найдёте баги или появится нестерпимое желание поделить обратной связью, всегда велкам в комментах или @web_platform_support

@web_platform | Поддержать платформу 🌀

#Пульс_веб_платформы 18.04.2025

🖇️ Полностью в вебе

Новости
🔡 Cloudflare продолжает свою экспансию: теперь на один Worker можно залить фронт, бэк и бд, кроме того поддерживаются все фронт-фреймворки и Vite, чтобы задеплоить одной кнопкой (для тех, кто смел и не боится блокировочек + стать завендорлоченным), а ещё выкатили платформу для создания AI-агентов (козырное имя пакета npm i agents)
🔡 анонсирована Zod 4 beta: закрыты самые востребованные ишуи, стал быстрее отрабатывать tsc, представлена тришейкабельная версия либы @zod/mini
🔡 в ближайшее время в браузерах изменится подход к стилизации вложенных заголовков h1: раньше в зависимости от глубины вложенных секций h1 по умолчанию становился всё меньше, теперь будут одного размера
🔡 обновился Astro до 5.7:
🔵 выкатили экспериментальный Fonts API, чтобы из коробки управлять загрузкой шрифтов с CDN
🔵 Sessions API и SVG Components теперь стабильные

🔡 в Firefox 139 будет включен по умолчанию Temporal, и FF станет первым поддержавшим браузером (FF получается становится такой экспериментальной площадкой до выкатки в Chrome)
🔡 Wordpress выкатывает AI-генератор сайтов: no-code-конструкторы верстальщиков не одолели, посмотрит как справится AI
🔡 новый тип уязвимости: нередко AI генерируют в коде зависимостей выдуманные названия пакетов, это в целом не проблема до тех пор, пока злоумышленники не начинают создавать под этими именами уже реальные пакеты с вредоносным кодом, которые попадают к вам в node_modules

Проекты
🔡 firebase.studio — в полку AI-редакторов прибыло со стороны Гугла: внутри работает Gemini, заявлена кросс-платформенность (веб, мобайл), деплой в гугловый хостинг
🔡 json5 — JSON для людей (для ручного написания, например, конфигов): с trailing-запятыми, одиночными кавычками, переводом на новую строку, числами, комментами

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

JS/TS
🔡 юнион нескольких наборов свойств лучше опциональных свойств в интерфейсе, так как добавляя возможность отсутствия свойства, вы создаёте больше возможных комбинаций свойств, часть их которых может быть невалидна
🔡 интересное предположение, что развитие TS в сторону «вырезания» типов, в том числе и потенциальная поддержка «чистого» TS в браузерах, возможно приведёт к падению популярности JSX (в пользу htm и lit-html)
🔡 наколеночный инжиниринг для livereload: через PerformanceObserver следим за всеми загруженными ресурсами, поллим урл с запросом мета-данных, проверяем заголовки Last-Modified и ETag, в случае, если файл обновился — перезагружаемся

CSS
🔡 неправославное использование tailwind, которое мне симпатизирует: применяем @apply как миксин в обычном CSS вместо портянки атомарных классов в HTML, опционально используем название @utility как отдельный CSS-класс
🔡 напоминание, что Media Queries Range Syntax @media (100px <= width <= 1900px) теперь доступен во всех браузерах
🔡 flex-wrap: wrap не только переносит flex-элементы на новую строку, но и в целом включает режим многострочного flex-контейнера, то есть align-content становится можно применять даже случае одного элемента в контейнере
🔡 :only-child хорошо сочетается с :has — применяем стили для элемента с единственным потомком

HTML
🔡 элемент <nonoscript> можно использовать для задания фолбек-стилей, например, для сокрытия интерактивных элементов при отсутствии скриптов

Платформа
🔡 в Interop 2025 наш ждёт: Anchor positioning, улучшение <details>, @scope (топ!), View transitions для SPA, багфиксы backdrop-filter, событие scrollend, мультисвойство text-decoration (а где же мои Style Container Queries в FF?!)
🔡 рубрика дедовские мемуары: Билл Гейтс вспоминает, как они сотоварищи писали интерпретатор языка BASIC для процессора, которого у них самих не было, но они соврали, что есть
🔡 продолжение рубрики от другого деда: Линус Торвальдс вспоминает, как 20 лет назад написал git лично для себя, и ему было начхать на окружающих
🔡 чувак убрал из своих редакторов AI-помощников, так как понял, что начал тупеть (я тоже так сделал, ни о чём не жалею), и пользуется LLM в отдельной модальности для подходящих задач

@web_platform | Поддержать платформу 🌸

#Пульс_веб_платформы 25.04.2025

🖇️ Полностью в вебе

Новости
🔡 не Vitest единым: в параллельной Rust-песочнице начали готовить свой тестовый фреймворк на основе API Jest, обещают глубокую интеграцию с RS-экосистемой
🔡 в новой версии pnpm 10.9 поддержана установка JSR-пакетов pnpm add jsr:<pkg_name>
🔡 вышел React Compiler RC: прошлый отдельный eslint-плагин смерджен в eslint-plugin-react-hooks, начали двигаться в сторону поддержки в том числе Babel-free-сборки
🔡 в React экспериментируют с ViewTransitions — плавными переходами между компонентами, наборами данных, состояниями интерфейса, а также с Activity — специальным API для анмаунта частей инфтерфейса, но с сохранением их состояния и низкоприоритетным продолжением рендера (для дальнейшего возможного показа этих частей)
🔡 пропоузал Records and Tuples в ES был официально отклонён TC39 из-за нежелания добавлять новые примитивы в язык, в пользу добавления новых объектов (tc39/proposal-composites#15)
🔡 JetBrains выкатили обновление WebStorm 2025.1 с подпиской на возможность подключить AI-ассистента + агента

Проекты
🔡 number-flow — в последнее время распространился дизайн-паттерн, когда что-то печатается в браузере, и этот кросс-фреймворковый компонент для анимированного перехода между чисел может пригодиться
🔡 playwright-mcp — вот к Playwright вслед за Puppeteer прикрутили MCP-интерфейс, так что теперь LLM смогут невизуально взаимодействовать со страницами благодаря дереву доступности (погодите, но это же была тула для тестов?!)

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

JS/TS
🔡 в недавно вышедшем Chrome 135 появилась экспериментальная поддержка fetchLater — особого API для отправки beacon-запроса «в один конец»; замысел авторов — не отталкиваться больше от событий страницы (unload/beforeUnload, которые поддерживаются нестабильно), а перейти к регистрации разработчиками намерения отправить beacon-запрос, а браузер уже позаботится об остальном сам (хотя, в целом, целесообразность появления этого API не очень ясна, ведь недавно как раз везде поддержали keepAlive у обычного fetch)
🔡 одна из причин, почему с веб-компонентами всё сложно: атрибут у HTML-элемента и значение свойства у JS-объекта этого элемента — это разные штуки: когда меняется свойство, значение атрибута не меняется, а вот смена значения атрибута чаще всего отзеркаливается в смене значения свойства, и в веб-компонентах как кастомных элементах с этим нужно разбираться вручную
🔡 замена ветвистых условий в функциях на плоскую структуру, где сначала идут early-returns, после идёт непоредственно функциональность, а затем обработка ошибок выполнения, обычно улучшает читаемость, и хочется меньше скипать код при его изучении
🔡 разбор более сложных кейсов в TS: as const для уточнения типа, indexed access types, mapped types
🔡 история про новенький Cookie Store API, который то ли уже появился в оставшемся FF, то ли всё таки ещё нет, и о том, как уже сейчас можно встроить его в React-приложение с фолбеком
🔡 использование useEffect для синхронизации нескольких состояний — не очень хорошая идея

CSS
🔡 сердечко с новомодной функцией shape()
🔡 если вы не знаете, как подступиться к формату oklch, имея на руках макеты с rgb-цветами, то можно начать с «каста» rgb-цвета в oklch, а дальше уже тюнить lch-результат:

--page-colour: oklch(from #49498D calc(l / 4) c h);

Платформа
🔡 помимо привычных браузеров Chrome, Firefox, Safari и Edge, которые в современном мире распространяются дефолтными установками в ОС, на базе их опенсорсных движков строят другие браузеры со своими фишками: где-то с переосмысленным UX (Arc, Horse, Zen, Wavebox, Surf, Shift), где-то с доп privacy (Orion, DuckDuckGo), где-то с доп функциями (Vivaldi), где-то с криптой (Brave), но отдельные смельчаки строят полностью свои движки (Ladybird, Flow, Servo)
🔡 ещё один пойнт про осознанное применение AI в кодинге: делегируя AI-помощнику трудности решения проблем, вы обкрадываете свой же опыт, а также лишаете себя удовольствия от процесса, а вот делегировать рутинные части, бойлерплейт и объяснение концепций — вполне ок для AI

@web_platform | Поддержать платформу 💙

#Пульс_веб_платформы 02.05.2025

🖇️ Полностью в вебе

Новости
🔡 зарелизился Firefox 138:
🔵 в сам браузер добавили профили пользователей, а также раскатили на всех группы табов
🔵 добавили поддержку Import Attributes (теперь поддерживается везде), а также Error.isError
🔵 как и обещали, поправили дефолтную стилизацию вложенных элементов <h1>

🔡 а так же радостная новость: в FF 139 (уже есть в ночной сборке 140) появится поддержка View Transition API (теперь будет поддерживаться везде!)
🔡 в Chrome передумали блокировать 3rd-party куки по умолчанию (не смогли со всеми договориться), всё останется как есть сейчас (можно вручную отказаться в настройках браузера), а также пообещали в Incognito-режиме добавить маскировку IP-адреса устройства
🔡 и ещё про Chrome: в грядущей принудительной продаже браузера покупателем может стать OpenAI (если так случится, то скорость изменения индустрии ещё больше ускорится)
🔡 вышел GSAP 3.13: на удивление, фаундеры и ментейнеры до их покупки Webflow, никуда не ушли, а продолжают пилить проект; с этим релизом в GSAP сделали все ранее платные плагины бесплатными, а заодно и дропнули премиальный клуб GSAP

Проекты
🔡 unbuilt.app — реверс-сервис, находящий по артефактам в коде сайтов, какие технологии использовались для их создания
🔡 component-template — если уж теперь LLM расширяют наши возможности, почему бы не попробовать начать писать веб-компоненты? Вот как раз и стартовый шаблон подходящий нашелся.

Статьи, мнения, туториалы

JS/TS
🔡 из всех способов вывести что-то как строку, менее подверженный ошибкам — {}.toString.call(v), но в большинстве случаев подойдёт String(v), но он, в свою очередь, не выведет содержимое объекта; для этого подходит JSON.stringify(), но тоже со своими ограничениями
🔡 возьмём дерево компонентов в React: обход и рендер происходит начиная с родителей «вглубь» детей, а применение эффектов (useEffect) — на «обратном» пути обхода, «вверх» от детей к родителям
🔡 если вам для управления зависимостями в package.json недостаточно dependencies и devDependencies и хочется добавить категории, можно использовать PNPM Catalogs для группировки: хоть фича изначально для монореп, но она помогает разделить пакеты и внутри одного репо по категориям (test, frontend, types, lint…)
🔡 рубрика «что хотел сказать автор» от Дэна Абрамова про RSC продолжается: директива 'use client' делает компонент доступным серверу через <noscript>, чтобы он мог его предвыполнить, а 'use server' экспортирует серверные функции на клиент, чтобы их можно было вызвать асинхронно в RPC-стиле
🔡 все эти ваши сайты — это для людей, а для машин достаточно склеенной текстовой портянки (пример от Bun)

CSS
🔡 как подтюнить анимации, чтобы они из просто хороших стали великолепными:
🔵 не забыть настроить transform-origin с той стороны, откуда анимация визуально начинается
🔵 подобрать более натуральный изинг: хотя бы ease-out, а лучше кастомную «пружинную» функцию

🔡 единица измерения lh хороший (и доступный с 2023 года везде) способ не мучиться с em для задания межстрочных отступов:

p { margin-block: 1lh; } 

🔡 скруглённые углы в CSS есть уже давно, но их по-прежнему может не хватать для непрямоугольных форм, тогда в дело вступает давно забытое искусство подставления скруглённых уголочков на фон блока (только вместо png-картинок выступают радиальные градиенты)

HTML
🔡 для реализации кликабельной картинки-карты с интерактивными областями может подойти древняя пара тегов <map> и <area>, но могут быть проблемы с респонсивом, поэтому то же можно реализовать в чистом SVG (ведь внутрь групп в качестве обёртки для форм в SVG можно включать ссылки <a>)

Платформа
🔡 ещё один тейк, на этот раз от Addy Osmani, про деградацию скиллов при неразумном использовании AI-тулов: самое плохое — отваливается критическое мышление, не менее неприятное — общения между разработчиками становится меньше
🔡 для гита можно настроить глобальный игнор-конфиг для всей системы, на маке/линуксе лежит в ~/.config/git/ignore

@web_platform | Поддержать платформу 💙

Привет всем после отпуска! 🅰️🅰️🅰️

Собирать и постить два прошлых выпуска новостей с планшета вместо ноута было то ещё удовольствие, но не выпустить их я не мог (вы же ждёте их каждый раз, правда? 😇).

Правда кодить новые тренажёры без ноута было совсем невозможно, хотя я всё таки в один из чиловых дней таки написал теорию для части по Pub/Sub. Ну а за пн-вт-ср дошли руки и до туториала.

Поэтому рад сообщить, что добавил новые части в тренажёре «Паттерны проектирования в JS»:
✳️ Паттерны Observer (Наблюдатель) и Publish/Subscribe (Публикация/Подписка), теория
✳️ Паттерн Publish/Subscribe (Публикация/Подписка), туториал: нотификации с react-toastify на шине событий

Если вам есть, что сказать по поводу контента или интерфейса тренажёров, с охотой приму обратную связь в @web_platform_support или комментариях.

Следующий на очереди паттерн Command. Stay tuned!

@web_platform | Поддержать платформу 🌀

#Пульс_веб_платформы 09.05.2025

🖇️ Полностью в вебе

Новости
🔡 вышла Node v24.0.0 с обновлённым V8 и npm, теперь это версия Current (она станет LTS в октябре)
🔡 судебное разбирательство с Google помимо продажи Chrome грозит лишить Firefox и Safari заработка, так как Google сейчас оплачивает выставленный в пользу Chrome поиск в этих браузерах по умолчанию (и если прекратит это делать, то лишит Mozilla 3/4 дохода); парадоксальная и грустная ситуация, что более здоровые конкурентные рыночные условия добьют FF
🔡 в Figma анонсировали и выкатили новые фичи:
🔵 внедрили гриды с растягиванием ячеек, гэпами и выравниванием
🔵 добавили новые инструменты для рисования вектора (кисти, заливки, формы)
🔵 добавили конвертацию макета в код и публикацию сайта прямо из Figma (но пока что есть вопросики к доступности получаемого результата)
🔵 ну и конечно появилась генерация в макете «чего угодно» с AI

Проекты
🔡 deepwiki — проект, позволяющий для любого публичного репозитория сгенерировать с помощью AI документацию по исходному коду (создаются даже схемы и диаграммы): например, дока mobx, react, linux; изучать новые либы стало ещё интереснее и проще
🔡 operator-lookup — интерактивный туториал по операторам JS
🔡 bhvr — а вот и попытка сделать просто работающий фуллстек-React-фреймворк, в который не нужно долго вкуривать, и он не залочен под конкретного вендора: под капотом Bun, Hono, Vite, React
🔡 react-modal-sheet — неплохой UI-элемент выезжающей шторки под React
🔡 color.js — либа для манипуляции с цветами от авторов спек (Lea Verou, Chris Lilley) и других уважаемых людей

Статьи, мнения, туториалы

JS/TS
🔡 как организовать микрофронтенды с помощью Astro: каждый микрофронтенд организуется как отдельный Astro-сервер, с урлов всех микрофронтов получается HTML, а затем с помощью Server Islands организуется отложенная загрузка динамики каждого фронта (пример)
🔡 и снова рубрика «что хотел сказать автор» от Дэна Абрамова, и снова про RSC: на примере того, как организован серверный и клиентский код в Astro, поясняется, что и как организовано в React; проблем сходу вижу две:
🔵 в Astro разделение на сервер/клиент сходу понятное и простое как палка
🔵 в React надо ещё уложить в голове, что компоненты по-умолчанию серверные, а могут быть клиентские, а на самом деле могут быть и такими, и такими

🔡 пара человеческих статей о том, как по-разному устроена работа эвент лупа в браузерном JS и в Node.js

CSS
🔡 сборник юзкейсов новой функции shape() (ждём только FF в 141 версии), и заодно интро в блоге webkit: самый сок этой функции — это человекочитаемые команды внутри и возможность использовать переменные, чтобы делать формы респонсивными
🔡 хорошая фича margin-trim, которая подрезает лишние отступы детей, выезжающие за родителя, но поддерживается только в Safari, печаль
🔡 утилитарный класс для установки aspect-ratio у картинок/видео, само соотношение сторон в переменной, чтобы задать извне:

[class*="aspect-ratio"] {
  --ratio: auto;
  object-fit: cover;
  aspect-ratio: var(--ratio);
}

🔡 подход к решению задачи показа/сокрытия боковых фейдов при скролле (в начале скролла фейд скрыт со стороны начала скролл-контейнера, в конце — со стороны конца контейнера): обычно это решается через JS, но здесь приводится решение через скролл-анимации, когда в зависимости от кейфрейма, переменная обнуляется или задаётся значением

Платформа
🔡 вот уже пошли первые фантазии на тему AI-мидлвар в стейт-менеджерах на фронте: типа вместо написания конкретной логики делегируем разрешение конфликтов, мемоизацию и префетч умной плослойке в виде AI-модели (уходим от кодоцентричной разработки к описанию поведения на естественном языке)
🔡 часто мы не пишем чистый код, потому что торопимся успеть до дедлайна, перегружены или не хотим трогать, чтобы не поломалось; но в целом, если устраивать «партизанский» рефакторинг, ревьюить самого себя до отправки на общественное ревью и представлять, что скажет «будущий я» по поводу этого кода, то код точно станет получше

@web_platform | Поддержать платформу ✨

#Пульс_веб_платформы 16.05.2025

🖇️ Полностью в вебе

Новости
🔡 в Chrome 136 обезопасили хранение истории посещения ссылок: с помощью безобидного селектора :visited с вредоносного сайта можно прочекать вашу историю посещения ссылок, так как она применяется к ссылкам сразу на всех сайтах; теперь же история посещения ссылок будет ограничена только конкретным сайтом, и со стороннего сайта вынуть из CSS её будет нельзя
🔡 Safari обновился до 18.5: добавили поддержку Declarative Web Push, который работает без Service Worker
🔡 а в версии Safari Technology Preview допилили функцию contrast-color(), которая для переданного цвета автоматом подбирает контрастный чёрный или белый: color: contrast-color(purple)
🔡 исходники Firefox иронично завезли на майкрософтовский Github, видимо уже готовятся сдавать в музэй
🔡 вышел Parcel v2.15.0:
🔵 движок переписан на Rust
🔵 внутри начали использовать другой HTML-парсер, html5ever из движка Servo
🔵 с SVGO перешли на Rust-аналог — OXVG (работает в разы быстрее, чем JS; хотя уход с JS-решений, как по мне, в долгую ухудшает поддерживаемость тулов в угоду сиюминутному ускорению)

Проекты
🔡 void — опенсорсный аналог Cursor (на самом деле ещё один пока ещё бесплатный форк VS Code)
🔡 noscript-to-css — транслятор нечитаемой SVG-формы в более читаемый CSS-синтаксис clip-path: shape()
🔡 leptos — React-подобный фреймворк на Rust со знакомыми паттернами (реактивные сигналы, подобие JSX, компоненты)
🔡 basecoatui — shadcn/ui, портированный с React в чистый HTML/CSS
🔡 eslint-plugin-react-you-might-not-need-an-effect — плагин для ESLint, подсвечивающий лишнее использование useEffect

Статьи, мнения, туториалы

JS/TS
🔡 эволюция альтернативного минималистичного генератора статических сайтов Nue JS привела к ребредингу в Hyper — также минималистичный, но уже полноценный headless view layer, которым изначально и планировался React, но потом что-то пошло не так
🔡 если вы не уверены точно, какой будет лог у следующего кода, то есть подробное объяснение о работе промисов:

new Promise((resolve) => {
  console.log("Deep");
  resolve("12");
}).then((result) => console.log(result));

console.log(25);

🔡 противоречие Rust- и JS-тулингов даёт о себе знать: React Compiler — JS-тула, использует Babel, и не работает с Rust-тулченами типа SWC и OXC
🔡 пример реализации простой Dependency Inversion в React, когда отделяется слой работы с данными и подтягивается в компонент как зависимость
🔡 Дэн не унимается и продолжает толкать свою телегу: на этот раз напоминание, что RSC могут рендериться в билд-тайме в статичный HTML вовсе без использования «серверных» функций
🔡 тонкость работы с контекстом в React: если вынести контекст-провайдер в отдельную обёртку и прокидывать содержимое в него через children, то при изменении стейта внутри этой обёртки можно избавиться от лишних ререндеров children, так как они не меняются (и ещё одна статейка про этот же подход)
🔡 новая книга по основам TS «Total TypeScript Essentials» от Matt Pocock: пока не читал, но одобряю не глядя

CSS
🔡 так, тут опасная и экспериментальная CSS-магия: берём scroll animations, добавляем новенькие CSS-карусели и вишенкой на торте — scroll snaps: так можно в карусельке реализовать динамическую высоту слайдов в зависимости от скролла (Chrome only)
🔡 псевдоэлементом ::first-letter можно стилизовать не только обычную букву, но и любой символ, к примеру, emoji
🔡 тема height: 100% неочевидно работает в CSS из-за двух противоречащих друг другу механизмов: 1) по умолчанию во Flow layout родитель принимает минимально необходимую высоту для показа дочерних элементов; 2) высота ребёнка, заданная в % расчитывается относительно родителя. Поэтому для корректной работы процентной высоты во Flow layout она должна быть выставлена в 100% для всех возможных родителей (#root, body, html). Или же можно не заморачиваться и использовать другой контекст форматирования — Grid layout, в котором не родитель схлопывается под высоту ребёнка, а наоборот дети растягиваются на высоту родителя

@web_platform | Поддержать платформу 💟

#Пульс_веб_платформы 23.05.2025

🖇️ Полностью в вебе

Новости
🔡 команда TS выкатила превью нативного TS на Go, можно попробовать в терминале npm install -D @typenoscript/native-preview или в VS Code в виде расширения: оно живое (!) и по ощущениям LSP в VS Code шевелится побыстрее
🔡 Microsoft заопенсорсит расширение Copilot-чата, тем самым видимо планируя прикрыть зоопарк форков VS Code с AI-панельками; также Copilot Chat будет поддержан в вебе и существенно доработан
🔡 Stackoverflow стремительно теряет активных пользователей (и не потому что на все вопросы уже ответили, а потому что узнавать ответы стали в других местах), поэтому компания думает о ребрендинге и перефокусировке с только Q&A ещё на сообщество и построение карьеры; что ж, такие времена, или адаптируйся под AI, или умри
🔡 Mozilla просит суд не перекрывать «денежный» кислород от Google в антимонопольном деле; такой вот парадокс: чтобы поддержать хоть какую-то конкуренцию, нужно продолжать делать «нерыночные» вливания за поиск Google по умолчанию в FF
🔡 ESLint в добавок к JSON, md и CSS, теперь умеет линтить HTML с помощью плагина html-eslint; как и в прошлых случаях из коробки сразу идут многие базовые правила, которые не надо дополнительно настраивать
🔡 вышли ES Module Shims 2.5:
🔵 позволяют использовать нативные импорты CSS- и JSON-модулей: import style from './style.css' with { type: 'css' };
🔵 нативный TS теперь просто работает, без доп настроек
🔵 появилась возможность замутить «нативный» hot reload через import.meta.hot

🔡 в семействе Rs- вышла новая либа для создателей либ — Rslib: внутри уже предустановленные конфиги для беспроблемной сборки (в том числе стилей) и публикации либ в разных форматах (ESM, CJS, UMD, Module Federation)
🔡 а в семействе TanStack вышла клиентская БД/стор — db, которая держит данные на клиенте, позволяет делать выборки (query) из этой БД и синкается с любым бэком

Проекты
🔡 crosspost — JS-либа для кросспостов в соц сети; тут хочется подсветить не фичи либы, а её API — чистый паттерн Strategy (о котором рассказывал в тренажёре), зацените

Статьи, мнения, туториалы

JS/TS
🔡 для работы с буфером обмена можно использовать методы navigator.clipboard.writeText() для обычного текста или navigator.clipboard.write() для всех остальных форматов типа картинок, текстового контента и HTML; а проверить браузер на умение вставлять определённый формат (без выброса исключения) можно с помощью ClipboardItem.supports()
🔡 юзкейсы генераторов в JS обычно довольно специфические, но если свести к сути, то они подходят для любой условно «бесконечной» серии действий: перебора элементов, генерации наборов, обработки асинхронных сообщений; неочевидный пример:

function* getElements(tagName = "div") {
  while (true) yield document.createElement(tagName);
}

CSS
🔡 для нативных <input type="date"> и <input type="time"> в некоторых хромиум-браузерах показываются иконки часов и календаря, для их стилизации подходит псевдокласс ::-webkit-calendar-picker-indicator
🔡 новую функцию shape() можно использовать не только в связке с clip-path() для рисования фигур, но и с offset-path для задания формы движения: вместо offset-path: path("") более читаемый offset-path: shape()
🔡 некоторые CSS-сниппеты разной степени полезности: точно подтвержу, что если делаете какой-то общий компонент со стилизацией, которая может внезапно стать «глобальной» (стилизация по тегам p, body`…), то её точно полезно завернуть в `@layer {}, чтобы у потребителя не возникло необходимости переопределять ваши «глобальные» стили, так как они будут применяться раньше по каскаду
🔡 неинтуитивные решения для лейаута, например, по умолчанию минимальная ширина grid- и flex-детей — auto, что не всегда удобно, и её можно сбросить

HTML
🔡 тег <datalist> можно использовать не только для «выпадашки» текстовых значений, таргет-элементом листа может быть, например, <input type="color">, а элементами листа, соответственно, цвета

@web_platform | Поддержать платформу 🌟

#Пульс_веб_платформы 30.05.2025

🖇️ Полностью в вебе

Новости
🔡 закрывается браузер Arc: создатели переключились на другой браузер (с AI) Dia, под капотом тоже Chromium и проприетарная платформа для создания браузеров, которую опенсорсить не собираются
🔡 также закрывается проект Glitch (браузерный редактор веб-приложений + хостинг) после 10 лет работы
🔡 в ESLint провели ретроспективу выкатки flat-config-а с 2019 по 2024, выявили основные ошибки: слишком много ломающий изменений за раз, слишком много документации и отсутствие тулинга автомиграции, медленное впитывание новой версии экосистемой, отказ от двойных конфигов (надо было поддержать, востребовано авторами плагинов)
🔡 господа из React Router поддержали в RR React Server Components, а также решили воскресить Remix (в лучших традициях рестлинга) да не просто так, а сделать его полностью независимым, даже от React (внутри будет форк Preact): теперь стало понятно, что этот проект — экспериментальная площадка, чтобы проверять крейзи-фичи и затем интегрировать их в «стабильный» RR
🔡 вышел Chrome 137:
🔵 поддержали функцию if() в CSS: background-color: if(style(--color: white): black; else: white)
🔵 заработала функция shape() для указания направления в свойстве offset-path
🔵 добавили значение view-transition-name: match-element, чтобы автогенерировать название вью-транзишна вместо хардкода или задания из JS

🔡 вышел Firefox 139.0:
🔵 из коробки работает Temporal proposal (прикол в том, что для движка SpiderMonkey поддержку реализовал один чел, опенсорсный контрибьютор, который не работает в Mozilla)
🔵 поддержали атрибут hidden=until-found
🔵 в экспериментальных фигах за флагом приехали: View Transition API, scheduler.yield()

🔡 вышла новая версия Bun v1.2.14:
🔵 позаимствовали фичу catalogs: из pnpm для создания алиасов для группы зависимостей
🔵 добавили флаг bun init --react для быстрого разворачивания шаблона React-проекта и дев-сервером на Bun

🔡 вышла новая версия JSPM 4.0 (import map package manager): внутри команды для безконфиговой сборки и сервинга проекта, поддержка нативного TS «со стриппингом», импортмапы средствами браузера — звучит знакомо? да, потому что контрибьютор JSPM и ES Module Shims — один и тот же человек, Guy Bedford

Проекты
🔡 snapdom — либа для снятие скриншота с DOM-ноды, как в дев-тулзах, только отдельной либой (и без папеттира внутри)
🔡 enum-converter — пример работы  TypeScript Transform API — конвертер Enum в type alias

Статьи, мнения, туториалы

JS/TS
🔡 реактовский useSyncExternalStore можно использовать не только для хранения каких-то бизнес-данных (типичный стор), но и для «UI»-информации, например, данных о window.matchMedia: подписываемся на 'change' состояния экрана, записываем в «стор», в React-компоненте юзаем этот стор
🔡 как избегать проблемы циклических импортов между компонентами с помощью здравого смысла, а также инверсии зависимостей (меняем прямое использование на пропы) на примере методологии FSD
🔡 в связи с начавшейся раскаткой Temporal в браузерах (FF — первый) пора знакомиться, если ещё не, тем более, есть полифилл
🔡 краткая история JS с уклоном в Райана Даля, Node и Deno: в 2025 JS исполнилось 30 лет, JSDoc — 26 лет, JSON — 24, Safari — 22, MDN — 20, jQuery — 19, Chrome — 17, Node.js, CoffeeScript — 16, npm, Backbone — 15, TypeScript — 13, React — 12, ES6 — 10, Next.js — 9, Bun — 2

CSS
🔡 помимо именования view-transions с ними есть ещё одна проблема: так как транзишн применяется к document, одновременно может выполняться только один транзишн + есть проблема с z-index, когда транзишнящийся элемент перекрывает всё вокруг; решение — будущий Scoped View Transitions, то есть возможность запуска транзишна на конкретном элементе element.startViewTransition()
🔡 эффект «фонарика в темноте»: что прикольно, так это, что можно задавать любую форму светлому участку благодаря filter или mix-blend-mode, например, «решётка» из градиентов сильно смазанная и переконтращенная filter: blur(1em) contrast(100) становится движущейся «кляксой»

@web_platform | Поддержать платформу ✨

#Пульс_веб_платформы 06.06.2025

🖇️ Полностью в вебе

Новости
🔡 в Chrome 138 (сейчас уже в бете) будут доступны CSS-функции sibling-index() и sibling-count(), которые отдают интежер с позицией элемента среди собратьев и общее число детей, будет работать внутри calc():

li {
  animation-delay: calc(0.1s * sibling-index());
}

🔡 выпущен tech preview «растифицированного» Vite — Rolldown-Vite: под капотом заменили связку Rollup + esbuild на собственные Rolldown + Oxc, чем существенно ускорили сборку по времени и памяти; заодно решили, что раз оно теперь работает быстро, то можно и для дев-сервера сделать не лёгкую ESM-сборку, а полноценную, и в будущем в Vite будет доступен режим full-bundle mode
🔡 обновился Vitest до версии 3.2:
🔵 задепрекейтили настройку workspace в пользу projects
🔵 добавили аннотации в выполнение тестов, которые будут выводиться в консоль, и кастомные цвета для projects
🔵 добавили возможность раcширения встроенных locators собственными методами

Проекты
🔡 livestore — решение для стораджа данных на клиенте в SQLite c реал-тайм-синхронизацией всех клиентов и бэка
🔡 udm14 — если добавить параметр &udm=14 к поисковой строке гугла, то он внезапно откроется без AI-обвеса, суммаризаторов и тд
🔡 small — минимально возможные синтаксически валидные файлы на всех языках (например, в JSON-файлах — минимальное содержимое 0)

Статьи, мнения, туториалы

JS/TS
🔡 природа языка JS такова, что при «кидании» в throw можно бросить не только объект ошибки Error, но и строку, число, объект, и это создаёт проблемы с тем, что и в каком формате ожидать в catch; TypeScript тут особо не помогает, исключения в TS не тайпчекаются, поэтому рекомендуется при обработке исключения проверять его тип

export const parseError = (error: unknown) => {
 if (typeof error === 'string') {
  return error;
 }

 if (error instanceof Error) {
  return error.message;
 }

 return 'An error occurred';
};

🔡 если вы приводите строку к дате new Date('2025-05-28') и new Date('2025/05/28'), то результаты могут быть разные: в первом случае браузер воспринимает строку как неполный формат записи даты-времени ISO 8601 и дополняет её на своё усмотрение (так, что может даже открутить часами дату до предыдущего дня, если устройство находится в удачной таймзоне)
🔡 flushSync — метод в React, который позволяет минуя батчинг императивно и синхронно запустить обновление UI в нужный момент, например, чтоб корректно установить фокус в инпут, который только что показался с помощью сеттера из useState
🔡 есть такой тип данных Uint8Array, который как обычный массив, но каждый элемент в нём гарантировано размером 1 байт; так вот, в V8 на больших размерах массивов (> 150) Uint8Array занимает меньше места в памяти, чем обычный массив
🔡 дежурное напоминание: в свойстве firstChild может оказаться не нужный DOM-элемент (тег), а текстовая нода с переносом строки "\n " (зависит от форматирования HTML-кода), поэтому лучше использовать .children[0]

CSS
🔡 у нативного элемента dialog есть браузерный элемент подложки, который стилизуется через ::backdrop, обычно его делают полупрозрачным (и сам он по умолчанию тоже полупрозрачный); так вот, к нему можно при желании применить фоновое изображение, чтобы сделать подложку непрозрачной и модалку перекрывающей нижний слой
🔡 полностью CSS-ный редактор в стиле Майнкрафт:
🔵 все блоки уже заранее построены, но скрыты и показываются благодаря старому трюку с чекбоксами/радиокнопками и соответствующими лейблами
🔵 анимации тоже заранее запущены, но поставлены на паузу, а нажатие контролов (:active) их снимает с паузы

Платформа
🔡 мрачноватый рисунок образа будущего: Chrome превращается в новый IE6, так как Google с одной стороны заставляют его продать, с другой — с приходом LLM поиск, а следом и веб-браузинг как таковой, а следом и процесс развития стандартов существенно меняется
🔡 разработка ПО породила собственную субкультуру с чисто разработческим жаргоном: Yoda Conditions, Stringly Typed, Rubber Ducking, Jenga Code и другие знакомые по разработческим будням явления

@web_platform | Поддержать платформу 🌀

#Пульс_веб_платформы 13.06.2025

🖇️ Полностью в вебе

Новости
🔡 обновился редактор Cursor 1.0:
🔵 главное — появилась настройка в 1 клик MCP-серверов
🔵 также из интересного появилась бета-фича Memories: редактор может запоминать факты из диалогов и ссылаться на них в будущем

🔡 последние обновления ES от TC39:
🔵 Array.fromAsync перешёл на Stage 4 (доступен везде)
🔵 Error.isError перешёл на Stage 4 (доступен везде)
🔵 using перешёл на Stage 4 (Chrome only)
🔵 Seeded Pseudo Random Numbers от Tab Atkins перешёл на Stage 2

🔡 обновился Astro 5.9:
🔵 появилась экспериментальная встроенная поддержка Content-Security-Policy посредством встраивания тега <meta> с нужными хэшами используемых файлов (также загружаемых динамически)

🔡 недавно анонсировали @platformatic/php-node — официальный модуль Node.js с возможностью процессить PHP внутри Node.js-рантайма; главный вопрос был «зочем?», и вот выпустили статью, где рассказали юзкейсы: миграция PHP-прил на Node.js, гибридные приложения (Node.js сервисы с кусочками PHP-процессинга)
🔡 React Router пообещали сделать стабильнее через перевод процесса разработки на процесс TC39 Process (проход по стейджам + публичные обсуждения)
🔡 команда Edge завезла в будущий Chrome 139 стилизацию gap-ов в гридах/флексбоксах посредством новых свойств column-rule-* и row-rule-*
🔡 релизнули первый стабильный Oxlint (линтер на Rust от Evan You сотоварищи):
🔵 за счёт мультипоточности быстрее ESLint в 50-100x
🔵 есть автомиграция flat-config-а ESLint в .oxlintrc.json
🔵 сразу включает > 500 правил из самого ESLint и популярных плагинов + собственные правила

🔡 анонсировали бету Safari 26, да, Safari 19 не будет, будет сразу 26, следуя за числом года (что будет после 2099 года видимо уже неважно):
🔵 наконец-то будут SVG-favicon-ки
🔵 тег <model> для показа 3d-моделей в браузере (с фолбеком в обычную картинку)
🔵 в CSS поддержаны Anchor Positioning, Scroll-driven Animations, contrast-color(), progress(), margin-trim
🔵 из API поддержаны URLPattern, scrollMargin в IntersectionObserver, File System WritableStream, Pattern Modifiers в RegExp

Проекты
🔡 canidev.tools — CanIUse для фич девтулзов в движках
🔡 odyc — забавная либа для создания простых нарративных игр прям из конфига, такие вайбы «языка» Scratch

Статьи, мнения, туториалы

JS/TS
🔡 с помощью document.currentScript можно пробросить через тег <noscript> внутрь скрипта data-атрибуты, чекать обычные атрибуты (типа, что скрипту обязательно проставлен defer) или же порядок следования скрипта в разметке (только в начале body или после определённого элемента)
🔡 Tanner Linsley убеждает, что URL как хранилище стейта недооценено из-за проблем с парсингом, типизацией и отсутствия связи с роутингом напрямую и рекомендует использовать TanStack Router, чтобы порешать все эти проблемы и наслаждаться рантайм-валидацией роутов с безопасным сохранением стейта в URL
🔡 в отличие от директив (типа use strict) магические комменты в начале файлов вроде /** @aPragma */ или //# aMagicComment, влияющие на процесс интерпретации и транспиляции JS-файлов, нестандартны и мало задокументированы

CSS
🔡 напоминание, что у вариативных шрифтов можно анимировать font-weight
🔡 ещё одно напоминание: вьюпорт-ориентированные динамические единицы измерения sv*, lv*, dv* с нами уже с 2022 года, то есть сейчас уже считаются широко распространёнными
🔡 анимация до не фиксированного, а динамического значения
🔡 1fr 1fr vs auto auto vs 50% 50%, что выбрать, если нужно разделить на две равные части: в итоге лучше будет воспользоваться гридовым minmax(0, 1fr) для возможности работы overflow при переполнении

Платформа
🔡 задумывались ли вы куда следует ставить фокус при открытии модалки: в инпут, на кнопку закрытия, на заголовок, на кнопку ключевого действия в модалке? Однозначного ответа на этот вопрос нет, зато есть набор вопросов, которые можно себе задать, чтобы выбрать подходящий вариант для вашего конкретного случая

@web_platform | Поддержать платформу 🌟