🖇️ Полностью в вебе
Новости
🔡 на ближайшем заседании Ecma TC39 будет обсуждаться в том числе пропоузал ECMAScript enums (stage 1): кажется это хитрый план, как сделать enum-ы легальными в JS, и тогда не придётся их болезненно выпиливать из TS при будущем «встраивании» TS в браузеры
🔡 парни из e18e продолжают участвовать в улучшении фронтенд-экосистемы и напоминают о полезных проектах для авторов пакетов:
🔵 arethetypeswrong — анализирует пакет на предмет наличия проблем с конфигурацией TS-типов
🔵 publint — линтер
package.json в пакете🔵 node-modules.dev — анализ зависимостей
node_modules🔵 eslint-plugin-depend — плагин для eslint, находящий раздутые зависимости и ненужные полифиллы
Проекты
🔡 git-mcp — меняем урл github-репозитория (github.com/username/repo → gitmcp.io/username/repo) и получаем удалённый MCP-сервер, подключенный к этому репо «на лету»
🔡 Lighthouse Scoring Calculator — наглядный калькулятор того, как отдельные метрики влияют на очки в Lighthouse (самое большое влияние у CLS, TBT, LCP)
Статьи и демки
JS
🔡 напоминание, что помимо Clipboard API существует ещё Web Share API (которое пока недоступно в FF), но в режиме прогрессивного улучшение вполне сгодится
🔡 и ещё одно напоминание о полезных API, о которых постоянно забываешь:
🔵 в
"".replace() и "".replaceAll() можно передавать колбек и модифицировать заматченный текст🔵 Promise.withResolvers() позволяет «вытаскивать» наружу
resolve и reject при создании промиса🔵
[10,20,30].at(-1) вернёт последний элемент массива🔡 а также, как вы догадываетесь, ещё одно напоминание:
🔵 Object.groupBy() и Map.groupBy() сгруппируют элементы по переданному ключу
🔵 FinalizationRegistry стриггерит событие в момент, когда объект будет подчищен garbage collector-ом из памяти
🔡 что можно сделать, чтобы уменьшить размер основного React-бандла:
🔵 прочекать файлы на сайд-эффекты (`window.someBadSideEffect = 'hello'`)
🔵 не импортировать объект/класс из внешних пакетов целиком, лучше отдельными функциями
🔵 в React использовать React.lazy для ленивой подгрузки компонентов
🔵 импортировать не нужные сразу либы динамически:
const Fuse = import("fuse.js").then((module) => module.default);
CSS
🔡
currentColor или даже cUrrENtCoLOr хорошо подходит для проброса цвета внутрь инлайн-SVG (хотя то же можно сделать и кастомным свойством)
nav {
color: salmon;
svg.icon {
fill: currentColor;
filter: drop-shadow(0 1px 0 oklch(from currentcolor calc(l - 0.25) c h));
}
}
🔡 свежеиспеченная функция
clip-path: shape() (поддерживается в Chrome и Safari) позволяет более декларативно и человекочитаемо описывать формы по сравнению с clip-path: path()🔡 трюк, как сделать фоновые изображения полупрозрачными: если фон под изображением одноцветный и равномерный, то можно слить картинку через режимы наложения:
background-image: url(image-one.jpg);
background-color: rgba(255, 255, 255, 0.6);
background-blend-mode: lighten;
🔡 не забываем, что если завернуть любой селектор в
:where(), то у него будет нулевая специфичность (годится для всяких ресетов) + годное свойство text-decoration-skip-ink для тюна подчёркивания ссылок:
:where(a:not([class])) {
text-decoration-skip-ink: auto;
color: currentColor;
}
HTML
🔡 так как md поддерживает HTML внутри, то в него можно вставить тег
<picture> c разными вариантами картинки для тёмной/светлой темы:
<picture>
<source media="(prefers-color-scheme: dark)" srcset="dark-image.png" />
<source media="(prefers-color-scheme: light)" srcset="light-image.png" />
<img src="default-image.png" />
</picture>
Платформа
🔡 незаслуженно забытый паттер проектирования Use-case, код читается как «история», вызов отдельных функций складывается в повествование:
const validatedorder = validateAndCoerceOrder (orderRequest);
const orderWithPricing = calculate0rderPricing(validated0rder);
...
@web_platform | Поддержать платформу 👁️