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

Новости
- вышел Astro 4.5: новая встроенная панель аудита сайта, по View Transitions теперь можно перерендерить интерактивные части сайта, обновлён хайлайтер синтаксиса для блоков кода Shiki, поддержка отдельных CDN для разных типов файлов (и заодно ребята отпраздновали 3 года проекта)
- вышел Firefox 124: добавлена поддержка AbortSignal.any, ::first-letter и ::first-line теперь работают для SVG <text>, content-visibility: auto включено по умолчанию (скорость отрисовки сайтов станет быстрее)
- что будет, если вместе соберутся создатель и бывший CEO npm, инжиниринг-менеджер из Github и npm и разработчик из Google? Они попробуют создать более лучший пакетный менеджер (JSR был только началом)!
- выпущен vitepress — генератор статических сайтов из md на vue и vite: изначально генерится статика SSG, а после загрузки инициализируется SPA для дальнейшей навигации по сайту


Проекты
- madge — анализ и нахождение циклических зависимостей в проекте, а также постройка визуального графа зависимостей
- shiki — стильный хайлайтер кода в браузере + если вы читали документацию по TS на сайте TS, то наверняка запомнили примеры кода с тултипами-аннотациями, в которых показываются «скомпиленные» подсказки: это реализовано с помощью twoslash, который работает в тандеме с shiki, а также бонусом библиотека анимирования кода из одного состояния в другой shiki-magic-move
- downshift — базовые примитивы, заложенные в хуки, для создания доступных выпадашек на React
- spectacle — либа для создания презентаций с помощью React и JSX
- modernfontstacks — наборы шрифтов (включая системные): показывается, какие шрифты используются сейчас в браузере, какие доступны и недоступны


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

JS
- автомемоизация React Compiler строится на том, чтобы при выводе типов понять какие значения — примитивы и не момойзить их; собственно, и без React Compiler примитивные значения мемойзить иногда вредно
- гайд по созданию анимаций с react spring: есть примеры с простыми и сложными анимациями, впрочем простые анимации можно собрать и на коленке на CSS, разве что в либе есть встроенные «пружинные» изинги
- сравнительная таблица наличия API в разных JS-рантаймах (кроме браузера): заодно освещён рантайм WinterJS, использующий для JS движок SpiderMonkey из FF
- мастеркласс по экономии на спичках в JS-коде, если всё остальное уже оптимизировано
- как настроить среду и TS для разработки Node-приложения
- шпаргалка по типизации в React-е: если вы когда-нибудь натыкались на заковыристую типизацию, она наверняка раскрыта в этой доке

CSS
- напоминание, что отступы margin и padding недопустимы в стилях агностик-UI-компонентов, вместо них нужно использовать gap
- свойство contain, которое привносит новизну в вёрстку двухколоночного лейаута: с contain: size можно «изолировать» лейаут одного элемента от всех остальных (как будто position absolute только в потоке), а также с помощью contain: layout можно спозиционировать fixed элемент относительно родителя (но он перестанет быть fixed!)
- вместо border: 0 лучше писать border-color: transparent, чтобы не отрубать рамки для контрастного режима браузера (такое стоит делать хотя бы для @media (forced-colors: active))
- неочевидные стили для кнопок: touch-action: manipulation для отключения зума по двойному тапу, user-select: none для выключение выделения текста, ::file-selector-button для стилизации кнопки input file, аутлайн для фокуса не по клику с :focus-visible
- значение align-items: safe center для выравнивания элементов без риска обрезать их в случае появления скролла в контейнере
- ликбез по боксовой модели CSS, а также сброс неудобной дефолтной настройки box-sizing: content-box
- удобный дефолт для респонсив-размера шрифта font-size: calc(1rem + 0.25vw) вместо дурацкого переключения по разрешениям


Платформа
- если ваша монорепа разрастётся до миллиона файлов, то скорее всего в ней начнёт тормозить git; если такое произошло, выхода два: распилить монорепу или перейти на Mercurial (как сделали ребята из компании на букву F)

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

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

Зависимости

Окей, вам нужно сделать фичу и вы решаете добавить в проект зависимость. Лучше было бы, конечно, этого не делать, но иногда бывает нужно срочно-кипяточно или наговнякать для проверки гипотезы. Как сделать выбор более осознанно и уменьшить риски, что зависимость в будущем создаст проблем?

Признаю: будущее никто не знает, может случиться что угодно и риски есть всегда. Так что, как осознанно не подходи к выбору, всё равно что-то может пойти не так. Но что можно сделать, так это собрать более-менее полную эвристику и вывести наименее рискованный вариант.

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

Причём проект может проходить цикл повторно. Например, если изменилась прикладная цель или пришёл новый овнер, проект может пойти на новый круг по спирали.

Сам цикл может проходить быстро, если проект — это mvp со сроком жизни в месяц, или долго, когда проект долгоиграющий (Linux 👋).

Так вот, к зависимостям.

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

Нестабильные зависимости в стабилизировавшийся проект лучше не добавлять, иногда становится трудно/накладно обновлять зависимости и в проекте может появиться дырка, которая будет висеть месяцами.

Дальше нужно определиться, из чего складывается качество зависимости.

🍿 Часто бывает, что зависимость выбирается по популярности. Типа «миллионы юзеров не могут ошибаться».Да, у популярного проекта большее сообщество, больше контрибьюторов, но бывает, что что-то становится модным, а затем мода на это проходит. Тут можно смотреть на количество звёзд, форков, подписчиков, контрибьюторов, скачиваний (а также тренд скачиваний).

👥 Мейнтейнер(ы) и мейнтейн. Если мейнтейнер один, то вероятность стать заброшенным у проекта больше, так как бас фактор. Мейнтейн можно оценить по соотношению открытых/закрытых ишью, времени закрытия ишью, времени последнего обновления и частоте релизов.

🛠️ Качество инфраструктуры. Документация, настроенный линтер, тесты, внятное версионирование. Тут всё ясно.

⛓️ Зависимость от других зависимостей. Чем больше зависимостей, тем хуже. Энтропия увеличивается, всё остальное падает. Одиночные пакеты лучше, но есть исключение, когда речь идёт о целой экосистеме, например, ui-ките, который вы целиком используете.

🏋️ Размер. Часто даже у популярного проекта могут быть более компактные аналоги. Размер одиночных пакетов часто кореллирует с количеством зависимостей. Меньше зависимостей — меньше размер.

🧭 DX. Если проект будет минимального размера и без внешних зависимостей, но при этом него будет неудобный API, то не стоит брать его. Нервы дороже.

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

Как теперь это всё отслеживать, спросите вы. Для этого есть инструменты.

Оценить размер бандла, увидеть вложенные зависимости и сравнить с аналогами можно на bundlephobia (пример).

Увидеть «рейтинг» пакета можно на npms (пример). Там оценивается «качество», «популярность» и «мейнтейн». Так же можно сравнить с аналогами.

Более детально проанализировать зависимости можно на npmgraph. Например, можно оценить количество мейнтейнеров в дочерних зависимостях, актуальность зависимостей, оценку npms.

Повторюсь: даже проанализировав все параметры, что-то в будущем всё равно может пойти не так. Но этого никто не знает, а здесь и сейчас у вас будет инструмент для более осознанного выбора зависимостей и обоснования этого выбора для коллег и менеджеров.

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

Лол, кажись bundlephobia поплохело. Наглядная иллюстрация проблемы с зависимостью 😅

Нашёл рекомендацию https://bundlejs.com (пример). Билдит зависимость прямо в браузере. Но не проверял ещё подробно.

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

Новости
- вышел Safari TP 190: поддерживается style container queries, ключевое слово safe во флексбоксах, getComputedStyle() теперь работает с ::highlight(), атрибут shadowrootclonable для разрешения кловирования shadow root
- вышла Turborepo 1.13: новый ui-терминал, команда scan для определения подходящих настроек на вашей машине, улучшенное логирование на CI
- веб-компонентный ui-кит Shoelace теперь называется Web Awesome (так как их купил Font Awesome): хорошая новость — у кита будет финансовая поддержка, плохая — полностью бесплатным кит не будет
- в V8 у итераторов появились новые методы map, filter, take, drop, flatMap, reduce, toArray, forEach, some, every, find, позволяющие, например, не приводить к массиву коллекцию Nodelist, чтобы её обойти const posts = document.querySelectorAll('a').values().find()
- обновился Chrome до версии 123: функция light-dark() для упрощённого задания цветовой темы; Long Animation Frames API для отслеживания избыточных перерисовок в PerformanceObserver; Service worker Static Routing API для указания, какие ресурсы через Service worker гонять не нужно, а всегда брать из сети; стили для picture-in-picture версии сайта @media (display-mode: picture-in-picture)

Проекты
- gitpkg — тула, чтобы сделать папку github-репозитория отдельной npm-зависимостью
- tzdb — либа с всегда актуальными мировыми таймзонами (данные берутся с geonames.org)
- changesets — тула для составления чейнджлогов в репах и монорепах
- microdiff — мини-либа без зависимостей для сравнения объектов в JS, в том числе new Date() и new RegExp(), а также объектов с циклическими ссылками

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

JS
- документалка о истории Node.js: не смотрел, но одобряю
- чем отличаются JS движок и JS рантайм: движок (V8, SpiderMonkey, JavaScriptCore) имплементит спецификацию ECMAScript, а рантайм (браузеры, Node, Deno, Bun) — это хост, в котором запускается движок + дополнительная инфраструктура для работы (DOM для браузеров, доступ в файловой системе в Node, event loop)
- походы для двустороннего и одностороннего общения сервер-клиент с WebSockets, Server-Sent-Events, Long-Polling, WebRTC и WebTransport: WebSockets ок, но сложны в реализации, SSE — только в направлении сервер->клиент, WebTransport работает на протоколе HTTP/3 QUIC и пока не везде поддерживается, WebRTC больше для клиент-клиент соединений, Long-Polling ок, но хак
- обзор всех полей package.json: скорее всего они уже описаны в доке npm, но тут как-то приятно собрано и описано всё вместе

CSS
- идея использовать scroll-snap не в горизонтальной карусели, а для скролл-навигации по заголовкам текста в вертикальном направлении: чем-то напомнило вертикально листающиеся по свайпу «карточки»
- как создать фича-флаги на CSS с помощью @container style(--is-mobile: true): я предполагал, что это станет можно делать в 2025, и кажется прогноз сбудется, так как хоть style container queries и появились в Safari TP 190, но в FF ещё нет
- мастеркласс по приготовлению веб-компонента круглого прогресс-бара: в меню инкапсуляции с выделением открытых «ручек» на кастомных свойствах, обзёрвабл атрибутов (реактивность!), на десерт размеры в container unit-ах и гриды
- найдено малоизвестное CSS-свойство text-emphasis для выделения символов в тексте: кажется, может сгодиться, например, для подсветки «неверных» слов в тексте
- 5 примеров разной анимации бордеров: строится на вращении фонового псевдоэлемента с сокрытием лишнего overflow: hidden, размытии фильтром, outline или анимации stroke-dashoffset у SVG
- найден юзкейс единицы измерения turn — «докрутка» элемента при остановке анимации
- псевдокласс :empty не учитывает текстовые ноды, а вот :not(:has(*)) чинит это
- отсюда можно просто взять и скопипастить popover-модалку

Платформа
- незаслуженно неизвестные современные команды git: switch для переключения веток, restore для отката правок в файле, sparse-checkout для частичного чакаута, worktree для чекаута одновременно двух веток, bisect для бинарного поиска проблемного коммита

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

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

Фикс скроллбар-сдвига

Сегодня расскажу про старый-добрый CSS-трюк.

Бывает кейс, когда интерфейс сайта центрируется, и при появлении и скрытии скроллбара контент начинает сдвигаться чуть в сторону на ширину скроллбара. Особенно актуально в случае модалок, при появлении которых общий скролл «выключается» и интерфейс «прыгает» вправо, а при сокрытии — обратно влево.

Это можно решить, задав в CSS принудительный показ скроллбара с overflow-y: scroll. Но тогда скролл будет показываться в том числе, когда в этом нет необходимости.

Можно также придумать или найти разные варианты решения этой проблемы на JS: высчитывать ширину скроллбара и вычитать её из общей ширины body, либо вычислять разницу между интерфейсом со скроллом и без скролла, а затем компенсировать эту разницу опять же для body. Но всё это кажется неизящными костылями. Даже если пробросить вычисленное значение в CSS кастомными свойствами.

Есть более изящный костыль на CSS, который применяется только когда нужно и не нагружает скрипты ненужными махинациями.

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

.container {
  margin-left: Npx;
}

Как вычислить это значение без прибегания к скриптам? На помощь приходит то, чему равняются значения 100% и 100vw для блока со скроллом. В случае vw — это ширина всего вьюпорта, включая скроллбар, а в случае % — это ширина блока без скроллбара. То есть разница между этими двумя значениями — это и есть ширина самого скроллбара:

.container {
  margin-left: calc(100vw - 100%);
}

Если скроллбар есть, то отступ будет, так как 100vw будет больше 100%. Если скроллбара нет, то 100vw и 100% будут равны между собой и отступа не будет.

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

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

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

Новости
- обновились LST версии Node.js: в v20.12.0 бэкпортированы crypto.hash(), более быстрый, чем createHash(), загрузка и парсинг переменных окружения с process.loadEnvFile(path) и util.parseEnv(content), стилизация вывода текста util.styleText; в v18.20.0 добавлены импорт-атрибуты import "foo" with { ... }, а также dirent.path заменён на dirent.parentPath (следом доехали секьюрные апдейты v20.12.1 и v18.20.1)
- вышел bun v1.1: теперь поддерживается в Windows 10, также добавлен Bun.Glob для поиска по файловой системе, Bun.Semver для проверки и сортировки версий по semver, новые свойства server.url и server.requestIP() при использовании serve, улучшена совместимость с Node для более бесшовного перехода, много улучшений в работе с Web API и в целом дофига фиксов и изменений
- вышел (олдскулы свело) Gulp v5: разработчикам пришлось отказаться или взять под своё крыло заброшенные зависимости, многое переписать (вызывает чувство уважения с лёгким налётом тщетности бытия)

Проекты
- typed.js — либа для анимации печатающегося текста
- npm-publish — публикация npm-пакетов из GitHub Actions при изменении версии пакета
- runJS — песочница для написания JS- или TS-кода с одновременным выводом результата рядом (как будто каждая строка выводится в консоль, только прямо рядом с кодом, без переключения контекста)

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

JS
- визуальный гайд по работе промисов, из которого можно узнать, что «колбек» на резолве промисов записывается в поле [[PromiseFulfillReactions]] и что «макротасков» нет, а есть просто таски
- если вы захотите на JS собрать CLI-программу, то это можно сделать без всяких дополнительных библиотек на коленке с помощью файла index.js со строкой #!/usr/bin/env node, а также запуска через поле package.json "bin": { "setup-project": "./index.js" }
- а почему бы нам не добавить реактивности в JS, подумали двое ребят и отправили пропоузал сигналов в JS, чтобы можно было создавать new Signal.State и Signal.Computed: внутри рантайма это будет лучше по перфомансу и возможно даже будет интегрировано с DOM (уууу, ну уже тогда проклятому Реакту точно конец!)
- каждая версия Реакта как приход весны: старые хуки перерождаются в новые и жизнь фреймворка выходит на новый круг (useFormState умер, да здравствует useActionState)
- в Реакте при задании значений по умолчанию в аргументах не стоит использовать массивы и объекты, так как каждый раз это будет ссылкой на новый объект, то есть пропсы будут меняться и компонент ререндериться
- попытки ограничить типами передаваемые в children элементы в Реакте заранее обречены, так как все элементы будут всё равно безликими JSX.Element, поэтому если нужен контроль за передаваемыми внутрь компонента данными, лучше воспользоваться пропами
- в браузерах есть механизм bfcache, который позволяет при переходе back и forward загружать страницу не повторно по сети, а из хранящегося снепшота в памяти (чек window pageshow по event.persisted)

CSS
- как на @scope, :scope и all: revert-layer собрать инкапсуляцию стилей в компонентах: как обычно в CSS — многословно, но нативно
- как на :root:has(select option[value="dark"]:checked) собрать современный переключатор светлой/тёмной темы сайта с сохранением в localstorage
- интерактивный гайд по container queries, в котором приводится много юзкейсов примеров использования единиц измерения от «контейнера», а также перечислены ограничения: если блок объявлен как container, то он не может иметь одновременно лейаут грида/флексбокса; container нельзя использовать в query для самого себя, для этого должен быть отдельный элемент
- <marquee> хоть и давно задепрекейчен, «бесконечные» движущиеся полосы в дизайнах с нами, думаю, навсегда, поэтому можно научиться их реализовывать с помощью задержки анимации margin-left для каждого отдельного элемента

Платформа
- как улучшить метрику CLS: предустанавливать размеры для картинок и для мест с инжектящимся контентом, не загружать лениво CSS в зоне видимого интерфейса, не анимировать top/left, подбирать подходящие фолбек-шрифты

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

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

Новости
- вышел Jpegli — новая либа для кодирования jpeg, обещают на 35% лучшее зашакаливание сжатие, казалось бы jpeg сто лет в обед, но до сих пор случаются прорывы
- PartyKit, библиотека для создания мультиплеер-приложений, куплена Cloudflare: обещают холить и лелеять (но это в пресс-релизах они все так обещают)
- V8 Sandbox — более не эксперимент: уже в Chrome 123 память для V8 будет отделяться в отдельную «резервацию», чтобы предотвратить несанкционированный доступ к ней
- вышел новый учебник по JS от гугловцев: как обычно, считаю, что только читать материал — мало, квизы в конце статей — тоже мало, надо отрабатывать на практике, вот буквально набивать руку, печатая код
- вышел ESLint v9.0.0, в нём много нововведений и breaking changes: не поддерживается нода < v18.18.0, v19; eslint.config.js — теперь дефолт, .eslintrc —депрекейт; удалены форматтеры, кроме stylish, html, json и json-with-meta; обновлен eslint:recommended; добавлены и изменены многие правила
- вышел ESLint Config Inspector — инструмент для визуального изучения вашего конфига, к чему он применяется, почему, зачем, за что (работает только с eslint.config.js) — это приятная пилюля для тех, кто страдает, что надо снова всё перелопачивать

Проекты
- ts-pattern — либа реализующая pattern matching подход в TS: если у вас есть развесистые условия, то возможно стоит присмотреться к либе
- vinejs — если вдруг вы использовали Zod в Node для валидации полей формы с клиента, то вас стоит взглянуть на спец либу для валидации именно HTTP request body
- dioma — либа для реализации dependency injection в JS и TS
- cally — веб-компонент календаря: фичастый, маленький, доступный, твой
- previewjs — таб с превью отрендеренного компонента из текущего файла прямо в редакторе для React, Vue, Svelte, Solid

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

JS
- очередное напоминание о существовании Shadow DOM без разглагольствований: бери и копируй базовый веб-компонент кнопки, который сразу заработает
- шоукейс библиотеки Effect, которая берёт на себя задачу помочь декларативностью и наглядностью побороть неоптимальную конкуренцию в асинхронных приложениях
- оптимизация бандла, в общем-то, неважно какого приложения: основная мысль — бандл — не бинарник, это высокоуровневый JS, который можно растрепать и посмотреть, что там есть лишнего (webpack-bundle-analyzer в помощь)
- yarn для тех, кому нужно не только запускать команды из package.json, а: хранить кэш всех пакетов проекта в репозитории; использовать workspaces в монорепе; интерактивно обновлять зависимости проекта; гибко управлять версиями пакетов; использовать «протоколы» для подключения к проекту внешних файлов и папок; патчить пакеты и другое

CSS
- крутые текстовые эффекты (ведь всю эту мощь в CSS же принесли для стилей, а не программирования, так?)
- что будет, если соединить :has(:hover) и сетку на 100500 элементов — позиционирование курсора без использования JS
- а что будет, если соединить :has(input:focus) input:invalid и пачку инпутов с maxlength="1" и pattern="[tT]" — wordle без использования JS
- «складывающиеся» элементы на transform-ах: особо приятен эффект затенения при более остром угле складывания
- использование CSS как инструмента для причинения умышленного визуального регресса для антипаттернов в HTML (например, для выявления забытых пустых ссылок a:not([href]), a[href=""], a[href$="#"], a[href^="javanoscript"])

HTML
- ещё один гайд по <img>, srcset, sizes и <picture> с фокусом на последовательное понимание, а зачем оно вообще нужно

Платформа
- если что WebP уже не самый топ-формат и повсеместно распространён более лучший AVIF, правда руками настраивать всю машинерию имаджинерии сложно, поэтому можно воспользоваться инструментами для пребилда картинок в нужном формате или доставкой из CDN

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

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

Новости
- обновления Chrome 124: возможность фокусироваться клавиатурой на скроллер; атрибут writingsuggestions для включения/отключения браузерных подсказок при запонении полей; заголовок priority для HTTP; блок рендера страницы с помощью rel=expect у ссылок, пока гарантировано не загрузится нужный элемент; новый WebSocketStream API, фиксящий недостатки WebSocket API; методы setHTMLUnsafe и parseHTMLUnsafe для доступа к декларативному shadow DOM из JS; pageswap эвент для реакции на переход по View Transitions
- обновления Safari TP 192: поддержаны View Transitions API, URL.parse(), внесены багфиксы
- обновления Firefox 125: align-content в добавок к гридам и флексбоксам теперь работает и с display: block; поддержан Intl.Segmenter и Popover API
- обновления Next.js до версии 14.2: продолжено впиливание Turbopack; улучшен тришейкинг и потребление памяти при билде; CSS-чанки теперь подключатся в порядке импортов (странно, что это было не так); появились более явные сообщения об ошибках
- рендер JSX в следующей версии React обещает быть быстрее за счёт отказа от клона объекта пропсов в пользу прокидывания его напрямую

Проекты
- noscriptencode — энкодер SVG в URL, base64 и другие вариации (раньше пользовался энкодером от yoksel, но этот помощнее)
- react-datepicker — доступный, фичастый реакт дейтпикер-компонент
- next-view-transitions — View Transitions API для Next.js App Router (в догонку ко всем, кто уже внедрил у себя VT)
- markdowndown — инструмент для скачивания любого сайта в виде md

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

JS
- как быть со StyledComponents в React Server Components: на сервере context не поддерживается, поэтому SC не могут работать, в принципе; альтернативно можно перейти на compile-time-библиотеки с похожим API — Linaria, Panda CSS или Pigment CSS (основанный на либе, выросшей из Linaria — wyw-in-js)
- песочница, чтоб поиграть с предложенным Signal API в JS (поиграл, ощущения приятные)
- подходы к написанию логики retry: можно увеличивать время повторного запроса по экспоненте, линейно, рандомно, просто фиксировать задержку или обойтись вовсе без неё
- в каких случаях (не) нужен GraphQL: клиенты ломаются при смене API; долгое время загрузки из-за каскадных запросов; сложность поддержки множественных эндпойнтов; нужна тонкая настройка перфоманса и безопасности
- создатели xState отпилили от него лишнее и получился… новый стейт-менеджер @xstate/store, основанный на событийной модели

CSS
- галерея копипаст-градиентов: линейные, круговые и серобуроказявчатые
- в каких ситуациях может не сработать aspect-ratio: когда заданы явно оба размера, блок растягивает флекс-контейнер, что-то форсит расчёт естественной высоты блока
- современные CSS-фишечки в Campfire, используются: oklch для высчитывания оттенков цветов; кастомные свойства в фолбеках кастомных свойств color: var(--btn-color, var(--color-text)); :has для определения наличия внутренних элементов :where(:not([open]):has(.unread)) или их количества :where(:has(> :last-child:nth-child(2)); единственное медиавыражение @media (max-width: 100ch); any-hover: hover для определения нетач-девайсов

Платформа
- как попап об использовании кукис может навредить перфомансу: на самом деле относится к любому попапу или всплывающему элементу: скрипты/стили попапа могут загружать основной поток, хотя это явно должно грузиться асинхронно; поисковой робот может неверно определить LCP-элемент (вместо контента самого сайта — баннер или попап); попап может двигать контент (нехорошо для CLS)
- подборка фишек дев-тулзов: обычно в таких списках всё уже известно, но также попадается 1-2 фишки, которые прям вау; так и в этой статье нашлось кое-что новое интересное — эмуляция фокуса на странице (чтобы при переходе в дев-тулзы не закрывался ховер-элемент) и logpoints — console.log, который можно назначить на строке прям из дебаггера
- оказывается, внутрь PDF можно встраивать JS by design, который можно использовать, например, для XSS-атаки (к счастью, в браузере можно запретить исполнение JS в PDF)

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

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

Представьте, что завтра вы проснётесь, а горячо любимый всеми нами telegram перестанет работать или объявят, что он теперь только платный или что-то ещё с ним произойдёт такого, что вы вынуждены будете перестать им пользоваться.

Например, гендир telegram решит отойти от дел и прикрыть лавочку, так как все доступные средства освоены, а новых не нашли, или уволятся ключевые разработчики.

Все подписки на блоги, бережно отсортированные папки и сохранёнки больше станут недоступны. Ощущения так себе, куда идти, что читать? Не в Твиттер же 😅

Мы находимся в большущем вендор-локе, и это само по себе печально. Вдвойне печально, что мы читаем тексты (в том числе рекламные), оформление которых заточено под проприетарное ПО. Часто оформление тестов скудное или неудобное, кроме того случаются баги. Хотя, на минуточку, у нас есть бесплатный веб с его HTML, CSS и JS для абсолютно любой стилизации и добавления интерактивности в контент.

А представьте, если бы вместо того, чтобы заводить новый канал автор бы создавал свой блог в вебе? И чтобы была такая технология, чтобы можно было в одном приложении собирать посты со всех блогов, которые вам интересны, а также чтобы можно было и комментировать, ставить реакции, вот это всё.

Беда в том, что у веба самого по себе никогда не было хороших продуктологов. Вот которые бы придумывали новые фичи самого веба. Как мы пользуемся вебом, взаимодействуем с другими пользователями веба, чтобы это было свежо и интересно. Такое ощущение, что веб принадлежит всем, но в то же время никем не овнится. Если речь идёт про взаимодействие, то мы уходим в определённый сервис, но у нас мало или нет фич самого веба хотя бы для взаимодействия друг с другом.

Окей, частично функцию развития веба выполняют вендоры браузеров, но у них своя повестка и заработок (продажа рекламы вам и ваших данных рекламодателям).

Окей, есть W3C, какие-то ещё комитеты и члены, которые придумывают протоколы того, как машинам общаться с машинами — это именно технари, они не овнят веб как продукт для людей. Это скорее про техническую составляющую: как технарям хорошо делать так, чтобы машины успешно общались с другими машинами.

Окей, есть электронная почта, а также когда-то был популярным RSS — это когда контент сайта публиковался в определённом XML-формате и у вас был приёмник, который подсасывал все обновления с интересующих вас сайтов. Это было в целом удобно, но ограничено вашим личным опытом взаимодействия с контентом в вебе (как и сам «веб-сёрфинг»). То есть нельзя было прямо в RSS-ридере пообщаться с другими читателями этой же ленты.

Может быть бы RSS и развился дальше во что-то такое, но его сначала придушили поисковики (Google выгоднее, чтобы вы гуглили что-то в интернете и переходили на сайты, а не собирали инфу себе в Google Reader) и потом заменили соцсети.

Гугл, справедливости ради, пытался в эту сторону. Некоторое время просуществовал Google Wave, но, к сожалению, он появился слишком рано, чтобы выстрелить. Но если сейчас на него взглянуть, то можно узнать то, что мы сейчас видим, например, в telegram: мессенджер, треды, комменты. Даже мультиредактирование было. 🙂 Уже не помню, был ли там прикручен RSS, чтобы совместно читать одну ленту с другими пользователями.

К слову, потом, в эру зарождения соцсетей, Гугл делал заход со своим Google+, но не зашло. Кажется, что тот раз было уже слишком поздно. Да и идеи были заложены вторичные, заливание баблом не помогло.

В общем, так и живём тут, хотя могли бы огого!

Cкриншоты сервисов для интересущихся приложил в комментах ✌️

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

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

Новости
- обновился pnpm до версии v9.0.0: дропнули поддержку Node.js v16 и 17 (кстати, у pnpm есть standalone-версия с нодой прямо в бандле); добавлена совместимость с Corepack; обновлены параметры конфигов и изменён формат лок-файлов (для более лучшего разрешения git-конфликтов); улучшен процесс разрешения вложенных зависимостей
- выпущена Node.js 22: обновлён V8; появился синхронный require() ESM-модулей пока за флагом; добавлена команда node --run для запуска скриптов из package.json в обход npm и встроенный вотчер изменений файлов node --watch; поддержка WebSocket выведена из-под флага; в node:fs добавлены паттерн-матчеры glob и globSync
- обещанная блокировка 3d-party cookies в Chrome откладывается на конец года: сообщество и британская антимонопольная служба проверяет эту прекрасную затею
- первый минорный апдейт в ESLint v9.1.0: в основном багфиксы, но печаль в том, что плагинная экосистема ещё совсем не готова к новому формату, переход будет долгим
- вышла React 19 Beta: всё, что обещали раньше (useTransition, useActionState, useFormStatus, useOptimistic, use, ref as a prop, <Context> as a provider, поддержка <meta>-тегов, API для предзагрузки prefetchDNS, preconnect, preload, preinit), а также вроде как новое: сleanup functions for refs, useDeferredValue, атрибут precedence для <link> (вроде как нестандартный), поддержка асинхронных скриптов и кастомных элементов
- выпущен Biome v1.7 (форматтер и линтер, 2 в 1): включает тулу для миграции с ESLint и Prettier (соблазнительно в момент, когда ESlint в переходном состоянии)

Проекты
- react-phone-number-input — инпут для ввода телефонного номера в различных международных форматах
- imaskjs — ещё один «маскировщик» инпутов, но уже более широкого формата: есть даты, адреса, деньги
- The Front End Developer/Engineer Handbook 2024 — большой сборник по современным технологиям фронтенда: помню, что в 2018-2019 часто к нему прибегал, когда составлял карты обучения
- ripl — общий API для создания 2d-графики в SVG и canvas
- testplane (aka Hermione) — браузерное тестирование с mocha и WebdriverIO на борту
- devalue — JSON.stringify, который не ломается на циклических референсах, undefined, Infinity, NaN, -0, датах, Map, Set и BigInt

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

JS
- атрибуты и свойства DOM-элементов — разные вещи: атрибуты сериализуются, свойства могут быть любого типа, атрибуты нечувствительны к кейсу; иногда изменения свойств отражаются в атрибуты, иногда нет; в целом, атрибуты — для конфигурации, а свойства — для хранения состояния
- пропоузал TC39 signals завернули в Реакт-хук и сравнили с useState: даже сейчас уже выглядит приятно
- как работает тришейкинг в Webpack: местами непонятно, но суть улавливается
- Райан Даль настойчиво зовёт вас воспользоваться JSR, новым npm-совместимым реестром (esm-only, ts-first), обещает, что не придётся жонглировать package.json и tsconfig, всё заработает само

CSS
- для определения включенности скриптов есть @media (noscripting: enabled | none) (если вы считаете, что такое ещё возможно в современном вебе)
- плиточная раскладка (masonry) — это всё же часть гридов или отдельный вариант display? Вот и разработчики не могут выбрать и просят вас помочь
- с помощью режимов наложения mix-blend-mode: difference и plus-lighter, применённых к видео, можно детектить движение

HTML
- напоминание, как писать alt к изображениям: представьте, что картинка — это часть окружающего текста и опишите содержимое картинки (не нужно писать, что это картинка; лучше включить знаки препинания; в декоративных изображениях alt не стоит писать; alt можно не писать, если рядом уже есть текст содержимого картинки, например, имя пользователя)
- использование атрибута maxlength у инпутов — антипаттерн: текст обрезается, иногда сложно угадать точное количество символов, которые обрезать безопасно; вместо этого лучше показать ошибку о превышении длины

Платформа
- если взять страницу с 1mb HTML, CSS и JS, а потом открыть её по 3G, то только на соединение и парсинг потратится 0.5s (также приводятся другие метрики)

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

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

Новости
- из MS Edge будут выпилилены свойства -ms-high-contrast media и -ms-high-contrast-adjust в угоду стандартным медиа-фичам forced-colors и prefers-color-scheme, а также свойству forced-color-adjust
- вышел React v18.3.0: добавились ворнинги на задепрекейченые фичи в React и React DOM
- анонсирован GitHub Copilot Workspace: (утопичная) идея сделать некую среду, в которой можно будет на натуральном языке планировать, обсуждать, писать, отлаживать и тестировать программы
- у Bun вышло обновление с новым crash reporter-ом, из интересного: идея в один 150-байтный URL запихнуть платформу, хэш коммита, стэк трейсы, сообщение и тип ошибки: малочитаемо, но зато очень коротко
- вышел TypeScript 5.5 Beta: TS научился выводить тайпгарды самостоятельно, появился импорт типов JSDoc в js-файлах и встроенная проверка регулярок, упрощен импорт es-модулей из пакета typenoscript для Ноды, опция isolatedDeclarations для изолированной компиляции d.ts, задепрекечена часть вещей
- обновился кит React Spectrum и Aria: добавлены компоненты вложенного меню, дропзоны, инпут-файла, а также компоненты для работы с цветом (пикер, ареа, слайдер, колесо)
- вышел release candidate Svelte 5: для тех, кто использует Svelte 4, всё будет будет работать быстрее, а для тех, кто использует Svelte 3, сначала рекомендуют обновиться до Svelte 4

Проекты
- extension — либа для разработки браузерных расширений, достаточно простая, чтобы запустить своё расширение командой npx extension create <your-extension-name>
- react-spring-visualizer — визуализатор анимации либы react-spring
- tagify — компонент тегов в инпуте и текстарии, умеет в поиск, сортировку, кастомизацию

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

JS
- как улучшить читаемость кода, вынеся подробности имплементации API в отдельный архитектурный слой: было — apiClient.get<UserResponse>(`/user/${handle}`), стало — UserApi.getUser(handle)
- туториал по новым фичам нового Реакта: особо хорошо выглядит use
- когда использовать Bun вместо Node: если важен перф; когда нужен швейцарский нож (раннер, пакетный менеджер, тест-раннер и бандлер в одном); когда не хочется заморачиваться с импортами, а хочется, чтобы просто работало; когда нудна встроенная БД SQLite
- объяснена тайна века, как же всё таки работает array.sort((a, b) => b - a): функция нужна, чтобы понять куда уйдёт a на числовой прямой, вправо и влево
- как собрать на коленке свой шаблонизатор на HTML и .sh, «потому что могу»

CSS
- респонсив размеры шрифта с помощью clamp(): хорошо — clamp(1rem, 2.5vw, 3rem), ещё лучше — clamp(1rem, calc(2.5vw + 1rem), 3rem)
- реализация боковых отступов в древовидном компоненте: проще всего добавить пустой элемент-спейсер с динамической шириной --spacer-col: max(8px, var(--level) * 8px)
- отрисовка нот в гридовой сетке: SVG с data-атрибутами вписывается и раскладывается по рядам и колонкам
- вендорные префиксы для каких свойств ещё остались актуальны (можно пересчитать на пальцах рук)
- оказывается можно управлять порядком отрисовки fill и stroke с помощью свойства paint-order: stroke fill (по умолчанию рисуется fill → stroke)

HTML
- официальное разрешение от Гугла: использовать popover API теперь можно!

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

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

Собрал для вас в одну папку авторов, ведущих блоги по фронтенду, веб-разработке и вокруг неё.

🔗 https://news.1rj.ru/str/addlist/Z6Efi4jXwe9lODcy

Специально отобрал именно ламповые авторские блоги, а не перепосты ссылок, документации или тексты не про код.

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

Надеюсь, будет полезно ✌️

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

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

Новости
- выпущена Node v22.1.0: появилась поддержка NODE_COMPILE_CACHE для включения режима кеширования V8 (если граф модулей не меняется, то повторная пересборка становится быстрее за счёт кэша)
- только недавно в Next.js решили не патчить fetch, как в React решили патчить Date: «мы по-тихому, никому мешать не будем, со стандартами будет совместимо, вы же полифиллы используете, вот и дату норм пропатчить»; вроде так, но есть нюанс: в случае полифиллов добавляются костыли для воссоздания недостающих стандартных возможностей платформы, а фича-патчи добавляют проприетарные костыли, что уже не то же самое

Проекты
- react-tracked — представьте, что у вас есть useState/useReducer, которые триггерят ререндеры не всегда, когда стейт перезадался, а когда он именно изменился, стал другим (под капотом Proxy, работает для вложенных уровней стейта тоже)
- pragmatic-drag-and-drop — многообещающая либа для драг-н-дропа (для травмированных React DnD)

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

JS
- почему таки плохо патчить globals: автоматом создаёт техдолг, нестандартные фичи работают непредсказуемо в разных средах, скрывают магию внутри, лочат на вендора и в целом тормозят прогресс в долгую
- Bun может ускорить не только локальную разработку, но и сборку и деплой на CI, так как, например, заменяет yarn и Vitest
- (не совсем JS, но это не так важно) как разложить одно нечитаемое условное выражение на несколько мелких или же вынести в отдельную функцию
- чтоб не оборачивать new URL(urlstring) в try catch для обработки невалидных урлов, можно использовать URL.canParse(urlstring), а также скоро можно будет URL.parse (начиная с Chrome 126 и Firefox 126)
- React хорош для организации UI-компонентов, но когда речь заходит про дата-фетчинг, то всё что предлагает React из коробки — это выйти в окно; и в этом случае на помощь приходит React Query, который позаботится о кэшировании, оффлайне, восстановлении скролла и тд, чтобы вы спокойно могли с чистой совестью выключить компьютер в конце рабочего дня
- лучший способ гарантировано отправить неблокирующий запрос при закрытии страницы — на событии visibilitychange выполнить navigator.sendBeacon()
- возможно для управления версиями Node стоит попробовать альтернативы nvm: самой перспективной выглядит Volta, которая не требует доп файлов (конфиг в package.json), кроссплатформенна, автопереключает версию при смене проекта, а заодно может переключать версию yarn

CSS
- как-то незаметно в повседневной разработке мы перестали думать про минификацию стилей, тк эту функцию взяли на себя фреймворки, хотя [олдфаг mode on] раньше было почему-то важно считать сколько десятков килобайт умеет сэкономить твой минификатор [олдфаг mode off]
- мифы про специфичность: 1) специфичность — это не целое число, а набор из трёх чисел a, b, c 2) добавление атрибута style не добавляет специфичности 3) !important не добавляет специфичности, а уносит объявление в другой origin
- в мире победившего color-mix()-а серые палитры создаются с помощью полутона между чёрным и белым color-mix(in oklch, black 20%, white)
- border-color: transparent — это ок, если, например, на hover задавать видимый цвет, чтобы при задании рамки не изменялись размеры элемента
- :has() — это не только «родительский» селектор, но и полноценный условный оператор для элементов интерфейса, например, для select (красим select в зависимости от выбранного значения) или же для всего интерфейса (красим весь сайт в зависимости от выбранного значения (сомнительно))
- субгриды в помощь для контроля за переполнением дочерних ячеек грида на примере нумерации в упорядоченных списках
- Popover API для создания тултипов, якорящихся на элемент-триггер (сложно, но возможно)

Платформа
- разработчики React Aria поделились, как сделать человеческое выпадающее субменю, чтобы оно случайно не закрывалось во время движения курсора: строится визуальный треугольник, в рамках которого считается, что подменю не должно быть скрыто + по скорости движения предполагается, куда пользователь собрался двигать курсор

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

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

А это React и TypeScript моей молодости, внучок! 👨‍🦳

Если серьёзно (и выкинуть всякую xml-требуху), то смотрите:
- типы есть;
- всё декларативненько;
- импорты «нативные»;
- UI-лейаут флекс-подобный резиновый был;
- логика отделена от UI, но собрано в одном файле;
- реактивность в каком-то виде, кажется, тоже была;
- ООП, вроде как, тоже было.

Правда загнулось вместе с флешом, но даже сейчас вызывает любопытство.

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

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

Новости
- вышел Astro 4.8: добавлена экспериментальная поддержка actions — возможность объявить методы, запускающиеся на бэкенде, и вызывать их напрямую из JS. Что сразу же мне напомнило аналогичную возможность из ASP.NET образца 2008 года под названием PageMethods: это было очень удобно, а главное просто и понятно, тк серверные методы вызываются из JS напрямую, туда наглядно прокидываются нужные данные. Также добавлена экспериментальная возможность в «мидлваре» перехватывать и перенаправлять запрос на другой адрес
- вышел Safari 17.5 (третий большой апдейт в 2024): появились text-wrap: balance, color-scheme: light dark и light-dark(), @starting-style, @import <url> supports(<feature>)
- ситуация с неготовностью экосистемы ESLint к новой версии ESLint 9 привела к созданию особого пакета @eslint/compat, функцией fixupPluginRules из которого можно обернуть старые плагины и обещают, что они заработают внутри 9 версии
- вышел React Compiler, призванный избавить от ручного использования useMemo, useCallback и memo(), но он как героически побеждает проблемы React, так и превносит новые проблемы с тем, что работает только в Strict-mode, несовместим с mobx, несёт чёрную магию на борту
- обновления Chrome 125: поддержан CSS Anchor Positioning, добавлены CSS-функции round(), mod(), and rem(), а также Compute Pressure API
- Screen Wake Lock API поддерживается во всех браузерах: можно указать программно не гасить экран

Проекты
- hugeicons — большая коллекция компонентов иконок: кастомизируются размер, цвет, скругление и иногда вариативность
- eslint-plugin-regexp — плагин ESLint для нахождения ошибок в регекспах
- fuzzysort — быстрый и лёгкий fuzzy-поиск на JS
- Web Platform Dashboard — таблица с данными о поддержке фич платформы в браузерах

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

JS
- принципы SOLID на примере Реакт-компонентов: даже если не называть это какими-то буквами, а руководствоваться принципами здравого смысла, то примеры здравые: не замешивать несвязаные друг с другом вещи, а связанные — наоборот держать вместе, не хардкодить, писать единообразно, просто, не усложнять логику
- и ещё советы по вынесению ответов API, обработки выходных или входных данных в отдельный API-слой приложения
- если вы дизайнер и напрямую не кодите, но при этом хотите вживую «править» сайты, то вот список, чему научиться: выбирать элементы, переключать классы, подписываться на эвенты, менять HTML, собирать данные с форм (бонус дизайн-режим document.designMode = "on")
- если вы пишете либу, даже небольшую, неплохая идея — написать JSDoc для подсветки в IDE, пакетном менеджере, ридми: внутри можно писать текст, типы, теги @param и @returns для описания функций, примеры кода в md, теги @link , @linkcode, @linkplain для ссылок
- один из недооцененных хуков — useDefferedValue — откладывает рендер компонента до более подходящего момента, чтобы, например, если компонент «тяжёлый», улучшить перфоманс или же показать лоадер
- у элементов форм есть полезные методы из коробки: form.elements.namedItem, form.elements.group для радио-групп, app.elements.firstname.defaultValue для получения дефолтного значения инпута

CSS
- range syntax медиа-выражений width >= 48em, width < 48em лучше тем, что не вынуждает писать разные числа min-width: 48em, max-width: 47.99em с возможными «мёртвыми» зонами между разрешениями
- гайд по созданию форм на CSS: сейчас всё в большинстве случае сводится к SVG или же к clip-path: polygon() и mask + gradient
- если взять кастомное свойство типа <integer> и инкрементить его раз в миллисекунду, то у нас есть централизованный счётчик для создания «анимаций» по типу rotate: calc(var(--t) * .001turn); вся соль в том, что с наличием такого счётчика можно синхронизировать несколько анимаций без JS
- фейд-градиент поверх картинки и под текстом border-image: fill 0 linear-gradient(#003, #000)
- Chrome пушит Anchor Positioning API: штука для позиционирования элементов относительно других элементов; вангую, через 1-2 года заработает везде, а пока есть полифилл

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

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

Частичный stage файлов в git

Приходилось ли вам работать с длинными JSON-ами в git-е?

Мне вот приходилось, когда в проект внедрялись дизайн-токены. Схема такая: есть «источник правды» в виде хранилища значений разных элементов интерфейса (цвета, размеры шрифтов, параметры теней и тд) в виде плагина к Figma. Из этого хранилища дизайнеры применяют значения в макетах, а для разработки выгружается JSON-файл. Затем файл процессится и из него генерятся кастомные свойства аля --ui-element-background-color-default, которые уже используются в стилях.

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

Руками копировать правки — так себе идея. Тут пригодится возможность git-а делать добавление частичных правок файла в stage.

Когда вы добавляете файл в stage — это на самом деле не целиком файл, а именно конкретное состояние этого файла, его «снепшот». То есть если в файле две текстовые правки, застейджить можно только одну из них, а вторую пока не брать.

Для этого в VSCode нужно перейти в файл, выделить интересующие текстовые правки и выполнить команду cmd(ctrl)+shift+P > Git: Stage Selected Ranges и в stage уйдут только частичные правки файла, остальные правки останутся в изменённом файле.

Похожим образом можно также частично откатывать изменения в файлах. Например, что бы подчистить временные логи. Для этого нужно выбрать файл, так же выделить текстовые правки и выполнить команду cmd(ctrl)+shift+P > Git: Revert Selected Ranges. Либо в окошке с диффами тыкнуть на дифф и выбрать Revert this change.

Из консольного git-а такое частичное добавление в stage также работает. Для этого есть команда git add -p. Если, к примеру, была правка в двух местах файла, то появится такое сообщение (1/2) Stage this hunk [y,n,q,a,d,j,J,g,/,e,?]?. Выбор y — правка стейджится, n — не стейджится, ? — помощь по остальным вариантам команд.

Для частичного реверта нужна команда git restore -p, которая вызовет такой же интерактивный диалог только с другим вопросом: Discard this hunk from worktree?.

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

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

Новости
- Vercel привлек 250 миллионов $ финансирования, а это значит, что ещё больше «нетехнических» клиентов будет в один клик пользоваться облаком, генерировать компоненты на v0.dev и также заливать их в облако, а потом платить деньги фиксикам, чтобы это всё работало
- (вдогонку к прошлой новости) появилась экспериментальная поддержка React Compiler в Next.js, что гладко укладывается в концепт «дев сложный, заплати и мы сделаем проще» (а кто сделал его сложным, КТО?!)
- в Chrome 126 собираются встроить мини-LLM, чтобы пользователь мог выполнять простые задачи на сайтах и в веб-приложениях с помощью ИИ напрямую из браузера (пахнет вендор-локом, но концепт прикольный, вангую ИИ-«помощники» появятся во всех браузерах, чтобы помогать пользоваться сайтами)
- а в 125 версию Chrome в девтулзы уже добавили ИИ-фичу в консоль (объяснение ошибки, чтоб в гуглол не ходить), также завезли отладку anchor positioning, улучшили информацию об ошибках в Sources, а в Network добавили инспект заголовков Early Hints headers, в Performance теперь показывается инфа по скорости CSS-селекторов и ещё обновился Lighthouse
- Bug 33654, Opened 25 years ago, Closed 2 days ago: то чувство, когда сын закрыл баг отца

Проекты
- littlezipper — создание zip файлов в браузере и в node/deno c CompressionStream API (доступно во всех средах)
- xlsxtable — создание .xlsx файлов на клиенте и сервере
- noscriptviewer — поисковик и просмотрщик SVG-изображений с возможностью экспорта в виде растровой картинки, data URI или react-компонента

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

JS
- новый статический метод const { promise, resolve, reject } = Promise.withResolvers() позволяет управлять промисами извне конструкции new Promise((res, rej) => {})
- про предикаты типов (`function isType(arg: any): arg is Type`): в целом полезны, из минусов добавляют нагрузку в рантайм и дублируют логику самих типов
- как создать свой минималистичный стор-менеджер в React без использования контекста, а с useSyncExternalStore, который к тому же из коробки подцепит типы
- и если вы всё таки предпочтёте пользоваться контекстом, как избежать множественных вложенных друг в друга контекстов через <Providers providers={[providersList]}>
- официально представлена альфа-версия Pigment CSS — новая CSS-in-JS-либа от MUI, которая мимикрирует по синтаксис Styled Components, но при этом работает в билд-тайме (и поэтому не использует контекст, что важно для серверных компонентов)
- даже если вы используете React, то всё равно вы пишете JS, то есть сталкиваетесь с контекстом выполнения и замыканиями, и как следствие можете в замыкание мемоизированной функции затянуть какой-нибудь большой объект, который не будет подчищаться garbage collector-ом
- реализация идеального Deep Equal сравнения объектов в JS, а также вариант Shallow Equal, который используется в React

CSS
- медиа-выражения для определения размеров вьюпорта больше не нужны? Флексбокс, грид, контейнер-выражения (а также `:has()`) решают задачи лучше медиа-выражений, так как специально для этого предназначены и могут стилизовать респонсив-компоненты независимо от вьюпорта, но зато учитывая окружающий контекст. А медиа-выражения теперь для определение фич и настроек девайса (тема, контраст, анимации)
- пока функция color-contrast() не доехала до браузеров, задачу подбора контрастного цвета можно решить с помощью relative color syntax
- CSS-фич стало настолько много, что пора расчехлять старый-добрый w3c-маркетинг и сделать отсечки CSS4, CSS5 и CSS6 (а что, в ECMA-движухе же получилось)

HTML
- в результатах опроса State of HTML 2023 каждый найдёт новенькое для себя: у нескольких <details> с одинаковыми name открыт может быть только один (аккордеон), <noscript async blocking="render"> блокирует рендер, <input type="file" accept="video/*" capture> сделает запись с пользовательской камеры

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

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

Сортировка и поиск с localeCompare

С задачей обычной сортировки, если речь про английский язык или числа, норм справляется sort() или sort((a, b) => a - b).

Но вот когда сортируются «неанглийские» строки, то тогда пригодится метод localeCompare у строк: sort((a, b) => a.localeCompare(b)), который сравнивает сроки учитывая действующую локаль пользовательской системы. Грубо говоря, где в текущей локали один Unicode-символ находится по сравнению с другим символом – перед ним или после него?

Что интересно, базовый метод появился в браузерах ещё практически с начала существования Chrome, Firefox и Safari. Но позже в него была добавлена поддержка дополнительных параметров, уточняющих как именно нужно сравнивать строки. Причём под капотом localeCompare будет вызывать Intl.Collator API, в браузерах его поддерживающих.

Настройка caseFirst — первыми идёт нижний регистр или верхний:

['Е', 'а', 'е', 'А'].sort((a, b) => a.localeCompare(b, 'ru'))
// по умолчанию сначала нижний регистр
// ["а","А","е","Е"]

['Е', 'а', 'е', 'А'].sort((a, b) => a.localeCompare(b, 'ru', { caseFirst: 'upper' }))
// теперь сначала идёт верхний регистр
// ["А","а","Е","е"]

Это актуально и для английских текстов тоже.

Настройка sensitivity — учитывать ли при сравнении регистр и вспомогательные символы вокруг буквы (a и á, е и ё):

'лёд'.localeCompare('ЛЕД', 'ru', { sensitivity: 'variant' }) === 0
// л ≠ д, е ≠ ё, л ≠ Л
// false

'лед'.localeCompare('лёд', 'ru', { sensitivity: 'case' }) === 0
// л ≠ д, е = ё, л ≠ Л.
// true

'Лёд'.localeCompare('лёд', 'ru', { sensitivity: 'accent' }) === 0
// л ≠ д, е ≠ ё, л = Л
// true

'лёд'.localeCompare('ЛЕД', 'ru', { sensitivity: 'base' }) === 0
// л ≠ д, е = ё, л = Л
// true

То есть если пользователь вводит в поиск ЛЕД, можно однозначно определить, что это лёд прямо в браузере.

Настройка numeric — для корректной сортировки строк с числами:

['09', '1', '2', '01', '10'].sort((a, b) => a.localeCompare(b))
// по умолчанию сортируется по символам
// ["01","09","1","10","2"]

['09', '1', '2', '01', '10'].sort((a, b) => a.localeCompare(b, 'ru', { numeric: true }))
// теперь строки учитываются как числа
// ["1","01","2","09","10"]

Так можно отсортировать строки с числами без явного приведения к числам.

Что радует, все возможные доп настройки доступны с Chrome 87, FF 85, Safari 14.1, Node 15.

Демо тут

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

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

Новости
- на волне новостей о React Compiler анонсирован выпуск Million Lint 1.0-rc: в отличие от компайлера, который пребилдит реакт-код, Million Lint втыкает в код точечно замеры производительности и уже на их основе выдаёт рекомендации в редакторе кода и подсвечивает проблемы с производительностью
- на той же волне анонсирован Next.js 15 RC: поддерживает React 19 RC, React Compiler, произошёл отказ от кеширования по умолчанию в fetch, GET Route Handlers и роутере, постепенно выкатывается реактовская система частичного пререндера Partial Prerendering (PPR) и after() API для отложенного запуска второстепенных тасков после выполнения основного запроса
- и снова на той же самой волне вышел SolidStart v1.0.0, метафреймворк на основе Solid, встроенного роутера, а также Vite, Nitro и другого опенсорса; конечно, не перестаю удивляться современной индустрии, которую люди из опенсорса натурально тащат вперёд на энтузиазме и за счёт синергии составляют конкуренцию корпорациям

Проекты
- Responsive Viewer — если много верстаете или тестируете на разных разрешениях, это плагин для браузера, чтобы одновременно на одном экране открыть несколько «девайсов» с синхронизацией скролла и кликов
- matcha.css — CSS-либа для стилизации чистой семантической разметки + небольшой набор классов хелперов для стилизации лейаута, цветов и подсветки синтаксиса (внутри нет !important-ов, то есть всё переопределяется пользовательскими стилями)
- open-props — коробка с CSS-переменными на все случаи жизни (цвета, размеры, шрифты, тени, скругления)
- react-google-maps — реакт-компоненты и хуки для Google Maps JavaScript API
- tsx — запускальщик ts-файлов в Node (одной строкой и без конфигов, бонусом есть вотчер)
- clack — либа для создания красивых и удобных cli-промптов

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

JS
- иногда для повышения читаемости можно сделать код более «композируемым», но повторяющимся (на примере реакт-компонентов), лишним if или switch кашу не испортишь
- Solid мимикрирует под реактовский JSX, но под капотом компонент в React — это функция, которая вызывается каждый раз при рендере, а в Solid — один раз и возвращает DOM-элемент; вместо useState используется createSignal, который тоже похож внешне и возвращает массив с функцией доступа к состоянию и сеттер, но на деле не вызовет ререндера компонента, а только изменит контент в DOM-ноде; также в Solid есть createEffect (похож на useEffect), в который в простейшем случае не нужно передавать зависимости, что может привести к неочевидным багам
- (я из 2012 понимает всю боль) реактивность — это прежде всего способ избежать связанности (coupling) кода

CSS
- ещё одно напоминание, что каскадные слои можно использовать для организации типов стилей, например, отдельно объявлять @layer reset, theme, layout, причём подключаться они будут в таком порядке независимо от порядка подключения в коде; также описан концепт, как через «ручки» (кастомные свойства) управлять параметрами лейаута страницы
- рецепт popover + @starting-style, на самом деле сгодится для любых «модалок» и появляшек: @starting-style привносит в этот паттерн недостающую декларативность, чтобы не приходилось вручную манипулировать классами/эвент-хэндлерами
- да и вообще, почему бы просто не добавить @starting-style ко всему
* { transition: opacity .5s ease-in; @starting-style { opacity: 0 } }?

HTML
- статья по мотивам недавнего опроса State of HTML 2023: людям нравится datalist (вывод: время адопта среднего HTML-элемента — 5 лет), не нравятся формы (стилизация, инпуты, валидация, кроссбраузерность), люди помнят о существовании веб-компонентов (и немного используют), людям не хватает нативных элементов datatable, tabs, switch/toggle
- в 2023 людям не хватало switch, а в 2024 он уже появился (пока правда только в Safari 17.4, но тем не менее), <input type="checkbox" switch /> можно стилизовать через ::thumb, ::track, но при этом он в отличие от чекбокса не может быть в indeterminate-состоянии и может быть required (в общем, ждём 5 лет и можно использовать)

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

Заметки первобытного разраба

Груг не так умён, но кодит много лет и чему-то научиться

Большеголовых разрабов много, и много кто думает он большеголовый разраб, сделать кислую мину, когда читать эту заметку

Сложность — плохо

Очень плохо, лучше груг сражаться с тиранозавром, он хотя бы его видит

Большеголовые разрабы и менеджеры впускают демон сложности в кодовую базу, они не боятся его или даже не знают

Сегодня груг работает с кодом и понимает, всё хорошо

Завтра невозможно: демон сложности вошёл в код и теперь очень опасно!

Груг не видит демон сложности, но чует его в коде. Демон дразнит, измени тут, сломается где-то там. Дубина не спасать от демон сложности, а бить самого груга

Магическое оружие против демона сложности — слово «нет». Нет, груг не делать эту фичу. Нет, груг не строить эту абстракцию.

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

Грустно, говори «да», а потом вини других гругов, когда вышел фейл, идеальный карьерный совет

Но иногда всё таки блестящие камни нужны, нет мясо динозавров, жена говорить груг дети нужна крыша и еда. Тогда груг говорить «лады». Лады, груг сделать эту фичу

Груг делать 80/20 решение, не со всеми свистелками, что хотеть менеджер, но делать свою работу, и демон сложности уходить

Факторинг кода

Это сложно правильно разбивать кодовую базу. Но груг понял, не разбивай кодовую базу слишком рано

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

Пройдёт время, система примет форму, и появятся линии для разреза

Хорошая линия для разреза иметь узкий интерфейс с системой. Мало число функций и абстракций заточают демона сложности в кристалл

Большеголовый разраб не такой, часто придумывать абстракции на старте проекта. Груг тянется к дубинке и хотеть кричать: «большеголовый не поддерживать код, а уходить в другой проект, груг поддерживать код!»

Рабочее демо хороший трюк, груг требовать от большеголового разраба демо завтра

У большеголовый большой мозг! Нужно его ограничивать для добра, не помогать демону сложности

Назови рабочее демо «прототип», менеджер будет приятно

Тесты

Груг любит и ненавидит тесты. Печально, но есть шаманы тестов. Делать из тестов идол, писать тесты до того как груг взялся за код и не понимать рабочую область

Легко не писать тест, оно работает на машине груга. Очень плохо, нет гарантии что работать где-то ещё или на машине груга в будущем

Груг писать интеграционные тесты, когда появляются линии разреза и система стабильна, интеграционный тест полезный долгое время

Рефакторинг

Рефакторинг хорошая идея попозже, когда код стабильный

Груг заметил, большой рефакторинг большая опасность провала. Поэтому делать маленький и не отплывать далеко от берегов. Идеально система работает всё время, шаги друг за другом

Много старый груг научился не ломать код бездумно, даже если он страшный

Опасность тут, мир страшный и уродливый часто и поэтому такой же и код

Смирение не всегда есть, груг говорит «не нравится, исправлю» и это много часов боли и система только хуже

Груг говорить надо улучшать система, но надо время понять её целиком и уважать работающий неидеальный код

Груг раньше писать код минимального размера, но это часто сложно читать и отлаживать

Груг думать DRY хороший совет, но иногда лучше скопировать код с небольшими вариациями чем делать новый агрумент

Груг считать принцип SoC не ок. Лучше весь код штуки будет в самой штуке, не надо искать файлы где что лежит

Фронтенд

Демон сложности овладел целая индустрия!

Создавать меньше сложности, не смотри на facebook или google. Реакт хорошо для карьера и некоторых приложений, но груг становиться служителем демона сложности

Груг видит много моды в разработке. Груг не боится показаться тупым говоря это слишком сложно и смущает груга!

Груг чувствует много синдром самозванца. Груг часто не понимает что происходит, боится сделать ошибку и разочаровать других гругов, самозванец!

Само программирование такое: никто не самозванец, если все самозванец

grugbrain.dev

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

Новости
- в FF будет добавлена генерация alt-ов с помощью нейросети прямо на устройстве: фича хорошо ложится в тренд, что AI будет появляться в браузерах и помогать пользователям с взаимодействием с сайтами и приложениями
- вышла react-testing-library v16.0.0: @testing-library/dom и @types/react-dom вынесены в отдельные зависимости, чтобы устранить возможные конфликты
- история с эпичным обновлением eslint продолжается: анонсирован ESLint Configuration Migrator — тула для автоматического перевода помощи в переводе .eslintrc.*-файлов в flat-формат eslint.config.js, чтобы не делать это руками (пока умеет немного и работает с простыми конфигами)
- анонсирован intent to ship директивы @property в FF (чтобы объявлять кастомное свойство с нужным типом): пригодится, например, для кроссбраузерного создания CSS-таймеров
- вышел Rspack v0.7: добавили lazy compilation (собирается не сразу весь проект, а только входные точки; остальное собирается на лету в момент доступа) и ускорили сборку CSS
- вышел Turborepo 2.0: новый консольный UI и watch mode для автозапуска скриптов, у которых нет своего режима --watch, например, eslint

Проекты
- client-side-rendering — у нас был Webpack, ленивая подгрузка чанков и ассетов, MutationObserver, современный React, несколько хуков, парочка сервис-воркеров и большое желание не юзать SSR. Не то, чтобы всё это было категорически необходимо в разработке, но если уж начал оптимизировать CSR, то к делу надо подходить серьёзно
- fxts — либа для функционального программирования на JS/TS c each, filter, fx, map, pipe, range и другой функциональщиной на борту

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

JS
- разбор темы дата-фетчинга в SPA c асинхронной реализацией, параллельными запросами, и, что показалось мне интересным, с разбором паттерна prefetch с помощью либы swr: предзагружаем бандл следующего компонента по onMouseEnter и заодно результат запроса кешируется и больше повторно не запрашивается
- Intl.DateTimeFormat как альтернатива moment.js и date-fns для форматирования даты в нужном виде, умеет: длинный/короткий формат в зависимости от локали, дни недели, минуты, часы, секунды, таймзоны, 12/24 часа
- статьи Josh Comeau всегда приятно читать, независимо от темы, вот и статья про промисы подоспела, вроде база, а изложена хорошо
- бестпрактисы создания хуков на примере SOLID-принципов: к примеру, HOC, подмешивающий данные через проп в компонент — это такой себе DI «на коленке»
- сборник новинок Node за последнее время: встроенный test runner, watch mode, corepack, .env loader, import.meta.file для __dirname и __file, timers promises

CSS
- свежий гайд по единицам измерениям CSS, примечателен двумя моментами: 1) выглядит, что Geoff Graham вернулся на CSS Tricks, возможно ресурс оживёт, 2) когда объявляется кастомное свойство @property --hue { syntax: "<number>" }, по сути это пользовательская «единица измерения»
- свойство gap для флексбоксов работает с Chrome 84, FF 63, Safari 14.1, то есть давно достойно применения, если нужен условный отступ между элементами, выключающийся при переносе на новую строку, в двунаправленных лейаутах, комбинируется с марджинами
- есть такой частый кейс — анимация с 0 до auto, которую из-за особенностей CSS не возможно сделать через calc(), поэтому есть предложение ввести новую функцию calc-size(), которая сможет анимировать между значениями, если одно из них intrinsic (auto, fit-content, stretch…)

HTML
- как можно улучшить якорные ссылки: scroll-behavior: smooth для плавного скролла, scroll-margin-top и scroll-padding-top для отступа после скролла, :has(h1:target) для стилизации таргет-элемента
- если вы до сих пишете rel="noopener" для безопасности, это можно уже не делать, так как браузеры сами неявно применяют эту фичу

Платформа
- то, что размер DOM (количество DOM-элементов) напрямую влияет на перфоманс как-то интуитивно понятно, но интересна деталь, что существенно сказывается именно глубина вложенности DOM-элементов друг в друга (глубина в 5000 элементов скажется уже на этапе построения дерева, даже до стилей)

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