Новости
- свойства для «подрезки» текста от верхнего и нижнего отступа точно по высоте строки
text-box-trim и text-box-edge, доступные сейчас в бете Safari 18.2 вероятно скоро доедут и до Chrome- обновился черновик CSS Values and Units Module Level 5, внесли синтаксис
if(), чтобы можно было писать в CSS инлайновые условия в духе: display: if(style(--feature-flag: true): block; else: none)- вышел новый npm-совместимый менеджер пакетов от создателя npm и других достойных мужей — vlt, позволяющий, к примеру, отображать зависимости проекта в виде диаграммы или вообще в gui; также вниманию предлагается npm-совместимый реестр vsr, который можно самостоятельно развернуть у себя бесплатно
- либа Framer Motion стала независимой и переименована её автором Matt Perry в просто в Motion
- способы, как уменьшить количество зависимостей проекта, на примере Storybook 8.4: с помощью активистов проекта e18e удалось снизить размер проекта на 50+%, а размер лок-файла на 75+% (удалены
fs-extra, handlebars, file-system-cache; заменены lodash ⇒ es-toolkit, express ⇒ polka, chalk ⇒ picocolors, qs ⇒ picoquery; использован production-mode react)- у CSS появился «официальный» логотип, а заодно продумывают категоризацию на уровни CSS4 и CSS5
- в Node v18.20.5 LTS import attributes и JSON module помечены как stable и в догонку статья с объяснениями зачем эта фича нужна — чтобы гарантировать, что если в JSON файле придёт исполняемый JS-код, то он не будет выполнен
Проекты
- pinia-colada — data-fetching слой для совместной работы со стейт-менеджером Pinia (Vue.js), похоже на Tanstack query, но напрямую подключается к Pinia
- nano-staged — легковесная альтернатива lint-staged для запуска команд при добавлении в стейдж, коммите файлов в git
- lexical — оказывается у facebook есть свой опенсорсный фреймворк текcтовых редакторов
Статьи и демки
JS
- метод
dangerouslySetInnerHTML своим названием как бы напоминает, что если источник HTML вне контроля, то стоит обязательно предварительно санитайзить контент, ведь внутри может оказать вредоносный скрипт (и не только в теге <script>, но и просто в src или обработчике onclick, onerror…); помимо спецлиб для санитайзинга типа sanitize-html, можно воспользоваться браузерной технологией CSP, которая ограничивает возможность запуска инлайновых скриптов- рецепт для работы с формами в React: на
action (сервер) или submit (клиент) вешается колбек, возвращающий FormData, которая парсится zod или zod-form-data, и при успехе возвращаются деструктурированые значения- свойства
screenX и screenY при использовании внешних мониторов могут рассчитываться по-разному в разных браузерах, иногда принимая отрицательные значения- напоминание, когда выйдете на работу: проверить tsconfig.json в вашем проекте на наличие в них ключей
incremental и noErrorTruncationCSS
- среди новинок CSS много тех, которые пока что работают только в Chrome, но также много и кроссбраузерных фич, которые не на слуху, но их можно смело использовать:
inset и логические значения свойств block-size, inline-start, inset-block и другие, группирующие селекторы :is, :where, функции сравнения min, max, clamp, единица измерения динамической высоты вьюпорта dvh, media queries range syntax (width <= 1140px)- при работе с container queries для
container-type можно задать inline-size и size; значение inline-size указывает браузеру, что инлайновый размер (то есть ширина, width) контейнера больше не связан с его содержимым, то есть в директиве @container можно указывать min-width/max-width не боясь «зацикленности»; значение container-type: size наоборот разрывает связь высоты контейнера с его содержимым, то есть можно безопасно «квейрить» свойства «высоты» @container (min-height/max-height)-
overflow: clip отличается от overflow: hidden тем, что не создаёт скроллов и может обрезать только по одной стороне вместо сразу двух; кроме того, есть свойство overflow-clip-margin, которое может задать дополнительное пространство внутри обрезаемой области (жаль, что не поддерживается в Safari)@web_platform | Поддержать канал 🤝