Всем привет! Сегодня расскажу о том, как удобно организовать Page Object для большого проекта с использованием Playwright и библиотеки Dorama. Большинство современных веб-проектов имеют сложный интерфейс с переиспользуемыми компонентами. Причем компоненты могут переиспользоваться как на разных страницах, так и в рамках одной страницы. Поэтому важно грамотно оформить POM с самого начала, чтобы можно было добраться до любого локатора любого компонента на странице. Это упростит написание тестов и улучшит читаемость кода. При формировании страниц и компонентов мы будем использовать как наследование, так и композицию. Перейдем к делу.
TypeScript *
Cтрого типизированная надстройка для JavaScript
Redux vs Mobx кого же выбрать для React-приложения в 2024 году?
Привет, Хабр!
Сегодня я хочу поделиться с вами своими размышлениями о том, какой стейт менеджер лучше использовать для разработки приложений на React в 2024 году. Как вы знаете, React — это одна из самых популярных и мощных библиотек для создания пользовательских интерфейсов, которая предоставляет множество возможностей и преимуществ для разработчиков. Однако, по мере роста и усложнения приложений на React, возникает необходимость в управлении состоянием и данными, которые используются в разных компонентах. Для этого существуют различные решения, называемые стейт менеджерами. Стейт менеджер — это инструмент, который позволяет централизованно хранить, обновлять и передавать данные между компонентами, а также реагировать на изменения состояния.
В этой статье я рассмотрю два из самых популярных и зрелых стейт менеджеров для React: Redux и Mobx, а так же разберём и сравним Redux Toolkit и mobx-state-tree. Я сравню их основные принципы, преимущества и недостатки, а также покажу примеры их использования в коде. Также я попытаюсь ответить на вопрос, какой из них лучше подходит для разработки современных приложений на React в 2024 году.
Привет, я FSD, чем могу помочь?
Привет, странник👋
Сегодня ты встретишься с невероятной историей о том, как одна архитектура смогла убедить программиста в его любви к коду. Ладно, не все так трагично, однако FSD действительно покажет, что можно любить расположение папок в проекте
Пару месяцев назад я со своей командой осознали, что в проекте развернулось небывалых размеров болото, залазить в которое с каждым разом все больнее (наша архитектура до FSD - якорь): писать новый код не хочется, старый код отталкивает своей запутанностью, никто ничего не понимает. Тогда-то мы решили попробовать новую архитектуру - FSD, поскольку сейчас, как мне показалось после изучения этого вопроса, это самая логичная, чистая и понятная архитектура.
1/n: Задачи leetcode JS — «Max Consecutive Ones» (Найти максимальное количество последовательных единиц)
Всем привет.
Я столкнулся с тем, что на собеседования в некоторые ИТ-компании на Frontend JavaScript требуется решать задачи, и я решил сделать серию статей на тему, как я решил их тем или иным образом. Перед вами — первый текст из серии.
Для решения будем использовать язык программирования TypeScript.
Первое приложение на SolidJS
В этой статье познакомимся с SolidJS − JavaScript-библиотекой для создания пользовательских интерфейсов без виртуального DOM. Мы создадим легкий список задач с использованием TypeScript и разберем некоторые особенности библиотеки.
Меняем формат розыгрышей призов в Telegram-чатах
Привет, Хабр!
Меня зовут Денис, и сегодня я расскажу вам о проекте, над которым я и мой друг работали последние 7 месяцев. Называется он PLAY365 — и это наш игровой бот для групповых чатов Telegram.
В посте будет много информации: о причинах и этапах создания бота, основных функциях, неочевидных нюансах, а также о том, с какими трудностями мы столкнулись и как их преодолели (конечно же, с примерами кода).
Меняем формат розыгрышей призов в Telegram-чатах
Привет, Хабр!
Меня зовут Денис, и сегодня я расскажу вам о проекте, над которым я и мой друг работали последние 7 месяцев. Называется он PLAY365 — и это наш игровой бот для групповых чатов Telegram.
В посте будет много информации: о причинах и этапах создания бота, основных функциях, неочевидных нюансах, а также о том, с какими трудностями мы столкнулись и как их преодолели (конечно же, с примерами кода).
Собираем метрики Node.js приложений в PM2 с экспортом в Prometheus
Ни для кого не секрет что для устойчивой и надежной работы node.js приложений необходимо проводить мониторинг их работы и делать полезные выводы глядя на их метрики. Это означает, что вы способны получать информацию о состоянии до возникновения проблем, таким образом, предотвращая сбои.
В этой статье я хотел бы рассказать о способе сбора статистики из node.js приложений, которые запущены в PM2, и экспорт этих данных в Prometheus.
Храним файлы Strapi в облаке Selectel
Привет, я некоторое время работаю над своим пет проектом, где в основном занимаюсь фронтом, а для данных использую headless CMS под названием strapi.io. В какой-то момент у меня появилась потребность вынести медиа хранилище из локальной папки в облако. А так-как основной проект уже находился долгое время на серверах Selectel, я решил воспользоваться их объектным хранилищем и подключится к нему с помощью плагина “@strapi/provider-upload-aws-s3“. И в этой статье я вам опишу краткий гайд как это сделать.
Храним файлы Strapi в облаке Selectel
Привет, я некоторое время работаю над своим пет проектом, где в основном занимаюсь фронтом, а для данных использую headless CMS под названием strapi.io. В какой-то момент у меня появилась потребность вынести медиа хранилище из локальной папки в облако. А так-как основной проект уже находился долгое время на серверах Selectel, я решил воспользоваться их объектным хранилищем и подключится к нему с помощью плагина “@strapi/provider-upload-aws-s3“. И в этой статье я вам опишу краткий гайд как это сделать.
Практическая реализация паттерна Server-Driven UI на Flutter c использованием фреймворка Duit
Жизнь не становится проще, а публикация приложения в сторы и подавно. Задержки при проверках, неожиданные проблемы со стороны сторов и невозможность быстро доставить хот-фикс пользователям потрепали нервы многим поколениям мобильных разработчиков. Поэтому инженеры, разрабатывающие свои приложения под самые разные платформы, стараются всеми силами решить эти проблемы и сократить время доставки обновлений до пользователя.
В рамках этой статьи мы попытаемся решить эти проблемы, взяв за основу один из популярных паттернов и создав демонстрационное Flutter приложение на базе Server-Driven UI фреймворка Duit.
Когда «as never» — единственное, что работает
as never
, очень редко требуется в TypeScript. Давайте рассмотрим пример, где это необходимо.
Представим, что мы хотим отформатировать некоторый ввод на основе его typeof
. Сначала мы создадим объект formatters
, который сопоставит typeof
с функцией форматирования:
End-to-end тестирование React приложения с помощью Playwright
Привет, я Лиза – веб разработчик в одной зарубежной компании. Хочу поделиться тем, как я автоматизировала регрессионное тестирование в рабочем проекте на React с использованием довольно нового фреймворка Playwright. Разберемся, почему именно этот фреймворк, какие подводные камни, как обойти авторизацию и кто этим пользуется.
Ближайшие события
Переход с Vue-CLI и Webpack на Vite: ускоряем разработку Vue 3
Одним из новых инструментов в арсенале Vue 3 является Vite - быстрый и легковесный бандлер, который значительно упрощает процесс разработки и ускоряет сборку проекта. В этой статье мы рассмотрим, как перейти от стандартного подхода с использованием Vue-CLI и Webpack к более продвинутому и эффективному методу работы с помощью Vite.
Использование возможностей Angular. Часть 1
Добрый день. Меня зовут Юрик и я angular-разработчик. Остальные в комнате у психиатра:
- Здравствуй Юрик, мы рады тебя видеть.
Готовим Telegram Mini App без туннеля и с Hot Module Reload на React, TypeScript
В этой статье разберем как собрать комфортную девелопмент среду для разработки Telegram Mini App. Под комфортом я понимаю ситуацию когда тебе не нужно выгружать свое приложение в облако, чтобы увидеть результат работы в телеге, или запускать туннель типа ngrock, который после каждого перезапуска меняет ссылку. И я не уверен, что HMR можно получить через туннель. Поэтому я сделал свое решение, и хочу оставить его тут себе и потомкам.
Zod умер. Да здравствует ajv-ts
TLRD: zod не подходил в проекте и решили сделать свой builder с помощью ajv в zod-like API. Поскольку гугление не показало никаких вменяемых результатов - было решено сделать свои костыли решения.
Если стало интересно - прошу под кат!
Коллекция утилит NestJS-mod для унификации приложений и модулей на NestJS
Коллекция утилит NestJS-mod предназначена для унификации приложений и модулей NestJS, а также представляет новые логические возможности разделения обязанностей между модулями (System, Core, Feature, Integration, Infrastructure).
Cache API — кэшируем данные на стороне клиента
Cache API - сравнительно старый API для управления хранилищем кэша, доступный уже во всех современных браузерах и являющийся частью ServiceWorker.
Разберемся, как мы можем его использовать, сравним с другими методами организации кэша на стороне клиента, а также реализуем новостную ленту с применением Cache API.
ECMAScript 6+ vs TypeScript
Минули те времена, когда разработчики писали Frontend на «чистом» JavaScript (вплоть до ECMAScript 5). Все изменилось с выходом в свет версии ECMAScript 6 в 2015-м году. Это событие стало, по истине значимым в мировой Frontend разработке. Предыдущие 6 лет до этого, язык практически не менялся. Годом ранее, в 2014-м, компания Microsoft опубликовала TypeScript 1.0 и предоставила встроенную поддержку языка в своей IDE VisualStudio 2013. На самом деле, официально, TypeScript был выпущен еще в 2012 (версия 0.8), однако, популярностью он не пользовался в виду практически полного отсутствия поддержки со стороны существующих, на тот момент, IDE.
С тех прошло много времени. Оба языка развивались параллельно. В чем‑то они схожи, в чем‑то кардинально различаются. Каждый разработчик и каждая команда вольна самостоятельно решать, какой из них использовать. В это статье попробуем найти точки, как пересечения, так и расхождения этих двух языков и сравним их подходы.
Типизацию TypeScript рассматривать в этой статье не будем, т.к. очевидно, что в ECMAScript её нет, и сравнивать тут нечего.
Для чистоты эксперимента код будем транспилировать в старый добрый ECMAScript 5. TypeScript, для удобства, возьмем версии 4.8.4 (этой версии, для целей статьи достаточно) и будем компилировать его родным tsc
компилятором. Для ECMAScript воспользуемся инструментарием Babel
.
Вклад авторов
Waterplea 536.0fillpackart 452.8jarvis394 375.0aio350 312.2MarsiBarsi 295.0ru_vds 278.8nin-jin 231.4nsbarsukov 224.0iliazeus 209.0it_monk 154.0