Недавно на сайте документации Microsoft был опубликован курс, посвящённый разработке на TypeScript, — "Build JavaScript applications using TypeScript".

Курс бесплатный, нужно только зарегистрироваться для сохранения прогресса обучения. Обучение разбито на модули: введение, работа с переменными, функциями, интерфейсами, классами, использование дженериков, работа с внешними библиотеками, организация кода с помощью неймспейсов. Есть перевод на русский язык (очень похоже, что это машинный перевод).

В общем, выглядит интересно. Каких-то хардкорных вещей нет, так что подойдёт всем, кто только начинает знакомиться с TypeScript. Требуется только базовое знание JS и HTML.

#typescript

https://docs.microsoft.com/en-us/learn/paths/build-javascript-applications-typescript/

Сегодня вышел Chrome 90. Пит Лепаж и Джеселин Ин рассказали про новинки релиза.

В CSS была добавлена поддержка нового свойства overflow: clip из спецификации CSS Overflow. Это свойство позволяет скрыть часть контента, вышедшего за пределы контейнера при его переполнении, не переключая контекст форматирования, тем самым улучшая производительность рендеринга по сравнению с overflow: hidden.

В Chrome 74 был добавлен Feature Policy API для объявления списка API, которые разрешается использовать на странице. В Chrome 90 этот API был переименован в Permissions Policy, также был изменён синтаксис для определения параметров.

Появилась поддержка декларативного Shadow DOM, благодаря которому web-компоненты можно объявлять в коде HTML-страницы без использования императивного API. Declarative Shadow DOM полезен для улучшения SEO страниц, на которых используются web-компоненты.

В версии браузера для десктопа была добавлена поддержка видеокодека AV1, оптимизированного для видеоконференций.

В Chrome 90 (и во всех будущих версиях) при переходе на сайт без указания протокола теперь будет использоваться HTTPS, а не HTTP.

В Chrome DevTools был добавлен инструмент для визуальной отладки флексбоксов. Появилась экспериментальная поддержка отображения дерева доступности страницы. Добавлен новый оверлей, отображающий метрики Web Vitals для текущей страницы. Добавлена эмуляция медиафичи color-gamut, с помощью которой можно проверить, поддерживается ли дисплеем заданное цветовое пространство.

#chrome #release

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

Никита Прокопов написал статью про проблему размера шрифтов, заданных с помощью пунктов, — "Font size is useless; let’s fix it".

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

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

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

#typography

https://tonsky.me/blog/font-size/
https://habr.com/ru/company/vdsina/blog/550046/ (на русском языке)

Андреа Гиммарачи написал статью о том, почему некорректно называть JavaScript-классы синтаксическим сахаром для прототипного наследования — "JS classes are not 'just syntactic sugar'".

В статье говорится о том, что хотя многие фичи JavaScript-классов можно эмулировать в синтаксисе ES5, они будут уступать в скорости и безопасности. Кроме того существуют вещи, которые нельзя эмулировать с помощью традиционного прототипного наследования. Например, с помощью обычных функций нельзя отнаследоваться от встроенных типов, также невозможно полностью эмулировать поведение super().

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

#js

https://webreflection.medium.com/js-classes-are-not-just-syntactic-sugar-28690fedf078
https://www.reddit.com/r/javascript/comments/mq9upa/js_classes_are_not_just_syntactic_sugar/ (обуждение на Reddit)

Хью Хауорт написал обзор современных инструментов сборки — "Comparing the New Generation of Build Tools".

В статье рассказывается про esbuild, Snowpack, Vite и wmr. Esbuild — это очень шустрый сборщик, написанный на Go. Snowpack, Vite и wmr — сборщики нового поколения. Они полагаются на нативную модульную систему JavaScript, устраняя шаг сборки приложения во время разработки.

Snowpack позволяет подключать и гибко настраивать разные сборщики для production-сборки проекта. Vite, наоборот, исповедует принцип zero-configuration, предоставляя набор настроек, которые подойдут большинству проектов. Wmr — самое лёгкое решение, но из коробки поддерживает только React и Preact. Esbuild в этом сравнении стоит особняком, так как это обычный, но очень быстрый сборщик.

Большая и хорошая статья. Очень рекомендую почитать.

#bundle #tool

https://css-tricks.com/comparing-the-new-generation-of-build-tools/

Джейк Арчибальд написал ещё одну статью про анализ производительности сайтов команд Формулы-1 — "Who has the fastest F1 website in 2021? Part 8".

В восьмой части Джейк исследует сайт McLaren. Сайт загружается медленно — основной контент появляется на 25-ой секунде. Основная проблема связана с загрузкой большого CSS-файла с заинлайненным шрифтом со стороннего домена. Ещё одна проблема заключается в том, что содержимое страницы отображается после события DOMContentLoaded. Загрузка сторонних скриптов, блокирующих парсинг страницы, напрямую влияет на это событие, задерживая появление контента.

Есть проблемы с изображениями. Например, на сайте используется тяжёлый спрайт, из которого фактически используется всего лишь несколько изображений. CSS-спрайты — это устаревшая техника оптимизации; её не рекомендуется использовать, когда сайт работает по HTTP/2.

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

#performance

https://jakearchibald.com/2021/f1-perf-part-8/

Пока одни проекты внедряют сервис воркеры, другие их удаляют. Молли Стрюв из dev.to рассказала, почему они решили удалить сервис воркер — "Goodbye Offline Page".

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

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

#performance #serviceworker

https://dev.to/devteam/goodbye-offline-page-5d98

Сегодня вышла новая версия Firefox. Крис Миллс рассказал про новинки релиза — "Never too late for Firefox 88".

Для элементов управления форм была добавлена поддержка псевдоклассов :user-valid и :user-invalid. Они начинают матчиться, после того как пользователь завершил работу с элементом, например, после перехода на соседний элемент с помощью Tab.

Firefox теперь поддерживает CSS-функцию image-set() для выбора наиболее подходящего изображения из предоставленного множества. Эту функцию можно использовать в свойствах content и cursor.

Было обновлено поведение CSS-свойства outline — обводка теперь учитывает текущее значение border-radius.

В регулярных выражениях добавлена поддержка пропозала RegExp match indices. Оно добавляет поддержку флага /d, благодаря которому в результате выполнения регулярки (match object) появляется свойство indicies с позициями текущих скобочных групп (capturing group).

Добавлен статический метод AbortSignal.abort(), возвращающий отменённый сигнал.

Отключена поддержка FTP. Его полное удаление будет завершено в Firefox 90. При необходимости поддержку FTP можно будет включить с помощью плагинов.

#release #firefox

https://hacks.mozilla.org/2021/04/never-too-late-for-firefox-88/

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

— Почему Wrike перестаёт использовать Dart для новых проектов
— Как убедить начальство в том, что производительность имеет значение
— Преимущества и недостатки Headless CMS
— Почему дизайн-система должна быть несовершенна
— Нативные методы для форматирования даты и времени в JavaScript
— Не пишите свою функцию для парсинга параметров URL
— Порядок элементов в HTML и доступность
— Стилизация с заделом на будущее
— Использование Makefile вместо npm-скриптов
— Как правильно скрывать видео на мобильных

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

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

https://www.patreon.com/myshov

Когда были представлены метрики Web Vitals ребята из Google упомянули, что они будут учитываться при ранжировании результатов поиска. Вчера была опубликована статья, рассказывающая о том, когда это произойдёт — "More time, tools, and details on the page experience update".

Новый фактор ранжирования, учитывающий производительность, будет выкатываться постепенно, начиная с середины июня этого года до конца августа. Google напоминает, что это один из многих факторов, поэтому значительного изменения выдачи ожидать не стоит. Для упрощения поиска проблемных страниц в Google Search Console появятся новые отчёты со статусом страниц, учитывающих их производительность.

Также в этой статье было сделано несколько смежных анонсов. С середины июня сайтам не обязательно распространять свой контент в виде AMP, чтобы попасть в раздел "Top Stories" (новости), учитываться будет только скорость загрузки страниц. Значки AMP-страниц будут удалены из результатов поиска. Signed Exchanges (SXG) можно будет подключить к любым страницам. Благодаря SXG сайты могут делегировать распространение контента другому сайту, сохраняя URL оригинального сайта (поддержка SXG есть только в Chromium).

#performance #seo #google

https://developers.google.com/search/blog/2021/04/more-details-page-experience

Вчера вышла новая мажорная версия Node.js. Бетани Григгс рассказала про новинки релиза — "Node.js 16 available now".

Node.js 16 — это current-ветка, которая перейдёт в статус LTS в октябре 2021 года. В статье есть напоминание, что поддержка Node.js 10 будет прекращена в конце этого месяца (апрель 2021).

V8 был обновлён до версии 9.0. В этой версии была добавлена поддержка пропозала RegExp Match Indices и оптимизирован доступ к полям родительского объекта с помощью super.

Был добавлен Timers Promises API — альтернативный набор функций на базе промисов для работы с таймерами.

Продолжается адаптация API веб-платформы: добавлена экспериментальная поддержка Web Crypto API, стабилизировалась реализация AbortController, добавлены buffer.atob() и buffer.btoa().

Npm обновлён до версии 7.10.0. API для разработки нативных аадонов Node-API (бывший N-API) обновлён до версии 8. Добавлена поддержка Stable Source Maps v3.

#nodejs #release

https://nodejs.medium.com/node-js-16-available-now-7f5099a97e70

Эрик Белли объясняет на примерах, почему CSS — это сильно типизированный язык — "CSS is a Strongly Typed Language".

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

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

#css

https://css-tricks.com/css-is-a-strongly-typed-language/

Барри Поллард написал руководство по оптимизации метрик Web Vitals — "An In-Depth Guide To Measuring Core Web Vitals".

Web Vitals — это пользовательский опыт сайта, облачённый в цифры. Раньше для его измерения использовался Performance Score из Lighthouse. Он включает в себя набор метрик, которые не полностью совпадают с набором метрик Web Vitals. По этой причине хорошая оценка Performance Score потенциально может включать в себя плохую оценку, например, метрики CLS.

Отчёты из Google Search Console — основной инструмент для наблюдения за тем, как метрики Web Vitals будут влиять на поисковую выдачу Google. Данные для этого отчёта собираются с реальных пользователей, которые согласились делиться статистикой о посещённых сайтах (Chrome User Experience Report — CrUX). Данные агрегируются за последние 28 дней по 75-ому перцентилю, поэтому исправление производительности сайта начнёт отображаться в отчёте не сразу. Возможно, что нужно будет подождать несколько недель.

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

#performance

https://www.smashingmagazine.com/2021/04/complete-guide-measure-core-web-vitals/

Николас Закас написал статью про ленивый доступ к свойствам объекта — "The lazy-loading property pattern in JavaScript".

Если в объекте есть свойство, значением которого является результат выполнения тяжёлого вычисления, то имеет смысл отложить это вычисление до того момента, пока не произойдёт обращение к свойству. Николас предлагает использовать паттерн, который позволяет не только откладывать вычисление, но и кеширует результат его выполнения:

const object = {
  get data() {
    const actualData = someExpensiveComputation();

    Object.defineProperty(this, "data", {
      value: actualData,
      writable: false,
      configurable: false,
      enumerable: false
    });

    return actualData;
  }
};

Этот подход можно использовать с любыми объектами и классами.

#js #performance

https://humanwhocodes.com/blog/2021/04/lazy-loading-property-pattern-javascript/

Алексей Трехлеб из Uber написал статью про изменение размера изображения с помощью алгоритма Seam Carving — "Изменение размеров изображения с учётом его содержимого в JavaScript".

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

const lEnergy = (lR-mR) ** 2 + (lG-mG) ** 2 + (lB-mB) ** 2;
const rEnergy = (rR-mR) ** 2 + (rG-mG) ** 2 + (rB-mB) ** 2;
const result = Math.sqrt(lEnergy + rEnergy);

Алгоритм лучше всего работает с ландшафтными изображениями с большими областями одного тона. На более сложных изображениях он может привести к искажениям.

Крутая статья. Очень рекомендую почитать.

#algorithm

https://trekhleb.dev/blog/2021/content-aware-image-resizing-in-javascript/
https://vas3k.club/post/9637/ (на русском языке)

Франсуа Хендрикс рассказал о том, как сделать библиотеку, у которой не было бы проблем с три-шейкингом — "How To Make Tree Shakeable Libraries".

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

Также в статье есть рекомендация не использовать транспиляцию перед публикацией библиотеки, так как наиболее оптимальную цель транспиляции знает только пользователь библиотеки. Если от транспиляции отказаться нельзя, то нужно проконтролировать, чтобы сохранился формат ESM.

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

#performance #bundle #library

https://blog.theodo.com/2021/04/library-tree-shaking/

Сходил в гости к веб-стандартам. Обсудили новые версии Node.js, Firefox, Chrome и Safari. Разобрались в том, почему Google борется за быстрый веб. Ну и немного поговорили про Defront.

Выпуск №279. Вадим Макеев, Александр Мышов, Андрей Мелихов про Defront, Firefox 88, Node.js 16, бету Chrome 91, XHR как дискету, внезапный popup, AMP и Core Web Vitals.

Слушайте на Ютубе https://youtu.be/A7HWbbx1qMQ
Ссылки на сайте https://web-standards.ru/podcast/279/

В блоге DebugBear была опубликована статья, посвящённая отладке проблем производительности сайта с помощью Chrome DevTools, — "Profiling site speed with the Chrome DevTools Performance tab".

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

Совет из статьи. Часто возникает ситуация, когда сложно понять взаимосвязи между активностями во время загрузки страницы, так как они происходят почти одновременно. Для упрощения отладки можно "растянуть" по времени эти активности с помощью троттлинга сети и CPU.

Полезная статья. Рекомендую заглянуть.

#performance #debug

https://www.debugbear.com/blog/devtools-performance

Ахмад Шадид написал статью про CSS Container Queries — "Say Hello To CSS Container Queries".

Для управления контекстным отображением компонентов можно использовать медиавыражения, но они не подходят для случаев, когда компонент может быть размещён в контейнерах с разной шириной. Эту проблему решают выражения от контейнера (Container Queries). Благодаря им у нас появляется возможность задавать элементам стили, которые зависят от размера контейнера:

@container (min-width: 400px) {
  .c-article {
    display: flex;
    flex-wrap: wrap;
  }
}

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

На данный момент выражения от контейнера доступны только в Chrome Canary за экспериментальным флагом.

#css #experimental

https://ishadeed.com/article/say-hello-to-css-container-queries/