DEV Community: Kpeale Legbara

How to make your first open source contribution

Kpeale Legbara — Fri, 14 Nov 2025 11:25:14 +0000

I Just Made My First Open Source Contribution — And Honestly, I Don’t Know How to Feel 😂

To be sincere, I actually feel very happy, and I’ve realized it’s not as complicated as I thought.

Contributing to open source can feel overwhelming. Yesterday, I had tons of tabs open on my browser because I was trying to understand how to contribute, but I was still confused and frustrated. I even watched several YouTube videos, yet nothing clicked. I eventually closed all my tabs and decided to try again this morning… and guess what? I made my first open source contribution.

I’m writing this article so that anyone who feels lost like I did can learn from my mistakes and finally make their first open source contribution too.

How to Make Your First Open Source Contribution

I know there are websites that help you find projects to contribute to, but honestly, I think you should avoid relying on them at first. Most of these platforms recommend very big projects with strict contribution rules, or inactive projects that haven’t been updated in months (or even years). Neither of those is what you want for your first contribution.

Instead, go to your GitHub search bar and type this query:

is: issue is: open "good first issue" language: JavaScript stars:<200

is:public stars:<150 "help wanted" language:TypeScript

This query tells GitHub to show repositories that:

Have open issues
Have a “good first issue” label
Use JavaScript (feel free to change the language, I primarily write JavaScript, which is why I used JavaScript there).
Have less than 200 stars (because smaller repositories are usually easier to contribute to)

The search results will look something like this:

Click on the Issues tab to see more projects, then check the repositories one by one and pick the one that aligns with your values and skills — and one you can actually solve.

What to Check Before Contributing

Before you start working on any repository, make sure it checks these boxes:

A license file: This confirms the project is open to contributions.
A CONTRIBUTING.md or guidelines file: Most maintainers outline how they want contributions to be made.
Active maintainers: Check the issues tab to see if maintainers reply quickly, give feedback, or appreciate contributors. You don’t want to contribute to a repo where nobody responds.

If the repository ticks all the boxes, go through the issues and find one that is unassigned or not actively being worked on. Leave a comment showing interest.

For my first open source contribution, I contributed to a Python project by updating their README file. I left a comment, and the maintainer replied almost immediately.

Forking the Project

Once you’re ready, fork the repository so it becomes your personal copy.

Then open Git Bash or Command Prompt on your machine and clone your fork:

git clone https://github.com/YOUR-USERNAME/REPO-NAME.git

Next, create a new branch — this is good practice:

git checkout -b update-readme

Open the folder in your IDE and make the changes you want. After you’re done, commit your changes:

git add README.md
git commit -m "Improve README documentation"

(Change the commit message to match what you actually did.)

Then push the changes to your fork:

git push origin update-readme

Making the Pull Request

Congratulations! You just made your first open source contribution. 🎉

Now it’s time to submit your pull request.

Go back to the original repository on GitHub (the one you forked). You’ll see a button saying “Compare & pull request.” Click it, write a short message explaining what you improved, and submit your PR.

That’s it.

You’re officially an open source contributor. 🚀

Understanding APIs: Basics, Types, and Architectures Explained Simply

Kpeale Legbara — Fri, 03 Oct 2025 19:46:57 +0000

Human beings are not the only ones who have communication. Do you know that websites also talk to each other? Yes, they communicate with each other through an API.

What is API?

API is an acronym that stands for Application Programming Interface. API is a set of rules that allow software applications to communicate to each other. APIs are used in our everyday life even without us knowing. Most of our applications on our phones utilize APIs, from the smallest app to the largest app.

Simple Analogy Of How Websites Talk:

When you walk into a restaurant, whether a fine dining or a casual dining . You are greeted by the waiter and handed the menu. You never get to speak to the chef yourself. All communications are handled by the chef till you are served your food.

In the same way, when two applications are talking to themselves they do it through a third person, which is the API.
Every single Application we use, makes use of API. From the weather forecast application to the movies applications on your phone. They are communicating to a server through the API which makes information available to be used on these platforms.

What API allows us to do?

APIs allow us to do so many things without even realizing it. When you open your weather app and it shows you the current temperature in your location, that’s an API working behind the scenes. When you book a ride with Bolt or order food with Jumia Food, APIs are involved in fetching real-time prices, delivery times, and more. That is when your data is turned off, you cannot use the services of these applications.

As frontend developers, APIs allow us to request data from a backend server and display it beautifully on the frontend. As technical writers, understanding what APIs can do helps us explain how different parts of a system talk to each other, and how users can integrate or use those features.

How Do APIs Work?

Let’s break it down with a real-world perspective.

When you open your favorite e-commerce website and search for “wireless headphones,” here's what happens behind the scenes:

Your search query is sent to the server via an API.
The API receives your request, processes it, and sends it to the right place in the backend system.
The backend retrieves a list of products, wraps that data, and sends it back via the API.
Your browser then receives that data and displays the results on the screen.

So essentially, the API acts as a messenger between your frontend and backend.

Common API Request Methods

GET – to retrieve data (e.g., get a list of blog posts)
POST – to send new data (e.g., create a new user)
PUT – to update existing data
DELETE – to remove data

These methods follow the HTTP protocol, which is the same language your browser uses to access web pages.

Types of APIs

APIs come in different flavors depending on how they’re used and who has access to them:

A. Open/Public APIs
These are available to anyone. Companies like Twitter, GitHub, and Spotify offer public APIs so developers can build apps that interact with their platforms.

Example: You can build an app that fetches tweets based on a hashtag using the Twitter API.

B. Private APIs
Used internally within a company. These APIs are not exposed to the public and are used to connect different internal services.

Example: A bank might use private APIs to connect its mobile app to the database that holds user account info.

C. Partner APIs
These are shared with specific business partners. They're not public, but they're not completely private either — they're accessible to selected users who have been granted permission.

Example: An airline might offer a partner API to travel agencies to book tickets directly.

D. Composite APIs
These combine multiple APIs into one call. Instead of sending multiple requests, a composite API allows you to bundle them.

Example: A dashboard that shows user details, recent orders, and notifications might use a composite API to get all that info in one go.

API Architectures

Different APIs are designed using different architectures. The most common ones include:

A. REST (Representational State Transfer)
REST is the most popular architecture. It’s simple, stateless, and works well with HTTP methods like GET and POST. It uses URLs to identify resources. Data is usually exchanged in JSON format. It’s stateless, meaning each request stands alone.

Example: GET https://api.example.com/users/123 fetches data about user 123.

B. SOAP (Simple Object Access Protocol)
SOAP is older and more strict. It uses XML instead of JSON and has strict messaging rules. More secure than REST in some cases. Still used in industries like banking and government. Think of SOAP as the “corporate” version of REST — formal and detailed.

C. GraphQL
GraphQL is newer and more flexible. Instead of getting too much or too little data, you can request exactly what you need. Created by Facebook. It reduces over-fetching or under-fetching of data. It uses a single endpoint for all queries

Example: You can ask for a user’s name and email in one query — and that’s all you’ll get back.

Tools That Help You Work with APIs

Learning about APIs is one thing, but knowing how to work with them is where the fun begins. Here are some tools you'll come across often:

Postman: This is your best friend for testing and exploring APIs. You can send different kinds of requests, view responses, and even write simple tests.
Swagger / OpenAPI: These help developers document APIs properly. They create readable, interactive docs based on your API’s code.
Curl: A command-line tool for sending HTTP requests. Useful for quick testing if you're comfortable with the terminal.

Conclusion

APIs are the invisible glue holding the internet together. They make our apps smarter, our websites more dynamic, and our digital experiences smoother. Whether you're a developer building interfaces or a technical writer documenting how things work, understanding APIs is no longer optional — it’s essential.

So the next time you open your favorite app and it “magically” shows you new data, just know: it’s not magic. It’s an API, doing its job in the background.

How to Add Authentication to Your Next.js App with Auth.js

Kpeale Legbara — Sat, 19 Jul 2025 08:44:04 +0000

Have you ever wanted to add authentication to your Next.js app but didn’t know where to start?

In this article, I’ll walk you through how to add authentication to your Next.js application using Auth.js, formerly known as NextAuth.

By the end of this tutorial, you’ll be able to:

Understand Authentication using Auth.js in Next.js
Sign in with your Google account

Authentication is very common in almost all the applications we use on our mobile phones or laptops. Most users rarely create a new profile in any app when they can sign-up using their Google account or Github account. In this article, we will be looking at how to grant authentication to a user using Auth.js.

What is Auth.js?

Auth.js is a complete open-source authentication solution for JavaScript applications. It's flexible and supports multiple providers, including Google, GitHub, Discord, and more..

Why use Auth.js in a Next.js application?

Easy and simple to use: One main reason developers go for Auth.js is how simple the process of authentication is with Auth.js.
Secure Session Management: Auth.js handles secure session management, including the use of encrypted cookies or JSON Web Tokens (JWTs) to maintain user state across requests.
Customization and Flexibility: Auth.js allows for significant customization this means developers can tailor login pages and sign-out processes to match their application's design and requirements.
Built-in Security Features: Auth.js incorporates security best practices, such as handling sensitive data securely.
Ease of Integration with Next.js: Auth.js offers seamless compatibility with Next.js features like the App Router and Pages Router.
Open-Source and Community Support:Auth.js is an open-source project. It has a large and active community, providing extensive documentation, tutorials, and support for developers.

Getting Started

To follow along, you should have a basic understanding of React and Next.js. You should also have a Next.js project set up. If you don’t, you can quickly create one using:

npx create-next-app@latest

Follow the prompts to install Next.js in your project.For this tutorial, I’ll be using the App Router (introduced in Next.js 13+). Auth.js supports both the App Router and Pages Router, but in this guide, we’ll use the App Router.

Step 1: Installing and Setting Up Auth.js

After installing Next.js in your project. The next thing is to install Auth.js. Run this command to install the Auth.js dependencies:

npm install next-auth@beta

Step 2: Set Up Environment

The only environment variable that is mandatory is the AUTH_SECRET. This is a random value used by the library to encrypt tokens and email verification hashes. You can generate one by running the command below in your terminal:

npx auth secret

After running the command, a file with the name env.local will be created for you. Inside the env.local, you will see the AUTH_secret.

Step 3: Set Up the Auth Route

A. Begin by creating a new auth.ts file at your project's root with the following content.

import NextAuth from "next-auth"
export const { handlers, signIn, signOut, auth } = NextAuth({
  providers: [],
})

B. The next step is to add a Route Handler. We'll do this by creating an api folder inside the app folder. Then, create another folder named auth inside the api folder. Within the auth folder, create a folder called [...nextauth]. Inside [...nextauth], add a file named route.ts. Insert the following code into route.ts:

import { handlers } from "@/auth"

export const { GET, POST } = handlers

C. The final step in this setup is to add an optional Middleware to keep the session alive, which will refresh the session expiry each time it is called. To do this, create a middleware.ts file at the root and include the code below:

export { auth as middleware } from "@/auth"

We have finished the basic authentication setup! Now, we will go to setup the authentication methods.

Setup Authentication Methods

Auth.js comes with over 80 providers preconfigured. You can choose any provider in their documentation here to get a walk-through, but for the purpose of this article, we will use Google.

Register OAuth App in Google's dashboard: First, we will set up an OAuth application on the Google Developers Dashboard. Click on this link to take you to Google Developers Dashboard.
Create an account if you do not have a Google account. if you have one, then sign-in.
Click on Create a new project. Fill in a project name and click Create. Go to library on the left menu and search for "Google + API. If you cannot find it then click on this link, it will direct you to where you will create the OAuth for Google. On the left menu, click on "consent screen" . You will be asked some basic information, fill it.
Now the consent screen is up, click on credentials so we can add the credentials created to our Next.js app. Click on create credentials and also click on create OAUTH client id. The fill the following questions with the answers below:

Application type: Web application
Name: (anything like NextAuth App)
Authorized redirect URI: http://localhost:3000/api/auth/callback/google

Click on Create. A pop up will come up showing you the client id and client secrete. Copy the details and add them to env.local.

GOOGLE_CLIENT_ID=your-client-id
GOOGLE_CLIENT_SECRET=your-client-secret
NEXTAUTH_SECRET=your-random-secret

Setup Provider

A. Let’s enable Google as a sign in option in our Auth.js configuration. You’ll have to import the Google provider from the package and pass it to the providers array we setup earlier in the Auth.js config file. Copy the code below:


import NextAuth from 'next-auth';
import Google from 'next-auth/providers/google';

export const { handlers, signIn, signOut, auth } = NextAuth({
  providers: [
    Google({
      clientId: process.env.GOOGLE_CLIENT_ID!,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET!,
    }),
  ],
});

B. Add the handlers which NextAuth returns to your api/auth/[...nextauth]/route.ts file so that Auth.js can run on any incoming request. Copy the code below:


import { handlers } from "@/auth"
export const { GET, POST } = handlers

Add Signin Button

Next, we will add a sign-in button somewhere in our application so it will trigger Auth.js sign- in when clicked. You can now use the Sign-in from auth.js in your button like the example below:


'use client';
import { NavLinks } from '@/constant/constant';
import Link from 'next/link';
import { HiBars3BottomRight } from 'react-icons/hi2';
import { LuNetwork } from 'react-icons/lu';
import { signIn } from 'next-auth/react'

const Nav = () => {

  return (
    <div
      className={transition-all ${
        navBg ? 'bg-white dark:bg-gray-900 shadow-md' : 'fixed'
      } duration-200 h-[12vh] z-[10000]  fixed w-full}
    >
      <div className='flex items-center h-full justify-between w-[92%] mx-auto'>
        <div className='flex items-center sm:space-x-20'>
          {/* logo */}
          <div className='flex items-center space-x-2'>
            <div className='w-10 h-10 bg-cyan-800 dark:bg-white  rounded-full flex items-center justify-center flex-col'>
              <LuNetwork className='w-5 h-5 text-white dark:text-black' />
            </div>
            <h1 className='text-xl hidden sm:block md:text-2xl text-cyan-800 dark:text-white font-bold'>
              Devhire
            </h1>
          </div>

          <div className='hidden lg:flex items-center space-x-10'>
            {NavLinks.map((link) => (
              <Link
                href={link.url}
                key={link.id}
                className='text-base hover:text-cyan-700 dark:hover:text-cyan-200 font-medium transition-all duration-200'
              >
                <p>{link.label}</p>
              </Link>
            ))}
          </div>
        </div>
        <div className='flex items-center space-x-4'>

            <button
              className='px-8 py-2.5 text-xs sm:text-sm rounded-lg cursor-pointer bg-gray-100 hover:bg-gray-300 transition-all duration-300  dark:bg:gray-700 dark:hover:bg-gray-900 '
              type='submit'
              onClick={() => signIn('google')}
            >
              Login / Register
            </button>
            <button className='px-8 py-2.5 text-xs sm:text-sm hidden sm:block rounded-lg cursor-pointer bg-cyan-700 hover:bg-cyan-900 transition-all duration-300'>
              Job Post
            </button>

          <HiBars3BottomRight
            className='w-8 h-8 cursor-pointer text-black lg:hidden dark:text-white'

          />
        </div>
      </div>
    </div>
  );
};

export default Nav;

In the example above, I created a nav component and added the sign-in from Auth.js.

Conclusion

Auth.js is very easy to use and I am sure you can say the same after reading this article and following the steps outlined in the article. If you have any questions, please ask them in the comments section below. You should also check out their documentation, by clicking on this link.

REACTJS VS VUEJS

Kpeale Legbara — Thu, 27 Jun 2024 20:46:17 +0000

After I started learning Javascript, React framework was the next thing I knew and I have not looked back since. React framework to me was everything, I literally loved everything about it until I started using VUE JS. In this article, I am going to be talking about the differences between React and Vue JS. Although, there is something I want you to have in mind that there is no better framework, yes you heard me right. These two frameworks were built to solve problems so comparing them will defeat the purpose.

The first major difference between React JS and VUE JS is that React JS is a javascript Open Source library and was developed by Facebook. At the same time, VUE JS is a javascript framework and was developed by Evan You.

Before I continue talking about the differences between React JS and VUE JS. I just want to let you know I currently started an internship under HOTELS.NG and it is commonly known as HNG. I am excited and curious for all the cool projects I will build in the next couple of weeks, please wish me luck in the comment section. If you want to learn more about this internship, click on any of the links below:
HNG internship and HNG Hire

Other Differences between REACT JS AND VUE JS

1. Performance

Performance between VUE and React websites are quite minimal this because they both use virtual DOM. However, it is important to note that Vue and React carry out the same functionality within almost the same timeframe, although there is a few milliseconds difference.

2. Flexibility:

React has more flexibility than VUE JS. In terms that it offers the basic functionality and allows developers to be able to use other plugins or libraries if they want more features to handle routing, server-side rendering, mobile app development etc. In the case of Vue, unlike React it gives more tool sets without the need to use additional plugins to libraries.

3. Scalability:

React has an upper hand due to its scalability and lightweight nature this can be pointed back to the use of JavaScript (JSX) exclusively and allows for the reuse of existing components.This does not mean VUE JS is not capable of scaling, it is just that it is typically utilized for smaller applications. Because of its flexible architecture, it often necessitates the use of external Vue.js libraries to address certain framework limitations

4. Mobile Development:

For mobile development, React offers React Native to build apps for Android and IOS. While VUE JS offers Native Script to build apps for Android and IOS. Applications developed by NativeScripts and React Native can literally do the same thing. The only difference is that the applications built with NativeScripts works faster,better and with little load time.

5. Community and Popularity:

It is quite obvious that React has more community support and popularity. I feel like React is the most insulted Javascript library yet it is always the top in the charts.Because of React community support, it has made the library very popular. Although, I feel VUE JS community is gradually growing and in the next 3-5 years there will be a huge difference in the chart.

What Should You Choose Between Vue JS vs React?

In conclusion, both React and Vue are excellent tools for building modern web applications. Although, React and Vue for more effectiveness should be used based on the project requirements factoring the size of the project and the useage, team's expertise, and personal preferences. In simple terms,if you need to work on a smaller project without needing multiple plugins and library then use VUE JS. Meanwhile,if you are working on a large app with higher functionality and will need to make use of thousands of tools and libraries then use REACT JS. If you have any questions or comment, please drop them in the comment section. I will be reading the comments, thank you!

UseReducer React Hook Well Explained

Kpeale Legbara — Sun, 10 Mar 2024 19:19:24 +0000

Learning React can be a struggle, I can relate, and everyone who will eventually read this article can too but I aim to simplify those hard components in React. One thing that is very unique to React is dealing with states to update the User Interface and handle states the useState hook is used. The useState hook is very easy to learn it can be learned in under 2-3 minutes max but as you begin to work on more complex websites you begin to see the limitations of the useState react hook. This is just like how small spoons or cups are used for babies but when a child gets older he/she realizes how limiting those cups or spoons are and reaches for a bigger spoon. I hope this analogy hits home 😅😂😂.

UseReducer() 101: What is this hook about?

The useReducer() hook is a React hook that is used to handle complex state management. And yes, this useReducer is just like the useState for state management but with a few differences which we will talk about in this article. One important thing to note about the useReducer hook is that you can keep track of multiple pieces of state with a more complex data structure, such as an array or an object. After reading this article, you will not only understand useReducer but also know when to use it properly.

The UseReducer Syntax

const [state, dispatch] = useReducer(reducer, initialState);

This is the syntax for the useReducer hook which is quite similar to the useState syntax below;

const [value, setValue] = useState(0)

In both syntax, we get the state object and a function to manipulate that state but the useState accepts one argument and useReducer accepts two - to three arguments, this is one of the differences.

The first argument that the useReducer accepts is the reducer function. This is a function that will take in the state and action object as parameters. Depending on the action object, the reducer function must update the state in an immutable manner, and return the new state.

The second argument is the initial state. The initial state is the value the state is initialized with which is required and will return an error if not defined.

How to start using useReducer hook

To start using the useReducer hook, the first thing you have to do is import the hook from React like this:

import { useReducer } from 'react';

After importing your useReducer hook, you can go on to use it in your code. Let us look at how we can start using useReducer in our code.

Building a counter with useReducer

We will be building a counter in this article with the useReducer hook then later on, we will see how to go about it with the useState.

Step 1: Import the useReducer hook from React

import { useReducer } from 'react';

Step 2: Let us define what we will be working with.

import { useReducer } from 'react';

const initialState = {
count : 0
};

export default function Demo () {
const [state, dispatch] = useReducer(reducer, initialState);

return (
<div>
 <h1>I am a counter</h2>
 <button>+</buuton>
 <p>{count}</p>
 <button>-</buuton>
</div>
)
}

In the code block above, I have defined a lot of things and we will be working on the functionality next. The first thing we will be doing is writing the reducer function. It is in the reducer function that most of the functionality will be written. The reducer function as I said earlier takes in a copy of the state and action as an argument. Then depending on the type of the action, it is going to make some changes to that copy of the state and return the state, so let us jump back into the code.

function reducer(state, action) {
switch (action.type) {

default:
      throw new Error('action unknown');
}
}

In the reducer function, we will use a switch to define new cases. The action.type contains the name of the operation to be performed. This is a string and you can set any value you want. Just make sure it's relevant to the action being performed for better readability. If the type of action in the dispatch does not correspond to any of the actions it will throw an error, so it is an important part of the code. Let us move to writing more functionality for increasing the state.

function reducer(state, action) {
switch (action.type) {
case 'increment' : 
return {
...state, count: state.counter + 1;
}
case 'decrement' : 
return {
...state, count: state.counter - 1;
}

default:
      throw new Error('action unknown');
}
}

After defining the case, you return the state back and write the functionality you want, very easy right. Incase you are wondering how we will get the buttons working, I got you.

import { useReducer } from 'react';

const initialState = {
count : 0
};

function reducer(state, action) {
switch (action.type) {
case 'increment' : 
return {
...state, count: state.counter + 1;
}
case 'decrement' : 
return {
...state, count: state.counter - 1;
}

default:
      throw new Error('action unknown');
}
} 

export default function Demo () {
const [state, dispatch] = useReducer(reducer, initialState);

return (
<div>
 <h1>I am a counter</h2>
 <button onClick={() => dispatch({ type: 'increment' })} >+ 
 </button>
 <p>{count}</p>
 <button onClick={() => dispatch({ type: 'decrement' })}  >- 
 </button>
</div>
)
}

The click event handlers of the buttons use the dispatch() function to dispatch the corresponding action object and this is how to use useReducer in your code, simple, right? Let us write the same code using the useState React hook just for comparison.

Building a counter with useStateBuilding a counter with useState

import { useState } from 'react';

export default function Demo () {
const [count, setCount] = useState(0);

function increase () {
setCount(count + 1)
}

function decrease () {
setCount(count - 1)
}

return (
 <div>
  <h1>I am a counter</h2>
  <button onClick={increase} >+</button>
  <p>{count}</p>
  <button onClick={decrease}  >-</button>
</div>
)
}

This is how the counter looks when writing it with the useState React Hook. I know it still looks easy but imagine you have like 5 states that depend on each other, you will have to keep writing different states and functions as opposed to the useReducer hook where you can define everything in the reducer function.

How to know when to use useState and UseReducer React Hook

PreferuseStateif you have:

JavaScript primitives(string, boolean, number) as a state( eg. our first use case )
The state being managed is Simple business logic
Different properties that don’t change in any correlated way and can be managed by multiple useState hooks

Prefer useReducerif you have:

JavaScript objects or arrays as a state ( eg. our second use case )
Different properties tied together that should be managed in one state object

Conclusion

I hope this article was quite explanatory for you and helped you understand the basics of useReducer hook. I want you to challenge yourself and try to implement the useReducer hook in our next React project rather than relying on useState it alone. I would like to hear from you in the comment section.

useContext React Hook

Kpeale Legbara — Sun, 10 Mar 2024 05:49:51 +0000

Props is a special keyword in React that simply stands for properties and is used for passing data from one component to another, one thing to note is that data with props are passed in one direction, from parents to child. The use of props in React is very cool but at the same time, it can quickly sour especially when you have to pass data through deeply nested components that is what we call prop drilling. Let me create a scenario, imagine you work in a company that has a four storey building with no functional elevator and you have to use the staircase every time you want to see a friend who works on the ground floor since you work on the fourth floor, that is crazy right? That is what prop drilling is like. To make things easier and more efficient the useContext React hook was developed.

Context

ContextAPI in React is an alternative way of passing data through the component tree without the need to prop drill. ContextAPI is particularly useful when dealing with data that is considered “global” or needs to be accessible by many components within the application.

How to use the useContext React Hook

There are three steps to remember when you want to use the useContext React Hook and they are: creating the context, providing the context, and consuming the context.Let us quickly move to the first step.

Step 1: Creating the Context

The first thing is to import createContext from React like in the code snippet below;

import {createContext } from "react";

After importing the createContext from React the next thing we will do is to define.

import {createContext } from "react";

const Context = createContext();

It is important to note that the createContext function accepts only one optional argument. After importing and defining the createContext, we will move to the next step. One thing to note is that this userContext is now divided into three parts:
Provider: The provider gives all child components access to the value: One thing to note is that the provider can be put anywhere in the component tree but it is common to place it at the top.

Consumer: These are all the components that read the value passed into the provider in other words consumers are components that read the context.

Value: This is the data we want to make available, usually, it contains one or more states and functions. It will make more sense in the next step, just stay with me.

Step 2: Providing the Context

This next step is quite straightforward like the first step. The first thing you want to do is identify the parent component among your component tree. In some component trees, it can be the App.js component while in some it can be the Main.js. After identifying the parent component, we will wrap the parent component markup with the Context provider to have all child components subscribe to Context changes. Let us jump straight into the code:

import {createContext } from "react";

const Context = createContext();

function App() {
  const [name, setName] = useState("Jesse Hall");
  return (
    <Context.Provider value={{name}}>
      <Childcomponent1 />
      <Childcomponent2 />
      <Childcomponent3 />
    </Context.Provider>
  );
}

From the code above, we can see that after passing the values we want through the provider all the child components wrapped will be able to access these values through the useContext Hook. Another thing to note is that the value can be more than one and can be anything ranging from states, functions, objects, or even arrays.

Step 3: Consuming the Context

To use the Context in a child component, we need to consume the context and we can consume the context using the useContext Hook. The useContext hooks accept a context object (the value when we imported createContext from React).It is also important to note that a component calling the useContext hook will always re-render whenever the context value changes.

import { useState, createContext, useContext } from "react";
const Context = createContext();

function App() {
  const [name, setName] = useState("Jesse Hall");
  const [age, setAge] = useState(44);

  function ageHandler () {
  setAge(age + 1) 
  }
  return (
    <Context.Provider value={{value1:name,value2:age, 
     value3:ageHandler}}>
      <Childcomponent1 />
      <Childcomponent2 />
      <Childcomponent3 />
    </Context.Provider>
  );
}

function Childcomponent1 () {
const {value1, value2, value3} = useContext(Context)
return (
 <section>
  <h1>My name is {value1}</h1>
  <p>I am {value2} years old</p>
 </section>
)
}

In this code snippet, I added more things to the code like a new state and a function into the provider. In one of the child components, I called the useContext react hook and consumed the context we had earlier. To make my work easier and prevent bugs, I destructured my values and used them directly. However, it is important to note that most developers use custom hooks whenever they work with the useContext hook and I subscribe to it.

Conclusion

The useContext Hook is a fantastic hook to use, which might not be beginner-friendly. However, if you follow the three steps I outlined in my article then you will not face any challenges.One important thing to note is that useContext is best used when you need to share data across multiple components at different levels of the component tree, especially when passing props becomes cumbersome and difficult to manage.

PostgreSQL Interview Questions

Kpeale Legbara — Thu, 08 Apr 2021 20:22:02 +0000

If you’re interviewing for a position in which you’ll have to work with a PostgreSQL database; there are some fundamental things that you should know. In this article, I have prepared some important PostgreSQL interview questions and answers which will help you succeed in your interview.

See if you can read through the list below and answer every question. If you can - you are going to crush this interview! If not, read on below for the answers and explanations.

Question List

What are the languages which PostgreSQL supports?
What are the main features of PostgreSQL?
What is a non-clustered index?
How can you store binary data?
Explain what a Function is
How can we change the column data type in SQL?
Explain Write-Ahead Logging
What is multi-version concurrency control?
What are tokens?
Explain how to Enable Debugging
What is the purpose of Array_To_String in PostgreSQL?
What is a CTID?

What are the languages which PostgreSQL supports?

It supports a language of its own, PL/pgSQL and it supports internal procedural languages - Python, Perl, and Tcl.

What are the main features of PostgreSQL?

MVCC (Multi Version Concurrency Control), and procedural languages
Flexible API and data validation
Support and extensibility for SQL We covered more of the key features of Postgres compared to MySQL in a previous blog post.

What is a non-clustered index?

A non-clustered index is a type of index where the order of the rows does not match the order of the actual data.

How can you store binary data in PostgreSQL?

PostgreSQL provides two distinct methods for storing binary data:

The first is by storing the binary data in a table using the data type bytea.
The second method is by using the Large Object feature, which stores the binary data in a separate table in a special format and refers to that table by storing a value of type oid in your table. The bytea data type is not well suited for storing very large amounts of data, while the Large Object method for storing binary data is better suited for storing very large values.

Explain functions in PostgreSQL

Functions in PostgreSQL are also known as stored procedures. They are used to store commands, declarations, assignments, etc. This makes it easy to perform operations that would generally take thousands of lines of code to write.
PostgreSQL functions can be created in several languages such as SQL, PL/pgSQL, C, Python, etc.

How can we change the column data type in SQL?

Columns data-type in PostgreSQL are changed using the ALTER TABLE statement combined with the ALTER COLUMN statement.

ALTER TABLE table_name ALTER COLUMN column_name SET DATA TYPE new_data_type

Explain Write-Ahead Logging

This feature provides a log of a database in case of a database crash by logging changes before any changes or updates are made to the database.

What is multi-version concurrency control in PostgreSQL?

It is a method commonly used to provide concurrent access to the database, and in programming languages to implement transactional memory. It avoids unnecessary locking of the database - removing the time lag for the user to log into the database.

What are tokens?

Answer: Tokens are the building blocks of any line of source code. A token can be a keyword, an identifier, a quoted identifier, a constant, etc. Tokens which are keywords consist of predefined SQL commands, while identifiers are used to represent variable names like columns and tables.

Explain how to enable debugging in PostgreSQL

This command is used for enabling the compilation of all libraries and applications. This process slows down the system and at the same time increases the binary file size. It can be turned on by installing the pldbgapi extension and running the command:

CREATE EXTENSION pldbgapi

What is the purpose of `Array_To_String` in PostgreSQL?

The Array_To_String function concatenates array elements to a string using a provide delimiter.

What is a CTID?

This is a field that exists in every PostgreSQL table. It is a hidden and unique record for each table in PostgreSQL that easily denotes the location of a tuple and is known to identify certain physical rows according to their block and offset positions within a particular table. A logical row’s ctid changes when it is updated, so the ctid cannot be used as a long term identifier.

Benefits of studying Database Systems

Most interviews will not focus on specific technologies too much. But if you list familiarity with Postgres you can expect to get some questions about how Postgres works and its features. Asking and answering questions on Discord servers dedicated to SQL and data is a good idea too. Of course the best way to learn Postgres is to use it and other databases in practice to build projects and apps.

CSS GRADIENTS 1

Kpeale Legbara — Sat, 19 Sep 2020 06:09:13 +0000

Hello Everyone, welcome to my first article on dev.to and I am writing on CSS GRADIENTS.

What are GRADIENTS?
Gradients are one color that fades into another. This color can fade into another in different directions, example: top, bottom, left, right, diagonal e.t.c. This effect can be accomplished by using CSS GRADIENTS.
According to W3 schools, CSS defines two types of gradients:

Linear Gradients
Radical Gradients

Linear Gradients (goes down/up/left/right/diagonally)
The easiest way to understand this concept is that the Linear Gradient function transitions two or more colors along a straight line hence the name linear.
In creating linear gradients, at least two colors should be specified for it to work and the selector is background-image.
Syntax:
background-image: linear-gradient(direction, color1, color2, ...);

I will use some examples for better understanding:

Example 1
Direction - Top to Bottom (this is default).
I will start by creating a div in my index.html and put a content inside because the

tag does not work unless it has a content.
Index.html:

Then in my CSS,

The result:

EXAMPLE 2
Direction - Left to Right

In the CSS file,

The result:

EXAMPLE 3
Direction - Diagonal:
You can make a gradient diagonally by specifying both the horizontal and vertical starting positions.

In CSS file,

The result:

This is where I will stop for linear gradients. I will like to know your comment about the article and if it was helpful. My next post will be on radical gradients.

Thank you.

DEV Community: Kpeale Legbara

How to make your first open source contribution

How to Make Your First Open Source Contribution

What to Check Before Contributing

Forking the Project

Making the Pull Request

Understanding APIs: Basics, Types, and Architectures Explained Simply

What is API?

Simple Analogy Of How Websites Talk:

What API allows us to do?

How Do APIs Work?

Common API Request Methods

Types of APIs

API Architectures

Tools That Help You Work with APIs

Conclusion

How to Add Authentication to Your Next.js App with Auth.js

What is Auth.js?

Why use Auth.js in a Next.js application?

Getting Started

Step 1: Installing and Setting Up Auth.js

Step 2: Set Up Environment

Step 3: Set Up the Auth Route

Setup Authentication Methods

Setup Provider

Add Signin Button

Conclusion

REACTJS VS VUEJS

Other Differences between REACT JS AND VUE JS

1. Performance

2. Flexibility:

3. Scalability:

4. Mobile Development:

5. Community and Popularity:

What Should You Choose Between Vue JS vs React?

UseReducer React Hook Well Explained

UseReducer() 101: What is this hook about?

The UseReducer Syntax

How to start using useReducer hook

Building a counter with useReducer

Building a counter with useStateBuilding a counter with useState

How to know when to use useState and UseReducer React Hook

Prefer useReducerif you have:

Conclusion

useContext React Hook

Context

How to use the useContext React Hook

Step 1: Creating the Context

Step 2: Providing the Context

Step 3: Consuming the Context

Conclusion

PostgreSQL Interview Questions

Question List

What are the languages which PostgreSQL supports?

What are the main features of PostgreSQL?

What is a non-clustered index?

How can you store binary data in PostgreSQL?

Explain functions in PostgreSQL

How can we change the column data type in SQL?

Explain Write-Ahead Logging

What is multi-version concurrency control in PostgreSQL?

What are tokens?

Explain how to enable debugging in PostgreSQL

What is the purpose of Array_To_String in PostgreSQL?

What is a CTID?

Benefits of studying Database Systems

CSS GRADIENTS 1

What is the purpose of `Array_To_String` in PostgreSQL?