Нолан Уолсон рассказал про возможные способы кастомизации 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/

Иан Бин дал несколько рекомендаций по использованию шрифтов — "System fonts don’t have to be ugly".

Во всех операционных системах есть предустановленный набор очень качественных шрифтов. Они могут составить хорошую конкуренцию модным web-шрифтам. Иан предлагает по умолчанию использовать системные шрифты (Georgia, Charter, Palantino, Hoefler, San Francisco, Helvetica, Segoe UI, Arial и т.п.) для оформления текстов на сайте, а web-шрифты оставить только для редких случаев, когда системный шрифт не подходит. Благодаря такому подходу отпадает проблема оптимизации web-шрифтов, и в целом сайт будет загружаться быстрее.

Основная мысль статьи — сайт не обязательно должен выглядеть одинаково во всех браузерах на всех девайсах.

#typography #performance

https://iainbean.com/posts/2021/system-fonts-dont-have-to-be-ugly/

Два года назад Зак Лезерман у себя в твиттере в качестве шутки предложил идею написать кому-нибудь статью, как сделать медленную HTML-страницу, которая бы была быстрой для Lighthouse. Барри Полларду удалось это сделать, о чём он рассказал в статье "Making the slowest 'fast' page".

Сделать медленную страницу, которая бы смогла заработать 100 баллов в Lighthouse, очень трудно. Барри пошёл другим путём — он сделал быструю страницу и "замедлил" её с помощью увеличения времени воспринимаемой производительности. Для этого он перекрасил текст сайта в белый цвет и, спустя 10 секунд, вернул его в нормальный вид.

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

#performance

https://www.tunetheweb.com/blog/making-the-slowest-fast-page/

Алон Кочба из Wix рассказал об опыте улучшения производительности сайтов, сделанных с помощью их конструктора — "How Wix improved website performance by evolving their infrastructure".

Несколько лет назад Wix-сайты представляли собой SPA-приложения, которые рендерились в браузере клиента. Это было основной причиной неудовлетворительной производительности. В прошлом году ребята добавили поддержку серверного рендеринга. Страницы сайтов теперь раздаются с помощью CDN и кэшируется на стороне браузера и сервера. Пользовательская информация больше не попадает на страницу, но подтягивается на стороне клиента. Также была добавлена поддержка HTTP/2 и brotli.

В статье нет информации о том, насколько улучшилась метрики Web Vitals, но в целом разработчики довольны проделанной работой.

#performance

https://web.dev/wix/