на волне новостей о React Compiler анонсирован выпуск Million Lint 1.0-rc: в отличие от компайлера, который пребилдит реакт-код, Million Lint втыкает в код точечно замеры производительности и уже на их основе выдаёт рекомендации в редакторе кода и подсвечивает проблемы с производительностью
на той же волне анонсирован Next.js 15 RC: поддерживает React 19 RC, React Compiler, произошёл отказ от кеширования по умолчанию в fetch, GET Route Handlers и роутере, постепенно выкатывается реактовская система частичного пререндера Partial Prerendering (PPR) и after() API для отложенного запуска второстепенных тасков после выполнения основного запроса
и снова на той же самой волне вышел SolidStart v1.0.0, метафреймворк на основе Solid, встроенного роутера, а также Vite, Nitro и другого опенсорса; конечно, не перестаю удивляться современной индустрии, которую люди из опенсорса натурально тащат вперёд на энтузиазме и за счёт синергии составляют конкуренцию корпорациям
Проекты
Responsive Viewer — если много верстаете или тестируете на разных разрешениях, это плагин для браузера, чтобы одновременно на одном экране открыть несколько «девайсов» с синхронизацией скролла и кликов
matcha.css — CSS-либа для стилизации чистой семантической разметки + небольшой набор классов хелперов для стилизации лейаута, цветов и подсветки синтаксиса (внутри нет !important-ов, то есть всё переопределяется пользовательскими стилями)
open-props — коробка с CSS-переменными на все случаи жизни (цвета, размеры, шрифты, тени, скругления)
react-google-maps — реакт-компоненты и хуки для Google Maps JavaScript API
tsx — запускальщик ts-файлов в Node (одной строкой и без конфигов, бонусом есть вотчер)
clack — либа для создания красивых и удобных cli-промптов
Solid мимикрирует под реактовский JSX, но под капотом компонент в React — это функция, которая вызывается каждый раз при рендере, а в Solid — один раз и возвращает DOM-элемент; вместо useState используется createSignal, который тоже похож внешне и возвращает массив с функцией доступа к состоянию и сеттер, но на деле не вызовет ререндера компонента, а только изменит контент в DOM-ноде; также в Solid есть createEffect (похож на useEffect), в который в простейшем случае не нужно передавать зависимости, что может привести к неочевидным багам
ещё одно напоминание, что каскадные слои можно использовать для организации типов стилей, например, отдельно объявлять @layer reset, theme, layout, причём подключаться они будут в таком порядке независимо от порядка подключения в коде; также описан концепт, как через «ручки» (кастомные свойства) управлять параметрами лейаута страницы
рецепт popover + @starting-style, на самом деле сгодится для любых «модалок» и появляшек: @starting-style привносит в этот паттерн недостающую декларативность, чтобы не приходилось вручную манипулировать классами/эвент-хэндлерами
да и вообще, почему бы просто не добавить @starting-style ко всему* { transition: opacity .5s ease-in; @starting-style { opacity: 0 } }?
HTML
статья по мотивам недавнего опроса State of HTML 2023: людям нравится datalist (вывод: время адопта среднего HTML-элемента — 5 лет), не нравятся формы (стилизация, инпуты, валидация, кроссбраузерность), люди помнят о существовании веб-компонентов (и немного используют), людям не хватает нативных элементов datatable, tabs, switch/toggle
в 2023 людям не хватало switch, а в 2024 он уже появился (пока правда только в Safari 17.4, но тем не менее), <input type="checkbox" switch /> можно стилизовать через ::thumb, ::track, но при этом он в отличие от чекбокса не может быть в indeterminate-состоянии и может быть required (в общем, ждём 5 лет и можно использовать)
