Defront — про фронтенд-разработку и не только

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/

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/

Опыт оптимизации памяти 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

Удалённое выполнение кода в популярном 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/

Типизация 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

Релиз 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/

В следующую среду, 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 от Зарплаты 🍻

Использование внешних ресурсов в 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/

Малоизвестные возможности 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/

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

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

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

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

#web

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

Уменьшение объёма изображения с помощью растра и 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/

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/

Релиз 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/

Скрытые проблемы 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/

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/

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

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

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

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

#web #history #ux

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

🎉 Релиз 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 и им активно пользуются. А в этом релизе они добавили это на уровне компилятора.

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

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

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

Михай Парпарита поделился эффективным способом общения с веб-воркером без использования 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