Себастиен Лорбер из Facebook написал статью про то, какие преимущества даёт пропозал Records & Tuples для React-приложений — "Records & Tuples for React".

Предложение Records & Tuples добавляет новые иммутабельные структуры данных в JS. Записи и кортежи особенно полезны для React, так как много проблем с производительностью и поведением библиотеки связано с устойчивостью ссылок на объекты (object identities). Некорректное использование литералов объектов в пропсах может привести не только к проблемам с производительностью, но и в некоторых случаях к бесконечным загрузкам данных.

В статье разбирается очень много случаев того, как новый пропозал позволяет упростить React-код. Есть немного размышлений по поводу того, как кортежи и записи могут быть использованы вместе с TypeScript.

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

#react #proposal #performance

https://sebastienlorber.com/records-and-tuples-for-react

Томас Штайнер рассказал про Local Font Access API — экспериментальное API для доступа к шрифтам, которые установлены в системе пользователя.

Это API решает несколько проблем. Текущие возможности web'а не позволяют получить доступ к низкоуровневой информации о шрифтах, что критично для профессиональных средств для дизайна. Без этих данных невозможно применять векторные фильтры к шрифтам или менять форму глифов. Local Font Access API предоставляет доступ к этим данным. Также лицензии некоторых шрифтов разрешают их использование, но без разрешения распространять их через web. Доступ к такому шрифту может быть получен с помощью этого API.

На данный момент Local Font Access API доступен только в Chrome за флагом #font-access. Разработчики призывают попробовать поработать с новым API и поделиться своим фидбеком.

#fonts #experimental

https://web.dev/local-fonts/

Сэм Торогуд из Google опубликовал статью про события загрузки в web — "Understanding Load Events on the Web".

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

Для обработки события DOMContentLoaded необходимо всегда выполнять небольшой реверанс с проверкой document.readyState. Если необходимо выполнить код скрипта после того, как будет доступен DOM, проще пометить этот скрипт с помощью defer. Единственное место, где нельзя обойтись без DOMContentLoaded, — код библиотек, так как такой код не знает был ли он загружен с помощью defer или async.

#web

https://whistlr.info/2020/understanding-load/

Вчера вышел Firefox 80. Самые интересные фичи релиза.

Была добавлена поддержка нового синтаксиса export * as ns from 'module' из ES2021 для именованного экспорта всего пространства имен модуля. Включена поддержка операций наложения эффектов друг на друга в Web Animations API: KeyframeEffect.composite и KeyframeEffect.iterationComposite. Атомарные операции в WebAssembly теперь можно использовать с неразделяемой памятью. В WebGL добавлена поддержка расширения KHR_parallel_shader_compile, которое используется для параллельной компиляции шейдеров.

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

Из интересного для пользователей. Firefox теперь можно установить как просмотрщик pdf-документов. Была ускорена работа со списком заблокированных аддонов. Улучшение доступности для noscript-элементов на страницах и элементов управления браузера.

#firefox #release

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

В блоге APNIC была опубликована статья Мэттью Томаса про исследование повышенной нагрузки на корневые DNS-серверы интернета — "Chromium’s impact on root DNS traffic".

В Chromium при вводе слова в адресную строку (в Chromium она называется omnibox) браузер проверяет, нет ли в интранет сети домена с таким именем, если он есть, то выше результатов поиска появляется информационное сообщение с предложением перейти на этот сайт. Некоторые провайдеры перехватывают ошибки от DNS-серверов и подсовывают свою страницу, что приводило к лишним показам информационных сообщений в ранних версиях Chromium. Чтобы решить эту проблему, при запуске браузера и обновлении сетевых настроек в Chromium было добавлено определение перехвата трафика провайдером с помощью запроса трёх случайно сгенерированных доменных имён. Все эти запросы обрабатываются корневыми серверами.

С ростом популярности браузера (сейчас на рынке он занимает более 70%) росло количество пробных запросов. Сейчас их количество приближается к половине от всего трафика к корневым серверам. Это очень большая проблема, так как такое количество трафика сравнимо с DDOS-атакой.

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

#chromium #dns

https://blog.apnic.net/2020/08/21/chromiums-impact-on-root-dns-traffic/

Пару дней назад вышла новая версия Chrome. Пит Лепаж рассказал про новые фичи релиза — "New in Chrome 85".

— В JS для строк был добавлен метод replaceAll(), который облегчает замену значений в строке без использования регулярок. Была добавлена поддержка метода Promise.any(). Он возвращает промис, который резолвится в том случае, когда резолвится один из обрабатываемых промисов.

— Метод getInstalledRelatedApps() теперь поддерживает Windows. Также с его помощью можно проверить, установлено ли у пользователя в системе PWA, которое относится к просматриваемому сайту. Этот метод нужен для кастомизации лендингов и отключения информационных сообщений на сайте с призывом установить приложение.

— Появилась поддержка CSS-свойства content-visibility: auto для разделения страницы на логические куски, которые помогают ускорить рендеринг страницы.

— В рамках origin trial была добавлена поддержка передачи стримов с помощью fetch. Полезно для передачи на сервер потока генерируемого контента.

— Houdini CSS Properties могут быть заданы прямо в CSS.

— Добавлена поддержка AVIF — нового формата изображений.

— В инструментах разработчика появилась полноценная поддержка редактирования свойств, создаваемых с помощью CSSOM API. Такой подход популярен в библиотеках CSS-in-JS. Событие сервис воркера respondWith отображается в табе "Timings". Были обновлены иконки для брекпойнтов, логических брекпойнотов и логпойнтонв.

#release #chrome

https://developers.google.com/web/updates/2020/08/nic85
https://developers.google.com/web/updates/2020/06/devtools

Андрей Печкуров написал статью про внутреннее устройство Map в V8 — "[V8 Deep Dives] Understanding Map Internals".

В V8 для Map используется детерминированная хэш-таблица (deterministic hash table) — структура данных, которая гарантирует порядок обхода хранящихся в ней значений (в порядке их добавления в Map). Все данные для организации структуры данных находятся в одном большом массиве, который поделён на три логические части: заголовок, хэш-таблицу и данные. При добавлении и удалении значений из Map алгоритм периодически создаёт новую таблицу, поэтому операции вставки и удаления могут иметь временную сложность O(N). Операция извлечения данных из Map работает за O(1).

Интересная статья. Рекомендую почитать, если интересуетесь тем, как работает V8 изнутри.

#internals #v8 #algorithm

https://itnext.io/v8-deep-dives-understanding-map-internals-45eb94a183df

Джейсон Миллер — автор Preact — написал статью про то, почему делегирование событий не лучше обычного addEventListener — "Event Listeners: Delegation VS Direct Binding".

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

У всех подходов к обработке событий есть преимущества и недостатки. Не стоит противопоставлять их друг другу, а выбирать наиболее подходящее решение для текущей ситуации.

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

#jsframeworks #performance

https://jasonformat.com/event-delegation-vs-direct-binding/

Элейджа Мейнор написал небольшой пост про форматирование чисел в JS — "Natively Format JavaScript Numbers".

На сегодняшний день необязательно использовать сторонние библиотеки для форматирования чисел. Number.prototype.toLocaleString() и Intl.NumberFormat могут покрыть очень много случаев. С их помощью можно отформатировать проценты, преобразовать число в короткую форму, указать количество значащих цифр и т.п. Например, вот так можно отформатировать число для российской локали (тысячи отделяются от сотен пробелом) и добавить знак рубля:

const number = 12345;
console.log(
  number.toLocaleString('ru-RU', {
    style: 'currency',
    currency: 'RUB',
  })
);
// 12 345,00 ₽

Статья совсем небольшая, но полезная. Рекомендую заглянуть.

#js

https://elijahmanor.com/format-js-numbers

Пока Chrome ддосит корневые DNS-сервера, Defront Plus ддосит интересными постами своих подписчиков. В канале для патронов уже было опубликовано 50 постов. Вот что там появилось за последние две недели:

- Производительность страниц 404, и как Instagram чуть не лёг из-за favicon
- Почему ::before не работает с img и input
- Какая должна быть скорость загрузки сайта?
- Пропозал создания безопасных модульных рантаймов
- Ментальные модели работы со статической типизацией
- Решение проблемы медленной загрузки файлов по HTTP/2
- Как Shopify переписал сервис и уменьшил время ответа
- Что следует учесть при миграции проекта на TypeScript
- Алгоритм сжатия Broccoli в Dropbox
- Неизвестное будущее Mozilla

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

Хочу сказать большое спасибо всем патронам! Благодаря вам я могу поддерживать и развивать проект.

https://www.patreon.com/myshov

В Chromium планируется добавление Raw Sockets API — API для прямых сетевых соединений. Register опубликовал статью про это API — "Chromium devs want the browser to talk to devices, computers directly via TCP, UDP. Obviously, nothing can go wrong".

Идея Raw Sockets API заключается в том, чтобы предоставить браузерным приложениям возможность работать напрямую с сетевыми сокетами. Это открывает новые сценарии использования web-приложений для работы к сетевыми устройствами (сканеры, принтеры) и реализации полноценных ssh-клиентов, irc-клиентов, клиентов децентрализованных p2p-сетей и т.п с помощью web-технологий. Не все разработчики высказываются положительно относительно нового API. Эприл Кинг — инженер по безопасности Mozilla — очень скептически отзывается о попапе как средстве защиты от нежелательных соединений.

Raw Sockets API находится на стадии разработки прототипа. Предварительный план состоит в том, чтобы добавить его поддержку сначала в Chrome OS, а затем в Chromium.

#experimental #chromium

https://www.theregister.com/2020/08/22/chromium_devices_raw_sockets/
https://github.com/WICG/raw-sockets

Еиджи Китамура на web.dev рассказал о том, как упростить процесс обновления данных для аутентификации с помощью менеджеров паролей — "Help users change passwords easily by adding a well-known URL for changing passwords".

Менеджеры паролей в Safari и Chrome (с версии 86) предоставляют элемент управления для быстрого перехода к изменению пароля. Чтобы он правильно работал, на вашем сайте должен быть настроен редирект со страницы /.well-known/change-password на страницу изменения пароля. Для редиректа лучше всего использовать: 302 Found, 303 See Other или 307 Temporary Redirect.

Редирект для /.well-known/change-password уже поддержали Google, Facebook, GitHub и другие сайты. Если на вашем сайте ещё нет редиректа, то его очень рекомендуется добавить.

#web #security

https://web.dev/change-password-url/

Во фронтенде существует подход с добавлением динамики на страницу с помощью легковесных библиотек, которые расширяют синтаксис HTML и предоставляют средства для DOM-манипуляций и отправки запросов на сервер. В эту категорию попадают библиотеки htmx, unpoly, intercooler (предшественник htmx) и TwinSpark.

Александр Соловьёв написал статью про то, как он внедрил в свой проект TwinSpark, и что в итоге получилось — "A tale of webpage speed, or throwing away React".

TwinSpark разрабатывается Александром. Его библиотека развивает идеи intercooler и решает проблему с большим объёмом загружаемого js, наследованием и батчингом запросов. HTML с необходимым набором атрибутов для TwinSpark создаётся на стороне сервера из React-компонентов (для создания HTML может быть использован любой другой подход). TwinSpark добавляет нужную интерактивность уже поверх готовой разметки, то есть на клиенте React не используется. Внедрение нового подхода в проект Александра заняло четыре месяца. В результате JS уменьшился с 2.5Мб до 40Kб, HTML c 700Кб до 350Кб, и очень сильно улучшились метрики производительности.

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

#jsframeworks #performance

https://solovyov.net/blog/2020/a-tale-of-webpage-speed-or-throwing-away-react/

Eleventy (11ty) — это статический генератор сайтов, который сейчас набирает популярность. Его используют Google, Khan Academy, Netlify. Сайт Defront тоже создаётся с помощью этого движка.

Мальте Убл — инженер из Google — недавно опубликовал шаблон для 11ty, который был оптимизирован для создания высокопроизводительных сайтов. Вот его возможности:
— загружает изображения с внешних источников для их быстрой отдачи клиенту;
— генерирует разные размеры изображений и вставляет их в srcset;
— решает проблему с Cumulative Layout Shift (CLS), извлекая размеры изображений и используя их в атрибутах width и height;
— инлайнит CSS и автоматически удаляет неиспользуемые стили;
— использует иммутабельных URL для изображений и скриптов;
— предзагружает шрифты;
— и делает ещё много всего полезного.

В общем, если вам вдруг понадобится сделать сайт или блог, очень рекомендую присмотреться к 11ty. Работаю с ним уже больше года и вполне доволен его возможностями.

#library #performance

https://www.industrialempathy.com/posts/eleventy-high-performance-blog/

Натан Себастиан собрал подборку советов для создания расширяемых React-приложений — "6 Tips and Best Practices for a Scalable React Project".

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

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

#react

https://blog.bitsrc.io/best-practices-and-tips-for-a-scalable-react-application-db708ae49227

Дэйв Руперт поделился своим мнением про важность разнообразия браузеров — "What is the Value of Browser Diversity?".

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

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

#web #musings

https://daverupert.com/2020/09/the-value-of-browser-diversity/

Увидел новость, что в Chrome 85 для Android появилась поддержка DNS-over-HTTPS. Прочитал статью "A safer and more private browsing experience with Secure DNS" в блоге Chromium, чтобы разобраться в этой теме подробнее.

DNS-over-HTTPS (DoH) — это протокол для безопасного разрешения ip-адреса по названию сайта. DoH предотвращает перехват данных о посещаемых страницах третьими лицами, которые находятся в той же самой сети, что и легитимный пользователь. Эти данные могут быть использованы для фишинга и фарминга. При использовании DoH появляется дополнительный сервер, к которому подключается браузер по HTTPS для разрешения DNS-запросов. HTTPS гарантирует аутентичность, целостность и конфиденциальность DNS-трафика.

Внедрение DoH в Chromium заняло два года, так как DNS уже существует 35 лет и торопливое внедрение могло бы поломать сервисы, использующие старое поведение DNS, например, фильтрацию контента для детей. Более того в некоторых странах (насколько я помню, в Великобритании) отсутствие такой фильтрации могло бы повлечь проблемы с законом для провайдеров интернета.

В Chromium за включение DNS-over-HTTPS отвечает фича "Secure DNS". По умолчанию Chromium пробует использовать сервисы провайдера, чтобы не ломать их механизмы фильтрации, но в настройках браузера (раздел "Security") можно выбрать любого другого провайдера (есть предустановленные сервисы от Google, Quad9, CleanBrowsing, Cloudflare).

#security #chromium

https://blog.chromium.org/2020/05/a-safer-and-more-private-browsing-DoH.html

В Chrome 85 появилась поддержка формата изображений AVIF. Джек Арчибальд написал большую статью про то, в каких случаях он может быть полезен — "AVIF has landed".

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

В статье затрагиваются вопросы производительности при сравнении AVIF c SVG. SVG по качеству превосходит все другие форматы, но сложное векторное изображение может быть очень затратным с точки зрения CPU. Поэтому SVG с большим количеством градиентов и фильтров рекомендуется конвертировать в растровое изображение.

Поддержка AVIF появилась в Chrome 85, в Firefox уже идёт работа над его внедрением. Поддержка AVIF в Safari, скорее всего, тоже не заставит себя долго ждать, так как Apple входит в группу разработчиков AV1.

#graphics #optimization

https://jakearchibald.com/2020/avif-has-landed/

В блоге DebugBear была опубликована статья с обзором техник для улучшения производительности spa-приложений — "Performant front-end architecture".

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

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

#performance

https://www.debugbear.com/blog/performant-front-end-architecture

Иван Греков написал статью об опыте миграции на TypeScript фронтенд-проектов команды Badoo — "Как перенести на TypeScript большую кодовую базу React UI-компонентов".

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

Использованные инструменты и утилиты. Для предварительной оценки кодовой базы и мониторинга прогресса использовали cloc. С помощью утилиты madge был построен граф зависимостей проектов, чтобы определить порядок миграции модулей. Использовали кодмоды для перевода JS-компонентов на TS.

В итоге за три месяца работы было мигрировано 630 React-компонентов.

Рекомендую почитать статью, если планируете мигрировать большой проект на TS (или любую другую технологию).

#migartion #typenoscript

https://habr.com/ru/company/badoo/blog/518246/

Юля Бухвалова написала статью о доступности с большим количеством примеров самых распространённых проблем — "Недоступность в картинках".

В самом начале статьи есть небольшой ликбез (must read) по использованию скринридеров в Windows (Narrator) и macOS (Voice Over). Все скринридеры помогают пользователям перемещаться по сайту, предоставляя списки для заголовков, ссылок, изображений и ориентиров (теги main, header, footer, nav и т.п.)

Пара советов из статьи. Для упрощения работы с формами следует использовать теги fieldset и legend. Не следует верстать на дивах интерактивные элементы, лучше всего использовать вместо них соответствующие элементы из стандарта ( button, input и т.д.) Для изображений img всегда нужно добавлять атрибут alt. Если изображение декоративное, его следует поместить в CSS или использовать пустую строку в описании alt.

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

#a11y #html

http://css.yoksel.ru/inaccessibility/