🖇️ Полностью в вебе
Новости
🔡 вышел Chrome 133:
🔵 поддержали обновление функции
attr(), которая раньше работала только внутри свойства content, а теперь сможет работать с любым свойством🔵 добавили псевдокласс
:open для открытых <dialog>, <details>, <select> и <input>🔵 поддержали семейство «подрезающих» свойств
text-box, text-box-trim, text-box-edge🔵 у нод появился метод
Node.prototype.moveBefore, позволяющий перемещать DOM-ноду в другое место без потери состояния (<iframe> не перезагружается, активный элемент остаётся в фокусе, анимации/транзишны продолжают проигрываться) (в React тоже собираются оперативно поддержать)🔵 добавлена возможность включать несколько import maps в один документ, браузер смерджит их сам
🔡 вышли результаты опроса State of React:
🔵 многим доставляет боль использование
forwardRef (видимо потому что в основном используют 18 версию React для SPA), указание зависимостей в useEffect, а также сложность Next.js и Server Components🔵 самые популярные либы: Zustand, семейство TanStack, Astro, shadcn/ui, Radix, React Aria, Jotai; самые непопулярные: CRA, Redux, Gatsby, Reaact Bootstrap; для анимаций пользуются Motion, React-Spring, GSAP; для работы с формами React Hook Form, Formik; для тестов Jest и Testing Library; для валидации Zod, Yup; для аутентификации Auth0, Auth.js, Passport
Проекты
🔡 smartbundle — тула для сборки приложений без дополнительных конфигов: команда
smartbundle сгенерит CJS- и ESM-сборки, автоматически трансформирует JSX, не забудет о сорсмапах🔡 get-value — аналог lodash-евского
_.get, чтобы достать значение объекта по строке a.b.c.d🔡 sorted-colors — проект для тех, кто испытывает необъяснимую симпатию к именованным цветам в CSS, позволяет увидеть их все по оттенку
Статьи и демки
JS
🔡 про разбиение лонг-тасков в JS уже писал ранее, но тут автор собрал в одной статье почти все рецепты:
setTimeout, async/await + Promise, scheduler.postTask(), scheduler.yield(), requestAnimationFrame() и даже экзотический MessageChannel() — если послать туда сообщение, то оно сразу же выполнится (разве что не упомянуто о queueMicrotask и requestIdleCallback)🔡 сравнительная таблица текстовых редакторов, если вам нужно сделать этот выбор в 2025: фреймворкоориентированность, многопользовательский режим + комментарии (сразу предостережение — ProseMirror с React не дружит)
🔡 и в догонку сравнительная таблица web-to-desktop-фреймворков (Electron, Tauri…): язык, движок, зависимости, фичи, интеграция во фреймворки, поддержка ОС, размер приложений, расход памяти, время билда и старта
🔡 если вам приходится сознательно заглушать ошибки в TS, то лучше использовать
@ts-expect-error, чем @ts-ignore, так вы явно заметите заглушенное место, когда ошибка перестанет происходить и сможете убрать заглушку🔡 никогда не поздно вдруг понять, что
npm ci это «clean install», а не «continuous integration»🔡 оператор
satisfies в TS может быть полезен для:🔵 уточнения, что объект с неполным набором полей — это ок
satisfies Partial<Record<key, val>>🔵 типизации при преобразовании в JSON-строку
JSON.stringify({ /*···*/ } satisfies SomeType)🔵 типизации default-экспорта
export default ((str) => str.toUpperCase()) satisfies StringCallback;CSS
🔡 доехавший везде
@property даёт возможность создать эффект «динамического фокуса» (всё в блюре, круглая область в «фокусе») с помощью mask-image: radial-gradient(... var(--focal-size) ...), к кастомному свойству внутри функции применяется транзишн🔡
:focus-visible стилизует только фокусировку с клавиатуры, но есть ещё и дополнительная опция у метода .focus({focusVisible: false}) (Safari TP и FF)🔡 ещё один юзкейс для селектора
:has: показывать/скрывать дополнительный блок, когда выбран/не выбран чекбокс в списке: :has(:checked) {}, :not(:has(:checked)) {}, :not(:has(:focus-visible)) {}Платформа
🔡 если вы хотите неиронично использовать GIF-ку в 2025, то лучше заместо использовать видео-формат AV1 (поддерживается во всех браузерах, кроме Safari, там нужен фолбек в mp4)
@web_platform | Поддержать канал 🌟