Новости
- Vercel привлек 250 миллионов $ финансирования, а это значит, что ещё больше «нетехнических» клиентов будет в один клик пользоваться облаком, генерировать компоненты на v0.dev и также заливать их в облако, а потом платить деньги фиксикам, чтобы это всё работало
- (вдогонку к прошлой новости) появилась экспериментальная поддержка React Compiler в Next.js, что гладко укладывается в концепт «дев сложный, заплати и мы сделаем проще» (а кто сделал его сложным, КТО?!)
- в Chrome 126 собираются встроить мини-LLM, чтобы пользователь мог выполнять простые задачи на сайтах и в веб-приложениях с помощью ИИ напрямую из браузера (пахнет вендор-локом, но концепт прикольный, вангую ИИ-«помощники» появятся во всех браузерах, чтобы помогать пользоваться сайтами)
- а в 125 версию Chrome в девтулзы уже добавили ИИ-фичу в консоль (объяснение ошибки, чтоб в гуглол не ходить), также завезли отладку anchor positioning, улучшили информацию об ошибках в Sources, а в Network добавили инспект заголовков Early Hints headers, в Performance теперь показывается инфа по скорости CSS-селекторов и ещё обновился Lighthouse
- Bug 33654, Opened 25 years ago, Closed 2 days ago: то чувство, когда сын закрыл баг отца
Проекты
- littlezipper — создание zip файлов в браузере и в node/deno c CompressionStream API (доступно во всех средах)
- xlsxtable — создание .xlsx файлов на клиенте и сервере
- svgviewer — поисковик и просмотрщик SVG-изображений с возможностью экспорта в виде растровой картинки, data URI или react-компонента
Статьи и демки
JS
- новый статический метод
const { promise, resolve, reject } = Promise.withResolvers() позволяет управлять промисами извне конструкции new Promise((res, rej) => {})- про предикаты типов (`function isType(arg: any): arg is Type`): в целом полезны, из минусов добавляют нагрузку в рантайм и дублируют логику самих типов
- как создать свой минималистичный стор-менеджер в React без использования контекста, а с useSyncExternalStore, который к тому же из коробки подцепит типы
- и если вы всё таки предпочтёте пользоваться контекстом, как избежать множественных вложенных друг в друга контекстов через
<Providers providers={[providersList]}>- официально представлена альфа-версия Pigment CSS — новая CSS-in-JS-либа от MUI, которая мимикрирует по синтаксис Styled Components, но при этом работает в билд-тайме (и поэтому не использует контекст, что важно для серверных компонентов)
- даже если вы используете React, то всё равно вы пишете JS, то есть сталкиваетесь с контекстом выполнения и замыканиями, и как следствие можете в замыкание мемоизированной функции затянуть какой-нибудь большой объект, который не будет подчищаться garbage collector-ом
- реализация идеального Deep Equal сравнения объектов в JS, а также вариант Shallow Equal, который используется в React
CSS
- медиа-выражения для определения размеров вьюпорта больше не нужны? Флексбокс, грид, контейнер-выражения (а также `:has()`) решают задачи лучше медиа-выражений, так как специально для этого предназначены и могут стилизовать респонсив-компоненты независимо от вьюпорта, но зато учитывая окружающий контекст. А медиа-выражения теперь для определение фич и настроек девайса (тема, контраст, анимации)
- пока функция color-contrast() не доехала до браузеров, задачу подбора контрастного цвета можно решить с помощью relative color syntax
- CSS-фич стало настолько много, что пора расчехлять старый-добрый w3c-маркетинг и сделать отсечки CSS4, CSS5 и CSS6 (а что, в ECMA-движухе же получилось)
HTML
- в результатах опроса State of HTML 2023 каждый найдёт новенькое для себя: у нескольких
<details> с одинаковыми name открыт может быть только один (аккордеон), <script async blocking="render"> блокирует рендер, <input type="file" accept="video/*" capture> сделает запись с пользовательской камеры@web_platform | Поддержать канал 🤝