Алан Сторм опубликовал статью про асинхронные генераторы и итераторы — "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 при автодополнении кода. Сайт проекта был полностью переписан.

#typescript #release

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

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

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

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

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

#javascript

https://medium.com/devschacht/javascript-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/

Сэм Торогуд из Google опубликовал статью про события загрузки в web — "Understanding Load Events on the Web".

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

Для обработки события DOMContentLoaded необходимо всегда выполнять небольшой реверанс с проверкой document.readyState. Если необходимо выполнить код скрипта после того, как будет доступен DOM, проще пометить этот скрипт с помощью defer. Единственное место, где нельзя обойтись без DOMContentLoaded, — код библиотек, так как такой код не знает был ли он загружен с помощью defer или async.

#web

https://whistlr.info/2020/understanding-load/

Вчера вышел Firefox 80. Самые интересные фичи релиза.

Была добавлена поддержка нового синтаксиса export * as ns from 'module' из ES2021 для именованного экспорта всего пространства имен модуля. Включена поддержка операций наложения эффектов друг на друга в Web Animations API: KeyframeEffect.composite и KeyframeEffect.iterationComposite. Атомарные операции в WebAssembly теперь можно использовать с неразделяемой памятью. В WebGL добавлена поддержка расширения KHR_parallel_shader_compile, которое используется для параллельной компиляции шейдеров.

Были улучшены инструменты разработчика. На панели сетевой активности медленные запросы помечаются значком черепахи. Теперь можно блокировать запросы прямо из консоли с помощью команды :block, для разблокирования нужно использовать :unblock. При возникновении исключений стектрейс ошибки можно посмотреть в тултипе проблемного исходного кода.

Из интересного для пользователей. Firefox теперь можно установить как просмотрщик pdf-документов. Была ускорена работа со списком заблокированных аддонов. Улучшение доступности для svg-элементов на страницах и элементов управления браузера.

#firefox #release

https://www.mozilla.org/en-US/firefox/80.0/releasenotes/
https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/80

В блоге APNIC была опубликована статья Мэттью Томаса про исследование повышенной нагрузки на корневые DNS-серверы интернета — "Chromium’s impact on root DNS traffic".

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

С ростом популярности браузера (сейчас на рынке он занимает более 70%) росло количество пробных запросов. Сейчас их количество приближается к половине от всего трафика к корневым серверам. Это очень большая проблема, так как такое количество трафика сравнимо с DDOS-атакой.

В багтрекере Chromium был заведён соответствующий баг, и идёт обсуждение того, что делать с пробными запросами.

#chromium #dns

https://blog.apnic.net/2020/08/21/chromiums-impact-on-root-dns-traffic/

Пару дней назад вышла новая версия Chrome. Пит Лепаж рассказал про новые фичи релиза — "New in Chrome 85".

— В JS для строк был добавлен метод replaceAll(), который облегчает замену значений в строке без использования регулярок. Была добавлена поддержка метода Promise.any(). Он возвращает промис, который резолвится в том случае, когда резолвится один из обрабатываемых промисов.

— Метод getInstalledRelatedApps() теперь поддерживает Windows. Также с его помощью можно проверить, установлено ли у пользователя в системе PWA, которое относится к просматриваемому сайту. Этот метод нужен для кастомизации лендингов и отключения информационных сообщений на сайте с призывом установить приложение.

— Появилась поддержка CSS-свойства content-visibility: auto для разделения страницы на логические куски, которые помогают ускорить рендеринг страницы.

— В рамках origin trial была добавлена поддержка передачи стримов с помощью fetch. Полезно для передачи на сервер потока генерируемого контента.

— Houdini CSS Properties могут быть заданы прямо в CSS.

— Добавлена поддержка AVIF — нового формата изображений.

— В инструментах разработчика появилась полноценная поддержка редактирования свойств, создаваемых с помощью CSSOM API. Такой подход популярен в библиотеках CSS-in-JS. Событие сервис воркера respondWith отображается в табе "Timings". Были обновлены иконки для брекпойнтов, логических брекпойнотов и логпойнтонв.

#release #chrome

https://developers.google.com/web/updates/2020/08/nic85
https://developers.google.com/web/updates/2020/06/devtools

Андрей Печкуров написал статью про внутреннее устройство Map в V8 — "[V8 Deep Dives] Understanding Map Internals".

В V8 для Map используется детерминированная хэш-таблица (deterministic hash table) — структура данных, которая гарантирует порядок обхода хранящихся в ней значений (в порядке их добавления в Map). Все данные для организации структуры данных находятся в одном большом массиве, который поделён на три логические части: заголовок, хэш-таблицу и данные. При добавлении и удалении значений из Map алгоритм периодически создаёт новую таблицу, поэтому операции вставки и удаления могут иметь временную сложность O(N). Операция извлечения данных из Map работает за O(1).

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

#internals #v8 #algorithm

https://itnext.io/v8-deep-dives-understanding-map-internals-45eb94a183df

Джейсон Миллер — автор Preact — написал статью про то, почему делегирование событий не лучше обычного addEventListener — "Event Listeners: Delegation VS Direct Binding".

Часто вокруг фреймворков возникают споры про эффективную обработку DOM-событий. С одной стороны при использовании addEventListener нужно помнить об удалении обработчиков. С другой стороны делегирование немного тяжелее, так как браузер в этом случае не может применить оптимизации как с addEventListener. Также могут возникнуть проблемы с тонким управлением событиями при использовании на одной странице нескольких фреймворков, которые используют делегирование. Но делегирование очень хорошо в тех случаях, когда есть много однотипных динамичных элементов, которые могут кинуть событие.

У всех подходов к обработке событий есть преимущества и недостатки. Не стоит противопоставлять их друг другу, а выбирать наиболее подходящее решение для текущей ситуации.

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

#jsframeworks #performance

https://jasonformat.com/event-delegation-vs-direct-binding/

Элейджа Мейнор написал небольшой пост про форматирование чисел в JS — "Natively Format JavaScript Numbers".

На сегодняшний день необязательно использовать сторонние библиотеки для форматирования чисел. Number.prototype.toLocaleString() и Intl.NumberFormat могут покрыть очень много случаев. С их помощью можно отформатировать проценты, преобразовать число в короткую форму, указать количество значащих цифр и т.п. Например, вот так можно отформатировать число для российской локали (тысячи отделяются от сотен пробелом) и добавить знак рубля:

const number = 12345;
console.log(
  number.toLocaleString('ru-RU', {
    style: 'currency',
    currency: 'RUB',
  })
);
// 12 345,00 ₽

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

#js

https://elijahmanor.com/format-js-numbers

Пока Chrome ддосит корневые DNS-сервера, Defront Plus ддосит интересными постами своих подписчиков. В канале для патронов уже было опубликовано 50 постов. Вот что там появилось за последние две недели:

- Производительность страниц 404, и как Instagram чуть не лёг из-за favicon
- Почему ::before не работает с img и input
- Какая должна быть скорость загрузки сайта?
- Пропозал создания безопасных модульных рантаймов
- Ментальные модели работы со статической типизацией
- Решение проблемы медленной загрузки файлов по HTTP/2
- Как Shopify переписал сервис и уменьшил время ответа
- Что следует учесть при миграции проекта на TypeScript
- Алгоритм сжатия Broccoli в Dropbox
- Неизвестное будущее Mozilla

Чтобы получить доступ ко всем постам Defront Plus, поддержите канал на Patreon

Хочу сказать большое спасибо всем патронам! Благодаря вам я могу поддерживать и развивать проект.

https://www.patreon.com/myshov