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

Новости
🔡 вышла версия Tailwind 4.0: как уже писал раньше, TW впитывает фичи платформы (что хорошо), но по-прежнему запихивает всё в className, при этом есть и вариант с добавлением «миксинов» с помощью директив @apply, @variant (что в целом ни хорошо, ни плохо, а уже было в SASS)
🔡 поисковая страница Google теперь может требовать у пользователя включить JS, что само по себе ок мув, как и то, что сейчас SPA-страницы индексируются тоже уже ок на равне со статическими
🔡 вышла первая бета Rolldown — замены Rollup + esbuild для Vite: переписанный на Rust новый бандлер Rolldown помимо обратно-совместимого API будет иметь в будущем ещё и фичи, которые Rollup не поддерживает: аналог webpack-овского optimization.splitChunks, HMR, а так же Module Federation
🔡 выпущен Vitest 3.0:
🔵доработан вывод репортов в консоль (стало выглядеть приятнее)
🔵при наличии нескольких проектов, теперь удобно конфигурировать это в поле workspace в vitest.config
🔵добавлена поддержка конфигурации нескольких браузеров, чтобы использовать один сервер для прогона тестов сразу в нескольких браузерах
🔵запуск теста по номеру строки в файле, где он написан

🔡 в Chrome 133+ появится поддержка обновлённой функции attr(), которая раньше работала только внутри свойства content, а теперь сможет работать с любым свойством:

<div data-foo="blue">test</div>

div {
  color: attr(data-foo type(<color>), red);
}

🔡 вышло январское обновление React Spectrum/Aria:
🔵в компоненте дейт-пикера и календаря добавлен проп firstDayOfWeek
🔵добавлены CSS-транзишны для оверлеев Modal, Popover, Tooltip
🔵выпущена альфа-версия компонента Autocomplete и @react-aria/test-utils — либы с тест-утилитами для компонентов

Проекты
🔡 ohshitgit — набор кейсов, когда у вас случилось что-то нехорошее в git, и как это вернуть взад
🔡 fortune-sheet — либа React / Vue + immer на TS для создания Excel-like-таблиц
🔡 arktype — рантайм валидатор, инферит TS-типы, быстрый

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

JS
🔡 React Query — это не data-fetching-либа, а менеджер состояния, живущего на сервере; именно поэтому, если источник правды приложения сохраняется на бэке, то React Query убирает собой необходимость использования отдельного стейт-менеджера на клиенте
🔡 все либы для работы с хоткеями опираются на задепрекейченные поля, поэтому использовать их нужно осторожно; если ли работать с хоткеями без либ, то нужно использовать поле key, латинские буквы (A-Z) и арабские цифры (0-9), нормализовывать символ с помощью .toLowerCase() и .toUpperCase(), использовать Shift для модификации и не использовать для неё Alt
🔡 разложенный по косточкам tsconfig с вариациями: база, npm-пакет, Node.js, web, запуск ts напрямую (без js), только тайпчекинг
🔡 фишки динамических строковых литералов в TS:

// ключи
interface User {
  customerKey: `cus_${string}`;
}

// версия
type Version = `v${number}.${number}.${number}`;

// расширение
type ImageExtension = `png` | `jp${`e` | ``}g` | `webp`;

CSS
🔡 ежегодная подборка свежих CSS-фич, которые можно уже использовать: всё, что касается <dialog> и popover, конечно, только для внутренних проектов сгодится, а вот применение @property и linear() для анимаций, которые не страшно, если отвалятся, уже прям маст-хэв
🔡 напоминание, что ссылки не только на #якорь, но и на определённый текстовый фрагмент на странице (а заодно и стилизация выделенного текста по ::target-text) уже работают по всех современных браузерах, для некритичных вещей точно можно тащить в прод
🔡 современные CSS-фичи типа @container(), @container style(), @supports дают возможность старгетироваться на конкретное устройство и это приводит к возможности злонамеренного отслеживания типа устройства, ОС, почтового клиента: решение — предзагружать все «условные» ассеты (картинки, шрифты) заранее, а не только те, которые «подходят» устройству

HTML
🔡 вместо использования role=button, role=link и остальных проще использовать соответствующий HTML-элемент

@web_platform | Поддержать канал 💙

Хорошей недели всем, кто считает, что легаси — наше всё!

Всё, с чем мы сталкиваемся каждый день с большей вероятностью сделано не нами и когда-то до нас (мы буквально культура мёртвых людей: книги, песни, искусство создано прошлыми поколениями). Собственно, то, что сейчас вы можете взять и написать письмо создателю интернета, ну или хотя бы создателям CSS и JS, и они даже вероятно вам что-то ответят — скорее курьёз, чем привычный порядок вещей (многие люди даже не задумываются, кто и когда придумал интернет: он просто есть и был до нас кем-то и когда-то создан, но это уже и не особо важно).

Конечно, одно легаси другому — рознь, но суть едина: это накопленное знание, неизбежно впитывающее противоречия окружающего мира, явлений природы и нас самих. И чем стариннее легаси, тем оно человечнее: ДНК, города, религии, книги, программы. Да та же самая ИИшка паразитирует на переработанном легаси (поглядите на статистику Stackoverflow).

Веб-платформа сама по себе тоже по своей сути легаси, причём изначально задуманное устойчивым. Искренне рад, что работаю в этой сфере!

Собственно говоря, подумал, что негоже писать про платформу и не иметь представительства в WWW, поэтому решил внести свой вклад в наследие и создал сайт webplatform.tech (оформление WIP), куда перенёс все посты, накопленные в канале. Также из-за специфики telegram (4096 символов на пост) написанное не всегда помещается в посты целиком. В вебе этого ограничения нет, поэтому там некоторые посты побольше, чем урезанные под telegram + есть RSS.

Back to the roots! 🥳

@web_platform | Поддержать канал ✨

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

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

Новости
🔡 вышел Bun 1.2, наносящий конкурентный удар Deno (а также замахнувшийся на поляну Vite):
🔵 встроенная поддержка облачного хранилища S3, а также БД Postgres и вскоре MySQL
🔵 текстовый лок-файл взамен бинарного при установке npm-пакетов  bun install, также JSONC (JSON с комментами) для package.json
🔵 поддержан .npmrc
🔵 есть мониторинг версий пакетов bun outdated и публикация bun publish, а также патчинг пакетов bun patch (чтоб захаркодить что-то локально в пакете)
🔵 добавлен бандлинг HTML-файлов с собранными скриптами, стилями и ассетами

🔡 а пока Bun ещё не забрался в область форматирования и линтинга Biome опубликовали свои планы на 2025: добавить поддержку HTML, поддержка одних языков внутри других (например, CSS в JS), а также Markdown, взаимодействие с TS и JSDoc
🔡 и отчёт о работе ESLint в 2024: всего проект заработал 189k$ (74% из которых дали крупные компании)
🔡 Yeoman (помните такой?) воскресили, чтобы поддерживать стабильность в системах, всё ещё использующих его, и пока не выпускать новые фичи
🔡 в TypeScript 5.8 Beta появился флаг --erasableSyntaxOnly, который будет помечать ошибочными «расширяющие» конструкции языка, которые нельзя просто вырезать, а нужно компилировать (goodbye, Enum?)
🔡 CreateReactApp официально помечен deprecated, если вы его ещё используете, вот знак, чтобы этого больше не делать

Проекты
🔡 jsonquery — DSL для выборки нужных данных (для больших JSON-ов)
🔡 react-reverse-portal — либа, позволяющая перенести отрендеренную React-ноду из одного места в другое без перерендера (сгодится для отображения в разных местах тяжёлых компонентов)
🔡 is-my-node-vulnerable — npx is-my-node-vulnerable проверит версию Node на наличие уязвимостей (рекомендуется для включения в CI)

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

JS
🔡 способы искоренения any в коде: если флага noImplicitAny вам недостаточно (JSON.stringify и Function всё равно будут производить any), то будут полезны правила для линтинга: @typenoscript-eslint/no-explicit-any, @typenoscript-eslint/no-unsafe-function-type, а также либа ts-reset, которая заменяет any во встроенных типах на unknown
🔡 оказывается в try {} catch {} можно не указывать скобки и аргумент у catch, и всё будет работать в современных браузерах
🔡 Template literal types — мощнейшая штука, затрагивал пару примеров в прошлом выпуске, но тут прям много юзкейсов и примеров типа такого:

type ToString<
  T extends string | number | bigint | boolean | null | undefined
> = `${T}`
;

CSS
🔡 юзкейсы для грядущего в ближайшем Chrome обновлении attr(): по сути это долгожданная связка HTML и CSS без использования JS, храним данные в разметке, используем в стилях:

<li color={props.colorVal} color-name={props.colorName}>

background-color: attr(color type(<color>));

🔡 накопление ошибок и противоречий в легаси неизбежно, не избежал этой участи и CSS: в списке приводятся плохие решения, с которыми мы живём, например, box-sizing по умолчанию не border-box, border-radius следовало быть corner-radius, составные селекторы должны разделяться по запятым, а не ломаться полностью при незнакомом синтаксисе
🔡 если вам не нравится хранить цвет и полупрозрачный цвет в двух разных переменных, то на помощь приходит функция color-mix(in srgb, var(--green), transparent 50%)
🔡 дефолтный системный шрифт font-family: system-ui, sans-serif
🔡 @counter-style — тема кастомного буллета в списках раскрыта полностью: префиксы, суффиксы и иконки
🔡 семейство свойств offset-* позволяет располагать элементы относительно какой-либо формы, в том числе произвольной, а если добавить transition, то и двигать относительно неё

HTML
🔡 просто страница, на которой используются всё HTML-теги
🔡 нативный <dialog> внезапно решает проблему, по которой появились portal-ы во фреймворках

Платформа
🔡 при задаче оптимизации сайта/приложения немаловажную роль играют заголовки Cache-Control Headers, которые у некоторых CDN-провайдеров имеют значения max-age=0 и must-revalidate по умолчанию для CSS и JS-файлов

@web_platform | Поддержать канал 🌟

Хорошей недели всем, кто не боится совершать ошибки, а считает, что фейл — хороший инструмент обучения. Каждая ошибка, от непоставленной точки до выявленных архитектурных проблем, добавляет новый слой понимания в то, как устроена платформа и фронтенд-разработка.

Собственно говоря, на набитых шишках и формируется инженерный опыт (то, что мы как-то пытаемся выразить «званиями» джун/мидл/синьор). При решении проблем собственными руками, разумом и волей человек присваивает себе свершившийся опыт и хорошо запоминает то, что решил.

Свои материалы хочу развивать в эту сферу. Прочитал новости или статью → ок, а что дальше? Посмотрел видос → ок, что с этим делать? Если просто посмотреть/прочитать, то, вероятно, изученное улетучится из головы через 5 минут. А если потыкать изученное палочкой, применить знание к решению задачи/проблемы, то уже наслоится знание, присвоится опыт.

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

Поэтому добавил новый раздел на сайт — Тренажёры. Задумал пока что 2 направления: архитектура (паттерны проектирования) и программирование (алгоритмы + структуры данных, оптимизация). В рамках них появится 4 тренажёра: «Паттерны проектирования в JS», «Паттерны проектирования в React», «Алгоритмы и структуры данных» и «Оптимизация кода».

Целиком готовить к выпуску тренажёр довольно долго и сложно (особенно когда есть ещё фултайм работа и блог 😂 + без обратной связи сдувается мотивация, отвлекаюсь на технические проблемы и новые идеи и тд), поэтому решил выпускать понемногу по готовности, условно, раз в неделю по 1-2 части в одном из тренажёров. По примерным прикидкам, если в тренажёре будет около 20 частей, то на каждый уйдёт примерно 3-4 месяца. То есть тему паттернов можно реально закрыть летом.

Звучит как план! Поддержите, если тема отзывается ❤️

@web_platform | Поддержать канал ✨

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

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

Новости
🔡 Vercel поглощает компанию Tremor (опенсорсная UI-либа на React, TW, Radix), чтобы использовать дашборды/чарты у себя в админке и в генераторе интерфейсов v0
🔡 вышел Astro 5.2:
🔵поддержан TW 4 через плагин @tailwindcss/vite
🔵добавлен редирект с trailing-slash урлов: /about/, /about или даже /about///
🔵а также редиректы на http или https, прописываемые сразу в конфиге

🔡 вышел набор полифиллов ES Module Shims 2.0: помимо поддержки import maps в старых браузерах эти полифиллы открывают возможность запускать type-erasable-код на TS прямиком в браузере, без компиляции
🔡 обновился Turborepo 2.4:
🔵появились эксперименты: команда boundaries (проверяет реп на следование бестпрактисам для лучшего кеширования сборки) и кеширование в watch-режиме
🔵тула теперь даёт рекомендации по найденным кольцевым зависимостям в проекте
🔵 поддерживает новый тип конфига ESLint

🔡 выпущен Firefox 135.0:
🔵прекратилась поддержка нестандартного -moz-user-input
🔵появилась поддержка JSON.rawJSON() и JSON.isRawJSON()
🔵выкатили за флагом поддержку Temporal API (продвинутая работа с датами) и Prioritized Task Scheduling API (scheduler.yield() для «создания пауз» в работе эвент-лупа)

Проекты
🔡 bunchee — безконфиговый бандлер для JS/TS-пакетов (все нужные данные для конфига берутся из package.json)
🔡 jscanify — либа для сканирования бумажных документов из картинки или из потока камеры
🔡 shapecatcher — если нужно найти unicode-символ (в том числе эмодзи), то можно его коряво нарисовать руками и поиск выдаст похожие
🔡 node-modules-inspector — интерактивный интерфейс для изучения node_modules в проекте

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

JS
🔡 простейший подход к сервингу, который возможно вскоре будет работать и в Node (но уже сейчас поддерживается в Deno):

// server
const myApp = async (req: Request) => {  
  return new Response("Hello world!");  
};

const response = await myApp(new Request("http://localhost/"));  
const text = await response.text();

🔡 Cookie Store API — асинхронное API на смену document.cookie (только Хромиум, но есть в «ночных» версия Safari и FF):

await cookieStore.set()/get()/getAll()/delete()

// а также эвент на изменение
cookieStore.addEventListener("change")

🔡 хук useOptimistic из React 19 подходит для обработки кейсов «промежуточных» состояний интерфейса при асинхронном выполнением действий: ушёл запрос, ждём ответ, пока что оптимистично показали результат
🔡 принцип Open-Closed (sOlid) на примере React-компонентов и хуков: добавляем новую модификацию компонента/функции, не трогаем базовый, а дополняем в новом компоненте/функции

CSS
🔡 @starting-style можно применять в том числе для анимации показа/сокрытия <dialog> и подложки ::backdrop: чтобы они плавно показывались и скрывались без дополнительных телодвижений в коде (типа сменить туда-сюда opacity)
🔡 при выполнении View Transition-ов страница перестаёт быть интерактивной — это из-за псевдоэлемента ::view-transition, который показывается оверлеем над всем вьюпортом; поправить это можно, выключив pointer-events для него:

::view-transition {
  pointer-events: none;
}

🔡 для кейса, когда происходит нежелательный перенос текста (например, в кнопке), уместнее использовать min-width: fit-content, который подтянет ширину под контент и справится с задачей переноса более аккуратно, чем text-wrap: nowrap
🔡 для послогового переноса слов используется hyphens: auto, но в дополнение есть ещё свойство hyphenate-limit-chars, ограничивающее количество символов, которые будут перенесены (только Хромиум)
🔡 стилизация HTML-элемента <meter> под «звёздный» рейтинг: ставим на фон SVG с прозрачной «маской», заполняем цветом
🔡 с clip-path: polygon() и transition можно сделать «скошенный» слайдер
🔡 если вы собираете стили с помощью Vite или обходитесь вообще без билд-тулы, то дополнительно можно использовать LightningCSS в качестве минификатора + «пост»-процессора стилей (новенькие CSS-фичи в коде будут фолбечиться до стабильных)

@web_platform | Поддержать канал ✨

Хорошей недели всем, кто перестал сражаться с перфекционизмом и подружился с ним. На самом деле стремление к качеству — это очень даже хорошо, а плохо именно стремление пройти весь путь за один шаг без ошибок (так это не работает).

Тот самый метод прогрессивного джипега как раз про это: ваше творение может быть ещё не совершенным, но вы уже готовы его показать, чтобы прежде всего кайфануть от достигнутого результата (хоть и промежуточного), получить обратку и снова вернуться, чтобы докинуть ещё один небольшой инкремент и затем повторить цикл нужное количество раз до тех пор, пока совершенство не будет достигнуто. Именно в растянутом во времени виде перфекционизм становится другом, а не врагом.

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

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

@web_platform | Поддержать канал ✨

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

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

Новости
🔡 вышел Chrome 133:
🔵 поддержали обновление функции attr(), которая раньше работала только внутри свойства content, а теперь сможет работать с любым свойством
🔵 добавили псевдокласс :open для открытых <dialog>, <details>, <select> и <input>
🔵 поддержали семейство «подрезающих» свойств text-box, text-box-trim, text-box-edge
🔵 у нод появился метод Node.prototype.moveBefore, позволяющий перемещать DOM-ноду в другое место без потери состояния (<iframe> не перезагружается, активный элемент остаётся в фокусе, анимации/транзишны продолжают проигрываться) (в React тоже собираются оперативно поддержать)
🔵 добавлена возможность включать несколько import maps в один документ, браузер смерджит их сам

🔡 вышли результаты опроса State of React:
🔵 многим доставляет боль использование forwardRef (видимо потому что в основном используют 18 версию React для SPA), указание зависимостей в useEffect, а также сложность Next.js и Server Components
🔵 самые популярные либы: Zustand, семейство TanStack, Astro, shadcn/ui, Radix, React Aria, Jotai; самые непопулярные: CRA, Redux, Gatsby, Reaact Bootstrap; для анимаций пользуются Motion, React-Spring, GSAP; для работы с формами React Hook Form, Formik; для тестов Jest и Testing Library; для валидации Zod, Yup; для аутентификации Auth0, Auth.js, Passport

Проекты
🔡 smartbundle — тула для сборки приложений без дополнительных конфигов: команда smartbundle сгенерит CJS- и ESM-сборки, автоматически трансформирует JSX, не забудет о сорсмапах
🔡 get-value — аналог lodash-евского _.get, чтобы достать значение объекта по строке a.b.c.d
🔡 sorted-colors — проект для тех, кто испытывает необъяснимую симпатию к именованным цветам в CSS, позволяет увидеть их все по оттенку

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

JS
🔡 про разбиение лонг-тасков в JS уже писал ранее, но тут автор собрал в одной статье почти все рецепты: setTimeout, async/await + Promise, scheduler.postTask(), scheduler.yield(), requestAnimationFrame() и даже экзотический MessageChannel() — если послать туда сообщение, то оно сразу же выполнится (разве что не упомянуто о queueMicrotask и requestIdleCallback)
🔡 сравнительная таблица текстовых редакторов, если вам нужно сделать этот выбор в 2025: фреймворкоориентированность, многопользовательский режим + комментарии (сразу предостережение — ProseMirror с React не дружит)
🔡 и в догонку сравнительная таблица web-to-desktop-фреймворков (Electron, Tauri…): язык, движок, зависимости, фичи, интеграция во фреймворки, поддержка ОС, размер приложений, расход памяти, время билда и старта
🔡 если вам приходится сознательно заглушать ошибки в TS, то лучше использовать @ts-expect-error, чем @ts-ignore, так вы явно заметите заглушенное место, когда ошибка перестанет происходить и сможете убрать заглушку
🔡 никогда не поздно вдруг понять, что npm ci это «clean install», а не «continuous integration»
🔡 оператор satisfies в TS может быть полезен для:
🔵 уточнения, что объект с неполным набором полей — это ок satisfies Partial<Record<key, val>>
🔵 типизации при преобразовании в JSON-строку JSON.stringify({ /*···*/ } satisfies SomeType)
🔵 типизации default-экспорта export default ((str) => str.toUpperCase()) satisfies StringCallback;

CSS
🔡 доехавший везде @property даёт возможность создать эффект «динамического фокуса» (всё в блюре, круглая область в «фокусе») с помощью mask-image: radial-gradient(... var(--focal-size) ...), к кастомному свойству внутри функции применяется транзишн
🔡 :focus-visible стилизует только фокусировку с клавиатуры, но есть ещё и дополнительная опция у метода .focus({focusVisible: false}) (Safari TP и FF)
🔡 ещё один юзкейс для селектора :has: показывать/скрывать дополнительный блок, когда выбран/не выбран чекбокс в списке: :has(:checked) {}, :not(:has(:checked)) {}, :not(:has(:focus-visible)) {}

Платформа
🔡 если вы хотите неиронично использовать GIF-ку в 2025, то лучше заместо использовать видео-формат AV1 (поддерживается во всех браузерах, кроме Safari, там нужен фолбек в mp4)

@web_platform | Поддержать канал 🌟

Хорошей недели всем, кто понял, что разумней вкладывать силы в развитие преимуществ, чем в устранение несовершенств. Наличие недостатков вам простят, а отсутствие преимуществ — нет.

Исходя из этой логики лучше сделать своим преимуществом знание базы и платформы, чтобы основные знания и умения были универсальными и применимыми в разных контекстах. А подробности устройства конкретного фреймворка — дело наживное.

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

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

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

@web_platform | Поддержать канал 🌟

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

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

Новости
🔡 в стабильную Node.js 20 бэкпортирована фича require(esm) (импорт EMS-модулей через синтаксис CJS-require), а это значит, что в апреле 2025, когда закончится поддержка Node.js 18, CJS из сборок можно будет выпиливать
🔡 выработали фокус инициативы Interop на 2025 год, предположительно в этом году у нас появятся во всех браузерах: Anchor positioning, View transitions ,@scope, scrollend event, Core Web Vitals, а также исправятся баги с backdrop-filter, <details>, text-decoration
🔡 ESLint больше не EcmaScriptLint, а ExtremelySuperLint (шутка), а именно стал официально поддерживать линтинг CSS: встроенные в @eslint/css правила проверяют пустые блоки, дублирующиеся импорты, невалидные @-правила, а также способствуют использованию правил baseline и @-layer (не шутка)
🔡 CreateReactApp окончательно и бесповоротно задепрекейчен, так как нет мейнтейнера и плюшек внутри и вообще таки зачем вам голый React, давайте уже скорее устанавливайте метафреймворк

Проекты
🔡 create-tsrouter-app — банда TanStack поджидала момент, когда анонсируют депрекейт CRA, подсуетились и подготовили свою замену с поддержкой JS/TS, TW/CSS и конечно же TanStack Router
🔡 react-bits — React-компоненты с анимациями и красивыми свистелками (меня впечатлили splash-cursor и orb)
🔡 use-context-selector — селектор из React-контекста в стиле Zustand useContextSelector(context, (v) => v[0].count) (от создателя, внезапно, Zustand)

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

JS
🔡 Intl.DurationFormat, который вскоре доедет в оставшийся FF, даёт возможность в разном виде в зависимости от локали форматировать период даты-времени
🔡 если для вас в TS дженерики с тернарниками внутри выглядят устрашающе, не пугайтесь, они добрые: если тип с дженериком — это «функция с параметрами», то тернарник внутри — это просто единственный возможный в TS способ описать «условие», в зависимости от которого «функция» будет возвращать то или иное значение:

type Remove<T, R> = T extends R ? never : T;
// «функция» возвращает ничего, если T содержится в R, иначе - переданное значение

type AllColors = "Black" | "White" | "Orange";
type RealColors = Remove<AllColors, "Black" | "White">;
// type RealColors = "Orange"

🔡 если нужно реализовать одностороннюю отправку сообщения с сервера на клиент (а не двустороннее соединение), то можно использовать SSE вместо WebSockets: общение идёт по HTTP, нативно работает во всех браузерах через new EventSource()

CSS
🔡 чтобы создать выезжающие за пределы блока элементы, но при этом чтобы они были в потоке и занимали место, можно воспользоваться гридом с пустыми «рядами», размером auto, чтобы они растянулись на нужное «выпирающее» пространство grid-template-rows: auto [container-start] repeat(4, auto) [container-end] auto;
🔡 селекторы :has и :not не так просты:
🔵 .card:has(:not(img)) выберет .card, в котором внутри есть любой элемент, кроме img
🔵 .card:not(:has(img)) выберет .card, в котором вообще нет img

🔡 псевдокласс ::selection меняет фоновый цвет выделенного текста, но прикол в том, что цвет не обязательно делать один для всей страницы:

::selection { background-color: var(--brandColor); }

:nth-child(2n) { --brandColor: red; }

:nth-child(2n+1) { --brandColor: blue; }

🔡 свойство zoom делает похожую на scale операцию, но при этом «отскейленный» блок не влияет на лейаут (изменяется по сути композитный слой с «картинкой» блока), а «отзумленный» — влияет, то есть вызывает перестроение лейаута

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

@web_platform | Поддержать канал ✨

Хорошей недели всем, кто для себя и окружающих разделяет «модные» технологии, от «немодных» технологий, но превыше этих двух кретериев ставит технологии «вне моды», которые как хлебушек с маслом поутру никогда не бывают лишними.

Рад сообщить, что добавил новые части в тренажёре «Паттерны проектирования в JS»:
✳️ Паттерн Proxy (Прокси), теория
✳️ Паттерн Proxy (Прокси), практика: кеширование функции с Proxy

А также из обновлений:
✳️ доработан интерфейс консоли (теперь есть заголовок и тексты корректно переносятся на новую строку)
✳️ в ранее выпущенные части с практикой в код добавлено JSDoc-описание к функциям

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

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

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

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

Новости
🔡 лучше поздно, чем никогда: опубликован CSS Snapshot 2024, внутри появился новый раздел Reliable Candidate Reccomendations, куда собраны устоявшиеся спеки со стабильной реализацией в браузерах, но ещё немного косячной, туда включили: Media Queries Level 4, CSS Scroll Snap Module Level 1, CSS Scrollbars Styling Module Level 1, CSS Grid Layout Module Level 1 и 2
🔡 обновился Deno до 2.2: главное, что стал поддерживаться node:sqlite
🔡 вышел Bun v1.2.3:
🔵 вернули то, с чего начинался Bun — дев-сервер, bun ./index.html поднимет локальный сервер для статики
🔵 Bun.serve() на сервере теперь умеет в роуты, то есть можно описать полноценный API с ощущением «на коленке»
🔡 в AI-поисковике Perplexity объявили, что разрабатывают свой браузер Comet (под капотом видимо всё равно будет chromium 😏); считаю, что, чем пихать AI-фичи в уже привычные браузеры, всё лучше выделить это всё в отдельную нишу любителей AI-приблуд
🔡 обновился React Scan до v0.2.0: интересный мув из разового использования инструмента для нахождения перфоманс-проблем в сторону постоянного использования и накопления «уведомлений» о собранных проблемах
🔡 в Next.js 15.2 появилась экспериментальная поддержка View Transitions API
🔡 анонсирован TS 5.8 RC: поддерживает require(esm) (а также флажок обратной совместимости --module node18`) и флаг `--erasableSyntaxOnly для искоренения enums, namespaces, параметрических свойств класса и import-алиасов

Проекты
🔡 up-fetch — обёртка над fetch, с поддержкой недавней Standard Schema Specification: в параметрах запроса передаётся валидационная схема в стандартизированном виде, например, с Zod
🔡 fuite — тула, запускающая Puppeteer и долго ходящая по ссылкам вашей SPA в поисках потерянного времени утечек памяти

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

JS
🔡 юзкейс, когда нужно в DOM переставить первый элемент в контейнере в конец (в слайдере, например, при показе последнего слайда), решается строчкой container.appendChild(container.firstElementChild)
🔡 JS часто бывает быстр за счёт JIT-компиляции: JS-код парсится в AST (Abstract Syntax Tree) → AST преобразуется в байт-код (промежуточная версия кода, выполняемая V8) и оптимизируется → если определённая функция/цикл становятся «горячими», то есть выполняются 10000 раз, то байт-код преобразуется в неоптимизированный машинный код (он быстрее, чем код для интерпретатора) → если код продолжает оставаться «горячим», то он преобразуется оптимизирующим JIT-компилятором в высокооптимизированный машинный код, работающий максимально быстро
🔡 пара мыслей про стейт во фронте:
🔵 появление API cache в React Query показало, что часто собственный «стейт» фронтового приложения — это не стейт вовсе, а иммутабельные данные с сервера (из API), и наличие API cache часто убирает необходимость использовать менеджер состояния на фронте
🔵 пропы — изначально, идея для «естественного» разделения зон ответственности модулей, но из-за их неправильного использования (проп-дриллинг), появились, наоборот, связывающие концепты типа глобального Redux-стора, которые во многих случаях не нужны

CSS
🔡 индивидуальные свойства трансформации translate, rotate и scale не переопределяют значение свойства transform, а дополняют его
🔡 если вы всё ещё считаете, что #ff0000 или rgb(255, 0, 0) — это самый красный цвет, какой только может быть, то вы ошибаетесь; значение color(display-p3 1 0 0) существенно «краснее», а точнее ярче (но при условии, что ваш девайс поддерживает цветовое пространство Display-P3)
🔡 как сделать строку или столбец с элементами одинаковой ширины, равной самому широкому из них (например, кнопки одинаковой ширины, равняющиеся по самой широкой кнопке):

.container {
  display: inline grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
}

Платформа
🔡 префетч ресурсов типа <link rel="prefetch" as="style" href="page-2.css" /> может, внезапно, откладывать загрузку основных ресурсов, так что лучше эту префетч-оптимизацию докидывать для некритичных ресурсов и уже из JS, после загрузки window

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

Хорошей недели всем, кто понял, что хорошее в жизни приходит не мгновенно, а путём медленного накопления. Это так же работает и в обучении: «выучить» что-то работает только при многократном повторении, лучше всего при буквальном погружении в среду. Долгое ожидание «зефирки» ведёт к большему выигрышу.

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

А также из обновлений:
✳️ доработаны стили блоков <code>, теперь они не переносятся на новую строку с hyphens

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

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

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

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