Defront — про фронтенд-разработку и не только

Сегодня вышла новая версия Firefox. Крис Миллс рассказал про новинки релиза — "Never too late for Firefox 88".

Для элементов управления форм была добавлена поддержка псевдоклассов :user-valid и :user-invalid. Они начинают матчиться, после того как пользователь завершил работу с элементом, например, после перехода на соседний элемент с помощью Tab.

Firefox теперь поддерживает CSS-функцию image-set() для выбора наиболее подходящего изображения из предоставленного множества. Эту функцию можно использовать в свойствах content и cursor.

Было обновлено поведение CSS-свойства outline — обводка теперь учитывает текущее значение border-radius.

В регулярных выражениях добавлена поддержка пропозала RegExp match indices. Оно добавляет поддержку флага /d, благодаря которому в результате выполнения регулярки (match object) появляется свойство indicies с позициями текущих скобочных групп (capturing group).

Добавлен статический метод AbortSignal.abort(), возвращающий отменённый сигнал.

Отключена поддержка FTP. Его полное удаление будет завершено в Firefox 90. При необходимости поддержку FTP можно будет включить с помощью плагинов.

#release #firefox

https://hacks.mozilla.org/2021/04/never-too-late-for-firefox-88/

Пока одни проекты внедряют сервис воркеры, другие их удаляют. Молли Стрюв из dev.to рассказала, почему они решили удалить сервис воркер — "Goodbye Offline Page".

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

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

#performance #serviceworker

https://dev.to/devteam/goodbye-offline-page-5d98

Джейк Арчибальд написал ещё одну статью про анализ производительности сайтов команд Формулы-1 — "Who has the fastest F1 website in 2021? Part 8".

В восьмой части Джейк исследует сайт McLaren. Сайт загружается медленно — основной контент появляется на 25-ой секунде. Основная проблема связана с загрузкой большого CSS-файла с заинлайненным шрифтом со стороннего домена. Ещё одна проблема заключается в том, что содержимое страницы отображается после события DOMContentLoaded. Загрузка сторонних скриптов, блокирующих парсинг страницы, напрямую влияет на это событие, задерживая появление контента.

Есть проблемы с изображениями. Например, на сайте используется тяжёлый спрайт, из которого фактически используется всего лишь несколько изображений. CSS-спрайты — это устаревшая техника оптимизации; её не рекомендуется использовать, когда сайт работает по HTTP/2.

После всех изменений время полной загрузки сайта удалось снизить до трёх секунд.

#performance

https://jakearchibald.com/2021/f1-perf-part-8/

Хью Хауорт написал обзор современных инструментов сборки — "Comparing the New Generation of Build Tools".

В статье рассказывается про esbuild, Snowpack, Vite и wmr. Esbuild — это очень шустрый сборщик, написанный на Go. Snowpack, Vite и wmr — сборщики нового поколения. Они полагаются на нативную модульную систему JavaScript, устраняя шаг сборки приложения во время разработки.

Snowpack позволяет подключать и гибко настраивать разные сборщики для production-сборки проекта. Vite, наоборот, исповедует принцип zero-configuration, предоставляя набор настроек, которые подойдут большинству проектов. Wmr — самое лёгкое решение, но из коробки поддерживает только React и Preact. Esbuild в этом сравнении стоит особняком, так как это обычный, но очень быстрый сборщик.

Большая и хорошая статья. Очень рекомендую почитать.

#bundle #tool

https://css-tricks.com/comparing-the-new-generation-of-build-tools/

Андреа Гиммарачи написал статью о том, почему некорректно называть JavaScript-классы синтаксическим сахаром для прототипного наследования — "JS classes are not 'just syntactic sugar'".

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

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

#js

https://webreflection.medium.com/js-classes-are-not-just-syntactic-sugar-28690fedf078
https://www.reddit.com/r/javascript/comments/mq9upa/js_classes_are_not_just_syntactic_sugar/ (обуждение на Reddit)

Никита Прокопов написал статью про проблему размера шрифтов, заданных с помощью пунктов, — "Font size is useless; let’s fix it".

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

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

Хорошая статья. Рекомендую почитать всем, кому интересна тема типографики.

#typography

https://tonsky.me/blog/font-size/
https://habr.com/ru/company/vdsina/blog/550046/ (на русском языке)

Сегодня вышел Chrome 90. Пит Лепаж и Джеселин Ин рассказали про новинки релиза.

В CSS была добавлена поддержка нового свойства overflow: clip из спецификации CSS Overflow. Это свойство позволяет скрыть часть контента, вышедшего за пределы контейнера при его переполнении, не переключая контекст форматирования, тем самым улучшая производительность рендеринга по сравнению с overflow: hidden.

В Chrome 74 был добавлен Feature Policy API для объявления списка API, которые разрешается использовать на странице. В Chrome 90 этот API был переименован в Permissions Policy, также был изменён синтаксис для определения параметров.

Появилась поддержка декларативного Shadow DOM, благодаря которому web-компоненты можно объявлять в коде HTML-страницы без использования императивного API. Declarative Shadow DOM полезен для улучшения SEO страниц, на которых используются web-компоненты.

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

В Chrome 90 (и во всех будущих версиях) при переходе на сайт без указания протокола теперь будет использоваться HTTPS, а не HTTP.

В Chrome DevTools был добавлен инструмент для визуальной отладки флексбоксов. Появилась экспериментальная поддержка отображения дерева доступности страницы. Добавлен новый оверлей, отображающий метрики Web Vitals для текущей страницы. Добавлена эмуляция медиафичи color-gamut, с помощью которой можно проверить, поддерживается ли дисплеем заданное цветовое пространство.

#chrome #release

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

Недавно на сайте документации Microsoft был опубликован курс, посвящённый разработке на TypeScript, — "Build JavaScript applications using TypeScript".

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

В общем, выглядит интересно. Каких-то хардкорных вещей нет, так что подойдёт всем, кто только начинает знакомиться с TypeScript. Требуется только базовое знание JS и HTML.

#typescript

https://docs.microsoft.com/en-us/learn/paths/build-javascript-applications-typescript/

Клемент Видал написал пост о том, как создать RPC-механизм с помощью Proxy — "Use Javascript Proxy for isolated context intercommunication".

Идея из статьи похожа на реализацию утилиты comlink, которая используется для упрощения работы с веб-воркерами. Реализация заключается в подмене вызова метода postMessage с помощью обращения к методу объекта, завёрнутого в Proxy (ES2015). То есть событийная модель работы с веб-воркером оказывается скрыта за вызовом методов:

const dummyData = [1, 4, 5];
const proxyService = createProxy("DataService");
const processedData = await proxyService.processData(dummyData);

Этот подход можно использовать не только для организации взаимодействия с веб-воркером, но и между основным потоком и потоком рендера в Electron API и content script и background script в WebExtension API.

#js

https://dev.to/clementvidal/use-es6-proxy-for-isolated-context-intercommunication-mc1

Джейк Арчибальд опубликовал седьмую часть из серии статей про производительность сайтов команд Формулы-1 — "Who has the fastest F1 website in 2021? Part 7".

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

На сайте вместо одного большого CSS-файла загружается тридцать небольших. Это приводит к небольшой задержке рендеринга (где-то полсекунды). Также небольшие файлы проигрывают в степени сжатия большим файлам. Во время загрузки прыгает контент, это связано с инициализацией слайдера, который начинает загружать изображения только после полной загрузки и инициализации скриптов. Сдвига контента можно было бы избежать, если бы слайдер был реализован с помощью обычного HTML и CSS scroll snap.

После всех исправлений время первого рендеринга удалось снизить с 9 до 3 секунд.

#performance

https://jakearchibald.com/2021/f1-perf-part-7/

Тим Ван Дер Лип из команды разработки Chrome написал статью о миграции DevTools на TypeScript — "DevTools architecture refresh: migrating DevTools to TypeScript".

Кодовой базе Chrome DevTools уже более 10 лет. За это время она выросла до 150 тысяч строк кода и пережила несколько больших изменений. Например, в 2013 году в ней стал использоваться Closure Compiler в качестве тайпчекера. Но в 2019 году было решено отказаться от Closure в пользу TypeScript, так как Closure не обеспечивал должный уровень типобезопасности.

Автоматизировать миграцию не получилось, поэтому весь процесс занял 13 месяцев. Для распараллеливания работы между инженерами во все файлы был добавлен @ts-nocheck; процесс тайпскрификации заключался в постепенном удалении этих директив.

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

#typescript #migration

https://developer.chrome.com/blog/migrating-to-typescript/

Джейк Арчибальд написал шестую часть из серии статей про анализ производительности сайтов команд Формулы-1 — "Who has the fastest F1 website in 2021? Part 6".

В этой статье Джейк исследует сайт Ferrari. Сайт загружается очень медленно — за 38 секунд. Основная проблема заключается в большом объёме загружаемого JavaScript. Один из скриптов весит более мегабайта в gzip (более 6 мегабайт в разжатом виде). На бюджетных смартфонах он загружается долго и блокирует основной поток браузера примерно на 5 секунд из-за выполнения и парсинга большого количества исходного текста.

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

После всех исправлений время первого рендеринга удалось снизить с 38 до 3 секунд.

#performance

https://jakearchibald.com/2021/f1-perf-part-6/

Никита Ступин из Huawei написал статью про атаку "Prototype pollution" — "JavaScript prototype pollution: практика поиска и эксплуатации".

Prototype pollution — это атака, с помощью которой изменяют прототип базовых объектов ( Object.prototype, Function.prototype, Array.prototype ) для модификации хода выполнения программы. Например, если код обращается к свойству window.foo и выполняет его содержимое с помощью eval, то в некоторых ситуациях можно добиться выполнения произвольного кода, переписав в прототипе объекта свойство foo ( Object.prototype.foo = 'alert(1)' ). Чаще всего на клиенте prototype pollution используется для реализации XSS с помощью изменения GET-параметров.

В статье очень детально разбирается механизм работы этой атаки на клиенте и сервере. Есть пример поиска и эксплуатации prototype pollution на практике и советы по защите.

Большая и интересная статья. Рекомендую почитать.

#js #security

https://habr.com/ru/company/huawei/blog/547178/

Джейк Арчибальд написал пятую часть из серии статей про производительность сайтов команд Формулы-1 — "Who has the fastest F1 website in 2021? Part 5".

В этой статье исследуется сайт Aston Martin. Сайт загружается быстро — за 6 секунд. Это время было улучшено на три секунды благодаря решению проблем, связанных с неиспользующимся preconnect'ом, плохой оптимизацией главного изображения и загрузкой дополнительных стилей с другого сервера.

Также сайт использует сервис polyfill.io, который по User-Agent предоставляет набор нужных полифилов. Чтобы эти полифилы не загружались в современных браузерах, используется атрибут nomodule:

<script nomodule src="https://polyfill.io/…"></script>

#performance

https://jakearchibald.com/2021/f1-perf-part-5/

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

— Профилировка памяти Node.js-приложений
— Лучшие практики оптимизации видео для веба
— Специализация во фротенд-разработке
— Оптимизация стилей и их влияние на производительность страницы
— Использование SQLite как инструмента для анализа данных
— Стилизация псевдоэлементов с помощью JavaScript и кастомных свойств
— Производительность превью документов Dropbox
— Объяснение терминов, использующихся в спецификации промисов
— Использование prefers-reduced-motion для улучшения доступности
— Доступность мультиязычных документов
— Использование ASTExplorer для анализа JavaScript
— Мысли об управлении сложностью
— Способы завершения процесса Node.js
— Когда можно прервать работу своего коллеги и просить помощь
— Проблемы юзабилити и доступности прилипающих заголовков

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

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

https://www.patreon.com/myshov

Дэниэл Штенберг — автор curl — написал статью про текущую поддержку HTTP/3 — "Where is HTTP/3 right now?".

Черновик спецификации HTTP/3 вышел на финальный этап и совсем скоро станет официальным документом. HTTP/3 уже включён в Chromium. В Firefox он будет включён в ближайших версиях. По данным w3techs поддержка HTTP/3 на самых популярных сайтах составляет 14%, по данным Cloudflare — 9%.

Также Дэниэл пишет о том, что HTTP/3 быстрее HTTP/2, но пользователи, подключённые к широкополосному каналу с низкими задержками, навряд ли заметят какие-либо изменения.

#http

https://daniel.haxx.se/blog/2021/04/02/where-is-http-3-right-now/

На сайте V8 была добавлена страница, посвящённая статическим блокам инициализации класса — "Class static initializer blocks".

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

class C {
  static x = ...;
  static y;
  static z;
  static {
    const obj = doSomethingWith(this.x);
    this.y = obj.y;
    this.z = obj.z;
  }
}

Поддержка сlass static initializer blocks появится в Chrome 91. Также посмотреть на эту фичу в действии можно уже сегодня в Chrome Canary.

#js #proposal

https://v8.dev/features/class-static-initializer-blocks

Андрей Печкуров — участвует в разработке Node.js — написал статью про внутреннее устройство Math.random в V8 — "[V8 Deep Dives] Random Thoughts on Math.random()".

V8 использует генератор псевдослучайных чисел (PRNG), поставляемый окружением (Node.js, Chromium) или откатывается на системный источник случайности (например, /dev/urandom в Linux), если он не был задан в окружении. После того как генератор был проинициализирован seed-значением, все последующие случайные числа генерируются детерминировано с помощью алгоритма xorshift128+ и сохраняются в пуле из 64 значений, который заполняется по мере необходимости. Использование пула заранее сгенерированных случайных чисел очень распространённый подход, который используется при реализации PRNG.

Math.random не рекомендуется использовать для задач, связанных с безопасностью, потому что под капотом он не использует криптографически безопасный генератор псевдослучайных чисел (CSPRNG). Для таких задач вместо Math.random рекомендуется использовать генератор из Web Crypto API или модуля crypto в Node.js.

#js #v8 #internals #security

https://apechkurov.medium.com/v8-deep-dives-random-thoughts-on-math-random-fb155075e9e5

Алекс Рассел из Google рассказывает о том, как современный фронтенд влияет на веб в целом, и что можно с этим сделать — "The Mobile Performance Inequality Gap, 2021".

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

Одна из главных причин медленного веба — выбор неподходящих инструментов и неконтролируемый рост JS-бандлов. В 2017 году Алекс призывал ограничивать размер JS до 130-170KiB. Сейчас он предлагает поднять эту границу до 350KiB для JS и 100KiB для HTML/CSS/шрифтов. Это связано с тем, что в последние годы операторы сотовых сетей активно внедряли 4G. При этом вычислительная мощность среднестатистического смартфона, наоборот, не выросла. Сейчас до сих пор в бюджетных смартфонах часто используются устаревшие процессоры, построенные на базе 28нм технологического процесса. Эта ситуация в ближайшие годы изменится, так как пользователи неизбежно будут обновлять свои устройства и границу в 350KiB можно будет подвинуть ещё дальше.

Алекс призывает при выборе инструментов и принятии технических решений в первую очередь думать о пользователях, которые в подавляющем большинстве используют обычные дешёвые смартфоны, а не последний iPhone или флагманский Samsung.

#performance #mobile

https://infrequently.org/2021/03/the-performance-inequality-gap/

Джейк Арчибальд написал четвёртую часть из серии статей про оптимизацию производительности сайтов команд Формулы-1 — "Who has the fastest F1 website in 2021? Part 4".

В этой статье Джейк исследует производительность сайта Williams. С производительностью на этом сайте всё более менее хорошо — первый рендеринг контента происходит на шестой секунде. Но его можно было ускорить, так как на критическом пути рендеринга находился CSS, который подключался с внешнего сервиса. Также ещё одна проблема заключалась в том, что сайт работает по HTTP/1.1 из-за чего появляется ограничение на параллельную загрузку ресурсов. Есть проблема со сдвигом контента из-за загрузки изображения без установленной высоты и ширины.

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

#performance

https://jakearchibald.com/2021/f1-perf-part-4/