Кэти Хемпениус написала статью о лучших практиках создания каруселей — "Best practices for carousels".

С точки зрения производительности не рекомендуется использовать JS для динамического создания каруселей, так как такой подход негативно влияет на метрику LCP (Largest Contentful Paint). Для создания каруселей рекомендуется использовать обычную HTML-разметку и Scroll Snap API.

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

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

#performance #ux

https://web.dev/carousel-best-practices/

Гал Шлёзингер поделился подходом для создания лёгкого встраиваемого виджета — "HTML over the wire with Preact".

Галу надо было сделать интерактивный виджет, который можно встроить на любой сайт. Он хотел как можно сильнее уменьшить размер js-бандла виджета, поэтому вместо React выбрал Preact. Для работы с GrahpQL на стороне клиента была выбрана библиотека urlq, но её размер тоже был очень большим. В итоге вместо отправки JSON стал отправлять на клиент уже готовую разметку HTML (проект это позволял). Так как dangerouslySetInnerHTML ломал доступность (пропадал фокус и DOM-состояние при замене разметки), он воспользовался библиотекой preact-markup для преобразования полученной HTML-размеки в Preact-элементы, чтобы работал diff виртуального DOM при замене элементов.

В общем, довольно интересный подход, его также можно использовать в React.

#preact #architecture

https://gal.hagever.com/posts/hotwire-in-preact-apps/

За прошедшие две недели в канале для патронов Defront было опубликовано десять постов:

— Какие оптимизации используются в VS Code для ускорения загрузки
— Золотое правило производительности
— Влияние скорости работы сайта на SEO
— Корректное отслеживание интервалов времени в браузерах
— Текущее состояние 5G-сетей в мире и их влияние на производительность
— Бенчмарк минификаторов JavaScript
— Проектирование переиспользуемых UI-блоков
— Как используют Webpack в Avito
— Сравнение производительности Cypress, Puppeteer, Selenium и Playwright
— Опыт использования React в Enterprise-секторе

Становитесь патроном канала на Patreon, чтобы получить доступ к дополнительным постам в Defront Plus. На данный момент Patreon мой единственный источник дохода; все донаты идут на покупку еды, оплату аренды квартиры и т.п.

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

https://www.patreon.com/myshov

Джаред Уайт рассказал, почему он больше не хочет использовать Tailwind CSS — "Why Tailwind Isn't for Me".

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

— HTML-код с Tailwind выглядит неэстетично
— Для упрощения работы с фреймворком используется директива @apply, которая не является стандартом и в перспективе может принести проблемы, если проект будет переезжать на другой CSS-фреймворк
— Tailwind использует дизайн-токены, которые определяется с помощью JavaScript, а не с помощью кастомных свойств
— Tailwind плохо подходит для работы с web-компонентами
— Использование Tailwind поощряет использование большого количества div'ов и span'ов

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

#css #library #musings

https://dev.to/jaredcwhite/why-tailwind-isn-t-for-me-5c90

Филип Уолтон рассказал о том, как можно улучшить отзывчивость страницы с помощью паттерна "Idle Until Urgent".

Инициализация и выполнение JavaScript при загрузке сайта может негативно повлиять на метрики производительности. Для улучшения отзывчивости страницы Филип предлагает использовать паттерн idle-until-urgent. В этом паттерне выполнение ресурсоёмких задач откладывается с помощью метода requestIdleCallback, при этом код может быть выполнен сразу, если это, действительно, нужно. После внедрения этого паттерна в блоге Филипа First Input Delay уменьшился в три раза с 254 мс до 85 мс.

Очень рекомендую почитать статью. Idle-until-urgent использует команда VS Code для улучшения отзывчивости приложения.

#performance

https://philipwalton.com/articles/idle-until-urgent/

Саймон Харн рассказал о том, как предотвратить сдвиг контента из-за загрузки web-шрифтов — "How to avoid layout shifts caused by web fonts".

Сдвиг контента (CLS) — это метрика Web Vitals, в будущем она будет влиять на алгоритм ранжирования результатов Google. Самый железный вариант предотвращения сдвига из-за загрузки шрифтов — использование font-display: optional. В этом случае браузер будет ждать загрузки шрифта 100мс, делая фоллбек на системный шрифт после истечения этого времени. Таким образом при первом посещении сайта пользователи с большой вероятностью увидят страницу с фоллбек-шрифтом без сдвига контента; при переходах на другие страницы сайта шрифт будет уже находится в кэше браузера и будет применяться к тексту на странице без задержек.

Если font-display: optional использовать невозможно, тогда нужно оптимизировать время доставки шрифта. Для этого можно использовать сабсеттинг, отказаться от формата woff и использовать woff2, делать предзагрузку шрифтов. Если используется font-display: swap, тогда нужно настроить метрики шрифта фоллбека так, чтобы они совпадали с загружаемым шрифтом, в этом могут помочь font-display modifiers (f-mods) — новые свойства @font-face.

#performance #fonts

https://simonhearne.com/2021/layout-shifts-webfonts

В декабре 2020 года вебу исполнилось 30 лет. Дэниэл Кэо вспомнил ранние дни веба и написал про это статью — "Out of the Matrix: Early Days of the Web".

Дэниэл работал техническим писателем и редактором журнала NeXTWORLD, когда он узнал про Тима Бернерса-Ли и его проект World Wide Web. Дэниэл познакомился с Тимом и захотел опубликовать статью про веб, но ему не получилось убедить главного редактора, так как интернет тогда был в зачаточном состоянии, и им пользовались только учёные из CERN.

Интересно, что самый первый браузер — Nexus, который был сделан Тимом Бернерсом-Ли до Mosaic — имел встроенные инструменты для редактирования HTML-страниц. Потом эту функциональность добавили нативно в SDK NeXTSTEP. Но с релизом браузеров за пределами операционной системы NeXT, эта функция потерялась.

Ещё Дэниэл предложил Тиму использовать вместо HTML новый формат для редактируемого PostScript от Adobe (который получил название PDF). Он организовал встречу Роберта Кайо (одна из ключевых фигур в популяризации веба) c менеджментом Adobe, но, как мы уже знаем, HTML пережил это событие.

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

#web #history

https://blog.yax.com/posts/early-days-of-the-web-1991/

Несколько дней назад команда разработчиков Vue зерилизила Vite 2.0. В статье "Announcing Vite 2.0" Эван Ю рассказал о новом проекте.

Vite — это сборщик и dev server, использующий ESM, для ускорения применения изменений на этапе разработки. По своей философии он очень похож на Snowpack и WMR.

Vite создавался для улучшения разработки Vue-приложений, но команда разработчиков решила сделать его независимым от Vue (на данный момент есть поддержка Vue, React, Preact и LitElement). Из-за смены курса разработки первая версия так и не достигла стабильной версии, поэтому Vite 2.0 можно считать официальной первой стабильной версией.

Vite очень похож на Snowpack, но в нём есть несколько уникальных фич: поддержка автоматического код-сплиттинга для CSS, поддержка многостраничных приложений, есть режим для разработки браузерных библиотек, есть встроенная поддержка монорепозиториев и CSS-препроцессоров.

#tool #bundle

https://dev.to/yyx990803/announcing-vite-2-0-2f0a

Нолан Уолсон рассказал про возможные способы кастомизации web-компонентов — "Options for styling web components".

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

— CSS-переменные. CSS-переменные "протекают" внутрь Shadow DOM и могут использоваться для кастомизации строго заданных параметров. Этот способ был выбран для компонента выбора эмоджи.
— Классы. Пользователь может задать CSS-класс у компонента для выбора заранее определённых вариантов отображения.
— Shadow Parts. Shadow Parts предоставляет возможность гибкой кастомизации предопределённых частей web-компонента.
— Внедрение стилей. Это решение может использоваться в качестве экстренной помощи, так как при его использовании пользователи должны полагаться на внутреннюю структуру компонента, что может привести к проблемам при обновлении компонента.

#webcomponents

https://nolanlawson.com/2021/01/03/options-for-styling-web-components/

В блоге web.dev Томас Штайнер опубликовал подробное руководство по работе со стримами — "Streams—The definitive guide".

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

В руководстве подробно объясняется механизм работы ReadableStream, WritableStream и TransformStream с понятными примерами их использования.

На данный момент нет браузеров с полноценной поддержкой стримов, но есть полифилл, полностью удовлетворяющий спецификации.

#js

https://web.dev/streams/

Дэн Абрамов рассказал о простом, но неочевидном подходе для уменьшения лишних ререндеров React-компонентов — "Before You memo()".

Перед тем как использовать memo и useMemo для предотвращения ререндеров, имеет смысл попробовать разбить компонент на stateful- и stateless-части (поднять вверх стейт). Также можно передать stateless-компонент через пропс в stateful-компонент (поднять вверх контент). При ререндере stateful-компонента переданный через пропс компонент не будет ререндериться. Использование такого подхода откроет в будущем новые возможности для оптимизаций, например, для предотвращения ререндеринга серверных компонентов.

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

#react #performance

https://overreacted.io/before-you-memo/

Вчера вышел Firefox 86. Крис Миллс рассказал про основные новинки релиза — "A Fabulous February Firefox — 86!"

Появилась поддержка CSS псевдокласса :autofill. С помощью этого псевдокласса можно кастомизировать <input> после его автозаполнения.

Добавлена поддержка конструктора Intl.DisplayNames для консистентного перевода регионов, языков и начертаний.

В бете Firefox появилась поддержка CSS-функции image-set() для создания отзывчивых изображений на уровне CSS.

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

#release #firefox

https://hacks.mozilla.org/2021/02/a-fabulous-february-firefox-86/

Два дня назад вышел TypeScript 4.2. Дениэл Розенвассер рассказал о всех фичах новой версии.

TypeScript теперь отслеживает использование объединений как альясов типов. Благодаря этому такие альясы отображаются в сообщениях об ошибках, в генерируемых d.ts-файлах и т.д.

В новой версии TypeScript возможно использовать rest-элементы в любой позиции кортежа, но остаётся одно ограничение — они не могут идти после других rest-элементов и до опциональных элементов. Также при деструктуризации кортежей неиспользуемые элементы можно пометить символом подчёркивания _ ( let [_first, second] = getValues(); ), чтобы не возникала ошибка с включённой опцией noUnusedLocals.

Появилась новая опция noPropertyAccessFromIndexSignature. Она отключает возможность использования точки для доступа к тем свойствам объекта, которые определяются с помощью сигнатуры строчного индекса (string index signature).

С сигнатурами конструкторов теперь можно использовать модификатор abstract. Эта фича даёт возможность типизации некоторых ООП-техник.

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

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

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

#release #typenoscript

https://devblogs.microsoft.com/typenoscript/announcing-typenoscript-4-2/

В недавно вышедшем Firefox 86 был включён State Partitioning для предотвращения отслеживания пользователей с помощью кук. Йоханн Хофманн и Тим Хуанг рассказали о принципе его работы в статье "Introducing State Partitioning".

Ранее сторонний ресурс (third-party), подключаемый на страницу, мог установить для пользователя уникальную куку, которая использовалась для сбора информации о посещённых страницах. В Firefox 86 этот механизм отслеживания перестал работать по умолчанию, потому что куки начали изолироваться в пределах родительского сайта (first-party).

Теперь сторонним ресурсам надо получить явное подтверждение от пользователя для доступа к общим кукам. Это можно сделать с помощью Storage Access API: метод document.requestStorageAccess используется для запроса доступа, метод document.hasStorageAccess — для проверки текущего статуса доступа.

На данный момент поддержка Storage Access API есть в Safari, Edge и Firefox. В Chrome она доступна за экспериментальным флагом.

#privacy #firefox

https://hacks.mozilla.org/introducing-state-partitioning/

Нолан Лоусон предлагает следить не только за размерами бандла, но и за другими параметрами, влияющими на опыт работы с сайтом — "JavaScript performance beyond bundle size".

Нолан предлагает обращать внимание не только на размер бандла, но и на стоимость работы кода в рантайме (время парсинга, компиляции и исполнения), на энергоэффективность и объём потребляемой памяти.

Профилировка кода может помочь найти проблемные библиотеки, которые забивают главный поток. Для удобного анализа результата работы профилировщика можно использовать плагин для Webpack — mark-loader. С помощью метода performance.measureUserAgentSpecificMemory, который будет включён по умолчанию в Chrome 89, можно получить информацию о потребляемой памяти с учётом iframe'ов. Для понимания того, насколько сильно сайт съедает батарею, можно использовать профилировщик или Performance Monitor.

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

#performance

https://nolanlawson.com/2021/02/23/javanoscript-performance-beyond-bundle-size/

Уил Бойд рассказал про малоизвестные особенности использования псевдоэлементов ::before и ::after — "Diving into the ::before and ::after Pseudo-Elements".

Статья начинается с самых основ использования ::before и ::after. Затем в ней рассматриваются более изощрённые сценарии использования: создание декоративных линий и декоративной ленты, работа с кавычками ( content: open-quote; и content: close-quote; ), использование изображений в content, установка их альтернативного текста ( content: url(logo.png) / 'logo of the site'; ) и т.п.

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

#css

https://codersblock.com/blog/diving-into-the-before-and-after-pseudo-elements/

Алекс Руденко из команды разработки Chrome DevTools написал статью про добавление поддержки редактирования стилей, создаваемых с помощью CSS-in-JS-библиотек — "CSS-in-JS support in DevTools".

Возможность редактирования CSS-in-JS стилей появилась в Chrome 85. Для поддержки редактирования стили должны быть представлены как статический текст. В случае с CSS-in-JS статического текста нет, так как такие стили размещаются в памяти во внутренней структуре данных CSSOM. Для добавления возможности редактирования их стали преобразовывать в текст. Для синхронизации мутируемых стилей был добавлен новый механизм, который оповещает бэкенд DevTools при изменении стилей с помощью CSSOM API.

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

#internals #chrome #cssinjs

https://developers.google.com/web/updates/2021/02/css-in-js

За прошедшие две недели в канале для патронов Defront было опубликовано десять постов:

— Опыт Facebook в уменьшении времени исправления багов
— Как разрабатывается Sublime Text
— Надёжное тестирование производительности
— 10 лет работы над D3
— Почему в Amazon отходят от использования термина "технический долг"
— Оптимальные настройки качества сжатия для WebP и AVIF
— Интервью с Райаном Далом
— Не используйте React.Fragment в переиспользуемых компонентах
— Способы оптимизации загрузки JavaScript-приложений и сайтов
— Мысли о современной web-разработке

Становитесь патроном канала на Patreon, чтобы получить доступ к дополнительным постам в Defront Plus. На данный момент Patreon мой единственный источник дохода; все донаты идут на покупку еды, оплату аренды квартиры и т.п.

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

https://www.patreon.com/myshov

Сегодня вышел Chrome 89. Пит Лепаж и Джеселин Ин рассказали про новинки релиза.

Добавлена поддержка top level await для JavaScript-модулей.

Стали доступны по умолчанию новые API для работы с железом — WebHID, WebNFC и Web Serial. С их помощью web-приложения могут взаимодействовать с устройствами пользователя без установки драйверов или каких-либо дополнительных программ.

PWA-приложения можно установить только в том, случае когда они поддерживают offline-режим. Ранее была возможность обойти это требование. Начиная с Chrome 89 этот обходной путь будет триггерить сообщение с предупреждением в консоль, а в Chrome 93 будет заблокирован.

Добавлена поддержка Web Share API и Web Share Target API для удобной передачи любых данных из одного web-приложения в другое.

Очень много изменений в инструментах разработчика. Lighthouse был обновлён до седьмой версии. Улучшена работа с куками. Можно ставить точки останова на исключения, вызванные нарушениями Trusted Type. Добавлена поддержка эмуляции устройств со складным экраном и многое другое.

#chrome #release

https://developer.chrome.com/blog/new-in-chrome-89/
https://developers.google.com/web/updates/2021/01/devtools

В Chrome 89 была добавлена поддержка import maps. Гай Бедфорд рассказал, какие преимущества несёт эта фича с точки зрения производительности — "Import Maps Release & Module CDN Launch".

Благодаря поддержке import maps можно использовать bare specifiers в импортах. То есть не import something from './path/to/something.js', а import something from 'something'. По сути это есть не что иное, как соответствие спецификаторов и соответствующих им путей до модулей:

<noscript type="importmap">
{
  "imports": {
    "something": "./path/to/something.js"
  }
}
</noscript>

Благодаря import maps можно обеспечить кэширование кусков JS-приложения без каскадной инвалидации кода при обновлении нижележащих зависимостей. То есть они открывают возможность эффективного кэширования при инкрементальном обновлении web-приложений.

На данный момент поддержка import maps есть только в Chrome 89. Для других браузеров доступен полифилл.

#js #esm #performance

https://jspm.org/import-map-cdn

В блоге CSSSR была опубликована статья про судьбу первых web-браузеров — "История фронтенда: Браузер, который умел всё".

В статье рассказывается про WorldWideWeb — самый первый браузер, над которым работал Тим Бернерс-Ли и который позднее был переименован в Nexus. Рассказывается про систему организации данных для Macintosh — некий прообраз современного веба, но без поддержки сети. С помощью этой системы была сделана знаменитая игра Myst. Ещё в 1991 году вышла первая версия ViolaWWW — браузер, который поддерживал добавление на страницу апплетов-приложений на языке Viola.

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

#web #history

https://blog.csssr.com/ru/article/frontend-history-the-browser-that-could-do-everything/
https://www.youtube.com/watch?v=7nrDctGYOIk