🖇️ Полностью в вебе
Новости
🔡 Vercel поглощает компанию Tremor (опенсорсная UI-либа на React, TW, Radix), чтобы использовать дашборды/чарты у себя в админке и в генераторе интерфейсов v0
🔡 вышел Astro 5.2:
🔵поддержан TW 4 через плагин
@tailwindcss/vite🔵добавлен редирект с trailing-slash урлов:
/about/, /about или даже /about///🔵а также редиректы на
http или https, прописываемые сразу в конфиге🔡 вышел набор полифиллов ES Module Shims 2.0: помимо поддержки
import maps в старых браузерах эти полифиллы открывают возможность запускать type-erasable-код на TS прямиком в браузере, без компиляции🔡 обновился Turborepo 2.4:
🔵появились эксперименты: команда
boundaries (проверяет реп на следование бестпрактисам для лучшего кеширования сборки) и кеширование в watch-режиме🔵тула теперь даёт рекомендации по найденным кольцевым зависимостям в проекте
🔵 поддерживает новый тип конфига ESLint
🔡 выпущен Firefox 135.0:
🔵прекратилась поддержка нестандартного -moz-user-input
🔵появилась поддержка JSON.rawJSON() и JSON.isRawJSON()
🔵выкатили за флагом поддержку Temporal API (продвинутая работа с датами) и Prioritized Task Scheduling API (
scheduler.yield() для «создания пауз» в работе эвент-лупа)Проекты
🔡 bunchee — безконфиговый бандлер для JS/TS-пакетов (все нужные данные для конфига берутся из
package.json)🔡 jscanify — либа для сканирования бумажных документов из картинки или из потока камеры
🔡 shapecatcher — если нужно найти unicode-символ (в том числе эмодзи), то можно его коряво нарисовать руками и поиск выдаст похожие
🔡 node-modules-inspector — интерактивный интерфейс для изучения
node_modules в проектеСтатьи и демки
JS
🔡 простейший подход к сервингу, который возможно вскоре будет работать и в Node (но уже сейчас поддерживается в Deno):
// server
const myApp = async (req: Request) => {
return new Response("Hello world!");
};
const response = await myApp(new Request("http://localhost/"));
const text = await response.text();
🔡 Cookie Store API — асинхронное API на смену
document.cookie (только Хромиум, но есть в «ночных» версия Safari и FF):
await cookieStore.set()/get()/getAll()/delete()
// а также эвент на изменение
cookieStore.addEventListener("change")
🔡 хук
useOptimistic из React 19 подходит для обработки кейсов «промежуточных» состояний интерфейса при асинхронном выполнением действий: ушёл запрос, ждём ответ, пока что оптимистично показали результат🔡 принцип Open-Closed (sOlid) на примере React-компонентов и хуков: добавляем новую модификацию компонента/функции, не трогаем базовый, а дополняем в новом компоненте/функции
CSS
🔡
@starting-style можно применять в том числе для анимации показа/сокрытия <dialog> и подложки ::backdrop: чтобы они плавно показывались и скрывались без дополнительных телодвижений в коде (типа сменить туда-сюда opacity)🔡 при выполнении View Transition-ов страница перестаёт быть интерактивной — это из-за псевдоэлемента
::view-transition, который показывается оверлеем над всем вьюпортом; поправить это можно, выключив pointer-events для него:
::view-transition {
pointer-events: none;
}
🔡 для кейса, когда происходит нежелательный перенос текста (например, в кнопке), уместнее использовать
min-width: fit-content, который подтянет ширину под контент и справится с задачей переноса более аккуратно, чем text-wrap: nowrap🔡 для послогового переноса слов используется
hyphens: auto, но в дополнение есть ещё свойство hyphenate-limit-chars, ограничивающее количество символов, которые будут перенесены (только Хромиум)🔡 стилизация HTML-элемента
<meter> под «звёздный» рейтинг: ставим на фон SVG с прозрачной «маской», заполняем цветом🔡 с
clip-path: polygon() и transition можно сделать «скошенный» слайдер🔡 если вы собираете стили с помощью Vite или обходитесь вообще без билд-тулы, то дополнительно можно использовать LightningCSS в качестве минификатора + «пост»-процессора стилей (новенькие CSS-фичи в коде будут фолбечиться до стабильных)
@web_platform | Поддержать канал ✨