Всем привет, это «Новости 512» от CSSSR. В этом выпуске мы поговорим о релизах Chrome 130, Node.js 23.0.0, Deno 2, а также о релиз-кандидатах TypeScript и Next.js. Ещё будет о некоторых фичах, которые, возможно, увидим в ES2025, разберёмся, как осовременить модули до ESM, ещё раз пройдёмся по буферу обмена, посмотрим на то, как отвечают на вопросы про Angular разные опытные разработчики, создадим свой RSS-ридер и посмотрим, как можно попробовать удариться в кроссплатформенную разработку.
Интересные публикации
В предыдущих выпусках мы уже касались новых фич ES2024. Пока утверждается следующая версия стандарта, идёт непрерывная работа над продвижением на следующие стадии новых фич. Именно этому была посвящена встреча соответствующего комитета в Токио. Более 10 пропозалов были продвинуты на следующие стадии, из них 3–4 штуки мы уже можем увидеть в следующем году. Например, это хелперы для итераторов, атрибуты импортов и JSON-модули, а также модификаторы регулярных выражений. Другие пропозалы находятся на более ранних стадиях, тем не менее стоит по ним пробежаться.
Вы знаете, что было несколько разных форматов JS-модулей, и сейчас уже все стараются переходить на современный стандарт ESM. Но наверняка остались пакеты формата CommonJS, которые нужны и сейчас. Как сконвертировать CommonJS-модуль в ESM? На этот вопрос постарались ответить в блоге Deno. Гайд небольшой, в нём вы найдёте информацию о том, как обновить импорты/экспорты и package.json, какими инструментами можно пользоваться для ускорения процесса. Если перед вами стоит задача осовременивания модуля, этот гайд точно для вас.
Джейк Лазарофф в своём блоге опубликовал небольшой гайд о создании одностраничника на htmx. Вообще предполагалось, что htmx должен спасти веб от SPA, а не примкнуть к ним, но Джейк решил провести такой эксперимент. При помощи Service Worker он заставляет приложение на htmx работать как SPA, при этом отмечает плюсы по сравнению с React. Это небольшой Proof of Concept, стоит заглянуть, если интересуетесь такими вещами. Есть и перевод на Хабре.
Робин Урих (Robin Wieruch) в своём блоге выпустил обновлённую для 2024 года версию статьи о структурировании файлов в React-проектах. Он начинает с одного файла и постепенно усложняет структуру. Параллельно он рассказывает, на какого размера проектах вам может понадобиться усложнение. В конце он приводит постраничную структуру, которую сам называет довольно субъективной. В любом случае довольно полезно, потому что на протяжении всей статьи он говорит в том числе об общем смысле той или иной структуры.
Новая фича CSS, которая называется Anchor Positioning (или якорное позиционирование), позволяет располагать какой-либо элемент относительно определённого элемента якоря (может быть, и не одного). Хуан Диего Родригез (Juan Diego Rodríguez) на CSS-Tricks рассказал о новой фиче, начиная с основ. Он сделал введение в фичу, показал, как она работает, рассказал о её особенностях, атрибутах и функциях. Пока она работает только в Chrome начиная со 125 версии, но очень интересная, и к ней стоит присмотреться.
Следующий материал о создании тултипов с использованием Popover API и новых фич CSS. О нём я тоже уже упоминал, это ещё один небольшой гайд. В нём разбирается базовое применение, позиционирование и работа с вьюпортом. Получился компактный базовый гайд.
Далее ответы на вопросы с собеседований для Angular-разработчиков, да не простые, а золотые. В смысле от опытных Angular-экспертов. Здесь ответы на вопросы о кейсах из их работы, оптимизации, рефакторинге, вкладе в развитие Angular и другие. Интересно тем, что на одни и те же вопросы ответы разные — возможно, вы откроете для себя что-то интересное.
Далее материал о Clipboard API от команды FrontendMasters. Как вы можете догадываться по названию, это API для работы с буфером обмена. Это небольшой цикл из трёх статей: первая — про запись, вторая — про чтение, третья — про обработку события вставки. На самом деле, в работе этого API достаточно много тонкостей, например работа с медиа в буфере, безопасность и другие. Внутри много пояснений и примеров, при этом всё изложено компактно.
Теперь давайте попробуем что-нибудь создать. Карин Хэндрикс (Karin Hendrikse) на SmashingMagazine опубликовала статью о создании RSS-ридера. Понятно, что, скорее всего, вы пользуетесь каким-то готовым, так что рассматривайте это как возможность для практики. Вы будете использовать Astro, пакет для RSS, TypeScript, поработаете с планировщиком. Если интересно — дерзайте.
Если вы всегда хотели попробовать кроссплатформенную разработку, то есть такой фреймворк — Tauri. Он позволяет с применением веб-технологий разрабатывать десктопные и мобильные приложения, причём фреймворк можно использовать любой, и всё это будет работать быстро и шелковисто. По крайней мере, так пишут. Об этом следующие две статьи. Первая — о том, с чего начать работу с Tauri, а вторая — о том, как настроить инструменты для работы с ним. Кстати, недавно вышла вторая мажорная версия. Раз мы уже говорим об этом здесь, то ссылку на релиз также прикладываю сюда. В итоге если кроссплатформа — ваша мечта, то хотя бы попробуйте создать что-нибудь простенькое.
Далее два дайджеста про фреймворки и их экосистему от самих команд фреймворков. Первый — от команды Astro, а второй — от команды Svelte. Если хочется пристально следить именно за этими фреймворками, стоит подписаться на их блоги.
В конце рубрики подборка ресурсов и полезных материалов по программированию на JavaScript для детей. Внутри книги, ссылки на тематические ресурсы и интерактивные штуки. В целом это статья-реклама от соответствующей школы для детей. Я её тут не рекламирую, а вот ресурсы могут вам пригодиться. А вообще, давайте детям детство и берегите себя и своих близких от программирования.
Новости релизов
Доступен Chrome 130. В этой версии представили document picture-in-picture API. Это продолжение picture-in-picture, в котором может быть не только видео, но и какой-то кастомный лейаут с элементами и функциональностью. Как пример приводится микро-плеер Spotify — выглядит классно. Было исправлено поведение краевых случаев вложенного CSS. Помимо этого, были представлены и другие небольшие фичи. DevTools тоже с изменениями. Некоторые фильтры панели Network спрятали в выпадающие списки, это можно отключить в настройках экспериментальных фич. В панели производительности появились рекомендации и удобные хлебные крошки для перемещения по таймлайну. Больше подробностей в обзорах Chrome и DevTools от Google.
Также отмечу патчи Firefox 131.0.2 и 131.0.3 с устранением критических уязвимостей и некоторых багов.
Доступна 23 мажорная версия Node.js. Скоро 22 перейдёт в категорию LTS, а 23 останется Current-версией. В этой версии стабилизировали команду node –run, включили поддержку загрузки ES-модулей через require() по умолчанию, а также прекратили поддержку 32-битной версии Windows. Помимо этого, добавили несколько небольших улучшений для тест-раннера.
Буквально через день после предыдущего выпуска Deno 2 зарелизили. Deno всегда позиционировали как многофункциональный рантайм с большим количеством встроенных инструментов, поддержкой TypeScript и совместимостью с Node.js. В посте о релизе второй версии как раз и говорят о том, что совместимость с нодой и npm прекрасная, стандартный API стабилизирован, будут LTS-релизы и новый, современный регистр пакетов JSR. В этой версии разработчики как бы выполняют свои обещания и представляют нам production-ready рантайм — посыл такой. Так что, если вы не смотрели на Deno, сейчас как раз самое время. Больше подробностей — по ссылке в описании.
А вот парочка приближающихся релизов. Это релизы Next.js 15 и TypeScript 5.7. Про Next.js скажу вкратце, а к TypeScript вернёмся уже на релизе.
Сейчас доступен второй релиз-кандидат Next.js. В целом в 15 версии будет поддержка практически всех новых фич React 19, много исправлений для кэша, стабилизация Turbopack, новые пакеты для Next.js и другие улучшения. На релизе мы поговорим о нём подробнее. Пощупать релиз-кандидат, в принципе, можно и сейчас — инструкция есть по ссылке в описании.
Также в этом выпуске отмечу релизы React Native Storybook 8, Electron 33 и Ember 5.12.
Другие новости
Немного возвращаясь к Next.js. 24 октября в Сан-Франциско пройдёт Next.js Conf 2024. В ней можно поучаствовать и виртуально, причём бесплатно. В программе, как обычно, доклады и воркшопы, достаточно зарегистрироваться и прийти посмотреть. Будет про парочку кейсов, применение AI в разработке интерфейсов, серверные компоненты (куда же без них). Думаю, что позже будет и плейлист на YouTube.