А пока последние две недели в основном канале публиковалось самое интересное из мира фронтенда и около него, в Defront Plus были опубликованы такие посты:

- Использование noscript в SVG
- Оптимизация метрики time-to-logo на Wikimedia
- Имена элементов и доступность
- Как писать хорошие комментарии
- Юзабилити ссылок mailto
- Принцип работы Certificate Transparency
- Как написать такой email, на который ответят
- Сравнение QUIC и TCP
- Исследование эффективности технических собеседований
- Восстановление поддержки Shared Memory в Firefox

Поддержите канал на Patreon и получите доступ к дополнительным статьям в Defront Plus!

https://www.patreon.com/myshov

Ашан Фернандо написал статью про преимущества сбора телеметрии на фронтенде — "Importance of using JavaScript Telemetry for Single Page Apps".

Для сбора телеметрии в проектах Ашана используется Azure App Insights. Благодаря дополнительным данным, которые прилетают с фронтенда, им стало проще находить проблемы производительности. Ранее телеметрия собиралась только на бэкенде, но она не отражала полную картину. Например, на бэкенде могло быть всё ок, а на фронтенде были тормоза из-за того, что бэкенд вернул слишком большой объём данных, который медленно обрабатывался на слабом устройстве.

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

#performance

https://blog.bitsrc.io/importance-of-using-javanoscript-telemetry-for-single-page-apps-9805b8ffd563

Гари Чу — devrel из Google — опубликовал статью про проблемы использования транспилированного кода в современных браузерах — "Bringing Modern JavaScript to Libraries".

На данный момент многие библиотеки из npm транспилируются в ES5. Это проблема, так как даже если проект не поддерживает legacy-браузеры, он должен "заплатить налог" в виде размера бандла. Этот налог для разных библиотек может быть как 7%, так и 40%.

В январе 2020 года в Node.js 13.7.0 появилась поддержка условных экспортов, с помощью которых можно указать разные сборки для разных типов окружений. Гари предлагает добавить новый тип окружения в условный экспорт для бандлов, которые транспилируются в ES2017 (один из возможных вариантов — browser2017 ). Предполагается, что бандлеры могут использовать это окружение для создания облегчённой версии бандла приложения. Также рассматривается вариант публикации кода без транспиляции, но в этом случае увеличится время сборки.

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

#proposal #perfomance #npm

https://dev.to/garylchew/bringing-modern-javanoscript-to-libraries-432c

На сайте Developer Apple была опубликована статья про использование одноразовых SMS-кодов, привязанных к домену, — "Enhance SMS-delivered code security with domain-bound codes".

Современные смартфоны предоставляют средства для автозаполнения поля с SMS-кодом, который отправляется пользователю при включённой двухфакторной аутентификации или подтверждения каких-либо операций. Сейчас автодополнение кодов работает на любых страницах, которые используют поле ввода с атрибутом autocomplete=one-time-code. Проблема в том, что этим могут пользоваться фишинговые сайты.

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

123456 is your Example code.

@example.com #123456

Привязанные к домену коды можно использовать в iOS 14 и macOS Big Sur. На Android эта фича скорее всего появится в одном из следующих релизов.

#security #mobile

https://developer.apple.com/news/?id=z0i801mg
https://github.com/WICG/sms-one-time-codes

Юна Кравец и Владимир Левин рассказали про новое CSS свойство content-visibility, благодаря которому можно ускорить время рендернига страницы — "Сontent-visibility: the new CSS property that boosts your rendering performance".

Свойство content-visibility опирается на примитивы, определённые в спецификации CSS Containment, которые задаются с помощью свойства contain. С помощью этих примитивов разработчик может тонко настроить поведение рендеринга блоков. Свойство contain может быть разных типов в разных комбинациях. Определение наиболее эффективной комбинации значений может быть нетривиальной задачей. Свойство content-visibility решает эту проблему.

Благодаря свойству content-visibility браузер самостоятельно определяет необходимую комбинацию contain-примитивов, откладывая рендеринг контента до момента, пока он не попадёт во вьюпорт. При этом рендеринг ускоряется минимум на 50% (в примере из статьи рендеринг ускорился в семь раз).

Новое свойство будет доступно в Chrome 85. Разработчики Firefox отозвались положительно об этой фиче, но пока над её внедрением не работают.

#css #performance

https://web.dev/content-visibility/

В техническом блоге Facebook была опубликована статья про подходы улучшения доступности, которые были использованы на новом сайте социальной сети, — "Making Facebook.com accessible to as many people as possible".

Основные пункты статьи. Чтобы не допускать распространённых ошибок доступности, используют eslint-плагин eslint-plugin-jsx-a11y. Для работы с фокусом используют специальные компоненты, которые также упрощают добавление навигации с клавиатуры. Для улучшения читабельности текста на этапе сборки конвертируют размер шрифта в rem. Иерархия заголовков в документе поддерживается автоматически с помощью специального API. Улучшили работу горячих клавиш с помощью API на базе React контекста. Для валидации разметки используют самописный инструмент, который подсвечивает красным оверлеем все элементы с проблемами a11y.

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

#a11y #react #facebook

https://engineering.fb.com/web/facebook-com-accessibility/

Пол Кальвано — специалист в области web-производительности из Akamai — написал статью про Back/Forward кэш и его влияние на производительность — "Browser Back/Forward Caches and their Benefit to Web Performance".

В Firefox и Safari используется Back/Forward Cache (BF Cache). В нём сохраняется состояние страниц, которые пользователь посещал ранее, благодаря чему браузеру не нужно повторно строить DOM при навигации по истории с помощью кнопок Back/Forward. Если страница находится в BF Cache, то она загружается очень быстро.

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

#performance #cache #chrome

https://paulcalvano.com/2020-08-03-browser-backforward-caches-and-their-benefit-to-web-performance/

Лия Веру написала пост про использование CSS OM для получения списка CSS-свойств — "Introspecting CSS via the CSS OM: Getting supported properties, shorthands, longhands".

Лия работает над CSS-частью web-альманаха. Для исследования данных ей понадобился всех список всех CSS-свойств и соответствующих сокращённых свойств. Для получения списка свойств можно использовать Object.getOwnPropertyNames(document.body.style) (в Firefox необходимо использовать прототип `style`). Для того чтобы узнать, является ли данное свойство сокращённой формой записи, нужно добавить это свойство HTML-элементу и получить список свойств, в которые он был развёрнут:

function getLonghands(property) {
  let style = document.body.style;
  style[property] = "inherit";
  let ret = [...style];
  style.cssText = "";
  return ret;
}

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

#css

https://lea.verou.me/2020/07/introspecting-css-via-the-css-om-getting-supported-properties-shorthands-longhands/

Вышел React 17.0.0 Release Candidate, в котором нет новых фич. Главное изменение — синтетические события теперь регистрируются не в document, а в том узле DOM, в котором рендерится дерево React. Это позволит использовать несколько версий библиотеки без конфликтов, а также позволет упростить обновления в следующих версиях. Ещё одно изменение, связанное с событийной системой реакта: теперь события React ближе к нативным событиям, больше нет необходимости использовать e.persist(). Другие изменения: очистка в useEffect теперь вызывается асинхронно, вывод ошибки при возврате undefined из forwardRef и memo (как это происходит с обычными компонентами в React 16), улучшения стек трейсов, а также были убраны некоторые внутренние экспорты.

Андрей Мелихов опубликовал на хабре статью "Архитектура современных корпоративных Node.js-приложений".

Фронтенд-разработка в больших проектах давно вышла за границы работы с представлением. Фронтендеры должны поддерживать сервер-сайд рендеринг и жонглировать ответами от разных бэкендов. В статье рассказывается про подход с организацией логики уровня приложения с помощью BFF (Backend For Frontend). Разбираются плюсы и минусы нескольких подходов разделения приложения на слои. В качестве примера реализации используется фреймворк Nest, по ходу дела разбираются его ограничения.

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

#architecture #nodejs

https://habr.com/ru/company/yandex/blog/514550/

Эдди Османи недавно написал статью об оптимизации метрики CLS для списков с бесконечным скроллом — "Infinite Scroll without Layout Shifts".

Для организации больших списков в web'е используют пагинацию, подгрузку по кнопке "загрузить больше" и бесконечную подгрузку элементов списка при прокрутке контента. Бесконечная прокрутка считается самым проблемным решением с точки зрения a11y. Если не прилагать особых усилий, то подвал сайта будет постоянно сдвигаться из-за подгрузки новой порции контента, ухудшая метрику CLS (Cumulative Layout Shift).

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

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

#performance #ux

https://addyosmani.com/blog/infinite-scroll-without-layout-shifts/

В блоге Google Артур Жанк и Лукас Вайксельбаум рассказали про новые фичи безопасности web-платформы, которые были добавлены за последние несколько лет, — "Towards native security defenses for the web ecosystem".

Разработчики браузеров и авторы спецификаций работали над защитой от инъекций и улучшением изоляции между сайтами. Trusted Types и Content Security Policy (CSP) решают проблему XSS. Благодаря Trusted Types потенциально небезопасные API становятся доступны только доверенному коду. CSP предоставляет защиту от server side XSS. Для улучшения изоляции сайтов в платформу были добавлены Fetch Metadata Request Headers и Cross-Origin Opener Policy (COOP). С помощью Fetch Metada к запросам привязывается метаинформация, на основе которой сервер может отклонить запрос. Благодаря COOP добавляется уровень изоляции между сайтами, когда один сайт открывает другой сайт в новой вкладке/окне.

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

#security

https://security.googleblog.com/2020/07/towards-native-security-defenses-for.html

Хакатон «Build for Belarus» пройдёт онлайн 14–16 августа. Участники помогут разработать технические решения для коммуникации, безопасности и поддержки пострадавших в протестах.

Сайт хакатона https://eventornado.com/event/build-for-belarus
Событие на Фейсбуке https://www.facebook.com/events/492050428325842

В Chrome 86 будет запущен эксперимент с изменением адресной строки — "Helping people spot the spoofs: a URL experiment".

В фишинге часто используют измененённые доменные имена известных сайтов, которые у обычных пользователей не вызывают подозрения. В исследовании команды Chrome 60% пользователей были введены в заблуждение, когда в URL находилось название бренда с опечаткой. Чтобы вывести адрес сайта на первый план, Chrome будет отображать в адресной строке только домен (при наведении на него курсором будет отображаться полный URL).

Если вы попадёте в эксперимент, то включить привычное отображение можно будет с помощью пункта "Always show full URLs” в контекстном меню адресной строки. Посмотреть новую фичу можно в Chrome Canary или Dev, включив флаги #omnibox-ui-reveal-steady-state-url-path-query-and-ref-on-hover, #omnibox-ui-sometimes-elide-to-registrable-domain.

#ux #chrome

https://blog.chromium.org/2020/08/helping-people-spot-spoofs-url.html?m=1

Алан Сторм опубликовал статью про асинхронные генераторы и итераторы — "Async Generators and Async Iteration in Node.js".

Асинхронные итераторы используются вместе с асинхронными генераторами, которые возвращают промисы. Они очень полезны при обработке таких операций, которые возвращают значения порциями с течением времени. Их можно использовать со стримами, при работе с асинхронными API в браузере. На сайте Deno есть пример использования асинхронных итераторов для создания простого web-сервера:

import { serve } from "https://deno.land/std@0.50.0/http/server.ts";

for await (const req of serve({ port: 8000 })) {
  req.respond({ body: "Hello World\n" });
}

Очень рекомендую почитать статью, если не приходилось работать с асинхронными итераторами ранее. В статье очень хорошо объясняется суть их работы.

#js #async

https://alanstorm.com/async-generators-and-async-iteration-in-node-js/

Ричард Фельдман — автор книги "Elm in Action" — рассказал про сдвиг парадигм программирования — "The Next Paradigm Shift in Programming".

За 50 лет существования индустрии программирование эволюционировало от использования goto до идеи отказа от сайд эффектов. Технологии и подходы достигали своего пика и медленно сходили на нет. Ричард рассказывает про то, что на данный момент ООП достигло своего пика и рано или поздно оно будет заменено новыми подходами. Доказательство этому повышенный интерес к функциональному программированию. Практически все современные языки поддерживают фичи из фп. Можно найти книги от программирования в функционально стиле в JavaScript, в C++, Java и т.п. Более того основные фичи ООП (инкапсуляция, наследование, методы) либо признаны неэффективными, либо для них есть альтернативы (модули, композиция, функции первого класса).

Очень интересный доклад. Рекомендую посмотреть.

#talk #fp #history

https://www.youtube.com/watch?v=6YbK8o9rZfI

Крис Уэллонс написал статью про устоявшиеся подходы реализации опций CLI-утилит — "Conventions for Command Line Options".

В Unix-системах есть соглашения о том, как утилиты должны обрабатывать опции. Крис пишет про то, что их следует придерживаться, если нет веских причин, чтобы это не делать.

Если опции состоят из одной буквы, то они должны следовать за знаком минус ( -a -b -c ). Если опций много, то их можно объединить ( -abc ). Если у опции есть аргумент, то его можно передать после пробела или без него ( -ifile.txt и -i file.txt одно и то же).

Также в статье разбирается логика работы с длинными опциями (GNU-style). Они должны следовать за двумя знаками минус ( --option ). Слова в опциях отделяются минусом ( --long-option ). Аргументы можно передать после пробела ( --input file.txt`) или знака равенства ( `--input=file.txt ). Иногда у опций есть взаимоисключающий аналог, который начинается с --no ( --sort, --no-sort ).

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

#cli #ux

https://nullprogram.com/blog/2020/08/01/

За последние две недели в основном канале были опубликованы посты про архитектуру, изменения в Chrome, будущее программирования и т.п. В Defront Plus за это же время были опубликованы не менее интересные статьи:

- Золотое правило работы с дженериками в TypeScript
- Вызовы портирования API web-платформы в Node.js
- Railway Oriented Programming в JavaScript
- Управление конфигами с помощью mrm
- Паттерны реактивности в современных фреймворках
- Решение проблем случайных навигаций
- Исследование безопасности кэширования в web
- Эффективная работа с историей команд в bash
- Округление границ в CSS
- Использование модулей Node.js в Deno

Присоединяйтесь к любому тиру на Patreon, чтобы получить доступ в Defront Plus. Поддерживая канал на Patreon, вы помогаете ему становиться лучше. Спасибо!

https://www.patreon.com/myshov

Эдди Османи рассказал о том, как ускорить загрузку hero-изображений — "Preload late-discovered Hero images faster".

Hero image — это термин, которым в дизайне называют главное изображение статьи. Оно обычно располагается на самом видном месте страницы. С точки зрения производительности скорость загрузки такого изображения влияет на метрику Largest Contentful Paint (LCP).

Проблема может возникнуть тогда, когда загрузка изображения происходит на позднем этапе, например, после инициализации js или после загрузки другого ресурса, в котором находится url изображения. Для улучшения LCP можно использовать preconnect или preload. Preload можно использовать с отзывчивыми изображениями:

<link rel="preload" as="image" 
     href="poster.jpg" 
     imagesrcset="
        poster_400px.jpg 400w, 
        poster_800px.jpg 800w, 
        poster_1600px.jpg 1600w" 
    imagesizes="50vw">

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

#performance #metrics

https://addyosmani.com/blog/preload-hero-images/

Компания Microsoft объявила даты прекращения поддержки браузера Internet Explorer 11 для продуктов Microsoft Teams и остальных приложений из пакета Microsoft 365, а также дату окончания поддержка Edge Legacy.

- Начиная с 30 ноября 2020 для Teams прекращается поддержка IE 11.
- Начиная с 17 августа 2021 прекращается поддержка IE 11 для остальных приложений Microsoft 365.
- После 9 марта 2021 браузер Edge Legacy перестанет получать обновления безопасности.

Рекомендуется использовать новый Edge и режим совместимости IE 11 в случае необходимости.

https://techcommunity.microsoft.com/t5/microsoft-365-blog/microsoft-365-apps-say-farewell-to-internet-explorer-11-and/ba-p/1591666

Джереми Вагнер проанализировал производительность React и Preact и альтернативный подход использования библиотек с серверным рендерингом в разных окружениях — "radEventListener: a Tale of Client-side Framework Performance".

В статье исследуется время инициализации JS-кода, время гидрации и время открытия меню на тестовом сайте. В исследование был добавлен подход с серверным рендерингом и управлением обработкой событий с помощью addEventListener. Эксперименты проводились на разных устройствах: ноутбук 2013-го года, iPhone SE, iPhone SE (2020), Nokia 2.

Из интересного. Инициализация JS-кода на ноутбуке с i5 (Ivy Bridge) было медленнее чем на iPhone SE первого поколения. Также тесты на iPhone SE показывают преимущество над бюджетным Nokia 2, который вышел на два года позже. Во всех тестах на гидрацию преимущество у Preact. Подход с серверным рендерингом и управлением обработкой событий с помощью addEventListener ожидаемо выиграл во всех тестах.

Джереми предлагает использовать серверный рендеринг и нативные браузерные API, если страница не требует сложного управления клиентским состоянием.

#performance #react

https://css-tricks.com/radeventlistener-a-tale-of-client-side-framework-performance/