Вчера в рассылке Web Platform News пришёл апдейт про поддержку новых псевдоклассов — "CSS :is() and :where() are coming to browsers".

Псевдоклассы :is() и :where предназначены для написания CSS-правил без дублирования селекторов. Они отличаются между собой только специфичностью. Специфичность :is() определяется наиболее специфичным селектором, переданным в аргументах. У :where() специфичность всегда нулевая. :where() полезен для создания дефолтных правил, которые могут перекрываться другими правилами без увеличения специфичности селекторов и без использования !important.

Пример использования :is():

/* До */
.embed .button:hover,
.attachment .button:hover {
  opacity: 1;
}

/* После */
:is(.embed, .attachment) .button:hover {
  opacity: 1;
}

Поддержка новых псевдоклассов уже есть в Safari Tech Preview 106 и Firefox Beta 78. В Chrome их реализация пока находится за флагом. Для ускорения внедрения можно поставить звезду соответствующим тикетам в баг-трекере Chromium (ссылки можно найти в оригинальном посте).

#css

https://webplatform.news/issues/2020-06-04

Эдди Османи и Дэмиан Рензулли рассказали о тех случаях, когда нужно отключать предварительную подгрузку и пререндер — "What (not) to Prefetch/Prerender".

Предварительную подгрузку и пререндер не следует использовать:
— для страниц аутентификации, чтобы предотвратить разлогины, непредсказуемый сброс пароля и т.п.;
— в ситуациях когда слишком большое количество запросов может вызвать DOS;
— для страниц оформления заказа и корзины, чтобы избежать случайного добавления товаров в корзину или запуска процесса оформления заказа;
— для файлов большого размера: mp4, zip, gif, pdf. Загрузка объёмных ресурсов без ведома пользователя — это плохая практика;
— для рекламы, так как такие запросы могут привести к ложному всплеску маркетинговых показателей;
— для всех протоколов кроме http/https (tel:, mailto:, javascript: и т.п.), в зависимости от браузера, предварительная загрузка такой ссылки может непредсказуемо стригерить действие.

Рекомендую почитать статью, если используете prefetch/prerender  на своём сайте.

#performance

https://addyosmani.com/blog/what-not-to-prefetch-prerender/

Александра Сикора поделилась мыслями о проблемах статей, посвящённых разработке, — "Most tech content is bullshit".

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

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

#musings #programming

https://www.aleksandra.codes/tech-content-consumer

Орта Терокс рассказал про изменения в процессе принятия пулл реквестов в репозиторий DefinitelyTyped — "Changes to How We Manage DefinitelyTyped".

DefinitelyTyped — это один из самых крупных репозиториев на GitHub, в котором находятся TypeScript-определения для js-библиотек. Этот проект был создан сообществом, позже к процессу поддержки подключилась команда из Microsoft. Каждую неделю из команды назначается один дежурный, который помогает майнтейнерам DefinitelyTyped с мёржем открытых пулл-реквестов.

Для ускорения принятия изменений в репозиторий недавно был добавлен бот, который помогает владельцам файлов определений сливать изменения без обязательной проверки майнтейнеров. Это стало возможным благодаря покрытию тестами файлов определений. Тесты проверяют на ошибки и на деградацию производительности в IDE. Проверка со стороны майнтейнеров остаётся только для изменений файлов определений самых популярных библиотек (с 5 миллионами загрузок каждый месяц).

#typescript #announcement

https://devblogs.microsoft.com/typescript/changes-to-how-we-manage-definitelytyped/

Тут в интернете поднялся кипеш по поводу Яндекс.Маркета. Иван Вахрушев на хабре опубликовал статью "Тёмная сторона работы в Яндекс.Маркете", в ней он рассказал о своём опыте работы.

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

Я работал разработчиком интерфейсов в Маркете с 2016 по 2019 год, пилил фронт, занимался BFF на ноде, принимал участие в разработке инфраструктурных штук. В общем было весело. В октябре 2019-го позвали поработать над стартапом — зачесались руки сделать что-то абсолютно новое с нуля. Не мог не воспользоваться таким шансом и в итоге ушёл. Ни на кого в Маркете не держу зла, и, в целом, у меня остались хорошие воспоминания, хотя было по-разному. Затрону самые важные на мой взгляд темы.

В статье Ваня пишет про переработки. Это очень больная тема. С одной стороны барикад работники хотят поддерживать work-life balance, не хотят выгореть и чувствовать себя хорошо, а с другой стороны есть бизнес, которому надо, чтобы фичи пеклись как блинчики. Лично я иногда перерабатывал, мог сидеть за фичей до поздней ночи. Зачем? Потому что был дурак, а не потому что меня заставлял бизнес. Тимлид напоминал идти домой, ну а я продолжал работать. Так продолжалось очень долго, пока не стал замечать за собой странные вещи — постоянная усталость, проблемы с вниманием, импульсивность и т.п. Подумал, что это ни к чему хорошему не приведёт и решил прекратить себя мучить. Последний год работалось очень хорошо, стал более продуктивен, хотя по факту тратил меньше времени, чем раньше. Никто не предъявлял претензий за то, что ухожу домой вовремя.

По поводу дохода. это очень мутная тема, так как есть много факторов, которые надо учитывать. В целом, компенсация была достойная для Новосибирска, хотя, наверное, мог бы зарабатывать больше. Рефликсируя на эту тему, сделал вывод, что надо было просто уметь себя продавать, когда устраивался. Но не жалуюсь — за моё время работы меня несколько раз повышали. Вывод — развивайте soft skills.

Качество кода. По Кенту Беку в коде фронта Маркета в целом ок. Нет дублирования, код тестируется, используется минимальное количество необходимых сущностей. С интентом правда была иногда проблема и приходилось чесать репу, разбираясь в кишках какой-нибудь инфраструктурной либы. В целом, код Маркета был предсказуем и довольно приятен в работе.

Всё ли было идеально? Нет. Всё ли было ужасно? Абсолютно нет. Как и у любой другой компании у Яндекс.Маркета есть и преимущества, и недостатки. Имхо, в этом нет ничего удивительного. Жаль, что не у всех людей не такой опыт как у меня. Но (по моим наблюдениям изнутри) Маркет и Яндекс в целом берут на заметку негативный опыт и стараются улучшить ситуацию.

P.S. 500-ый пост в канале (это не специально).

#musings #yandex

https://defront.ru/posts/2020/06-june/09-my-experience-at-yandex-market/

Хуссейн Джирде в блоге web.dev рассказал, как можно предотвратить сдвиг контента из-за загрузки web-шрифтов — "Prevent layout shifting and flashes of invisibile text (FOIT) by preloading optional fonts".

В черновике спецификации CSS Fonts Module Level 4, есть раздел, который говорит о том, что загрузка опциональных шрифтов ( font-display: optional ) не должна приводить к перерасчёту лайаута. Браузеры в этом случае могут блокировать отрисовку страницы на небольшой промежуток времени, пока загружается необходимый web-шрифт. Чтобы избежать блокировки с версии Chrome 83, можно использовать комбинацию font-display: optional и <link rel="preload"> для загружаемого шрифта. Браузер с большой вероятностью загрузит шрифт до первой отрисовки, и в результате страница отобразится сразу с необходимым шрифтом без сдвига контента.

Так как эта фича ещё не в официальном стандарте, команда Chrome ждёт обратной связи.

#fonts #performance

https://web.dev/preload-optional-fonts/

Хочу продолжить вчерашнюю тему. Эдди Османи написал пост про решение проблем сдвига контента — "Optimize Cumulative Layout Shift".

Cumulative Layout Shift (CLS) — это метрика Web Vitals, которая измеряет нестабильность контента, складывая смещение всех элементов, которое происходит независимо от действий пользователя. То есть если на странице происходит сдвиг после пользовательского ввода, например, пользователь открыл список-аккордеон после загрузки страницы, то такое смещение не будет влиять на CLS.

Самые распространённые причины нежелательных смещений:
— изображения без заданных размеров (можно исправить добавлением атрибутов width и height );
— реклама, iframe, встраиваемый контент (можно исправить, предварительно выделив необходимое место);
— динамически добавляемые блоки — GDPR-сообщения, похожие товары и т.п. (вместо них можно использовать временные заглушки);
— web-шрифты, вызывающие FOIT/FOUT (такое смещение можно устранить с помощью font-display: optional и <link rel="preload"> ).

В свете последних новостей о том, что Google будет использовать показатели Web Vitals для ранжирования сайтов, очень советую почитать статью.

#performance #metrics

https://web.dev/optimize-cls/

Джек Арчибальд написал статью "Event listeners and garbage collection". В ней рассказывается про способ прерывания любого асинхронного API и объясняется, почему этот способ не приводит к утечкам памяти.

Все современные браузеры поддерживают отмену fetch-запросов с помощью AbortController API. В статье есть код небольшого хелпера, который позволяет использовать AbortController с любым асинхронным API:

async function abortable(signal, promise) {
  if (signal.aborted) {
    throw new DOMException('AbortError', 'AbortError');
  }
  return Promise.race([
    promise,
    new Promise((_, reject) => {
      signal.addEventListener('abort', () => {
        reject(new DOMException('AbortError', 'AbortError'));
      });
    }),
  ]);
}

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

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

#web #api

https://jakearchibald.com/2020/events-and-gc/

Крис Сейнти рассказал про фреймворк от Microsoft для создания SPA-приложений на C# — "What’s behind the hype about Blazor?".

Blazor для C#-разработчиков сейчас очень хайповая тема, потому что благодаря ему можно создавать SPA без использования JavaScript. Его архитектура состоит из двух основных частей: App/Component Model (отвечает за компонентную модель, роутинг и другие невизуальные задачи) и Renderer/Hosting Model (отвечает за обновление и отображение UI).

На данный момент есть два стабильных рендерера: WebAssembly Renderer и Server Renderer. Первый используется для создания привычных SPA-приложений (объявлен стабильным в мае этого года). Второй — для клиентских приложений, которые работают на внешнем сервере, браузер клиента в этом случае отвечает только за обновление DOM. Есть ещё два экспериментальных рендерера: для мобильных приложений (использует нативные UI-элементы) и десктопных приложений (работает поверх Electron/WebWindow).

Если всё взлетит, то Blazor в будущем может стать конкурентом React Native и Flutter.

#webassembly #frameworks

https://stackoverflow.blog/2020/02/26/whats-behind-the-hype-about-blazor/

Новости и благодарности

В этом месяце закончил большую работу — перенёс все статьи из канала на сайт defront.ru. Теперь этот сайт — официальное место обитания проекта в большом интернете. Также у проекта начинают появляться контрибьюторы. Тимур Хазамов два дня назад добавил на сайт поддержку тёмной темы.

Хочу напомнить, что у канала есть чат — @defrontchat. Присоединяйтесь! Подписывайтесь на мой твиттер https://twitter.com/myshov. Там я пишу новости и апдейты, которые иногда не попадают в канал.

Канал существует благодаря вашей поддержке на патреоне. Хочу сказать огромное спасибо моим патронам: Андрею, Артёму, bafonins, brqte, Олегу, Павлу, th1rt3nth, Роману, Сергею, Владу, Денису, Дмитрию и Сергею! Благодарю всех за то, что читаете канал и рассказываете про него своим друзьям и коллегам. Если вам нравится то, что я делаю, и хотите поддержать канал, то это можно сделать тут https://www.patreon.com/myshov.

#спасибо

Аксель Раушмайер написал статью про логические операторы присваивания — "ECMAScript proposal: Logical assignment operators".

Пропозал добавляет в стандарт новые составные операторы присваивания: a ||= b, a &&= b и a ??= b. Благодаря этим операторам можно компактно комбинировать присваивание с коротким циклом вычислений логических операций (short-circuit). Например, запись a ??= b эквивалентна выражению a ?? (a = b). В нём присваивание происходит только в том случае, когда в a находится null или undefined. Пример использования:

const books = [{
  isbn: '123',
}, {
  title: 'ECMAScript Language Specification',
  isbn: '456',
}];

// Добавление дефолтного заголовка там, где его нет
for (const book of books) {
  book.title ??= '(Untitled)';
}

assert.deepEqual(books, [{
  isbn: '123',
  title: '(Untitled)',
}, {
  title: 'ECMAScript Language Specification',
  isbn: '456',
}]);

Логические операторы присваивания находятся на третьем этапе добавления в стандарт. Его поддержка появилась в Firefox 77 Nightly, Safari Technology Preview 107, и в V8 v8.4 (Chrome 85).

#js #proposal

https://2ality.com/2020/06/logical-assignment-operators.html

Для того чтобы бандлер смог безопасно применить tree-shaking, он должен понимать, что можно удалить, а что нужно оставить. Серджио Гомес написал про это статью — "Everything you never wanted to know about side effects".

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

Чтобы tree-shaking заработал, авторы библиотек добавляют в package.json поле "sideEffects": false, если в библиотеке нет сайд-эффектов, или явно перечисляют файлы, которые нельзя удалять "sideEffects": ["a.js", "b.js"]. Также в исходном коде можно использовать хинт /*#__PURE__*/. Благодаря этому хинту бандлер понимает, что такой код не содержит сайд-эффектов, и его можно безопасно удалить.

Очень рекомендую заглянуть в статью авторам библиотек и всем, кто сталкивался с проблемами tree-shaking.

#performance #bundle

https://sgom.es/posts/2020-06-15-everything-you-never-wanted-to-know-about-side-effects/

DebugBear проанализировал влияние тысячи популярных расширений Chrome на производительность страниц и поделился результатами исследования — "2020 Chrome Extension Performance Report".

Наибольшую задержку рендеринга страницы (более 300мс) вызывают расширения Clever, Gramarly, Cash Back For Shopping. Наибольшее влияние на TTI оказывают расширения, Evernote Web Clipper, Grammarly, Avira Password Manager — они блокируют основной поток выполнения более чем на 400 мс. Интересен анализ блокировщиков рекламы. DuckDuckGo Privacy Essentials на большом новостном сайте уменьшает использование CPU с 31 секунды до 1.6 секунд. Но есть другие блокировщики, которые очень сильно увеличивают потребление CPU. Advertising Terminator тратит почти 25 секунд времени CPU на анализ страниц.

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

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

#chrome #research #performance

https://www.debugbear.com/blog/2020-chrome-extension-performance-report

Гал Шлёзингер написал статью про решение задачи FizzBuzz с помощью системы типов TypeScript без использования рантайм-кода — "Typing the Technical Interview in TypeScript".

Всё решение сводится к изобретательной эксплуатации системы типов. Для представления каждого числа используется свой тип: type _0 = 0;, type _1 = Increment<_0>; и т.п. Для сравнения типов между собой используется тип type Eq<A, B extends A> = "passes";. Для логического оператора "и" — type And<A, B> = A extends true ? (B extends true ? true : false) : false; и т.д. После добавления всех необходимых типов результат получается с помощью типа type FIZZBUZZ = FizzBuzzUpTo<_16>;. Результат можно увидеть в подсказке редактора в виде выведенного типа.

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

#typescript #fun

https://gal.hagever.com/posts/typing-the-technical-interview-in-typescript/

⚡️Официально: Генеральная Ассамблея Ecma International одобрила спецификации
ECMA262 (ECMAScript® 2020 Language Specification)
ECMA402 (ECMAScript® 2020 Internationalization API Specification)

Новое в ECMA262:
- String.prototype.matchAll
- import()
- BigInt
- Promise.allSettled
- globalThis
- for-in mechanics
- Optional chaining
- Nullish coalescing operator
- import.meta

Новое в ECMA402:
- Intl.RelativeTimeFormat
- Intl.NumberFormat Unified API
- Intl.Locale

С новым джаваскриптом! 😄

В блоге Chromium сегодня появился пост о том, какие проблемы совместимости будут исправлены в 2020 году — "Improving Chromium's browser compatibility in 2020".

В прошлом году MDN провёл опрос среди 28 тысяч разработчиков. Его цель заключалась в выявлении самых распространённых проблем, возникающих при работе с web-платформой. Больше всего голосов было отдано пунктам про поддержку старых браузеров, про устаревшую документацию и про совместимость между браузерами.

Команда Chromium выделила несколько направлений работы для исправлений проблем совместимости. Будет переработана имплементация flexbox, она будет перенесена на новый layout-движок LayoutNG. Это позволит добавить поддержку gap, row-gap, column-gap и исправить проблему с flex и fieldset. Также на новый движок будет перенесены гриды, над этим уже работает команда Edge. В ходе переноса планируют добавить поддержку subgrid. Будут работать над исправлением проблем поведения прокрутки контента. Будут изучать вопрос стилизации стандартных элементов управления форм и исправлять их проблемы совместимости, но пока без конкретных анонсов.

#chromium #announcement

https://blog.chromium.org/2020/06/improving-chromiums-browser.html

Матиас Бус написал статью про исправление проблем производительности в Node.js web-фреймворке Hapi — "Hapi: A Performance deep-dive".

Матиас рассказывает про полный цикл поиска и устранения проблем производительности. В самом начале он подготавливает бенчмарк с помощью библиотеки autocannon. Затем были найдены куски кода, которые инициировали вызовы кода нативных библиотек. На горячих участках кода интероп между JavaScript и нативным кодом вызывает падение производительности. Для решения этой проблемы функции, приводящие к вызову нативного кода, были обернуты в геттеры. Была изменена логика инициализации плагинов, чтобы не выполнялась лишняя работа на каждый запрос к серверу. С помощью инструмента Clinic.js была обнаружена проблема с async-функциями. На данный момент V8 не очень хорошо оптимизирует код с async/await, поэтому не рекомендуется использовать async-функции на горячих участках кода. После внесения всех исправлений производительность Hapi улучшилась на 30%.

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

#nodejs #performance

https://www.nearform.com/blog/hapi-a-performance-deep-dive/

Кроме npm и yarn существует ещё другой малоизвестный пакетный менеджер — pnpm. Эндрю Спрус написал статью "Why we switched from Yarn to pnpm", в которой рассказал, почему они для своего проекта выбрали именно pnpm.

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

После оценки возможных решений с помощью yarn 2, lerna и pnpm решили остановиться на последнем варианте. Он позволяет устанавливать пакеты рекурсивно и выполнять работу над подгруппой пакетов с помощью флага --filter.

Интересная статья. Кстати, там упоминается, что pnpm используют в Microsoft.

#package #js

https://www.takeshape.io/articles/why-we-switched-from-yarn-to-pnpm/

Глеб Бахмутов рассказал про визуальное тестирование с помощью Cypress — "Visual testing for React components using open source tools".

В качестве примера в статье была взята игра судоку, написанная на React. Для тестирования компонентов использовалась библиотека cypress-react-unit-test. Для визуального тестирования (сравнения скриншотов компонентов) — cypress-image-snapshot.

В статье есть примеры использования Cypress для мока модулей и таймеров. Есть очень подробный пример настройки визуального тестирования. Из-за особенностей рендеринга скриншоты одного и того же компонента будут разными в зависимости от версии браузера и операционной системы. Чтобы обойти эту проблему можно настроить процент, на который разрешено отличаться сравниваемым изображениям. Это хороший подход, но потенциально он может пропускать дефекты. Для надёжной генерации скриншотов в статье разбирается способ с использованием docker. В нём для генерации скриншотов используется точно такой же контейнер, какой работает в CI-системе.

Советую заглянуть в статью, если планируете добавить в свой React-проект визуальное тестирование.

#react #testing

https://glebbahmutov.com/blog/open-source-visual-testing-of-components/

Сандрина Перейра опубликовала статью про гибридный подход к кастомизации <select> — "Striking a Balance Between Native and Custom Select Elements".

В начале статьи есть небольшой экскурс в нейминг компонентов, реализующих поведение <select>: Menu, Navigation, Select. Последний используется для создания выпадающих списков, именно про него рассказывается в статье.

Для создания доступного и кастомизированного <select> Сандрина предлагает использовать два элемента: визуальный со всеми стилями и нативный, который доступен с клавиатуры и в скринридерах. Переключение между ними происходит с помощью медиа-выражения @media (hover: hover):

@media (hover: hover) {
  .selectCustom {
    display: block;
  }

  .selectNative:focus + .selectCustom {
    display: none;
  }
}

Этот подход был успешно протестирован в Chrome 81, Firefox 76, Safari 13 среди пользователей, использующих технологии доступности.

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

#css #a11y

https://css-tricks.com/striking-a-balance-between-native-and-custom-select-elements/