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

Channel name was changed to «Defront — про фронтенд-разработку и не только»

Про войну в Украине

Шлю лучи поддержки братьям и сёстрам украинцам. В моём окружении нет ни одного человека, кто бы поддерживал текущие действия российских властей. Во всех соцсетях я вижу только посты с осуждениями текущей ситуации несмотря на то, что говорят по телевизору. Это заставляет верить, что российский народ не хочет войны, все хотят, чтобы текущая ситуация разрешилась как можно скорее.

Мне больно видеть происходящее. Но я хочу и буду верить, что наши власти увидят осуждение своих действий внутри России и остановят весь этот бред.

Qwik — возобновляемый JavaScript-фреймворк

Райан Карниато поделился своими мыслями после работы с Qwik — новым фреймворком от автора Angular — "Resumable JavaScript with Qwik".

Qwik — это представитель новой категории возобновляемых фреймворков. Его основная особенность — прогрессивная гидрация приложения без обязательной загрузки кода приложения. Qwick единственный в своём роде фреймворк, полноценно реализующий эти идеи, кардинально уменьшая метрику Time To Interactive. Фреймворк при компиляции расставляет в HTML специальные маркеры, которые содержат необходимые данные и ссылки на код, который нужно загрузить перед выполнением. Таким образом реализуется поддержка ленивой инициализации приложения.

Qwik находится на этапе активной разработки. На данный момент его не рекомендуется использовать для production-приложений.

#jsframeworks #performance

https://dev.to/this-is-learning/resumable-javascript-with-qwik-2i29

Обработка ошибок с помощью reportError

Стэфан Джудис рассказал про малоизвестный метод для облегчения обработки ошибок в библиотечном коде — "New in JavaScript: reportError – a method to report to global event handlers".

Для логирования ошибок на странице часто устанавливают глобальный обработчик события error. Библиотеки могут редиректить возникающие исключения в этот глобальный обработчик с помощью setTimeout, но такой код выглядит как хак. Для упрощения решения этой проблемы в платформу был добавлен специальный метод reportError:

try {
  fn();
} catch (error) {
  // добавление кастомной обработки исключений и
  // вызов глобального обработчика
  reportError(error);
}

Поддержка метода reportError есть во всех актуальных браузерах.

#js

https://www.stefanjudis.com/blog/reporterror-a-method-to-report-to-global-event-handlers/

Выбор библиотеки по её размеру

Владимир Клепов рассказал про подводные камни выбора библиотек с использованием размера как основной метрики — "Don't trust JS library size, min+gzip".

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

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

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

#js #performance #musings

https://thoughtspile.github.io/2022/02/15/bundle-size-lies/

Time-travel debugging в Svelte

Сэм Ван Тассел рассказал про DeLorian — новый инструмент для упрощения отладки Svelte-приложений — "Time Travel Debugging in Svelte with DeLorean".

DeLorian — это расширение Chrome DevTools для отслеживания изменений состояния приложения во времени (time-travel debugging). При изменении состояния создаётся снапшот, к которому можно вернуться в любое время. Перемещение по истории работает также как в Redux DevTools. Также DeLorian отображает дерево компонентов и связанные с ними переменные.

На данный момент есть ограничения: корень приложения должен находится в DOM-элементе с id="root", приложение должно быть собрано в dev-режиме и работать локально.

#svelte #debug #tool

https://medium.com/@vantassel.sam/time-travel-debugging-in-svelte-with-delorean-26e04efe9474

HTML-элемент <dialog> в Safari 15.4 beta

В рамках инициативы "Interop 2022" в Safari Technology Preview 134 и Safari 15.4 beta была добавлена поддержка HTML-элемента <dialog>. С его помощью можно создавать доступные модальные и немодальные диалоговые окна

https://webkit.org/blog/12209/introducing-the-dialog-element/

Statoscope — тулкит для анализа Webpack-бандлов

На Smashing Magazine был опубликован транскрипт доклада Сергея Мелюкова про тулкит для анализа Webpack-бандлов — "Statoscope: A Course Of Intensive Therapy For Your Bundle".

С помощью Statoscope можно сравнить две сборки между собой и получить информацию об увеличении размера бандла, времени сборки и т.п. Он помогает обнаруживать дубликаты пакетов в бандле и, в отличие от webpack-bundle-analyzer, показывает конкретные файлы, в которых происходит импорт этих пакетов. Его можно использовать в CI для блокирования пулл-реквестов, если какой-либо критический показатель выходит за установленное порог. В нём поддерживается создание кастомных отчётов с помощью Jora и DiscoveryJS.

Statoscope используется в проектах Яндекса: в Яндекс.Маркете, Яндекс.Картах, Кинопоиске. Также он используется в библиотеке size-limit.

#webpack #bundle #tool

https://www.smashingmagazine.com/2022/02/statoscope-course-intensive-therapy-bundle/
https://www.youtube.com/watch?v=aAkmZ0gMYQ8 (доклад на русском)

Релиз Firefox 97

В новом релизе была добавлена поддержка каскадных слоёв (CSS Cascade Layers) с помощью CSS-директивы @layer. Эта фича полезна при рефакторинге, темизации и структурировании стилей.

Добавлена поддержка CSS-свойства scrollbar-gutter. С его помощью можно зарезервировать место на боковой границе вьюпорта, чтобы ширина страницы не прыгала при появлении полосы прокрутки.

Добавлен метод AbortSignal.throwIfAborted() и свойство AbortSignal.reason. Эти изменения позволяют упростить реализацию отмены выполнения кода по внешнему событию.

Теперь можно использовать requestAnimationFrame и cancelAnimationFrame внутри веб-воркеров.

В CSS добавлены новые единицы измерения cap и ic, добавлена поддержка @scroll-timeline и animation-timeline для создания анимаций, привязанных к позиции скролла. CSS-свойство color-adjust было переименовано в print-color-adjust.

#firefox #release

https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/97

Оператор конвейера в JavaScript (pipeline operator)

Аксель Раушмайер написал статью об операторе конвейера (pipeline operator, pipe operator) — новом операторе, над которым идёт работа в TC39 — "A pipe operator for JavaScript: introduction and use cases".

Есть два конкурирующих пропозала с реализацией оператора конвейера: конвейер в F#-стиле и Hack-стиле. Оба пропозала вводят в язык оператор |>, благодаря которому упрощается композиция функций:

// стандартная композиция
const y = h(g(f(x)));
// композиция с пайпом в Hack-стиле
const y = x |> f(%) |> g(%) |> h(%);
// композиция с пайпом в F#-стиле
const y = x |> f |> g |> h;

Несмотря на то что пропозал c конвейером в F#-стиле выглядит чище, у него больше недостатков по сравнению с конвейером в Hack-стиле: нужно использовать каррирование, усложняется добавление поддержки yield и await, больше накладных расходов на память. По этим причинам работа над F#-версией конвейера была остановлена.

На данный момент пропозал о добавлении конвейера в Hack-стиле находится на Stage 2, и его поддержки нет ни в одном браузере.

#js #tc39 #proposal

https://2ality.com/2022/01/pipe-operator.html

Google разрабатывает новый API для определения предпочтений пользователей для показа релевантной рекламы — Topics API. Его разработка началась после того как предыдущее решение — FLoC — получило негативные отзывы от лидеров индустрии из-за высокого риска фингерпринтинга. Формирование предпочтений в Topics API происходит на стороне клиента, есть возможность отключить Topics API и настроить интересующие темы.

https://blog.google/products/chrome/get-know-new-topics-api-privacy-sandbox/

Deno в 2021 году

Арон О'Муллан, Бартек Иванчук и Райан Дал подвели итоги разработки Deno и его экосистемы в 2021 году — "Deno in 2021".

Летом был запущен Deno Deploy — коммерческое серверное решение для развёртывания JavaScript, TypeScript и WASM-сервисов.

С версии 1.9 HTTP-модуль использует hyper — HTTP-сервер с поддержкой HTTP/2, написанный на Rust. Hyper по сравнению с предыдущей реализацией на TypeScript увеличил пропускную способность сервера и уменьшил задержки.

Был добавлен FFI (Foreign Function Interface). Благодаря ему расширения для Deno можно писать на любом языке, поддерживающем соглашения вызова функций C.

В четвёртом квартале началась работа над созданием режима совместимости с экосистемой Node.js для запуска npm-пакетов. На данный момент работа над этой фичей ещё не закончена. Её можно включить с помощью флага --compat.

Было оптимизировано ядро Deno. Накладные расходы на вызов низкоуровневых функций платформы были сокращены в 100 раз.

В августе Deno был добавлен в таблицу совместимости MDN.

#deno

https://deno.com/blog/deno-in-2021

Релиз Chrome 98

Позавчера вышла новая версия Chrome. Пит Лепаж и Джеселин Ин рассказали обо всех новинках релиза — "New in Chrome 98".

В рамках Origin Trial автоматической тёмной темы на Android теперь можно отказаться от применения темы на отдельных страницах с помощью <meta name="color-scheme" content="only light"> и CSS-свойства color-scheme: only light;.

Появилась поддержка COLRv1 — нового формата шрифтов c поддержкой цветных глифов, градиентов и смешивания. COLRv1 обеспечивает максимальное сжатие большого количества небольших изображений.

При обращении к приватным сетям теперь отправляются CORS Preflight-запросы. Запущен новый Origin Trial кроппинга захватываемого видео с помощью Region Capture API.

В инструментах разработчика теперь используется редактор на базе Codemirror 6. Благодаря ему была улучшена поддержка очень больших файлов, исправлена проблема со смещением прокрутки во время отладки. Появилась новая панель для отладки дерева доступности. Lighthouse был обновлён до девятой версии. Добавлен новый инструмент для упрощения отладки проблем с Back/Forward Cache.

#chrome #release

https://developer.chrome.com/blog/new-in-chrome-98/
https://developer.chrome.com/blog/new-in-devtools-98/

Ускорение установки зависимостей с помощью tnpm

На dev.to была опубликована статья разработчика Alibaba про ускорение установки зависимостей в Node.js — "In-depth of tnpm rapid mode - how we managed to be 10 second faster than pnpm".

Автор статьи занимается разработкой tnpm — проприетарного реестра JavaScript-пакетов и клиента, использующихся в проектах Alibaba.

Для ускорения процесса установки команда переделала архитектуру tnpm. В новом решении построение графа зависимостей пакетов происходит на сервере, значительно снижая количество HTTP-запросов на стороне клиента. Зависимости перед отправкой на клиент бандлятся в небольшое количество tar-файлов, улучшая утилизацию сети и уменьшая число обращений к диску. Полученные тарболлы не распаковываются, а лежат в хранилище, доступ к которому предоставляется с помощью npmfs — FUSE-модуля, реализующего кастомную файловую систему для работы с пакетами. Таким образом для пользователя и для Node.js ничего не меняется — они видят файлы, которые на самом деле лежат в запакованном виде. Использование FUSE накладывает ограничения на поддерживаемые операционные системы — на данный момент поддерживается только Linux.

Эти изменения позволили значительно улучшить скорость установки зависимостей, опередив в бенчмарке pnpm на 9 секунд. Автор пишет, что они планируют открыть исходный код npmfs в будущем.

Меня лично немного пугает получившийся монстр, но с точки зрения ускорения воркфлоу разработки — это очень интересное решение.

#npm #performance

https://dev.to/atian25/in-depth-of-tnpm-rapid-mode-how-could-we-fast-10s-than-pnpm-3bpp

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

— Оптимизация enum в TypeScript
— Как читать спецификации W3C
— Опыт улучшения производительности Amazon
— Использование Navigation Timing API
— Возвращение серверного роутинга
— Подход к прохождению технического собеседования
— Сравнение разных способов троттлинга сети
— Зачем разбираться в рабочих процессах компании
— Конфигурация проектов с помощью npm и mrm
— Рефлексия по defer и async
— Заметки по микрофронтендам

Становитесь патроном канала на Patreon, чтобы получить доступ в Defront Plus (более 350 уникальных постов). Все донаты идут на поддержку канала, покупку еды, аренду квартиры, оплату медицинских услуг и т.п.

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

https://www.patreon.com/myshov

Производительность рендеринга в браузерах

Мэт Перри — автор библиотек Framer Motion и Moion One — рассказал про особенности и трудности создания плавных анимаций.

Плавные анимации достигаются за счёт оптимизации рендеринга и использования аппаратного ускорения. При оптимизации рендеринга нужно учитывать, что некоторые свойства приводят к перерасчёту раскладки страницы. Но если эти свойства используются в изолированном контексте, например, с position: absolute, то вполне можно достичь 60 fps. В сети можно найти список этих свойств (CSS Triggers), но он долгое время не обновлялся. Так например, обработка SVG и CSS-свойства filter в Firefox и Chrome уже выносится на GPU, а в Chrome скоро появится поддержка ускорения анимаций clip-path и background-color.

Все браузеры для анимаций используют аппаратное ускорение. В Safari оно реализовано с помощью системной библиотеки Core Animation. Она несовместима с Web Animation API, из-за чего в некоторых случаях ускорение может отключаться.

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

#performance #rendering

https://motion.dev/guides/performance

Новинки iOS Safari 15.4 Beta

Apple обычно не делится своими планами внедрения новых API в Safari. По этой причине Максимилиано Фиртман копается в новых релизах iOS, чтобы понять, что нас ждёт в будущем. В этот раз он проанализировал последнюю доступную версию Safari и WebView из iOS 15.4 Beta — "Push Notifications, WebXR, and better PWA support coming to iOS".

Из нового релиза видно, что началась работа над добавлением Push API и Notification API. С их помощью сайты и PWA могут отображать системные нотификации. На данный момент Push API и Notification API ещё не работают, и их поддержки скорее всего не будет в стабильной версии iOS 15.4.

Была добавлена поддержка icon из манифеста PWA. Благодаря этому свойству можно тонко настраивать иконку устанавливаемого PWA. На данный момент поддержка icon реализована с ограничениями: нет поддержки свойства maskable, есть проблемы с загрузкой иконки.

Доступен набор экспериментальных фич для работы со смешанной и дополненной реальностью: WebXR Augmented Reality Mode, WebXR Device API, WebXR Gamepads Module, WebXR Hand Input Module.

Была добавлена поддержка :has, поддержка CSS-свойства accent-color, добавлен элемент <dialog>, медиа-фича resolution и ленивая загрузка изображений с помощью loading="lazy".

#safari #experimental

https://firt.dev/ios-15.4b

Сегодня каналу исполнилось три года!

Сначала для меня канал был просто интересным занятием, который мотивировал читать что-то новое и делится найденными с коллегами. Сейчас ситуация складывается таким образом, что из-за обострения тоннельного синдрома я не могу идти работать фулл-тайм, и Defront стал моим, можно сказать, спасением. Я очень благодарен, что у меня есть возможность работать над каналом.

Также хочу поблагодарить всех, кто читает Defront и поддерживает меня на Patreon. Особенная благодарность всем спонсорам канала — Зарплате.ру, Василисе Версус, Сергею Ufocoder, Андрею Советкину и Mykola Dekhtiarenko.

И уже по традиции передаю привет всем дружественным каналам и сообществам (пишите в лс, если кого-то забыл):

@webnya — канал про веб-стандарты, новости TC39 и JS, WebAssembly и т.п.
@oleg_log — канал про бэкенд-разработку и программирование в целом
@ufostation — подкасты и статьи про разработку
@webstandards_ru — подкасты и канал про фронтенд-разработку
@forwebdev — новости из мира фронтенда
@valya_reads_issue — последние новости и инсайты из мира фронтенда
@typesafesound — мысли про TypeScript и разработку
@msosnovfeed — про процессы, архитектуру и т.п.
@artalog — про разработку, React и софт скиллы
@css_ru — разговоры про CSS и HTML
@asterisk_js — ссылки на проекты и статьи про Node.js и около

Ещё раз всем спасибо и берегите себя!

Оптимизация производительности Angular-приложений

Минко Гечев из Google рассказал про распространённые проблемы производительности Angular-приложений и способы их решения — "4 Runtime Performance Optimizations".

— Загрязнение зоны (zone pollution). Возникает в том случае, когда механизм обнаружения изменений запускается асинхронными событиями, не влияющими на состояние основного приложения. Для решения этой проблемы регистрацию событий нужно выносить вне основной зоны Angular с помощью метода runOutsideAngular. Примером загрязнения зоны может быть регистрация обработчика события mousemove для отображения лейблов диаграммы из сторонней библиотеки.

— Запуск обнаружения изменений вне границ компонента (out of bounds change detection). Происходит тогда, когда возникновение событий в одном компоненте запускает механизм обнаружения изменений в соседних независимых компонентах. Эта проблема решается использованием стратегии обнаружения изменений onPush.

— Лишние перерасчёты значений в шаблонах (recalculation of referentially transparent expressions). Если в шаблоне используются методы для получения значений, то они будут исполняться каждый раз при ререндериге компонента. Если эти методы удовлетворяют принципу ссылочной прозрачности, то их можно либо мемоизировать, либо заменить пайпами.

— Большое дерево компонентов (large component trees). Если дерево компонентов слишком большое, то как бы ни были оптимизированы компоненты, приложение будет работать с подтормаживаниями. Решение — уменьшить размер дерева. Это можно сделать с помощью пагинации или виртуализированного списка.

#angular #performance #video

https://youtu.be/f8sA-i6gkGQ

Что появилось в CSS после CSS3

Крис Койер сделал обзор CSS-фич для тех, кто не следил за развитием языка последние семь лет — "What should someone learn about CSS if they last boned up during CSS3?".

С момента появления CSS3 в языке появились:
— гриды и флексы для удобной раскладки элементов на странице;
— Houdini — набор API для программного расширения возможностей CSS;
— новый синтаксис определения цвета без запятой rgb(255 0 0 / 0.5);
— кастомные свойства — близкий аналог переменных в препроцессорах var(--accentColor);
— preference queries — медиавыражения, использующиеся для адаптации страницы под пользовательские настройки операционной системы;
— поддержка вариативных шрифтов для создания страниц с богатой типографикой;
— поддержка SVG-путей для определения масок, управления анимацией и обтеканием текста;
— CSS-фильтры для определения функций наложения цвета и создания эффектов;
— поддержка Shadow DOM для стилизации кастомных элементов.

#css

https://css-tricks.com/whats-new-since-css3/