Merge pull request #807 from CSSSR/news-270

Add news issue 270

Author: Vindizh

_posts/news512/news-270.md

@@ -0,0 +1,87 @@
+---
+title: 'В этом выпуске мы поговорим о релизах Chrome и Firefox, узнаем как работать с длинными тасками, найдём утечки Observable, углубимся во View Transition API и посмотрим на другие интересные материалы.'
+soundcloudLink: 'https://soundcloud.com/csssr/chrome-133-firefox-135-dlinnye-taski-v-js-massivy-v-ts-interop-2025'
+date: '2025-03-02T00:00:00.000Z'
+episodeNumber: 270
+tag: 'news'
+author: 'Ислам Виндижев'
+---
+
+Всем привет, это «Новости 512» от CSSSR. В этом выпуске мы поговорим о релизах Chrome и Firefox, узнаем как работать с длинными тасками, найдём утечки Observable, углубимся во View Transition API и посмотрим на другие интересные материалы.
+
+<ParagraphWithImage imageName="laptopNews" >
+  ### Интересные публикации
+
+Случается так, что задача длинная, дорогая и есть смысл её разделить. Способов сделать это не один, и у каждого есть свои преимущества. Алекс МакАртур (Alex MacArthur) в [своей статье](https://macarthur.me/posts/long-tasks/) поднимает эту тему и рассказывает аж о семи разных подходах к решению этой задачи. Этот список включает в себя работу с планировщиком, Web Workers, setTimeout() с рекурсией и другие. По каждому из них, естественно, есть пример и лаконичный разбор. В конце статьи вы найдёте резюме, в котором Алекс как раз говорит о том, какие есть трейдофы и какой подход лучше выбрать в той или иной ситуации. Также доступен и [перевод на Хабре](https://habr.com/ru/companies/timeweb/articles/882418/).
+</ParagraphWithImage>
+
+Вы когда-нибудь задавались вопросом [сколько длится секунда в JS](https://docs.timetime.in/blog/how-long-is-a-second-in-js/)? Мне бы и в голову никогда не пришло. Однако, Иаго Ластра (Iago Lastra) рассказал о том, как считается время в JS на самом деле и почему это может быть важно. Он делает короткий экскурс в подсчёт времени в принципе, а потом переходит конкретно к JS. В JS время в формате POSIX, который не предусматривает коррективы секундной издержки. В большинстве приложений этого абсолютно достаточно, а вот в научных, финансовых или высокопроизводительных приложениях этот нюанс придётся учитывать. Подробнее о времени и при чём тут атомы цезия читайте по ссылке в описании.
+
+Существует такой фреймворк для разработки десктопных приложений при помощи веб-технологий, как Electron. Не знаю насколько он популярен на самом деле, но, например, десктопное приложение Slack, да и многие другие написаны именно на нём. Felix Rieseberg — один из мейнтейнеров проекта — решил развеять [некоторые мифы](https://felixrieseberg.com/things-people-get-wrong-about-electron/) о нём. Например, он рассказывает о том, что традиционно десктопные языки с ним тоже интегрируются, веб-технологии уже давно применяются вне веба, а размер приложений и производительность уже не являются проблемами Electron в наше время. Если у вас предвзятое отношение к Electron — стоит почитать.
+
+Говорят «сколько воды утекло», а у нас «сколько памяти утекло». Сколько же её может утечь, как это обнаружить и что делать, в [своей статье на Хабре](https://habr.com/ru/articles/879502/) рассказала Алан Ходов. Речь идёт о случае, когда в Angular не отписываешься от Observable. Для того, чтобы продемонстрировать это Алан реализует простое приложение, в котором отписаться «забывает». После этого он ищет утечку при помощи DevTools, устраняет её и сравнивает картины в DevTools до и после. Получился довольно лаконичный гайд по поиску подобных утечек.
+
+В TypeScript существует две разные нотации для массивов T[] и Array<T>. В целом они вроде бы эквивалентные, но Аксель Раушмаер предпочитает вторую нотацию. В своей [короткой заметке](https://2ality.com/2025/02/array-type-notation.html) он рассказал о том, почему нотаций две и почему вторая ему нравится больше. Причина в том, что код лучше читается, когда у массивов могут быть элементы разного типа. В заметке вы также найдёте несколько нюансов работы разных нотаций.
+
+Давненько у нас не было материалов с CSS Tricks. Насколько я понимаю, у ресурса какое-то время не было спонсора, теперь появился новый и публикация статей возобновилась. Сегодня их будет аж четыре.
+
+Хуан Диего Родригез (Juan Diego Rodríguez) [окунулся](https://css-tricks.com/what-on-earth-is-the-types-descriptor-in-view-transitions/) в глубины документации View Transition API и задался вопросом, что такое дескриптор `types` и зачем он нужен. Он позволяет определить разные анимации для перехода между разными документами. Это полезно, но лично мне было несколько сложно понять, как корректно их задать для разных документов и показалось реально замудренным. Может быть вы разберётесь лучше.
+
+@counter-style — это правило в CSS, которое позволяет создавать пользовательские стили для маркеров списков. Стандартные возможности ограничены, а это правило позволяет использовать иконки, создавать системы нумерации, в общем, есть с чем поиграться. Об этом и [пишет](https://css-tricks.com/some-things-you-might-not-know-about-custom-counter-styles/) Джефф Грэм (Geoff Graham) на CSS Tricks. Он приводит интересные примеры и разбирается в возможностях правила.
+
+Ещё два материала скорее более практические гайды. [Первый](https://css-tricks.com/positioning-text-around-elements-with-css-offset/) посвящён позиционированию текста вокруг элементов при помощи CSS-свойства offset, а [второй](https://css-tricks.com/fancy-menu-navigation-using-anchor-positioning/) — созданию меню с применением якорного позиционирования для создания эффектов.
+
+Мягкое введение в WASM делает команда Deno после релиза версии 2.1, в котором появилась поддержка WASM первого класса. [Рассматривается](https://deno.com/blog/intro-to-wasm) базовый пример создания и компиляции WASM-модуля, его подключение и вызов функции из него. Пример действительно супер-простой, но если вы работаете с Deno и пока не пробовали WASM совсем, то он может вдохновить вас на дальнейшие шаги.
+
+Ещё одна короткая заметка на этот раз от Робина Уриха. Он рассказывает о том, [как ваш Vite-проект на чистом JS подружить с TypeScript](https://www.robinwieruch.de/vite-typescript/). В ней он рассказывает, как создать правильные файлы конфигурации, подружить их между собой и где ещё могут понадобиться коррективы. Коротенькая инструкция под конкретный случай.
+
+Дальше — полезные ссылки и материалы, но уже покороче.
+
+Я довольно много за всё время существования новостей рассказывал про статьи Адама Аргайла (Adam Argyle) про реализацию каких-то фич. Они все собраны в [Nerdy Notebook](https://nerdy.dev/notebook/index.html) — ресурсе, на котором он собрал те самые фичи. Это большой сборник, где можно найти много рецептов.
+
+В следующей заметке собран [обзор аж 11-ти тектовых редакторов](https://liveblocks.io/blog/which-rich-text-editor-framework-should-you-choose-in-2025) для ваших проектов. Какие-то названия вы уже могли встречать или работать с этими редакторами, а какие-то нет. Стоит заглянуть, если у вас есть такие потребности.
+
+Все пользуются либо Jest, либо Vitest, либо тест-раннером Node.js. Но есть такой [тест-раннер как Poku](https://github.com/wellwelwel/poku/releases/tag/v3.0.0). Он кросплатформенный, легковесный, производительный и современный. Если интересуетесь тест-раннерами — поглядите.
+
+Ещё один небольшой инструментик — [Ruck](https://ruck.tech/). Это опенсорсный фреймворк для создания React-приложений с Deno. Исходя из readme, он позволяет создавать как простенькие, так и сложные приложения.
+
+[Восьмая часть](https://habr.com/ru/companies/timeweb/articles/872326/) перевода репозитория об алгоритмах и структурах данных на JavaScript вышла на Хабре. Она посвящена алгоритмам сортировки. Не торопитесь отмахиваться: если у вас нет теоретической подготовки по алгоритмам, очень стоит ознакомиться, чтобы понимать, какой алгоритм в какой ситуации стоит выбрать и как они реализуются.
+
+Обращу ваше внимание на JS-библиотеку для сканирования документов [jscanify](https://github.com/puffinsoft/jscanify). Если у вашего проекта есть фичи, связанные со сканированием документов, чеков, других бумажных носителей — посмотрите, может пригодится.
+
+Завершит рубрику [документальный фильм о фреймворке Angular](https://www.youtube.com/watch?v=cRC9DlH45lA). Кстати, создатели этого фильма делали документалки и про другие фреймворки.
+
+<ParagraphWithImage imageName="manWithLaptop">
+  ### Новости релизов
+
+Доступен Chrome 133. В этом релизе была добавлена продвинутая версия функции attr(), которая позволяет использовать в качестве типа не только строки. Теперь при помощи container queries можно стилизовать дочерние элементы в зависимости от состояния скролла. В DevTools AI-ассистенту Gemini добавили историю чата, которая не очищается между сессиями. Больше подробностей в официальных обзорах [Chrome](https://developer.chrome.com/blog/new-in-chrome-133) и [DevTools](https://developer.chrome.com/blog/new-in-devtools-133) от Google.
+</ParagraphWithImage>
+
+[Firefox 135](https://www.mozilla.org/en-US/firefox/135.0/releasenotes/) получил экспериментальную поддержку Temporal API, а такие фичи как доступ к чат-ботам прямо в браузере и автозаполнение банковских карт теперь доступны глобально. Помимо этого был расширен перечень языков в Firefox Translate. Больше подробностей в блоге Firefox.
+
+[Deno 2.2](https://deno.com/blog/v2.2) порадовал нас улучшениями в основном в области качества жизни разработчиков. Этот релиз включает в себя интеграцию с OpenTelemetry, новые правила для линтера, обновление версии TS и движка, а также поддержку node:sqlite. Помимо этого поработали над производительностью и WebGPU.
+
+В новой версии [Astro 5.3](https://astro.build/blog/astro-530/) ускорили рендеринг страниц, добавили автоматическую инициализацию хранилица сессии, а также более гибкий бандлинг файлов для Netlify. Больше подробностей в блоге Astro.
+
+Также в этом выпуске отмечу релизы релиз-кандидата [TypeScript 5.8](https://devblogs.microsoft.com/typescript/announcing-typescript-5-8-rc/), [Prettier 3.5](https://prettier.io/blog/2025/02/09/3.5.0), [pnpm 10.3.0](https://github.com/pnpm/pnpm/releases/tag/v10.3.0) и [MySQL 9.2.0](https://dev.mysql.com/doc/relnotes/mysql/9.2/en/news-9-2-0.html).
+
+<ParagraphWithImage imageName="laptopNews" >
+    ### Другие новости
+
+Помните про инициативу Interop? Это сотрудничество разработчиков браузеров для согласованной разработки браузерных фич, чтобы они быстрее получали стабильную кросс-браузерную поддержку. Были объявлены [фичи на 2025 год](https://webkit.org/blog/16458/announcing-interop-2025/). В этом году в фокусе: Storage Access API, pointer/mouse events, событие scrollend, URLPattern API, а также дальнейшая интеграция JavaScript и WebAssembly (WASM). В этом же ряду такие интересные фичи как правило @scope, View Transition API, якорное позиционирование и другие. Больше подробностей и полный список фич по ссылке.
+</ParagraphWithImage>
+
+Продолжается [юридический танец](https://deno.com/blog/deno-v-oracle2) вокруг торговой марки JavaScript. Oracle, возможно намеренно, ответил на прошение не вполне корректно оформленным своим прошением. До самого JavaScript, кстати, пока так и не добрались. И непонятно, когда доберутся. Если вам интересно, в блоге Deno вы можете прочитать всю историю и юридические документы. Кстати, оказалось неожиданно интересно.
+
+На сегодня это всё. Всем пока и до встречи в следующем выпуске.
+
+  ### Пишите нам и читайте
+  [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)