Всем привет, это «Новости 512» от CSSSR. В этом выпуске мы поговорим о релизах Chrome и Firefox, узнаем как работать с длинными тасками, найдём утечки Observable, углубимся во View Transition API и посмотрим на другие интересные материалы.
Интересные публикации
Случается так, что задача длинная, дорогая и есть смысл её разделить. Способов сделать это не один, и у каждого есть свои преимущества. Алекс МакАртур (Alex MacArthur) в своей статье поднимает эту тему и рассказывает аж о семи разных подходах к решению этой задачи. Этот список включает в себя работу с планировщиком, Web Workers, setTimeout() с рекурсией и другие. По каждому из них, естественно, есть пример и лаконичный разбор. В конце статьи вы найдёте резюме, в котором Алекс как раз говорит о том, какие есть трейдофы и какой подход лучше выбрать в той или иной ситуации. Также доступен и перевод на Хабре.
Вы когда-нибудь задавались вопросом сколько длится секунда в JS? Мне бы и в голову никогда не пришло. Однако, Иаго Ластра (Iago Lastra) рассказал о том, как считается время в JS на самом деле и почему это может быть важно. Он делает короткий экскурс в подсчёт времени в принципе, а потом переходит конкретно к JS. В JS время в формате POSIX, который не предусматривает коррективы секундной издержки. В большинстве приложений этого абсолютно достаточно, а вот в научных, финансовых или высокопроизводительных приложениях этот нюанс придётся учитывать. Подробнее о времени и при чём тут атомы цезия читайте по ссылке в описании.
Существует такой фреймворк для разработки десктопных приложений при помощи веб-технологий, как Electron. Не знаю насколько он популярен на самом деле, но, например, десктопное приложение Slack, да и многие другие написаны именно на нём. Felix Rieseberg — один из мейнтейнеров проекта — решил развеять некоторые мифы о нём. Например, он рассказывает о том, что традиционно десктопные языки с ним тоже интегрируются, веб-технологии уже давно применяются вне веба, а размер приложений и производительность уже не являются проблемами Electron в наше время. Если у вас предвзятое отношение к Electron — стоит почитать.
Говорят «сколько воды утекло», а у нас «сколько памяти утекло». Сколько же её может утечь, как это обнаружить и что делать, в своей статье на Хабре рассказала Алан Ходов. Речь идёт о случае, когда в Angular не отписываешься от Observable. Для того, чтобы продемонстрировать это Алан реализует простое приложение, в котором отписаться «забывает». После этого он ищет утечку при помощи DevTools, устраняет её и сравнивает картины в DevTools до и после. Получился довольно лаконичный гайд по поиску подобных утечек.
В TypeScript существует две разные нотации для массивов T[] и Array
Давненько у нас не было материалов с CSS Tricks. Насколько я понимаю, у ресурса какое-то время не было спонсора, теперь появился новый и публикация статей возобновилась. Сегодня их будет аж четыре.
Хуан Диего Родригез (Juan Diego Rodríguez) окунулся в глубины документации View Transition API и задался вопросом, что такое дескриптор types и зачем он нужен. Он позволяет определить разные анимации для перехода между разными документами. Это полезно, но лично мне было несколько сложно понять, как корректно их задать для разных документов и показалось реально замудренным. Может быть вы разберётесь лучше.
@counter-style — это правило в CSS, которое позволяет создавать пользовательские стили для маркеров списков. Стандартные возможности ограничены, а это правило позволяет использовать иконки, создавать системы нумерации, в общем, есть с чем поиграться. Об этом и пишет Джефф Грэм (Geoff Graham) на CSS Tricks. Он приводит интересные примеры и разбирается в возможностях правила.
Ещё два материала скорее более практические гайды. Первый посвящён позиционированию текста вокруг элементов при помощи CSS-свойства offset, а второй — созданию меню с применением якорного позиционирования для создания эффектов.
Мягкое введение в WASM делает команда Deno после релиза версии 2.1, в котором появилась поддержка WASM первого класса. Рассматривается базовый пример создания и компиляции WASM-модуля, его подключение и вызов функции из него. Пример действительно супер-простой, но если вы работаете с Deno и пока не пробовали WASM совсем, то он может вдохновить вас на дальнейшие шаги.
Ещё одна короткая заметка на этот раз от Робина Уриха. Он рассказывает о том, как ваш Vite-проект на чистом JS подружить с TypeScript. В ней он рассказывает, как создать правильные файлы конфигурации, подружить их между собой и где ещё могут понадобиться коррективы. Коротенькая инструкция под конкретный случай.
Дальше — полезные ссылки и материалы, но уже покороче.
Я довольно много за всё время существования новостей рассказывал про статьи Адама Аргайла (Adam Argyle) про реализацию каких-то фич. Они все собраны в Nerdy Notebook — ресурсе, на котором он собрал те самые фичи. Это большой сборник, где можно найти много рецептов.
В следующей заметке собран обзор аж 11-ти тектовых редакторов для ваших проектов. Какие-то названия вы уже могли встречать или работать с этими редакторами, а какие-то нет. Стоит заглянуть, если у вас есть такие потребности.
Все пользуются либо Jest, либо Vitest, либо тест-раннером Node.js. Но есть такой тест-раннер как Poku. Он кросплатформенный, легковесный, производительный и современный. Если интересуетесь тест-раннерами — поглядите.
Ещё один небольшой инструментик — Ruck. Это опенсорсный фреймворк для создания React-приложений с Deno. Исходя из readme, он позволяет создавать как простенькие, так и сложные приложения.
Восьмая часть перевода репозитория об алгоритмах и структурах данных на JavaScript вышла на Хабре. Она посвящена алгоритмам сортировки. Не торопитесь отмахиваться: если у вас нет теоретической подготовки по алгоритмам, очень стоит ознакомиться, чтобы понимать, какой алгоритм в какой ситуации стоит выбрать и как они реализуются.
Обращу ваше внимание на JS-библиотеку для сканирования документов jscanify. Если у вашего проекта есть фичи, связанные со сканированием документов, чеков, других бумажных носителей — посмотрите, может пригодится.
Завершит рубрику документальный фильм о фреймворке Angular. Кстати, создатели этого фильма делали документалки и про другие фреймворки.
Новости релизов
Доступен Chrome 133. В этом релизе была добавлена продвинутая версия функции attr(), которая позволяет использовать в качестве типа не только строки. Теперь при помощи container queries можно стилизовать дочерние элементы в зависимости от состояния скролла. В DevTools AI-ассистенту Gemini добавили историю чата, которая не очищается между сессиями. Больше подробностей в официальных обзорах Chrome и DevTools от Google.
Firefox 135 получил экспериментальную поддержку Temporal API, а такие фичи как доступ к чат-ботам прямо в браузере и автозаполнение банковских карт теперь доступны глобально. Помимо этого был расширен перечень языков в Firefox Translate. Больше подробностей в блоге Firefox.
Deno 2.2 порадовал нас улучшениями в основном в области качества жизни разработчиков. Этот релиз включает в себя интеграцию с OpenTelemetry, новые правила для линтера, обновление версии TS и движка, а также поддержку node:sqlite. Помимо этого поработали над производительностью и WebGPU.
В новой версии Astro 5.3 ускорили рендеринг страниц, добавили автоматическую инициализацию хранилица сессии, а также более гибкий бандлинг файлов для Netlify. Больше подробностей в блоге Astro.
Также в этом выпуске отмечу релизы релиз-кандидата TypeScript 5.8, Prettier 3.5, pnpm 10.3.0 и MySQL 9.2.0.
Другие новости
Помните про инициативу Interop? Это сотрудничество разработчиков браузеров для согласованной разработки браузерных фич, чтобы они быстрее получали стабильную кросс-браузерную поддержку. Были объявлены фичи на 2025 год. В этом году в фокусе: Storage Access API, pointer/mouse events, событие scrollend, URLPattern API, а также дальнейшая интеграция JavaScript и WebAssembly (WASM). В этом же ряду такие интересные фичи как правило @scope, View Transition API, якорное позиционирование и другие. Больше подробностей и полный список фич по ссылке.
Продолжается юридический танец вокруг торговой марки JavaScript. Oracle, возможно намеренно, ответил на прошение не вполне корректно оформленным своим прошением. До самого JavaScript, кстати, пока так и не добрались. И непонятно, когда доберутся. Если вам интересно, в блоге Deno вы можете прочитать всю историю и юридические документы. Кстати, оказалось неожиданно интересно.
На сегодня это всё. Всем пока и до встречи в следующем выпуске.