Библиотека Slim Select делает создание красивых, настраиваемых dropdown-меню с кучей фич и вариаций максимально простым. Поддерживается поиск, мультивыбор и многое другое

Отличная лёгкая альтернатива громоздким UI-фреймворкам ✌️

GitHub: slim-select

➡️ @FrontendPortal | #resourse

В CSS есть мощная фича — возможность анимировать элементы в зависимости от текущей позиции прокрутки. То, что раньше требовало сложного JS, теперь можно реализовать нативно в CSS 🤩

Создайте keyframes, как для обычных анимаций, но укажите режим view() или scroll().

Доступно множество параметров для настройки — подробнее в документации MDN по scroll-driven animations.

Полная поддержка во всех браузерах отсутствует. Этот пример работает в Chrome, для Firefox требуются доработки

Рабочий прототип с доп. свойствами для Firefox можно найти в CodePen

➡️ @FrontendPortal | #CSS

Забирай потрясающие анимированные mesh-градиенты

Этот ресурс содержит множество готовых анимированных mesh-градиентов в разных стилях.

Выберите понравившийся, скопируйте код и начинайте использовать в своих веб-проектах.

Забираем здесь 🤝

➡️ @FrontendPortal | #resourse

Вышел Vite 7.2

- Опция build.license
- Поддержка proxy и HTTP/2
- И другие новые фичи и фиксы

Полный список изменений: тут

➡️ @FrontendPortal

Создавайте крутые 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