Новости 512 #167

В этом выпуске: Chrome 91 Beta, postcss-eazy-z, tree-shaking библиотеки, полный гайд по кастомным CSS-свойствам и неполный гайд по Cumulative Layout Shift, функции плавности в CSS и Web Engines Hackfest 2021.

Интересные публикации

Первый материал — сборник рецептов для работы с Puppeteer от Эдди Османи. Сборнику уже примерно год, но, насколько я понял, он обновляется и пополняется. В нём есть решения таких задач, как извлечение разных метрик, эмуляция медленного интернета или процессора, генерация отчета Lighthouse и многое другое. Если вы работаете с Puppeteer и автоматизацией тестирования — обязательно загляните.

На debugbear появилась статья, каких много не бывает, — про DevTools и анализ производительности. Я говорю, что их не бывает много, потому что в каждой находится что-то новое. Здесь и про запись профиля производительности, работу процессора, FPS, Web Vitals (куда же без них), про сбор дополнительной информации о рендере и не только. В этой статье есть еще и примеры интерпретации показателей, которые вы получите. Заглянуть в любом случае будет не лишним.

Минко Гечев (Minko Gechev) в блоге Angular написал статью об изменении дефолтного пайплайна рендеринга ViewEngine. Теперь по умолчанию будет использоваться Ivy. Для разработчиков переход должен стать незаметным, и View Engine будет опционально доступен при необходимости, но получит статус устаревшего. Отмечу, что по статистике Ivy уже пользуется больший процент разработчиков.

Франсуа Эндрикс (François Hendriks) написал статью о том, как создать библиотеку, которая поддается тришейкингу. Если коротко, он выделил несколько принципов: стоит протестировать библиотеку на тришейкинг в известной среде с известным приложением; использовать ES-модули; разделить библиотеку на подмодули и следить за деревом модулей; а также использовать последнюю версию бандлера, который выполняет тришейкин. Франсуа раскрывает каждый из пунктов подробно.

На css-tricks Крис Койер (Chris Coyier) написал большой гайд по кастомным CSS-свойствам, или, как вы можете их знать, CSS-переменным. Гайд получился большой и, кажется, достоин звания «Complete guide». Крис напоминает, что фича позволяет использовать принцип Don’t repeat yourself и очень полезна для создания цветовых тем. Он начинает с основ и простых кейсов и постепенно переходит к сложным и продвинутым использованиям кастомных свойств. В статье много примеров и хорошее оглавление, так что можно легко обратиться к конкретной теме.

Если предыдущий гайд был Complete, то этот озаглавлен как Almost complete. Его написала Джесс Пек (Jess Peck), а посвящен он Cumulative Layout Shift. Джесс разбирает, как возникает это явление, как измерить метрику и в каких случаях чаще всего возникает сдвиг. Конечно же, она делится и советами по борьбе с проблемой.

Закрывает рубрику Адриан Беце(Adrian Bece) на SmashingMagazine со своей статьей о функциях плавности анимации. Существует 3 основных вида функций, которые применяются в CSS: линейная, ступенчатая и кривая Безье. Автор показывает, как работает каждый тип и как можно кастомизировать функции плавности.

Новости релизов

Наш коллега Никита Голубов написал PostCSS-плагин для организации z-индексов. Основная идея — использовать для z-индексов переменные, связанные друг с другом через calc. Это упрощает построение иерархии z-индексов и добавляет семантику, что помогает быстрее разобраться в индексах. Больше никаких магических чисел. Попробуйте, возможно он пригодится вам на проекте.

Пока мы ждем других крупных релизов, можно посмотреть и на бету Chrome 91. В бете планируется внедрить новую директиву @counter-style для списков, метатег battery-savings для экономии заряда, V8 планируется обновить до версии 9.1, также в планах поддержка ES-модулей для сервис-воркеров.

Сегодня поговорим еще и о браузерах, которые не часто светятся в инфополе. Состоялся релиз браузера Vivaldi 3.8. В этом выпуске отключили FLoC (напомню, это новый способ показа рекламы без отслеживания конкретного пользователя), появился блокировщик GDPR-панелей, были добавлены UI-улучшения. И в целом браузер интересный, многим он нравится за невероятную кастомизируемость и приверженность идеалам приватности. Дополнительно я приложу статью о том, как Vivaldi выживает на рынке, развивается и зарабатывает.

Другой браузер, о котором не каждый день услышишь — Palemoon. Это браузер, который ответвляется от Firefox. Он сохранил классический интерфейс, нацелен на эффективность работы и использования оперативки. Также есть фокус на кастомизируемость. В релизе 29.2 убрали поддержку расширений Firefox, которые не были специально адаптированы под Palemoon.

Еще одно приложение на днях попалось мне на глаза. Это облачный браузер Mighty, который позиционирует себя как новый браузер, который потребляет в 10 раз меньше памяти, чем Chrome. Механизм работы, похоже, как у облачного гейминга. Можно запросить доступ и поучаствовать закрытой альфе (или бете, не совсем понятно).

Менеджер пакетов для PHP Composer обновили для устранения уязвимости. Composer оказался потенциально подвержен атакам при помощи инъекции команд. Команда разработки настоятельно рекомендует обновиться до версии 2.0.13 или 1.10.22.

Следующая новость — для любителей Linux. Вышла Fedora 34. Были обновлены ключевые пакеты и языки программирования, например, в 34 версии есть Ruby 3 и Go 1.16. Plasma теперь по умолчанию использует Wayland вместо X11. Еще одна крутая фича — прозрачная компрессия BTRFS: если коротко — пространство на диске будет использоваться более эффективно.

Не совсем релиз, но инструмент. Называется он nessie — это вдохновленная Laravel библиотека миграций, которая работает с Deno. На данный момент она поддерживает PostgreSQL, MySQL и SQLite.

Другие новости

Пандемия отменила практически все офлайн-события. Тем не менее, в каких-то случаях это плюс. В этом году фестиваль Web Engines Hackfest пройдет онлайн. Раньше попасть на него можно было только по приглашению или через подачу заявки. Это мероприятие, на котором собираются все представители веба как платформы: разработчики движков, сторона тестирования, разработчики стандартов. Если вас интересуют браузеры и стандартизация веба — обязательно загляните. Мероприятие будет проходить с 3 до 11 мая.

Относительно недавно была статья об использовании графических процессоров для работы с графикой в браузере и использовании вычислительных ресурсов GPU. Так вот, появился эксплейнер этого нового предложенного API. В целом он схож с WebGL, но, по идее, должен иметь прямой доступ к GPU и его продвинутым фичам.

Пишите нам и читайте

Telegram—канал CSSSR

Twitter CSSSR

Twitter новостей

Telegram ведущего

Twitter ведущего

Комментарии

Продолжая пользование данным Сайтом, вы даете свое согласие на сбор и обработку технической информации (cookies). Подробнее о cookies читайте вПолитике конфиденциальности.