Недавно вышла новая версия 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/

Web-worker — это механизм, который позволяет вынести выполнение кода из главного потока браузера. Он доступен в браузерах уже более 10 лет. Проблема в том, что загрузка дополнительного кода в воркерах застряла в 2009 году — там используется синхронная функция loadScripts(), которая загружает код в глобальную область видимости модуля. Джейсон Миллер из Google рассказал про новый подход, который позволяет устранить недостатки старого подхода работы с модульным кодом в веб-воркерах — "Threading the web with module workers".

Новый подход использует ESM ( import/export ), тем самым автоматически подхватывая все преимущества загрузчика новой модульной системы (параллельная загрузка кода, предварительная загрузка и парсинг кода с помощью хинта modulepreload ). Тип воркера необходимо указывать при его создании, передавая дополнительный аргумент {type: 'module'}:

const worker = new Worker('worker.js', {
  type: 'module'
});

На данный момент поддержка module workers есть только в Chrome 80. Идёт работа над поддержкой ESM в service workers.

#esm #webworkers

https://web.dev/module-workers/

В проектах со сложной структурой и большой командой для поддержки инфраструктуры может использоваться специальный процесс — фронтопс. Анна Селезнёва на прошедшем Web Standards Days рассказала, что скрывается за этим термином в докладе "Фронтопс? Серьёзно?"

Фронтопс (так же как и девопс) — это методология, которая позволяет связать в одно целое процесс написания кода и его доставку до пользователя (то есть всю инфраструктуру). В компаниях, которые в той или иной мере следуют этой методологии, для решения инфраструктурных задач, связанных с фронтендом, выделяют отдельную команду разработчиков или разработчика. Подобные команды есть в Яндекс.Маркете, PayPal, Apple. В докладе рассказывается про историю появления термина "фронтопс" и задачи, которые решаются в его рамках: сборка, линтинг, тесты, сбор ошибок, ci и т.п.

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

#frontops #talk

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

Небольшие новости

Где-то месяц назад я ушёл из Яндекса, и теперь у меня кончились деньги и еда. Шучу. Но из Яндекса я, правда, ушёл. Как бы то ни было, это были три очень крутых года в Маркете, которые меня многому научили. Вторая новость — почти не новость. Через несколько месяцев планирую проапгрейдить Defront. Как говорят, "Stay tuned".

Хочу напомнить, что у канала есть чат для обсуждения новостей — @defrontchat. Присоединяйтесь! И подписывайтесь на мой твиттер https://twitter.com/myshov. Там я публикую и ретвичу интересные новости и апдейты, которые сюда не попадают.

Спасибо за то, что читаете канал и поддерживаете добрым словом.

Петер Хеденског рассказал, как на Wikipedia измеряется отзывчивость сайта — "Measuring Long Tasks and First Input Delay".

Для измерения отзывчивости в Wikipedia используют Long Tasks API и метрику First Input Delay (доступны только в Chrome). Long Tasks API позволяет найти задачи, выполнение которых занимает более 50 мс в основном потоке. В собираемых данных нет информации о том, какая именно задача забивала поток, поэтому в синтетическом окружении дополнительно собираются логи производительности, это помогает в поиске конкретных задач. First Input Delay показывает, сколько времени занимает отклик после первого взаимодействия со страницей. Эту метрику сложно измерить адекватно в синтетическом окружении, но её можно аппроксимировать с помощью max potential first input delay.

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

#performance #metrics #wikipedia

https://calendar.perfplanet.com/2019/measuring-long-tasks-and-first-input-delay/

Никогда такого не было и вот опять. Пару дней назад в твиттере выясняли, что лучше использовать const или let.

На этот раз этот всё началось с твита Дэна Абрамова, в котором он пошутил над участниками Reddit по поводу его недавней статьи, где он предлагал использовать let. В треде он упомянул старый твит, в котором разработчики стандарта признают, что добавление двух способов для декларации переменных в блочном скоупе было ошибкой. Также в тред пришёл Аллен Вирфс-Брок — участник TC39, работавший над ES2015. Он написал, что const и let — наследие ES4, которому не придали большого внимания при переносе в ES2015. Аллен пишет, что если бы он мог это исправить, то оставил бы только const, но переименовал бы его в let. Затем в тред пришёл Брендан Айк и написал, что добавление const было вынужденной мерой, так как в некоторых движках он уже был имплементирован.

В итоге Дэн написал статью "On let vs const", где сравнил преимущества и недостатки использования eslint-правила prefer-const. Вывод простой — используйте то, что вам больше нравится.

#history #es2015 #tc39

https://overreacted.io/on-let-vs-const/
https://twitter.com/littlecalculist/status/917875241891676160
https://twitter.com/awbjs/status/1208447372910444544

Safari 13 был выпущен в сентябре. Прошло больше двух месяцев, и в блоге WebKit появился пост про все новые фичи, которые стали доступны — "New WebKit Features in Safari 13".

Safari на iPadOS (кроме iPad Mini) теперь по умолчанию отправляет User Agent десктопного Safari. В режиме многозадачности, когда браузер занимает одну треть экрана, User Agent становится Safari для iOS.

Была добавлена поддержка нового API Pointer Events, который абстрагирует разные устройства ввода и предоставляет информацию о координатах указателя, нажатых кнопках, наклоне стилуса и силы его нажатия.

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

С версии Safari 13 скролл с инерцией применяется ко всем элементам с overflow: scroll. Ранее для этого использовалось свойство -webkit-overflow-scrolling: touch; — сейчас оно потеряло свою актуальность.

Благодаря новому WebDriver теперь можно использовать реальные устройства (iPad, iPhone) для автоматического тестирования сайтов.

Улучшили производительность движка. На 50% ускорили загрузку сайтов на watchOS. Добавили поддержку тёмного режима. Работали над улучшением механизма предотвращения трекинга пользователей. Добавили поддержку физических ключей безопасности FIDO2. Apple Pay теперь доступен во WebView. Улучшили поддержку медиа-источников — WebKit сейчас поддерживает прозрачность в видео с альфа-каналом. Улучшили инструменты разработчика.

#webkit #announcement

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

Есть очень быстрая библиотека для работы с картами — Leaflet (используют в Facebook, Github, 2ГИС). Она была разработана Владимиром Агафонкиным. Вова помешан на производительности; и вот месяц назад он рассказал доклад "Fast by default: algorithmic performance optimization".

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

В общем, доклад крутой. Рекомендую посмотреть.

#talk #performance #algorithm

https://www.youtube.com/watch?v=hh6SohUq1yQ&feature=youtu.be

Нашёл большое исследование произодительности сайтов от SEO-агентства Backlink — "We Analyzed 5.2 Million Desktop and Mobile Pages. Here’s What We Learned About Page Speed".

Исследование проводилось на основе данных HTTP Archive 2019 года. В нём есть несколько интересных выводов. Например, что использование CDN коррелирует c наихудшим индексом Page Speed как на десктопах, так и на мобильных устройствах. Наихудший результат показал Akamai. При исследовании таймингов TTFB (Time To First Byte) по регионам быстрее всех оказался Китай, за ним Япония и Китай. Россия, Франция, Великобритания и США показали средний TTFB. Наихудший результат у Австралии, Бразилии и Индии. Тем не менее в отчёте есть сомнительные моменты, например, при исследовании JS-фреймворков наряду с React, Vue и Angular в список попали Handlebars.js и Require.js.

Как бы то ни было, если занимаетесь производительностью, настоятельно рекомендую посмотреть отчёт. Было бы круто, если бы кто-нибудь ещё сделал подобное исследование, чтобы исключить неверную интерпретацию данных (идея для pr-отдела вашей компании).

#performance #web

https://backlinko.com/page-speed-stats

Наконец-то добрался поизучать итоги последнего исследования JavaScript-экосистемы — State of JS 2019. Данных очень много, поэтому перечислю, на мой взгляд, самое интересное.

В исследовании участвовало более 20 тысяч разработчиков. TypeScript третий год подряд остаётся самым популярным альтернативным языком web'а. Angular и Redux сдают позиции — в этом году большее число респондентов остались ими недовольны. У Jest самый высокий уровень лояльности — 96% остались им довольны. Наиболее используемые библиотеки — lodash, moment и jquery. По сравнению с прошлым годом большее количество опрошенных перешло с moment на современные аналоги — luxon/date-fns. GraphQL используют уже 38%, в прошлом году было 20%.

#js #survey

https://2019.stateofjs.com

Дэвид Калхоун написал статью про влияние на производительность разных подходов к бандлингу кода — "Bundling JavaScript for Performance: Best Practices".

Самый лучший вариант отделить вендорный код от кода приложения и доставлять бандлы до пользователей с помощью CDN-провайдеров. Подключение библиотек, которые хранятся на публичных CDN (cdnjs, jsdelivr и т.п.), нежелательно. В Safari использование публичных CDN приводит к лишнему запросу даже в том случае, когда в соседней вкладке другой сайт загружал ту же самую библиотеку с того же самого сервера. Это сделано для предотвращения отслеживания пользователей. В Chrome отключение общего кеша появилось с 77-ой версии, но пока за флагом.

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

#performance #bundle

https://calendar.perfplanet.com/2019/bundling-javanoscript-for-performance-best-practices/

Эрик Лоуренс — работает над Edge — собрал хорошую подборку способов взаимодействия web-приложений с нативными приложениями — "Browser Architecture: Web-to-App Communication Overview".

— Application Protocols. Приложения могут зарегистрировать в системе протокол, при переходе по которому браузер будет их запускать.
— Native Messaging via Extensions. Браузерные расширения могут общаться с нативными приложениями с помощью nativeMessaging API.
— File downloads (Traditional). Приложения могут зарегистрировать себя в системе таким образом, чтобы они открывались при загрузке файлов.
— File downloads (DirectInvoke). Тоже самое, что и предыдущий пункт, но приложение открывает не загруженный файл, а ссылку на него. Поддерживается только в IE/Edge.
— Local Web Server. Приложение может запустить локальный web-сервер, с которым будет общаться web-приложение с помощью WebRTC, WebSocket, Fetch и т.п. Может быть небезопасно.
— Android Intents. Похоже на App Protocols — страница может запустить приложение для обработки конкретной задачи.
— Legacy Plugins/ActiveX. Пожалуйста, не используйте. Это один из самых больших источников уязвимостей в истории web'а.

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

#web #integration

https://textslashplain.com/2019/08/28/browser-architecture-web-to-app-communication-overview/

Изменение контента страницы может влиять на fps или блокировать работу со страницей из-за большого объёма работы, которую надо выполнить браузеру. Например, изменение свойства left у одного элемента может вызвать проверку необходимости изменения положения для каждого элемента в DOM-дереве, что неэффективно. Именно для решения этой проблемы была разработана спецификация CSS Containment. Рейчел Эндрю недавно написала про неё статью — "Helping Browsers Optimize With The CSS Contain Property".

CSS Containment определяет одно свойство — contain, которое может содержать значения layout, paint, size, content и strict. Все эти значения подсказывают браузеру, что изменения внутри элемента, к которому применено свойство, не влияют на другие элементы, поэтому браузер может производить дополнительные оптимизации, сокращая время на рендеринг и лайаут контента. У всех этих значений есть нюансы использования. Например, одни значения влияют на отображение контента, другие создают блочный контекст форматирования и т.п. В статье рекомендуется использовать contain: content для web-приложений, построенных на базе компонентного подхода.

CSS Containment стал официальным стандартом месяц назад. Поддержка этой спеки есть в Chrome и Firefox.

#css #performance

https://www.smashingmagazine.com/2019/12/browsers-containment-css-contain-property/