В 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'. По сути это есть не что иное, как соответствие спецификаторов и соответствующих им путей до модулей:

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

Благодаря 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 для чтения в оффлайне.

#typescript #book

https://devblogs.microsoft.com/typescript/announcing-the-new-typescript-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 в ближайшем десятилетии — "Javascript 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/

Алекс Котлярский из Facebook рассказал про историю развития React API — "React API evolution".

Прошло уже почти восемь лет с момента релиза первой публичной версии React. За этот период подход к написанию компонентов поменялся несколько раз. Сначала компоненты создавались с помощью React.createClass причём в версии 0.3.0 нужно было самостоятельно биндить методы, использующие this, с помощью React.autoBind. В 0.4.0 автобиндинг был включён по умолчанию. Затем официальным механизмом для создания компонентов стали ECMAScript классы и функциональные компоненты. По ходу дела разработчики стали использовать High Order Components (HOC) для композиции поведения компонентов. HOC не были идеальным решением для работы с поведением, поэтому в 2019 году ребята из команды React представили хуки.

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

#react #history

https://frantic.im/react-api-evolution

Майк Уэст в блоге Chromium написал статью про средства предотвращения неявных утечек данных между сайтами в пределах одного процесса браузера — "Mitigating Side-Channel Attacks".

Браузеры полагаются на концепцию origin для предотвращения явной утечки данных между сайтами. Но существуют атаки по сторонним каналам, которые могут обойти ограничения браузера и прочитать любые пользовательские данные любых сайтов. Например, с помощью атаки Spectre можно было читать данные сайтов-соседей, которые попадали в один браузерный процесс. Для этого небезопасный сайт example.com мог добавить на страницу ресурс другого сайта ( <img src="https://email.com/user_emails.json" /> ) и получить доступ к его содержимому через единое адресное пространство памяти процесса. Чтобы предотвратить Spectre, браузеры по умолчанию отключили небезопасные API и включают их лишь только для тех сайтов, которые можно изолировать между разными процессами (Site Isolation).

Для предотвращения атак подобного типа можно использовать другие методы, даже если браузер не поддерживает Site Isolation:

— Ограничение ответов со стороны сервера на основе анализа HTTP-заголовков Sec-Fetch-*,
— Ограничение возможности загружать ресурс как подресурс (то есть как в примере с img выше) с помощью cross-origin-resource-policy (CORP),
— Предотвращение загрузки документа в iframe'ах с помощью X-Frame-Options: SAMEORIGIN и CSP-политик,
— Ограничение доступа к window opener'а с помощью Cross-Origin-Opener-Policy (COOP),
— Предотвращение атак MIME-type confusion с помощью X-Content-Type-Options: nosniff и установки корректных заголовков Content-Type.

#security

https://blog.chromium.org/2021/03/mitigating-side-channel-attacks.html

Эмили Старк из команды Google Chrome поделилась советами о том, как эффективно читать спецификации web-стандартов — "Tips for reading web standards".

Многие стандарты обновляются часто по мере развития браузеров. Поэтому в первую очередь нужно смотреть последние черновики спецификаций (editor’s/latest draft), которые включают в себя все последние нововведения. Очень помогает в понимании спецификации вводная часть (explainer). Её Эмили советует читать от начала до конца, так как она содержит информацию для упрощения понимание спеки в целом. С другой стороны, чтобы разобраться в поведении какой-либо фичи, читать саму спецификацию от начала до конца не обязательно.

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

#spec

https://emilymstark.com/2021/03/14/tips-for-reading-web-standards.html

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

— Ускорение рендеринга страниц сайта с помощью prefetch
— Ленивая загрузка компонентов React Native
— Лучшие практики и их влияние на производительность
— Опыт использования WebRTC в большом проекте
— Частые ошибки при работе с промисами и async/await
— Исследование производительности страницы с помощью Cloudflare Workers
— Тайпгарды TypeScript для валидации данных
— Мысли об управлении состоянием приложения
— Использование мобильного Safari для анализа производительности
— Влияние наложения элементов на лишние перерисовки

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

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

https://www.patreon.com/myshov

Хемант — делегат TC39 — опубликовал статью, посвящённую "Error Cause" — предложению о добавлении в стандарт ECMAScript.

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

Для того чтобы причину оригинальной ошибки можно было найти в предсказуемом месте, например это важно при разработке DevTools, в пропозале "Error Cause" предлагается передавать оригинальную ошибку с помощью объекта со свойством cause вторыми параметром в конструктор объекта Error:

throw new Error('There was a problem', {
    cause: err
});

На данный момент пропозал "Error cause" находится на третьем этапе добавления в стандарт. Его поддержка уже есть в JS-движках Chakra и JavaScriptCore.

#js #proposal

https://dev.to/hemanth/error-cause-in-javascript-425d

В блоге DebugBear была опубликована статья, посвящённая распространённым проблемам при работе с <link rel="preload">, — "Common problems with rel='preload'".

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

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

#performance

https://www.debugbear.com/blog/rel-preload-problems

Бен Фрейн рассказал о новом черновике спецификации вложенности в CSS — "CSS Nesting – the last piece of the puzzle".

Недавно Адам Аргайл представил сообществу черновик спецификации, над которым он работает вместе с Табом Аткинсом. В этой спецификации описывается синтаксис вложенности, который похож на аналогичный синтаксис из SASS и LESS. Основное отличие — нужно использовать @nest при размещения вкладываемого селектора в качестве потомка:

.selector {
    width: 100%;
    @nest .other-selector & {
        color: #333;
    }
}

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

#css #proposal

https://benfrain.com/official-css-nesting-the-last-piece-of-the-puzzle/

Big news everyone!

Я присоединился к Russian MDN Team — буду помогать поддерживать русскоязычную часть MDN (перевод сайта, перевод и улучшение документации, ревью входящих пулл реквестов и т.п.) Моя работа над MDN — это волонтёрская деятельность, и она была бы невозможна без вас.

Спасибо за то, что читаете и поддерживаете канал!

Эрик Лоуренс из команды разработки Edge рассказал про особенности работы метода window.close в разных браузерах — "window.close() Restrictions".

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

Все браузеры реализуют close немного по-разному. Это связано с тем, что стандарт был написан уже после того, как close появился браузерах. Chromium, например, не проверяет, была ли страница открыта с помощью JS, а смотрят на наличие opener.

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

#js

https://textslashplain.com/2021/02/04/window-close-restrictions/

Chrome 92 будет предотвращать небезопасный доступ к сервисам локальной сети. Обо всех подробностях рассказали Эиджи Китамура и Титуан Ригоди в статье "Private Network Access (CORS-RFC1918) updates".

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

Начиная с Chrome 90 браузер будет предупреждать о небезопасных запросах при обращении к ресурсам локальной сети. В Chrome 92 такие запросы перестанут работать по умолчанию. Чтобы они продолжали работать, сайт-инициатор запроса и целевой сайт должны работать по HTTPS. Также в будущем будут проверяться CORS-заголовки, разрешающие доступ к ресурсу (пока эта часть спецификации находится на стадии обсуждения).

#security #chrome

https://developer.chrome.com/blog/private-network-access-update/