Элайна Натарио написала статью с объяснением, в каких случаях для описания изображения нужно использовать alt и figcaption — "Alt vs Figcaption".

Основные отличия. Атрибут alt используется для буквального описания, что находится на изображении. Эта информация будет использоваться скринридерами при чтении страницы. Элемент figcaption используется для добавления дополнительной (контекстной) информации к разным объектам на странице: изображения, блоки текста, видео и т.п. Атрибут alt по умолчанию не отображается на странице, элемент figcatption отображается. И alt, и figcaption можно использовать для описания одного и того же изображения:

<figure>
  <img
    src="cat.jpg"
    alt="A black cat sitting on the floor and looking to the side">
  <figcaption>
    Vasya the cat shows his disrepectful behaviour towards his human
  </figcaption>
</figure>

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

#html #a11y

https://thoughtbot.com/blog/alt-vs-figcaption

На прошедшем Chrome Dev Summit Хуссейн Джирде и Джейсон Миллер рассказали про использование JavaScript-кода с современным синтаксисом. По мотивам этого доклада была написана статья "Publish, ship, and install modern JavaScript for faster applications".

Многие проекты по инерции используют транспиляцию новых фич JavaScript в ES5, из-за чего страдает производительность в современных браузерах. Транспиляция в ES5 нужна только для старых браузеров, которыми пользуются 5% пользователей. Чтобы доставить разные версии бандлов для современных и старых браузеров, можно использовать паттерн module/nomodule. Для его реализации нужно собрать два бандла: лёгкий для современных браузеров (ES2017) и тяжёлый для устаревших браузеров (ES5). В статье подробно разбирается, как это сделать с помощью webpack и rollup. Ещё в статье есть советы о том, как публиковать npm-пакеты с современным синтаксисом.

Также в докладе/статье был анонсирован новый сервис EStimator.dev, с помощью которого можно оценить прирост производительности сайта от перехода на современный синтаксис.

#js #performance #bundle

https://web.dev/publish-modern-javanoscript/

Ещё один пост про прошедший Chrome Dev Summit. Ингвар Степанян выступил на нём с небольшим докладом про улучшения отладки скомпилированного в WebAssembly C/C++ кода в инструментах разработчика — "Debugging WebAssembly with modern tools".

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

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

Новый отладчик пока доступен в экспериментальном режиме в Chrome Canary, но он уже используется разработчиками Google Earth.

#debug #webassembly #chromium

https://developers.google.com/web/updates/2020/12/webassembly

Доминик Тобиас написал статью о подходах к улучшению производительности CSS-in-JS — "How to increase CSS-in-JS performance by 175x".

Заголовок у статьи, конечно, кликбейтный, но написано там всё по делу. В прошлом году на perfplanet было опубликовано исследование с печальными результатами — популярные CSS-in-JS библиотеки, которые в рантайме внедряют на страницу стили (Styled Components, Emotion), могут очень негативно влиять на производительность сложных страниц.

Для улучшения производительности Доминик предлагает использовать CSS-in-JS библиотеки, которые могут извлекать стили из JS на этапе компиляции, также предлагает использовать CSS-переменные для темизации и рекомендует (по возможности) отказаться от динамики в стилях.

Полезная статья. Рекомендую почитать всем, кто использует Styled Components, Emotion и другие подобные библиотеки.

#react #cssinjs #performance

https://dominictobias.medium.com/how-to-increase-css-in-js-performance-by-175x-f30ddeac6bce

Я тут наткнулся недавно на очень интересную подборку задач по TypeScript. Особенность этих задач в том, что их нужно решать используя только систему типов TypeScript.

То есть, все задачки, которые там есть, их решение должно происходить в compile-time, никакого кода на TypeScript или JavaScript, кроме, собственно, типов.

И я призадумался. А не сделать ли мне «марафон» постов, где я буду идти по порядку от легкого уровня к сложному и рассказывать о решении, как оно работает, почему и так далее. Как вы на это смотрите? Не будет ли часто по одному посту в день на одну задачу из этой подборки?

Я лично уже прошел почти половину, очень интересно. Можно это всё завернуть в формат более продвинутого изучения типов. Не писать же только интерфейсы, правда? 🙃

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

https://github.com/type-challenges/type-challenges

Стэфан Джудис написал небольшую статью про малоизвестную фичу addEventListener — "addEventListener accepts functions and (!) objects".

Метод addEventListener в качестве обработчика события может использовать функцию или объект, реализующий интерфейс EventListener (объект с методом handleEvent ). Использование объекта позволяет инкапсулировать обработку событий DOM-элементов в рамках одного класса.

class EventHandler {
  constructor() {
    this.count = 0;
  }

  handleEvent() {
    this.count++;
    console.log(`Clicks: ${this.count}`);
  }
}

document
  .querySelector('button')
  .addEventListener(
    'click',
    new EventHandler()
  );

#js

https://www.stefanjudis.com/today-i-learned/addeventlistener-accepts-functions-and-objects/

Вчера вышел Firefox 84. Релиз в этот раз небольшой, но с полезными улучшениями.

В Firefox 84 появилась нативная поддержка процессоров Apple. Нативная сборка Firefox на процессорах Apple M1 запускается в два раза быстрее, также в нативной сборке гораздо быстрее работает JS.

CSS псевдокласс :not() стал поддерживать сложные селекторы. В Intl.DateTimeFormat() была добавлена поддержка форматирования долей секунд. Была добавлена поддержка Paint Timing API для получения подробной информации о затраченном времени на создание страницы (полезно для анализа и мониторинга производительности).

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

Все ресурсы, загружающиеся с локального хоста (127.0.0.1) вне зависимости от url, считаются загруженными в безопасном контексте.

#firefox #release

https://www.mozilla.org/en-US/firefox/84.0/releasenotes/
https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/84

Адам Аргайл рассказал про плюсы и минусы разных вариантов центрирования контента в CSS — "Centering in CSS".

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

Самый лучший вариант — центрирование с помощью флексов:

.gentle-flex {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1ch;
}

#css

https://web.dev/centering-in-css/

Эдди Османи написал статью про улучшение отзывчивости сайта с помощью паттерна import-on-interaction — "The Import On Interaction Pattern".

Чтобы улучшить производительность web-приложения, можно загружать минимально-необходимое количество кода. Например, сторонние виджеты можно загружать только тогда, когда пользователь прокручивает до них страницу или начинает с ними взаимодействовать. Таким же образом можно загружать куски основного приложения. В статье рассказывается, как это реализовать с помощью React или Vue.

В статье есть мысли про использование import-on-interaction с прогрессивной загрузкой страницы. В этом случае по умолчанию приложение загружается с использованием минимального количества кода (например, без кода фреймворка). Необходимые куски кода приложения загружаются, только после того как пользователь начал что-то кликать. Чтобы не потерять клики в Google используют библиотеку JSAction, которая отслеживает все клики до момента инициализации кода фреймворка.

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

#js #performance

https://addyosmani.com/blog/import-on-interaction/

Эрвин Хофман рассказал о том, как он работает с критическим CSS в своей системе управления контентом сайта — "Implementing critical CSS, from CMS to CLS".

Критический CSS можно подготавливать и внедрять на страницу разными способами. В своём проекте Эрвин выбрал следующий подход. Он доставляет заинлайненный критический CSS только таким пользователям, которые не были сайте ранее. Это позволяет снизить объём HTML, который нужно передать клиенту. Вместе с инлайном стилей происходит загрузка обычных файлов стилей, которые отвечают за стилизацию всей страницы. При переходе на новую страницу браузер будет доставать стили из кэша браузера, если они были загружены ранее. Все интерактивные элементы временно скрываются, если эти элементы видимы с заинлайненным CSS, но не работают пока полностью не загрузится JavaScript.

Рекомендую заглянуть в статью, если делаете (или хотите сделать) в своём проекте нечто похожее.

#performance #css

https://calendar.perfplanet.com/2020/implementing-critical-css-from-cms-to-cls/

Нашел интересную статью Санди Мец про проблему неправильных абстракций — "The Wrong Abstraction".

В психологии есть понятие "ловушка невозвратных затрат" (sunk cost fallacy). Это особенность психики, которая заставляет инвестировать время, деньги и другие ресурсы в убыточное дело. То есть чем больше мы вкладываем усилия в что-то, тем больше оно для нас становится ценнее.

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

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

#programming #musings

https://sandimetz.com/blog/2016/1/20/the-wrong-abstraction

Сегодня разработчики React представили новую фичу библиотеки — серверные компоненты.

Серверный компонент — это неинтерактивный React-компонент с расширением .server.js. Он полностью работает на стороне сервера, что позволяет внутри кода компонента сделать запрос к базе данных или прочитать файл с файловой системы сервера. Благодаря комбинированию клиентских (обычных) и серверных компонентов можно улучшить производительности приложения и улучшить UX. Ещё одна важная особенность серверных компонентов — их код не попадает в клиентский бандл приложения. Они не предназначены для замены обычных компонентов — решение об их использовании остаётся на усмотрение разработчиков приложений.

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

#jsframeworks #react #experimental

https://reactjs.org/blog/2020/12/21/data-fetching-with-react-server-components.html

Прошло две недели с момента последней публикации про Defront Plus. За это время в канале для патронов были опубликованы такие посты:

— Использование статистических методов для анализа производительности
— Строгая проверка на null в кодовой базе Figma
— Исправление сдвига контента из-за появляющегося баннера
— Советы про разработку от инженера из GitHub
— Альтернативный подход для упрощения работы с асинхронным кодом
— Оптимизация доставки изображений с помощью Cloudflare Workers
— Интересные факты из web-альманаха за 2020 год
— Производительность веба в 2021 году
— Обзор видеоформатов HEVC и AV1
— Сравнение производительности Puppeteer, Selenium и Playwright

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

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

https://www.patreon.com/myshov

Антуан Квин в блоге WebKit рассказал о преимуществах использования индивидуальных CSS-свойств для трансформации объектов — "CSS Individual Transform Properties".

Все современные браузеры поддерживают трансформацию объектов с помощью CSS-свойства transform и CCS-функций translate(), rotate(), scale(), skew(), matrix(). Первые три используются в разработке чаще всего. Для упрощения работы с ними в спецификацию CSS Transform Level 2 были добавлены CSS-свойства translate, rotate, scale. Ими удобнее пользоваться по сравнению с transform, а также они облегчают создание и переопределение сложных анимаций.

Индивидуальные свойства для трансформации — это новая фича. На данный момент её поддержка есть в Firefox, Chrome Canary и Safari Technology Preview 117.

#css #specification

https://webkit.org/blog/11420/css-individual-transform-properties/

Давид Хейнемейер Ханссон — автор веб-фреймворка Ruby on Rails — вчера представил Hotwire — альтернативный подход для создания SPA-подобных приложений, который использовался для создания почтового клиента hey.com.

Hotwire предоставляет набор из трёх библиотек: Turbo, Stimulus и Strada — для создания современных web-приложений без упора на JavaScript. Stimulus — это JavaScript-фреймворк, который был предоставлен пару лет назад. Его особенность заключается в HTML-центричном подходе для описания состояния и поведения приложения в браузере. Strada — это библиотека, облегчающие создание гибридных мобильных приложений. На данный момент она находится в стадии активной разработки, и более подробной информаци о ней нет. Turbo — это новая библиотека, помогающая в создании интерактивных страниц. Turbo интегрирует между собой бэкенд, который для обновляемых частей приложения вместо JSON отправляет отрендеренный HTML, и клиент, который подписывается на обновления с бэкенда по web-сокету и подменяет части приложения прилетевшими кусочками HTML-кода.

Видел в твиттере и на hackernews разные мысли по поводу этого подхода. Кто-то пишет о том, что ребята переизобрели Laravel Lifewire. Кто-то хвалит за продвижение идеи минимального использования JavaScript. Кто-то ругает за то, что отказ от JSON смешивает между собой слои представления и приложения. Подход, как минимум, интересный, но будет ли он развиваться за пределами Ruby-экосистемы, пока остаётся вопросом.

#jsframeworks #announcement

https://hotwire.dev/
https://twitter.com/dhh/status/1341420143239450624

Андрей Ситник в блоге Злых Марсиан написал статью о современных практиках создания фавиконок сайта — "How to Favicon in 2021: Six files that fit most needs".

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

// HTML
<link rel="icon" href="/favicon.ico" /><!-- 32×32 -->
<link rel="icon" href="/icon.noscript" type="image/noscript+xml" sizes="any" />
<link rel="apple-touch-icon" href="/apple.png" /><!-- 180×180 -->
<link rel="manifest" href="/manifest.webmanifest" />

// manifest.webmanifest
{
  "icons": [
    { "src": "/192.png", "type": "image/png", "sizes": "192x192" },
    { "src": "/512.png", "type": "image/png", "sizes": "512x512" }
  ]
}

Формат ico нужен для поддержки RSS-ридеров. Формат SVG будет использоваться в браузерах (в статье есть пример, как в SVG сделать изменение цвета иконки в зависимости от текущей темы ОС). Иконка с rel="apple-touch-icon" нужна для того, чтобы ваш сайт красиво выглядел на домашнем экране iPhone. Файл манифеста нужен для добавления иконок, которые будут использоваться в Android.

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

#web

https://evilmartians.com/chronicles/how-to-favicon-in-2021-six-files-that-fit-most-needs

Владимир Агафонкин — автор библиотеки leaflet — написал туториал про создание мини-версии библиотеки для отображения географических карт — "A Web Map from Scratch".

Все растровые web-карты работают по похожему принципу. Сначала карта разбивается на тайлы (изображения размера 256x256 пикселей). На нулевом уровне масштаба будет один тайл, на первом — четыре, на втором — 16, а на пятнадцатом — 32768. Потом для заданного уровня масштаба, широты и долготы географической точки выбирается необходимый тайл. Для этого используются формулы вариации проекции Меркатора — Web Mercator projection. Для полученного тайла выбираются несколько соседних тайлов, и затем все они размещаются на странице с помощью абсолютного позиционирования.

Рекомендую посмотреть туториал, если интересно узнать принцип работы растровых версий Google-карт, Яндекс-карт и 2GIS.

#map #tutorial

https://observablehq.com/@mourner/simple-web-map

Дженс Оливер Маейерт написал небольшой пост о том, почему нужно забыть о AMP (Accelerated Mobile Pages) — "Ignore AMP".

В 2015 году Google предложил использовать AMP — технологию для ускорения доставки страниц. Намерение было благое, но сообщество выступило против этой инициативы с резкой критикой, в первую очередь из-за того, что AMP должен был распространяться с домена Google. По прошествии пяти лет AMP не получил большого распространения, более того Google начал продвигать другую инициативу с похожей целью — Web Vitals.

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

Советую заглянуть в статью, если задумывались о внедрении AMP в свой проект.

#google #web

https://meiert.com/en/blog/ignore-amp/

Энтони Рикод на perfplanet написал обзор HTML- и CSS-фич, которые могут помочь в уменьшении размера JS-бандла — "HTML and CSS techniques to reduce your JavaScript".

В статье рассказывается про то, как без использования JavaScript отобразить нужное количество строк в контейнере. Рассказывается про использование position: sticky для создания эффекта прилипающих к границам экрана элементов, про плавную прокрутку, про использование CSS Scroll Snap для создания слайдеров и про ленивую загрузку изображений.

Полезный обзор. Почитайте, если ещё не встречались с этим фичами.

#performance #html #css

https://calendar.perfplanet.com/2020/html-and-css-techniques-to-reduce-your-javanoscript/

Райан Карниато — автор библиотеки Solid.js — сравнил производительность популярных ui-фреймворков/библиотек и опубликовал результаты в статье "JavaScript Frameworks, Performance Comparison 2020".

Райан поделил все фреймворки на четыре группы. В группе с небольшим упором на производительность первые места взяли Alpine, Marko и React. В группе с большим упором на производительность на первых местах Riot, Preact и LitElement. В группе с очень большим упором на производительность лучшие результаты показали HyperApp, Svelte, Elm. В группе с максимальным упором на производительности с незначительным разрывом победил Solid.js, следом за ним идёт Inferno.

Выводы из статьи. Маркетинг не всегда отражает реальность, так как в разных проектах разные особенности. При выборе ui-фреймворка нужно делать свои бенчмарки; в одном случае будет лучше работать решение с Virtual DOM, в другом случае — DSL, компилируемый в JavaScript.

#jsframeworks #performance

https://medium.com/javanoscript-in-plain-english/javanoscript-frameworks-performance-comparison-2020-cd881ac21fce