Вышел React Email 5.0

Лучший способ создавать email-шаблоны с помощью React.

✓ Теперь с поддержкой тёмного режима
✓ Совместимость с Tailwind 4
✓ 8 новых компонентов

Предпросмотр, линтер и многое другое:
→ npx create-email@latest

➡️ @FrontendPortal | #resourse

Swapy

Это инструмент для создания drag-and-drop интерфейсов всего за пару строк кода

Работает с любым фреймворком: React, Vue, Angular, Svelte или даже без них.

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

Лёгкий в установке и супер понятный в использовании.

npm install swapy

➡️ @FrontendPortal | #resourse

Создание липкого заголовка в СSS

Блоки с «липким» позиционированием ведут себя как position: relative и position: fixed одновременно

Пока блок не достиг указанного расстояния от края окна браузера, он ведёт себя как относительно спозиционированный. Когда блок достигнет этой точки, то станет вести себя, как будто мы указали position: fixed

Когда таких заголовков несколько, они накладываются друг на друга, и пользователю виден последний из них

➡️ @FrontendPortal | #CSS #tutorial

Действительно классный гайд по тому, как прокачать навык работы с дейтпикерами в JS

Ты найдёшь примеры, понятные объяснения и отличный визуальный формат, который помогает разобраться во всех тонкостях создания дейтпикеров на чистом JavaScript.

Читайте здесь 👍

➡️ @FrontendPortal | #article

Ленивая загрузка автоматически воспроизводимых видео, которые находятся ниже первого экрана

Установите preload="none" и удалите атрибут autoplay у видео, чтобы оно не загружалось по умолчанию. Затем, используя API Intersection Observer, мы можем воспроизводить видео, когда оно становится видимым в области просмотра

Посмотреть это в действии: тык

➡️ @FrontendPortal | #tip by Shripal Soni

ThiingsGrid

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

Подходит для отображения больших наборов данных в виде сетки с кастомными рендерами ячеек ✌️

GitHub: thiings-grid

➡️ @FrontendPortal | #resourse

Broadcast Channel API

Broadcast Channel API позволяет контекстам браузера (browser contexts) обмениваться данными друг с другом. К браузерным контекстам относятся такие элементы, как окно, вкладка, iframe и т.д.

По причинам безопасности контексты, обменивающиеся данными, должны принадлежать одному источнику (same origin). Один источник означает одинаковый протокол, домен и порт

➡️ @FrontendPortal | #js

Интерактивный конструктор border-radius

Нашёл сайт, где можно поэкспериментировать с border-radius и скопировать готовые значения в свой CSS-код

Генерируются сразу 8 значений для border-radius. Также можно настроить размер элемента

Тестируем здесь ✌️

➡️ @FrontendPortal | #resourse

Наконец-то! Node теперь может выполнять TypeScript-файлы

Стабильно, без конфигурации и без зависимостей

Доступно начиная с версий 22.18.0 и 25.2.0.

➡️ @FrontendPortal

HTML Tip: Самый простой способ отключить несколько элементов формы

Мы можем установить атрибут disabled на элемент <fieldset>, чтобы автоматически отключить все вложенные элементы формы.

➡️ @FrontendPortal | #tip by Shripal Soni

Определяем, когда пользователь переключает вкладки браузера и меняем favicon

Этот трюк можно реализовать с помощью Page Visibility API

Page Visibility API — это API браузера, который проверяет видимость страницы. Он помогает определять, скрыта или свернута текущая страница, и тем самым позволяет контролировать ее поведение и использование ресурсов

➡️ @FrontendPortal | #tip #js

Огромная коллекцию из 1500+ отобранных API для ваших проектов, от погоды и карт до генераторов картинок и NLP-сервисов

Забираем с сайта или с GitHub 🍯

➡️ @FrontendPortal | #resourse