Абсолютные импорты в 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.

#typescript

https://fettblog.eu/typescript-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/

Сравнение производительности Array.push и Array.concat

Ши Лин сравнила производительноcть методов .push и .concat у массивов — "Javascript Array.push is 945x faster than Array.concat".

Ши разрабатывает фреймворк для автоматического тестирования. У одного пользователя фреймворка скорость выполнения тестов снизилась в несколько раз. Выяснилось, что для работы с DOM-деревом фреймворк собирал все элементы страницы в одномерный массив с помощью .concat. Так как каждый вызов .concat создаёт новый массив, это негативно сказывалось на производительности прогона тестов.

В статье есть несколько бенчмарков, которые показывают, что объединение массивов с помощью .push(...arr) на два порядка быстрее .concat(arr).

Добавлю свои пять копеек. Заменять .concat(arr) на .push(...arr) стоит только там, где есть проблема, так как на очень больших массивах .push(...arr) выкинет ошибку переполнения стека.

#js #performance

https://dev.to/uilicious/javascript-array-push-is-945x-faster-than-array-concat-1oki

Опыт ускорения VK

На хабре был опубликован транскрипт доклада Александра Тоболя про опыт ускорения VK — "Как мы отказались от JPEG, JSON, TCP и ускорили ВКонтакте в два раза".

Оптимизированы были все уровни от выбора нового формата изображений до выбора алгоритма управления передачей пакетов на сервере. Для изображений вместо JPEG стали использовать WebP, для передачи данных вместо JSON — MessagePack, сжатый с помощью zstd. Очень большая часть посвящена QUIC и его особенностям реализации. Самый интересный момент — с помощью QUIC улучшается утилизация пропускной способности клиента. Как побочный эффект это может привести к тому, что некий сервис может занять всю пропускную полосу клиента, затормаживая работу других сервисов.

После внедрения всех изменений на 55% ускорилась доставка изображений, количество просмотров увеличилось на 2,7% (на 10,8% для пользователей с медленной сетью), количество просмотров контента увеличилось на 250 миллионов.

#performance #http

https://habr.com/ru/company/vk/blog/594633/

Обнаружение регрессий производительности

Ангус Кролл из Netflix рассказал о методах, которые используются его командой для обнаружения регрессий производительности — "Fixing Performance Regressions Before they Happen".

Для снижения количества ложноположительных событий вместо статических пороговых значений ребята стали использовать алгоритм обнаружения аномалий. Аномалия — это показание метрики, которое превышает стандартное отклонение в n раз на массиве данных за последние m прогонов. В случае Netflix n=4 и m=40.

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

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

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

#performance

https://netflixtechblog.com/fixing-performance-regressions-before-they-happen-eab2602b86fe

Let's Encrypt из-за неточностей имплементации валидации отзывает сертификаты, которые были выпущены в течение последних 90 дней. Отзыв произойдёт 28 января и затронет примерно 1% пользователей сервиса.

https://community.letsencrypt.org/t/2022-01-25-issue-with-tls-alpn-01-validation-method/170450

Что появилось в CSS после CSS3

Крис Койер сделал обзор CSS-фич для тех, кто не следил за развитием языка последние семь лет — "What should someone learn about CSS if they last boned up during CSS3?".

С момента появления CSS3 в языке появились:
— гриды и флексы для удобной раскладки элементов на странице;
— Houdini — набор API для программного расширения возможностей CSS;
— новый синтаксис определения цвета без запятой rgb(255 0 0 / 0.5);
— кастомные свойства — близкий аналог переменных в препроцессорах var(--accentColor);
— preference queries — медиавыражения, использующиеся для адаптации страницы под пользовательские настройки операционной системы;
— поддержка вариативных шрифтов для создания страниц с богатой типографикой;
— поддержка SVG-путей для определения масок, управления анимацией и обтеканием текста;
— CSS-фильтры для определения функций наложения цвета и создания эффектов;
— поддержка Shadow DOM для стилизации кастомных элементов.

#css

https://css-tricks.com/whats-new-since-css3/

Оптимизация производительности Angular-приложений

Минко Гечев из Google рассказал про распространённые проблемы производительности Angular-приложений и способы их решения — "4 Runtime Performance Optimizations".

— Загрязнение зоны (zone pollution). Возникает в том случае, когда механизм обнаружения изменений запускается асинхронными событиями, не влияющими на состояние основного приложения. Для решения этой проблемы регистрацию событий нужно выносить вне основной зоны Angular с помощью метода runOutsideAngular. Примером загрязнения зоны может быть регистрация обработчика события mousemove для отображения лейблов диаграммы из сторонней библиотеки.

— Запуск обнаружения изменений вне границ компонента (out of bounds change detection). Происходит тогда, когда возникновение событий в одном компоненте запускает механизм обнаружения изменений в соседних независимых компонентах. Эта проблема решается использованием стратегии обнаружения изменений onPush.

— Лишние перерасчёты значений в шаблонах (recalculation of referentially transparent expressions). Если в шаблоне используются методы для получения значений, то они будут исполняться каждый раз при ререндериге компонента. Если эти методы удовлетворяют принципу ссылочной прозрачности, то их можно либо мемоизировать, либо заменить пайпами.

— Большое дерево компонентов (large component trees). Если дерево компонентов слишком большое, то как бы ни были оптимизированы компоненты, приложение будет работать с подтормаживаниями. Решение — уменьшить размер дерева. Это можно сделать с помощью пагинации или виртуализированного списка.

#angular #performance #video

https://youtu.be/f8sA-i6gkGQ

Сегодня каналу исполнилось три года!

Сначала для меня канал был просто интересным занятием, который мотивировал читать что-то новое и делится найденными с коллегами. Сейчас ситуация складывается таким образом, что из-за обострения тоннельного синдрома я не могу идти работать фулл-тайм, и Defront стал моим, можно сказать, спасением. Я очень благодарен, что у меня есть возможность работать над каналом.

Также хочу поблагодарить всех, кто читает Defront и поддерживает меня на Patreon. Особенная благодарность всем спонсорам канала — Зарплате.ру, Василисе Версус, Сергею Ufocoder, Андрею Советкину и Mykola Dekhtiarenko.

И уже по традиции передаю привет всем дружественным каналам и сообществам (пишите в лс, если кого-то забыл):

@webnya — канал про веб-стандарты, новости TC39 и JS, WebAssembly и т.п.
@oleg_log — канал про бэкенд-разработку и программирование в целом
@ufostation — подкасты и статьи про разработку
@webstandards_ru — подкасты и канал про фронтенд-разработку
@forwebdev — новости из мира фронтенда
@valya_reads_issue — последние новости и инсайты из мира фронтенда
@typesafesound — мысли про TypeScript и разработку
@msosnovfeed — про процессы, архитектуру и т.п.
@artalog — про разработку, React и софт скиллы
@css_ru — разговоры про CSS и HTML
@asterisk_js — ссылки на проекты и статьи про Node.js и около

Ещё раз всем спасибо и берегите себя!

Новинки iOS Safari 15.4 Beta

Apple обычно не делится своими планами внедрения новых API в Safari. По этой причине Максимилиано Фиртман копается в новых релизах iOS, чтобы понять, что нас ждёт в будущем. В этот раз он проанализировал последнюю доступную версию Safari и WebView из iOS 15.4 Beta — "Push Notifications, WebXR, and better PWA support coming to iOS".

Из нового релиза видно, что началась работа над добавлением Push API и Notification API. С их помощью сайты и PWA могут отображать системные нотификации. На данный момент Push API и Notification API ещё не работают, и их поддержки скорее всего не будет в стабильной версии iOS 15.4.

Была добавлена поддержка icon из манифеста PWA. Благодаря этому свойству можно тонко настраивать иконку устанавливаемого PWA. На данный момент поддержка icon реализована с ограничениями: нет поддержки свойства maskable, есть проблемы с загрузкой иконки.

Доступен набор экспериментальных фич для работы со смешанной и дополненной реальностью: WebXR Augmented Reality Mode, WebXR Device API, WebXR Gamepads Module, WebXR Hand Input Module.

Была добавлена поддержка :has, поддержка CSS-свойства accent-color, добавлен элемент <dialog>, медиа-фича resolution и ленивая загрузка изображений с помощью loading="lazy".

#safari #experimental

https://firt.dev/ios-15.4b

Производительность рендеринга в браузерах

Мэт Перри — автор библиотек Framer Motion и Moion One — рассказал про особенности и трудности создания плавных анимаций.

Плавные анимации достигаются за счёт оптимизации рендеринга и использования аппаратного ускорения. При оптимизации рендеринга нужно учитывать, что некоторые свойства приводят к перерасчёту раскладки страницы. Но если эти свойства используются в изолированном контексте, например, с position: absolute, то вполне можно достичь 60 fps. В сети можно найти список этих свойств (CSS Triggers), но он долгое время не обновлялся. Так например, обработка SVG и CSS-свойства filter в Firefox и Chrome уже выносится на GPU, а в Chrome скоро появится поддержка ускорения анимаций clip-path и background-color.

Все браузеры для анимаций используют аппаратное ускорение. В Safari оно реализовано с помощью системной библиотеки Core Animation. Она несовместима с Web Animation API, из-за чего в некоторых случаях ускорение может отключаться.

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

#performance #rendering

https://motion.dev/guides/performance

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

— Оптимизация enum в TypeScript
— Как читать спецификации W3C
— Опыт улучшения производительности Amazon
— Использование Navigation Timing API
— Возвращение серверного роутинга
— Подход к прохождению технического собеседования
— Сравнение разных способов троттлинга сети
— Зачем разбираться в рабочих процессах компании
— Конфигурация проектов с помощью npm и mrm
— Рефлексия по defer и async
— Заметки по микрофронтендам

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

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

https://www.patreon.com/myshov