Недавно Иван Немытченко сделал небольшой сайт, посвящённый make — makefile.site.

Есть распространённое заблуждение, что make используется только для сборок программ, написанных на C. На самом деле его можно использовать как раннер разных задач. Например, часто в больших проектах его используют для упрощения запуска проекта в режиме отладки, запуска тестов, сборки проекта и многого другого.

На сайте человеческим языком объясняются принципы работы make. Читать эту документацию гораздо проще чем официальную man страницу. На данный момент ещё не всё дописано, но самое важное уже есть. Рекомендую посмотреть.

#doc #tool

makefile.site

Сегодня двенадцатая версия Node.JS получила официальный статус LTS (12.13.0). LTS релиз поддерживается 30 месяцев, обычные версии — 6 месяцев. Я пропустил анонс прошлого релиза 12.12.0, который состоялся 10 октября, поэтому перечислю самые интересные нововведения нового релиза и 12.12.0.

В LTS релизе npm был обновлён до версии 6.12.0. Эта версия включает node-gyp, который поддерживает Python 3 для сборки нативных модулей.

Добавлен флаг --force-context-aware для предотвращения загрузки нативных модулей, которые не могу быть одновременно использованы в разных воркерах в рамках одного процесса ("Context Aware"). Новый флаг позволяет явно накладывать ограничения на используемые модули в Electron и других встраиваемых окружениях.

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

В модуле fs был добавлен opendir, с помощью которого можно асинхронно получить элементы директории. Этот метод очень полезен при чтении директорий с очень большим количеством элементов внутри.

Продолжается процесс внедрения поддержки source maps. Появился флаг --enable-source-maps для включения source maps в стектрейсах.

В модуле tls исправлен баг с опцией pauseOnConnect. Добавлена возможность использования HSM (Hardware Security Module) для получения доступа к приватным ключам.

Метод process._tickCallback объявлен deprecated.

#nodejs #release

https://github.com/nodejs/node/releases/tag/v12.13.0

Сегодня Firefox обновился до версии 70. В блоге Mozilla Hacks появился пост про новый релиз — "Firefox 70 — a bountiful release for all".

Самое интересная новая пользовательская фича — возможность генерирования паролей в <input type="password">. Сгенерировать пароль можно через контекстное меню. Или если у поля ввода есть атрибут autocomplete="new-password", то при фокусе на нём будет появляться диалог для генерации пароля.

Появилась поддержка CSS-свойств text-decoration-thickness, text-underline-offset и text-decoration-skip-ink, с помощью которых можно управлять внешним видом линии подчёркивания. В display появилась поддержка значений, состоящих из двух ключевых свойств, например, display: block flex;.

В движке JavaScript реализована поддержка числовых разделителей — 1_000_000. Добавлен Intl.RelativeTimeFormat.formatToParts, с помощью которого можно получить составные части относительных дат. Выполнение JS стало быстрее благодаря новому интерпретатору.

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

#firefox #release

https://hacks.mozilla.org/2019/10/firefox-70-a-bountiful-release-for-all/

Неделя релизов продолжается. Вчера вышел Chrome 78. Разработчики браузера опубликовали статью про новинки релиза — "New in Chrome 78".

В рамках имплементации спецификации Houdini CSS Properties and Values API Level 1 добавлен метод window.CSS.registerProperty, с помощью которого можно задать начальное значение, фоллбек, тип и другие параметры CSS-переменных.

Изменилась стратегия обновления сервис воркеров. Если сервис воркер подключался с помощью importScripts(), то браузер подгружал новую версию скрипта тогда, когда был изменён его путь. С версии 78 сервис воркеры будут обновляться и в том случае, когда содержимое скрипта будет изменено.

Добавлены новые экспериментальные возможности, которые можно включить для пользователей вашего сайта в рамках Orgin Trials. Например, с этой версии можно включить Native File System API для доступа к файлам из веб-приложения. Также можно включить SMS Receiver API, с помощью которого можно получить одноразовый пароль из SMS-сообщения.

В инструментах разработчика можно увидеть, какое количество времени сторонние скрипты блокировали главный поток. Также появилась возможность аудита приложения, если были использованы Request Blocking или Local Overrides. Теперь можно сообщить о проблеме в Chrome Dev Tools с помощью меню Main Menu > Help > Report a DevTools issue.

#release #chrome

https://developers.google.com/web/updates/2019/10/nic78

Случайно увидел ссылку на статью про TTFB от Гарри Робертса — "Time to First Byte: What It Is and Why It Matters".

TTFB (Time To First Byte) — время прошедшее от запроса ресурса до первого байта ответа — один из основных показателей производительности web-приложений. Максимальное сокращение этого времени лежит в основе всех оптимизаций. В статье есть список того, что может влиять на TTFB: роутинг в CDN, время чтения ресурсов с файловой системы, приоритизация в HTTP/2, время исполнения кода бэкенда, скорость работы запросов в базе данных и т.п. Для анализа того, что происходило на сервере во время обработки запроса, можно использовать Server Timing API.

В общем, статья полезная. Рекомендую посмотреть.

#performance #metrics

https://csswizardry.com/2019/08/time-to-first-byte-what-it-is-and-why-it-matters/

Пару дней назад вышла минорная версия языка elm — 19.1. По этому поводу Эван Чаплицки — дизайнер языка — написал пост про то, над чем шла работа в последнее время — "The Syntax Cliff".

Elm часто подвергается критике. Она возникает из-за того, что большая часть фронтенд-сообщества и команда разработки языка ставят в приоритет разные вещи. Это очень хорошо видно на примере последнего релиза. Самое большое изменение в 19.1 — улучшенные сообщения компилятора при парсинге синтаксически некорректного кода. Эван решил приоритезировать эту фичу, чтобы снизить порог входа в язык. Теперь сообщения об ошибках фактически обучают синтаксису и особенностям языка. Казалось бы, изменение небольшое, но оно имеет очень важное значение для увеличения сообщества за счёт новых людей, которые начинают изучение языка и не бросают его из-за борьбы с компилятором.

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

#elm #release

https://elm-lang.org/news/the-syntax-cliff

Майкл Шарналь недавно написал статью про исправление отображения фотографий в браузере, если они были сняты в портретной ориентации — "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, 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