DEV Community: Shaiju T

🚀 Pro In Flow - Boost Your Developer Productivity with Intelligent Agents and Powerful Features

Shaiju T — Mon, 27 Jan 2025 09:14:53 +0000

Hello 😊

This project is my submission for the Agent.ai Challenge, featuring a Full-Stack Agent, Productivity-Pro Agent, and an Assembly of Agents working seamlessly together.

Below is my entry for the hackathon! Real Fact: I’m 2 hours late on submission because of some last-minute bugs — better late than never when it comes to building something, right? 😊

This project is built on top of my GitHub Copilot Hackathon idea, which I initially managed to complete only about 40 - 60% maybe. I decided to take that concept further and turn it into intelligent agents.

Let me know if anything breaks—it’s all part of the process! 😊

I hope you’ll enjoy exploring it. It’s all things AI here—streamlined, efficient, and developer-focused! 🚀

In today's fast-paced world of software development, staying productive and maintaining a smooth workflow is essential. Developers often face challenges such as managing tasks, writing clean code, creating unit tests, reviewing code for best practices, and detecting bugs. To help streamline these processes, we’ve built an innovative app that integrates intelligent agents powered by Agent.ai, along with key productivity features that support developers in staying focused, organized, and efficient.

Let’s dive into how our app is structured, how it works, and the value each agent adds to your workflow. Whether you are part of a development team or a solo coder, these tools will significantly enhance your productivity and help you stay in the zone.

Check Out the Project on GitHub

For more details, to check the full code, or to contribute, visit the project repository on GitHub:

Note: I’ve used Agent.ai Webhooks extensively to achieve end-to-end automation in this project. For security reasons, the webhook URL has not been included in the GitHub repository under appsettings.json. If the judges need access to it, please don’t hesitate to contact me directly.

shaijut / ProInFLow

Pro In Flow - Developer Productivity App

Welcome to the Developer Productivity App! This app is designed to help developers streamline their workflow with intelligent agents for code writing, code review, unit test generation, bug detection, and additional productivity features like task management, Pomodoro timer, and AI agents as copilot's for most tasks.

This README will guide you through setting up both the backend and frontend to get the app running on your local machine.

Features

Backend

.NET Core API: Handles API requests, integrates with the Agent.ai platform to create intelligent agents, and manages task data in an SQLite database.

Frontend

HTML & JavaScript (Bootstrap): A simple, responsive frontend that allows users to interact with the agents and use the app’s productivity features.

Key Features

Task Management: Manage and organize your tasks.
Pomodoro Timer: Focus and take breaks using the Pomodoro technique.
Intelligent Agents: Automate…

View on GitHub

Demo Video:

YouTube:

Some Screen Shots of app as Demo:

Tech Stack and Platform Overview

Our app is powered by the following technology stack:

Backend: .NET Core API – A robust and scalable framework for building APIs, perfect for handling complex backend logic and managing interactions with agents.
Database: SQLite – A lightweight and efficient relational database to store task-related data and agent logs for optimal performance.
Agents: Agent.ai Platform – The backbone of the app’s functionality, enabling the creation of intelligent agents that streamline tasks such as code writing, code reviews, unit test generation, and bug detection.
Frontend: JavaScript & Bootstrap – A clean, responsive, and user-friendly interface that makes interacting with the app seamless for developers.

This stack brings together the best of both performance and usability, allowing developers to use the app effectively on any project while staying productive.

Key Features for Developer Productivity

1. Task Management

Our Task Management feature lets you stay on top of everything you need to do. Organize your day with clear tasks,, and track your progress, helping you stay focused on what matters the most. Whether you are tackling new features, fixing bugs, or reviewing code, this tool ensures that you don’t miss any important steps in your workflow.

2. Pomodoro Timer

The Pomodoro Timer is a productivity booster built right into the app. This feature helps you work in focused intervals, followed by short breaks, allowing you to maintain your focus and avoid burnout. Research has shown that working in bursts with regular breaks increases productivity and helps improve concentration. The Pomodoro timer is customizable so you can adapt it to your preferred work-rest rhythm.

How It Works

Our app’s simplicity and productivity-driven approach allow developers to focus more on their work. Here’s a step-by-step look at how it works:

Set Tasks

Begin by adding tasks for the day, organizing them by priority, and setting clear goals. You can break down complex tasks into smaller chunks, ensuring each step is manageable.
Start Pomodoro

Once your tasks are set, start a Pomodoro cycle. Work in focused intervals of 25 minutes, then take a 5-minute break. After four cycles, take a longer break. This method helps you stay sharp and avoid mental fatigue.

Intelligent Agents: The Game-Changer for Developer Workflow

To make the process of writing code, reviewing it, and detecting bugs faster and more efficient, we’ve integrated Agent.ai’s intelligent agents into the app. These agents perform critical tasks that otherwise take up valuable time, helping developers stay productive and focused on high-level tasks.

1. Requirements Planner Agent

The Requirements Planner Agent streamlines the process of understanding and planning software development tasks. It reads requirement URLs or Jira user stories, summarizes the core requirements, and identifies gaps or ambiguities by generating follow-up questions for stakeholders.

This agent also creates a high-level design plan, outlining components, technologies, and data flows to implement the solution. Additionally, it provides actionable guidance for engineers, suggesting tools, frameworks, and methodologies while anticipating potential challenges and solutions.

Value Add: The Requirements Planner Agent bridges product and engineering teams, ensuring clarity, reducing rework, and accelerating implementation.

2. Code Writing Agent

The Code Writing Agent helps developers get started on new features faster. Given a requirement summary, this agent generates a minimal but functional C# code in a single class file. This ensures that developers can quickly begin working without having to start from scratch.

By automating the initial coding phase, developers can avoid repetitive tasks and focus on refining and implementing advanced logic.

Value Add: Generates simple, easy-to-understand code snippets that are ready to be expanded based on high-level requirements.

3. Code Review Agent

The Code Review Agent scans your C# code for best practices, providing recommendations on improving readability, performance, and overall quality. The agent checks for common pitfalls like redundant code, inefficient patterns, and non-adherence to naming conventions.

By automating code reviews, the agent helps you maintain industry standards without the time-consuming manual review process.

Value Add: Saves time by automating the review process, ensuring your code follows best practices and is maintainable.

4. Unit Test Generation Agent

Writing unit tests is critical for code reliability, but it can often be tedious. The Unit Test Generation Agent takes your C# code and generates sample unit tests for you. The agent follows test-driven development (TDD) best practices and ensures typical and edge cases are covered.

With this agent, you can focus on refining your code while knowing that the tests are automatically generated to validate your logic.

Value Add: Automatically generates unit tests, ensuring your code is properly tested without spending time manually writing tests.

5. Bug Detection Agent

The Bug Detection Agent identifies potential issues in your C# code. It looks for bugs, security vulnerabilities, and performance bottlenecks that could affect the stability and security of your application.

This agent provides detailed suggestions for improving your code’s robustness, helping you catch issues early before they become bigger problems.

Value Add: Detects bugs and security vulnerabilities before they impact your production environment, ensuring higher-quality code.

Conclusion: How These Features Save Time and Boost Focus

By combining intelligent agents with productivity-enhancing features, our app offers developers a comprehensive toolset to streamline their daily workflow. From task management and Pomodoro cycles to code writing, reviewing, and bug detection, every aspect of the app is designed to help you focus on what matters most: writing great code.

Developers can spend less time on repetitive tasks like code generation and bug hunting and more time on high-level problem solving and feature implementation. This not only accelerates development but also helps developers maintain their flow state, which is critical to staying productive and writing quality code.

So, whether you’re working on a personal project, a team collaboration, or just trying to improve your daily productivity, this app brings together the best of both worlds: intelligent automation and a focus-driven approach to coding. Start using it today and take your developer productivity to the next level!

If you liked the project and found it useful, please feel free to leave a star, react, or appreciate the effort. Appreciate Your feedback and support !

https://github.com/shaijut/ProInFLow/

Thank you for reading and checking out the project!

SecureCLI - A custom CLI using .NET Core and MongoDB Atlas

Shaiju T — Thu, 13 Jan 2022 23:47:58 +0000

The Problem

If you work in a company , they are many reason to access different websites. But sometimes maybe you need permissions from security teams to access these websites, or maybe sometimes you have to wait for 2 days to get this approved.

Solution : Reduce the wait time and support tickets

As a developer you like CLI tools because its quick. SecureCLItool helps you to check if the website is secure or not by just typing simple command like below:

secure https://cloud.mongodb.com/

Secure CLI Demo in GIF :)

Submission Category:

Automation Innovation :

Here we have automatedthe security teams job, instead of taking time to approving multiple support tickets , create a DB of approved links in Mongo DB :)

The Mongo Collection

The API Behind the CLI

Link to Code

shaijut / SecureCLI

A CLI App created for MongoDb and Dev.to Hackathon :)

This repo is related to a CLI App created for MongoDb and Dev.to Hackathon :)

Prerequisites

Install .NET Core 5.0 SDK : https://dotnet.microsoft.com/en-us/download/dotnet/5.0
Create you own Mongo DB Atlas FREE account, and create required DB and Collection : https://cloud.mongodb.com/

Add below sample documents inside your collection:

{
    "_id": {
        "$oid": "auto_generated_id"
    },
    "link": "https://cloud.mongodb.com/",
    "isSecure": true
}


{
    "_id": {
             "$oid": "auto_generated_id"
    },
    "link": "https://dev.to/",
    "isSecure": true
}


{
    "_id": {
            "$oid": "auto_generated_id"
    },
    "link": "https://www.exampleunsecuresite.com/",
    "isSecure": false
}

Open the SearchSecureAPIController.cs file under Secure Cli API project and add all related config for Mongo DB Atlas like: Connection string, DB Name, Collection Name.

Steps to Run the Secure Cli API

1. Open the command prompt into folder SecureCliAPI

2. Type dotnet restore

3. Type dotnet build

4. Type dotnet run

5. Let this API be in running mode

Steps to Run the Secure Cli App

1. Open the command…

View on GitHub

Additional Resources / Info

https://www.mongodb.com/languages/how-to-use-mongodb-with-dotnet
How to create your own .NET CLI tools to make your life easier - YouTube · Nick Chapsas
https://docs.microsoft.com/en-us/dotnet/core/tools/global-tools-how-to-create

Was busy but still I did this project in less time, So feel free open issues in github if you face any problem running the projects.

Future Plans:

Create a back end with UIfor security teams add or remove links
Make the CLIrespond like a chat bot
Add options to check mail domains
Do the above as time permits :)

I enjoyed building a custom CLI. Thanks Mondodb and devto .

Enjoy the CLI :)

What are some Real World Projects to learn Angular and React

Shaiju T — Wed, 21 Apr 2021 15:54:50 +0000

Hi folks, 😄

I would like to know What are some Real World Projects to learn Angular and React ?

There are lot of suggestions in the internet. But I would like to build just 3 projects to learn required concepts.

I need unique and advanced app ideas which helps to learn more like ecommerce app, multistep forms , admin panel with grid , search , crud, dropdowns etc.

Any advice will be valuable.

Build A Fitness Machine Learning API and Deploy to Azure using GitHub Actions CI/CD

Shaiju T — Wed, 07 Apr 2021 18:28:01 +0000

Lets Build A Fitness Machine Learning App and Deploy to Azure.

Today I am going to share how to deploy simple Machine Learning Model in Azure and will also share the challenges i faced while deploying this python flask app in Azure.

What you will learn ?

You can upskill in below skills:

Create Basic REST API's using Python.
Basics of Machine Learning.
Deploy Python REST API's to Azure.
Setup CI/CD using Github Actions.
Use PostMan to test Your ML API.

Lets get started....

Prerequisite

Install Required Python Packages

Open your command prompt and execute below commands:

 1. py -m pip install flask

 2. py -m pip install -U flask-cors

 3. py -m pip install -U scikit-learn

Here we are using 3 packages.

flask is used to create REST API's, which means our API can be consumed by web app , mobile app , desktop app, IOT etc. As REST API's return Json data, so it becomes easy to Deserialize to objects of any programming language.
flask-cors is used to allow request from another domian, this will be usefull if your front end is deployed in different domain.
scikit-learn is used for Machine Learning.

Machine Learning Fitness DataSet:

For training our ML model we are using Dataset from here.

Basically we are going to find ideal weight to be fit based on your height and current weight. We have trained our model to predict from 5 feet to 6 feet of male dataset, you can train for other height ranges if required.

Code Walkthrough:

Open VS code inside your project folder, Create app.py file in VS Code and paste below code as required.

First we are importing all required modules required in our flask code.

from flask import Flask, jsonify, abort, request
from werkzeug.exceptions import HTTPException
from flask_cors import CORS
from sklearn import tree

Second we are creating objects, constructors and configuration necessary for app to run.

app = Flask(__name__)
CORS(app)
app.config["DEBUG"] = True

Finally we are implementing REST API functions, which will be called when a URL is requested by client.

Below is the function , which helps us to handle errors globally in our REST API.

@app.errorhandler(Exception)
def handle_error(e):
    code = 500
    if isinstance(e, HTTPException):
        code = e.code
    return jsonify(error=str(e)), code

Next we have our simple function named as get-message to return Hello World! Json data, when a client initiates GET requests to /api/get-message endpoint.

@app.route('/api/get-message', methods=['GET'])
def getMessage():
    data = {'message': 'Hello World!'}
    return jsonify(data)

Then we have our Machine Learning endpoint which predicts fitness and returns Json data, indicating you are fit or not. :) The code is explained using comments.

@app.route('/api/predict-fitness', methods = ['POST'])
def predict_fitness():
    if not request.json or not 'userHeight' in request.json:
        abort(400)

    # Data Cleaning, remvoing dot from userHeight value

    userHeight = request.json.get('userHeight', "")
    userHeight = int(str(userHeight).replace('.', ''))
    userWeight = int(request.json.get('userWeight', ""))

    if userHeight == 51: # Just a fix because python is removing trailing zeros while coverting to str or int
       userHeight = 510

    # Set up training data

    # Expected User Inputs to classifier

    # Example, For a person with 5 feet height, the expected weight is 43 to 53 kg
    # So for this we mention in features like : features = [[5, 43], [5, 99],....]] 
    # which means for 5 feet height, user can enter values from 43 to 99 
    # but the expected weight will be 4353 as mentioned in labels like: labels = [4353, 4353,.....]

    features = [[5, 43], [5, 99], [51, 45], [51, 99], [52, 48], [52, 99], [53, 50], [53, 99], 
                [5.4, 53], [54, 99], [55, 55], [55, 99], [56, 58], [56, 99], [57, 60], [57, 99], 
                [58, 63], [58, 99], [59, 65], [59, 99], [510, 67], [510, 99], [511, 70], [511, 99], 
                [6, 72], [6, 99], [6, 72], [6, 99]]

    # Expected output values based on user inputs or expected weight ranges based on person height

    labels = [4353, 4353, 4555, 4555, 4859, 4859, 5061, 5061, 5365, 5365 ,5558 ,5558, 5870,
            5870, 6074,6074 , 6376, 6376 ,6580 , 6580 ,6783 , 6783, 7085, 7085, 7289, 7289, 7289, 7289]

    # Train classifier

    classifier = tree.DecisionTreeClassifier()  # Decision tree classifier is used
    classifier = classifier.fit(features, labels)  # Find common patterns in training data

    # Make predictions using the trained model

    expectedWeight = classifier.predict([[userHeight,userWeight]])

    # Get first two numbers from expected Weight

    expectedWeight = int(expectedWeight)
    fromEpectedWeight = int(str(expectedWeight)[:2])

    # Get last two numbers from expected Weight

    toExpectedWeight = int(str(expectedWeight)[2:4])

    # Check if weight is in between the range of expected weight

    is_Weight_In_between = userWeight >= fromEpectedWeight and userWeight <= toExpectedWeight

    if is_Weight_In_between:
     message = f'Congratulations!, Your expected weight is in between {fromEpectedWeight} kg and {toExpectedWeight} kg.'
    else:
     message = f'Your expected weight should be in between {fromEpectedWeight} kg and {toExpectedWeight} kg.'


    fitData = {
        'isFit': is_Weight_In_between,
        'message': message
    }

    return jsonify( { 'fitInfo': fitData } ), 201

Finally we have below line to run the app.

   app.run(debug=True)

Deploying Python Flask REST API to Azure:

Next we are going to use a service in Azure known as Azure App Service to host our Python Flask App.

Next Click Create, and fill details in Basic tab, Enter Resource Group name or create new and give a name, enter your app name.

In Run Time Stack select Python 3.7 , Then Click Review and Create.

Just review your details and click finally Create.

Then it will show you that your Deployment is Progress, it may take few minutes.

Once your Deployment is done, click Go to resource which will take you to App Management blade.

Next go to your Github Account and create a Repository and upload the code using Github website or using git commands or even simple, just Fork my code repository from here

Note: As we are deploying to Azure so along with app.py file in our repo we need requirements.txt file which contains all required packages to be installed in Azure App Service for hosting as shown below:

Flask==1.1.2

Flask-Cors==3.0.10

scikit-learn==0.24.1

Setup CI/CD with Deployment Center and Github Actions:

Once you have your Repository and the code, then next we have to connect your Repository to Azure Deployment Center which provides CI/CD outofbox with providers like Github Actions, Bitbucket etc.

Select Github as source control and authorize using your Github credentials, then select you Repository as below:

In Run Time Stack select Python 3.7

Once you click Save, the deployment starts and a workflow file is created in your Github repo to start CI/CD, as you can see below in my Github repo, in GithHub Actions tab, the build is completed and the final deploy is in progress. Here the deploy Job is pushing your code changes automatically toAzure Web App as you make any changes to your code and push to your Github repo. Its that easy :)

Check your deployed REST API:

App Service Application URL: https://<Your app name>.azurewebsites.net/api/get-message

If you are getting Hello World! as response then your API is successfully deployed. :)

Test ML REST API using Post Man:

Open Postman desktop app and create a new request, give a name. next we select the Http Verb as POST and paste in our API URL.

In the Body we select Raw and Json and POST Json data to API. Paste Below Payload in Body:

{
    "userHeight":"6",
    "userWeight":"80"
}

Next click Send. Finally the API predicts the result and gives back the Json results as below:

{
    "fitInfo": {
        "isFit": true,
        "message": "Congratulations!, Your expected weight is in between 72 kg and 89 kg."
    }
}

Wow we are done! 😄. Congratulations!

My Initial struggle with Azure App Service Deployment:

I have deployed many .NET apps to Azure but this was first time I am deploying a Python App to Azure.

After following online tutorials to deploy Python Apps, the Azure Web App was down with 502 errors. After many hours of struggle Finally got a advice in Microsoft doc to check Debug console using Kudu Console or the SCM Dashboard for your app. The Link looks like below:

   https://<Your app name>.scm.azurewebsites.net/.

From the Log Stream I came to know that Azure is using docker and containers behind the scene and the container is failing to start.

Finding and Killing The Root Issue:

By Digging deeper, I came to know that some process is still running in port 8000 so the port is in use and thus container is not able to start.

So as advised in this SO post, lets kill the process running in port 8000, using the below Bash command.

  alias kill8000="fuser -k -n tcp 8000"

Finally deployed Python REST API to Azure. 😄

Github Link to Code:

shaijut / Python-ML-Fitness-API

A Fitness Machine Learning API build using Python Flask and deployed to Azure using GitHub Actions CI/CD

Python-ML Fitness API

A Fitness Machine Learning API build using Python Flask and deployed to Azure using GitHub Actions CI/CD
Check below Dev.to Post:

https://dev.to/shaijut/build-a-fitness-machine-learning-app-and-deploy-to-azure-24g4

View on GitHub

PS: You can even test this API in VS Code and PostMan in your local machine without deploying to Azure.

If you have any doubts let me know in comments. Hope you enjoyed. 😄.

Have a great day.

References:

https://dev.to/educationecosystem/a-simple-machine-learning-algorithm-to-differentiate-between-an-apple-and-an-orange-2bpk

https://dev.to/rtficial/building-your-first-restful-api-with-python-flask-1lmc

https://blog.miguelgrinberg.com/post/designing-a-restful-api-with-python-and-flask

https://programminghistorian.org/en/lessons/creating-apis-with-python-and-flask

https://stackoverflow.com/questions/25594893/how-to-enable-cors-in-flask

https://stackoverflow.com/questions/29332056/global-error-handler-for-any-exception

https://scikit-learn.org/stable/install.html

https://stackoverflow.com/questions/46008128/flask-webserver-not-reloading-on-code-change/66894350#66894350

https://stackoverflow.com/questions/37690195/azure-error-502-web-server-received-an-invalid-response-while-acting-as-a-gate

https://docs.microsoft.com/en-in/azure/app-service/troubleshoot-http-502-http-503

https://stackoverflow.com/questions/16756624/gunicorn-connection-in-use-0-0-0-0-5000

https://stackoverflow.com/questions/9168392/shell-script-to-kill-the-process-listening-on-port-3000

Microsoft announces FREE Azure certification renewals

Shaiju T — Wed, 27 Jan 2021 08:50:27 +0000

Good news for all Azure role-based and specialty Certified 😄 👏

Recently I came to know that Microsoft announced FREE Azure certification renewals for role-based and specialty certifications.

This means those who have completed their Azure certifications need not to pay again to renew their certification. Instead pass online assessment on Microsoft Learn and renew for FREE. Below is the announcement:

Stay current with free certification renewals

Starting in February 2021, you will be able to renew your role-based and specialty certifications by passing a free renewal assessment on Microsoft Learn. Instead of retaking an exam, the assessment can be completed online anytime within six months before your certification expires.`

Check the announcement at https://aka.ms/mpn/news/staycurrent

All the best. 👋 👍

What hosting do you use for Asp.Net Core app ?

Shaiju T — Wed, 04 Nov 2020 14:40:22 +0000

Godaddy windows shared hosting only supports Asp.Net Core 2.0.

I want to host a medium size Asp.Net Core 3.1 app in cheap shared hosting.

Have you come across any windows Hosting provider with good customer support and uptime ?

Any advice will be appreciated 😄.

How do you help Junior Developers or Freshers

Shaiju T — Tue, 20 Oct 2020 15:25:36 +0000

As a senior developer you might be busy in daily work or project deadline in your workplace.

Suppose in between a Fresher or Junior Developer comes to you and says can you help me to find solution for my X problem ?

What will be your reaction 😄 ?

Ask them to do some homework and then ask for help.
Reject the request and request to ask someone else.
Judge them and Ask them to learn the basics.
Complain about the new Joiner to Manager.
Kindly take some time to look at the X problem and explain them how to solve.

Do you have any other ways to help Fresher or Junior Developer 😄 ?

Hurry! 1 hour left at this price! FREE - Ultimate AWS Certified Developer Associate 2020 Masterclass

Shaiju T — Thu, 18 Jun 2020 15:17:44 +0000

Hi Folks, I just came to know about FREE - Ultimate AWS Course in Udemy.

Hurry! 1 hour left at this price!

Below is Udemy Deal link:

https://www.udemy.com/course/aws-certified-developer-associate-masterclass/?couponCode=A86BF8215E4C16678A93

Below is Original Post:

https://www.ozbargain.com.au/node/545365

What is UDEMY ?

Udemy is the leading global marketplace for teaching and learning, connecting millions of students to the skills they need to succeed.

What is AWS ?

Like Azure, Amazon Web Services (AWS) also provides cloud computing services. AWS is the world’s most comprehensive and broadly adopted cloud platform, offering over 175 fully featured services from data centers globally.

What is AWS Certified Developer - Associate ?

AWS Certified Developer - Associate is certification exam by AWS.

Abilities Validated by the Certification:

Demonstrate an understanding of core AWS services, uses, and basic AWS architecture best practices
Demonstrate proficiency in developing, deploying, and debugging cloud-based applications using AWS

Hope this helps.

😄 , 👍

Which Git Tool do you use in your work, Git GUI, Git Bash, Git CMD ?

Shaiju T — Mon, 15 Jun 2020 19:20:20 +0000

While working with Git there are many options like Git GUI, Git Bash and Git CMD.

I feel Git GUI like SourceTree and GitHub Desktop are more easy to use than Git Bash or Git CMD.

Why you would prefer Git Bash or Git CMD over Git GUI ?

Which Git Tool do you use in your work to increase your productivity ?

Let's discuss 😄

Monetizor - A Blazor WebAssembly Component for Web Monetization

Shaiju T — Sun, 14 Jun 2020 23:42:50 +0000

Hi Folks 👍 👏 👋, Below is my Grant For The Web Hackathon submission.

Web Monetization API is a win for all Bloggers or Content Creators. You get paid for writing. 😄

FYI, DEV is also now Web Monetized.

Let's start with some introduction on Web Monetization API ...

The Idea

Creators - Get paid from Users for the content they share on the Web. Example for Creator : dev.to

User - Pays to Creators and in return gets a better experience, for example by removing advertisements or by unlocking additional or premium content. Example for User : You a member of dev.to

Its a win win for both Creators and Users. Creators get paid. Users get better experience by unlocking premium content.

The Tech Solution

All this is made possible with a new Web API developed at W3C, the Web Monetization API.

This API is intended to be implemented natively in browsers but is already available today via a Web extension for popular desktop browsers and Puma Browser on mobile.

How this works ?

Creators - Sets up Web Monetization in their websites like blog, news etc.

User - Sets up a account with a Web Monetization provider.

What should Creators do ?

Creators To get benefits of Web Monetization, they should implement it in their websites as follows:

1. Set up a “wallet” for receiving payments. - A few options for wallets that can receive payments from Users.
2. Get your wallet’s “payment pointer URL”
3. Add a special meta tag to your page with your payment pointer URL like below:

<html>
<head>
<title>Web Monetized Site</title>
<meta name="monetization" content="$wallet.example.com/sloan">
</head>
</html>

What should Users do ?

Users To get benefits of Web Monetization, they should follow below steps:

1. Sets up a membership account in Coil, Coil is first Web Monetization provider for sending payments to Creators. (More provider will come soon as community grows.)

2. Install the Coil Chrome Extension to know if any Creators website is Web monetized. - (More browser options will come soon as community grows.)

3. Log in to Coil and enjoy web monetized content and features across the internet.

4. Visits a monetized Web page, their browser (if it supports Web Monetization) may send micropayments to creator of the web page.

Implemetation for GFW Hackathon

1. Sign up a account in uphold.com as wallet for receiving payments. Use the payment pointer in the web app. ( I skipped this step and used the payment pointer of dev.to). :)

2. Signed up a membership account in Coil and Apply free Promo Code.

3. Created a Blazor WebAssembly Web App for implementing Web Monetization API.

Note:

You can also Test your Web Monetization API code without Coil membership. I did this, Check testwebmonetization.com

Blazor WebAssembly Web App

Monetizor is a WebAssembly Component for a Web App made using BlazorFramework.

What is Blazor ?

Build client web apps with C#.

Blazor lets you build interactive web UIs using C# instead of JavaScript. Blazor apps are composed of reusable web UI components implemented using C#, HTML, and CSS. Both client and server code is written in C#, allowing you to share code and libraries.

Blazor Component Code :

Enables Web Monetization

<WebMonetization PaymentPointer="$ilp.uphold.com/24HhrUGG7ekn" />

Sample Component Code:

@inject IJSRuntime JSRuntime

@code {

protected override async Task OnInitializedAsync()
{
   await JSRuntime.InvokeVoidAsync("enableWebMonetization", PaymentPointer);
   await JSRuntime.InvokeVoidAsync("startWebMonetization");
}

   [Parameter]
   public string PaymentPointer { get; set; }

}

My Submission Category is Foundational Technology.

Link to Code:

shaijut / Web-Monetization-Blazor

A Blazor WebAssembly Component for Web Monetization

Web-Monetization-Blazor

A Blazor WebAssembly Component for Web Monetization

Blazor Component:

<WebMonetization PaymentPointer="your payment Pointer URL" />

How to run the Web App ?

1. Download .NET Core 3.1 SDK

2. Clone or Download the project.

3. Open Terminal and Move to Project Directory and type `dotnet run` and hit enter.

View on GitHub

Demo:

https://dev-to-uploads.s3.amazonaws.com/i/ayele5gvdtr8auc5tkl2.gif

Future Ideas:

Add Backend to Add Articles for bloggers.
Add more features and Dashboard to see received payments.

References:

1. https://dev.to/philnash/web-components-for-the-web-monetization-api-4ed9

2. https://dev.to/jasmin/web-monetization-in-vue-app-using-plugin-4092

3. https://getbootstrap.com/docs/4.5/examples/blog/

It was a great learning experience. Thanks to all.

Hope it helps. 😄.

How to Disable the pipeline in Azure Devops

Shaiju T — Fri, 29 May 2020 14:45:59 +0000

Hi Folks, I am following below Azure Devops Learning Module

https://docs.microsoft.com/en-us/learn/modules/create-a-build-pipeline/9-clean-up-environment

In docs it says: To disable the pipeline:

1. In Azure Pipelines, navigate to your pipeline.

2. Select Edit. From the menu in the upper corner, select Settings:

But I am not able to see these settings.

Can anyone help ?

Microsoft Build 2020 - For developers by developers - Join us for the 48-hour digital experience, at no cost, May 19-20

Shaiju T — Mon, 18 May 2020 18:59:22 +0000

Hi Folks 👍 👏 👋, I just came to know about Microsoft Build 2020. Just posting some information for your benefit, its taken from the Microsoft Build website.

👉 Session catalog is here.

Every developer is welcome.

❤️ For developers by developers

As developers come together to help the world solve new challenges, sharing knowledge and staying connected is more important than ever. Join your community to learn, connect, and code—to expand your skillset today, and innovate for tomorrow.

⭐ More than a livestream

For developers by developers, a non-stop, 48-hour interactive experience straight to your screen—but what if you can’t wait until May 19? Keep exploring leading up to the event and get a jumpstart on your Microsoft Build experience.

❤️ Cloud skills challenge

Earn a free Microsoft Certification exam and a chance to win prizes by completing a collection of online learning modules.

👍 Building something new

This is a different kind of Microsoft Build delivered in a new way. Presenting a digital event provides the developer community unique opportunities to come together for a truly global experience.

Its Free 👉 Register Now

Hope this helps.

DEV Community: Shaiju T

🚀 Pro In Flow - Boost Your Developer Productivity with Intelligent Agents and Powerful Features

Check Out the Project on GitHub

shaijut / ProInFLow

Pro In Flow - Developer Productivity App

Pro In Flow - Developer Productivity App

Features

Backend

Frontend

Key Features

Demo Video:

Some Screen Shots of app as Demo:

Tech Stack and Platform Overview

Key Features for Developer Productivity

1. Task Management

2. Pomodoro Timer

How It Works

Intelligent Agents: The Game-Changer for Developer Workflow

1. Requirements Planner Agent

2. Code Writing Agent

3. Code Review Agent

4. Unit Test Generation Agent

5. Bug Detection Agent

Conclusion: How These Features Save Time and Boost Focus

SecureCLI - A custom CLI using .NET Core and MongoDB Atlas

The Problem

Solution : Reduce the wait time and support tickets

Secure CLI Demo in GIF :)

Submission Category:

Automation Innovation :

The Mongo Collection

The API Behind the CLI

Link to Code

shaijut / SecureCLI

A CLI App created for MongoDb and Dev.to Hackathon :)

Prerequisites

Steps to Run the Secure Cli API

Steps to Run the Secure Cli App

Additional Resources / Info

Future Plans:

Enjoy the CLI :)

What are some Real World Projects to learn Angular and React

Build A Fitness Machine Learning API and Deploy to Azure using GitHub Actions CI/CD

shaijut / Python-ML-Fitness-API

A Fitness Machine Learning API build using Python Flask and deployed to Azure using GitHub Actions CI/CD

Python-ML Fitness API

Microsoft announces FREE Azure certification renewals

What hosting do you use for Asp.Net Core app ?

How do you help Junior Developers or Freshers

Hurry! 1 hour left at this price! FREE - Ultimate AWS Certified Developer Associate 2020 Masterclass

Which Git Tool do you use in your work, Git GUI, Git Bash, Git CMD ?

Monetizor - A Blazor WebAssembly Component for Web Monetization

shaijut / Web-Monetization-Blazor

A Blazor WebAssembly Component for Web Monetization

Web-Monetization-Blazor

Blazor Component:

How to run the Web App ?

1. Download .NET Core 3.1 SDK

2. Clone or Download the project.

3. Open Terminal and Move to Project Directory and type dotnet run and hit enter.

How to Disable the pipeline in Azure Devops

Microsoft Build 2020 - For developers by developers - Join us for the 48-hour digital experience, at no cost, May 19-20

3. Open Terminal and Move to Project Directory and type `dotnet run` and hit enter.