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

CSS является блокирующим ресурсом. Это означает, что браузер должен скачать и распарсить CSS прежде чем показать страницу. Если размер CSS большой, то он может очень сильно влиять на воспринимаемую скорость загрузки сайта. В блоге webdev есть статья с объяснением того, как решить эту проблему — "Extract critical CSS".

Критический CSS — это тот CSS, который необходим для отображения части страницы, которая видна до прокрутки страницы (above-the-fold content). Для того чтобы страница отобразилась как можно раньше, критический CSS инлайнят в тег <head>. Есть несколько библиотек, которые можно для этого использовать — Critical, CriticalCSS и Penthouse. В конце статьи есть ссылка на туториал "Extract and inline critical CSS with Critical", где подробно разбирается работа с Critical.

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

#performance #css

https://web.dev/extract-critical-css

В блоге Акселя Раушмайера недавно была опубликована новая статья — "Evaluating JavaScript code via import()".

Код, который использует модульную систему JS, не может быть выполнен с помощью eval(). Для того чтобы обойти это ограничение, можно использовать динамический импорт import() с закодированным кодом модуля в виде data URI.

Выглядит это так:

const js = `console.log('Hello everyone!');`;
const encodedJs = encodeURIComponent(js);
const dataUri = 'data:text/javascript;charset=utf-8,'
  + encodedJs;
import(dataUri);

При желании можно получить доступ ко всем экспортируемым объектам. Также можно вставлять data URI прямо в статический импорт, и он будет работать.

Маловероятно, что вы будете использовать этот трюк. Тем не менее статья интересная, почитать стоит.

#esm #trick

https://2ality.com/2019/10/eval-via-import.html

Начиная с версии 7.9 в V8 изменяется работа с регулярными выражениями. Патрик Тиер и Ана Пешко написали пост с объяснением всех деталей — "Improving V8 regular expressions".

По умолчанию V8 компилирует регулярные выражения в нативный код при их первом запуске. Это влечёт за собой нагрузку на память. Около полугода назад как часть работы над "JIT-less V8" был добавлен интерпретатор для регулярных выражений. С версии 7.9 по умолчанию регулярные выражения будут исполняться с его помощью. Компиляция будет происходить только после того как одно и то же регулярное выражение будет выполняться несколько раз (hot-path). Новая стратегия позволяет уменьшить потребление оперативной памяти на 4-7%. Интерпретатор регулярных выражений был оптимизирован, теперь он в 2 раза быстрее. Это позволило не сильно просадить метрики по скорости относительно скомпилированных регулярок.

В статье много технических деталей того, как это всё работает. Читать сложно, но интересно.

#v8 #regexp #performance

https://v8.dev/blog/regexp-tier-up

Алексис Бинжесснер — инженер из команды Firefox — опубликовала пост про особенности рендеринга теста — "Text Rendering Hates You".

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

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

#internals #rendering

https://gankra.github.io/blah/text-hates-you/#emoji-broke-color-and-style

Недавно в блоге Gitlab появилась небольшая статья о том, почему было принято решение о переходе на ECharts для построения графиков — "Why we chose ECharts for data visualizations".

В Gitlab есть раздел с мониторингами приложения. Ранее для построения графиков в этом разделе использовался D3. От него решили отказаться, так как D3 был сложен в изучении и в конечном счёте не использовался на полную. От него лишь требовалась возможность отображения данных в виде графиков, поэтому ребята решили перейти на более специализированное решение. Выбирали между многими библиотеками, включая ECharts, Britecharts и Plotly. В итоге остановились на ECharts, потому что библиотека оказалась гибкой и достаточно производительной.

ECharts стартовал как open source проект Baidu, поэтому документация в основном написана на китайском языке. Не смотря на эту особенность экосистема вокруг проекта развивается, и проект используют не только в Китае, но и в других странах.

#experience #charts

https://about.gitlab.com/2019/09/30/why-we-chose-echarts/

Прочитал статью про атаку, про которую как-то не приходилось слышать раньше — "Slow Loris attack using JavaScript on a PHP Server".

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

Современные web-серверы из коробки идут с защитой от этой атаки, но она актуальна для кастомных серверов. Один из вариатов защиты от атаки, описанный в статье, использование reverse-proxy на nginx, с ограничением числа одновременных соединений от одного ip-адреса.

#security #http #tcp

https://www.freecodecamp.org/news/slow-loris-attack-using-javascript-on-php-server/

Пару дней назад Рик Вискоми в блоге web.dev написал пост про то, как измерять и исправлять нестабильность раскладки элементов на странице — "Fixing layout instability".

С версии Chrome 77 появилась возможность измерять смещение отображаемого контента во время его загрузки с помощью нового Layout Instability API. Это не критичная, но важная для UX метрика, с помощью которой можно измерить "приятность" загрузки данных.

В статье на примере тестового сайта рассматривается, как собрать эту метрику с помощью WebPageTest, и что можно сделать, чтобы контент не прыгал. Например, при загрузке веб-шрифтов стоит использовать font-display: swap, чтобы до загрузки кастомного шрифта отображался шрифт, использующийся в системе. Также можно использовать плейсхолдеры, если известно, какой тип контента будет загружен.

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

#ux #performance

https://web.dev/fixing-layout-instability

Несколько дней назад Cloudflare анонсировал экспериментальную поддержку HTTP/3 на своих серверах — "HTTP/3: the past, the present, and the future".

Чтобы ответить на вопрос, какую проблему решает новая версия протокола, надо для начала разобраться с HTTP/2. Основная польза от HTTP/2 — мультиплексирование запросов в рамках одного TCP-соединения. То есть если запрашивать классическую web-страницу по HTTP/2, то js/css-файлы, изображения и другие ресурсы будут передаваться параллельно друг другу, не создавая соединение на каждый запрос.

Загвоздка заключается в том, что HTTP/2 работает поверх TCP. Для TCP нет разницы, передаются ли по нему данные с помощью HTTP/1.1 или HTTP/2. Если во время параллельной передачи данных с помощью HTTP/2, какие-то байты, например из изображения, будут потеряны, возникнет пустой промежуток в потоке, который должен быть восстановлен. TCP работает так, что все успешно доставленные байты после обнаружения потери (даже если они не относились к изображению) не могут быть доставлены в приложение. То есть они будут ждать, пока данные будут восстановлены. Эта проблема известна под названием “head-of-line blocking”. HTTP/3 решает эту проблему, используя новый транспортный протокол QUIC. Также QUIC уменьшает количество запросов, необходимых для установки соединения.

На данный момент поддержка HTTP/3 есть в Google Chrome Canary за флагом и в экспериментальной версии curl. Разработчики Firefox обещают поддержку в ближайшем будущем. Есть реализация HTTP/3 клиента и сервера от cloudflare — quiche.

Теперь остаётся только ждать, когда стабилизируется стандарт, чтобы началось его массовое внедрение. Для меня самая крутая фича из нового протокола, которую планируют добавить в будущем, "connection migration" — бесшовная и прозрачная миграция между сетями. Благодаря ему можно будет забыть про паузы во время трансляции видео при переключении с Wi-Fi на LTE, а носимые девайсы станут по-настоящему always connected.

#http #performance #announcement

https://blog.cloudflare.com/http3-the-past-present-and-future/

🎂 Сегодня исполняется 25 лет Консорциуму Всемирной Паутины (W3C)!

https://www.w3.org/blog/2019/10/happy-25th-anniversary-world-wide-web-consortium/

Джейсон Григсби — автор книги Progressive Web Apps (A List Apart) — попробовал заказать еду на сайте, но с первой попытки у него это не получилось. Он разобрался в причинах и написал про результаты своего небольшого исследования статью "An HTML attribute potentially worth $4.4M to Chipotle".

На сайте было сломано автодополнение данных кредитных карт. Данные карты были сохранены в браузер правильно, но при их вводе в форму с помощью автодополнения что-то шло не так. Причина оказалась в Angular-модуле ui-mask, он неправильно отсекал год истечения срока действия карты. Автор попробовал использовать вместо кастомной маски стандартные HTML5 средства валидации формы pattern="\d\d" и maxlength="2". Проблема с автодополнением года была решена.

Проводились исследования, которые показывают, что автодополнение ускоряет заполнение форм на 30%. Скорость заполнения форм в свою очередь влияет на конверсию в заказ. Джейсон провёл грубые расчёты, которые показали, что сайт Chipotle теряет более 4 миллионов долларов в год из-за проблем с автодополнением.

Рекомендации из статьи: если у вас e-commerce сайт, убедитесь, что автодополнение данных кредитных карт работает, добавьте кейс проверки автодополнения в тест-план, используйте корректные поля ввода в формах.

#ux #forms

https://cloudfour.com/thinks/an-html-attribute-potentially-worth-4-4m-to-chipotle/

Посмотрел доклад 2018 года Расса Олсена про функциональное программирование — "Functional Programming in 40 Minutes".

В отличие от статей про ФП, в которых говорится забыть все концепции программирования, Расс говорит о том, что не надо их выкидывать — их надо взять и немного порефакторить. Он на примере показывает как существующие концепции, которые известны всем программистам живут в ФП. Рассказывает про "три столпа" функционального программирования — чистые функции, иммутабельность и работу с сайд эффектами. Работа с сайд эффектами разбирается на примере Clojure — Атомы/Агенты/Акторы.

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

#talk #fp #clojure

https://www.youtube.com/watch?v=0if71HOyVjY

Прошло уже больше полугода с момента создания Defront. Меня иногда спрашивают о том, как появился канал и как создаются посты. Хочу про это написать небольшой пост.

Если кто-нибудь мне сказал раньше, что я буду вести канал, я бы не поверил. Но сейчас в канале уже около 250 постов, и, определённо, будет ещё больше. Как так получилось? В 2017-2018 году я выпал из информационного поля и читал только то, что было нужно по работе. В начале этого года после прочтения небольшой статьи в голове что-то "щёлкнуло" — я решил поделиться прочитанным со своими коллегами в виде небольшого пересказа. Мне этот формат показался очень интересным. В итоге я поставил себе цель читать что-то новое и делиться прочитанным каждый день.

Обычно на подготовку одного поста уходит два часа, иногда больше, иногда меньше. Всё зависит от темы. Иногда тема понятна, и пост даётся легко. Иногда тема сложная, и для написания поста необходимо читать дополнительные статьи и код.

Один из основных источников информации — это twitter. Я там сижу под ником @myshov, кстати рекомендую зафолловить, так как ретвичу и твичу полезности, которые не попадают в канал. Все потенциально интересные ссылки сохраняю в заметках и потом просматриваю, удаляя не очень информативные. Потом выбираю наиболее интересную статью, читаю, погружаюсь в тему и публикую про неё пост.

Вот такой вот флоу.

Очень рад, что в итоге мой контент нашёл своего читателя. Спасибо за то, что читаете Defront.

P.S. Подключил к каналу чат для обсуждения материалов — @defrontchat. Welcome!

Элад Шехтер в статье "Complete Guide to Responsive Images!" рассказал про все подходы, которые можно использовать при создании адаптивных изображений.

В статье разбирается использование тега <picture> и тега <img> c атрибутами srcset и sizes для разных изображений в зависимости от плотности пикселей и ширины вьюпорта. Разбирается использование CSS-свойства image-set и CSS-функции image(). С помощью функции image() (её поддержки пока нет в браузерах) можно будет обрезать изображение и использовать в background-image изображение того типа, которое может быть отображено браузером.

Мне статья показалась чересчур справочной — не хватило живых практических примеров. Тем не менее она может послужить отличной стартовой точкой для изучения темы адаптивных изображений.

На Девшахте есть хороший перевод статьи.

#web #image #responsive

https://medium.com/@elad/a-complete-guide-for-responsive-images-b13db359c6c7

Сегодня будет ещё один релизный пост. Пару часов назад в блоге V8 появился анонс фич, которые попадут в версию 7.8.

Script streaming — загрузка скриптов из сети в парсер без ожидания главного потока Chrome — теперь будет работать для preload-скриптов (в Chrome 76 и выше). Эта фича позволит сократить время инициализации страницы.

При компиляции JavaScript в байткод движок собирает специальные таблицы, которые матчат байткод на конкретные позиции в исходном коде. Эти таблицы потребляют память. С версии 7.8 они будут генерироваться, только во время создания стектрейсов. Разработчики пошли на компромисс, так как эта операция требует повторного парсинга и перекомпиляции. В результате потребление памяти было уменьшено на 1-2.5%.

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

Поддержка Wasm С/C++ API перешла из экспериментального статуса в официальный. Это API позволяет использовать V8 как движок для исполнения WebAssembly в C/C++-приложениях. Был ускорен старт wasm-модулей.

#release #v8

https://v8.dev/blog/v8-release-78

Вчера вышла новая версия Node.JS 12.11.0.

V8 был обновлён до версии 7.7. С новой версией движка в Node.JS улучшилось управление памятью, была ускорена сериализация стектрейсов, в Intl.NumberFormat появилась поддержка единиц измерения, научной и инженерной нотации.

В модуле crypto была добавлена поддержка опции oaepLabel для шифрования RSA-OAEP. Эта опция может использоваться для идентификации сторон, участвующих в обмене информацией.

В модуле events была добавлена поддержка EventTarget в once для лучшей совместимостью с web-платформой.

В модуле fs при работе с файлами можно использовать флаг UV_FS_O_FILEMAP (работает только для Windows). С помощью него файл может быть смаплен в виртуальную память системы. В этом случае изменение и чтение файла будет проксироваться через память (полезно при работе с очень большими файлами).

Модуль worker_threads стал стабилен. Каких-либо изменений в API больше не ожидается. Также был обновлён API inspector для улучшения отладки воркеров.

C этой версии начался процесс добавления в Node.JS поддержки source maps. На данном этапе был добавлен сбор и кеширование source maps в директорию с покрытием при установке переменной окружения env.NODE_V8_COVERAGE.

#release #node

https://github.com/nodejs/node/releases/tag/v12.11.0

В сервисе Google Fonts появилась поддержка вариативных шрифтов. На данный момент она доступна как бета-версия (возможно изменение api в будущем) по адресу https://fonts.googleapis.com/css2.

Если на сайте используется семейство шрифтов с разной насыщенностью и разной шириной глифа (например, condensed), то каждая вариация будет представлена отдельным файлом шрифта. Из-за этого общий объём загружаемых шрифтов на сайтах с богатой типографикой может легко превысить несколько сотен килобайт. Вариативные шрифты решают эту проблему, представляя каждый глиф как контур и предоставляя возможность управления этим контуром. Каждая вариация отрисовывается браузером динамически. Благодаря этому один файл шрифта может использоваться для разных видов типографики.

На данный момент поддержка вариативных шрифтов есть во всех актуальных браузерах. Если интересно узнать больше про особенности их работы, то рекомендую почитать статью "Introduction to variable fonts on the web".

#typography #web

https://codepen.io/nlwilliams/full/JjPJewp

Нолан Лоусон недавно написал пост про особенности разработки сайтов под KaiOS — "The joy and challenge of developing for KaiOS".

KaiOS — это набирающая популярность операционная система для бюджетных телефонов. Она очень популярна в Индии. По количеству устройств KaiOS занимает второе место после Android.

В статье рассказывается, как начать разрабатывать под эту операционную систему. KaiOS построена на базе Firefox OS, в основе которой лежит Firefox 48. То есть все приложения в системе — это запакованные web-приложения (html, js, css). Устройства на базе KaiOS, очень ограничены в характеристиках, например, в статье для разработки автор использует Nokia 8110 4G. У этого телефона обычный экран (не сенсорный) с разрешением 240x320. Навигация в системе происходит с помощью клавиатуры. Нолан пишет, что адаптация его проекта под KaiOS помогла с a11y, так как интерфейс стал полностью доступен с клавиатуры.

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

#mobile #web

https://nolanlawson.com/2019/09/22/the-joy-and-challenge-of-developing-for-kaios/

Рекомендую хороший канал @drbrain4web, посвящённый web-разработке (JavaScript и PHP). Ведёт канал fullstack-разработчик Георгий Астахов.

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

Front & Back. @drbrain4web ждёт вас.

https://t.me/drbrain4web

В блоге WebKit около двух недель назад появилась статья про статус поддержки WebGPU API в Safari — "WebGPU and WSL in Safari".

Железо и архитектура видеокарт постоянно улучшается. Одновременно с их развитием появляются новые программные API, которые умеют c ними эффективного работать. На сегодняшний день есть Direct3D 12 от Microsoft, Metal от Apple и Vulkan от Khronos Group. Эти API работают на более низком уровне абстракции по сравнению с OpenGL, поэтому они более производительны. Проблема в том, что они не доступны на всех платформах, то есть не могут быть использованы для web'а. Для того чтобы решить эту проблему, разрабатывается новый стандарт для работы с видеокартами — WebGPU.

WebGPU предоставляет набор JavaScript API, с помощью которого рендеринг объектов отделяется от процесса их валидации, тем самым предоставляя разработчикам возможность эффективного управления процессом рендеринга. В статье есть график результатов синтетического бенчмарка. Там видно, что прирост производительность по сравнению с WebGL может увеличиться до семи раз. Есть планы по поддержке WebGPU API из WebAssembly в будущем. В статье ещё немного рассказывается про Web Shading Language (WSL) — новый язык шейдеров, поддержка которого появилась в Safari TP 91. Его основная особенность в том, что он создавался с нуля для поддержки всех платформ и графических API, которые поддерживает WebGPU.

Мне лично непонятно, какая судьба будет у WebGL 2.0. С учётом того, что в разработку WebGPU активно инвестирует Apple, есть риск, что поддержка WebGL 2.0 в Safari так и останется на экспериментальном уровне.

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

#webgpu #experimental #safari

https://webkit.org/blog/9528/webgpu-and-wsl-in-safari/

Случайно нашёл небольшую статью про CSS-свойство scroll-behavior, которое является частью чернового стандарта CSS View Module.

При переходе по ссылкам на внутренние части страницы с помощью якорей (ссылки начинающие на символ # ) страница прокручивается резко. Плавную прокрутку можно сделать с помощью JavaScript, но тоже самое можно реализовать с помощью scroll-behavior. Это CSS-свойство поддерживает два значения: auto — для обычного резкого перехода, smooth — для плавной прокрутки к якорю.

Со scroll-behavior: smooth есть две основные проблемы: он не поддерживается в Safari, и он может вызывать укачивание у пользователей. Поддержку в Safari стоит только ждать, а с укачиванием можно побороться с помощью отключения плавного скролла с использованием media query prefers-reduced-motion.

#css #experimental

https://css-tricks.com/almanac/properties/s/scroll-behavior/