#Пульс_веб_платформы 12.01.2024

Новости
- вышел Vue 3.4: переписан парсер шаблонов на htmlparser2 (стало 2x быстрее), улучшена система реактивности и добавлен шортхэнд для дублирующих значений атрибутов (<img :id="id" :src="src" :alt="alt"> 👉 <img :id :src :alt>)
- круг замкнулся: в Remix появится классический SPA-режим работы, с возможностью опционально включить SSR (сейчас в Remix приложениях вся загрузка данных происходит на сервере)
- в Chrome начали выпиливать сторонние (3-party) куки (у 1% пользователей)
- в React появятся API для прелоадинга ресурсов: preload, preconnect и другие

Проекты
- PWA-приложение, показывающее все возможности PWA-приложений
- zed — быстрый мультиплеерный редактор кода (почему, зачем, за что?)
- fontsource — опенсорсные шрифты в npm-пакете (для установки шрифтов как контроллируемых зависимостей вместо гугл-фонтс)
- fsx — либа для работы с файловой системой в ноде, дено и памяти (в том числе браузерах) от создателя eslint

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

JS
- напоминание, что во всех браузерах доступны немутирующие аналоги reverse(), splice(), sort() – toReversed(), toSplice(), toSorted() и with()
- в JS-движке JavaScriptCore (в Safari), в отличие от V8 (в Chrome) реализован механизм оптимизации хвостовой рекурсии (Tail Call Optimization), позволяющий вызывать рекурсивно функцию сколько угодно раз без переполнения стека и код можно сделать таким же быстрым, как и в цикле for
- разбор классических «странностей JS»: 0.2 + 0.1 = 0.300000001., преобразование типов, автодобавление ;
- история, как создали npm-пакет everything, который включает ВСЕ пакеты npm, включая себя; из-за политики, что нельзя снять с публикации пакет, от которого зависит любой другой пакет, стало невозможно убрать из npm ВСЕ пакеты
- туториал по стейт-менеджеру Jotai, состоящему из атомов
- в Next.js теперь можно будет запускать проект на https локально с помощью next dev --experimental-https
- здравый смысл восторжествовал и в Next.js не будут больше патчить fetch
- document.getAnimations() возвращает в виде промисов все текущие CSS-анимации
- анатомия shadcn/ui: безголовые компоненты с отдельным слоем стилей, для установки разных состояний используется cva
- гайд по микрофронтендам на single-spa: такие штуки кажутся с первого взгляда сложными, но стоит попасть в ситуацию больших проектов, когда нужно шарить данные между разными приложениями, и уже становится понятно, зачем вся эта сложность
- чтоб не заморачиваться с выводом типа события TS в React, можно воспользоваться общим «доставатором» типа React.ComponentProps<"input">["onChange"]
- особенности использования enum в TS: например, const enum Name {} полностью удалит этот фрагмент из скомпилированного кода, но есть нюансы

CSS
- гайд по container queries (с живыми примерами)
- как написать круглый индикатор прогресса со скролл-анимацией
- в Chome 120 появилось @media (scripting: none) для определения выключенных скриптов
- директива @property: создание, дебаг, юзкейсы
- кликабельную область вокруг интерактивных элементов лучше увеличить (удобно для мобилок), как это лучше сделать
- трюки и находки при создании нового сайта vercel: SVG-лучи, пиксельные логотипы на гридах, CSS-счётчики, круговая анимация

HTML, SVG
- топ-10 ошибок в доступности на сайтах в 2023: пустые ссылки, некорректный tabindex, отсутствие alt и другое

Платформа
- победители в народном голосовании за фичи в Interop 2024: JPEG XL image format, View Transitions Level 1, Scroll-driven Animations