Полифил для предзагрузки 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-javanoscript-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.

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

#typenoscript #history

https://medium.com/hackernoon/the-first-typenoscript-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 #javanoscript #macos

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

Скрытые проблемы preload

Шаби Паникер из Google рассказала о скрытых проблемах preload — "The cost of preload".

Предзагрузка ресурсов с помощью preload может помочь улучшить метрики FCP, LCP и TTI. В тоже время она может мешать быстрой загрузке критических ресурсов и блокировать отрисовку страницы.

Ситуация усугубляется тем, что в Chrome есть баг, из-за которого любой предзагружаемый ресурс попадает в начало очереди загрузок. Тем самым заставляя разработчиков расставлять preload у всех критических ресурсов для достижения оптимальной последовательности загрузки.

Пока в Chrome не исправлен баг, Шаби советует использовать preload только в самых крайних случаях.

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

#performance #chrome

https://docs.google.com/document/d/1ZEi-XXhpajrnq8oqs5SiW-CXR3jMc20jWIzN5QRy1QA/

Релиз Chrome 93

Сегодня вышла новая версия Chrome. Пит Лепаж и Джеселин Ин рассказали об основных фичах релиза — "New in Chrome 93".

Была добавлена поддержка CSS Module Scripts — импорт CSS-файлов в JavaScript. Импортированный CSS можно подключается к document или shadowRoot с помощью свойства adoptedStyleSheets.

На второй этап origin trial перешёл Multi-Screen Window Placement API, с помощью которого можно получить информацию о всех экранах пользователя и программно управлять размещением окон.

Теперь PWA могут быть зарегистрированы в качестве обработчиков URL (эта фича стала доступна в Chrome 92). Добавлена возможность кастомизации контролов управления окном PWA.

В инструментах разработчика добавлена поддержка отладки выражений от контейнера. Появилась поддержка отображения содержимого web bundle во вкладке Network. Добавлены новые опции для копирования строк из консоли. Lighthouse обновился до версии 8.1.

Chrome переходит на четырёхнедельный цикл релизов.

#chrome #release

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

App History API — улучшенный роутинг для SPA

Cэм Торогуд рассказал про новое экспериментальное API для упрощения реализации клиентского роутинга в SPA — "Modern client-side routing: the App History API".

Для управления роутингом в SPA используется History API. History API отвечает за историю браузера, всё остальное (обработка событий навигации, управление переходами между экранами, сохранение временного состояния) ложится на плечи разработчика. App History API устраняет эти недостатки, связывая историю браузера, событие навигации и переходы между экранами.

Работа с App History API происходит с помощью объекта appHistory. Для обработки событий навигации нужно установить обработчик на событие navigate. Обработчик будет перехватывать все события навигации, в том числе при отправке POST-запросов и при программном изменении истории. В API есть встроенные средства для управления процессом перехода на новые экраны SPA с возможностью установки обработчиков на успешный переход или переход с ошибкой.

На данный момент App History API доступен только в бете Chrome 95 за экспериментальным флагом.

#spa #api #experimental

https://web.dev/app-history-api/

Уменьшение объёма изображения с помощью растра и SVG

Зак Лезерман поделился опытом оптимизации тяжёлого изображения — "Vector? Raster? Why Not Both!".

У Зака возникла проблема — SVG с иллюстрацией для сайта занимало 10Мб. Он попробовал экспортировать SVG в разные растровые форматы, наилучший результат был у AVIF — 168Кб. Для дальнейшего уменьшения объёма Зак разделил иллюстрацию на две части — фон и передний план. На фоне находится градиент с простыми геометрическими фигурами, поэтому в SVG он занимает всего 4Кб. На переднем находятся сложные фигуры и фотографии, поэтому для него больше подходит растровый формат, Зак выбрал webp (74Кб). Эти два изображения были скомбинированы в одно с помощью CSS. В итоге объём изображения был уменьшен с 10Мб до 78Кб.

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

#performance

https://www.zachleat.com/web/vector-raster-split/

Причины сломанной загрузки JS и CSS

На сайте правительства Великобритании есть руководство, посвящённое прогрессивному улучшению — "Building a resilient frontend using progressive enhancement".

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

— временные сетевые ошибки;
— браузерные расширения, такие как блокировщики рекламы;
— проблемы сторонних сервисов, которые используются для доставки ресурсов сайта;
— ошибки резолвинга DNS;
— ошибки браузеров;
— блокировка на уровне файрволов;
— изменение содержимого страницы оператором сотовой связи;
— персональные файрволы или антивирусное ПО;
— изменение содержимого страницы провайдерами.

#web

https://www.gov.uk/service-manual/technology/using-progressive-enhancement

Малоизвестные возможности Node.js

Саймон Плендерлит написал несколько небольших статей, посвящённых малоизвестным возможностям Node.js — "What’s new in Node.js core?".

В Node.js появилась встроенная поддержка генерации UUID с помощью метода randomUUID из модуля crypto. Доступно в Node.js v14.17.0 и выше.

Есть поддержка AbortController для отмены асинхронных операций. Доступен в версии 14.17.0 (экспериментально), стабильная поддержка добавлена в 15.4.0.

Для импорта встроенных модулей можно использовать протокол node:. Его использование помогает отделить внутренние модули от внешних: import url from "node:url";. Доступно в v12.20.0 (ESM), v14.13.1 (ESM) и v16.0.0 (ESM, CommonJS).

Появилась поддержка promise-based API — timers/promises и stream/promises (v15.0.0 и выше). Также есть относительно старые fs/promises (первая ревизия API была добавлена в v10.0.0) и dns/promises (v10.6.0).

#nodejs

https://simonplend.com/whats-new-in-node-js-core/

Использование внешних ресурсов в JavaScript без сборки

Ингвар Степанян рассказал о способе подключения ресурсов приложения без сборки — "Bundling non-JavaScript resources".

Современные бандлеры позволяют импортировать стили, wasm-модули, изображения и т.п. После сборки такие импорты превращаются в набор URL, которые без проблем загружаются браузером. С внедрением нативной поддержки esm в браузеры такой подход вызывает проблемы, так как JavaScript-код с импортом внешних ресурсов нельзя использовать без сборки.

В статье предлагается использовать альтернативный паттерн, который распознаётся всеми браузерами — new URL('./relative-path', import.meta.url). Такой подход формирует в рантайме корректный URL ресурса для дальнейшего использования. import.meta.url нужно использовать, чтобы пути резолвились относительно текущего JavaScript-файла, а не относительно HTML-документа. Выражение new URL('...', import.meta.url) также распознаётся современными сборщиками при создании чанков с кодом.

В будущем new URL('...', import.meta.url) может быть заменён методом import.meta.resolve('...') (на данный момент в спецификации не решены некоторые вопросы). Также в браузеры потихоньку начинает проникать поддержка import assertions, но она не покрывает все возможные виды ресурсов.

#bundle #esm

https://web.dev/bundling-non-js-resources/

В следующую среду, 15 сентября в 19:00 приглашаем на Tech Talks Зарплаты.ру в Новосибирске

Поболтаем на две темы:

Full-stack: когда middle - потолок. И чтец, и жнец, и на дуде игрец - правда ли, что full-stack-разработчик умеет всё и один способен тянуть на себе весь проект? Или если способен, то куда? Узкая специализация - ограниченность или экспертность? Приходите поделиться мнением и опытом.

Токсичность в IT:
Каждый из нас рано или поздно на работе сталкивается с токсичными людьми, командами или компаниями. Предлагаем обсудить, что такое токсичность, и как она проявляется в IT-мире. Будем рады услышать про ваш опыт, как вы с этим боролись и какие выводы сделали.

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

Место: руинпаб "Типография", пространство "Camorra"
Адрес: Новосибирск ул. Красный проспект, 22

Ссылка на регистрацию: https://zarplata-ru-events.timepad.ru/event/1768480/

P.S. Welcome-drink от Зарплаты 🍻

Релиз Firefox 92

Вчера вышла новая версия Firefox. Рут Джон рассказала про новинки релиза — "Time for a review of Firefox 92".

Была добавлена поддержка CSS-свойства accent-color, с помощью которого можно изменять цвет элементов форм: чекбокса, радиокнопки, прогрессбара и ползунка. Это очень важное обновление, так как раньше не было возможности изменить цвет у нативных элементов, из-за чего разработчики вынуждены были создавать свои элементы управления.

Реализована поддержка CSS-дескриптора font-adjust у @font-face. Он позволяет тонко настраивать размер глифов, упрощая работу с разными шрифтами на одной странице. Также его можно использовать при решении проблемы сдвига контента из-за несовпадения метрик загружаемого шрифта с дефолтным шрифтом страницы.

В JavaScript-движок была добавлена поддержка нового метода Object.hasOwn(instance,prop), который недавно был утверждён TC39. Поведение этого метода похоже на Object.hasOwnProperty(), но Object.hasOwn() без дополнительных ухищрений работает с объектами, которые были созданы с помощью Object.create(null).

Также в CSS была добавлена поддержка управлением размером строчных букв относительно разных метрик с помощью font-size-adjust для двух значений. Улучшена работа с многоколоночными макетами. В font-family добавлена поддержка system-ui — синонима для семейства системных шрифтов.

#firefox #release

https://hacks.mozilla.org/2021/09/time-for-a-review-of-firefox-92/

Типизация API с помощью кодогенерации TypeScript

Нэйт Андерсон написал статью про использование кодогенерации для покрытия типами нестандартных API — "TypeScript Compiler API: Improve API Integrations Using Code Generation".

В статье рассказывается о том, как автоматически сгенерировать типы из XML-декларации SOAP-сервиса. Для этого используется TypeScript API, с помощью которого можно программно создать любой корректный TypeScript-код.

Логика преобразования SOAP-типов в TypeScript-типы выглядит так. Декларация SOAP-сервиса парсится и из неё вычленяются входные и выходные типы и преобразуются в TypeScript-типы. Получившиеся типы используются для кодогенереации типов всех методов сервиса.

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

#typenoscript

https://blog.appsignal.com/2021/08/18/improve-api-integrations-using-code-generation.html

Удалённое выполнение кода в популярном npm-пакете

Тим Перри нашёл серьёзную уязвимость в npm-пакете pac-resolver (3 миллиона еженедельных загрузок) — "Proxies are complicated: RCE vulnerability in a 3 million downloads/week NPM package".

Администраторы предприятий часто используют PAC-файл для автоматической настройки HTTP-прокси в браузерах и других сетевых программах. Путь до этого файла добавляется вручную или автоматически с помощью протокола WPAD. Пакет pac-resolver упрощает работу с такими файлами в Node.js и является зависимостью proxy-agent. Proxy-agent в свою очередь используют Firebase CLI, AWS CDK и другие утилиты.

PAC — очень старый механизм, который был впервые добавлен в Netscape Navigator 2.0 в 1996-году и стал неофициальным стандартом. Содержимое PAC-файла — обычный JavaScript, который должен запускаться в изолированном контексте. Проблема в том, что pac-resolver запускал этот код с помощью модуля vm, механизм изоляции которого легко обходится, тем самым открывая вектор для удалённого выполнения кода.

Проблема была исправлена два месяца назад в pac-resolver v5.0.0. В новой версии используется пакет vm2, который был сделан специально для запуска потенциально опасного кода.

#security #nodejs

https://httptoolkit.tech/blog/npm-pac-proxy-agent-vulnerability/

Опыт оптимизации памяти Miro

Никита Руденко из Miro поделился опытом оптимизации памяти большого приложения — "Fighting for bytes in the frontend".

Ребята из Miro (популярный инструмент для совместной работы, использующий концепцию виртуальной доски для рисования) в прошлом году столкнулись с проблемой. У пользователей iPad из-за нехватки оперативной памяти ломался интерфейс программы.

Для исправления ситуации была оптимизирована структура данных хранения точек виджетов — вместо массива объектов набор точек стали хранить в виде одномерного типизированного массива. Также для снижения потребления памяти и оптимизации производительности рендеринга начали использовать специальные "сжатые" изображения виджетов в виде упрощённых векторных объектов. Была ещё успешная попытка снизить объём хранимой метаинформации для связанных виджетов, но от этой идеи отказались из-за большого количества UX-вопросов. После всех оптимизаций потребление памяти удалось снизить на 40%.

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

#performance #optimization

https://medium.com/miro-engineering/fighting-for-bytes-in-the-frontend-419c48103ef8