Недавно в Node.js 13.2.0 появилась стабильная поддержка ECMAScript modules. Это событие можно считать началом "Великого исхода с CommonJS на ESM". Шучу. CommonJS будет продолжать жить и здравствовать, пока вся экосистема JS не перейдёт на нативную модульную систему. Тем не менее разработчикам библиотек теперь надо иметь в виду, что пакеты могут быть импортированы в CommonJS- и ESM. Какими способами можно поддержать оба окружения, Аксель Раушмайер рассказал в статье "Hybrid npm packages (ESM and CommonJS)".

Основным механизмом для создания гибридных пакетов будет новое поле exports в package.json, поддержка которого находится в экспериментальном режиме за флагом --experimental-conditional-exports. Благодаря ему один и тот же спецификатор импорта можно будет использовать как в CommonJS, так и в ESM. Логика работы exports похоже на switch-case. Символ точки используется для обозначения main:

{
  "type": "commonjs",
  "main": "./commonjs/entry.js",
  "exports": {
    ".": {
      "require":  "./commonjs/entry.js",
      "default": "./esm/entry.mjs"
    }
  }
}

Node.js поддерживает условия: require — для импортов из CommonJS, node — для Node.js, default — для всех импортов, не попавших под условие require и node. Другие платформы и инструменты могут поддерживать свои собственные условия, например: browser, electron, deno, react-native.

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

#esm #nodejs #npm

https://2ality.com/2019/10/hybrid-npm-packages.html

Скорее всего мы все сталкивались с эффектом "прыгающей страницы", когда при чтении статьи на экране смартфона текст прыгает из-за загружающихся изображений. Как этого избежать, Крейг Баклер рассказал в статье "Jank-free page loading with media aspect ratios".

Страница сдвигается из-за того, что в макетах с отзывчивым дизайном мы не можем задать жёсткие размеры у изображений, чтобы браузер зарезервировал для них место, так как размер может быть любым. Но браузер может рассчитать размер изображения, зная пропорции изображения и его ширину или высоту. В будущих версиях Chrome и Firefox появится поддержка определения пропорций на основе атрибутов width и height. Также разрабатывается спецификация для нового CSS-свойства aspect-ratio. Но пока поддержка пропорций не появится во всех браузерах, можно использовать трюк с пропорциональным отступом (если для padding использовать проценты, то отступ будет высчитываться на базе ширины элемента).

Концептуально проблема с "прыгающей страницей" решена в спецификации Scroll Anchoring. Проблема в том, что на данный момент эта спека не поддерживается Safari и, соответственно, всеми браузерами на iOS.

Статья на удивление очень подробная для такой специфичной темы. Очень рекомендую почитать.

#css #specification #ui

https://blog.logrocket.com/jank-free-page-loading-with-media-aspect-ratios/

Недавно увидел твит от разработчика Chrome, в котором он написал, что перевод пропозала Temporal в stage 3 запланирован на февраль. Temporal — это современная замена объекта Date. В 2017 году Мэгги Джонсон-Пит написала две статьи про причины добавления в стандарт нового объекта — "Fixing JavaScript Date".

API существующего объекта Date было скопировано в 1995 году из Java. Это были ранние годы для Java, поэтому java.Util.Date там был плохо проработан. Всё было настолько плохо, что в Java 1.1, которая была выпущена в 1997 году, фактически все существующие методы были объявлены устаревшими и заменены новыми. В JavaScript не было исправлений Date из-за того, что это бы сломало web.

Спустя 20 лет было решено сделать независимую реализацию API для работы с датами и временем, которая получила название Temporal. Её ключевые отличия от Date: иммутабельность, исправленный парсинг строки в дату, исключение дополнительной секунды, добавлены методы для работы с временными зонами, предусмотрено будущее расширение спецификации для работы с негригорианскими календарями и т.п.

Библиотеки для работы со временем потеряют свою актуальность, после того как Temporal будет поддержан во всех браузерах. Для того чтобы не сломать старые браузеры, можно будет пользоваться полифиллом.

#date #tc39 #history #future

https://maggiepint.com/2017/04/09/fixing-javanoscript-date-getting-started/
https://maggiepint.com/2017/04/11/fixing-javanoscript-date-web-compatibility-and-reality/

C 2009 года проходит событие, когда весь декабрь на сайте calendar.perfplanet.com публикуются статьи про производительность. Первого декабря появилась статья Стояна Стефанова, про то как отслеживать деградацию производительности компонентов — "JavaScript component-level CPU costs".

Стоян предлагает измерять производительность количеством инструкций, которые требуются процессору для рендеринга компонентов. Количество инструкций, в отличие от времени, более предсказуемая величина, так как она не сильно зависит от окружения. Получить количество инструкций можно с помощью трассировки в Chrome. Автоматизировать сбор метрик можно с помощью Puppeteer. Но не всё так гладко, так как для выполнения одного и того же кода может требоваться разное количество инструкций из-за сборщика мусора или оптимизаций. Чтобы корректно подсчитать метрику, не рекомендуется запускать один и тот же код несколько раз. Для того чтобы исключить операции, вызванные GC, необходимо вычесть количество инструкций GC (можно получить в трассировке) из общего количества инструкций.

Идея интересная, но мне кажется сомнительным гонять эти проверки перед каждым коммитом, как предлагается в статье.

#performance #ui #chrome

https://calendar.perfplanet.com/2019/javanoscript-component-level-cpu-costs/

Вчера вышел Firefox 71. Крис Миллс из Mozilla рассказал о последних новинках в браузере — "Firefox 71: A year-end arrival".

В этом релизе очень много сил было вложено в инструменты разработчика. Сейчас панель с консолью открывается на 40% быстрее. Добавили многострочный редактор кода для консоли (попробовал, очень удобная штука). Есть изменения в панели "Network": теперь можно искать по всем загруженным ресурсам, блокировать загрузку любых ресурсов и дебажить вебсокеты. Во время отладки рядом со строками кода появляется inline-превью переменных (также как в Chrome Dev Tools). Если в панели с брекпойнтами на событиях поставить галку "log", то браузер будет логировать события в консоль, не останавливая выполнение кода.

В CSS была включена поддержка clip-path: path для создания произвольных масок. Включена поддержка сабгридов. Добавлен column-span для многоколоночных макетов. Высота и ширина изображений теперь влияют на внутреннее свойство aspect-ratio, которое позволяет автоматически выделять место под изображения в отзывчивых макетах.

Есть несколько улучшений в JavaScript и платформе. Добавлен Promise.allSettled. Частично реализован Media Session API, который позволяет отправлять в операционную систему информацию о проигрываемом контенте на странице, например, номер трека, названии альбома, песни и т.п. Включили поддержку расширения WebGL OVR_multiview2, которое используется для производительной отрисовки VR-контента.

Самая заметная пользовательская фича — "картинка в картинке" для видео. Включена по умолчанию пока только в Windows.

#release #firefox

https://hacks.mozilla.org/2019/12/firefox-71-a-year-end-arrival/

Джонатан Блоу — известный разработчик из мира игровой индустрии — в этом году приезжал в Москву, где он выступил с докладом "Preventing the Collapse of Civilization".

Развитие компьютерной индустрии и добавление абстракций идут бок о бок. Со временем число абстракций растёт, увеличивая сложность. С увеличением сложности увеличивается количество багов и снижается надёжность программ. В девяностых-двухтысячных среди вендоров железа и ПО была популярна фраза "Five 9s". Она означала, что система будет доступна 99.999% времени. Сейчас этот термин вышел из оборота.

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

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

#talk #musings

https://www.youtube.com/watch?v=pW-SOdj4Kkk

Вчера на calendar.pefrplanet.com была опубликована статья Ника Джансма — разработчика Akamai — про оптимизацию библиотеки для сбора RUM (Real User Metrics) — "Boomerang Performance Update".

Boomerang — это библиотека с открытым исходным кодом. Она используется под капотом mPulse (сервис для сбора RUM-метрик от Akamai). В 2017 году был проведён аудит Boomerang, который выявил узкие места. Загрузчик основного скрипта использовал динамически создаваемый iframe. На старых девайсах создание iframe несло дополнительные издержки, увеличивая время инициализации на 20-40мс. После перехода на link preload в браузерах, которые его поддерживают, время инициализации уменьшилось до 1мс. Для сбора таймингов ресурсов сайта, они используют префиксное дерево (Trie), которое также было неоптимизировано. После исправления функция оптимизации дерева стала работать в четыре раза быстрее. Чтобы уменьшить размер основного скрипта, алгоритм хеширования MD5 был заменён на FNV-1. Скрипт уменьшился на 8 килобайт.

Статья очень интересная. Рекомендую почитать всем, кто интересуется темой оптимизации сайтов.

#performance #algorithm #library

https://calendar.perfplanet.com/2019/boomerang-performance-update/

В этом году на React Conf был хороший доклад от Джен Крейгтон — "React is Fiction".

Джен в университете изучала литературу и хотела писать книги, но в итоге стала web-разработчиком. В докладе она рассказывает про принципы, использующиеся при написании книг, и как они ложатся на разработку на примере React-компонентов. Принцип "показывайте, а не рассказывайте" очень сильно пересекается с декларативностью. "У каждого персонажа должна быть мотивация" — с поиском подходящих границ между разными компонентами. "Пишите то, что знаете" — про баланс между KISS и DRY.

Доклад очень хороший. Рекомендую посмотреть, даже если вы не используете React.

#talk #react #musings

https://www.youtube.com/watch?v=kqh4lz2Lkzs

Майк Ритмюллер несколько недель назад поделился своими мыслями про управление стилями в современных приложениях — "CSS Architecture for Modern JavaScript Applications".

Майк пишет про то, что использование современных подходов для управления стилями без планирования может вызвать проблемы в будущем. Например, переиспользование компонентов может стать невозможным, если не использовать принципы абсолютно независимых блоков. Недостаточно поделить макет на прямоугольники — нужно спланировать раскладку и то как с ней будут взаимодействовать презентационные компоненты. Для управления состоянием предлагает использовать переосмысленные типы состояний, позаимствованные из SMACSS. В статье есть пример этого подхода, но он мне показался сложным для восприятия. Имхо, для описания сложных состояний компонентов хорошо подходит старый-добрый БЭМ.

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

#css #musings #architecture

https://www.madebymike.com.au/writing/css-architecture-for-modern-web-applications/

Последние дни занимался настройкой webpack. Сегодня прикручивал загрузчик для SVG. Пока не стал заморачиваться со спрайтами, воспользовался noscript-url-loader. Этот загрузчик в отличии от url-loader при инлайне изображений не кодирует их в base64, а использует url-encoded XML. Стало интересно, какими принципами следует лоадер — нашёл статью Тейлора Ханта "Optimizing SVGs in data URIs", в которой объясняется самая лучшая стратегия для инлайна.

Простого преобразования с помощью encodeURIComponent недостаточно, так как в результате обычно получается закодированный текст, который длиннее исходного текста SVG. Поэтому SVG кодируется "точечно", так чтобы закодированное сообщение содержало как можно меньше закодированных "unsafe URL" символов. Наибольший эффект получается от замены двойных кавычек апострофом, так как он попадает в категорию "safe URL" символов. Благодаря этому вместо трёх байтов для кодирования двойной кавычки используется один байт. Если кодируется сложный SVG с большим количеством атрибутов, это легко может сократить сотню байт.

У вас может возникнуть вполне резонный комментарий, что получившаяся экономия совсем ни о чём. Но в некоторых случаях, она может помочь избавиться от пары запросов к серверу (при использовании limit в noscript-url-loader ), ускоряя отображение SVG в браузере.

#performance #noscript #webpack

https://codepen.io/tigt/post/optimizing-noscripts-in-data-uris
https://github.com/bhovhannes/noscript-url-loader

Аггелос Арванитакис опубликовал статью, посвящённую проблемам производительности популярных CSS-in-JS библиотек — "The unseen performance costs of modern CSS-in-JS libraries in React apps".

Сейчас наиболее популярны CSS-in-JS библиотеки, которые в рантайме внедряют на страницу стили — Styled Components, Emotion. Они несут накладные расходы, которые становятся очень заметны, если в приложении происходит частое обновление большого количества компонентов. Тормоза возникают из-за большого количества Context.Consumer и дополнительной работы на парсинг и подготовку стилей. Для снижения негативного эффекта автор советует не использовать чрезмерную композицию, ещё советует использовать стили, которые не зависят от пропсов, и предлагает поэкспериментировать с zero-runtime CSS-in-JS-решениями, например, linaria (от себя хочу добавить ещё reshadow).

Статья очень интересная. Рекомендую почитать всем, кто работает с CSS-in-JS библиотеками.

#performance #cssinjs #react

https://calendar.perfplanet.com/2019/the-unseen-performance-costs-of-css-in-js-in-react-apps/

Недавно вышла новая версия Chrome. По традиции Пит Лепаж рассказал про новинки браузера на developers.google.com — "New in Chrome 79".

В Chrome появилась поддержка масок у иконок PWA-приложений. Это полезная фича, так как она позволяет избавиться от белых границ иконок установленного приложения. Поддержка WebXR включена по умолчанию. WebXR — это набор спецификаций, которые позволяет интегрировать в веб-приложения дополненную реальность, виртуальную реальность и поддержку 360-видео.

Добавлены новые API в рамках программы Origin Trials, с помощью которой активируются экспериментальные возможности браузера для пользователей вашего сайта. Появилась имплементация спецификации Wake Lock, которую разрабатывают участники команд Яндекс.Браузера и Firefox. Это API помогает предотвратить переход в спящий режим (очень полезно для презентаций и другого контента, где пользователь редко взаимодействует со страницей). Добавили любопытный атрибут — rendersubtree. Благодаря ему браузер начинает понимать, какие участки страниц рендерить не надо. Это положительно сказывается на общей производительности сайта.

В инструментах разработчика тоже есть изменения. Добавили отображение информации о заблокированных cookie, симуляцию настроек prefers-color-scheme и prefers-reduced-motion preferences. Улучшили отображение информации о покрытии JavaScript и CSS. На панели информации загруженного ресурса добавлена вкладка "Initiator"; на ней отображается стек вызова JavaScript-функций, который привёл к запросу.

#chrome #release #announcement

https://developers.google.com/web/updates/2019/12/nic79

Ещё одна хорошая статья от calendar.perfplanet.com. В этот раз Джозеф Скот написал про плюсы и минусы хостинга сторонних скриптов на своём домене — "Self-hosting third-party resources: the good, the bad and the ugly".

Селф-хостинг хорош тогда, когда в проекте используются такие ресурсы, которые находятся на критическом пути рендеринга. Иначе говоря, контент сайта в случае селф-хостинга будет отображаться быстрее, так как браузеру не надо будет тратить время на установку дополнительного соединения с внешним ресурсом/CDN. Более того, селф-хостинг решает проблему кеширования в Safari, так как он повторно загружает ресурсы (например, JavaScript-файлы с googleapis), даже если они были ранее закешированы на другом сайте. Это происходит из-за того, что в Safari включена защита от трекинга пользователей. Кроме плюсов есть и минусы. Самый большой минус — это риск того, что с сайта будут утекать куки на сторонний ресурс.

В общем, рекомендую почитать статью всем, кто занимается оптимизациями сайтов.

#performance #cdn #cache

https://calendar.perfplanet.com/2019/self-hosting-third-party-resources-the-good-the-bad-and-the-ugly/

Если вы не следили за фронтендом в этом году, не беда. Трей Хаффин подвёл итоги 2019 года в статье — "A Recap of Frontend Development in 2019". Вот самое главное:

— По количеству скачиваний React остаётся на первом месте, за ним идёт jQuery, на третьем и четвёртом месте — Angular и Vue.

— WebAssembly официально стал четвёртым языком web'а. В начале декабря WebAssembly Core Specification стал официальным стандартом W3C.

— TypeScript набирает обороты. В опросе StackOverflow TypeScript поделил второе место вместе с Python, уступив Rust.

— В React и в его экосистеме упор делался на developer experience и user experience. React-сообщество начало активно использовать хуки — новый механизм для создания stateful компонентов.

— Готовится выпуск альфы третьей версии Vue. Весь этот год активно шла работа над новой версией фреймворка.

— Команда Angular в этом декабре (или начале следующего года) зарелизит девятую версию фреймворка. В ней по умолчанию будет включён новый пайплайн компиляции/рендеринга — Ivy. Благодаря новому пайплайну будет уменьшен размер генерируемого бандла и ускорена перекомпиляция проекта.

— Svelte — фреймворк-компилятор для написания SPA-приложений — потихоньку становится конкурентом React/Vue/Angular.

— Вышла версия спецификации ECMAScript 2019. Добавлены Object.fromEntries(), String.trimStart(), Array.flat(), Array.flatMap(), Symbol.denoscription, try/catch binding и т.д.

— Node.js Fundation и JS Foundation сформировали единый фонд OpenJS Foundation. Фонд поддерживают Google, IBM, Microsoft.

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

#js #list #recap

https://levelup.gitconnected.com/a-recap-of-frontend-development-in-2019-1e7d07966d6c

Абстракции и программирование неотъемлемые друг от друга части. Умение добавлять хорошие абстракции и определять те абстракции, которые наносят проекту вред, многого стоит. Мерик Кристенсен написал про эту тему статью — "Art Of Abstraction".

В статье нет каких-либо практических советов, но тем не менее в ней есть тезисы, которые заставят задуматься:

— Абстракция — это инструмент коллективного мышления. Корректное применение абстракции выражается в целостном API и инструментарии, так как люди взаимодействуют с проектом, руководствуясь общим языков.

— Фундаментально, компьютерная наука — это наука абстракций, создающая правильную модель для понимания проблемы и разрабатывающая подходящие воспроизводимые техники для её решения.

В статье есть много ссылок на хорошие статьи и доклады. Я уже выбрал доклад, который буду смотреть завтра — "Hammock Driven Development" Ричарда Хикки.

#musings #programming #abstraction

https://www.merrickchristensen.com/articles/abstraction/

Посмотрел доклад Ричарда Хикки — "Hammock Driven Development".

Ричард — создатель языка Clojure. При работе над языком ему надо было много думать над тем, чтобы добавляемые в язык абстракции органично взаимодействовали друг с другом. Ему надо была решать много задач. Про это он и рассказывает в своём докладе — про подходы решения разных задач, возникающих при разработке.

Способность эффективного решения задач — это не врождённое качество, а навык, который можно приобрести. Ричард порекомендовал всем почитать книгу "Как решить задачу" Д. Пойа. Книге уже больше 50 лет, но она до сих пор остаётся лучшей книгой на эту тему. В самом конце доклада он говорит про то, что не надо бояться, особенно не надо бояться оказаться неправым.

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

#talk #programming #musings

https://www.youtube.com/watch?v=f84n5oFoZBc
https://github.com/matthiasn/talk-trannoscripts/blob/master/Hickey_Rich/HammockDrivenDev.md

Дилан Паулус около месяца назад написал пост про то, как Facebook борется с блокировщиками рекламы — "How Facebook Avoids Ad Blockers".

Все карточки с рекламой в Facebook содержат слово "Sponsored". Это единственная зацепка, которая может однозначно идентифицировать рекламу. CSS-классы для идентификации не подходят, так как они могут переиспользоваться на разных элементах — в Facebook используется подход Atomic CSS. То есть вы не найдёте слово "Sponsored" в html. Там, где находится это слово, будет много элементов, в атрибутах которых (или внутри тега) будет записана одна буква, причём некоторые символы будут "мусорными", вставляющимися на страницу великим рандомом. Всё это сделано для того, чтобы нельзя было написать CSS-селектор для определения рекламы, например, такой:

span[data-content="S"]
  + span[data-content="p"]
  + span[data-content="o"]
  + span[data-content="n"]
  + span[data-content="s"]
  + span[data-content="o"]
  + span[data-content="r"]
  + span[data-content="e"]
  + span[data-content="d"] {
  display: none;
}

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

#ads #facebook #obfuscation

https://www.dylanpaulus.com/2019-11-24-how-fb-avoids-adblockers/

Сегодня увидел в твиттере новость — в V8 v7.9 появилась реализация пропозала "RegExp Match Indices" (пока спрятана за экспериментальным флагом). Майа Лекова из команды разработки движка написала статью с объяснением, где он может быть полезен.

Методы Regexp#exec(), String#match() и String#matchAll() ищут заданный шаблон в строке и в случае успеха возвращают "match object". В нём находится индекс первого символа строки, который совпал с шаблоном. Этой информации недостаточно, если в выражении есть скобочные группы (capturing group), и если мы хотим получить позицию каждой сматченной группы. Именно эту проблему решает "Match Indicies" — он расширяет возвращаемый match object новым свойством indicies, в котором находятся позиции всех найденных групп. В статье есть пример того, как это свойство может быть использовано для понятного отображения ошибок парсинга кода.

На данный момент "RegExp Match Indices" находится на третьем этапе добавления в стандарт. Вполне возможно, что он попадёт в грядущий стандарт ECMAScript 2020 (ох... красивая цифра).

#js #regexp #proposal #v8

https://v8.dev/features/regexp-match-indices

Среди разработчиков иногда проскакивала шутка: "Что будет, когда V8 доберётся до версии V8?". И вот сегодня зарелизился V8 version 8.0 — V8. Лесджек Свирски рассказал про новые фичи в движке.

В новой версии было оптимизировано потребление памяти — график из статьи показывает падение на 40%. Оптимизация была достигнута за счёт компрессии tagged values (указателей на кучу V8 и small integers). Хорошим побочным эффектом оптимизации стало улучшение производительности движка на реальных сайтах. В статье мало подробностей, но обещают написать подробнее в другом посте.

Оптимизировали работу со встроенными в язык методами Function.prototype.apply, Reflect.apply и методами Array. Теперь код, в котором используются эти методы, оптимизируется с помощью Turbofan.

Теперь в движке есть полноценная поддержка Optional chaining и Nullish coalescing. Это новые фичи языка, которые помогают при обработке nullish-значений:

function Component(props) {
  const enable = props?.enabled ?? true;
  // …
}

#v8 #release #announcement

https://v8.dev/blog/v8-release-80

Колин Бенделл из Cloudinary в статье "Microbrowsers are Everywhere" рассказал про микробраузеры, и почему они важны.

В статье микробраузерами называется механизм, который скачивает по ссылке html-страницу, парсит её и отображает короткое содержание страницы, используя мета-теги Open Graph, OEmbed, Twitter Cards или обычный denoscription. Обычно такие превью можно увидеть в мессенджерах: Telegram, WhatsApp, Slack. Колин пишет про то, что в современном мире, первое впечатление о сайте как раз формируется благодаря таким превью. Владельцы сайтов не могут узнать, что страница была запрошена в превью режиме, так как одни мессенджеры маскируются под мобильные браузеры, а другие кешируют у себя на сервере результат парсинга и только им известно сколько человек увидело превью.

Пользователей мессенджеров огромное количество, поэтому важно сделать так, чтобы превью страниц работало без проблем. В статье есть несколько советов как оптимизировать страницу под микробраузеры, например, использовать только один мета-тег favicon (iMessage качает все ресурсы в синхронном режиме), не использовать UA-сниффинг для скрытия мета-тегов, предоставлять не более трёх изображений в <meta property="og:image".

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

#mobile #ux

https://24ways.org/2019/microbrowsers-are-everywhere/