Defront (при поддержке Зарплата.ру) — про фронтенд-разработку и не только

2022-02-04 23:30:18 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 Открыть/Комментировать

2022-02-03 20:59:06 Релиз Chrome 98

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

В рамках Origin Trial автоматической тёмной темы на Android теперь можно отказаться от применения темы на отдельных страницах с помощью и 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/ Открыть/Комментировать

2022-02-02 20:56:14 Ускорение установки зависимостей с помощью 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 Открыть/Комментировать

2022-02-02 11:36:29 За прошедшие две недели в канале для патронов Defront было опубликовано одиннадцать постов:

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

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

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

https://www.patreon.com/myshov Открыть/Комментировать

2022-02-01 20:50:42 Производительность рендеринга в браузерах

Мэт Перри — автор библиотек 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 Открыть/Комментировать

2022-01-31 19:46:03 Новинки 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, добавлен элемент

, медиа-фича resolution и ленивая загрузка изображений с помощью loading="lazy".

#safari #experimental

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

1.5K viewsAlexander Myshov, edited  16:46

Открыть/Комментировать

2022-01-29 15:03:44 Сегодня каналу исполнилось три года!

Сначала для меня канал был просто интересным занятием, который мотивировал читать что-то новое и делится найденными с коллегами. Сейчас ситуация складывается таким образом, что из-за обострения тоннельного синдрома я не могу идти работать фулл-тайм, и 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 и около

Ещё раз всем спасибо и берегите себя! Открыть/Комментировать

2022-01-28 22:59:40 Оптимизация производительности 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



Открыть/Комментировать

2022-01-27 22:55:44 Что появилось в 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/ Открыть/Комментировать

2022-01-27 17:47:55 Let's Encrypt из-за неточностей имплементации валидации отзывает сертификаты, которые были выпущены в течение последних 90 дней. Отзыв произойдёт 28 января и затронет примерно 1% пользователей сервиса.

https://community.letsencrypt.org/t/2022-01-25-issue-with-tls-alpn-01-validation-method/170450 Открыть/Комментировать