Увидел сегодня в ленте твиттера ссылку на серию статей Лео Фабриканта про оптимизацию производительности контрола автодополнения — "Secrets of JavaScript: A tale of React, Performance Optimization and Multi-threading".

Автор решал задачу отзывчивого автодополнения для названий научных организаций. Так как эти названия длинные, пользователь с большой вероятностью может сделать опечатку, поэтому важно было сделать поиск нечётким (fuzzy search), что увеличивало общее время поиска и создавало лаги при вводе текста. В статьях описаны разные подходы, которые Лео попробовал реализовать для уменьшения лагов: от setTimeout до пулла Web Worker'ов.

Статьи написаны очень доступно. Рекомендую почитать, если чувствуете, что не хватает знаний про профилировку приложений. Все примеры написаны на React, но описанные концепции можно использовать с любым фреймворком.

#performance #react #ux

https://levelup.gitconnected.com/secrets-of-javanoscript-a-tale-of-react-performance-optimization-and-multi-threading-9409332d349f

Ох, чую будут недовольные этим постом, но пройти мимо не могу.

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

Закрытие границ с другими странами, ввод карантина в некоторых регионах и просьба не выходить на улицу со стороны властей может выглядеть как глупость и банальная паника. Очень многие из нас имеют хороший иммунитет и проблема кажется не такой серьёзной: "Ну переболею этой ерундой, и что такого?" Как относительно молодой и здоровый человек, я с этим абсолютно согласен. Но есть люди, которые попадают в группу риска — чьи-то пожилые родители, люди с пониженным иммунитетом. Именно ради них стоит задуматься о том, чтобы уменьшить риск распространения вируса и сократить количество контактов с другими людьми.

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

В общем, желаю всем здоровья и, пожалуйста, помогайте друг другу.

#StayTheFuckHome

https://staythefuckhome.com/ru/

Сегодня во всех каналах прогремела новость — GitHub купил npm. В блоге GitHub появился пост Ната Фридмана о том, что это значит для сообщества — "npm is joining GitHub".

В ближайшем будущем усилия будут сфокусированы на инфраструктуре реестра. Также продолжается работа над седьмой версией npm — самая большая фича следующего релиза Workspaces (управление множеством пакетов из пакета верхнего уровня). Обещают активно сотрудничать с сообществом и ментейнерами пакетов — планируют расширить программу GitHub Sponsors на экосистему npm. Платные сервисы npm будут продолжать работать, но в этом году приватные пакеты npm можно будет переместить в GitHub Packages. Фокус в развитии npm смещается исключительно на публичный реестр.

Так как GitHub принадлежит Microsoft, это означает: что npm переходит под её крыло. Уж что-что, а инструменты для разработчиков Microsoft умеет делать хорошо.

#announcement #npm #github #microsoft

https://github.blog/2020-03-16-npm-is-joining-github/

Недавно Фрэнк Фаулкнер — участник рабочих групп W3C — обновил свою статью про проблемы доступности атрибута noscript — "Using the HTML noscript attribute".

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

Если noscript используется для дополнительного описания ссылок, то эту информацию стоит вынести в текст ссылки. Если noscript используется для добавления описания к изображению, то лучше всего вынести это описание как текст и разместить его рядом с изображением. В 2020 году осталось только единственное место, где noscript может быть полезен, — добавление дополнительной информации к фреймам. Но фреймы в современном web'е не используются, так что про этот случай можно забыть.

Хорошая статья. Рекомендую почитать.

#a11y #html

https://developer.paciellogroup.com/blog/2010/11/using-the-html-noscript-attribute/

Дэниэл Маккей рассказал как использовать проверку типов TypeScript в VSCode без добавления компилятора ts в процесс сборки приложения — "Using Typenoscript Without Typenoscript".

VSCode из коробки поддерживает проверку типов в JavaScript-файлах. Для этого нужно в редакторе включить опцию checkJs или использовать специальные комментарии в начале файла: // @ts-check — для пофайлового включения проверки типов и // @ts-nocheck для исключения файла из проверок. Типы подхватываются из определений JSDoc. Для определения пользовательских типов можно использовать @typedef, также можно вытащить описание типов в d.ts -файл и импортировать его внутри JSDoc:

/**
 * @param {import("./main").ISomeModel} req
 * @returns {Promise<import("./main").IApiResponse>}
 */

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

#typenoscript #bundlerfree

https://www.dandoescode.com/blog/using-typenoscript-without-typenoscript/

Берт Бос — можно сказать один из отцов CSS (участвует в разработке стандартов с 1996 года) — поделился своими мыслями по поводу версионирования CSS в статье "CSS X".

Последняя пронумерованная версия CSS была CSS3. CSS3 — это неофициальное название набора независимых спецификаций (модулей), которые были извлечены из монолитной спеки CSS2.1 с добавлением новых модулей. Такое разделение было удобно для рабочей группы и разработчикам браузеров, но стало неудобно для разработчиков: что было добавлено после CSS3, где можно найти систематизированную информацию в удобном виде и т.п.

В статье Берт пишет о том, что рабочая группа не будет брать на себя обязанности по определению того, что должно входить в CSS4. Если брать работу по версионированию, то возникает много вопросов: какие модули должны попасть в новую версию, с какой частотой подымать версию, как взаимодействовать с разработчиками браузеров и т.п. Он предлагает сообществу (будь это комитет из участников разных организаций или недавно сформированная CSS4 Community Group) независимо от рабочей группы сформировать независимый набор спецификаций — CSS4. Он не видит в этом ничего плохого.

CSS4 Community Group начала свою работу с февраля этого года. Вполне возможно, что эта инициатива будет успешна.

#css #specification #musings

https://www.w3.org/blog/2020/03/css-x/

Разработчики браузеров начинают задумываться о том, чтобы перевести HTTP-заголовок User-Agent в статус deprecated.

User-Agent не был надёжным средством для определения возможностей браузера, но тем не менее многие сайты его используют. Более того на некоторых логика работы с UA сломана, из-за чего возникают неприятные ошибки. Шима Видас решил проверить, как будут вести себя современные сайты, если на наделю отключить User-Agent. Что из этого получилось, он описал в статье "My findings after browsing the web without a User-Agent header for one week".

Большинство сайтов работало без каких-либо проблем, включая Amazon, Reddit, Instagram, Google Photos. Но в Google Docs выскакивало сообщение о том, что могут быть недоступны некоторые функции. iCloud рекомендовал использовать последние версии браузеров. Twitter переключал на старую версию сайта, а поиск Google отдавал HTML-only версию сайта. Были баги. В Google Docs перестали работать некоторые горячие клавиши, в Twitter сломалось копирование и вставка в текстовых полях. Twitch падал с ошибкой в JS из-за того, что не был учтён случай, когда navigator.userAgent пустая строка. Некоторые сайты начали воспринимать пользователя как бота и переставали открываться (Facebook, Arstechnica, Apple Developer).

Я лично поддерживаю начинание объявить устаревшим User-Agent. Но, думаю, что этот процесс может легко растянуться на несколько лет.

#http #web

https://webplatform.news/issues/2020-03-19

Фредерик О'Брайен в статье "What Does A Foldable Web Actually Mean?" размышляет о будущем web в контексте распространения устройств со складывающимися экранами.

Устройств со складывающимися экранами становится больше: Galaxy, Huawei и Motorola уже выпустили девайсы с гнущимся экраном, а Microsoft анонсировала Surface Duo — устройство с двумя независимыми экранами. Для того чтобы можно было адаптировать страницы и web-приложения под такие экраны, разрабатываются новые спецификации. Microsoft работает над новой спецификацией для CSS и JavaScript API. В CSS предлагается использовать новое медиа-выражение spanning, которое будет органично вписываться в концепцию отзывчивого дизайна. Для получения информации о сегментах в JS (например, для WebGL-приложения), предлагается использовать window.getWindowSegments. Благодаря этим возможностям можно будет реализовать новые пользовательские сценарии. Например, когда на одной половине устройства отображается web-карта, а на другой — список организаций,

Маловероятно, что foldable-устройства окажут такой же эффект на web, какой в свое время оказало появление iPhone, но работа над адаптацией web-платформы уже идёт.

#mobile #web

https://www.smashingmagazine.com/2020/02/foldable-web-meaning/

Брайан Карделл — один из участников w3c — написал небольшую статью про проблему сломанных ссылок в вебе — "Making Sure Content Lives On..."

Брайан пишет про то, что веб — ненадёжная среда для хранения контента, который должен быть доступен в течение многих лет. Его публикации на сайтах, где он писал как приглашённый автор, исчезли навсегда, после того как эти сайты прекращали существовать. Для более надёжного сохранения контента можно использовать Internet Archive, но у него есть проблема — нет гарантий, что страница автоматически попадёт в архив.

Сейчас можно добавлять страницы в архив только вручную: с помощью специальной формы на сайте или добавив http://web.archive.org/save/ в начале url страницы, которую нужно сохранить. Брайан связался с техническим директором Internet Archive и сделал более удобный сервис для автоматизированного сохранения страниц. Сейчас он открыт для всех, если эксперимент будет успешен, то Internet Archive реализует что-то подобное у себя.

Если публикуете контент на больших и серьёзных сайтах (habr, medium, dev.to), то стоит задуматься о том, чтобы добавлять свои статьи в Internet Archive. Я же с этого момента буду добавлять в архив все статьи из канала. Если какая-то ссылка будет сломана, то её можно будет найти в интернет архиве.

#web #experimental

https://bkardell.com/blog/ArchivingByDefault.html

Менди Майкл написала статью про влияние вариативных шрифтов на производительность страницы — "The performance benefits of Variable Fonts".

Менди сравнила вариативные и обычные шрифты по трём показателям: количество запросов, размер загружаемых шрифтов и время до первого рендеринга. По количеству запросов у вариативных шрифтов нет недостатков — в одном файле шрифта находятся все вариации. Размер вариативных шрифтов в зависимости от ситуации может быть больше или меньше размера стандартных шрифтов, но использование формата woff2 и ограниченного набора глифов может очень сильно уменьшить размер файла. По времени до первого рендеринга стандартные шрифты могут быть лучше, так как начертания находятся в отдельных файлах, но это тоже всё зависит от ситуации. Например, если для вариативных шрифтов используется font-display: swap, то задержка рендеринга не будет большой проблемой — текст будет виден.

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

#typography #web #performance

https://uxdesign.cc/the-performance-benefits-of-variable-fonts-79af8c4ff56c

Вилл Тейлор опубликовал статью про основные понятия лямбда-исчисления на примере JavaScript — "An introduction to Lambda Calculus, explained through JavaScript".

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

Статья не сложная. Если интересуетесь функциональным программированием, очень рекомендую почитать.

#js #math #fp

http://willtaylor.blog/an-introduction-to-lambda-calculus-explained-through-javanoscript/

Джонатан Лай из Etsy рассказал, как его команда ускорила Webpack-сборку приложения — "The journey to fast production asset builds with Webpack".

Первая версия приложения собиралась самописным сборщиком "builda". Команда Etsy занималась его поддержкой, но не успевала за развитием js-экосистемы, поэтому было принято решение перевести сборку на Webpack. Главными требованием было время сборки — не более 5 минут.

Проект состоит из более 12000 модулей, которые с учётом одиннадцати локалей собираются в 13200 ассетов. Подход "в лоб" с использованием готовых Webpack-плагинов увеличил время сборки до 40 минут (сборка с использованием legacy-сборщика проходила за 5 минут). Основная проблема заключалась в лишней работе при генерации локалей. В итоге ребятя сделали своё решение, в котором ассеты для всех локалей генерируются один раз. Решили проблему со скоростью минификации файлов. Terser-webpack-plugin в их случае неэффективно работал с большим количеством модулей из-за того, что главный поток упирался в работу с диском и сериализовывал большое количество данных перед отправкой в воркеры. Процесс минификации вынесли из сборщика в отдельный шаг пост-процессинга.

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

#webpack #performance

https://codeascraft.com/2020/02/03/production-webpack-builds/

С 2018 года поиск Google начал использовать для ранжирования сайтов метрики производительности. В этом году для оценки производительности будут добавлены новые метрики. Алексей Махметхажиев рассказал о грядущем обновлении в статье "Новый Google PageSpeed Insights на движке Lighthouse 6 (beta): проверьте, какие показатели будут у вашего сайта".

Будут добавлены TBT (Total Blocking Time) — время в течении которого пользователь не может взаимодействовать с сайтом после его отображения, например, из-за парсинга большого объёма js-кода. LCP (Largest Contentful Paint) — время до отрисовки самого большого фрагмента контента на странице. CLS (Cumulative Layout Shift) — метрика, показывающая насколько сильно происходит сдвиг контента при загрузке сайта.

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

#seo #performance #google

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

Джереми Вагнер — специалист по производительности — запустил новый канал на youtube. В первом видео он рассказал про IntesectionObserver — "Hell-bent for Webperf: The IntersectionObserver API".

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

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

#performance #videoepisode

https://www.youtube.com/watch?v=3Esjyp7wnhQ

Крейг Баклер написал неплохой пост про отладку Node.js-приложений — "How to Debug a Node.js Application: Tips, Tricks and Tools".

В статье рассказывается про разные способы отладки: от методов объекта console ( console.log(), console.dir(), console.count() ) до использования сторонних npm-пакетов. Довольно много инфы про VS Code. Например, он поддерживает логпойнты (логирование состояния приложения без изменения исходного кода программы). В отличие от инструментов разработчика Crhome и Firefox, где логпойнт это js-код, VS Code использует формат some denoscription {variable}.

Cтатью можно почитать, если хотите узнать больше про возможности отладки Node.js.

#debug #nodejs

https://www.sitepoint.com/debug-node-app-tips-tricks-tools/

Джим Бланди и Гарольд Киршнер из команды Firefox рассказали про то, как они оптимизировали JavaScript-отладчик в инструментах разработчика — "Future-proofing Firefox’s JavaScript Debugger Implementation".

Отладчик в Firefox состоит из фронтенда, написанного на React и Redux, и слоя интеграции с JS-движком SpiderMonkey. Именно про оптимизацию этого слоя рассказывается в статье. Одна из оптимизаций заключалась в упрощении реализации сборщика мусора. Отладчик использует Debugger API, который доступен в коде dev tools с помощью объекта Debugger. Для установки текущего состояния отладки js-кода использовался специальный флаг Debugger.enabled, который создал много проблем в реализация сборщика мусора. В процессе чистки кода от этого флага избавились, значительно упростив код в самом отладчике и js-движке.

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

#firefox #internals

https://hacks.mozilla.org/2020/03/future-proofing-firefoxs-javanoscript-debugger-implementation/

Росс Кирслинг — участвует в разработке спецификации ECMAScript — написал статью про самую ужасающую часть спецификации — "Tales from "Ecma's Crypt": Annex B.3.3".

В JavaScript всегда была возможность использовать блоки ( {} ) не только с операторами if, while, for, но и как обособленную синтаксическую конструкцию (standalone block). Спецификация не описывала ситуацию, когда внутри блока определялась функция, поэтому исторически в разных браузерах этот сценарий был реализован по-разному. Для исправления этой проблемы в спецификацию был добавлен раздел, который фактически говорит о том, что определение функции внутри блока должно себя вести одновременно как var и let. Например, вот этот код не в strict-режиме выведет в консоль 1:

var a = -1;
(function () {
  const printOuter = () => console.log(a);
  {
    a = 1;
    function a() {}
    a = 2;
    printOuter();
  }
})();

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

#js #specification

https://dev.to/rkirsling/tales-from-ecma-s-crypt-annex-b-3-3-56go

Разработчики Chrome и Edge в прошедшем году работали над элементами управления форм в браузере. В блоге Chromium появилась статья, в которой рассказывается о проделанной работе — "Updates to form controls and focus ".

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

В итоге все элементы были приведены к единому внешнему виду и адаптированы под тач-устройства. У всех элементов и диалогов появилась полноценная поддержка управление с клавиатуры, например, диалогом выбора цвета теперь можно пользоваться без мыши/тачпада. Был доработан фокус у элементов. Теперь это рамка чёрного цвета с белой обводкой. Так было сделано, для того чтобы фокус был виден на светлых и тёмных фонах. Эти изменения уже доступны в Edge, включение новых элементов для пользователей Chrome запланировано в версии 83.

Для того чтобы системно собирать обратную связь по новым элементам, разработчики Edge создали сайт open-ui.org. Если вы работаете над дизайн-системой или набором компонентов, разработчики приглашают присоединиться к обсуждению элементов управления браузера.

#ux #a11y

https://blog.chromium.org/2020/03/updates-to-form-controls-and-focus.html

В блоге v8 была опубликована третья часть из серии статей Марьи Хёлтэ про структуру спецификации ECMAScript — "Understanding the ECMAScript spec, part 3".

В этой статье объясняется несколько тем: разница между лексической и синтаксической грамматикой, принцип разворачивания сокращений ( [+In, ?Yield, ?Await] и другие) в полноценные продукции. Всё разбирается на примере того, как в спецификации описывается возможность использования ключевого слова await в качестве идентификатора в обычных функциях, и каким образом await становится недоступен в асинхронных функциях. Для полного понимания статьи нужно быть знакомым с базовыми принципами построения контекстно-свободных грамматик — будет достаточно почитать несколько абзацев на википедии.

Эта статья не последняя в серии — в следующей части обещают рассказать, как в спеке описывается automatic semicolon insertion (ASI).

#js #specification

https://v8.dev/blog/understanding-ecmanoscript-part-3

Кэти Хемпениус на сайте web.dev опубликовала гид по решению проблем, возникающих из-за большого траффика — "Fix an overloaded server".

Если на сайт внезапно пришло большое количество пользователей, и он перестал осиливать нагрузку, то надо предпринять четыре шага:
1. Оценка — поиск причин отказов: CPU, IO, память, сеть.
2. Стабилизация — быстрые фиксы, которые позволят вернуть сайт к жизни: rate limiting, кэширование, отключение фич, которые особо сильно не влияют на бизнес-метрики, но которые потребляют ресурсы.
3. Улучшение — использование CDN и балансеров, добавление железа, использования сжатия ресурсов
4. Мониторинг — использование средств мониторинга показателей по перцентилям, чтобы средние значения не могли скрыть проблемы, которые возникают не у всех пользователей.

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

#performance #backend

https://web.dev/overloaded-server/

В блоге WebKit вышла статья про новинки Safari 13.1, релиз которого запланирован на весну, — "New WebKit Features in Safari 13.1".

На iPadOS появится полноценная поддержка мыши и тачпада. Чтобы контент был доступен для всех пользователей вне зависимости от устройства ввода, он не должен зависеть от тач-событий. Вместо них рекомендуется использовать Pointer Events.

Было добавлено много новых API. С помощью Web Animations API станет доступно программное управление параметрами анимаций и переходов: остановка и повторное воспроизведение анимации, изменение направления, скорости, продолжительности и т.п. Будет доступен Async Clipboard API, который предоставляет доступ к системному буферу обмена, сохраняя отзывчивость страницы. API доступен только в безопасном контексте внутри обработчиков жестов пользователя, например, pointerup. Реализована поддержка ResizeObserver для более гибкого управления дизайном компонентов в зависимости от размеров контейнера, а не вьюпорта. В WebRTC добавлена поддержка работы через прокси-сервисы и Dual-Tone Multi-Frequency (DTMF) для поддержки большего количества аудио-сервисов.

Элементы управления форм будут поддерживать новый атрибут enterkeyhint, с помощью которого можно изменить текст кнопки enter виртуальной клавиатуры на done, go, next, previous, search и send.

В CSS появится поддержка Shadow Parts для стилизации web-компонентов по месту использования. Добавлен line-break: anywhere для мягких переносов внутри текста. Было добавлено новое медиа-выражение dynamic-range для адаптации контента под специфические возможности экрана, например, HDR.

В JavaScript движке появится поддержка оператора nullish coalescing ( ?? ) и нового метода String — String.prototype.replaceAll().

В инструментах разработчика панели Debugger и Resource объединены в единую панель Sources для более удобной отладки кода. Пояится новая вкладка Layers 3D-визаулизацией отрендеренных слоёв для упрощения поиска проблем производительности. На уровне инструментов разработчика можно адаптировать любой скрипт под свои нужды с помощью Local Overrides. Теперь также как и в Chrome Dev Tools любой скрипт может быть проигнорирован во время отладки с помощью Script Blackboxing.

Соединения с ресурсами по протоколам TLS 1.0 и TLS 1.1 будут помечаться как "Not Secure". Информация из document.referrers будет доступна только оригинальному домену. Любые данные web-сайтов (Indexed DB, LocalStorage, Media keys, SessionStorage, Service Worker registrations) старше семи дней будут очищаться, если пользователь не посетит сайт в течении этого периода. Последний пункт — очень спорное решение, которое вызвало негодование среди разработчиков.

#safari #announcement

https://webkit.org/blog/10247/new-webkit-features-in-safari-13-1/