Defront — про фронтенд-разработку и не только

Реми Шарп написал небольшой пост про то, почему в теге <head> не появляется поддержка новых элементов — "Head is locked".

В <head> могут находится элементы title, meta, style, script, base и link. Если поместить любой другой элемент в <head>, он будет перемещён внутрь <body>, так работают браузеры. Если бы в стандарте появились новые элементы внутри <head>, то в браузерах без поддержки этих элементов, будет отображаться лишняя информация, нарушая принцип обратной совместимости HTML. Именно по этой причине тег <link> эксплуатируется для разных целей (link rel="preconnect" и т.п.)

#history #html

https://remysharp.com/2019/09/13/head-is-locked

Олег @oleg_log Ковалёв скинул в личку ссылку на интересную статью — "Wikipedia's JavaScript initialisation on a budget". В ней рассказывется про то, как ребята из Wikipedia оптимизировали загрузку JavaScript-кода на клиент.

У википедии есть особый механизм — ResourceLoader, который формирует манифест для инициализации динамичной части страницы. С помощью этого манифеста происходит загрузка необходимых ресурсов — js, css, строк i18n. Это самая критичная часть системы, поэтому очень много сил было вложено в то, чтобы уменьшить её размер.

Уменьшение размера было достигнуто благодаря реструктуризации загружаемых скриптов. Например, в одной фиче использовалось 248 разных модуля. Идентификаторы этих модулей попадали в манифест, тем самым увеличивая его размер. Спустя полгода после обнаружения проблемы число модулей удалось снизить до 42. Самое крутое то, что в итоге они смогли достигнуть своей цели в 28kb на размер манифеста (было 36kb, стало 27kb). Такой размер гарантирует, что ресурс будет доставлен на клиент не более чем за две сессии отправки http-пакетов (bursts of packets).

На первый взгляд кажется, что 9kb, которые были сэкономлены, не очень много, но для Wikipedia это складывается в 4 терабайта сэкономленного траффика каждый день.

#performance #http

https://phabricator.wikimedia.org/phame/post/view/175/wikipedia_s_javascript_initialisation_on_a_budget/

Нашёл в твиттере ссылку на интересную статью Николаса Закаса 2015-го года — "The bunny theory of code".

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

Почему так происходит? Мы редко начинаем писать что-то с нуля в существующем проекте. В первую очередь мы ищем то, как данную проблему решали наши коллеги. Если решение было найдено, то с большой вероятностью оно будет скопировано в новый файл, так как закомиченный код неявно выступает неким гарантом качества. Поэтому стоит делать всё возможное, чтобы поддерживать это качество. Например, с помощью хорошего код ревью, воркшопов, обсуждения спонтанно возникших паттернов (“accidental standards") и т.п.

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

#musings #programming

https://humanwhocodes.com/blog/2015/05/14/the-bunny-theory-of-code/

Пару дней назад в код v8 была добавлена реализация предложения "Top-level await" (Stage 3). Про этот пропозал в канале ещё ничего не было, поэтому хочу написать небольшое объяснение того, какую проблему он решает.

Top-level await добавляет поддержку await на верхнем уровне модуля, то есть вне асинхронных функций, которые декларируются с помощью async. Это позволяет превратить модуль в некое подобие большой асинхронной функции. При импорте такого модуля асинхронный код, помеченный с помощью ключевого слова await, будет останавливать выполнение импортирующего модуля до того момента, пока все зависимости не будут зарезолвлены. Вот пример преобразования "асинхронного модуля" с помощью top-level await:

// было
import { process } from "./some-module.mjs";
export default (async () => {
  const dynamic = await import(computedModuleSpecifier);
  const data = await fetch(url);
  const output = process(dynamic.default, data);
  return { output };
})();

// стало
import { process } from "./some-module.mjs";
const dynamic = import(computedModuleSpecifier);
const data = fetch(url);
export const output = process((await dynamic).default, await data);

Добавление в стандарт top-level await упростит работу с динамическими импортами и модулями, предоставляющими асинхронные ресурсы, например, соединение с базой данных.

#future #async #tc39

https://github.com/tc39/proposal-top-level-await

Брайан Карделл — один из участников w3c — приоткрыл завесу над тем, как в последние годы в web-платформе появляется поддержка новых стандартов — "Beyond Browser Vendors".

За каждым браузером есть компания, которая выделяет бюджет на его разработку. Этот бюджет определяет размер команды разработчиков и тот объём задач, который они могут зарелизить. Чаще всего в приоритет ставятся задачи, которые отвечают специфичным запросам компании, что вполне логично. Брайан пишет, что ему как контраргумент на это утверждение приводят гриды. На первый взгляд кажется, что разработчики браузеров смогли договориться между собой и приоритизировать имплементацию гридов так, чтобы их поддержка появилась примерно в один промежуток времени (март 2017 года). Но это не так.

Первое предложение "Frame-Based Layout" появилось в 1996 году, как попытка реализовать грид-подобную систему, управляемую с помощью CSS. Этот пропозал не был имплементирован. В 2005 году Берт Росс опубликовал предложение "CSS Advanced Layout", которое в 2009 году переродилось в "CSS Template Layout", но опять этот пропозал не был имплементирован. В 2011 году Microsoft переосмыслила предыдущие подходы и представила сообществу "Grid Layout", его реализация появилась вместе с IE10. Но на этом всё и остановилось, так как Microsoft решала свои внутренние задачи с внедрением этого стандарта.

Примерно в это же время web становился всё более и более открытым — стал прозрачнее процесс стандартизации, основную часть рынка поглотили браузеры с открытым исходным кодом. Этот факт позволил другим компаниям участвовать в разработке стандартов. В итоге, внедрением гридов в Chrome и Safari занималась Igalia — консультационное агентство, где работает Брайан. Работу полностью профинансировал Bloomberg. Подобным образом в Chromium была добавлена поддержка ResizeObserver, BigInt, private fields, MathML и других фич. Брайан не говорит о том, что вендоры плохие и ничего не делают, наоборот, он говорит о том, что они тоже участвуют в разработке, как минимум в ревью и в дальнейшей поддержке кода.

Ставлю этому посту свой любимый тег — history. Очень рекомендую почитать статью всем, кто интересуется историей web'а.

#musings #history #web

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

Ребята из Slack продолжают радовать статьями про своё новое приложение. В этот раз они написали про использование сервис воркеров в web-версии — "Service Workers at Slack: Our Quest for Faster Boot Times and Offline Support".

При первой загрузке приложения в кеш сервис воркера помещаются html, звуковые файлы, шрифты, js и css-файлы. Для того чтобы хранящиеся файлы не устаревали, кастомный плагин webpack формирует манифест, который встраивается в установочный код сервис воркера. Изменение кода сервис воркера инициирует его установку, в результате которой происходит загрузка всех файлов из манифеста и их сохранение в кеш. При таком подходе всегда будет загружаться не самая последняя версия клиента. Но на этот шаг пошли осознанно, чтобы сократить время загрузки клиента. Теперь приложение с прогретым кешом стартует в два раза быстрее. Чтобы приложение не устаревало, в фоне регулярно происходит проверка наличия обновлений.

Добавление сервис воркеров позволило реализовать базовые оффлайн функции (чтение ранее загруженных сообщений, отметки о прочитанности сообщений). В будущем, планируют добавить более продвинутые оффлайн-сценарии, но не написали, какие именно.

Статья хорошая, но, скорее всего, будет интересна не всем.

#serviceworker #experience

https://slack.engineering/service-workers-at-slack-our-quest-for-faster-boot-times-and-offline-support-3492cf79c88

Сара Хигли поделилась своими мыслями по поводу доступных тултипов в статье — "Tooltips in the time of WCAG 2.1".

Web Content Accessibility Guidelines (WCAG) — это набор рекомендаций w3c по созданию доступного контента. WCAG покрывает много разных кейсов, но в нём нет явных рекомендаций, что делать с тултипами. Вся проблема в том, что у тултипов может быть разная семантика в зависимости от контекста. Более того, в тултипе могут отображаться интерактивные элементы, что вызывает ещё больше вопросов.

Для тултипов с контролами внутри Сара рекомендует использовать паттерн disclosure button, а для информационных тултипов даёт целый список советов:

- Тултипы должны появляться только на интерактивных элементах
- Тултип должен явно описывать контрол, на котором он был вызван
- Используйте aria-describedby и aria-labelledby для ассоциирования UI-контрола с тултипом
- Не используйте атрибут title для тултипов
- Не помещайте важную информацию в тултипы
- Предоставьте возможность закрыть тултип как с помощью клавиатуры, так и с помощью указателя
- Не закрывайте тултип, если пользователь водит по нему указателем мыши
- Не используйте таймаут для закрытия тултипов

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

#ui #a11y #wcag

https://sarahmhigley.com/writing/tooltips-in-wcag-21/

Зак Лезерман рассказал, как он ускорял загрузку web-шрифтов на CSS Tricks в статье "Developing a Robust Font Loading Strategy for CSS-Tricks".

Для того чтобы избежать FOIT (Flash of Invisible Text) и FOUT (Flash of Unstyled Text), Зак разбил исходные файлы шрифтов (regular и bold) на две части. Первая часть содержала информацию о кёрнинге (для предотвращения reflow документа) и минимальный набор глифов, которые необходимы для отображения латиницы и самых популярных символов, которые могут встречаться в заголовках статей на CSS Tricks. Вторая часть содержала всё остальное: лигатуры, хинтинг, кириллицу и т.п. Первый два файла загружаются с помощью preload, вторая часть — с помощью CSS Font Loading API.

Так как файлы первого этапа весят всего по 13kb, они успевают загружаться до рендеринга документа. Более полная версия шрифта подгружается позже, но это не портит пользовательский опыт.

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

#typography #web

https://www.zachleat.com/web/css-tricks-web-fonts/

Дэвид Петер из Mailchimp написал статью про то, каких подходов при тестировании придерживается их команда — "Designing automated tests for React".

В статье очень много дельных мыслей, к которым стоит прислушаться. Например, следует придерживаться баланса при написании тестов — огромное количество тестов само по себе может стать проблемой, так как тесты это код, который следует поддерживать и писать. Зачастую на написание тестов может уходить больше времени, чем на написание фичи. Но при этом было бы глупо совсем отказываться от тестов, поэтому надо хорошо взвешивать, что тестить, а что оставить в покое. Ещё из статьи запомнилось то, что html создавался без учёта динамичных пользовательских интерфейсов. ARIA-атрибуты позволяют выражать недостающую семантику для элементов страницы, и этим фактом следует пользоваться при написании тестов.

Единственное, что у меня вызвало вопросы — отказ от снепшот-тестирования. Автор пишет, что снепшоты не выражают намерений. Я считаю, что их интент состоит в том, что они закрепляют контракт на уровне того, какую вёрстку должен генерировать компонент (мини-аналог скриншот-тестирования). Но при этом их стоит использовать благоразумно (например, не более одного снепшот-теста на компонент), так как большое количество снепшотов сложно ревьювить, и на них просто могут перестать обращать внимание.

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

#testing #react

https://increment.com/testing/designing-automated-tests-for-react/

Два дня назад вышла новая версия Chrome 77. По каким-то причинам в этот раз не было отдельной публикации на официальном сайте, но появилось несколько видео на youtube.

В Chrome 77 появилась поддержка Largest Contentful Paint. Про эту метрику я писал ранее. С её помощью можно отследить время появления основной части контента на странице. Была добавлена поддержка Form Participation API. Благодаря ему можно создавать Custom Elements, которые будут вести себя как полноценные элементы управления стандартных форм. Также в рамках этого api у форм появилось событие formdata, на который можно повесить обработчик для модификации отправляемых данных перед submit.

В инструментах разработчика тоже есть несколько нововведений. Теперь можно скопировать стили dom-узла (контекстное меню на элементе -> copy -> copy styles). Цветовая тема соответствует настройкам операционной системы. Добавили визуализацию сдвига контента. На вкладке "Network" появилась индикация того, что ресурс был загружен из Prefetch Cache. На вкладке "Application" видны push-сообещния и нотификации от сервис-воркеров. Можно логировать эти события до трёх дней даже при закрытых инструментах разработчика.

#chrome #release

https://www.youtube.com/watch?v=S8aVB3IfOR4
https://www.youtube.com/watch?v=R8KzoMoKhnM

Сегодня прочитал статью Прити Сэм про создание анимированных иконок сайта — "The Making of an Animated Favicon".

Для создания анимированной favicon, можно использовать canvas, в котором с течением времени (или как реакция на сигнал от сервера) будет рисоваться индикатор загрузки. После каждой перерисовки получившийся результат переносится в тег <link>:

const canvas = document.querySelector('canvas'),
// [...] тут код отрисовки [...]
favicon.href = canvas.toDataURL('image/png');

С примером из статьи есть проблема. Если перейти на соседнюю вкладку, то анимация в Chromium-based браузерах останавливается. Это возникает из-за того, что Chromium останавливает таймеры на неактивных вкладках. Чтобы обойти это ограничение, можно использовать web-воркеры.

#web #trick

https://css-tricks.com/the-making-of-an-animated-favicon/

Михай Парпарита из Quip написал статью про то, как они отлаживают своё приложение — "How Quip Builds In-Product Debugging Tools".

Основная мысль статьи — стоит немного потрудиться и сделать инструмент, который будет помогать в отладке. Такая инвестиция времени быстро возместится в будущем.

Quip использует много подобных инструментов. Например, для визуализации взаимосвязи уровня данных и представления у них есть "Overlay Id", который для каждого компонента показывает соответствующие данные модели. Есть инструмент для отладки редактора, который в инлайн-режиме отображает отладочную информацию об отображаемых сущностях. Такой подход исключает затраты времени на открытие инструментов разработчика и потерю фокуса из редактора. Есть небольшой инструмент, который показывает в оверлее количество ререндеров компонента. Реализуется он так: в каждый компонент инжектится componentDidUpdate, который увеличивает счётчик и записывает его в data-атрибут. Значение атрибута отображается поверх компонента с помощью CSS:

.debug-react-rerender-count:after {
    content: attr(data-debug-react-rerender-count);
    // other styles for positioning and color
}

Мне статья понравилась. В ней есть интересные идеи, которые можно применить в своём проекте.

#dx #debug

https://quip.com/blog/how-quip-builds-inproduct-debugging-tools

Эяль Эйзенберг из Wix рассказал про свой опыт уменьшения бандла приложения с помощью React Lazy/Suspense и код-сплиттинга — "Trim the Fat From Your Bundles Using Webpack Analyzer & React Lazy/Suspense".

В начале статьи автор пишет про меры, которые можно предпринять на этапе разработки, чтобы размер приложения внезапно не вырос. Для оценки размера подключаемой библиотеки её стоит проверить c помощью сервиса Bundlephobia. Для того чтобы размер импортируемых библиотек всегда был на виду, можно использовать плагин import-cost (есть поддержка VS Code, Vim, WebStorm, Atom). Далее в статье разбирается пример динамической загрузки кода с помощью React.lazy и React.Suspense, который позволяет вынести часть кода в отдельный чанк. Выглядит он так:

const OtherComponent = React.lazy(() => import('./OtherComponent'));

function MyComponent() {
  return (
    <div>
      <React.Suspense fallback={<div>Loading...</div>}>
        <OtherComponent />
      </React.Suspense>
    </div>
  );
}

После всех оптимизаций размер бандла удалось уменьшить на 80%.

Статья хорошая с примерами из реальной практики. Если не знаете, куда копать при оптимизации размера приложения на React, то эта статья может помочь.

#performance #webpack #react

https://www.wix.engineering/post/trim-the-fat-from-your-bundles-using-webpack-analyzer-react-lazy-suspense

В блоге NPM была опубликована статья, посвящённая проблемам безопасности при работе с зависимостями, — "AppSec POV on Dependency Management".

В статье рассматриваются подходы, которые могут снизить риск атаки. Первое, на что стоит обращать внимание при выборе пакета, метрики качества (наличие тестов, актуальные версии зависимостей и т.п.) Стоит посмотреть на активность поддержки пакета. Если версии выходят нерегулярно или последнее обновление выходило очень давно, есть риск, что пакет может попасть в руки злоумышленников. Именно это произошло с пакетом event-stream в прошлом году.

Есть пара советов, что делать при исследовании потенциально-опасных пакетов. Для безопасной установки можно использовать npm install --ignore-scripts. В этом случае скрипты установки не будут выполняться. Можно запустить npm audit для проверки наличия уязвимостей в зависимостях. Для того чтобы можно было запустить аудит без установки пакетов, следует использовать флаг --package-lock-only.

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

#npm #security

https://blog.npmjs.org/post/187496869845/appsec-pov-on-dependency-management

Пару дней назад была представлена web-версия Apple Music. Web-версия также как и десктопная использует Ember, но с добавлением web-компонентов. Макс Линч — один из создателей Ionic — написал свои мысли по этому поводу в статье "Apple Just Shipped Web Components to Production and You Probably Missed It".

Макс пишет о том, что в сообществе очень много споров по поводу компонентных js-фреймворков и web-компонентов, так как они решают по сути одну и ту же задачу создания интерфейсов из переиспользуемых блоков. Тот факт, что Apple использует почти 50 компонентов у себя в приложении (нотификации, контролы для управления подкастами, видеоплейер и т.п.) говорит о том, что существует ниша для их применения. Например, их можно использовать для создания таких компонентов, которые могут быть использованы с разными фреймворками (скорее всего Apple решает именно эту задачу). Для создания web-компонентов в Apple music используется SencilJS, которая служит основой для Ionic.

Здорово видеть примеры удачного использования современных возможностей web-платформы в больших приложениях.

#webcomponents #ember #jsframeworks

https://dev.to/ionic/apple-just-shipped-web-components-to-production-and-you-probably-missed-it-57pf

Фред Шот — автор библиотеки pika — опубликовал статью с рекомендациями по настройке bundler-free окружения для разработки современных web-приложений — "Building without bundling: How to do more with less".

Может возникнуть резонный вопрос: "Зачем избавляться от бандлера?". В начале статьи Фред подсчитывает количество времени, которое отнимает у разработчиков сборка проекта. Для больших проектов, которые запускаются за 42 секунды и пересобираются за 11 секунд, время ожидания может занимать более часа (для 40-часовой рабочей недели).

Если вы используете у себя в проекте модульную систему из ES2015, сборка проекта необязательна, так как все современные браузеры уже поддерживают модульность в JS. Проблема остаётся с node_modules, которые могут содержать спецификаторы, которые браузер не сможет разрезолвить, или с node-специфичным кодом, например, process.env.NODE_ENV. Для решения этих проблем Фред предлагает использовать его библиотеку pika, которая преобразует код из node_modules в esm-бандлы. По сравнению с традиционными бандлерами у такого подхода есть преимущество — это преобразование надо запустить только один раз после npm install. Для работы с JSX предлагается использовать библиотеку htm.

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

#bundler #web #dx

https://blog.logrocket.com/building-without-bundling/

Франсуа Бофор из Google написал туториал про использование GPU-вычисления в web'е — "Get started with GPU Compute on the Web".

Возможности для GPU-вычислений предоставляет разрабатываемый стандарт WebGPU. Благодаря этому стандарту из web-приложений будут доступны все возможности современных видеокарт. После появления полноценной поддержки API в браузерах, наибольшую пользу получат те приложения, основная задача которых сводится к выполнению однотипных операций на большом количестве данных (например, приложения, использующие алгоритмы машинного обучения).

В статье очень подробно разбирается пример реализации умножения матриц. Объясняются понятия command encoder, bind group, bind group layout. Разбирается шейдер для перемножения матриц. Шейдеры пишутся на языке GLSL (в будущих версиях стандарта язык может поменяться).

Туториал хороший. Рекомендую посмотреть.

#webgpu #future

https://developers.google.com/web/updates/2019/08/get-started-with-gpu-compute-on-the-web

Вчера вышел свежий релиз Firefox. Как обычно на Mozilla Hacks вышла статья с обзором новинок — "Firefox 69 — a tale of Resize Observer, microtasks, CSS, and DevTools".

Для пользователей самое большое изменение — включение по умолчанию опции предотвращения трекинга (Enhanced Tracking Protection). Теперь можно отключить автоматическое воспроизведение видео, не имеет значения со звуком оно или нет.

Для разработчиков тоже сделали много улучшений. Теперь Firefox поддерживает публичные поля классов в JavaScript. Добавление поддержки приватных полей (те, что начинаются с символа # вначале) обещают в одном из следующих релизов. Реализован Resize Observer API. С помощью него можно зарегистрировать observer, который будет реагировать на изменение геометрии блочных элементов (некая JavaScript-альтернатива обсуждаемым в сообществе element queries). Добавлен новый метод self.queueMicrotask() для регистрации микрозадач, которые будут выполнены до передачи управления в event-loop. Эта фича позволит упростить реализацию фреймворков и обеспечит предсказуемость при работе с асинхронным кодом в разных браузерах. Появились CSS-свойства overflow-block и overflow-inline, обеспечивающие управление переполнением в блочном и инлайн элементах. Это свойство полезно при локализации страниц на те языки, которые используют разные направления письма. С помощью @supports теперь можно проверять поддержку новых типов селекторов.

В инструментах разработчика было добавлено пошаговое выполнение кода для асинхронных функций. Появилась возможность установки брекпойнтов на разные события: пользовательские ( keypup, keydown ) и программные ( onanimationend ). Добавлена удалённая отладка, то есть теперь доступен дебаг других запущенных инстансов Firefox на одной и той же машине или в пределах локальной сети.

#firefox #release

https://hacks.mozilla.org/2019/09/firefox-69-a-tale-of-resize-observer-microtasks-css-and-devtools/

Брайан Робинсон написал у себя в блоге статью про использование gap с flexbox'ами — "CSS Gap creates a bright future for margins in Flex as well as Grid".

Свойство gap в flexbox пришло из grid'ов. Раньше, для того чтобы сделать одинаковые расстояния между элементами, надо было указывать соответствующие расстояния с помощью margin. С приходом gap это стало немного проще:

.flex-container {
    display: flex;
    gap: 1rem;
}

Советую посмотреть в статье хороший пример flexbox-раскладки, использующей gap (на данный момент работает только в Firefox).

#layout #css

https://bryanlrobinson.com/blog/gap-provides-bright-future-for-margins-in-flex-as-well-as-grid/

Прочитал статью, в которой ребята из Miro поделились опытом работы с текстами в canvas — "Как мы учились рисовать тексты на Canvas".

Во время переезда Miro с Flash на JavaScript + Canvas появилась проблема при работе с текстами. Надо было бесшовно отображать текст и мини-редактор. Первое решение использовало foreignObject из svg. С его помощью можно "положить" любой html внутрь svg в качестве изображения. От этого решения пришлось отказаться, когда появилось новое требование — необходимо было добавить поддержку разных шрифтов. Как пишет автор, была проблема с тем, что происходила загрузка шрифтов для каждой внедряемой картинки. В итоге им пришлось реализовать свою библиотеку для отрисовки текста на canvas. На небольших объёмах текста библиотека работает быстрее решения с foreignObject. Похоже, что библиотека не open source, так как никаких ссылок на код не нашёл.

В статье очень много технических подробностей. Читать стоит, если делаете что-то подобное у себя в проекте или если просто интересно.

#rendering #canvas

https://habr.com/ru/company/miro/blog/458624/