Саймон Харн рассказал о том, как предотвратить сдвиг контента из-за загрузки web-шрифтов — "How to avoid layout shifts caused by web fonts".

Сдвиг контента (CLS) — это метрика Web Vitals, в будущем она будет влиять на алгоритм ранжирования результатов Google. Самый железный вариант предотвращения сдвига из-за загрузки шрифтов — использование font-display: optional. В этом случае браузер будет ждать загрузки шрифта 100мс, делая фоллбек на системный шрифт после истечения этого времени. Таким образом при первом посещении сайта пользователи с большой вероятностью увидят страницу с фоллбек-шрифтом без сдвига контента; при переходах на другие страницы сайта шрифт будет уже находится в кэше браузера и будет применяться к тексту на странице без задержек.

Если font-display: optional использовать невозможно, тогда нужно оптимизировать время доставки шрифта. Для этого можно использовать сабсеттинг, отказаться от формата woff и использовать woff2, делать предзагрузку шрифтов. Если используется font-display: swap, тогда нужно настроить метрики шрифта фоллбека так, чтобы они совпадали с загружаемым шрифтом, в этом могут помочь font-display modifiers (f-mods) — новые свойства @font-face.

#performance #fonts

https://simonhearne.com/2021/layout-shifts-webfonts

В декабре 2020 года вебу исполнилось 30 лет. Дэниэл Кэо вспомнил ранние дни веба и написал про это статью — "Out of the Matrix: Early Days of the Web".

Дэниэл работал техническим писателем и редактором журнала NeXTWORLD, когда он узнал про Тима Бернерса-Ли и его проект World Wide Web. Дэниэл познакомился с Тимом и захотел опубликовать статью про веб, но ему не получилось убедить главного редактора, так как интернет тогда был в зачаточном состоянии, и им пользовались только учёные из CERN.

Интересно, что самый первый браузер — Nexus, который был сделан Тимом Бернерсом-Ли до Mosaic — имел встроенные инструменты для редактирования HTML-страниц. Потом эту функциональность добавили нативно в SDK NeXTSTEP. Но с релизом браузеров за пределами операционной системы NeXT, эта функция потерялась.

Ещё Дэниэл предложил Тиму использовать вместо HTML новый формат для редактируемого PostScript от Adobe (который получил название PDF). Он организовал встречу Роберта Кайо (одна из ключевых фигур в популяризации веба) c менеджментом Adobe, но, как мы уже знаем, HTML пережил это событие.

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

#web #history

https://blog.yax.com/posts/early-days-of-the-web-1991/

Несколько дней назад команда разработчиков Vue зерилизила Vite 2.0. В статье "Announcing Vite 2.0" Эван Ю рассказал о новом проекте.

Vite — это сборщик и dev server, использующий ESM, для ускорения применения изменений на этапе разработки. По своей философии он очень похож на Snowpack и WMR.

Vite создавался для улучшения разработки Vue-приложений, но команда разработчиков решила сделать его независимым от Vue (на данный момент есть поддержка Vue, React, Preact и LitElement). Из-за смены курса разработки первая версия так и не достигла стабильной версии, поэтому Vite 2.0 можно считать официальной первой стабильной версией.

Vite очень похож на Snowpack, но в нём есть несколько уникальных фич: поддержка автоматического код-сплиттинга для CSS, поддержка многостраничных приложений, есть режим для разработки браузерных библиотек, есть встроенная поддержка монорепозиториев и CSS-препроцессоров.

#tool #bundle

https://dev.to/yyx990803/announcing-vite-2-0-2f0a

Нолан Уолсон рассказал про возможные способы кастомизации web-компонентов — "Options for styling web components".

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

— CSS-переменные. CSS-переменные "протекают" внутрь Shadow DOM и могут использоваться для кастомизации строго заданных параметров. Этот способ был выбран для компонента выбора эмоджи.
— Классы. Пользователь может задать CSS-класс у компонента для выбора заранее определённых вариантов отображения.
— Shadow Parts. Shadow Parts предоставляет возможность гибкой кастомизации предопределённых частей web-компонента.
— Внедрение стилей. Это решение может использоваться в качестве экстренной помощи, так как при его использовании пользователи должны полагаться на внутреннюю структуру компонента, что может привести к проблемам при обновлении компонента.

#webcomponents

https://nolanlawson.com/2021/01/03/options-for-styling-web-components/

В блоге web.dev Томас Штайнер опубликовал подробное руководство по работе со стримами — "Streams—The definitive guide".

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

В руководстве подробно объясняется механизм работы ReadableStream, WritableStream и TransformStream с понятными примерами их использования.

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

#js

https://web.dev/streams/

Дэн Абрамов рассказал о простом, но неочевидном подходе для уменьшения лишних ререндеров React-компонентов — "Before You memo()".

Перед тем как использовать memo и useMemo для предотвращения ререндеров, имеет смысл попробовать разбить компонент на stateful- и stateless-части (поднять вверх стейт). Также можно передать stateless-компонент через пропс в stateful-компонент (поднять вверх контент). При ререндере stateful-компонента переданный через пропс компонент не будет ререндериться. Использование такого подхода откроет в будущем новые возможности для оптимизаций, например, для предотвращения ререндеринга серверных компонентов.

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

#react #performance

https://overreacted.io/before-you-memo/

Вчера вышел Firefox 86. Крис Миллс рассказал про основные новинки релиза — "A Fabulous February Firefox — 86!"

Появилась поддержка CSS псевдокласса :autofill. С помощью этого псевдокласса можно кастомизировать <input> после его автозаполнения.

Добавлена поддержка конструктора Intl.DisplayNames для консистентного перевода регионов, языков и начертаний.

В бете Firefox появилась поддержка CSS-функции image-set() для создания отзывчивых изображений на уровне CSS.

Стала удобнее отладка iframe'ов в инструментах разработчика — добавлена кнопка, с помощью которой можно выбрать контекст отладки.

#release #firefox

https://hacks.mozilla.org/2021/02/a-fabulous-february-firefox-86/

Два дня назад вышел TypeScript 4.2. Дениэл Розенвассер рассказал о всех фичах новой версии.

TypeScript теперь отслеживает использование объединений как альясов типов. Благодаря этому такие альясы отображаются в сообщениях об ошибках, в генерируемых d.ts-файлах и т.д.

В новой версии TypeScript возможно использовать rest-элементы в любой позиции кортежа, но остаётся одно ограничение — они не могут идти после других rest-элементов и до опциональных элементов. Также при деструктуризации кортежей неиспользуемые элементы можно пометить символом подчёркивания _ ( let [_first, second] = getValues(); ), чтобы не возникала ошибка с включённой опцией noUnusedLocals.

Появилась новая опция noPropertyAccessFromIndexSignature. Она отключает возможность использования точки для доступа к тем свойствам объекта, которые определяются с помощью сигнатуры строчного индекса (string index signature).

С сигнатурами конструкторов теперь можно использовать модификатор abstract. Эта фича даёт возможность типизации некоторых ООП-техник.

Если внутри логических выражений с && и || будет находиться функция без её вызова, это будет приводить к ошибке компиляции под флагом --strictNullChecks.

Появилась поддержка флага --explainFiles. С его помощью можно понять, почему файл был включён в процесс компиляции.

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

#release #typenoscript

https://devblogs.microsoft.com/typenoscript/announcing-typenoscript-4-2/

В недавно вышедшем Firefox 86 был включён State Partitioning для предотвращения отслеживания пользователей с помощью кук. Йоханн Хофманн и Тим Хуанг рассказали о принципе его работы в статье "Introducing State Partitioning".

Ранее сторонний ресурс (third-party), подключаемый на страницу, мог установить для пользователя уникальную куку, которая использовалась для сбора информации о посещённых страницах. В Firefox 86 этот механизм отслеживания перестал работать по умолчанию, потому что куки начали изолироваться в пределах родительского сайта (first-party).

Теперь сторонним ресурсам надо получить явное подтверждение от пользователя для доступа к общим кукам. Это можно сделать с помощью Storage Access API: метод document.requestStorageAccess используется для запроса доступа, метод document.hasStorageAccess — для проверки текущего статуса доступа.

На данный момент поддержка Storage Access API есть в Safari, Edge и Firefox. В Chrome она доступна за экспериментальным флагом.

#privacy #firefox

https://hacks.mozilla.org/introducing-state-partitioning/

Нолан Лоусон предлагает следить не только за размерами бандла, но и за другими параметрами, влияющими на опыт работы с сайтом — "JavaScript performance beyond bundle size".

Нолан предлагает обращать внимание не только на размер бандла, но и на стоимость работы кода в рантайме (время парсинга, компиляции и исполнения), на энергоэффективность и объём потребляемой памяти.

Профилировка кода может помочь найти проблемные библиотеки, которые забивают главный поток. Для удобного анализа результата работы профилировщика можно использовать плагин для Webpack — mark-loader. С помощью метода performance.measureUserAgentSpecificMemory, который будет включён по умолчанию в Chrome 89, можно получить информацию о потребляемой памяти с учётом iframe'ов. Для понимания того, насколько сильно сайт съедает батарею, можно использовать профилировщик или Performance Monitor.

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

#performance

https://nolanlawson.com/2021/02/23/javanoscript-performance-beyond-bundle-size/

Уил Бойд рассказал про малоизвестные особенности использования псевдоэлементов ::before и ::after — "Diving into the ::before and ::after Pseudo-Elements".

Статья начинается с самых основ использования ::before и ::after. Затем в ней рассматриваются более изощрённые сценарии использования: создание декоративных линий и декоративной ленты, работа с кавычками ( content: open-quote; и content: close-quote; ), использование изображений в content, установка их альтернативного текста ( content: url(logo.png) / 'logo of the site'; ) и т.п.

Хорошая статья. Рекомендую заглянуть, если хотите узнать больше про ::before и ::after.

#css

https://codersblock.com/blog/diving-into-the-before-and-after-pseudo-elements/

Алекс Руденко из команды разработки Chrome DevTools написал статью про добавление поддержки редактирования стилей, создаваемых с помощью CSS-in-JS-библиотек — "CSS-in-JS support in DevTools".

Возможность редактирования CSS-in-JS стилей появилась в Chrome 85. Для поддержки редактирования стили должны быть представлены как статический текст. В случае с CSS-in-JS статического текста нет, так как такие стили размещаются в памяти во внутренней структуре данных CSSOM. Для добавления возможности редактирования их стали преобразовывать в текст. Для синхронизации мутируемых стилей был добавлен новый механизм, который оповещает бэкенд DevTools при изменении стилей с помощью CSSOM API.

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

#internals #chrome #cssinjs

https://developers.google.com/web/updates/2021/02/css-in-js

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

— Опыт Facebook в уменьшении времени исправления багов
— Как разрабатывается Sublime Text
— Надёжное тестирование производительности
— 10 лет работы над D3
— Почему в Amazon отходят от использования термина "технический долг"
— Оптимальные настройки качества сжатия для WebP и AVIF
— Интервью с Райаном Далом
— Не используйте React.Fragment в переиспользуемых компонентах
— Способы оптимизации загрузки JavaScript-приложений и сайтов
— Мысли о современной web-разработке

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

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

https://www.patreon.com/myshov

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

Добавлена поддержка top level await для JavaScript-модулей.

Стали доступны по умолчанию новые API для работы с железом — WebHID, WebNFC и Web Serial. С их помощью web-приложения могут взаимодействовать с устройствами пользователя без установки драйверов или каких-либо дополнительных программ.

PWA-приложения можно установить только в том, случае когда они поддерживают offline-режим. Ранее была возможность обойти это требование. Начиная с Chrome 89 этот обходной путь будет триггерить сообщение с предупреждением в консоль, а в Chrome 93 будет заблокирован.

Добавлена поддержка Web Share API и Web Share Target API для удобной передачи любых данных из одного web-приложения в другое.

Очень много изменений в инструментах разработчика. Lighthouse был обновлён до седьмой версии. Улучшена работа с куками. Можно ставить точки останова на исключения, вызванные нарушениями Trusted Type. Добавлена поддержка эмуляции устройств со складным экраном и многое другое.

#chrome #release

https://developer.chrome.com/blog/new-in-chrome-89/
https://developers.google.com/web/updates/2021/01/devtools

В Chrome 89 была добавлена поддержка import maps. Гай Бедфорд рассказал, какие преимущества несёт эта фича с точки зрения производительности — "Import Maps Release & Module CDN Launch".

Благодаря поддержке import maps можно использовать bare specifiers в импортах. То есть не import something from './path/to/something.js', а import something from 'something'. По сути это есть не что иное, как соответствие спецификаторов и соответствующих им путей до модулей:

<noscript type="importmap">
{
  "imports": {
    "something": "./path/to/something.js"
  }
}
</noscript>

Благодаря import maps можно обеспечить кэширование кусков JS-приложения без каскадной инвалидации кода при обновлении нижележащих зависимостей. То есть они открывают возможность эффективного кэширования при инкрементальном обновлении web-приложений.

На данный момент поддержка import maps есть только в Chrome 89. Для других браузеров доступен полифилл.

#js #esm #performance

https://jspm.org/import-map-cdn

В блоге CSSSR была опубликована статья про судьбу первых web-браузеров — "История фронтенда: Браузер, который умел всё".

В статье рассказывается про WorldWideWeb — самый первый браузер, над которым работал Тим Бернерс-Ли и который позднее был переименован в Nexus. Рассказывается про систему организации данных для Macintosh — некий прообраз современного веба, но без поддержки сети. С помощью этой системы была сделана знаменитая игра Myst. Ещё в 1991 году вышла первая версия ViolaWWW — браузер, который поддерживал добавление на страницу апплетов-приложений на языке Viola.

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

#web #history

https://blog.csssr.com/ru/article/frontend-history-the-browser-that-could-do-everything/
https://www.youtube.com/watch?v=7nrDctGYOIk

Юна Кравец рассказала о недавних изменениях в Chrome, которые позволяют вынести обработку анимаций на GPU — "Updates in hardware-accelerated animation capabilities".

Chrome уже очень давно обрабатывает некоторые CSS-трансформации на GPU. В Chrome 89 на GPU также стали обрабатываться SVG-анимации. С точки зрения разработчиков, делать ничего не нужно, GPU подхватывает такие анимации автоматически. Также теперь с помощью GPU обрабатываются трансформации, использующие в качестве единиц измерения проценты. В будущих релизах Chrome будет добавлено GPU-ускорение анимаций CSS-свойств background-color и clip-path.

#chrome #css #performance

https://developer.chrome.com/blog/hardware-accelerated-animations/

Амит Шин рассказал о том, как получить позицию курсора мыши на чистом CSS — "How to Map Mouse Position in CSS".

Идея заключается в создании сетки элементов, в каждой ячейке которой задаются кастомные свойства с координатами:

.cell:nth-child(42):hover ~ .content {
  --positionX: 1;
  --positionY: 3;
}

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

#css #trick

https://css-tricks.com/how-to-map-mouse-position-in-css/

Недавно вышло новое официальное руководство по TypeScript, над которым шла работа с 2018 года. Орта Терокс рассказал обо всех основных изменениях — "Announcing the New TypeScript Handbook".

Новая версия руководства была полностью переработана. Теперь это не набор статей, а полноценная книга, которую можно рекомендовать всем, кто только начинает изучать TypeScript. В руководстве нет разделов, связанных с JavaScript, поэтому для совсем начинающих оно не подходит. Чтобы не перегружать читателей информацией, все редкие кейсы использования TypeScript были перемещены в справочник. Руководство доступно онлайн на основном сайте, а также его можно скачать в форматах pdf/ePub для чтения в оффлайне.

#typenoscript #book

https://devblogs.microsoft.com/typenoscript/announcing-the-new-typenoscript-handbook/

Ромэйн Ленз написал статью о том, почему не нужно использовать Express.js — "Why you should drop ExpressJS in 2021".

Ромэйн пишет о том, что Express.js тормозит в развитии. Пятая версия находится в альфе уже шесть лет. Так как JavaScript развивается и разработчики начинают использовать современные фичи, это приводит к проблемам при использовании Express.js. Например, при использовании async/await в мидлварах появляются утечки памяти. Начиная с версии Node.js 15, такой код приводит к крэшам программы.

Вместо Express.js Ромэйн предлагает использовать Fastify или AdonisJS.

#nodejs

https://dev.to/romainlanz/why-you-should-drop-expressjs-in-2021-711

Бэн Шмидт — профессор университета Нью-Йорка — поделился своими мыслями о том, почему JavaScript может захватить Data Science в ближайшем десятилетии — "Javanoscript and the next decade of data programming".

Бэн пишет о том, что всё больше интерфейсов для интерактивной работы с данными строится поверх web-технологий. Основная причина — скорость. Если традиционным инструментам для визуализации данных нужно несколько минут для обработки данных, то для JavaScript-кода нужно всего лишь несколько секунд. Ситуация в будущем станет ещё лучше, когда во всех браузерах появится поддержка спецификации WebGPU, благодаря которой можно будет вынести обработку данных на GPU. Более того с некоторыми ограничениями можно задействовать GPU для обработки данных уже сегодня с помощью WebGL. Ещё автор статья возлагает большие надежды на WebAssembly, благодаря которому в будущем могут появиться удобные инструменты для работы с данными.

#js #datascience #musings

http://benschmidt.org/post/2020-01-15/2020-01-15-webgpu/