Merge pull request #792 from CSSSR/news-255

Add news issue 255

_posts/news512/news-255.md

@@ -0,0 +1,79 @@
+---
+title: 'В этом выпуске: обзор React Conf, материалы о React 19 и не только. Мы обсудим слияние Remix с React Router и сравним менеджеры версий Node.js. Также сегодня релизы браузеров, Angular 18 и итоги State of HTML 2023.'
+soundcloudLink: 'https://soundcloud.com/csssr/angular-18-chrome-125-firefox-126-react-conf-state-of-html-2023'
+date: '2024-05-29T00:00:00.000Z'
+episodeNumber: 255
+tag: 'news'
+author: 'Ислам Виндижев'
+---
+
+Всем привет, это «Новости 512» от CSSSR. С небольшой задержкой новости прибыли. В этом выпуске мы коротенько пробежимся по тому, что было на React Conf, посмотрим на отдельные материалы о новых фичах React 19 и не только. Мы обсудим слияние Remix и React Router, сравним менеджеры версий Node.js, посмотрим на интерактивный гайд по Container Queries и другие материалы. Также сегодня релизы браузеров, выход Angular 18 и результаты State of HTML 2023.
+
+<ParagraphWithImage imageName="laptopNews" >
+  ### Интересные публикации
+
+Первый в этом выпуске — кейс Figma. Оказывается, что под капотом у Figma свой собственный язык Skew, который сейчас компилится в JavaScript и позволяет применять сложные оптимизации. В основном он применяется для мобильного движка рендеринга редактора. В итоге было принято решение отказаться от Skew и мигрировать на TypeScript. Было несколько причин: рост команды и необходимость в унификации, прогресс WebAssembly и TypeScript и другие. В [статье](https://www.figma.com/blog/figmas-journey-to-typescript-compiling-away-our-custom-programming-language/) описывается кейс, схематично изображено, как проводили переход, не нарушая работу команд и не останавливая работы по развитию продукта.
+</ParagraphWithImage>
+
+Фреймворк [Remix и React Router объединяются](https://remix.run/blog/merging-remix-and-react-router). Они уже довольно давно начали сближаться, поэтому было принято решение их объединить. Выйдет ещё третья версия Remix, а потом седьмая версия React Router, которая и станет результатом объединения. В результате получится лучшая производительность и удобство использования. В седьмой версии роутера будет добавлен Vite, и получится мега-микс из фич Remix и React Router на стероидах. Обещают, что не будет никаких болезненных переходов, а просто скриптом поменяются импорты, и всё будет работать. Больше подробностей — в блоге Remix.
+
+Следующий материал для тех, кто интересуется React, но не попал на React Conf в онлайне. Это, собственно, [обзор](https://habr.com/ru/articles/814671/) докладов и новостей с конференции. Здесь, конечно, будет про React 19 и его новые фичи, новости React Router, о которых я только что говорил, будет также про React Compiler и другие новые возможности.
+
+Вместе с этим обзором я принёс вам и отдельные материалы на разные темы, которые касаются новой версии React. Например, Дариус Цепулис (Darius Cepulis) в своём блоге написал [заметку](https://www.mux.com/blog/react-19-server-components-and-actions) о серверных компонентах и новых экшенах. Там вы найдёте короткое объяснение и примеры.
+
+Лазар Николов (Lazar Nikolov) в SmashingMagazine погрузился в [детали работы серверных компонентов](https://www.smashingmagazine.com/2024/05/forensics-react-server-components/). Это уже более подробный материал, в котором он рассказывает о том, как в принципе появилась идея создания серверных компонентов и как они помогают разгружать клиентскую часть приложения. Там же и обзор возможностей серверных компонентов и тонкостей их работы.
+
+Тем временем Джэк Херрингтон (Jack Herrington) в своём видео погрузился [в детали работы React Compiler](https://www.youtube.com/watch?v=PYHBHK37xlE). Можно сказать, что это продвинутый лоадер с мемоизацией из коробки. Пока не совсем понятно, как хорошо он будет настраивать мемоизацию на практике, но посмотрим. А Джек в своём видео начинает с простых примеров, плавно вникает в устройство компилятора и двигается к более продвинутым примерам. Что нужно подчеркнуть: компилятор не включён в React 19 и выйдет позже, а также он не будет работать с MobX: они несовместимы. Видео идёт всего 15 минут, так что можно его быстренько посмотреть.
+
+Дальше интересность для всех, кто работает с Node.js и часто переключает версии. Павел Романов написал [статью-сравнение пяти менеджеров версий ноды](https://pavel-romanov.com/5-node-version-managers-compared-which-is-right-for-you). Он сравнивает NVM, N, FNM, Volta и pnpm, рассматривает их плюсы и минусы, а в итоге своё личное предпочтение отдаёт Volta. Лично мне ближе pnpm, но на вкус и цвет фломастеры разные. При этом как минимум стоит взглянуть на альтернативы — возможно, вы найдёте для себя что-то новое.
+
+Теперь немного практики. Ахмад Шадид (Ahmad Shadeed) порадовал нас своим новым интерактивным гайдом. На этот раз речь идёт о [Container Query](https://ishadeed.com/article/css-container-query-guide/). Если помните, он уже делал классный интерактивный гайд по :has(), этот — подобный. В нём есть анимированные примеры, плавное усложнения материала и наиболее распространённые случаи применения фичи. Всё компактно упаковано, хорошо объясняется — в общем, рекомендую.
+
+Следующая [статья](https://bhmt.dev/blog/scraping/) посвящена веб-скрейпингу. Я бы даже не сказал «статья», потому что она довольно объёмная — это скорее крепкий гайд. Напомню, скрейпинг — это извлечение информации из веб-страниц. Здесь примеры того, как вообще извлекать и собирать данные, некоторые полезные подсказки и трюки. Попробуйте, это прикольно и может пригодиться для какого-то личного проекта. Но хочу предупредить, что это дело немного затягивает.
+
+Дальше ещё парочка материалов, в которых стоит поразбираться и поделать что-то руками. В первом автор предлагает [написать свой аналог React за 400 строк кода](https://webdeveloper.beehiiv.com/p/build-react-400-lines-code). Такие статьи иногда неплохо помогают на примере упрощённой реализации разобраться в фреймворке. Второй материал — гайд по созданию [Drag’n’Drop между приложениями](https://www.youtube.com/watch?v=E4l4MBO-Bwg).
+
+А вот вам [гайд](https://tduyng.github.io/blog/dynamic-github-profile-with-bun-typescript/) по прокачке своего GitHub-профиля. Автор при помощи Bun и TypeScript динамически подтягивает в README своего профиля посты из своего блога. Это можно использовать как прекрасный пример для того, чтобы отображать что-то своё — были бы желание и фантазия.
+
+В блоге Deno появилась заметка о том, [как правильно документировать свою библиотеку](https://deno.com/blog/document-javascript-package). В основном она посвящена JSDoc, о котором вы слышали или, возможно, уже пользуетесь. Здесь как примеры и разбор фич JSDoc, так и полезные советы по тому, как держать документацию в актуальном состоянии и как к этому подойти. Хорошая статья, очень советую.
+
+В конце рубрики ресурс [webstatus.dev](https://webstatus.dev/), на котором можно посмотреть список браузерных фич и узнать о поддержке в разных браузерах.
+
+<ParagraphWithImage imageName="manWithLaptop">
+  ### Новости релизов
+
+Доступен Chrome 125. В новой версии появилось якорное позиционирование, был добавлен новый API Compute Pressure, который помогает экономить энергию устройств. Также Storage Access API теперь можно использовать не только для кукис. К Devtools прикрутили ИИ, который сможет объяснять ошибки и помогать их устранять. Больше подробностей о релизе — в официальных обзорах [Chrome](https://developer.chrome.com/blog/new-in-chrome-125) и [DevTools](https://developer.chrome.com/blog/new-in-devtools-125) от Google.
+</ParagraphWithImage>
+
+Вышел [Firefox 126](https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/126). В этом релизе был добавлен метод `URL.parse()`, была добавлена поддержка CSS-свойства `zoom` и псевдоселектора :state(). В API IndexedDB добавлен метод IDBFactory.databases() для перебора имеющихся баз данных, который возвращает массив с именами доступных баз. Помимо этого, в CSS была добавлена экспериментальная функция shape(), которая позволяет формировать фигуры с использованием CSS-свойств clip-path и offset-path.
+
+Фреймворк Angular отметился новой мажорной версией [за номером 18](https://blog.angular.dev/angular-v18-is-now-available-e79d5ac0affe). В этом релизе новый синтаксис потока управления уже не экспериментальный. Добавили `@defer` для ленивой загрузки шаблонов, добавили кучу фич, связанных с сигналами, и наконец ушли от использования zone.js. Если подытожить, то в этом релизе была завершена работа над несколькими вещами, над которыми трудились несколько лет. 
+
+Next.js обзавёлся [релиз-кандидатом 15-й мажорной версии](https://nextjs.org/blog/next-15-rc). Прямо сейчас я не буду на ней останавливаться, мы обсудим её на релизе, но имейте в виду, что RC уже есть.
+
+Вышел апдейт текущей LTS-версии Node.js [18.20.3](https://nodejs.org/en/blog/release/v18.20.3). В нём обновили зависимости и исправили баг, из-за которого метод `http.server.close()` некорректно закрывал неактивные соединения. Также вышло обновление Node.js [22.2.0](https://nodejs.org/en/blog/release/v22.2.0).
+
+Продолжая тему рантаймов: Bun получил обновления [1.1.7](https://bun.sh/blog/bun-v1.1.7) и [1.1.8](https://bun.sh/blog/bun-v1.1.8). Оба релиза посвящены в основном фиксам багов и небольшим доработкам, так что, если вы ждали обновы с устранением актуальной проблемы, стоит заглянуть в release notes.
+
+[Astro 4.8](https://astro.build/blog/astro-480/) получил парочку экспериментальных фич. Это свои собственные экшены и возможность отображать контент другой страницы по текущему URL, что может пригодиться для кастомизации контента или каких-то A/B-фич. Помимо этого, пофиксили ряд багов.
+
+В этом выпуске также отмечу релизы [Playwright 1.44.0](https://github.com/microsoft/playwright/releases/tag/v1.44.0), [pnpm 9.1.0](https://github.com/pnpm/pnpm/releases/tag/v9.1.0) и [Storybook 8.1.0](https://github.com/storybookjs/storybook/releases/tag/v8.1.0).
+
+<ParagraphWithImage imageName="laptopNews" >
+    ### Другие новости
+
+Доступны результаты опроса [State of HTML 2023](https://2023.stateofhtml.com/en-US). Я думаю, что скоро подъедут и результаты опросов по React и JavaScript — о них мы тоже поговорим. Итак, в этом году опрошенным очень понравился новый Popover API, тег <dialog>, нативная ленивая загрузка и семантические элементы разметки. Радует, что семантическая вёрстка уже стандарт, а не новинка. При этом сложности вызывает освоение доступности и поддержка фич браузерами, несмотря на то, что инициатива Interoperability работает. Больше подробностей — по ссылке в описании.
+</ParagraphWithImage>
+
+Vercel поднял [новый раунд инвестиций на 250 миллионов долларов](https://www.reuters.com/technology/vercel-completes-250-mln-series-e-round-325-bln-valuation-2024-05-16/). Напомню, что это ребята, которые сделали Next.js и строят свою облачную инфраструктуру для развёртывания проектов. Что это значит? Что ребята продолжат развивать Next.js, и в скором времени мы сможем увидеть новый виток развития продуктов компании. Посмотрим, что из этого получится.
+
+  ### Пишите нам и читайте
+  [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)