Новости
- вышли результаты опроса State of HTML: новые API типа Popover и
<dialog> появляются (это хорошо), но есть баги, например, на iOS не работает сокрытие при клике на backdrop (это плохо); некоторые новые API типа Anchor positioning и View transitions API ещё не везде поддерживаются; традиционная боль, которая мало утихает с годами, — стилизация и кастомизация элементов форм; в топе нехватающих элементов data table, tabs, switch/toggle, skeleton-ui, context-menu, carousel, inifinite scroll- вышел Chrome 131: псевдоэлементы
::selection и ::highlight теперь более логично наследуют значения CSS-свойств; к <details> и <summary> теперь можно применять display: flex и grid; в @property теперь поддерживается тип <string>; в элемент <select> теперь валидно включать другие теги помимо <option>, <optgroup> и <hr>; currentcolor поддержан для relative color syntax; Summarization и Translator API для суммаризации и перевода с помощью AI, встроенного в браузер; в дев-тулзы также завезли AI, теперь и браузер будет советовать, как писать код лучше- департамент юстиции США может заставить Google продать Chrome предположительно родительской компании Alphabet, чтобы более явно отслеживать, как через Chrome Google манипулирует рекламным рынком, и уменьшить возможности собора данных для AI через Chrome
- есть в языке и стандартной платформе такие узкоспециализированные фичи, которые нужны достаточно редко, поэтому забываются и вовремя не вспоминаются; например, Symbol может пригодиться, чтобы спрятать поле или метку в объекте без боязни, что оно где-то вылезет, так символьные поля объекта недоступны в
Object.keys() и JSON.stringify()Проекты
- react-scan — либа для проверки перфоманса в React-приложениях: хороший способ отследить наличие ненужных рендеров, а также обнаружить зависимость между несвязанными друг с другом компонентов
Статьи и демки
JS
- раньше уже писал про команду
deno compile, а тут как раз вышел обзор с интересной мыслью: можно собирать ваше приложение с вереницей npm-пакетов в зависимостях в один файл и уже его транспортировать на CI вместо того, чтобы на самом CI скачивать и устанавливать все зависимости приложения — это сэкономит время и мощности CI- в догонку к прошлому пункту: в вашем
package.json файле devDependencies отличаются от dependencies тем, что не будут установлены на CI, ведь они нужны только локально при разработке; запускать production-вариант сборки можно ключом npm install --production, переменной NODE_ENV=production, а также ключом --omit=dev- самое верное средство, чтобы завести проект нескольколетней давности, попереключать версии node и python и найти заветную рабочую комбинацию!
- как вариант не использовать билд-систему совсем: можно установить либу из npm во временную папку, оттуда скопировать сбилженные JS-файлы и подключить их руками на сайте: с обычным js-файлом проблем нет совсем, с ESM-файлом нужно озаботиться import map-ами, если внутри модуль включает зависимости, а вот с CJS-файлами придётся использовать esm.sh для преобразования их в в ESM
- если вы паблишили npm-пакеты, то наверняка знаете про команды
npm version major/minor/patch, и для пререлизов (альфа/бета) тоже есть подобные команды: npm version premajor --preid=alpha сменит 23.1.6 на 24.0.0-alpha.0, а npm version prerelease бампнет альфа-версию- мы используем инструменты, потому что они делают свою работу, и привыкаем терпеть их несовершенство, так как или им нет альтернатив, или альтернативы чересчур нишевые и экзотические; но если посмотреть со стороны, то картина сразу становится очевидной — React и TS достаточно вербозны и не лишены недостатков
CSS
- в пошаговой анимации
steps(5) указывается количество шагов, на сколько разделить анимацию, но также есть дополнительная настройка, указывающая как именно выставляются эти шаги: 0%, 20%, 40%, 60% и 80%, или же 20%, 40%, 60%, 80% и 100%, или же 0%, 25%, 50%, 75% и 100%; настройка steps(3, jump-none) разделит шаги на равные интервалы, что более логичное, но не дефолтное значение@web_platform | Поддержать канал 🤝