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

ESLint: "Вложенные тернарные выражения могут усложнить понимание кода"

TypeScript:

➡️ @FrontendPortal

Добавь скролл-эффекты нового уровня в свои веб-проекты

Эта библиотека позволяет добавить к страницам аккуратные storytelling-эффекты при прокрутке: плавные, контролируемые и максимально вовлекающие

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

➡️ @FrontendPortal | #resourse