Майкл Шарналь недавно написал статью про исправление отображения фотографий в браузере, если они были сняты в портретной ориентации — "Image orientation on the web".

Информация о том, как был повёрнут фотоаппарат во время съёмки, находится в EXIF-данных изображения. Для того, чтобы изображение отображалось корректно, надо чтобы браузер прочитал эту информацию и повернул изображение. В Firefox для этого используется CSS-свойство image-orientation: from-image , в Safari изображение поворачивается автоматически, если есть EXIF-данные. Рабочая группа CSS решила, что последний вариант лучший и объявила image-orientation: from-image deprecated.

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

Статья хорошая. Читать стоит, если работаете с загружаемым контентом пользователей.

#image #nodejs

https://justmarkup.com/articles/2019-10-21-image-orientation/

В посте про релиз Firefox 70 был интересный пункт про то, что в display появилась поддержка значений, состоящих из двух ключевых слов. Рейчел Эндрю на Mozilla Hacks написала статью про это нововведение — "The two-value syntax of the CSS Display property".

Правила, которые определяют распределение элементов на странице, задаются с помощью контекста форматирования (Formatting Context), которое, в свою очередь, можно установить с помощью свойства display. Например, Flex Formatting Context устанавливается с помощью декларации display: flex. Но это ещё не всё. Спецификация CSS определяет поведение самого блока и его потомков. В примере выше <div>, у которого будет выставлен display: flex, будет иметь блочный тип относительно своих соседей в нормальном потоке документа, но у потомков будет задан Flex Formatting Context. То есть у блока существует внешний (для нормального потока документа) и внутренний (для потомков) типы отображения. Обновлённая спецификация для display теперь явно описывает эту особенность. Например, display: flex эквивалентно display: block flex, а display: inline-flex — display: inline flex.

На данный момент поддержка комбинированных значений есть только в Firefox 70. В любом случае, рекомендую почитать статью или хотя бы посмотреть на таблицу соответствий новых и старых значений display.

#css #specification

https://hacks.mozilla.org/2019/10/the-two-value-syntax-of-the-css-display-property/

Ребята из Microsoft в блоге на хабре опубликовали небольшой пост про модернизацию контролов нового Edge — "Улучшение элементов управления в Microsoft Edge на Chromium".

После перехода на кодовую базу Chromium разработчики Edge сфокусировали своё внимание на элементах управления, потому что Windows работает на разных устройствах с разными способами ввода. Например, очень сильно был изменён контрол ввода времени: вместо небольшого текстового поля с маленькими спиннером, теперь при клике/тапе на контрол будет появляться некоторое подобие календаря, но для работы со временем. В итоге совместной работы с командой Chrome были доработаны поля ввода, элемент выбора цвета, чекбокс, выпадающий список и другие элементы. Ещё были обновлены маппинги элементов управления, для улучшения работы скринридеров и других асисстивных технологий.

В комментариях разработчиков ругают за то, что они "перекрашивают кнопки". Я же считаю, что они занимаются хорошим делом. В итоге их труды по улучшению доступности элементов управления будут доступны во всех Chromium-based браузерах.

https://habr.com/ru/company/microsoft/blog/472268/

#edge #a11y

Аксель Раушмайер написал у себя в блоге статью про проблемы с разделяемым изменяемым состоянием и способы их решения — "The problems of shared mutable state and how to avoid them".

Если один и тот же объект, массив или другая структура изменяется в нескольких местах программы, то это может приводить к неприятным багам. Для предотвращения таких проблем часто используют защитное копирование (Defensive copying), недеструктивное изменение данных и иммутабельные данные. В статье описываются все эти подходы.

Забавно, что буквально перед тем как начать статью, я сидел и пробовал вспомнить все способы ограничения доступа к свойствам объекта. Вспомнил только про Object.freeze и Object.seal. В статье нашёл третий забытый метод — Object.preventExtensions.

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

#js #immutability

https://2ality.com/2019/10/shared-mutable-state.html

Наткнулся в твиттере на отличный тред Криса Ачарда про DNS — "DNS Record crash course".

Если вам приходилось работать с доменными именами, то скорее всего вы знаете про существование DNS-записей A, AAAA, CNAME, MX и т.п. В треде Крис очень кратко рассказывает про назначение этих записей и их особенности. Например, если был определён CNAME для поддомена, тогда не получится определить другие запись для того же самого поддомена.

Очень рекомендую почитать тред — там всё написано без воды и по делу. Must read для тех, кто только начинает заниматься web-разработкой.

#dns #backend

https://twitter.com/chrisachard/status/1188870256971915265?s=20

Корри Хаус — известный спикер в 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, getOwnPropertyDescriptor, getOwnPropertyDescriptors.

В статье описывается несколько неочевидных особенностей работы с объектами. Например, если объект наследует read only свойство, то у дочернего объекта нельзя создать свойство с таким же именем. Для того чтобы сделать копию объекта, в котором есть геттер и сеттер, нужно использовать методы Object.defineProperties и Object.getOwnPropertyDescriptors. 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. Форматтер теперь может удалять или, наоборот, при необходимости автоматически добавлять символ точки с запятой.

#typescript #release

https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-7.html

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

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

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

#programming #psychology

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