Мальте Юбэл из Google написал статью про современные практики работы с изображениями в web — "Maximally optimizing image loading for the web in 2021".

В статье рассказывается про то, как избежать сдвига контента при работе с отзывчивыми изображениями, про ленивую загрузку изображений, кэширование, новый формат AVIF, использование тега <picture> и работу с размытыми заглушками.

Самым интересным в статье для меня было описание техник для снижения потребления и оптимизации CPU. Например, вставка изображений с атрибутом decoding="async" даёт сигнал браузерам о том, что декодировать изображение можно вне главного потока (в твиттере в обсуждении статьи, лид, отвечающий за рендеринг в Chrome, говорит о том, что этот атрибут не включён по умолчанию, так как загружаемый контент моргал бы при загрузке). Ещё в статье есть описание трюка с использованием размытия с помощью SVG-фильтров, благодаря этому подходу изображения размываются только один раз при загрузке, а не на каждый layout страницы как при использовании CSS-фильтров.

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

#graphics #web

https://www.industrialempathy.com/posts/image-optimizations/

Петер Перлепес написал статью про обработку событий перехода страницы в фоновый режим — "Exploring the Page Visibility API for Detecting Page Background State".

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

Все браузеры поддерживают события beforeunload и unload, с помощью которых можно отловить закрытие страницы, но они ненадёжны на мобильных платформах. Ещё эти события могут негативно влиять на Back/Forward Cache браузера. Современный подход — использование событий Page Visibility API: pagehide и visibilitychange. С ними есть сложности, связанные с кроссбраузерностью. В статье рассказывается о том, как лучше всего их использовать.

#js #web

https://tech.trivago.com/2020/11/17/exploring-the-page-visibility-api-for-detecting-page-background-state/

В прошлом году самой горячей темой стало усилившееся разногласие в отношении будущего веба между Apple, Google и Mozilla. Google продвигает идею "нативного" веба, добавляя в Chromium экспериментальные API для доступа К Bluetooth/USB-устройствам, файловой системе пользователя и т.п. Apple и Mozilla придерживаются консервативной позиции и не хотят добавлять некоторые API, предлагаемые Google, объясняя это заботой о приватности и безопасности пользователей.

Ноам Розенталь — участвует в разработке стандартов и движков браузеров — постарался объективно разобраться в этой теме и поделился своим видением решения возникшей проблемы — "Should The Web Expose Hardware Capabilities?".

В первой части статьи Ноам пытается понять обе стороны спора и пишет о том, что по-своему правы и Google, и Apple с Mozilla. С одной стороны мы хотим видеть развитие платформы, с другой стороны мы не хотим жертвовать безопасностью пользователей. Это очень серьёзный вопрос, например, в 2018 году исследователи в области безопасности рассказали о способе компроментации USB-ключей доступа с помощью WebUSB (Google эту проблему устранил). Чтобы избежать подобных проблем в будущем во второй части статьи автор предлагает внедрить модель доверия, в которой разработчики железа и браузеров могут ограничить урон, который может быть нанесён потенциально небезопасными API.

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

#web #specification

https://www.smashingmagazine.com/2021/01/web-expose-hardware-capabilities/

Наверное, все по несколько раз в день сталкиваются с cookie-баннерами. Сегодня в посте Ната Фридмана (CEO GitHub) прочитал о том, что в некоторых случаях их можно не показывать — "No cookie for you".

Европейский Союз требует, чтобы владельцы сайтов отображали информацию о таких куках, которые необязательны для работы сайта (куки систем аналитики, рекламных сетей, настройки и т.п.) Но на сайте можно не показывать баннер, если используются только такие куки, без которых сайт будет работать некорректно (куки с идентификатором сессии, корзины и т.п.) В конце 2020 года GitHub полностью отказался от использования необязательных кук, и, соответственно, удалил с сайта cookie-баннер.

#web

https://github.blog/2020-12-17-no-cookie-for-you/

В декабре 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/

В блоге 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

В блоге CSSSR была опубликована вторая часть статьи про историю фронтенда — "История фронтенда: JavaScript как отражение новой эпохи".

Во второй части рассказывается про историю появления и развития веб-стандартов. HTML и JavaScript пережили похожий процесс: сначала была жёсткая конкуренция браузеров с хаотичным внедрением фич, затем предпринималась попытка стандартизации, которая была отвергнута сообществом (XHTML) или стала неудачной из-за слишком больших амбиций (ECMAScript 4), потом был застой, а затем продуктивная работа вместе с сообществом. HTML и JavaScript стали живыми стандартами, которые обновляются каждый год и поддерживаются всеми браузерами.

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

#history #web

https://blog.csssr.com/ru/article/frontend-history-java-script-as-a-reflection-of-a-new-era/
https://www.youtube.com/watch?v=sgyoKkAfGpU (видео)

Почему ссылки синие?

Элиза Бланшар написала статью про то, почему на многих сайтах ссылки синего цвета — "Why are hyperlinks blue?"

В первых интерфейсах для гиперссылок использовался чёрный цвет с подчёркиванием или рамками. С распространением цветных мониторов гиперссылки стали приобретать разные цвета, например, в клиенте Gopher (предтеча веб) использовался зелёный цвет. Mosaic стал первым браузером, который закрепил за ссылками привычные цвета: синий для обычных ссылок и тёмно-фиолетовый для посещённых. Почему был выбран синий цвет для обычных ссылок, точно неизвестно. Есть теория, что на этот выбор повлиял интерфейс Windows, который закрепил за синим цветом сигнал интерактивности.

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

#web #history #ux

https://blog.mozilla.org/en/internet-culture/deep-dives/why-are-hyperlinks-blue/

Причины сломанной загрузки JS и CSS

На сайте правительства Великобритании есть руководство, посвящённое прогрессивному улучшению — "Building a resilient frontend using progressive enhancement".

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

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

#web

https://www.gov.uk/service-manual/technology/using-progressive-enhancement

CORS — история появления и нюансы использования

Джейк Арчибальд написал статью про CORS с интерактивными примерами — "How to win at CORS".

Впервые управление кроссдоменными-запросами появилось в Flash с помощью файла /crossdomain.xml, в котором описывались права доступа сторонних сайтов. В 2005 году рабочая группа W3C Voice Browser Working Group предложила альтернативное решение для XML-ресурсов. Так как XML не получил широкого распространения для представления HTML-документов, предложение рабочей группы трансформировалось в CORS (Cross-Origin Resource Sharing), который управляется с помощью HTTP-заголовка: Access-Control-Allow-Origin.

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

#web #security #history

https://jakearchibald.com/2021/cors/

Потенциальные проблемы с Firefox 100 и Chrome 100

Близится день, когда Firefox и Chrome дойдут до сотой версии. Это не просто красивая цифра, но и потенциальная причина ошибок.

Немного истории. Opera стала первым браузером, дошедшим до версии 10. В альфа-версии десятки поломались сайты, неправильно парсившие User-Agent. Их логика парсинга предусматривала только одну цифру в версии, поэтому Opera 10 превращалась в Opera 1, ломая отображение сайта.

Подобная ситуация может случиться с Firefox 100 и Chrome 100, если логика парсинга не предусматривает трёхзначные числа. Поэтому разработчики браузеров рекомендуют проверить работу своих проектов с изменением версии браузера в User-Agent. Разработчики Chrome пошли немного дальше и сделали специальный флаг #force-major-version-to-100, который автоматически подымает версию Chrome до 100.

#announcement #web

https://developer.chrome.com/blog/force-major-version-to-100/
https://www.otsukare.info/2021/04/20/ua-three-digits-get-ready

Самые интересные факты из веб-альманаха 2021

Стефан Джудис рассказал о наиболее интересных фактах из веб-альманаха 2021 года — "Highlights of the Web Almanac 2021".

Каждый год майнтейнеры HTTP Archive и активные участники сообщества составляют веб-альманах — слепок текущего состояния веба на базе исследования более восьми миллионов популярных сайтов. В этом году в веб-альманахе было опубликовано 24 главы про HTTP, HTML, CSS, JS, приватность, производительность и т.п.

Из интересного:
— jQuery используется на 84% сайтов, React — на 8%;
— Wordpress обслуживает 33% просканированных сайтов;
— 94% сайтов используют по крайней мере один сторонний ресурс; подавляющее большинство от сервисов Google;
— если на странице подключается виджет youtube, медианное время блокирования главного потока составляет 1,6 секунд;
— 16% страниц используют бессодержательные названия ссылок: "click here", "read", "more" и т.п.;
— 22% сайтов поставляется с HSTS (HTTP Strict Transport Security);
— на 20% сайтов нет определения атрибута lang.

#web #research

https://www.stefanjudis.com/blog/highlights-from-the-web-almanac-2021/