Новости

• вышла версия новая версия Astro 5.1:

  • завезли экспериментальную поддержку хранения на севере данных сессии пользователя (на клиенте не хранятся никакие данные, кроме session id в куки), есть интеграции хранилища сессий с Redis и другими БД
  • появилось кеширование не только локальных картинок, но и удалённых
  • добавили хэлпер getActionPath для того, чтобы узнать урл определённого серверного action-а на клиенте.

  Резюме: Astro всё ещё вызывает симпатию DX-ом, тщательным выбором новых API, появляющихся в проекте, вниманием к деталям; проект уверенно занимает нишу React-фреймворка для «стандартных» приложений типа CMS и контентных сайтов

• почти не пишу про видео, но эта новость из мира видео достойна упоминания: MPJ, известный в узких кругах как автор канала Fun Fun Function, после четырёхлетнего перерыва вернулся с курсом по D3.js

Проекты

• ghostty — быстрый и заточенный под «нативность» терминал для macOS и Linux

Статьи и демки

JS

• напоминание, что React Server Components могут работать и без рантаймового сервера, в этом случае «сервер» в билд-тайме рендерит компоненты и сериализует их в текст, а уже этот текст может быть доставлен в SPA в виде статического файла с обычного файлового хостинга: в таком случае разгружается общий клиентский JS-бандл, так как часть JS-кода выносится в «пререндеренном» текстовом виде в отдельные файлы, которые SPA уже может запросить «лениво» по необходимости, то есть теперь SPA уже не всегда означает чистый client-side-render
• если вы занялись неблагодарным делом бенчмаркинга кода, то на пути вас ждут как минимум пара движков: V8 (Chrome, Node, Deno) и JavaScriptCore (Safari, Bun), и в каждом есть свои трюки, оптимизирующие выполнение кода (JIT-кэширование, рандомный Garbage Collector, Tail Call Optimization), которые при бенчмаркинге надо наоборот обойти; но для обычных смертных из полезного можно вынести, что performance.now() более точен, чем console.time()/console.timeEnd(), но при этом нужно помнить, что точность выполнения кода специально может немного задерживаться для защиты от фингерпринтинга
• писать на TS, в целом, приятно (не всегда), но вот преобразовывать TS в JS вручную бывает заморочно почти всегда (tsc медленный, нужны режимы билда/вотча…), но хорошо, что уже много тулов поддерживает TS из коробки, в том числе в скором времени и Node 23, так что все в дальнейшем будут ориентироваться на подход Node — просто вырезать типы (а пока будущее не докатилось до чётной версии Node, есть tsx — беззаморочный запускальщик ts-файлов в Node)
• методы forEach и map массивов — всегда синхронные, то есть если вы обрабатываете ими большие объёмы данных, то эта обработка создаёт длинные таски, которые блокируют выполнение других задач в потоке, что в свою очередь может привести к зависаниям вкладки, лагающим анимациям; решается проблема переходом на цикл for .. of и батчингом: в процессе цикла нужно проверить, пора ли делать «паузу» и если да, то запускать await new Promise(requestAnimationFrame) для запуска отложенных перерисовок и scheduler.yield() для выполнения параллельных задач

CSS

• юзкейсы нового «подрезающего» свойства text-box(text-box-trim/text-box-edge), о котором упоминал недавно: кнопки, отступы в лейаутах, выравнивание иконки/картинки + текста, дизайнерские выкрутасы
• при вырезании текста из фона с помощью background-clip: text фоновой «картинкой» может быть, например, полосатый repeating-linear-gradient
• фоллбек-шрифт можно не просто перечислить в font-family, но объявить в @font-face, а внутри подключить гарантированный локальный шрифт через local("Arial"), и затем потвикать его настройки с помощью size-adjust, ascent-override… для большего визуального соответствия основному шрифту
• несколько полезных фактов о кейфреймах:
  • одинаковые значения свойств можно не дублировать в нескольких правилах, а объединять в одно правило через запятую 0%, 50% {}
  • порядок следования правил в кейфрейме может быть произвольным { from {} to {} from, 50% {}}
  • правила с одинаковыми процентами каскадируются, то есть последнее перекрывает предыдущие
  • внутри отдельного правила в кейфрейме можно подправить animation-timing-function, задав шагу функцию linear()

Платформа

• во вкладке Sources > Overrides можно подредактировать контент в файлах сайта, например, в HTML-файле отредактировать подключение картинок, чтобы протестировать фикс перфоманса без модификации исходного кода
• как в своё время ES впитал новшества CoffeeScript, так и веб-платформа со временем впитывает то, что предоставлялось билд-тулами и фреймворками: резолв пути к файлу есть в нативном import.meta.resolve() и import.meta.url, динамические импорты позволяют «лениво» запрашивать модули, минификация файлов реализуется на сервере с gzip или brotli, конкатенация файлов становится не нужна благодаря HTTP2/3; поэтому базовые кейсы из задач фреймворков/бандлеров вымываются, и на их стороне остаются DX и сложные/узкоспециализированные вещи
• мастерство разработчика — балансировать в промежутке между «написать свой велосипед» и «использовать готовую либу» и, прикинув трейд-оффы, выбрать правильный инструмент для конкретного случая