Всем привет, это «Новости 512» от CSSSR. В этом выпуске мы посмотрим на оптимизацию страницы поисковика Bing, привязку данных в React при работе с формами, утечки памяти в промисах и не только, новое событие scrollend, коллекции анимированных гридов, применений псевдоселектора :has и ruby-гемов на все случаи жизни. Также в этом выпуске: релизы Firefox 109, Astro 2, Remix 1.10, esbuild 0.17, security-релизы Ruby on Rails и git и другие релизы недели.
Интересные публикации
Утечки памяти случаются, с такой ситуацией столкнулся и Кент Доддс (Kent C. Dodds). Он обнаружил странные пики активности процессора и количества используемой памяти. Своё расследование он оформил как статью. Пришлось покопаться и в логах, и в снапшотах кучи и протестировать проект под нагрузкой. В итоге оказалось, что проблема была в пакете express-http-proxy, который тёк, как тот самый бачок. Кент отказался от него, и всё пришло в норму. Больше подробностей — в оригинальной статье.
Не совсем свежая, но интересная статья о том, как оптимизировали производительность страницы поиска Bing. Инженеры Microsoft старались спроектировать Bing с акцентом на скорость на всех уровнях. Была проработана доставка страницы фрагментами (или чанками), последовательность рендеринга и критический код, оптимизирована загрузка изображений. Интересный кейс для конкретного сервиса, а в самой статье — порядка десяти разных техник, которые были использованы для оптимизации.
Джош Комо (Josh Comeau) в своём блоге опубликовал статью о привязке данных в React. Если подробнее, речь идёт о состоянии, формах и контролируемых полях. Джош рассказывает о том, как работать с инпутами, текстовыми полями, селектами, чекбоксами и другими элементами форм. Он разбирается в работе с их атрибутами, приводит примеры и — самое главное! — для каждого элемента описывает подводные камни.
Следующий материал — статья Ника Мостового о сборке мусора и утечках памяти в промисах. Вообще, это серия из трёх статей: в первой он разбирает, как работают сами промисы, во второй — как получить статус промиса и построить свою очередь, а уже в третьей — сборку мусора и утечки. Автор разбирает разные сценарии работы промисов, возможные проблемы и, естественно, даёт рекомендации, как этих проблем избежать. Даже если вы чувствуете себя уверенно при работе с промисами, всё равно рекомендую посмотреть.
Псевдоселектор :has() продолжает покорять умы и сердца людей, но это неточно. Тем не менее люди придумывают для него всё больше и больше применений. Эта статья — как раз их сборник. Лиам Джонстон (Liam Johnston) собрал их в одной статье на CSS Tricks. Здесь разные кейсы: работа с таблицами, изменение стилей страницы по клику в меню, упрощение логики в CSS и другие. Там же — ссылки на статьи других авторов, которые успели «поиграться» с :has().
В этом выпуске Адам Аргайл (Adam Argyle) не с новой частью своей серии о создании разных компонентов — сегодня он рассказывает о новом событии JS scrollend. Достоверно узнать о конце скролла никак нельзя, и, как вы знаете, самой надёжной историей было повесить таймаут на скролл. Работает оно не всегда, багает и в итоге омрачает пользовательский опыт. Новое событие должно нас от этого избавить. Адам рассказывает о свойстве, приводит примеры и детали. Событие уже работает в Firefox 109 и ожидается в новых версиях Chrome.
Следующая статья тоже с CSS Tricks. Она посвящена анимации гридов. Относительно недавно свойства строк и колонок гридов стали анимируемыми во всех мажорных браузерах, а Дэниел Шварц (Daniel Schwarz) собрал примеры. Здесь, например, анимация сайдбара, добавление строк и колонок с анимацией и другие.
Завершит рубрику статья Владимира Деменьтьева в блоге Злых Марсиан. Она будет особенно интересна рубистам, потому что это сборник гемов, которыми пользуются марсиане на своих ruby-проектах. Гемы разделены на категории задач, по которым ориентироваться: от основ и работы с Active Record до логирования и тестирования. Отличная возможность пополнить свой гем-арсенал.
Новости релизов
Доступен Firefox 109. В новой версии по умолчанию включена поддержка третьей версии манифеста Chrome для дополнений. Включена поддержка события scrollend, о котором я говорил чуть раньше, и соответствующее обновление для отладчика. Были представлены новые удобства для пользователей на разных платформах, например кнопка удаления отдельных ссылок в интерфейсе закрытых страниц, выбор Firefox как программы для просмотра документов и ряд изменений для мультимедиа. Больше подробностей — на странице релиза.
Новые фреймворки жгут. Команда Astro выпустила версию 2.0. В этом релизе доступны коллекции контента. Это фича, которая позволяет создавать коллекции Markdown-файлов и валидировать их автоматически. Звучит очень здорово. Ещё одна фича — гибридный рендеринг, который позволяет комбинировать стратегии рендеринга. Кроме того, добавили поддержку Vite 4.0, освежили страницу для отображения ошибок и опубликовали публичный роадмап.
Remix 1.10 — это первый большой релиз фреймворка в этом году. В нём плотно поработали над роутингом и выделили независимый пакет @remix-run/router, на котором основан и другой их продукт, react-router. Также подвезли много новых хуков.
Из релизов фреймворков также отмечу релиз Angular 15.1.0.
Сборщик esbuild отметился версией 0.17. В этой версии есть несовместимые нововведения, поэтому будьте внимательны и зафиксируйте версию 0.16, если пока не готовы мигрировать. Несовместимость связана с новым API для инкрементальных сборок, методами serve() и watch(). Режимы serve и watch теперь можно использовать вместе, что позволяет запилить live-reloading. К описанию релиза прилагаются короткие примеры для миграции на версию 0.17.
Вышел Bun 0.5.0. Команда продолжает держать курс на расширение совместимости с Node.js. Была добавлена поддержка пакетов node:dns, node:readline и других. Также в новом релизе подвезли воркспейсы. Больше подробностей о релизе — в блоге Bun.
Вышлии релизы Ruby on Rails 7.0.4.1, 6.1.7.1 и 6.0.6.1. Это важные релизы, потому что они устраняют уязвимости с потенциальной SQL-инъекцией и DoS-атаками. Не забывайте вовремя обновляться.
Также в этом выпуске отмечу релизы ESLint 8.32.0, релиз git 2.39.1 и других поддерживаемых веток с устранением уязвимостей, ChromeOS 109 и релиз VirtualBox 7.0.6.
Другие новости
Внезапно ожила разработка движка Servo. Напомню, это проект по созданию быстрого, модульного и независимого веб-движка на языке Rust. Проект развивался в Mozilla и был закрыт из-за оптимизации расходов в компании. Сейчас проект развивается под эгидой Linux Foundation: было привлечено финансирование, и команда продолжит работу над проектом. В 2023 году планируется возобновить разработку, активизировать сообщество и привлечь больше спонсоров.