Document picture-in-picture теперь общается с основным окном
на контейнеры со скроллом теперь можно сфокусироваться с клавиатуры
в React завозят server-only плюшки: отдельный пакет renderToMarkup предназначен для асинхронного рендера JSX в статику, которая не будет дальше никак обновляться (например, для генерации писем и другой статики); использование state, effect будет сыпать ошибки (впрочем, всё же сделали отдельный пакет для клиент-сайда, пометив сразу «для поддержки легаси-сред»)
веб всё ещё на коне, хотя зарплаты, как и почти везде (за исключением Erlang) уменьшились (при этом фронтендеры — почти самые низкооплачиваемые IT-специалисты)
в БД лидирует PostgreSQL
jQuery популярнее Next.js
Markdown File — третий по популярности инструмент для асинхронной коммуникации
swapy — создание в приложении виджетного лейаута с драг-н-свапом
designgui — расширение Chrome для просмотра и управления CSS-переменными с цветами темы (как минимум, чтобы поудобнее искать и копировать цвета)
svg.wtf — инструмент для изучения и экспериментирования с SVG
Статьи и демки
JS
Svelte дозрел до того возраста, когда уже поднакопилось достаточно массы, чтобы нужен был двусторонний interop между двумя мажорными версиями (читать как «достаточно наворотили»), в то же время изменения к лучшему в понятности API в новой версии налицо (читать как «исправляют навороченное, но надо поддерживать старый синтаксис»); в целом, впечатления о нём странные: что-то похожее на vue c mobx, при этом с костыльками для работы с TS, типа <script lang="ts" generics="T extends { name: string }">
когда читаешь про всякие WASM SQLite, Origin Private File System (OPFS) и их использование через SharedWorker и WebWorker, обычно это всё кажется какой-то далёкой от реальности фантастикой, только если ты не работаешь в Notion и тебе надо ускорить навигацию между страницами, сохраняя бд в файловой системе устройства и шаря её на все открытые табы
отличия «объектов» в TS: Object — это любые объекты типа string, boolean, number, bigint, symbol (у них есть свойства cunstructor, toString…), {} — это пустой объект без полей, а object — не непримитивные типы, то есть {}, [] и () => {} (object также имеет аналог Record<string, any>)
напоминание: DRY как самоцель может подтолкнуть к созданию ненужных абстракций, которые часто оказываются ещё и негибким, а гибкость — наверное одно из важных качеств абстракций
хук useId можно использовать для генерации id DOM-элементов в рантайме
CSS
в гайдах от Ahmad Shadeed обычно интересны практические юзкейсы использование фич; вот и в этом гайде по grid-area приводятся жизненные примеры использования: перестановка блоков местами в лейауте на разных разрешениях, «вылезающие» из прямоугольной сетки блоки, накладывающиеся области грида, has()-комбо .card:has(figcaption) { grid-template-areas: 'update layout'}
схема, которая с появлением scroll-based-анимаций, стала ещё актуальнее: кастомное свойство — стейт, анимация — способ изменения стейта, счётчик — способ отображения стейта
напоминание: контейнер с overflow: hidden всё равно можно проскроллить выделением текста или программно, а с overflow: clip возможность скролла будет гарантировано полностью выпилена
