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

Метрики Web Vitals

Wed, 24 Feb 2021 00:00:00 GMT

На ранжирование страниц в в Гугл-поиске влияет не только качество контента, но и хороший UX. По мнению Гугла его можно оценить по трём метрикам:

время загрузки сайта;
время до возможности взаимодействовать с интерактивнымм элементами на сайте;
визуальная «стабильность» интерфейса сайта.

Эти метрики объединили под общим названием Web Vitals. Теперь про каждую подробнее.

Время загрузки сайта (LCP, Largest Contentful Paint)

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

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

На эту метрику влияют:

➡️ Размер загружаемых ресурсов

нужно сжимать картинки и остальную статику саму по себе (минификация) и на сервере (gzip, brotli);
нужно уменьшать размер блочащих рендер ресурсов — JS и CSS — разделять их на мелкие бандлы по страницам, а реиспользуемый код выносить в небольшие отдельные модули.

➡️ Способ загрузки ресурсов

картинки нужно загружать «лениво», то есть только в момент, когда они становятся непосредственно видимы;
сторонние скрипты (аналитика, реклама, виджеты) нужно загружать асинхронно, вне основного потока.

Время до интерактивности (FID, First Input Delay)

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

Если задержки меньше 100 милисекунд, то человеком это воспринимается нормально; 100-300мс — может казаться тормознутым; больше 300мс — явно тормозит, плохо.

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

долгие таски в JS-коде;
неоптимальное использование операций, вызывающие перерасчёт лейаута страницы (список операций);
большое количество DOM-нод на странице.

Визуальная «стабильность» интерфейса (CLS, Cumulative Layout Shift)

Дословно — сдвиги лейаута при загрузке. Если при загрузке страница «прыгает», элементы перескакивают с места не место, загружающиеся элементы сдвигают контент, то это плохо влияет на пользовательский опыт.

➡️ Чаще всего сдвиги могут вызывать подгружающиеся картинки, видео, реклама. Фиксится заданием фиксированных размеров картинкам и контейнерам, в которые вставляет реклама.

➡️ Если сдвиги происходят после отрабатывания скриптов, то тоже можно поставить «подпорки» в CSS, которые не допустят сдвигов.

➡️ Если контент сдвигается при подгрузке и применении кастомного шрифта, то можно изменить способ показа шрифта на font-display: optional, то есть скрывать текст и задерживать «мигание» до 100мс, пока не загрузится шрифт. Также можно использовать формат шрифтов woff2, вырезать ненужные символы и предзагружать шрифты.

⚡️ Как измерять в продакшене

В сервисе PageSpeed Insight или webpagetest.

💻 Как измерять при разработке

Локально можно воспользоваться сервисом Lighthouse или расширением Web Vitals для Хрома. Также посдсветка Web Vitals появилась во вкладке "Performance" в Dev Tools 88-й версии Хрома.

Так как метрика First Input Delay (FID) не может быть достоверно измерена локально, то её можно «проксировать» другой метрикой — Total Blocking Time (TBT). Это время с начала отрисовки страницы до момента её полной готовности к взаимодействию. Улучшение TBT приведёт к улучшению реальной пользовательской FID.

Скриншоты в Dev Tools

Thu, 25 Feb 2021 00:00:00 GMT

Из средств разработчика DevTools в Chrome и Firefox можно делать скриншоты.

📸 Отдельная DOM-нода страницы

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

в Chrome — вкладка Elements, в меню на ноде пункт Capture node screenshot;
в Firefox — вкладка Inspector, в меню на ноде пункт Screenshot Node.

📸 Выделенная область или весь сайт

Для этого нужно перейти в режим «адаптивности» и оттуда уже сделать скриншот:

в Chrome нужно нажать кнопку Toggle device toolbar в левом верхнем углу окошка средств разработчика (или нажать Cmd/Ctrl + Shift + M), затем в появившейся верхней панели в её правом углу нажать три точки, чтобы выпало меню, и там выбрать Capture screenshot (для снимка видимой области) или Capture full size screenshot (для снимка всего экрана). Также эти команды можно вызвать текстом из командного меню по Cmd/Ctrl + Shift + P;
в Firefox нужно перейти в режим Responsive Design Mode кнопкой в правом верхнем углу окошка средств разработчика (или нажать Cmd/Ctrl + Opt/Alt + M), затем в появившейся верхней панели нажать на иконку с фотоаппаратом. Чтобы заскриншотить всю страницу, то сначала нужно включить эту фичу в настройках DevTools: открыть настройки и там поставиьт галочку Take a screenshot of the entire page. После этого рядом с иконкой Responsive Design Mode появится иконка с фотоаппаратом, которая делает полноразмерный скриншот страницы.

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

💡 Заодно в настройках FF нашёл встроенную в DevTools линейку.

Event loop и рендер в браузере, часть 1

Tue, 16 Mar 2021 00:00:00 GMT

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

К вам сразу же клиенты начинают звонить по телефону. Ваша задача:

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

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

Event Loop

А теперь представьте, что в браузере есть тоже некий «исполнитель», который на сайте постоянно ждёт задачи на исполнение — такой бесконечный цикл, который называется Event Loop. Он делает все задачи по исполнению JS-кода (Task) и отрисовке сайта (Render). Этот исполнитель один, и работает он в одном «потоке», так как задачи по исполнению JS-кода и отрисовке DOM взаимосвязаны и их проблематично разделять. Event loop связан с обновлением экрана — в нём рассчитываются кадры страницы.

Все JS-задачи, которые поступают на исполнение, ставятся в очередь — TaskQueue. Задачи по рендеру тоже записываются в очередь — RenderQueue. Вспомните пример со звонками и почтой. Исполнитель делает поступающие JS-задачи (это очередь телефонных звонков), а когда освобождается от них, переходит к задачам по отрисовке интерфейса (отправка почты).

В приоритете — работа с JS-задачами, а когда приходит необходимость отрисовать следующий кадр для обновления экрана, Event Loop переходит к задачам отрисовки.

Как определяется эта необходимость? Современные устройства работают с частотой отрисовки 60 кадров в секунду (FPS). Это значит, что каждые 16.6мс (1/60 секунды) браузеру нужно перерисовывать следующий кадр.

В случае с общением нашего менеджера с клиентами по телефону, длинные звонки «задерживают» отправку почты. Так же и длинные JS-задачи (>16.6мс) заставляют браузер откладывать отрисовку. Поэтому в момент, когда отрисовка уже была нужна, браузер может «пропустить» кадр. То есть частота обновления кадров станет уже <60FPS. Визуально интерфейс начнёт «подтормаживать» или вообще «фризиться».

Аналогично и со случаем, когда много писем в очереди могут помешать менеджеру вовремя отвечать на звонки. Если в RenderQueue задач по отрисовке много или они сложные, то исполнение JS-задач в TaskQueue тоже может задерживаться, что проявляется в «тормозах».

Микротаски

Есть ещё одна разновидность задач — микротаски (MicroTask). Это такие особенные JS-задачи — колбеки для Promise или mutationObserver. Микротаски собираются в отдельную очередь — MicroTaskQueue. Чем микротаски отличаются от обычных тасков? Они исполняются сразу же, когда дорабатывает текущий таск или микротаск, то есть вне очереди TaskQueue и RenderQueue. Эта особенность может быть критична в случае, когда микротаски циклично вызывают следующие микротаски, откладывая рендер и обычные JS-таски, так как до них просто не доходит очередь.

Event loop и рендер в браузере, часть 2

Thu, 18 Mar 2021 00:00:00 GMT

Что происходит в RenderQueue?

Вот в такой последовательности исполняется рендер:

JS (RequestAnimationFrame) > Style > Layout > Paint > Composite

Этап JS (RequestAnimationFrame)

В момент, когда браузер освобождается от JS-тасок и микротасок, он готов выполнять рендер. С помощью колбека requestAnimationFrame можно «подписаться на свободный момент» в общей очереди исполнения задач. Так как браузер гарантированно будет «не занят» чем-то другим, то это удобный момент, чтобы отрисовать анимацию, посчитать что-то или изменить кадр до его отрисовки.

Этап Style

На этом этапе выясняется, какие CSS-правила применяются к элементам на странице и затем вычисляются (computed) значения CSS-свойств всех необходимых правил. Также если из JS напрямую изменяются значения CSS-свойств или на элементы навешиваются CSS-классы, то тоже запускается этот этап.

Этап Layout

Браузер определяет слои с элементами, вычисляет, какого размера элементы, и где они находятся в слое. Так как элементы в слое влияют друг на друга в потоке, то изменение размеров одного элемента может повлечь сдвиг и повторный layout дочерних или последующих элементов. При изменении размеров элементов в JS или даже при считывании информации о размерах, браузер форсирует исполнение layout — выполняет force layout — что приводит к остановке исполнения JS-тасок или микротасок и экстренной перерисовке. Список операций, форсирующих layout

Этап Paint

Браузер отрисовывает текст, цвета, изображения, рамки и весь остальной внешний вид элементов.

Этап Composite

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

Особенные CSS-свойства для этого этапа — transform и will-change. Для элементов с заданным transform браузер задействует процесс composition. В случае с will-change — это подсказка для браузера, что для элемента нужно использовать composition-процесс.

Стрелочная функция и new

Tue, 16 Feb 2021 00:00:00 GMT

Обычная функция function может использоваться в качестве конструктора:

function Dog(color) {
  this.color = color;
}

const blackDog = new Dog("black");

Стрелочная функция не может использоваться как конструктор. При попытке использования выбросится ошибка TypeError.

const Dog = (color) => {
  this.color = color;
};

const blackDog = new Dog("black");
// TypeError: Dog is not a constructor

DOM и JS-фреймворки

Fri, 19 Feb 2021 00:00:00 GMT

В фреймворках React и Vue используется концепт «Virtual DOM». Это представление «реального» UI, то есть DOM-а в браузере пользователя, в виде объекта в JS. Этот объект хранится в памяти браузера и представляет собой такую же иерархическую структуру, что и настоящее DOM-дерево. Упрощённо говоря — так:

<div class="box">
  <h1>Title</h1>
</div>

const virtualNode = {
  type: "div",
  props: {
    className: "box",
    children: [
      {
        type: "h1",
        props: {
          children: ["Title"],
        },
      },
    ],
  },
};

Зачем делать такую копию DOM-а в памяти? Это нужно для оптимизации работы с настоящим DOM-ом в браузере. Возьмём пример: в браузере отрисовано 1000 DOM-нод, среди них нужно заменить одну ноду. Брать и заменять всё содержимое родительской ноды — неоптимально.

Лучше будет:

Хранить предыдущее и новое состояние (в памяти, виртуальном DOM-е).
По специальному алгоритму найти различия между двумя состояниями.
И затем синхронизировать реальное и виртуальное представление DOM-а, обновив точечно только нужные части дерева.

Этот процесс «сверки» нод в React называется reconciliation (в русском уже адаптировалось «реконсиляция»). Полное сравнение двух DOM-деревьев может быть довольно «дорогим» по ресурсам, особенно когда нод в них много. Поэтому во фреймворках в алгоритмах сверки и обновления заложены допущения, позволяющие избежать трат слишком больших ресурсов компьютера.

Например:

В повторяющихся наборах (списках, листингах) каждая нода помечается уникальным «ключом» — атрибутом key. По таким «подсказкам от разработчика» (уникальным идентификаторам, хэшам) фреймворку легче сравнивать ноды в DOM-деревьях: можно распознать изменение, не залезая внутрь ноды и не ориентируясь на её очерёдность в списке. Задача сводится к работе с «набором ключей» (HashMap): фреймворк определяет появление элементов с новыми ключами или изменение порядка элементов по их ключам.
Если меняется тип DOM-ноды, например, с <p> на <div>, то фреймворк заменит саму ноду и все её дочерние элементы целиком.

Плавный скролл в CSS

Mon, 22 Feb 2021 00:00:00 GMT

Переход по якорным ссылкам внутри страницы мгновенно «перебрасывает» к нужному месту:

<a class="back-to-top" href="#top">Scroll to Top</a>

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

Нативное решение можно сделать и на JS, и на CSS.

JS-решение

В метод scroll или scrollIntoView передаётся настройка behavior: 'smooth':

const backLink = document.querySelector(".back-to-top");

backLink.addEventListener("click", (e) => {
  // отключаем «перескок» по умолчанию
  e.preventDefault();

  // плавно скроллим к самому верху страницы
  window.scroll({ top: 0, behavior: "smooth" });

  // или скроллим к элементу с id="top"
  document.querySelector("#top").scrollIntoView({ behavior: "smooth" });
});

CSS-решение

Контейнеру со скроллом задаётся свойство scroll-behavior. Это может быть и вся страница, то есть контейнер самого верхнего уровня — html:

html {
  scroll-behavior: smooth;
}

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

#top {
  scroll-margin-top: 20px;
}

Таким образом от верхнего края экрана до блока, к которому произошёл скролл, останется «зазор» в 20 пикселей.

Зачем нужен Symbol?

Tue, 23 Feb 2021 00:00:00 GMT

В JS есть тип данных — Symbol. Название не говорящее само за себя сходу, и непонятно зачем он нужен. Давайте разбираться.

Вообще Symbol — это встроенный в язык инструмент для создания гарантированно уникальных и неизменных значений, идентификаторов.

const mySymbol = Symbol();

В переменной mySymbol в примере кода выше будет храниться «нечто», что уникально и что нельзя никак изменить, похожее и на объект, и на примитив.

Symbol появился в стандарте ES2015, когда язык сильно менялся и в нём появлялись новые методы. При появлении новых фич нужно было не «сломать» старые.

В частности нужна была возможность добавлять в объекты новые свойства, но чтобы:

Все методы для «перебора», например, for-in или Object.keys(), продолжили работать как раньше;
Не было риска «пересечения» названий новых и уже существующих свойств.

Про перебор

Например, у объекта есть условно три свойства:

const myObject = { first: "1", second: "2", third: "3" };

Предположим, что некая программа рассчитывает, что у объекта есть ровно три свойства, к примеру, при переборе в цикле for-in. И если комитет разработки языка вдруг решит, что у всех объектов в JS должно просто появиться новое четвёртое свойство, например, coolNewProperty, то программа сломается.

А вот если создать новое свойство объекта как символ, то оно не появится в списке всех свойств при итерации.

const myObject = { first: "1", second: "2", third: "3" };
const coolNewProperty = Symbol();

myObject[coolNewProperty] = "coolNewValue";

for (let property in myObject) {
  console.log(property);
  // Выведется first second third
}

console.log(myObject[coolNewProperty]);
// Выведется coolNewValue

Про «пересечение» имён

С помощью символа можно «безопасно» создать новое свойство в объекте, не боясь, что в будущих версиях языка или сторонних библиотеках появится свойство с таким же названием.

let myArray = [1, 2, 3];

const reverse = Symbol();

Array.prototype[reverse] = () => console.log("custom reverse");

console.log(myArray.reverse());
// Выведется [3, 2, 1]

console.log(myArray[reverse]());
// Выведется custom reverse

Реактивность в CSS

Mon, 15 Feb 2021 00:00:00 GMT

Реактивность — это когда изменение состояния одной штуки приводит к реакции — изменению состояния других штук. К примеру, если температура воздуха опустилась ниже 0°C, вода замёрзнет и сожмётся.

Реактивность в программировании тоже про реакцию на изменение состояния. Пример:

let number = 2;
let doubled = number * 2;
// doubled равно 4

Число number — это переменная состояния. Удвоенное число doubled «выводится» из этой переменной. Если число меняется, то удвоенное число по умолчанию не «обновится», нужно явно вычислить его ещё раз:

let number = 2;
let doubled = number * 2;
// doubled равно 4

number = 5;
doubled = number * 2;
// doubled равно 10

Такая «ручная реактивность» неоптимальна. Современные JS-фреймворки, например Svelte, умеют в автоматическую реактивность. Для этого «реактивное» значение нужно явно определить, а фреймворк будет автоматически следить за изменением «источников» и пересчитывать состояние:

let number = 2;
$: doubled = number * 2;
// doubled равно 4

number = 5;
// doubled стало 10

Нативные переменные в CSS — сразу реактивные «из коробки». Браузер будет следить за их изменением и пересчитывать все зависящие от них значения.

<div class="block"></div>
<div class="block modified"></div>

.block {
  --number: 20px;
  --doubled: calc(var(--number) * 2);

  width: var(--doubled);
  /* width равно 40px */
}

.block.modified {
  --number: 50px;
  /* width стало 100px */
}

Hot Module Replacement на нативных ES-модулях

Fri, 26 Feb 2021 00:00:00 GMT

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

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

Ок, сделали. Перебилд теперь проиcходит быстрее, но страницу всё ещё приходится полностью перезагружать для обновления. Теперь задача в том, чтобы точечно обновить загруженный код в вашем браузере с запущенным сервером. Как это сделать «на горячую», без перезагрузки всей страницы целиком? Для этого придуман подход Hot Module Replacement (HMR).

HMR — это способ точечного обновления в браузере только изменившихся JS-модулей приложения вместо полной перезагрузки страницы. Дальше я рассмотрю, как HMR реализован в сборщиках на нативных ES-модулях — например, в Snowpack или Vite.

В HMR-движке на нативных ES-модулях есть две части: серверная и клиентская.

На сервере из всех модулей и их зависимостей (import и export) строится дерево: в корне — «главный» модуль (что-то типа app.js), от него расходится древовидная цепочка подключаемых JS-модулей, от которых модуль зависит.

Также на сервере стороне подготавливаются все файлы модулей и запускается WebSocket Server, который будет ждать сообщения от клиента, с запросом на пересборку дерева или на перезагрузку страницы целиком.

Клиент подключается к серверу по WebSocket. Когда изменяется один из файлов JS-модулей, от клиента на сервер отправляется сообщение, какой именно модуль изменился.

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

Так как в движке используется механизм нативных ES-модулей найти «граничный» родительский модуль и заменить его — достаточно. Все дочерние зависимости модуля уже обработаются и загрузятся автоматически самим браузером.

Итоговый найденный «граничный» модуль теперь нужно «подменить», а затем перестроить дерево зависимостей (убрать старые связи и добавить новые), ведь во внесённых изменениях могли быть подключены новые модули.

Как же именно «подменяется» модуль со старого на новый?

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

Чтобы импортировать свежий файл (не кешированную браузером версию), то к импорту можно добавить уникальную метку, например, текущий timestamp:

const updateID = Date.now();
import(muduleName + `?time=${updateID}`);

Остаётся решить вопрос, как при такой «подмене» передать в новый модуль состояние из старого модуля.

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

Посмотрим детали реализации.

Всю служебную инфу о модуле будем записывать в специальном объекте import.meta.

Самое первое, что нужно, это пометка, участвует ли модуль в HMR-процессе. Это объект import.meta.hot:

// тут идёт код модуля
let test = 1;

//...

if (import.meta.hot) {
  // в этот условии записывается вся начинка HMR
  // нужная только для режима разработки
}

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

Внутри import.meta.hot есть несколько методов, которые будут вызываться на этапах «жизни» HMR-модуля и свойств.

import.meta.hot.accept — этот метод, который в старом модуле принимает подменённый новый модуль.

export let value = 1;

import.meta.hot.accept(({ module }) => {
  // module – новый импортированный модуль
  value = module.value;
});

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

import.meta.hot.dispose — этот метод, который в старом модуле запускается перед подключением нового модуля, чтобы подчистить в старом необходимые штуки (отключить стили, снять обработчики событий).

document.head.appendChild(style);

import.meta.hot.dispose(() => {
  document.head.removeChild(style);
});

import.meta.hot.decline — это метод для того, чтобы модуль мог безусловно отклонить HMR-обновление. Этот метод триггерит полную перезагрузку страницы. Он нужнен, например, в случае, если модуль вносит в состояние приложения какие-то непоправимые сайд-эффекты.

// HMR безусловно отклоняется
import.meta.hot.decline();

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

// Если something, то модуль инвалидируется
import.meta.hot.accept(({ module }) => {
  if (something) {
    import.meta.hot.invalidate();
  }
});

import.meta.hot.data — «буфер» для передачи данных между обновлением модулей (к нему можно обращаться между dispose() и accept()).

export let value = 1;

if (import.meta.hot) {
  // Приём данных от прошлого dispose
  import.meta.hot.accept(({ module }) => {
    value = import.meta.hot.data.value || module.value;
  });

  // Отправка данных будущему accept
  import.meta.hot.dispose(() => {
    import.meta.hot.data = { value };
  });
}

Важное дополнение про ES-модули. Так как ES-модули не поддерживают неотносительные пути при подключении — import {init} from 'module', то на первом этапе «сборки» нужно для дев-режима автоматически пройтись по всем файлам и заменить пути импортов на относительные import {init} from '/node_modules/module'.

Event loop и рендер в браузере, часть 3

Sat, 20 Mar 2021 00:00:00 GMT

Как оптимизировать Render

Чем меньше операций производится браузером, тем лучше производительность. При первоначальной загрузке сайта браузер выполяет все этапы RequestAnimationFrame > Style > Layout > Paint > Composite.

Минимизировать количество layout

После загрузки страницы уже не каждая операция в JS обязательно проходит по всему циклу рендера.

Например, если изменить что-то из свойств, затрагивающих лейаут страницы (размеры, отступы, позиционирование) или считать их в JS, то сработает layout, а за ним нужно будет снова перерисовать элементы в paint и сложить в слои в composition.

Получается довольно затратная по производительности цепочка операций.

А если, к примеру, для перепозиционирования элементов изменять свойство transform, то браузеру не требуется перестраивать сетку страницы и делать перерисовку элементов, и поэтому этап layout и paint не запускается повторно. Работа идёт только на этапе composite, поэтому операций становится существенно меньше, и они уже не такие тяжёлые.

Также «тяжёлый» этап layout пропускается, если изменяетя только внешний вид элемента, например, фоновое изображение, цвет текста или тень, а не его размеры. В этом случае выполняется только paint и composite.

Использовать requestAnimationFrame

Если приходить к браузеру в нужный момент, когда он готов начинать отрисовку следующего кадра, то тем самым мы не прерываем форсированно работу JS-тасок или микротасок.

Использовать CSS-анимации

Анимации, сделанные на JS, вдобавок к исполнению JS-таски будут в лучшем случае прождать процесс composition (в худшем ещё и style, layout, paint). Поэтому если делать анимации в CSS, количество тасок для Event Loop будет меньше, так как мы не создаём JS-таски.

Кроме того, все CSS-анимации и процесс composition браузер выполняет с задействованием GPU, а не только с помощью CPU. Если браузер выясняет, что изменяемые свойства не влияют на layout и paint, то он отрисовывает слои в картинки (делает ещё раз repaint) и вместе с информацией о слоях передаёт их в GPU. Процессинг в GPU не зависит от CPU, и поэтому разгружает основной поток исполнения задач. Преимущетсво именно в параллельности, так как когда, например, слоёв мало или нет драйвера для видеокарты, то браузер не включает GPU, а запускает composition в отдельном CPU-треде и получается прирост произовдительности.

Также отдельные composition-слои могут создаваться неявно, если анимируемый элемент находится «под» другими слоями. Так для каждого вышележащего слоя будет создаваться отдельный composition-слой.

У CSS-анимаций есть ограничения.

Чем больше composition-слоёв формируются и чем они больше по размеру, тем дольше происходит передача слоёв с CPU на GPU и может появиться «мигание».

Кроме того, каждый слой в GPU занимает место в памяти видеокарты. Размер памяти тоже ограничен, как и вычислительное время процессора.

Использовать will-change

Использование этого свойства может подсказать браузеру сделать необходимую подготовку, например, заранее создать отдельный слой для процесса composition. Когда дело дойдёт до изменения указанных в will-change свойств, браузеру не нужно будет делать подготовку, так как он её произвёл заранее, в свободный момент.

Отдельный composition-слой будет создаваться браузером, если задавать will-change для opacity, transform, top, left, bottom, right.

Но задавать will-change для всего сразу тоже вредно, так как это может создать нагрузку на GPU:

на обработку GPU будут передаваться слишком большие картинки, что будет тратить время на передачу и загружать память видеокарты (на мобильных девайсах это особенно критично, так как этой памяти немного);
картинок будет слишком много, что тоже скажется на скорости процесса передачи и на количестве потраченной памяти.

Поэтому will-change лучше применять точечно для улучшение плохой ситуации с перфомансом непосредственно перед грядущей перерисовкой, и по возможности его выключать после отрисовки. Помимо количества слоёв, можно снижать размеры слоёв. Чем меньше, тем лучше.

Когда overflow: hidden не работает

Thu, 10 Jun 2021 00:00:00 GMT

Есть несколько причин, по которым дочерние боксы элементов, могут «вываливаться» из родительских.

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

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

Также если дочернему боксу заданы отрицательное значение margin или элемент абсолютно спозиционирован так, что он выходит за пределы родителя.

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

Но overflow: hidden не всегда обрезает выходящее за пределы содержимое бокса. Есть исключение: абсолютно спозиционированный элемент не будет обрезаться родительским элементом с overflow: hidden, если родитель не является содержащим блоком (containing block), то есть ему не заданы position со значением absolute, relative или fixed.

Пример:

<div class="parent">
  <div class="overflow">
    <div class="absolute-child">LonglonglonglonglongAbsolute</div>
    <div class="static-child">LonglonglonglonglongStatic</div>
  </div>
</div>

.parent {
  position: relative;
}
.overflow {
  overflow: hidden;
}
.absolute-child {
  position: absolute;
}
.static-child {
  position: static;
}

В примере бокс .absolute-child не обрезается по границам бокса .overflow, а при этом .static-child — обрезается, так как он имеет обычное позиционирование. Пример в codepen

Статистика использования фич на сайтах

Sat, 26 Jun 2021 00:00:00 GMT

Как узнать, как часто та или иная HTML-, CSS- или JS-фича используются на сайтах в интернете? Окей, на Can I Use можно узнать, как фичи поддерживаются браузерами. Но как узнать часто ли фичи используются разработчиками?

К примеру, нужно узнать про сайты:

как часто в стилевых файлах используется Grid Layout или @import?
много ли где в HTML встречается атрибут placeholder или required?
насколько в JS-файлах распространён fetch или ResizeObserver?

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

Сервис статистики Chrome Stats

Каждый браузер Chrome собирает анонимную статистику. Разработчики Chrome добавляют в код браузера «счётчики» использования фич. Если пользоваль открывает в своём браузере сайт с определённой фичей, то «счётчик» увеличивается. В итоге получается такая статистика: сколько процентов страниц, загруженных через Chrome, было с интересующей фичей (фича встретилась в коде хотя бы один раз).

Посмотреть статистику можно тут. На 1 июня 2021 года:

по Grid Layout — стили 9-10% всех загруженных пользователями страниц содержит гриды (источник);
по @import — в CSS-коде почти 15% всех загруженных страниц используются директива @import (источник);
атрибут placeholder встретился в HTML-коде 52% сайтов (источник);
атрибут required появился на 9% сайтов (источник);
fetch использовался на 38% сайтах (источник);
ResizeObserver был замечен на 17% загруженных сайтов (источник).

В отдельном разделе живёт детальная статистика по использованию в коде CSS-свойств.

Самое клёвое, что есть не только текущая статистика, но и график её «адаптации» на сайтах со временем (период в несколько лет).

Статистика HTTP Archive

«Счётчики» в Chrome Stats анонимные, то есть не показывают конкретные адреса сайтов и абсолютное количество проанализированных страниц. А вот у HTTP Archive, где собирается и анализируется «архив сайтов», есть публичный датасет в сервисе BigQuery. Превью этих данных есть также на самой странице Chrome Stats.

К примеру, в таблице за 1 июня 2021 года сохранено 6435567 десктопных и 7452047 мобильных страниц. По этим страницам собрана информация:

по тем же «счётчикам», что и в Chrome Stats, только с привязкой к конкретному сайту;
лог работы движка V8 на странице;
метрики Web Vitals;
количество HTML-элементов и доступность страницы;
картинки и другой медиа-контент на странице;
использованные сторонние приложения и библиотеки (jQuery, React, Google Analytics…).

Чтобы отобразить эту информацию, нужно знать SQL. В прочем, в HTTP Archive есть и уже готовые отчёты о состоянии веба, которые просто открываются в браузере.

var(--) валидно?

Sun, 04 Jul 2021 00:00:00 GMT

Представьте себе CSS-код:

body {
  --: honeydew;
  background-color: var(--);
}

Как вы думаете, сработает ли такой код в браузерах, и валидно ли имя кастомного свойства --?

Ответ: да, в июне 2021 код работает в Chrome, Firefox и Safari. Но имя переменной -- формально невалидно.

Текущий черновик спеки о кастомных свойствах зарезервировал кастомное свойство -- для будущего использования в CSS.

Объясню идею авторов спеки.

В CSS есть наследование: значения некоторых свойств (например, color или font-size), а также кастомных свойств передаются от родителя к детям:

body {
  color: rgb(51, 51, 51);
  --gap-size: 10px;
}

p {
  /* color тоже будет rgb(51, 51, 51) */
  padding: var(--gap-size); /* 10px */
}

Если эффект наследования нежелателен, его можно отменить ключевым словом initial:

body {
  color: rgb(51, 51, 51);
  --gap-size: 10px;
}

p {
  color: initial; /* значение rgb(0, 0, 0) */
  --gap-size: initial; /* значение «пустое» */
}

Если же хочется отменить все наследуемые свойства, но при этом не хочется их все перечислять, есть свойство all, которое обращается сразу ко всем возможным CSS-свойствам сразу:

body {
  color: rgb(51, 51, 51);
  font-size: 20px;
}

p {
  all: initial;
  /*
  color: initial, то есть rgb(0, 0, 0)
  font-size: initial, то есть 16px
  */
}

У свойства all есть пара исключений: одно из них — оно не затрагивает кастомные свойства, для сброса их придётся перечислять все до единого:

body {
  --prop-1: 123;
  --prop-2: red;
  --prop-3: 10px;
}

p {
  --prop-1: initial;
  --prop-2: initial;
  --prop-3: initial;
}

Так вот идея авторов спеки — сделать свойство с именем -- аналогом all только для кастомных свойств. Чтобы можно было написать:

body {
  --prop-1: 123;
  --prop-2: red;
  --prop-3: 10px;
}

p {
  --: initial;
  /*
  --prop-1: initial, то есть значение «пустое»
  --prop-2: initial, то есть значение «пустое»
  --prop-3: initial, то есть значение «пустое»
  */
}

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

А пока что не используйте var(--), если вдруг эта мысль вам приходила в голову, так как оно вероятно перестанет работать.

Баг уже починен в Firefox Nightly, а в Chrome багрепорт пока только заведён.

Декларативность и сотрудничество в HTML

Thu, 07 Oct 2021 00:00:00 GMT

Есть некоторые клёвые API в HTML/CSS, которые прям доставляют. Чтоб решить задачу, вместо императивщины сообщаешь браузеру нужную инфу, а он делает всю остальную работу.

Хочу рассказать про srcset и sizes у <img>. Для чего они нужны? Прежде всего — подсказать браузеру, какую версию картинки начать загружать, когда только парсится HTML, и браузеру ещё ничего неизвестно о лейауте страницы. Браузер будет полагаться на подсказки, оставленные разработчиком, и исходя из них начинать сразу же загружать нужную картинку, не дожидаясь полного окончания парсинга страницы и применения стилей.

Частый кейс — указание обычной или ретиновой версии картинки. Браузер на этапе загрузки картинки ещё не знает какого она будет размера. Зато при загрузке картинки у браузера уже есть информация, что за экран у устройства: обычный или ретиновый. Поэтому разработчик подсказывает ему: вот эта картинка поменьше — для обычной плотности пикселей (1x), а вот эта картинка побольше — для большей (2x):

<img src="picture1.jpg" srcset="picture1.jpg 1x, picture2.jpg 2x" alt="" />

Браузер получает подсказку от разработчика, какая картинка для какого экрана подходит, и сам делает выбор: если экран ретиновый, грузит 2x-версию, а иначе — 1x. Более сложная логика описания srcset нужна, если разработчик хочет предусмотреть, что на разных разрешениях экрана должны загружаться картинки разного размера. При загрузке картинки у браузера уже есть информация, какой размер вьюпорта на устройстве. А у разработчика есть инфа, какая картинка какому размеру соответствует. То есть разработчик заранее подказывает браузеру: вот эта картинка шириной 100px, вот эта — 500px, а вот эта — 1000px.

<img
  src="default.jpg"
  srcset="small.jpg 100w, medium.jpg 300w, large.jpg 1000w"
  alt=""
/>

Браузер руководствуется подсказкой разработчика и делает выбор: ага, сейчас вьюпорт десктопный >1000px, поэтому беру large.jpg и загружаю. Если бы вьюпорт был поменьше, то была бы загружена соответствующая более мелкая версия картинки. Но картинки не всегда показываются на всю ширину вьюпорта! Ок, браузер выбрал картинку large.jpg, так как вьюпорт был >1000px. А на самом деле картинка после загрузки стилей будет показана не на всю ширину вьюпорта, а вписана в блок шириной 300px. Об этом браузер не мог знать заранее, на этапе, когда он встретил при парсинге разметки тег <img />, и поэтому сделал неверное предположение и загрузил слишком большую картинку. Поэтому браузеру нужна ещё и инфа, которую заранее знает разработчик: какую часть вьюпорта будет занимать картинка, когда страница полностью загрузится. Например, на мобильном разрешении картинка будет на весь экран, а на более широком разрешении три картинки выстроятся в ряд и будут занимать каждая 1/3 размера вьюпорта. Эту инфу и сообщаем браузеру в атрибуте sizes: начиная с 1000px картинка будет занимать треть размера вьюпорта 33.3vw, а в остальных случаях — весь вьюпорт 100vw:

<img sizes="(min-width: 1000px) 33.3vw, 100vw" />

Таким образом у браузера есть все вводные для принятия решения: размер вьюпорта и плотность экрана (браузер знает сам), собственные размеры картинок и их размер на экране (разработчик сообщил в srcset и sizes). И дальше браузер сам принимает решение, какую картинку выбрать. А разработчику не нужно плясать с императивными конструкциями picture, что именно и когда именно браузеру показывать. Вроде всё классно, если разобраться, как это работает. Только вот если не разобраться, то выходит не очень: у sizes по умолчанию значение 100vw. То есть если не указать sizes, а указать только srcset, то браузер будет думать, что картинки всегда на всю ширину вьюпорта, а это часто не так. Выходит так, что фича классная, но если не въехать, как она работает, то толку нет — пользователь будет получать слишком большие картинки там, где мог получить меньшие.

Сборник примеров условных конструкций в CSS

Sun, 01 Jan 2023 00:00:00 GMT

Сборник примеров условных конструкций в CSS. «Встроенные умности» в синтаксисе для реализации типовых интерфейсных паттернов, которые CSS «додумывает сам» без необходимости добавления этой логики в JS.

Из побочных инсайтов: относительно Container Queries уже настолько привычно стало думать, что оно доедет до всех браузеров «когда-нибудь потом», что оказалось внезапно они уже легально есть и в Chrome, и в Safari, а в FF появятся в следующей версии. 🧙‍♂️

То же самое и про селектор :has, но в FF пока непонятно когда доедет до стабильной версии.

https://ishadeed.com/article/conditional-css/

Numeric Separators

Thu, 12 Jan 2023 00:00:00 GMT

В JS есть Numeric Separators для более удобного визуального разделения цифр в числах. Разделитель — это символ нижнего подчёркивания _ (U+005F).

1_000_000_000; // миллиард
101_475_938.38; // сотни миллионов

const fee = 123_00; // 12300
const fee = 12_300; // тоже 12300

const amount = 12345_00; // 1234500
const amount = 123_4500; // тоже 1234500
const amount = 1_234_500; // тоже 1234500

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

const a = 00_; // SyntaxError: No identifiers allowed directly after numeric literal

const b = _00; // ReferenceError: Can't find variable: _00
// ```

Нативный скоупинг в CSS

Mon, 16 Jan 2023 00:00:00 GMT

В Chrome начали пилить реализацию нативного скоупинга в CSS 🎉

Это чтобы можно было делать, например, вот так:

@scope (.light-theme) { a { color: purple; } }
@scope (.dark-theme) { a { color: plum; } }

<div class="dark-theme">
  <a href="#">plum</a>
  <div class="light-theme">
    <a href="#">purple</a>
  </div>
</div>

На самом деле спека, как это обычно бывает в CSS, довольно много всего предусматривает «с запасом», а не только показанное в примере.

Фича важная для CSS-in-JS и подобных «инкапсулирующих» решений, поэтому если фичу реализуют в этом году в Chrome, вангую, что остальные вендоры тоже быстро подтянутся.

Фича-флаги в CSS

Mon, 23 Jan 2023 00:00:00 GMT

Look Ma, это я в 2025 пишу фича-флаги прямо в CSS!

.component {
  /* обычные стили */
  /* ... */

  @container style(--wow-such-a-feature: true) {
    /* стили за фича-флагом */
    /* ... */
  }

  @container style(--wow-such-an-another-feature: true) {
    /* стили за фича-флагом */
    /* ... */
  }

реф

Пропоузал с недеструктивными методами изменения массивов

Wed, 25 Jan 2023 00:00:00 GMT

В конце января – начале февраля 2023 будет проходить митинг TC39, на котором, среди прочего, stage 4 будет брать пропоузал с недеструктивными методами изменения массивов:

Array.prototype.toReversed();
Array.prototype.toSorted(compareFn);
Array.prototype.toSpliced(start, deleteCount, ...items);
Array.prototype.with(index, value);

Суть методов toReversed, toSorted и toSpliced сходу понятна: это просто те же обычные reverse, sort и splice, которые возвращают новый массив вместо изменения старого:

[3, 10, 1].toReversed();
// [1, 10, 3]

[3, 10, 1].toSorted();
// [1, 10, 3]

[3, 10, 1].toSpliced(1, 2, 5, 6);
// [3, 5, 6]

А вот метод with уже сходу не очень понятен. Он про точечную замену: меняет один элемент массива на указанном индексе на другой:

[3, 10, 1].with(2, 0);
// [3, 10, 0]

Интересно ещё то, что эти методы уже доступны в бетке Chrome 110 без флага, то есть вероятно после встречи TC39, когда пропоузал выдет на stage 4, скоро выкатится и стабильный Chrome.

Алиасы в именованных CSS-цветах

Fri, 27 Jan 2023 00:00:00 GMT

В именованных CSS-цветах red — это алиас для #ff0000, а blue — это #0000ff. Но green — это не #00ff00, что кажется логичным. На самом деле green — это #008800. А за цвет #00ff00 отвечает алиас lime.

реф

Новые версии черновиков CSS Box Alignment Module Level 3 и CSS Positioned Layout Module Level 3

Thu, 16 Feb 2023 00:00:00 GMT

Фреймворки фремворками, а махина CSS медленно, но верно движется вперёд.

Вчера были опубликованы две новых версии черновиков CSS Box Alignment Module Level 3 и CSS Positioned Layout Module Level 3.

В Position 3 с прошлой публикации:

уточнили концептуально, что такое static position и static position rectangle,
а также явно прописали, что position: absolute вынуждает бокс получить independent formatting context (то есть если этот блок внутри грида и ему задали pos:abs, то субгрид внутри него выключится).

В Align 3 с прошлой публикации:

добавлены технические правки, связанные с baseline и особенностями выравнивания по ней,
также выравнивание при значениях space-around и space-evenly стало по умолчанию «безопасно» (то есть если такое выравнивание переполняет контейнер и приводит к обрезанию контента, то это выравнивание будет вести себя так, чтоб контент не обрезался, например, будет становиться как start),
уточнено, что для замещаемых элементов (например, img) не будет работать внутреннее выравнивание, так как внутри таких элементов не могу содержаться другие элементы.

Также несколько дней назад был обновлён CSS Snapshot 2023, к котором в раздел «Modules with Rough Interoperability» внесли три новых спецификации:

CSS Conditional Rules Module Level 4 @-правила, например, @supports и @media — сейчас лучше всего поддерживаются в Firefox, в отстающих Safari.
CSS Cascading and Inheritance Level 5 Каскадные слои @layer — тут в лидерах по имплементации Chrome, а Firefox отстаёт.
CSS Scroll Snap Module Level 1 Пристыковка к скроллу — ситуация примерно одинаковая во всех браузерах.

И ещё на очереди публикация первых версий черновиков Web Animations Level 2 и CSS Animations Level 2.

Также в раздел «Safe to Release pre-CR Exceptions» был добавлен relative color syntax.

Container Queries доехали везде

Fri, 17 Feb 2023 00:00:00 GMT

Короч, FF 110 вышел, Container Queries доехали везде, теперь можно! 💫

<div class="container">
  <div class="grid">
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </div>
</div>

.container {
  container-type: size;
  width: 500px;
}

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

@container (max-width: 500px) {
  .grid {
    grid-template-columns: 1fr;
  }
}

Как «прокачать» объект, чтобы он был итерируемым?

Mon, 20 Feb 2023 00:00:00 GMT

Как «прокачать» объект, чтобы он был итерируемым?

Использовать один из Well-known Symbols, а именно Symbol.iterator.

const obj = { a: 1, b: 2, c: 3 };

obj[Symbol.iterator] = function* () {
  for (const key of Object.keys(this)) {
    yield [key, this[key]];
  }
};

for (const [key, value] of obj) {
  console.log(`${key}: ${value}`);
}

Также есть вариант для асинхронного итерирования посредством Symbol.asyncIterator.

реф

Обновления box-shadow в CSS Backgrounds and Borders Module Level 4

Tue, 14 Mar 2023 00:00:00 GMT

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

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

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

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

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

Fri, 03 Nov 2023 00:00:00 GMT

Новости

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

Проекты

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

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

JS

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

CSS

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

HTML

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

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

Fri, 10 Nov 2023 00:00:00 GMT

Новости

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

Проекты

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

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

JS

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

CSS

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

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

Fri, 17 Nov 2023 00:00:00 GMT

Новости

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

Проекты

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

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

JS

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

CSS

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

HTML

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

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

Fri, 24 Nov 2023 00:00:00 GMT

Новости

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

Проекты

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

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

JS

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

CSS

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

URL Pattern API

Tue, 28 Nov 2023 00:00:00 GMT

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

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

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

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

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

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

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

  if (!match) {
    return null;
  }

  return children;
}

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

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

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

Fri, 01 Dec 2023 00:00:00 GMT

Новости

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

Проекты

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

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

JS

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

CSS

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

HTML

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

Роутер с помощью URL Pattern API

Wed, 06 Dec 2023 00:00:00 GMT

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

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

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

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

Fri, 08 Dec 2023 00:00:00 GMT

Новости

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

Проекты

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

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

JS

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

CSS

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

HTML

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

Новая версия CSS Snapshot 2023

Tue, 12 Dec 2023 00:00:00 GMT

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

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

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

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

Fri, 15 Dec 2023 00:00:00 GMT

Новости

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

Проекты

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

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

JS

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

CSS

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

HTML

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

Платформа

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

Селектор :has() в FF 121

Thu, 21 Dec 2023 00:00:00 GMT

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

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

.one {
  background-color: green;
}

.two {
  background-color: orange;
}

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

демо

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

Fri, 22 Dec 2023 00:00:00 GMT

Новости

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

Проекты

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

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

JS

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

CSS

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

HTML

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

View Transitions API в SPA

Thu, 28 Dec 2023 00:00:00 GMT

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

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

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

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

Thu, 04 Jan 2024 00:00:00 GMT

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

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

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

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

let timerId: number | null = null;

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

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

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

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

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

    workerRef.current.postMessage("start");

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

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

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

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

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

Fri, 05 Jan 2024 00:00:00 GMT

Новости

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

Проекты

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

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

JS

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

CSS

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

HTML, SVG

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

Платформа

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

Proxy и мемоизация функции

Wed, 10 Jan 2024 00:00:00 GMT

Есть такая платформенная штука — Proxy. Это когда берёшь обычный объект в JS, создаёшь для него прокси и получаешь возможность перехватывать и переопределять основные операции, которые с объектом можно совершить: get, set, delete… Внутри перехватчиков можно, например, логировать, валидировать или дополнять значения. Например:

const target = {
  message1: "hello",
  message2: "everyone",
};

const handler = {
  get(target, prop, receiver) {
    console.log(`Свойство ${prop} считалось`);
    return target[prop];
  },
  set(target, prop, value) {
    console.log(`Свойству ${prop} задано значение ${value}`);
    target[prop] = value;
    return true;
  },
};

const proxiedObj = new Proxy(target, handler);

proxiedObj.message1;
// log: Свойство message1 считалось

proxiedObj.message2 = "nobody";
// log: Свойству message2 задано значение nobody

Так вот, проксировать можно не только объекты, но и функции. В случае функций через прокси можно перехватывать момент вызова функции (перехватчик apply) и, например, манипулировать аргументами до вызова.

const a = () => {
  // функция
};

const b = new Proxy(a, {
  apply: (target, thisArg, argumentsList) => {
    // перехватчик вызова
  },
});

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

function memoize(target) {
  const cache = new Map();

  return new Proxy(target, {
    apply: (target, thisArg, argumentsList) => {
      const key = JSON.stringify(argumentsList);
      if (cache.has(key)) {
        console.log(`Результат для ${argumentsList} взят из кэша`);
        return cache.get(key);
      } else {
        const result = target.apply(thisArg, argumentsList);
        cache.set(key, result);
        return result;
      }
    },
  });

  const add = (a, b) => a + b;
  const memoizedAdd = memoize(add);

  memoizedAdd(3, 7); // Вычисляет и записывает в кэш
  memoizedAdd(3, 7); // Берёт результат из кэша
}

Аргументами функции, то есть и ключами в кэше могут быть не только примитивы, но и объекты, за счёт того, что ключ формируется с помощью JSON.stringify.

Таким образом, с помощью Proxy можно на коленке собрать «мидлвари» для объектов, массивов и функций, в общем-то, с любыми целями.

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

Fri, 12 Jan 2024 00:00:00 GMT

Новости

вышел Vue 3.4: переписан парсер шаблонов на htmlparser2 (стало 2x быстрее), улучшена система реактивности и добавлен шортхэнд для дублирующих значений атрибутов (<img :id="id" :src="src" :alt="alt"> 👉 <img :id :src :alt>)
круг замкнулся: в Remix появится классический SPA-режим работы, с возможностью опционально включить SSR (сейчас в Remix приложениях вся загрузка данных происходит на сервере)
в Chrome начали выпиливать сторонние (3-party) куки (у 1% пользователей)
в React появятся API для прелоадинга ресурсов: preload, preconnect и другие

Проекты

PWA-приложение, показывающее все возможности PWA-приложений
zed — быстрый мультиплеерный редактор кода (почему, зачем, за что?)
fontsource — опенсорсные шрифты в npm-пакете (для установки шрифтов как контроллируемых зависимостей вместо гугл-фонтс)
fsx — либа для работы с файловой системой в ноде, дено и памяти (в том числе браузерах) от создателя eslint

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

JS

напоминание, что во всех браузерах доступны немутирующие аналоги reverse(), splice(), sort() – toReversed(), toSplice(), toSorted() и with()
в JS-движке JavaScriptCore (в Safari), в отличие от V8 (в Chrome) реализован механизм оптимизации хвостовой рекурсии (Tail Call Optimization), позволяющий вызывать рекурсивно функцию сколько угодно раз без переполнения стека и код можно сделать таким же быстрым, как и в цикле for
разбор классических «странностей JS»: 0.2 + 0.1 = 0.300000001., преобразование типов, автодобавление ;
история, как создали npm-пакет everything, который включает ВСЕ пакеты npm, включая себя; из-за политики, что нельзя снять с публикации пакет, от которого зависит любой другой пакет, стало невозможно убрать из npm ВСЕ пакеты
туториал по стейт-менеджеру Jotai, состоящему из атомов
в Next.js теперь можно будет запускать проект на https локально с помощью next dev --experimental-https
здравый смысл восторжествовал и в Next.js не будут больше патчить fetch
document.getAnimations() возвращает в виде промисов все текущие CSS-анимации
анатомия shadcn/ui: безголовые компоненты с отдельным слоем стилей, для установки разных состояний используется cva
гайд по микрофронтендам на single-spa: такие штуки кажутся с первого взгляда сложными, но стоит попасть в ситуацию больших проектов, когда нужно шарить данные между разными приложениями, и уже становится понятно, зачем вся эта сложность
чтоб не заморачиваться с выводом типа события TS в React, можно воспользоваться общим «доставатором» типа React.ComponentProps<"input">["onChange"]
особенности использования enum в TS: например, const enum Name {} полностью удалит этот фрагмент из скомпилированного кода, но есть нюансы

CSS

гайд по container queries (с живыми примерами)
как написать круглый индикатор прогресса со скролл-анимацией
в Chome 120 появилось @media (scripting: none) для определения выключенных скриптов
директива @property: создание, дебаг, юзкейсы
кликабельную область вокруг интерактивных элементов лучше увеличить (удобно для мобилок), как это лучше сделать
трюки и находки при создании нового сайта vercel: SVG-лучи, пиксельные логотипы на гридах, CSS-счётчики, круговая анимация

HTML, SVG

топ-10 ошибок в доступности на сайтах в 2023: пустые ссылки, некорректный tabindex, отсутствие alt и другое

Платформа

победители в народном голосовании за фичи в Interop 2024: JPEG XL image format, View Transitions Level 1, Scroll-driven Animations

Настоящее айкидо

Tue, 16 Jan 2024 00:00:00 GMT

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

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

Вот скажем принесли вам в разработку макеты с Неведомой Фичей. Как её сделать — хз, нет понимания.

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

Вроде бы вы и победили, но гаденько как-то, нет этого приятного ощущения, ради которого вы когда-то давно вообще этим всем начали заниматься. Это не Настоящее Айкидо.

Либо же вы ищете похожую задачу на Стэковерфлоу или спрашиваете у Чат-бота. И таким образом вы находите «Либу, которая решит все ваши проблемы». Правда помимо вашей задачи она решает ещё и парочку других проблем по пути, ну и тянет набор зависимостей на 500кб. Но это ладно, думаете вы, фичу-то надо сделать ещё вчера. «Ок, для временного решения сойдёт», — решаете вы и используете либу.

А потом, спустя год-другой нужно вам зависимости проекта обновить и вы находите эту либу, вспоминаете что к чему, хотите версию этой либы заодно поднять. Но либа уже заброшена владельцем и вообще новым Реактом не поддерживается. «Что поделать, надо выпиливать», — думаете вы и снова оказываетесь в самом начале.

Это не победа, Неприятель вас обхитрил, притворился побеждённым и вам снова нужно с ним сражаться. Это тоже не путь Настоящего Айкидо.

А как бы поступил Мастер Настоящего Айкидо? Он бы сел, подумал и вспомнил, что Браузер, для которого он пишет программу, уже и сам умеет в нужную фичу. И вот Мастер на митинге скажет «Это умеет Платформа», а потом возьмёт и напишет несколько строк кода, чтобы дёрнуть нужный браузерный API, закроет задачу и пойдёт пить чай. И его решение никогда не протухнет, ведь Платформа всегда обратно совместима.

Мастер Настоящего Айкидо прилагает большего всего сил, чтобы освоить базу, и затем стремится к применению усвоенных принципов. А когда ему приходит мысль, что ему всё ясно, то он говорит себе: «Этого недостаточно», и идёт дальше копать Базу. 🥷

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

Fri, 19 Jan 2024 00:00:00 GMT

Новости

в Safari TP 186 допиливают @scope, добавили align-content для табличных ячеек и сделали анимируемым свойство content-visibility
обновилась Node v20.11.0 (LTS): появились esm import.meta.dirname и import.meta.filename на замену CommonJS filename и dirname
вышел Prettier 3.2: поддержан формат файлов jsonc (если вы, также как и я не знали, что это такое, — это творение Microsoft, json с комментами // и /**/)
вышел Next.js 14.1 — ускорен стартап и Turbopack, улучшен вывод ошибок, добавлена поддержка нативных window.history.pushState и window.history.replaceState, логирование использования кэша, расширены возможности работы с картинками
в TS 5.4 появится новый тип NoInfer<T>, чтобы блокировать инфер пришедшего типа

Проекты

The AHA Stack — всем панкрок! или Astro, htmx и Alpine.js объединились в банду, шатают SPA-мир и хотят вернуть веб-разработке простые ментальные модели и воркфлоу (интересно, доколе ещё ждать наступления прекрасного будущего?!)
remote-storage — localStorage с сохранением на удалённый сервер (даже бесплатный, чтобы вы туда насохраняли инфы, а потом душили жабку за подписку, которая вскоре появится)
templ — серверный рендеринг HTML на Go (внутри можно редерить и React-компоненты)
worker-timers — таймеры, которые не фризятся при неактивном окне за счёт выноса в worker
dep-tree — 3d визуализация внутренних связей проекта
symbiotejs — а что если вы завтра проснётесь и React окажется дурным сном, а все приложения вокруг будут написаны близко к нативным API, без прятания за абстракциями и «магических ящиков»

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

JS

новомодные написанные на Rust линтеры (oxlint, biome…) быстры в том числе потому, что не интегрированы с TS type checking API, которое, увы, довольно медленное, но зато фичёвое
ещё одно напоминание, что в Google Chrome во второй половине 2024 будут отключены сторонние (3d-party) куки, что поломает Google же Analytics, Google Pixel, инструменты ретаргетинга…, но в целом останутся ещё другие безкукисовые инструменты, чтобы показать вам баннер с рекламой кредитной карты — опыт команды Sentry
React Server Components не требует наличия сервера или Анонс курса Дэна Абрамова «Нейминг от бога» (а Astro, кстати, требует)
с помощью Clipboad API можно копипастить не только текст, но и картинки в PNG, гайд как это сделать на React
как с помощью современных JS-рантаймов (bun, deno, node) собрать самодостаточный выполняемый файл
золотое правило написания тестов: «Тест должен не проходить, тогда и только тогда, когда цель системы не выполнена.», то есть в тесте не стоит вдаваться в детали имплементации, а сфокусировать один тест только на одной цели
сравнение либ типизированной проверки данных: Zod vs Valibot
querySelector отличается от getElementById тем, что не признаёт id начинающиеся с цифры

CSS

набор молодого интернационалиста: margin-inline, dir, :lang() и writing-mode
на что способно свойство border-image: полупрозрачный фейд, скошенный фон на весь экран, градиентные бордеры
ещё один способ центровки контента без обёртки — max-width: max-content; margin-inline: auto
юзкейсы скролл-анимации с помощью animation-timeline (пока только в Chrome)
способы описания кастомных easing-функций в JS для Web Animations API: предвычисление массива keyframes, новая функция linear(), а также предложение добавить встроенную функцию document.registerTimingFunction

HTML

чтобы убрать элемент от показа в описании сайта в гугл-поиске нужно добавить тегу атрибут data-nosnippet

Платформа

прошедший год у npm:
- 184 миллиарда скачиваний пакетов в месяц
- март самый активный месяц по публикации версий пакетов
- топ зависимостей — TS, react, eslint, @types/node, react-dom, jest, prettier
- самое длинное возможное название пакета из 214 символов
как выводить в консоль браузера анимированные 3D-SVG картинки и стилизованный текст, а также бонусом либа для определения открытости консоли и факт, что console.table(['foo']) растягивается на всю ширину консоли

API window.matchMedia

Tue, 23 Jan 2024 00:00:00 GMT

Окей, когда что-то нужно перестроить в интерфейсе при изменении разрешения экрана, используется media query в CSS.

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

Первая мысль, как поступить в этой ситуации — подписаться на resize окна и смотреть в хендлере, нужная сейчас ширина окна или нет.

function handleResize() {
  if (window.innerWidth >= width) {
    // setIsGreaterThanOrEqual whatever
  }
}

window.addEventListener("resize", handleResize);

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

Триггерить только срабатывание определённого условия ширины можно… теми же mediaQuery, только в JS. Для этого существет API window.matchMedia https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia, который принимает строку с медиавыражением и возвращает объект MediaQueryList, содержащий информацию о медиавыражении, применённом к документу.

const matchQueryList = window.matchMedia("(max-width: 600px)")

Для разовой проверки соответствия используется свойство matches:

matchQueryList.matches // true or false

А для постоянного отслеживания соответствия, есть подписка на событие change:

function handleChange(e) {
  // e.matches whatever
}

matchQueryList.addEventListener("change", handleChange);

Для Реакта всё это заворачивается в хук и получается удобное отслеживание медиавыражений в JS:

function App() {
  const isMobile = useMatchMedia("(max-width: 768px)");

  return <h1>Browsing with {isMobile ? "mobile" : "desktop"}</h1>;
}

Код тут https://codesandbox.io/p/devbox/frosty-mcclintock-93ghzg

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

Fri, 26 Jan 2024 00:00:00 GMT

Новости

состоялось заседание рабочей группы по веб-компонентам W3C, результаты:
- Declarative Shadow DOM появится в Firefox 123 в конце февраля (эта фича, позволяющая использовать Shadow DOM напрямую в HTML без вызова attachShadow() из JS)
- начнёт разрабатываться Scoped Element Registries, позволяющий создавать элементы с одинаковым именем в рамках одной страницы
- Container Style Queries быть во всех движках в ближайшем будущем 🎉
грядущие нововведения в «клиентском» Реакте:
- use(Promise) — саспендинг на клиенте
- use(Context) — такой же, как useContext, но можно вызывать в условиях
- хуки и апи для работы с формами Form Actions, useFormState, useFormStatus
- а также useOptimistic — специальный хук, чтобы смотреть на «классический» Реакт с оптимизмом
обновления в Chrome 121:
- появились свойства scrollbar-color и scrollbar-width (раньше работало только в FF, так что если у вас были стили только для FF в Хроме тоже внезапно включится!)
- font-palette для управления цветовыми шрифтами
- псевдоэлементы ::spelling-error и ::grammar-error для стилизации ошибок
- Speculation Rules API для программного префетча и пререндера страниц в классических MPA
- showPicker() для программного выпадения <select> (кажется, я когда-то ждал этого, но так давно, что уже забыл)
вышел Safari 17.3: пофикшен @supports и цвет каретки на iOS, закольцовывание медиа с нулевой длиной и другие мелочи

Проекты

bun shell — возможность запускать shell-скрипты в JS (с помощью и во славу Bun)
workerpool — централизованный способ выгрузить воркеры (если у вас их много разных) в отдельный пул с очередью выполнения
partytown — запуск 3d-party скриптов в воркере (для выгрузки Google Tag Manager, Google Analytics, Amplitude из основного потока)

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

JS

как отделить 0 от null и undefined: напоминание про разницу операторов || и ??
c AbortController.abort() удаляет разом несколько обработчиков событий (не нужно писать множество removeListener, yay!)
если вы захотите обновиться на 18 Реакт, возможно вам тоже придётся сделать что-то из того, что уже сделали в команде SonarQube
Реакт-стартеры в 2024: Vite, Next или Astro?
возможная замена проп-дриллингу — {children}
туториал по Next.js App Router от мейнтейнера Node.js и webpack: минималистично и интерактивно
как уменьшить размер бандла — рецепты с разных сторон:
- мониторинг через Lighhouse, Sentry
- анализ с помощью Webpack Bundle Analyzer, Statoscope, bundlephobia
- распространённые приёмы — отключить сорсмапы, оптимизировать импорты библиотек типа lodash, выделение чанков, динамические импорты и фреймворкоспецифичные подходы типа React.lazy

CSS

частичный фейд текста с помощью градиентов (именно текста, а не покрывающий слой!): способы с mask-image и background-clip: text
сборник мелких, точных (и злых) «CSS-однострочников», которые уже можно заносить в проекты (и за это не придётся оправдываться): aspect-ratio, object-fit, margin-inline, text-underline-offset…
ещё одна подборка юзкесов селектора :has(): делаем выборку родителя, предыдущего сиблинга, по количеству элементов, в любом месте или всё, кроме меня
в догонку к предыдущему пункту демка с плавным переходом между радио-кнопками, которая стала возможна в CSS благодаря :has()
в 123 Chrome появится свойство field-sizing, авторасширяющее инпуты и текстареа при вводе длинного текста (неужели это когда-нибудь свершится, боже)

SVG

эффект движущейся линии по скроллу на SVG элементах <linearGradient>, <path> и <clip-path>
чтобы улучшить метрику CLS достаточно просто один раз в день… задавать размеры <img> в атрибутах width и height (и без px)
aria-hidden в жизни: для сокрытия визуальных декоративных элементов, скрывает интерактивные элементы не всегда, aria-hidden !== aria-hidden="true"

Платформа

рецепты как выключить браузерное кеширование в серверных заголовках, HTML, htaccess, PHP и других бэкендах
каталог известных (и не очень) дизайн-систем на случай, если вам понадобится впечатлить коллег проведённым обширным ресёрчем

Обратная совместимость веб-платформы

Tue, 30 Jan 2024 00:00:00 GMT

Веб-платформа регламентирована как backwards и forwards совместимая.

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

Работает это так. Вам вдруг приходит задача, что что-то поломалось в коде. Причём в старом коде, который уже давно не менялся и был написан прото-программистами, которые уже давно уволились. Казалось бы, что может пойти не так? А дело в том, что сами браузеры обновляются и в них что-то вдруг начинает работать по-другому. В том числе код, который вам предстоит исправить. Самые «любимые» баги.

Как это такое происходит, ведь платформа должна быть обратно совместима? Главным образом так: далеко не всегда сначала появляются стандарты, а потом браузеры пилят фичи по этим каноническим стандартам. Иногда фичи просто пропушиваются вендорами (яркий пример — префиксы -webkit-feature, -moz-feature), а потом уже под них подгоняются стандарты или же они адоптятся стандартами и… всё это обратной волной докатывается до браузеров. Браузеры немного меняют имплементацию и ваш код, который просто работал, становится как бы сломанным.

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

Но ок, вендорные префиксы были всеми явно признаны как фейл. Есть и более прозаические примеры.

Есть такой метод play() у аудио и видео HTML-элементов. Он появился ещё в Chrome 3. Он просто работал и включал медиа. То есть можно было запустить, например, видео и тут же его поставить на паузу, чтобы оно сразу прогрузилось.

<script>
  video.play();
  video.pause();
</script>

Потом в Chrome 32 появились Promise. Затем обновились стандарты. И уже в Chrome 50 метод play() стал возвращать промис вместо того, чтобы синхронно выполнить запуск медиа. То есть ваш код сломался и выдаёт эксепшн, который даже даёт ссылку на специальную страничку https://developer.chrome.com/blog/play-request-was-interrupted.

Ещё один пример, немного с другого бока подсвечивает эту же проблему. Люди издревле желали стилизовать скроллбары. Поэтому в Chrome появился целое семейство свойств для стилизации (::-webkit-scrollbar, ::-webkit-scrollbar-track…), в которых можно было задавать ширину или высоту скроллабара (в пикселях!), его цвет фона. Потом это дело ушло вариться в стандарты, ранние черновики были реализованы в Firefox: это были свойства scrollbar-width и scrollbar-color. Причём в scrollbar-width уже нельзя было задавать значения в пикселях (только thin или auto), а scrollbar-color принимал два цвета через пробел (для фонового цвета трека и «таскалки»). И вот так оно и жило где-то с 64 версии FF до наших дней: для стилизации в FF использовался «правильный» вариант с scrollbar-width/scrollbar-color, а в Chrome работали вендорные префиксы.

Что же могло пойти не так? В Chrome 121 завезли (https://developer.chrome.com/docs/css-ui/scrollbar-styling) так же стандартные scrollbar-width и scrollbar-color! И ваш код, хоть и не упал, но начал работать по-другому, так как скроллбары стали другими, и хорошо, если просто стали другими. В целом не то чтобы критично. Но возможно сегодня где-то в далёком офисе одинокий разработчик сдувает пыль с давнего проекта и добавляет хак, чтобы всё оставалось как раньше, и в Chrome по-прежнему применялась только стилизация через вендорные префиксы:

@media screen and (min--moz-device-pixel-ratio: 0) {
  .scrollable_styled {
    scrollbar-width: thin;
    scrollbar-color: gray transparent;
  }
}

.scrollable_styled::-webkit-scrollbar {
  width: 8px;
}

.scrollable_content::-webkit-scrollbar-thumb {
  background-color: gray;
}

Directed by robert b weide 🥁

А для тех, кто дочитал до конца, приятный бонус: список задепрекейченых и выпиленных платформенных API: JS, HTML, CSS.

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

Fri, 02 Feb 2024 00:00:00 GMT

Новости

в React 19 появятся нативные custom elements (мама, неужели они решили задепрекейтить jsx?!)
что в последнее время появилось нового в браузерах: <hr> в <select>, HTMLSelectElement.showPicker, стилизация скроллбаров, анимация font-palette, transfer() и transferToFixedLength() у ArrayBuffer
анонсирован Typescript 5.4 beta: улучшение сужениях типов в замыканиях, новый утилитарный тип NoInfer для запрета вывода типов, Object.groupBy и Map.groupBy, улучшение quick-fix, а также анонс грядущих депрекетов в TypeScript 5.0
минорно обновлены версии Node 18, 20, 21 для фиксов безопасности
в V8 v9.1 выпущена поддержка import assertions (это такое import json from './foo.json' with { type: 'json' }, для того, чтобы не запустить зловредное ПО, маскирующееся под JSON)

Проекты

expressive-code — решение для интеграции блоков кода в контенте сайта (для astro, next)
unlazy — универсальная либа для ленивой загрузки картинок (с плейсхолдерами)
веб-компонент авторастягивающейся textarea
анимация прыгающего мяча кучей возможных способов (без JS, на чистом JS, с либами, на canvas, видео и гифка)
type-coverage — мониторинг и зачистка (от any) типов в проекте

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

JS

мнение, что вся React-движуха завела часть индустрии не туда, отзывается: неестественный для браузера DX, в который двигаются React, Next и иже с ними, оказывают медвежью услугу (и, конечно, зарабатывают на этом), и, в целом, во многих случаях не нужны, так как являются легаси из 2013, когда в браузерах не было шаблонных строк и BFCache
ещё одно мнение, что система, которая вынуждает переписывать кодовую базу каждые 2-3 года — слабая, и напоминание о «правиле минимальной мощности», когда для решения задачи следует выбирать минимально необходимый по мощности язык/систему/технологию
не поверите, ещё одно мнение о том, что стоит попробовать Qwik вместо React (по мне так шило на мыло, нужны другие ментальные модели для написания кода для платформы)
сначала придумывается SSR, потом решается, как же быть, когда нужно узнать что-то из клиентского браузера, а потом придумываются костыли — надёжный план!
попытки замерять Core Web Vitals не только на первой загрузке SPA, но и на последующей клиентской навигации — спец событие soft navigation для PerformanceObserver
pnpm поддерживает страницу с бенчмарками npm, pnpm, yarn (они поддерживают страницу, потому что pnpm быстрый или следят за быстротой pnpm из-за поддержки страницы 🤔)
современный стартер для либы: TS, тесты нативные node:test, билд npm-скриптами, конфиг для CI на GitHub Actions в yml, автодеплой в npm, provenance и секреты
event loop – мифы и реальность: браузерные и небраузерные среды исполнения, почему понятия нет в спеке ECMA-262, макротасков не бывает, а task queue это не очередь, а set
улучшаем качество кода React-приложения с помощью Compound Components

CSS

блюрная backdrop-тень с помощью mask, backdrop-filter и box-shadow
если вы всё ещё убираете обводку (outline: 0), то это можно уже не делать, так как есть :focus-visible
попытка объять <s>необъятное</s> шрифтовые единицы измерения длины: cap, ch, em, ex, ic, lh, а также из «рутовые» аналоги rem, rlh, rex, rch, ric и другая магия
выделение текста с помощью скролл-анимации: animation-timeline и background-size
строим тоггл: с :has(), адаптивно, доступно, с «ручками» для кастомизации стилей
анимация цветовых шрифтов font-palette (жаль, что самих шрифтов мало)
анимация движения по линии в SVG с offset-path и offset-distance
свежий взгляд на старую как мир стилизацию <table>

HTML, SVG

про тег <abbr> и атрибут title: лучше не использовать и с title, и без него
плохие стороны HTML: лучше НЕ использовать <select multiple>, атрибут title, <datalist>, <input type=number>, <input type=date>, <menu> во избежание проблем

Платформа

базовые различия jwt и session-вариантов аутентификации: jwt более модное, но сложнее в реализации, сессия попроще и понадёжнее
что намечается в рамках Interop 2024: хотеть custom properties, declarative shadow DOM, relative color syntax, @starting-style

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

Fri, 09 Feb 2024 00:00:00 GMT

Новости

вышел Million 3 (кастомный компилятор для React): авторы обещают, что просто выполнив npx million@latest можно добиться ускорения работы Реакта с O(n) до O(1)
вышла jQuery 4.0.0 BETA: без шуток внушительный чейнджлог, в который разве что не влез отказ от IE11
вышел Vite 5.1:
- появился экспериментальный режим Vite Runtime API, который позволяет сделать прослойку между сервером и рантаймом и делать там что-то своё, такая мидлваря, но мощная, и отвязанная от сервера
- поддержка запуска CSS-препроцессоров в отдельных потоках (перф улушается)
- более быстрый холодный старт
- улучшенная поддержка .css?url и другие фишки
вышел биндинг GSAP для React @gsap/react, включает удобный хук useGASP()
вышел Remix v2.6.0, который однажды утром проснулся и обнаружил, что он превратился в Vite-плагин

Проекты

drab — коллекция headless кастомных элементов (для расширения кругозора, что кастомные элементы можно использовать как обёртку как для ui-элемента, так и для процесса, например, prefetch)
svgfm — визуальный конструктор SVG-фильтров, позволяющий собирать фильтры в цепочки (написано на JS!)
baklava — приятная дизайн-система и ui на нативных веб-компонентах без примудростей
replay — «проигрывание» действий в интерфейсе puppetier-ом с помощью Chrome DevTools Recorder (попробуйте, это вкладка есть в девтулзах Хрома)
knip — либа для нахождения неиспользуемых файлов, зависимостей и экспортов в проекте
simple-git-hooks — суперлайтовые и простые гит-хуки, если не нужно сложности и нужна быстрота и простота
npmgraph — визуальное отображение зависимостей проекта в виде интерактивного графа

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

JS

типобезопасные id в TS с помощью template literal types (node_${string}): в комментариях приводят более общее решение через branded types
как Deno изменился за 2023 год, а также кое-что под названием JSR (JavaScript Registry), «смутно напоминающий npm», но с нативной интеграция TS и ESM-only пакетами, автоматически генерируемой документацией
стата о самом востребованном JS-фреймворке: конечно, это React по количеству вакансий; в Бельгии больше всего востребован Vue, а в Швейцарии — Ангуляр (интересно, а отсутствие JS-фреймворка это хоть сколько-нибудь востребовано?)
оказывается есть не только <input type="color"> (везде), но и цветовой пикер new EyeDropper() (в Хроме)
очередной герой самоотверженно бросается в пучину настройки фронтовой монорепы и выясняет, что для него лучшим оказалось сочетание инструментов Turborepo + pnpm
бестпрактисы и юзкейсы переменных окружения .env: можно задавать при запуске ноды, в .env-файлах можно задавать фича-тогглы, переменные для разных окружений и хранить секреты
попытка ещё раз взять и запомнить различия между типами ReactElement, ReactChild и ReactNode
когда может пригодиться as never в TS (спойлер: в этом кейсе не поможет даже as any)
шоукейс про микрофронты от команды Dodo: в 1 и 2 рассказано, как переходили на SingleSPA + SystemJS, а заодно и на Vite и Vitest
а может и не нужны эти ваши микрофронты и достаточно ограничиться npm modules или даже git submodules?
организация кэша в JS с помощью Cache Storage API и его преимущества перед local storage и indexed db

CSS

юзкейсы all: revert-layer: более лайтовый ресет, чем all: revert, точечное восстановление ранее сброшенных значений, а также антихрупкие дефолты для переменных var(--size, revert-layer)
градиентная рамка с помощью linear-gradient и mask
боковая шторка на <dialog> (не обошлось без заворачивания в веб-компонент)
CSS-анимация SVG-элементов и тонкости настройки transform-box и transform-origin

HTML, SVG

пятёрка атрибутов, улучшающих UX: hreflang, translate, reversed, controls и autocomplete (в порядке возрастания полезности)

Платформа

история о том, как веб нарушил конвенцию квадратных чекбоксов и круглых радиокнопок
дзен и искусство ухода за маком в 2024: чеклист от и до
кто такой и зачем нужен CORS с бонусным списком как не нужно его обходить (принимать всё отовсюду, выключать preflight checks плагинами в браузере и устанавливать mode в no-cors)

Состояние в битовых картах

Tue, 13 Feb 2024 00:00:00 GMT

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

// все три слота свободны
000;

// первый слот занят, остальные свободны
100;

// первый и третий слоты заняты, второй свободен
101;

Ок, идём дальше. То, что состояния теперь заданы в виде двоичных чисел, даёт возможность применять к ним двоичные операции! Например, это могут быть двоичные И и ИЛИ. Обозначаются они операторами & и |. Двоичные числа сравниваются побитово (первый бит одного числа с первым битом другого, второй бит одного числа со вторым битом другого…).

В случае логического И оба бита должны быть равными 1, чтобы в результате получить 1, в остальных случаях будет 0:

0 & (0 === 0);
0 & (1 === 0);
1 & (0 === 0);
1 & (1 === 1);

В случае логического ИЛИ любой из битов может быть равен 1, чтобы получить в результате 1:

0 | (0 === 0);
0 | (1 === 1);
1 | (0 === 1);
1 | (1 === 1);

И теперь, если вернуться к примеру со слотами, мы можем «складывать» два состояния с помощью побитового ИЛИ: 100 | 001 === 101 (первый занятый слот ИЛИ третий занятый слот — это занятые 1 и 3 слот). А из «суммы» двух состояний можно убрать все состояния, кроме определённого, с помощью побитового И: 101 & 100 === 100 (первый с третьим занятые слоты И первый занятый слот — это первый занятый слот).

Теперь к юзкейсу. Вся мякотка маппинга состояний на битовые карты раскрывается в кейсе, когда побитовое ИЛИ используется для создания композиции нескольких отдельных состояний. Представьте, что у нас есть некие состояния:

const MOBILE = 0b0001;
const TABLET = 0b0010;
const LAPTOP = 0b0100;
const DESKTOP = 0b1000;

Можно использовать как просто отдельное состояние, например, MOBILE, так и композицию нескольких состояний, к примеру, MOBILE | LAPTOP (что буквально так и считывается мобайл ИЛИ лаптоп, спасибо TS👋).

Это можно использовать для задания динамических ключей объектов:

const objectMap = {
  [MOBILE]: "mobile stuff",
  [LAPTOP]: "laptop stuff",
  [MOBILE | LAPTOP]: "mobile or laptop stuff",
};

Как вы уже, возможно, догадались, распаковать этот ключ можно с помощью логического И (&), обратной операции. Предположим, что нужно отфильтровать только те ключи, в которых есть MOBILE, то есть нужно ко всем ключам применить & MOBILE:

MOBILE & (MOBILE === MOBILE);
// у 0b0001 и 0b0001 есть общая 1, получаем 0b0001

LAPTOP &
  (MOBILE ===
    0(
      // у 0b0100 и 0b0001 нет общей 1, получаем 0b0000

      MOBILE | LAPTOP
    )) &
  (MOBILE === MOBILE);
// у 0b0101 и 0b0001 есть общая 1, получаем 0b0001

Дальше отфильтровываем те значения, ключи которых выдали нули и готово!

Вот как выглядит функция-фильтровщик:

function getFilteredValues(objectMap, filterKey) {
  return Object.entries(objectMap)
    .map(([key, value]) => {
      const shouldInclude =
        (key & MOBILE) === filterKey ||
        (key & TABLET) === filterKey ||
        (key & LAPTOP) === filterKey ||
        (key & DESKTOP) === filterKey;
      return shouldInclude ? value : null;
    })
    .filter(Boolean);
}

Полный код примера тут https://codepen.io/juwain/pen/KKEGRrB?editors=0011

Кстати, небольшой оффтоп: обратите внимание на ссылку. Codepen тоже использует битовую карту, чтобы обозначить, какие редакторы по умолчанию скрыть (0), а какие показать (1) 👾

Я использовал такой подход для динамического создания стилей для каждого типа девайса. Иногда стили для соседних девайсов повторялись, не хотелось их дублировать и получилось сгруппировать по типу MOBILE | LAPTOP.

Пример (это Styled Components):

${setResponsiveStyles({
  [MOBILE]: css`
    // some only mobile styles
  `,
  [MOBILE | TABLET]: css`
    // some mobile or tablet styles
  `,
  [LAPTOP]: css`
    // some only laptop styles
  `,
  [DESKTOP]: css`
    // some only desktop styles
  `
})}

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

Fri, 16 Feb 2024 00:00:00 GMT

Новости

вышел Safari TP 188: добавлена поддержка альтернативного синтаксиса свойства content, поддержка supports внутри директивы @import, выпилена поддержка нестандартного resize: auto и много всего мелкого пофикшено
из-за противостояния бюрократии и бигтехов в iOS в Европе перестанут работать PWA, как работают сейчас (по сути останется возможность только создать «закладку» со ссылкой 🤷‍♂️)
мейнтейнер Express решил взбодрить проект и запостил планы на 5, 6 и 7 версии (которые подозрительно напоминают план начать с нового года жизнь заново): больше координации с LST-версиями Ноды, меньше манкипатчинга и использования внутрянок Ноды, официально поддерживаемые типы

Проекты

hono — серверный фреймворк для все JS-рантаймов: недавно вышла версия 4, которая во времена Реакта, идущего на сервер, наоборот стала уметь в SSG, клиентские компоненты (c jsx и реактовскими хуками), file-based роутингом и другими плюшками. Безусловно, радует что не next-ом единым!
glaze — если вдруг вам нравится tailwind-подход к написанию стилей, этой либой можно так же «декларативно» описывать GSAP-анимации
tabgod — запуск JS-скрипта одновременно в нескольких табах сразу (для гугления сразу в нескольких гуглах, например)
react-joyride — либа для создания туториалов и онбордингов по сервису
type-fest — набор базовых утилитарных дженерик-типов TS (автор разрешил копипастить код без импорта либы 😊)
tempo — yet another библиотека для работы с датами от команды Formkit

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

JS

иногда сидишь, думаешь, как пробросить что-то из состояния в DOM или наоборот, и тут, хоба!, можно же пробросить значение в кастомном свойстве!
подход к рефакторингу кода, который оброс множественными ветками условий или кейсов: найти общий паттерн, выделить его в интерфейс и причесать ветки кода так, чтобы каждая имплементировала выделенный интерфейс
как хэндлить события за пределами компонента в Реакте, из которого я узнал в том числе о нативном методе event.composedPath(), выдающие массив всех таргетов, через которых пройдёт событие при всплытии
дружеское напоминание, что Array.prototype.with работает везде и может «заменять» элементы массива немутабельно
новые методы Set.prototype.union, Set.prototype.intersection, Set.prototype.difference и другие (похожие на SQL) методы доступны в Chrome 122+ и Safari 17+

CSS

объёмный (я бы даже сказал) справочник по цветовым пространствам, функциям в CSS от базовых до современных от гугловцев: color(), display-p3, oklch, градиенты, проверка фич в supports()
пока мы тут работу работаем, в CSS тихо варятся нативные mixin-ы и функции
новые функции возведения в степень pow(), квадратный корень sqrt() и другая математика (даже есть примеры!)
задание диапазона <s>жирности</s> насыщенности шрифта с font-weight для вариативных шрифтов
как побороть поведение iOS, когда неправильно определяется цвет скроллбара, и он оказывается белым на белом фоне
на три вещи можно смотреть вечно: на огонь, воду и центровку блоков в CSS — современное прочтение без transform: translate(-50%)
если нужно вставить SVG фоном, можно встроить его прямо в CSS, и оказывается, можно даже не энкодить его в base64

HTML, SVG

ещё одно дружеское напоминание, что элемент <dialog>: 1) поддерживается везде и 2) из коробки имеет центровку, оверлей, закрывается по esc, а также ловит фокус и возвращает его при закрытии
дизейблить кнопки ок, но не совсем ок дизейблить элементы форм (особенно кнопки, тк это ридонли-элементы)

Платформа

ежегодное обновление поста Андрея Ситника о том, как подключать favicon (кажется, с каждым годом он всё короче и когда-нибудь схлопнется до 1 строки)
никогда не будет лишним вспомнить или узнать хитрости по работе с гитом: config, blame, diff, rerere (не путать с ололо)

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

Fri, 23 Feb 2024 00:00:00 GMT

Новости

новости с полей Реакта: впиливают автомемоизацию (React <s>Forget</s> Compiler), Actions на клиенте, работа с <meta> из коробки, директивы "use client" и "use server", а также API для подгрузки статических файлов; всё это уже упаковано в канареечную версию вместе с докой и поедет в мажорной 19 версии
1 из 5 пакетов в npm на содержит ESM-модули
анонсирован TypeScript 5.4 RC: улучшение в выводе типов, утилитарный тип NoInfer, Object.groupBy и Map.groupBy и другое

Проекты

lucia — аутентификация во всех основных JS-рантаймах с адаптерами к БД из коробки
react-virtuoso — либа для быстрой работы с большими списками без проблем с перфомансом (включает также «виртуальные» таблицы, сетки, бесконечный скролл, группировку со стики-хедером)
restore-scroll — либа для восстановления позиции скролла после навигации (не только лишь body, но и любого другого элемента со скроллбаром)
react-strict-dom — экспериментальная встройка StyleX в ReactDOM как часть движения по сближению React Native и React DOM

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

JS

сравнение методов промисов all(), allSettled(), any() и race(), и от меня напоминание, что появлялись они не все сразу: all() и race() -> allSettled() -> any() в порядке исправления обнаруженных недостатков
как работает Hot Module Replacement (HMR) в сборщиках типа Vite и почему всё это хорошо легло на ESM-модули благодаря мета-информации об импортах/экспортах (import.meta.)
тренды React в 2024 (а скорее саммари событий 2023): Astro — самый быстрый фреймворк, аутентификация — всё ещё горячая тема, React Server Components шатко-валко адоптятся, в мире SPA новый роутер — TanStack Router, Vercel пушит React вперёд, противостояние Turbopack vs Vite и безголовые UI-либы
и саммари результатов разработки Node в 2023:
- дропнули 14, 16 и 19 версии
- добавили в зависимости Ada, simdutf, simdjson
- обновили сайт
- добавили систему пермишенов
- добавили фичи: Single Executable Apps (самодостаточные Nodejs-приложения без необходимости установленной Nodejs в системе), встроенная поддержка .env, WebSocket-клиент и test runner
визуализация распределения значений функции random и других её вариаций
гайд по использованию localStorage: синхронный, хранит не больше 5mb, но проще IndexedDB и быстрее куки — годится для малых данных, которые не нужно постоянно читать/писать; узнал про File System API, который работает только через воркер и про Extension Storage API для хранения данных браузерных расширений
как минимальными силами и зависимостями (только TS) поднять TS-сервер на Node c лайв-релоадом и env-переменными
использование discriminating unions (для более декларативных и разделённых типов) и pattern matching (для укрощения развесистых условий) в TS
анатомия итераторов в JS: встроенные и собственные, синхронные, асинхронные, прокачка объектов, чтобы сделать их итерируемыми

CSS

наброс №1 (на серьёзных щщах) на Tailwind как маркетинговый проект, в котором идея «независимых от контента названий классов» была извращена, онбордя пользователей, а затем загоняя в vendor lock-in и заставляя привлекать в экосистему новых адептов
наброс №2 (смешной, слово «fuck» встречается 5 раз) на Tailwind с тем же посылом: если бы в мире был только HTML и Tailwind, а потом бы появился грамотно проданный CSS(!), то все бы начали писать кипятком по концептам, которые в него встроены
Custom Highlight API уже есть в Chrome, Safari 17.2 и даже ночном Firefox, а это значит, что выделять элементы на странице станет проще
работа с анимациями в UI: используем доп потоки, выносим разумно в композитные слои (они потребляют доп память)

Платформа

попытка объять в одном тексте <s>необъятное</s> все виды состояний, которые влияют на конечный UI: состояние приложения, данных, страницы, UI-компонентов и элементов самого браузера, параметры и настройки девайсов и состояния самого пользователя 🤯
если вы уже оптимизировали в ассетах, что могли, можно ещё попробовать подрезать кастомные шрифты, чтобы убрать оттуда неиспользуемые символы (есть ссылки на инструменты анализа и модификации подключенных шрифтов)

Укрощение режимов наложения в CSS

Tue, 27 Feb 2024 00:00:00 GMT

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

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

Вот что получилось в результате экспериментов:

Демо тут https://codepen.io/juwain/pen/mxLJYj.

Как это работает. Сразу стало понятно, что для решения нужно изготовить под конкретную картинку SVG-маску, затем наложить поверх цветной картинки чёрно-белую с вырезанной частью. В итоге, через дырку в чёрно-белом изображении будет просвечивать цветная. Решение с изготовлением маски вручную было отброшено из-за неуниверсальности.

В поисках универсального способа я решил попробовать сделать «маску на лету» из самого же оригинального изображения с помощью режимов наложения (blend modes).

Вкратце про режимы наложения. По умолчанию слои в CSS располагаются друг поверх друга и не «просвечивают»:

А можно сделать так, чтобы слои не просто показывались один над другим, а «смешивались» по определённому алгоритму:

Режимы наложения пришли в CSS из Фотошопа благодаря сотрудникам компании Adobe. Но не все фотошоповские режимы наложения переехали в CSS — всего в CSS есть 16 вариантов смешивания слоёв. Не буду вдаваться в подробности, с режимами наложения можно поиграть тут.

Ок, к селективному обесцвечиванию.

Сверху на изображение накладывается его же копия с помощью псевдоэлемента:

.photo {
  --source: url(some-url-string);
  /* это нижний слой */
  background-image: var(--source);
}

.photo::after {
  /* это верхний слой */
  background-image: var(--source);
}

Дальше у верхнего слоя режим наложения меняется на lighten. При таком режиме тёмные участки начинают «просвечивать», а светлые — наоборот остаются непрозрачными:

Режим наложения между слоями включается свойством mix-blend-mode.

.photo::after {
  mix-blend-mode: lighten;
}

Получилось то, что нужно: тёмный фон верхнего слоя стал прозрачным, а светлые участки — нет:

Далее верхний слой обесцвечивается с помощью CSS-фильтра:

.photo::after {
  filter: grayscale(1);
}

Теперь верхний слой накладывается светлыми обесцвеченными участками на нижнюю цветную фотографию:

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

В этом снова помогут режимы наложения. Помимо свойства mix-blend-mode, «смешивающее» два разных слоя, есть ещё одно свойство, меняющее режим наложения — это background-blend-mode. Оно задаёт режим смешивания фоновых элементов одного слоя: изображения, фонового цвета, градиента.

Итак, верхнему слою задаётся серый фоновый цвет и режим смешивания картинки с ним hard-light. Это комбинированный режим, он чем-то похож на режим умножения — если коротко, он делает цвета ярче. Применительно в чёрно-белому изображению, этот режим сделает его светлые части более контрастными.

В итоге получается желаемый результат:

Остаётся разобраться, какие именно цвета в таком сочетании режимов наложения делаются прозрачными, а какие нет.

Для этого я сделал демо со слоями с полосатыми линейными градиентами, и вот что получилось:

То есть при рассмотренной в этой статье комбинации режимов наложения прозрачными становятся области красного, синего и фиолетового оттенков, а желто-оранжевые, зелёные и голубые оттенки остаются непрозрачными.

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

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

Fri, 01 Mar 2024 00:00:00 GMT

Новости

вышел Firefox 123: поддерживает Declarative Shadow DOM (теперь поддерживается всеми!), пофикшен Date.parse(), улучшены SVG-градиенты, добавлена поддержка кода 103 Early Hints HTTP для предзагрузки ресурсов
в Mozilla выпустили MDN curriculum — учебный план для разработчиков, чтобы подтянуть базу по фронту: HTML, CSS, JS, доступность, контроль версий, перфоманс, тестирование, фреймворки, тулинг
в Firefox 125 будет доступен Popover API
в Vue отрефакторили систему реактивности и заменили структуры данных, чем уменьшили использование памяти на 56% и улучшили перф на 100-200% (а что, так можно было?)
вышел Git 2.44: более лучшие ребейзы командой git replay, опция --autosquash для сквоша коммитов при обычном, неинтерактивном ребейзе, настройка хинтов и другое

Проекты

nue — генератор статических сайтов и аппликух, дерзкий, но честный аналог Astro и Next.js
functional-ui-kit — есть много разных UI-китов, но мало из них классно реализовано и в коде, и в Figma: этот кит из таких
shoelace — ещё один UI-кит, но на этот раз на веб-компонентах (аккуратный, с возможностью использовать совместно с фреймворками)
picocss — минималистичный CSS-фреймворк для стилизации (практически) голого HTML
keyux — либа для добавления управления с клавиатуры к сайту, интегрируется с aria- и role-атрибутами в HTML

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

JS

подраскрывается концепт slot-ов: в веб-компонентах, Vue и Angular: даже если не использовать их напрямую, иногда полезно иметь в голове такую ментальную модель
оказывается, в JSDoc есть даже продвинутые конструкции типа дженериков, каста типов и implements класса (правда становится нечитаемо быстрее, чем в TS)
как мы докатились до жизни такой: для того, что показать статический лендос нужно 10+ mb JS-кода (а для чата 50+ mb) 🤯
сравнительный разбор Next.js и Remix, что же выбрать? (не забываем об опции, что можно не выбирать)
сравнительный разбор HTMX и React, что же выбрать? (опять же, можно и не выбирать 😏)
как, упрощенно, работает React Compiler, а также в целом подход к компиляции Static Single Assignment
а что, если не присылать на клиент JSON и строить DOM, а стримить готовый HTML? Такое сложно, но возможно не только для стрима при первой загрузке страницы, но и в рантайме при переходе в View Transitions API

CSS

как подогнать стили при использовании View Transitions, чтобы две картинки «бесшовно переходили» одна в другую
в CSS есть константное значение infinity, и с его помощью, наконец-то, можно завершить эту битву раз и навсегда — z-index: calc(infinity), только нужно иметь в виду, что это число зависит от контекста
псевдоэлемент ::backdrop (подложка элемента <dialog>) теперь может наследовать все наследуемые свойства родителей, и кастомные тоже (странно, что раньше не могло)
исчерпывающий гайд по селектору :has: такая читерская неявная связь элементов одновременно и привлекает, и отпугивает своей неявностью
когда нужно использовать data URL-ы: как обычно, it depends, надо сравнить насколько передача файла по сети добавляет больше байтов (заголовки, обмен сообщениями…), чем строка, закодированная в CSS
когда в кастомном свойстве CSS находится невалидное значение (20px задаётся для цвета, например), то срабатывает механизм Invalid At Computed Value Time (IACVT), который приводит к откату значения до unset

Платформа

декларативный shadow DOM пришёл, для чего же он может пригодиться: это некий «ковёр», куда можно замести детали имплементации интерфейсных частей (сомнительно, но окэй)
полезные настройки Git: автосквош и автостэш при ребейзе, автосоздание ветки на сервере при пуше, изменение алгоритма диффов, авторебейз при пулле, автосоздание ветки main вместо master и другое

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

Fri, 08 Mar 2024 00:00:00 GMT

Новости

вышел TypeScript 5.4: нового с RC версии почти ничего не подвезли, но там было много всего хорошего, можно обновляться
вышел Parcel v2.12.0: теперь умеет прекомпилировать JS-функции в билд-тайме вместо включения в общий бандл (вдохновлено макросами из Bun); на сайте появился REPL (интерактивный редактор с отображением результата); теперь под капотом Lightning CSS бандлит CSS-файлы; возможность вручную сконфигурировать shared-бандлы
вышел Babel 7.24.0: теперь поддерживает JSON modules imports, а также последнюю актуальную версию декораторов
в Safari 17.4 появится поддержка нового «пропатченного» чекбокса — переключателя (<input type=checkbox switch checked> с псевдоэлементами ::thumb и ::track), также появились вертикальные контролы форм, <hr> в <select>, обновление движка Inline Layout, работающий align-content для таблиц и блоков (не только гридов и флексбоксов), @scope и :scope, Promise.withResolvers, Object.groupBy и Map.groupBy и кое-что ещё
вышла PixiJS v8: либа для 2d анимации с десятилетней историей хорошо бустанулась по перфу, подружилась с WebGPU, изменила структуру пакета, получила обновления в графических, векторных и текстовых API
вышла бета Million Lint: интересный концепт линтера перфоманса React-приложения, который в реалтайме показывает в коде на манер eslint количество ререндеров и время
React Compiler aka Forget (автомемоизатор) не будет включён в релиз React 19

Проекты

readability — JS-версия браузерного режима для чтения из Firefox: это когда остаётся только текст, а стили и оформление с баннерами уходит
embla-carousel — минималистичная JS-карусель, без зависимостей, для доп функциональности подключаются плагины
pkgx — запускальщик всего здесь и сейчас без установки <s>и смс</s>, что не умеет npx, например, мождно запустить ноду pkgx node@16 или бан pkgx bun run
turbo repo — тула для организации более быстрой работы команд запуска и сборки в монорепах (yarn/npm/pnpm устанавливает пакеты, turbo запускает с кешированием)
capo.js — инструмент для анализа правильности в порядке тегов в <head>: покажет, в какой последовательности расставить теги будет правильнее

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

JS

4 издание прекрасной книги про JS — Eloquent JavaScript — для программистов любых возрастов и вероисповедания
первые отзывы о JSR — альтернативному npm пакетному менеджеру от создателей deno: пока очень нишево, привязано к deno и немного чем отличается (TS-first, only ESM-модули), но, тем не менее, конкуренция — всегда хорошо
если вы, как и автор статьи, удивляетесь, почему у однострочных пакетов типа is-number столько скачиваний на npm, то бывает это сам автор раздувает использование своей либы через другие пакеты (naturally, пакеты с пакетами)
как на Performance API собрать (на коленке) основные пользовательские метрики перфа: Largest Contentful Paint, First Contentful Paint, Cumulative Layout Shift, Interaction To Next Paint, Long Animation Frames

CSS

реакт реактом, а переносить текст со строчки на строчку всё равно нужно — гайд по word-break, oveflow-wrap, hyphens, <wbr>, &shy (с последней парочкой нужно быть аккуратными)
скролл-анимация триггерит смену кастомного свойства --animate: true, а по нему применяется Style Query @container style(--animate: true), который анимирует появившийся во вьюпорте элемент — самый блидинг из возможных эджей
хочешь не хочешь, а рано или поздно придёт она — задача на стилизацию печатных страниц, в этом случае пригодится детальный гайд по @page и @media print в разных вариациях

Платформа

обширный гайд по скриншотному тестированию с Playwright: самое ценное, пожалуй, что есть рецепт по запуску таких тестов в CI/CD, так как локально, как правило, скриншоты будут немного отличаться в зависимости от ОС
опыт команды Самолёта по оптимизации перфа: есть довольно полный чеклист кандидатов на оптимизацию
из серии «не боги горшки обжигают»: понаблюдать за редизайном сайта nodejs можно тут: новый сайт, макет, обсуждение

Анимация без стереотипов

Wed, 06 Mar 2024 00:00:00 GMT

Хоть анимация и понимается прежде всего как «оживление», в CSS кроме обычной плавной анимации, есть ещё пара типов — дискретная и никакая (свойство не анимируется).

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

Свойства с плавной анимацией — это цвета, размеры, отступы и прочие свойства, к которым можно применить плавные переходы.

Свойства с дискретнной анимацией — (внезапно) почти все остальные свойства, за некоторым исключением.

Ок, как это можно использовать. В этом кейсе я воспринимаю анимацию как механизм переключения значения свойства из одного в другое (с опциональным таймером и повторением N-раз). То есть некий setInterval(() => fn(value)), только в мире CSS.

Я полистал список всех CSS-свойств и выбрал несколько, об анимации которых я раньше не задумывался. Например, свойство content. Можно сделать «мигающий курсор»:

div::after {
  animation: blink 1s infinite;
}

@keyframes blink {
  from {
    content: "";
  }
  to {
    content: "|";
  }
}

А учитывая, что content в качестве значения поддерживает текст, картинки, кавычки, счётчики, то можно сделать хоть целое слайдшоу 😁

Окей, ещё с помощью дискретной анимации можно собрать свою gif-ку на коленке. Это буквально быстрая смена «кадров» с картинками, как в кино. Если в секунду сменять 10 «кадров», то скорость будет достаточная для создания иллюзии непрерывного движения:

.frame {
  animation: movie 1s infinite;
}

@keyframes movie {
  0% {
    background-image: var(--image-1);
  }

  10% {
    background-image: var(--image-2);
  }

  …
}

Демо собрано тут.

Дальше я решил развить тему кинематографа и следующим попробовать анимировать лейаут гридов. Для построения отдельных «кадров» я решил использовать свойство grid-template-areas. Это свойство описывает раскладку грида в декларативном виде. Вот так, к примеру, будет выглядеть начальный «кадр» будущего фильма:

grid-template-areas:
  ". . . . a a a a a . . . ."
  ". . . . . . . . b . . . ."
  ". . . . . . . . b . . . ."
  ". . . . . . . . b . . . ."
  ". . . . c c c c c . . . ."
  ". . . . . . . . d . . . ."
  ". . . . . . . . d . . . ."
  ". . . . . . . . d . . . ."
  ". . . . . . . . d . . . ."
  ". . . . e e e e e . . . .";

Точками в значении grid-template-areas обозначены те области грида, которые не будут закрашены белым, а буквами — те, которые закрашиваются. По ходу «фильма» значение grid-template-areas будет принимать разные значения. А вот подменять эти значения раскладки грида будет CSS-анимация. Для этого нужно прописать раскадровку «фильма» в кейфреймах:

@keyframes movie {
  0% {
    grid-template-areas: …;
  }
  10% {
    grid-template-areas: …;
  }

  … 100% {
    grid-template-areas: …;
  }
}

И затем задать получившуюся анимацию для грид-контейнера .field:

.field {
  animation-name: movie;
  animation-duration: 10s;
  animation-play-state: paused;
  animation-timing-function: step-end;
  animation-iteration-count: 1;
  animation-fill-mode: both;
}

Получившийся триллер можно найти тут.

И ещё одна деталь про неанимируемые свойства. А что будет, если в кейфреймы положить display: none? Оно применится в конце, начале или середине анимации?

.fade-out {
  animation: fade-out 1s forwards;
}

@keyframes fade-out {
  100% {
    opacity: 0;
    display: none;
  }
}

Спецификация говорит, что свойство display — not animatable. И для display: none с относительно недавних пор действует особое правило: если анимация «появляет» элемент, то display включается в самом начале, а если анимация элемент скрывает, то display: none применяется в самом конце, после всех остальных транзишнов (демо тут, работает везде)!

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

Fri, 22 Mar 2024 00:00:00 GMT

Новости

вышел 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)

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

Fri, 15 Mar 2024 00:00:00 GMT

Новости

в опенсорс выложен Rolldown, замена Rollup на Rust для Vite: радует, что обратно совместим с Rollup, но пока ещё в активной разработке, не для продакшена
вышла Node v21.7.0: встроенная стилизация текста console.log(util.styleText('bold', 'text')), загрузка и парсинг переменных окружения process.loadEnvFile(path) и util.parseEnv(content), поддержка многострочных значений в .env файлах
вышел Biome v1.6:
- поддержка расширений файлов vue, astro, svelte
- новые настройки форматтера
- лёгкая миграция с Prettier
вышел Storybook 8: встроенные визуальные тесты, поддержка React Server Components, обновления интерфейса и ускорение работы
INP теперь официальная метрика Core Web Vitals, FID будет задепрекейчена в сентябре 2024
Astro выпустили Astro DB, адаптированную SQL-бд на основе libsql

Проекты

utopia — система «резиновой» типографики, отступов, сетки: позволяет задать минимальное и максимальное разрешение интерфейса, а также количество промежуточных шагов между ними и получить готовые CSS-переменные для использования
device-simulator — симуляция девайсов в браузере для тестирования интерфейсов: не browserstack, скорее переосмысление стандартных браузерных дев-тулзов (device toolbar), помощнее, есть возможность показа нескольких устройств одновременно
gravity-ui — каждое поколение яндексоидов создаёт собственный UI-кит, и этот выглядит очень даже прилично: есть дизайн-система, Figma и токены, позаботилились о доступности, свои иконки; остаётся только понять, какой из двух Яндексов будет его дальше овнить
react-geiger — счётчик Гейгера для React-приложения: если что-то рендерится долго и часто, то вы это услышите
jsoncanvas — спецификация и формат файлов JSON Canvas для имплементации бесконечных досок аля Miro, Obsidian и тд

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

JS

если долго сидеть у реки, то рано или поздно по ней проплывёт заброшенный JS-проект, так как его купили крупняки, уволили сотрудников и забили (речь о Gatsby, если что)
работа с относительными datetime-ами с помощью Intl.RelativeTimeFormat (давно поддерживаемая в браузерах)
создание доступных компонентов форм на React: кнопки, лейблы, филдсет, плейстхолдеры, фокус и навигация с клавиаутры, отображение ошибок
лучшие практики по использованию React Testing Library: тестирование доступности компонентов, реализация смоук-тестов
make macros great again: теперь подход с прекомпилированными в билд-тайме кусочками JS-кода доступен не только в parcel, но и в webpack, vite и остальных

CSS

статьи про новые CSS-фичи читаются как научная фантастика: красиво, интересно, когда-то это будет, но пока полностью не работает; вот и в этом материале рассказывается, как собрать ванильные модалки и «тосты»: <dialog> для модальных всплывашек, popover — для немодальных всплывашек, нативная стилизация элементов и показ/сокрытие, стартовая анимация @starting-style и даже anchor positioning для показа в определённом месте интерфейса
стилизация текста: глитч-эффект, множественные тени и SVG-фильтры (осторожно, можно случайно стать КМС по text-shadow)
небольшие рецепты из жизни по использованию :has():
- изменение лейаута, если в контейнере есть определённый элемент
- подсветка контейнера, если внутри есть :target
- затемнение соседей при ховере на элементе
предложение от Ли Веру сделать из кастомных свойств своего рода «объекты»: --color-green: { base: red; 100: green; 200: blue}; зная, что благодаря Ли в CSS уже появилось много ништяков, глядишь и этот тоже затащат
использование color-mix() для создания палитр: ещё один кусок платформа откусила от sass

HTML

для записи кавычек в тексте alt используйте одинарные кавычки ' или "

Платформа

в Chrome 122 появилась улучшенная поддержка Speculation Rules API: это переосмысленный, более выразительный и автоматизированный последователь link="prerender" с исчерпывающим описанием, какие ресурсы и в какой очерёдности прелоадить и пререндерить
35 лет назад Тим Бернес Ли описал «спецификацию интернета» — Information Management: A Proposal

Зависимости

Tue, 26 Mar 2024 00:00:00 GMT

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Конечные автоматы

Tue, 19 Mar 2024 00:00:00 GMT

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

В целом, это ок подход. Он хорошо работает на прямолинейных сценариях с несложной логикой. В случае системы со сложным поведением, если её спроектировать исходя из действий, то тогда в программе начнут появляться «режимы работы», «флаги» isSomething… и хитроспетения условий с комбинациями значений этих флагов.

Если ветвлений и состояний более 8-10, то тогда сложно создать и держать в голове ментальную модель, код на флагах и ифах превращается в плохо структурированную кашу, в которой легко допустить ошибку или логическую дыру.

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

Самый простой автомат состоит из двух состояний: выключено → включено. Чтобы перейти из одного состояний в другое вызывается action. Например, человек «спит» → вызывается action «пробудиться» → человек «бодрствует».

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

На фронте для реализации конечных автоматов есть классная либа xState. Автор либы из Microsoft, и она появилась, чтобы было проще поддерживать редактор workflows в Azure. На самом деле такое случается сплошь и рядом, когда появляется некая развесистая система, в которой могут разобраться только её авторы, так как в неё сложно въехать, объять умом целиком. И если есть общая диаграмма работы, то больше шансов, что человек с улицы сможет её раскурить.

Например, посмотрите на вот эту схему, попробуйте нажать «Simulate» в правом верхнем углу и прогоните программу от начала до конца. Так уже сходу и стало более-менее понятно, что в ней происходит?

А теперь если добавить, что из этой схемы сразу же генерится и код автомата, который можно скопировать в проект, допилить напильником и он будет работать, то получается прям бомба-пушка. Кстати, для VS Code есть визуализация прям внутри редактора, оч удобно прочекать, где куда и что идёт, это «живая документация».

Что ещё интересного есть в xState. Между состояниями могут быть guards, которые в зависимости от результата поведут в одну сторону или в другую. Поддерживается TS и асинхронная логика. Есть интеграция с React, Vue, Svelte. Также авторы стали развивать либу в сторону actor-ов: это такой архитектурный паттерн, когда система представляется неким действующим лицом, актором, которое выполняет действия, может взаимодействовать с другими акторами и тд.

В общем, если у вас уже запутанная система или вы собираетесь заниматься системой с множественными состояниями, советую приглядеться к xState ✌️.

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

Fri, 29 Mar 2024 00:00:00 GMT

Новости

вышел 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 для бинарного поиска проблемного коммита

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

Tue, 02 Apr 2024 00:00:00 GMT

Сегодня расскажу про старый-добрый 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% будут равны между собой и отступа не будет.

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

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

Fri, 12 Apr 2024 00:00:00 GMT

Новости

вышел Jpegli — новая либа для кодирования jpeg, обещают на 35% лучшее <s>зашакаливание</s> сжатие, казалось бы 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^="javascript"])

HTML

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

Платформа

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

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

Fri, 05 Apr 2024 00:00:00 GMT

Новости

обновились 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, подбирать подходящие фолбек-шрифты

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

Fri, 19 Apr 2024 00:00:00 GMT

Новости

обновления 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 обещает быть быстрее за счёт отказа от клона объекта пропсов в пользу прокидывания его напрямую

Проекты

svgencode — энкодер 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)

Про платформу

Tue, 23 Apr 2024 00:00:00 GMT

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Fri, 03 May 2024 00:00:00 GMT

Новости

из 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-модулей из пакета typescript для Ноды, опция 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 или вебе, то это не так: те же проблемы есть и у дизайнеров, и в нативной платформе)

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

Fri, 26 Apr 2024 00:00:00 GMT

Новости

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

HTML

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

Платформа

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

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

Fri, 10 May 2024 00:00:00 GMT

Новости

выпущена 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 поделились, как сделать человеческое выпадающее субменю, чтобы оно случайно не закрывалось во время движения курсора: строится визуальный треугольник, в рамках которого считается, что подменю не должно быть скрыто + по скорости движения предполагается, куда пользователь собрался двигать курсор

Про Flex

Tue, 14 May 2024 00:00:00 GMT

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

Если серьёзно (и выкинуть всякую xml-требуху), то смотрите:

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

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

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

Fri, 17 May 2024 00:00:00 GMT

Новости

вышел Astro 4.8: добавлена экспериментальная поддержка actions — возможность объявить методы, запускающиеся на бэкенде, и вызывать их напрямую из JS. Что сразу же мне напомнило аналогичную возможность из https://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, https://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 года заработает везде, а пока есть полифилл

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

Tue, 21 May 2024 00:00:00 GMT

Приходилось ли вам работать с длинными 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?.

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

Fri, 24 May 2024 00:00:00 GMT

Новости

Vercel привлек 250 миллионов $ финансирования, а это значит, что ещё больше «нетехнических» клиентов будет в один клик пользоваться облаком, генерировать компоненты на https://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 файлов на клиенте и сервере
svgviewer — поисковик и просмотрщик 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 открыт может быть только один (аккордеон), <script async blocking="render"> блокирует рендер, <input type="file" accept="video/*" capture> сделает запись с пользовательской камеры

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

Wed, 29 May 2024 00:00:00 GMT

С задачей обычной сортировки, если речь про английский язык или числа, норм справляется 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.

Демо тут

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

Fri, 31 May 2024 00:00:00 GMT

Новости

на волне новостей о 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 лет и можно использовать)

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

Wed, 05 Jun 2024 00:00:00 GMT

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Тесты

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

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

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

Рефакторинг

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

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

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

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

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

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

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

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

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

Фронтенд

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

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

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

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

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

https://grugbrain.dev

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

Fri, 07 Jun 2024 00:00:00 GMT

Новости

в FF будет добавлена генерация alt-ов с помощью нейросети прямо на устройстве: фича хорошо ложится в тренд, что AI будет появляться в браузерах и помогать пользователям с взаимодействием с сайтами и приложениями
вышла react-testing-library v16.0.0: @testing-library/dom и @types/react-dom вынесены в отдельные зависимости, чтобы устранить возможные конфликты
история с эпичным обновлением eslint продолжается: анонсирован ESLint Configuration Migrator — тула для <s>автоматического перевода</s> помощи в переводе .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 элементов скажется уже на этапе построения дерева, даже до стилей)

Откуда взялся Octocat

Wed, 12 Jun 2024 00:00:00 GMT

Операция git merge используется для слияния веток. Но слияние может происходить по-разному. Есть дефолтный алгоритм слияния, который используется, если выполнить команду git merge (также мердж неявно происходит при git pull). Для слияния двух веток в версиях git с v0.99.9k до v2.33.0 использовался алгоритм recursive (наверняка вы видели в консоли сообщение «Merge made by the 'recursive' strategy» — это вот оно).

В более новых версиях дефолтный алгоритм recursive был заменён на ort (Ostensibly Recursive’s Twin — «Как будто бы близнец Recursive», видимо разработчики посчитали что называть его recursive-v2 как-то не оч). У него тот же интерфейс и настройки (работает для слияния двух веток), но он работает побыстрее в больших репозиториях (особенно при мерджах, где было много переименований) и учитывает граничные случаи, которые в recursive решались неоптимально.

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

git checkout -b testing
git merge feature/one feature/two feature/three

В этом случае применится алгоритм слияния octopus. И буквально три ветки будет слито в одну (в целом, количество веток может быть любым, но лучше не превращать слияние «осьминога» в слияние «ктулху»).

*-.   dbc6a8b (HEAD -> testing) Merge branches 'feature/one', 'feature/two' and 'feature/three' into testing
|\ \
| | * 0260176 (feature/three) add test-3.txt
| * | abc9e86 (feature/two) add test-2.txt
| |/
* / 77e0aa8 (feature/one) add test-1.txt
|/
* 82acd11 (master) init

Также стратегию можно передавать явно в параметре вот так: git merge -s recursive.

Так вот, давным-давно, когда начинался GitHub, его основатели захотели создать забавную страницу ошибки и купили на стоке ту самую картинку котоосьминога, которая называлась «Octopuss» у дизайнера Simon Oxley.

Позже Octopuss стал более «корпоративным» Octocat, GitHub нанял дизайнера-разработчика Cameron McEfee, чтобы сделать из одной картинки целую мерч-индустрию и, что называется, завертелось.

Забавный факт: на двумерных картинках у октокота всегда видны только 5 лап (по разным версиям одна из них — хвост). И когда появилась задача сделать трёхмерную фигурку, то встал вопрос сколько всё таки у него будет ног: 4 ноги и хвост или же 8 щупалец (3 из которых не видны на картинке). В итоге решили, что у фигурки будет 4 ноги и один хвост. Впрочем, потом появились анимации, где у октокота много щупалец.

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

Fri, 14 Jun 2024 00:00:00 GMT

Новости

анонсирован 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: готовый сайт захостится на https://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": "yarn@3.1.1"

CSS

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

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

Fri, 21 Jun 2024 00:00:00 GMT

Новости

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

background-color: if(style(--variant: success), var(--color-success-60));
border-radius: if(style(--shape: pill) ? 999em: 0.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 и сервер и клиенты написаны на разных языках

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

Fri, 28 Jun 2024 00:00:00 GMT

Новости

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 исправляет правописание)

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

Fri, 05 Jul 2024 00:00:00 GMT

Новости

математические 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, который «выключает» интерактивный элемент (на него нельзя нажать, дотабать или найти через средства доступности) — хороший юзкейс для ограничения пределов фокуса при показе модальных окон

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

Fri, 12 Jul 2024 00:00:00 GMT

Новости

вышел 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, в который передаётся хэш, и если содержимое файла скрипта или стилей изменится, а хэш нет, то тогда браузер выкинет ошибку и не выполнит файл (сгенерить хэш можно тут)

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

Fri, 19 Jul 2024 00:00:00 GMT

Новости

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-строки, которая является, к примеру, билетом на концерт)

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

Fri, 26 Jul 2024 00:00:00 GMT

Новости

в 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 возможность скролла будет гарантировано полностью выпилена

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

Fri, 02 Aug 2024 00:00:00 GMT

Новости

в 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 (с недавнего времени доступный во всех современных браузерах) прошёл мимо вас, то вот свежий гайд в тему (годится для создания простых модалок)

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

Fri, 09 Aug 2024 00:00:00 GMT

Новости

вышел новый бэкенд-фреймворк для 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 можно отправить письмо из консоли

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

Fri, 16 Aug 2024 00:00:00 GMT

Новости

в 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-помощником? Получите https://postgres.new!

CSS

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

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

Fri, 23 Aug 2024 00:00:00 GMT

Новости

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

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

Fri, 30 Aug 2024 00:00:00 GMT

Новости

выпущен 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)) выберет контейнер с чётным количеством элементов

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

Fri, 06 Sep 2024 00:00:00 GMT

Новости

в Safari Technology Preview 202 поддержано CSS-свойство scrollbar-width, добавлена возможность анимации для нечасто встречающихся свойств, доработан API PointerEvent, а также появилась поддержка garbage collection в WASM, пофикшено применение 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 и если значение свойства меняется, то триггерится и микро-транзишн, по которому срабатывает колбек (только для браузеров поддерживающих transition-behavior: allow-discrete)
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 на свой фанатский дискорд-сервер, куда и пришёл познакомиться создатель сайта

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

Fri, 13 Sep 2024 00:00:00 GMT

Новости

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 тоже когда-то был собственный рендеринг движок?)
к Font Awesome, недавно «поглотившей» библиотеку компонентов Shoelace, теперь присоедняется и 11ty (движок статических сайтов); норм они на иконках-то зарабатывают
VSCode переходят на ESM с AMD (помните такое)?

Проекты

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
для встроенной в браузер валидации инпутов можно задать кастомное сообщение через input.setCustomValidity('MESSAGE')

CSS

если нужно растянуть грид на определённую высоту, но при этом нет возможности задавать высоту видимым элементам грида, то в грид можно добавить пустой элемент, на который могут накладывать другие элементы, а он будет выступать только «распоркой» (повеяло табличной вёрсткой под старые IE)
помимо зрелищности, свойственной туториалам Josh Comeau, этот рассказ о :has() несёт главное предназначение этого селектора: он позволяет декларативно объединять элементы не только в родительско-дочернем направлении, но и в обратном дочерне-родительском, да и вообще в любом (что раньше достигалось только императивным скриптом); самый типичный кейс — убрать у html скроллбар в момент показа модалки:

html:has([data-disable-document-scroll="true"]) {
  overflow: hidden;
}

<div data-disable-document-scroll="{isOpen}"></div>

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

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

Fri, 27 Sep 2024 00:00:00 GMT

Новости

опубликован первый черновик 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
вышла версия verdaccio v6.0 (приватный npm-реестр): дропнута поддержка Node 14, 16
выпущен Deno 2.0 Release Candidate: лучше поддержаны cjs-модули; ещё более тесно сынтегрировались с npm; добавили тестирование примеров в коментах JSDoc (тайпчек и выполнение); поддержали новый TS 5.6
а вот в Node.js наоборот двигаются в сторону прекращения поддержки cjs-модулей, флаг --experimental-require-module перестаёт быть экспериментальным

Проекты

qrcode — либа для генерации QR-кода в браузере (отрисовывается в canvas) или Node.js в рантайме
schedule-x — полноэкранный календарь аля Google Calendar с интеграциями в React, Vue, Angular
react-diagrams — генерация диаграмм, много гибкости и настроек

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

JS

манимальный докер-конфиг для «контейнирования» Vite-приложения (используется busybox для минимального рантайма)
что по дата-фетчингу в 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 выглядит хорошо и минималистично
подход к организации React-компонентов, чтобы заключать дочерние подкомпоненты в родительский «неймспейс» типа <Card.Header> может создавать проблемы с сериализацией (актуально для серверных компонентов) и с тришейкингом, но если приготовить его правильно, то тогда проблем не будет:

// card.tsx
export function CardRoot() {}

// namespaces.ts
export { CardRoot as Root } from "./card";

// index.tsx
export * as Card from "./namespace";

CSS

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

HTML

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

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

Fri, 20 Sep 2024 00:00:00 GMT

Новости

в 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 с запросом контента из внешнего ресурса (топчик!), Server Islands для отложенного рендеринга с сервера (сложна), а также фича 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 перед попыткой отправки

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

Fri, 04 Oct 2024 00:00:00 GMT

Новости

обновилась библиотека компонентов 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); но ладно скролл, в целом уже все как-то привыкли к «неудобной» мобильной версии, но когда ломается IndexedDB — это уже печальнее
советы по написанию ПО: не бояться делать API достаточно многословным для удобочитаемости; специально не подсвечивать дефолты и внутреннюю магию (кому нужно, сами найдут); использовать в API устоявшиеся в умах ментальные модели; для изучения API вашего ПО дать возможность потыкать и посовмещать готовые примеры, вместо подхода к изучению «построим всё с нуля»

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

Fri, 11 Oct 2024 00:00:00 GMT

Новости

вышел Firefox 131:
- из интересного поддержана фича Text fragments — возможность ссылаться не только на якорную ссылку на странице (#anchor), но и на произвольный текстовый фрагмент, например, https://example.com/page[#:~:text=human] проскроллит страницу к первому встретившемуся слову «human», которое заодно можно стилизовать с помощью псевдокласса ::target-text (к слову фича поддерживается теперь во всех браузерах)
- в девтулзах улучшены поповеры кастомных свойств, теперь они показывают computed-значение и параметры свойства, если оно было объявлено через @property, а также более удобным стало редактирование HTML и CSS в инспекторе
Server Actions в 19 React стали называться Server Functions, а точнее стали подмножеством «серверных функций», которые не обязательно являются «экшном»
есть такое сообщество e18e, которые взяли на себя роль «санитаров платформы», ходят к мейнтейнерам популярных пакетов, предлагают улучшения перфоманса, помогают выпилить ненужные зависимости; вот в сентябре удалось помочь выпилить смешную (да не очень) зависимость is-number из chokidar, также хорошо так подчистили Storybook и jimp; важная движуха — уважуха!
выпущен Deno 2.0: уже рассказывал о фичах раньше про RC, в этом релизе обратил внимание на команду 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 — клиент и сервер для синхронизации состояния на S3 по вебсокет-соединению, чтобы пользоваться приложением одновременно с нескольких устройств в реалтайме (ещё один мой фетиш detected)
держать секреты типы паролей в env-файлах довольно удобно, но при этом, чем больше секретов попадает env-файл, тем менее надёжной становится эта система: env-утекают на фронте/SSR, через логи или просто во время видео-стрима; отдельный прикол — env-переменные, с которыми запущен node-процесс видны в списке процессов в Unix-like-системах
вообще-то это статья про то, как работает фича девтулзов Chrome «pause on uncaught exceptions» (этот факт надо «предсказывать», так как в момент выбрасывания исключения неясно, будет ли оно поймано дальше в коде); но меня заинтересовало другое: на сайте используется куча веб-компонентов (без драм и обсуждений), например, <devsite-code> для отображения блоков кода, причём используются они корректно, в виде «виджетов»: кастомные элементы — это обёртки, докидывающие стилизацию и часть функциональности, а благодаря прогрессивному улучшению, в браузерах, не поддерживающих кастомные элементы, контент всё равно покажется, но немного коряво и с меньшей функциональностью, красота!
нативный нестинг в CSS правилах появился без флага в Chrome 112, но с немного другим синтаксисом (нужно было в некоторых случаях проставлять дополнительный &) и это окончательно починили в грядущем Chrome 130, а чтобы не сесть в лужу со старыми версиями теперь нужно в нестинге обычные правила писать перед медиа-выражениями (что и логично)
как на коленке собрать RSS-агрегатор с помощью Astro и rss-parser (сам тоже стал собирать RSS, но в тг-бота)
Map в JS пригодится, если нужно, чтобы ключами было что-то, кроме строк или символов, например, другие объекты или числа

CSS

хороший пример, как построить цветовую тему с нативной поддержкой темной/светлой схемы: очень выразительно и гибко получается комбинировать oklch-формат и функцию light-dark()

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 (от себя добавлю сам @supports)
значение свойства grid-template-rows: repeat(calc(var(--int)), 0px) можно сделать динамическим, если анимировать кастомное свойство --int, объявленное через @property

Платформа

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

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

Fri, 18 Oct 2024 00:00:00 GMT

Новости

вышел 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, и, да, сейчас предлагается по сути та же схема, то есть распространить стандартизацию на вот эту самую «мутант»-версию языка, из которой особо удачные и обкатанные фичи смогут переводиться в «стабильную» версию: а там, вангую, мы получим и «ванильную» типизацию, и всё остальное, что сейчас добавляется надстройками
Zustand обновился до v5: новых фич нет, дропнута поддержка ES5, React <18, TS <4.5, небольшие поведенческие breaking-изменения
вышла Node 23.0.0: по умолчанию теперь работает require() ES-модулей, дропнута поддержка 32-bit Windows,
Webflow купили GSAP: ждём выхода фаундеров через полгода 🙂

Проекты

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

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

JS

обратная сторона удобства экосистемы npm — из неё так удобно и быстро можно поставить в проект зловредное ПО: иногда злоумышленники для своих пакетов «захватывают» имена, похожие на общеизвестные названия, либо могут замаскировать пакет под «легальный», но внутри будет rm -rf ~/*, который запустится по таймеру через час после установки
эволюция структурирования кода в React-проекте от папки components к лайтовому варианту FSD (но не раскрыта тема, где лежат сторы — их желательно держать в фичах или же выносить в entities, чтобы мочь импортировать в несколько фич сразу)
реализация 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%)

Платформа

на чём сфокусировать усилия по сближению кроссбраузерности вендоров в 2025, витрина с пропоузалами: core web vitals, депрефиксация оставшихся CSS-свойств, ::before / ::after на replaced-элементах, Container Queries, SVG и фильтры, CSS Anchor Positioning, Navigation API

dev fiction

Tue, 22 Oct 2024 00:00:00 GMT

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

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

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

2030 год. Команда React несколько лет пребывает в упадке. Компании всё чаще ищут альтернативное решение, которое будет позволять создавать более быстрые SPA с простым SSR, но его нет на рынке. Многочисленные попытки уйти от React и создать альтернативное 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, которая позволяет удобно отлаживать приложения и быстро учиться работе с FinalFramework.

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

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

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

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

Fri, 25 Oct 2024 00:00:00 GMT

Новости

вышел Svelte 5, главные изменения: реактивные элементы теперь описываются явно (раньше было более магически); убран синтаксис slot, let: и <svelte:fragment> в пользу {#snippet …}; нативно поддержан TS; появился новый CLI; SvelteKit будет доработан под Svelte 5, но работает уже сейчас
вышел Next.js 15: API headers, cookies, params и searchParams стали асинхронными; кеширование GET Route Handlers и Client Router Cache выключено по умолчанию; поддержан React 19 и ESLint 9; добавлен новый компонент <Form>
выпущена React Compiler Beta: чтобы компайлер работал корректнее, код должен соответствовать требованиям специального плагина eslint-plugin-react-compiler (также сохранена обратная совместимость с React 17 и 18)
Netlify вслед за Cloudflare присоединяется к проекту OpenNext, но они и так раньше полноценно хостили Next.js проекты, так что это всё маркетинг
в shadcn зарелизили «семейство» компонентов сайдбара, много всяких их вариаций, есть «ручки» CSS-переменных для стилизации, но одним большим НО всё ещё остаётся Tailwind в ядре этого кита; православный React Spectrum пока что на эту тему имеет только beta-версию компонента Tree View
IDE WebStorm стал Free for non-commercial use, делаю вывод: редактор Fleet не полетел, в JetBrains решили потратить прибыль от лицензий WebStorm на маркетинг, в момент когда есть повсеместно некая усталость от VSCode (кстати, а где моя доля?!)
появились результаты опроса State of CSS 2024, интересные факты:
- 25% опрошенных создают свои дизайны сразу в CSS
- большинство CSS-фич уже вышло, но при этом всё ещё есть болит кроссбраузерность
- самые любимые фичи :has() и subgrid
обновилась версия Transformers.js v3, JS-реализации популярных ИИ-моделей (около 120 штук): появилась поддержка WebGPU; совместим с Node, Bun, Deno; теперь хостится в официальном хранилище Hugging Face

Проекты

hexp3 — быстрый конвертер цвета hex в похожий цвет в пространстве P3
pragmatic-drag-and-drop — dnd-либы приходят и уходят, вот и новый подход Atlassian после депрекейта react-beautiful-dnd

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

JS

обратная сторона того, что веб-тулинг написан на ненативном языке (например, Rust вместо JS), его становится сложно продебажить, а также если тулинг работает в браузерном рантайме, то уходят бесплатные браузерные плюшки — JIT и кэширование байт-кода (это когда во второй раз скрипт берётся в прекомпилированном виде из кэша, а в n-ннадцатый раз ещё и дополнительно оптимизируется); кстати, ещё есть рецепт, как включить compile cache в Node: export NODE_COMPILE_CACHE=~/.cache/nodejs-compile-cache
мнения по поводу предложения в TC39 разделить версии языка на JS0/JSSugar разделились: сторонник изменений будет рад появлению pipes в JSSugar, а вот противник хочет продолжать писать на «низком уровне» и дальше (хотя вроде как ему этого и не запрещают)
статья про перевод cjs в esm: в целом, ничего нового, но ребята из Deno напоминают, что в Node уже давно есть import.meta.dirname и import.meta.filename, а также что в VSCode есть рефакторинг-тула для перевода cjs-модулей в esm (также можно выполнить deno lint --fix, но его ещё установить надо)
недавний выход в Node.js возможности require-ить esm-модули создало проблему: это работает только если в импортируемых esm-модулях (а также их внутренних зависимостях) не используется top-level await; таким образом имели два конфликтующих типа модулей CommonJS и ESM, а появился ещё и третий — ESM без top-level await
если нужно сделать кастомный курсор с анимацией по наведению на элемент интерфейса и доп инфой рядом с курсором, то свойством cursor не обойтись: нужно создать невидимый элемент, которому на mousemove будут прокидываться координаты и он будет становиться видимым в момент :root:has(button:hover) {}
WeakRef в JS даёт возможность создать ссылку на другой объект, которая уберётся из памяти Garbage Collector-ом, а с FinalizationRegistry можно создать колбек на сам момент очистки памяти

CSS

для того, чтобы стать КМС по теням, градиентам, а также их комбинациям с масками + clip-path можно рисовать пластилиновых человечков на CSS
функция min() понятна сходу (в отличие от container queries) и её можно применять как «односторонний стопор» при задании динамических значений для width, margin, `font-size
Text fragments — возможность ссылаться на определённый текст на странице хороша ещё и тем, что в Chromium-браузерах есть фича «Copy link to highlight» в контекстом меню на выделенном тексте, которая сгенерит эту ссылку
чтобы фон вложенного элемента не вылезал за скругленные углы родителя, можно принудительно унаследовать border-radius: inherit вместо добавления overflow: hidden

Платформа

в чём веб-компоненты плохи (там есть и хорошая часть, но плохая всегда интереснее): Shadow DOM катастрофически переусложнён; SSR сложно и делается только из-под фреймворков; роутер на веб-компонентах лучше не делать; есть проблемы с доступностью; и главная проблема — нет широкой поддержки в популярных фреймворках
по аналогии с conventional commits есть conventional comments, для того, чтобы сделать комментарии в процессе ревью кода более осмысленными и сразу было видно, какие комментарии пишутся только чтобы поумничать и их можно не учитывать и отправлять прямиком в глубокий бэклог
хорошая абстракция в коде абсорбирует сложность, влезать внутрь приходится редко; плохая абстракция маскирует сложность дополнительными слоями смыслов и в неё надо часто залезать

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

Fri, 01 Nov 2024 00:00:00 GMT

Новости

обновилась Node до v23.1.0: стабилизировано встроенное в 'node:test' MockTimers API, позволяющее замокать системное время mock.timers.enable({ apis: ['Date'], now: new Date('1970-01-01') });, а также теперь стабильны JSON modules и import attributes — это когда к импорту JSON-файла приписывается уточнение with { type: 'json' } для повышения безопасности, чтобы среда проверила, что внутри действительно JSON (также с выходом Node 22.11.0 все дальнейшие 22.x-релизы будут считаться LTS)
состоялся первый митинг рабочей группы JSR (аналог npm от создателей Deno), из слайдов можно узнать, что: JSR не всегда может опубликовать существующий проект на .js + .d.ts; хостинг проекта стоит ~$400 в месяц; хотят сделать тул для генерации JSR-конфига из package.json
Apple пошла на уступки контролирующим органам в EU и добавила в новой бете iOS послабления (только для EU) в истории с монопольностью Safari: браузерные вендоры теперь могут включать бинарник с собственным движком в браузер, но он всё равно будет использоваться на пару с webkit, правда тестировать это дело за пределами EU всё равно нельзя; выбор браузера по умолчанию появится в более заметном месте и в явном виде; Safari можно будет удалить из системы
вышел Firefox 132: улучшена поддержка аппаратного ускорения для SVG-фильтров; HTTP-фавиконки будут блокироваться, если их невозможно получить через https; поддержан атрибут fetchpriority

Проекты

nvm-desktop — собранный на Tauri кроссcистемный десктопный клиент Node Version Manager
node-html-to-image — Node-надстройка над puppeteer, чтобы отрендерить страницу и снять скриншот (опционально поддерживается Handlerbars для разметки)
DuckDuckGo AI Chat — через сервис можно бесплатно и без VPN пользоваться чатом с моделями GPT, Claude, Llama, Mixtral
html- — попытка воссоздать стандартные HTML-элементы с помощью веб-компонентов (которая обречена на провал, но смотреть интересно); вот, например, кнопка

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

JS

нативная поддержка TS в Node уже сама по себе хороша, но также позволяет импортировать TS-файлы просто так const module = await import('./module.ts');; включить можно экспериментальным флагом при запуске Node, в том числе в сразу внутри .bashrc: export NODE_OPTIONS="--experimental-transform-types --disable-warning=ExperimentalWarning"
ручной вызов метода submit() у формы совершит отправку не учитывая валидации и не запуская события submit; а чтобы перед отправкой формы триггерить событие и проводить валидации, есть давно доступный в браузерах метод requestSubmit()
пример реализации микрофронтендов с помощью Cloudflare Workers: приводится пример реализации с гейтвеем, через который проходят все запросы, и который отдаёт нужный микрофронт, а также с кастомными элементами для обозначения, куда инжектить микрофронт и с общей шиной событий (честно говоря, это уже почти похоже на набор iframe-ов, в которых грузятся независимые страницы)
«нативное» управление светлой-тёмной темой через <meta name="color-scheme" content="light dark"> прикольно тем, что можно буквально найти meta-элемент через document.querySelector и менять его значение
«нативная» валидация форм (атрибут метод setCustomValidity у инпутов) позволяет на коленке сделать проверку введённого значения в инпуты и отобразить это в виде системного уведомления (пример для React)
File — это расширение Blob, с добавленными методами name, size, type, lastModified, webkitRelativePath

CSS

селектор .container:has(.element:last-child:nth-child(-n + 3)) применится, если в контейнере содержится 3 или меньше количество элементов, удобно, к примеру, для перестроения грида
гайд по Scroll-Driven Animations (пока доступны только в Хромиум-браузерах): киллер-фича — разгружается основной поток браузерного движка и поэтому анимации получаются гарантировано более плавными (бонусом пример связки анимации кастомного свойства посредством скролл-анимации)
с частым появлением новых фич в CSS можно регулярно их обновлять в CSS Reset; в предлагаемом варианте используются @layer, чтобы подключать стили не обязательно в самом начале , и нативная вложенность селекторов :not([class]) { h1& {…}}
использование полупрозрачного цвета вместо сплошного — хороший лайфхак, чтобы не плодить цвета для разных состояний кнопок или рамок, годится для приложений с несколькими цветовыми темами

Платформа

сборник рекомендаций по улучшению Core Web Vitals, из интересного: в Chrome есть вкладка Coverage, чтобы увидеть загруженный, но неиспользующийся код; картинки лучше всего подключать в <img src|srcset>, так они начинают грузиться раньше, а не ждут загрузки стилей/скриптов; не стоит пользовать событие unload и заголовок Cache-Control: no-store, так как они мешают браузеру доставать страницу из кеша при переходе «назад»
обычно поиском по истории коммитов пользуешься, чтобы посмотреть, кто что изменил в конкретном файле или строке файла; а вот git log с ключом -S — «поисковик» по диффам коммитов определённой строки, не привязываясь к конкретному файлу
недавно писал dev-fiction, где предполагал появление web-components-фреймворка от Google и «глобального UI-kit-а», помните? Как вы возможно догадались, «прототипы» не были взяты мной из воздуха. Фреймворк самом деле существует — это Lit (остаётся довезти туда нативные сигналы, упростить SSR, добавить тесную интеграцию с дев-тулзами и включить маркетинговую машину), а прототип «глобального» UI-kit-а — это Shoelace (недавно переродившийся в Web Awesome), основанный на Lit (остаётся перестать быть местечковым проектом одного человека). Так вот, я к чему веду: посмотрите на код веб-компонента статусной плашки, у меня этот код вызывает приятные ощущения, а у вас?

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

Fri, 08 Nov 2024 00:00:00 GMT

Новости

Nicholas C. Zakas прорабатывает поддержку в ESLint плагинов для других (неES) языков, например, началась работа над плагином для линтинга CSS, а что Stylelint по сути делает схожие манипуляции, почему бы не делать это в самом ESLint?
часть OSS-разработчиков Flutter создали форк Flock, из-за недовольства, что баги в оригинальной команде долго фиксятся, планируют активно работать с сообществом, но при этом не отходить от оригинального Flutter (пока что)
в Mozilla Foundation (НКО) сократили 30% персонала (отделы advocacy и global)

Проекты

jsonvisualizer — визуализация JSON в виде диаграммы, например, чтобы окинуть взглядом сразу весь ваш развесистый package.json или JSON-ину с большой вложенностью
codingfont — шрифтовый батл, чтобы остался тольк один: удобный, моноширинный, твой (у меня победил Source Code Pro)
prerender — Node-сервер, который в безголовом Chrome отрендерит SPA и отдаст готовый HTML (например, для поисковиков)

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

JS

если отбросить хэллоуинскую тематику, то в одном месте сравниваются подходы к организации UI-китов:
- headless (безголовый) — кит предоставляет компоненты и минимальные стили, разработчик сам организует CSS для них (Radix Primitives)
- boneless (безкостный) — кит предоставляет атомарные классы, из которых разработчик уже составляет компоненты (Bootstrap, Tailwind)
- skinless (безкожный) — как кит предоставляет компоненты, но совсем без стилей (React Aria)
- lifeless (безжизненный) — набор «голых» хуков и абстрактной функциональности, в которые нужно самостоятельно передать «физическое воплощение», чтобы система «ожила» (TanStack, React Aria Hooks)
идея: не использовать try/catch напрямую, а оборачивать код в функцию, возвращающую промис, а уже внутри этой функции прописать catch у промиса
пока в Vercel проводят конференции и выпускают новые версии с поддержкой «серверного» React, в мире работает один (на самом деле нет) Tanner Linsley, пытающийся вернуть React на клиент, сделав сервер ещё одним способом работы с асинхронными данными, но при этом оставив прежнюю клиентскую природу React в TanStack Start, очень интересно, что же получится
оператор ??= позволяет избавиться от бойлерплейтного кода, когда нужно проверить значение на null/undefined и присвоить дефолтное значение: вместо user.name = user.name ?? 'Anonymous' пишем user.name ??= 'Anonymous'

CSS

свойство text-wrap: balance ожидаемо из названия подравнивает длинные многострочные заголовки и короткие тексты, но уже неожиданно может быть использовано для подравнивания любых inline-элементов, переносящихся на несколько строк, например, <li> с display: inline-block и иконками внутри
в @layer можно включать не только reset-стили, но и в целом любые глобальные стили на весь проект, если хочется избежать проблем со нарастающей специфичностью и порядком подключения стилей (@layer — это как будто !unimportant)
этот год был богат на урожай CSS-фич, которые ещё несколько лет будут входить в обиход, а пока остаётся просматривать списки фич и запоминать, чтобы при случае удачно применить; в этом списке, например, среди прочего есть упоминание о псевдоклассах :user-valid и :user-invalid, которыми с связке с :has() можно связать стилизацию <label> с последующим пользовательским неверным заполнением <input>: input { label:has(+ &:user-invalid) { text-decoration: underline wavy red }}
значение width: stretch, оно же -moz-available и -webkit-fill-available несмотря на до сих пор требуемые префиксы, доступная во всех браузерах альтернатива высчитыванию width: calc(100% - 48px), если нужно «компенсировать» отступы у 100% ширины
есть такие моменты во фронтендерских буднях, на которые можно забить, а можно мимикрокодилом улучшить интерфейс по-мелочи: много времени не займёт, конечному пользователю будет приятнее; вот, например, outline — его обычно выключают, чтобы убрать «проблему», но ведь можно его оставить, но при этом сделать симпатичным: показывать по :focus-visible, выставить цвет currentcolor, сделать элемент «блочным», немного скруглить углы, задать outline-offset и возможно немного его анимировать

HTML

ещё одна статья к подтверждению предыдущей мысли: расставить HTML-атрибуты или обернуть чекбоксы в лейблы, а кнопки в формы несложно, но пользовательский опыт улучшится и на мобильных, и на десктопных платформах
недавно ставший с выходом FF повсеместно доступный атрибут fetchpriority помогает браузеру понять, какие ресурсы грузить первым приоритетом (LCP-картинку), а какие можно отложить (второстепенные скрипты и стили); интересный приём — прелоадим стили с низким приоритетом без блокирования рендера <link rel="preload" as="style" href="theme.css" fetchpriority="low" onload="this.rel='stylesheet'">

Платформа

ответ на вопрос собеседования «что происходит, когда вы набираете адрес сайта в браузере»: DNS Lookup → TCP/TLS Handshake → HTTP Request/Response Cycle → Tokenization → DOM Tree Creation → CSSOM Tree Creation → Render Tree Creation → Layout → Painting
вы наверняка сталкивались уже с проектом webstatus.dev, где показывается в скольких процентах браузеров поддерживаются те или иные фичи; так вот к этим данным есть API api.webstatus.dev (описание схемы openapi) на поиграться

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

Fri, 15 Nov 2024 00:00:00 GMT

Новости

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

Проекты

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

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

JS

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

CSS

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

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

Fri, 22 Nov 2024 00:00:00 GMT

Новости

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

Проекты

react-scan — либа для проверки перфоманса в React-приложениях, подключается с помощью одного скрипта (наконец-то достаточно просто, чтобы (любопытство пересилило лень) попробовать на вашей приложухе) и показывает ререндеры: хороший способ отследить наличие ненужных рендеров, а также обнаружить зависимость между несвязанными друг с другом компонентов
jscodeshift — если вам нужно зараз изменить много JS/TS-файлов, то не обязательно это делать руками и писать велосипед: есть придуманный тулкит для запуска codemod-ов (программ, которые сделают нужные изменения в файлах) и получения отчёта о выполненной работе

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

JS

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

CSS

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

day 0

Tue, 26 Nov 2024 00:00:00 GMT

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

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

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

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

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

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

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

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

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

Следующая часть

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

Fri, 29 Nov 2024 00:00:00 GMT

Новости

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

Проекты

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

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

JS

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

CSS

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

HTML

tabindex с отрицательным значением сделает элемент программно фокусируемым по .focus(), но при этом он не будет включён в очередь фокусов по интерактивным элементам: ссылкам с href, button, input, select, textarea
с помощью <link rel="preload" as="image"> с атрибутами imagesrcset, imagesizes и type можно прелоадить картинки только в браузере, поддерживающий формат, заданный в type, например, type="image/avif"

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

Fri, 06 Dec 2024 00:00:00 GMT

Новости

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

Проекты

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

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

JS

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

CSS

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

HTML

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

Платформа

при принятии решения использовать ли платформенную фичу или нет, обычно руководствуются браузерной поддержкой глобальной CanIUse, но суть в том, что аудитория именно вашего сервиса может существенно от глобальной; в таком случае логично использовать аналитику своей аудитории, и данные, например, Google Analytics или Simple Analytics можно скормить самому CanIUse

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

Fri, 13 Dec 2024 00:00:00 GMT

Новости

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

Проекты

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

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

JS

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

CSS

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

Платформа

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

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

Fri, 20 Dec 2024 00:00:00 GMT

Новости

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

Проекты

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

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

JS

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

CSS

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

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

Fri, 27 Dec 2024 00:00:00 GMT

Новости

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

Проекты

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

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

JS

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

CSS

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

Платформа

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

transition

Mon, 30 Dec 2024 00:00:00 GMT

Предыдущая часть

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Fri, 03 Jan 2025 00:00:00 GMT

Новости

вышла версия новая версия Astro 5.1:
- завезли экспериментальную поддержку хранения на севере данных сессии пользователя (на клиенте не хранятся никакие данные, кроме session id в куки), есть интеграции хранилища сессий с Redis и другими БД
- появилось кеширование не только локальных картинок, но и удалённых
- добавили хэлпер getActionPath для того, чтобы узнать урл определённого серверного action-а на клиенте.
Резюме: Astro всё ещё вызывает симпатию DX-ом, тщательным выбором новых API, появляющихся в проекте, вниманием к деталям; проект уверенно занимает нишу React-фреймворка для «стандартных» приложений типа CMS и контентных сайтов
почти не пишу про видео, но эта новость из мира видео достойна упоминания: MPJ, известный в узких кругах как автор канала Fun Fun Function, после четырёхлетнего перерыва вернулся с курсом по D3.js

Проекты

ghostty — быстрый и заточенный под «нативность» терминал для macOS и Linux

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

JS

напоминание, что React Server Components могут работать и без рантаймового сервера, в этом случае «сервер» в билд-тайме рендерит компоненты и сериализует их в текст, а уже этот текст может быть доставлен в SPA в виде статического файла с обычного файлового хостинга: в таком случае разгружается общий клиентский JS-бандл, так как часть JS-кода выносится в «пререндеренном» текстовом виде в отдельные файлы, которые SPA уже может запросить «лениво» по необходимости, то есть теперь SPA уже не всегда означает чистый client-side-render
если вы занялись ~~неблагодарным~~ делом бенчмаркинга кода, то на пути вас ждут как минимум пара движков: V8 (Chrome, Node, Deno) и JavaScriptCore (Safari, Bun), и в каждом есть свои трюки, оптимизирующие выполнение кода (JIT-кэширование, рандомный Garbage Collector, Tail Call Optimization), которые при бенчмаркинге надо наоборот обойти; но для обычных смертных из полезного можно вынести, что performance.now() более точен, чем console.time()/console.timeEnd(), но при этом нужно помнить, что точность выполнения кода специально может немного задерживаться для защиты от фингерпринтинга
писать на TS, в целом, приятно (не всегда), но вот преобразовывать TS в JS вручную бывает заморочно почти всегда (tsc медленный, нужны режимы билда/вотча…), но хорошо, что уже много тулов поддерживает TS из коробки, в том числе в скором времени и Node 23, так что все в дальнейшем будут ориентироваться на подход Node — просто вырезать типы (а пока будущее не докатилось до чётной версии Node, есть tsx — беззаморочный запускальщик ts-файлов в Node)
методы forEach и map массивов — всегда синхронные, то есть если вы обрабатываете ими большие объёмы данных, то эта обработка создаёт длинные таски, которые блокируют выполнение других задач в потоке, что в свою очередь может привести к зависаниям вкладки, лагающим анимациям; решается проблема переходом на цикл for .. of и батчингом: в процессе цикла нужно проверить, пора ли делать «паузу» и если да, то запускать await new Promise(requestAnimationFrame) для запуска отложенных перерисовок и scheduler.yield() для выполнения параллельных задач

CSS

юзкейсы нового «подрезающего» свойства text-box(text-box-trim/text-box-edge), о котором упоминал недавно: кнопки, отступы в лейаутах, выравнивание иконки/картинки + текста, дизайнерские выкрутасы
при вырезании текста из фона с помощью background-clip: text фоновой «картинкой» может быть, например, полосатый repeating-linear-gradient
фоллбек-шрифт можно не просто перечислить в font-family, но объявить в @font-face, а внутри подключить гарантированный локальный шрифт через local("Arial"), и затем потвикать его настройки с помощью size-adjust, ascent-override… для большего визуального соответствия основному шрифту
несколько полезных фактов о кейфреймах:
- одинаковые значения свойств можно не дублировать в нескольких правилах, а объединять в одно правило через запятую 0%, 50% {}
- порядок следования правил в кейфрейме может быть произвольным { from {} to {} from, 50% {}}
- правила с одинаковыми процентами каскадируются, то есть последнее перекрывает предыдущие
- внутри отдельного правила в кейфрейме можно подправить animation-timing-function, задав шагу функцию linear()

Платформа

во вкладке Sources > Overrides можно подредактировать контент в файлах сайта, например, в HTML-файле отредактировать подключение картинок, чтобы протестировать фикс перфоманса без модификации исходного кода
как в своё время ES впитал новшества CoffeeScript, так и веб-платформа со временем впитывает то, что предоставлялось билд-тулами и фреймворками: резолв пути к файлу есть в нативном import.meta.resolve() и import.meta.url, динамические импорты позволяют «лениво» запрашивать модули, минификация файлов реализуется на сервере с gzip или brotli, конкатенация файлов становится не нужна благодаря HTTP2/3; поэтому базовые кейсы из задач фреймворков/бандлеров вымываются, и на их стороне остаются DX и сложные/узкоспециализированные вещи
мастерство разработчика — балансировать в промежутке между «написать свой велосипед» и «использовать готовую либу» и, прикинув трейд-оффы, выбрать правильный инструмент для конкретного случая

Kent Beck, Tidy First. A Personal Exercise in Empirical Software Design, 2023

Wed, 08 Jan 2025 00:00:00 GMT

Чистка и рефатокторинг кода — это гиковская забота о себе. Можно её не делать, но с ней чувствуешь себя лучше.

Самая большая часть «стоимости» при работе с кодом в его чтении и понимании, а не в написании. Когда вы пишите код, вы не только пишете инструкцию компьютеру, но скорее объясняете свои намерения компьютеру для других людей. Просто написать код для компьютера, который будет работать, не особо интересная конечная цель. В хаотично написанный код довольно быстро станет трудно вносить изменения из-за многочисленных связей (часто неявных) между его элементами и сущностями.

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

Какие вещи можно учитывать при рефакторинге

подчистку лучше делать маленькими шагами, настолько маленькими, чтобы их было делать не страшно; небольшая подчистка — самая лучшая
много мелких рефакторингов и подчисток дополняют друг друга и со временем становятся большой переработкой модуля или системы, за которую будут благодарны ваши коллеги
разделение кода на мелкие части важно сделать так, чтобы это помогало пониманию; то есть если связать воедино кучу мелких несвязных сущностей, то это усложнит их понимание; а если объединить однородные сущности, то их можно без проблем вынести в отдельную упрощающую понимание абстракцию
если собирать связанные друг с другом по смыслу и коду вещи (функции, модули, файлы) в одном месте, то нужно будет меньше держать в голове для понимания и работы с этим кодом
«подчищающие» изменения стоит отделять от меняющего поведение в разные коммиты

Про код

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

Про комментарии

комментарий, который описывает дословно то, что происходит в коде, можно смело удалять
если вы читаете файл и уловили момент, когда начали понимать, что к чему в этом файле, это ключевой момент! Можно это место/понимание зафиксировать в комменте (иногда полезно оставлять такие комменты в «шапке» файла)

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

Fri, 10 Jan 2025 00:00:00 GMT

Новости

вышел отчёт 2024 JavaScript Rising Stars:
- самый «быстрозвездеющий» проект года — shadcn/ui — не нуждается в представлении, второй — Excalidraw — инструмент для создания рисунков и диаграмм, тоже на слуху, третий — AFFiNE — опенсорсный Notion
- htmx — больше всех набрал из фронтенд-фреймворков, даже перегнав React
- из бэкенд/фулстек-фреймворков в топе по популярности Next.js, Hono и Astro
- в тулингах чемпионы Biome, Bun, Vite — чувствуется, что обычному разработчику нужно, чтобы просто работало
- среди state manager-ов победил Zustand, Jotai и XState (Valtio тоже в топе, Redux замыкает лист)
- в CSS-либах топ заняли Tailwind, DaisyUI (либа под TW) и Bootstrap

Проекты

pixel-canvas — веб-компонент, применяющий блестящий фон на canvas к элементу
trimmiddle — либа, вырезающая текст из середины строки (недостающий метод строки вдовесок к trimStart() и trimEnd())

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

JS

Temporal API, ещё нигде в стабильных релизах браузеров не реализованный, хорошо интегрируется с другим полезным Internationalization API, который есть везде уже сейчас и может, например, перевести часы в секунды без доп вычислений с помощью Intl.DurationFormat или отобразить время относительно другого времени с Intl.RelativeTimeFormat (кроме того: у даты есть метод toLocaleString(), выдающий дату в строки в текущей локали, а локаль модно получить в navigator.language)
история команды, осознавшей, что борется с Next.js больше времени, чем кодит продукт, и перешедшей на обычный React: потеряли фулстек-подход, кеширование и пререндер, серверные компоненты и actions, приобрели быстрый билд и деплой и счастье команды
детали того, как работает TS в Node.js: типы отбрасываются, работают для файлов с разрешениями .ts, .mts, .cts (.tsx не поддерживается), пока что по умолчанию не поддерживаются фичи, требующие транспиляции (enum, decorators, namespaces), сорсмапы не создаются, так как расположение кода остаётся тем же
Daishi Kato, автор стейт-менеджеров Zustand, Jotai, Valtio, поделился мыслями о будущем либ в эру React Compiler/React Server Components: возможно в будущем оптимизации RC сделают встроенные инструменты управления стейтом useState/useContext более эффективными в плане оптимизации необходимости перерендеров, а кеширование в RSC — сделают ненужными комплексные стейты, но тем не менее юзкейсы всех трёх подходов либ продолжают быть актуальными и скорее всего так и будет дальше

CSS

необычный юзкейс свойства text-wrap: balance: решает проблему переноса на следующую строку иконки за текстом
селектор &:hover > *:not(:hover) применит стили по наведению ко всем элементам внутри контейнера, кроме текущего
интересный концепт безкейфреймовой «анимации»: объявляется кастомное свойство типа integer (значение — конечное в «анимации»), в @starting-style прописывается начальное значение в «анимации», создаётся довольно длинный transition для этого кастомного свойства, в процессе которого выполняется «анимация»

HTML

атрибут translate="no" выключит нежелательный перевод HTML-элемента в браузере
подборка, чтобы обновить представление, на что способен современный HTML: для себя нашёл атрибут hidden=until-found, скрывающий элемент до тех пор, пока текст внутри его не нашли поиском по странице, и вспомнил атрибут inert, делающий элемент недоступным для взаимодействия (мощнее, чем pointer-events: none)

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

Fri, 17 Jan 2025 00:00:00 GMT

Новости

вышел Chrome 132:
- улучшены события и исправлены баги для элементов popover и dialog
- продолжают допиливать CSS Anchor Positioning
- заголовки Strict-Transport-Security (STS) теперь игнорятся для localhost
- довыкатили Keyboard focusable scroll containers, которые раньше забаговали
- File System Access API стало доступно на Android-девайсах и WebView
вышел Firefox 134.0:
- поддержан Promise.try(), теперь он кроссбраузерный
- экспериментально добавлена поддержка Intl.DurationFormat
- поправлен баг с применением align-self и justify-self к абсолютно позиционированным элементам
в Node.js v22.13.0 стабилизирована фича Permission Model: это «ремень безопасности» для вашего кода, а не защита от чужого вредоносного кода; запуск файла с флагом node --permission index.js по умолчанию обрежет все права (чтение и запись в fs, порождение процессов…), а указание явных флагов типа --allow-fs-read и --allow-fs-write уже включит только нужное
в Bun v1.1.43 появился экспериментальный HTML Bundler: команда bun build --experimental-html --experimental-css ./index.html --outdir=dist склеит все js-, css-файлы и ассеты в один файл и подключит их в итоговом html-файле
WinterCG, группа разрабочиков Deno, слилась с Ecma International, сформировала новый комитет TC55 и выпустила первый черновик их стандарта Minimum Common Web Platform API, где собраны список базовых API для конситентности между разными JS-райнтаймами
в React-е (и Next-е) появится первое API про анимацию — компонент <ViewTransition> на основе View Transitions API (не поддерживается только в FF), обещают удобство в работе с Suspence, под капотом React будет в определённый момент назначать элементу view-transition-name и вызывать startViewTransition во время мутации DOM-а:

<ViewTransition>
  <Suspense fallback={<Skeleton />}>
    <Content />
  </Suspense>
</ViewTransition>

Проекты

emojico — cli-тула для генерации набора favicon-ок из эмодзи: под капотом буднично открывается puppeteer и снимается скриншот со страницы с иконкой
@smoores/epub — оказывается формат электронных книг epub — открытый стандарт W3C, и это либа для работы с epub-файлами
react-focus-lock — «ловушка» фокуса при показе модалок

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

JS

спред объекта/массива в объекте не скопирует его, а создаст ссылку на него const state = { ...defaultState, prop: value } — это механизм Shallow Copy; если же нужно именно склонировать объект, то в современном JS для этого есть специальный метод structuredClone (поддерживается везде с 2022):

const state = structuredClone(defaultState);
state.prop = value;

доля ESM-only и dual (ESM + CJS) npm-пакетов медленно, но верно растёт: в ноябре 2024 у CJS 63%, у dual + ESM 25%
напоминание для реактоводов: рефы обрабатываются до useLayoutEffect и useEffect

CSS

псевдокласс :empty помогает скрыть элементы с пустым контентом (правда пока что в браузеры не доехало обновление спеки по этому поводу, то есть блок с пробелами скрыт не будет):

.list > div:empty {
  display: none;
}

бонус использования нативного <dialog> — его части легко стилизовать: подложка dialog::backdrop {}, убирание скролла body:has(dialog[open]) { overflow: hidden }

Платформа

в современных браузерах изменился подход к кешированию ресурсов: если раньше файл мог быть единожды закеширован по урлу и потом для другого сайта браться из общего кеша "https://cdn.example.com/jquery-3.6.0.min.js": resourceData, то теперь для защиты от отслеживания для каждого сайта кеш файла будет храниться отдельно { topLevelSite: "site-a.com", resource: "https://cdn.example.com/jquery-3.6.0.min.js" }: resourceData; как следствие — больше нет выгоды от CDN, дешевле селф-хостить на своём домене типа static.company.com/js/react.js
для базовой доступности достаточно использовать теги по назначению (кнопки, формы, лейблы + инпуты), не убирать стили фокуса, при открытой модалке ловить фокус и «выключать» контент под ней атрибутом inert, расширять область клика на интерактивных элементах

HAR-файл для выгрузки сетевой активности

Wed, 22 Jan 2025 00:00:00 GMT

Все вы знакомы со вкладкой Network в браузерах, где отображаются ушедшие запросы, пришедшие ответы с заголовками, куками и так далее. Так вот всё это богатство можно из браузера выгрузить в виде файла в формате HAR, во вкладке есть для этого кнопки со стрелками Import/Export HAR file: Export — сохраняет текущую историю сетевых запросов в файл, Import — открывает уже имеющийся файл в дев-тулзах.

Сам файл — это JSON с определённо именованными полями. И формат этот даже в каком-то виде стандартизирован, хоть и не окончательно: нашёлся черновик «HTTP Archive (HAR) format», в котором примерно описан формат, но при этом написано «не пользуйтесь этим черновиком»; а также удалось найти пре-спеку HAR Vocabulary Specification Draft 0.03, в котором тоже описан формат файла.

Помимо браузеров HAR-файлы понимают другие веб-сервисы: просмотрщики, тестовые и автоматизационные тулы.

Юзкейсы:

поделиться между разработчиками, QA или пользователями «записью состояния» приложения, как воспроизвести определённую ситуацию, когда подёргали в нужном порядке бэк-ручки, передали куки
предоставить сценарий для проведения нагрузочного тестирования, чтобы выполнить определённый набор запросов в нужном порядке и с нужными параметрами без UI
открыть файл с логами сетевого взаимодействия в текстовом редакторе для удобного редактирования

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

Fri, 31 Jan 2025 00:00:00 GMT

Новости

вышел Bun 1.2, наносящий конкурентный удар Deno (а также замахнувшийся на поляну Vite):
- всё больше совместимость с Node.js (90-100%)
- встроенная поддержка облачного хранилища S3, а также БД помимо SQLite ещё и Postgres и вскоре MySQL
- текстовый лок-файл взамен бинарного при установке npm-пакетов bun install, также JSONC (JSON с комментами) для package.json
- поддержан .npmrc
- есть мониторинг версий пакетов bun outdated и публикация bun publish, а также патчинг пакетов bun patch (чтоб захаркодить что-то локально в пакете)
- улучшен bun test
- добавлен бандлинг HTML-файлов с собранными скриптами, стилями и ассетами
- появилась возможность запуска кода C++
а пока Bun ещё не забрался в область форматирования и линтинга Biome опубликовали свои планы на 2025: добавить поддержку HTML, поддержка одних языков внутри других (например, CSS в JS), а также Markdown, взаимодействие с TS и JSDoc
и отчёт о работе ESLint в 2024: всего проект заработал 189k$ (74% из которых дали крупные компании)
в FF тоже появится AI, но обещают не воровать пользовательские данные, а запускать локально Transformers.js с базовыми ML-умелками (распознавание объектов, суммаризация…)
Yeoman (помните такой?) воскресили, чтобы поддерживать стабильность в системах, всё ещё использующих его, и пока не выпускать новые фичи
в TypeScript 5.8 Beta появился флаг --erasableSyntaxOnly, который будет помечать ошибочными «расширяющие» конструкции языка, которые нельзя просто вырезать, а нужно компилировать (goodbye, Enum?)
CreateReactApp официально помечен deprecated, если вы его ещё используете, вот знак, чтобы этого больше не делать

Проекты

jsonquery — DSL для выборки нужных данных (для больших JSON-ов)
Standard Schema — спека, объединяющая усилия авторов валидационных либ (Zod, Valibot) и тул/фреймворков (tRPC, TanStack Form) в создании общего интерфейса для интеграции разных частей экосистемы между собой
react-reverse-portal — либа, позволяющая перенести отрендеренную React-ноду из одного места в другое без перерендера (сгодится для отображения в разных местах тяжёлых компонентов)
is-my-node-vulnerable — npx is-my-node-vulnerable проверит версию Node на наличие уязвимостей (рекомендуется для включения в CI)

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

JS

способы искоренения any в коде: если флага noImplicitAny вам недостаточно (JSON.stringify и Function всё равно будут производить any), то будут полезны правила для линтинга: @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-function-type, а также либа ts-reset, которая заменяет any во встроенных типах на unknown
fetch с поддержкой HTTP/2 пока не работает по умолчанию в Node и Bun, но работает в Deno
оказывается в try {} catch {} можно не указывать скобки и аргумент у catch, и всё будет работать в современных браузерах
Template literal types — мощнейшая штука, затрагивал пару примеров в прошлом выпуске, но тут прям много юзкейсов и примеров типа такого:

type ToString<T extends string | number | bigint | boolean | null | undefined> =
  `${T}`;

CSS

юзкейсы для грядущего в ближайшем Chrome обновлении attr(): по сути это долгожданная связка HTML и CSS без использования JS, храним данные в разметке, используем в стилях:

<li color="{props.colorVal}" color-name="{props.colorName}">
  <div class="item" place-col="2">column 2</div>
</li>

background-color: attr(color type(<color>));
grid-column: attr(place-col type(<number>));

накопление ошибок и противоречий в легаси неизбежно, не избежал этой участи и CSS: в списке приводятся плохие решения, с которыми мы живём, например, box-sizing по умолчанию не border-box, border-radius следовало быть corner-radius, составные селекторы должны разделяться по запятым, а не ломаться полностью при незнакомом синтаксисе
если вам не нравится хранить цвет и полупрозрачный цвет в двух разных переменных, то на помощь приходит функция color-mix(in srgb, var(--green), transparent 50%)
дефолтный системный шрифт font-family: system-ui, sans-serif
@counter-style — тема кастомного буллета в списках раскрыта полностью: префиксы, суффиксы и иконки
семейство свойств offset-* позволяет располагать элементы относительно какой-либо формы, в том числе произвольной, а если добавить transition, то и двигать относительно неё

HTML

просто страница, на которой используются всё HTML-теги
нативный <dialog> внезапно решает проблему, по которой появились portal-ы во фреймворках

Платформа

при задаче оптимизации сайта/приложения немаловажную роль играют заголовки Cache-Control Headers, которые у некоторых CDN-провайдеров имеют значения max-age=0 и must-revalidate по умолчанию для CSS и JS-файлов

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

Fri, 24 Jan 2025 00:00:00 GMT

Новости

вышла версия Tailwind 4.0: как уже писал раньше, TW впитывает фичи платформы (что хорошо), но по-прежнему запихивает всё в className, при этом есть и вариант с добавлением «миксинов» с помощью директив @apply, @variant (что в целом ни хорошо, ни плохо, а уже было в SASS)
поисковая страница Google теперь может требовать у пользователя включить JS, что само по себе ок мув, как и то, что сейчас SPA-страницы индексируются тоже уже ок на равне со статическими
вышла первая бета Rolldown — замены Rollup + esbuild для Vite: переписанный на Rust новый бандлер Rolldown помимо обратно-совместимого API будет иметь в будущем ещё и фичи, которые Rollup не поддерживает: аналог webpack-овского optimization.splitChunks, HMR, а так же Module Federation
выпущен Vitest 3.0:
- доработан вывод репортов в консоль (стало выглядеть приятнее)
- при наличии нескольких проектов, теперь удобно конфигурировать это в поле workspace в vitest.config
- добавлена поддержка конфигурации нескольких браузеров, чтобы использовать один сервер для прогона тестов сразу в нескольких браузерах
- запуск теста по номеру строки в файле, где он написан
в Chrome 133+ появится поддержка обновлённой функции attr(), которая раньше работала только внутри свойства content, а теперь сможет работать с любым свойством:

<div data-foo="blue">test</div>

div {
  color: attr(data-foo type(<color>), red);
}

вышло январское обновление React Spectrum/Aria:
- в компоненте дейт-пикера и календаря добавлен проп firstDayOfWeek
- добавлены CSS-транзишны для оверлеев Modal, Popover, Tooltip
- выпущена альфа-версия компонента Autocomplete и @react-aria/test-utils — либы с тест-утилитами для компонентов

Проекты

ohshitgit — набор кейсов, когда у вас случилось что-то нехорошее в git, и как это вернуть взад
fortune-sheet — либа React / Vue + immer на TS для создания Excel-like-таблиц
arktype — рантайм валидатор, инферит TS-типы, быстрый

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

JS

React Query — это не data-fetching-либа, а менеджер состояния, которое живёт на сервере; именно поэтому, если источник правды вашего приложения сохраняется на бэке, то React Query заменяет собой необходимость использования отдельного стейт-менеджера на клиенте
все либы для работы с хоткеями опираются на задепрекейченные поля, поэтому использовать их нужно осторожно; если ли работать с хоткеями без либ, то нужно использовать поле key, латинские буквы (A-Z) и арабские цифры (0-9), нормализовывать символ с помощью .toLowerCase() и .toUpperCase(), использовать Shift для модификации и не использовать для неё Alt
фишки динамических строковых литералов в TS:

// ключи
interface User {
  customerKey: `cus_${string}`;
}

// версия
type Version = `v${number}.${number}.${number}`;

// расширение
type ImageExtension = `png` | `jp${`e` | ``}g` | `webp`;

опыт миграции стейта с useContext на MobX: всё ништяк, но пришлось писать свою обёртку для использования useQuery из TanStack Query
разложенный по косточкам tsconfig с вариациями: база, npm-пакет, Node.js, web, запуск ts напрямую (без js), только тайпчекинг

CSS

ежегодная подборка свежих CSS-фич, которые можно уже использовать: всё, что касается <dialog> и popover, конечно, только для внутренних проектов сгодится, а вот применение @property и linear() для анимаций, которые не страшно, если отвалятся, уже прям маст-хэв
напоминание, что ссылки не только на #якорь, но и на определённый текстовый фрагмент на странице (а заодно и стилизация выделенного текста по ::target-text) уже работают по всех современных браузерах, для некритичных вещей точно можно тащить в прод
современные CSS-фичи типа @container(), @container style(), @supports дают возможность старгетироваться на конкретное устройство и это приводит к возможности злонамеренного отслеживания типа устройства, ОС, почтового клиента: решение — предзагружать все «условные» ассеты (картинки, шрифты) заранее, а не только те, которые «подходят» устройству

HTML

вместо использования role=button, role=link и остальных проще использовать соответствующий HTML-элемент

Платформа

множественные редиректы на открытии страницы могут влиять в негативную строну на метрики перфоманса LCP и FCP

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

Fri, 14 Feb 2025 00:00:00 GMT

Новости

вышел Chrome 133:
- допилили popover в HTML и JS
- поддержали обновление функции attr(), которая раньше работала только внутри свойства content, а теперь сможет работать с любым свойством
- добавили псевдокласс :open для открытых <dialog>, <details>, <select> и <input>
- заработали @container-запросы, управляющие скроллом @container scroll-state((stuck: top) and (stuck: left))
- поддержали семейство «подрезающих» свойств text-box, text-box-trim, text-box-edge
- в Animation API появилось свойство overallProgress, показывающее прогресс анимации
- у нод появился метод Node.prototype.moveBefore, позволяющий перемещать DOM-ноду в другое место без потери состояния (<iframe> не перезагружается, активный элемент остаётся в фокусе, анимации/транзишны продолжают проигрываться) (в React тоже собираются оперативно поддержать)
- добавлена возможность включать несколько import maps в один документ, браузер смерджит их сам
- появился интерфейс FileSystemObserver, который может оповещать сайт об изменениях в файловой системе, к которой был выдан доступ
у JSR (альтернативный npm-реестр от создателей Deno) появился совет директоров в крайне интересном составе (Evan You, Isaac Schlueter, James Snell, Luca Casonato, Ryan Dahl), поэтому возможно в обозримом будущем вы таки начнёте пользоваться JSR
вышла новая версия Prettiter 3.5: добавлена пара новых опций и поддержан ts-формат конфига (с началом экспериментальной поддержки TS в Node.js видимо многие будут переводить конфиги на .ts)
вышли результаты опроса State of React:
- многим доставляет боль использование forwardRef (видимо потому что в основном используют 18 версию React для SPA), указание зависимостей в useEffect, а также сложность Next.js и Server Components
- самые популярные либы: Zustand, семейство TanStack, Astro, shadcn/ui, Radix, React Aria, Jotai; самые непопулярные: CRA, Redux, Gatsby, Reaact Bootstrap; для анимаций пользуются Motion, React-Spring, GSAP; для работы с формами React Hook Form, Formik; для тестов Jest и Testing Library; для валидации Zod, Yup; для аутентификации Auth0, Auth.js, Passport

Проекты

smartbundle — тула для сборки приложений без дополнительных конфигов: команда smartbundle сгенерит CJS- и ESM-сборки, автоматически трансформирует JSX, не забудет о сорсмапах
get-value — аналог lodash-евского _.get, чтобы достать значение объекта по строке a.b.c.d
Style Observer — обзёрвер изменения значений CSS-свойств и кастомных свойств на основе transition-behavior: allow-discrete
sorted-colors — проект для тех, кто испытывает необъяснимую симпатию к именованным цветам в CSS, позволяет увидеть их все по оттенку

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

JS

про разбиение лонг-тасков в JS уже писал ранее, но тут автор собрал в одной статье почти все рецепты: setTimeout, async/await + Promise, scheduler.postTask(), scheduler.yield(), requestAnimationFrame() и даже экзотический MessageChannel() — если послать туда сообщение, то оно сразу же выполнится (разве что не упомянуто о queueMicrotask и requestIdleCallback)
сравнительная таблица текстовых редакторов, если вам нужно сделать этот выбор в 2025: фреймворкоориентированность, многопользовательский режим + комментарии (сразу предостережение — ProseMirror с React не дружит)
и в догонку сравнительная таблица web-to-desktop-фреймворков (Electron, Tauri…): язык, движок, зависимости, фичи, интеграция во фреймворки, поддержка ОС, размер приложений, расход памяти, время билда и старта
если вам приходится сознательно заглушать ошибки в TS, то лучше использовать @ts-expect-error, чем @ts-ignore, так вы явно заметите заглушенное место, когда ошибка перестанет происходить и сможете убрать заглушку
никогда не поздно вдруг понять, что npm ci это «clean install», а не «continuous integration»
оператор satisfies в TS может быть полезен для:
- уточнения, что объект с неполным набором полей — это ок satisfies Partial<Record<key, val>>
- типизации при преобразовании в JSON-строку JSON.stringify({ /*···*/ } satisfies SomeType)
- типизации default-экспорта export default ((str) => str.toUpperCase()) satisfies StringCallback;

CSS

доехавший везде @property даёт возможность создать эффект «динамического фокуса» (всё в блюре, круглая область в «фокусе») с помощью mask-image: radial-gradient(... var(--focal-size) ...), к кастомному свойству внутри функции применяется транзишн
на мониторах с крупными пикселями ультра-тонкие шрифты будут выглядеть нечётко, лучше включать такую насыщенность шрифтов под медиа-фичей:

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  h1 {
    font-weight: 100;
  }
}

:focus-visible стилизует только фокусировку с клавиатуры, но есть ещё и дополнительная опция у метода .focus({focusVisible: false}) (Safari TP и FF)
ещё один юзкейс для селектора :has: показывать/скрывать дополнительный блок, когда выбран/не выбран чекбокс в списке: :has(:checked) {}, :not(:has(:checked)) {}, :not(:has(:focus-visible)) {}

HTML

значения в атрибуте step у <input> могут быть не только целочисленными, а в pattern-е можно проверить корректность этих значений

Платформа

если вы хотите неиронично использовать GIF-ку в 2025, то лучше заместо использовать видео-формат AV1 (поддерживается во всех браузерах, кроме Safari, там нужен фолбек в mp4)

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

Fri, 21 Feb 2025 00:00:00 GMT

Новости

в стабильную Node.js 20 бэкпортирована фича require(esm) (импорт EMS-модулей через синтаксис CJS-require), а это значит, что в апреле 2025, когда закончится поддержка Node.js 18, CJS из сборок можно будет выпиливать
в апреле 2024 Popover API выкатился во всех браузерах, но по январь 2025 был крит-баг в iOS Safari (до выхода Safari 18.3), который не давал полноценно использовать фичу (так что если вы с новой фичей выкатили баг в прод и сразу его поправили, считайте, что ничего не было)
обновился Astro 5.3: ускорили, допиливают Session Storage API и интеграцию с Netlify
обновился моноширинный шрифт Monaspace от Github, теперь в него включены иконки Nerd Fonts
выработали фокус инициативы Interop на 2025 год, предположительно в этом году у нас появятся во всех браузерах: Anchor positioning, View transitions ,@scope, scrollend event, Core Web Vitals, а также исправятся баги с backdrop-filter, <details>, text-decoration
ESLint больше не EcmaScriptLint, а ExtremelySuperLint (шутка), а именно стал официально поддерживать линтинг CSS: встроенные в @eslint/css правила проверяют пустые блоки, дублирующиеся импорты, невалидные @-правила, а также способствуют использованию правил baseline и @-layer (не шутка)
CreateReactApp окончательно и бесповоротно задепрекейчен, так как нет мейнтейнера и плюшек внутри и вообще таки зачем вам голый React, давайте уже скорее устанавливайте метафреймворк

Проекты

create-tsrouter-app — банда TanStack поджидала момент, когда анонсируют депрекейт CRA, подсуетились и подготовили свою замену с поддержкой JS/TS, TW/CSS и конечно же TanStack Router
react-bits — React-компоненты с анимациями и красивыми свистелками (меня впечатлили splash-cursor и orb)
use-context-selector — селектор из React-контекста в стиле Zustand useContextSelector(context, (v) => v[0].count) (от создателя, внезапно, Zustand)

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

JS

Intl.DurationFormat, который вскоре доедет в оставшийся FF, даёт возможность в разном виде в зависимости от локали форматировать период даты-времени:

const durationFormatter = new Intl.DurationFormat(navigator.language, {
  style: "long",
});

durationFormatter.format(duration);

// 360 minutes, 360m, 0:360:00, 360 Min...

если для вас в TS дженерики с тернарниками внутри выглядят устрашающе, не пугайтесь, они добрые: если тип с дженериком — это «функция с параметрами», то тернарник внутри — это просто единственный возможный в TS способ описать «условие», в зависимости от которого «функция» будет возвращать то или иное значение:

type Something<T> = T extends number ? never : T;
// «функция» возвращает ничего, если в T передано число, иначе - переданное значение

type Remove<T, R> = T extends R ? never : T;
// «функция» возвращает ничего, если T содержится в R, иначе - переданное значение

type AllColors = "Black" | "White" | "Orange";
type RealColors = Remove<AllColors, "Black" | "White">;
// type RealColors = "Orange"

если нужно реализовать одностороннюю отправку сообщения с сервера на клиент (а не двустороннее соединение), то можно использовать SSE вместо WebSockets: общение идёт по HTTP, нативно работает во всех браузерах через new EventSource()

CSS

чтобы создать выезжающие за пределы блока элементы, но при этом чтобы они были в потоке и занимали место, можно воспользоваться гридом с пустыми «рядами», размером auto, чтобы они растянулись на нужное «выпирающее» пространство grid-template-rows: auto [container-start] repeat(4, auto) [container-end] auto;
селекторы :has и :not не так просты:
- .card:has(:not(img)) выберет .card, в котором внутри есть любой элемент, кроме img
- .card:not(:has(img)) выберет .card, в котором вообще нет img
псевдокласс ::selection меняет фоновый цвет выделенного текста, но прикол в том, что цвет не обязательно делать один для всей страницы:

::selection {
  background-color: var(--brandColor);
}

:nth-child(2n) {
  --brandColor: red;
}

:nth-child(2n + 1) {
  --brandColor: blue;
}

свойство zoom делает похожую на scale операцию, но при этом «отскейленный» блок не влияет на лейаут (изменяется по сути композитный слой с «картинкой» блока), а «отзумленный» — влияет, то есть вызывает перестроение лейаута

Платформа

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

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

Fri, 07 Feb 2025 00:00:00 GMT

Новости

Vercel поглощает компанию Tremor (опенсорсная UI-либа на React, TW, Radix), чтобы использовать дашборды/чарты у себя в админке и в генераторе интерфейсов v0
вышел Astro 5.2:
- поддержан TW 4 через плагин @tailwindcss/vite
- добавлен редирект с trailing-slash урлов: /about/, /about или даже /about///
- а также редиректы на http или https, прописываемые сразу в конфиге
- поддержан формат TOML для мета-информации в контентных файлах
выпущен npm 11.1.0: добавлена команда undeprecate (заодно узнал, что существует команда deprecate)
вышел набор полифиллов ES Module Shims 2.0: помимо поддержки import maps в старых браузерах эти полифиллы открывают возможность запускать type-erasable-код на TS прямиком в браузере, без компиляции
обновился Turborepo 2.4:
- появились эксперименты: команда boundaries (проверяет реп на следование бестпрактисам для лучшего кеширования сборки) и кеширование в watch-режиме
- тула теперь даёт рекомендации по найденным кольцевым зависимостям в проекте
- поддерживает новый тип конфига ESLint
выпущен Firefox 135.0:
- прекратилась поддержка нестандартного -moz-user-input
- появилась поддержка JSON.rawJSON() и JSON.isRawJSON()
- выкатили за флагом поддержку Temporal API (продвинутая работа с датами) и Prioritized Task Scheduling API (scheduler.yield() для «создания пауз» в работе эвент-лупа)
обновился яндексовский ui-kit GravityUI до версии v7.0.0: смигрировали с popper.js на floating-ui, теперь билдится в ES2022

Проекты

bunchee — безконфиговый бандлер для JS/TS-пакетов (все нужные данные для конфига берутся из package.json)
jscanify — либа для сканирования бумажных документов из картинки или из потока камеры
shapecatcher — если нужно найти unicode-символ (в том числе эмодзи), то можно его коряво нарисовать руками и поиск выдаст похожие
node-modules-inspector — интерактивный интерфейс для изучения node_modules в проекте

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

JS

простейший подход к сервингу, который возможно вскоре будет работать и в Node (но уже сейчас поддерживается в Deno):

// server
const myApp = async (req: Request) => {
  return new Response("Hello world!");
};

const response = await myApp(new Request("http://localhost/"));
const text = await response.text();

Cookie Store API — асинхронное API на смену document.cookie (только Хромиум, но есть в «ночных» версия Safari и FF):

await cookieStore.set()/get()/getAll()/delete()

// а также эвент на изменение
cookieStore.addEventListener("change")

хук useOptimistic из React 19 подходит для обработки кейсов «промежуточных» состояний интерфейса при асинхронном выполнением действий: ушёл запрос, ждём ответ, пока что оптимистично показали результат
принцип Open-Closed (sOlid) на примере React-компонентов и хуков: добавляем новую модификацию компонента/функции, не трогаем базовый, а дополняем в новом компоненте/функции

CSS

@starting-style можно применять в том числе для анимации показа/сокрытия <dialog> и подложки ::backdrop: чтобы они плавно показывались и скрывались без дополнительных телодвижений в коде (типа сменить туда-сюда opacity)
при выполнении View Transition-ов страница перестаёт быть интерактивной — это из-за псевдоэлемента ::view-transition, который показывается оверлеем над всем вьюпортом; поправить это можно, выключив pointer-events для него:

::view-transition {
  pointer-events: none;
}

многоклоночный лейаут уже в CSS сто лет в обед, но всё время был какой-то багованый; сейчас же ситуация получше, вполне годится для адаптивных лейаутов длинных текстов, когда текст «перетекает» из одной колонки в другу (кейс специфичный, но конкретно для него не годятся флексбоксы/гриды)
для кейса, когда происходит нежелательный перенос текста (например, в кнопке), уместнее использовать min-width: fit-content, который подтянет ширину под контент и справится с задачей переноса более аккуратно, чем text-wrap: nowrap
для послогового переноса слов используется hyphens: auto, но в дополнение есть ещё свойство hyphenate-limit-chars, ограничивающее количество символов, которые будут перенесены (только Хромиум)
стилизация HTML-элемента <meter> под «звёздный» рейтинг: ставим на фон SVG с прозрачной «маской», заполняем цветом
с clip-path: polygon() и transition можно сделать «скошенный» слайдер
если вы собираете стили с помощью Vite или обходитесь вообще без билд-тулы, то дополнительно можно использовать LightningCSS в качестве минификатора + «пост»-процессора стилей (новенькие CSS-фичи в коде будут фолбечиться до стабильных)

Платформа

история про то, как разработчик выяснил, что Zopfli лучше сжимает в формат gzip, но при этом медленнее, чем сам gzip, и попробовал «продать» эту тему в npm, чтобы сжать все npm-пакеты; его предложение не приняли, но зато теперь вы знаете, что если нужно максимальное сжатие в ущерб скорости, то есть Zopfli

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

Fri, 28 Feb 2025 00:00:00 GMT

Новости

лучше поздно, чем никогда: опубликован CSS Snapshot 2024, внутри появился новый раздел Reliable Candidate Recommendations, куда собраны устоявшиеся спеки со стабильной реализацией в браузерах, но ещё немного косячной, сейчас туда включили: Media Queries Level 4, CSS Scroll Snap Module Level 1, CSS Scrollbars Styling Module Level 1, CSS Grid Layout Module Level 1 и 2
обновился Deno до 2.2: главное, что стал поддерживаться node:sqlite
в Pinia 3.0 убрана поддержка Vue 2
вышел Bun v1.2.3:
- вернули то, с чего начинался Bun — дев-сервер, bun ./index.html поднимет локальный сервер для статики
- Bun.serve() на сервере теперь умеет в роуты, то есть можно описать полноценный API с ощущением «на коленке»
в AI-поисковике Perplexity объявили, что разрабатывают свой браузер Comet (под капотом видимо всё равно будет chromium 😏), видимо прям разогналась волна «а давайте перепридумаем велосипед с агентами и нейросетями»; считаю, что, чем пихать AI-фичи в уже привычные браузеры, всё лучше выделить это всё в отдельную нишу любителей AI-приблуд
обновился React Scan до v0.2.0: интересный мув из разового использования инструмента для нахождения перфоманс-проблем в сторону постоянного использования и накопления «уведомлений» о собранных проблемах
в Next.js 15.2 появилась экспериментальная поддержка View Transitions API
анонсирован TS 5.8 RC: поддерживает require(esm) (а также флажок обратной совместимости --module node18) и флаг --erasableSyntaxOnly для искоренения enums, namespaces, параметрических свойств класса и import-алиасов (мсье Matt Pocock настроен считать эти фичи TS, требующие компиляции, ошибками в проектировании, и рад нововведениям)

Проекты

up-fetch — обёртка над fetch, что интересно с поддержкой недавно вышедшей Standard Schema Specification: в параметрах запроса передаётся валидационная схема в стандартизированном виде, например, с Zod
fuite — тула, запускающая Puppeteer и долго ходящая по ссылкам вашей SPA в поисках ~~потерянного времени~~ утечек памяти

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

JS

юзкейс, когда нужно в DOM переставить первый элемент в контейнере в конец (в слайдере, например, при показе последнего слайда), решается строчкой container.appendChild(container.firstElementChild)
JS часто бывает быстр за счёт JIT-компиляции:
- JS-код парсится в AST (Abstract Syntax Tree) →
- AST преобразуется в байт-код (промежуточная версия кода, выполняемая V8) и оптимизируется →
- если определённая функция/цикл становятся «горячими», то есть выполняются 10000 раз, то байт-код преобразуется в неоптимизированный машинный код (он быстрее, чем код для интерпретатора) →
- а если код продолжает оставаться «горячим», то он преобразуется оптимизирующим JIT-компилятором в высокооптимизированный машинный код, работающий максимально быстро →
- если код перестаёт быть «горячим», то он деоптимизируется обратно в байт-код
пара мыслей про стейт во фронте:
- появление API cache в React Query показало, что часто собственный «стейт» фронтового приложения — это не стейт вовсе, а иммутабельные данные с сервера (из API), и наличие API cache часто убирает необходимость использовать менеджер состояния на фронте
- пропы — изначально, идея для «естественного» разделения зон ответственности модулей, но из-за того, что их начали использовать неправильно (проп-дриллинг), появились, наоборот, связывающие концепты типа глобального Redux-стора, которые во многих случаях не нужны

CSS

индивидуальные свойства трансформации translate, rotate и scale не переопределяют значение свойства transform, а дополняют его
грядущий в Chrome типизированный attr() несёт парочку приятных (но сейчас уже не кажущихся революционными) моментов:
- (при необходимости пробросить что-то в стили) отсутствие необходимости объявлять стили в style, возможность оставлять значения в «чистых» data-атрибутах <span data-color="oklch(84.08% 0.3256 143.87 / 86.52%)"
- возможность прокидывать произвольную строку из атрибутов в CSS, например, из id напрямую, то есть без необходимости дублировать значение в style
если вы всё ещё считаете, что #ff0000 или rgb(255, 0, 0) — это самый красный цвет, какой только может быть, то вы ошибаетесь; значение color(display-p3 1 0 0) существенно «краснее», а точнее ярче (но при условии, что ваш девайс поддерживает цветовое пространство Display-P3)
как сделать строку или столбец с элементами одинаковой ширины, равной самому широкому из них (например, кнопки одинаковой ширины, равняющиеся по самой широкой кнопке):

.container {
  display: inline grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
}

Платформа

префетч ресурсов типа <link rel="prefetch" as="style" href="page-2.css" /> может, внезапно, откладывать загрузку основных ресурсов, так что лучше эту префетч-оптимизацию докидывать для некритичных ресурсов и уже из JS, после загрузки `window
AI-тулы доламывают процесс найма: «хакнуть» интервью становится всё проще, но пройти собес — это только пол-дела, внутри работы при этом придётся нелегко, так как там случаются инциденты, проектирование архитектуры и коммуникация (универы при этом не помогают)

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

Fri, 07 Mar 2025 00:00:00 GMT

Новости

вышел TS 5.8, с момента RC изменений нет: require(esm) ( + флаг обратной совместимости --module node18) и флаг --erasableSyntaxOnly на борту
вышел Safari Technology Preview 214: внутри долгожданная поддержка data: URL в favicon, то есть теперь можно будет во всех браузерах использовать SVG- и эмодзи-фавиконки:

<link
  rel="icon"
  type="image/svg+xml"
  href="data:image/svg+xml,[YOUR ENCODED SVG HERE]"
/>

вовсю идёт работа по внедрению rolldown в Vite
вышла стабильная версия TanStack Form v1 для основных фреймворков:
- TS валидирует связку модели данных и значения в компоненте, причём не нужно передавать дженерики, а всё инферится з коробки
- встроеная поддержка валидационных либ (Zod, ArkType…)
- есть возможность задать асинхронную функцию для валидации
выпустили черновик спеки CSS Form Control Styling Level 1 про стилизацию элементов форм: appearance: base для базовой стилизации элементов, псевдоэлементы ::picker, ::thumb, ::track, ::fill и другие для стилизации UI-элементов
вышел мартовский апдейт React Aria/Spectrum с компонентами Toast, Tree и Virtualizer, также допилен хук usePress и компонент Autocomplete
вышел Chrome 134:
- добавили возможность добавлять внутрь <select> дополнительные элементы помимо <option>, <optgroup> и <hr>
- допилили вариации закрытия <dialog>
- дополнили обратносовместимо console.timeStamp()
в Chrome 135 будет внедрён пропоузал Observable API (позиции WebKit и Mozilla по поводу этого API пока неясны):

container
  .when("click")
  .filter((e) => e.target.closest("a"))
  .subscribe({
    next: (e) => {
      // …
    },
  });

Проекты

React Scan Inspector — инструмент для анализа перерисовок React теперь в виде Chrome-плагина
openapi-fetch — типизированный fetch-клиент, согласующийся с OpenAPI схемой
CSS Voxel Editor — трёхмерный «пиксельный» редактор на базе CSS-трансформов и гридов (тут про движок)
CSS Puzzle Box — головоломка, написанная на HTML/SVG/CSS (тут про процесс создания), наполненная трюкохаками, например, «самоскрывающимся» <details>

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

JS

parseInt('1️⃣') === 1 // true, потому что внутри parseInt находит в unicode-символе сначала 1, а последующий нечисловой «вариационный» символ отбрасывается

CSS

<input type="range"> превращается в «звёздный рейтинг», чем удобно: использует нативное управления с клавиатуры, а также инпут имеет нативные атрибуты min, max, step, значения которых пробрасываются в CSS через новоиспечённый attr
только привыкли к функциям-дженерикам в TS, а как вам функции в CSS (пока что почти что фэнтези-синтаксис)?

@function --dashed-border(--color: red) {
  result: 2px dashed var(--color);
}

.argument {
  border: --dashed-border(blue);
}

.default {
  border: --dashed-border();
}

вырезаем прямоугольную прозрачную рамку внутри картинки с помощью mask и конического градиента
кастомное свойство может быть «выключено» по умолчанию, правда это хак и синтаксис выглядит сломанным:

button {
  --has-border: ; /* off by default */
  border: 1px solid var(--is-raised, rgb(0 0 0 / 0.1));
}

.bordered {
  --has-border: initial; /* turn on */
}

эффект калейдоскопа с помощью анимации кастомного свойства (@property) внутри градиента

Платформа

полезные настройки git-а в ваш .gitconfig, например, push.autoSetupRemote true для автозадания апстрима или pull.rebase true для авторебейза при пулле
скажи что-нибудь на дедовском: — кхе-кхе, ноутбук, дискета, ajax (20 назад, кстати, был обозначен, тогда были ещё актуальны XML and XSLT)!

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

Fri, 21 Mar 2025 00:00:00 GMT

Новости

в Bun v1.2.5 стала достпна поддержка Svelte и CSS modules в бандлере и дев-сервере
как и в случае Node.js vs Bun/Deno, в мире линтеров образуется похожая ситуация: к противостоянию ESLint vs Biome присоединяется вышедший в бету Oxlint, который написан на Rust, поэтому оч быстрый, >500 правил работает из коробки, есть автофиксы + планируют запилить поддержку кастомных ESLint-плагинов
у Vercel есть Next.js, а у Netlify теперь есть TanStack Start и это хорошо и для TanStack, так как будет деньги, и для нас, так как будет альтернатива пропушиваемой парадигме RSC, то есть появляется неиллюзорная возможность появления полноценного React-фреймворка «здорового человека»:
- в TanStack типобезопасные роуты благодаря дому, что роуты основаны не на файлах, а на функциях, которые создают роуты
- серверные функции тоже более явные и гибкие, в отличие от директивы "use server"
- нативная интеграция с TanStack Query
в Safari Technology Preview 215 появились Scroll Driven Animations (итого в Chrome уже есть, в FF есть за флагом), CSS Anchor Positioning (в FF нет) и на десерт text-wrap-style: pretty
проект styled-components переведён в режим поддержки, так как Context API не поддерживается в серверных компонентах, экосистема в целом ушла в сторону другого подхода к написанию стилей (атомизация стилей, jit-сборка), мейнтейнер сам перестал использовать styled-components в больших приложениях. Это, в целом, ничего страшного, если нравится такой подход к написанию стилей (мне нравится, так позволяют часть UI логики пробрасывать внутрь стилевых компонентов) есть build-time решения со styled-like API (linaria, panda css)
Parcel v2.14.0 стал поддерживать рендер React Server Components в CSR, SSR или в build-time просто в HTML, заодно стали глубоко поддерживать MDX, и кроме того, появился инструмент миграции проекта с CRA npx cra-to-parcel

Проекты

eslint-plugin-eslint-plugin — ESLint-плагин для линтинга ESLint-плагинов, если желаете разработать свой, то может подсобить
vite-bundle-analyzer — визуальная и CLI-утилита для инспекции содержимого вашего Vite-бандла

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

JS

прикол: в JS символы  из-за проблем с легаси-совместимостью — это валидные символы для создания комментария
Document Picture-in-Picture API может быть использовано не только для показа видео-контента в отдельном окошке, в PiP можно рендерить своё кастомное содержимое:

const pipWindow = await documentPictureInPicture.requestWindow({
  width: window.innerWidth,
  height: window.innerHeight,
});

pipWindow.document.documentElement.innerHTML = htmlCode;

ещё один наброс на Next.js vs Vite + TanStack от человека, который устал скрестись о комплексность API и хочет, чтобы оно просто работало и на клиенте, и на сервере
если вы не поддались искушению мигрировать на Biome или Oxlint, а хотите сквозь тернии мигрировать таки ваш проект на 9 версию ESLint, то тут предлагают чеклист миграции; я пытался в миграцию полгода назад, но не осилил, так как не были готовы основные сторонние плагины, может быть пора попробовать снова
практические юзкейсы утилитарных типов в TS:
- Partial в случае, если не хочется при добавлении новых полей в тип, ходить по всем местам и править это; правда встроенный Partial распространяется только на один уровень вложенности, но «deep partial» из стороннего ts-toolbet
- Omit для типизации объекта, ещё не сохранённого в БД, то есть у него есть все поля, кроме id
- ReturnType для вытаскивания типа, который возвращает функция
- Readonly для типизации копии объекта, которую нельзя модифицировать

CSS

псевдокласс :in-range позволяет подвязаться на то, что значение в инпуте находится в пределах значений, заданных в min и max
если попробовать растянуть элемент <dialog> на всю высоту вьюпорта, то можно упереться в дефолтное браузерное значение max-height: calc(100% - 2em - 6px), которое надо вручную перезадать на желаемое
почему так сложилось — хз, тут так заведено, но есть несколько способов управлять буллетами в списках: псевдоэлемент ::marker, свойство list-style-type, счётчик counter() и его стилизация через @counter-style, изображение в list-style-image или же старый-добрый `::before
эффект «расколотого» на части изображения через mask и conic-gradient не испортишь добавлением transition
если хотите попробовать встроенные межстраничные View Transitions достаточно добавить <meta name="view-transition" content="same-origin" /> и @view-transition { navigation: auto }

Платформа

чем больше уровней абстракций люди строят в технологиях (энергия → чип → сервер → веб-платформа → препроцессоры → библиотеки → фреймворки…), тем больше софта требуется, чтобы это всё обслуживать; поэтому AI не лишит нас работы (ведь даже сейчас есть работа для программистов Ассемблера), а просто кратно увеличит количество разработчиков, которые будут делать ещё больше софта ещё более разнообразными способами (возможно менее оплачиваемыми), и этим разработчикам так или иначе всё равно придётся осваивать основы просто другим путём
а вот это просто красиво смотреть: интерфейсы — как человеческая сущность: тёплые, вязаные, твои

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

Fri, 14 Mar 2025 00:00:00 GMT

Новости

вышел Firefox 136, поддержали:
- Intl.DurationFormat
- псевдокласс :open
- CookieStore API
- а также значение plaintext-only для атрибута contenteditable
в новый формат конфига ESLint добавили функцию defineConfig и вернули extends, это и правда удобно, чтобы замиксовать несколько предсобранных конфигов для проекта:

export default defineConfig({
  files: ["**/*.js"],
  extends: ["js/recommended", reactPlugin.configs.flat.recommended],
});

компилятор TS будет портирован на Go к 7 версии (к ноябрю 2025 ожидается бета-версия) и ускорен в 10 раз:
- компилятор именно портируется, а не переписывается с нуля (Go хорошо подходит под формат уже имеющегося кода)
- выигрыш по перфомансу за счёт многопоточности и отсутствия необходимости компиляции нативного кода (в JS упёрлись в потолок)
- Go-версия может запускаться в браузере через WebAssembly
- ожидается, что JS- и нативный движок будут существовать долгое время параллельно
вышла последняя глава Web Almanac про JS:
- в среднем вес JS на сайтах дорос до 500-600kb (часть кода не используется), >20 запросов за JS на странице
- из бандлеров чаще всего используется webpack, с заметным отставанием Parcel
- в найденных сорсмапах: TS используется в 6% сайтов, Babel — в 12% из топа 10к мобильных сайтов
- jQuery используется в 74% сайтов, Swiper — в 15%, React — в 10%, веб-компоненты в 7.8%
- 67% сайтов включает бесполезно транспилированный JS-код
выпуск CSS @function откладывается с Chrome 136 на 139 версию, так как пока ещё устаканивается спека
в редакторе Zed появилась поддержка GUI для работы с git (в общем, у Zed и компании есть ещё примерно полгода-год, пока TS в VSCode станет работать супербыстро, и все перестанут с него убегать)

Проекты

endoflife.date — тут можно посмотреть даты поддержки многих версий либ, программ и фреймворков
node-modules.dev — npx node-modules-inspector в вашем проекте покажет диаграмму зависимостей node_modules, их размер и связи
same.dev — AI-тула, которая походит по сайту и сгенерит аналог (работает только на простеньких лендосах, но делает их сложно 😕)

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

JS

если заходит речь про выбор фронтового фреймворка, лучше выбирать что-то поскучнее и стабильнее, правда стабильных и скучных фреймворков маловато (Next.js вендорлочит, Astro про контент, React Router всё ещё в пучине перерождений)
недавняя поддержка TS в Node вызывает улыбку на лице Ryan Dahl: в Deno TS не только тайпстрипается, но ещё и форматируется, компилируется, линтится и генерит документацию
паттерн возвращения return await func() хорош тем, что дождётся выполнения кода, и если нужно поймать ошибку, то выбросит её, пока не произошёл выход из функции:

const helloWorld = async () => {
  try {
    return await asyncHello("World");
  } catch (e) {
    return "Whops";
  }
};

а что если «билдить» архив с вашими md-файлами просто в HTML? Навигацию можно сделать на CSS-селекторах :target, HTML-файл скачивается один раз (offline-first), не нужен JS
URL — идеальное место, чтобы хранить сериализуемое состояние приложения, но есть ограничение: на 60-80к символов в URL браузер может загнуться
база про перфоманс в React: отделяйте изменяющийся стейт рядом с тяжёлыми компонентами в отдельные компоненты для избежания ререндера
явное лучше неявного на примере выделения данных или конфигов в коде в отдельные переменные
API стейт-менеджера Jotai вдохновлено WeakMap + добавлена возможность подписки на мапу

CSS

если в вашем приложении есть отстраивание побочных цветов от основных цветов приложения (обводки, тени, градиенты, разделители, состояния UI-элементов, оттенки), то в деле поможет relative color
в Chrome 135 нас ждёт появление двух CSS-функций sign и abs: для получения знака выражения (-1 или 1) и модуля числа
в канарейке Chrome доступны функции sibling-index() и sibling-count() для получения индекса элемента и числа всех элементов на одном уровне в DOM
полупрозрачное «визуально спокойное» подчёркивание ссылок text-decoration-color: color-mix(in srgb, currentColor, transparent 75%)
существует специальное свойство для анимации движения элемента по SVG-пути — это offset
с помощью content-visibility и contain можно указать браузеру не стилизовать, не строить лейаут или не отрисовывать определённый кусок интерфейса для улучшения перфоманса (наколеночная виртуализация)

HTML

интересная идея использовать для визуального «сравнивателя» картинок <input type="range"> в качестве управляющего элемента для задания кастомного свойства с шириной картинки

Платформа

статья, где рассказывается про миграцию с одного тестового движка на другой (но это неважно), интересны три предлагаемых подхода к миграции: 1) бульдозер — мигрируем все файлы одним скопом, 2) консенсус — разделяем ответственность за каждый файл между конкретными людьми, 3) по частям — берём самый малозначительный файл, мигрируем, идём к следующему, повторяем, пока файлы не закончатся
git switch - или git checkout - (для староверов) переключает на прошлую ветку в гите

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

Fri, 28 Mar 2025 00:00:00 GMT

Новости

в @xstate/store@3.4.0 (минималистичный стейт-менеджер под капотом xstate, который можно использовать без полного обвеса), добавили «атомарное» API createAtom() с возможностью создавать атомарные хранилища, комбинировать их друг с другом и со сторами
в техническом комитете Node.js решили исключить corepack из базовой поставки начиная с Node.js 25+ (в более ранних версиях он останется экспериментальной фичей), теперь нужно будет ставить отдельно npm install -g corepack
библиотека для анимации Motion портирована на Vue, теперь можно во так:

<template>
  <motion.div
    :initial="{ opacity: 0, scale: 0 }"
    :animate="{ opacity: 1, scale: 1 }"
  />
</template>

в Next.js найдена уязвимость (больше похожая на бэкдор), позволяющая обходить мидлвары спец-заголовком x-middleware-subrequest, то есть если у вас в мидлваре выполняется что-то важное, например, авторизация, то её сейчас можно скипнуть (если не обновить либу)
релизнулся Rsdoctor 1.0, webpack-совместимый анализатор бандла, аналог тулов webpack-bundle-analyzer и Statoscope: с помощью него можно получить ответы на вопросы «почему билд медленный», «как лучше разбить бандл на чанки», «почему увеличился размер бандла»
в Chrome 135 будут добавлены новые фишки:
- кастомизируемый элемент <select> с помощью свойства appearance: base-select, в который можно добавить произвольный HTML
- псевдоэлементы ::scroll-button() и ::scroll-marker() для создания и стилизации «нативных» каруселей
большое обновление Valibot v1.0.0 (рантайм-валидатора схем) спустя 15 бет и 5 rc, много добавлений/изменений

Проекты

mise — мультитул для переключения версий node, python, ruby (как nvm) + переключения env-переменных (как direnv) + запуска тасков (как make)
kaluma — мини-JS-рантайм для Raspberry Pi (вдумайтесь в параметры устройства: 300KB ROM, 64KB RAM)
http-decision-diagram — блок-схема принятия решения, какой HTTP-статус отдать клиенту
Parvus — доступный лайтбокс без зависимостей на нативном <dialog>-е с интернализацией

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

JS

а вы знали, что можно обратиться к текущему выполняющемуся скрипту через document.currentScript? Это может быть полезно, чтобы, к примеру, динамически заменить скрипт на произвольный контент, получается такой дешёвый движок рантайм-шаблонов для всяких мелочей:

Come on, it’s
<script>
  document.currentScript.replaceWith(new Date().getFullYear());
</script>

CSS

ещё один юзкейс для нового типизированного attr(): прокидывание значений атрибутов value и max элемента <progress> напрямую в CSS
mask + repeating-conic-gradient + немного тригонометрии = зигзаг
если нужно что-то по-быстрому поправить в загруженном сайте без инспектора в дев-тулзах, можно использовать дизайн-режим (ввести document.designMode = "on" в консоли)
а вот и миксины подвозят в канарейку Chrome, как обычно подождём 3 года и можно будет пользовать:

@mixin --box {
  aspect-ratio: 1;
  inline-size: 100px;
  block-size: 100px;
}

.box {
  @apply --box;
}

HTML

полезные фичи <fieldset> при создании форм: можно дизейблить целиком всю группу полей через атрибут disabled у <fieldset>, а также <fieldset> может находиться отдельно от <form> и быть связанным с формой атрибутом form со значением id формы

Платформа

если вы игнорите сообщения консоли при запуске проекта Browserslist: caniuse-lite is outdated, то у вас есть шанс существенно уменьшить размер бандла с помощью команды npx update-browserslist-db@latest, так как возможно уберётся много ненужной транспиляции

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

Fri, 04 Apr 2025 00:00:00 GMT

Новости

вышел Chrome 135:
- появились атрибуты command и commandfor для кнопок, чтобы декларативно описывать взаимодействие с поповерами и диалогами
- добавили псевдоэлементы ::scroll-button() и ::scroll-marker для «нативных» каруселей
- CSS-функция shape() позволяет описывать в clip-path параметрические SVG-like-формы
- добавлена возможность стилизации псевдоэлемента внутри псевдоэлемента ::before::marker
- поддержали Observable API и fetchLater() для отложенного запуска fetch
вышел Safari 18.4:
- внедрили новый декларативный формат Web Push
- также поддержали CSS-функцию shape()
- обновили <input type="color" />, теперь поддерживает атрибуты alpha и colorspace
- поддержали Cookie Store API
вышел Firefox 137: из интересного только выкатили группировку табов, а в ночных сборках появляется поддержка PWA
выпустили React 19.1.0: появилась фича Owner Stack для более детального отслеживания в дев-режиме иерархии рендера компонентов, а также подфиксили баги в React и React DOM
вышел Express 5.1.0, эта версия становится LTS
поддержка Node.js 18 заканчивается 30 апреля 2025, время обновить ваши .nvmrc
выпущен Material UI v7:
- улучшилась поддержка ESM
- устаканилось API slots и slotProps
- впилили поддержку @layer для упрощения интеграции с другими либами
вышел отчёт State of Vue.js 2025:
- хотят по-прежнему дожать Vapor Mode с обратной совместимостью
- по популярности Vue всё ещё отстаёт от React, но количество сайтов на Vue явно больше Angular
- треть проектов всё ещё на Vue 2, хоть он больше и не поддерживается (миграция вызывает сложности)
- Pinia — доминирующий стейт-менеджер
- комьюнити не хватает библиотек компонентов (как MUI или Radix) под Vue
- Nuxt v4 уже неподалёку
со стороны WebKit появилось предложение объединить пересекающиеся части flexbox и grid в новом семействе свойств item-direction, item-wrap, item-pack, item-slack (чтобы наконец перестать вспоминать каждый раз, что эти align-smthng значат)

Проекты

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

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

JS

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

CSS

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

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

про тени: три вида теней — box-shadow, filter: drop-shadow() и text-shadow —могут не только статически применяться, но и анимироваться, причём благодаря @property возможна анимация только одного из параметра тени, например, box-shadow: inset 0 0 0 var(--l) var(--c), что делает тени мощным декоративным элементом
прикольный, но хрупкий голографический эффект на скролле, построенный на режимах наложения, background-attachment: fixed и линейных градиентах
а пока создатели CSS размышляют не схлопнуть ли flex и grid в единое свойство, разработчикам как-то нужно жить и решать, что использовать в каждом конкретном юзкейсе: вот у одного есть мнение, что в решении, что взять, нужно следовать в порядке grid/inline-grid → block → flex
об анимации движения по линии с помощью offset-path вы уже наверняка слышали, но тут идею развили поглубже и творят прям интересные экземпляры (правда с использованием css-doodle), так что есть чем вдохновиться

Платформа

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

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

Fri, 11 Apr 2025 00:00:00 GMT

Новости

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

Проекты

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

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

JS

напоминание, что помимо Clipboard API существует ещё Web Share API (которое пока недоступно в FF), но в режиме прогрессивного улучшение вполне сгодится
и ещё одно напоминание о полезных API, о которых постоянно забываешь:
- в "".replace() и "".replaceAll() можно передавать колбек и модифицировать заматченный текст
- Promise.withResolvers() позволяет «вытаскивать» наружу resolve и reject при создании промиса
- [10,20,30].at(-1) вернёт последний элемент массива
а также, как вы догадываетесь, ещё одно напоминание:
- Object.groupBy() и Map.groupBy() сгруппируют элементы по переданному ключу
- FinalizationRegistry стриггерит событие в момент, когда объект будет подчищен garbage collector-ом из памяти
что можно сделать, чтобы уменьшить размер основного React-бандла:
- прочекать файлы на сайд-эффекты (window.someBadSideEffect = 'hello')
- не импортировать объект/класс из внешних пакетов целиком, лучше отдельными функциями
- в React использовать React.lazy для ленивой подгрузки компонентов
- импортировать не нужные сразу либы динамически:

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

CSS

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

nav {
  color: salmon;

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

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

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

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

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

HTML

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

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

Платформа

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

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

прикольная история про то, как падение тестов Jest привело разработчика к шуточной программе sl, которая была создана для тех, кто напечатал команду sl вместо ls и выводит ASCII-паровоз в консоль (да уж, что только не прилетает вместе с node_modules к вам в комп)

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

Fri, 18 Apr 2025 00:00:00 GMT

Новости

Cloudflare продолжает свою экспансию: теперь на один Worker можно залить фронт, бэк и бд, кроме того поддерживаются все фронт-фреймворки и Vite, чтобы задеплоить одной кнопкой (для тех, кто смел и не боится блокировочек + стать завендорлоченным), а ещё выкатили платформу для создания AI-агентов (козырное имя пакета npm i agents)
анонсирована Zod 4 beta: закрыты самые востребованные ишуи, стал быстрее отрабатывать tsc, представлена тришейкабельная версия либы @zod/mini, добавлено новое z.interface() для вывода типа из схемы
в ближайшее время в браузерах изменится подход к стилизации вложенных заголовков h1: раньше в зависимости от глубины вложенных секций h1 по умолчанию становился всё меньше, теперь будут одного размера
в Remix и React Router найдена уязвимость, дающая возможность атаки cache poisoning — подмены закешированного ответа JSON-ом злоумышленника (если используете, нужно обновиться)
обновился Astro до 5.7:
- выкатили экспериментальный Fonts API, чтобы из коробки управлять загрузкой шрифтов с CDN
- Sessions API и SVG Components теперь стабильные
в Firefox 139 будет включен по умолчанию Temporal, и FF станет первым поддержавшим браузером (FF получается становится такой экспериментальной площадкой до выкатки в Chrome)
Wordpress выкатывает AI-генератор сайтов: no-code-конструкторы верстальщиков не одолели, посмотрит как справится AI
новый тип уязвимости: нередко AI генерируют в коде зависимостей выдуманные названия пакетов, это в целом не проблема до тех пор, пока злоумышленники не начинают создавать под этими именами уже реальные пакеты с вредоносным кодом, которые попадают к вам в node_modules

Проекты

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

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

JS

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

type NotificationProps =
  | { type: "error"; message: string }
  | {
      type: "warning";
      message: string;
      buttonText: string;
    };

type NotificationProps = { message: string } & (
  | { type: "error" }
  | { type: "warning"; buttonText: string }
);

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

CSS

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

.card:has(> :only-child) {
  padding: 2rem;
}

HTML

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

<noscript>
  <style>
    .d-js-required {
      display: none;
    }
  </style>
</noscript>

Платформа

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

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

Fri, 25 Apr 2025 00:00:00 GMT

Новости

не Vitest единым: в параллельной Rust-песочнице начали готовить свой тестовый фреймворк на основе API Jest, обещают глубокую интеграцию с RS-экосистемой
в новой версии pnpm 10.9 поддержана установка JSR-пакетов pnpm add jsr:<pkg_name>
вышел React Compiler RC: прошлый отдельный eslint-плагин смерджен в eslint-plugin-react-hooks, начали двигаться в сторону поддержки в том числе Babel-free-сборки
в React экспериментируют с ViewTransitions — плавными переходами между компонентами, наборами данных, состояниями интерфейса, а также с Activity — специальным API для анмаунта частей инфтерфейса, но с сохранением их состояния и низкоприоритетным продолжением рендера (для дальнейшего возможного показа этих частей)
пропоузал Records and Tuples в ES был официально отклонён TC39 из-за нежелания добавлять новые примитивы в язык, в пользу добавления новых объектов (tc39/proposal-composites#15)
JetBrains выкатили обновление WebStorm 2025.1 с подпиской на возможность подключить AI-ассистента + агента

Проекты

number-flow — в последнее время распространился дизайн-паттерн, когда что-то печатается в браузере, и этот кросс-фреймворковый компонент для анимированного перехода между чисел может пригодиться
playwright-mcp — вот к Playwright вслед за Puppeteer прикрутили MCP-интерфейс, так что теперь LLM смогут невизуально взаимодействовать со страницами благодаря дереву доступности (погодите, но это же была тула для тестов?!)

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

JS/TS

в недавно вышедшем Chrome 135 появилась экспериментальная поддержка fetchLater — особого API для отправки beacon-запроса «в один конец»; замысел авторов — не отталкиваться больше от событий страницы (unload/beforeUnload, которые поддерживаются нестабильно), а перейти к регистрации разработчиками намерения отправить beacon-запрос, а браузер уже позаботится об остальном сам (хотя, в целом, целесообразность появления этого API не очень ясна, ведь недавно как раз везде поддержали keepAlive у обычного fetch)
одна из причин, почему с веб-компонентами всё сложно: атрибут у HTML-элемента и значение свойства у JS-объекта этого элемента — это разные штуки: когда меняется свойство, значение атрибута не меняется, а вот смена значения атрибута чаще всего отзеркаливается в смене значения свойства, и в веб-компонентах как кастомных элементах с этим нужно разбираться вручную
замена ветвистых условий в функциях на плоскую структуру, где сначала идут early-returns, после идёт непоредственно функциональность, а затем обработка ошибок выполнения, обычно улучшает читаемость, и хочется меньше скипать код при его изучении
разбор более сложных кейсов в TS: as const для уточнения типа, indexed access types, mapped types:

const sendEvent = <E extends EventName>(event: E, payload: HomeEvents[E]) => {
  /* ... */
};

type BooleanProperties<Type> = {
  [Key in keyof Type]: boolean;
};

история про новенький Cookie Store API, который то ли уже появился в оставшемся FF, то ли всё таки ещё нет, и о том, как уже сейчас можно встроить его в React-приложение с фолбеком
использование useEffect для синхронизации нескольких состояний — не очень хорошая идея

CSS

сердечко с новомодной функцией shape()
если вы не знаете, как подступиться к формату oklch, имея на руках макеты с rgb-цветами, то можно начать с «каста» rgb-цвета в oklch, а дальше уже тюнить lch-результат:

--page-colour: oklch(from #49498d calc(l / 4) c h);

Платформа

помимо привычных браузеров Chrome, Firefox, Safari и Edge, которые в современном мире распространяются дефолтными установками в ОС, на базе их опенсорсных движков строят другие браузеры со своими фишками: где-то с переосмысленным UX (Arc, Horse, Zen, Wavebox, Surf, Shift), где-то с доп privacy (Orion, DuckDuckGo), где-то с доп функциями (Vivaldi), где-то с криптой (Brave), но отдельные смельчаки строят полностью свои движки (Ladybird, Flow, Servo)
ещё один пойнт про осознанное применение AI в кодинге: делегируя AI-помощнику трудности решения проблем и нахождение решений, вы обкрадываете свой же опыт, благодаря которому нарабатывается экспертиза (преодоление «диких» условий без сторонней помощи закаляет), а также лишаете себя удовольствия от процесса (ведь кодинг это не только выдача готового кода, но и удовлетворение от становления лучшей версией себя в процессе его написания), а вот делегировать рутинные части, бойлерплейт и объяснение концепций — вполне ок для AI

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

Fri, 02 May 2025 00:00:00 GMT

Новости

зарелизился Firefox 138:
- в сам браузер добавили профили пользователей, а также раскатили на всех группы табов
- добавили поддержку Import Attributes (теперь поддерживается везде), а также Error.isError
- как и обещали, поправили дефолтную стилизацию вложенных элементов <h1>
а так же радостная новость: в FF 139 (уже есть в ночной сборке 140) появится поддержка View Transition API (теперь будет поддерживаться везде!)
вышел Nuxt 3.17:
- докрутили фетч данных: теперь при использовании useAsyncData или useFetch запросы будут шарить один и тот же реф на данные по одинаковому ключу между всеми компонентами
- в нескольких компонентах, использующих одинаковый источник данных, рефетч будет происходить только один раз при изменении зависимостей
- в качестве ключей в запросах теперь можно использовать реактивные примитивы (рефы, computed-ы или геттеры)
вышла бета Storybook 9: в инструмент вовсю интегрируют запуск всевозможных тестов (UI, интерактивность, доступность, скриншоты), сынтегрировались с Vitest, поддержали React Native
в Chrome передумали блокировать 3rd-party куки по умолчанию (не смогли со всеми договориться), всё останется как есть сейчас (можно вручную отказаться в настройках браузера), а также пообещали в Incognito-режиме добавить маскировку IP-адреса устройства
и ещё про Chrome: в грядущей принудительной продаже браузера покупателем может стать OpenAI (если так случится, то скорость изменения индустрии ещё больше ускорится)
вышел GSAP 3.13: на удивление, фаундеры и ментейнеры до их покупки Webflow, никуда не ушли, а продолжают пилить проект; с этим релизом в GSAP сделали все ранее платные плагины бесплатными, а заодно и дропнули премиальный клуб GSAP
со стороны Microsoft поступило предложение расширить console методом context(), чтобы иметь возможность группировать и стилизовать в консоли дев-тулзов портянку разносортных логов
для V8 (начиная с Chrome 136) внутри JS-файлов можно указывать спец-коммент для компилятора //# allFunctionsCalledOnLoad, чтобы явно указать движку, что этот скрипт нужно распарсить и скомпилировать сразу же при первой встрече, а не тогда, когда потребуется выполнение определённой функции из этого скрипта

Проекты

kermit-font — прикольный «детский» шрифт в духе Comic Sans (поддерживается кириллица, есть вариативность)
unbuilt.app — реверс-сервис, находящий по артефактам в коде сайтов, какие технологии использовались для их создания
srvx — универсальный сервер с единым синтаксисом для Deno, Bun, Node.js
component-template — если уж теперь LLM расширяют наши возможности, почему бы не попробовать начать писать веб-компоненты? Вот как раз и стартовый шаблон подходящий нашелся.

Статьи, мнения, туториалы

JS/TS

из всех способов вывести что-то как строку, менее подверженный ошибкам — {}.toString.call(v), но в большинстве случаев подойдёт String(v), но он, в свою очередь, не выведет содержимое объекта; для этого подходит JSON.stringify(), но тоже со своими ограничениями
возьмём дерево компонентов в React: обход и рендер происходит начиная с родителей «вглубь» детей, а применение эффектов (useEffect) — на «обратном» пути обхода, «вверх» от детей к родителям
если вам для управления зависимостями в package.json недостаточно dependencies и devDependencies и хочется добавить категории, можно использовать PNPM Catalogs для группировки: хоть фича изначально для монореп, но она помогает разделить пакеты и внутри одного репо по категориям (test, frontend, types, lint…)
рецепт, как просто на коленке, без сторонних зависимостей хранить дизайн-токены в JSON, а транслировать в CSS в виде переменных в :root {}
устанавливать пакеты из JSR вместо npm, уже умеет pnpm 10.9+ и yarn 4.9.0+
рубрика «что хотел сказать автор» от Дэна Абрамова про RSC продолжается: директива 'use client' делает компонент доступным серверу через <script>, чтобы он мог его предвыполнить, а 'use server' экспортирует серверные функции на клиент, чтобы их можно было вызвать асинхронно в RPC-стиле
все эти ваши сайты — это для людей, а для машин достаточно склеенной текстовой портянки (пример от Bun)
парочка кандидатов на переопределение в дефолтных настройках TanStack Query:
- количество ретраев по умолчанию равно 3, что не всегда ок, например, если используется внутри тестов ошибок (увеличивается время выполнения тестов) → меняем число ретраев на 0
- время инвалидации кеша по умолчанию небольшое, часто происходит бесполезные перезапросы, а если вы уверены, что ответ от внешнего сервиса точно не будет меняться, перезапросов можно избежать → staleTime: Number.POSITIVE_INFINITY

CSS

как подтюнить анимации, чтобы они из просто хороших стали великолепными:
- не забыть настроить transform-origin с той стороны, откуда анимация визуально начинается
- подобрать более натуральный изинг: хотя бы ease-out, а лучше кастомную «пружинную» функцию
- при реализации динамического выделения табов лучше применить clip-path, чем просто менять цвет текста и заливки
единица измерения lh хороший (и доступный с 2023 года везде) способ не мучиться с em для задания межстрочных отступов:

p {
  margin-block: 1lh;
}

скруглённые углы в CSS есть уже давно, но их по-прежнему может не хватать для непрямоугольных форм, тогда в дело вступает давно забытое искусство подставления скруглённых уголочков на фон блока (только вместо png-картинок выступают радиальные градиенты)

HTML

для реализации кликабельной картинки-карты с интерактивными областями может подойти древняя пара тегов <map> и <area>, но могут быть проблемы с респонсивом, поэтому то же можно реализовать в чистом SVG (ведь внутрь групп в качестве обёртки для форм в SVG можно включать ссылки <a>)

Платформа

ещё один тейк, на этот раз от Addy Osmani, про деградацию скиллов при неразумном использовании AI-тулов: самое плохое — отваливается критическое мышление, не менее неприятное — общения между разработчиками становится меньше
для гита можно настроить глобальный игнор-конфиг для всей системы, на маке/линуксе лежит в ~/.config/git/ignore
чтобы при табе появление фокуса происходило на инпутах не с левого верхнего угла экрана, а на определённом месте, нужно просто перед табом кликнуть где-то неподалёку

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

Fri, 09 May 2025 00:00:00 GMT

Новости

вышла Node v24.0.0 с обновлённым V8 и npm, теперь это версия Current (она станет LTS в октябре)
судебное разбирательство с Google помимо продажи Chrome грозит лишить Firefox и Safari заработка, так как Google сейчас оплачивает выставленный в пользу Chrome поиск в этих браузерах по умолчанию (и если прекратит это делать, то лишит Mozilla 3/4 дохода); парадоксальная и грустная ситуация, что более здоровые конкурентные рыночные условия добьют FF
в Figma анонсировали и выкатили новые фичи:
- внедрили гриды с растягиванием ячеек, гэпами и выравниванием
- добавили новые инструменты для рисования вектора (кисти, заливки, формы)
- добавили конвертацию макета в код и публикацию сайта прямо из Figma (но пока что есть вопросики к доступности получаемого результата)
- ну и конечно появилась генерация в макете «чего угодно» с AI

Проекты

deepwiki — проект, позволяющий для любого публичного репозитория сгенерировать с помощью AI документацию по исходному коду (создаются даже схемы и диаграммы): например, дока mobx, react, linux; изучать новые либы стало ещё интереснее и проще
operator-lookup — интерактивный туториал по операторам JS
pyodide — порт CPython на WebAssembly/Emscripten, позволяющий запускать код на питоне в браузере/Node.js
bhvr — а вот и попытка сделать просто работающий фуллстек-React-фреймворк, в который не нужно долго вкуривать, и он не залочен под конкретного вендора: под капотом Bun, Hono, Vite, React
react-modal-sheet — неплохой UI-элемент выезжающей шторки под React
color.js — либа для манипуляции с цветами от авторов спек (Lea Verou, Chris Lilley) и других уважаемых людей

Статьи, мнения, туториалы

JS/TS

как организовать микрофронтенды с помощью Astro: каждый микрофронтенд организуется как отдельный Astro-сервер, с урлов всех микрофронтов получается HTML, а затем с помощью Server Islands организуется отложенная загрузка динамики каждого фронта (пример)
и снова рубрика «что хотел сказать автор» от Дэна Абрамова, и снова про RSC: на примере того, как организован серверный и клиентский код в Astro, поясняется, что и как организовано в React; проблем сходу вижу две:
- в Astro разделение на сервер/клиент сходу понятное и простое как палка
- в React надо ещё уложить в голове, что компоненты по-умолчанию серверные, а могут быть клиентские, а на самом деле могут быть и такими, и такими
пара человеческих статей о том, как по-разному устроена работа эвент лупа в браузерном JS и в Node.js
как примерно устроен санитайзер HTML:
- берём сырой HTML,
- вставляем его в новый неактивный документ через DOMParser,
- затем пробегаемся рекурсивно по дочерним нодам, смотрим на соответствие их списку допустимых тегов, а также на нессылки в урлах ссылок или картинок,
- берём проверенные ноды, отбрасываем не прошедшие проверку
- возвращаем отфильтрованные ноды

CSS

сборник юзкейсов новой функции shape() (ждём только FF в 141 версии), и заодно интро в блоге webkit: самый сок этой функции — это человекочитаемые команды внутри и возможность использовать переменные, чтобы делать формы респонсивными
хорошая фича margin-trim, которая подрезает лишние отступы детей, выезжающие за родителя, но поддерживается только в Safari, печаль
утилитарный класс для установки aspect-ratio у картинок/видео, само соотношение сторон в переменной, чтобы задать извне:

[class*="aspect-ratio"] {
  --ratio: auto;
  object-fit: cover;
  aspect-ratio: var(--ratio);
}

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

@keyframes scrollfade {
  0% {
    --left-fade: 0;
  }
  10%,
  100% {
    --left-fade: 3rem;
  }
  0%,
  90% {
    --right-fade: 3rem;
  }
  100% {
    --right-fade: 0;
  }
}

Платформа

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

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

Fri, 16 May 2025 00:00:00 GMT

Новости

в Chrome 136 обезопасили хранение истории посещения ссылок: с помощью безобидного селектора :visited с вредоносного сайта можно прочекать вашу историю посещения ссылок, так как она применяется к ссылкам сразу на всех сайтах; теперь же история посещения ссылок будет ограничена только конкретным сайтом, и со стороннего сайта вынуть из CSS её будет нельзя
Safari обновился до 18.5: добавили поддержку Declarative Web Push, который работает без Service Worker
а в версии Safari Technology Preview допилили функцию contrast-color(), которая для переданного цвета автоматом подбирает контрастный чёрный или белый:

color: contrast-color(purple);

в Edge пробуют новое API ARIA Notify с помощью которого можно программно вызвать произнесение сообщения для определённой DOM-ноды скринридером:

document.querySelector("#text-editor").ariaNotify("Selected text is bold");

исходники Firefox иронично завезли на майкрософтовский Github, видимо уже готовятся сдавать в музэй
оказывается для popover-ов и anchor positioning есть прям «официальные» полифиллы @oddbird/popover-polyfill и @oddbird/css-anchor-positioning, так что если вы не использовали их по причине нераспостранённости в браузерах, то это не проблема
вышел Parcel v2.15.0:
- движок переписан на Rust
- внутри начали использовать другой HTML-парсер, html5ever из движка Servo
- с SVGO перешли на Rust-аналог — OXVG (работает в разы быстрее, чем JS; хотя уход с JS-решений, как по мне, в долгую ухудшает поддерживаемость тулов в угоду сиюминутному ускорению)

Проекты

chrono — парсер даты из строки на человеческом языке в машиночитаемый формат

chrono.parseDate("An appointment on Sep 12-13");
// Fri Sep 12 2014 12:00:00 GMT-0500 (CDT)

void — опенсорсный аналог Cursor (на самом деле ещё один пока ещё бесплатный форк VS Code)
svg-to-css — транслятор нечитаемой SVG-формы в более читаемый CSS-синтаксис clip-path: shape()
leptos — React-подобный фреймворк на Rust со знакомыми паттернами (реактивные сигналы, подобие JSX, компоненты)
basecoatui — shadcn/ui, портированный с React в чистый HTML/CSS
eslint-plugin-react-you-might-not-need-an-effect — плагин для ESLint, подсвечивающий лишнее использование useEffect

Статьи, мнения, туториалы

JS/TS

эволюция альтернативного минималистичного генератора статических сайтов Nue JS привела к ребредингу в Hyper — также минималистичный, но уже полноценный headless view layer, которым изначально и планировался React, но потом что-то пошло не так
если вы не уверены точно, какой будет лог у следующего кода, то есть подробное объяснение о работе промисов:

new Promise((resolve) => {
  console.log("Deep");
  resolve("12");
}).then((result) => console.log(result));

console.log(25);

если ваш проект с JS/TS, JSX/TSX, CSS, у вас нет желания мигрировать на новый ESLint (или же надоело дружить между собой Pretier и ESLint), зато есть желание куда-то съехать, то вот гайдик по переезду на Biome
противоречие Rust- и JS-тулингов даёт о себе знать: React Compiler — JS-тула, использует Babel, и не работает с Rust-тулченами типа SWC и OXC
пример реализации простой Dependency Inversion в React, когда отделяется слой работы с данными и подтягивается в компонент как зависимость
Дэн не унимается и продолжает толкать свою телегу: на этот раз напоминание, что RSC могут рендериться в билд-тайме в статичный HTML вовсе без использования «серверных» функций
тонкость работы с контекстом в React: если вынести контекст-провайдер в отдельную обёртку и прокидывать содержимое в него через children, то при изменении стейта внутри этой обёртки можно избавиться от лишних ререндеров children, так как они не меняются (и ещё одна статейка про этот же подход, но с более обширным объяснением)
новая книга по основам TS «Total TypeScript Essentials» от Matt Pocock: пока не читал, но одобряю не глядя

CSS

как с помощью CSS-анимаций делать простую «ретро»-мультипликацию: когда @keyframes используются буквально по прямому назначению, декорации движутся, показываются и скрываются, а в итоге всё кажется живым
реализация схем гитарных аккордов на гридах, фукнции attr(), градиентах и container-queries (Chrome only)
так, тут опасная и экспериментальная CSS-магия: берём scroll animations, добавляем новенькие CSS-карусели и вишенкой на торте — scroll snaps: так можно в карусельке реализовать динамическую высоту слайдов в зависимости от скролла (Chrome only)
псевдоэлементом ::first-letter можно стилизовать не только обычную букву, но и любой символ, к примеру, emoji:

<li>🍎 <strong>Apple</strong> Text</li>

li::first-letter {
  initial-letter: 3;
}

тема height: 100% неочевидно работает в CSS из-за двух противоречащих друг другу механизмов: 1) по умолчанию во Flow layout родитель принимает минимально необходимую высоту для показа дочерних элементов; 2) высота ребёнка, заданная в % расчитывается относительно родителя. Поэтому для корректной работы процентной высоты во Flow layout она должна быть выставлена в 100% для всех возможных родителей (#root, body, html). Или же можно не заморачиваться и использовать другой контекст форматирования — Grid layout, в котором не родитель схлопывается под высоту ребёнка, а наоборот дети растягиваются на высоту родителя

Платформа

как узнать, используется ли на вашем сервере gzip или другое сжатие: в девтулзах во вкладке Network смотрим на выполненный запрос, в колонке Size сверху отображается transferred size и пониже actual size; если transferred < actual, значит сжатие есть

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

Fri, 23 May 2025 00:00:00 GMT

Новости

команда TS выкатила превью нативного TS на Go, можно попробовать в терминале npm install -D @typescript/native-preview или в VS Code в виде расширения: оно живое (!) и по ощущениям LSP в VS Code шевелится побыстрее
Microsoft заопенсорсит расширение Copilot-чата, тем самым видимо планируя прикрыть зоопарк форков VS Code с AI-панельками; также Copilot Chat будет поддержан в вебе и существенно доработан
и тему VS Code продолжает новость, что в редакторах HTML и CSS в подсказках будет выдаваться инфа о Baseline-поддержке свойств, тегов и атрибутов (а также не только в VS Code, но и в других редакторах, которые используют опенсорсные наработки Code - OSS)
в PHP 8.5 появится pipe-оператор (ноябрь 2025), а вот подзаброшенный пропоузал в JS уже вряд ли вскоре оживёт
Stackoverflow стремительно теряет активных пользователей (и не потому что на все вопросы уже ответили, а потому что узнавать ответы стали в других местах), поэтому компания думает о ребрендинге и перефокусировке с только Q&A ещё на сообщество и построение карьеры; что ж, такие времена, или адаптируйся под AI, или умри
Mozilla просит суд не перекрывать «денежный» кислород от Google в антимонопольном деле; такой вот парадокс: чтобы поддержать хоть какую-то конкуренцию, нужно продолжать делать «нерыночные» вливания за поиск Google по умолчанию в FF
ESLint в добавок к JSON, md и CSS, теперь умеет линтить HTML с помощью плагина html-eslint; как и в прошлых случаях из коробки сразу идут многие базовые правила, которые не надо дополнительно настраивать
вышли ES Module Shims 2.5 (это те, которые уже в версии 2.0 давали возможность запускать type-erasable-код на TS прямиком в браузере, без компиляции):
- позволяют использовать нативные импорты CSS- и JSON-модулей: import style from './style.css' with { type: 'css' };
- нативный TS теперь просто работает, без доп настроек
- появилась возможность замутить «нативный» hot reload через import.meta.hot
в Deno начали тыкать палочкой, типа их фреймворк Fresh что-то уже не особо-то и fresh (протух-с), поэтому вышел пост, что Fresh 2.0 уже на подходе, под капотом будут Express/Hono-like API, позволяющие без лишнего бойлерплейта писать сервер, организовать мидлвари и другие плюшки
в семействе Rs- вышла новая либа для создателей либ — Rslib: внутри уже предустановленные конфиги для беспроблемной сборки (в том числе стилей) и публикации либ в разных форматах (ESM, CJS, UMD, Module Federation)
а в семействе TanStack вышла клиентская БД/стор — db, которая держит данные на клиенте, позволяет делать выборки (query) из этой БД и синкается с любым бэком

Проекты

code2tutorial — ещё один проект, составляющий документацию-туториал по репозиторию (аналог deepwiki)
crosspost — JS-либа для кросспостов в соц сети; тут хочется подсветить не фичи либы, а её API — чистый паттерн Strategy (о котором рассказывал в тренажёре), зацените

Статьи, мнения, туториалы

JS/TS

для работы с буфером обмена можно использовать методы navigator.clipboard.writeText() для обычного текста или navigator.clipboard.write() для всех остальных форматов типа картинок, текстового контента и HTML; а проверить браузер на умение вставлять определённый формат (без выброса исключения) можно с помощью ClipboardItem.supports()
а собственно Async Clipboard API поддерживает помимо стандартных text/plain, text/html и image/png ещё и кастомные форматы: для этого при создании new ClipboardItem нужно указать в названии типа префикс web :

const clipboardItem = new ClipboardItem({
  [`web ${jpegBlob.type}`]: jpegBlob,
  [`web ${gifBlob.type}`]: gifBlob,
});

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

function* getElements(tagName = "div") {
  while (true) yield document.createElement(tagName);
}

CSS

alt-текст, который показывается, если изображение не загрузилось, тоже можно стилизовать: для этого к img {} просто применяются текстовые стили, можно дополнительно проставить в JS data-атрибут для картинок на колбеке onerror
для нативных <input type="date"> и <input type="time"> в некоторых хромиум-браузерах показываются иконки часов и календаря, для их стилизации подходит псевдокласс ::-webkit-calendar-picker-indicator
если решение работает, это не значит, что оно оптимальное; так ответ на StackOverflow может быть устаревшим, хоть и популярным, и чат-бот также может взять популярное устаревшее решение из поискового топа; вот к примеру для анимированного градиента текста достаточно таких стилей:

.gradient-text {
  background: linear-gradient(90deg, #00f, #0ff, #00f) -100%/ 200%;
  color: transparent;
  animation: shimmer 2s linear infinite;
  -webkit-background-clip: text;
  background-clip: text;
}

@keyframes shimmer {
  to {
    background-position: 100%;
  }
}

новую функцию shape() можно использовать не только в связке с clip-path() для рисования фигур, но и с offset-path для задания формы движения: вместо offset-path: path("") более читаемый offset-path: shape()
некоторые CSS-сниппеты разной степени полезности: точно подтвержу, что если делаете какой-то общий компонент со стилизацией, которая может внезапно стать «глобальной» (стилизация по тегам p, body…), то её точно полезно завернуть в @layer {}, чтобы у потребителя не возникло необходимости переопределять ваши «глобальные» стили, так как они будут применяться раньше по каскаду
неинтуитивные решения для лейаута, например, по умолчанию минимальная ширина grid- и flex-детей — auto, что не всегда удобно, и её можно сбросить:

.wat {
  min-height: 0;
  min-width: 0;
}

HTML

тег <datalist> можно использовать не только для «выпадашки» текстовых значений, таргет-элементом листа может быть, например, <input type="color">, а элементами листа, соответственно, цвета:

<datalist>
  <option value="#ff0000">Red</option>
  <option value="#00ff00">Green</option>
</datalist>

Платформа

памятка по проверке доступности сайта/приложения с клавиатуры и из скринридера (NVDA, TalkBack, VoiceOver)

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

Fri, 30 May 2025 00:00:00 GMT

Новости

закрывается браузер Arc: создатели переключились на другой браузер (с AI) Dia, под капотом тоже Chromium и проприетарная платформа для создания браузеров, которую опенсорсить не собираются
также закрывается проект Glitch (браузерный редактор веб-приложений + хостинг) после 10 лет работы
в ESLint провели ретроспективу выкатки flat-config-а с 2019 по 2024, выявили основные ошибки: слишком много ломающий изменений за раз, слишком много документации и отсутствие тулинга автомиграции, медленное впитывание новой версии экосистемой, отказ от двойных конфигов (надо было поддержать, востребовано авторами плагинов)
господа из React Router поддержали в RR React Server Components, а также решили воскресить Remix (в лучших традициях рестлинга) да не просто так, а сделать его полностью независимым, даже от React (внутри будет форк Preact): теперь стало понятно, что этот проект — экспериментальная площадка, чтобы проверять крейзи-фичи и затем интегрировать их в «стабильный» RR
вышел Chrome 137:
- поддержали функцию if() в CSS: background-color: if(style(--color: white): black; else: white)
- внедрили свойства reading-flow, reading-order для указания порядка чтения элементов скринридерами в флекс-/грид-лейаутах
- заработала функция shape() для указания направления в свойстве offset-path
- для SVG-элементов теперь можно управлять трансформацией через атрибут transform
- добавили значение view-transition-name: match-element, чтобы автогенерировать название вью-транзишна вместо хардкода или задания из JS
вышел Firefox 139.0:
- из коробки работает Temporal proposal (прикол в том, что для движка SpiderMonkey поддержку реализовал один чел, опенсорсный контрибьютор, который не работает в Mozilla)
- поддержали атрибут hidden=until-found
- в экспериментальных фигах за флагом приехали: View Transition API, scheduler.yield()
вышла новая версия Bun v1.2.14:
- позаимствовали фичу catalogs: из pnpm для создания алиасов для группы зависимостей
- добавили флаг bun init --react для быстрого разворачивания шаблона React-проекта и дев-сервером на Bun
вышла новая версия JSPM 4.0 (import map package manager): внутри команды для безконфиговой сборки и сервинга проекта, поддержка нативного TS «со стриппингом», импортмапы средствами браузера — звучит знакомо? да, потому что контрибьютор JSPM и ES Module Shims — один и тот же человек, Guy Bedford
вышел Angular 20:
- стабилизированы реактивные фичи effect, linkedSignal и toSignal
- добавлена экспериментальная поддержка фетчера httpResource()
- причёсан SSR

Проекты

ForesightJS — либа для предсказания действия пользователя по движению курсора (префетч ресурсов по ховеру — слишком поздно, а по вьюпорту — запрашивается лишнее; с этой либой можно префетчить раньше и более точечно)
snapdom — либа для снятие скриншота с DOM-ноды, как в дев-тулзах, только отдельной либой (и без папеттира внутри)
icons — бесплатные анимированные SVG-иконки для React с использованием motion
enum-converter — пример работы TypeScript Transform API — конвертер Enum в type alias

Статьи, мнения, туториалы

JS/TS

реактовский useSyncExternalStore можно использовать не только для хранения каких-то бизнес-данных (типичный стор), но и для «UI»-информации, например, данных о window.matchMedia: подписываемся на 'change' состояния экрана, записываем в «стор», в React-компоненте юзаем этот стор
как избегать проблемы циклических импортов между компонентами с помощью здравого смысла, а также инверсии зависимостей (меняем прямое использование на пропы) на примере методологии FSD
в связи с начавшейся раскаткой Temporal в браузерах (FF — первый) пора знакомиться, если ещё не, тем более, есть полифилл
краткая история JS с уклоном в Райана Даля, Node и Deno: в 2025 JS исполнилось 30 лет, JSDoc — 26 лет, JSON — 24, Safari — 22, MDN — 20, jQuery — 19, Chrome — 17, CommonJS, Node.js, CoffeeScript — 16, npm, AngularJS, Backbone — 15, Webpack, TypeScript — 13, React — 12, ES6 — 10, Next.js — 9, Bun — 2

CSS

помимо именования view-transions с ними есть ещё одна проблема: так как транзишн применяется к document, одновременно может выполняться только один транзишн, поэтому невозможно запустить конкурентные транзишны + есть проблема с z-index, когда транзишнящийся элемент перекрывает всё вокруг; решение — будущий Scoped View Transitions, то есть возможность запуска транзишна на конкретном элементе element.startViewTransition()
эффект «фонарика в темноте»: что прикольно, так это, что можно задавать любую форму светлому участку благодаря filter или mix-blend-mode, например, «решётка» из градиентов сильно смазанная и переконтращенная filter: blur(1em) contrast(100) становится движущейся «кляксой»

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

Fri, 06 Jun 2025 00:00:00 GMT

Новости

в Chrome 138 (сейчас уже в бете) будут доступны CSS-функции sibling-index() и sibling-count(), которые отдают интежер с позицией элемента среди собратьев и общее число детей, будет работать внутри calc():

li {
  animation-delay: calc(0.1s * sibling-index());
}

выпущен tech preview «растифицированного» Vite — Rolldown-Vite: под капотом заменили связку Rollup + esbuild на собственные Rolldown + Oxc, чем существенно ускорили сборку по времени и памяти; заодно решили, что раз оно теперь работает быстро, то можно и для дев-сервера сделать не лёгкую ESM-сборку, а полноценную, и в будущем в Vite будет доступен режим full-bundle mode
обновился Vitest до версии 3.2:
- задепрекейтили настройку workspace в пользу projects
- добавили аннотации в выполнение тестов, которые будут выводиться в консоль, и кастомные цвета для projects
- добавили возможность раcширения встроенных locators собственными методами

Проекты

starwind — тейлвиндовые компоненты для Astro (не shadcn/ui единым)
livestore — решение для стораджа данных на клиенте в SQLite c реал-тайм-синхронизацией всех клиентов и бэка
udm14 — если добавить параметр &udm=14 к поисковой строке гугла, то он внезапно откроется без AI-обвеса, суммаризаторов и тд
small — минимально возможные синтаксически валидные файлы на всех языках (например, в JSON-файлах — минимальное содержимое 0)

Статьи, мнения, туториалы

JS/TS

природа языка JS такова, что при «кидании» в throw можно бросить не только объект ошибки Error, но и строку, число, объект, и это создаёт проблемы с тем, что и в каком формате ожидать в catch; TypeScript тут особо не помогает, исключения в TS не тайпчекаются, поэтому рекомендуется при обработке исключения проверять его тип

export const parseError = (error: unknown) => {
	if (typeof error === 'string') {
		return error;
	}

	if (error instanceof Error) {
		return error.message;
	}

	return 'An error occurred';
};

если вы приводите строку к дате new Date('2025-05-28') и new Date('2025/05/28'), то результаты могут быть разные: в первом случае браузер воспринимает строку как неполный формат записи даты-времени ISO 8601 и дополняет её на своё усмотрение (так, что может даже открутить часами дату до предыдущего дня, если устройство находится в удачной таймзоне)
flushSync — метод в React, который позволяет минуя батчинг императивно и синхронно запустить обновление UI в нужный момент, например, чтоб корректно установить фокус в инпут, который только что показался с помощью сеттера из useState
есть такой тип данных Uint8Array, который как обычный массив, но каждый элемент в нём гарантировано размером 1 байт; так вот, в V8 на больших размерах массивов (> 150) Uint8Array занимает меньше места в памяти, чем обычный массив
дежурное напоминание: в свойстве firstChild может оказаться не нужный DOM-элемент (тег), а текстовая нода с переносом строки "\n " (зависит от форматирования HTML-кода), поэтому лучше использовать .children[0] (при этом :first-child в CSS и через querySelector вернёт корректного потомка, не текстовую ноду)

CSS

у нативного элемента dialog есть браузерный элемент подложки, который стилизуется через ::backdrop, обычно его делают полупрозрачным (и сам он по умолчанию тоже полупрозрачный); так вот, к нему можно при желании применить фоновое изображение, чтобы сделать подложку непрозрачной и модалку перекрывающей нижний слой
полностью CSS-ный редактор в стиле Майнкрафт:
- все блоки уже заранее построены, но скрыты и показываются благодаря старому трюку с чекбоксами/радиокнопками и соответствующими лейблами
- анимации тоже заранее запущены, но поставлены на паузу, а нажатие контролов (:active) их снимает с паузы

Платформа

мрачноватый рисунок образа будущего: Chrome превращается в новый IE6, так как Google с одной стороны заставляют его продать, с другой — с приходом LLM поиск, а следом и веб-браузинг как таковой, а следом и процесс развития стандартов существенно меняется
разработка ПО породила собственную субкультуру с чисто разработческим жаргоном: Yoda Conditions, Stringly Typed, Rubber Ducking, Jenga Code и другие знакомые по разработческим будням явления

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

Fri, 13 Jun 2025 00:00:00 GMT

Новости

обновился редактор Cursor 1.0:
- главное — появилась настройка в 1 клик MCP-серверов
- также из интересного появилась бета-фича Memories: редактор может запоминать факты из диалогов и ссылаться на них в будущем
последние обновления ES от TC39:
- Array.fromAsync перешёл на Stage 4 (доступен везде)
- Error.isError перешёл на Stage 4 (доступен везде)
- using перешёл на Stage 4 (Chrome only)
- Seeded Pseudo Random Numbers от Tab Atkins перешёл на Stage 2
обновился Astro 5.9:
- появилась экспериментальная встроенная поддержка Content-Security-Policy посредством встраивания тега <meta> с нужными хэшами используемых файлов (также загружаемых динамически)
недавно анонсировали @platformatic/php-node — официальный модуль Node.js с возможностью процессить PHP внутри Node.js-рантайма; главный вопрос был «зочем?», и вот выпустили статью, где рассказали юзкейсы: миграция PHP-прил на Node.js, гибридные приложения (Node.js сервисы с кусочками PHP-процессинга)
React Router пообещали сделать стабильнее через перевод процесса разработки на процесс TC39 Process (проход по стейджам + публичные обсуждения)
команда Edge завезла в будущий Chrome 139 стилизацию gap-ов в гридах/флексбоксах посредством новых свойств column-rule-* и row-rule-*
релизнули первый стабильный Oxlint (линтер на Rust от Evan You сотоварищи):
- за счёт мультипоточности быстрее ESLint в 50-100x
- есть автомиграция flat-config-а ESLint в .oxlintrc.json
- сразу включает > 500 правил из самого ESLint и популярных плагинов + собственные правила
DigitalOcean выпустили MCP-сервер, чтобы деплоить на платформу сразу из редактора без лишних конфигов
анонсировали бету Safari 26, да, Safari 19 не будет, будет сразу 26, следуя за числом года (что будет после 2099 года видимо уже неважно):
- наконец-то будут SVG-favicon-ки
- тег <model> для показа 3d-моделей в браузере (с фолбеком в обычную картинку)
- в CSS поддержаны Anchor Positioning, Scroll-driven Animations, contrast-color(), progress(), margin-trim
- из API поддержаны URLPattern, scrollMargin в IntersectionObserver, File System WritableStream, Pattern Modifiers в RegExp

Проекты

canidev.tools — CanIUse для фич девтулзов в движках
odyc — забавная либа для создания простых нарративных игр прям из конфига, такие вайбы «языка» Scratch
lingo.dev compiler — мультиязычная поддержка в React-прилах через слой перевода с помощью LLM: думаю, такую тенденцию будем наблюдать и дальше — воткни LLM-слой в сборку для какой-то понятной ограниченной задачи и всё просто заработает

Статьи, мнения, туториалы

JS/TS

с помощью document.currentScript можно пробросить через тег <script> внутрь скрипта data-атрибуты, чекать обычные атрибуты (типа, что скрипту обязательно проставлен defer) или же порядок следования скрипта в разметке (только в начале body или после определённого элемента)
Tanner Linsley убеждает, что URL как хранилище стейта недооценено из-за проблем с парсингом, типизацией и отсутствия связи с роутингом напрямую и рекомендует использовать TanStack Router, чтобы порешать все эти проблемы и наслаждаться рантайм-валидацией роутов с безопасным сохранением стейта в URL
в отличие от директив (типа use strict) магические комменты в начале файлов вроде /** @aPragma */ или //# aMagicComment, влияющие на процесс интерпретации и транспиляции JS-файлов, нестандартны и мало задокументированы

CSS

напоминание, что у вариативных шрифтов можно анимировать font-weight
ещё одно напоминание: вьюпорт-ориентированные динамические единицы измерения sv*, lv*, dv* с нами уже с 2022 года, то есть сейчас уже считаются широко распространёнными
анимация до не фиксированного, а динамического значения:

@keyframes oscillate {
  from {
    transform: translateX(calc(var(--amount) * -1));
  }
  to {
    transform: translateX(var(--amount));
  }
}

1fr 1fr vs auto auto vs 50% 50%, что выбрать, если нужно разделить на две равные части: в итоге лучше будет воспользоваться гридовым minmax(0, 1fr) для возможности работы overflow при переполнении

HTML

элемент <output> задуман для отображения результата вычисления, значение задаётся как для элемента формы (через value), но при этом находясь внутри <form> элемент не сабмитится, то есть служит чисто для визуализации

Платформа

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

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

Fri, 20 Jun 2025 00:00:00 GMT

Новости

вышел релиз pnpm 10.12.1:
- выкатили экспериментальную поддержку global virtual stores — теперь в node_modules хранятся не сами пакеты, а только симлинки на центральное хранилище в файловой системе, которое может переиспользоваться сразу всеми проектам; поэтому теперь установка пакетов может быть очень быстрой за счёт установленных ранее и закешированных в хранилище пакетов
- добавили в настройки режим catalogMode для управления установкой пакетов для монореп
Node.js 18 уже достигла End-Of-Life, и мигрировать рекомендуется сразу на текущую активную 22 версию, чтобы в следующий раз нескоро переезжать (апрель 2027)
выпущен Jest 30:
- поддерживает .mts и .cts файлы по умолчанию
- удалили алиасы expect, для миграции добавили eslint-плагин с автофиксером
- обновили поддержку jsdom, дропнули поддержку Node 14, 16, 19 и 21, TS < 5.4
- так как Гугл задепрекейтил домен goo.gl, который использовался для хранения снепшотов, то придётся их все переделать
для v0 сделали режим Design Mode, чтобы править параметры в UI без залезания в код (пока поддерживается Tailwind и shadcn/ui)
в Chromium 138, Firefox 140 и Safari 26 Beta изменится принцип декодирования символов < и > в атрибутах элемента с помощью методов innerHTML и outerHTML

<div data-content="<u>hello</u>"></div>

div.outerHTML;
// раньше было <div data-content="<u>hello</u>"></div>
// теперь будет <div data-content="&lt;u&gt;hello&lt;/u&gt;"></div>

вышел Biome v2:
- линтинг типов теперь не завязан на tsc
- поддержаны вложенные конфиги
- для того, чтобы линтинг мог завязываться не только на один файл, выпущен специальный сканер файлов, который находит вложенные конфиги и индексирует файлы
- появилась первая ограниченная поддержка плагинов и HTML-форматтер
в редакторе Zed появился встроенный Debugger (имплементирован Debug Adapter Protocol (DAP))
вышла H3 v2 beta: быстрый сервер, который работает в разных райнтаймах (Node.js, Deno, Bun), но при этом основывается на стандартных API вроде Request, Response, URL и Headers

Проекты

eslint-plugin-eslint-comments — плагин для ESLint, который линтит комменты ESLint, чтобы, например, запретить выключение правил линтинга

Статьи, мнения, туториалы

JS/TS

как сейчас дела в React и экосистеме билд-тулов и фреймворков: по скачиваниям Vite-плагин растёт и догоняет Next, а CRA после депрейката расти перестал; среди остальных React-специфичных фреймворков больше всего скачиваний у React Router, а Astro, Expo и Gatsby существенно отстают
import-maps изначально не позволяли загружать любые модули до загрузки самого import-map-а, а также всего на страницу мог быть только один import-map: это ограничение усложнило применение технологии у инженеров Shopify и они совместно с вендорами браузеров проработали изменение в спецификации и внедрили в Chromium и WebKit; теперь import-map-ов может быть несколько, и они мерджатся в один, а также любой модуль может загружаться до или после загрузки самого map-а
утилитарный тип Prettify, которого пока нет в стандартной поставке TS, улучшает читаемость «сборных» типов:

type Prettify<T> = {
  [K in keyof T]: T[K];
} & {};

юзкейсы top-level await в браузере и Node.js:
- запрос конфига на старте приложения const config = await fetch('/config.json')
- динамический импорт другого модуля const dbDriver = await import('./drivers/postgres.js')
- ожидание инициализации (в момент выполнения top-level await выполнение модуля становится на паузу)
обзёрверы в JS (ResizeObserver, MutationObserver…) имеют примерное одинаковое API (и одинаково не очень удобное), поэтому автор предлагает использовать функцию-обёртку, которая принимает DOM-элемент и коллбек на вход, инкапсулирует создание обзёрвера и возвращает функции unobserve и disconnect

CSS

пока встроенная функция нахождения контрастного цвета текста contrast-color() ещё нигде не работает, можно использовать математическую магию:

{
	color:
    color(
      from var(--color) xyz
      round(up, min(1, max(0, 0.18 - y)))
      round(up, min(1, max(0, 0.18 - y)))
      round(up, min(1, max(0, 0.18 - y)))
    );
}

в комбинированных анимациях, где используются scale и translate одновременно, важен порядок написания свойств: если scale писать перед translate, то тогда translate будет выполняться неравномерно, так как scale будет «умножать» значения translate
есть такая функция filter() (не путать со свойством filter), которая позволяет создать комбинированный фильтр, например, из градиента и SVG; всё бы хорошо, но она работает только в Safari, а если хочется кроссбраузерно сделать на градиентной картинке, к примеру, зернёный фильтр, то нужно отдельно задать всему блоку свойство filter и градиент наслоить на зерно

HTML

чеклист для проверки правильности синтаксиса респонсив-изображений (srcset, sizes) с примерами правильно/неправильно

Платформа

квиз с 32 ситуациями, с которыми вы уже сталкивались или ещё столкнётесь в своей карьере фронтендера: выполнение всех пунктов сделает вас почтенным пенсионером разработки

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

Fri, 27 Jun 2025 00:00:00 GMT

Новости

вышел Chrome 138:
- появились функции sibling-index() и sibling-count(), которые возвращают индекс элемента среди собратьев и общее число детей
- значение stretch (префиксная версия -webkit-fill-available)
- математические функции abs(), sign(), progress()
- группа встроенных AI-API: Translator API, Language Detector API, Summarizer API
- эскейп символов < и > в значениях атрибутов DOM-нод
выпущен Firefox 140:
- в браузере появились вертикальные табы на боковой панели (также можно вручную выгружать табы из памяти)
- поддержан CookieStore API и Custom Highlight API, теперь есть во всех браузерах!
- вслед за Chrome тоже теперь эскейпируют символы < и > в атрибутах и применяют сквозные стили по умолчанию к h1
в Astro 5.10:
- появились live-контентные коллекции, которые извлекаются в рантайме вместо билд-тайма
- стабилизированы встроенные респонсив-картинки
в Prettier 3.6:
- под флагом вышел новый CLI
- зарелижены плагины @prettier/plugin-oxc и @prettier/plugin-hermes
вышел Vite 7.0, в котором дропнута поддержка Node.js 18 и изменены дефолтные таргет-версии браузеров
выпустили SVGO v4.0.0:
- дропнули поддержку Node.js 14
- появились новые дефолтные плагины
- теперь поставляется в виде dual-пакета: ESM + CJS

Проекты

syntax-highlight-element — а вот подъехал и веб-компонент для подсветки синтаксиса на свежеподдержаном Custom Highlight API
sonda — универсальный визуализатор и анализатор JS и CSS-бандлов, совместимый с основными сборщиками и фреймворками
kelp — новый CSS-фреймворк в 2025 наверное звучит уже иронично, использовать его вы вряд ли будете, но покопать для нахождения интересных фишек никогда нелишне, например, селектор :where(:root) или слоистая структура отдельных модулей CSS

Статьи, мнения, туториалы

JS/TS

очередная история про уменьшение раздутого бандла; если вы сталкиваетесь с такой же проблемой:
- проверьте, хорошо ли работает тришейкинг: возможно придётся убрать barrel-импорты, где-то вручную добавить магический коммент /* #__PURE__ */ и настроить секцию sideEffects в package.json
- смените таргет-версию ES хотя бы до es2022
- обновите зависимости
наверняка вы сталкивались с ситуацией в TS, когда из-за ветки проверки ключей Map или индексов массивов в тип значения добавляется undefined, например, undefined | string, из-за этого приходится дополнительно явно проверять значение на undefined либо ещё вариант пропатчить тип метода has() у Map или же просто проставить ! там, где вы точно уверены в результате
комитет одобрил ES2025, что нового появилось в языке:
- Import attributes with { type: 'json' }
- Iterator helper methods (filter, map, find…)
- новые методы Set()
- RegExp.escape()
- Promise.try()

CSS

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

Платформа

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

Проблемы во фронтовых проектах и их решения

Fri, 21 Nov 2025 00:00:00 GMT

Подсобрал список типовых проблем и их решений, с которыми неизбежно сталкиваются разросшиеся фронтовые монорепы или семейства проектов, если заранее не позаботиться о решениях.

⚠️ Неудобная локальная разработка, зоопарк технологий/подходов, сложно вкатываться в существующие проекты.

Решения:

Переход на единую типовую сборку (Vite, Webpack…) с общим конфигом, общий инструментарий для монореп (workspaces, turbo, lerna…).
Создание единого шаблона для старта нового приложения.
Выработка единообразного стека:
1. система: node/bun, TS, фреймворк (React, Vue, Next…)
2. зависимости:
  - пакетный менеджер (yarn/npm/pnpm, для консистентности лок-файлов)
  - стейт-менеджер (или его отсутствие => Tanstack Query)
  - роутер
  - инструменты для работы с формами (хуки, валидация, маски для инпутов…) и валидатор схем
  - стилизация (CSS Modules, SASS, Styled-подобные, ваниль), использование единообразного UI-kit (Storybook)
  - утилиты (работа с датами, общие либы типа lodash)
Процесс регулярных обновлений зависимостей.
Единообразная структура проекта/проектов, приведение к единому виду (FSD…).
Архитектурные соглашения по выносу шаренных кусочков в микрофронты, связь между «отдельными кусочками» приложений в рамках общих приложений.
Общий/стандартизированный CI/CD.
Общий подход к проксированию запросов на бэк, к развёртыванию проекта локально.
Общий код-стайл и линтинг (ESLint, Prettier, Biome…).
Общий подход к логированию аналитики.

⚠️ Долгая разработка, необходимость частых ресерчей

Решения:

Централизованное внедрение AI-инструментов для помощи в написании кода (выбор единых агентов, генерация вспомогательных артефактов типа claude.md)
Создание бойлерплейта для документации и внедрение AI-генерации документации. Хранение документации в самих проектах и регулярная перегенерация.

⚠️ Дублирования кода, велосипеды

Решение:

Вынос повторяющихся пакетов в шареное хранилище переиспользуемых решений, хостинг в приватном npm-реестре, поддержка.

⚠️ Большое количество багов, уязвимостей и неконтролируемый/плохой перф и UX

Решения:

Внедрение мониторинга ошибок (Sentry), настройка алертов в чаты/дашбордов на ошибки (Grafana).
Подключение измерения метрик перфа в рантайме у пользователей (Vitals, TTVC и подобные), а также на CI/CD («бюджет» на перф в пулреквестах).
Интеграция в CI/CD инструментов для поиска уязвимостей в коде.
Процесс регулярного пополнения и разгребания бэклога техдолга (баги, уязвимости, оптимизации).
Внедрение среды для тестов/автотестов, написание/генерация юнит-тестов и e2e-тестов, регрессионное тестирование, запуск на CI/CD.
Выработка плавил работы со статикой (картинки на CDN, автоматизированное сжатие, ленивая загрузка).

⚠️ Несогласованная командная работа

Решения:

Использование контрактов (Open API) на бэке/фронте, кодогенерации типов и API-клиентов, клиент-серверных фреймворков (trpc).
Внедрение автоматизации в код-ревью (автоназначение ревьюеров, выработка правил мерджа в master, AI-генерация описаний пулреквестов и ревью).
Договорённости в единообразном именовании коммитов (conventional commits), веток, пулреквестов; единые подходы к организации дев/стейдж/релиз-веток; семантическое версионирование релизов.

Про микрофронты на коленке. Iframe

Wed, 03 Dec 2025 00:00:00 GMT

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

Как это работает: по определённому адресу хостится мини-приложение, например, по урлу example.com/header грузится общее приложение хедера для всех возможных хост-сред. Во все хост-приложения хедер встраивается через iframe:

<iframe src="/header"></iframe>

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

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

window.parent.postMessage — отправляет сообщение изнутри фрейма наружу, в родителя.

iframe.contentWindow.postMessage — отправляет сообщение снаружи, от родителя, внутрь фрейма.

Получаются отправленные события подпиской на message (как изнутри iframe, так и в родительском приложении снаружи):

parent.html:

<iframe id="myFrame" src="/child"></iframe>

<script>
const iframe = document.getElementById('myFrame');

// Отправка сообщения во фрейм
iframe.addEventListener('load', () => {
    iframe.contentWindow.postMessage({ type: 'fromParent', payload: 'Привет!' }, '*');
});

// Получение сообщения от фрейма
window.addEventListener('message', (event) => {
    if (event.data.type === 'fromChild') {
        console.log('Получено от фрейма:', event.data.payload);
    }
});
</script>

child.html:

<script>
// Отправка сообщения родителю
window.parent.postMessage({ type: 'fromChild', payload: 'Ответ!' }, '*');

// Получение сообщения от родителя
window.addEventListener('message', (event) => {
    if (event.data.type === 'fromParent') {
        console.log('Получено от родителя:', event.data.payload);
    }
});
</script>

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

Также помимо общения через postMessage шаринг данных между контекстами можно построить на Broadcast Channel API или Channel Messaging API.

Broadcast Channel обеспечивает широковещательную связь между всеми контекстами одного origin, а Channel Messaging создает секьюрный двусторонний канал связи между двумя конкретными контекстами.

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

В случае с Broadcast Channel надо как-то пошарить между потребителями созданный объект самого канала:

// Создание канала
const bc = new BroadcastChannel("test_channel");

// Отправка сообщения в канал
bc.postMessage("This is a test message.");

// Приём сообщения
bc.onmessage = (event) => {
  console.log(event);
};

В случае с Channel Messaging параметры для связи двух контекстов передаются в доп параметрах postMessage:

main-page:

const channel = new MessageChannel();
const port1 = channel.port1;

// Подписка на загрузку iframe
iframe.addEventListener("load", onLoad);

function onLoad() {
  // Слушание входящих сообщений на port1
  port1.onmessage = onMessage;
  
  // Отправка исходящего сообщения на port1
  port1.postMessage(input.value);

  // Отправка port2 в iframe
  iframe.contentWindow.postMessage("init", "*", [channel.port2]);
}

// Обработка сообщений на port1
function onMessage(e) {
  console.log(e.data);
}

child-page:

let port2;

// Слушание события инициализации
window.addEventListener("message", initPort);

// Настройка порта
function initPort(e) {
  port2 = e.ports[0];
  port2.onmessage = onMessage;
}

// Обработка сообщений на port2
function onMessage(e) {
  port2.postMessage(`Message received by IFrame: "${e.data}"`);
}

Отдельно отмечу наличие атрибута loading=lazy у iframe. Это чтобы не подгружать те iframe, которые находятся вне вьюпорта, для экономии ресурсов.

Также дополнительно подсвечу, что в хромиум-браузерах все iframe на одном домене будут обрабатываться в одном потоке, то есть могут потенциально блокировать друг друга, даже если не блокируют родителя (лайфхак: если нет нужды держать их на одном домене, то выносом на другой домен можно «распараллелить потоки»).

Время пробовать pnpm?

Wed, 14 Jan 2026 00:00:00 GMT

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

А теперь как-то реально попроще со всем этим стало: узнаёшь, сразу пробуешь, профит (наверное это можно назвать таблеткой от FOMO, правда хоть это и купирует приступы, но провоцирует повторные 😁).

Возможно на такой волне стоит присмотреться и к остальной экосистеме. Например, вот в pnpm подвели итоги прошлого года. В v10 много всего интересного.

Самое важное — pnpm перестал доверять всем пакетам. Раньше pnpm install давал любому пакету в дереве зависимостей запускать произвольный код (preinstall, postinstall). Это само собой создавало вектор атак через supply chain.

В v10 lifecycle scripts блокируются по умолчанию. Никакого preinstall/postinstall без явного разрешения.

allowBuilds:
  esbuild: true
  nx@21.6.4: true

Ещё одна фишка pnpm — content-addressable store (дедупликация файлов). В v10.12 сделали ещё шаг дальше — глобальное виртуальное хранилище.

pnpm-workspace.yaml
enableGlobalVirtualStore: true

Раньше каждый проект имел свой node_modules. Теперь общие зависимости линкуются один раз глобально. А это:

Экономия диска — одинаковые графы зависимостей шарятся между проектами.
Быстрые установки — если 10 проектов используют react@19, pnpm линкует его один раз из глобального хранилища на машине.

Для монорепозиториев и сложных настроек есть конфиги зависимостей. Это позволяет шарить конфиги pnpm (хуки, патчи, разрешения на билды) между проектами.

Конфиги зависимостей устанавливаются в node_modules/.pnpm-config до основного графа зависимостей.

# pnpm-workspace.yaml
configDependencies:
  pnpm-plugin-my-company: "1.0.0+sha512-..."

Это помогает шарить .pnpmfile.cjs хуки между репозиториями, централизовать патчи для patchedDependencies, поддерживать список пакетов, которым разрешено запускать build скрипты.

Кроме того, pnpm давно умеет переключать версию Node.js для рантайма (не нужен nvm). В 2025 добавили Deno и Bun.

// package.json
{
  "devEngines": {
    "runtime": {
      "name": "node",
      "version": "24.6.0"
    }
  }
}

Pnpm сам скачает и будет использовать указанную версию для скриптов.

Поддержка JSR — тоже прикольно, но пока что не особо актуально, как я вижу.

Кроме того, ещё от себя добавлю, что в pnpm есть catalogs-алиасы (чтобы один раз в конфиге объявить набор зависимостей), workspaces (для организации монореп), возможность патчить зависимости (pnpm patch) и проверять их на актуальность (pnpm outdated)

CSS и HTML фичи в Baseline 2025

Wed, 04 Feb 2026 00:00:00 GMT

В прошлом году (+ в январе 2026) довольно много платформенных фич достигли статуса Baseline Widely Available — это значит, что они поддерживаются во всех основных браузерах уже 30 месяцев! А это повод ~~бескомпромиссно тащить их в прод~~ проверить аналитику по пользовательским устройствам и браузерам в вашем проекте (скорее всего ваши пользователи уже обзавелись браузером, которые эти фичи поддерживают).

Собрал списком все фичи с кратким описанием и моими комментами к их использованию.

CSS

Container Queries — применение стилей на основе размеров родительского контейнера, а не viewport. Позволяет создавать адаптивные компоненты, которые реагируют на свой контейнер.

.card {
  container-type: inline-size;
}

@container (min-width: 300px) {
  .card { background-color: lightblue; }
}

Мнение: 5 из 5, но требует перестроить майндсет в целом при работе с UI (то есть не только вам как разработчику, но ещё из дизайнеру). Хорошо ложится на UI-киты и разработку изолированных компонентов.

Individual Transform Properties — отдельные свойства translate, scale, rotate вместо одного transform. Упрощает анимации и улучшает читаемость кода.

.element {
  translate: 20px 10px;
  scale: 0.8;
  rotate: 90deg;
}

Мнение: 3 из 5, приятный сахар, помогает сократить повторящийся код при написании трансформов, легко внедрить.

Motion Path — анимация элементов вдоль заданного пути с помощью offset-path.

.element {
  offset-path: path('M10 10 L 100 100');
  animation: move 2s linear infinite;
}

Мнение: 2 из 5, специфичная, но прикольная фича, но если появится подходящая задача и вовремя вспомнить, можно избежать использования JS для анимации движения элемента по траектории.

Grid Animation — анимация свойств grid-template-columns и grid-template-rows.

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  transition: grid-template-columns 0.3s;
}
.grid:hover {
  grid-template-columns: 1fr 2fr;
}

Мнение: 2 из 5, в целом прикольная фича для разъезжающихся динамических лейаутов, но применимость нечастая.

animation-composition — выбор способа комбинирования анимаций, влияющих на одно свойство.

.element {
  animation-composition: add; /* replace, add, accumulate */
}

Мнение: 2 из 5, если делаете руками CSS-анимации, может пригодиться, иначе не будет полезно.

color-mix() — смешивание двух цветов в заданном цветовом пространстве. Полезно для создания светлых/тёмных оттенков.

.element {
  background: color-mix(in srgb, red 50%, white 50%);
}

Мнение: 4 из 5, чрезвычайно мощная штука, если настраиваете собственную дизайн-систему, стайлгайд или UI-кит в проекте.

color() — выбор цвета из указанного цветового пространства. Поддерживает wide-gamut пространства вроде display-p3 для более насыщенных цветов.

.element {
  color: color(display-p3 0.5 0.2 0.8);
}

Мнение: 4 из 5, аналогично мнению про color-mix()

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

Oklab и OkLCh — цветовые пространства, разработанные для лучшего соответствия человеческому восприятию цвета. OkLCh — полярный вариант Oklab.

.element {
  color: lab(50% 20 -30);
  background: lch(60% 50 150);
  color: oklab(0.5 0.2 -0.1);
  background: oklch(0.6 0.5 120);
}

Мнение: 4 из 5, формат oklch может также пригодиться для гибкой настройки цветовой палитры и её производных в проекте.

Small, Large, Dynamic Viewport Units — единицы dvh, svh, lvh для учёта UI мобильных браузеров. sv* — минимальный размер, lv* — максимальный, dv* — динамический.

.element {
  height: 100svh; /* 100% минимального viewport height */
  width: 100dvw;  /* 100% динамического viewport width */
}

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

Two-value display property — свойство display теперь принимает два значения для явного указания внешнего и внутреннего режима layouts. Например, inline flex или block flow.

.card {
  display: inline flex;
}
.container {
  display: block flow;
}

Мнение: 2 из 5, любопытно, но не более.

overflow: clip — обрезка содержимого без создания скроллов, с возможностью обрезки только по одной стороне

.nav-bar {
  overflow-x: clip;
  overflow-y: visible;
}

Мнение: 4 из 5, полезно, если нужно включить скролл по одно стороне + также это значение overflow, в котром не создаётся новый formatting context.

overscroll-behavior — управление поведением при прокрутке за границы.

.container {
  overscroll-behavior: contain;
}

Мнение: 4 из 5, очень узкоспециализированная фича, но может быть крайне полезна для управлением мульти-скроллом.

outline — свойства для стилизации линии вокруг элемента вне border, не влияющие на layout.

.element {
  outline: 2px dashed red;
  outline-offset: 5px;
}

Мнение: 3 из 5, фича-то старая, но был баг в Safari, который починили в 03.2023.

:nth-child() of <selector> — более точный выбор элементов с фильтром по селектору.

li:nth-child(odd of .active) {
  background: yellow;
}

Мнение: 4 из 5, прикольная штука для условной стилизации, полезно помнить перед реализацией на JS.

Media Query Range Syntax — новый синтаксис для медиа-запросов с диапазонами.

@media (400px <= width <= 800px) {
  /* стили */
}

Мнение: 4 из 5, синтаксический сахар, нравится, что наконец не нужно каждый раз вспоминать и перебирать варианты min/max-width.

Resolution Media Query — медиа-запрос для применения стилей на основе плотности пикселей устройства.

@media (min-resolution: 2dppx) {
  /* стили для high-DPI экранов */
}

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

Trigonometric Functions — sin(), cos(), tan() в CSS для математических вычислений.

.element {
  transform: rotate(calc(sin(45deg) * 1turn));
}

Мнение: 2 из 5, любопытно, но слишком хардкорно, малоприменимо в реальной жизни.

calc() Keywords — математические константы e, pi, infinity, NaN в CSS math функциях.

.element {
  font-size: calc(var(--base-size) * pi);
  height: calc(100vh * sin(pi / 2));
}

Мнение: 1 из 5, не могу придумать, где это применить.

font-palette — выбор цветовой палитры из шрифта, с возможностью переопределения отдельных цветов через @font-palette-values.

.element {
  font-palette: alternate;
}

Мнение: 1 из 5, малополезная фича, применимая только для "цветных" шрифтов, не стоит внимания

Style Containment и Inline-size Containment — изоляция стилей элемента. style ограничивает расчёт счётчиков и кавычек внутри элемента, а inline-size предотвращает установку inline-размеров элемента его содержимым, ускоряя рендеринг.

.widget {
  contain: style;
}

.container {
  contain: inline-size;
}

Мнение: 1 из 5, мелкие малополезные фичи, style может пригодиться разве что в нестандартных нумерованных списках; inline-size, могу только в теории представить, что может быть полезно в разного рода wysiwyg-ах.

HTML / DOM

inert — атрибут для отключения элементов от взаимодействия и accessibility tree. Элементы не получают фокус и не реагируют на клики.

<div inert>
  <button>Неактивная кнопка</button>
</div>

Мнение: 3 из 5, мощная и простая фича, хороший юзкейс для ограничения пределов фокуса при показе модальных окон: модалка работает, body под ней за inert-ом.

Playwright CLI

Mon, 09 Feb 2026 00:00:00 GMT

Тут вышел https://github.com/microsoft/playwright-cli, более эргономичный, чем MCP, способ запускать ботом безголового playwright для выполнения действий в браузере.

Да, собственно, не обязательно ботом, можно просто в рамках CLI-API написать скрипт для автоматизации действия в браузере:

playwright-cli open https://demo.playwright.dev/todomvc/ --headed
playwright-cli type "Buy groceries"
playwright-cli press Enter
playwright-cli type "Water flowers"
playwright-cli press Enter
playwright-cli check e21
playwright-cli check e35
playwright-cli screenshot

Вот эти вот e21 и e35 — это наименования DOM-нод в открытом сайте. Командой open сайт открывается и записывается его снепшот в виде yaml-файла. Каждая нода помечается своим айдишником.

По необходимости можно вызывать playwright "с головой":

playwright-cli open https://playwright.dev --headed

Для ботов прописаны доки для выполнения рутинных задач:

Request mocking — перехват и мок запросов
Running Playwright code — выполнение playwright-скриптов
Browser session management — управление браузерными сессиями
Storage state (cookies, localStorage) — запись и чтение из браузерного хранилища
Test generation — генерация тестов после взаимодействия с сайтом
Tracing — запись трейсов
Video recording — запись видео

react-best-practices

Fri, 16 Jan 2026 00:00:00 GMT

Тут Vercel подогнали ~~мозгов для ваших frontend-агентов~~ набор бестпрактисов и антипаттернов по React, можно установить в виде скиллов в ваш любимый агент или просто почитать. Темы, рассматриваемые внутри: устранение вотерфоллов, оптимизация размера бандла, SSR, дата-фетчинг на клиенте (жаль, что без tanstack, а только swr), оптимизация ререндеров, перфоманс рендеринга и JS, а также ещё немного мелочей.

npm lifecycle scripts

Mon, 16 Feb 2026 00:00:00 GMT

TIL, что в npm есть lifecycle scripts. Перед и после стандартных команд типа dev, build, test есть "хуки", на которые можно подцепить нужные дополнительные команды.

Добавляете в package.json скрипт с префиксом pre или post — npm запустит их с соответствующем порядке:

{
  "scripts": {
    "build:client": "node esbuild.client.mjs",
    "predev": "npm run build:client"
    "dev": "tsx src/server/index.ts",
  }
}

Сначала predev соберёт клиент, dev → запустит сервер.

Полезно, когда перед запуском надо что-то подготовить — собрать ассеты, проверить типы, создать папки.

Что можно с этим сделать:

prepublishOnly — проверки перед публикацией пакета в npm
prebuild — генерация кода или очистка папки dist
postinstall — автоматические действия после npm install

Подробнее: docs.npmjs.com/cli/v10/using-npm/scripts

End-to-end разработчик

Sun, 01 Mar 2026 00:00:00 GMT

Деление на фронтенд и бэкенд никогда не было про технику. Это было больше про бизнес-процессы и найм: в индустрии удобнее искать заменяемых специалистов на узкий скоуп. Фронтендер имплементит "клиентскую" логику, бэкендер — API и "серверную" логику. Но по сути это единое целое и деление, если посмотреть свежим взглядом, весьма условное. Я прекрасно помню времена, когда фреймворки не затачивались конкретно на фронт/бэк, а были про веб-разработку проекта целиком.

И сейчас это деление начинает терять смысл. ИИшки привносят собой инфляцию ценности навыков (и стоимости строк кода). Уметь писать код стоит меньше, чем год назад. И будет стоить ещё меньше через год. Причём стоит меньше и в деньгах, и в самой ценности навыка: знания становятся все более и более общедоступны и легкодоступны, и само понятие конкретного навыка — это теперь не что-то труднодостигаемое и "выстрадываемое" потом и кровью.

Приходит эпоха полнофункционального разработчика (олды тут? привет, вебмастера). Это как бы «фуллстек» в старом понимании (например, в связке React + Node) + одновременно, который понимает систему целиком от и до, может и обозревать верхнеуровнево, и "зумиться" до детальной имплементации, настраивает инфраструктуру, валидирует, что и как система делает, а главное — следит, как система соотносится бизнесом, насколько качественно решает его проблемы. End-to-end-разработчик.

Карьерный путь становится короче и интенсивнее. "Junior" в привычном смысле исчезает — вместо него "junior senior": человек приходит уже с наработанным опытом через пет-проекты, симуляционные окружения. С образованием вообще всё просто небывало круто. Как никогда раньше обучение может быть безостановочным процессом и не привязанным к конкретному обучающему вендору — селф-обучение выходит на первый план, а бизнесы напрямую предоставляют свою инфру для специализации в нужном контексте.

Реагировать на происходящее можно по-разному. Отрицать, игнорировать, плыть по течению или против. Но если хочется сохранить привычные заработки и скорость их роста, в обозримом будущем все пути ведут к тому, чтобы брать на себя бо́льшую ответственность. Для разработчика это или уходить в пипл-менеджмент, или же расширять и углублять технику. Я за свою карьеру два раза проходит цикл "разраб -> тимлид -> разраб" и понял, что не хочу закапываться в менеджмент дальше. Поэтому сейчас отзываясь на вызовы нового времени выбираю второе.

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

Думаю, это также отразится и на содержании блога.

Stay tuned!

Визуальное регрессионное тестирование в Docker

Tue, 17 Mar 2026 00:00:00 GMT

В нескольких проектах, где я работал, пробовали внедрить скриншот-тестирование компонентов. Принцип работы такой:

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

Такие тесты хорошо подходят для теста вёрстки элементов ui-kit-а (многочисленные состояниях ховера, фокуса, разные режимы компонента) или же каких-то критичных компонентов (форма логина, чекаут), которые никак нельзя случайно поломать.

Снепшотные тесты, юниты, e2e тут не помогут, нужно именно сравнение скринов. Звучит хорошо, но есть одно НО. Во всех случаях на моей практике дело упиралось в то, что скриншоты снимаются разными разработчиками на разных машинах с разными ОС. И в зависимости от этого скриншоты начинают расходиться. Шрифты другие. Субпиксельный рендеринг другой. Антиалиасинг другой. Также отличаются элементы форм. MacOS рендерит шрифты и формы иначе, чем Ubuntu. И тест падает, хотя визуально всё ок. Вместо помощи тесты начинают мешать и бесить.

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

И тут изучая Docker открыл для себя идеально подходящую под кейс фичу! Через Docker можно связать файловую систему хоста (ваша машина) с файловой системой запущенного контейнера. То есть храним скрины по прежнему в репо (развёрнутом у каждого разработчика), монтируем папку с ними внутрь Docker-контейнера, снимаем скриншоты, сравниваем, при необходимости обновляем. Внутри контейнера один и тот же образ с фиксированной ОС, фиксированной версией браузера, фиксированными шрифтами. И соотвественно таким же макаром запускается в CI.

Собрал пруф оф концепт — github.com/juwain/playwright-docker-screenshot-testing.

Что там вкратце, происходит: Storybook изолирует компоненты, Playwright делает скриншоты, Docker обеспечивает одинаковый рендеринг.

Оркестрация через docker-compose.yml (именно там указывается, какие локальные папки монтируются в контейнер):

services:
  visual-tests:
    build: .
    volumes:
      # Persist screenshots - accessible from host
      - ./__screenshots__:/app/__screenshots__
      # HTML report for visual diff
      - ./html-report:/app/html-report
      # Test results (traces, screenshots on failure)
      - ./test-results:/app/test-results
      # Source files for quick iteration (read-only)
      - ./src:/app/src:ro
    environment:
      - CI=true
    command: sh -c "npm run storybook -- --host 0.0.0.0 & sleep 15 && npx playwright test --project=visual"

Docker-образ с Playwright официальный от Microsoft уже содержит браузеры и все зависимости.

FROM mcr.microsoft.com/playwright:v1.48.0-noble

Каждый визуальный тест — это три действия: открыть стори, дождаться рендера, сравнить скриншот. Storybook рендерит в статическом режиме каждый отдельный компонент по адресу /iframe.html?id=${storyId}&viewMode=story, ждём пока загрузятся картинки и шрифты, можно снимать скриншот Playwright-ом и сравнивать тоже им.

Пример теста кнопки:

test.describe('Button', () => {
  test('hover', async ({ page }) => {
    const component = await gotoStory(page, 'design-system-button--primary');
    const button = component.locator('button.button').first();
    await button.hover();
    await expect(component).toHaveScreenshot();
  });
});

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

toHaveScreenshot: {
  maxDiffPixels: 100,
  animations: "disabled",
  caret: "hide",
},

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

Отдельными cli-командами скрины апрувятся и обновляются.

{
  "scripts": {
    "test:visual": "docker compose up --build",
    "test:visual:update": "playwright test --project=visual --update-snapshots",
    "test:visual:approve": "playwright test --project=visual --last-failed --update-snapshots",
    "test:visual:report": "playwright show-report html-report"
  }
}

Как superset.sh привёл меня к собственной теме для Zed

Thu, 30 Apr 2026 00:00:00 GMT

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

Не хватает ещё одного измерения: горизонтально — вкладки внутри одного проекта, вертикально — сами проекты.

Потом узнал про superset.sh, и он мне зашёл. Получается такой 2D-терминал: слева список проектов, внутри каждого свои табы.

Параллельно с увеличением количества времени проводимого в терминале меняется и роль редактора кода. Если раньше IDE была главным рабочим местом, то в агентоцентричной разработке "редактор" больше нужен для просмотра diff, точечных правок и удобной навигации по файлам.

У меня эту роль уже около года выполняет Zed: быстрый, легковесный и менее прожорливый по ресурсам, чем VS Code.

Теперь про смену контекста между режимом "терминала" и "редактора".

В superset.sh мне очень понравилась тёмная тема по умолчанию, а при переходе в Zed была другая тёмная тема, о которую спотыкается глаз, когда много раз за день прыгаешь между "менеджером терминалов" и "редактором для проверки изменений".

В общем, я собрал тему для Zed на основе темы superset. В целом, нужно было экспортнуть тему из superset и сопоставить с токенами темы в Zed.

Так как это всё таки немного разные контексты, пришлось подтюнить тему в течение нескольких недель, пока окончательно не привык.

В СПБ сейчас начинаются белые ночи, поэтому больше счас сижу в светлой теме днём (на основной работе) и в тёмной после заката (на пет-проектах).

Тему для Zed я опубликовал здесь github.com/juwain/superset-zed-theme.