Пульс веб-платформы 18.10.2024

Новости

  • вышел 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, и, да, сейчас предлагается по сути та же схема, то есть распространить стандартизацию на вот эту самую «мутант»-версию языка, из которой особо удачные и обкатанные фичи смогут переводиться в «стабильную» версию: а там, вангую, мы получим и «ванильную» типизацию, и всё остальное, что сейчас добавляется надстройками
  • Zustand обновился до v5: новых фич нет, дропнута поддержка ES5, React <18, TS <4.5, небольшие поведенческие breaking-изменения
  • вышла Node 23.0.0: по умолчанию теперь работает require() ES-модулей, дропнута поддержка 32-bit Windows,
  • Webflow купили GSAP: ждём выхода фаундеров через полгода 🙂

Проекты

  • brisa — появилась попытка поженить веб-компоненты и JSX, а также серверный рендеринг и actions, и украшено это всё реактивными сигналами; что сказать, это больше всё похоже на шутку юмора, чем на что-то жизнеспособное, плюс ещё JSX совсем плохо сочетается с кастомными элементами, получается нечитаемая костыльная каша; сравните, например, с symbiote, насколько легковесно и свежо смотрится (уже ранее рассказывал про этот проект, он жив-здоров и развивается)
  • jeasx — а вот ещё один заход в JSX + серверный рендеринг (под капотом fastify и esbuild), который уже похож на React здорового человека: можно использовать await просто так, class вместо className, «контекст» лежит в this
  • hello-pangea/dnd — ещё одна попытка в dnd-сортировки для React (дед-mode-on: зачем в зависимостях redux?!)
  • secretlint — линтер возможной секретов (вешается на прекоммит или запускается в Docker)

Статьи и демки

JS

  • обратная сторона удобства экосистемы npm — из неё так удобно и быстро можно поставить в проект зловредное ПО: иногда злоумышленники для своих пакетов «захватывают» имена, похожие на общеизвестные названия, либо могут замаскировать пакет под «легальный», но внутри будет rm -rf ~/*, который запустится по таймеру через час после установки
  • эволюция структурирования кода в React-проекте от папки components к лайтовому варианту FSD (но не раскрыта тема, где лежат сторы — их желательно держать в фичах или же выносить в entities, чтобы мочь импортировать в несколько фич сразу)
  • реализация 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%)

Платформа