Создание порталов в React с помощью хука usePortal
React предоставляет мощный способ создания пользовательских интерфейсов, но иногда вы сталкиваетесь с ситуациями, когда вам необходимо визуализировать компоненты за пределами обычного дерева React. Вот тут-то и пригодятся порталы. Порталы позволяют отображать компонент за пределами его родительской иерархии DOM, что часто полезно для таких сценариев, как модальные окна, всплывающие подсказки или другие наложения.
В этой статье мы рассмотрим специальный хук React под названием usePortal, который упрощает процесс создания порталов в ваших приложениях React.
Создание локальной среды разработки: запуск полнофункционального приложения Next.js с PostgreSQL и Minio S3 с использованием Docker
Как разработчик, работающий над полнофункциональным приложением, вам необходима локальная среда разработки, максимально приближенная к производственной среде. Это позволит вам тестировать и отлаживать ваше приложение локально перед его развертыванием в рабочей среде.
Почти каждому полнофункциональному приложению необходима база данных и файловое хранилище, поэтому давайте создадим базовое полностековое приложение, которое сможет сохранять и извлекать данные из базы данных, а также загружать и скачивать файлы из файлового хранилища.
Проблема "undefined this keyword variable" в JavaScript
Проблема "undefined this keyword variable" в JavaScript обычно возникает при попытке доступа к свойству или методу с использованием this в функции, но контекст этого потерян или установлен неправильно. Есть несколько способов решения этой проблемы:
Использование SVG в React
В мире создания хорошего внешнего вида веб-сайтов изображения, особенно изображения, очень важны. Они составляют большую часть (60 %) того, что вы видите в Интернете, делая веб-сайты более интересными и помогая обмениваться информацией. Среди множества инструментов, которые используют разработчики, выделяется React SVG. Это как супергерой для размещения на веб-сайтах крутой и масштабируемой графики, особенно масштабируемой векторной графики (SVG).
Как победить Concurrent Mode и Suspense в React
Конкурентный режим (Concurrent Mode) и suspense - это две функции, меняющие правила игры, которые были представлены в последних версиях React. Они позволяют создавать более отзывчивые и производительные приложения, раскрывая возможности параллельного рендеринга и приостановленной загрузки. В этом руководстве мы подробно рассмотрим обе функции и дадим практические советы о том, как эффективно использовать их в ваших собственных приложениях React.
Оптимизация образов Docker с помощью многоэтапных сборок и бездистрибутивного подхода
Когда мы перевели наше приложение с Node.js (Express) на Go, нам удалось уменьшить размер образа Docker с 2,8 ГБ до 400 МБ, что изначально нас устраивало. Однако, стремясь к более эффективному использованию ресурсов и более быстрому развертыванию, мы поняли, что все еще есть возможности для дальнейшего уменьшения размера изображения, поэтому мы решили попробовать новый подход.
Возможно, это знакомая территория для инженеров с опытом работы в DevOps, но для новичков я поделюсь улучшениями, которые мы внесли.
Создавайте образы Docker быстрее, используя кэш сборки
Знание того, как оптимизировать сборки образов Docker, чтобы использовать кэш сборки как можно чаще, имеет решающее значение для ускорения ваших сборок. Мы покажем вам, как работает кэш слоев и как эффективно использовать кэш, чтобы вы могли получить максимальную отдачу от своих сборок.
Python super() против метода Base.__init__
При определении подкласса существуют разные способы вызова метода __init__ родительского класса. Давайте начнем с базового класса и рассмотрим каждый из этих методов.
Создайте свою собственную библиотеку пользовательского интерфейса Vue с помощью Unstyled PrimeVue Core и Tailwind CSS
Обертывание компонентов пользовательского интерфейса для инкапсуляции настраиваемого поведения — распространенная практика при создании собственной библиотеки пользовательского интерфейса, особенно в более крупных командах, где общая библиотека используется среди множества приложений. Основным преимуществом этого подхода является отделение зависимости от сторонней библиотеки, поскольку приложения-потребители вместо этого зависят от общей библиотеки.
Аутентификация приложения Next.js с помощью аутентификации интерфейса Hanko
Hanko — это легкое решение для аутентификации пользователей с открытым исходным кодом, которое поможет вам выйти за рамки паролей.
Интегрируйте Hanko с Next.js
Узнайте, как быстро добавить аутентификацию и профиль пользователя в приложение Next.js с помощью Hanko.
Сначала создайте новое приложение Next.js.
Присоединяйся в тусовку
Поделитесь своим опытом, расскажите о новом инструменте, библиотеке или фреймворке. Для этого не обязательно становится постоянным автором.
