🎲 Фронтенд-квест: разгадываем кроссворд

Проверьте знания ключевых терминов и основных концепций фронтенда.

1️⃣ Что представляет собой абстрактное представление DOM, используемое для эффективного обновления интерфейса без прямых манипуляций с реальным DOM?

2️⃣ Как называется метод History API, позволяющий изменять URL в браузере без перезагрузки страницы?

3️⃣ Какой популярный инструмент используется для сборки и упаковки модулей JavaScript и других ресурсов?

4️⃣ Какое ключевое слово в JavaScript используется для объявления функций, работающих с асинхронным кодом и позволяющих использовать оператор await?

5️⃣ Как называются функции в React, позволяющие использовать состояние и другие возможности без написания классов?

6️⃣ Как называется фундаментальный стиль или модель программирования, задающая общие принципы построения приложений?

Пишите ответы под спойлер в комментарии 💬

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

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

🟣 Подборка материалов по ARIA и веб-доступности

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

➡️ Как адаптировать сайт для чтения скринридером: введение в ARIA-атрибуты

➡️ The Ultimate Guide to ARIA: обзор использования ARIA-атрибутов для улучшения взаимодействия с веб-приложениями

➡️ Accessible Coding for Developers: советы по написанию доступного кода с использованием семантического HTML и ARIA

➡️ Web Accessibility Tutorial: практическое руководство по использованию ARIA-атрибутов и обеспечению доступности с клавиатуры

➡️ ARIA Testing Tutorial: руководство по тестированию ARIA-атрибутов для обеспечения доступности веб-приложений

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

#свежак

❓ Как долго будут доступны данные в localStorage

Выбирайте правильный ответ в опросе 🔜

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

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

😧 Топ-вакансий для фронтендеров за неделю

JavaScript разработчик — от 180 000 до 220 000 ₽, удаленно/гибрид (Москва)

Frontend Team Lead — 350 000 —‍ 400 000 ₽, удаленно (Краснодар)

Frontend developer (React) — от 100 000 до 130 000 ₽, удаленно (Москва)

JavaScript Engineer (Customer Integrations) — 7 500 —‍ 9 000 $6 remotely

Frontend-разработчик — от 300 000 ₽, удаленно (Москва)

➡️ Еще больше топовых вакансий — в нашем канале Javascript jobs

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

#свежак

🔧 Как правильно настроить Debounce и Throttle для оптимизации событий

Debounce и Throttle — техники управления частотой срабатывания событий в браузере.

Почему важно:

📍 Уменьшают количество вызовов функции

📍 Повышают производительность страницы

📍 Предотвращают лаги и подвисания интерфейса

Как работают:

➡️ Debounce — функция вызывается только после того, как событие перестало происходить в течение заданного времени. Подходит для поиска при вводе, ресайза окна.

➡️ Throttle — функция вызывается не чаще, чем один раз за фиксированный интервал времени. Подходит для прокрутки, скролла, отслеживания позиции.

Как внедрить:

1. Debounce — пример на JS:

function debounce(fn, delay) {
  let timer;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => fn(...args), delay);
  };
}

window.addEventListener('resize', debounce(() => {
  console.log('Resize обработан');
}, 300));

2. Throttle — пример на JS:

function throttle(fn, limit) {
  let last = 0;
  return (...args) => {
    const now = Date.now();
    if (now - last >= limit) {
      last = now;
      fn(...args);
    }
  };
}

window.addEventListener('scroll', throttle(() => {
  console.log('Scroll обработан');
}, 200));

3. Используйте готовые библиотеки, например lodash.

4. Тестируйте производительность через DevTools — уменьшение количества вызовов улучшает отзывчивость.

💡 Debounce и Throttle — простой способ повысить плавность работы интерфейса и снизить нагрузку.

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

#буст

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

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

#буст