Стэфан Баумгартнер показал на примере как затипизировать сложную функцию для отправки запросов — "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

Джаред Уайт рассказал, почему он больше не хочет использовать Tailwind CSS — "Why Tailwind Isn't for Me".

Tailwind CSS — это набирающий популярность CSS-фреймворк, использующий методологию атомного CSS, в которой для каждой комбинации свойство/значение используется уникальный класс. Джаред пишет, что проработал с Tailwind год, но не смог свыкнуться с его недостатками:

— HTML-код с Tailwind выглядит неэстетично
— Для упрощения работы с фреймворком используется директива @apply, которая не является стандартом и в перспективе может принести проблемы, если проект будет переезжать на другой CSS-фреймворк
— Tailwind использует дизайн-токены, которые определяется с помощью JavaScript, а не с помощью кастомных свойств
— Tailwind плохо подходит для работы с web-компонентами
— Использование Tailwind поощряет использование большого количества div'ов и span'ов

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

#css #library #musings

https://dev.to/jaredcwhite/why-tailwind-isn-t-for-me-5c90

Филип Уолтон рассказал о том, как можно улучшить отзывчивость страницы с помощью паттерна "Idle Until Urgent".

Инициализация и выполнение JavaScript при загрузке сайта может негативно повлиять на метрики производительности. Для улучшения отзывчивости страницы Филип предлагает использовать паттерн idle-until-urgent. В этом паттерне выполнение ресурсоёмких задач откладывается с помощью метода requestIdleCallback, при этом код может быть выполнен сразу, если это, действительно, нужно. После внедрения этого паттерна в блоге Филипа First Input Delay уменьшился в три раза с 254 мс до 85 мс.

Очень рекомендую почитать статью. Idle-until-urgent использует команда VS Code для улучшения отзывчивости приложения.

#performance

https://philipwalton.com/articles/idle-until-urgent/

Саймон Харн рассказал о том, как предотвратить сдвиг контента из-за загрузки web-шрифтов — "How to avoid layout shifts caused by web fonts".

Сдвиг контента (CLS) — это метрика Web Vitals, в будущем она будет влиять на алгоритм ранжирования результатов Google. Самый железный вариант предотвращения сдвига из-за загрузки шрифтов — использование font-display: optional. В этом случае браузер будет ждать загрузки шрифта 100мс, делая фоллбек на системный шрифт после истечения этого времени. Таким образом при первом посещении сайта пользователи с большой вероятностью увидят страницу с фоллбек-шрифтом без сдвига контента; при переходах на другие страницы сайта шрифт будет уже находится в кэше браузера и будет применяться к тексту на странице без задержек.

Если font-display: optional использовать невозможно, тогда нужно оптимизировать время доставки шрифта. Для этого можно использовать сабсеттинг, отказаться от формата woff и использовать woff2, делать предзагрузку шрифтов. Если используется font-display: swap, тогда нужно настроить метрики шрифта фоллбека так, чтобы они совпадали с загружаемым шрифтом, в этом могут помочь font-display modifiers (f-mods) — новые свойства @font-face.

#performance #fonts

https://simonhearne.com/2021/layout-shifts-webfonts

В декабре 2020 года вебу исполнилось 30 лет. Дэниэл Кэо вспомнил ранние дни веба и написал про это статью — "Out of the Matrix: Early Days of the Web".

Дэниэл работал техническим писателем и редактором журнала NeXTWORLD, когда он узнал про Тима Бернерса-Ли и его проект World Wide Web. Дэниэл познакомился с Тимом и захотел опубликовать статью про веб, но ему не получилось убедить главного редактора, так как интернет тогда был в зачаточном состоянии, и им пользовались только учёные из CERN.

Интересно, что самый первый браузер — Nexus, который был сделан Тимом Бернерсом-Ли до Mosaic — имел встроенные инструменты для редактирования HTML-страниц. Потом эту функциональность добавили нативно в SDK NeXTSTEP. Но с релизом браузеров за пределами операционной системы NeXT, эта функция потерялась.

Ещё Дэниэл предложил Тиму использовать вместо HTML новый формат для редактируемого PostScript от Adobe (который получил название PDF). Он организовал встречу Роберта Кайо (одна из ключевых фигур в популяризации веба) c менеджментом Adobe, но, как мы уже знаем, HTML пережил это событие.

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

#web #history

https://blog.yax.com/posts/early-days-of-the-web-1991/

Несколько дней назад команда разработчиков Vue зерилизила Vite 2.0. В статье "Announcing Vite 2.0" Эван Ю рассказал о новом проекте.

Vite — это сборщик и dev server, использующий ESM, для ускорения применения изменений на этапе разработки. По своей философии он очень похож на Snowpack и WMR.

Vite создавался для улучшения разработки Vue-приложений, но команда разработчиков решила сделать его независимым от Vue (на данный момент есть поддержка Vue, React, Preact и LitElement). Из-за смены курса разработки первая версия так и не достигла стабильной версии, поэтому Vite 2.0 можно считать официальной первой стабильной версией.

Vite очень похож на Snowpack, но в нём есть несколько уникальных фич: поддержка автоматического код-сплиттинга для CSS, поддержка многостраничных приложений, есть режим для разработки браузерных библиотек, есть встроенная поддержка монорепозиториев и CSS-препроцессоров.

#tool #bundle

https://dev.to/yyx990803/announcing-vite-2-0-2f0a

Нолан Уолсон рассказал про возможные способы кастомизации web-компонентов — "Options for styling web components".

Нолан сделал web-компонент для выбора эмоджи. Он задался вопросом, как сделать так, чтобы пользователи компонента могли адаптировать его под любой дизайн, и нашёл четыре возможных решения:

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

#webcomponents

https://nolanlawson.com/2021/01/03/options-for-styling-web-components/

В блоге web.dev Томас Штайнер опубликовал подробное руководство по работе со стримами — "Streams—The definitive guide".

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

В руководстве подробно объясняется механизм работы ReadableStream, WritableStream и TransformStream с понятными примерами их использования.

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

#js

https://web.dev/streams/

Дэн Абрамов рассказал о простом, но неочевидном подходе для уменьшения лишних ререндеров React-компонентов — "Before You memo()".

Перед тем как использовать memo и useMemo для предотвращения ререндеров, имеет смысл попробовать разбить компонент на stateful- и stateless-части (поднять вверх стейт). Также можно передать stateless-компонент через пропс в stateful-компонент (поднять вверх контент). При ререндере stateful-компонента переданный через пропс компонент не будет ререндериться. Использование такого подхода откроет в будущем новые возможности для оптимизаций, например, для предотвращения ререндеринга серверных компонентов.

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

#react #performance

https://overreacted.io/before-you-memo/

Вчера вышел Firefox 86. Крис Миллс рассказал про основные новинки релиза — "A Fabulous February Firefox — 86!"

Появилась поддержка CSS псевдокласса :autofill. С помощью этого псевдокласса можно кастомизировать <input> после его автозаполнения.

Добавлена поддержка конструктора Intl.DisplayNames для консистентного перевода регионов, языков и начертаний.

В бете Firefox появилась поддержка CSS-функции image-set() для создания отзывчивых изображений на уровне CSS.

Стала удобнее отладка iframe'ов в инструментах разработчика — добавлена кнопка, с помощью которой можно выбрать контекст отладки.

#release #firefox

https://hacks.mozilla.org/2021/02/a-fabulous-february-firefox-86/