давай, бро, ещё один хук, бро. ещё один хук и мы всё пофиксим, бро

➡️ @FrontendPortal

Знал ли ты про суффиксы -block и -inline в CSS?

Они относятся к «логическим» свойствам, которые противопоставляются привычным «физическим» свойствам и лучше подходят для интерфейсов на разных языках — ведь не все пишутся слева направо и сверху вниз

Например, арабский читается справа налево. И если ты делаешь UI с мультиязычной поддержкой, тебе пришлось бы вручную менять все свойства с *-left на *-right 🤕

Логические свойства решают эту проблему, автоматически подстраиваясь под направление письма текущего языка.

- block-start — аналог top
- block-end — аналог bottom
- inline-start — аналог left
- inline-end — аналог right

Их можно использовать с padding, margin и border. Например: margin-block-end, padding-inline-start.

Есть и приятный бонус: логические свойства дают удобные шорткаты для выбора сразу двух сторон: левой+правой или верхней+нижней.

Нужно применить паддинги и к верху, и к низу? Используй padding-block
Нужно применить паддинги и к левой, и к правой стороне? Используй padding-inline

Крутая фича ✌️

➡️ @FrontendPortal | #CSS

Парсите HTML-ввод с новым методом parseHTMLUnsafe()

Теперь этот статический метод входит в Baseline. Он создаёт новый экземпляр Document из HTML-строки и при необходимости позволяет выполнить дополнительную санитизацию

Подробнее тут

➡️ @FrontendPortal

Кто до сих пор использует useEffect для фетчинга данных?

➡️ @FrontendPortal

Chrome DevTools недавно получил крутое обновление для CSS

Теперь при наведении на любое CSS-свойство в DevTools отображается не только описание, но и Baseline-информация о том, насколько хорошо это свойство поддерживается в браузерах.

Вы увидите лейблы вроде “Widely available”, “Limited availability” или “Newly available”.

Мелочь, а приятно ✌️

➡️ @FrontendPortal

Лайк, если было

➡️ @FrontendPortal

Просыпайся, бро, завезли самый странный React-директив 🤩

➡️ @FrontendPortal

Набор CSS анимаций на все случаи жизни

Если хотите добавить анимацию, но не до конца понимаете, как она будет выглядеть, то вам поможет Animista.

Выбирайте из каталога, настраивайте параметры и сразу просматривайте результат. Гибкие настройки помогут адаптировать анимацию под ваши задачи и создать уникальные эффекты.

https://animista.net

➡️ @FrontendPortal | #resourse

Быстрый совет по CSS: Используйте ключевое слово CSS unset для сброса всех свойств к их унаследованным значениям, включая значения родителя и значения по умолчанию

Очень удобно использовать в качестве значения свойства all

➡️ @FrontendPortal | #CSS

Эта JS либа решает одну из больных тем для разработчиков

Она позволяет без усилий создавать анимированные gauge-индикаторы для дашбордов. В комплекте куча настроек и опций, чтобы идеально подогнать визуализацию данных под твои нужды.

Если ты не в курсе: gauge (или спидометр) - это такие индикаторы в стиле спидометра, которые часто используют в дашбордах для отображения скорости, производительности или прогресса.

Простое, но мощное решение, чтобы сделать UI более интерактивным и живым ✌️

Забираем здесь

➡️ @FrontendPortal | #resourse