некоторые новые API типа Anchor positioning и View transitions API только начинают расползаться по платформе и ещё не везде поддерживаются, соответственно проще их не использовать, чем поддерживать две версии
традиционная боль, которая мало утихает с годами, — стилизация и кастомизация элементов форм
в топе нехватающих элементов — data table, tabs, switch/toggle, skeleton-ui, context-menu, carousel, inifinite scroll — топ фич, для реализации в либах веб-компонентов
псевдоэлементы ::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-приложениях, подключается с помощью одного скрипта (наконец-то достаточно просто, чтобы (любопытство пересилило лень) попробовать на вашей приложухе) и показывает ререндеры: хороший способ отследить наличие ненужных рендеров, а также обнаружить зависимость между несвязанными друг с другом компонентов
jscodeshift — если вам нужно зараз изменить много JS/TS-файлов, то не обязательно это делать руками и писать велосипед: есть придуманный тулкит для запуска codemod-ов (программ, которые сделают нужные изменения в файлах) и получения отчёта о выполненной работе
Статьи и демки
JS
раньше уже писал про команду deno complile, а тут как раз вышел обзор с интересной мыслью: помимо очевидного юзкейса собрать в бинарник свою JS/TS-программу и запускать её на десктопе (как будто бы дело не первой необходимости), ещё можно собирать ваше приложение с вереницей npm-пакетов в зависимостях в один файл и уже его транспортировать на CI вместо того, чтобы на самом 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 бампнет версию с 24.0.0-alpha.0 до 24.0.0-alpha.1
мы используем те или иные инструменты, потому что они делают свою работу, и привыкаем терпеть их несовершенство, так как или им нет альтернатив, или альтернативы чересчур нишевые и маргинальные; но если посмотреть со стороны, то картина сразу становится очевидной — React и TS достаточно вербозны и не лишены недостатков
CSS
в пошаговой анимации steps(5) указывается количество шагов, на сколько разделить анимацию, но также есть дополнительная настройка, указывающая как именно выставляются эти шаги: 0%, 20%, 40%, 60% и 80%, или же 20%, 40%, 60%, 80% и 100%, или же 0%, 25%, 50%, 75% и 100%; настройка steps(3, jump-none) разделит шаги на равные интервалы, что более логичное, но не дефолтное значение
если есть задача выполнять повторяющуюся анимацию с задержкой до начала и после окончания, то можно обойтись без «фейковых пустот» в кейфреймах, а использовать функцию linear()для динамического расчёта задержки
