DEV Community: Kanak

Step-by-Step Guide to Applying for GitHub Sponsor

Kanak — Mon, 27 Feb 2023 15:53:33 +0000

Are you one of those who love open source and equally love getting paid? If yes, then you are at the right place!! 🎉

Recently, GitHub introduced a new feature called "GitHub Sponsor," which allows developers to receive financial support from their community of users, thus enabling them to continue working on their open source projects. In this article, we will discuss what GitHub Sponsor is, why one should apply for it, and how to apply for it.

Table of content :

What is GitHub Sponsor?🤔
Why should you apply for GitHub Sponsor?🤗
How to apply for GitHub Sponsor?😳
- Step 1 :Create your GitHub Sponsors profile
- Step 2 :Submit your contact information and bank information
- Step 3 :Enable two-factor authentication
- Step 4 :Request for approval and get paid!
Wrapping up

Let's get started! 🥳

What is GitHub Sponsor?🤔

It is a feature that enables developers to receive financial support from their community of users. It's a way for developers to monetize their open source projects, allowing them to continue working on them while being compensated for their efforts. The support comes in the form of recurring monthly payments, which can be as low as $1 or as high as the donor wants to give.

Why should you apply for GitHub Sponsor?🤗

GitHub Sponsor provides financial assistance to you in order to keep your projects active and up to date.
Recurring monthly payments help provide you with a stable income.
Sponsorship strengthens your relationship with your community.
Feeling valued and appreciated will motivate you to continue contributing to the project.

Since we know the What and Why, let's see How!

How to apply for GitHub Sponsor? 😳

Before applying, you need to create a GitHub account if you do not already have one.

Once you have created an account, you need to navigate to the GitHub Sponsor page, which can be found at github.com/sponsors.

Go to Github Sponsor Page
Click on the "Get Sponsored" button.
Then click on "Join the waitlist" for your desired account.
Select your region.
Choose your payment method.
Click on the "Join waitlist" button.
After that, you will be redirected to a screen saying, "Thank you for applying to GitHub Sponsors!"

Now, you need to wait for approval. GitHub will review your application and let you know if you are accepted into the program. This may take a few days or weeks, depending on the volume of applications they receive.

After that you will receive a mail with a subject of

"You're in! Welcome to GitHub Sponsors 💖".

Now you just have to configure 4 small steps.

Step 1: Create your GitHub Sponsors profile
Step 2: Submit your contact information and bank information.
Step 3: Enable two-factor authentication.
Step 3: Request for approval and get paid! 💰

Step 1 :

Go to your GitHub profile, and then click on "Your sponsors."

Then you will see a list of eligible accounts; click on "Dashboard."
Then set up your GitHub sponsor profile, add your bio and featured work ( which includes repositories),and

Remember to provide clear and concise information about your project, its goals, and how contributions will benefit the community.

After filling in the details, click on "Update profile."

Step 2 :

Create your Stripe Connect account by following the Stripe instructions.
Add your PAN card or required documentation.
Submit your tax information; if you are a non-US resident, fill out Form W-8BEN (https://www.irs.gov/pub/irs-pdf/iw8ben.pdf/).

Step 3 :

Add 2FA to your account by downloading any authenticator application (like Microsoft Authenticator) and scanning the QR code.
Then verify the code by entering it and your 2FA is done!

Step 4 :

In your dashboard, you must see a button that says "Request approval" as the last step.

Click on the button and relaxxxx now!🤭

Your profile has been submitted. Github will review your application, and it might take some days. Your profile will be live on Github Sponsor as soon as you are approved.

The mail will look like this,

By following the steps you can increase your chances of making money while doing open-source.

Wrapping up

I hope you found this article helpful.

If you liked this post, follow me for more of these 🙂

Also, share your Github Sponsor's profile! 👇🏻

Trapping Rainwater 🌊

Kanak — Sat, 03 Sep 2022 07:44:39 +0000

Today's Question:

It's a rainy day, and you are given n bars, each of 1 unit in width. How will you calculate the amount of water trapped between them? 🌧️

First try to solve the problem here: https://leetcode.com/problems/trapping-rain-water/

Stuck? 🤔

No worries, I've got you covered!!

Let's think on it💭

We need to figure out how many water units will be trapped after it rains...How can we do this?

Total water means we can calculate the individual water stored by each bar and sum it up. Sounds right?

Yes, so to calculate the individual water stored, we must know from which bar to which bar the water is being stored ... Can we find the maximum bar on both sides of the element?

YES! leftMax & rightMax

But water won't be trapped up to the height of the larger one among the leftMax & rightMax.

So, we need to get the minimum (leftMax, rightMax).

And since we are trying to find the amount of water trapped, we need to know the remaining height for each bar for which the water will be trapped.

Therefore, we will subtract the height of the bar from minimum (leftMax, rightMax) for each bar and then sum it up to get the total water.

Algorithm:

Take maximum of left and side parts of a given bar.
Get the water for each bar by min(leftMax, rightMax) - bar[i].
Sum up the water.

int trap(vector<int>& height) {

        int n = height.size(); 
        int waterSum = 0;
        for(int i=0; i<n; i++){

            int leftMax = 0, rightMax = 0;
            for(int j=i; j>=0; j--){
                leftMax = max(leftMax,height[j]);
            }

            for(int j=i; j<n; j++){
                rightMax = max(rightMax,height[j]);
            }

            int h = min(leftMax,rightMax); 
            waterSum+=h-height[i];
        }

        return waterSum;
    }

Complexity: Time: O(N*N) Space: O(1)

Time complexity is increasing in this solution. To reduce this, we can store the leftMax and rightMax in separate arrays as follows.

int trap(vector<int>& height) {

        int n = height.size();
        vector<int> water;

        vector<int> l(n);
        vector<int> r(n);
        l[0]=height[0];
        r[n-1]=height[n-1];

        for(int i=1; i<n; i++){
            l[i]=max(l[i-1],height[i]);
        }

        for(int i=n-2; i>=0; i--){
            r[i]=max(r[i+1],height[i]);
        }

        for(int i=0; i<n; i++){
            int a = min(l[i],r[i]);
            water.push_back(a-height[i]);
        }

        int x = accumulate(water.begin(),water.end(),0);
        return x;
    }

Complexity: Time: O(N) Space: O(N)

To further optimize this, we can make the space complexity O(1) from O(N).

How will we do this?

Well, we can use Two-Pointer Approach. In this, left pointer will be at the start of the array and right pointer will be at the end.

Whenever the left element is small or equal to the right one, we have two options:

Check if it is the maximum on the left side. If so, update the leftMax. Else,
Because there will always be a bar on the right side that is greater than height [left], we can sum it up in ans by subtracting height [left].

And if the right element is smaller than the left one, we can do the same two options but for the right side.

 int trap(vector<int>& height) {

        int n = height.size();
        int leftMax = 0, rightMax = 0, left=0, right=n-1, ans=0;

        while(left<=right){

            if(height[left]<=height[right]){
                if(leftMax<= height[left]){
                    leftMax= height[left];
                } else{
                    ans +=leftMax-height[left];
                }
                left++;
            } 
            else{
                if(height[right]>=rightMax){
                    rightMax = height[right];
                } else{
                    ans +=rightMax-height[right];
                }
                 right--;
            }
        }
        return ans;
    }

Complexity: Time: O(N) Space: O(1)

That's all for this one! Thankyou for reading till the end. 😃

Synopsis:

For brute force, find the maximum of both sides and sum it for each bar.

A better approach would be to store the left and right maximums in separate arrays.

Two-pointer is the best approach.

✒ New to my blog?

Hey! I am Kanak.

I am a MERN stack developer and an open-source enthusiast. I write on data structures and algorithms and develop cheat-sheets on DSA topics. I have also documented my DSA journey on Twitter for the last 2 months.

Follow me for more such content. 🎉

Adding Voice Assistant to React Apps with Alan AI

Kanak — Fri, 27 May 2022 10:18:52 +0000

Have you used Cortana? Is Siri your best friend? Is it your go-to assistant whenever you face an obstacle?💭

If yes, then you would know how the development of voice assistants in our lives has made it easier since it requires minimal effort. Forecasts suggest that by 2024, the number of digital voice assistants will reach 8.4 billion units, a number higher than the world’s population, and 31% of smartphone users worldwide use voice search at least once a week.

A voice assistant is a digital assistant that uses voice recognition, language processing algorithms, and voice synthesis to listen to specific voice commands and return relevant information or perform specific functions as requested by the user.

Voice assistants are integrated into many of the devices we use daily, such as cell phones, computers, and smart speakers.

Would you like to have a voice assistant in your apps too? 💬

You might be thinking that to add an Intelligent Voice Interface to your app, you'll need to delve deep into machine learning and natural language processing, which will take a long time.

Here, Alan AI comes to your rescue. Alan AI is a B2B Voice AI platform for developers to deploy and manage voice interfaces for enterprise apps. It provides an AI-based backend as a service tool to add conversational AI to your apps.

It also recognizes user context and learns about the UI of your app to develop workflows and gets trained on your app's vocabulary.

With its developer-friendly console and documentation, it is easier for anyone to integrate it into their app.

So let's integrate Alan AI voice assistant into a React App.🎉

What we will be building?🤔

We will be building a QuoteBook 📚 React app with Alan AI's voice assistant integration. This QuoteBook project will simply have quotes and we will customize the voice assistant to tell us the quotes of a specific speaker. It will look something like this.

Project setup

Create a react app using npx create-react-app command.

npx create-react-app quoteBook
cd quoteBook

Run the react app using npm start.

npm start

Create components and the file structure should be like this ,

Now install Alan AI Web SDK to the app, we will be using the npm package to install the dependency.

 npm install @alan-ai/alan-sdk-web

Import alanBtn to your React component

import alanBtn from "@alan-ai/alan-sdk-web";

Now let’s add code in the components and App.jsx

App.jsx

import React, { useEffect } from "react";
import Header from "./Header";
import Footer from "./Footer";
import Quote from "./Quote";
import { Quotes } from "./Quotes";
import alanBtn from "@alan-ai/alan-sdk-web";

function App() {

  return (
    <div>
      <Header />
      {Quotes.map((quoteItem, index) => {
        return (
          <Quote
            key={index}
            id={index}
            quote={quoteItem.quote}
            author={quoteItem.author}
          />
        );
      })}
      <Footer />
    </div>
  );
}

export default App;

Header.jsx

import React from "react";

function Header() {
  return (
    <header>
      <h1>QuoteBook</h1>
    </header>
  );
}

export default Header;

Footer.jsx

import React from "react";

function Footer() {
  const year = new Date().getFullYear();
  return (
    <footer>
      <p>Copyright ⓒ {year}</p>
    </footer>
  );
}

export default Footer;

Quote.jsx

import React from "react";

function Quote(props) {

  return (
    <div className="quote">
      <div className="box">
        <h1>{props.quote}</h1>
        <p>{props.author}</p>
      </div>
    </div>
  );
}

export default Quote;

Now let's add some content and styles

Quotes.js

export const Quotes = [
    {
        id: 1,
        quote: "“The purpose of our lives is to be happy.”",
        author: "— Dalai Lama"
    },
    {
        id: 2,
        quote: "“Life is what happens when you’re busy making other plans.” ",
        author: "— John Lennon"
    },
    {
        id: 3,
        quote: "“Get busy living or get busy dying.” ",
        author: "— Stephen King"
    },
    {
        id: 4,
        quote: "“Many of life’s failures are people who did not realize how close they were to success when they gave up.”",
        author: "– Thomas A. Edison"
    },
    {
        id: 5,
        quote: "“If life were predictable it would cease to be life, and be without flavor.” ",
        author: "– Eleanor Roosevelt"
    },
    {
        id: 6,
        quote: "“The whole secret of a successful life is to find out what is one’s destiny to do, and then do it.” ",
        author: "– Henry Ford"
    },
    {
        id: 7,
        quote: " “In order to write about life first you must live it.” ",
        author: "– Ernest Hemingway"
    },
    {
        id: 8,
        quote: "“The big lesson in life, baby, is never be scared of anyone or anything.”",
        author: "– Frank Sinatra"
    },
    {
        id: 9,
        quote: " “Life is a succession of lessons which must be lived to be understood.”",
        author: " — Helen Keller"
    },
    {
        id: 10,
        quote: "“Be yourself; everyone else is already taken.”",
        author: "― Oscar Wilde"
    },

];

Styles.css

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  /* overflow-y: hidden; */
}
html {
  font-family: "Montserrat", sans-serif;
}
body {
  background: #BDE6F1;
  padding: 0 16px;
  background-image: url("https://www.transparenttextures.com/patterns/always-grey.png");;
}

header {
  background-color: #0AA1DD;
  margin: auto -16px;
  padding: 16px 32px;
  text-align: center;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3);
}

header h1 {
  color: #fff;
  font-family: "McLaren", cursive;
  font-weight: 200;
}

footer {
  position: absolute;
  text-align: center;
  bottom: 0;
  width: 100%;
  height: 2.5rem;
}

footer p {
  color: #ccc;
}
.quote {
  background: #fff;
  border-radius: 7px;
  box-shadow: 0 2px 5px #ccc;
  padding: 30px 25px;
  width: 240px;
  height: 240px;
  margin: 20px;
  float: left;
}
.quote div{
  margin: auto;
}
.quote h1 {
  text-align: center;
  font-size: 1.1em;
  margin-bottom: 6px;
}
.quote p {
  text-align: center;
  font-size: 1em;
  margin-bottom: 10px;
  white-space: pre-wrap;
  word-wrap: break-word;
}

Add alanBtn to App.js via useEffect.

useEffect(() => {
  alanBtn({
    key: 'YOUR_KEY_FROM_ALAN_STUDIO_HERE',
    onCommand: (commandData) => {
      if (commandData.command === 'go:back') {
        // Call the client code that will react to the received command
      }
    }
  });
}, []);

Generate key from Alan Studio

To integrate Alan AI voice assistant into your app, a key will be required. To generate this key head over to Alan Studio and Sign up. You will be redirected to a page that will look like this:

Click on Create voice assistant, and create an empty project by giving it a name, for this project name it QuoteBook:

There is an Integrations tab in the menu bar on top, click on it. You will find your Alan SDK Key, copy it and paste in your code above the comment.

Till now you have integrated your project with Alan AI voice assistant. Now, let’s add some scripts to customize the voice assistant according to the app.

intent('What does this app do?', 'What can I do here?', 
      reply('This app is your quote book, it keeps a collection of your favourite quotes'));

const CATEGORIES = ['dalai lama','john lennon','stephen king','thomas edison','eleanor roosevelt','henry ford','ernest hemingway','frank sinatra','helen keller','oscar wilde'];
const CATEGORIES_INTENT = `${CATEGORIES.map((category) => `${category}~${category}`).join('|')}`;
intent(`(go to|show|open) (the|) $(C~ ${CATEGORIES_INTENT})`,(p)=>{
        p.play({command:'goto',category:p.C.value.toLowerCase()})
})

intent(`(show|what is|tell me about|what's|what are|what're|read) (the|) $(C~ ${CATEGORIES_INTENT})`,(p)=>{
    if(p.C.value.toLowerCase()=='dalai lama'){
        p.play('The purpose of our lives is to be happy.')
    } else if(p.C.value.toLowerCase()=='john lennon'){
        p.play('Life is what happens when you're busy making other plans.')
    }else if(p.C.value.toLowerCase()=='stephen king'){
        p.play('Get busy living or get busy dying.')
    }else if(p.C.value.toLowerCase()=='thomas edison'){
        p.play('Many of life's failures are people who did not realize how close they were to success when they gave up.')
    }else if(p.C.value.toLowerCase()=='eleanor roosevelt'){
        p.play('If life were predictable it would cease to be life, and be without flavor.')
    }else if(p.C.value.toLowerCase()=='henry ford'){
        p.play('The whole secret of a successful life is to find out what is one's destiny to do, and then do it.')
    }else if(p.C.value.toLowerCase()=='ernest hemingway'){
        p.play('In order to write about life first you must live it.')
    }else if(p.C.value.toLowerCase()=='frank sinatra'){
        p.play('The big lesson in life, baby, is never be scared of anyone or anything.')
    }else if(p.C.value.toLowerCase()=='helen keller'){
        p.play('Life is a succession of lessons which must be lived to be understood.')
    }else if(p.C.value.toLowerCase()=='oscar wilde'){
        p.play('Be yourself; everyone else is already taken.')
    }
})

intent('(go|) back', (p) => {
    p.play('Sure, nice talking to you!');
})

In this script, we are giving the assistant three custom features:

Answer questions like what does this app do?
Tell you the quote by the author’s name
If you say bye, it says nice talking to you!

So this is how you can add a simple voice assistant to your React app.

After this you can test the assistant and further customize it by adding more features to it according to your liking.

Conclusion

Voice assistants can be a great tool to integrate and play around with your apps. It was informative and useful building this QuoteBook React App. Feel free to refer to the entire source code here and explore Alan docs to understand and further develop your application.
Have a great day!🎇