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

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

Свои материалы хочу развивать в эту сферу. Прочитал новости или статью → ок, а что дальше? Посмотрел видос → ок, что с этим делать? Если просто посмотреть/прочитать, то, вероятно, изученное улетучится из головы через 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 | Поддержать платформу 🌟

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

nav {
  color: salmon;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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