Defront — про фронтенд-разработку и не только

Юна Кравец написала статью про новое 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/

Мэтт Хоббс — эксперт в области 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/

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

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

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

#typescript

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

Максим Садым из 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

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/

Мод Нальпас во второй статье рассказала о том, как настроить 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/

За прошедшие две недели в канале для патронов 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 для локальной разработки — "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/

Дейв Седдиа написал статью про современную экосистему 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/

В блоге 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/

Джек Арчибальд написал статью про опасность использования функций в качестве коллбеков — "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/

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

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

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

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

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

#js

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

В 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/

Сегодня вышла новая версия 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/

Матиас Шэфер написал продолжение статьи о работе с унаследованным кодом. В статье "Maintaining JavaScript applications in the long term" он рассказывает об опыте поддержки фронтенд-проекта на протяжении шести лет.

В 2014 году ребята сделали сайт для организации экономического сотрудничества и развития. Для разработки использовали популярные на тот момент CoffeeScript, D3, jQuery и Backbone. Так как сайт надо было постоянно дорабатывать, и клиент не был готов к глобальному рефакторингу, потихоньку проводилась модернизация кода. CoffeeScript был заменён на современный JavaScript. Для автоматической конвертации кода использовали утилиту decaffeinate, всё прошло без проблем. Для улучшения опыта разработки стали использовать TypeScript и описания типов в JSDoc. За всю жизнь проекта больше всего проблем было не с библиотеками, а с созданными абстракциями.

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

#js

https://9elements.com/blog/maintaining-javascript-applications-in-the-long-term/

Матиас Шэфер написал статью про опыт поддержки больших JavaScript-приложений — "Maintaining large JavaScript applications".

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

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

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

#js

https://9elements.com/blog/maintaining-large-javascript-projects/

Марк Эриксон — майнтейнер Redux — написал статью с подробным объяснением, почему Context в React не может заменить стейт-менеджеры — "Why React Context is Not a "State Management" Tool (and Why It Doesn't Replace Redux)".

React Context — это механизм, который упрощает передачу значений от родительского компонента дочерним компонентам вне зависимости от уровня вложенности. Context используют вместе с хуком useReducer в качестве альтернативы стейт-менеджерам. Но в отличие от традиционных стейт-менеджеров такой подход не позволяет эффективно решить все вопросы управления данными приложения. Context может подойти для управления состоянием маленького приложения, но его сложно использовать в большом приложении, над которым работает команда разработчиков. Также современные стейт-менеджеры берут на себя вопросы с лишними ререндерами компонентов.

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

#react #statemanagement

https://blog.isquaredsoftware.com/2021/01/context-redux-differences/

Пару дней назад был опубликован черновик спецификации CSS Cascading and Inheritance Level 5. Главное изменение спеки — добавление директивы @layer для гибкого управления каскадом. София Валитова разобралась с новой директивой и написала про неё статью в своём блоге — "Пара слов о layer".

С помощью CSS-директивы @layer создаётся именованная группа стилей, которая подчиняется особым правилам каскадности. Обычно, когда для одного и того же элемента находится несколько разных правил, побеждает то правило, которое было определено ниже (без учёта специфичности), или правило с большей специфичностью. То есть каскад правил, который будет применяться к элементам, формируется неявно, разработчик может влиять на него косвенно, изменив порядок правил или повысив специфичность. Директива @layer предоставляет явный механизм для управления этим приоритетом. Например, в примере ниже цвет текста кнопки будет красным, а не зелёным, хотя правило с зелёным цветом было определено по коду ниже:

@layer components, common;

@layer common {
  button {
    color: red;
  }
}

@layer components {
  button {
    color: green;
  }
}

Директива layer может пригодиться для структурирования стилей, при рефакторинге и темизации. Но на данный момент её поддержки нет ни в одном браузере.

#spec #css

https://ariarzer.dev/css-cascade-layer.html

P.S. София ведёт телеграм-канал с разбором спек CSS. Если хотите углубить свои знания в этой теме, очень рекомендую подписаться @css_mind.

Джон Снейерс из Cloudinary написал статью о проблемах адаптации новых форматов изображений, и как эти проблемы могут быть решены с помощью JPEG XL — "Legacy and Transition: Creating a New Universal Image Codec".

JPEG XL — это открытый формат изображений, разрабатываемый Joint Photographic Experts Group, Google и Cloudinary. JPEG XL предоставляет прогрессивную загрузку, лучшую скорость кодирования/декодирования и лучшее качество сжатия при сравнимом объёме файла по сравнению с WebP.

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

Комитет JPEG планирует отправить последнюю версию черновика стандарта в ISO и IEC в этом месяце. Если у проверяющих организаций не будет вопросов, то черновик будет опубликован как международный стандарт в июле.

#graphics

https://cloudinary.com/blog/legacy_and_transition_creating_a_new_universal_image_codec