Александр Косс рассказал про историю появления и развития библиотеки date-fns.

Разработка библиотеки началась осенью 2014 года. На тот момент date-fns не претендовал на замену Moment.js и включал в себя одну функцию startOfDay (у аналогичной функции в Moment.js были проблемы с производительностью). У проекта не было какой-либо стратегии развития, дополнительные функции добавлялись по мере необходимости.

В 2015 году Александр нанял своего брата, чтобы он сделал порт функций из Moment.js. С этого момента проект начал набирать небольшую популярность. В 2016 году Дэн Абрамов попиарил date-fns у себя в твиттере. После этого события пришло очень много новых пользователей, вскрылись проблемы, которые можно было решить только изменением API. Большой поток запросов, багов и сопутствующей работы привёл к тому, что Александр перегорел. Но в 2019 году смог выделить три месяца на фулл-тайм разработку date-fns, и в августе 2019 года вышла вторая версия с переделанным API, из-за чего многие пользователи остались недовольны.

Тем не менее проект продолжал расти, набирать популярность и привлекать средства на opencollective. На данный момент команда разработки привлекла половину необходимого бюджета для дальнейшего развития и поддержки date-fns.

В общем, крутая история. Передаю разработчикам свой респект.

#opensource #history #date

https://twitter.com/kossnocorp/status/1392449481053032450

Вчера в блоге Google появилась новость о том, что Google Docs переходит на движок рендеринга, работающий поверх canvas, — "Google Docs will now use canvas based rendering: this may impact some Chrome extensions".

После публикации в сети появились обсуждения насколько это оправдано. Своими мыслями поделился один из авторов оригинального Google Docs. Он говорит о том, что HTML-движки хороши для рендеринга обычных сайтов, но им не хватает фич для реализации полноценных WISWYG-редакторов. И о том, что кастомный движок рендеринга выигрывает по скорости у HTML-движков благодаря ограниченному набору функций.

У многих возникли вопросы по поводу доступности. Я немного потестил тестовый документ из статьи, и с доступностью там более менее всё ок. Озвучивание текста включается с помощью хоткея cmd+option+z — появится div с aria-live вне области просмотра с текстом документа текущей страницы. При перемещении по документу озвучивается текущая строка.

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

#architecture #announcement #google #a11y

https://workspaceupdates.googleblog.com/2021/05/Google-Docs-Canvas-Based-Rendering-Update.html
https://news.ycombinator.com/item?id=27129858 (обсуждение на Hacker News)

Эдди Османи написал статью про использование Puppeteer для анализа производительности сайта — "Web Performance Recipes With Puppeteer".

Puppeteer — это библиотека для автоматизированного управления браузерами (Chrome, Edge, Opera, Firefox). Её используют для пререндеринга страниц SPA-приложений, для тестирования, генерации скриншотов страницы и т.п.

В статье Эдди делится Puppeteer-скриптами, которые могут быть полезны для решения проблем производительности. Например, для оценки влияния стороннего кода, для получения метрик производительности (FCP, LCP, CLS), для поиска утечек памяти, для измерения FPS страницы и многого другого.

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

#performance

https://addyosmani.com/blog/puppeteer-recipes/

Сара Суайдан рассказала об оптимизации содержимого страницы для режима чтения — "Design for reading: tips for optimizing content for Reader modes and reading apps".

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

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

#html #css

https://www.sarasoueidan.com/blog/tips-for-reader-modes/

Брайан Карделл из Igalia поделился планами по прототипированию поддержки CSS-селектора :has() — "Can I :has()".

Cелектор :has() добавляет в CSS возможность стилизации элемента на основе его содержимого. Это единственный селектор в таком роде — другие селекторы работают по направлению от детей к родителям. Он появился в черновике спецификации Selectors Level 4 в 2011 году, но до сих пор не был имплементирован в браузерах. Основная сложность заключается в том, что :has() ломает принципы работы со стилями, которые лежат в основе многих оптимизаций, благодаря которым браузеры могут поддерживать стабильные 60 fps.

На протяжении десяти лет в рабочей группе CSS возникали обсуждения по поводу :has(), но они никуда не вели, потому что никто не брался за прототипирование. Недавно компанию Igalia наняла компания eyeo (разрабатывает Adblock Browser и Adblock Plus) для того, чтобы сдвинуть эту фичу с мёртвой точки. Ребята планируют сделать прототипы и в принципе понять, возможно ли реализовать :has() без проблем для производительности. Этот эксперимент определит дальнейшую судьбу селектора. Либо он будет добавлен в браузеры, либо его функциональность будет реализована в другом виде, например, на уровне DOM API.

#css #experimental

https://bkardell.com/blog/canihas.html

За прошедшие две недели в канале для патронов Defront было опубликовано десять постов:

— Приоритизация загрузки ресурсов HTML-страницы
— Островная архитектура (Islands Architecture)
— Неизвестный HTML
— Zx — утилита для упрощения работы с shell-скриптами
— Разработка компонента для просмотра введённого пароля
— Недостатки снапшот-тестов
— Opossum — реализация паттерна circuit breaker в Node.js
— Разочарование в JPEG XL
— Как убедить других разработчиков в правоте своей идеи
— Преимущества и недостатки сабсеттинга шрифтов

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

Спасибо всем, кто читает и поддерживает Defront!

https://www.patreon.com/myshov

Дэн Вандеркам рассказал о ситуациях, в которых система типов TypeScript проявляет свою ненадёжность (unsoudness) — "The Seven Sources of Unsoundness in TypeScript".

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

Самые главные источники ненадёжности — это использование any, type assertions, получение значений из объектов и массивов, неправильные определения типов библиотек, вариантность при работе с массивами, отсутствие инвалидации уточнения типов после вызова функции и рекурсивные типы.

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

#typescript

https://effectivetypescript.com/2021/05/06/unsoundness/

Learn CSS — An evergreen CSS course

https://web.dev/learn/css/

На сайте web.dev появился курс для изучения CSS. В нем основные фундаментальные темы CSS вынесены в отдельные секции, что удобно для изучения конкретной части, а не все сразу. Как можно понять из определения, обещают поддерживать в актуальном состоянии.
Кстати, на web.dev есть множество курсов по другим темам

Минко Гечев из Google представил Angular DevTools — "Introducing Angular DevTools".

Angular DevTools — это расширение для Chrome, облегчающее отладку и профилирование Angular-приложений. Оно было разработано с нуля с участием разработчиков Augury — популярного расширения для отладки Angular.

С помощью Angular DevTools можно инспектировать и редактировать дерево компонентов, профилировать исполнение цикла отслеживания изменений (change detection cycle). Также в рамках этого проекта был улучшен опыт отладки Angular-приложений: был добавлен новый API и улучшены сообщения об ошибках. В следующих релизах разработчики планируют добавить наиболее полезные фичи Augury.

Angular DevTools поддерживает приложения, разработанные с помощью Angular v9 и выше на базе Ivy.

#angular #debug #announcement

https://blog.angular.io/introducing-angular-devtools-2d59ff4cf62f

Андрей Мелихов на канале ДевШахты рассказал про Server-Sent Events API — "Server-Sent Events: Простая замена веб-сокетов".

Если вам нужно читать данные с сервера в реальном времени, то не обязательно для этого использовать веб-сокеты. Для этой цели хорошо подходит Server-Sent Events API (SSE API). В отличие от веб-сокетов он используется для создания однонаправленного канала связи с сервером и не так сложен в использовании.

Для работы с SSE на клиенте используется класс EventSource, которому нужно передать url сервера. Сервер в свою очередь должен отправлять поток данных с метаинформацией обычным текстом, так как SSE работает поверх HTTP. Поддержка SSE есть во всех современных браузерах.

Рекомендую посмотреть видео, если раньше не приходилось работать с SSE.

#api #video

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

Иан Бин написал хорошее руководство по оптимизации загрузки шрифтов — "5 steps to faster web fonts".

Иан рассказывает про основные способы ускорения загрузки шрифтов: preload, preconnect, хостинг шрифтов на основном домене, использование WOFF2 и т.п. Про уменьшение размера файла шрифта с помощью сабсеттинга и возможные проблемы, которые могут появиться после применения этой оптимизации.

Очень доступно с помощью диаграмм объясняется суть опций дескриптора font-display:

— Опция swap используется для замены фоллбек-шрифта загруженным шрифтом без ограничения по времени, при этом текст рендерится с помощью фоллбек-шрифта без задержки.

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

— С опцией optional веб-шрифт будет отображён только в том случае, если он будет загружен в первые 100 миллисекунд после начала загрузки страницы. Если за это время шрифт не успеет загрузиться, текст будет отображён с помощью фоллбек-шрифта. Тем самым пользователи сайта не столкнутся со сдвигом контента из-за смены шрифтов при первом визите.

— С опцией fallback браузер также ждёт 100 миллисекунд прежде чем отобразить фоллбек-шрифт, но в отличие от optional шрифт будет заменён, если он загрузится не более чем за три секунды.

В общем, полезная статья. Рекомендую почитать, если используете веб-шрифты на своём сайте.

#performance #fonts

https://iainbean.com/posts/2021/5-steps-to-faster-web-fonts/

Два дня назад вышла новая мажорная версия текстового редактора Sublime Text. Бенджамин Шааф рассказал о его новых возможностях — "Sublime Text 4".

Теперь Sublime Text поставляется со встроенной поддержкой TypeScript, TSX и JSX. Есть все основные фичи: подсветка синтаксиса, автодополнение кода, переход к объявлению.

Переработан UI приложения. Теперь его компоновка происходит на GPU, улучшая отзывчивость интерфейса при работе с большими проектами. Также немного обновили дизайн и добавили поддержку автоматической смены тем.

Был переписан движок автодополнения кода. Теперь он понимает структуру проекта и, в целом, стал более полезен. В списке автодополнения были добавлены значки типа символа и опция для перехода к месту его объявления в коде.

Был улучшен движок подсветки синтаксиса. Упрощено открытие вкладок в режиме split view. Добавлена нативная поддержка Apple Silicon и Linux ARM64.

#tool #programming #announcement

https://www.sublimetext.com/blog/articles/sublime-text-4

Брайан Люиз Рамирез рассказал об использовании Local Overrides для анализа производительности сайта — "Using Chrome Local Overrides To Optimize Page Speed".

Local Overrides — это фича Chrome DevTools, с помощью которой можно временно подменить любой ресурс сайта. Например, в инструментах разработчика можно поправить index.html, добавить исправленный HTML в Local Overrides, и при повторном переходе на сайт вместо оригинального index.html будет браться его изменённая версия.

Этот трюк очень хорошо подходит для исследования влияния потенциальных оптимизаций. Для упрощения анализа исправлений автор статьи поделился своим скриптом для сбора метрик.

Рекомендую почитать статью и поэкспериментировать с Local Overrides. Эта фича может быть полезна для любых быстрых экспериментов.

#performance #debug

https://blr.design/blog/local-overrides/

Пару дней назад Эрик Симонс — создатель StackBlitz, online-песочницы для разработки приложений — рассказал о новой фиче проекта — "Introducing WebContainers: Run Node.js natively in your browser".

WebContainers — это проприетарный механизм для запуска Node.js-приложений внутри браузера с помощью WebAssembly. В StackBlitz он используется для создания локальной изолированной среды для разработки серверных приложений внутри браузера (Next.js, NestJS). Несмотря на исполнение кода с помощью wasm-версии Node.js работает всё быстро. В статье написано, что сборка приложения в WebContainer быстрее локальной сборки на 20%. Этот результат получен благодаря использованию кастомного npm-клиента (об этом Эрик написал в комментариях на HackerNews).

Кроме скорости у WebContainers есть другие плюсы. Потенциальные вредоносные скрипты не смогут получить доступ к машине-хосту. Очень просто разворачивать новые среды, что хорошо подходит для быстрого тестирования фич или создания примеров кода с воспроизведением ошибок. Есть бесшовная интеграция с отладчиком Chrome DevTools

В общем, интересная технология, но на данный момент она находится в статусе беты и работает только в Chromium-based браузерах.

#nodejs #webassembly #announcement

https://blog.stackblitz.com/posts/introducing-webcontainers/
https://news.ycombinator.com/item?id=27223012

Барри Поллард рассказал про новые CSS-дескрипторы директивы @font-face, помогающие уменьшить сдвиг контента после загрузки шрифта, — "A New Way To Reduce Font Loading Impact: CSS Font Descriptors".

Для управления загрузкой шрифтов используется директива font-display. Очень часто её используют со значением swap, так как текст страницы с ней появляется сразу и посетителям страницы не нужно ждать загрузки шрифта. Но при использовании font-display: swap возникает проблема со сдвигом контента, из-за которой посетители во время чтения текста могут потерять текущую позицию в тексте.

Для решения этой проблемы был придуман подход с использованием Font Loading API и сопоставлением метрик фоллбек-шрифта с метриками загружаемого шрифта. Этот подход работает, но он не очень удобен в реализации. По этой причине в рамках спецификации CSS Fonts Module Level 5 были добавлены новые дескрипторы size-adjust, descent-override, line-gap-override, advance-override, с помощью которых можно задать дополнительные метрики для фоллбек-шрифта, уменьшая непредсказуемый сдвиг контента. В коде это выглядит так:

@font-face {
  font-family: 'Lato';
  src: url('/fonts/Lato.woff2') format('woff2');
  font-weight: 400;
}

@font-face {
  font-family: "Lato-fallback";
  size-adjust: 97.38%;
  ascent-override: 99%;
  src: local("Arial");
}

h1 {
  font-family: Lato, Lato-fallback, sans-serif;
}

На данный момент поддержка descent-override, line-gap-override, advance-override уже есть в Chrome и Firefox. Поддержка size-adjust появилась недавно в Chrome Canary и в Firefox за экспериментальным флагом.

#performance #fonts #ux #css

https://www.smashingmagazine.com/2021/05/reduce-font-loading-impact-css-descriptors/

Вчера вышла новая версия Chrome. Пит Лепаж и Джеселин Ин рассказали про новые фичи релиза — "New in Chrome 91".

В десктопной версии Chrome было добавлено API для доступа к файлам из буфера обмена. Доступ к файлам из буфера возможен только при обработке события paste.

Появилась возможность разделения сохранённой информации из менеджера паролей между разными доменами. Это полезно для тех сайтов, которые используют общий бэкенд для управления пользователями на разных доменах, например, google.com и google.ru.

В File System Access API добавлены новые опции для задания директории по умолчанию и задания дефолтного имени файла. Появилась полноценная поддержка Web Assembly SIMD. У фавиконок теперь можно использовать атрибут media, с помощью которого можно менять иконку сайта в зависимости от текущей темы операционной системы.

В DevTools появился инструмент для визуальной отладки scroll-snap. Добавлен инспектор памяти для анализа ArrayBuffer и памяти WebAssembly. Появилась опция для тестирования Content-Encoding. Улучшена поддержка дебага приватных полей классов. Улучшена фича для отображения структуры файла (outline) на вкладке "Sources" и т.д.

#chrome #release

https://developer.chrome.com/en/blog/new-in-chrome-91/
https://developer.chrome.com/blog/new-in-devtools-91/

Вчера зарелизился TypeScript 4.3. Дениэл Розенвассер рассказал о всех фичах новой версии.

Улучшена работа с сеттерами и геттерами. Теперь возможно указывать разные типы для чтения/записи свойств классов и объектов (separate write types).

Для решения проблем со случайным переопределением членов родительского класса теперь можно использовать ключевое слово override и флаг компиляции --noImplicitOverride.

Улучшен вывод строковых шаблонных типов при использовании шаблонных строк и типов-параметров в дженериках.

Было оптимизировано время первой сборки приложений, использующих опции --incremental и --watch, за счёт ленивого вычисления необходимых данных.

Добавлена реализация приватных полей классов из ECMAScript. Улучшено сужение типов (type-narrowing) при работе с дженериками, Хелпер ConstructorParameters теперь можно использовать с абстрактными классами. С включённой опцией strictNullChecks теперь нельзя использовать промисы без await внутри условий. Улучшен механизм автодополнения импортов.

#typescript #release

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

Эдди Османи написал большую статью про элемент <img> и его влияние на производительность — "The Humble img Element And Core Web Vitals".

В статье Эдди рассказывает про разные аспекты использования изображений, которые могут оказывать негативный эффект на метрики Core Web Vitals. Например, если у изображений не установлены атрибуты width и height, загрузка изображений будет приводить к смещению элементов на странице, ухудшая метрику Cumulative Layout Shift (CLS). Если основное изображение сайта загружается слишком поздно, например, после выполнения клиентского кода, то будет ухудшаться метрика Largest Contentful Paint (LCP). В этом случае нужно добавить изображение в HTML-разметку или загрузить его с помощью preload, если предыдущий вариант не подходит.

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

#performance #html

https://www.smashingmagazine.com/2021/04/humble-img-element-core-web-vitals/

Владан Дзерик из Facebook рассказал об изменении приоритетов разработки Flow — "Clarity on Flow’s Direction and Open Source Engagement".

Разработка Flow теперь полностью сконцентрируется на потребностях Facebook: быстрой проверке типов на огромной кодовой базе, улучшению типобезопасности и DX. Проект будет продолжать разрабатываться на GitHub, но пулл-реквесты и ишью, не совпадающие с видением разработчиков, будут закрываться. Встроенные определения типов (DOM, Node, React и т.п.) будут вынесены в репозиторий flow-typed, чтобы их обновление не было привязано к релизному циклу Flow. Также планируют добавлять новые синтаксические конструкции. И по этому поводу хочется немного поспекулировать.

Исторически Flow позиционировался как "JavaScript с типами", то есть как тайпчекер. С добавлением новых синтаксических структур он превратится в полноценный язык. По сути Flow становится языком для фронтенда, кодовая база которого на 100% принадлежит Facebook. [Также вы можете вспомнить про Rescript (ex-ReasonML), но он полагается на bucklescript, разработанный Bloomberg, и насколько я знаю, Facebook не участвует в его развитии.] С учётом того, что в Facebook работают довольно сильные спецы по дизайну языков (знаю точно, что там работает Эрик Майер), в итоге может получиться что-то интересное.

#flow #announcement

https://medium.com/flow-type/clarity-on-flows-direction-and-open-source-engagement-e721a4eb4d8b

Sparkplug — новый неоптимизирующий компилятор JavaScript

Оказывается V8 9.1 был добавлен новый неоптимизирующий компилятор Sparkplug. Благодаря отсутствию оптимизации, процесс компиляции происходит гораздо быстрее. По сути, этот компилятор переводит байткод в соответствующие им инструкции. Такой подход позволяет быстрее начать выполнять код на этапе загрузки, а также переключаться на оптимизированный код и обратно. Подход дает выигрыш, так как на старте многие оптимизации все равно не возможны из-за отсутствия фидбека по исполнению кода. На данный момент получилось достичь 5-15% прироста производительности, но пока реализованы не все идеи связанные с новым компилятором. Больше технических деталей и графиков в статье блога V8: https://v8.dev/blog/sparkplug