Брайан Люиз Рамирез рассказал об использовании Local Overrides для анализа производительности сайта — "Using Chrome Local Overrides To Optimize Page Speed".

Local Overrides — это фича Chrome DevTools, с помощью которой можно временно подменить любой ресурс сайта. Например, в инструментах разработчика можно поправить index.html, добавить исправленный HTML в Local Overrides, и при повторном переходе на сайт вместо оригинального index.html будет браться его изменённая версия.

Этот трюк очень хорошо подходит для исследования влияния потенциальных оптимизаций. Для упрощения анализа исправлений автор статьи поделился своим скриптом для сбора метрик.

Рекомендую почитать статью и поэкспериментировать с Local Overrides. Эта фича может быть полезна для любых быстрых экспериментов.

#performance #debug

https://blr.design/blog/local-overrides/

Пару дней назад Эрик Симонс — создатель StackBlitz, online-песочницы для разработки приложений — рассказал о новой фиче проекта — "Introducing WebContainers: Run Node.js natively in your browser".

WebContainers — это проприетарный механизм для запуска Node.js-приложений внутри браузера с помощью WebAssembly. В StackBlitz он используется для создания локальной изолированной среды для разработки серверных приложений внутри браузера (Next.js, NestJS). Несмотря на исполнение кода с помощью wasm-версии Node.js работает всё быстро. В статье написано, что сборка приложения в WebContainer быстрее локальной сборки на 20%. Этот результат получен благодаря использованию кастомного npm-клиента (об этом Эрик написал в комментариях на HackerNews).

Кроме скорости у WebContainers есть другие плюсы. Потенциальные вредоносные скрипты не смогут получить доступ к машине-хосту. Очень просто разворачивать новые среды, что хорошо подходит для быстрого тестирования фич или создания примеров кода с воспроизведением ошибок. Есть бесшовная интеграция с отладчиком Chrome DevTools

В общем, интересная технология, но на данный момент она находится в статусе беты и работает только в Chromium-based браузерах.

#nodejs #webassembly #announcement

https://blog.stackblitz.com/posts/introducing-webcontainers/
https://news.ycombinator.com/item?id=27223012

Барри Поллард рассказал про новые CSS-дескрипторы директивы @font-face, помогающие уменьшить сдвиг контента после загрузки шрифта, — "A New Way To Reduce Font Loading Impact: CSS Font Descriptors".

Для управления загрузкой шрифтов используется директива font-display. Очень часто её используют со значением swap, так как текст страницы с ней появляется сразу и посетителям страницы не нужно ждать загрузки шрифта. Но при использовании font-display: swap возникает проблема со сдвигом контента, из-за которой посетители во время чтения текста могут потерять текущую позицию в тексте.

Для решения этой проблемы был придуман подход с использованием Font Loading API и сопоставлением метрик фоллбек-шрифта с метриками загружаемого шрифта. Этот подход работает, но он не очень удобен в реализации. По этой причине в рамках спецификации CSS Fonts Module Level 5 были добавлены новые дескрипторы size-adjust, descent-override, line-gap-override, advance-override, с помощью которых можно задать дополнительные метрики для фоллбек-шрифта, уменьшая непредсказуемый сдвиг контента. В коде это выглядит так:

@font-face {
  font-family: 'Lato';
  src: url('/fonts/Lato.woff2') format('woff2');
  font-weight: 400;
}

@font-face {
  font-family: "Lato-fallback";
  size-adjust: 97.38%;
  ascent-override: 99%;
  src: local("Arial");
}

h1 {
  font-family: Lato, Lato-fallback, sans-serif;
}

На данный момент поддержка descent-override, line-gap-override, advance-override уже есть в Chrome и Firefox. Поддержка size-adjust появилась недавно в Chrome Canary и в Firefox за экспериментальным флагом.

#performance #fonts #ux #css

https://www.smashingmagazine.com/2021/05/reduce-font-loading-impact-css-descriptors/

Вчера вышла новая версия Chrome. Пит Лепаж и Джеселин Ин рассказали про новые фичи релиза — "New in Chrome 91".

В десктопной версии Chrome было добавлено API для доступа к файлам из буфера обмена. Доступ к файлам из буфера возможен только при обработке события paste.

Появилась возможность разделения сохранённой информации из менеджера паролей между разными доменами. Это полезно для тех сайтов, которые используют общий бэкенд для управления пользователями на разных доменах, например, google.com и google.ru.

В File System Access API добавлены новые опции для задания директории по умолчанию и задания дефолтного имени файла. Появилась полноценная поддержка Web Assembly SIMD. У фавиконок теперь можно использовать атрибут media, с помощью которого можно менять иконку сайта в зависимости от текущей темы операционной системы.

В DevTools появился инструмент для визуальной отладки scroll-snap. Добавлен инспектор памяти для анализа ArrayBuffer и памяти WebAssembly. Появилась опция для тестирования Content-Encoding. Улучшена поддержка дебага приватных полей классов. Улучшена фича для отображения структуры файла (outline) на вкладке "Sources" и т.д.

#chrome #release

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

Вчера зарелизился TypeScript 4.3. Дениэл Розенвассер рассказал о всех фичах новой версии.

Улучшена работа с сеттерами и геттерами. Теперь возможно указывать разные типы для чтения/записи свойств классов и объектов (separate write types).

Для решения проблем со случайным переопределением членов родительского класса теперь можно использовать ключевое слово override и флаг компиляции --noImplicitOverride.

Улучшен вывод строковых шаблонных типов при использовании шаблонных строк и типов-параметров в дженериках.

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

Добавлена реализация приватных полей классов из ECMAScript. Улучшено сужение типов (type-narrowing) при работе с дженериками, Хелпер ConstructorParameters теперь можно использовать с абстрактными классами. С включённой опцией strictNullChecks теперь нельзя использовать промисы без await внутри условий. Улучшен механизм автодополнения импортов.

#typescript #release

https://devblogs.microsoft.com/typescript/announcing-typescript-4-3/

Эдди Османи написал большую статью про элемент <img> и его влияние на производительность — "The Humble img Element And Core Web Vitals".

В статье Эдди рассказывает про разные аспекты использования изображений, которые могут оказывать негативный эффект на метрики Core Web Vitals. Например, если у изображений не установлены атрибуты width и height, загрузка изображений будет приводить к смещению элементов на странице, ухудшая метрику Cumulative Layout Shift (CLS). Если основное изображение сайта загружается слишком поздно, например, после выполнения клиентского кода, то будет ухудшаться метрика Largest Contentful Paint (LCP). В этом случае нужно добавить изображение в HTML-разметку или загрузить его с помощью preload, если предыдущий вариант не подходит.

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

#performance #html

https://www.smashingmagazine.com/2021/04/humble-img-element-core-web-vitals/

Владан Дзерик из Facebook рассказал об изменении приоритетов разработки Flow — "Clarity on Flow’s Direction and Open Source Engagement".

Разработка Flow теперь полностью сконцентрируется на потребностях Facebook: быстрой проверке типов на огромной кодовой базе, улучшению типобезопасности и DX. Проект будет продолжать разрабатываться на GitHub, но пулл-реквесты и ишью, не совпадающие с видением разработчиков, будут закрываться. Встроенные определения типов (DOM, Node, React и т.п.) будут вынесены в репозиторий flow-typed, чтобы их обновление не было привязано к релизному циклу Flow. Также планируют добавлять новые синтаксические конструкции. И по этому поводу хочется немного поспекулировать.

Исторически Flow позиционировался как "JavaScript с типами", то есть как тайпчекер. С добавлением новых синтаксических структур он превратится в полноценный язык. По сути Flow становится языком для фронтенда, кодовая база которого на 100% принадлежит Facebook. [Также вы можете вспомнить про Rescript (ex-ReasonML), но он полагается на bucklescript, разработанный Bloomberg, и насколько я знаю, Facebook не участвует в его развитии.] С учётом того, что в Facebook работают довольно сильные спецы по дизайну языков (знаю точно, что там работает Эрик Майер), в итоге может получиться что-то интересное.

#flow #announcement

https://medium.com/flow-type/clarity-on-flows-direction-and-open-source-engagement-e721a4eb4d8b

Sparkplug — новый неоптимизирующий компилятор JavaScript

Оказывается V8 9.1 был добавлен новый неоптимизирующий компилятор Sparkplug. Благодаря отсутствию оптимизации, процесс компиляции происходит гораздо быстрее. По сути, этот компилятор переводит байткод в соответствующие им инструкции. Такой подход позволяет быстрее начать выполнять код на этапе загрузки, а также переключаться на оптимизированный код и обратно. Подход дает выигрыш, так как на старте многие оптимизации все равно не возможны из-за отсутствия фидбека по исполнению кода. На данный момент получилось достичь 5-15% прироста производительности, но пока реализованы не все идеи связанные с новым компилятором. Больше технических деталей и графиков в статье блога V8: https://v8.dev/blog/sparkplug

Макс Бок написал статью о том, почему выражения от контейнера очень важны для дальнейшего развития веб-компонентов — "Container Queries in Web Components".

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

#webcomponents #css #experimental

https://mxb.dev/blog/container-queries-web-components/

Недавно вышла новая версия Jest. Тим Секингер рассказал о новинках релиза — “Jest 27: New Defaults for Jest, 2021 edition”.

— В интерактивном режиме появилась возможность поочерёдного перехода по упавшим тестам.
— Инлайн-снапшоты теперь можно использовать без подключения Prettier.
— Инициализация тестов была ускорена на 70%.
— Продолжается работа над внедрением ESM. Её поддержка уже есть в кастомных раннерах, репортерах и watch-плагинах.
— Добавлена асинхронная поддержка transform для эффективной транспиляции с помощью esbuild, Snowpack и Vite.
— Реализации функций describe, it, beforeEach заменена соответствующими реализациями из jest-circus.
— Теперь используется новая реализация для мока таймеров. В очень редких случаях они могут сломать тесты, но есть возможность отката на старую версию с помощью jest.useFakeTimers("legacy").
— Изменено дефолтное тестовое окружение на node. Для возврата к старому поведению нужно использовать опцию "testEnvironment": "jsdom".
— Изменена логика работы функции done. Её коллбек нельзя вызвать более одного раза и нельзя комбинировать вызов done с возвратом промиса. Блоку describe запрещено возвращать какие-либо значения.
— Модули, загружающиеся с помощью опций testEnvironment, runner, testRunner и snapshotResolver, теперь транспилируются.
— Удалены задеприкейченные методы jest.addMatchers, jest.resetModuleRegistry, jest.runTimersToTime.

#testing #tool #release

https://jestjs.io/blog/2021/05/25/jest-27

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

— Разница между хорошими и отличными библиотеками компонентов
— Технологический стек SpaceX
— Чем похожи REST и GraphQL
— Определение статуса активности текущего таба
— Сложности реализации корректного поведения кнопок
— Противостояние продуктовых и платформенных разработчиков
— Уменьшение объёма node_modules с помощью трассировки
— Будущее разработки веб-приложений
— Опыт разработки PWA телевизионной компании
— Почему ассёрты не могут заменить юнит-тесты

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

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

https://www.patreon.com/myshov

Девид Соммерс рассказал о том, почему при разработке сайтов не нужно фокусироваться на айфонах, даже если они преобладают в аналитике — "Stop building websites for iPhones".

Девид разрабатывает сервисы для аренды жилья в Соединённых Штатах. В аналитике одного из его проектов видно значительное преобладание айфонов. Это результат того, что строка User-Agent Safari не меняется для разных устройств (iPhone 5, SE, 6, 7, 8, X, 11), тем самым создавая иллюзию того, что у пользователей производительные устройства. Проанализировав данные по айфонам с учётом разрешения экрана (благодаря разрешению можно примерно предсказать конкретную модель iPhone) и других моделей смартфонов оказалось, что примерно 38%-45% посетителей сайта используют медленные устройства.

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

#performance #mobile

https://blog.rentpathcode.com/analyzing-performance-e7aed196df64

Вчера вышла новая версия Firefox. Крис Миллс рассказал о новых фичах релиза — "Looking fine with Firefox 89".

Появилась поддержка медиафичи forced-colors: active, благодаря которой можно понять, отображается ли страница в ограниченной цветовой палитре (например, с включённым режимом повышенной контрастности в Windows).

Добавлены директивы line-gap-override, ascent-override и descent-override для @font-face. С их помощью можно изменять метрики фоллбек-шрифта для уменьшения сдвига содержимого после загрузки веб-шрифта.

Содержимым элементов <input> и <textarea> теперь можно управлять с помощью document.execCommand() с сохранением истории редактирования, выравнивая уровень поддержки этого метода с другими браузерами.

Добавлена реализация PerformanceEventTiming из Event Timing API, предназначенного для измерения времени обработки событий.

В JavaScript по умолчанию включена поддержка top-level await. ArrayBuffer на 64-битных системах теперь может использовать до 8Гб памяти (раньше было ограничение 2Гб).

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

#firefox #release

https://hacks.mozilla.org/2021/06/looking-fine-with-firefox-89/

Скотт О'Хара написал статью про деактивацию ссылок с учётом доступности — "Disabling a link".

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

Полностью отключить ссылку можно удалением атрибута href. После удаления href скринридеры не будут считать ссылку ссылкой, поэтому нужно добавить role="link". Чтобы скринридеры анонсировали неактивный статус, нужно добавить aria-disabled="true".

В коде деактивированная ссылка с учётом всех требований будет выглядеть так:

<a role="link" aria-disabled="true">
  Learn something!
</a>

#a11y #html

https://www.scottohara.me/blog/2021/05/28/disabled-links.html

Диего Хаз — автор библиотеки компонентов Reakit — рассказал о принципе разработки базовых компонентов — "Introducing the Single Element Pattern".

При разработке приложений Диего выделяет понятие "базовый компонент" — фундаментальную часть приложения, следующую определённым правилам, благодаря которым кодовая база проекта легко масштабируется и не усложняется в поддержке (принцип Singel). Правила:

— Компонент рендерит только один элемент (в редких случаях несколько)
— Компонент не должен ломать приложение при возникновении исключений
— Рендерит все HTML-атрибуты, переданные как пропсы
— Мёржит стили, передаваемые как пропсы
— Добавляет все обработчики событий, передаваемые как пропсы

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

#react #vue #angular #svelte

https://www.freecodecamp.org/news/introducing-the-single-element-pattern-dfbd2c295c5d/

Том МакРайт рассказал о своём подходе к работе с зависимостями — "Vendor by default".

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

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

#npm #js #musings

https://macwright.com/2021/03/11/vendor-by-default.html

Лин Кларк опубликовала статью, посвящённую оптимизации работы JavaScript-кода в WebAssembly-окружении — “Making JavaScript run fast on WebAssembly”.

Некоторые платформы ограничивают набор оптимизаций, которые могут быть применены к JavaScript-коду. Например, на iOS и игровых консолях нельзя использовать JIT-компилятор, поэтому JS-движки там могут работать только в режиме интерпретатора. Это ограничивает спектр задач, который может быть решён с помощью JS. Участники Bytecode Alliance (Fastly, Mozilla, Igalia) работают над решением на базе WebAssembly, которое позволит ускорить выполнение JS-кода на таких платформах и достичь уровня производительности JIT-компиляторов ранних версий JavaScript-движков.

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

В статье говорится о том, что подобный подход может использоваться не только с JavaScript, но и с Python, Ruby, Lua.

#js #internals #webassembly

https://bytecodealliance.org/articles/making-javascript-run-fast-on-webassembly

Сегодня Стэфан Джудис твитнул про то, что в Chrome 91 появилась поддержка JSON-модулей. Это новая фича JavaScript, с помощью которой можно использовать import с JSON-файлами. Твит Стэфана дополнил Аксель Раушмайер ссылкой на статью про Import Assertions.

Синтаксис для импорта JSON немного отличается от стандартного импорта:

// статический импорт
import config from './data/config.json' assert { type: 'json' };

// динамический импорт
import('./data/config.json', { assert: { type: 'json' } })

Добавление assert декларирует намерение разработчика импортировать файл заданного типа. Это нужно делать явно, потому что на расширение имени файла в мире веба полагаться нельзя.

Import Assertions находится в статусе пропозала на stage 3. Он открывает дорогу для импорта не только JSON, но и WebAssembly-модулей и CSS-файлов.

#js #proposal #chrome

https://2ality.com/2021/01/import-assertions.html

Команда React поделилась планами разработки следующей мажорной версии библиотеки — "The Plan for React 18".

В React 18 будет добавлен автоматический батчинг обновлений стейта компонентов, новые API (например, startTransition) и стриминговый серверный рендерер с поддержкой React.lazy. Изменится работа с конкурентным режимом. Он будет включаться автоматически при использовании новых фич, которые требуют этот режим. Такая стратегия упростит миграцию приложений на React 18.

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

Также была опубликована альфа-версия React 18. Команда React призывает авторов библиотек поэкспериментировать с ней и поделиться фидбеком.

#react

https://reactjs.org/blog/2021/06/08/the-plan-for-react-18.html

Фред Шотт — автор проекта Snowpack — представил первую публичную бета-версию статического генератора сайтов Astro — "Introducing Astro: Ship Less JavaScript".

Astro помогает создавать быстрые статические сайты с помощью популярных компонентных фреймворков (React, Vue, Svelte, Preact) или с помощью обычного HTML и JavaScript. По умолчанию он настроен так, чтобы на клиент не попадал JavaScript. Если какому-то компоненту для работы требуется дополнительный код, он загружается и инициализируется независимо от самой страницы.

Есть поддержка инициализации компонентов "по требованию" с загрузкой кода компонента только в том случае, когда он попадает во вьюпорт браузера. Есть поддержка TypeScript, Scoped CSS, CSS Modules, Sass, Tailwind, Markdown, MDX и т.п.

#announcement #ssg

https://astro.build/blog/introducing-astro