🖇️ Полностью в вебе
Новости
🔡 вышел Firefox 136, поддержали: Intl.DurationFormat, псевдокласс :open, CookieStore API, а также значение
plaintext-only для атрибута contenteditable🔡 в новый формат конфига ESLint добавили функцию
defineConfig и вернули extends, это и правда удобно, чтобы замиксовать несколько предсобранных конфигов для проекта🔡 компилятор TS будет портирован на Go к 7 версии (к ноябрю 2025 ожидается бета-версия) и ускорен в 10 раз: компилятор именно портируется, а не переписывается с нуля (Go хорошо подходит под формат уже имеющегося кода)
🔡 вышла последняя глава Web Almanac про JS:
🔵 в среднем вес JS на сайтах дорос до 500-600kb (часть кода не используется), >20 запросов за JS на странице
🔵 из бандлеров чаще всего используется webpack, с заметным отставанием Parcel
🔵 в найденных сорсмапах: TS используется в 6% сайтов, Babel — в 12% из топа 10к мобильных сайтов
🔵 jQuery используется в 74% сайтов, Swiper — в 15%, React — в 10%, веб-компоненты в 7.8%
🔵 67% сайтов включает бесполезно транспилированный JS-код
🔡 в редакторе Zed появилась поддержка GUI для работы с git (в общем, у Zed и компании есть ещё примерно полгода-год, пока TS в VSCode станет работать супербыстро, и все перестанут с него убегать)
Проекты
🔡 endoflife.date — тут можно посмотреть даты поддержки многих версий либ, программ и фреймворков
🔡 node-modules.dev —
npx node-modules-inspector в вашем проекте покажет диаграмму зависимостей node_modules, их размер и связи🔡 same.dev — AI-тула, которая походит по сайту и сгенерит аналог (работает только на простеньких лендосах, но делает их сложно 😕)
Статьи и демки
JS
🔡 если заходит речь про выбор фронтового фреймворка, лучше выбирать что-то поскучнее и стабильнее, правда стабильных и скучных фреймворков маловато (Next.js вендорлочит, Astro про контент, React Router всё ещё в пучине перерождений)
🔡 паттерн возвращения
return await func() хорош тем, что дождётся выполнения кода, и если нужно поймать ошибку, то выбросит её, пока не произошёл выход из функции:
const helloWorld = async () => {
try {
return await asyncHello("World");
} catch (e) {
return "Whops";
}
};
🔡 а что если «билдить» архив с вашими md-файлами просто в HTML? Навигацию можно сделать на CSS-селекторах
:target, HTML-файл скачивается один раз (offline-first), не нужен JS🔡 URL — идеальное место, чтобы хранить сериализуемое состояние приложения, но есть ограничение: на 60-80к символов в URL браузер может загнуться
🔡 база про перфоманс в React: отделяйте изменяющийся стейт рядом с тяжёлыми компонентами в отдельные компоненты для избежания ререндера
🔡 явное лучше неявного на примере выделения данных или конфигов в коде в отдельные переменные
🔡 API стейт-менеджера Jotai вдохновлено
WeakMap + добавлена возможность подписки на мапуCSS
🔡 если в вашем приложении есть отстраивание побочных цветов от основных цветов приложения (обводки, тени, градиенты, разделители, состояния UI-элементов, оттенки), то в деле поможет relative color
🔡 в Chrome 135 нас ждёт появление двух CSS-функций sign и abs: для получения знака выражения (-1 или 1) и модуля числа
🔡 в канарейке Chrome доступны функции sibling-index() и sibling-count() для получения индекса элемента и числа всех элементов на одном уровне в DOM
🔡 полупрозрачное «визуально спокойное» подчёркивание ссылок
text-decoration-color: color-mix(in srgb, currentColor, transparent 75%)🔡 существует специальное свойство для анимации движения элемента по SVG-пути — это
offset🔡 с помощью
content-visibility и contain можно указать браузеру не стилизовать, не строить лейаут или не отрисовывать определённый кусок интерфейса для улучшения перфоманса (наколеночная виртуализация)HTML
🔡 интересная идея использовать для визуального «сравнивателя» картинок
<input type="range"> в качестве управляющего элемента для задания кастомного свойства с шириной картинкиПлатформа
🔡
git switch - или git checkout - (для староверов) переключает на прошлую ветку в гите@web_platform | Поддержать платформу ⭐️