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

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

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

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

В будущем new URL('...', import.iss.oneta.url) может быть заменён методом import.iss.oneta.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.

#typescript

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

VirtualKeyboard API — управление поведением виртуальной клавиатуры

Томас Штайнер написал статью про VirtualKeyboard API — "Full control with the VirtualKeyboard API".

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

VirtualKeyboard API решает подобные проблемы. С его помощью можно отслеживать открытие и закрытие клавиатуры, получать её размеры и адаптировать необходимым образом страницу. Для этого используется объект navigator.virtualKeyboard. В рамках этого API также появилась возможность настройки поведения виртуальной клавиатуры для полей ввода с помощью атрибута virtualkeyboardpolicy.

В данный момент поддержка VirtualKeyboard API есть только в бете Chrome 94.

#api #mobile

https://web.dev/virtualkeyboard/

VirtualKeyboard API на практике

Брамус Ван Дамм написал статью про практическое применение VirtualKeyboard API — "Prevent content from being hidden underneath the Virtual Keyboard by means of the VirtualKeyboard API".

В статье рассказывается о том, как реализовать раскладку элементов страницы с адаптацией под открытие виртуальной клавиатуры. Для решения подобных задач можно использовать переменные окружения CSS, которые были добавлены в рамках VirtualKeyboard API: keyboard-inset-top, keyboard-inset-right, keyboard-inset-bottom и т.п. Например, адаптация нижнего блока под открытие клавиатуры на CSS может выглядеть так:

.bottom-box {
  position: fixed;
  bottom: 0;
  margin-bottom: calc(20px + env(keyboard-inset-height));
}

Есть небольшой нюанс. Чтобы воспользоваться VirtualKeyboard API, браузеру необходимо сообщить о своём намерении управлять перекрытием с помощью вызова кода
navigator.virtualKeyboard.overlaysContent = true. Это не очень удобно, поэтому Брамус завёл ишью с обсуждением альтернативных механизмов включения VirtualKeyboard API.

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

#css #api #mobile

https://www.bram.us/2021/09/13/prevent-items-from-being-hidden-underneath-the-virtual-keyboard-by-means-of-the-virtualkeyboard-api/

Сокращение информации в User-Agent Chrome

В январе 2020 года разработчики Chrome объявили о намерении сократить передаваемую информацию в User-Agent для улучшения приватности. Из-за пандемии этот процесс отложили, и вот несколько дней назад был опубликован обновлённый план — "User-Agent Reduction Origin Trial and Dates".

Начиная с Chrome 92 (июль 2021) при обращении к методам navigator.userAgent, navigator.appVersion, navigator.platform выводится предупреждение. С четвёртой фазы (в Chrome 101) актуальной станет только мажорная версия; MINOR.BUILD.PATCH будут обнулены — Chrome 101.0.0.0. В шестой фазе (Chrome 110) на смартфонах будет удалена информация о модели устройства. В седьмой фазе (Chrome 113) миграция на новый формат User-Agent будет завершена. Если сайтам нужна детальная информация о клиенте, то они смогут получить к ней доступ с помощью User Agent Client Hints.

#chrome #announcement

https://blog.chromium.org/2021/09/user-agent-reduction-origin-trial-and-dates.html

Анимирование открывающихся блоков без лагов

Сэм Торогуд из Google рассказал о том, как реализовать аккордеон, который будет работать плавно даже на слабых устройствах — "How I Learnt To Stop Worrying And Love Animating The Box Model".

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

Для решения этой проблемы нужно вынести сдвигаемые элементы в отдельный слой рендеринга с помощью свойства will-change. Чтобы зря не тратить ресурсы (страница с большим количеством слоёв потребляет больше памяти), можно устанавливать will-change перед началом анимации и удалять после завершения.

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

#performance #css

https://whistlr.info/2021/box-model-animation/

В каких случаях можно использовать any

Стэфан Баумгартнер поделился своими мыслями о том, в каких случаях можно использовать тип any в TypeScript — "TypeScript: In defense of any".

Хорошим тоном считается отказ от any, но в некоторых случаях это невозможно. Например, при постепенной миграции большой кодовой базы на TypeScript. В тех местах, где нужно "нахакать". Также any незаменим при использовании сторонних библиотек без типизации.

Во всех случаях использование any нужно контролировать. Этому может помочь опция noImplicitAny, которая обязывает разработчика указывать тип any явно.

#typescript

https://fettblog.eu/typescript-any-is-ok/

Способы уменьшения размера JavaScript-бандла

Бэн Шварц поделился советами о том, как держать размер JavaScript-бандла под контролем — "Small Bundles, Fast Pages: What To Do With Too Much JavaScript".

В статье Бэн рассказывает про общие вещи: о влиянии больших бандлов на производительность страницы, об оптимальном размере загружаемого кода (300kb) и о бюджете производительности. Есть более конкретные советы, например, использовать плагин Import Cost во время разработки, чтобы размер подключаемых библиотек был всегда на виду. Также есть рекомендации по использованию стороннего кода: о хостинге кода на своём сервере и использовании фасадов для уменьшения времени инициализации страницы.

В общем, хорошая обзорная статья для тех, кто начинает погружаться в тему производительности.

#performance #bundle

https://calibreapp.com/blog/bundle-size-optimization

Релиз Chrome 94

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

При создании двумерного контекста рисования canvas появилась возможность выбора цветового пространства. По умолчанию используется sRGB (оно было и раньше, сейчас это закреплено на уровне спеки), можно также выбрать цветовое пространство P3.

Стал доступен WebCodecs API. Благодаря ему приложения могут использовать кодеки для декодирования видеопотока с поддержкой аппаратного ускорения. Это очень полезно для видеоредакторов, приложений видеоконференций и стриминга.

В рамках Origin Trial можно включить WebGPU. WebGPU позволяет эффективно использовать ресурсы видеокарты для обработки графики и других вычислений.

Был добавлен метод scheduler.postTask() для управления задачами. Под капотом этот метод использует планировщик браузера. Добавлена экспериментальная поддержка CSS-свойства scrollbar-gutter. Добавлена поддержка VirtualKeyboard API. Поддержка WebSQL задеприкейчена и запланирована к удалению в Chrome 97.

В инструментах разработчика появилась локализация интерфейса на 80 языков. Теперь можно посмотреть список всех активных Origin Trials на вкладке Application при выборе фрейма верхнего уровня. Появилась индикация для контейнеров, инвертирование активного фильтра на вкладке Network и т.д.

#chrome #release

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

Релиз Safari 15

На сайте Apple Developer был опубликован список самых интересных фич, которые появились в новой версии Safari — "Safari 15 Release Notes".

Улучшена интеграция с iCloud Keychain Password Manager. Теперь на странице можно включить автодополнение для проверочных кодов, генерируемых в приложении. Работает интеграция с QR-кодами аутентификации. В экспериментальном режиме добавлен "passkeys" (реализация WebAuthn для Safari).

В CSS добавлена реализация aspect-ratio. Для цветов можно использовать новый синтаксис lab(), lch() и hwb(). Добавлена возможность использования цветовых пространств в color().

В HTML появилась поддержка theme-color для тега meta, с помощью которого можно управлять цветом вкладок и нейтральной области страницы.

В JavaScript-движке добавлены top level await, Error.cause, BigInt64Array, BigUint64Array. Добавлена поддержка приватных методов и акcессоров классов. Воркеры и сервис воркеры теперь поддерживают ESM.

Стабилизирована поддержка WebGL 2. Добавлено аппаратное ускорение для кодека VP9 на всех iPad с iPadOS 15. Появилась поддержка Safari Web Extensions на iOS и iPadOS. В WebAssembly добавлена поддержка ссылочных типов, стриминговой компиляции и балковых операций с памятью.

#safari #release

https://developer.apple.com/documentation/safari-release-notes/safari-15-release-notes

Новая CSS-инфраструктура Chrome DevTools

Крити Сапра написала статью про обновлённый подход подключения CSS в кодовой базе Chrome DevTools — "Modernising CSS infrastructure in DevTools".

В кодовой базе DevTools очень долгое время использовалась устаревшая модульная система. С её помощью происходило разрешение зависимостей между JS-файлами и подключение CSS. При переходе на TypeScript возник вопрос отказа от старой модульной системы и миграции существующих стилей. Самым подходящим вариантом стала автоматическая конвертация стилей в JS-файлы, которые экспортируют объект CSSStyleSheet. Таким образом из любого сконвертированного файла можно импортировать стили и применить их к веб-компонентам с помощью adoptedStyleSheets.

Такое решение позволило избавиться от проблемы дублирования стилей, от потенциальной коллизии названия классов и подготовило код для дальнейшей миграции на CSS Module Scripts. В статье также говорится о том, что сама спецификация CSS Module Scripts родилась из задачи обновления модульной системы в DevTools.

#css #migration #chrome

https://developer.chrome.com/blog/modernising-css-infra-in-devtools/

Обзор CSS Cascade Layers

Брамус Ван Дамм написал статью про Cascade Layers — "The Future of CSS: Cascade Layers (CSS @layer)".

Полгода назад София Валитова написала хорошую статью про @layer. В статье Брамуса дополнительно рассматриваются краевые случаи использования слоёв: поведение import! внутри слоя, использование Cascade Layers с медиавыражениями, запрет на перемешивание @import/@namespace и @layer. Подробно разбирается мотивация добавления слоёв в стандарт с большим количеством примеров.

Экспериментальная поддержка @layer уже есть в Canary-версиях Firefox и Chrome. Также ведутся работы по его добавлению в WebKit.

#css

https://www.bram.us/2021/09/15/the-future-of-css-cascade-layers-css-at-layer/

Анализ JS-бандла с помощью Lighthouse Treemap

Сиа Кармаленгос написала статью про новый инструмент анализа JS-бандлов, доступный в Lighthouse — "Explore JavaScript Dependencies With Lighthouse Treemap".

В последних версиях Lighthouse появилась новая фича — визуализация JS-бандлов с помощью Treemap. Если вы знакомы с webpack-bundle-analyzer, то уже можете представить себе новый инструмент. Основное отличие Treemap в Lighthouse — возможность анализа бандлов любых сборщиков. Если сборка происходит с генерацией сорс-мапов, то в Treemap будут отображаться названия модулей. Но самая интересная функция — оценка покрытия кода. Если включить опцию "unused bytes", то можно оценить сколько кода было загружено, но не выполнено.

Поддержка Lighthouse Treemap уже доступна в сервисе PageSpeed Insights, Lighthouse Node CLI и Chrome Canary.

#tool #js #bundle #performance

https://sia.codes/posts/lighthouse-treemap/

Клон Quake в 13kb

Каждый год проходит ивент js13kGames. Его участники разрабатывают браузерные игры размером не более 13kb. В этом году Доменик Саблевски сделал клон Quake и рассказал о нюансах его разработки — "Q1K3 – Making Of".

В Q1K3 используется динамическая генерация текстур, чтобы уменьшить общий размер игры. Для упрощения создания таких текстур Доменик разработал визуальный редактор. В качестве формата карт используется сильно модифицированный формат карт Quake .map. В игре используется восемь моделей, которые модифицируются при запуске игры для создания большего разнообразия персонажей и предметов. Например, изменяются пропорции модели человека для создания разных моделей противников. Для музыки и эффектов используется Sonant-X — JS-библиотека синтеза звука. Для сжатия кода игры используется uglifyJS и Roadroller.

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

#webgl

https://phoboslab.org/log/2021/09/q1k3-making-of

Потенциальные проблемы с сертификатами Let's Encrypt

Вчера Скот Хелм написал статью о том, что 30 сентября истёк срок действия корневого сертификата IdentTrust DST Root CA X3, который используется Let's Encrypt. Из-за этого на старых устройствах перестали открываться некоторые сайты, так как сертификат Let's Encrypt используют миллионы HTTPS-сайтов. Эта ситуация возникла из-за прекращения обновления прошивок старых устройств.

IdentTrust и Let's Encrypt придумали решение, чтобы корневой сертификат оставался валидным до 2024 года для Android-устройств с версиями ОС выше 2.3.6. Пользователи Android с более старыми версиями столкнутся с проблемами.

Сертификат IdenTrust DST Root CA X3 невалиден для:
— Windows < XP SP3
— macOS < 10.12,
— iOS < 10
— Android < 7.1.1 (версии >= 2.3.6 будут работать с ISRG Root X1 cross-sign)
— OpenSSL <= 1.0.2
— Ubuntu < 16.04
— Debian < 8
— Mozilla Firefox < 50
— Java 8 < 8u141
— Java 7 < 7u151,
— NSS < 3.26
— Amazon FireOS (Silk Browser)

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

#announcement #security

https://scotthelme.co.uk/lets-encrypt-old-root-expiration/

Поддержка телеграм-каналов

Если среди вас есть авторы небольших телеграм-каналов и вы хотите его немного попиарить, киньте мне на него ссылку в лс (@myshov) или чат канала (@defrontchat). Сделаю подборку каналов и размещу её тут, разумеется бесплатно. С вашей стороны никаких обязательств нет. Главное условие, чтобы в канале было менее тысячи подписчиков (если чуть больше, тоже ок) и чтобы он был про разработку.

Зачем мне это надо? Я считаю, что нужно помогать другим. Defront тоже в самом начале поддержали безвозмездно, и, возможно, поэтому я его не забросил. Ну и вдруг среди вас есть будущий Ричард Хикки, терять таких людей не хочется.