JavaScript и все-все-все

В сегодняшнем дайджесте поговорим о JS-декораторах, способах предзагрузки ресурсов, автоматической анимации элементов и нововведениях движка WebKit. Не переключайтесь!

JS-декораторы в Stage 3

Целых 5 лет потребовалось этой фиче, чтобы пройти от первого коммита до Stage 3. Правда, от традиционной реализации в других языках есть отличия. Здесь нельзя обернуть дескрипторы свойств или прототипы классов. Работают декораторы в JS только с теми сущностями, которые декорируют. 

Кстати, это ещё и привело к появлению такой сущности, как аксессоры. Если нужно обернуть поле так, чтобы оно стало парой getter/setter с дополнительной логикой, то такое поле придётся помечать как accessor. Веселья мало, но работать будет.

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

Ждём реализацию поддержки новых декораторов в IDE, TypeScript и Babel. Если хотите посмотреть демо и познакомиться с синтаксисом применения, читайте эту статью на Хабре. 

Preload, prefetch, etc…

Легко ли ускорить загрузку веб-страниц? Способов много, а вот выбор верного будет зависеть от содержания сайта. Сядем в машину времени и вернемся на 3 года назад, когда появилась статья эксперта по веб-производительности Ивана Акулова Preload, prefetch and other <link> tags.

Никто не любит ждать, пока страница загрузится. Это во времена dial-up мы смотрели, как медленно появляется картинка, а сейчас каждая дополнительная секунда негативно влияет на пользовательский опыт и ранжирование в поисковых системах. 

Хорошо, что это ожидание можно сократить. Мы научились загружать ресурсы заранее и ставить визуальные элементы в очередь. 

Если вы хотите использовать их в своём проекте уже сегодня, советуем начать вот с этого набора:

• preload — используйте атрибут preload, если ресурс потребуется через несколько секунд;
• prefetch — этот атрибут вызывается, если ресурс потребуется для следующей страницы;
• preconnect — для ресурсов, которые скоро потребуются, но мы пока не знаем их точный адрес;
• dns-prefetch — тот же preconnect, но для старых браузеров;
• prerender — пользователь с большой вероятностью перейдет на определённую страницу и её надо ускорить;
• modulepreload — предварительная загрузка скрипта модуля ECMAScript.

Примеры использования:

<link rel="prefetch" href="/style.css" as="style" />
<link rel="preload" href="/style.css" as="style" />
<link rel="preconnect" href="https://example.com" />
<link rel="dns-prefetch" href="https://example.com" />
<link rel="prerender" href="https://example.com/about.html" />
<link rel="modulepreload" href="/script.js" />

Красота в движении

Минимализм в дизайне — сильный, но сложный инструмент. Несколько ошибок превратят качественный и чистый интерфейс в ностальгию по Web 1.0. То же справедливо и для UI-анимации. Она отлично дополняет минималистичный стиль и улучшает визуальное восприятие. Добавить такие анимации нетрудно, если у вас в руках нужный инструмент.

AutoAnimate появился меньше месяца назад и уже набрал более 3200 звезд. Работает со всеми популярными фреймворками, такими как React, Vue, Svelte, а также любыми другими JavaScript-приложениями. Анимация получается аккуратной, приятной для глаз. Вызвать можно напрямую, с помощью функции autoAnimate или через хук (например, в React).

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

 

Взгляд в будущее WebKit

 

За прошедший год WebKit оброс 162 новыми функциями и улучшениями. Часть из них уже реализована в бета-версии Safari 16. Участники Apple Developer могут протестировать их уже сейчас, а всем остальным придётся дождаться публичного релиза.

Новая версия браузера получит поддержку расширений для веб-инспектора. Так что если вы используете React, Angular, Vue или Ember — осенью соответствующие расширения станут доступны в App Store.

Ещё одна функция исключительно для пользователей компьютеров Apple — Web Push прямо в систему, даже если браузер не запущен. Они будут доставляться и выглядеть как обычные уведомления, если пользователь согласится их принимать. 

В одном из прошлых дайджестов мы уже упоминали CSS Grid и рассказывали про альтернативу — Flexbox. Safari 16 упростит сборку сложных макетов со вложенными сетками, CSS Grid Inspector теперь включает наложения для любого количества сеток. 

Поклонники Flexbox тоже не будут разочарованы, ведь теперь появится и Flexbox Inspector. Запутаться в расположении границ элементов и их распределении на главной и поперечной оси теперь будет практически нереально. Сколько бы оверлеев вы не использовали, они будут правильно визуально отражены в инспекторе.

Что ещё? Улучшенные анимации, контроль поведения при прокрутке и многое другое — детальное описание изменений можно найти в блоге движка WebKit.

 

Обучение

Митапы

Вакансии