В техническом блоге 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/

Недавно Adobe объявила о прекращении поддержки PhoneGap — инструмента для разработки кроссплатформенных мобильных приложений на базе web-технологий. В официальном анонсе компания пишет о том, что PhoneGap больше неактуален, так как он может быть заменен PWA. Пользователям PhoneGap предлагается мигрировать на форк PhoneGap — Apache Cordova.

Максимилиано Фиртман провёл анализ возможностей PWA и сравнил их с текущей версией PhoneGap — "Is the Phone Gap closed in 2020?"

PhoneGap был популярен 10 лет назад, когда на рынке существовало много платформ: iOS, Android, WebOS, Bada, Ubuntu Touch, Symbian, Windows Phone и т.п. К 2020 году остались только две популярные платформы: iOS и Android. Но несмотря на то что многие возможности PhoneGap могут быть покрыты PWA (работа оффлайн, доступ к приложению с домашнего экрана), всё ещё есть API, которые недоступны для web-приложений (информация о устройстве, доступ к контактам (iOS). Ситуация усугубляется ещё тем, что разные платформы поддерживают разный набор API. Лучше всего дела обстоят у Android, у iOS поддержка PWA слабее.

#mobile #pwa

https://firt.dev/phonegap-end/

Вчера вышла новая версия TypeScript. Дениэл Розенвассер рассказал про все новинки релиза — "Announcing TypeScript 4.0".

Были добавлены вариативные типы кортежей (Variadic Tuple Types). Благодаря им возможно типизировать операции высокого порядка над кортежами и массивами, когда неизвестны типы значений.

Появилась поддержка меток для элементов кортежей (Labeled Tuple Elements): type Range = [start: number, end: number];. Использование меток упрощает поддержку кода, так как они делают намерение разработчика более очевидным.

В новой версии TypeScript появилась поддержка вывода типов для членов классов на основе анализа кода конструктора, когда включён noImplicitAny.

Добавлена поддержка составных операторов присваивания для логических операций: a ||= b, a &&= b и a ??= b (Short-Circuiting Assignment Operators). Благодаря этим операторам можно компактно комбинировать присваивание с коротким циклом вычислений логических операций.

В try/catch блоке теперь можно указать тип unknown для catch. Это делает код безопаснее, потому что разработчик в таком случае должен явно сделать необходимые проверки перед использованием catch-значения.

Теперь возможно указать свою JSX-фабрику для Fragment с помощью опции jsxFragmentFactory. Также можно использовать прагму /** @jsxFrag */ для указания фабрики в пределах одного файла.

Есть ломающие изменения. Операнды для delete должны быть опциональными. Переопределние акцессоров свойствами и наоборот теперь будет приводить к ошибке. Был изменён lib.d.ts. Наиболее заметное изменение — удаление document.origin.

Много изменений и улучшений в экосистеме TypeScript. Улучшена работа автоимпортов для только что установленных пакетов. Ускорена работа инкрементальной сборки. Редакторы могут использовать JSDoc /** @deprecated */ для отметки устаревших API при автодополнении кода. Сайт проекта был полностью переписан.

#typenoscript #release

https://devblogs.microsoft.com/typenoscript/announcing-typenoscript-4-0

Сергей Ufocoder написал статью про приведение типов в JavaScript — "Насколько JavaScript сильный?".

Слабая система типов JavaScript стала источником большого числа шуток и недопониманий. Но насколько она слаба и можно ли её усилить? В статье проводится исследование неявных преобразований типов в JavaScript. Разбираются все возможные варианты приведений. Рассказывается, в каких случаях можно "усилить" систему типов. В статье есть очень много отсылок к спецификации с несложными объяснениями.

Вот некоторые выводы из статьи. Из 40 возможных приведений типов есть 3 контролируемых преобразования, 5 явных приведений, 9 преобразований типов невозможны (здесь JS проявляет свою строгость) и 23 неконтролируемых приведения типов.

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

#javanoscript

https://medium.com/devschacht/javanoscript-coercions-9a36505c1370

Себастиен Лорбер из Facebook написал статью про то, какие преимущества даёт пропозал Records & Tuples для React-приложений — "Records & Tuples for React".

Предложение Records & Tuples добавляет новые иммутабельные структуры данных в JS. Записи и кортежи особенно полезны для React, так как много проблем с производительностью и поведением библиотеки связано с устойчивостью ссылок на объекты (object identities). Некорректное использование литералов объектов в пропсах может привести не только к проблемам с производительностью, но и в некоторых случаях к бесконечным загрузкам данных.

В статье разбирается очень много случаев того, как новый пропозал позволяет упростить React-код. Есть немного размышлений по поводу того, как кортежи и записи могут быть использованы вместе с TypeScript.

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

#react #proposal #performance

https://sebastienlorber.com/records-and-tuples-for-react

Томас Штайнер рассказал про Local Font Access API — экспериментальное API для доступа к шрифтам, которые установлены в системе пользователя.

Это API решает несколько проблем. Текущие возможности web'а не позволяют получить доступ к низкоуровневой информации о шрифтах, что критично для профессиональных средств для дизайна. Без этих данных невозможно применять векторные фильтры к шрифтам или менять форму глифов. Local Font Access API предоставляет доступ к этим данным. Также лицензии некоторых шрифтов разрешают их использование, но без разрешения распространять их через web. Доступ к такому шрифту может быть получен с помощью этого API.

На данный момент Local Font Access API доступен только в Chrome за флагом #font-access. Разработчики призывают попробовать поработать с новым API и поделиться своим фидбеком.

#fonts #experimental

https://web.dev/local-fonts/