Вчера вышла новая версия 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/

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

— Список нетехнических навыков для опытных разработчиков
— Нестандартное использование функций плавности
— Организация работы с npm-скриптами
— Использование Babel в современном TypeScript-проекте
— Корреляция между Performance Score в Lighthouse и Core Web Vitals
— Функции плавности (easing functions) в CSS
— Как Facebook кодирует видео
— Кастомный REPL для Node.js
— SVG и доступность
— Этапы написания статьи и способы снятия писательского блока

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

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

https://www.patreon.com/myshov

Джейк Арчибальд написал статью о том, кам добиться чёткого отображения фотографий на экранах с высокой плотностью пикселей, не теряя качества и сохранив разумный вес файлов — "Serving sharp images to high density screens".

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

Ещё можно использовать медиавырыжаение -webkit-min-device-pixel-ratio с тегом <source>, чтобы браузер смог выбрать подходящее изображение в зависимости от текущей ситуации.

Полезная статья. Рекомендую почитать.

#performance

https://jakearchibald.com/2021/serving-sharp-images-to-high-density-screens/

Томас Штайнер написал статью про Storage Foundation API — "High performance storage for your app: the Storage Foundation API".

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

Эту проблему призван решить Storage Foundation API. Он предоставляет средства для производительной работы с хранилищем данных и включает в себя набор примитивов, работа с которыми напоминает работу с обычной файловой системой. С его помощью можно получать информацию о доступном месте, создавать/удалять/переименовывать файлы, производить запись/чтение данных со смещением и т.п.

На данный момент экспериментальная поддержка Storage Foundation API есть только в Chrome в рамках программы Origin Trial.

#api #chrome #experimental

https://web.dev/storage-foundation/

Будущее HTTP клиента в Node.js

В Node.js существует 3 встроенных модуля для HTTP запросов: HTTP, HTTPS и HTTP/2. Из названий, в общем-то, понятно для чего каждый из них предназначен. Все эти модули используют встроенный модуль Net для осуществления запросов.

Но обычно с этими модулями напрямую мы не работаем. Самый популярный пакет-обертка — это request. (он, кстати, задепрекейчен) Следующий по популярности это node-fetch, ну а догоняет его got от Синдре Сорхуса. Где-то в районе четвёртого места появляется axios.

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

И здесь мы переходим к undici. Этот непопулярный клиент (52 000 установок в неделю против более 20 000 000 у каждого из пакетов выше) написаный Маттео Калина (со-автор fastify и член TSC Node.js) фундаментально отличается от всех остальных библиотек — он использует модуль Net в обход встроенных http и https. Так же используется WASM билд парсера llhttp. За счёт этого undici в разы быстрее, но что более интересно — в документации Node.js будет ссылка на undici. Т.е. это будет один из рекомендованных способов для работы с HTTP.

Но отвлечёмся на node-fetch и axios: их популярность более чем очевидна — зачем мне учить 2 разных API для сервера и клиента, если я могу использовать одну и ту же библиотеку и всё работает? Тем более учитывая, что в ноде начинают появляться Web API, например Crypto. А ишью с просьбой добавить fetch в ноду вот уже 3 года, но недавно началось интересное движение: один из членов репозитория ноды запостил скрин с использванием fetch из ноды со словами «now who wants to write tests for it :P». Конечно, это ничего не значит, но немного приближает нас к наличию fetch в ноде.

Так же нужно отметить, что существует undici-fetch и скорей всего он будет вмерджен в сам undici. Опять же, сейчас это не более чем размышления на тему, но, возможно, именно undici — будущее HTTP в Node.js.

Отдельно оставлю ссылки на ключевые ишью:
Future of the Node HTTP Client
Implement window.fetch into core

Юна Кравец и Алекс Тотик рассказали о результатах работы над улучшением таблиц в Chrome — "TablesNG Resolves 72 Chromium Bugs for Better Interoperability".

На протяжении нескольких лет разработчики Chrome переделывали механизм рендеринга таблиц, так как старая архитектура не отвечала новым требованиям. Эта инициатива получила название TablesNG. Благодаря ей было решено много проблем. Например, была исправлена совместимость таблиц и position: sticky, улучшен рендеринг границ и исправлены проблемы с субпиксельной геометрией, которые приводили к проблемам с выравниванием при изменении масштаба страницы.

TablesNG был включён по умолчанию в Chrome 91.

#chrome

https://developer.chrome.com/blog/tablesng/

Несколько дней назад вышла новая версия Next.js. Команда разработчиков фреймворка рассказала о новинках релиза — "Next.js 11".

— В новую версию попали наработки Google, которые включают в себя разные оптимизации и правила eslint, предотвращающие использование паттернов, приводящих к деградации производительности.

— Добавлена новая реализация загрузчика Babel, ускоряющая время пересборки приложения.

— Добавлен новый компонент Script, упрощающий управление приоритетами загрузки скриптов.

— Компонент Image теперь может генерировать width и height автоматически для улучшения метрики CLS. Была добавлена возможность автоматического создания плейсхолдеров изображений.

— Добавлена экспериментальная автоматическая миграция кодовой базы Create React App на Next.js.

— Добавлен Next.js Live (Preview Release), предоставляющий удобные средства коллобарации.

— Завершена миграция на Webpack 5.

#release #jsframeworks

https://nextjs.org/blog/next-11

Всем привет!

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

Это означает что Defront переходит в режим поддержки, то есть посты в канале теперь будут публиковаться гораздо реже. Также временно останавливаю работу над Defront Plus. Донаты с Patreon на время гибернации канала списываться не будут.

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

Хочу поблагодарить всех за поддержку канала. Берегите себя!