Новости

• Figma провели конференцию Config 2024, показали:
  • обновлённый UI с поддержкой светлой темы и плавающих панелек
  • Figma Slides — режим для создания и показа презентаций (плавные переходы между слайдами, заметки докладчика, интерактивные элементы)
  • Code Connect — режим с генерацией компонентов (отношусь скептически)
  • более удобный dev-mode, чтоб просматривать сразу все готовые макеты
  • допиленные автолейауты и адаптивные прототипы (подстраиваются под размер экрана)
• в Astro 4.11 поддержаны прекрасные Shiki transformers для компонента отображения <Code>

Проекты

• ky — обёртка над браузерным fetch: есть алиасы для отправки всех видов запросов, retry логика, хуки (до запроса, до ошибки, до ретрая, после ответа), отправка данных формы, отменяется по controller.abort()
• pdfslick — либа для просмотра и взаимодействия с pdf (интересно, что под капотом используется Zustand)

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

JS

• у WeakMap есть такая полезная особенность, что если объект более не существует, то значение, привязанное к нему, удаляется из памяти garbage collector-ом; это можно использовать, например, для организации кеша, который автоматически подчищается, когда закешированные объекты не существуют (простая версия того же на mdn)

• если хочется сделать тип, принимающий любую строку, но при этом чтобы в автокомплите выдавались «предустановленные» варианты, то в юнион в конце надо добавить string & {} type Status = 'open' | 'closed' | string & {}

• если вдруг у вас возникнет желание использовать Web Crypto API для генерации рандомных чисел вместо Math.random(), то это будет гораздо медленее и для простых (не крипто) задач «типа немного лучше»

• сможете сходу сказать, чем Screen Orientation API отличается от Device Orientation API? Screen — это горизонтальная/вертикальная раскладка, Device — это про гироскоп и ориентацию в пространстве; также есть рецепт по блокировке экрана в Fullscreen API, и ещё немного про Vibration API и малодоступный Contact Picker API

• новые методы Set (intersection, union…) доступны во всех браузерах, их можно адоптить, тем более, что уже поддержаны в TS 5.5

• Intersection Observer API норм адоптится в React, правда нужно намазать парочкой useRef, чтоб лишний раз не пересоздавать обсервер

• юзкейсы Proxy: геттеры, подсчёт доступов, немутабельные объекты, кеширование, создание цепочки методов, валидация, вотчер изменений поля

CSS

• ещё один сборничек современных фишек CSS от Michelle Barker, из находок: inset можно задавать не только 0, но и inset: 50% 50% 0 0 (направление значений по часовой стрелке — верх, право, низ, лево); растяжка элементов на весь контейнер { display: grid; * > { grid area: 1 / 1; } }; также есть container-queries, :has (куда же без него), anchor positioning
• если у вас Chrome-only приложение (киоск, например), то там уже завезли anchor positioning, и его можно использовать для создания линий между элементами (аля стрелки в miro) — линии будут привязаны к заданному боку элемента и сохранять свою позицию при перемещении самого элемента
• если задать одиночный кейфрейм 50% { transform: scale(1.5) }, то он будет работать: на 0% будет изначальным, затем изменится до заданного, а затем снова вернётся к изначальному; тут можно посмотреть другие одиночные кейфреймы
• если нужно сверстать текст по кругу, можно использовать тригонометрические функции и transform, которые доступны во всех браузерах (похожее есть в SVG-элементе textPath, расставляющем текст по path)
• как на clip-path: polygon() создать форму и её инвертировать: прикольно, что на polygon() можно создать любую геометрическую форму

HTML

• текстовые инпуты несколько перегруженные в настройках, так что часть из них забывается: помимо type, pattern, inputmode можно ещё задать spellcheck (управляет проверкой правописания), autofocus (устанавливает автофокус), autocapitalize (автоматическая капитализация букв, слов, предложений), autocomplete (автодополнение имени, одноразовых кодов, паролей), autocorrect (нестандарт в Safari исправляет правописание)