DevGang
Авторизоваться

Укрощение dialog HTML с помощью React и TailwindCSS

Сегодня мы собираемся создать модальный компонент, используя собственный dialog элемент HTML, а также React и TailwindCSS.

5 лучших библиотек всплывающих окон для React

Popovers — это важные и часто используемые элементы пользовательского интерфейса, которые раскрывают дополнительную информацию, когда пользователь взаимодействует с назначенным элементом. Примеры профессионального использования всплывающих окон включают раскрывающиеся меню навигации, средства выбора дат и экскурсии во время процесса регистрации.

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

Создание динамической системы оценки по звездам в React

Если речь идет об отзывах пользователей, то звездные рейтинги становятся повсеместным и интуитивно понятным способом выражения своего мнения. В этой статье мы рассмотрим процесс создания динамической системы звездного рейтинга с помощью React. Этот интерактивный компонент позволяет пользователям легко оценивать что-либо по звездной системе и даже выбирать количество звезд.

Умный способ создания масштабируемых WebSocket в NestJS

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

Мои первые мысли? Давайте переместим все действия по созданию/редактированию/удалению в очередь и уведомим пользователей об успешности их действий или нет через WebSocket.

Как сделать адаптивную карточку с эмодзи? (TS React и Chakra UI)

Экспериментируя с градиентными границами, я наткнулся на интересную технику - карточки, которые адаптируются к содержимому внутри них. Демонстрацию этого эффекта в действии можно посмотреть здесь.

Овладейте искусством проецирования контента Angular 

Когда дело доходит до создания настраиваемых компонентов в Angular, думайте об этом как о рецепте вашего утреннего кофе: у вас есть основа (@Input()@Output()) и дополнительные компоненты (*ngIf) для создания идеального напитка. Однако чем больше начинки вы добавляете в свой утренний кофе, тем больше ваш компонент становится слишком тесным для вашей базовой бизнес-логики.

Создание и тестирование клиентских ссылок Apollo

При использовании клиента Apollo может наступить момент, когда вы захотите проверить или внести некоторые изменения в свои запросы GraphQL. Именно здесь в игру вступает Apollo Link. Библиотека устанавливает цепочку действий для каждой операции GraphQL, выполняемой клиентом.

Что такое ссылка и как ее создать и протестировать? Давайте разберемся и посмотрим, что происходит.

Декларативный JavaScript

Погружение в мир функционального программирования иногда может показаться ошеломляющим. Переход от понимания основных концепций к их фактическому применению в реальных сценариях может оказаться непростым. Если вы знакомы с некоторыми методами функционального программирования, но не знаете, когда и как их использовать, вы попали по адресу. В этой статье мы обсудим некоторые ключевые концепции и их практическое использование, а также исследуем, как декларативное программирование связано с функциональным программированием.

Средство просмотра PDF в Next.js 13.4 с использованием @react-pdf-viewer

PDF-файлы являются широко распространенным форматом для обмена документами и информацией. В веб-приложениях часто возникает необходимость интегрировать программу просмотра PDF-файлов для отображения этих документов. В этом руководстве мы рассмотрим процесс создания простой программы просмотра PDF-файлов с помощью React и библиотеки @react-pdf-viewer. Мы также покажем, как настроить его в приложении Next.js.

Как настраивать SVG с помощью Next.js и Tailwind CSS

Цель этой статьи - продемонстрировать, как настраивать SVG-изображения с помощью Next.js и Tailwind, не прибегая к внешним конфигурациям или использованию вспомогательных библиотек типа svgr/webpack.

В данном учебном пособии мы используем данное изображение.

Присоединяйся в тусовку

Поделитесь своим опытом, расскажите о новом инструменте, библиотеке или фреймворке. Для этого не обязательно становится постоянным автором.

Попробовать

В этом месте могла бы быть ваша реклама

Разместить рекламу