Defront (при поддержке Зарплата.ру) — про фронтенд-разработку и не только

2022-01-15 00:02:35 Новый формат шрифта 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/ Открыть/Комментировать

2022-01-13 18:52:57 Релиз 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 Открыть/Комментировать

2022-01-12 19:03:56 Абсолютные импорты в JavaScript

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

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

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

#js #esm

https://blog.ekaragodin.com/TH2jgliMXOO Открыть/Комментировать

2022-01-12 00:05:00 В поиске лучшего способа балансировки переносов слов

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

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

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

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

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

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

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

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

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

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

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

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

#html #ux #a11y

https://defront.ru/posts/2022/01-january/11-in-search-of-best-line-wrap-balance/ Открыть/Комментировать

2022-01-10 22:26:21 Релиз 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/ Открыть/Комментировать

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

https://snyk.io/blog/open-source-npm-packages-colors-faker/ Открыть/Комментировать

2022-01-07 19:59:46 Встроенный браузер 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/ Открыть/Комментировать

2022-01-06 21:00:47 Пропозал "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 Открыть/Комментировать

2022-01-06 00:11:46 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/ Открыть/Комментировать

2022-01-04 20:09:54 Анализ производительности 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 Открыть/Комментировать