Привет, Хабр! Сегодня рассмотрим как автоматизировать тестирование React-приложений с инструментом Cypress. Для начала работы с Cypress React-проекте, первым делом нужно установить сам пакет. Это можно сделать с помощью npm или Yarn:npm install cypress --save-dev # или yarn add cypress --devПосле установки, нужно будет проинициализировать Cypress, что создаст базовую структуру папок и файлов конфигураций:npx cypress openКоманда создат все необходимые файлы и откроет пользовательский интерфейс …
На Хабре я часто вижу статьи о реализации тех или иных фич на Python-фреймворках. Я объединил все эти фичи в реальный проект с открытым исходным кодом, чтобы у вас сложилась целостная картина. Мы с вами создадим UX/UI на Figma, напишем фронтенд на HTML, CSS, SASS, Bootstrap и JavaScript, создадим ER-диаграмму в MySQL Workbench, напишем бекэнд на Flask, создадим регистрацию через социальные сети OAuth 2.0 в один клик, используем брокер сообщений и асинхронную очередь Celery для отправки писем н…
ПроблемаНекоторое время назад начал разработку мобильного приложения на React Native. Проблема в том, что требованием к приложению является Galaxy Fold и Samsung DeXМечта верстальщикаКак следствие, встал вопрос реализации адаптивной верстки форм.Одно и тоже приложение должно рисовать формы в одну колонку в режиме телефона и две колонки в режиме планшета. Если писать разный код компоновок, придется дублировать логику форм, как минимум, новое поле добавляется два раза.Android Large Desktop - эмул…
В начале 90-х интернет был очень базовым и простым для понимания. По сути, это были два компонента: веб-сервер и браузер.На локальном компьютере вы устанавливали браузер, который, получив URL, отправлял HTTP GET-запрос на сервер, на котором запрашиваемый ресурс. Затем этот сервер отвечал текстом, но не просто текстом. HTTP означает протокол передачи гипертекста, и этот гипертекст может быть, например, HTML-документом. Проще говоря, это текстовый файл с HTML-кодом, а браузер - это программа, ко…
ВведениеAngular 17 представляет собой мощный инструмент для создания современных веб-приложений. С каждым новым релизом команда разработчиков добавляет новые возможности, и одним из самых интересных нововведений в Angular 17 является поддержка Signal. В этой статье мы рассмотрим, что такое Signal, как его использовать в Angular, и приведем примеры реального использования.Что такое Signal?Signal — это концепция, которая используется для отслеживания и реакции на изменения данных. Она упрощает уп…
Я люблю box-тени.Четыре года назад я выяснил, что мой процессор M1 может рендерить безумное количество таких теней, поэтому решил извлечь из них максимум, и мне это удалось. Если вам интересно, как пользоваться box-тенями, чтобы создать современный стиль UX, то вы не по адресу. Но если вам нравятся творчество и эксперименты, то продолжайте чтение.Я хочу поделиться худшими примерами того, что можно сделать при помощи box-теней в одном div. Примерами, которые не должны работать, однако почему-то …
Эта статья для тех, кто знает, что такое “внедрение зависимостей” и имеет практический опыт его использования. Меня зовут Алекс Гусев и я являюсь автором библиотеки “@teqfw/di”. Цель моей библиотеки - дать возможность использовать функционал “внедрение зависимостей через конструктор” в проектах на JS (фронт и бэк) и TS (бэк). Минимальной единицей внедрения является отдельный экспорт es6-модуля. Поэтому библиотека не может использоваться с модулями CJS или UMD.В основу внедрения зависимостей зал…
Статья о том, как легко делать графические кнопки для панелей инструментов, не таская за приложением гору бинарных ресурсов с картинками. Этот метод платформонезависимый и может быть использован в различных языках и средах, позволяющих работать с графикой и растровыми изображениями. Ниже приводятся примеры для C# (WinForms / WPF), JavaScript, Python.При разработке приложений и утилит мне неоднократно приходилось сталкиваться с проблемой создания множества пиктограмм для панелей инструментов и к…
Привет. Меня зовут Дмитрий, я фронтенд-разработчик в компании «Цифровая индустриальная платформа». В своей работе мне часто приходится использовать Dependency Injection (DI) в Angular. Это мощный и популярный инструмент, который упрощает работу с зависимостями в наших приложениях. Он позволяет легко интегрировать необходимые сущности в компоненты, упрощает процесс тестирования и поддерживает принцип инверсии зависимостей. Однако часто мы не используем все возможности DI, потому что не знаем, ка…