Аксель Раушмайер написал статью про логические операторы присваивания — "ECMAScript proposal: Logical assignment operators".

Пропозал добавляет в стандарт новые составные операторы присваивания: a ||= b, a &&= b и a ??= b. Благодаря этим операторам можно компактно комбинировать присваивание с коротким циклом вычислений логических операций (short-circuit). Например, запись a ??= b эквивалентна выражению a ?? (a = b). В нём присваивание происходит только в том случае, когда в a находится null или undefined. Пример использования:

const books = [{
  isbn: '123',
}, {
  noscript: 'ECMAScript Language Specification',
  isbn: '456',
}];

// Добавление дефолтного заголовка там, где его нет
for (const book of books) {
  book.noscript ??= '(Unnoscriptd)';
}

assert.deepEqual(books, [{
  isbn: '123',
  noscript: '(Unnoscriptd)',
}, {
  noscript: 'ECMAScript Language Specification',
  isbn: '456',
}]);

Логические операторы присваивания находятся на третьем этапе добавления в стандарт. Его поддержка появилась в Firefox 77 Nightly, Safari Technology Preview 107, и в V8 v8.4 (Chrome 85).

#js #proposal

https://2ality.com/2020/06/logical-assignment-operators.html

Для того чтобы бандлер смог безопасно применить tree-shaking, он должен понимать, что можно удалить, а что нужно оставить. Серджио Гомес написал про это статью — "Everything you never wanted to know about side effects".

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

Чтобы tree-shaking заработал, авторы библиотек добавляют в package.json поле "sideEffects": false, если в библиотеке нет сайд-эффектов, или явно перечисляют файлы, которые нельзя удалять "sideEffects": ["a.js", "b.js"]. Также в исходном коде можно использовать хинт /*#__PURE__*/. Благодаря этому хинту бандлер понимает, что такой код не содержит сайд-эффектов, и его можно безопасно удалить.

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

#performance #bundle

https://sgom.es/posts/2020-06-15-everything-you-never-wanted-to-know-about-side-effects/

DebugBear проанализировал влияние тысячи популярных расширений Chrome на производительность страниц и поделился результатами исследования — "2020 Chrome Extension Performance Report".

Наибольшую задержку рендеринга страницы (более 300мс) вызывают расширения Clever, Gramarly, Cash Back For Shopping. Наибольшее влияние на TTI оказывают расширения, Evernote Web Clipper, Grammarly, Avira Password Manager — они блокируют основной поток выполнения более чем на 400 мс. Интересен анализ блокировщиков рекламы. DuckDuckGo Privacy Essentials на большом новостном сайте уменьшает использование CPU с 31 секунды до 1.6 секунд. Но есть другие блокировщики, которые очень сильно увеличивают потребление CPU. Advertising Terminator тратит почти 25 секунд времени CPU на анализ страниц.

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

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

#chrome #research #performance

https://www.debugbear.com/blog/2020-chrome-extension-performance-report

Гал Шлёзингер написал статью про решение задачи FizzBuzz с помощью системы типов TypeScript без использования рантайм-кода — "Typing the Technical Interview in TypeScript".

Всё решение сводится к изобретательной эксплуатации системы типов. Для представления каждого числа используется свой тип: type _0 = 0;, type _1 = Increment<_0>; и т.п. Для сравнения типов между собой используется тип type Eq<A, B extends A> = "passes";. Для логического оператора "и" — type And<A, B> = A extends true ? (B extends true ? true : false) : false; и т.д. После добавления всех необходимых типов результат получается с помощью типа type FIZZBUZZ = FizzBuzzUpTo<_16>;. Результат можно увидеть в подсказке редактора в виде выведенного типа.

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

#typenoscript #fun

https://gal.hagever.com/posts/typing-the-technical-interview-in-typenoscript/

⚡️Официально: Генеральная Ассамблея Ecma International одобрила спецификации
ECMA262 (ECMAScript® 2020 Language Specification)
ECMA402 (ECMAScript® 2020 Internationalization API Specification)

Новое в ECMA262:
- String.prototype.matchAll
- import()
- BigInt
- Promise.allSettled
- globalThis
- for-in mechanics
- Optional chaining
- Nullish coalescing operator
- import.meta

Новое в ECMA402:
- Intl.RelativeTimeFormat
- Intl.NumberFormat Unified API
- Intl.Locale

С новым джаваскриптом! 😄

В блоге Chromium сегодня появился пост о том, какие проблемы совместимости будут исправлены в 2020 году — "Improving Chromium's browser compatibility in 2020".

В прошлом году MDN провёл опрос среди 28 тысяч разработчиков. Его цель заключалась в выявлении самых распространённых проблем, возникающих при работе с web-платформой. Больше всего голосов было отдано пунктам про поддержку старых браузеров, про устаревшую документацию и про совместимость между браузерами.

Команда Chromium выделила несколько направлений работы для исправлений проблем совместимости. Будет переработана имплементация flexbox, она будет перенесена на новый layout-движок LayoutNG. Это позволит добавить поддержку gap, row-gap, column-gap и исправить проблему с flex и fieldset. Также на новый движок будет перенесены гриды, над этим уже работает команда Edge. В ходе переноса планируют добавить поддержку subgrid. Будут работать над исправлением проблем поведения прокрутки контента. Будут изучать вопрос стилизации стандартных элементов управления форм и исправлять их проблемы совместимости, но пока без конкретных анонсов.

#chromium #announcement

https://blog.chromium.org/2020/06/improving-chromiums-browser.html

Матиас Бус написал статью про исправление проблем производительности в Node.js web-фреймворке Hapi — "Hapi: A Performance deep-dive".

Матиас рассказывает про полный цикл поиска и устранения проблем производительности. В самом начале он подготавливает бенчмарк с помощью библиотеки autocannon. Затем были найдены куски кода, которые инициировали вызовы кода нативных библиотек. На горячих участках кода интероп между JavaScript и нативным кодом вызывает падение производительности. Для решения этой проблемы функции, приводящие к вызову нативного кода, были обернуты в геттеры. Была изменена логика инициализации плагинов, чтобы не выполнялась лишняя работа на каждый запрос к серверу. С помощью инструмента Clinic.js была обнаружена проблема с async-функциями. На данный момент V8 не очень хорошо оптимизирует код с async/await, поэтому не рекомендуется использовать async-функции на горячих участках кода. После внесения всех исправлений производительность Hapi улучшилась на 30%.

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

#nodejs #performance

https://www.nearform.com/blog/hapi-a-performance-deep-dive/

Кроме npm и yarn существует ещё другой малоизвестный пакетный менеджер — pnpm. Эндрю Спрус написал статью "Why we switched from Yarn to pnpm", в которой рассказал, почему они для своего проекта выбрали именно pnpm.

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

После оценки возможных решений с помощью yarn 2, lerna и pnpm решили остановиться на последнем варианте. Он позволяет устанавливать пакеты рекурсивно и выполнять работу над подгруппой пакетов с помощью флага --filter.

Интересная статья. Кстати, там упоминается, что pnpm используют в Microsoft.

#package #js

https://www.takeshape.io/articles/why-we-switched-from-yarn-to-pnpm/

Глеб Бахмутов рассказал про визуальное тестирование с помощью Cypress — "Visual testing for React components using open source tools".

В качестве примера в статье была взята игра судоку, написанная на React. Для тестирования компонентов использовалась библиотека cypress-react-unit-test. Для визуального тестирования (сравнения скриншотов компонентов) — cypress-image-snapshot.

В статье есть примеры использования Cypress для мока модулей и таймеров. Есть очень подробный пример настройки визуального тестирования. Из-за особенностей рендеринга скриншоты одного и того же компонента будут разными в зависимости от версии браузера и операционной системы. Чтобы обойти эту проблему можно настроить процент, на который разрешено отличаться сравниваемым изображениям. Это хороший подход, но потенциально он может пропускать дефекты. Для надёжной генерации скриншотов в статье разбирается способ с использованием docker. В нём для генерации скриншотов используется точно такой же контейнер, какой работает в CI-системе.

Советую заглянуть в статью, если планируете добавить в свой React-проект визуальное тестирование.

#react #testing

https://glebbahmutov.com/blog/open-source-visual-testing-of-components/

Сандрина Перейра опубликовала статью про гибридный подход к кастомизации <select> — "Striking a Balance Between Native and Custom Select Elements".

В начале статьи есть небольшой экскурс в нейминг компонентов, реализующих поведение <select>: Menu, Navigation, Select. Последний используется для создания выпадающих списков, именно про него рассказывается в статье.

Для создания доступного и кастомизированного <select> Сандрина предлагает использовать два элемента: визуальный со всеми стилями и нативный, который доступен с клавиатуры и в скринридерах. Переключение между ними происходит с помощью медиа-выражения @media (hover: hover):

@media (hover: hover) {
  .selectCustom {
    display: block;
  }

  .selectNative:focus + .selectCustom {
    display: none;
  }
}

Этот подход был успешно протестирован в Chrome 81, Firefox 76, Safari 13 среди пользователей, использующих технологии доступности.

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

#css #a11y

https://css-tricks.com/striking-a-balance-between-native-and-custom-select-elements/

Тим Кадлек разобрался в причинах странного поведения prefetch на Netlify и рассказал про свои находки в статье "Prefetching? At This Age?".

Тим подключил к своему сайту библиотеку Instant.Page. Она помогает подгружать страницы в фоновом режиме с помощью prefetch, отслеживая наведение курсора мыши на ссылки и тапы пользователя. Но при хостинге сайта на Netlify подгруженные страницы при переходе по ссылкам не бралась из кэша, а загружалась повторно.

Оказалось, что Netlify (и любые другие CDN) отправляет заголовок Age, когда его значение превышает max-age браузер начинает повторно загружать ресурс. В Chromium, правда, логика немного сложнее — ресурс, загруженный с помощью prefetch, хранится в кэше пять минут вне зависимости от заголовка Cache-Control, но по каким-то причинам этот период учитывал Age. Баг в Chromium уже поправили. В Firefox баг заведён, но пока ещё открыт.

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

#performance #cache

https://timkadlec.com/remembers/2020-06-17-prefetching-at-this-age/

Команда разработки компиляторов из Igalia представила полифилл для пропозала Temporal — "Dates and Times in JavaScript".

Для работы с датами в JavaScript используется объект Date. Он был сделан по образу и подобию Date из Java образца 1995 года. В 1997 году разработчики Java объявили этот API устаревшим. В JS его уже нельзя было поменять, потому что кардинальное изменение API сломало бы web. В результате сообщество создало много библиотек для более удобной работы с датами; Temporal может быть использован вместо них.

Основные особенности Temporal: удобный API для работы с датами и временем, иммутабельность, поддержка разных форматов представления дат, поддержка календарей, отличных от григорианского, полноценная возможность работы с часовыми поясами. В статье есть ссылки на подробное описание API и cookbook с примерами использования Temporal: подсчёт времени перелёта, планирование встречи с участниками в разных часовых поясах и т.п.

Команда Igalia призывает сообщество протестировать полифилл и поделиться критикой и мыслями, пока пропозал находится на Stage 2.

#proposal #polyfill #announcement

https://blogs.igalia.com/compilers/2020/06/23/dates-and-times-in-javanoscript/

Всегда ли WebP сжимает изображения лучше чем JPEG? Этим вопросом задался Йоханнес Сипола и написал статью "Is WebP really better than JPEG?"

Google в своих исследованиях про эффективность сжатия WebP говорил про уменьшение размеров изображений на 25-34% относительно JPEG. Йоханнес предполагает, что такая цифра получилась благодаря тому, что для создания JPEG-изображений использовался референсный кодировщик — cjpeg. В то время как существует более эффективный независимый кодировщик JPEG от Mozilla — MozJPEG. При сравнении разных наборов изображений из датасета от Kodak оказалось, что WebP уступает MozJPEG на больших изображениях. При этом во всех замерах с большим отрывом лидирует новый формат изображений — AVIF.

Выводы из статьи. Используйте WebP, когда сжимаются изображения меньше 500px, когда вы не можете использовать MozJPEG и когда вы можете использовать агрессивное сжатие с потерей качества.

#graphics #optimization #benchmark

https://siipo.la/blog/is-webp-really-better-than-jpeg

Мальте Юбэл из Google рассказал про историю возникновения и развития проекта Accelerated Mobile Pages — "Looking back at five years of AMP".

Проект появился в 2015 году как результат обсуждения с издателями проблем распространения контента. На тот момент большие сайты очень сильно уступали в скорости нативным приложениям. Google представил свое видение для решения этих проблем — проект AMP. Несмотря на очень хорошие показатели вовлечённости рядовых пользователей AMP столкнулся с критикой. При просмотре AMP-страниц url оригинального источника был недоступен, в top-stories выдачи google продвигался только AMP-контент. Для решения первой проблемы были привлечены разработчики браузеров, которые сделали так, чтобы при шаринге AMP-страниц копировался оригинальный URL. Позже была представлена возможность распространения AMP со сторонних доменов. Вторая проблема будет решена благодаря внедрению в поиск сигналов о скорости страниц. Обещают, что хорошо работающие страницы будут попадать в top-stories без проблем.

Интересная статья. В неё стоит заглянуть, если разрабатываете контент-проект или если интересуетесь историей web.

#history #google

https://blog.amp.dev/2020/06/19/looking-back/

Два дня назад вышла новая мажорная версия Angular. Стивен Флюин рассказал про новинки релиза — "Version 10 of Angular Now Available".

По сравнению с прошлой версией релиз получился довольно скромный. В Angular Material был добавлен элемент управления для выбора диапазона дат. При импорте CommonJS модулей фреймворк будет выводить предупреждение о потенциальных проблемах с размером бандла. Во время создания проекта с помощью ng new можно передать новый флаг --strict для включения строгих проверок в TypeScript-коде и шаблонах, отключения объявлений типа any, уменьшения порогового значения размера бандла на 75% и конфигурации приложения как side-effect free для продвинутого три-шейкинга.

Поддержка IE9, IE10 и IE Mobile объявлена устаревшей и будет удалена в следующей версии. Были обновлены зависимости: TypeScript обновлён до версии 3.9, TSLib до версии 2.0, TSLint до версии 6.

#angular #release #announcement

https://blog.angular.io/version-10-of-angular-now-available-78960babd41

Микаэль Роджерс написал пост про организацию совместимости Node.js-модулей, использующих ESM, и require — "Native ESM in Node.js with require() fallbacks".

Последние версии Node.js поддерживают нативную модульную систему и позволяют импортировать CommonJS-модули внутри ESM-файлов. Но может возникнуть ситуация, когда нужно обеспечить импорт ESM-файлов в CommonJS. Node.js не поддерживает такое направление импорта. Для обхода этого ограничения можно использовать export maps в package.json. В нём каждому файлу сопоставляются соответствующие CommonJS- и ESM-версии:

"exports": {
  ".": {
    "import": "./index.js",
    "require": "./dist/index.cjs"
  },
  "./basics.js": {
    "import": "./basics.js",
    "require": "./dist/basics.cjs"
  },
  ...
}

Для автоматического создания cjs-файлов из esm-файлов Микаэль воспользовался Rollup и небольшим конфигом.

Статья будет полезна тем, кто хотел использовать в своих пакетах ESM, но не делал этого из-за отсутствия совместимости с CommonJS.

#nodejs #esm

https://dev.to/mikeal_2/native-esm-in-node-js-w-require-fallbacks-and-support-for-all-front-end-compilers-2ded

Амит Мерчант написал пост про новую экспериментальную фичу Chrome Dev Tools — CSS Overview.

CSS Overview — это новая вкладка в Dev Tools. На ней отображается сводная информация по текущей странице: количество элементов, статистика использования разных видов селекторов, список всех использованных на странице цветов, шрифтов и медиа-выражений (очень полезно при поиске проблемных элементов). Есть раздел со списком неактивных CSS-деклараций и объяснениями, почему свойства не работают. Включить фичу можно в настройках Chrome Dev Tools: "Experiments" -> "CSS Overview".

CSS Overview немного глючит, но пользоваться им вполне можно.

#tool #css #chrome

https://www.amitmerchant.com/experimental-css-overview-feature-chrome-awesome/

Сегодня зарелизился Firefox 78 ESR. Флориан Шольц и Гарольд Киршнер рассказали про все новинки — "New in Firefox 78: DevTools improvements, new regex engine, and abundant web platform updates".

Firefox 78 — это Extended Support Release (ESR). Обычно Firefox релизится каждые четыре недели, но каждый год выходит ESR-версия, которая поддерживается в течение года. C 78-ой версии будет прекращена поддержка OS X 10.11 и ниже, пользователи этих ОС будут переключены на обновления из ESR-канала.

Для упрощения написания длинных CSS-селекторов в Firefox 78 были добавлены псевдоклассы :is() и :where(). Также теперь можно стилизовать элементы форм с помощью псевдоклассов :read-only и :read-write. Был обновлён движок регулярных выражений, теперь он поддерживает все фичи регэкспов из ECMAScript 2018. Добавлена поддержка Intl.ListFormat и улучшено форматирование чисел в ECMAScript Intl API. Был добавлен удобный метод для замены потомков DOM-узла — ParentNode.replaceChildren.

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

В инструментах разработчика logpoints поддерживают маппинг имён переменных из транспилированного кода на имена переменных из оригинального кода. Улучшена производительность DOM-инспектора. Переработано отображение ошибок для неперехваченных ошибок промисов. На вкладке "Network" теперь можно найти причины блокировки запросов.

#firefox #release #announcement

https://hacks.mozilla.org/2020/06/new-in-firefox-78/

Симо Ахава написал статью про потенциальные опасности, которые могут возникнуть при добавлении выделенного поддомена для рекламных сетей — "What's In A CNAME".

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

Часто рекламодатели начинают просить настроить выделенный поддомен с перенаправлением на их сайт. Проблема заключается в том, что такой поддомен становится first-party и получает доступ ко всем cookies, которые были установлены для доменов верхнего уровня. Так как владельцы сайтов не имеют доступ к этим серверам, они по сути отдают все данные пользователей, которые передаются в cookie, в том числе стейт и авторизационные токены. Вендор рекламы может давать гарантии, что будет использовать только подмножество этих данных, но тем не менее это очень небезопасный подход. Симо призывает очень хорошо подумать перед тем, как настраивать поддомены для сторонних сервисов.

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

#security #dns

https://www.simoahava.com/web-development/whats-in-a-cname/

Андрэа Верличчи написал статью про опыт оптимизации метрик LCP и CLS e-commerce проекта — "Optimizing for web vitals on chloe.com".

С помощью Lighthouse можно найти DOM-узел, который генерирует LCP (Largest Contentful Paint). На chloe таким узлом был блок с изображениями товаров. Для того чтобы изображения загрузились раньше, был понижен приоритет второстепенных асинхронных запросов. У самих изображений была ограничена плотность пикселей до 2x, что позволило уменьшить размер изображений на 50%. На современных смартфонах с плотностью пикселей 3x пользователи не замечают такое уменьшение плотности изображений. Для ускорения времени отрисовки критический CSS инлайнят в html. Для этого на этапе сборки используется скрипт, который ищет все критичные CSS-блоки, содержащие специальное свойство critical: this;.

Для оптимизации CLS (Cumulative Layout Shift) было зарезервировано место для тех виджетов, которые рендерятся на клиенте. Был подобран такой дефолтный шрифт, который после замены, не вызывал сдвига контента.

Хорошая статья. Стоит заглянуть, если интересуетесь темой производительности.

#performance #metrics

https://medium.com/ynap-tech/optimizing-cls-and-lcp-on-chloe-com-8280a036122a

Демиан Рензулли и Джеф Посник рассказали про то, как использовать сервис воркеры и Streams API для быстрого перехода между страницами сайта — "App shell UX with service workers and streams".

Статья основывается на подходе, который используется сайтом dev.to. На всех страницах выделяются общие части: header, navbar, footer — они кешируются сервис воркером. При переходе на новую страницу с сервера приходит основное содержимое сайта, которое "склеивается" с закешированными частями и передаётся как результат с помощью Streams API. Благодаря использованию стримов браузер начинает рендерить шапку страницы до получения ответа сервера. Переходы между страницами страницами становятся очень быстрыми — во время навигации по сайту заголовок страницы остаётся на своём месте, создавая иллюзию SPA. В статье есть пример как реализовать такой подход с помощью библиотеки Workbox.

Рекомендую почитать статью всем, кто поддерживает многостраничные сайты и ищет способы ускорения их работы.

#serviceworker #performance

https://web.dev/app-shell-ux-with-service-workers/