Интересные публикации
Стали доступны записи лекций Школы разработки интерфейсов 2021 от Академии Яндекса. В плейлисте на YouTube — 23 видео, затрагивающих самые разные темы: от работы с git и инструментов разработки до продвинутого JavaScript и клиентской оптимизации. Также есть лекции о локализации, архитектуре React-приложений и тестировании. И это еще не полный список. В общем, можно найти много полезного для себя, обязательно загляните.
Прошел Chrome Dev Summit 2021. В этом году команда Chrome поделилась, как работала над кроссбраузерной совместимостью пяти фич, которые были наибольшими болями разработчиков — гридами, флексами, aspect-ratio, трансформациями и position: sticky. Затронули и рефакторинг движка рендеринга RenderingNG, рассказали о работе в области приватности пользователей, продолжении работы над Web Vitals и образовательным разделом на web.dev. Существует и текстовая версия.
Дмитрий Карловский на Хабре опубликовал статью о реактивности. Это расшифровка его недавнего доклада по теме. Реактивность — это когда изменение состояния одной части приложения автоматически влечет за собой изменение других состояний при необходимости. Обычно статьи на этом и заканчиваются, пишем пару строк на RxJS, и всё — мы великолепны. Но статья Дмитрия — другая, здесь вас ждет глубокое погружение в тему. Дмитрий рассказывает, что нужно для реализации реактивности, какие могут быть требования к ней и как реактивность может быть организована. А ближе к концу статьи есть и небольшое сравнение реактивных фреймворков.
На web.dev была опубликована статья о плавности анимаций. Коллектив авторов в подробностях рассказывает, как работают анимации и как они соотносятся с пайплайном рендеринга. В деталях разбирается тема кадров анимаций, что на них влияет и как они обновляются. В конце статьи есть и о способах отладки производительности анимаций с помощью инструментов разработчика.
Все мы любим отдельно React-хуки и TypeScript. А вот подружить их иногда бывает непростой задачей. Следующий материал как раз об этом. Пьер Уанн (Pierre Ouannes) опубликовал статью о типизации хуков. Он рассматривает все основные хуки, показывает пример типизации и затрагивает кастомные хуки. Сразу скажу, что он не рекомендует типизировать абсолютно всё, что движется, и объясняет, почему.
Если вы ещё не познакомились с Next.js — перед вами отличная возможность. Евгений Ковальчук выпустил видеокурс по фреймворку. Он вполне подойдет для начала работы с Next.js. Евгений начинает с базовых концепций, а также затрагивает ряд важных фич фреймворка: роутинг, создание страниц, вёрстку и стили, SSR и другие темы. В дополнение к этому материалу приложу статью Ачилы Фассины (Átila Fassina) на SmashingMagazine о локализации Next.js-приложений.
Эдуардо Валенсия (Eduardo Valencia) написал статью о серверном рендеринге и дифференцированном серверном рендеринге в Gatsby 4. Если помните анонс релиза, эти фичи были улучшены командой Gatsby в новой версии. Концепции, конечно, не новы. Поэтому про серверный рендеринг я не буду говорить совсем, а упомяну дифференцированный рендеринг. Он позволяет рендерить страницы на сервере по необходимости, и разработчикам доступен API для управления этим поведением. Эдуардо показывает разницу между этими видами рендеринга и делится демоприложением.
Следующая статья — продолжение серии Ахмада Шадида (Ahmad Shadeed) о создании компонентов из реального мира. В этот раз он реализует контейнер сообщения в чате Facebook Messenger. Звучит просто, а нюансов на самом деле очень много: от направления текста в разных локализациях, до разного содержимого. Получился довольно длинный гайд, но подробный и интересный.
Адам Аргайл (Adam Argyle) тоже не останавливается и продолжает свою серию о реализации разных компонентов. Этот, честно говоря, произвел на меня впечатление такого, который может вернуть вдохновение выгоревшему разработчику. Адам реализовал компонент трехмерного меню для компьютерной игры, получилось что-то в духе Cyberpunk 2077. Оно стильно двигается в пространстве в зависимости от положения курсора, стилизовано под неон и вызывает желание создать меню своей мечты. Попробуйте.
Браузерные расширения с нами каждый день и помогают нам с повседневными задачами, но как они влияют на производительность браузеров? На этот вопрос пытается в своей статье ответить Мэтт Цойнерт (Matt Zeunert). Он анализирует ресурсы, которые потребляют расширения, и проводит сравнительный анализ. Статья довольно старая, но вполне актуальная. Она может быть интересна с двух сторон: разработчик расширений может почерпнуть, на что стоит обратить внимание и как постараться сэкономить ресурсы машины пользователя, а пользователь может узнать, стоит ли отказываться от некоторых расширений или нет.
На web.dev в образовательном разделе появился курс по созданию форм. Начинается он с базовых концепций и простых форм, затрагиваются лучшие практики, тестирование, работа форм с JavaScript и другие вопросы.
Завершат рубрику два материала на отвлеченные темы. Если хочется попробовать что-то новое и на досуге поработать со смежной дисциплиной — заходите по этим ссылкам. Первая — подборка игр для освоения разных аспектов дизайна от Михаила Озорина, вторая — о создании трехмерных персонажей с библиотекой Three.js. Попробуйте переключить контекст и поделать что-то новое, иногда очень и очень полезно.
Новости релизов
Доступна 13 мажорная версия фреймворка Angular. View Engine — старый движок рендеринга — больше недоступен и был заменен на Ivy. Теперь фреймворк поддерживает ES2020, что позволило изменить формат внешних модулей Angular Package Format. Поработали над скоростью бандлинга: сохранение кеша сборки позволило ускорить скорость бандлинга более чем на 50%. Поддерживается и esbuild, теперь production-бандлы собираются на 10% быстрее. Дополнительно отмечу, что версию TypeScript обновили до 4.4, а RxJS — до 7.4. Также была прекращена поддержка Internet Explorer 11. Дополнительно к анонсу предлагаю вам посмотреть обзор новой версии Angular от Аарона Фроста (Aaron Frost).
Вышел Firefox 94. Был включен механизм Site isolation для обеспечения безопасности пользователей, теперь в полном объеме и на всех платформах. Были проведены небольшие оптимизации памяти в SpiderMonkey и представлены оптимизации производительности JS. Кроме того, теперь можно настраивать выгрузку неактивных вкладок на специальной странице. Также можно прочитать обзор на русском языке от Марата Таналина.
Браузер Tor дорос до мажорной одиннадцатой версии. Этот релиз выделяется значительным редизайном браузера из-за обновления Firefox, на базе которого он реализован, до 91 ESR-версии. Также в этой версии была окончательно признана устаревшей вторая версия Onion Service.
Вышла новая бета движка V8, которая появится в Chrome 97. V8 9.7 поддерживает методы findLast и findLastIndex.
Вышла новая версия JS/TS-рантайма Deno. В версии 1.16 были представлены доработки некоторых Web API, работы с localStorage и совместимость std/node. Дополнительно отмечу, что развиваются инструменты для работы с Deno, например, плагин WebStorm Deno теперь использует Deno Language Server. Также появляется много разных пакетов, например, для поддержки сразу Deno и Node.js.
Node.js тоже отметился релизом. Релиз небольшой, в версии 17.1.0 добавили поддержку JSON import assertion.
Вышла первая превью-версия языка Ruby 3.1. В свежей версии ожидается новый, легковесный JIT-компилятор, улучшение производительности, а хэши теперь можно записывать в сокращенном формате. Кроме того, гем debug теперь будет дебаггером по умолчанию.
Помимо этого на этой неделе отмечу выход бета-версий Redhat Enterprise Linux 8.5 и девятой мажорной версии, а также версии веб-сервера nginx 1.21.4.
Другие новости
Первая новость отличается невероятной крутизной. Рич Харрис — автор фреймворка Svelte — присоединился к команде Vercel и теперь будет работать над Svelte фуллтайм. Это означает сразу несколько вещей: у фреймворка появился спонсор, возможности для развития и даже, впоследствии, соперничества с «большой тройкой» фреймворков в совсем другой весовой категории. Автора и сообщество можно только поздравить, для Svelte это действительно отличные новости.
8 декабря пройдет ReactConf, в этом году она состоится онлайн, как и большая часть мероприятий. Конференция бесплатная, достаточно просто зарегистрироваться на лендинге. Пока не совсем понятно, о чем пойдет речь, но докладчиков довольно много. Возможно, мы услышим что-то и про новую мажорную версию React, и про новые фичи — такие, как, например, серверные компоненты. Если станет известно больше подробностей, я расскажу об этом в следующих выпусках новостей.
Завершат выпуск новости об уязвимостях. На минувшей неделе были скомпрометированы популярные npm-пакеты coa, rc и ua-parser-js. Если коротко, в них подсадили Windows-трояны, которые извлекали с целевой машины данные кредитных карт, пароли и другую важную информацию. Команда npm рекомендует авторам пакетов не работать без двухфакторной аутентификации и обезопасить таким образом себя и пользователей своих пакетов. Этот вопрос мы также обсуждали в нашем подкасте Callback Hell.