Новости

• в Safari TP 186 допиливают @scope, добавили align-content для табличных ячеек и сделали анимируемым свойство content-visibility
• обновилась Node v20.11.0 (LTS): появились esm import.meta.dirname и import.meta.filename на замену CommonJS filename и dirname
• вышел Prettier 3.2: поддержан формат файлов jsonc (если вы, также как и я не знали, что это такое, — это творение Microsoft, json с комментами // и /**/)
• вышел Next.js 14.1 — ускорен стартап и Turbopack, улучшен вывод ошибок, добавлена поддержка нативных window.history.pushState и window.history.replaceState, логирование использования кэша, расширены возможности работы с картинками
• в TS 5.4 появится новый тип NoInfer<T>, чтобы блокировать инфер пришедшего типа

Проекты

• The AHA Stack — всем панкрок! или Astro, htmx и Alpine.js объединились в банду, шатают SPA-мир и хотят вернуть веб-разработке простые ментальные модели и воркфлоу (интересно, доколе ещё ждать наступления прекрасного будущего?!)
• remote-storage — localStorage с сохранением на удалённый сервер (даже бесплатный, чтобы вы туда насохраняли инфы, а потом душили жабку за подписку, которая вскоре появится)
• templ — серверный рендеринг HTML на Go (внутри можно редерить и React-компоненты)
• worker-timers — таймеры, которые не фризятся при неактивном окне за счёт выноса в worker
• dep-tree — 3d визуализация внутренних связей проекта
• symbiotejs — а что если вы завтра проснётесь и React окажется дурным сном, а все приложения вокруг будут написаны близко к нативным API, без прятания за абстракциями и «магических ящиков»

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

JS

• новомодные написанные на Rust линтеры (oxlint, biome…) быстры в том числе потому, что не интегрированы с TS type checking API, которое, увы, довольно медленное, но зато фичёвое
• ещё одно напоминание, что в Google Chrome во второй половине 2024 будут отключены сторонние (3d-party) куки, что поломает Google же Analytics, Google Pixel, инструменты ретаргетинга…, но в целом останутся ещё другие безкукисовые инструменты, чтобы показать вам баннер с рекламой кредитной карты — опыт команды Sentry
• React Server Components не требует наличия сервера или Анонс курса Дэна Абрамова «Нейминг от бога» (а Astro, кстати, требует)
• с помощью Clipboad API можно копипастить не только текст, но и картинки в PNG, гайд как это сделать на React
• как с помощью современных JS-рантаймов (bun, deno, node) собрать самодостаточный выполняемый файл
• золотое правило написания тестов: «Тест должен не проходить, тогда и только тогда, когда цель системы не выполнена.», то есть в тесте не стоит вдаваться в детали имплементации, а сфокусировать один тест только на одной цели
• сравнение либ типизированной проверки данных: Zod vs Valibot
• querySelector отличается от getElementById тем, что не признаёт id начинающиеся с цифры

CSS

• набор молодого интернационалиста: margin-inline, dir, :lang() и writing-mode
• на что способно свойство border-image: полупрозрачный фейд, скошенный фон на весь экран, градиентные бордеры
• ещё один способ центровки контента без обёртки — max-width: max-content; margin-inline: auto
• юзкейсы скролл-анимации с помощью animation-timeline (пока только в Chrome)
• способы описания кастомных easing-функций в JS для Web Animations API: предвычисление массива keyframes, новая функция linear(), а также предложение добавить встроенную функцию document.registerTimingFunction

HTML

• чтобы убрать элемент от показа в описании сайта в гугл-поиске нужно добавить тегу атрибут data-nosnippet

Платформа

• прошедший год у npm:
  • 184 миллиарда скачиваний пакетов в месяц
  • март самый активный месяц по публикации версий пакетов
  • топ зависимостей — TS, react, eslint, @types/node, react-dom, jest, prettier
  • самое длинное возможное название пакета из 214 символов
• как выводить в консоль браузера анимированные 3D-SVG картинки и стилизованный текст, а также бонусом либа для определения открытости консоли и факт, что console.table(['foo']) растягивается на всю ширину консоли