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

Новости
- свойства для «подрезки» текста от верхнего и нижнего отступа точно по высоте строки text-box-trim и text-box-edge, доступные сейчас в бете Safari 18.2 вероятно скоро доедут и до Chrome
- обновился черновик CSS Values and Units Module Level 5, внесли синтаксис if(), чтобы можно было писать в CSS инлайновые условия в духе: display: if(style(--feature-flag: true): block; else: none)
- вышел новый npm-совместимый менеджер пакетов от создателя npm и других достойных мужей — vlt, позволяющий, к примеру, отображать зависимости проекта в виде диаграммы или вообще в gui; также вниманию предлагается npm-совместимый реестр vsr, который можно самостоятельно развернуть у себя бесплатно
- либа Framer Motion стала независимой и переименована её автором Matt Perry в просто в Motion
- способы, как уменьшить количество зависимостей проекта, на примере Storybook 8.4: с помощью активистов проекта e18e удалось снизить размер проекта на 50+%, а размер лок-файла на 75+% (удалены fs-extra, handlebars, file-system-cache; заменены lodash ⇒ es-toolkit, express ⇒ polka, chalk ⇒ picocolors, qs ⇒ picoquery; использован production-mode react)
- у CSS появился «официальный» логотип, а заодно продумывают категоризацию на уровни CSS4 и CSS5
- в Node v18.20.5 LTS import attributes и JSON module помечены как stable и в догонку статья с объяснениями зачем эта фича нужна — чтобы гарантировать, что если в JSON файле придёт исполняемый JS-код, то он не будет выполнен

Проекты
- pinia-colada — data-fetching слой для совместной работы со стейт-менеджером Pinia (Vue.js), похоже на Tanstack query, но напрямую подключается к Pinia
- nano-staged — легковесная альтернатива lint-staged для запуска команд при добавлении в стейдж, коммите файлов в git
- lexical — оказывается у facebook есть свой опенсорсный фреймворк текcтовых редакторов

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

JS
- метод dangerouslySetInnerHTML своим названием как бы напоминает, что если источник HTML вне контроля, то стоит обязательно предварительно санитайзить контент, ведь внутри может оказать вредоносный скрипт (и не только в теге <noscript>, но и просто в src или обработчике onclick, onerror…); помимо спецлиб для санитайзинга типа sanitize-html, можно воспользоваться браузерной технологией CSP, которая ограничивает возможность запуска инлайновых скриптов
- рецепт для работы с формами в React: на action (сервер) или submit (клиент) вешается колбек, возвращающий FormData, которая парсится zod или zod-form-data, и при успехе возвращаются деструктурированые значения
- свойства screenX и screenY при использовании внешних мониторов могут рассчитываться по-разному в разных браузерах, иногда принимая отрицательные значения
- напоминание, когда выйдете на работу: проверить tsconfig.json в вашем проекте на наличие в них ключей incremental и noErrorTruncation

CSS
- среди новинок CSS много тех, которые пока что работают только в Chrome, но также много и кроссбраузерных фич, которые не на слуху, но их можно смело использовать: inset и логические значения свойств block-size, inline-start, inset-block и другие, группирующие селекторы :is, :where, функции сравнения min, max, clamp, единица измерения динамической высоты вьюпорта dvh, media queries range syntax (width <= 1140px)
- при работе с container queries для container-type можно задать inline-size и size; значение inline-size указывает браузеру, что инлайновый размер (то есть ширина, width) контейнера больше не связан с его содержимым, то есть в директиве @container можно указывать min-width/max-width не боясь «зацикленности»; значение container-type: size наоборот разрывает связь высоты контейнера с его содержимым, то есть можно безопасно «квейрить» свойства «высоты» @container (min-height/max-height)
- overflow: clip отличается от overflow: hidden тем, что не создаёт скроллов и может обрезать только по одной стороне вместо сразу двух; кроме того, есть свойство overflow-clip-margin, которое может задать дополнительное пространство внутри обрезаемой области (жаль, что не поддерживается в Safari)

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

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

Новости
- вышли результаты опроса State of HTML: новые API типа Popover и <dialog> появляются (это хорошо), но есть баги, например, на iOS не работает сокрытие при клике на backdrop (это плохо); некоторые новые API типа Anchor positioning и View transitions API ещё не везде поддерживаются; традиционная боль, которая мало утихает с годами, — стилизация и кастомизация элементов форм; в топе нехватающих элементов data table, tabs, switch/toggle, skeleton-ui, context-menu, carousel, inifinite scroll
- вышел Chrome 131: псевдоэлементы ::selection и ::highlight теперь более логично наследуют значения CSS-свойств; к <details> и <summary> теперь можно применять display: flex и grid; в @property теперь поддерживается тип <string>; в элемент <select> теперь валидно включать другие теги помимо <option>, <optgroup> и <hr>; currentcolor поддержан для relative color syntax; Summarization и Translator API для суммаризации и перевода с помощью AI, встроенного в браузер; в дев-тулзы также завезли AI, теперь и браузер будет советовать, как писать код лучше
- департамент юстиции США может заставить Google продать Chrome предположительно родительской компании Alphabet, чтобы более явно отслеживать, как через Chrome Google манипулирует рекламным рынком, и уменьшить возможности собора данных для AI через Chrome
- есть в языке и стандартной платформе такие узкоспециализированные фичи, которые нужны достаточно редко, поэтому забываются и вовремя не вспоминаются; например, Symbol может пригодиться, чтобы спрятать поле или метку в объекте без боязни, что оно где-то вылезет, так символьные поля объекта недоступны в Object.keys() и JSON.stringify()

Проекты
- react-scan — либа для проверки перфоманса в React-приложениях: хороший способ отследить наличие ненужных рендеров, а также обнаружить зависимость между несвязанными друг с другом компонентов

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

JS
- раньше уже писал про команду deno compile, а тут как раз вышел обзор с интересной мыслью: можно собирать ваше приложение с вереницей npm-пакетов в зависимостях в один файл и уже его транспортировать на CI вместо того, чтобы на самом CI скачивать и устанавливать все зависимости приложения — это сэкономит время и мощности CI
- в догонку к прошлому пункту: в вашем package.json файле devDependencies отличаются от dependencies тем, что не будут установлены на CI, ведь они нужны только локально при разработке; запускать production-вариант сборки можно ключом npm install --production, переменной NODE_ENV=production, а также ключом --omit=dev
- самое верное средство, чтобы завести проект нескольколетней давности, попереключать версии node и python и найти заветную рабочую комбинацию!
- как вариант не использовать билд-систему совсем: можно установить либу из npm во временную папку, оттуда скопировать сбилженные JS-файлы и подключить их руками на сайте: с обычным js-файлом проблем нет совсем, с ESM-файлом нужно озаботиться import map-ами, если внутри модуль включает зависимости, а вот с CJS-файлами придётся использовать esm.sh для преобразования их в в ESM
- если вы паблишили npm-пакеты, то наверняка знаете про команды npm version major/minor/patch, и для пререлизов (альфа/бета) тоже есть подобные команды: npm version premajor --preid=alpha сменит 23.1.6 на 24.0.0-alpha.0, а npm version prerelease бампнет альфа-версию
- мы используем инструменты, потому что они делают свою работу, и привыкаем терпеть их несовершенство, так как или им нет альтернатив, или альтернативы чересчур нишевые и экзотические; но если посмотреть со стороны, то картина сразу становится очевидной — React и TS достаточно вербозны и не лишены недостатков

CSS
- в пошаговой анимации steps(5) указывается количество шагов, на сколько разделить анимацию, но также есть дополнительная настройка, указывающая как именно выставляются эти шаги:  0%, 20%, 40%, 60% и 80%, или же 20%, 40%, 60%, 80% и 100%, или же 0%, 25%, 50%, 75% и 100%; настройка steps(3, jump-none) разделит шаги на равные интервалы, что более логичное, но не дефолтное значение

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

#Фикшн_веб_платформы

day0

Фил устало открыл крышку своего ноутбука. Рабочий день только начинался, но на часах уже был полдень. Может быть сказывалась глубокая осень, или же давно не случавшийся с ним отпуск, но Фил чувствовал себя выжатым досуха. Он работал разработчиком в большой, поросшей бюрократическими мхами компании. Проект, над которым сейчас велась работа, шёл сложно. Вроде и хорошо, что наконец взялись за переписывание фронтенда большого легаси-проекта, но от него было ощущение засасывающего ненасытного болота, которое пока что не удавалось даже целиком охватить умом, зато ум болото осваивало успешно.

Чтобы как-то взбодриться, Фил принёс с кухни за рабочий стол в комнату полулитровый стакан кофе, недавно принесённый курьером вместе с бургером, который Фил заточил на завтрак. Потягивая кофе, он надел наушники и врубил музыку со стриминга. Какой-то незнакомый рок-н-рольный голос бодро пел под акустику: «Может быть это алкоголизм? Может быть недостаток любви и добра? В этом мире так мало тепла…»

Фил зачекинился в командном мессенджере и погрузился в дебри зависимостей старого проекта. Пока что попытки разобрать гигантский монолитный модуль не приводили к успеху. Изменение какой-нибудь штуки в одном месте вызывало ошибки в других несвязанных местах. Сложности также добавляло то, что в последнее время участились взломы пакетов в экосистеме npm, пребывающей в упадке. Многие некогда крупные и успешные пакеты, сейчас в 2030 году, были в лучшем случае заброшены мейнтенерами, а в худшем — распространяли рекламу или скам. С тех пор, как широко распространились AI-модели, генерирующие код, в реестр npm хлынули пакеты сомнительного качества. Поэтому ставить что-то из реестра можно было только на свой страх и риск, сканируя бандл AI-ботом-аудитором. Фил как раз недавно поставил себе такой — новый быстрый бот Phosphor. В большинстве случаев откровенное вредоносное ПО бот отлавливал, но мелочи часто приходилось править и дорабатывать самому, форкая проект.

Фила бесило, что часть незаменимых пакетов собиралась только под какой-то древней версией Node.js, и ещё они при этом не дружили друг с другом. Тут ещё как назло две домашние кошки Фила устроили между собой разборки и опрокинули стакан с недопитым кофе на стол, едва не залив на ноут.

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

Промучившись с поиском источника странных логов и ничего не найдя, Фил в раздражении плюнул и решил проветриться. Уже стемнело, он брёл вдоль дороги в холодном свете светодиодных фонарей и думал. Всё это нашествие AI-кодописателей, кодоревьюеров и кодотестировщиков вгоняло в уныние. Программы и тулинг вокруг них стали более непредсказуемыми и ненадёжными, ведь в случае большинства AI-продуктов даже их создатели толком не знали, от чего и как именно AI выдаёт тот или иной результат.

И тут в голове у Фила щёлкнуло: «А что если эти странные логи в проекте появились не от новых пакетов, которые он установил, а от нового бота-аудитора, который эти пакеты проверял? Что если бот заинжектил что-то в код пакетов? Эта блестящая чёрная коробка вполне могла, чёрт знает что внутри неё творится!»

Фил поспешил вернуться домой. Включив ноут и открыв браузерную консоль он с удивлением понял, что рандомные буквы сложились в понятную последовательность:

d e s i n e s p e r a r e q u i h i c i n t r a s n e t l i f y a p p

(продолжение следует)

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

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

Новости
- вышел Angular 19: в современном фронтенде, если фреймворк не поддерживает SSR и гидрацию, а также сигналы, конкуренцию среди модной-молодёжной аудитории уже не выдержать; и Angular в этом плане снова с строю: для каждого роута можно задать отдельно режим рендера Server/Client|Prepender; для отрендеренного, но незагидрированного HTML будет записываться события пользователя, чтобы когда доедут скрипты, «проиграть» их заново и запустить
- вышел Firefox 133: поддержана опция keepalive у fetch, так что теперь во всех браузерах можно пользоваться fetch c keepalive вместо Navigator.sendBeacon(), если важно, чтобы определённый запрос завершился, а не прерывался, в случае unload-а страницы
- вышел TypeScript 5.7: улучшена проверка для никогда не инициализируемых переменных; поддержан таргет до es2024; поиск tsconfig.json по родителям теперь не будет останавливаться на первом найденном; поддержано API Node.js 22 module.enableCompileCache() для более быстрого выполнения повторных операций
- вышел Tailwind CSS v4.0 Beta: интересна траектория развития в сторону CSS-first конфигурации (т.е. использование кастомных переменных, слоёв и директив) вместо конфигурации в JS; изначальный спорный подход с вынесением всего в classname уже стреляет по ногам, требуя от разработчиков soul-crushing backward compatibility work — это рано или поздно или приведёт TW в тупик, или заставит переродиться в тулкит с «естественным» набор миксинов, пресетов и ручек для управлениях внутрянкой
- вышедший Deno 2.1 стал первым LTS-релизом и среди прочего включает новую команду deno outdated для проверки устаревших версий пакетов, эмбеддинг «статических» файлов в бинарник при запуске deno compile, а также возможность указать зависимые команды при запуске других команд
- вышел мажор Vite 6.0: для небольших проектов ломающие изменения не выглядят болезненными, скорее добавились новые фичи и апдейтнуты зависимости
- в Node 22 в ближайшее время появится поведение --experimental-require-module без флага

Проекты
- pkg-graph — визуальное исследование зависимостей npm-пакета, строит граф на лету в браузере
- spoiled — компонент спойлера для React, под капотом Paint API (для Safari предусмотрен фолбек)
- dual-range-input — двойной range-инпут, собранный из двух обычных range-инпутов

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

JS
- инфа по базовым типам TS для React собрана в одно месте: чтобы выцепить тип возвращаемого значения функции — <ReturnType> и <Awaited<ReturnType>> — для асинхронной функции; тип ReactNode лучше ReactElement тем, что шире; props: React.ComponentProps<"button"> для типизации базовых пропсов HTML-элемента или компонента; использование as const для типизации tuples, чтобы TS не считал их массивами
- история, как в Reddit в разросшуюся монорепу внедряли Vite, пара интересных фактов: чтобы подружиться с Lit пришлось добавлять ?inline ко всем путям стилей, чтоб не вставлять их в страницу, а инлайнить строками в бандл; чтобы заюзать на полную ESM пришлось во всех модулях добавить export maps, которыми раньше пренебрегали
- favicon — единственно гарантировано видная часть сайта во вкладке браузера, поэтому её можно использовать для индикации неактивности пользователя или нотификации о событии в свёрнутой вкладке

CSS
- когда-то в Safari затащили эффектное свойство background-clip: text для создания «текстурного» текста путём «вырезания» фона, и оно долго работало только с префиксом -webkit, и вот теперь только в Safari появился ещё один вариант — background-clip: border-area — только теперь, чтобы текстура фоновой картинки осталась на месте рамки, а не букв
- oklch удобен тем, что позволяет легко подстроить один из параметров цвета, например, lightness, чтобы сделать один и тот же цвет на тёмном фоне более ярким, а на светлом — более тусклым oklch(calc(0.75 - var(--colorAdjuster)) 0.2 328)

HTML
- с помощью <link rel="preload" as="image"> с атрибутами imagesrcset, imagesizes и type можно прелоадить картинки только в браузере, поддерживающий формат, заданный в type, например, type="image/avif"

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

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

Новости
- вышел релиз библиотеки компонентов React Aria/Spectrum: добавлены компоненты Disclosure and Accordion; что примечательно, под капотом не используется summary/details, видимо ещё не до конца распространилось стабилизировавшееся API; также в React Aria появился компонент ToggleButtonGroup, управляемый с клавиатуры; также либа теперь полностью Typenoscript Strict-совместима
- выпущен Astro 5.0: всё то же, что было в бете (Content Layer — запрос контента из внешнего ресурса, Server Islands — отложенный рендеринг с сервера, astro:env — типобезопасный env-ы) + экспериментальные фичи для отображения респонсив-картинок, кропа, а также импорта SVG-компонентов
- вышла стабильная версия React 19: помимо новых API теперь одинаковые подключенные стили не будут дублироваться и будут подключаться в указанном порядке, также можно указывать <meta> без дополнительных либ и ещё полностью поддерживаются кастомные элементы (веб-компоненты)

Проекты
- представьте, что вы разработчик нового React-фреймворка и хотите, чтобы приложение, написанное на вашем фреймворке, могло одной кнопкой деплоиться на Vercel, Netlify и ещё многие другие хостинги… Разработка и поддержка всего этого добра сразу навевает тоску. Но выход есть! vinxi. Одной строчкой в Vite-конфиге подключаем поддержку нужного провайдера, как и сделал Tanner Linsley в своём фреймворке TanStack Start
- onlook — oss визуальный редактор React-приложения: ещё одна попытка избавиться от «макетов», чтобы собирать их сразу в коде
- react-verification-input — маск-инпут для ввода пин-кодов, React
- dontfuckwithscroll — не воруйте скролл, наглядное пособие

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

JS
- если вы знаете куда с одной страницы пользователь пойдёт дальше, можно предзагрузить или даже пререндерить этот урл; для этого с помощью Speculation Rules API в скрипте <noscript type="speculationrules"> нужно указать секцию prerender и prefetch с возможной настройкой условий запуска (если адрес включает строку, селектор соответствует выражению…); Chromium-only
- при создании модалки нужно по-хорошему предусмотреть много вещей: триггерный элемент, кастомный контент и класснеймы, обработчики событий, рендер в Portal-е, управление фокусом; в общем, проще всего взять готовую headless-либу, например, Radix или React Aria и прикрутить свою логику и стили
- если стоит задача заняться перфомансом, то можно начать с PerformanceObserver, с помощью которого можно программно получить не только разовое значение метрик (FID, CLS, LCP), но и обсёрвить, то есть повторно снимать метрики во время пользования приложением
- а что если не рендерить SPA-целиком в <div id="root">, а подгружать React только в определённый интерактивный островок вашего сайта? Да не, бред какой-то… или нет?
- с View Transitions API можно методом startViewTransition запустить нативную плавную смену двух DOM-нод; но что если как раз императивно запускать не хочется, а хочется, чтобы DOM-нода добавилась и транзишн автоматом выполнился? Берём MutationObserver и вуаля: нода появилась, обсёрвер триггернулся, колбек запустился, а в нём уже и startViewTransition

CSS
- рецепт, чтобы создать у элемента эффект замёрзшего стекла: взять backdrop-filter: blur(10px) и насыпать кучу теней для создания глубины; для создания «стеклянной прозрачности» у блока определённой формы можно добавить ещё и mask-image
- единицы измерения lh — величина вычисленного значения line-height, её удобно использовать для задания динамических отступов между тестовыми блоками (rlh — аналог для рутового элемента)
- впервые встретился такой UI-элемент — кнопка в трёх состояниях (да, нет, не знаю): её можно реализовать на чекбоксах, :has(:checked) и pointer-events

HTML
- в HTML у ссылок <a> есть атрибут ping — легальный способ отслеживать нажатие по ссылке, отсылая запрос по указанному в значении адресу, которое к тому же сложнее заблочить
- напоминание в следующий раз, когда будете собирать форм-визард, использовать <fieldset> для каждого «шага» с набором полей (правда, если не столкнётесь с проблемой стилизации, хехе)

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

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

Новости
- вышла новая версия Safari 18.2: поддержано свойство text-box (text-box-trim + text-box-edge) для «подрезки» вертикальных отступов у тестовых строк; @view-transition заработал не только в пределах одного документа, но и между разных страниц; background-clip: border-area маскирует рамку нижележащим слоем; теперь работает деление на единицы измерения в calc(100vw / 1px); поддержаны scrollbar-width и scrollbar-gutter для стилизации скроллбаров; добавлена функция Scroll to Text Fragments; поддержан <input type=week>; у PointerEvent появился метод getPredictedEvents() для предсказания будущих позиций курсора; поддержан Promise.try
- в Mozilla представили новый брендинг с консольным динозавром-флажком, а также наняли три новых топа: в Firefox выходят вице-президент FF и вице-президент по продукту FF, а также вице-президент по инфраструктуре
- CSSWG подытоживают год и выкатывают новые FPWD: Display 4, Overflow 5, Multicol 2 и Color HDR 1, из интересных нововведений: reading-flow для управления порядком чтения контента скринридером в flex- и grid-контейнере; интерполяция и анимация свойства display; псевдоэлемент ::column в многоколоночном контейнере; свойство scroll-marker-group и группа псевдоэлементов ::scroll-marker-* для стилизации скролл-контейнера; управление яркостью HDR-контента
- вышел отчёт Cloudflare Radar 2024: HTTP/2 вдвое опережает HTTP/3; React, Next.js — самые популярные фреймворки; PHP вдвое популярнее Node.js; для создания API Go используется чаще Node.js; Yandex — второй по популярности поисковик — подсдал к концу года; среди браузеров Chrome держится на 65%, потом идёт Safari, Edge, а у Firefox 4% пользователей; в северных странах преобладает десктопный трафик, в Афркие, Индии, Южной Америке — мобильный

Проекты
- skia-canvas — «безбраузерная» реализация API canvas для node или десктопа на GPU
- html-react-parser — парсер HTML в React-компонент

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

JS
- общение компонентов на основе событий помогает избежать проп-дриллинга или связывает разнесённые части одной системы; есть простой вариант хука useEvent (создаёт эвент и отдаёт диспатчер) или более сложный в виде шины событий
- порой бывает нужно сделать небольшой проект, куда тянуть бандлер вместе с процессом билда не обязательно: для локального сервера и HMR сгодится browser-sync, сторонние пакеты можно загрузить с  unpkg.com/npm и прописать алиасы в <noscript type="importmap">; TS заменяется на JS + JSDoc, tsc проверяет код на соответствие типов
- в ref элемента в React можно передать функцию, в параметре которой будет DOM-нода и в React 19 ref-функция теперь может возвращать cleanup-функцию, как в useEffect
- вслед за React 19 вышел Next 15.1 со свежим React на борту (для Pages Router ещё можно React 18), улучшен дебаг ошибок

CSS
- в бете Tailwind 4 был представлен механизм стилизации дочерних элементов из заданного варианта родителю <div class="**:data-avatar:rounded-full"> (все дочерние элементы с атрибутом data-avatar будут скруглёнными), что дизраптит саму идею атомарных классов, помещая в classname «мета-CSS» и давая возможность использовать фреймворк ещё более противоестественным способом
- с тех пор, как иконочные шрифты стали считаться анти-паттерном, технологии пошли вперёд: появились вариативные и цветные COLR шрифты, хорошо сжимающий формат woff2 и font-display стали повсеместно поддерживаемыми, в content появился alt-текст для скринридеров; тем не менее шрифт может не загрузиться или может быть проигнорирован системой, поэтому SVG — всё ещё лучший вариант для веб-иконок
- color: lch(from var(--bg) calc((49.44 - l) * infinity) 0 0) автоматически меняет цвет текста с чёрного на белый в зависимости от цвета фона

Платформа
- в девтулзах Chrome 131 теперь помечаются те анимации, для которых не задействовался процесс «композитинга» (анимация height или кастомного свойства)
- если знаешь особенности платформы, базового языка (JS, CSS, HTML) и браузеров, становится легче кастомизировать вещи в рамках фреймворков, находить и фиксить баги, решать проблемы проще

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

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

Новости
- вышла Node.js v23.4.0: из-под флага вынесен модуль node:sqlite, то есть теперь по дефолту доступно создание SQLite-бд, выполнение SQL-запросов напрямую в Node
- прошёл 105-й митинг TC39: Intl.DurationFormat продвинулся на Stage 4, Error.isError на Stage 3, а также на Stage 1 появился Import Sync — нативный способ синхронных импортов в JS import.sync('react')
- появились результаты опроса State of JS 2024, 14к разработчиков преимущественно мужчины из США и EC среднего возраста и 5-10 лет работы в индустрии поделились статой: уже довольно популярны Object.groupBy(), Promise.allSettled(), array.toSorted(), string.replaceAll/matchAll(), но мешает браузерная поддержка, а также болит отсутствие статической типизации из коробки; webpack, Parcel, а также отдельно esbuild и Rollup продолжили уступать позиции Vite; React/Next.js в целом в топе, но с годами популярность падает и люди страдают от их разнообразных проблем и сложности, Vue.js примерно на том же месте по популярности, что и в 2021; pnpm заметно популярнее npm/yarn workspaces; Astro многим нравится, популярность Lit чуть подросла; Vitest стремительно набирает популярность, но Jest всё ещё также в топе, хоть и вызывает страдания (Deno и Node с их встроенными возможностями тестирования пока на дне); в топе используемых либ Lodash, date-fns, Zod, Moment, Day.js; Express всё ещё намного популярнее Nest и Fastify; большинство опрошенных используют TS на фронте, больше половины — на бэке; больные точки: архитектура, стейт-менеджмент, управление состоянием, билд-тулы
- Ecma выпустили спецификацию Source map format: цели — поддержать двунаправленный маппинг сорсов и деобфускация стэк-трейсов на сервере
- 17 декабря исполнилось 28 лет CSS: забавно, что со временем всё больше людей начинают работать с технологиями, которые старше их самих, и от этого воспринимают их «древними»

Проекты
- prompts-js — асинхронные версии вызова диалогов alert, confirm и prompt на промисах и нативном элементе <dialog> (просто JS-файл, красота, если бы ещё добавить JSDoc с описанием типов, то вообще было бы идеально)

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

JS
- некоторое время назад SQLite решили полностью переписать на Rust (оригинальный модуль libsql написан на C, что делает его уязвимым со стороны памяти по своей природе) и так появился проект limbo, который в случае успешного завершения заменит libsql; интересно, как будет выглядеть в этом случае поддержка со стороны Node
- забавное замечание: чтобы выполнить полный test suite Node.js может занять несколько дней, поэтому это делает не на каждый чих, и поэтому сравнивая 20 и 22 версии ноды, некоторые API показали улучшение по перфомансу, а некоторые наоборот просадку
- общепринято, что в JSON нельзя добавлять комментарии, но это правило можно нарушить, если вы уверены, что JSON-парсер, который будет читать ваш файл, не сломается в процессе
- если вы задались задачей рендерить веб-компоненты на сервере, то нужно решить проблему отсутствия DOM-а и глобальных объектов (window, document…): для этого можно использовать фреймворк (Lit, WebC, Enhance) или же взять либу Happy DOM — «безголовую» эмуляцию DOM, взять оттуда необходимые объекты и сгенерить HTML и JS
- в React 19 появилась более полная поддержка веб-компонентов: теперь можно в «пропах» веб-компонента прокидывать объекты или функцию-колбек (даже с кастомным событием)
- в управлении состоянием в React-приложениях стоит выносить работу с ним из рендер-функций, в идеале не используя useState/useEffect там, где можно их использовать (то есть почти везде)
- в случае прокидывания сеттера в дочерний компонент вместо использования «общей» функции-колбека начинает «течь» абстракция, этого лучше всего по умолчанию избегать

CSS
- ключевой момент из внедрения Container Queries в Netflix — меньше использования CSS- и JS-кода для управлением лейаутом → меньше багов, но при этом если использовать полифилл, то могут быть проблемы с перфом, надо проверять

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

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

Новости
- у React Aria/Spectrum появился конкурент Base UI в виде движка, извлечённого из недр Material UI, без определённой системы стилей (движок предоставляет класснеймы и CSS-переменные), с поддержкой data- и aria-атрибутов: пока представлена альфа-версия, в планах запилить ещё компоненты, Tailwind-плагин, багфиксы и документация
- опубликован отчёт по опросу JetBrains State of Developer Ecosystem Report 2024: JS всё ещё в топе языков, TS медленно растёт, HTML/CSS так же медленно падает, что в целом показывает инертность платформы несмотря на хайповость некоторых инфоповодов; Go и Rust — языки, которые респонденты собираются заадоптить; TS, Rust и Python — самые многообещающие языки (вот будет революция, если в JS таки случится разделение на базовую/надстроечную часть); на JS/TS больше всего реализуют UI; AI используют для более быстрого поиска информации, кодинга и выполнения рутинных задач, а также для изучения новых технологий; зарплата в US и Индии различается в 8 раз; топовых зарплат больше у Scala-специалистов, меньше всего — у PHP-, HTML/CSS- и JS-разработчиков; сложные части работы разработчика — коммуникации и понимание требований
- в новой версии Bun сделали лок-файлы bun.lock в JSONC-человекочитаемом-формате (так удобнее мерджить в git → DX — существенное конкурентное преимущество)
- в версии Zod v3.24.0 впервые имплементирована спека Standard Schema — попытка объединить усилия авторов валидационных либ для создания общего интерфейса, который позволит проще интегрировать разные части экосистемы между собой

Проекты
- whatunit — единиц измерения в CSS становится всё больше и все их в памяти уже не удержать, поэтому появилась такая диаграмма решения, какую единицу выбрать в той или иной ситуации (текст/отступы/позиционирование, респонсив/фикс, флекс/грид); из тех, что я уже забыл — текстовые ch для ширины символа , ex для высоты строчной буквы , cap для высоты заглавной буквы

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

JS
- WeakMap и WeakSet — это «самоочищающиеся» аналоги Map и Set, которые помогают бороться с утечками памяти в задачах, где необходимо хранить набор ссылок на DOM-ноды или же создать кэш вида «ключ-значение»
- в DOM есть встроенная «шина сообщений» BroadcastChannel, которая предназначена для обмена сообщениями посредством postMessage (не путать с window.postMessage) и подписки на событие "message" в рамках одного ориджина, годится для обмена сообщениями между вкладок браузера, окнами, айфреймами, например, чтобы прокинуть по всем вкладкам сессию залогиненного пользователя или заполненную форму

CSS
- семейство «подрезающих текст» свойств text-box (text-box-trim, text-box-edge) должно облегчить взаимодействие с дизайнерами в тонких материях, там где отступы реально нужны для решения задач дизайна, а из-за дополнительного отступа тестовых боксов в браузере эти отступы или убираются костылями (привет тем, кто выравнивал текст в кнопке по центру), или на них забивают
- тот самый «указывающий» треугольник у тултипа можно реализовать с помощью одностороннего бордера, выглядывающей из под тултипа половины перевёрнутого квадрата, вырезания clip-path-ом нужной фигуры из прямоугольника или же border-image + conic-gradient
- текст с цветом анимированного градиента достигается с помощью модерновой комбинации свойств @property + linear-gradient() + background-clip
- «нативный» импорт стилей из других стилей, например, @import url("https://somesite.net/xxxxxxx.css") всё ещё плохо работает в браузерах, а точнее блокирует рендер до полного скачивания и парсинга CSS-файлов, по возможности избегайте этого подхода

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

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

#Фикшн_веб_платформы

(предыдущая часть)

transition

«Всё понятно», — пробурчал себе под нос Фил, глядя на буквы, которые сложились в ссылку на домене netlify. «Очередной скам», — подумал он и решил удалить с машины бот-аудитор, но что-то его остановило. Название поддомена в ссылке было какое-то странное. Сначала Фил принял его за хэш, но тут явно вырисовывались какие-то слова на незнакомом языке.

Любопытство взяло верх, и Фил решил перейти по ссылке desinesperarequihicintras.netlify.app. Если что браузер работает в stealth-режиме под VPN, так что украсть куки или отследить трафик с его машины не удастся.

«Наверное реклама очередного майнд-трекера… Таргетологи хреновы!», — подумал Фил. Подобные штуки его уже давно не интересовали, и своей электроэнцефалограммой ни с какой корпорацией он делиться не собирался.

Перейдя на сайт, Фил удивлённо увидел текст на пустой странице:

А и Б сидели на трубе,
А упала, Б пропала,
Кто остался на трубе?

«Ээээ…», — промычал Фил. В этот самый момент часы на руке у него завибрировали и на них показалось пуш-уведомление, призывающее через две минуты подключиться к синку. «Чёрт!», — выругался Фил. Он совсем забыл о сегодняшнем позднем синке с рабочей группой. Фил полез в ящик стола, пошарил рукой и достал корпоративный VR-сет.

Надевая VR-сет, Фил старался освежить в памяти, чем сегодня был занят. Он понял, что многого про сегодняшний день рассказать на синке не сможет. Целый день он провозился с рефакторингом, но пока мог похвастаться только частично загруженным в голову контекстом проекта и парочкой переписанных небольших модулей системы.

К слову, сейчас уже такая прямая работа с кодом встречалась в ежедневной рутине Фила нечасто. Обычно для разработки новых фич приходили сырые описания от менеджеров. Задачей Фила было внятно оформить новое описание в базе знаний о системе, снабдить инфой о краевых случаях и исключениях, добавить контракты и тестовые кейсы. После этого обновление базы знаний уходило корпоративной AI-системе Levia-3, которая сама генерила новый код фичи по обновлённым описаниям, контрактам и тест-кейсам.

Да, название профессии «оператор ЭВМ» из прошлого века в таком подходе играло новыми красками. Оператор корпоративной AI-шайтан-машины. Которая знает ответ всегда. Ну или почти всегда.

В случае, когда Levia-3 всё таки не справлялась, но делала вид, что справляется, её нужно было дообучить для решения конкретно этого типа задачи или кейса. Вот тут уже приходилось включать в работу «кожаного» разработчика и писать, составлять и размечать датасеты, создавать новые тесткейсы.

Всяческие рефакторинги и доработки легаси-части системы, ранее не описанные в базе знаний, тоже нужно было выполнять вручную. Собственно говоря, именно этой задачей Фил сейчас и занимался — нужно было загнать ранее не описанную часть фронтенд-системы в ведение Levia-3 и решить все сопутствующие проблемы.

Не то чтобы супер-увлекательное дело, но за дообучение Levia-3 полагались дополнительные токены, а токены лишними не бывают.

Синк прошёл без неожиданностей, и после его окончания Фил устало снял VR-сет, положил на стол, замер и недвигающимися глазами посмотрел куда-то сквозь монитор. Он так сидел некоторое время, а затем взгляд его сфокусировался на открытой в браузере странице с детским стишком.

«Так, таааак…», — задумчиво протянул Фил и открыл инспектор кода браузера. Помимо текста в HTML-коде он увидел скрытое поле <input type="hidden" value="bGltYm8=" />. «Скрытое и зашифрованное поле, хммммм…», — пробормотал Фил и как-то машинально стал думать над разгадкой. «А и Б, А и Б…». Что-то это напоминало…

И тут Фила озарило — atob! Шифровку можно разгадать прямо в консоли. Фил написал в консоли вызов функции atob, передал туда значение из скрытого инпута и запустил код. Консоль выдала разгадку — limbo.

«Эээмммм», — в задумчивости протянул Фил, размышляя, что с этим делать дальше. «Может быть это роут?», — подумал он, вписал в адресную строку desinesperarequihicintras.netlify.app/limbo и нажал Enter.

(продолжение следует)

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

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

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

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

Минорные обновления:
- еженедельные дайджесты о происходящем в веб-платформе и индустрии фронтенда моего авторства (aka Фронтвестник) теперь называются #Пульс_веб_платформы
- периодические литературные вбросы объединены под названием #Фикшн_веб_платформы

Новые фичи:
- наработки, эксперименты, полезные фичи, находки и напоминания моего и не только авторства теперь объединены в рубрике #Лаборатория_веб_платформы
- новая рубрика #Книжный_клуб_веб_платформы с короткими выжимками книг вокруг веб-разработки

Также выражаю благодарность всем, кто поддерживал канал в прошлом году! Донат или любой поддерживающий/критикующий коммент мотивируют продолжать писать и думать о дальнейшем развитии, то есть по сути дают жизнь этому каналу.

2025 — поехали! 🏁

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