Томас Штейнер в блоге web.dev написал статью про текстовые фрагменты — "Boldly link where no one has linked before: Text Fragments".

В url страницы после символа # можно подставить идентификатор элемента, к которому браузер должен подкрутить страницу. Эта фича появилась очень давно, но у неё есть недостаток — на странице должен существовать элемент с необходимым идентификатором.

С помощью текстового фрагмента (text fragment) можно задать любой текст, который нужно "подсветить" на странице. Текстовый фрагмент задаётся в url страницы с помощью конструкций #:~:text=textStart или #:~:text=textStart,textEnd. Также можно указать необходимый контекст с помощью префиксов и суффиксов #:~:text=somePrefix-,text,-someSuffix.

Текстовый фрагмент — экспериментальная фича, её поддержка есть только в браузерах на базе Chromium. На данный момент участники W3C скептически относятся к изменению формата url, но Google уже начал использовать текстовые фрагменты в production-коде поисковых сниппетов.

#spec #experimental #chromium

https://web.dev/text-fragments/

Ник Джансма из Akamai написал большую статью про метрику CLS — "Cumulative Layout Shift in Practice".

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

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

— CLS на мобильных устройствах выше, потому что контент на мобильных сайтах располагается вертикально, поэтому при анализе проблем CLS рекомендуется разделять статистику для десктопов и мобильных;
— момент времени, когда останавливается сбор метрики CLS, для разных инструментов разный;
— в инструментах разработчика есть баги при измерении сдвига контента внутри iframe'ов, также есть несоответствия в инструментах для сбора синтетической статистики и статистики с устройств реальных пользователей;
— в некоторых случаях страницы с высоким CLS могут предоставлять хороший пользовательский опыт;
— CLS не учитывает элементы, которые ничего не рендерят.

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

#performance #metrics

https://nicj.net/cumulative-layout-shift-in-practice/

Стэфани Стимак из Microsoft поделилась своими мыслями про производительность сайтов с точки зрения деревенского жителя — "Location, Privilege and Performant Websites".

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

Основная мысль статьи — критически важные сайты должны тестировать свою производительность на слабых устройствах с ограниченным доступом в сеть. В некоторых случаях можно поддерживать отдельную версию сервиса, адаптированную для работы в загруженной мобильной сети. После разрушений урагана Ирма NPR запустил текстовую версию сайта без изображений, JS и CSS специально для того, чтобы люди могли быстро получать информацию о последних новостях.

#performance #musings

https://blog.stephaniestimac.com/posts/10-30-2019-performance/

В 2016 году в набор команд ARM была добавлена операция, специально разработанная для работы с JS-движками, — "Armv8-A architecture: 2016 additions".

В JavaScript все числа представляются в формате чисел с плавающей запятой двойной точности, но при работе с битовыми операциями они преобразуются в 32-битные целые числа (в спецификации для этого используется ToInt32 ). Битовые операции относительно часто используется в JS-коде, поэтому для ускорения таких преобразований в набор команд архитектуры Armv8 была добавлена новая команда FJCVTZS.

Можно сказать, что JS проник не только на сервера, десктоп и мобильные приложения, но и в набор команд процессоров.

#js #internals

https://community.arm.com/developer/ip-products/processors/b/processors-ip-blog/posts/armv8-a-architecture-2016-additions
https://stackoverflow.com/questions/50966676/why-do-arm-chips-have-an-instruction-with-javanoscript-in-the-name-fjcvtzs

Сегодня зарелизился Firefox 82. В этой версии упор был сделан на скорость работы браузера. Исправлены минорные проблемы с DOM API. Есть немного улучшений в DevTools. По умолчанию включена поддержка Media Session API.

Самое интересное для разработчиков
— В DevTools на вкладке "Network" теперь можно инспектировать server-sent events (SSE); панели "Message" и "Response" были объединены (то есть можно просматривать сообщения web socket'ов и SSE прямо под списком сетевых ответов)
— Диалог выбора цвета стал доступен с клавиатуры на Windows
— Появилась поддержка флага allow-downloads в <iframe sandbox>
— В CSS появилась поддержка псевдоэлемента ::file-selector-button для стилизации кнопки выбора файла
— Псевдоклассы :is() и :where() стали более толерантны к ошибкам — невалидный элемент из списка селекторов больше не делает весь список неавалидным
— Если у тэга <a> есть атрибут download (то есть это ссылка на загрузку файла), он будет перекрывать поведение открытия файла в браузере при установленном HTTP-заголовке Content-Disposition: inline;filename="somefile.jpg"
— Включена поддержка Media Session API. С помощью этого API в системные нотификации можно интегрировать информацию о текущем проигрываемом треке и обрабатыватать события медиа-клавиш на клавиатуре, пультах дистанционного управления и наушниках
— Свойство window.name сбрасывается, если в текущей вкладке загружается другой сайт. Это изменение было сделано для улучшения приватности, но оно может повлиять на фреймворки, которые используют window.name для междоменного обмена сообщениями

Нововведения для пользователей
— Ускорена работа браузера (раскладки на флексах работают на 20% быстрее, сессии восстанавливаются на 17% быстрее, на windows открытие новых окон стало быстрее на 10%).
— В Windows добавлена поддержка аппаратного декодирования видео, оно снижает потребление ресурсов GPU, CPU и положительно сказывается на разряде батареи
— Улучшена работа с режимом Picture-In-Picture

#firefox #release

https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/82
https://www.mozilla.org/en-US/firefox/82.0/releasenotes/

Вчера вышел Node.js v15.0.0.

TLDR

В релизе был обновлён движок V8 до версии 8.6, npm был обновлён до седьмой версии, обновлена версия N-API, была добавлена поддержка AbortController и QUIC, необработанные ошибки промисов теперь приводят к прекращению работы Node.js.

Подробнее

V8 был обновлён до версии 8.6. С новой версией движка в Node.js появилась поддержка Promise.any(), AggregateError, логических операторов присваивания &&=, ||=, ??=, String.prototype.replaceAll().

Npm был обновлён до версии 7. В нём появилась поддержка воркспейсов, изменён формат package-lock.json, добавлена поддержка yarn.lock, установка peerDependencies по умолчанию. Недавно в канале был подробный пост про новую версию npm, его можно почитать тут.

Была добавлена экспериментальная поддержка нового транспортного протокола QUIC, который лежит в основе HTTP/3. Основные фичи QUIC: по умолчанию безопасен (используется TLS 1.3), исправление проблемы head-of-line blocking, поддержка миграции соединения. Более подробно про QUIC и HTTP/3 можно почитать тут.

В Node.js 15 необработанные ошибки промисов будут выкидывать исключение и приводить к остановке работы Node.js, если не была установлена глобальная обработка unhandledRejection. Такое решение было принято, чтобы показать важность обработки ошибок промисов, без них могут возникать утечки памяти и другие проблемы. Это поведение можно поменять с помощью флага --unhandled-rejections=warn.

Была добавлена экспериментальная поддержка AbortController — Web API, с помощью которого можно отменять работу API на базе промисов.

N-API — API для создания аддонов — было обновлено до седьмой версии. В нём были добавлены дополнительные методы для работы с ArrayBuffers.

Нечётное число в версии Node.js означает, что это экспериментальная версия, она будет поддерживаться до июня 2021 года. Самая последняя стабильная версия Node.js 14 на следующей неделе получит статус LTS.

#nodejs #release

https://medium.com/@nodejs/node-js-v15-0-0-is-here-deb00750f278

Лукас Ф. Коста — автор библиотеки Chai.js — написал статью про package-lock.json — "Why does package-lock.json exist, and how does it work?".

При повторной установке пакетов с зафиксированными версиями результирующий node_modules может отличаться, так как могут быть обновлены зависимости зависимостей. Чтобы добиться детерминированной установки в npm используется файл package-lock.json, в котором явно описываются все версии всех зависимостей.

При запуске команды npm i установщик получает список зависимостей проекта из package.json и во время их установки обновляет package-lock.json, записывая туда полное дерево зависимостей с необходимой метаинформацей. Для установки пакетов из package-lock.json нужно использовать другую команду — npm ci. Эта команда устанавливает все зависимости, создавая идентичное дерево зависимостей на момент последнего выполнения npm i. Кроме детерминированности npm ci даёт очень хороший буст в скорости установки пакетов, поэтому чаще всего её используют в CI-системах.

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

#npm

https://lucasfcosta.com/2020/10/17/lockfile-guide.html

Не знаю как у вас, но меня постоянно вводили в ступор хинты производительности <link rel="prefetch"> и <link rel="preload">. Когда пытался вспомнить их назначение, в голове возникали примерно такие вопросы: "Prefetch отвечает за оптимизацию загрузки ресурсов для текущей страницы или следующих страниц? А за что тогда отвечает preload?"

Prefetch и preload похожи друг на друга: prefetch отвечает за оптимизацию загрузки ресурсов на страницах, которые будут открыты через некоторое время, preload — за оптимизацию загрузки ресурсов, которые нужны прямо сейчас на текущей странице.

Сегодня придумал мнемоническое правило, помогающее запомнить, что за что отвечает: preLoad помогает оптимизировать загрузку ресурсов на локальной (Local) странице (то есть текущей), preFetch помогает оптимизировать загрузку ресурсов на будущих (Future) страницах.

Preload — local, prefetch — future.

#performance #trick

https://twitter.com/myshov/status/1319652179263868928

Эдди Османи написал статью про использование паттерна PRPL — "Faster Web App Delivery with PRPL".

PRPL — это паттерн для структурирования и улучшения производительности web-приложений (SPA и PWA).

PRPL описывает четыре этапа жизненного цикла приложения от этапа доставки кода в браузер до его отрисовки:
— Push — при первом открытии приложения, самые необходимые ресурсы доставляются как можно быстрее с помощью server push или preload;
— Render — затем отрисовывается экран приложения с использованием минимального количества необходимых ему ресурсов;
— Pre-cache — после того как приложение было отрисовано, оно может подгрузить ресурсы тех страниц приложения, которые с большой вероятностью будут открыты пользователем;
— Lazy-load — при работе с приложением его куски доставляются в браузер по мере необходимости, это обычно реализуется с помощью code splitting и динамических импортов.

Хорошая статья. Обязательно загляните, если занимаетесь разработкой web-приложений.

#performance #mobile #js

https://addyosmani.com/blog/the-prpl-pattern/

Артём Караваев на хабре написал статью о том, как складывать числа с плавающей запятой без потери точности.

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

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

s = a+b; // сумма
z = s-a;
t = b-z; // погрешность

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

#math #algorithm

https://habr.com/ru/post/523654/

Рич Харрис на Svelte Summit 2020 рассказал про новые фичи фреймворка, над которыми работает основная команда разработчиков Svelte — "Futuristic Web Development".

Идёт работа над интеграцией возможностей Sapper (фреймворк для построения приложений на базе Svelte с роутингом, код-сплиттингом и т.п.) в основную кодовую базу Svelte. В перспективе разработка Sapper будет остановлена.

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

Svelte будет полагаться на поддержку ESM в современных браузерах, так как для менеджмента зависимостей будет использоваться Snowpack. Благодаря этому не нужно постоянно собирать приложение при изменении кода. Rollup будет использоваться только для сборки финального оптимизированного бандла приложения.

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

#svelte #jsframeworks #talk #experimental

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

Прошло две недели с момента последней публикации про канал для патронов. За это время в Defront Plus было опубликовано много интересных постов:

— Почему важно использовать правильный атрибут lang
— Сеть доверия в npm
— Rust и Web — столкновение парадигм
— Инструменты JS-экосистемы, написанные на компилируемых языках
— Влияние CSS на производительность сайтов
— Использование CSS-функций min(), max() и clamp()
— Early Hints — ускорение доставки ресурсов сайтов
— Как запомнить разницу между justify-content и align-items
— Потерянная аудитория сайтов
— Перенос Redux в web-воркер

Канал существует благодаря вашей поддержке. Становитесь патроном канала на Patreon, чтобы получить доступ к дополнительным постам в Defront Plus.

Спасибо всем, кто читает и поддерживает Defront!

https://www.patreon.com/myshov

Теренс Эден — разработчик web-стандартов — призывает отказаться от использования специализированных CDN для доставки JS-библиотек — "Please stop using CDNs for external Javanoscript libraries".

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

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

Теренс предлагает начать считать антипаттерном подключение кода со сторонних доменов.

#musings #js

https://shkspr.mobi/blog/2020/10/please-stop-using-cdns-for-external-javanoscript-libraries/

Степан Парунашвили объяснил принципы работы Lisp-подобных языков с помощью JavaScript — "An Intuition for Lisp Syntax".

В статье разбирается пример создания системы, которая принимает команды и выполняет их. Сначала используются предопределённые команды, затем добавляется поддержка переменных, потом поддержка создания произвольных функций. В итоге получается игрушечный язык, с помощью которого объясняются основные принципы, на которых построены все Lisp-подобные языки. А именно, почему синтаксис построен на списках, и в чём преимущества подхода "data is code".

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

#programming #js

https://stopa.io/post/265

В Китае очень популярны суперприложения — приложения, с помощью которых можно получить доступ к разным сервисам (заказ такси, бронирование столиков в ресторане и т.п.) Они состоят из нативной оболочки и миниприложений конкретных сервисов, которые создаются с помощью web-технологий. Томас Штайнер из Google разобрался с разными видами миниприложений и подготовил доклад для TPAC 2020 — "Learning From Mini Apps".

Из интересного. Все суперприложения используют разные диалекты HTML и CSS для описания представлений миниприложений — Wxml/WXSS (WeChat), AXML/ACSS (Alipay), Swan Element/CSS (Baidu), TTML/TTSS (ByteDance). Для описания логики используется подмножество JavaScript — WXS (WeChat), SJS (Alipay, ByteDance), Baidu (JS). Для доступа к функциям операционной системы используется специальный мост (bridge). Для связи представления и состояния используется паттерн model-view-viewmodel (MVVM). Все суперприложения предоставляют специальные среды разработки.

Томас предлагает использовать идеи миниприложений для создания многостраничных приложений (multi-page single-page apps — MPSPA) на базе легковесных компонентных фрейморков или custom elements.

#architecture

https://docs.google.com/presentation/d/e/2PACX-1vREwN7H71zfjPP8lwYgyc-iXam7_PMFCxiZy2dQNZ-XpbiKk1aRSj67vxfcegkHogcO0q3BFHxPf6S5/pub

Якуб Джейерлюк поделился шпаргалкой со всеми способами загрузки JavaScript-кода, их преимуществами и недостатками.

Примеры использования:

— "noscript src" — самый распространённый вариант загрузки, используется для загрузки кода стандарта ES5 и ниже
— "noscript src defer" — для отложенного выполнения кода с сохранением порядка выполнения скриптов
— "noscript src async" — для отложенного выполнения кода без сохранения порядка выполнения
— "noscript src async defer" — тоже самое, что и предыдущий вариант, но с поддержкой IE9
— "noscript inline" — для внедрения на страницу небольших сниппетов кода, которые нужно выполнить как можно быстрее
— "noscript src module" — для загрузки кода в современных браузерах
— "noscript src module async" — для загрузки кода для прогрессивного улучшения страницы в современных браузерах
— "noscript inline module" — небольшой сниппет кода, который не нужно кэшировать
— "noscript inline module async" — небольшой сниппет кода для прогрессивного улучшения страницы, который не нужно кэшировать
— "noscript nomodule" — фоллбек для старых браузеров, не поддерживающих модульную систему ECMAScript 2015

#js #esm

https://gist.github.com/jakub-g/385ee6b41085303a53ad92c7c8afd7a6

Пару месяцев назад в твиттере завирусился свежий CSS-синтаксис для задания прозрачности у цвета. Крис Койер написал по этому поводу небольшую статью — "No-Comma Color Functions in CSS".

Ранее у CSS-функций для работы с цветом были две версии: обычная ( rgb, hsl ), и с добавлением альфа-канала ( rgba, hsla ). Чтобы не создавать лишние сущности, авторы спецификации унифицировали синтаксис определения прозрачности при добавлении новых функций lab, lch, color, и теперь можно задать цвет с альфа-каналом без использования специальных функций. В новом синтаксисе компоненты цвета перечисляются через пробел, альфа-канал указывается после символа "/":

/* было */
rgba(0, 128, 255, 0.5)
hsla(198, 28%, 50%, 0.5)

/* стало */
rgb(0 128 255 / 50%)
hsl(198deg 28% 50% / 50%)
lab(56.29% -10.93 16.58 / 50%)
lch(56.29% 19.86 236.62 / 50%)
color(sRGB 0 0.50 1 / 50%)

Поддержка нового синтаксиса есть во всех современных браузерах кроме IE11 (для его поддержки можно использовать PostCSS-плагин).

#css

https://css-tricks.com/no-comma-color-functions-in-css/

Стэфан Гису и Мартин Ширли в блоге web.dev рассказали о том, как собирать аналитику, когда устройство находится в оффлайне — "Measuring offline usage".

Собирать аналитику в оффлайне можно с помощью сервис воркеров. В статье для этого используется библиотека workbox, которая использует сервис воркеры под капотом. В workbox в свою очередь есть расширение, с помощью которого можно собирать оффлайн-аналитику и отправлять её в Google Analytics после перехода устройства в онлайн. Это расширение использует Background Sync API (поддерживается только в Chrome).

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

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

#serviceworker #mobile

https://web.dev/measuring-offline-usage/

Дэниэл Эренберг — участник TC39 — на конференции NodeTLV рассказал про предложение о добавлении в JavaScript нового типа для работы с десятичными числами — "BigDecimal: Avoid rounding errors on decimals in JavaScript".

Не все действительные числа в JavaScript могут быть представлены точно. Это связано с внутренним представлением чисел с плавающей запятой в соответствии со стандартом IEEE 754, который используется в большинстве языков (JavaScript, C, C++, Java и т.п.) Такое представление может приводить к проблемам с операциями над числами, которые должны быть быть представлены точно: деньги, расстояния, размеры и т.п.

В пропозале Decimal описывается новый тип для работы с десятичными числами. Такие числа будут задаваться с помощью суффикса m ( 0.1m + 0.2m === 0.3m ). На данный момент ещё не принято окончательное решение о внутреннем представлении таких чисел. Выбор стоит между BigDecimal и Decimal128.

Предложение находится на первом этапе добавления в стандарт, его поддержки пока нет ни в одном движке.

#js #proposal #talk

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

Инженеры Quip написали две статьи про опыт миграции большого проекта на TypeScript — "The Road to TypeScript at Quip".

Рассматривалось несколько вариантов миграция проекта на TypeScript. Постепенный перенос кода не подходил, так как это бы повлекло за собой много проблем. Разработчики в итоге решили сделать несколько "больших взрывов" для обновления кода. Сначала нужно было перевести код на нативную модульную систему, потом сконвертировать React.createClass в нативные классы, а затем перевести весь код на TypeScript.

Исходная кодовая база Quip была покрыта типами Google Closure Compiler. Для конвертирования этих типов можно было воспользоваться утилитой Gents от Google, но он не подходил, так как в проекте использовался специфичный синтаксис, поэтому нужно было написать свой конвертер.

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

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

#typenoscript #migration

https://quip.com/blog/the-road-to-typenoscript-at-quip-part-one
https://quip.com/blog/the-road-to-typenoscript-at-quip-part-two

Марк Эриксон рассказал о том, в каких случаях Redux не самое лучшее решение — "When (and when not) to reach for Redux".

Redux появился в 2015 году и был очень популярен несколько лет, но сейчас это не самый лучший инструмент. Вопрос кэширования данных взяли на себя библиотеки swr, React Query, Apollo. Проблемы с явной передачей пропсов от корня к дочерним компонентам (props drilling) решается в React из коробки, начиная с версии 16.3, благодаря стабилизировавшемуся Context API. Также Марк говорит о том, что Redux неоптимален для работы со стейтом, но не приводит альтернатив, поэтому позволю себе наглость добавить их от себя: Mobx, Reatom, Effector.

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

#react #statemanagement

https://changelog.com/posts/when-and-when-not-to-reach-for-redux