diff --git a/_posts/news512/news-264.md b/_posts/news512/news-264.md new file mode 100644 index 00000000..e58541b8 --- /dev/null +++ b/_posts/news512/news-264.md @@ -0,0 +1,73 @@ +--- +title: 'В этом выпуске: релизы Chrome 130, Node.js 23.0.0, Deno 2, а также релиз-кандидаты TypeScript и Next.js. Ещё, о некоторых фичах, которые, возможно, мы увидим в ES2025, разберёмся, как осовременить модули до ESM, ещё раз пройдёмся по буферу обмена, посмотрим на то, как отвечают на вопросы про Angular разные опытные разработчики, создадим свой RSS-ридер и посмотрим, как можно попробовать удариться в кроссплатформенную разработку.' +soundcloudLink: 'https://soundcloud.com/csssr/chrome-130-nodejs-23-deno-2-nextjs-15-rc-cjs-esm-anchor-positioning-clipboard-api' +date: '2024-10-18T00:00:00.000Z' +episodeNumber: 264 +tag: 'news' +author: 'Ислам Виндижев' +--- + +Всем привет, это «Новости 512» от CSSSR. В этом выпуске мы поговорим о релизах Chrome 130, Node.js 23.0.0, Deno 2, а также о релиз-кандидатах TypeScript и Next.js. Ещё будет о некоторых фичах, которые, возможно, увидим в ES2025, разберёмся, как осовременить модули до ESM, ещё раз пройдёмся по буферу обмена, посмотрим на то, как отвечают на вопросы про Angular разные опытные разработчики, создадим свой RSS-ридер и посмотрим, как можно попробовать удариться в кроссплатформенную разработку. + + + ### Интересные публикации + +В предыдущих выпусках мы уже касались новых фич ES2024. Пока утверждается следующая версия стандарта, идёт непрерывная работа над продвижением на следующие стадии новых фич. Именно этому была посвящена встреча соответствующего комитета в Токио. Более 10 пропозалов [были продвинуты на следующие стадии](https://socket.dev/blog/tc39-advances-10-ecmascript-proposals-key-features-to-watch), из них 3–4 штуки мы уже можем увидеть в следующем году. Например, это хелперы для итераторов, атрибуты импортов и JSON-модули, а также модификаторы регулярных выражений. Другие пропозалы находятся на более ранних стадиях, тем не менее стоит по ним пробежаться. + + +Вы знаете, что было несколько разных форматов JS-модулей, и сейчас уже все стараются переходить на современный стандарт ESM. Но наверняка остались пакеты формата CommonJS, которые нужны и сейчас. Как сконвертировать CommonJS-модуль в ESM? На этот вопрос [постарались ответить](https://deno.com/blog/convert-cjs-to-esm) в блоге Deno. Гайд небольшой, в нём вы найдёте информацию о том, как обновить импорты/экспорты и package.json, какими инструментами можно пользоваться для ускорения процесса. Если перед вами стоит задача осовременивания модуля, этот гайд точно для вас. + +Джейк Лазарофф в своём блоге опубликовал небольшой [гайд о создании одностраничника на htmx](https://jakelazaroff.com/words/building-a-single-page-app-with-htmx/). Вообще предполагалось, что htmx должен спасти веб от SPA, а не примкнуть к ним, но Джейк решил провести такой эксперимент. При помощи Service Worker он заставляет приложение на htmx работать как SPA, при этом отмечает плюсы по сравнению с React. Это небольшой Proof of Concept, стоит заглянуть, если интересуетесь такими вещами. Есть и [перевод на Хабре](https://habr.com/ru/companies/ruvds/articles/849854/). + +Робин Урих (Robin Wieruch) в своём блоге выпустил обновлённую для 2024 года версию статьи о [структурировании файлов в React-проектах](https://www.robinwieruch.de/react-folder-structure/). Он начинает с одного файла и постепенно усложняет структуру. Параллельно он рассказывает, на какого размера проектах вам может понадобиться усложнение. В конце он приводит постраничную структуру, которую сам называет довольно субъективной. В любом случае довольно полезно, потому что на протяжении всей статьи он говорит в том числе об общем смысле той или иной структуры. + +Новая фича CSS, которая называется Anchor Positioning (или якорное позиционирование), позволяет располагать какой-либо элемент относительно определённого элемента якоря (может быть, и не одного). Хуан Диего Родригез (Juan Diego Rodríguez) на CSS-Tricks [рассказал о новой фиче](https://css-tricks.com/css-anchor-positioning-guide/), начиная с основ. Он сделал введение в фичу, показал, как она работает, рассказал о её особенностях, атрибутах и функциях. Пока она работает только в Chrome начиная со 125 версии, но очень интересная, и к ней стоит присмотреться. + +Следующий материал [о создании тултипов с использованием Popover API](https://www.voorhoede.nl/en/blog/the-popover-api-your-new-best-friend-for-tooltips/) и новых фич CSS. О нём я тоже уже упоминал, это ещё один небольшой гайд. В нём разбирается базовое применение, позиционирование и работа с вьюпортом. Получился компактный базовый гайд. + +Далее [ответы на вопросы с собеседований для Angular-разработчиков](https://www.angularspace.com/18-interview-questions-answered-by-angular-experts-live-post/), да не простые, а золотые. В смысле от опытных Angular-экспертов. Здесь ответы на вопросы о кейсах из их работы, оптимизации, рефакторинге, вкладе в развитие Angular и другие. Интересно тем, что на одни и те же вопросы ответы разные — возможно, вы откроете для себя что-то интересное. + +Далее материал о Clipboard API от команды FrontendMasters. Как вы можете догадываться по названию, это API для работы с буфером обмена. Это небольшой цикл из трёх статей: [первая](https://frontendmasters.com/blog/reading-from-the-clipboard-in-javascript/) — про запись, [вторая](https://frontendmasters.com/blog/writing-to-the-clipboard-in-javascript/) — про чтение, [третья](https://frontendmasters.com/blog/handling-paste-events-in-javascript/) — про обработку события вставки. На самом деле, в работе этого API достаточно много тонкостей, например работа с медиа в буфере, безопасность и другие. Внутри много пояснений и примеров, при этом всё изложено компактно. + +Теперь давайте попробуем что-нибудь создать. Карин Хэндрикс (Karin Hendrikse) на SmashingMagazine опубликовала [статью о создании RSS-ридера](https://www.smashingmagazine.com/2024/10/build-static-rss-reader-fight-fomo/). Понятно, что, скорее всего, вы пользуетесь каким-то готовым, так что рассматривайте это как возможность для практики. Вы будете использовать Astro, пакет для RSS, TypeScript, поработаете с планировщиком. Если интересно — дерзайте. + +Если вы всегда хотели попробовать кроссплатформенную разработку, то есть такой фреймворк — Tauri. Он позволяет с применением веб-технологий разрабатывать десктопные и мобильные приложения, причём фреймворк можно использовать любой, и всё это будет работать быстро и шелковисто. По крайней мере, так пишут. Об этом следующие две статьи. [Первая](https://habr.com/ru/articles/850192/) — о том, с чего начать работу с Tauri, а [вторая](https://habr.com/ru/articles/850558/) — о том, как настроить инструменты для работы с ним. Кстати, недавно вышла вторая мажорная версия. Раз мы уже говорим об этом здесь, то [ссылку на релиз](https://v2.tauri.app/blog/tauri-20/) также прикладываю сюда. В итоге если кроссплатформа — ваша мечта, то хотя бы попробуйте создать что-нибудь простенькое. + +Далее два дайджеста про фреймворки и их экосистему от самих команд фреймворков. [Первый](https://astro.build/blog/whats-new-september-2024/) — от команды Astro, а [второй](https://svelte.dev/blog/whats-new-in-svelte-october-2024) — от команды Svelte. Если хочется пристально следить именно за этими фреймворками, стоит подписаться на их блоги. + +В конце рубрики подборка ресурсов и полезных материалов [по программированию на JavaScript для детей](https://habr.com/ru/companies/pixel_study/articles/850128/). Внутри книги, ссылки на тематические ресурсы и интерактивные штуки. В целом это статья-реклама от соответствующей школы для детей. Я её тут не рекламирую, а вот ресурсы могут вам пригодиться. А вообще, давайте детям детство и берегите себя и своих близких от программирования. + + + ### Новости релизов + +Доступен Chrome 130. В этой версии представили document picture-in-picture API. Это продолжение picture-in-picture, в котором может быть не только видео, но и какой-то кастомный лейаут с элементами и функциональностью. Как пример приводится микро-плеер Spotify — выглядит классно. Было исправлено поведение краевых случаев вложенного CSS. Помимо этого, были представлены и другие небольшие фичи. DevTools тоже с изменениями. Некоторые фильтры панели Network спрятали в выпадающие списки, это можно отключить в настройках экспериментальных фич. В панели производительности появились рекомендации и удобные хлебные крошки для перемещения по таймлайну. Больше подробностей в обзорах [Chrome](https://developer.chrome.com/blog/new-in-chrome-130) и [DevTools](https://developer.chrome.com/blog/new-in-devtools-130) от Google. + + +Также отмечу патчи Firefox [131.0.2](https://www.mozilla.org/en-US/firefox/131.0.2/releasenotes/) и [131.0.3](https://www.mozilla.org/en-US/firefox/131.0.3/releasenotes/) с устранением критических уязвимостей и некоторых багов. + +Доступна [23 мажорная версия Node.js](https://nodejs.org/en/blog/release/v23.0.0). Скоро 22 перейдёт в категорию LTS, а 23 останется Current-версией. В этой версии стабилизировали команду node –run, включили поддержку загрузки ES-модулей через require() по умолчанию, а также прекратили поддержку 32-битной версии Windows. Помимо этого, добавили несколько небольших улучшений для тест-раннера. + +Буквально через день после предыдущего выпуска [Deno 2 зарелизили](https://deno.com/blog/v2.0). Deno всегда позиционировали как многофункциональный рантайм с большим количеством встроенных инструментов, поддержкой TypeScript и совместимостью с Node.js. В посте о релизе второй версии как раз и говорят о том, что совместимость с нодой и npm прекрасная, стандартный API стабилизирован, будут LTS-релизы и новый, современный регистр пакетов JSR. В этой версии разработчики как бы выполняют свои обещания и представляют нам production-ready рантайм — посыл такой. Так что, если вы не смотрели на Deno, сейчас как раз самое время. Больше подробностей — по ссылке в описании. + +А вот парочка приближающихся релизов. Это релизы Next.js 15 и [TypeScript 5.7](https://devblogs.microsoft.com/typescript/announcing-typescript-5-7-beta/). Про Next.js скажу вкратце, а к TypeScript вернёмся уже на релизе. + +Сейчас доступен [второй релиз-кандидат Next.js](https://nextjs.org/blog/next-15-rc2). В целом в 15 версии будет поддержка практически всех новых фич React 19, много исправлений для кэша, стабилизация Turbopack, новые пакеты для Next.js и другие улучшения. На релизе мы поговорим о нём подробнее. Пощупать релиз-кандидат, в принципе, можно и сейчас — инструкция есть по ссылке в описании. + +Также в этом выпуске отмечу релизы [React Native Storybook 8](https://storybook.js.org/blog/react-native-storybook-8/), [Electron 33](https://www.electronjs.org/blog/electron-33-0) и [Ember 5.12](https://blog.emberjs.com/ember-released-5-12/). + + + ### Другие новости + +Немного возвращаясь к Next.js. 24 октября в Сан-Франциско пройдёт [Next.js Conf 2024](https://nextjs.org/conf). В ней можно поучаствовать и виртуально, причём бесплатно. В программе, как обычно, доклады и воркшопы, достаточно зарегистрироваться и прийти посмотреть. Будет про парочку кейсов, применение AI в разработке интерфейсов, серверные компоненты (куда же без них). Думаю, что позже будет и плейлист на YouTube. + + + ### Пишите нам и читайте + [Telegram—канал CSSSR](https://t.me/csssr) + + [Twitter CSSSR](https://twitter.com/csssr_dev) + + [Twitter новостей](https://twitter.com/csssr_news) + + [Telegram ведущего](https://t.me/Vindizh) + + [Twitter ведущего](https://twitter.com/Vindizh)