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

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

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

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

#performance #metrics

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

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

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

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

#serviceworker #performance

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

Джек Франклин — разработчик Chrome Dev Tools — написал статью про важность простоты кода — "Keeping Code Simple".

Основная идея статьи. Число строк кода — это не очень адекватная метрика для оценки качества кода. Если одну задачу можно решить в несколько строк кода и если есть альтернативное решение в несколько раз больше, это не означает, что первый вариант лучше. Вполне возможно, что решение с меньшим числом строк будет менее читабельно и труднее в поддержке. Хороший код — это такой код, который прост в поддержке, лёгок в понимании и не требует больших сил для изменений.

Хочется добавить немного своих мыслей. Нет ничего страшного в написании хитрого кода ради фана, но если с кодом работают другие программисты, то приоритет должен быть у простоты.

#programming #musings

https://www.jackfranklin.co.uk/blog/keep-javanoscript-code-simple/

Представляю новый канал — Defront Plus

Наконец-то могу рассказать вам про новый канал. Хочу сразу ответь на вопрос "Зачем?".

Я очень основательно подхожу к написанию постов в Defront. Ищу материал, много читаю и выбираю из всех статей самые интересные. Сейчас на ведение канала у меня уходит 15-20 часов каждую неделю. Ограничение в один пост каждый день заставляет выбирать только наиболее интересные и полезные статьи. Мне нравится это ограничение. Благодаря ему в канал попадает только самое важное. Но это также означает, что в канал не попадают другие статьи, которые могли бы быть кому-нибудь интересны и полезны, но которые не влезают в формат канала.

Defront Plus — это приватный канал с дополнительным постами, которые не публикуются в основном канале. Он доступен для всех, кто поддерживает меня на Patreon. В Defront Plus еженедельно публикуются пять дополнительных постов (это примерно 20 дополнительных постов в месяц). Формат статей точно такой же как в основном канале — к их написанию подхожу с такой же ответственностью.

FAQ:

Вопрос: Это значит, что основной канал станет хуже?
Ответ: Нет. Я активно веду Defront Plus уже пару недель, и за это время качество постов в основном канале не ухудшилось.

Вопрос: Могу ли я читать посты, не подписываясь на Patreon?
Ответ: Можете, но нужно будет подождать. Посты будут становиться доступными и публиковаться на defront.ru спустя 9 месяцев с даты начальной публикации.

Вопрос: Есть ли примеры постов, которые публикуются в Defront Plus?
Ответ: Примеры постов можно посмотреть тут https://www.patreon.com/posts/defront-plus-38987766

Вопрос: Как получить доступ в Defront Plus?
Ответ: Нужно сделать пледж на Patreon и отправить мне через личные сообщения Patreon свой ник в telegram. Я добавлю вас в канал. Пока этот процесс не автоматизирован, поэтому в случае проблем пишите мне в лс.


Подписывайтесь на Defront Plus! Помогая мне на Patreon, вы помогаете каналу развиваться и становиться лучше.

https://www.patreon.com/myshov

В последнее время представители сообщества резко высказываются о RxJS. Бен Леш — один из основных разработчиков RxJS — рефлексирует по этому поводу и делится своими сожалениями — "Observables, Reactive Programming, and Regret".

Первое сожаление — огромное API, которое было унаследовано много лет назад от RxNET. Некоторые операторы следовало бы удалить, но их оставили из-за совместимости.

Второе сожаление — RxJS у основной массы разработчиков ассоциируется с его операторами, а не с Observable. Observable — это паттерн, на котором построена библиотека RxJS. Его реализацию можно найти в других популярных библиотеках, например, в Relay. Сама по себе концепция Observable гораздо важнее чем все хелперы из RxJS, которые её окружают.

Третье сожаление — проект не определил явные границы, где лучше всего использовать библиотеку. При изучении RxJS у разработчиков появляется желание применять её там, где следовало бы использовать альтернативные решения.

Четвёртое сожаление — разработчики ядра библиотеки не делились с сообществом подходами к написанию читабельного кода. Из-за этого возникло недопонимание, и разработчики начали считать, что на RxJS невозможно писать понятный код.

Бен пишет, что планирует поработать над этими проблемами в будущем. Вполне возможно, что в седьмой версии RxJS имплементация Observable будет выделена в отдельный пакет (про это немного говорится в статье) и будет очень сильно упрощён API.

#rxjs #musings

https://dev.to/rxjs/observables-reactive-programming-and-regret-4jm6

Скотт Джел написал пост про необходимость сбора метрик сайтов, учитывающих средства доступности, — "We need more inclusive web performance metrics".

Метрики FCP и LCP, которые предоставляют браузеры, — отличные средства для анализа скорости появления контента на странице. Но эти метрики отражают опыт работы с сайтами не всех пользователей. Для кого-то контент может быть недоступен, пока страница не станет полностью интерактивна, так как многие web-приложения добавляют интерактивность для средств доступности с помощью загружаемого JavaScript. То есть если пользователь использует скринридер, то он не сможет получить доступ к странице, пока на ней не будет выполнен необходимый JavaScript-код.

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

#a11y #metrics #performance

https://www.filamentgroup.com/lab/a11y-ready/

Сергей Ufocoder написал статью про полиморфизм — "Полиморфизм простыми словами".

Многие разработчики знакомы с полиморфизмом только в контексте ООП, но это далеко не всё, что стоит за этим понятием. По большому счёту любой код, который без изменения может работать с разными типами, может считаться полиморфным. Лука Карделли и Питер Вагнер в научной статье "On Understanding Types, Data Abstraction, and Polymorphism" обобщили все виды полиморфизма и выделили две группы. В первую группу (универсальный полиморфизм) попадают параметрический полиморфизм и полиморфизм включений. Во вторую группу (специальный полиморфизм) попадают перегрузка и приведение типов. В статье подробно разбирается введённая классификация на примере JavaScript, Python, C++ и TypeScript.

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

#programming

https://medium.com/devschacht/polymorphism-207d9f9cd78

Google активно работает над концепцией "Ambient Computing". Её идея заключается в том, чтобы на первый план вышли приложения и сервисы, "растворив" железо, на котором они работают, предоставив пользователям возможность использовать любое приложение на любой платформе.

Под концепцию "Ambient Computing" попадает всё, что происходит с Flutter — тулкитом для написания кросс-платформенных приложений на языке Dart, использующих нативные элементы интерфейса.

Сейчас Flutter поддерживает разработку приложений для Web, iOS и Android. В прошлом году была анонсирована поддержка десктопных операционных систем. На данный момент есть alpha-версия Flutter, поддерживающая macOS, параллельно ведётся работа над поддержкой Windows. Сегодня была представлена Linux-версия, над которой работали ребята из Canonical (Ubuntu). Flutter для Linux использует интерфейсные элементы GTK+, но пока поддержка Linux находится в состоянии alpha.

Ambient Computing — очень амбициозная идея, чтобы она полетела, имхо, Google нужно привлечь разработчиков профессиональных приложений (Adobe, Autodesk и т.п.)

#announcement #flutter #dart

https://medium.com/flutter/announcing-flutter-linux-alpha-with-canonical-19eb824590a9

Рейчел Эндрю рассказала про новые фичи CSS, поддержка которых потихоньку начинает появляться в браузерах — "CSS News July 2020".

В последних версиях Firefox и Chrome появилась поддержка Flexbox Gaps. Благодаря ей можно задавать расстояние между flex-элементами. Это свойство работает также как grid-gap, grid-row-gap, grid-column-gap в гридах (префикс grid- теперь необязателен).

В Chrome Canary добавлена поддержка свойства aspect-ratio, с помощью которого задаётся соотношение сторон контейнера. Например, aspect-ratio: 2 / 1 говорит о соотношении 2:1 (две единицы приходятся на ширину, одна на высоту).

В Firefox с помощью флага layout.css.grid-template-masonry-value.enabled можно включить экспериментальную поддержку раскладки "Masonry". Авторы спецификации пока сомневаются, что Masonry должна быть частью спецификации CSS Grid, так что в будущем возможны изменения.

В конце 2019 года в Firefox в гридах появилась поддержка subgrid. Благодаря ей дочерние гриды могут наследовать количество треков и их размеры от родительских гридов. Команда разработчиков Edge планирует добавить поддержку subgrid в Chromium в этом году.

Планируется добавление медиа-выражения prefers-reduced-data: reduce. С его помощью можно, например, заменить тяжёлые изображения на плейсхолдеры, если у пользователя в браузере включена опция снижения потребления траффика.

В Firefox и Chrome Beta доступен псевдоэлемент ::marker. Благодаря ему можно гибко стилизовать маркер у элемента списка. Также с его помощью можно добавить маркер к любому элементу на странице.

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

#css

https://www.smashingmagazine.com/2020/07/css-news-july-2020/

Начался опрос State Of Frontend 2020. Можно пройти, а можно просто подписаться на результаты (внизу страницы)

https://tsh.io/state-of-frontend/

Энди Дэвис — автор книг про web-производительность — написал статью про проблемы хинта prefetch — "Rel=prefetch and the Importance of Effective HTTP/2 Prioritisation".

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

Энди провёл несколько экспериментов. При использовании сервера с полноценной поддержкой приоритизации HTTP/2, второстепенные ресурсы были загружены без проблем, проблема была только с ресурсами, которые загружались с других доменов. Когда тестировался сервер без поддержки приоритизации HTTP/2 (Netlify, Amazon Cloudfront), в Chrome второстепенные ресурсы конкурировали с основными ресурсами страницы, а в Safari они конкурировали с запросами критических ресурсов страницы. У Firefox не было проблем с планированием загрузки ресурсов вне зависимости от типа сервера.

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

#performance #http

https://andydavies.me/blog/2020/07/08/rel-equals-prefetch-and-the-importance-of-effective-http-slash-2-prioritisation/

Сурма написал статью про новое расширение ResizeObserver, с помощью которого можно получить размер элемента в физических пикселях — "Pixel-perfect rendering with devicePixelContentBox".

Иногда возникают ситуации, в которых размеры блока в пикселях могут получаться дробными. При рендеринге таких элементов CSS-пиксели "подгоняются" браузером к физическим пикселями с помощью pixel snapping. Проблема в том, что не было надёжного способа получения размера элемента в реальных физических пикселях. Из-за этого невозможно было реализовать pixel-perfect отрисовку в canvas — изображения могли получаться нечёткими, на них мог проявляться эффект Муара.

В Chrome 84 была добавлена новая опция ResizeObserver ['device-pixel-content-box']. С её помощью можно получить размер любого элемента в физических пикселях и добиться pixel-perfect рендернига canvas.

#rendering #api

https://web.dev/device-pixel-content-box/

Неделю назад Владимир Гриненко представил Yandex UI — новую библиотеку React-компонентов, которая используется в проектах Яндекса.

Основными требованиями при создании библиотеки были: функциональность, доступность, скорость рендеринга, возможность переопределения компонентов и расширения поведения снаружи, поддержка TypeScript и темизации. Yandex UI под капотом использует bem-react. Поддержка БЭМ-подхода позволяет гибко управлять тем, какой именно код попадает в бандл приложения. Есть поддержка Dependency Injection, с помощью которой можно подменять функциональность компонентов, например, при проведении A/B-тестов или добавлении специфичной логики. Библиотека включает 24 компонента, в будущем планируется её расширение.

Мне лично очень понравилась поддержка DI, но хотелось бы видеть полноценное API на хуках для работы с модификаторами.

#react #yandex #talk

https://www.youtube.com/watch?v=trwdc0JCelA
https://github.com/bem/yandex-ui

Иногда новые спецификации добавляются в браузеры очень быстро, а иногда очень медленно. Почему так происходит? У разработчиков браузеров есть свои цели и приоритеты, которые не всегда совпадают с пожеланиями других компаний и сообщества. Компания Igalia помогает внешним компаниям в добавлении новых фич в браузеры. Например, её нанимал Bloomberg для добавления поддержки гридов в Chromium и WebKit.

Сегодня Igalia анонсировала Open Prioritizaiton. Это экспериментальный проект, который позволяет сообществу и небольшим компаниям профинансировать реализацию новых спецификаций. Сейчас в списке доступных задач есть добавление поддержки цветового пространства lab в Firefox, :focus-visible в WebKit, атрибута inert в WebKit, selector list arguments для :not() в Chrome, CSS Containment в WebKit и добавление поддержки установки SVG-атрибута d с помощью CSS в Firefox.

В общем, если что-то из этого списка вам близко, можно поучаствовать в проекте. Я задонатил пару баксов в поддержку CSS Containment.

#announcement #browser

https://www.igalia.com/open-prioritization/

Сегодня вышел новый релиз Apollo Client одного из самых популярных клиентов для graphql — "Announcing the Release of Apollo Client 3.0".

Все популярные клиенты для graphql решают проблему кэширования. Они создают подмножество графа данных бэкенда на клиенте, позволяя разным graphql-запросам работать с единым набором закэшированных данных.

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

#release #graphql #library

https://www.apollographql.com/blog/announcing-the-release-of-apollo-client-3-0/

Вчера вышла новая версия Chrome. Пит Лепаж рассказал про новые фичи релиза — "New in Chrome 84".

PWA приложения теперь могут регистрировать шорткаты (написать сообщение, перейти к непрочитанным сообщениям и т.п.), которые становятся доступны по правому клику на иконке приложения на десктопе или по длинному тапу на Android. Стал доступен Content Indexing API. Благодаря ему можно извлечь информацию о закэшированных элементах и отобразить её пользователю.

Стала доступна реализация Wake Lock API. Над этой спекой работали ребята из Яндекса и Microsoft. С помощью Wake Lock можно временно заблокировать отключение экрана устройства при неактивности пользователя (полезно для сайтов с кулинарными рецептами, галерей и т.п.) Обновлена реализация Web Animations API — animation.ready и animation.finished возвращают промисы, добавлены опции add и accumulate, улучшена производительность API. В рамках Origin Trials теперь доступен Idle Detection API для отображения статуса активности пользователя (будет полезно для чатов), а также стал доступен Web Assembly SIMD.

Много изменений в Chrome Dev Tools. Начата работа по вычищению консоли от предупреждений браузера — они потихоньку будут переезжать в таб "Issues". В попапе режима инспектирования теперь отображается информация о a11y. Обновлена панель производительности. Добавлено отображение метрик TBT (Total Blocking Time) и Cumulative Layout Shift (CLS), в событии "Layout Shift" можно проинспектировать произошедший сдвиг контента.

Возобновлён процесс выкатки SameSite для cookies, который был временно приостановлен из пандемии COVID-19. Удалена поддержка TLS 1.0 и TLS 1.1. Потенциально небезопасные запросы доступа к геолокации, отправки нотификаций и т.п. будут скрываться с помощью нового интерфейса.

#release #chrome

https://developers.google.com/web/updates/2020/07/nic84

Неделя релизов продолжается. Вчера компания Adobe представила свою библиотеку React-компонентов — "Introducing React Spectrum".

В React Spectrum каждый компонент поделён на две части, которые живут в отдельных библиотеках. В библиотеке React Aria находятся хуки для работы с a11y, i18n и поведением компонентов. В библиотеке React Stately — хуки для работы со стейтом компонентов. Такое разделение удобно для переиспользования кода между разными платформами. Эти библиотеки комбинируются под зонтиком библиотеки React Spectrum, которая имплементирует дизайн-систему от Adobe. Компонентов в библиотеке довольно много. Есть Calendar, Table, Tree и другие стандартные компоненты.

Интересное решение. Если нужен компонент с немного другим поведением, можно не форкать библиотеку, а просто переопределить необходимый хук.

#react #ui #release

https://react-spectrum.adobe.com/blog/introducing-react-spectrum.html

Станислав Черенков написал статью про использование роутинга в современных SPA-приложениях — "Your SPA doesn’t need a router".

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

В статье предлагается альтернативный подход с отделением представления от логики роутинга и использованием только самых необходимых библиотек, например, для сериализации url страницы в объект.

Полезная статья. В первую очередь рекомендую почитать всем, кто разрабатывает сложные SPA.

#musings #architecture

https://forweb.dev/en/blog/drop-the-router/

Хуссеейн Джирде из команды Chromium недавно представил инструмент для анализа метрик производительности js-фреймворков — "Perf Track".

Perf Track — это дашборд, на котором агрегируются метрики по популярным фреймворкам: общий размер js, использование сжатия, First Contentful Paint, Largest Contentful Paint, Cumulative Layout Shift и т.п. Данные для анализа берутся из HTTP Archive и Chrome User Experience Report. Из интересного: статистика по First Input Delay хуже всего у React и Ember, статистика по First Contentful Paint — у Angular и Polymer. Лучше всего показатели у Svelte, но размер выборки Svelte-проектов на порядки меньше выборки других фреймворков, поэтому могут быть сильные перекосы.

Надо понимать, что Perf Track показывает среднюю температуру по больнице. Тем не менее он может быть полезен для анализа общего положения дел.

#performance #tool #jsframeworks

https://perf-track.web.app/