Корри Хаус — известный спикер в React-сообществе — поделился своим пятилетним опытом работы с React — "Lessons learned from 5 years in React".

Документ содержит 63 пункта про работу с компонентами, JSX, про управление состоянием приложения, производительность, переиспользование компонентов и их тестирование. Есть пара пунктов, которые хочется выделить. Не используйте во всех компонентах без исключения useMemo, shouldComponentUpdate, PureComponent. Используйте их только там, где они нужны. Если бы их использование не несло дополнительные накладные расходы, они были бы включены по умолчанию. Если есть в этом смысл, используйте в своих компонентах имена, которые используются в Web-платформе (`onBlur`, onChange и т.п.). Используйте as как пропс для модификации типа верхнеуровневого элемента.

Есть в списке пара пунктов, которые у меня вызвали вопросы. Например, полный отказ от тестирования снепшотами. Вместо них Корри предлагает использовать Percy или Chromatic. Это очень жёсткая позиция. Проблема со снепшотами возникает только тогда, когда их очень много. Если для компонента создаётся один снепшот, то этого вполне достаточно для отлавливания непреднамеренного изменения кода.

Как бы то ни было, если вы работаете с React, очень рекомендую посмотреть документ.

#react #list #experience

https://www.dropbox.com/s/tsid5bnphznbvjv/

Разработчики портала Telegraph рассказали про свой опыт оптимизаций на фронтенде — "Improving third-party web performance at The Telegraph".

Основная особенность большинства новостных порталов — большое количество сторонних рекламодателей, код которых необходимо добавлять на страницу. В начале пути ускорения проекта разработчики поставили всем загружаемым скриптам атрибут defer, что позволило ускорить скорость отрисовки сайта на 3 секунды. Также пишут о том, что основная проблема при решении проблем с производительностью была не в технологиях, а в устоявшихся организационных процессах. В итоге они создали рабочую группу, куда пригласили участников со всех подразделений (маркетинг, коммерция, реклама). Собираются вместе два раза в месяц, где обсуждают проблемы производительности и ищут способы их решения.

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

#performance #experience

https://medium.com/the-telegraph-engineering/improving-third-party-web-performance-at-the-telegraph-a0a1000be5

Где-то месяц назад в канале был пост про статью "Text Rendering Hates You" Алексис Бинжесснер. Недавно Роберт Лорд как дополнение к статье Алексис поделился своим опытом работы над вводом текста — "Text Editing Hates You Too".

Роберт на протяжении своей карьеры много работал над вводом текста, разрабатывал протокол для ввода текста в Google Fuchsia (новая операционная система Google). Он столкнулся с большим количеством проблем, которые остаются незамеченными для большинства пользователей. Например, позиция курсора не может быть точно определена при переносе текста на новую строку и перемещении курсора ввода текста в место разрыва. Для решения этой проблемы у курсора есть специальный бит "affinity" (близость), который говорит о том, к какой строке он принадлежит. С модификаторами emoji тоже есть проблемы. В статье описывается баг приложения TextEdit в macOS. Если добавить новую строку и первым символом в строке ввести модификатор цвета кожи, то курсор больше не сможет попасть в начало строки, так как модификатор будет применяться к символу переноса строки.

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

#internals #softwaredesign

https://lord.io/blog/2019/text-editing-hates-you-too/

Cloudflare, Facebook и Mozilla анонсировал поддержку нового расширения TLS — Delegated Credentials.

Клиенты Cloudflare для использования всех возможностей провайдера должны передавать провайдеру свои приватные ключи. У Facebook похожая проблема — для того чтобы пользователи смогли подключиться к сайту по https, на всех серверах должна находиться копия приватного ключа. Это большая проблема, так как компроментация сервера Cloudflare автоматически компроментирует клиентов. Компроментация одного сервера Facebook, автоматически компроментирует безопасность соединения всех серверов.

Для решения этой проблемы разрабатывается новое расширение TLS — Delegated Credentials (DC). Особенность DC заключается в генерации приватных ключей, которые могут быть валидными не более семи дней. Эти ключи пушатся на сервер владельцем сертификата, предоставляя возможность внешнему серверу устанавливать соединение от имени владельца сертификата. Такой подход помогает минимизировать риски безопасности. У Cloudflare есть подобное проприетарное решение — Keyless SSL, но оно не такое надёжное как DC.

На данный момент DC — работает в экспериментальном режиме, поддержка среди браузеров есть только в Firefox (за флагом). Тем не менее очень здорово видеть, когда компании объединяются для решения общих проблем.

#announcement #security

https://blog.cloudflare.com/keyless-delegation/

На CSS-Tricks недавно была опубликована интересная статья Альвара Монторо про получение случайных чисел с помощью чистого CSS — "Are There Random Numbers in CSS?"

Суть трюка такая. Есть несколько элементов radio и соответствующих им label. Все лейблы накладываются друг на друга, чтобы в каждый момент времени кликабельным был только один элемент. C помощью CSS-анимации запускается цикл смены лейблов. С точки зрения пользователя неизвестно, какой лейбл сейчас находится на самом верху, поэтому при клике на лейбл получаемое значение выглядит случайным.

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

#css #trick

https://css-tricks.com/are-there-random-numbers-in-css/

В блоге 2ality Аксель Раушмайер написал статью про атрибуты свойств объектов — "Attributes of object properties in JavaScript".

В спецификации ECMAScript объекты описываются с помощью internal slots (хранилище, которое используется только на уровне спецификации) и с помощью properties (старые-добрые свойства объектов). С каждым свойством объекта, ассоциирован ключ и атрибуты ( value, writable, configurable, enumerable и т.п.). Для работы с атрибутами используются методы defineProperty, defineProperties, getOwnPropertyDenoscriptor, getOwnPropertyDenoscriptors.

В статье описывается несколько неочевидных особенностей работы с объектами. Например, если объект наследует read only свойство, то у дочернего объекта нельзя создать свойство с таким же именем. Для того чтобы сделать копию объекта, в котором есть геттер и сеттер, нужно использовать методы Object.defineProperties и Object.getOwnPropertyDenoscriptors. Object.assign для этого случая не подходит, так как под капотом он использует присваивание, поэтому в новом объекте будет результат геттера, но не функция, которая его определяет.

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

#js #specification

https://2ality.com/2019/11/object-property-attributes.html

Пару дней назад команда Edge опубликовала статью про то, как подготовиться к стабильному релизу нового браузера на движке Chromium — "Getting your sites ready for the new Microsoft Edge".

Четвёртого ноября был опубликован релиз кандидат Edge. Официальной стабильный релиз запланирован на 15 января 2020 года. Разработчики рекомендуют добавить прогон тестов в свежем браузере. Edge полностью совместим с Selenium-тестами, которые были написаны для Chromium-based браузеров. Можно использовать Puppeteer для автоматизации тестирования. Также можно запустить браузер в режиме совместимости с IE11, для прогона тестов в этом режиме нужно использовать Selenium-драйвер IEDriverServer. Ещё разработчики призывают отправлять фидбеки, если возникают проблемы. Пишут, что на данный момент получили более 230 тысяч сообщений о проблемах.

#announcement #edge

https://blogs.windows.com/msedgedev/2019/11/04/edge-chromium-release-candidate-get-ready/

Джозеф Савона — разработчик Relay и GraphQL из Facebook — написал статью про подходы к улучшению UX с помощью Сoncurrent Mode — "Building Great User Experiences with Concurrent Mode and Suspense".

Автор пишет, что воспринимаемая производительность приложения улучшается не только благодаря ускорению старта приложения, но и за счёт уменьшения количества состояний загрузки приложения и меньшего количества изменений в layout. Так показали внутренние UX-исследования в Facebook.

Недавно на конференции ReactConf был анонсирован релиз экспериментального конкурентного режима в React, который как раз помогает улучшить воспринимаемую производительность за счёт тонкой оркестрации загрузки кода приложения и данных. В статье разбирается пример, как они реализовали это с помощью Relay и GraphQL. Подобный подход может быть реализован с использованием традиционного REST API, в статье есть ссылка на пример от Дэна Абрамова.

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

#react #experimental #ux

https://reactjs.org/blog/2019/11/06/building-great-user-experiences-with-concurrent-mode-and-suspense.html

Инженеры из Shopify рассказали про свой опыт улучшения производительности SPA — "Want to Improve UI Performance? Start by Understanding Your User".

Основная идея статьи заключается в том, что при оптимизации приложения в первую очередь нужно думать о потребностях пользователей. Например, их пользователи — это продавцы, которые могут работать с разных устройств, при этом они пользуются некоторыми функциями приложения чаще чем другими. В первую очередь с помощью обычного профилировщика и профилировщика из React Dev Tools они собрали метрики приложения на слабом смартфоне. Эти данные им позволили определить компоненты, которые работали дольше других. Размер загружаемого JS заставил задуматься о ленивой загрузке тех компонентов, которые используются редко. В итоге сделанные оптимизации позволили не только ускорить загрузку кода, но и ускорить выполнение наиболее популярных пользовательских сценариев.

Статья хорошая. Рекомендую почитать, если интересно узнать как перформанс может влиять на пользовательский опыт.

#performance #ux #react

https://engineering.shopify.com/blogs/engineering/improve-ui-performance-understanding-your-user

На этой неделе вышла новая версия TypeScript 3.7 с большим количеством фич.

Добавили поддержку Optional Chaining. В release notes есть хорошее именование разных типов Optional Chaining, которое я нигде раньше не встречал: optional property accesse для foo?.bar, optional element access для arr?.[0] и optional call для method?.(). Также добавили Nullish Coalescing ( ?? ), которое призвано заменить использование || для определения дефолтных значений.

Улучшили поддержку уточнения типов после использования функций assert. Для этого была добавлена новая концепция assertion signatures. При реализации этой фичи улучшили поддержку функций, которые возвращают never.

Крутая новая фича — продвинутая поддержка рекурсивных типов. Раньше такой алиас type ValueOrArray<T> = T | Array<ValueOrArray<T>>; вызвал бы ошибку. С версии 3.7 это корректная конструкция. Теперь можно компактно описывать рекурсивные структуры данных. Вот пример для JSON:

type Json =
    | string
    | number
    | boolean
    | null
    | { [property: string]: Json }
    | Json[];

В релизе есть ломающие изменения. Обновили типы для lib.dom.d.ts. Поля классов при транспиляции теперь преобразуются в конструкции Object.defineProperty(). Если функция находится в операторе if и она не вызывается, это будет приводить к ошибке.

Улучшили совместимость между ts и js. Поменяли механизм работы с project references. Форматтер теперь может удалять или, наоборот, при необходимости автоматически добавлять символ точки с запятой.

#typenoscript #release

https://www.typenoscriptlang.org/docs/handbook/release-notes/typenoscript-3-7.html

Случайно увидел статью 2016 года Эрика Эллиота про когнитивную работу мозга программистов — "Are Programmer Brains Different?".

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

Как-то не задумывался над этим, но сходу могу вспомнить много людей, кто умеет играть на музыкальных инструментах и программирует. Более того в Яндексе и 2ГИС чуваки собираются в группы и играют музыку на вечеринках.

#programming #psychology

https://medium.com/javanoscript-scene/are-programmer-brains-different-2068a52648a7

Франк Форс у себя в блоге разобрал эффект 3D-тоннеля, код которого умещается в 140 символов, — "Dissecting A Dweet #8: Shattered Tunnel".

Этот эффект — идейное продолжение демо "Strange Сrystals", которое в 2013 году заняло первое место на конкурсе JS1k (соревнование среди демок, которые умещаются в 1024 байт). Из статьи узнал, что canvas.width = canvas.width используют для очистки canvas. Этот хак работает благодаря тому, что при присваивании любого значения размера canvas, происходит его инвалидация. В конкурсах, подобных JS1k, этот код сокращают до canvas.width |= 0, но этот хак не рекомендуют использовать в серьёзных проектах.

Статья интересная. Рекомендую почитать, если интересуетесь графикой и code golf.

#graphics #math #js

http://frankforce.com/?p=7160

В блоге Акселя Раушмайера пару дней назад появилась статья про использование асинхронных итераторов со стримами в Node.js — "Easier Node.js streams via async iteration".

Код, который агрегирует поступающие данные из readable stream или, наоборот, записывает данные во writable stream может быть записан компактно, используя возможности асинхронных итераторов (ES2018). Вот пример из статьи. В нём с помощью конструкции for await ... of считывается текст из readable stream и записывается в переменную result:

async function readableToString(readable) {
  let result = '';
  for await (const chunk of readable) {
    result += chunk;
  }
  return result;
}

Выглядит очень элегантно. В статье ещё есть хороший пример трансформации стримов с помощью асинхронных генераторов.

В общем, рекомендую почитать, даже если не работаете много с Node.js.

#js #nodejs #async

https://2ality.com/2019/11/nodejs-streams-async-iteration.html

HTTP Archive опубликовал очень крутой альманах про web в 2019 году — "Web Almanac 2019".

Web Almanac — это подборка отчётов, посвящённых разным web-технологиям и темам: JavaScript, CSS, HTML, производительность, безопасность, a11y, seo, мобильный web и т.п. В проекте участвовало 85 человек, каждый из которых является экспертом в своей области — Рик Вискоми, Матиас Байненс, Эрик Мейер, Марк Ноттингем, Эдди Османи и другие.

Бегло посмотрел статьи — инфы очень много. Будет чем заняться на выходных.

#report #web

https://almanac.httparchive.org/en/2019/

Матиас Байненс в блоге v8 опубликовал небольшой пост про новый метод строк replaceAll.

Для того чтобы заменить все вхождения подстроки в JS, нужно использовать String.replace с глобальным регулярным выражением в первом аргументе: 'aabbcc'.replace(/b/g, '_'). Более того, надо помнить про эксейпинг специальных символов, например, для замены всех символов + надо использовать выражение 'a+b+c'.replace(/\+/g, ''). Это не очень удобно.

Для решения этой проблемы в следующем стандарте ECMAScript запланировано добавление нового метода String.replaceAll. С его помощью последний пример может переписан так: 'a+b+c'.replaceAll('+', ''). Для консистентности с replace первым аргументом можно передавать регулярное выражение, но оно обязательно должно быть глобальным.

На данный момент String.replaceAll находится на третьем этапе добавления в стандарт. Пока его поддержка есть только в v8 за экспериментальным флагом.

#tc39 #js

https://v8.dev/features/string-replaceall

На прошедшем Chrome Dev Summit Google представил Web Bundles — новый механизм для распространения web-приложений.

Представьте, что любое web-приложение можно положить на флешку, поделиться им по Bluetooth или захостить в своей локальной сети. Всё это становится возможным благодаря Web Bundles (формальное название Bundled HTTP Exchanges), которые являются частью предложения добавления в стандарт «Web Packaging». Предполагается, что запаковать можно будет любое приложение или сайт. В статье "Get started with Web Bundles" разбирается пример создания бандла для небольшого todo-приложения.

На данный момент экспериментальная поддержка Web Bundles есть только в Chrome 80 (Canary). Разработчики призывают потестировать новую фичу и поделиться своим фидбеком.

#future #web #offline

https://web.dev/web-bundles/

Недавно на сайте web.dev появился раздел, посвящённый метрикам производительности. Насколько я понял, этот раздел собран из новых статей и из уже существовавших с небольшими правками.

Сейчас там можно найти описание всех пользовательских метрик. Каждой метрике посвящена отдельная статья: First Contentful Paint (FCP), Largest Contentful Paint (LCP), First Input Delay (FID), Time to Interactive (TTI) и т.п. Есть практические советы по улучшению этих метрик. Появилась статья про Custom Metrics — в ней рассказывается про использование User Timing API (позволяет замерять временные метрики), Long Tasks API (для выявления проблем с блокированием главного потока JS), Element Timing API (используется для определения времени появления на странице конкретных элементов).

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

#performance #metrics

https://web.dev/metrics/

В последнем подкасте HTTP 203 Джек Арчибальд и Сурма рассказали, почему из спецификации HTTP Modules была удалена возможность импорта JSON-файлов.

В Node.js есть возможность зареквайрить json в JavaScript-файл. Это очень удобно, если нужно зафолбечиться на какие-то данные в случае проблем с API или просто для чтения конфигов. Похожий механизм импортов был предложен для добавления в web-платформу в спецификации HTTP Modules: import json from 'some.json'. Проблема в том, что в web расширение файла не влияет на интерпретацию загружаемых данных, тип ресурса определяется HTTP-заголовком content-type. Это означает, что если мы импортируем json с чужого домена import json from 'https://example.com/some.json' и если этот сайт будет компроментирован таким образом, что вместо application/json в заголовке будет отправляться application/javanoscript, это открывает дыру в безопасности, так как содержимое json-файла может быть заменено на любой JavaScript-код. Теперь разработчики спецификации думают над тем, как добавлять метаинформацию на уровне модульной системы, чтобы избавиться от таких случаев.

Webpack решает проблему с метаинформацией, добавляя свои расширения в спецификатор импорта. Разработчики Rollup и Parcel тоже размышляют над этой проблемой. В любом случае код может получиться непереносимым между бандлерами, если все будут работать над этой задачей независимо. Таким образом решение возникшей проблемы в импорте json на уровне спецификации, позволит унифицировать использование метаинформации и в бандлерах.

#esm #security #specification

https://www.youtube.com/watch?v=jG7VfbqqTGw

На CSS-Tricks Артём Денисов написал про производительность JAM-сайтов — "A Look at JAMstack’s Speed, By the Numbers".

Под понятием JAMstack (JavaScript, APIs, Markdown) понимаются статически генерируемые сайты. В отличие от традиционных сайтов, построенных с помощью CMS, все страницы JAMstack-сайтов генерируются на этапе сборки чаще всего из Markdown-файлов. Этот подход в последнее время набирает большую популярность. В статье сравниваются метрики TTFB, FCP и FID для среднестатистических сайтов, CMS- и JAMstack-сайтов. Последние (при условии использования CDN) показывают наибольшую производительность.

В статье есть хорошая мысль по поводу производительности: "Мне встречались клиенты, которые требовали поддержку IE10 и IE11, потому что этими браузерами пользовался один процент пользователей, что эквивалентно миллионам долларов выручки. Пожалуйста, подсчитайте свои потери, когда один процент пользователей уходит с сайта и никогда не возвращается из-за плохой производительности. Если пользователи страдают, будет страдать и бизнес".

#performance #metrics #jamstack

https://css-tricks.com/a-look-at-jamstacks-speed-by-the-numbers/

Мануэль Матузович написал хорошую статью про проблемы автоматического тестирования доступности — "Building the most inaccessible site possible with a perfect Lighthouse score".

В статье рассказывается, как написать недоступный сайт, который будет выбивать в Lighthouse 100%. Для этого автор поэтапно делает html-страницу нечитабельной, недоступной для скринридеров, с неработающим режимом чтения в браузерах, не реагирующей на клики мыши и на нажатие клавиш клавиатуры. Каждое изменение не влияет на 100% показатель доступности в Lighthouse. Этим всем Мануэль доказывает, что полагаться только на инструменты автоматического тестирования доступности нельзя, их надо обязательно дополнять ручными проверками.

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

#a11y #lighthouse

https://www.matuzo.at/blog/building-the-most-inaccessible-site-possible-with-a-perfect-lighthouse-score/
https://habr.com/ru/post/455016/ (перевод)