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

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

Также хочу передать привет всем дружественным каналам и сообществам (если кого-то забыл, пишите в лс):
@ufostation @javanoscript_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.

#typenoscript

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

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

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

В этом методе для идентификации пользователей используются фавиконки. Сначала на сервере подготавливается набор путей с уникальными фавиконками. Каждому пути соответствует один бит идентификатора пользователя, например для четырёхбитного идентификтатора они могут выглядеть так: ['/a', '/b', '/c', '/d'] -> 1111. При посещении сайта, пользователю присваивается уникальный идентификатор, например "3" (0011 в двоичном виде) и запускается серия редиректов для тех путей, на которые приходится единица идентификатора (['/c', '/d']), с каждым редиректом браузер запрашивает уникальную для данного роута фавиконку и сохраняет её в favicone cache (F-Cache). При повторном посещении сайта, пользователь снова прогоняется через серию редиректов в этот раз по всем путям; сервер тем временем восстанавливает идентификатор пользователя, наблюдая за тем, какие фавиконки были загружены.

У этого подхода фингерпринтинга есть проблема — скорость установки и чтения такой "куки". В моих экспериментах На установку и чтение 15-битного идентификатора ушло около 10 секунд. В оригинальной статье написано, что при хороших сетевых условиях для установки и чтения 34-битного идентификатора (17 миллиардов записей) требуется восемь секунд.

#privacy #research

https://supercookie.me/workwise
https://github.com/jonasstrehle/supercookie

Кэти Хемпениус написала статью о лучших практиках создания каруселей — "Best practices for carousels".

С точки зрения производительности не рекомендуется использовать JS для динамического создания каруселей, так как такой подход негативно влияет на метрику LCP (Largest Contentful Paint). Для создания каруселей рекомендуется использовать обычную HTML-разметку и Scroll Snap API.

С точки зрения UX не рекомендуется использовать автоматическое переключение слайдов карусели, так как анимации у пользователей ассоциируются с рекламой. Если от автоматического переключения отказаться нельзя, то переключение слайдов нужно временно останавливать при наведении курсора на слайд.

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

#performance #ux

https://web.dev/carousel-best-practices/

Гал Шлёзингер поделился подходом для создания лёгкого встраиваемого виджета — "HTML over the wire with Preact".

Галу надо было сделать интерактивный виджет, который можно встроить на любой сайт. Он хотел как можно сильнее уменьшить размер js-бандла виджета, поэтому вместо React выбрал Preact. Для работы с GrahpQL на стороне клиента была выбрана библиотека urlq, но её размер тоже был очень большим. В итоге вместо отправки JSON стал отправлять на клиент уже готовую разметку HTML (проект это позволял). Так как dangerouslySetInnerHTML ломал доступность (пропадал фокус и DOM-состояние при замене разметки), он воспользовался библиотекой preact-markup для преобразования полученной HTML-размеки в Preact-элементы, чтобы работал diff виртуального DOM при замене элементов.

В общем, довольно интересный подход, его также можно использовать в React.

#preact #architecture

https://gal.hagever.com/posts/hotwire-in-preact-apps/

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

— Какие оптимизации используются в VS Code для ускорения загрузки
— Золотое правило производительности
— Влияние скорости работы сайта на SEO
— Корректное отслеживание интервалов времени в браузерах
— Текущее состояние 5G-сетей в мире и их влияние на производительность
— Бенчмарк минификаторов JavaScript
— Проектирование переиспользуемых UI-блоков
— Как используют Webpack в Avito
— Сравнение производительности Cypress, Puppeteer, Selenium и Playwright
— Опыт использования React в Enterprise-секторе

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

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

https://www.patreon.com/myshov