Создавайте крутые onboarding-туры прямо в своих веб-приложениях

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

Вот либа, которая позволяет реализовать то же самое, совместима с проектами на Next.js и React

Забираем с GitHub: NextStep

➡️ @FrontendPortal | #resourse

CSS Совет: Возможно, вы не знали об этом трюке анимации иконки при клике/фокусе

Легко анимируйте иконку при взаимодействии, создавая спрайт изображения со всеми кадрами анимации и используя функцию временного расчета steps() в CSS.

input[type="checkbox"] {
  /* Задаем ширину и высоту, равные размеру одного кадра в спрайте */
  width: 28px;
  height: 28px;
  appearance: none;
  background: url('/images/star_sprite.png') no-repeat;

  /* steps = общее количество кадров - 1 */
  transition: background-position 0.3s steps(15);
}

input[type="checkbox"]:checked {
  /* Переход к последнему кадру */
  /* Ширина одного кадра = 28px */
  /* 28px * 15 кадров = 420px */
  background-position: -420px 0;
}

Посмотрите вживую: редактируемая демо-песочница

➡️ @FrontendPortal | #tip by Shripal Soni

В утекшем коде Apple встречаются вот такие строки. А ты ещё чувствуешь вину за использование console.log

➡️ @FrontendPortal

Poopetti — это лёгкая и забавная библиотека для создания падающих эмодзи и эффектов взрыва эмодзи

Основной акцент сделан на 💩 эмодзи

Превратить скучный интерфейс в что-то запоминающееся здесь. GitHub тут

➡️ @FrontendPortal

CSS Совет: Синтаксис диапазонов для медиа-запросов

Вы, возможно, не знали об этом более удобном и понятном синтаксисе диапазонов для определения медиа-запросов

Теперь мы можем использовать операторы <, >, =, <=, >= для определения диапазонов в медиа-запросах, чтобы упростить их понимание

✅ Поддерживается во всех основных браузерах с марта 2023 года (92.31%)
✅ Доступен плагин PostCSS для неподдерживаемых браузеров.

➡️ @FrontendPortal | #tip by Shripal Soni

Полезное чтиво: гайд по созданию упрощённого клона Crossy Road на Three.js

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

Есть версии на JS и TS, плюс версия с React Three Fiber

➡️ @FrontendPortal

Хочешь добавить визуализацию данных в реальном времени в свои веб-приложения?

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

Отлично подходит для:
- Реалтайм-дашбордов
- Потоковых или быстро меняющихся данных
- Масштабной аналитики прямо в браузере

Забираем с Github: perspective

➡️ @FrontendPortal | #resourse

HTML Совет: Элемент <search>

Мы можем использовать элемент <search> для обёртывания полей и контента, связанных с поиском/фильтрацией.

Элемент <search> воспринимается браузером как «поисковая» область в API доступности, что помогает пользователям вспомогательных технологий (например, пользователям экранных читалок) легко находить поисковые зоны на веб-странице.

Пример кода:

<search>
  <form action="/search">
    <label>
      Поиск продукта:
      <input type="search" name="productName" />
    </label>
    <button>Поиск</button>
  </form>
</search>

Этот элемент поддерживается всеми основными браузерами с октября 2023 года.

Если на веб-странице есть несколько поисковых зон, им следует задавать доступные названия с помощью атрибутов aria-labelledby / aria-label, чтобы различать их.

➡️ @FrontendPortal | #tip by Shripal Soni