📌 Свойство дня: 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.

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

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

#буст

❓ Как минимизировать время загрузки приложения за счет оптимизации работы с изображениями и видео

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

Вот что он пишет:

«Как я могу ускорить загрузку приложения, если на сайте много изображений и видео? Какие инструменты и техники помогут уменьшить время загрузки и улучшить производительность?»

Что мы советуем:

📍 Используйте WebP для изображений и AV1 для видео — меньше размер, лучше качество

📍Оптимизируйте изображения под нужный размер с помощью инструментов, таких как ImageOptim и Squoosh

📍 Откладывайте загрузку невидимых изображений и видео с помощью атрибута loading="lazy"

💡 Какие методы оптимизации мультимедиа используете вы в своих проектах? Делитесь в комментариях!

P.S. Если хотите задать вопрос, заполните нашу гугл-форму. Это займет 5 минут.

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

#междусобойчик

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

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

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

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

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

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

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

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

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

#буст

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

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

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

📖 Миграция с JQuery на React: стоит ли переходить

Зачем менять рабочую технологию, если все и так устраивает?

Преимущества React:

➕ Повторное использование и упрощенная поддержка кода

➕ Виртуальный DOM ускоряет обновления интерфейса

➕ Доступ к библиотекам и решениям для специфических задач

➕ React Native для создания мобильных приложений

Минусы:

➖ Новая концепция и инструменты требуют времени на освоение

➖ Миграция может быть затратной и трудоемкой

➖ Требует настройки Webpack и Babel

Переход на React стоит делать для крупных проектов с планами на масштабирование и мобильные приложения. Для простых систем jQuery останется достаточным решением.

А как вы считаете? Стоит ли мигрировать на React, если проект еще работает на jQuery? Пишите в комментариях ✏️

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

#междусобойчик

🟣 Подборка материалов по рендерингу в браузере

Собрали свежие статьи, руководства и доклады, которые помогут вам глубже понять, как работает рендеринг в браузере и как оптимизировать этот процесс для повышения производительности.

➡️ Как работает критический путь рендеринга — введение в этапы рендеринга и оптимизацию производительности

➡️ The Rendering Pipeline | WebGPU — видеообзор рендеринга с использованием WebGPU

➡️ Demystifying Browser Rendering — подробное руководство по этапам рендеринга и оптимизации производительности

➡️ Критические этапы рендеринга: обзор ключевых этапов, таких как построение DOM, CSSOM и Render Tree, а также методов их оптимизации

➡️ Понятно про браузер: критические этапы рендеринга, аппаратное ускорение и оптимизации

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

#свежак