Анимация — это просто с Framer Motion 😍

На прошлой неделе открыл для себя библиотеку framer-motion для React, она показалась мне настолько интуитивно простой, что я аж зарядился энтузиазмом делать анимации по просьбе дизайнера и получал от этого удовольствие

Она может анимировать скролы, клики, тапы, драг-н-дропы и даже svg и 3D

Документация и примеры 👇
https://www.framer.com/motion/

Что нового в Chrome 117?

Вчера перевёл статью по апдейту хрома, бегом читать 🔥

https://habr.com/ru/articles/760740/

CSS анимация на основе скролла 😍

Продолжаем следить и изучать animation-timeline, view-timeline и animation-range, в этом примере автор создал параллакс сетку на чистом CSS 🫡

Вот ключевые моменты, на самом деле всё довольно просто:
.collage {
height: 200vh;
view-timeline: --collage;
}

.photo {
animation-name: travel;
animation-fill-mode: both;
animation-timing-function: linear;
animation-timeline: --collage;
animation-range: entry 100% exit 0%;
}

.photo:nth-of-type(7n + 1):nth-of-type(even) {
--vertical: -100%;
--horizontal: 100%;
}

keyframes travel {
0% {
translate: 0 0;
}
50% {
translate: 0 var(--vertical);
}
100% {
translate: var(--horizontal) var(--vertical);
}
}

Код ещё рано использовать в продакшене, пока что ждём-с и пускаем слюни 🤤
animation-timeline, 60% поддержки на caniuse

animation-range, 60% поддержки на caniuse

CodePen

В девтулзах хрома появился просмотр CSS @property 🥰

Чтобы просмотреть переменную (свойство), в разделе Elements > Styles наведи курсор мыши на имя переменной (свойства) и увидишь его описание во всплывающей подсказке. В целом, всё есть в видео 😉

Bun — ещё один конкурент Node.js и даже больше 👏

На днях вышел первый стабильный релиз Bun 1.0, он написан на языке Zig, заявляет, что в разы быстрее Node.js и даже быстрее Deno

Работает с JS и TS, может напрямую выполнять .jsx и .tsx файлы

Из коробки есть методы для тестирования, пакетный менеджер и бандлер

Официальный сайт

Видео от создателей

GitHub

Svelte: Знакомство с рунами 🤨

Svelte Team обещает выпустить Svelte 5, а мы смотрим, что там может поменяться и что за руны такие они нам приготовили

https://habr.com/ru/articles/763256/

Вышел Safari 17 🥳

Статья довольно большая, не взялся переводить, решил выписать тезисно:

HTML:
— Новый элемент <search>
— Добавлена поддержка атрибута popover
— Добавлена поддержка <hr> внутри <select> (можно добавлять разделители в селект)

CSS:
— Добавлена поддержка @font-face size-adjust
— Добавлена поддержка text-transform: full-width и text-transform: full-size-kana
— Расширена поддержка @supports для font-format() и @supports font-tech()
— Свойство hyphens, для согласования префиксов -webkit- с их аналогами без префиксов
— Добавлена поддержка @counter-style
— Куча фиксов display: contents, расширение Media Queries до level 4
— Улучшение image-set

JS и Web API:
— Полная поддержка Storage API и обновление лимита с 1 ГБ до относительной величины от размера жётского диска пользователя, получить можно через StorageManager.estimate()
— Метод drawImage() канваса, теперь может принимать svg картинку
— Реализованы 2 пропоузала регулярных выражений: v-flg и duplicate named capturing groups
— Новые методы объекта Set
— Появилась возможность использовать хэптик фидбэк на геймпаде: navigator.getGamepads()[0].vibrationActuator.playEffect("dual-rumble", options)
https://webkit.org/blog/14445/webkit-features-in-safari-17-0/
— Добавлен метод URL.canParse()
— Добавлена поддержка относительных урлов в объекте веб-сокета: new WebSocket('/updates')

Больше подробностей 👇
https://webkit.org/blog/14445/webkit-features-in-safari-17-0/

Небольшой совет для чистоты кода 🧑‍🎓

Создание элемента и назначение ему атрибутов при создании, поможет понять состояние элемента сразу на месте, используя Object.assign

Как относишься к юмору на канале?)

Взято из ППШ

👍 — иногда надо посмеяться
👎 — я тут за знаниями

Vite Conf 2023 началась! 🥳

https://viteconf.org/23/live

form-sizing: content — одна строчка для авторесайза textarea 😏

На просторах твиттера нашёл свойство form-sizing, но ни MDN, ни caniuse ничего по нему не выдаёт, проверил, и оно работает в Chrome Canary, будем следить 🥺

Хотелось бы уже избавиться от JS костылей для контроля высоты textarea

CodePen

Вышел Chrome 118 🔥

Перевёл статью, бегом читать :)

https://habr.com/ru/articles/766658/

Vue Macros — библиотека хотелок сообщества 🫶

Vue Macros — это библиотека, реализующая пропоузалы или идеи, которые не были официально реализованы в Vue (Evan You в спонсорах)

В большинстве случаев макросы добавляют синтаксический сахар для Vue

Работает с Nuxt 3 и Astro (иногда и с Vue 2), все макросы типизированы и поддерживаются Volar

Официальный сайт

Github

Редизайн Chrome Web store 🥹

Дополнительно появилась возможность перенаправить пользователя по ссылке для оценки твоего расширения (https://chromewebstore.google.com/detail/_EXTENSION_ID_/reviews)

Также теперь стало возможно заливать более качественные скрины для экстеншенов (1280x800)

Превью дизайна можно потыкать тут

Релиз обещают сделать в ближайшее время (дату не называют)

Билеты куплены, через 3 недельки выдвигаюсь на HolyJS 🫡

До встречи, друзья ✌️

Если ты анимируешь цифры, то этот пост для тебя 🫣

font-variant: tabular-nums — твой спаситель от постоянного дёрганья, одна CSS строчка решит твою проблему 🤞

caniuse 96% — можно смело использовать в продакшене

font-variant-numeric MDN — узнать подробности и другие значения

Вышел Abell v1 Beta ✍️

Abell — это низкоуровневый, очень гибкий, не зависящий от фреймворка, Vite-генератор статических сайтов для быстрого создания сайтов с нулевым уровнем использования JS по умолчанию.

Почему Abell?
"А что, если мы возьмем хорошие вещи из нескольких типов решений и построим нечто, что будет: низкоуровневым, как Jekyll, Framework Agnostic и интегрируется в современную экосистему, как это делает Astro, имеет меньшую кривую обучения, чем привычный HTML. Abell пытается быть именно таким" — цитата разработчиков

Официальный сайт

Github

CSS text-wrap: pretty 🧑‍🎓

Это значение позволяет следить за тем, чтобы абзацы не заканчивались одним словом, корректировать дефисное написание, если в конце абзаца появляются строки с дефисами, или подгонять предыдущие строки, чтобы освободить место, и соответствующим образом исправлять выравнивание текста

Также я уже рассказывал про text-wrap: balance, который не предотвращает появление одиночных переносов, но гарантирует, что текст будет обернут таким образом, чтобы создать гармоничный текстовый блок

caniuse 42%, Работает с Chrome 117+

Подробнее про text-wrap и его значения
Статья про text-wrap: pretty

Сегодня делал ховера всякие на активные элементы и заметил, что дизайнер использовал цвет не из UI-кита (цвет выглядит просто темнее)

Сразу же вспомнил про SASS darken, но после попытки связать darken и css-vars я сразу понял, что это не выйдет 😰

Тут же после пару минут гуглинга понял, что уже могу использовать CSS color-mix (caniuse 83.7%), просто смешиваю мой цвет с чёрным и получается тот же darken

Подробнее про color-mix()

Мой первый мем, надеюсь, что для кого-то жиза 🥹

Всем продуктивного понедельника ❤️

Что нового в Chrome 119?

Залетаем читать ☺️

https://habr.com/ru/articles/771220/