Сегодня вышла новая версия Firefox. Крис Миллс рассказал про основные новинки релиза — "January brings us Firefox 85".

В CSS реализована поддержка :focus-visible. Этот псевдоэлемент позволяет стилизовать кольцо фокуса для тех случаев, когда оно должно быть отображено браузером (например, кольцо фокуса по умолчанию не отображается при клике на кнопку, но появляется при навигации по странице с клавиатуры).

Добавлена поддержка хинта производительности <link rel="preload" ...>. Он позволяет заблаговременно подгрузить ресурсы, которые нужны для отображения текущей страницы.

Полностью удалена поддержка Flash. К этому моменту разработчики шли пять лет.

В ночных сборках Firefox добавлена поддержка top-level await и метода .at() для получения элементов массива/строк с помощью относительных индексов.

#release #firefox

https://hacks.mozilla.org/2021/01/january-brings-us-firefox-85/

В Firefox 85 для всех пользователей включён изолированный кэш для борьбы с супер-куками — "Firefox 85 Cracks Down on Supercookies".

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

В Firefox 85 была включена изоляции для разных видов кэшей: HTTP-кэша, кэша изображений, кэша для favicon, HSTS, OCSP, CSS и т.п. Изоляция может незначительно влиять на производительность — время загрузки сайта для самого наихудшего случая увеличилось на 1.32%.

Firefox стал последним популярным браузером, который реализовал изолированный кэш для ресурсов.

#firefox #cache #performance

https://blog.mozilla.org/security/2021/01/26/supercookie-protections/

Аксель Раушмайер написал статью про отличия между undefined и null — "undefined vs. null revisited".

Спецификация описывает эти значения следующим образом: undefined используется как значение по умолчанию в неинициализированных переменных; null используется как значение, которое явно устанавливается разработчиком как признак отсутствия любого объектного значения.

Для выбора между undefined и null Аксель использует правило: undefined — это метазначение, которое существует на уровень выше кода программы, и оно означает, что что-то не существует или отсутствует; null — существует на уровне кода программы, и оно означает, что что-то "отключено".

Мне не очень нравится метафора с "отключением" с помощью null, но нравится идея undefined как метазначения. Как бы то ни было, статья полезная, рекомендую почитать.

#js

https://2ality.com/2021/01/undefined-null-revisited.html

Defront сегодня празднует второй день рождения. В январе 2019 года мне захотелось поделиться прочитанной статьёй со своими коллегами во внутреннем чате Яндекс.Маркета. Написал небольшой tldr и подумал, что такой формат будет полезен большему числу людей. Потом пошло-поехало, и вот вас уже больше 5000.

Благодарю за помощь в развитии канала:
Сергея Рубанова (@webnya — крутой канал про web-стандарты и новинки web'а от участника TC39)
Олега Ковалёва (@oleg_log — сильный канал про бэкенд и программирование в целом)

Также хочу передать привет всем дружественным каналам и сообществам (если кого-то забыл, пишите в лс):
@ufostation @javascript_ru
@typesafesound @amorgunov
@frontend_u_news
@forwebdev @winterview
@dereference_pointer_there
@evodevclub @Loskirs
@htmlshit @prostorazrabotka
@we_use_js @css_ru

Спасибо всем за помощь и поддержку!

P.S. Если считаете нужным, можете сделать подарок каналу и рассказать про Defront своим друзьям, коллегам и подписчикам.

https://twitter.com/myshov/status/1355105595997757442

Джек Арчибальд написал статью про опасность использования функций в качестве коллбеков — "Don't use functions as callbacks unless they're designed for it".

Скорее всего вы когда-нибудь сталкивались с подобным кодом: [1, 2, 3].map(doSomething). Если doSomething поставляется внешней библиотекой и принимает один аргумент, то всё будет работать нормально. Но код может сломаться, когда doSomething начнёт принимать больше аргументов. Джек пишет о том, что если функция не создавалась с явным учётом того, что она будет использоваться в качестве коллбека, то вместо неё безопаснее использовать функцию-враппер [1, 2, 3].map(x => doSomething(x)).

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

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

#js

https://jakearchibald.com/2021/function-callback-risks/

В блоге GitHub была опубликована статья про оптимизацию анимаций и изображений — "Making GitHub’s new homepage fast and performant".

При разработке новой домашней страницы GitHub ребята столкнулись с проблемой — в коде не было явного перечисления анимируемых свойств transition: * 0.6s ease;, что приводило к повышенному потреблению CPU. Для решения этой проблемы они стали анимировать только opacity и transform: transition: opacity 0.6s ease, transform 0.6s ease;.

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

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

#performance

https://github.blog/2021-01-29-making-githubs-new-homepage-fast-and-performant/

Дейв Седдиа написал статью про современную экосистему React — "State of the React Ecosystem in 2021".

Этот обзор был вдохновлён вопросом на reddit, где участник задал вопрос про актуальность подходов, которые были популярны в 2016 году. За пять лет в мире React произошло много изменений. Появились хуки, стабилизировался Context API, появилась экспериментальная поддержка Suspense и Server Components. Redux остаётся популярным решением для работы с состоянием, но очень сильно сдаёт свои позиции. Для загрузки данных набирают популярность библиотеки react-query и swr. Для описания сложной логики используют библиотеку XState.

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

#react

https://daveceddia.com/react-ecosystem-overview/

Мод Нальпас написала статью о том, в каких случаях следует использовать HTTPS для локальной разработки — "When to use HTTPS for local development".

Для разработки лучше всего использовать http://localhost, так как браузеры в этом случае разрешают использовать многие API, которые доступны только с HTTPS (сервис воркеры, Payments API, Credentials API и т.п.) Но если нужно протестировать Secure Cookies, HTTP/2, исправить проблему с mixed content или если в hosts-файле стоит резолвинг 127.0.0.1 в уникальное имя, то нужно использовать HTTPS.

Если используется уникальное имя, то оно не должно совпадать с доменом верхнего уровня, иначе могут быть проблемы с резолвингом. В качестве альтернативы Мод предлагает использовать специальные домены верхнего уровня .test и .localhost. Все имена с доменом верхнего уровня .localhost будут работать так же, как и http://localhost, но только в Chrome и Edge.

#http

https://web.dev/when-to-use-local-https/

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

— Igalia о процессе имплементации focus-visible в WebKit
— Как написать ясный текст
— Как задеприкейтить сигнатуру функции с помощью TypeScript
— Является ли разработка ПО инженерной дисциплиной
— Причины плохой производительности сайтов, использующих Ember
— Автоматическая генерация атомного CSS
— Проблемы рендеринга изображений во flex-контейнерах в WebKit
— Альтернативный подход к разработке на JavaScript
— Опыт использования Node.js с Apple M1
— Minimum viable experience и прогрессивное улучшение

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

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

https://www.patreon.com/myshov

Мод Нальпас во второй статье рассказала о том, как настроить HTTPS для локальной разработки — "How to use HTTPS for local development".

Для настройки локального HTTPS удобнее всего использовать утилиту mkcert. Mkcert — это zero-config утилита для настройки локального HTTPS. С помощью команды mkcert -install создаётся локальный certificate authority (CA), с помощью команды mkcert <domain_name> создаётся сертификат, который нужно использовать при настройке локального HTTP-сервера.

Ещё можно использовать самоподписанный сертификат или сертификат подписанный внешним CA. Но эти варианты не очень гибки и удобны по сравнению с mkcert.

#http #tool

https://web.dev/how-to-use-local-https/

Apple вместе с W3C Privacy Community Group представили приватный механизм для отслеживания кликов, который в первую очередь предназначен для измерения эффективности рекламы — "Introducing Private Click Measurement, PCM".

Для отслеживания эффективности рекламы сейчас используют куки. С точки зрения приватности, это не очень хорошее решение, так как пользователи, кликнувшие по рекламе, могут быть затреканы. Apple вместе с W3C Privacy Community Group разрабатывают другой подход с отложенным отправлением данных о кликах.

Принцип работы PCM. При клике по ссылке со специальными атрибутами во внутреннем хранилище браузера на семь дней сохраняется информация о клике. Сайт, на котором был произведен переход, для регистрации клика должен сделать GET-запрос к рекламной платформе по URL https://social.example/.well-known/private-click-measurement/trigger-attribution/<data>/<priority> (ведётся работа над тем, чтобы можно было отказаться от GET-запросов). Браузер при обращении к такому URL сравнивает данные из URL с сохранёнными данными клика в хранилище и, если они совпадают, через 24-48 часов отправляет анонимный отчет о клике рекламной платформе. Также есть возможность отслеживать переходы по рекламным баннерам из нативных приложений.

Экспериментальная поддержка PCM уже есть в бете iOS и iPadOS 14.5.

#apple #proposal #privacy

https://webkit.org/blog/11529/introducing-private-click-measurement-pcm/

Максим Садым из Google написал небольшой пост о том, как было ускорено открытие DevTools в Chrome 85 — "Improving DevTools startup time".

При открытии DevTools, браузеру нужно выполнить код с помощью V8. Этот код сериализовывался в строку, которая на стороне V8 выполнялась с помощью eval. Оказалось, что от сериализации можно было избавиться. Для этого был добавлен новый метод в API mojo (механизм, который используется Chromium для передачи команд из DevTools в V8). Благодаря этой оптимизации время старта DevTools сократилось на 13% (с 11,2 до 10 секунд).

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

#chromium #internals

https://developers.google.com/web/updates/2021/02/faster-devtools-startup

Стэфан Баумгартнер показал на примере как затипизировать сложную функцию для отправки запросов — "Dynamic Static Typing In TypeScript".

В статье разбирается типизация Express-like функции для отправки GET-запросов. Сначала она типизируется "в лоб". Потом пример немного усложняется: добавляются юнионы, дженерики. В конце статьи разбирается довольно интересный кейс с использованием литеральных шаблонных типов и рекурсивных условных типов (появились в TypeScript 4.1) для извлечения имён параметров из строки.

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

#typescript

https://www.smashingmagazine.com/2021/01/dynamic-static-typing-typescript/

Мэтт Хоббс — эксперт в области web-производительности — рассказал о том, как проводить аудит производительности интранет-сайтов — "The web performance of internal systems is important, so optimise them too".

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

Для анализа производительности можно развернуть локальные версии WebPageTest и Sitespeed.io. С помощью браузерных девтулзов можно проанализировать производительность в рантайме. Если есть доступ к аналитике, то её можно расширить метками производительности с помощью Perfume.js.

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

#performance

https://nooshu.github.io/blog/2021/02/03/the-importance-of-internal-system-performance/

Юна Кравец написала статью про новое CSS-свойство aspect-ratio — "New aspect-ratio CSS property supported in Chromium, Safari Technology Preview, and Firefox Nightly".

Явное указание соотношения сторон критично в отзывчивом дизайне и для того чтобы предотвратить внезапный сдвига контента во время загрузки страницы.

Сегодня для задания соотношения сторон элементов можно использовать "Padding-Top Hack", но это решение неинтуитивно и требует абсолютного позиционирования у элементов. Новое CSS-свойство aspect-ratio позволяет задать соотношение сторон у любых элементов на странице в более логичном виде:

.container {
  width: 100%;
  aspect-ratio: 16 / 9;
}

Поддержка aspect-ratio уже появилась в Chrome 88. В Safari и Firefox aspect-ratio появится в следующих версиях.

#css

https://web.dev/aspect-ratio/

В блоге sqreen была опубликована статья про эксперименты с удалённой отладкой Node.js — "Experimenting with remote debugging: Node.js runtime code injection".

Любой Node.js-процесс, работающий на Linux или macOS, можно перевести в режим отладки с помощью сигнала SIGUSR1: kill -USR1 <PID>. Затем к этому процессу можно подключиться с помощью Chrome DevTools, поставить брекпойнты, проинспектировать код и сделать всё, что можно сделать в отладчике.

В статье разбирается другой подход — внедрение кода в работающий процесс. Для этого используется библиотека chrome-remote-interface, которая реализует протокол Chrome DevTools, но предоставляет больше возможностей, чем стандартный JS-отладчик в браузере.

Автор статьи пишет, что нигде не встречал подобный подход, но он может использоваться для создания мощных инструментов отладки Node.js.

#nodejs #debug

https://blog.sqreen.com/remote-debugging-nodejs-runtime-code-injection/

Элад Шехтер подробно разобрал логику применения дефолтных стилей в браузерах — "How Does CSS Work?".

При отображении HTML-элементов к ним всегда применяются стили. Эти стили могут прийти из разных источников:
— значения CSS-свойств по умолчанию из CSS-движка;
— значения элементов, переопределённые с помощью "внутренних" каскадных таблиц стилей браузера (User-Agent Stylesheet);
— стили для нормализации отображения элементов между разными браузерами (normalize.css);
— стили со сбросом значений CSS-свойств (reset.css).

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

* {
  all: unset; 
  display: revert;
}

*, *::before, *::after{ 
    box-sizing: border-box;
}

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

#css

https://elad.medium.com/how-does-css-work-92fe7116916d

Райан Карниато — автор библиотеки Solid.js — написал статью о общих принципах работы точечной реактивности — "A Hands-on Introduction to Fine-Grained Reactivity".

Точечная реактивность (fine-grained reactivity) используется в MobX, Vue, Svelte, Knockout и Solid. Если объяснять совсем просто, то её суть сводится к выполнению реакций при изменении наблюдаемых значений. Точно также как меняется результат выполнения формулы в Excel при изменении ячеек, которые используются формулой. Если продолжать аналогию, то эти "ячейки" в разных библиотеках называются по-разному: Signals, Observables, Atoms, Subjects, Refs, — а "формулы": Reactions, Effects, Autoruns, Watches, Computeds.

В статье нет каких-либо деталей реализации, но её можно рекомендовать как хорошее введение в тему точечной реактивности.

#jsframeworks #reactivity #architecture

https://dev.to/ryansolid/a-hands-on-introduction-to-fine-grained-reactivity-3ndf

Алекс Бирсан — исследователь в области информационной безопасности — опубликовал статью о том, как ему удалось получить доступ к внутренним сетям 35 организаций — "Dependency Confusion: How I Hacked Into Apple, Microsoft and Dozens of Other Companies".

Из публичных источников (GitHub, ресурсы сайтов и т.п.) были собраны имена приватных пакетов, которые доступны только из внутренних сетей организаций. Для этих пакетов в публичных репозиториях (npm, PyPi, RubyGems) были опубликованы одноимённые пакеты. Из-за ошибки в конфигурации некоторые билд-системы начали скачивать и устанавливать пакеты из публичного репозитория. Таким образом Алекс получил доступ к внутренним сетям Apple, Microsoft, PayPal, Uber, Yelp.

После публикации статьи Microsoft выпустила документ с рекомендациями для предотвращения подобных ошибок в npm, yarn, NuGet Gallery, Pip, Gradle и Maven Central.

Советы для npm: используйте scoped packages, настройте npm так, чтобы в приоритете был приватный реестр, не удаляйте package-lock.json и используйте npm ci для установки зависимостей.

#security #npm

https://medium.com/@alex.birsan/dependency-confusion-4a5d60fec610
https://azure.microsoft.com/en-us/resources/3-ways-to-mitigate-risk-using-private-package-feeds/

В блоге skypack была опубликована отличная статья-обзор современных библиотек для работы с датами — "The best JavaScript date libraries in 2021".

По набору возможностей лидером стал date-fns. Он предоставляет отличную документацию, функциональную модульную архитектуру и очень много утилит для работы с датами. Эту библиотеку можно использовать без бандлеров.

Для работы с часовыми поясами лучше всего подходит Luxon. Luxon под капотом использует браузерное API Intl, оборачивая всё в иммутабельное и дружественное API.

Если вам нужен самый минимум от работы с датами, а с нативным Date работать не хочется, то можно воспользоваться Day.js (размер 4kb). Day.js предоставляет API очень похожее на Moment.js. Moment.js в свою очередь не рекомендуются использовать, так как он был задеприкейчен в 2020 году.

#library #date

https://www.skypack.dev/blog/2021/02/the-best-javascript-date-libraries/