Тим Кадлек разобрался в причинах странного поведения prefetch на Netlify и рассказал про свои находки в статье "Prefetching? At This Age?".

Тим подключил к своему сайту библиотеку Instant.Page. Она помогает подгружать страницы в фоновом режиме с помощью prefetch, отслеживая наведение курсора мыши на ссылки и тапы пользователя. Но при хостинге сайта на Netlify подгруженные страницы при переходе по ссылкам не бралась из кэша, а загружалась повторно.

Оказалось, что Netlify (и любые другие CDN) отправляет заголовок Age, когда его значение превышает max-age браузер начинает повторно загружать ресурс. В Chromium, правда, логика немного сложнее — ресурс, загруженный с помощью prefetch, хранится в кэше пять минут вне зависимости от заголовка Cache-Control, но по каким-то причинам этот период учитывал Age. Баг в Chromium уже поправили. В Firefox баг заведён, но пока ещё открыт.

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

#performance #cache

https://timkadlec.com/remembers/2020-06-17-prefetching-at-this-age/

Команда разработки компиляторов из Igalia представила полифилл для пропозала Temporal — "Dates and Times in JavaScript".

Для работы с датами в JavaScript используется объект Date. Он был сделан по образу и подобию Date из Java образца 1995 года. В 1997 году разработчики Java объявили этот API устаревшим. В JS его уже нельзя было поменять, потому что кардинальное изменение API сломало бы web. В результате сообщество создало много библиотек для более удобной работы с датами; Temporal может быть использован вместо них.

Основные особенности Temporal: удобный API для работы с датами и временем, иммутабельность, поддержка разных форматов представления дат, поддержка календарей, отличных от григорианского, полноценная возможность работы с часовыми поясами. В статье есть ссылки на подробное описание API и cookbook с примерами использования Temporal: подсчёт времени перелёта, планирование встречи с участниками в разных часовых поясах и т.п.

Команда Igalia призывает сообщество протестировать полифилл и поделиться критикой и мыслями, пока пропозал находится на Stage 2.

#proposal #polyfill #announcement

https://blogs.igalia.com/compilers/2020/06/23/dates-and-times-in-javascript/

Всегда ли WebP сжимает изображения лучше чем JPEG? Этим вопросом задался Йоханнес Сипола и написал статью "Is WebP really better than JPEG?"

Google в своих исследованиях про эффективность сжатия WebP говорил про уменьшение размеров изображений на 25-34% относительно JPEG. Йоханнес предполагает, что такая цифра получилась благодаря тому, что для создания JPEG-изображений использовался референсный кодировщик — cjpeg. В то время как существует более эффективный независимый кодировщик JPEG от Mozilla — MozJPEG. При сравнении разных наборов изображений из датасета от Kodak оказалось, что WebP уступает MozJPEG на больших изображениях. При этом во всех замерах с большим отрывом лидирует новый формат изображений — AVIF.

Выводы из статьи. Используйте WebP, когда сжимаются изображения меньше 500px, когда вы не можете использовать MozJPEG и когда вы можете использовать агрессивное сжатие с потерей качества.

#graphics #optimization #benchmark

https://siipo.la/blog/is-webp-really-better-than-jpeg

Мальте Юбэл из Google рассказал про историю возникновения и развития проекта Accelerated Mobile Pages — "Looking back at five years of AMP".

Проект появился в 2015 году как результат обсуждения с издателями проблем распространения контента. На тот момент большие сайты очень сильно уступали в скорости нативным приложениям. Google представил свое видение для решения этих проблем — проект AMP. Несмотря на очень хорошие показатели вовлечённости рядовых пользователей AMP столкнулся с критикой. При просмотре AMP-страниц url оригинального источника был недоступен, в top-stories выдачи google продвигался только AMP-контент. Для решения первой проблемы были привлечены разработчики браузеров, которые сделали так, чтобы при шаринге AMP-страниц копировался оригинальный URL. Позже была представлена возможность распространения AMP со сторонних доменов. Вторая проблема будет решена благодаря внедрению в поиск сигналов о скорости страниц. Обещают, что хорошо работающие страницы будут попадать в top-stories без проблем.

Интересная статья. В неё стоит заглянуть, если разрабатываете контент-проект или если интересуетесь историей web.

#history #google

https://blog.amp.dev/2020/06/19/looking-back/

Два дня назад вышла новая мажорная версия Angular. Стивен Флюин рассказал про новинки релиза — "Version 10 of Angular Now Available".

По сравнению с прошлой версией релиз получился довольно скромный. В Angular Material был добавлен элемент управления для выбора диапазона дат. При импорте CommonJS модулей фреймворк будет выводить предупреждение о потенциальных проблемах с размером бандла. Во время создания проекта с помощью ng new можно передать новый флаг --strict для включения строгих проверок в TypeScript-коде и шаблонах, отключения объявлений типа any, уменьшения порогового значения размера бандла на 75% и конфигурации приложения как side-effect free для продвинутого три-шейкинга.

Поддержка IE9, IE10 и IE Mobile объявлена устаревшей и будет удалена в следующей версии. Были обновлены зависимости: TypeScript обновлён до версии 3.9, TSLib до версии 2.0, TSLint до версии 6.

#angular #release #announcement

https://blog.angular.io/version-10-of-angular-now-available-78960babd41

Микаэль Роджерс написал пост про организацию совместимости Node.js-модулей, использующих ESM, и require — "Native ESM in Node.js with require() fallbacks".

Последние версии Node.js поддерживают нативную модульную систему и позволяют импортировать CommonJS-модули внутри ESM-файлов. Но может возникнуть ситуация, когда нужно обеспечить импорт ESM-файлов в CommonJS. Node.js не поддерживает такое направление импорта. Для обхода этого ограничения можно использовать export maps в package.json. В нём каждому файлу сопоставляются соответствующие CommonJS- и ESM-версии:

"exports": {
  ".": {
    "import": "./index.js",
    "require": "./dist/index.cjs"
  },
  "./basics.js": {
    "import": "./basics.js",
    "require": "./dist/basics.cjs"
  },
  ...
}

Для автоматического создания cjs-файлов из esm-файлов Микаэль воспользовался Rollup и небольшим конфигом.

Статья будет полезна тем, кто хотел использовать в своих пакетах ESM, но не делал этого из-за отсутствия совместимости с CommonJS.

#nodejs #esm

https://dev.to/mikeal_2/native-esm-in-node-js-w-require-fallbacks-and-support-for-all-front-end-compilers-2ded

Амит Мерчант написал пост про новую экспериментальную фичу Chrome Dev Tools — CSS Overview.

CSS Overview — это новая вкладка в Dev Tools. На ней отображается сводная информация по текущей странице: количество элементов, статистика использования разных видов селекторов, список всех использованных на странице цветов, шрифтов и медиа-выражений (очень полезно при поиске проблемных элементов). Есть раздел со списком неактивных CSS-деклараций и объяснениями, почему свойства не работают. Включить фичу можно в настройках Chrome Dev Tools: "Experiments" -> "CSS Overview".

CSS Overview немного глючит, но пользоваться им вполне можно.

#tool #css #chrome

https://www.amitmerchant.com/experimental-css-overview-feature-chrome-awesome/

Сегодня зарелизился Firefox 78 ESR. Флориан Шольц и Гарольд Киршнер рассказали про все новинки — "New in Firefox 78: DevTools improvements, new regex engine, and abundant web platform updates".

Firefox 78 — это Extended Support Release (ESR). Обычно Firefox релизится каждые четыре недели, но каждый год выходит ESR-версия, которая поддерживается в течение года. C 78-ой версии будет прекращена поддержка OS X 10.11 и ниже, пользователи этих ОС будут переключены на обновления из ESR-канала.

Для упрощения написания длинных CSS-селекторов в Firefox 78 были добавлены псевдоклассы :is() и :where(). Также теперь можно стилизовать элементы форм с помощью псевдоклассов :read-only и :read-write. Был обновлён движок регулярных выражений, теперь он поддерживает все фичи регэкспов из ECMAScript 2018. Добавлена поддержка Intl.ListFormat и улучшено форматирование чисел в ECMAScript Intl API. Был добавлен удобный метод для замены потомков DOM-узла — ParentNode.replaceChildren.

В WebAssembly добавлена поддержка расширения multi-value, с помощью которой функции могут возвращать несколько значений. Добавлена поддержка импорта и экспорта 64-битных целых чисел в параметрах функций.

В инструментах разработчика logpoints поддерживают маппинг имён переменных из транспилированного кода на имена переменных из оригинального кода. Улучшена производительность DOM-инспектора. Переработано отображение ошибок для неперехваченных ошибок промисов. На вкладке "Network" теперь можно найти причины блокировки запросов.

#firefox #release #announcement

https://hacks.mozilla.org/2020/06/new-in-firefox-78/

Симо Ахава написал статью про потенциальные опасности, которые могут возникнуть при добавлении выделенного поддомена для рекламных сетей — "What's In A CNAME".

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

Часто рекламодатели начинают просить настроить выделенный поддомен с перенаправлением на их сайт. Проблема заключается в том, что такой поддомен становится first-party и получает доступ ко всем cookies, которые были установлены для доменов верхнего уровня. Так как владельцы сайтов не имеют доступ к этим серверам, они по сути отдают все данные пользователей, которые передаются в cookie, в том числе стейт и авторизационные токены. Вендор рекламы может давать гарантии, что будет использовать только подмножество этих данных, но тем не менее это очень небезопасный подход. Симо призывает очень хорошо подумать перед тем, как настраивать поддомены для сторонних сервисов.

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

#security #dns

https://www.simoahava.com/web-development/whats-in-a-cname/

Андрэа Верличчи написал статью про опыт оптимизации метрик LCP и CLS e-commerce проекта — "Optimizing for web vitals on chloe.com".

С помощью Lighthouse можно найти DOM-узел, который генерирует LCP (Largest Contentful Paint). На chloe таким узлом был блок с изображениями товаров. Для того чтобы изображения загрузились раньше, был понижен приоритет второстепенных асинхронных запросов. У самих изображений была ограничена плотность пикселей до 2x, что позволило уменьшить размер изображений на 50%. На современных смартфонах с плотностью пикселей 3x пользователи не замечают такое уменьшение плотности изображений. Для ускорения времени отрисовки критический CSS инлайнят в html. Для этого на этапе сборки используется скрипт, который ищет все критичные CSS-блоки, содержащие специальное свойство critical: this;.

Для оптимизации CLS (Cumulative Layout Shift) было зарезервировано место для тех виджетов, которые рендерятся на клиенте. Был подобран такой дефолтный шрифт, который после замены, не вызывал сдвига контента.

Хорошая статья. Стоит заглянуть, если интересуетесь темой производительности.

#performance #metrics

https://medium.com/ynap-tech/optimizing-cls-and-lcp-on-chloe-com-8280a036122a

Демиан Рензулли и Джеф Посник рассказали про то, как использовать сервис воркеры и Streams API для быстрого перехода между страницами сайта — "App shell UX with service workers and streams".

Статья основывается на подходе, который используется сайтом dev.to. На всех страницах выделяются общие части: header, navbar, footer — они кешируются сервис воркером. При переходе на новую страницу с сервера приходит основное содержимое сайта, которое "склеивается" с закешированными частями и передаётся как результат с помощью Streams API. Благодаря использованию стримов браузер начинает рендерить шапку страницы до получения ответа сервера. Переходы между страницами страницами становятся очень быстрыми — во время навигации по сайту заголовок страницы остаётся на своём месте, создавая иллюзию SPA. В статье есть пример как реализовать такой подход с помощью библиотеки Workbox.

Рекомендую почитать статью всем, кто поддерживает многостраничные сайты и ищет способы ускорения их работы.

#serviceworker #performance

https://web.dev/app-shell-ux-with-service-workers/

Джек Франклин — разработчик Chrome Dev Tools — написал статью про важность простоты кода — "Keeping Code Simple".

Основная идея статьи. Число строк кода — это не очень адекватная метрика для оценки качества кода. Если одну задачу можно решить в несколько строк кода и если есть альтернативное решение в несколько раз больше, это не означает, что первый вариант лучше. Вполне возможно, что решение с меньшим числом строк будет менее читабельно и труднее в поддержке. Хороший код — это такой код, который прост в поддержке, лёгок в понимании и не требует больших сил для изменений.

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

#programming #musings

https://www.jackfranklin.co.uk/blog/keep-javascript-code-simple/

Представляю новый канал — Defront Plus

Наконец-то могу рассказать вам про новый канал. Хочу сразу ответь на вопрос "Зачем?".

Я очень основательно подхожу к написанию постов в Defront. Ищу материал, много читаю и выбираю из всех статей самые интересные. Сейчас на ведение канала у меня уходит 15-20 часов каждую неделю. Ограничение в один пост каждый день заставляет выбирать только наиболее интересные и полезные статьи. Мне нравится это ограничение. Благодаря ему в канал попадает только самое важное. Но это также означает, что в канал не попадают другие статьи, которые могли бы быть кому-нибудь интересны и полезны, но которые не влезают в формат канала.

Defront Plus — это приватный канал с дополнительным постами, которые не публикуются в основном канале. Он доступен для всех, кто поддерживает меня на Patreon. В Defront Plus еженедельно публикуются пять дополнительных постов (это примерно 20 дополнительных постов в месяц). Формат статей точно такой же как в основном канале — к их написанию подхожу с такой же ответственностью.

FAQ:

Вопрос: Это значит, что основной канал станет хуже?
Ответ: Нет. Я активно веду Defront Plus уже пару недель, и за это время качество постов в основном канале не ухудшилось.

Вопрос: Могу ли я читать посты, не подписываясь на Patreon?
Ответ: Можете, но нужно будет подождать. Посты будут становиться доступными и публиковаться на defront.ru спустя 9 месяцев с даты начальной публикации.

Вопрос: Есть ли примеры постов, которые публикуются в Defront Plus?
Ответ: Примеры постов можно посмотреть тут https://www.patreon.com/posts/defront-plus-38987766

Вопрос: Как получить доступ в Defront Plus?
Ответ: Нужно сделать пледж на Patreon и отправить мне через личные сообщения Patreon свой ник в telegram. Я добавлю вас в канал. Пока этот процесс не автоматизирован, поэтому в случае проблем пишите мне в лс.


Подписывайтесь на Defront Plus! Помогая мне на Patreon, вы помогаете каналу развиваться и становиться лучше.

https://www.patreon.com/myshov

В последнее время представители сообщества резко высказываются о RxJS. Бен Леш — один из основных разработчиков RxJS —  рефлексирует по этому поводу и делится своими сожалениями — "Observables, Reactive Programming, and Regret".

Первое сожаление — огромное API, которое было унаследовано много лет назад от RxNET. Некоторые операторы следовало бы удалить, но их оставили из-за совместимости.

Второе сожаление — RxJS у основной массы разработчиков ассоциируется с его операторами, а не с Observable. Observable — это паттерн, на котором построена библиотека RxJS. Его реализацию можно найти в других популярных библиотеках, например, в Relay. Сама по себе концепция Observable гораздо важнее чем все хелперы из RxJS, которые её окружают.

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

Четвёртое сожаление — разработчики ядра библиотеки не делились с сообществом подходами к написанию читабельного кода. Из-за этого возникло недопонимание, и разработчики начали считать, что на RxJS невозможно писать понятный код.

Бен пишет, что планирует поработать над этими проблемами в будущем. Вполне возможно, что в седьмой версии RxJS имплементация Observable будет выделена в отдельный пакет (про это немного говорится в статье) и будет очень сильно упрощён API.

#rxjs #musings

https://dev.to/rxjs/observables-reactive-programming-and-regret-4jm6

Скотт Джел написал пост про необходимость сбора метрик сайтов, учитывающих средства доступности, — "We need more inclusive web performance metrics".

Метрики FCP и LCP, которые предоставляют браузеры, — отличные средства для анализа скорости появления контента на странице. Но эти метрики отражают опыт работы с сайтами не всех пользователей. Для кого-то контент может быть недоступен, пока страница не станет полностью интерактивна, так как многие web-приложения добавляют интерактивность для средств доступности с помощью загружаемого JavaScript. То есть если пользователь использует скринридер, то он не сможет получить доступ к странице, пока на ней не будет выполнен необходимый JavaScript-код.

Скотт предлагает несколько идей по адаптации текущих метрик производительности и призывает сообщество присоединиться к обсуждению этого вопроса.

#a11y #metrics #performance

https://www.filamentgroup.com/lab/a11y-ready/

Сергей Ufocoder написал статью про полиморфизм — "Полиморфизм простыми словами".

Многие разработчики знакомы с полиморфизмом только в контексте ООП, но это далеко не всё, что стоит за этим понятием. По большому счёту любой код, который без изменения может работать с разными типами, может считаться полиморфным. Лука Карделли и Питер Вагнер в научной статье "On Understanding Types, Data Abstraction, and Polymorphism" обобщили все виды полиморфизма и выделили две группы. В первую группу (универсальный полиморфизм) попадают параметрический полиморфизм и полиморфизм включений. Во вторую группу (специальный полиморфизм) попадают перегрузка и приведение типов. В статье подробно разбирается введённая классификация на примере JavaScript, Python, C++ и TypeScript.

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

#programming

https://medium.com/devschacht/polymorphism-207d9f9cd78

Google активно работает над концепцией "Ambient Computing". Её идея заключается в том, чтобы на первый план вышли приложения и сервисы, "растворив" железо, на котором они работают, предоставив пользователям возможность использовать любое приложение на любой платформе.

Под концепцию "Ambient Computing" попадает всё, что происходит с Flutter — тулкитом для написания кросс-платформенных приложений на языке Dart, использующих нативные элементы интерфейса.

Сейчас Flutter поддерживает разработку приложений для Web, iOS и Android. В прошлом году была анонсирована поддержка десктопных операционных систем. На данный момент есть alpha-версия Flutter, поддерживающая macOS, параллельно ведётся работа над поддержкой Windows. Сегодня была представлена Linux-версия, над которой работали ребята из Canonical (Ubuntu). Flutter для Linux использует интерфейсные элементы GTK+, но пока поддержка Linux находится в состоянии alpha.

Ambient Computing — очень амбициозная идея, чтобы она полетела, имхо, Google нужно привлечь разработчиков профессиональных приложений (Adobe, Autodesk и т.п.)

#announcement #flutter #dart

https://medium.com/flutter/announcing-flutter-linux-alpha-with-canonical-19eb824590a9

Рейчел Эндрю рассказала про новые фичи CSS, поддержка которых потихоньку начинает появляться в браузерах — "CSS News July 2020".

В последних версиях Firefox и Chrome появилась поддержка Flexbox Gaps. Благодаря ей можно задавать расстояние между flex-элементами. Это свойство работает также как grid-gap, grid-row-gap, grid-column-gap в гридах (префикс grid- теперь необязателен).

В Chrome Canary добавлена поддержка свойства aspect-ratio, с помощью которого задаётся соотношение сторон контейнера. Например, aspect-ratio: 2 / 1 говорит о соотношении 2:1 (две единицы приходятся на ширину, одна на высоту).

В Firefox с помощью флага layout.css.grid-template-masonry-value.enabled можно включить экспериментальную поддержку раскладки "Masonry". Авторы спецификации пока сомневаются, что Masonry должна быть частью спецификации CSS Grid, так что в будущем возможны изменения.

В конце 2019 года в Firefox в гридах появилась поддержка subgrid. Благодаря ей дочерние гриды могут наследовать количество треков и их размеры от родительских гридов. Команда разработчиков Edge планирует добавить поддержку subgrid в Chromium в этом году.

Планируется добавление медиа-выражения prefers-reduced-data: reduce. С его помощью можно, например, заменить тяжёлые изображения на плейсхолдеры, если у пользователя в браузере включена опция снижения потребления траффика.

В Firefox и Chrome Beta доступен псевдоэлемент ::marker. Благодаря ему можно гибко стилизовать маркер у элемента списка. Также с его помощью можно добавить маркер к любому элементу на странице.

Рейчел призывает потестировать новые фичи и поделиться своим фидбеком.
 
#css

https://www.smashingmagazine.com/2020/07/css-news-july-2020/

Начался опрос State Of Frontend 2020. Можно пройти, а можно просто подписаться на результаты (внизу страницы)

https://tsh.io/state-of-frontend/