Важность тестирования сайтов на слабых устройствах

Эрик Бейли призывает тестировать сайты на слабых устройствах — "Test Your Product on a Crappy Laptop".

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

Чтобы контролировать доступность сайта для всех категорий устройств, Эрик предлагает проводить регулярные юзабилити-тесты на слабых устройствах. Также он предлагает купить дешёвый ноутбук (crapbook) и периодически вести на нём разработку.

У меня есть небольшая история на эту тему. Как-то мне пришлось работать на слабом ноуте, благодаря этому я нашёл редкую проблему с перформансом в React DevTools. Если бы работал на мощном ноуте, то проблема осталась бы незамеченной.

#performance #mobile

https://css-tricks.com/test-your-product-on-a-crappy-laptop/

Топ-10 статей 2021 года

Всех с наступающим Новым Годом! Хочу подвести итоги уходящего года подборкой наиболее интересных статей, опубликованных в 2021 году.

— Не пишите квадраты — Степан Забушев критикует современные идиомы программирования в JavaScript

— Как Google Closure Compiler помог в разработке TypeScript — Люк Хобан про историю появления TypeScript

— CORS — история появления и нюансы использования — Джек Арчибальд объясняет работу CORS с помощью интерактивных примеров

— Использование базы данных SQLite на статическом сайте — Phiresky рассказывает про уникальный подход к работе с базой данных на статических сайтах

— Разрыв в производительности на мобильных устройствах — Алекс Рассел рассказывает о причинах плохой производительности сайтов

— Как читать спецификации web-стандартов — Эмили Старк делится советами по эффективному чтению стандартов

— Пара слов о @layer — София Валитова про новый CSS-стандарт, упрощающий работу с каскадом

— Руководство по оптимизации метрик Web Vitals — Барри Поллард рассказывает про оптимизацию метрик Web Vitals

— Как уменьшить размер node_modules — Кристоф Наказава делится советами по уменьшению размера зависимостей

— Изменение размеров изображения с учётом его содержимого в JavaScript — Алексей Трехлеб в интерактивной статье рассказывает про алгоритм Seam Carving

Возможно, вам не нужен Rust и WASM, если у вас есть JavaScript

Увидел в канале @ufostation ссылку на статью Вячеслава Егорова про анализ проблем производительности библиотеки source-map — "Maybe you don't need Rust and WASM to speed up your JS".

Авторы source-map переписали основную логику библиотеки на Rust и WebAssembly, чтобы улучшить производительность. Егор решил проверить оригинальный код на предмет возможных оптимизаций. Там были найдены и исправлены проблемы, связанные с неоптимальной сортировкой, была уменьшена нагрузка на сборщик мусора заменой большого числа объектов типизированным массивом с ссылками на нужные данные, была испралвена проблема с деоптимизацией кода, связанной с передачей двух аргументов в функцию, которая ожидает на вход три аргумента.

В результате всех оптимизаций JavaScript-код стал уступать по скорости Rust и WebAssembly всего лишь на 15%.

Крутая статья. Рекомендую почитать всем.

#performance #js #internals #webassembly #rust

https://mrale.ph/blog/2018/02/03/maybe-you-dont-need-rust-to-speed-up-your-js.html
https://habr.com/ru/post/350018/ (перевод на русский)

За прошедшие две недели в канале для патронов Defront было опубликовано двенадцать постов:

— Гриды для раскладок, флексы для компонентов
— Миграция плейера asciinema на Solid.js и Rust
— Лог жизни за десять лет
— Изображения и блокирование перехода в ждущий режим
— Советы начинающим программистам
— Ликвидация редиректов
— Уменьшение зависимости от псевдоэлементов
— Типизация JSON.parse(JSON.stringify(x))
— Различия между SLO, SLA и SLI
— Как справляться с неудачами и ошибками
— Анализ взаимосвязи JavaScript-ошибок и производительности
— Адаптация HTML для режима чтения

Становитесь патроном канала на Patreon, чтобы получить доступ в Defront Plus (более 320 уникальных постов). Все донаты идут на поддержку канала, покупку еды, аренду квартиры, оплату медицинских услуг и т.п.

Спасибо всем, кто читает и поддерживает Defront!

https://www.patreon.com/myshov

Анализ производительности HTTP/3

В блоге requestmetrics была опубликована статья, посвящённая анализу производительности HTTP/3 — "HTTP/3 is Fast".

HTTP/3 — это новая версия протокола HTTP, работающая поверх транспортного протокола QUIC. Более подробно про HTTP/3 можно почитать в публикации HTTP/3: the past, the present, and the future.

В этой же статье проверялась скорость загрузки трёх видов сайтов: простой сайт, тяжёлый сайт, SPA. Ресурсы загружались с трёх разных серверов в Нью-Йорке, Лондоне и Бангалоре. Чем больше было расстояние, тем лучше всего показывал себя HTTP/3. Если для передачи данных между Миннесотой и Нью-Йорком выигрыш скорости составил более 200 мс, то для соединения между Миннесотой и Бангалором выигрыш был уже 3-4 секунды. Такой значительный разрыв в скорости загрузки объясняется тем, что в HTTP/3 решена проблема с “head-of-line blocking” — блокировкой передачи данных во время потери пакетов.

#http #performance #benchmark

https://requestmetrics.com/web-performance/http3-is-fast

Self-Profiling API на практике

Ник Джансма написал статью про новое экспериментальное API для профилировки производительности сайтов на устройствах пользователей — "JS Self-Profiling API In Practice".

Self-Profiling API предоставляет программный доступ к семплирующему профилировщику для получения детальной информации о выполнении JavaScript-кода у пользователей сайта. API можно использовать как для анализа производительности кода сайта, так и для анализа производительности скриптов внешних сервисов. Проанализировать выполнение кода можно на любом этапе жизни страницы. Доступ к Self-Profiling API включается с помощью HTTP-заголовка Document-Policy: js-profiling. Оно оказывает минимальный эффект на производительность сайта у пользователей.

Несмотря на экспериментальный статус Facebook и Microsoft уже начали использовать Self-Profiling API в своих сервисах для поиска проблем производительности.

На данный момент поддержка Self-Profiling API есть только в Chrome версии 94 и выше.

#performance #api #experimental

https://calendar.perfplanet.com/2021/js-self-profiling-api-in-practice/

Пропозал "await.ops"

Недавно узнал про пропозал "await.ops" — расширение await операторами await.all, await.any, await.race и await.allSettled. Они работают точно также как одноимённые методы у Promise.

Благодаря новым операторам код получается немного короче, так как отпадает необходимость в написании Promise:

// до
await Promise.all(users.map(async x => fetchProfile(x.id)))

// после
await.all users.map(async x => fetchProfile(x.id))

На данный момент "await.ops" находится на Stage 1, и его поддержки в браузерах нет. Авторы ищут дополнительные сценарии использования предложения для его продвижения на Stage 2.

#js #proposal

https://github.com/tc39/proposal-await.ops

Встроенный браузер Facebook

Томас Штайнер проанализировал работу встроенного браузера Facebook (In-App Browser — IAB), чтобы разобраться, чем он отличается от обычных браузеров — "Inspecting Facebook's WebView".

Некоторые приложения открывают ссылки во встроенном браузере на базе WebView, потому что это даёт им больше возможностей для работы со страницей. На сайтах, открытых с помощью IAB Facebook, встраивается код сбора метрик производительности и информации о доступных возможностях WebView, в window добавляются свойства TEMPORARY и PERSISTENT, модифицируется отправляемый HTTP-заголовок User-Agent.

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

#facebook #debug #mobile

https://blog.tomayac.com/2019/12/09/inspecting-facebooks-webview/

Автор npm-пакета colors (20 миллионов загрузок в неделю) в знак протеста добавил в его код бесконечный цикл. Также он удалил исходный код своего проекта faker.js. Таким образом мейнтейнер пытается привлечь внимание к проблеме финансирования open source разработчиков

https://snyk.io/blog/open-source-npm-packages-colors-faker/

Релиз Chrome 97

На прошлой неделе вышла новая версия Chrome. Пит Лепаж и Джеселин Ин рассказали про новинки релиза — "New in Chrome 97".

В Chrome 97 по умолчанию включён WebTransport API. С его помощью обеспечивается быстрый обмен данными между клиентом и сервером в сетях с высокими задержками. Поддерживается передача данных без гарантии доставки пакетов с помощью Datagram API и с гарантиями доставки пакетов с помощью Streams API. WebTransport API работает только с HTTP/3.

Добавлена поддержка экспериментального метода HTMLScriptElement.supports(). Благодаря ему можно определить, какой вид скриптов поддерживается браузером.

В JavaScript-движке у массивов появились методы findLast(), findLastIndex() для поиска элементов с конца.

В Chrome DevTools добавлена вкладка "Recorder". С её помощью можно записывать и повторно воспроизводить действия на странице (user flows). Обновлён список эмулируемых устройств. На вкладке "Elements" появилось автодополнение при редактировании HTML. Настройки DevTools теперь можно синхронизировать между разными устройствами.

#chrome #release

https://developer.chrome.com/en/blog/new-in-chrome-97/
https://developer.chrome.com/blog/new-in-devtools-97/

В поиске лучшего способа балансировки переносов слов

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

Зачем нужна балансировка переносов. Браузеры не заботятся о читаемости текста при переносе слов, поэтому в блогах зачастую можно встретить такие переносы заголовков статей:

Причины отсутствия поддержки AVIF в
Safari

хотелось бы, чтобы текст выглядел так:

Причины отсутствия
поддержки AVIF в Safari

В последнем варианте текст сбалансирован и не отвлекает внимание.

Для решения этой проблемы можно воспользоваться готовыми балансировщиками переноса слов. Есть две популярные реализации: от New York Times и от Adobe. Реализация от Adobe для меня слишком тяжёлая, реализация от New York Times полегче, но она хорошо работает только с небольшими объёмами текста.

Реализация New York Times для небольших заголовков подходит идеально, также она работает быстрее балансировщика Adobe благодаря использованию простого алгоритма на базе бинарного поиска. Но у неё есть проблема с видимым сдвигом позиции слов. Дениэл Александерсен в статье про форк балансировщика от New York Times предлагает скрывать текст заголовка до тех пор, пока не сработает балансировка, но мне это кажется очень хрупким решением. Если по каким-то причинам скрипт окажется сломан, то пользователь не увидит заголовка статьи. Также есть сомнения, что все скринридеры будут хорошо интерпретировать появляющийся из ниоткуда заголовок статьи.

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

Использование
SomeNewApi
и
OtherNewApi
в Node.js

Также в стандарте CSS Text Level 4 есть упоминание CSS-свойства text-wrap: balance. Оно было предложено Adobe в 2013 году, и его поддержки до сих пор нет ни в одном браузере.

Сначала хотел использовать форк балансировщика New York Times, но его недостатки перевешивают все преимущества. Возможно, что потом попробую покопать в сторону варианта с <br>, но пока оставлю всё без изменений. Балансировка переноса слов — это коварная штука.

#html #ux #a11y

https://defront.ru/posts/2022/01-january/11-in-search-of-best-line-wrap-balance/

Абсолютные импорты в JavaScript

Евгений Карагодин написал статью про настройку абсолютных импортов — "Абсолютные импорты в JavaScript".

Относительные пути в спецификаторах импортов могут быть неудобны в проектах с глубокой вложенностью директорий. Поэтому были придуманы разные способы для импорта файлов от корня проекта. В статье рассказывается про основные способы упрощения работы с импортами. Про сложность настройки абсолютных импортов в Node.js-проектах c TypeScript и тест-раннерами.

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

#js #esm

https://blog.ekaragodin.com/TH2jgliMXOO

Релиз Firefox 96

Несколько дней назад вышла новая версия Firefox. Самое интересное — изменение поведения кук, добавление Web Locks API, добавление поддержки CSS-свойства color-scheme.

Теперь по умолчанию у всех кук устанавливается атрибут SameSite=lax. Это изменение выравнивает поведение Firefox c Chrome и помогает в защите от атак Cross-Site Request Forgery (CSRF).

Добавлен Web Locks API. Это экспериментальное API для управления доступом к разделяемым ресурсам между разными сервис-воркерами или табами приложения.

Добавлена поддержка CSS-свойства color-scheme. С его помощью реализация тёмной темы для страницы делается в пару строк:

:root {
  color-scheme: light dark;
}

В этом примере свойство color-scheme сообщает браузеру о том, что вся страница поддерживает светлую и тёмную тему, и браузер начинает управлять цветами страницы автоматически.

В энкодере изображений появилась поддержка WebP. Благодаря этому изменению теперь можно программно экспортировать WebP-изображения из canvas с помощью методов HTMLCanvasElement.toDataURL(), HTMLCanvasElement.toBlob() и OffscreenCanvas.toBlob().

#firefox #release

https://www.mozilla.org/en-US/firefox/96.0/releasenotes/
https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/96

Новый формат шрифта COLRv1 в Chrome 98

Доминик Рйотшнес и Род Шитер рассказали про COLRv1 — новый формат шрифта c поддержкой цветных глифов — "COLRv1 Color Gradient Vector Fonts in Chrome 98".

Существующие форматы шрифтов с поддержкой цветных глифов не очень хорошо подходят для веба. Так размер шрифта формата CBDT/CBLC со всеми эмоджи занимает 9Мб. Из-за этого на сайтах и в веб-приложениях для представления эмоджи вместо шрифтов используют изображения. COLRv1 призван решить эту проблему.

Версия шрифта с эмоджи в формате COLRv1 занимает 1.2Мб в распакованном виде и всего лишь 0.6Мб в контейнере woff2. Оптимизация размера происходит за счёт переиспользования глифов с применением трансформаций. Также COLRv1 поддерживает линейные, радиальные и конические градиенты, что открывает новые возможности для типографики в вебе.

На данный момент поддержка COLRv1 есть только в бете Chrome 98.

#fonts

https://developer.chrome.com/blog/colrv1-fonts/

Открыт опрос по текущему состоянию экосистемы JavaScript. Цель опроса — исследование популярности инструментов и поиск проблемных мест в разработке фронтенда. Опрос можно проходить поэтапно.

https://app.stateofjs.com/survey/state-of-js/2021

Трекинг пользователей Safari 15 с помощью в IndexedDB

Мартин Бажаник рассказал про баг Safari, который позволяет узнать, с какими сайтами сейчас работает пользователь — "Exploiting IndexedDB API information leaks in Safari 15".

В Safari 15 при любом взаимодействии с IndexedDB из-за ошибки для всех активных сайтов в рамках одной сессии создаётся пустая база с именем запрошенной базы. Так как имена баз для разных сайтов отличаются друг от друга, то по этому имени можно вычислить, какой именно сайт сейчас открыт у пользователя. Данный баг позволяет вычислить Twitter, YouTube, Bloomberg, Alibaba, Netflix, VK, Instagram и другие сайты. Ситуация ухудшается тем, что у YouTube, Google Keep и Google Calendar в названии базы данных находится идентификатор пользователя, с помощью которого можно узнать информацию о пользователе.

Ошибка воспроизводится в Safari 15 и во всех браузерах на iOS 15 и iPadOS 15. На данный момент баг в трекере WebKit уже исправлен, фикс скорее всего выкатится со следующим обновлением системы.

#privacy #safari #webkit

https://fingerprintjs.com/blog/indexeddb-api-browser-vulnerability-safari-15/

За прошедшие две недели в канале для патронов Defront было опубликовано десять постов:

— Паттерны работы в терминале
— Преимущества парсинга входных данных
— Выводы после 10000 часов программирования
— Кто использует Save-Data
— Способы упаковки JSON
— Оптимизация сложения векторов с помощью WebAssembly
— Как работает детектор блокировщиков рекламы
— Исключения и значения-ошибки
— Улучшение производительности Wix
— Советы по обходу ненадёжности типов TypeScript

Становитесь патроном канала на Patreon, чтобы получить доступ в Defront Plus (более 340 уникальных постов). Все донаты идут на поддержку канала, покупку еды, аренду квартиры, оплату медицинских услуг и т.п.

Спасибо всем, кто читает и поддерживает Defront!

https://www.patreon.com/myshov

Новое дерево доступности в Chrome DevTools

Йохан Бей из команды разработки Chrome DevTools рассказал про новое дерево доступности, которое появится в будущих версиях Chrome — "Full accessibility tree in Chrome DevTools".

С помощью дерева доступности скринридеры и другие технологии доступности предоставляют средства для работы со страницей. В Chrome 97 и ниже дерево доступности в один момент времени может отображать только выбранный элемент и его потомков. В новой версии Chrome дерево будет отображаться для всей страницы сразу, упрощая поиск элементов, которые недоступны скринридерам. Обновлённое дерево также позволит реализовать новые функции и инструменты для решения проблем доступности.

Новое дерево доступности пока доступно только в Chrome Canary.

#debug #a11y #internals #devtools

https://developer.chrome.com/blog/full-accessibility-tree/

Неожиданное пересечение типов в TypeScript

Стэфан Баумгартнер рассказал, в каких случаях могут возникать неожиданные пересечения типов, и что с ними делать — "TypeScript: Unexpected intersections".

Неожиданное пересечение типов возникает при обновлении свойств объектов, если в качестве ключа используется переменная с объединением типов. В этом случае для ключа TypeScript будет использовать "наибольший общий делитель" в виде пересечения типов. В примере ниже таким "делителем" будет пересечение string & number, то есть тип never, из-за чего возникнет ошибка типизации:

interface Person {
  age: number;
  name: string;
}

function updatePersonByKey(
  person: Person,
  key: keyof Person,
  value: Person[keyof Person]
) {
  // тут будет ошибка типизации, так как
  // key превратится в пересечение типов `string & number`
  person[key] = value; 
}

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

Полезная статья. Рекомендую почитать всем, кто использует TypeScript.

#typenoscript

https://fettblog.eu/typenoscript-unexpected-intersections/

Cовременные возможности для работы с JavaScript-модулями

Аксель Раушмайер написал статью про современные возможности для работы с JavaScript-модулями — "Publishing and consuming ECMAScript modules via packages – the big picture".

Последние версии Node.js поддерживают package exports и package imports. Package exports используются авторами библиотек для настройки путей, по которым будет доступен импорт модулей. Package imports позволяют создавать альясы на пакеты или модули. Их можно использовать для подмены реализации модуля в зависимости от окружения. Package exports и package imports настраиваются в package.json.

В браузерах скоро появится поддержка import maps. С их помощью можно создавать альясы, относительно которых будут резолвиться спецификаторы модулей в браузере. Это полезно при доставке кода пользователям в чистом ESM, когда в названии файлов модулей есть хеши. Import maps уже используют в проде авторы почтового клиента hey.

#js #esm #nodejs #npm

https://2ality.com/2022/01/esm-specifiers.html

React server components под капотом

Чан Ву рассказал про внутреннее устройство React server components (RSC) — "How React server components work: an in-depth guide".

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

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

#react #internals

https://blog.plasmic.app/posts/how-react-server-components-work/