DevGang
Авторизоваться
Алексей Устинов

Алексей Устинов

Метод JavaScript setInterval(): примеры живого счетчика и цифровых часов

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

Улучшите внешний вид вашего сайта: динамический значок с React

Улучшите внешний вид вашего веб-сайта, используя динамический значок с помощью JavaScript.

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

4 способа прослушивания событий в Angular

Иногда нам нужно отреагировать на определенные события в браузере и написать против них код. Возможно, нам нужно услышать щелчок, изменение ввода, фокус или размытие. Возможно, нам нужно сделать что-то вроде прослушивания щелчка в любом месте документа. Что ж, хорошие новости: в Angular есть много способов сделать это. В этом посте я собираюсь показать вам четыре распространенных способа.

Как создать собственный React Hook – практическое руководство

Если вы работали с React, держу пари, что у вас была возможность использовать хуки. Но пробовали ли вы когда-нибудь создать свой собственный хук?

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

Что такое метод querySelector() и как он работает в JavaScript?

В JavaScript могут возникнуть ситуации, когда вам понадобится доступ к HTML-элементу. Метод querySelector представляет собой веб-API, который выбирает первый элемент, соответствующий указанному селектору CSS, переданному в него.

Но как это работает более подробно? В этой статье мы рассмотрим несколько примеров того, как использовать querySelector, а также метод querySelectorAll.

Введение в тестирование с помощью Django для Python

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

Создание API GraphQL с помощью HotChocolate

Создание API поначалу может показаться простым: необходимо установить конечные точки с подходящими методами, позволяющими клиентам получать или отправлять данные. Однако сложности возникают, когда требуются новые атрибуты или когда клиентам не требуются все возвращаемые данные. Это часто приводит к созданию пользовательских конечных точек для весьма специфических запросов, что приводит к необходимости управлять обширным обслуживанием кода.

Что такое размер окна: border-box в CSS?

В CSS есть свойство box-sizing, позволяющее определить, как вычисляется ширина и высота элемента. Многие сбросы CSS изменяют модель блока по умолчанию с content-box на border-box, чтобы упростить работу с макетами. Но что box-sizing: border-box на самом деле делает? В этой статье мы рассмотрим это box-sizing свойство и то, как оно влияет на макет ваших веб-страниц.

Слайдер полета в HTML + CSS

На прошлой неделе я создал диапазон ввода, который выглядит как самолет, летящий к месту назначения (перемещайте самолет вправо и влево):

Учебное пособие по разработке игр на JavaScript — создание Gorillas с помощью HTML Canvas + JavaScript

В этом уроке по игре на JavaScript вы узнаете, как создать современную версию классической игры Gorillas 1991 года, используя простой JavaScript и элемент холста HTML.

В этой игре две гориллы бросают друг в друга взрывные бананы, и побеждает тот, кто первым ударит другого.

Как реализовать динамические сегменты с помощью useParams в React Router

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

Веб-уведомления с Firebase: подробное руководство

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

Тайна раскрыта: 3 способа центрировать div

Выравнивание элементов — распространенная задача в веб-разработке. Часто вам понадобится центрировать элемент div или другой блочный элемент по горизонтали или вертикали на странице. Это позволяет создавать сбалансированные, эстетичные макеты.

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

Использование View Transition API в Angular Framework

Недавно фреймворк Angular запустил интересные функции в версии V17. В этой статье мы узнаем, как начать использовать API View Transition. У этой функции нет хорошей документации, идея здесь — объяснить на практике.

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

Проблема с «as» в TypeScript: почему не следует это использовать

TypeScript — это своего рода помощник для JavaScript, известного языка программирования. JavaScript гибок, но иногда слишком свободен в своих правилах, что может привести к ошибкам. TypeScript добавляет более строгие правила, чтобы избежать этих ошибок, но он не идеален. Это похоже на добавление новых деталей к старому автомобилю, чтобы сделать его более безопасным, но он все равно не так хорош, как новый автомобиль, спроектированный с учетом безопасности, например язык программирования Haskell.

Освоение адаптивного дизайна: советы и рекомендации по разработке, ориентированной на мобильные устройства

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

Как создать Stepper компонент в React?

Что такое Stepper компонент в React?

  • Компонент Stepper позволяет пользователю создавать последовательность логических шагов, визуализирующих прогресс.
  • Его также можно использовать в навигационных целях.

API веб-хранилища – как хранить данные в браузере

API веб-хранилища — это набор API, предоставляемых браузером, позволяющий хранить данные в браузере. Данные, хранящиеся в веб-хранилище, используют формат пары ключ/значение, и оба данных будут храниться в виде строк.

В API веб-хранилища представлены два типа хранилища: локальное хранилище (Local Storage) и хранилище сеансов (Session Storage). В этой статье я собираюсь показать вам, как использовать API веб-хранилища и почему он полезен для веб-разработчиков.

Лучшие практики манипулирования JS DOM – с примерами

В JavaScript вы можете манипулировать содержимым веб-страницы, используя объектную модель документа (DOM). Но как написать код, который будет читабельным, простым в обслуживании и не подверженным проблемам с производительностью? Это то, что мы рассмотрим в этой статье. Я расскажу о некоторых важных передовых практиках, которые помогут вам уверенно манипулировать DOM.

Неизменяемость в JavaScript – объяснение на примерах

Мы часто слышим термины: неизменяемый и неизменяемость. Но что они означают, и почему нас, разработчиков, это должно волновать?

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

Но большинство программ требуют создания, обновления и удаления данных. Так зачем же нам вообще работать с данными, которые невозможно изменить?

Использование Node File Router для маршрутизации на основе файлов в Node.js

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

Создание базы данных фильмов с помощью Prisma, Express и MongoDB: руководство для начинающих

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

Обнаружение и размытие человеческих лиц с помощью искусственного интеллекта в NextJS

Вы когда-нибудь загружали в Интернет фотографию с лицами других людей и задавались вопросом, как сохранить их конфиденциальность? Обнаружение и размытие лиц — важная функция конфиденциальности, которую должны иметь все приложения.

Внедрить распознавание лиц и размытие не так уж и сложно благодаря таким сервисам, как PixLab, которые предоставляют готовые API-интерфейсы искусственного интеллекта.

В этом блоге я покажу вам живую демонстрацию и то, как вы можете реализовать это в своем приложении NextJS/React, используя мощные API-интерфейсы компьютерного зрения PixLab.

Защита объектов JS с помощью прокси

Задача охранника — защищать что-то или кого-то и перехватывать потенциальные взаимодействия с объектом, который он охраняет. Здесь мы поговорим об охраннике, чья работа — защищать объект JavaScript! И использование этого охранника бесплатно! Ну, давайте перейдем к делу.

Создание локальной среды разработки: запуск полнофункционального приложения Next.js с PostgreSQL и Minio S3 с использованием Docker

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

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

Использование SVG в React 

В мире создания хорошего внешнего вида веб-сайтов изображения, особенно изображения, очень важны. Они составляют большую часть (60 %) того, что вы видите в Интернете, делая веб-сайты более интересными и помогая обмениваться информацией. Среди множества инструментов, которые используют разработчики, выделяется React SVG. Это как супергерой для размещения на веб-сайтах крутой и масштабируемой графики, особенно масштабируемой векторной графики (SVG).

Создайте свою собственную библиотеку пользовательского интерфейса Vue с помощью Unstyled PrimeVue Core и Tailwind CSS

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

Аутентификация приложения Next.js с помощью аутентификации интерфейса Hanko

Hanko — это легкое решение для аутентификации пользователей с открытым исходным кодом, которое поможет вам выйти за рамки паролей.

Интегрируйте Hanko с Next.js

Узнайте, как быстро добавить аутентификацию и профиль пользователя в приложение Next.js с помощью Hanko.
Сначала создайте новое приложение Next.js.

Создание приложения Hello World в Ruby On Rails

Сегодня мы научимся создавать простое приложение Hello World, используя Ruby on Rails. Так что придержите лошадей, пока я отправлюсь с вами в ваше путешествие.

Когда вы создаете приложение Ruby on Rails с помощью команды:

rails new project1

Отображение модального окна, когда пользователи покидают сайт

Удержать клиентов на веб-сайте может быть непросто, но есть трюк, который работает как шарм: отображение модального окна подписки, когда они собираются уйти. Это не только повышает конверсию, но и улучшает удержание клиентов на вашем сайте. В этом посте мы узнаем, как реализовать эту функцию с помощью JavaScript DOM. Давайте начнем!

Отслеживание мыши