SVGcode — конвертация растровых изображений в SVG

Томас Штайнер рассказал про новый инструмент для конвертирования растровых изображений в SVG — "SVGcode: a PWA to convert raster images to SVG vector graphics".

SVGCode — это PWA, с которым можно работать в вебе, оффлайн или установить локально. Поддерживаются все популярные растровые форматы — JPG, PNG, GIF, WebP, AVIF. Из коробки работает постеризация — уменьшение количества цветов изображения — для улучшения качества конвертации.

Приложение создано на базе WebAssembly-версии утилиты potrace. В SVGcode есть все фичи полноценных приложений: буфер обмена реализуется с помощью Async Clipboard API, доступ к файловой системе с помощью File System Access API, есть возможность регистрации SVGCode на уровне ОС в качестве обработчика файлов. Исходный код распространяется под лицензией GPL.

#svg #tool #pwa

https://web.dev/svgcode/

Ускорение установки HTTPS-соединений

Саймон Харн рассказал о том, как HTTPS-сертификаты влияют на производительность сайта — "The Performance Cost of EV Certificates".

Есть три основных типа HTPS-сертификатов: Domain Validation (DV), Organisation Validation (OV), Extended Validation (EV). DV-сертификаты выдаются на основе факта принадлежности домена, как в Let's Encrypt. OV- и EV-сертификаты выдаются организациям за оплату.

EV-сертификат предоставляет большее количество информации для пользователя, но по-большому счёту он не сильно отличается от OV. Вы могли видеть, что сайт использует EV-сертификат, когда в адресной строке рядом с иконкой замка зелёным текстом отображался владелец сертификата. С версии Chrome 77 такие сертификаты отображаются обычным значком замка без зелёного текста.

OV-сертификаты валидируются на стороне веб-сервера отправкой запроса на сервер организации, выдавшей сертификат. EV-сертификаты не могут валидироваться на стороне веб-сервера, поэтому их валидация происходит на клиенте, замедляя установку HTTPS-соединения. Задержка наиболее заметна в странах бывшего СССР, в Восточной Австралии, Канаде и большинстве стран Африки. Некоторые организации сталкивались с минутной задержкой для пользователей в Китае. Эта проблема решается переходом на OV-сертификат.

#http #performance #security

https://simonhearne.com/2020/drop-ev-certs/

Использование focus-visible с обратной совместимостью

Патрик Лаук поделился своим подходом для управления стилями фокуса — ":focus-visible and backwards compatibility".

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

Для кастомизации фокуса во всех браузерах с учётом :focus-visible Патрик советует использовать следующий подход:

/* стилизация фокуса */
/* в устаревших браузерах */
button:focus {
  outline: dotted 5px teal; 
}

/* отключение стилей `:focus` */
/* в современных браузерах */
*:focus:not(:focus-visible) {
  outline: none !important;
}

/* стилизация фокуса */
/* в современных браузерах */
button:focus-visible {
  outline: dotted 5px teal; 
}

На данный момент :focus-visible поддерживается во всех браузерах (в Safari за экспериментальным флагом).

#css #a11y

https://www.tpgi.com/focus-visible-and-backwards-compatibility/

Сравнение вычислительной производительности WebGL и WebGPU

Денис Радин сравнил вычислительную производительность WebGL и WebGPU — "WebGPU computations performance in comparison to WebGL".

WebGPU API предоставляет доступ к возможностям современных видеокарт. Для поддержки вычислений в нём используются вычислительные шейдеры (compute shaders). В WebGL что-то подобное можно сделать с помощью хака преобразованием данных в текстуру и их дальнейшей обработкой с помощью пиксельного шейдера. Так как WebGPU разрабатывался с учётом поддержки произвольных вычислений, в задаче на перемножение матриц он работает в 3,5 раза быстрее WebGL.

WebGPU открывает доступ к машинному обучению в вебе, пост-процессингу в реальном времени и физическим симуляциям в 60 fps.

#webgl #webgpu #performance

https://pixelscommander.com/javascript/webgpu-computations-performance-in-comparison-to-webgl/
http://pixelscommander.com/ru/javascript/webgpu-computations-performance-in-comparison-to-webgl/ (на русском языке)

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

— Сандбоксинг кода с помощью QuickJS в Figma
— Неожиданное поведение custom properties с !important
— Отключённый JavaScript не спасает от фингерпринтинга
— Улучшение производительности Node.js-приложений
— Проблемы оверинжиниринга
— Оптимизация фреймворков с помощью инлайнинга ресурсов
— Идеальная ссылка
— Миграция проектов BBC на HTTPS
— TypeScript-конфиги для разных проектов
— CSS — это интерфейс
— Миграция кодовой базы Etsy на TypeScript

Становитесь патроном канала на Patreon, чтобы получить доступ в канал Defront Plus (300 уникальных постов). Все донаты идут на поддержку канала, покупку еды, аренду квартиры, оплату медицинских услуг и т.п.

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

https://www.patreon.com/myshov

Изоляция сайтов в Firefox 94

Анна Гахокидзе из команды разработчиков Firefox рассказала про улучшение безопасности браузера с помощью изоляции сайтов — "Introducing Firefox’s new Site Isolation Security Architecture".

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

После обнаружения атак Meltdown и Spectre, которые эксплуатируют CPU для доступа к памяти сайтов-соседей, разработчики Firefox приступили к работе над новой архитектурой (проект Fission). В этой архитектуре все сайты находятся в независимых процессах. Изоляция сайтов позволяет решить проблему утечки данных через разделяемую память на системном уровне. Также изоляция улучшает стабильность браузера — критические ошибки не выходят за рамки выделенного процесса и не затрагивает сайты в соседних вкладках.

Переход на новую архитектуру с полноценной изоляцией сайтов был завершён в Firefox 94.

#firefox #security

https://hacks.mozilla.org/2021/05/introducing-firefox-new-site-isolation-security-architecture/

Создание паттернов с помощью CSS Painting API

Джордж Франсис написал туториал по созданию генеративных паттернов с помощью CSS Painting API — "Creating Generative Patterns with The CSS Paint API".

Разработчики браузеров уже несколько лет работают над проектом Гудини (Houdini) — набором API для предоставления низкоуровневого доступа к CSS-движку. В этот набор входят CSS Painting API, CSS Layout API, CSS Properties and Values API и другие API.

CSS Painting API предоставляет низкоуровневый доступ к средствам рендеринга CSS. С его помощью разработчики могут создавать JavaScript-ворклеты для рендеринга изображений. Эти ворклеты могут быть использованы везде, где можно использовать изображения, например, в background-image и border-image. В туториале рассказывается об использовании CSS Painting API для создания генеративного арта.

Поддержка CSS Painting API на данный момент есть только в Chrome и других браузерах на базе Chromium.

#css #tutorial

https://css-tricks.com/creating-generative-patterns-with-the-css-paint-api/

Браузер. Рендеринг. Производительность

Второй год я помогаю с поиском спикеров на CodeFest — крупнейшая конференция за Уралом. В прошлом году у нас выступал Сергей Ufocoder — автор канала @ufostation — с докладом "Браузер. Рендеринг. Производительность".

В докладе рассказывается о производительности рендеринга в Chromium с точки зрения архитектуры браузера. Подробно объясняется работа пайплайна рендеринга на примере about://tracing и профилировки страниц с помощью вкладки Performance в DevTools. Рассматриваются несколько случаев оптимизации производительности с объяснением, почему это работает именно так. При подготовке доклада Сергей консультировался с официальной документацией Chromium и с разработчиками браузера.

Доклад немного хардкорный, но полезный. Рекомендую посмотреть.

#performance #chromium #internals #talks

https://www.youtube.com/watch?v=tbDxm1hiEI4

Ускорение отрисовки комментарии Хабра

Станислав Лашманов поделился опытом ускорения отрисовки комментариев в web-версии Хабра — "Как мы ускоряли комментарии Хабра".

Фронтенд Хабра — это SPA-приложение, написанное на Vue.js. Самой большой проблемой после переписывания фронта Хабра стала производительность комментариев. Страницы с большим количеством комментариев рендерились медленно, а на слабых устройствах им не хватало памяти.

Для решения этой проблемы ребята реализовали стриминг. Благодаря ему комментарии рендерятся на сервере и по мере готовности передаются на клиент. Клиенту больше не приходится ждать загрузки всех комментариев. Однако с добавлением стриминга возникли другие проблемы: перестали работать якорные ссылки, надо было реализовывать восстановление скролла после перезагрузки страницы, были проблемы с переходами по истории. Все проблемы удалось решить.

Респект ребятам за то, что смогли дотащить эту фичу, но работы у них ещё осталось много. Хабр сейчас работает гораздо медленнее по сравнению со старой версией — оценка производительности в Lighthouse 25 баллов из 100. С точки зрения обычного пользователя кажется, что переход на SPA был не самой хорошей идеей.

#performance #spa #vue

https://habr.com/ru/company/habr/blog/590111/

Фонд UI

Chrome начал спонсировать независимых разработчиков и исследователей, работающих над вебом — "The UI fund".

На грант могут податься все желающие. Нет ограничений по срокам подачи заявок. Основное условие — работа над проектом, затрагивающим CSS, HTML или UI-инструменты. Под эти категории попадают инструменты для работы c HTML и CSS, работа над спецификациями или UI-исследованиями, работа в области доступности или работа над Open UI. Ведут проект Сара Дразнер и Николь Салливан. Для поддержки будут привлекаться эксперты из индустрии.

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

#opensource #announcement

https://web.dev/ui-fund/

Rainer 1.0 — узкий акцидентный гротеск с высокой талией. Рудигер, его автор, начал работу над шрифтом ещё в 2014 году, и вот теперь добрался до релиза на Future Fonts.

В семействе 6 вариантов насыщенности, начертания есть прямые и с обратным наклоном. То есть, 12 шрифтов в сумме.

Лицензия стоит от 360 $, по начертаниям не продаётся.

Купить: futurefonts.xyz/rudiger/rainer/

#sans #decore

React Forget

Только что Xuan Huang (работал над Hermes) презентовал свой ресёрч React Without Memo.
Это компилятор, который позволит не использовать React.memo, генерируя код, который будет мемоизироваться автоматически. Пока что это закрытый эксперимент (React Forget это кодовое название) и не факт, что он завершится удачно.

Прикладываю 3 скриншота:
1. как выглядит мемоизированный код, который мы пишем сейчас;
2. как может выглядеть исходный код с использованием такого компилятора;
3. результат компиляции.

Ну и посмотрите сам доклад, он супер короткий: https://youtu.be/CzTXnOJj-uc?t=6906

P.S. Очень рад, что команда React двигается в эту сторону. Мне кажется, я до сих пор не понимаю когда мне нужен useCallback, а когда не особо, и, главное, как всё это правильно написать.