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

В черновик спеки CSS Backgrounds and Borders Module Level 4 смерджили изменение, делающее свойство box-shadow полноценным longhand-свойством!

Теперь управлять отдельными параметрами тени можно будет не повторным переопределением всего значения box-shadow, а задавая параметры shorthand-ами:

- box-shadow-color: <color>, initial: currentColor
- box-shadow-offset: none | <length>{2}, initial: none
- box-shadow-blur: <length [0,∞]>, initial: 0
- box-shadow-spread: <length>, initial: 0
- box-shadow-position: [ outset | inset ]

Аналогичные правки ожидаются и для «текстовой» тени text-shadow.

Так получилось, что на моей нынешней работе я стал каждую неделю собирать для команды новости в мире фронта за неделю. Прошло уже несколько недель и подумал, а почему бы и да: буду публиковать подборки в этот канал. И пофиг, что некоторые не прям про платформу 😎

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

Новости
- вышел Yarn 4.0, интересного особо ничего нет, пофиксили баги, обновили ноду, причисали синтаксис
- обновилась Node v21.1.0, из интересного появился флаг --experimental-detect-module, по которому Нода сама распознает .js файлы как ES-модули, даже если для них не указан type в package.json
- все ишью для выпуска jquery 4.0.0 пофикшены (наверняка вы очень сильно ждали этого и вот, наконец, свершилось 🎉)

Проекты
- transformers.js — это самые известные модели ML в одном флаконе в виде JS, который работает даже прямо в браузере, теперь умеют ещё и конвертацию text to speech/audio

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

JS
- почему Next.js нехороший: после маркетинговой компании в поддержку Next 14, на волну запрыгивает Remix и в сравнении получается истина (Next не про платформу, несёт зависимости, нестабилен, слишком магический и комплексный)
- зато Remix больше не отдельная тула, а идёт в сторону становления плагином для Vite (и это хорошо)
- топ идея включать веб-компоненты в Markdown как валидный HTML на примере CRDT-компонента в блог-посте
- ещё один веб-компонент в виде мокового окна браузера для презентация
- Синдре Сорхус (тот самый) выпиливает из своих пакетов… 🥁 Node.js Buffer и меняет на Uint8Array, а также делится пошаговой инструкцией, если вам захочется сделать так же
- опрос State of React 2023 как обычно интересен не только будущими результатами, но и содержимым, где можно узнать названия новых хуков и реактовских API-шек
- неплохой свежеиспечённый туториал по Svelte в добавок к также недавно испечённому туториалу Next-а
- история разработки ECMAScript Decorators с самым внятным объяснением, что это такое (tldr, например, функции высшего порядка типа debounce или HOC-и типа withModal)

CSS
- новые CSS-функции rem() и mod() и где они обитают
- аналитика на CSS-коленке, беспощадная и неуязвимая
- prefers-reduced-transparency в копилку директив для тюнинга CSS-мелочей, которые почти никто не заметит
- съешь ещё этих мягких французских CSS-функций (light-dark, xywh, round, perspective) от Криса Койера
- визуальный гайд по селекторам от fffuel

HTML
- 0 из топ-100 самых больших мировых сайтов используют валидный HTML (и всем это ок)

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

Новости
- астрологи объявили неделю AI, поэтому в Гитхабе объявили начало новой реальности, GitHub Copilot теперь будет в виде чата подсказывать код, посвечивать ошибки и уязвимости, а также улучшать код, писать тесты, план работы и всё это прямо на github.com 🧙‍♂️ (отделить маркетинг от реальности правда пока ещё предстоит в декабре этого года)
- Дуглас Крокфорд (после того, как отговаривал всех писать на JS) написал новый язык Misty
- как метрики Web Vitals помогли улучшить интернет (главным образом за счёт улучшения WordPress)
- сорсмапы теперь будут генериться для прод-реакт-бандлов

Проекты
- библиотека для создания схем React Flow теперь есть и для Svelte — meet Svelte Flow
- versel выпустили свой шрифт — Geist (да, это именно для того, чтобы о них ещё раз упомянули в новостях)
- ещё одна попытка сделать норм DragNDrop либу (без привязки к фреймворку)
- новенькие React-компоненты для Goggle Maps
- больше кнопок богу кнопок (гигантская коллекция разнообразных кнопок, а также генератор кнопок на Tailwind)
- тула для визуализации сорсмапов

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

JS
- паттерн проектирования Headless Component для React UI-ев
- Compression Streams API — что это и зачем нужно (доступно во всех свежих браузерах)
- хорошая ли идея собрать React Server Components без фреймворка (автор попробовал и так не думает)
- немного обновившаяся оф дока по 'use server'
- психологическая статья про React Query, которая заставит вас захотеть использовать либу из-за легких угрызений совести
- оказывается двойной запуск useEffect в дев-режиме — это не баг, а фича
- только два слова — use-php
- небольшой учебный курс по браузерному перфомансу
- построение UI-элемента шторки (a la iOS, но на веб-технологиях)
- как более корректно «выключать» кнопки при сабмите форм

CSS
- и ещё немного про разделители в <select>: <hr>, <optgroup> и <hr> + <optgroup>
- CSS-градиенты в реальной (или всё таки фэнтезийной?) жизни
- как обойти «серые» зоны в градиентах
- угадайка про HEX-цвета
- демка про анимацию вариативных шрифтов
- на что способно CSS-свойство content-visibility

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

Новости
- ESLint обновляется до 9 версии и там будет много изменений, в том числе breaking
- появился TypeScript 5.3 RC, из интересного: поддержка Import Attributes, улучшенный narrowing для некоторых случаев, Interactive Inlay Hints, настройка для VSCode, чтобы автоимпорт типов писался так import { type Person } from "./types", а не так import { Person } from "./types"
- либа компонентов React Aria Components переходит из Beta в RC
- главной метрикой в Core Web Vitals, отвечающей за отзывчивость интерфейса, становится INP, а также другие интересности по перфомансу от HTTP Archive на 2024

Проекты
- либа для того, чтобы управлять приоритетом выпоннения тасок к основном потоке, а также бонусом Prioritized Task Scheduling API, который уже сейчас в Хроме может управлять приоритетом исполняемых тасок
- управление синхронным скроллом в нескольких скроллящихся элементах
- либа для создания 3d-космических сцен 🪐

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

JS
- набор простеньких, но полезных, демок небольших DOM-манипуляцей
- какую выбрать стратегию перевода кодовой базы на TS
- сага о том, как разработчики обратно на React с Preact переходили (Или туда и обратно)
- React Design Patterns: общеизвестные типа HOC, а также малоизвестные типа Compound Components
- как марсиане писали плагин для фигмы или Зачем фронтендерам обход деревьев
- страсти вокруг Barrel-импортов в файлах не утихают, очередной наброс
- невероятные трюки и возможности дебаггера в браузере (без шуток)

CSS
- ещё один годный разбор псевдоселекторов (:has, :not, :is, :where, &)
- свойство gap может быть полезно и в многострочных флексбоксах
- ещё один костыльный (но нормальных пока нет) вариант автоувеличивающейся textarea
- как браузеры зумят текст (tldr: неконситентно)
- если убрать list-style: none у списка, то Safari перестанет считать его списком

HTML
- гугл-шрифты, рендерящие волны и линии
- вариативный моноширинный шрифт Monaspace от Github
- HTML Web Components — не React-компоненты, меняем майндсет
- подход HTML First или Скрытая реклама htmx
- что такое URL и чем он отличается от URI, URN и URC (даже под закат фронтендерской карьеры не поздно освоить азы 👴)

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

Новости
- вышел Vite 5.0: прибрались, дропнули поддержку старых версий Node, задепрекейтили CommonJS-модули, обновили Rollup до 4
- Prettier 3.1 теперь умеет форматировать вложенные тернарники лесенкой
- вышел Firefox 121.0beta и там долгожданная поддержка :has без флага, а также менее долгожданные Lazy loading iframes и поддержка text-wrap: balance, ждём в стабильного релиза в качестве новогоднего подарка 🎁
- вышел redux-toolkit v2.0.0-rc.0, есть breaking changes
- вышел TypeScript 5.3, отличий по сравнению с RC-версией нет
- контрьбьюторам Node не понравилось выпиливание форматирования из ESLint и появилось предложение использовать Biome в качестве форматтера (это же была нативная реклама в PR, да?)
- State of JavaScript 2023 начался: как обычно мне больше всего интересна первая страница с примерами кода, но посмотреть на итоги голосования тоже будет интересно (чтоб узнать, всё ли React или ещё нет)

Проекты
- Loro — либа для реализации offline-first и CRDT-приложений
- React Datasheet Grid — либа для реализации редактируемых таблиц типа Notion и Airtable
- noscript-icons-cli — тулза для генерации SVG-спрайтов (тк использование SVG напрямую в бандлах удобно, но дорого и медленно)
- рекламный лендос возможностей веб-платформы (оч крутой) от разрабов Chrome
- обучалка основам веб-разработки (если у вас спросят, как стать разработчиком, это неплохой свежий гайд на английском)

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

JS
- Explicit Resource Management — изучение новой фичи TS и платформы using, которая может указывать движку, чтоб прибрал подвисшие в памяти процессы
- обзор легковесных JS-фремворков за пределами React-пузыря (да, там тоже есть жизнь)
- как собрать и использовать NPM-пакет вне Node, например, в браузере (олды сразу вспомнят browserify)
- инсайты разработчика аудио-приложения в браузере: интересный тейк — обработку iframe с разными доменами Chromium-браузеры могут выполнять не в основном потоке (такой Prioritized Task Scheduling API из айфреймов и палок)
- оказывается Next.js умеет обрабатывать md-файлы со встроенными React-компонентами (у меня до сих пор к этому подходу есть вопросики, намного лучше выглядит включение веб-компонентов в md)
- никогда не будет лишним прочитать гайд по именованию разных штук в JS-коде
- разные подходы на написания веб-компонентов на примерах: улучшающие код, дополняющие код и генерирующие код

CSS
- качественный гайд по CSS Nesting
- качественный гайд по CSS Grid
- качественный гайд по CSS Container queries
- и всё же, как лучше собирать CSS-файлы: в бандл, отдельными файлами или использовать @import внутри?
- возможности dev-tools для дебага разных CSS-вещей
- и почему же всё таки height в CSS так странно работает (не как width)?

#Лаборатория_веб_платформы

URL Pattern API

Это инструмент для сопоставления URL на основе шаблонов. Допустим, есть URL https://example.com/products/123. И нужно сопоставить его с шаблоном https://example.com/products/:id. Это можно сделать так:

const urlPattern = new URLPattern({pathname: '/products/:id'});
const url = new URL('https://example.com/products/123');
console.log(urlPattern.test(url)); // true

Кроме теста соответствия урла шаблону, можно ещё и извлечь соответствующие параметры:

const urlPattern = new URLPattern({pathname: '/products/:id'});
const url = new URL('https://example.com/products/123');
const result = urlPattern.exec(url);
console.log(result.pathname.groups.id); // "123"

Самый очевидный юзкейс URLPattern — клиентский роутер, который проверяет соответствие текущего урла паттерну, по которому показывается нужный контент. Пример в React:

<Router>
  <Route path="/">
    <Home />
  </Route>
  <Route path="/about">
    <About />
  </Route>
  <Route path="/messages/:id">
    <Messages />
  </Route>
</Router>

function Route({ path, children }) {
  const baseURL = window.location.origin;
  const pattern = new URLPattern({ pathname: path, baseURL });
  const match = pattern.test(currentPath);

  if (!match) {
    return null;
  }

  return children;
}

Помимо pathname URLPattern умеет определять все остальные части урла: hash, hostname, password, port, protocol, search, username.

Работает пока что только в Chromium, но полифиллится.

---

Поставьте 👾, если нужно записать видос с написанием такого простенького роутера с использованием URLPattern целиком.

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

Новости
- вышел Git 2.43 (да, такое тоже бывает): появилась возможность лучше прибираться с помощью git repack, клонировать репозитории в режиме tree-less, более гуманные сообщения при повторном revert-е, возможность отмены текущих запусков CI при новых push в CI-ветку и ещё немного ништяков
- в Node v20.10.0 (LTS) забэкпортили некоторые хорошие вещи: к примеру, режим работы с флагами --experimental-default-type, --experimental-wasm-modules и --experimental-websocket
- обновился шрифт Inter до версии 4.0: вариативность, переработанные и новые глифы (есть, в том числе, кириллица), доп OpenType-фичи (и это оперсорс и бесплатно, если что)

Проекты
- опенсорсная десктопная плиложуха для теста API bruno
- requestAnimationFrame как асинхронный итератор для любых сред исполнения JS
- крутое приложение для визуального создания анимаций Rive
- репозиторий для тренировки работы с промисами путём их имплементации

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

JS
- как создать одно приложение с использованием нескольких фреймворков (а точнее как использовать веб-компоненты для уменьшения связности, которую несут JS-фреймворки)
- обзор, как работает Web Push (оказалось, что очень завязанно на браузерных вендоров)
- как добавить немного AI для расшифровки результатов выполнения тестов
- как опубликовать реакт-компонент как ESM+CJS библиотеку с типами, а также два интересных инструмента: Are The Types Wrong? для проверки типов в опубликованной библиотеке и publint для проверки корректности package.json

CSS
- ещё один трюк плавного перехода для height с 0 до auto (tldr, на гридах с 0fr до 1fr)
- много мелких, но приятных CSS-полезностей, которые так и ждут, чтобы их использовали
- hanging-punctuation — или как вынести висящие знаки препинания за пределы строки
- как сделать текст прозрачным внутри (с помощью небольшой -webkit-магии)
- как вытащить элемент из stacking context-а без задания ему transform, filter или opacity
- лок скролла с помощью overscroll-behavior

HTML
- пора ли уже переходить на формат изображений AVIF? Если сжимаете картинки сильно, и не нужна поддержка в Edge — да!
- бургер-менюшка без JS на Popover API
- пост для фронтендеров «кому за…» со сборником ностальгических хаков (даже есть упоминание спеки JSSS, которая однажды проиграла в браузерных войнах, и где мы сейчас?)
- красивая статья-размышление о многомерном пространстве в сайтах

#Лаборатория_веб_платформы

Обещанный видос по URL Pattern API и пример роутера с его использованием

Код тут https://codesandbox.io/p/sandbox/holy-feather-7m4ftd

Ютуб https://youtu.be/LHAjrvfej4U?si=xuW6UdFNMSkChgZP

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

Новости
- вышел Electron 28.0.0: добавлена поддержка ES-модулей и там всё оч интересно: главный процесс Electron-а запускается в ноде и соответственно использует имплементацию ESM ноды, а рендерится всё в хромиуме и там уже другая имплементация, Electron выбирает, как быть, в зависимости от контекста
- вышла библиотека StyleX от фб: из плюсов — типизация, генерация в билд-тайме, из минусов — непонятно зачем это нужно сейчас кому-то, кроме фб
- Remix запланировал реализацию React Server Components (видимо, вынужденно)
- вышел Vitest v1.0.0: кажется уже устаканилось настолько, чтобы внедрять (1.0.0 внушает доверие)
- вышел новый HTML5 Boilerplate (да, это не шутка! внимание, может вызвать ностальгические чувства)

Проекты
- как вам стейт-менеджер веб-приложений в виде SQL-бд (чудны дела твои, эволюция)? такое есть в SQLSync (а для выборки из стора можно пользовать SQL, yay)
- симпатичная либа компонентов на тейлвинде floatui (проект настолько свежий, что не успели ещё поправить ридми)
- tsdiagram сгенерит для вас на лету красивую диаграмму из хитросплетений типов
- just another либа для манипуляций с цветом culori
- тул для сбора перфоманс-метрик (в том числе Web Vitals) на пользовательских устройствах и отсыла их обратно через google-аналитику либо другие аналитические тулы (главное чтобы браузеры не блочили аналитические тулы)

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

JS
- как улучшить перфоманс-метрику INP: предсказуемые способы разгрузить основной поток setTimeout, requestAnimationFrame, requestIdleCallback, а также неведомый scheduler.yield()
- как плохой INP может уронить бизнес-метрики
- ещё одна попытка заинтересовать в веб-компонентах: в них можно бесплатно инкапсулировать логику, есть встроенные колбеки на добавление и удаление из DOM-а и изменение «пропсов»
- как заменить npm, yarn и nvm на pnpm (правда не очень понятно зачем)
- сборник рецептов для Puppeteer (от простого волшебства к сложным заклинаниям)
- как сделать скриншот фрагмента страницы с помощью Playwright
- old but gold: что такое и с чем едят JavaScript Import maps
- паттерны проектирования реакт-компонентов: as и asChild (is this a полиморфизм?)
- история того, как в JS появилось именно такое ООП, какое есть сейчас (читать с кофе, в кресле, укрывшись пледом)
- реактивный JS-фреймворк на коленке, откуда можно узнать: юзкейс для Proxy, незаслуженно неизвестное API queueMicrotask, ликбез по tagged template literals
- хитрая магия, чтобы делать «подтипы» в TS (после использования сжечь проект!)

CSS
- тулза для генерации CSS для подключения шрифтов
- дешёвый и сердитый способ сделать инпут для one-time-пароля (без JS!)

HTML
- примеры классного дизайна… URL (от stackoverflow, slack, github, npm и unpkg)

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

Финально в этом году обновился CSS Snapshot 2023! 🥁

В финальной редакции спека CSS View Transitions Module Level 1 перешла в FairlyStable-раздел. Это значит, что основная работа над спекой завершена и полученный результат довольно стабилен.

Поддержка View Transitions API пока что есть только в Хромиуме. Но вангую, что переход спеки в стабильный раздел должен дать сигнал в Мозиллу и Эпл, чтобы поддержка побыстрее появилась и в Firefox с Safari. Ждём в 2024. 🤞

Собираюсь по этому поводу записать видос с прикручиванием View Transitions API. Норм ли будет в таком же формате, как в прошлый раз? Поставьте 👾 или скиньте фидбек, плз.

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

Новости
- вышел Safari 17.2, много мелких и классных обновлений в уходящий год, чтобы подбить статистику Interop 2023: аккордеон на <details> + <summary>, onetimecode для инпутов, «расслабленный» CSS-nesting, обновления CSS Motion Path, функция linear() для создания «нелинейных» анимаций, математические функции rem(), mod(), round() в CSS, display: list-item, mask-border без префиксов, Custom Highlights API, <link rel="preload"> с атрибутами imagesrcset и imagesizes для подгрузки адаптивных изображений, import attributes в JS, fetchpriority для загрузки ресурсов, улучшение нативной валидации форм и ещё много других плюшек
- анонсирован выход Million 3.0 — альтернативного VDOM для Реакта (подробно о его работе): вкратце, он берёт для реконсиляции только динамически заполняемые DOM-ноды, а на статические не обращает внимания, а затем сравнивает не сами DOM-ноды, а их состояние (что существенно быстрее); годится для случаев, когда в приложении не слишком много динамических кусков, и часть приложения в ходе работы остаётся неизменной (значит её не нужно учитывать в пересчёте)
- вышел SVGO v3.1.0, улучшено всё, без маркетиноговых уловок сообщаю, что это просто классный проект, cli-тулза для чистки SVG от мусора
- Storybook с 8.0 версии будет поддерживать React Server Components: минус — Next.js съест и Storybook, плюс — Storybook не будет медленно рендериться на клиенте

Проекты
- Primer React — библиотека Реакт-компонентов Гитхаба: круто, что такие проекты выкладываются в opensource, поэтому можно почитать исходники: из интересного, у них используются styled-components и чтобы компоненты писать вот так красиво <Header.Item> делается Object.assign(Header, {Link: HeaderLink, Item: HeaderItem}) (реф)
- eruda — эмулятор браузерной консоли и девтулзов для мобильных браузеров
- Fuse.js — фреймворк для создания типобезопасного слоя данных между бэком и фронтом, работает поверх Ноды и gql
- простой и честный респонсив компонент пагинации для Реакта — React Responsive Pagination
- GQL (Git Query Language) — а как вам такое: можно делать выборки по истории гита с помощью SQL!
- enhance — HTML-first full-stack веб-фреймворк на веб-компонентах, выглядит очень симпатично, так и тянутся руки глотнуть свежего воздуха

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

JS
- интересная детективная история, которая начинается с того, что при изменении содержимого инпута курсор переносится в конец строки, а заканчивается кишками событийной модели Реакта и методом flushSync
- статья о том, чем isNaN отличается от Number.isNaN(), а также почему typeof NaN это 'number'
- как устроен React Suspense: tldr, Реакт под капотом использует новый компонент Offscreen, который как бы есть, но его как бы нет, то есть туда можно заблаговременно рендерить контент, но его не будет сразу видно (он условно скрыт style="display: none !important;")
- подборка текущих актуальных стейт-менеджеров: построенные на редьюсинге, атомах либо мутации, а также их плюсы, минусы и подводные камни (хотя в 90% случаев можно было бы обойтись простой useReducer + контекст)
- хитрости в работе с Реактом от автора Wouter: патчим компоненты с cloneElement; useState, который никогда не обновляется const [value] = useState(() => { /* initializer */ }); неизменная ссылка на функцию с помощью useEvent и кое-что ещё
- статья от Дэна Абрамова от том, как обрабатывается JSX (feels like мемуары о тех временах, когда деревья были большие и зелёные, а рендеринг был только клиентский)
- супер-гигантская и супер-полезная статья про всё, что вам может понадобиться при работе с IndexedDB
- использование кастомных Server-Timing HTTP-заголовков

Продолжение

CSS
- кодим SVG-спиннер голыми руками без сторонней помощи (и без страховки)
- что из CSS зарелизилось в браузерах в 2023 (огромное количество класных фич, на 2024 уже даже столько интересного не осталось): тригонометрические функции, микросинтаксис селекторов An+B, scope, nesting, subgrid, initial-letter, text-wrap, color-mix(), relative color syntax, @container и @container style(), :has(), новые возможности медиа-выражений, View Transitions API, linear(), событие scrollend, скролл-анимации с ViewTimeline, анимация дискретных свойств типа display: none, @starting-style, Popover API, <hr> в <select>, псевдоклассы :user-valid и :user-invalid, аккордеон на <details>
- минималистическая сборка CSS с помощью Lightning CSS (немного свело олдскулы)
- будущие нативные функции и миксины в CSS
- SVG-адвент-календарь

HTML
- использование респонсив <video> (аля <picture>) теперь кроссбраузерно (а также зачем-то респонсив <audio>)
- инспекция дерева доступности страницы теперь доступно в Хроме

Платформа
- разбор HTTP/2 по байтам: очень дотошно, душно и исчерпывающе
- исследование Яндекса о частоте использования тех или иных фич доступности на смартфонах: оказывается очень много людей используют системное увеличение шрифта и тёмную тему
- подготовка к мониторингу метрики INP: в целом, рекомендации те же — не допускать долгих блокирующих тасок всеми возможными способами

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

Короч, FF 121 вышел, селектор :has() доехал везде, теперь можно! 💫

<body>
  <div class="one"></div>
  <div class="two"></div>
</body>

.one {
  background-color: green;
}

.two {
  background-color: orange;
}

body:has(.two:hover) .one {
  background-color: red;
}

демо

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

Новости
- появился новый линтер oxlint: написан на Rust; можно не настраивать (convention over configuration); плагинов пока нет, но обещают, что можно будет писать их без использования JS или Rust; быстр, но в том числе потому что проверяемых правил мало
- вышел SvelteKit 2: Vite 5 под капотом, подготовка к будущему Svelte 5, shallow routing; tldr: Svetle продолжает прорастать в экосистему
- Vue 2 станет deprecated 31 декабря 2023
- вышел Firefox 121: главное поддержан :has()!
- вышла библиотека date-fns v3: теперь 100% типизирована, уменьшен размер бандла, функции экспортируются через named exports и кое-что ещё
- обновился Tailwind CSS v3.4: динамические viewport units, поддержка :has(), text-wrap: balance, субгриды и многое другое

Проекты
- waku — минималистичный React-фреймворк с поддержкой ServerComponents: включает клиент, сервер и роутер
- constate: библиотека для решения проблемы плодящихся контекстов в Реакте
- simple-web-server: простая декстопная аппка для настройки и запуска дев-сервера

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

JS
- список всех известных (и неизвестных) JS рантаймов и движков на все случаи жизни (даже чтобы выполнять JS в с/с++)
- если промис ушёл и не вернулся, он попал в чёрную дыру: чтобы это исправить нужно отказаться от асинхронных функций в угоду генераторов
- профилируя приложение для локализации автор пришёл к тому, что node --prof и инструмент speedscope — хорошая отправная точка для анализа перфоманса
- члены tc39 устали отвечать на одни и те же вопросы в ишью, и создали faq, в котором можно узнать, почему JSX не появится в ES, почему JSON никогда не поменяется, а также почему числа в JS такие странные
- в конкурсе на самый быстрый способ проброса состояния с сервера на клиент победил <noscript type="mime/invalid" id="myState">{"foo":"bar"}</noscript> window.__STATE__ = JSON.parse(window.myState.innerHTML)
- темы для холиваров в вашей команде, если вы работатете с Реактом: как писать экспорты, как называть файлы и пропсы, нужны ли стрелочные функции, а также тернарники vs early return
- TS-фичи «следующего» уровня: satisfies, infer, exhaustive type checking
- эволюция синхронного рекурсивного обхода папок в ноде достигла вершины — await fs.readdir(dir, { recursive: true })
- всё про Unicode для разработчиков: символы, их объединение, эскейп в JS, сравнение строк и регекспы

CSS
- смена стилей в зависимости от количества элементов с помощью element:has(> :nth-child(10))
- лок скролла из глубины DOM-а с помощью body:has(.lock-scroll) { overflow: hidden} <dialog class="lock-scroll">
- четыре способа создать анимированные градиентные рамки
- свойство animation-composition, позволяет начать анимацию с нуля либо с того значения свойства, которое уже задано на момент начала анимации (удивительно, но поддерживается везде!)

HTML
- в каких случаях подходит использование <link rel=preconnect>
- при использовании атрибута sizes="auto" у img нужно указывать также width и height
- создание шумной текстуры в SVG (секрет в применении SVG-фильтров)
- древнее знание: атрибут form у кнопки позволяет сабмитить форму, даже если кнопка снаружи неё

#Лаборатория_веб_платформы

А вот и демо с применением View Transitions API в SPA

Код тут https://codesandbox.io/p/sandbox/vigilant-bell-8tglkp

Ютуб https://youtu.be/nT1VC6_DDS8

#Лаборатория_веб_платформы

Таймер без фриза с помощью Web Worker

Если в JS запустить таймер с помощью setInterval, который срабатывает довольно часто, например, раз в 100мс, а затем уйти из таба на некоторое время, то окажется, что браузер остановит таймер на время «неактивности» таба. «Фриз» таймера в неактивном табе можно посмотреть тут https://codesandbox.io/p/sandbox/dreamy-bartik-vkkmjr.

Это не баг, а фича: с целью экономии ресурсов браузеры троттлят фоновую активность тех табов, которые сейчас не открыты.

Но как быть, если нужно, чтобы таймер в фоновом табе гарантированно работал без замедления и остановки? На помощь приходит веб воркер, который работает в браузере отдельном потоке и поэтому на его работу оптимизации основного потока не распространяются.

Вот пример таймера в отдельном файле воркера, к примеру, timerWorker.ts :

let timerId: number | null = null;

self.onmessage = (event: MessageEvent) => {
  const { data } = event;

  switch (data) {
    case "start":
      timerId = self.setInterval(() => {
        self.postMessage("tick");
      }, 100);
      break;
    case "stop":
      if (timerId) {
        clearInterval(timerId);
        timerId = null;
      }
      break;
  }
};

В воркере нет объекта window, но есть self, местный аналог https://developer.mozilla.org/en-US/docs/Web/API/WorkerGlobalScope/self. С основным приложением воркер общается с помощью команды postMessage. При этом из приложения также можно дёргать postMessage воркера и подписываться на событие onmessage:

function App() {
  const [time, setTime] = useState<number>(0);
  const workerRef = useRef<Worker | null>(null);

  useEffect(() => {
    workerRef.current = new Worker("/timerWorker.ts");

    workerRef.current.postMessage("start");

    workerRef.current.onmessage = (event) => {
      if (event.data === "tick") {
        setTime((prevTime) => prevTime + 1);
      }
    };

    return () => {
      workerRef.current?.postMessage("stop");
    };
  }, []);

  return <div>{time}</div>;
}

В воркере, к сожалению, нет доступа к DOM-у, но зато доступны разные API, например, Fetch или Canvas, так что выгружать в воркер что-то тяжёлое или важное — вполне себе рабочая тема, о которой не стоит забывать.

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

Новости
- вышел TenStack Router — полностью типизированный (не только на TS, но и сами роуты защищены от ошибок типами) роутер от известного в узких кругах разработчика
- подведены итоги 2023 года в экосистеме JS по версии Rising Stars: победители — shadcn/ui, Bun и Excalidraw

Проекты
- refractror — хайлайтер синтаксиса, основанный на Prism, но отдающий на выходе не строку HTML, а объекты AST
- observable-membrane — создание обсервабл-объектов на основе Proxy
- tokenami — ещё одна CSS-in-JS либа на Тейлвинде + custom properties, типизация из коробки
- catalyst — первая демка UI-кита для Реакта на Тейлвинде, от создателей Тейлвинда
- devicenoscript — среда в VS Code, эмулятор и компилятор TS для программирования IoT-девайсов, контроллеров и прочего хардверного стафа
- оживление текста анимациями «ручных» обводок и подчёркиваний

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

JS
- оказывается цикл forEach всё таки можно остановить (но вряд ли нужно) с помощью throw внутри try с переходом в catch
- в каких случаях нужен flushSync в Реакте: по умолчанию изменения UI батчатся и затем применяются асинхронно, что не всегда подходит (Реакт иногда обновляет UI позже, чем нужно); если нужно гарантировано обновить UI «здесь и сейчас», то flushSync — подходящй инструмент (например, чтобы корректно установить фокус или позицию скролла)
- гайд по паттернам проектирования в JS с простыми примерами
- все JS и TS фичи за последние 3 года: чтиво на ночь для лёгкого засыпания либо для постновогоднего рефлексивного настроения
- кодогенерация и парсинг TS с помощью TS (конкурс на лучший юзкейс объявляется открытым!)
- если для работы с датами не хочется тащить библиотеку, то можно воспользоваться встроенным Intl.DateTimeFormat, который довольно много умеет сам по себе

CSS
- свойство align-content выравнивает элементы не только внутри флексбокса, но также и display: table-cell и list-item
- как происходит загрузка «невидимых» картинок: картинки без loading="lazy" грузятся всегда (даже в скрытом виде), а вот с loading="lazy" грузятся внутри visibility: hidden и не грузятся внутри display: none или <details>
- как выполнить невозможное calc(100vw / 5px) с помощью тригонометрических функций

HTML, SVG
- интерактивный гайд по path (залипательный)

База
- абсолютный минимум о Unicode, который должен знать каждый уважающий себя разработчик в 2023 (и 2024, всё ещё никаких отговорок!)
- сложность алгоритмов. Разбор Big O: для освежения в памяти после новогодних каникул

Телеграм-перестрелка с каналом Евгения Черкасова «Записки тимлида»

Евгений ведёт свой блог давно и по истории канала видно, что он прошёл путь от «фронтенд бати» к роли тимлида в большой компании (вот саммари). Я люблю изучать такие истории людей: в них можно найти что-то близкое по душе или почерпнуть что-то новое из житейской мудрости.

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

2. Сейчас канал Евгения — это рефлексия о жизни и работе, но разработческие и фронтовые темы тоже иногда проскакивают. Например, за ссыль на conventional commits моё увожение (там есть ещё пара постов про коммит-мессаджи, 1 и 2). Или вот напоминашка про свежие единицы измерения в CSS. Из найденных тимлидовых интересностей и жизненных тем: пост про небольшие изменения, к которым люди постепенно привыкают, пост про обнуление бэклога и годный пост про размытие коллективной ответственности. Также есть душевные истории из жизни: про первого ученика или про балет.

3. Что не понравилось.

Картинки к постам, сгенерённые нейросетками. Это смотрелось прикольно месяц-другой, когда только появилось. Но теперь смотрится унылыми заглушками и дальше будет смотреться ещё хуже. Евгений, нужно больше аутентичности в победившем пластмассовом мире!

«Блогеские» темы и призывы к действиям. Налейтай, подпишись, бусты, лайки. Это уже и так везде и всюду, кажется, что это уже не работает, надо по-другому (см предыдущий тейк про аутентичность).

4. Самое ценное, что есть в постах Евгения — его жизненный опыт и живой взгляд на мир. Хочется пожелать ему писать больше годноты в эту сторону, так как чувствуется, что ему есть что сказать. И не терять жизненность историй, это располагает к доверию ❤️

В общем, рекомендую подписаться на @frontend_lead_mentor. А я пойду почитаю разнос разбор моего канала у Евгения 😅