За прошедшие две недели в канале для патронов 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 на время гибернации канала списываться не будут.

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

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

Хочу немного прервать молчание в канале. Тем более, что есть очень крутые поводы.

У дружественного канала @webnya сегодня день рождения. От души поздравляю Сергея и Романа и желаю дальнейшего развития! Очень рекомендую подписаться на Вебню, если вы этого ещё не сделали.

В другом дружественном канале @ufostation сегодня вышел подкаст-интервью с разработчиками Яндекс.Браузера. Сергей очень давно хотел записать этот подкаст. Рад видеть, что всё получилось.

Веб-версия SQLite с поддержкой сохранения изменений

Джеймс Лонг (автор Prettier) представил свой новый проект absurd-sql — порт SQLite для веба с поддержкой сохранения изменений в IndexedDB — "A future for SQL on the web".

В вебе пока нет производительного API для работы с большими массивами данных. Идёт работа над Storage Foundation API, который позволит устранить этот недостаток, но его поддержка есть только в Chrome в экспериментальном режиме.

Джеймс попробовал решить эту проблему с помощью адаптации WebAssembly-версии SQLite, в которой данные сохраняются не в память, а на диск с помощью IndexedDB. Такое решение позволило увеличить скорость записи и доступа на несколько порядков благодаря долгоживущим транзакциям, использованию курсоров и пакетной обработки запросов. Он назвал свой проект absurd-sql, так как браузеры (кроме Chrome) для реализации IndexedDB под капотом используют SQLite. То есть буст производительности достигается благодаря WebAssembly-версия SQLite, которая в конечном счёте использует другую нативную версию SQLite.

Проект находится в экспериментальном режиме, но потенциал у него есть. Как минимум благодаря absurd-sql теперь можно портировать в веб такие приложения, для которых критична скорость записи и чтения данных.

#project #storage #experimental

https://jlongster.com/future-sql-web

Производительность стилизации в shadow DOM

Нолан Лоусон провёл небольшое исследование производительности стилизации в shadow DOM — "Does shadow DOM improve style performance?".

В пайплайне рендеринга браузера этап стилизации может занимать значительное время. В теории shadow DOM может его сократить, так как браузеру достаточно обработать инкапсулированные элементы. Проведённый бенчмарк подтвердил эту гипотезу, но только для сложных селекторов. Выигрыша относительно простых селекторов для id и class нет.

Выводы из статьи. Вариант оптимизации стилизации с помощью shadow DOM можно рассматривать при проектировании фреймворков. Shadow DOM не даёт прироста производительности относительно CSS Modules и других подобных решений для инкапсуляции стилей.

#css #performance #benchmark

https://nolanlawson.com/2021/08/15/does-shadow-dom-improve-style-performance/

Бесшовные переходы между экранами SPA с помощью shared element transition API

Джейк Арчибальд рассказал о новом пропозале для создания бесшовных переходов между экранами SPA — "Smooth and simple page transitions with the shared element transition API".

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

Эти проблемы призван решить shared element transition API. С его помощью можно легко создавать простые переходы между экранами и сложные переходы с разделяемыми элементами. Вот так реализуется простой переход:

async function navigateToSettingsPage() {
  await document.documentTransition.prepare({
    rootTransition: 'cover-left',
  });
  updateDOMForSettingsPage();
  await document.documentTransition.start();
}

Shared element transition API пока доступен в Chrome в экспериментальном режиме. Также на данный момент его можно использовать только в рамках одной страницы, но у авторов спецификации есть планы по его расширению для обеспечения бесшовных переходов между разными страницами сайта.

#chrome #api #spa

https://developer.chrome.com/blog/shared-element-transitions-for-spas/

26 августа в 19:00 приглашаем на Tech Talks Зарплаты.ру в Новосибирске

Локацию выберем по количеству регистраций, недалеко от площади Ленина. Каждого оповестим лично.

2 горячие темы: «Архитектура и производительность web-приложений» и «Нужно ли высшее образование в IT»

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

А вот и ссылка на регистрацию: https://zarplata-ru-events.timepad.ru/event/1739999/

Полифил для предзагрузки JavaScript-модулей с проверкой целостности

Гай Бедфорд — автор jspm и SystemJS — рассказал о своих опытах реализации кроссбраузерной предзагрузки JavaScript-модулей с проверкой целостности — "ES Module Preloading & Integrity".

В нативной модульной системе модули загружаются после загрузки их родителей. Чтобы ускорить загрузку нижележащих модулей, можно использовать предзагрузку с помощью <link rel="modulepreload">. Ещё можно включить проверку целостности с помощью атрибута integrity. Проблема в том, что modulepreload и integrity поддерживаются только в Chrome.

Гай в своей статье предлагает использовать полифил для поддержки modulepreload и integrity во всех браузерах и рассуждает о том, как ещё может быть реализована проверка целостности JavaScript-модулей.

#esm #performance #security

https://guybedford.com/es-module-preloading-integrity

Использование лоадеров в Node.js

Арал Балкан рассказал об использовании лоадеров в Node.js на примере импорта текстовых файлов — "Make anything a JavaScript module using Node.js ESM Module Loaders".

В Node.js есть экспериментальная поддержка лоадеров. Лоадер — это код, расширяющий поведение import. Лоадеры можно использовать для автоматической транспиляции, для загрузки кода из сети, для компиляции шаблонов, преобразования React, Vue, Svelte-компонентов и т.п. В статье разбирается пример создания ладера для импорта текстовых файлов с помощью библиотеки node-esm-loader. Эта библиотека автоматически подключает лоадеры из файла .loaderrc.js. Без библиотеки лоадеры подключаются с помощью флага --experimental-loader.

Очень интересная фича, но на данный момент она находится в стаусе эксперимента.

https://ar.al/2021/05/27/make-anything-a-javascript-module-using-node.js-esm-module-loaders/

Как Google Closure Compiler помог в разработке TypeScript

Люк Хобан рассказал об истории появления TypeScript — "The first TypeScript demo".

В 2010 году команда разработки Office задумалась об экспансии в веб. Разработчики хотели использовать типизацию и средства для улучшения эргономики разработки, но подходящих инструментов не было.

Стив Люко увидел потребность в новом инструменте и начал работать над Strada (первое название TypeScript). Через некоторое время к нему присоединился Люк Хобан, он помог в разработке парсера. Они хотели успеть сделать полноценный прототип к началу внутренней конференции, но не успевали, так как Стив повредил кисть. Нужно было написать тайпчекер. Люк придумал хак. Они изменили компилятор так, чтобы JavaScript генерировался с аннотациями типов для Google Closure Compiler. Этот код отправлялся в веб-версию компилятора на сервера Google для проверки типов. Демка заработала, в проект поверили, и затем появилась первая версия TypeScript.

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

#typescript #history

https://medium.com/hackernoon/the-first-typescript-demo-905ea095a70f

Взаимодействие с веб-воркером без прерывания цикла событий

Михай Парпарита поделился эффективным способом общения с веб-воркером без использования SharedArrayBuffer — "Communicating With a Web Worker Without Yielding To The Event Loop".

Автор статьи работал над веб-версией эмулятора ОС старых Макинтошей. Архитектура эмулятора разделена на две основные части: UI и поток эмуляции, работающий в веб-воркере. Чтобы эмуляция работала плавно, для обмена данными между UI и веб-воркером используется SharedArrayBuffer. Поддержка SharedArrayBuffer на данный момент отключена в Safari. Михай нашёл альтернативное решение.

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

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

#api #webworkers

https://blog.persistent.info/2021/08/worker-loop.html

Corepack — интеграция yarn и pnpm в Node.js

Сегодня в основную ветку Node.js был слит пул-реквест с кодом утилиты Corepack для запуска yarn и pnpm без их явной установки.

Использование yarn или pnpm в проекте, управляющимся с помощью npm, может быть источником ошибок. Для предотвращения подобных ситуаций предназначен Corepack. Corepack — это мост между Node.js и сторонними пакетными менеджерами (yarn и pnpm), перехватывающий их запуск.

Если в package.json есть конфиг packageManager с указанием нужного пакетного менеджера, то запуск постороннего менеджера будет прерываться, а Node.js выведет соответствующее сообщение. Если пользователь будет запускать нужный пакетный менеджер, который не установлен в системе, то перед запуском он будет автоматически загружен из сети и сохранён в кеш.

Corepack будет поставляться вместе с новыми версиями Node.js 16-ой ветки. На данный момент внедрение Corepack носит экспериментальный характер.

#nodejs #experimental

https://github.com/nodejs/node/pull/39608
https://github.com/nodejs/corepack

🎉 Релиз TypeScript 4.4 🎉

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

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

- Улучшили Control Flow Analysis. Теперь, так называемые type guards, можно выносить в отдельные переменные и TypeScript не потеряет эту информацию по пути. Например, вы хотите проверить что что-то строка const isString = typeof someParam === 'string' и дальше вы можете писать просто if(isString) {}, TypeScript такое скушает (раньше это было ошибкой компиляции). И таких примеров побольше, можете почитать у них в посте.

- Все catch блоки по умолчанию приводятся к unknown типу (за флагом strict). Unknown тип это более безопасный вариант неизвестного типа, по сравнению с any. Я об этих типах, как раз, недавно писал. С этим релизом, TypeScript будет ошибки в catch блоках неявно приводить к unknown. И вам, собственно, нужно будет проверить что ошибка это та ошибка, которую вы ожидаете или нет.

- С этим релизом добавилась возможность иметь "inlay hints". Я с таким часто встречаюсь при разработке на Rust и, если честно, меня это немного бесит. Но, знаю людей, которым это очень даже заходит. Речь идёт о том, что в IDE у вас будут добавляться имена параметров к вашим аргументам или выведенный тип возврата функции будет добавлен как "inlay hint" возле вашей функции и так далее. Насколько я знаю, такое есть давно в Intelliji и им активно пользуются. А в этом релизе они добавили это на уровне компилятора.

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

Почему ссылки синие?

Элиза Бланшар написала статью про то, почему на многих сайтах ссылки синего цвета — "Why are hyperlinks blue?"

В первых интерфейсах для гиперссылок использовался чёрный цвет с подчёркиванием или рамками. С распространением цветных мониторов гиперссылки стали приобретать разные цвета, например, в клиенте Gopher (предтеча веб) использовался зелёный цвет. Mosaic стал первым браузером, который закрепил за ссылками привычные цвета: синий для обычных ссылок и тёмно-фиолетовый для посещённых. Почему был выбран синий цвет для обычных ссылок, точно неизвестно. Есть теория, что на этот выбор повлиял интерфейс Windows, который закрепил за синим цветом сигнал интерактивности.

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

#web #history #ux

https://blog.mozilla.org/en/internet-culture/deep-dives/why-are-hyperlinks-blue/

jsc — интерпретатор JavaScript, встроенный в macOS

Крейг Хокенберри написал статью про малоизвестную утилиту jsc — "jsc: My New Best Friend".

Все устройства с macOS идут в комплекте с jsc — интерпретатором JavaScript на базе движка JavaScriptCore. Бинарник находится по пути /System/Library/Frameworks/JavaScriptCore.framework/Versions/Current/Helpers/jsc. В cтарых версиях macOS по пути /System/Library/Frameworks/JavaScriptCore.framework/Versions/A/Resources/jsc.

Крейг пишет, что jsc используется командой разработки WebKit для запуска тестов. Возможно, что это так, но я не смог найти про это информацию. Нашёл, что jsc используется для поддержки выполнения скриптов в Swift- и Objective-C-программах.

Утилита jsc — это не замена Node.js, но она может оказаться полезной для запуска простых скриптов, когда Node.js под рукой нет.

#tool #javascript #macos

https://furbo.org/2021/08/25/jsc-my-new-best-friend/