Веб-платформа

Привет! Сегодня новостей не будет. Не то, что бы их нет. Но я в отпуск. Всем чилл! 🌟

#Пульс_веб_платформы 27.06.2025 🖇️ Полностью в вебе Новости 🔡 вышел Chrome 138: 🔵появились функции sibling-index() и sibling-count(), которые возвращают индекс элемента среди собратьев и общее число детей 🔵значение stretch (префиксная версия `-webkit-fill-available`) 🔵математические функции abs(), sign(), progress() 🔵группа встроенных AI-API: Translator API, Language Detector API, Summarizer API 🔵эскейп символов < и > в значениях атрибутов DOM-нод 🔡 выпущен Firefox 140: 🔵в браузере появились вертикальные табы на боковой панели (также можно вручную выгружать табы из памяти) 🔵поддержан CookieStore API и Custom Highlight API, теперь есть во всех браузерах! 🔵вслед за Chrome тоже теперь эскейпируют символы < и > в атрибутах и применяют сквозные стили по умолчанию к h1 🔡 в Astro 5.10: 🔵появились live-контентные коллекции, которые извлекаются в рантайме вместо билд-тайма 🔵стабилизированы встроенные респонсив-картинки 🔡 в Prettier 3.6: 🔵под флагом вышел новый CLI 🔵зарелижены плагины @prettier/plugin-oxc и @prettier/plugin-hermes 🔡 вышел Vite 7.0, в котором дропнута поддержка Node.js 18 и изменены дефолтные таргет-версии браузеров 🔡 выпустили SVGO v4.0.0: 🔵дропнули поддержку Node.js 14 🔵появились новые дефолтные плагины 🔵теперь поставляется в виде dual-пакета: ESM + CJS Проекты 🔡 syntax-highlight-element — а вот подъехал и веб-компонент для подсветки синтаксиса на свежеподдержаном Custom Highlight API 🔡 sonda — универсальный визуализатор и анализатор JS и CSS-бандлов, совместимый с основными сборщиками и фреймворками 🔡 kelp — новый CSS-фреймворк в 2025 наверное звучит уже иронично, использовать его вы вряд ли будете, но покопать для нахождения интересных фишек никогда нелишне, например, селектор :where(:root) или слоистая структура отдельных модулей CSS Статьи, мнения, туториалы JS/TS 🔡 очередная история про уменьшение раздутого бандла; если вы сталкиваетесь с такой же проблемой: 🔵проверьте, хорошо ли работает тришейкинг: возможно придётся убрать barrel-импорты, где-то вручную добавить магический коммент /* #__PURE__ */ и настроить секцию sideEffects в package.json 🔵смените таргет-версию ES хотя бы до es2022 🔵обновите зависимости 🔡 наверняка вы сталкивались с ситуацией в TS, когда из-за ветки проверки ключей Map или индексов массивов в тип значения добавляется undefined, например, undefined | string, из-за этого приходится дополнительно явно проверять значение на undefined либо ещё вариант пропатчить тип метода has() у Map или же просто проставить ! там, где вы точно уверены в результате 🔡 комитет одобрил ES2025, что нового появилось в языке: 🔵Import attributes with { type: 'json' } 🔵Iterator helper methods (filter, map, find…) 🔵новые методы Set() 🔵RegExp.escape() 🔵Promise.try() CSS 🔡 каскадные слои в CSS — хорошая тема, даже если вы используете подход с атомарными стилями; особенно может быть полезно на больших проектах со старой кодовой базой или внешними стилями, а также если планируется долго развивать комплексное приложение 🔡 скролл-анимации хоть ещё и поддерживаются только chromium-браузерах, но уже появились в превью-версиях Safari и за флагом в FF, так что для каких-то простеньких и не влияющих сильно на UX интерфейсных решений, вполне применимы (например, анимированный индикатор скролла страницы) Платформа 🔡 если вы приступаете к разработке чего-то связанного с датой-временем (особенно в мировых масштабах) с мыслью «Что может быть проще времени?», то без использования спец либ вы наверняка столкнётесь с массой проблем (иногда даже их не заметив), вот список потенциальных проблем 🔡 чел вёл статистику столкновения с хитрыми багами с 2002 года и подвёл итоги; часто проблемы возникают: 🔵с обработкой пустых значений (забывается ставить проверку на пустоту) 🔵с днями (временем, в целом) 🔵с устаревшими форматами данных 🔵дубликатами словарей 🔵незапушенными локальными изменениями 🔵некорректными правами доступа 🔵некорректным использованием фич пользователями 🔵неполной тестовой средой по сравнению с продом @web_platform | Поддержать платформу 💕

#Пульс_веб_платформы 20.06.2025 🖇️ Полностью в вебе Новости 🔡 вышел релиз pnpm 10.12.1: выкатили экспериментальную поддержку global virtual stores — теперь в node_modules хранятся не сами пакеты, а только симлинки на центральное хранилище в файловой системе, которое может переиспользоваться сразу всеми проектам; поэтому теперь установка пакетов может быть очень быстрой за счёт установленных ранее и закешированных в хранилище пакетов 🔡 Node.js 18 уже достигла End-Of-Life, и мигрировать рекомендуется сразу на текущую активную 22 версию, чтобы в следующий раз нескоро переезжать (апрель 2027) 🔡 выпущен Jest 30: 🔵 поддерживает .mts и .cts файлы по умолчанию 🔵 удалили алиасы expect, для миграции добавили eslint-плагин с автофиксером 🔵 обновили поддержку jsdom, дропнули поддержку Node 14, 16, 19 и 21, TS < 5.4 🔵 так как Гугл задепрекейтил домен goo.gl, который использовался для хранения снепшотов, то придётся их все переделать 🔡 для v0 сделали режим Design Mode, чтобы править параметры в UI без залезания в код (пока поддерживается Tailwind и shadcn/ui) 🔡 в Chromium 138, Firefox 140 и Safari 26 Beta изменится принцип декодирования символов < и > в атрибутах элемента с помощью методов innerHTML и outerHTML (раньше было <div data-content="<u>hello</u>"></div>, теперь будет <div data-content="&lt;u&gt;hello&lt;/u&gt;"></div>) 🔡 вышел Biome v2: 🔵 линтинг типов теперь не завязан на tsc 🔵 поддержаны вложенные конфиги 🔵 выпущен специальный сканер файлов, который находит вложенные конфиги и индексирует файлы 🔵 появилась первая ограниченная поддержка плагинов и HTML-форматтер 🔡 в редакторе Zed появился встроенный Debugger (имплементирован Debug Adapter Protocol (DAP)) Проекты 🔡 eslint-plugin-eslint-comments — плагин для ESLint, который линтит комменты ESLint, чтобы, например, запретить выключение правил линтинга Статьи, мнения, туториалы JS/TS 🔡 как сейчас дела в React и экосистеме билд-тулов и фреймворков: по скачиваниям Vite-плагин растёт и догоняет Next, а CRA после депрейката расти перестал; среди остальных React-специфичных фреймворков больше всего скачиваний у React Router, а Astro, Expo и Gatsby существенно отстают 🔡 import-maps изначально не позволяли загружать любые модули до загрузки самого import-map-а, а также всего на страницу мог быть только один import-map: это ограничение усложнило применение технологии у инженеров Shopify и они совместно с вендорами браузеров проработали изменение в спецификации и внедрили в Chromium и WebKit; теперь import-map-ов может быть несколько, и они мерджатся в один, а также любой модуль может загружаться до или после загрузки самого map-а 🔡 утилитарный тип Prettify, которого пока нет в стандартной поставке TS, улучшает читаемость «сборных» типов:

type Prettify<T> = {
  [K in keyof T]: T[K];
} & {};

🔡 юзкейсы top-level await в браузере и Node.js: 🔵 запрос конфига на старте приложения const config = await fetch('/config.json') 🔵 динамический импорт другого модуля const dbDriver = await import('./drivers/postgres.js') 🔵 ожидание инициализации (в момент выполнения top-level await выполнение модуля становится на паузу) CSS 🔡 пока встроенная функция нахождения контрастного цвета текста contrast-color() ещё нигде не работает, можно использовать математическую магию 🔡 в комбинированных анимациях, где используются scale и translate одновременно, важен порядок написания свойств: если scale писать перед translate, то тогда translate будет выполняться неравномерно, так как scale будет «умножать» значения translate 🔡 есть такая функция filter() (не путать со свойством filter), которая позволяет создать комбинированный фильтр, например, из градиента и SVG; всё бы хорошо, но она работает только в Safari, а если хочется кроссбраузерно сделать на градиентной картинке, к примеру, зернёный фильтр, то нужно отдельно задать всему блоку свойство filter и градиент наслоить на зерно HTML 🔡 чеклист для проверки правильности синтаксиса респонсив-изображений (srcset, sizes) с примерами правильно/неправильно @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 можно пробросить через тег <script> внутрь скрипта 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 | Поддержать платформу 🌟

#Пульс_веб_платформы 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 | Поддержать платформу 🌀

#Пульс_веб_платформы 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 | Поддержать платформу ✨

#Пульс_веб_платформы 23.05.2025 🖇️ Полностью в вебе Новости 🔡 команда TS выкатила [превью нативного TS на Go, можно попробовать в терминале npm install -D @typescript/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 | Поддержать платформу 🌟

#Пульс_веб_платформы 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) 🔡 svg-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 | Поддержать платформу 💟

#Пульс_веб_платформы 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 | Поддержать платформу ✨

Привет всем после отпуска! 🅰️🅰️🅰️ Собирать и постить два прошлых выпуска новостей с планшета вместо ноута было то ещё удовольствие, но не выпустить их я не мог (вы же ждёте их каждый раз, правда? 😇). Правда кодить новые тренажёры без ноута было совсем невозможно, хотя я всё таки в один из чиловых дней таки написал теорию для части по Pub/Sub. Ну а за пн-вт-ср дошли руки и до туториала. Поэтому рад сообщить, что добавил новые части в тренажёре «Паттерны проектирования в JS»: ✳️ Паттерны Observer (Наблюдатель) и Publish/Subscribe (Публикация/Подписка), теория ✳️ Паттерн Publish/Subscribe (Публикация/Подписка), туториал: нотификации с react-toastify на шине событий Если вам есть, что сказать по поводу контента или интерфейса тренажёров, с охотой приму обратную связь в @web_platform_support или комментариях. Следующий на очереди паттерн Command. Stay tuned! @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' делает компонент доступным серверу через <script>, чтобы он мог его предвыполнить, а '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 | Поддержать платформу 💙

#Пульс_веб_платформы 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 | Поддержать платформу 💙

#Пульс_веб_платформы 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 🔡 элемент <noscript> можно использовать для задания фолбек-стилей, например, для сокрытия интерактивных элементов при отсутствии скриптов Платформа 🔡 в 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 | Поддержать платформу 🌸

Что случилось? 🅰️ Я опять всё перепридумал в тренажёрах 😇 Вкратце: повкуривал и решил, что хочется сделать всё таки последовательное образование, а не просто статейки. Целевое решение: расширенный литкод с пошаговым обучением на тему фронта, чтобы комфортно вкатиться в базу. Что понял: 🅰️ ➡️ теория → практика — недостаточно, надо так: теория → туториал → челлендж (практика) ➡️ челлендж должен строиться по принципу «вот проблема, придумай как решить» Что изменилось: 🅰️ ➡️ Переделал все практики в пошаговые туториалы в тренажёре «Паттерны проектирования в JS»: ✳️ Туториал: кеш с WeakMap ✳️ Туториал: одиночный API-клиент на axios ✳️ Туториал: кеширование функции с Proxy ✳️ Туториал: класс-прототип объекта ✳️ Туториал: создание формы в фабрике ✳️ Туториал: стратегии доступа по ролям пользователей ➡️ Добавил пробный челлендж: Челлендж: переключение цветовой темы и языка сайта 🅰️ ➡️ В челленджах в тестах прикрукрутил вывод текстовой ошибки из Jest, чтобы было понятно, что именно не проходит при проверке ➡️ Обновил UI на странице тренажёра: теперь явно показывается, какая тема и какой контент внутри темы ➡️ Для отображения блоков кода впилил expressive-code, теперь всё по красоте 😋 Если найдёте баги или появится нестерпимое желание поделить обратной связью, всегда велкам в комментах или @web_platform_support @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;

  svg.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 | Поддержать платформу 👁️

#Пульс_веб_платформы 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 | Поддержать платформу 🌀

Фуф, это была потная катка, но таки получилось! 🅰️ В общем, сделал новый тип контента — туториал. Это чтобы не писать код, а в вайб-режиме смотреть, как код пошагово появляется, и читать описание, что происходит (скрин в комментах). И добавил в тренажёр «Паттерны проектирования в JS» новые части: ✳️ Паттерн State (Состояние) и State Machine (Конечный автомат), теория ✳️🎉 Паттерн State Machine (Конечный автомат), туториал: игра «Угадай число» А также из обновлений: ✳️ интерфейс немного подтюнен под мобилку ✳️ кнопки в практических заданиях и туториале переехали в отдельную панельку в самом низу экрана Зацените, плз, и если будет что сказать по поводу контента или интерфейса тренажёров, с охотой приму обратную связь в @web_platform_support или комментариях. Следующие на очереди паттерны Observer и Pub/Sub. 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
<script>
  document.currentScript.replaceWith(new Date().getFullYear());
</script>

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»: ✳️ Паттерн Strategy (Стратегия), теория ✳️ Паттерн Strategy (Стратегия), практика: стратегии доступа по ролям пользователей Если вам есть, что сказать по поводу контента или интерфейса тренажёров, с охотой приму обратную связь в @web_platform_support или комментариях. Следующий на очереди паттерн State. Stay tuned!

#Пульс_веб_платформы 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 | Поддержать платформу 🌟