Знаете ли вы, что в CSS можно определить поворот с помощью блока `turn`? 🤩

👉 @frontend_1

React 19: что нового в самой популярной библиотеке для создания интерфейсов? Узнайте первыми!

Новые хуки, улучшения рефов, кастомные элементы — React становится ещё удобнее. И мы готовы рассказать, как использовать это на практике.

Хотите быть на пике технологий? На открытом вебинаре 6 февраля в 19:00 мск разберём, как применять нововведения React 19 в реальных проектах.

Все участники получат скидку на большое обучение «React.js Developer» — идеальный способ прокачать навыки.

Записаться: https://vk.cc/cI3b8C

Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576, www.otus.ru

Всплывающие скроллеры изображений с анимацией, управляемой прокруткой CSS 🤙

.pop {
view-timeline-name: --pop;
}
img {
animation: slide both;
animation-timeline: --pop;
animation-range: entry 100% cover 50%;
}
.skateboarder {
--x: 0;
--y: -45%;
}
@ keyframes slide {
to { translate: var(--x) var(--y); }
}


https://codepen.io/jh3y/pen/abPgrGR

👉 @frontend_1

🔥Podlodka React Crew – онлайн-конференция для React-разработчиков.

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

Что в программе:

💬 Говорим на одном языке с пользователями: i18n в React-приложениях – Виталий Баев, контрибьютор Next.js и Vite 🌍 Как выбрать инструменты и сделать интерфейс удобным для всех?

📡 OpenTelemetry для фронтенд-разработчика – Валерий Катцин, frontend-разработчик в Точке 📊 Как собирать данные о работе приложения и использовать их для улучшения продукта?

🔥 "Долгожданный" React 19 – Алекс Рассудихин, разработчик с опытом во Vue, React, Next и Astro 🚀 Какие фичи вышли в продакшен, а какие – нет?

🤖 AI Integrated Developer Experience – Марк Байдебура, Senior Full-stack Engineer в Influencer 🧠 Где AI реально помогает, а где пока его лучше не использовать?

📅 Конференция пройдет 10-14 февраля.

Ты не просто узнаешь по новые фичи и подходы, но и определишься, какие из них включить в свой roadmap и как расти дальше.

🔗 Регистрируйтесь: podlodka.io/reactcrew

Runtime Compatibility: Инструмент для проверки совместимости JavaScript-кода с окружением

Это полезный инструмент, который позволяет проверить, какие JavaScript-фичи поддерживаются в разных средах выполнения (Node.js, браузеры и т. д.).

Что он умеет?
🔹 Анализирует ваш код и определяет, какие функции и синтаксис могут быть несовместимы с заданным окружением.
🔹 Поддерживает Node.js, браузеры, Cloudflare Workers, Deno и другие рантаймы.
🔹 Может использоваться как CLI или в виде онлайн-инструмента.

Кому это полезно?
✅ Разработчикам, которым нужно убедиться, что их код работает на разных платформах.
✅ Тем, кто использует ES модули, топ-уровневый await, новые API и хочет избежать проблем с несовместимостью.
✅ Разработчикам библиотек, чтобы проверять поддержку своих пакетов.

Если пишете код, который должен работать в разных окружениях — попробуйте Runtime Compatibility! 🚀

https://runtime-compat.unjs.io/

👉 @frontend_1

Совет по JavaScript 💡

Упрощайте группировку данных с помощью Object.groupBy() или Map.groupBy() 🤩

👉 @frontend_1

Шпаргалка по выравниванию в CSS Grid 👨‍💻

👉 @frontend_1

Совет по Javascript 💡

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

👉 @frontend_1

7 способов скрыть элемент с помощью CSS 🎨💻

Разбираем 7 различных методов скрытия элементов в CSS и их особенности! 🔥

1️⃣ Использование display

.hide {
  display: none;
}

❌ Не видно скринридерам
❌ Не занимает место
❌ Не принимает клавиатурные события
❌ Не принимает события мыши
❌ Не анимируется

📌 Использование: Полное скрытие элементов, например, скрытие полей в зависимости от выбранного метода оплаты.



2️⃣ Использование visibility

.hide {
  visibility: hidden;
}

✅ Видимо скринридерам
✅ Занимает место
❌ Не принимает клавиатурные события
❌ Не принимает события мыши
❌ Не анимируется

📌 Использование: Для скрытия сообщений об ошибках под формами.



3️⃣ Использование opacity

.hide {
  opacity: 0;
}

✅ Видимо скринридерам
✅ Занимает место
✅ Принимает клавиатурные события
✅ Принимает события мыши
✅ Анимируется

📌 Использование: Например, для скрытия ссылок, которые появляются при наведении.



4️⃣ Использование scale

.hide {
  transform: scale(0);
}

✅ Видимо скринридерам
✅ Занимает место
✅ Принимает клавиатурные события
❌ Не принимает события мыши
✅ Анимируется

📌 Использование: Для скрытия элементов в анимации увеличения.



5️⃣ Использование translate

.hide {
  transform: translateX(-9999px);
}

✅ Видимо скринридерам
✅ Занимает место
✅ Принимает клавиатурные события
❌ Не принимает события мыши
✅ Анимируется

📌 Использование: Например, для бокового меню на мобильных сайтах в сочетании с position: absolute.



6️⃣ Использование clip-path

.hide {
  clip-path: circle(0);
}

✅ Видимо скринридерам
✅ Занимает место
✅ Принимает клавиатурные события
❌ Не принимает события мыши
✅ Анимируется

📌 Использование: Можно скрывать элементы полностью, но они остаются доступными для скринридеров.



7️⃣ Использование position absolute

.hide {
  position: absolute;
  left: -9999px;
}

✅ Видимо скринридерам
❌ Не занимает место
✅ Принимает клавиатурные события
❌ Не принимает события мыши
❌ Не анимируется

📌 Использование: Полезно для навигации скринридеров (например, ссылка «Пропустить к содержимому»).



🔥 Бонус: скрытие элемента визуально, но доступность для скринридеров!
Используем CSS-хак, чтобы элемент был скрыт, но оставался доступным:

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  white-space: nowrap;
  clip-path: circle(0);
  clip: rect(0 0 0 0); /* для IE */
}

📌 Использование: Например, для скрытия <h1>, если логотип используется в качестве заголовка.

💡 Подписывайтесь, чтобы получать больше полезных лайфхаков по CSS и фронтенду! 🚀✨

👉 @frontend_1

💡 Простой кейс создания закругленных углов в CSS

👉 @frontend_1