Эдди Османи написал большую статью про элемент <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

Андрей Мелихов на канале ДевШахты опубликовал вторую часть видео, посвящённую Server-Sent Events — "Server-Sent Events: Снимаем ограничения".

В первой части Андрей рассказывал про основные концепции использования API и про решаемые ей задачи (простая альтернатива веб-сокетам, однонаправленный канал связи с сервером). Вторая часть посвящена использованию SSE в реальных проектах.

При использовании SSE поверх первой версии HTTP есть ограничение на максимальное количество подключений к источнику данных — в рамках одной страницы нельзя сделать больше шести подключений. Эту проблему можно обойти переходом на HTTP/2. Также при создании подключения с помощью конструктора EventSource нет возможности передать дополнительные HTTP-заголовки, например, для авторизации. Это ограничение можно обойти с помощью кук.

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

#api #nodejs #video

https://www.youtube.com/watch?v=v6Fc4FQwNa4

В мае вышла новая мажорная версия Angular. Марк Тексон рассказал о всех нововведениях релиза — "Angular v12 is now available".

— Экосистема Angular продолжает миграцию на пайплайн компиляции и рендеринга Ivy; View Engine с 12-ой версии задеприкейчен и будет удалён в одном из будущих релизов.

— Добавлены инструменты для автоматической миграции на новый формат идентификаторов сообщений i18n.

— Protractor (инструмент E2E-тестирования Angular-приложений) больше не используется при создании новых проектов. Его дальнейшая судьба пока неизвестна.

— Теперь @Component поддерживает инлайн SASS-кода. Добавлена поддержка новой модульной системы SASS. Angular CDK и Angular Material больше не поддерживают node-sass.

— Добавлена поддержка Nullish Coalescing в шаблонах. Завершена миграция на Webpack 5 и добавлена поддержка TypeScript 4.2. Команда ng update по умолчанию переключена в production-режим. Задеприкейчена поддержка IE11, она будет удалена полностью в следующей мажорной версии.

#angular #release

https://blog.angular.io/angular-v12-is-now-available-32ed51fbfd49

Мэттью Гауде — разработчик SpiderMonkey — написал статью про опыт имплементации приватных полей класса в JavaScript-движке — "Implementing Private Fields for JavaScript".

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

Также в статье разбираются нюансы работы c приватными полями. Оказывается, приватные поля могут быть добавлены к любому объекту, даже если он был явно закрыт от изменений с помощью Oblect.seal(). Насколько я понимаю, это "побочный эффект" спецификации, и его не стоит использовать для решения своих задач.

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

#js #internals #spec #firefox

https://www.mgaudet.ca/technical/2021/5/4/implementing-private-fields-for-javascript

Недавно вышел Lighthouse 8. Самым значимым изменением в релизе стало изменение оценки "Performance Score". Каролина Щур в статье "How Lighthouse 8 Changes Affect Your Metrics" рассказала, как именно поменялась эта оценка.

Были изменены веса метрик FCP, SI, TTI, TBT и CLS. Теперь наибольшее влияние будут оказывать TBT (Total Blocking Time, +30% от общего веса всех метрик) и CLS (Cumulative Layout Shift, +10%). Если на вашем сайте была хорошая оценка, но в новой версии Lighthouse она упала, это означает, что при открытии страницы много времени занимает инициализация и выполнение клиентского кода или из-за того, что на странице происходит сдвиг контента.

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

Lighthouse 8 уже доступен в PageSpeed Insights; его поддержка в Chrome появится в версии 93.

#performance #release #lighthouse

https://calibreapp.com/blog/lighthouse-8

Джек Франклин — участвует в разработке Chrome DevTools — реализовал на React и Svelte небольшое приложение для трекинга времени с сохранением данных в Firebase и рассказал о своём опыте в статье "Comparing Svelte and React".

В статье сравнивается простота интеграции с аутентификацией Firebase, работа с веб-воркерами, условный рендеринг, реактивность, композиция компонентов, стилизация. По результатам сравнения победил Svelte, так как в нём проще работать с сайд-эффектами. Кодовая база Svelte в целом также оказалась проще. Из коробки идут средства для работы со стилями. Как бы то ни было Джек пишет, что ему нравится работать и с React, и со Svelte.

Немного субъективная статья, но всё равно интересная. Рекомендую заглянуть.

#jsframeworks #react #svelte

https://www.jackfranklin.co.uk/blog/comparing-svelte-and-react-javascript/