Новости
- вышел Chrome 130: окончательно пофикшен CSS Nesting; в Picture-in-Picture добавлена настройка
preferInitialWindowPlacement для сброса предыдущей привязки pip-окна; поддержано свойство box-decoration-break: clone для создания красивых переносов текстовых блоков; плавный скролл scrollIntoView() с опцией behavior: "smooth" больше не отменяется в случае случайного «конкурентного» скролла; выкачен клавиатурный скролл по фокусу (например, на <textarea>); в девтулзах в инспекторе появилась пометка контейнеров со скроллом- в TC39 созревает новый план, как сделать JS более устойчивым для конечных пользователей и при этом более удобным для разработчиков: разделить JS на условный core JS0 (это то, что уже есть сейчас) + JSSugar (это надстройка, которая компилируется в JS0), и при этом обе части стандартизировать; да, это типа CoffeeScript, предлагается распространить стандартизацию на «мутант»-версию языка, из которой особо удачные фичи смогут перекочёвывать в «стабильную» версию: а там уже и «ванильная» типизация появится, и всё остальное, что сейчас добавляется надстройками
- вышла Node 23.0.0: по умолчанию теперь работает
require() ES-модулей, дропнута поддержка 32-bit Windows- Webflow купили GSAP: ждём выхода фаундеров через полгода 🙂
Проекты
- brisa — попытка поженить веб-компоненты, JSX, серверный рендеринг, actions и реактивные сигналы — получается нечитаемая костыльная каша; сравните, например, с symbiote, насколько легковесно и свежо смотрится (уже ранее рассказывал про этот проект, он жив-здоров и развивается)
- jeasx — а вот ещё один заход в JSX + серверный рендеринг (под капотом
fastify и esbuild), который уже похож на React здорового человека: можно использовать await просто так, class вместо className, «контекст» лежит в this - hello-pangea/dnd — ещё одна попытка в dnd-сортировки для React (дед-mode-on: зачем в зависимостях redux?!)
Статьи и демки
JS
- обратная сторона удобства экосистемы npm — из неё так удобно и быстро можно поставить в проект зловредное ПО: иногда злоумышленники для своих пакетов «захватывают» имена, похожие на общеизвестные названия, либо могут замаскировать пакет под «легальный», но внутри будет
rm -rf ~/*, который запустится по таймеру через час после установки- реализация drag-to-select, из которой я узнал о существовании метода
e.currentTarget.setPointerCapture(e.pointerId), который не полностью выключает pointer-events, а ловит только те события, которые исходят от текущего элемента- если нужен перфоманс, то проще делегировать его самому браузеру, чем опираться на JS-надстройки типа React, которые по умолчанию будут медленнее; к такому же выводу пришли разработчики Edge, которые до этого затащили в браузер React, а потом решили от него отказаться
- в объекте события paste есть поле
clipboardData, откуда можно вызвать метод getData('text/plain'), что получить скопированный текст или HTML, а также есть clipboardData.files, где лежат скопированные файлы- вряд ли вам это пригодится, но
setTimeout может выполняться максимально ~25 дней- в значениях по умолчанию у аргументов функции можно использовать соседние аргументы или операции с ними
function myFunc(arg1, arg2 = arg1)CSS
- скроллящаяся таблица со стики хедером и боковым столбцом делается с помощью
position: sticky, а чтобы ограничить область скролла контейнеру задаётся overflow-x: auto и высота вьюпорта; а заодно из решения почерпнул, что один элемент с position: sticky можно включить внутрь другого sticky-элемента- чтобы протестировать стили для печати не обязательно каждый раз запускать печать в браузере, в девтулзах есть эмуляция
print media type, которая также работает и в cypress- небольшой и симпатичный гайд про цветовой формат OKlch: считаю, что именно фронтам удобнее всего затаскивать эту тему в проекты (поддержка позволяет — с 2023 работает во всех браузерах)
- конический градиент можно использовать для создания не только круглых форм, но и прямоугольных, например,
repeating-conic-gradient(#000 0 25%, #fff 0 50%)@web_platform | Поддержать канал 🤝