📌 Свойство дня: scroll-snap-type

Позволяет создавать плавные, контролируемые прокрутки с «привязкой» к определённым позициям.

.container {
  scroll-snap-type: x mandatory;
}
.item {
  scroll-snap-align: start;
}

💡 Используется для каруселей, слайдеров и списков.

Зачем это нужно:

➡️ Сделать UX удобным и предсказуемым.

➡️ Избавиться от костылей на JS.

🐸 Библиотека фронтендера

#буст

🐸 Библиотека фронтендера

#развлекалово

⭐️ Чек-лист для кроссбраузерной совместимости

1️⃣ Автопрефиксер для CSS:

— Используйте автопрефиксер (например, Autoprefixer) для добавления префиксов к CSS-свойствам, обеспечивая поддержку в разных браузерах.

2️⃣ Тестирование на старых и новых версиях браузеров:

— Проверяйте работу приложения в старых и новых браузерах. Используйте платформы, такие как BrowserStack для эмуляции разных версий.

3️⃣ Тестирование на мобильных устройствах:

— Используйте Chrome DevTools для эмуляции мобильных устройств, но также проверяйте на реальных устройствах для точной оценки.

4️⃣ Полифилы для новых возможностей JavaScript:

— Добавляйте полифилы (например, core-js, babel-polyfill) для поддержки новых функций JavaScript в старых браузерах.

5️⃣ Шрифты во всех браузерах:

— Обеспечьте поддержку веб-шрифтов в различных браузерах, используя несколько форматов (например, woff2, woff, ttf, eot) и корректно настраивая @font-face.

6️⃣ Фокусировка элементов в формах:

— Убедитесь, что элементы формы корректно получают фокус в разных браузерах, используя стили :focus и :focus-visible.

Эти шаги помогут вам гарантировать, что ваше приложение будет работать во всех популярных браузерах и устройствах.

🐸 Библиотека фронтендера

#буст

🎤 Avito Frontend Meetup — разбор докладов

3 июня в московском офисе Авито прошел митап, где выступили инженеры из Авито, VK и Райффайзен Банка.

Что обсуждали:

➡️ Почему внедрение SSR с Suspense — не такая уж сказка, как обещает документация

➡️ Как можно ускорить разработку фронта, генерируя типизированные реактивные модели прямо из схем

➡️ Опыт использования DI в TypeScript-проектах с помощью лёгкой, но мощной библиотеки tsyringe

➡️ Вишенка на торте — секретный доклад про YALC — must watch для тех, кто работает с монорепами и локальными пакетами

🔗 Запись уже доступна на YouTube

🐸 Библиотека фронтендера

#буст

Домашний офис сюдааа 🙂

🐸 Библиотека фронтендера

#развлекалово