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

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

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

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

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

#release #firefox

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

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

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

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

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

#talk #musings

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

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

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

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

#performance #algorithm #library

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

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

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

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

#talk #react #musings

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

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

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

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

#css #musings #architecture

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

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

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

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

#performance #svg #webpack

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

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

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

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

#performance #cssinjs #react

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

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

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

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

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

#chrome #release #announcement

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

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

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

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

#performance #cdn #cache

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

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

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

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

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

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

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

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

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

— Вышла версия спецификации ECMAScript 2019. Добавлены     Object.fromEntries(), String.trimStart(), Array.flat(), Array.flatMap(), Symbol.description, 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-transcripts/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 или обычный description. Обычно такие превью можно увидеть в мессенджерах: 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. Там я публикую и ретвичу интересные новости и апдейты, которые сюда не попадают.

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