Новости

• в React 19 появятся нативные custom elements (мама, неужели они решили задепрекейтить jsx?!)
• что в последнее время появилось нового в браузерах: <hr> в <select>, HTMLSelectElement.showPicker, стилизация скроллбаров, анимация font-palette, transfer() и transferToFixedLength() у ArrayBuffer
• анонсирован Typescript 5.4 beta: улучшение сужениях типов в замыканиях, новый утилитарный тип NoInfer для запрета вывода типов, Object.groupBy и Map.groupBy, улучшение quick-fix, а также анонс грядущих депрекетов в TypeScript 5.0
• минорно обновлены версии Node 18, 20, 21 для фиксов безопасности
• в V8 v9.1 выпущена поддержка import assertions (это такое import json from './foo.json' with { type: 'json' }, для того, чтобы не запустить зловредное ПО, маскирующееся под JSON)

Проекты

• expressive-code — решение для интеграции блоков кода в контенте сайта (для astro, next)
• unlazy — универсальная либа для ленивой загрузки картинок (с плейсхолдерами)
• веб-компонент авторастягивающейся textarea
• анимация прыгающего мяча кучей возможных способов (без JS, на чистом JS, с либами, на canvas, видео и гифка)
• type-coverage — мониторинг и зачистка (от any) типов в проекте

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

JS

• мнение, что вся React-движуха завела часть индустрии не туда, отзывается: неестественный для браузера DX, в который двигаются React, Next и иже с ними, оказывают медвежью услугу (и, конечно, зарабатывают на этом), и, в целом, во многих случаях не нужны, так как являются легаси из 2013, когда в браузерах не было шаблонных строк и BFCache
• ещё одно мнение, что система, которая вынуждает переписывать кодовую базу каждые 2-3 года — слабая, и напоминание о «правиле минимальной мощности», когда для решения задачи следует выбирать минимально необходимый по мощности язык/систему/технологию
• не поверите, ещё одно мнение о том, что стоит попробовать Qwik вместо React (по мне так шило на мыло, нужны другие ментальные модели для написания кода для платформы)
• сначала придумывается SSR, потом решается, как же быть, когда нужно узнать что-то из клиентского браузера, а потом придумываются костыли — надёжный план!
• попытки замерять Core Web Vitals не только на первой загрузке SPA, но и на последующей клиентской навигации — спец событие soft navigation для PerformanceObserver
• pnpm поддерживает страницу с бенчмарками npm, pnpm, yarn (они поддерживают страницу, потому что pnpm быстрый или следят за быстротой pnpm из-за поддержки страницы 🤔)
• современный стартер для либы: TS, тесты нативные node:test, билд npm-скриптами, конфиг для CI на GitHub Actions в yml, автодеплой в npm, provenance и секреты
• event loop – мифы и реальность: браузерные и небраузерные среды исполнения, почему понятия нет в спеке ECMA-262, макротасков не бывает, а task queue это не очередь, а set
• улучшаем качество кода React-приложения с помощью Compound Components

CSS

• блюрная backdrop-тень с помощью mask, backdrop-filter и box-shadow
• если вы всё ещё убираете обводку (outline: 0), то это можно уже не делать, так как есть :focus-visible
• попытка объять необъятное шрифтовые единицы измерения длины: cap, ch, em, ex, ic, lh, а также из «рутовые» аналоги rem, rlh, rex, rch, ric и другая магия
• выделение текста с помощью скролл-анимации: animation-timeline и background-size
• строим тоггл: с :has(), адаптивно, доступно, с «ручками» для кастомизации стилей
• анимация цветовых шрифтов font-palette (жаль, что самих шрифтов мало)
• анимация движения по линии в SVG с offset-path и offset-distance
• свежий взгляд на старую как мир стилизацию <table>

HTML, SVG

• про тег <abbr> и атрибут title: лучше не использовать и с title, и без него
• плохие стороны HTML: лучше НЕ использовать <select multiple>, атрибут title, <datalist>, <input type=number>, <input type=date>, <menu> во избежание проблем

Платформа

• базовые различия jwt и session-вариантов аутентификации: jwt более модное, но сложнее в реализации, сессия попроще и понадёжнее
• что намечается в рамках Interop 2024: хотеть custom properties, declarative shadow DOM, relative color syntax, @starting-style