докрутили фетч данных: теперь при использовании useAsyncData или useFetch запросы будут шарить один и тот же реф на данные по одинаковому ключу между всеми компонентами
в нескольких компонентах, использующих одинаковый источник данных, рефетч будет происходить только один раз при изменении зависимостей
в качестве ключей в запросах теперь можно использовать реактивные примитивы (рефы, computed-ы или геттеры)
вышла бета Storybook 9: в инструмент вовсю интегрируют запуск всевозможных тестов (UI, интерактивность, доступность, скриншоты), сынтегрировались с Vitest, поддержали React Native
в Chrome передумали блокировать 3rd-party куки по умолчанию (не смогли со всеми договориться), всё останется как есть сейчас (можно вручную отказаться в настройках браузера), а также пообещали в Incognito-режиме добавить маскировку IP-адреса устройства
и ещё про Chrome: в грядущей принудительной продаже браузера покупателем может стать OpenAI (если так случится, то скорость изменения индустрии ещё больше ускорится)
вышел GSAP 3.13: на удивление, фаундеры и ментейнеры до их покупки Webflow, никуда не ушли, а продолжают пилить проект; с этим релизом в GSAP сделали все ранее платные плагины бесплатными, а заодно и дропнули премиальный клуб GSAP
со стороны Microsoft поступило предложение расширить console методом context(), чтобы иметь возможность группировать и стилизовать в консоли дев-тулзов портянку разносортных логов
для V8 (начиная с Chrome 136) внутри JS-файлов можно указывать спец-коммент для компилятора //# allFunctionsCalledOnLoad, чтобы явно указать движку, что этот скрипт нужно распарсить и скомпилировать сразу же при первой встрече, а не тогда, когда потребуется выполнение определённой функции из этого скрипта
Проекты
kermit-font — прикольный «детский» шрифт в духе Comic Sans (поддерживается кириллица, есть вариативность)
unbuilt.app — реверс-сервис, находящий по артефактам в коде сайтов, какие технологии использовались для их создания
srvx — универсальный сервер с единым синтаксисом для Deno, Bun, Node.js
component-template — если уж теперь LLM расширяют наши возможности, почему бы не попробовать начать писать веб-компоненты? Вот как раз и стартовый шаблон подходящий нашелся.
Статьи, мнения, туториалы
JS/TS
из всех способов вывести что-то как строку, менее подверженный ошибкам — {}.toString.call(v), но в большинстве случаев подойдёт String(v), но он, в свою очередь, не выведет содержимое объекта; для этого подходит JSON.stringify(), но тоже со своими ограничениями
возьмём дерево компонентов в React: обход и рендер происходит начиная с родителей «вглубь» детей, а применение эффектов (useEffect) — на «обратном» пути обхода, «вверх» от детей к родителям
если вам для управления зависимостями в package.json недостаточно dependencies и devDependencies и хочется добавить категории, можно использовать PNPM Catalogs для группировки: хоть фича изначально для монореп, но она помогает разделить пакеты и внутри одного репо по категориям (test, frontend, types, lint…)
рецепт, как просто на коленке, без сторонних зависимостей хранить дизайн-токены в JSON, а транслировать в CSS в виде переменных в :root {}
рубрика «что хотел сказать автор» от Дэна Абрамова про RSC продолжается: директива 'use client' делает компонент доступным серверу через <script>, чтобы он мог его предвыполнить, а 'use server' экспортирует серверные функции на клиент, чтобы их можно было вызвать асинхронно в RPC-стиле
все эти ваши сайты — это для людей, а для машин достаточно склеенной текстовой портянки (пример от Bun)
количество ретраев по умолчанию равно 3, что не всегда ок, например, если используется внутри тестов ошибок (увеличивается время выполнения тестов) → меняем число ретраев на 0
время инвалидации кеша по умолчанию небольшое, часто происходит бесполезные перезапросы, а если вы уверены, что ответ от внешнего сервиса точно не будет меняться, перезапросов можно избежать → staleTime: Number.POSITIVE_INFINITY
не забыть настроить transform-origin с той стороны, откуда анимация визуально начинается
подобрать более натуральный изинг: хотя бы ease-out, а лучше кастомную «пружинную» функцию
при реализации динамического выделения табов лучше применить clip-path, чем просто менять цвет текста и заливки
единица измерения lh хороший (и доступный с 2023 года везде) способ не мучиться с em для задания межстрочных отступов:
p {
margin-block: 1lh;
}
скруглённые углы в CSS есть уже давно, но их по-прежнему может не хватать для непрямоугольных форм, тогда в дело вступает давно забытое искусство подставления скруглённых уголочков на фон блока (только вместо png-картинок выступают радиальные градиенты)
HTML
для реализации кликабельной картинки-карты с интерактивными областями может подойти древняя пара тегов <map> и <area>, но могут быть проблемы с респонсивом, поэтому то же можно реализовать в чистом SVG (ведь внутрь групп в качестве обёртки для форм в SVG можно включать ссылки <a>)
Платформа
ещё один тейк, на этот раз от Addy Osmani, про деградацию скиллов при неразумном использовании AI-тулов: самое плохое — отваливается критическое мышление, не менее неприятное — общения между разработчиками становится меньше
для гита можно настроить глобальный игнор-конфиг для всей системы, на маке/линуксе лежит в ~/.config/git/ignore
чтобы при табе появление фокуса происходило на инпутах не с левого верхнего угла экрана, а на определённом месте, нужно просто перед табом кликнуть где-то неподалёку
