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

dev-fiction

Придумал новый жанр. Вот есть science-fiction, а в мире разработки пусть будет dev-fiction. Индустрии веб-разработки явно не хватает своих философов и фантастов. Если бы были, то может быть и не появилось в своё время никакого «фронтенда». Начну это исправлять.

2027 год. После релиза 20 версии React и выхода нескольких мажорных версий Next.js команду разработки React вместе с проектом окончательно поглощает Vercel. Meta открещивается от React и веба и уходит целиком в индустрию ИИ. Бизнес-модель Vercel медленно загоняет развитие платформы в тупик: всё больше продуктовых компаний отказываются от хостинга переусложнённых приложений в Vercel и выбирают миграцию на альтернативные опенсорсные хостинги. Vercel теряет прибыль и перестаёт вкладываться в развитие React.

2028 год. TC39 окончательно уходит от «ежегодного» версионирования языка ES. Теперь baseline-версия языка зафиксирована в версии ESBase и больше практически не изменяется. Все нововведения в язык привносятся в sugar-версию языка — ESNext, которая компилируется в ESBase. Для этого TC39 в коллаборации с разработчиками Babel выпускает ESNext-компилятор. В языке ESNext появляется типизация. «Нативные» типы ESNext оказываются лучше по перфомансу, чем TypeScript, поэтому TS проигрывает конкуренцию и медленно деградирует. Происходит раскол в команде разработки VSCode и часть разработчиков присоединяется к проекту Zed, чтобы разрабатывать новый быстрый редактор ESNext. VSCode по факту останавливается в развитии.

2030 год. Команда React несколько лет пребывает в упадке. Компании всё чаще ищут альтернативное решение для создания быстрых SPA с простым SSR, но его нет на рынке. Многочисленные попытки создать альтернативный JSX+SSR-фреймворк спотыкаются о то, что в них не работают существующие дизайн-системы и UI-киты, «залоченные» на React API. Angular и Vue так и не обретают большой популярности и остаются нишевыми проектами.

Внутри Google решают сделать ставку на создание нового фронтенд-фреймворка на основе веб-компонентов. Для этого собирается команда во главе с Addy Osmani, которая в короткие сроки в коллаборации с Open UI, Brad Frost и группой разработчиков Devon Govett, создаёт на основе React Aria универсальный, не привязанный к конкретному фреймворку набор веб-компонентов GlobalComponents.

2032 год. Команда берётся за создание самого фреймворка, FinalFramework, который тесно сынтегрирован с набором компонентов GlobalComponents.
Киллер-преимущество нового фреймворка — он не требует дополнительной сборки, кроме компиляции ESNext в ESBase (если писать код сразу на ESBase, то его можно в принципе не билдить, а запускать как есть в браузере, подключив один JS-файл фреймворка в рантайме).

В дев-тулзах Chrome появляется нативная интеграция с GlobalComponents и FinalFramework. Кроме средств работы с DOM (надстройка над темплейт-литералами вместо JSX), фреймворк содержит встроенную систему атомарных реактивных сторов, основанную на событийной модели. Также из коробки идёт инкапсуляция стилей и JS, что больше не требует от команд заботиться о бандлировании и внедрять «микрофронтенды». Парадигма меняется: один веб-компонент — это и есть «микрофронт» со своим JS/CSS. Данными с окружающей средой он обменивается посредством событий, глобального контекста и нативных браузерных API.
Так как фреймворк построен на веб-компонентах, которые могут отдаваться с сервера как есть простыми строками, SSR-режим включается одним ключом в настройке компонента.

2035 год. «Примитивный» подход к веб-разработке становится модным. Webpack уже давно в стагнации, Evan You вместе с компанией void(0) несколько лет как переключился на коммерческую поддержку легаси-проектов в крупных корпорациях.

Из-за своего быстродействия и лёгкости ментальной модели, а также удачного маркетинга, FinalFramework бурно захватывает рынок. Благодаря нативной интеграции с основными браузерными движками, FinalFramework начинает использоваться не только в SPA, но также в создании мини-аппов внутри крупных приложений и как решение для десктоп-приложений на основе Electron. Веб вновь захватывает мир.

Фронтвестник 18.10.2024

Новости
- вышел Chrome 130: окончательно пофикшен CSS Nesting; в Picture-in-Picture добавлена настройка preferInitialWindowPlacement для сброса предыдущей привязки pip-окна; поддержано свойство box-decoration-break: clone для создания красивых переносов текстовых блоков; плавный скролл scrollIntoView() с опцией behavior: "smooth" больше не отменяется в случае случайного «конкурентного» скролла; выкачен клавиатурный скролл по фокусу (например, на <textarea>); в девтулзах в инспекторе появилась пометка контейнеров со скроллом
- в TC39 созревает новый план, как сделать JS более устойчивым для конечных пользователей и при этом более удобным для разработчиков: разделить JS на условный core JS0 (это то, что уже есть сейчас) + JSSugar (это надстройка, которая компилируется в JS0), и при этом обе части стандартизировать; да, это типа CoffeeScript, предлагается распространить стандартизацию на «мутант»-версию языка, из которой особо удачные фичи смогут перекочёвывать в «стабильную» версию: а там уже и «ванильная» типизация появится, и всё остальное, что сейчас добавляется надстройками
- вышла Node 23.0.0: по умолчанию теперь работает require() ES-модулей, дропнута поддержка 32-bit Windows
- Webflow купили GSAP: ждём выхода фаундеров через полгода 🙂

Проекты
- brisa — попытка поженить веб-компоненты, JSX, серверный рендеринг, actions и реактивные сигналы — получается нечитаемая костыльная каша; сравните, например, с symbiote, насколько легковесно и свежо смотрится (уже ранее рассказывал про этот проект, он жив-здоров и развивается)
- jeasx — а вот ещё один заход в JSX + серверный рендеринг (под капотом fastify и esbuild), который уже похож на React здорового человека: можно использовать await просто так, class вместо className, «контекст» лежит в this
- hello-pangea/dnd — ещё одна попытка в dnd-сортировки для React (дед-mode-on: зачем в зависимостях redux?!)

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

JS
- обратная сторона удобства экосистемы npm — из неё так удобно и быстро можно поставить в проект зловредное ПО: иногда злоумышленники для своих пакетов «захватывают» имена, похожие на общеизвестные названия, либо могут замаскировать пакет под «легальный», но внутри будет rm -rf ~/*, который запустится по таймеру через час после установки
- реализация drag-to-select, из которой я узнал о существовании метода e.currentTarget.setPointerCapture(e.pointerId), который не полностью выключает pointer-events, а ловит только те события, которые исходят от текущего элемента
- если нужен перфоманс, то проще делегировать его самому браузеру, чем опираться на JS-надстройки типа React, которые по умолчанию будут медленнее; к такому же выводу пришли разработчики Edge, которые до этого затащили в браузер React, а потом решили от него отказаться
- в объекте события paste есть поле clipboardData, откуда можно вызвать метод getData('text/plain'), что получить скопированный текст или HTML, а также есть clipboardData.files, где лежат скопированные файлы
- вряд ли вам это пригодится, но setTimeout может выполняться максимально ~25 дней
- в значениях по умолчанию у аргументов функции можно использовать соседние аргументы или операции с ними function myFunc(arg1, arg2 = arg1)

CSS
- скроллящаяся таблица со стики хедером и боковым столбцом делается с помощью position: sticky, а чтобы ограничить область скролла контейнеру задаётся overflow-x: auto и высота вьюпорта; а заодно из решения почерпнул, что один элемент с position: sticky можно включить внутрь другого sticky-элемента
- чтобы протестировать стили для печати не обязательно каждый раз запускать печать в браузере, в девтулзах есть эмуляция print media type, которая также работает и в cypress
- небольшой и симпатичный гайд про цветовой формат OKlch: считаю, что именно фронтам удобнее всего затаскивать эту тему в проекты (поддержка позволяет — с 2023 работает во всех браузерах)
- конический градиент можно использовать для создания не только круглых форм, но и прямоугольных, например, repeating-conic-gradient(#000 0 25%, #fff 0 50%)

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

Фронтвестник 11.10.2024

Новости
- вышел Firefox 131: поддержана фича Text fragments — возможность ссылаться на произвольный текстовый фрагмент: https://example.com/page[#:~:text=human] проскроллит страницу к первому встретившемуся слову «human», стилизовать его можно псевдоклассом ::target-text (поддерживается во всех браузерах); в девтулзах поповеры кастомных свойств показывают computed-значение и параметры @property
- сообщество e18e, которые взяли на себя роль «санитаров платформы», ходят в популярные пакеты, предлагают улучшения перфоманса, помогают выпилить ненужные зависимости; в сентябре удалось помочь выпилить смешную (да не очень) зависимость is-number из chokidar, также хорошо подчистили Storybook и jimp
- выпущен Deno 2.0: уже рассказывал о фичах раньше, в этом релизе обратил внимание на команду deno compile, собиращую приложение в запускаемый файл (с иконкой в Windows); и тут я понял, что на самом деле Deno конкурирует больше с Bun, чем с Node, на поприще все-инструменты-в-одном
- в Bun завезли экспериментальную поддержку сборки CSS на базе LightningCSS

Проекты
- one — React-фреймворк, собирающий приложение в веб и нейтив: под капотом Vite, также обещают локальную БД Zero (попробовать можно командой npx one — интересно, а козырные названия пакетов, как и домены покупают-продают?)
- scalar — REST-API-клиент в формате OpenAPI (для одного пользователя бесплатно)

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

JS
- local-first веб-приложение, в котором можно описывать путешествие текстом и смотреть маршрут на карте: используется CRDT-либа Yjs, которая хранит данные локально на устройстве, и Y-Sweet — клиент и сервер для синхронизации состояния по вебсокет-соединению, чтобы пользоваться приложением одновременно с нескольких устройств
- держать секреты типы паролей в env-файлах довольно удобно, но ненадёжно: env-утекают на фронте/SSR, через логи или просто во время видео-стрима, также env-ы видны в списке процессов в Unix-like-системах
- вообще-то это статья про то, как работает фича девтулзов Chrome «pause on uncaught exceptions», но меня заинтересовало другое: на сайте без драм и обсуждений используется куча веб-компонентов, например, <devsite-code> для отображения блоков кода, причём используются они в виде «виджетов»: кастомные элементы — это обёртки, докидывающие стилизацию и часть функциональности, и в браузерах, не поддерживающих кастомные элементы, контент всё равно покажется хоть и немного коряво
- нативный нестинг в CSS правилах появился без флага в Chrome 112, но с немного другим синтаксисом (нужно было проставлять дополнительный &) и эту необходимость окончательно уберут в Chrome 130; чтобы не сесть в лужу со старыми версиями нужно в нестинге обычные правила писать перед медиа-выражениями (что и логично)
- если нужно, чтобы ключами объекта было что-то, кроме строк или символов, выбираем Map

CSS
- пример реализации цветовой темы с нативной поддержкой темной/светлой схемы:

color: light-dark(
  oklch(from var(--secondary) var(--600)), 
  oklch(from var(--secondary) var(--200))
)

- директива @supports не может проверять доступность других директив, и можно проверять наличие «родственного» обычного свойства: @container проверяется @supports (container-type: size); в статье есть рецепты для проверки многих директив, кроме @layer, @property и @starting-style
- значение свойства grid-template-rows можно сделать динамическим, если использовать внутри кастомное свойство --int, объявленное через @property, и анимировать его

Платформа
- кажется мы стали забывать свои корни: роутер можно собрать на веб-компонентах (подход, популяризированный в React Router, когда вьюхи оборачиваются в «теги» роутов идеально ложатся на кастомные элементы); для связей можно использовать события CustomEvent; компоненты нативно реагируют на смену атрибутов («пропсы»)
- использование не по назначению двухбуквенных доменов названий стран имеет сайд-эффект: если страна перестаёт существовать, то что делать с неактуальным доменом? Эта ситуация коснулась домена .io «страна-владелец» которого перестаёт существовать

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

Фронтвестник 04.10.2024

Новости
- обновилась библиотека компонентов React Spectrum: компоненты для работы с цветом (пикер, колесо, инпут…) вышли из беты, а компоненты Tree и TreeView выведены в бету
- Evan You сотоварищи основали компанию void(0) и подняли денег, чтобы дальше пилить Rolldown и Oxc, а на их основе сделать коммерческий тулчейн для энтерпрайзов
- вышла версия Eleventy v3.0.0: теперь на ESM, поддерживает pnpm, yarn, Deno, разнообразные улучшения API (например, поддержка темплейтных языков вынесена из кора во внешние плагины)
- ESLint теперь поддерживает линтинг JSON- и Markdown-файлов (ждём официального переименования в E(xtremely)S(uper)Lint)
- вышла pnpm 9.12: команда pnpm outdated сортирует пакеты по алфавиту, добавлена возможность убрать пакет из зависимостей в overrides указанием "-"
- выпущена версия Tauri 2.0 (фреймворк для создания кроссплатформенных нативных приложений из фронтенд-кода): появилась поддержка мобилок iOS и Android (также поддержан Hot-Module Replacement (HMR) для мобилок), добавлена онбординг-установка для шелла и популярных менеджеров пакетов, обогащена система плагинов
- скоро выйдут React DevTools 6.0.0: поддержаны ServerComponents
- в яндексовском ui-kit GravityUI вышел wysiwyg-редактор, поддерживающий markdown (заодно выяснили, что кит остался тому Яндексу, который остался в РФ)

Проекты
- superdiff — либа для отображения diff-а между двумя массивами или объектами
- zod.fyi — «визуализатор» JSON ошибки ZodError
- mockoon — инструмент для разворачивания локального мок-сервера API

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

JS
- гайд по парадигме функционального программирования применительно к JS: раскрываются темы чистых функций, идемпотентности, замыканий, иммутабельности, а также как с этим жить в контексте JS; в контексте React, кстати, видел такой фокус: чтобы не вкладывать контексты друг в друга матрёшкой, они создаются друг за другом, а потом «функциональным методом» compose вкладываются друг в друга
- обычно про воркеры вспоминаешь, когда начинаются проблемы с производительностью, но об их существовании хорошо бы вспоминать почаще: в случае тяжёлых вычислений, процессинга картинок или видео, аналитики данных, фоновых задач, реалтайм-соединений

CSS
- если элемент с position: absolute не имеет предков, то он позиционируется относительно initial containing block — прямоугольника по размерам совпадающего с вьюпортом, но при этом сдвигающего при скролле
- в дев-тулзах Chrome во вкладке Performance сейчас есть возможность записать влияние CSS-селекторов на быстродействие, но нужно учитывать, что включённый анализ сам по себе увеличивает время отрисовки
- при объявлении кастомного свойства через @property немного быстрее будет задавать параметр inherits: false
- короткий сниппет для создания цветового колеса со всем цветовым спектром background: conic-gradient(in hsl longer hue,red 0 0);

HTML
- признаюсь, есть у меня некий фетиш на применение платформенных штучек, которые решают проблемы каким-либо простым способом с неожиданной стороны; вот всё жду, когда подвернётся шанс «легально» использовать этот трюк: HTML-элементы с прописанными id доступны по этому id напрямую в window: <form id="x"><input name="em"></form> x.em.onclick = …
- чем хороши <dialog> и popover помимо прочего (центровка, оверлей…), так это тем, что они гарантированно будут «выше» всех остальных элементов, так как рендерятся в специальный браузерный контейнер #top layer (больше никакая z-index-выскочка случайно не «всплывёт» над модалкой)

Платформа
- как бы платформа не развивалась, всё равно будут места, которые отстают в развитии больше других; такие вещи бесят и вынуждают, порой, добавлять костыли, и хуже всего, когда проблема кроется в браузере, и что ещё хуже — в мобильном: да, вы правильно поняли, я про iOS Safari, где встречаются баги, которые фиксились только спустя годы после их «релиза» или не фиксились совсем (наверняка вы сталкивались с проблемой скролла <body> с overflow: hidden)

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

Фронтвестник 27.09.2024

Новости
- опубликован первый черновик CSS Values and Units Module Level 5 Working Draft, пожалуй, самое долгожданное нововведение — это возможность использовать функцию attr() не только в свойстве content, а с любым другим свойством: <span data-length="4"/> span { width: attr(length em, 0px)}, чтобы не инлайнить в style
- вышла версия Express.js 5.0: удалена часть методов; изменён паттерн-матчинг роутов: было /user*, стало /user(.*); при ошибке в асинхронных функциях теперь не нужно вручную вызывать next(err); минимальная версия Node.js 18
- выпущен Deno 2.0 Release Candidate: лучше поддержаны cjs-модули; ещё более тесно сынтегрировались с npm; добавили тестирование примеров в коментах JSDoc (тайпчек и выполнение); поддержали новый TS 5.6
- а вот в Node.js наоборот двигаются в сторону прекращения поддержки cjs-модулей, флаг --experimental-require-module перестаёт быть экспериментальным

Проекты
- qrcode — либа для генерации QR-кода в браузере (отрисовывается в canvas) или Node.js в рантайме
- react-diagrams — генерация диаграмм, много гибкости и настроек

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

JS
- что по дата-фетчингу в React в 2024: фетч в серверном компонента, проброс промиса в клиентский компонент и резолв данных с помощью use — в теории красиво, но пока всё ещё экспериментальная фича; React Query для SPA и клиентских компонентов; trpc для создания типобезопасной API-прослойки, но требует Node.js и TS на бэкенде
- в React в зависимости useEffect можно не включать сеттер useState, диспатчер useReducer и useActionState, ссылку useRef и useEffectEvent, так как они и так стабильны, то есть ссылаются каждый рендер на один и тот же объект; если говорить про сторонние хуки типа useAtom из Jotai или useMutation из tanstack-query, то про их «стабильность» достоверно неизвестно
- рецепт собирания велосипеда по отложенной загрузке изображений: выносим изображение в CSS-фон, по умолчанию убираем все фоны спец классом deffered, при попадании изображения во вьюпорт (хэндлим через IntersectionObserver) убираем класс deffered и задаём актуальный фон
- AbortController API позволяет прерывать fetch-запросы (также по таймауту), убирать все event-listener-ы разом, а также несколько контроллеров можно сгруппировать через AbortSignal.any (как Promise.race()); такой вполне себе дизайн-паттерн: передаём контроллер извне внутрь модуля и прерываем внутренние запросы или отменяем события
- интересная идея, как можно использовать Web Audio API для создания фингерпринта текущего устройства: с помощью OfflineAudioContext создаётся осциллятор, который «рендерит» уникальную для текущего устройства звуковую волну, затем она преобразуется в строку и из строки генерится хэш
- пример реализации шины событий на React/TS: иногда по тем или иным причинам, например, чтобы избежать проп-дриллинга или чтобы связать (не увеличивая coupling) совсем разнесённые части одной системы, выгодно создать собственный канал межмодульного общения посредством событий — эта реализация шины в React выглядит хорошо и минималистично

CSS
- свойство content-visibility — наколеночное средство виртуализации большого количества DOM-элементов (>40k), которое может ограничить размеры области для рендера, внутри которой происходит обычная отрисовка, а на всё вне этой области браузер не тратит драгоценные ресурсы
- появилось предложение добавлять :root { interpolate-size: allow-keywords; } в базовые стили проекта, чтобы была возможность анимировать от числа до ключевого слова (например, auto) — жаль пока работает только в последнем Chrome

HTML
- вообще-то это пост с несмешными IT-шутками, но напомнил мне о существовании <input type="hidden">, который раньше как-то часто использовался при клиент-серверном взаимодействии, а в последнее время стал как-то позабыт

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

Фронтвестник 20.09.2024

Новости
- в Font Awesome, к которому недавно присоединился Zach Leatherman с 11ty, начинает работать Lea Verou в качестве Product Lead, видимо будут продвигать Pro-иконки через движок статических сайтов + общую поддержку веб-стандартов и платформы
- выпущен Safari 18.0: в браузер добавлен блокировщик попапов (привет, дизайнеры, любящие модалки 👋); в связке с новой macOS появилась интеграция с iPhone, чтобы проще дебажить iOS на десктопе; поддержаны View Transitions и Style Queries @container style(--background: black), а также анимация свойства display; окончательно поддержан backdrop-filter и свитч-режим чекбокса <input type=checkbox switch>; в JS появился метод URL.parse(), возвращающий null вместо исключения в случае ошибки
- зарелижен Chrome 129: поддержано CSS-свойсво interpolate-size и функция calc-size(), позволяющие анимировать значение до auto (выглядят костыльненько); добавлена поддержка Intl.DurationFormat для форматирования длительности в нужной локали; появились обещанные ранее Snap Events для колбеков snap-скроллов и scheduler.yield() для разгрузки потока от длинных непрерывных тасок
- вышла Astro 5.0 Beta, в которой стабилизирована фича Content Layer с запросом контента из внешнего ресурса (топчик!), а также фича astro:env для типобезопасной работы с env-ами на клиенте и сервере (удобно)
- вышла date-fns 4.0: появилась широкая поддержка для работы с таймзонами, также автор морально готовится к грядущей эре господства Temporal API
- выпущена Fastify v5: поддерживает Node20+ (из-за лучшей поддержки node:test), загрузки, спонсоры и контрибьюторы растут

Проекты
- safe-await — либа, добавляющая возможность «распаковки» промисов const [error, data] = await safeAwait(promiseOne())
- modern-font-stacks — наборы похожих системных шрифтов на разных системах, если не нужен pixel-perfect (также есть отдельный набор шрифтов эмодзи)
- ts-blank-space — «а что так можно было?» из мира компиляторов TS->JS: все указания типов заменяются буквально символами пробела, сохраняя при этом структуру оригинального кода (поэтому не нужны сорсмапы)

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

JS
- чтобы побороть развесистые условия или вложенные тернарники (особенно может быть актуально в JSX), есть pattern-matching-подход (пропоузал)
- когда речь заходит про типобезопасность, не очень понятно сходу, где остановиться: на TS можно нагрузить задачу проверять корректность роутов, или, например, забахать типизацию стилей. Всё это как будто бы хорошо, то есть ради всего хорошего и против всего плохого, но при этом порождает сложности с перфомансом и создаёт переусложнённые абстракции
- в React Router есть специальное API для параллелизации запросов самого компонента и нужных данных для него <Route path="/users/:userId" loader={loader} lazy={() => import('../components/UserProfile')} />

CSS
- если ли что-то сильнее !important? Да, это вечный транзишн, который всегда показывает окончательные стили: input { transition: background-color calc(infinity * 1s) step-end; background-color: transparent; }
- разработчики Chrome на правах «законодателя мод» выкатили экспериментальную стилизацию <select> с помощью ::picker(select) {}, option::before, option:hover, option:checked {} (глядишь через пару лет наконец заборят финального босса CSS)
- если применить gap к контейнеру с <label> и <input> внутри, то в промежутке возможно появление «мёртвой зоны», в которой клик по лейлбу не выберет инпут
- интересное наблюдение, что анимация кастомных свойств выполняется на CPU даже если в итоге меняется значение transform, которое по идее должно вытаскиваться браузером в композитный слой и просчитываться GPU (лечится немного will-change, но не везде)
- простой селектор предыдущего элемента :has(+ &)

HTML
- чеклист по созданию идеальных форм: естественно, это тег <form>; инпуты с верными inputmode и autocomplete, которые часто забываются; базовая стилизация через accent-color; а также есть проверка navigator.onLine перед попыткой отправки

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

Фронтвестник 13.09.2024

Новости
- ESLint v8.x перестанет поддерживаться мейнтейнерами 5.10.2024, вот и сказке конец, пора или болезненно переезжать, или выбирать альтернативу (кстати, Biome исполнился уже 1 годик и ещё он стал поддерживать .editorconfig), или оставаться на коммерческой поддержке legacy-версии специального партнёра HeroDevs; ещё из интересненького про ESLint — в версии v9.10.0 в пакет включены также типы @types/eslint, которые раньше шли отдельно
- веб-версия VSCode for the Web уже настолько хорошо работает, что даже в CodeSandbox окончательно задепрекейтили свой собственный редактор в пользу встроенного VSCode ftW (а помните, у Edge тоже когда-то был собственный рендеринг движок?)
- кстати, VSCode переходят на ESM с AMD (помните такие прото-модули?), может ещё быстрее заработает 😁
- к Font Awesome, недавно «поглотившей» библиотеку компонентов Shoelace, теперь присоедняется и 11ty (движок статических сайтов); норм они на иконках-то зарабатывают


Проекты
- satori — инструмент от vercel для конвертирования HTML-CSS в SVG (может быть для генерации OG-картинок для embed-ов)
- svg-use — если в JS-приложении инлайнить SVG в DOM как есть, то распухает как сам DOM, так и итоговый JS-бандл; заместо этого авторы либы предлагают использовать тег <use>, который ссылается на внешний ресурс с конкретным символом без инлайнинга с возможностью задать доп стили, например, для покраски
- react-call — API для создания асинхронных оконных диалогов (конфирмов) потипу window.confirm, но прикручиваемое к любому React-компоненту

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

JS
- извечная история фронтендеров, которые куда-то постоянно откуда-то мигрируют, в этом случае интересно изучить итоговый vite.config.js (подсмотрел плагин viteCompression, к примеру)
- Zod обычно воспринимается как валидатор приходящих с бэка данных, но ещё может использоваться для «типизации» по схеме пользовательского ввода в форму, в том числе через API FormData
- children в React никак не сделать «типобезопасными», выход — использовать пропы вместо children, там где нужна типобезопасность
- многие сайты и приложения в вебе до сих пор транспилируются в ES5, хотя чаще всего по недосмотру, так как одновременно в бандле оказываются и нетранспилированные ES6+ куски: рекомендуется не фиксировать версии в browserlist, сторонние либы нужно тоже прогонять через процесс билда
- что происходит когда вы нажимаете copy в Figma: в буфере обмена контент оказывается в виде HTML, в data-атрибут <span> внутри записывается base64-строка, в которую закодирован мини-файл в формате .fig; также есть много другой инфы про копирование в браузере, например, что в событии copy есть поле e.isTrusted, которое в true выставляется только для событий вызванных действиями пользователя, а не синтетических через dispatchEvent


CSS
- если нужно растянуть грид на определённую высоту, но при этом нет возможности задавать высоту видимым элементам грида, то в грид можно добавить пустой элемент, на который могут накладывать другие элементы, а он будет выступать только «распоркой» (повеяло табличной вёрсткой под старые IE)
- этот рассказ о :has() доносит главное предназначение этого селектора: он позволяет декларативно объединять элементы не только в родительско-дочернем направлении, но и в обратном дочерне-родительском, да и вообще в любом (что раньше достигалось только императивным скриптом); самый типичный кейс — убрать у html скроллбар в момент показа модалки html:has([data-disable-document-scroll="true"]) { overflow: hidden;}
- ещё немного юзкейсов :has(): стилизация рядов в таблице или элементов формы в зависимости от содержимого, изменение стилей фокуса по наличию внутри элемента определённого контента
- помимо примера «сверкающей кнопки», которая уже была в прошлом выпуске, в этом демо к кнопке применяется одновременно две одинаковых анимации, одна из которых работает по умолчанию (крутит угол градиента), а вторая (в два раза замедленная) поставлена на паузу, и по ховеру включается и оверрайдит первую анимацию, а при убирании ховера продолжается в ускоренном режиме

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

Фронтвестник 06.09.2024

Новости
- в Safari Technology Preview 202 поддержано CSS-свойство scrollbar-width, добавлена возможность анимации для нечасто встречающихся свойств, доработан API PointerEvent, пофикшено применение clip-path к SVG-элементам
- вышел Chrome 128: добавлена поддержка Promise.try (тест функции возвращает ли она промис без её вызова), жаль пока Chromium-only, но полифиллится; CSS-свойство zoom теперь стандартизированное и кроссбраузерное (кстати, и в FF 126 тоже)
- вышел Firefox 130: поддержана технология WebDriver BiDi (Puppeteer теперь работает с Firefox «нативно»), а также множественные <details> с одинаковыми name (HTML-аккордеоны), больше ничего интересного
- в будущих версиях Chrome будет раскатана новая экспериментальная версия панели Performance в дев-тулзах: в ней по умолчанию будет показываться информация о Web Vitals (сейчас инфа доступна через отдельный браузерный плагин), а также станет можно записывать процесс с заданием тротлинга прямо из панели
- в React-команде начали разбираться с ситуацией блокировки отрисовки фоллбека при использовании <Suspence>: теперь сначала будет показываться фоллбек, а потом уже запускаться рендер
- формат изображений AVIF теперь индексируется в Google Search
- анонсирован Vue 3.5: давно не заглядывал внутрь, заглянул, а там внутри React 🙂: useId() для генерации уникальных наборов символов, useTemplateRef для создания динамических рефов, onWatcherCleanup для очистки «эффекта» (аналог возвращаемого колбека в useEffect), но есть и того, что в React нет — более тесная интеграция с веб-компонентами

Проекты
- style-observer — аналог API MutationObserver для CSS, позволяющий отследить изменение значения определённого свойства: под капотом для всех отслеживаемых свойств создаётся подписка на событие transitionstart и если значение свойства меняется, то триггерится микро-транзишн, по которому срабатывает колбек
- reasonable colors — простая, доступная, контрастная палитра в CSS/SCSS

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

JS
- e2e-тестирование хорошо тем, что тестирует реальный интерфейс пользователя, но тесты выполняются медленно, не покрывают всех состояний и сценариев и это чёрный ящик без доступа внутрь; в Storybook предлагают альтернативный подход — компонентное тестирование: берутся стори-компоненты, мокаются данные и проверяется соответствие всех состояний компонента «образцовым» в сторибуке (выглядит прикольно, но лочит на API @storybook)
- обычно при старте нового проекта файл tsconfig.json копируется из предыдущего, а если вам хочется наконец настроить его осознанно, пригодится шпаргалка по tsconfig.json от Matt Pocock: варианты опций с транспиляцией и без, билда для библиотеки (в том числе в монорепе), если проект живёт в DOM или нет

CSS
- начиная с Chrome 123, Firefox 125, Safari 17.4 свойство align-content работает для обычных flow-элементов с display: block
- с помощью неказистого на первый взгляд свойства background-clip можно, например, сделать так, чтобы одно фоновое изображение «выглядывало» из-под другого, а если это «нижнее» изображение — это анимированный конический градиент (с динамическим параметром угла), то выйдет спецэффект «сверкающей» кнопки
- не анимируйте свойство mask-position, вызывает репейнты
- синтаксис :nth-child(2 of .foo), выбирающий N-й элемент с определённым классом, уже с 2023 поддерживается во всех браузерах
- разбор display: contents и его юзкейсы: «стилевое устранение» нежелательной обёртки в сгененированной разметке .content p:has(img) {display: contents} или «реструктуризация» разметки при адаптивной перестройке


Платформа
- однажды один разработчик сделал сайт One Million Checkboxes, где любой желающий мог нажимать на чекбоксы, результат сохранялся в БД и был виден другим людям; люди начали рисовать на этом холсте 1000Х1000 «пикселей» картинки и даже «видео», а также кодировать из комбинаций выделенных (1) и пустых (0) чекбоксов побитово символы ASCII и составлять из этих символов URL на свой фанатский дискорд-сервер

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

Фронтвестник 30.08.2024

Новости
- выпущен Deno 1.46: удивительный пример живучего проекта (6 лет!), который чтобы выжить всё больше адаптируется к Node и её экосистеме (playwright, pglite, mysql2…), но при этом переосмысляет отдельные вещи типа file watcher, лок-файла, менеджа зависимостей, делая их проще и удобнее, и в добавок ещё и привносит свою библиотеку «часто используемых велосипедов», чтобы не тянуть это отдельными зависимостями
- если ваш проект с webpack не новый и Vite завезти туда сходу не получится, то возможно это повод попробовать бандлер Rspack, тем более, что вышла его версия 1.0 (с версии 0.1 прошло 18 месяцев), то есть он теперь хорошо совместим с webpack v5 API, но при этом в 10 раз шустрее, а в добавок имеет отдельные тулы, например, билд-тула Rsbuild — аналог CRA или Vue CLI для создания «просто работающего» приложения без доп настроек и танцев с бубном или Rspress — генератор статических сайтов
- в Chrome 129 появятся события scrollSnapChange и scrollSnapChanging, чтобы добавлять обработчики snap-скролл-событий (нативное «прилипание» блоков при скролле/свайпе): будет легче делать карусели и обходиться без Intersection Observer или вычислений
- анонсирован TypeScript 5.6 RC: появится опция --noCheck, которая позволяет не запускать тайпчекинг, а совместно с опцией --isolatedDeclarations --noCheck позволяет быстро генерить .d.ts-файлы без тайпчекинга

Проекты
- freepublicapis — курируемый список свободно доступных публичных API с тестовыми данными (есть фильтрация по скорости и надёжности работы)
- dearconsole — набор копипейст-скриптов для браузерной консоли, есть интересные находки, например, document.fonts выдаст набор шрифтов сайта
- clipboard-inspector — анализ содержимого буфера обмена: туда копируется не только сам текст, но и окружающие HTML и CSS

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

JS
- грядущий, но уже доступный через полифилл стандарт Temporal.ZonedDateTime, расширяет дату в формате ISO явным указанием таймзоны и региональности календаря, что снимает боль при работе с датами в разных часовых поясах, а заодно приносит приятные плюшки типа hoursInDay — размера суток с учётом «летнего» времени или сравнения двух дат в разных часовых поясах, чтобы понять какая более ранняя
- в React Router есть встроенная функция generatePath для того, чтобы типобезопасно сгенерировать строку роута по схеме из данных, то есть перед непосредственно навигацией нужно выполнить построение роута navigate(generatePath(Routes.USER_DETAILS, { userId: "1" }))
- здесь просто пошаговая инструкция, как не сдаться в процессе публикации нового npm-пакета, интересные части: @arethetypeswrong/cli — либа для проверки корректности экспортов перед публикацией пакета; tsup — либа для компиляции TS-кода сразу в оба формата CJS и ESM; опция "noEmit": true для TS, чтобы использовать tsc только для тайпчекинга кода; либа @changesets/cli для публикации пакета, в том числе для локальной публикации с целью проверки

CSS
- наверняка вам когда-нибудь приходила в голову мысль, что с помощью box-shadow можно «сгенерировать» попиксельно целую картинку (теней при это потребуется много: один «пиксель» — одна тень); так вот эту идею можно развить дальше и сделать из теней «видео»: генерируем для каждого кадра «видео» кейфрейм анимации и затем проигрываем анимацию, например, по скроллу!
- среди всего навороченного CSS 70lvl (который мало где работает) из этого демо можно выцепить годные идеи, которые можно использовать уже сейчас, например, transition: --e .1s ease-out для кастомного свойства, объявленного с @property, или же использование кастомного свойства внутри CSS-счётчика counter-reset: num var(--val)
- примеры селекторов c :has(), выбирающие контейнер в зависимости от количества потомков, например, .container:has(> :last-child:nth-child(even)) выберет контейнер с чётным количеством элементов

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

Фронтвестник 23.08.2024

Новости
- в Node.js решили не включать corepack по умолчанию, а также выделить его в отдельный проект и выпилить его из базовой поставки Node; с одной стороны вроде как шаг назад, с другой — corepack даёт возможность установки пакетных менеджеров не из npm, что создаёт риски безопасности, и на мой взгляд явно воспринимается как инородный инструмент внутри Node, так что отдельным проектом ему быть не повредит
- в альтернативный RSC-фреймворк Waku завезли Server Actions, и это безусловно хорошо в качестве альтернативы и конкуренции
- в Astro 4.14 появилась API для загрузки контентной структуры файлов извне проекта, есть теперь не обязательно держать движок контентного сайта и сам контент в одном проекте
- в Node v22.7.0 (current) появилась экспериментальная поддержка TS-синтаксиса (Enum и namespace)
- в Node v20.17.0 (lts) бэкпортирован require ESM-модулей, CommonJs-подход окончательно уходит
- вышел Cheerio 1.0 (7 лет разрабатывали до 1.0!) — либа для парсинга и манипуляций с HTML и XML, позволяет, к примеру, методом fromURL спарсить HTML с урла, может быть полезно для скрейпинга

Проекты
- stepperize — React-либа для создания пошаговых интерфейсов (например, визардов), типизированная, мало весит, без дефолтных стилей
- logtape — логгер для JS/TS с подсветкой типа лога, встроенными фильтрами и выводами в разные места назначения (консоль, поток, файл…)
- little-date — форматтер диапазонов дат на основе date-fns
- defensivecss — сборник «пуленепробиваемых» техник в вёрстке от Ahmad Shadeed

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

JS
- в двух словах для чего нужны TanstackQuery — чтобы обернуть асинхронный запрос в синхронный хук и обработать кеширование, и Zod — для объявления типа данных один раз в схеме и инфера типов из схемы, а также для валидации приходящих данных (тк TS не гарантирует типобезопасности входящих данных, Promise<FetchedData> усыпляет бдительность)
- если нужно сгенерить pdf из сайта, то для этого есть пара специализированных либ, либо Puppetier, в котором как и обычном браузере, можно программно сохранить страницу как pdf
- в последнее время развелось так много state-менеджеров, что их уже начинают использовать для продвижения других либ: вот, к примеру, Legend State — реактивный state-менеджер, стейт заворачивается в observable, а компонент в observer, у стейта есть методы get и set, а если понравилось, то можно купить оптимизированные для этого стейт-менеджера компоненты, хуки и хелперы за 200$ (на торрентах отсутствует)
- в истории развития регекспов есть интересные моменты, например, появление lookbehind-выражения ?<=... в es2018, matchAll в es2020 и flag v в es2024, но тем не менее регекспы нечитаемые (навечно) и поэтому есть пространство для появления либ, «очеловечивающих» регекспы, например, regex
- основной юзкейс генераторов в JS — пошаговое исполнение чего-либо, например, пошаговое исполнение цикла алгоритма с целью демонстрации его процесса

CSS
- если вы всё ещё используете sass, то в Vite и Webpack можно переключить компилятор с sass на sass-embedded для ускорения работы
- проверка поддержки @starting-style в CSS: создаётся числовое кастомное свойство и внутри @starting-style задаётся значение 1, дальше используется в качестве «реле» в транзишнах
- свойство contain позволяет изолировать элемент, то есть элемент как бы рендерится внутри страницы, но не влияет на общий рендер

HTML
- если вдруг вам нужно отрендерить огромные таблицы, используя colspan и rowspan, то вероятно можно уткнуться в максимальное значение для colspan — это 1000, а для rowspan — 65534; если так подумать, то наиболее распространены высокие и неширокие таблицы, что вероятно пошло от бумажного формата ленты и перекочевало в браузеры, это отражено в магических значениях

Платформа
- а что если подсветку синтаксиса кода в браузере можно сделать без JS и даже CSS? Просто встроить цветные глифы в сам моноширинный шрифт! Правда размер шрифта должен подрасти (из-за дублей одинаковых символов во всех цветах), но зато для работы достаточно загрузить и подключить один шрифт

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

Фронтвестник 16.08.2024

Новости
- в Webkit (Safari) будет поддержано свойство scrollbar-width: в среде разработчиков принято считать, что монополизация индустрии веба Google с помощью Chrome приведёт к стагнации и неминуемой деградации, но есть непопулярное мнение, что централизация движухи в одной ведущей компании сразу же заставляет остальных игроков оперативнее подтягиваться за лидером; так вышло с поддержкой scrollbar-width: в FF это свойство поддерживалось сто лет в обед, но стоило его внедрить в Chrome, как зашевелились в Safari
- но у монополии есть и обратная сторона — к компании сразу же начинают пристальнее присматриваться регуляторы; вот и Google проигрывает дело, в котором компания обвиняется в приплачивании, чтобы сделать гуглопоиск вариантом по умолчанию; помимо штрафа речь может идти об отделении поискового бизнеса от Android и Chrome
- вышел Firefox 129: https-протокол теперь применяется к сайтам по умолчанию, добавлена поддержка @starting-style (но пока без анимации из display: none) и transition-behavior, добавлено превью по наведению на таб и подсветка неправильно использующихся CSS-свойств в дев-тулзах
- OpenAI выкатили Structured Outputs API: в предыдущих сериях в компании научили LLM выдавать данные в виде JSON, но проблема в том, что не было гарантии, что в 100% случаев будет соблюдена схема данных и формат; с новым API можно приложить JSON schema и данные будут валидироваться по ней, как если бы это делалось, например, с помощью Zod
- в Sentry придумали и запустили новый вид лицензии открытого кода — Fair Source Software, идея такая: вы опенсорсов продаёте? нет только показываю
- появилось предложение ECMAScript Safe Assignment Operator Proposal для более краткого написания возможного фейла промиса или throw ошибки: const [error, response] ?= await fetch("https://url")
- CSS Tricks подтвердили, что они ожили! Не просто так начали появляться статьи в последнее время, на ресурсе будут теперь публиковаться Geoff Graham, Juan Diego Rodriguez (ранее часто писал для SmashingMag-а) и Ryan Trimble; так глядишь и Крис вернётся
- история с нативной поддержкой TS в Node получила продолжение: теперь поддерживаются TS-only штуки (Enum and namespace)
- в Chrome начали завозить ai: в dev-версии браузера появился объект window.ai с методами canCreateTextSession, createTextSession, textModelInfo

Проекты
- pdom — ещё один заход в «параллелизацию потоков» DOM, трюк такой: создаём cross origin фрейм для «параллельного» компонента, рендерим туда нужный компонент, встраиваем в хост-приложение и общаемся с компонентом через postMessage
- floating-ui — Popper умер, да здравствует Floating UI! Либа-наследник Popper для показа всплывающихся тултипов с плюшками в виде анимаций, якорения, обработки скролла
- react-figma — рендерер React-компонентов в Figma (не наоборот!)

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

JS
- в веб-компонентах в <slot> можно прокидывать внутрь shadow DOM обычный DOM-элемент, а с помощью псевдоэлемента ::slotted(SELECTOR) можно изнутри shadow DOM стилизовать обычный DOM-элемент (при этом стили снаружи веб-компонента будут приоритетнее внутренних): с печалью считаю, что в рабочем коде это всё будет выглядеть как минимум экзотикой, а как максимум оверинжинирингом
- если вы используете zustand, но вам не хватает событийной модели, можно присмотреться к xstate/store, у которого похожий API, но ещё есть вдобавок и триггер событий типа store.send({ type: 'actionName', someEventParam: 123 }); бонусом идёт конверт сторов в полноценную state machine (конечный автомат) xstate
- а что если БД будет поставляться прямо в браузер в сжатом виде, с UI и со встроенным ai-помощником? Получите postgres.new!

CSS
- раньше, чтобы сделать текущий цвет более прозрачным, тёмным или светлым, использовались цветовые функции CSS-препроцессоров; ожидаемо, эту функциональность воссоздали со стороны платформы, только не в виде функций, а с помощью нового цветового формата — relative color syntax (с недавних пор доступного во всех браузерах)

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

Фронтвестник 09.08.2024

Новости
- вышел новый бэкенд-фреймворк для TS Encore, который вы вряд ли будете использовать, но интересна ключевая фича, которая даёт существенный прирост в скорости работы (быстрее express в 9 раз): узкое горлышко Nodejs — однопоточный eventloop, который быстрее не сделать, поэтому создатели Encore придумали сделать ещё один эвент-луп (Rust, многопоточный), этим эвентлупом обрабатывать входящие запросы, декодировать и делать прочие дорогие операции и затем уже передавать в эвентлуп Node; заодно не нужно долго воссоздавать API для совместимости Nodejs, как это делают в Bun, так как дело всё равно в итоге происходит в Node
- выпущен Tauri 2.0 RC, который вы тоже вряд ли используете, но у него тоже интересный подход: вместо того, чтобы в десктопное приложение встраивать Chromium, он заменён на более лёгкий web view на Rust
- в Puppeteer завезли Firefox: большинство основных API уже поддерживается, но дольше ещё будут довозить более специфичные API
- 6 августа исполнилось 33 года со дня выпуска первого сайта в интернете (это что, они 33 года подряд не забывают продлить домен?!)

Проекты
- formatify — аудио-видео-картиночный конвертер в любой формат
- css-springs — копипейст генератор «пружинных» CSS-изингов
- tschema — микроутилита для создания JSON-схем и вывода TS-типов из них (идеально создавать общий контракт для бэка/фронта и затем генерить типы, всместо того, что писать их руками)
- color — либа для процессинга современных форматов цветов (oklab, xyz, p3, rec2020…)

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

JS
- напоминание, почему default-экспортами лучше не злоупотреблять: сложно искать в проекте, не выводится название из модуля в IDE, излишняя свобода при выборе имён разработчиками; заодно есть рецепт, как переэкспортить неименованный модуль как именованный export { default as Row } from './Row.jsx'
- от XSS-атаки можно защититься с помощью CSP (Content Sucurity Policy) — директивы браузеру не запускать инлайновые срипты и стили, а разрешать запуск только с проверенного источника; самый простой способ её включить — метатег <meta http-equiv="Content-Security-Policy" content="script-src 'self' https://safe-external-site.com">
- в Svelte 5 представили новый концепт выделения небольших блоков «HTML-контента» в так называемый snippet; это что-то похожее на «шаблоны», которые можно заинжектить в компонент (children в мире React такой тоже своеобразный snippet); фича выглядит, если честно, странновато, скорее как замена задепрекейченным slot-ам (хотя по мне slot-ы — норм тема, немного непривычная, но прикольная)
- рефакторинг типичного навороченного React-компонента в идеале начинается с написания тестов (чтоб сигнализировать, если сломалось), удаления неиспользуемого кода, разделения на более мелкие компоненты и вынос в них состояния, упрощение условных конструкций, вынос утилитарных функций, дата-фетчинга и инлайновых стилей вне компонента, улучшение отмены запросов, отправки и валидации формы

CSS
- возможно, лучший способ использования стилизуемых SVG — это «спрайты», то есть библиотека <symbol>, подключаемая с <use>; но есть и ограничение — SVG должно лежать на том же домене, где оно используется
- признавайтесь, вы ведь тоже не используете container queries в повседневной работе? А если вдруг всё таки решитесь использовать — у них есть ограничения: для корректного применения стилей нужен «обёрточный» элемент только для применения «контейнерных» стилей, также контейнерные единицы измерения не всегда уместно применять к тексту (надо ограничивать слишком мелкий/крупный размер шрифта)

Платформа
- cURL — утилита для проверки, что какой-то URL что-то отдаёт, или нет? На самом деле это целая библиотека, которая может отправлять несколько параллельных и последовательных запросов, а также POST-запросы, поддерживает передачу кастомных заголовков (например, для прокси) и логина/пароля в конфигах .curlrc и .netrc, умеет парсить URL в JSON, и ещё поддерживает не только HTTP/HTTPS-протоколы, но и, например, почтовые IMAP и SMTP, то есть с помощью cURL можно отправить письмо из консоли

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

Фронтвестник 02.08.2024

Новости
- в Node.js начали завозить «нативную поддержку» TS, пока на уровне вырезания аннотаций типов из кода, то есть enum-ы и другие штуки, которые просто вырезать не получится, пока что не работают (под капотом работает либа @swc/wasm-typescript)
- обновился Babel до версии 7.25.0: как-то Babel всегда воспринимался как инструмент для использование ультрасовременных фич в браузерах; в целом, этот апдейт так же об этом, но что интересно, добавлен плагин для фикса браузерного бага в Safari 16, и тут я задумался, а сколько там возможно интересного скрыто под капотом популярных инструментов типа Vite, которое незаметно что-то фиксит, и всё просто продолжает работать чуть лучше
- зарелизился Safari 17.6: поддержали ключевое слово safe во флексбоксах justify-content: safe center, завезли багфиксы события loadeddata для <audio> и <video> на загрузке страницы
- в Google отказались от идеи блокирования 3d-party cookies, но зато пообещали дать браузерные настройки, где можно будет явно настроить приватность (делать это конечно же никто не будет)

Проекты
- turndown — преобразователь HTML в md для браузера и Node.js
- vaul — нестилизованный компонент выдвигающейся «шторки» для React
- react-movable — ещё одна drag-n-drop либа для React, апишка с первого взгляда простая

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

JS
- в до-реактовые времена как-то повсеместно была распространена инфа, что innerHTML медленный, и что DOM лучше менять пачкой, а не на каждый чих использовать appendChild; потом как-то это всё подменилось знаниями о ререндерах в SPA, тем не менее DOM никуда не делся и все ранее работавшие приёмы, а так же новые, работают! Например, AbortController().abort() может отменить пачкой навешенные event listener-ы, а WeakMap и WeakRef можно использовать для создания ссылок на DOM-элементы, которые при их удалении, подчищаются и из памяти
- в интеграционных тестах на Playwright часто используется await page.goto(), которая по умолчанию открывает страницу и ждёт полной загрузки и отрисовки, что обычно избыточно для тестирования того, что, например, нажатие по кнопке вызывает появление модалки; поэтому лучше пользовать page.goto("/", {waitUntil: "commit"})
- тип unknown полезен для типизации неизвестного user-input-а, когда он может быть, а может не быть, поэтому при попытке обращения, к примеру, к методам строки, тип ругнётся и сообщит, что этого метода может и не быть
- в Vercel провели прикладное исследование, как сейчас JS влияет SEO в Google: SPA индексируются также, как и статические сайты; JS выполняется, в том числе на «сервере» Next.js, импорты CSS тоже работают; нагруженные JS сайты индексируются также быстро, как ненагруженные, но если рендер требует большего времени и при этом страниц много, то бот будет дольше их обходить
- barrel-файлы (только реэкспортирующие внутренности модуля) создают дополнительную вычислительную нагрузку на проект, и если таких файлов много в большом проекте, то с этим что-то нужно дополнительно делать (убирать такие файлы или преобразовывать пути импортов в обход таких файлов)
- затягивая в замыкание «большой» объект, следует помнить, что если к нему будет обращаться функция внутри замыкания, то это может привести к утечке памяти (если создаёте замыкание, стоит проверить, что в него попадёт)

CSS
- директива @property, недавно завезённая во все браузеры, позволяет делать типизированные наборы CSS-переменных (например, в рамках дизайн системы), и типы эти будут, если что, стрелять в рантайме в браузере (при желании наверное можно и stylelint-ом отлавливать неправильно заданные типы во время разработки); кроме того, есть интересные варианты, которые может быть были позаимствованы из TS: тип syntax: "blue | cyan | dodgerblue" для задания в переменную только этих цветов или же тип syntax: <image># для задания множественных значений через запятую (также есть тип '*' — аналог any, тип по умолчанию)
- если вдруг PopopevAPI (с недавнего времени доступный во всех современных браузерах) прошёл мимо вас, то вот свежий гайд в тему (годится для создания простых модалок)

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

Фронтвестник 26.07.2024

Новости
- в Google Docs завезли полноценную поддержку markdown (импорт/экспорт/копипейст)
- вышел Chrome 127: поддержано свойство font-size-adjust (костылим везде, теперь поддерживают все браузеры!), alt-текст в content, Document picture-in-picture теперь общается с основным окном, на контейнеры со скроллом теперь можно сфокусироваться с клавиатуры
- в React завозят server-only плюшки: отдельный пакет renderToMarkup предназначен для асинхронного рендера JSX в статику, которая не будет дальше никак обновляться (например, для генерации писем и другой статики); использование state, effect будет сыпать ошибки (впрочем, всё же сделали отдельный пакет для клиент-сайда, пометив сразу «для поддержки легаси-сред»)
- вышли результаты Stackoverflow Developer Survey 2024: веб всё ещё на коне, хотя зарплаты, как и почти везде (за исключением Erlang) уменьшились (при этом фронтендеры — почти самые низкооплачиваемые IT-специалисты), в БД лидирует PostgreSQL, jQuery популярнее Next.js, Markdown File — третий по популярности инструмент для асинхронной коммуникации
- опубликованы результаты опроса State of React 2023: RCS заходит туго, боли вызывает forwardRef, Redux и тот же RCS, популярны Tanstack Query, Zustand, Astro, Radix, shadcn/ui, Next.js; доминирует по прежнему SPA

Проекты
- swapy — создание в приложении виджетного лейаута с драг-н-свапом
- designgui — расширение Chrome для просмотра и управления CSS-переменными с цветами темы (как минимум, чтобы поудобнее искать и копировать цвета)
- svg.wtf — инструмент для изучения и экспериментирования с SVG

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

JS
- Svelte дозрел до того возраста, когда уже поднакопилось достаточно массы, чтобы нужен был двусторонний interop между двумя мажорными версиями (читать как «достаточно наворотили»), в то же время изменения к лучшему в понятности API в новой версии налицо (читать как «исправляют навороченное, но надо поддерживать старый синтаксис»); в целом, впечатления о нём странные: что-то похожее на vue c mobx, при этом с костыльками для работы с TS, типа <script lang="ts" generics="T extends { name: string }">
- когда читаешь про всякие WASM SQLite, Origin Private File System (OPFS) и их использование через SharedWorker и WebWorker, обычно это всё кажется какой-то далёкой от реальности фантастикой, только если ты не работаешь в Notion и тебе надо ускорить навигацию между страницами, сохраняя бд в файловой системе устройства и шаря её на все открытые табы
- отличия «объектов» в TS: Object — это любые объекты типа string, boolean, number, bigint, symbol (у них есть свойства cunstructor, toString…), {} — это пустой объект без полей, а object — не непримитивные типы, то есть {}, [] и () => {} (object также имеет аналог Record<string, any>)
- напоминание: DRY как самоцель может подтолкнуть к созданию ненужных абстракций, которые часто оказываются ещё и негибким, а гибкость — наверное одно из важных качеств абстракций
- хук useId можно использовать для генерации id DOM-элементов в рантайме

CSS
- в гайдах от Ahmad Shadeed обычно интересны практические юзкейсы использование фич; вот и в этом гайде по grid-area приводятся жизненные примеры использования: перестановка блоков местами в лейауте на разных разрешениях, «вылезающие» из прямоугольной сетки блоки, накладывающиеся области грида, has()-комбо .card:has(figcaption) { grid-template-areas: 'update layout'}
- схема, которая с появлением scroll-based-анимаций, стала ещё актуальнее: кастомное свойство — стейт, анимация — способ изменения стейта, счётчик — способ отображения стейта
- напоминание: контейнер с overflow: hidden всё равно можно проскроллить выделением текста или программно, а с overflow: clip возможность скролла будет гарантировано полностью выпилена

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

Фронтвестник 19.07.2024

Новости
- GitLab ищет, кому продаться: конкурировать с GitHub с копайлотом и нейросетям не вариант, пора выводить вложения; факт — пуллреквесты победили мерджреквесты
- вышел Deno 1.45: среди прочего поддержаны npm workspaces (ну и конечно представлен свой кошерный аналог), так что работа с монорепами всячески улучшается с разных мест индустрии
- разработчики jQuery готовятся выпустить вторую бету, в которой переработали тесты: в нынешних реалиях нужны смоук-тесты для проверки, что проект собирается на webpack, rollup с виде cjs + esm, и чистом esm, а также импортируется в node
- Astro и Netlify теперь партнёры, будут получать ежемесячно денежку за то, что мягко приземляют проекты в облако; считаю, это хорошо, Astro — крутой проект
- в хромиум-браузерах заработал copy-paste SVG-элементов

Проекты
- tinybase — (в догонку к прошлому выпуску фронтвестника) local-first хранилище данных с возможностью синхронизации с сервером, минимального размера 5-15кб в зависимости от опций, хранит данные в виде пар ключ-значение или таблицы
- act — запускальщик GitHub Actions локально, чтобы не гонять CI почём зря

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

JS
- как на коленке собрать TanStack Query, а также Suspence c хуком use(): внутри кеши с Map и Set, промисы и использование их полей status, reason и value, а также контекст для распространения
- история о том, как от идеи хранения глобального состояния в React-контексте (чтобы задействовать Concurrent Mode) автор перешёл к идее отдельного стора, который по необходимости контекстом только распространяется, но не «живёт» в нём, и так родился современный Zustand, заботливо выращенное дитя, который, верю, ждёт хорошее будущее (уже скоро Zustand 5)
- для лучшей производительности интерфейса, рекомендуют разбивать большие таски, загружающие тред, на более мелкие, откладывая из выполнение с помощью setTimeout, requestAnimationFrame, а также нового API scheduler.yield; также можно откладывать выполнение служебных задач (аналитика и тд) до срабатывания события страницы visibilitychange
- ['1', '5', '11'].map(parseInt) вернёт [1, NaN, 3], тк вместе parseInt вместе с числом заодно получит вторым параметром индекс элемента, который будет использоваться в качестве системы счисления; вывод: так себе идея прокидывать в map напрямую «служебные» функции, внутри неявность, что плохо

CSS
- из всех способов спрятать что-то на странице самый удобный — атрибут hidden, если не хочется подключать CSS; visibiliy: hidden и display: none скрывают элементы также визуально и от скринридеров; и ещё парочка способов для сокрытия только от скринридеров и для видимости только им
- радиальный градиент внутри маски + карусель с картинками = эффект линзы, элегантный, чисто визуальный трюк с беспощадным кодом
- объявление кастомных свойств через директиву @property (которая недавно, наконец, стала поддерживаться во всех браузерах) мало того, что открывает возможность анимировать переменную, так ещё и даёт лучшую поддержку типизации в браузере (да, в CSS тоже есть типы) + ещё есть, например, немного фриковая возможность получить пиксельную ширину/высоту экрана --w: tan(atan2(var(--_w),1px))
- вендорные префиксы были плохим решением для внедрения экспериментальных фич, а вот с фича-флагами вышло уже хорошо: они доступны повсеместно во всех браузерах, чтобы попробовать экспериментальные фичи

HTML
- инициатива добавить в стандарт атрибуты commandfor и command, чтобы унифицировано связывать интерактивные элементы прямо в HTML: <button commandfor="custom-video" command="play"> запустит <video id="custom-video"> (полный список предложений включает dialog, input, audio/video, select, details…)

Платформа
- кулстори о том, что технологические барьеры — не инновация, а бесячья тупость; о том, что offline-first — лучший подход, так как он имитирует реальность; о том, что веб — открытая среда, в которую несложно внедриться для реверс-инжиниринга (особенно когда клиент-сервер пересылают в открытую токены для генерации TOTP-строки, которая является, к примеру, билетом на концерт)

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

Фронтвестник 12.07.2024

Новости
- вышел pnpm v9.5.0: появились catalogs-алиасы, чтобы один раз в конфиге объявить набор зависимостей, например, catalogs: react16: react: ^16.7.0 react-dom: ^16.7.0, а затем в package.json писать алиас вместо версии напрямую "dependencies": { "react": "catalog:react16", "react-dom": "catalog:react16" }; так можно лайтово организовать монорепу без оверхеда на одном пакетном менеджере
- SQLLite завезут в Nodejs для реализации localStorage/sessionStorage, а заодно откроют возможность его использования просто так; всё таки там, где есть борьба или хотя бы конкуренция, сразу идёт развитие (спасибо Bun и Deno)
- вышел Firefox 128: появился встроенный в браузер переводчик, включен relative color syntax, поддержан альтернативный текст для свойства content, заработала директива @property и registerProperty(), а также появился Resizeable ArrayBuffers
- вслед @property в FF вскоре появится и @starting-style, то есть он будет во всех браузерах
- после недавних больших обновлений eslint начинается перелопачивание архитектуры: появятся отдельные пакеты для линтинга не-JS-файлов (json, md), агностик-ядро и пакеты переедут в новую репу, будет написан новый CLI; в общем, за этим крайне интересно наблюдать, как именно в большом проекте справляются с архитектурными проблемами, миграцией, и справятся ли в итоге
- вышел vitest v2.0.0: браузерный режим работы, брейкинг-изменения, багфиксы

Проекты
- fast-json-stringify — более быстрый аналог JSON.stringify(), если скормить ему схему JSON, который нужно распарсить
- nolyfill — npx nolyfill уменьшит содержимое node_modules за счёт выпиливания ненужных более полифиллов
- es-toolkit — новый более быстрый и компактный аналог lodash (который в свою очередь был более быстрым аналогом underscore)
- react-jsx-parser — React-компонент парсер JSX (если нужно распарсить в JSX динамически формируемую строку HTML или JSX)

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

JS
- написание тестов — тонкая штука, вот и описания идеальных тестов звучат довольно расплывчато, но как ещё описать тонкие материи? Тест — это скорее ассистент, а не математическая формула. Тесты должны быть простыми и сфокусированными на одной вещи. Тестов без причины не должно существовать. Тесты не должны содержать деталей реализации.
- сайт — это то же приложение, но которое не надо отдельно устанавливать/обновлять, а его просто когда нужно открываешь, оно подтягивает данные и работаешь с ним; если развить идею, то сайт может в целом иметь свою БД в браузере (IndexedDB, WASM + SQLite), хранить состояние и, когда есть возможность, синхронизировать состояние с сервером и другими клиентами; так автоматом повысится UX (не нужно на каждый чих ходить на сервер), тем более что современные клиенты позволяют
- фича Isolated declarations в TS 5.5 меняет то, как можно публиковать проекты: раньше в пакет публиковались отдельно d.ts-файлы и скомпилированные js-файлы, так как их генерация была затратной по производительности операцией; теперь же можно публиковать исходный ts-файл, а артефакты d.ts будут генериться на лету во время установки пакета за счёт более производительного движка
- бывают случаи, когда некорректно созданная мемоизация создаёт утечку памяти за счёт удержания замыкания с большим объектом в нём; печаль в том, что то же самое может сделать автомемоизатор React Compiler, но дебажить это станет сложнее

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

HTML
- у <script> или <link> есть атрибут integrity, в который передаётся хэш, и если содержимое файла скрипта или стилей изменится, а хэш нет, то тогда браузер выкинет ошибку и не выполнит файл (сгенерить хэш можно тут)

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

Фронтвестник 05.07.2024

Новости
- математические CSS-функции round(), mod() и rem() — теперь доступны во всех браузерах: это про округление и остаток от деления одной единицы на другую; интересен юзкейс округления с определённым шагом — такой своеобразный аналог «тротлинга» в CSS, когда задаются, например, только целые или кратные 5 значения, а остальные отсеиваются
- вышел Playwright v1.45.0: на борту новый Clock API, который позволяет протестировать временные интервалы (устанавливаем время, пользователь закрыл ноут, перематываем время на 10 часов вперёд, возобновляем время, проверяем, что времязависимый код отработал корректно)
- вышел Rolldown v0.10.5: потихоньку кродёться новый бандлер на замену Rollup в Vite, в этом релизе поддержана сборка TypeScript и разных типов файлов

Проекты
- eslint-plugin-depend — плагин для eslint, указывающий на либы в раздутыми зависимостями и на использование ненужных полифиллов
- ladybird — разработка нового браузера не по карману большим бизнесам, но зато по силам энтузиастам, которые по приколу строят систему современного браузера (рендеринг-движок, JS-движок, WASM-имплементация, HTTP-клиент, эвент-луп и взаимодействие с ОС…)
- HTTP observatory — сканер HTTP-заголовков, которые отдаёт сервер вашего сайта, пишет чего нет, что есть, даёт рекомендации
- letsform — тут рекомендация не самого сервиса, а подхода генерации форм из JSON-схемы, чтоб перенять практики при необходимости сборки своего велосипеда

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

JS
- напоминание, что для базовой конвертации строки в DOM и DOM в строку есть 2 браузерных API: DOMParser и XMLSerializer (для ноды есть отдельные либы типа JSDOM)
- замечали, что при копипасте текста иногда он вставляется вместе со стилями? Дело в методе вставки: на событии paste метод e.clipboardData.getData('text/html') вставит текст вместе с прилагающимися стилями
- 534 и 1 способ перезагрузить страницу из JS: а на самом деле комбинации методов assign, replace и reload у location
- отменяемый fetch легко реализуется с новым Promise.withResolvers() (это правда не совсем отмена, а ранний reject), а также есть вариант с отменой с помощью AbortController
- тема с «неточным» округлением чисел крайне важная в финансовых приложениях, поэтому там можно использовать или микроприбавки Number.EPSILON к числам перед округлением, или спец либы типа currency.js, на которой в итоге и остановился автор, чтобы избежать проблем
- Deno, Bun — это конечно хорошо, но всё таки стоит их воспринимать как надстройками над Nodejs и не использовать проприетарные API, держать в уме, что должно быть можно сфолбечиться к базовому API Nodejs
- как в JS проверить наличие нужной браузерной фичи: CSS-фичи преимущественно с помощью CSS.supports(), HTML-фичи через наличие в DOM-е определённых интерфейсов

CSS
- если принять тот факт, что в tailwind излишне выкрутили идею утилитарных классов, сделав примитивы слишком низкоуровневыми, и попытаться переосмыслить идею, то получится такое разделение: оформительские (.card, .aside), лейаут (.center, .cluster), отступы (.gap-s, .gap-m); классы примитивы более высокоуровневые и из них приятно собирать композиции
- если сделать фон из конического градиента и сдвигать его транзишном, а также применить к нему mix-blend-mode: screen, то текст будет плавно проявляться «из маски»
- короч, это не учебная тревога: в канареечный Chrome завезли height: calc(auto), чтобы транзишном можно было плавно изменять высоту с height: 0 до актуальной без хаков

HTML
- статья, что не стоит использовать aria-hidden="true" на интерактивных элементах, также напоминает, что существует и поддерживается во всех браузерах атрибут inert, который «выключает» интерактивный элемент (на него нельзя нажать, дотабать или найти через средства доступности) — хороший юзкейс для ограничения пределов фокуса при показе модальных окон

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

Фронтвестник 28.06.2024

Новости
- Figma провели конференцию Config 2024, показали: обновлённый UI с поддержкой светлой темы и плавающих панелек; Figma Slides — режим для создания и показа презентаций (плавные переходы между слайдами, заметки докладчика, интерактивные элементы); Code Connect — режим с генерацией компонентов (отношусь скептически); более удобный dev-mode, чтоб просматривать сразу все готовые макеты; допиленные автолейауты и адаптивные прототипы (подстраиваются под размер экрана)
- в Astro 4.11 поддержаны прекрасные Shiki transformers для компонента отображения <Code>

Проекты
- ky — обёртка над браузерным fetch: есть алиасы для отправки всех видов запросов, retry логика, хуки (до запроса, до ошибки, до ретрая, после ответа), отправка данных формы, отменяется по controller.abort()
- pdfslick — либа для просмотра и взаимодействия с pdf (интересно, что под капотом используется Zustand)

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

JS
- у WeakMap есть такая полезная особенность, что если объект более не существует, то значение, привязанное к нему, удаляется из памяти garbage collector-ом; это можно использовать, например, для организации кеша, который автоматически подчищается, когда закешированные объекты не существуют (простая версия того же на mdn)
- если хочется сделать тип, принимающий любую строку, но при этом чтобы в автокомплите выдавались «предустановленные» варианты, то в юнион в конце надо добавить string & {}

type Status = 'open' | 'closed' | string & {}

- если вдруг у вас возникнет желание использовать Web Crypto API для генерации рандомных чисел вместо Math.random(), то это будет гораздо медленее и для простых (не крипто) задач «типа немного лучше»
- сможете сходу сказать, чем Screen Orientation API отличается от Device Orientation API? Screen — это горизонтальная/вертикальная раскладка, Device — это про гироскоп и ориентацию в пространстве; также есть рецепт по блокировке экрана в Fullscreen API, и ещё немного про Vibration API и малодоступный Contact Picker API
- новые методы Set (intersection, union…) доступны во всех браузерах, их можно адоптить, тем более, что уже поддержаны в TS 5.5
- Intersection Observer API норм адоптится в React, правда нужно намазать парочкой useRef, чтоб лишний раз не пересоздавать обсервер
- юзкейсы Proxy: геттеры, подсчёт доступов, немутабельные объекты, кеширование, создание цепочки методов, валидация, вотчер изменений поля

CSS
- ещё один сборничек современных фишек CSS от Michelle Barker, из находок: inset можно задавать не только 0, но и inset: 50% 50% 0 0 (направление значений по часовой стрелке — верх, право, низ, лево); растяжка элементов на весь контейнер { display: grid; * > { grid area: 1 / 1; } }; также есть container-queries, :has (куда же без него), anchor positioning
- если у вас Chrome-only приложение (киоск, например), то там уже завезли anchor positioning, и его можно использовать для создания линий между элементами (аля стрелки в miro) — линии будут привязаны к заданному боку элемента и сохранять свою позицию при перемещении самого элемента
- если задать одиночный кейфрейм 50% { transform: scale(1.5) }, то он будет работать: на 0% будет изначальным, затем изменится до заданного, а затем снова вернётся к изначальному; тут можно посмотреть другие одиночные кейфреймы
- если нужно сверстать текст по кругу, можно использовать тригонометрические функции и transform, которые доступны во всех браузерах (похожее есть в SVG-элементе textPath, расставляющем текст по path)
- как на clip-path: polygon() создать форму и её инвертировать: прикольно, что на polygon() можно создать любую геометрическую форму

HTML
- текстовые инпуты несколько перегруженные в настройках, так что часть из них забывается: помимо type, pattern, inputmode можно ещё задать spellcheck (управляет проверкой правописания), autofocus (устанавливает автофокус), autocapitalize (автоматическая капитализация букв, слов, предложений), autocomplete (автодополнение имени, одноразовых кодов, паролей), autocorrect (нестандарт в Safari исправляет правописание)

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

Фронтвестник 21.06.2024

Новости
- в спецификацию CSS-values-5 будет добавлен синтаксис инлайновых условий для кастомных свойств (логичное продолжение style-container-queries только для всего), можно будет писать так:

background-color: if(style(--variant: success), var(--color-success-60));
border-radius: if(style(--shape: pill) ? 999em : .2em)

- вышла Node 22.3.0: в тест-раннер добавлено снепшотное тестирование
- в React-сообществе бомбануло, что в 19 rc версии асинхронные сиблинги в <Suspence> стали рендериться последовательно, а раньше было параллельно (что использовалось, к примеру, в tanstack-query); команде React пришлось признать, что они недооценивали, сколько людей продолжают делать SPA, а не рендерить на сервере и отложить релиз 19 версии (что забавно, pr спокойно себе был в работе с марта 2023)
- опубликованы результаты опроса State of JS 2023 (преимущественно американцы и европейцы мужчины среднего возраста поделились, что думают): в JS из коробки не хватает статической типизации, боль вызывает ситуация с ESM/CJS-модулями, поддержка TS, работа с датами, браузерная поддержка (особенно Safari); Vite многие пользуют и почти все довольны (то же актуально для Vitest), что не скажешь о webpack — пользуют меньше и больше недовольных; у Next и Vue сравнимое количество использующих и недовольных; недовольных React становится больше; растёт популярность pnpm в том числе как инструмента организации монореп

Проекты
- React Internals Explorer — визуализация происходящего в дереве рендера React, в том числе проиллюстрирован пример с <Suspence>: в SPA в 18 версии React они будут рендериться параллельно, а в rc 19 — последовательно

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

JS
- как использовать встроенный тест-раннер Node, в том числе свежедобавленное снепшотное тестирование: describe, mock, it живут в node:test, как и snapshot; названия утилит классические, API вполне предсказуемый; snapshot сам по себе не рендерит компоненты, а работает в паре с каким-либо рендерером, например, @testing-library/react
- вроде и маркетинговая статья, но как-то честно составленная: Node — самая популярная технология, скачивания растут, баги правятся, плюшки появляются: ems, fetch, watch, AsyncLocalStorage, WebCrypto
- Page Visibility API — сто лет в обед, но как-то не на слуху, используется, например, чтобы на событии visibilitychange, когда страница не просматривается, отправить аналитику или понизить битрейт проигрываемого видео
- проблема, которую решает React Compiler с автомемоизацией состояния в компонентах, уже давно решена из коробки в MobX (видимо поэтому MobX помечен как несовместимый с RC)

CSS
- единица измерения 1cap — это высота заглавной буквы в шрифте, если нужно сделать что-то такой высоты (например, отступ между словами или размеры иконки), то можно пользовать (доступно во всех браузерах с декабря 2023)
- в браузерах в последнее время имплементировано много CSS-фишек, но не все доступны повсеместно: пока нельзя использовать View transitions, Style Queries, @starting-style, зато можно URL.parse(), Safe flexbox alignment, currentcolor в relative color syntax
- редкий юзкейс для em — для задания размера отступа text-underline-offset

HTML
- в Chrome предложили элемент <permission>, который встраивается в страницу и показывает, какие есть доступы к камере и микрофону, а также позволяет включить или выключить их; интересно, 1) как с появлением веб-компонентов и React расширилось понимание элементов страницы, 2) что элемент будет не веб-компонентом, а именно стандартным браузерным элементом, чтобы гарантировано сделать его визуально доступным с ограничениями по стилизации

Платформа
- помню, когда GitHub выкатили GraphQL-песочницу, было интересно её тыкать, казалось, вот она — настоящая гибкость, но в итоге оказалось всё не так радужно: не легко спрятать за авторизацию частичные поля и наоборот легко с клиента отправить схему, которая выгребет мегабайты JSON-а, а также есть другие проблемы; а подходит GQL в случае, если есть контроль над всеми клиентами, их <= 3 и сервер и клиенты написаны на разных языках

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

Фронтвестник 14.06.2024

Новости
- анонсирован Safari 18 beta: добавлена поддержка View Transitions API (ждём FF), а также Style Queries @container style(); currentcolor теперь заработает в relative color syntax oklch(from currentcolor calc(L * 4) C H); заработала анимация для display; у backdrop-filter отпал вендорный префикс; заработал режим justify-content: safe center для флексбоксов (предотвращение обрезания при узком контейнере); поддержано свойство content-visibility; доработаны инпуты (свитч-чекбокс, дата, время); появился URL.parse(); задепрекейчен resize: auto, а также другие API, которые работали только в Safari
- вышел Firefox 127: появилась поддержка rel="dns-prefetch"; для img, video, audio браузер попытается заменить ссылки http на https; доработан внутренний тул скриншотов; включен navigator.clipboard.read()/write()
- вышел Chrome 126: view transitions заработал для cross-document (работает так же: незаметно загружается следующая страница, делается и показывается скриншот и затем подменяется на загруженную страницу) (ребята из Astro тут же выкатили обнову); включён CloseWatcher API, управляющий закрытием dialog и popover; в девтулзах в Network в запрос теперь можно копипастить заголовок запроса целиком, а также обновлён Lighthouse 12.0.0
- в Mozilla пошли на рынок инструментов для «безкодового» создания сайтов и выпустили soloist.ai: готовый сайт захостится на soloist.ai, под капотом будет next.js (хм, где-то это уже было 🤔)
- вышел Prettier 3.3: интересен тем, что ещё лучше форматит TS, JS, React, а также Flow-код, и все улучшения для Flow написали инженеры самого Flow
- анонсирован TypeScript 5.5 RC: новые методы Set (union, intersection…); проверка синтаксиса регекспов; импорт типов в js-файлах в JSDoc; Inferred Type Predicates \(решает проблему с типами .filter(x => x !== null))

Проекты
- JsonDiscovery — расширение для браузеров для интерактивного просмотра JSON (в том числе больших >512MB, на которых JSON.parse положит браузер)
- coolify — опенсорсный селф-хостед аналог netlify/versel
- telefunc — как-то уже писал про концепт «серверных» методов, которые напрямую «вызываются» на клиенте, вот эта либа реализует подход «функции вместо API»
- web-features-explorer — инструмент для проверки доступности веб-фич в браузерах (в том числе показывает разбивку по месяцам)

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

JS
- тема узких горлышек в оптимизации всегда актуальна (да, я смотрю на тебя, React) и тут есть, где разгуляться: в React 18 стоит использовать concurrent-режим рендера ReactDOM.createRoot вместо ReactDOM.render; большие таски можно разделять «перебивками» new Promise((resolve) => setTimeout(resolve, 0)) или await window.scheduler.yield(); хуки react-router useLocation, useRouteMatch, useHistory вызывают ререндеры, лучше пользовать history и location из window, если дело происходит на клиенте
- идея использование тайп-чекинга не только для «базовой» проверки типов, но и «для чего-то большего», всегда вызывала у меня отторжение из-за «комплексности» затеи, но если вам это не страшно, можно, к примеру, писать типы-«тесты» для проверки других TS-типов
- с Document Picture-in-Picture API можно в мини-окошке браузера рендерить произвольный контент, а не только видео, поэтому там можно показать, например, мини-плеер с помощью createPortal() (жаль, что пока только Chrome)
- оператор satisfies позволяет проверить соответствие типа объекта без лишнего «расширения» этого типа
- чтобы проект использовал конкретную версию пакетного менеджера, нужно включить corepack enable && corepack enable npm и прописать в package.json конкретную версию "packageManager": "[email protected]"

CSS
- решение интерфейсной проблемы ссылки, вложенной в ссылку: выносим «родительскую» ссылку в отдельный слой с position: absolute и растягиваем на всю ширину с inset: 0, а «дочерней ссылке» задаём position: relative
- CSS Tricks продолжает оживать с новым гайдом про Container Queries
- чтобы «прилепить» к краям контейнера картинки-маски, чтобы сам он тянулся по высоте, есть mask-image

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