Forem: Adetola Esther

A Beginner’s Guide to ThreeJs

Adetola Esther — Fri, 13 Feb 2026 11:10:13 +0000

Sometime ago,I was told me that no matter what you’re learning in tech whether it’s a new method, a new language, a new framework, or a new tool you can always approach it by asking three questions: What does it take? What does it return? And what does it do?

Unfortunately, with Three.js, this is the first time that approach has completely failed me, After three trails however, I'm writing this as an intro to threejs for those that are struggling with it just like me.

What is ThreeJs

Three.js is a high-level JavaScript library for creating 3D graphics in web browsers. It simply simplifies 3D creation and animation without any WebGL code knowledge.

To render 3D graphics in a browser, we need the help of the GPU(Graphic processing unit)the part of your computer that’s really good at drawing graphics.
WebGL is the tool that lets JavaScript talk to the GPU. It acts like a translator, helping the browser tell the GPU what to render on the screen.
Threejs is built on top of webgl, it abstracts the complicated webGL language into an easy to use javascript Api so we reallyy don't have to bother again that.
To understand or use Three.js, it’s important to know that everything is built around three core objects. These three objects form the foundation of the Three.js workflow:
1. Scene
2. Camera
3. Renderer
In this tutorial, we’ll explore these three core concepts while building something small along the way. This hands on approach will help make each concept easier to understand as we go but before we begin, the first step is installation by running this in our terminal

# three.js
npm install --save three

# vite
npm install --save-dev vite

1.Scene

A scene in Three.js can be thought of as the world where everything exists. It contains everything you want to see(objects, lights, and anything else that should appear on the screen).
A good way to think about a scene is like a movie set. The set holds all the props, actors, and lights. Without the set, there’s nothing to film.
In the same way, before we can display anything with Three.js, we must first create a scene. Every visible object in Three.js lives inside a scene

import * as THREE from 'three';

const scene = new THREE.Scene();

That’s it.
At this point, we've created an empty world. Nothing will show on the screen yet because the scene has no objects,no camera and nothing is being rendered So we need the camera.

2.Camera

The camera is the viewer's eye. It is used to look at everything inside the scene. on our movie set, the camera is literally the cameraman. And there are multiple camera types. Three.js provides several types of cameras, including:
• PerspectiveCamera
• OrthographicCamera
• CubeCamera
• ArrayCamera
• StereoCamera

However, the most common is the PerspectiveCamera which is designed to mimic how the human eye sees the world, where objects farther away appear smaller and objects closer appear larger.

import * as THREE from 'three';

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

a PerspectiveCamera takes 3 arguments, each controlling how the scene is viewed.

Field of View (FOV)
This controls how wide the camera can see.It is measured in degrees and usually represents the vertical viewing angle.
A larger value means you see more of the scene, while a smaller value zooms in closer.(ours is 75)
Aspect Ratio
This is the shape of the camera’s view and is usually based on the browser window.
It is calculated by dividing the window’s width by its height:

window.innerWidth / window.innerHeight

The last two are
a. Near Clipping Plane
This defines how close an object can be to the camera before it is no longer visible.

b. Far Clipping Plane
This defines how far an object can be from the camera before it disappears.

Together, the near and far values create the view frustum, which determines what the camera can and cannot see.

For example, using 0.1 and 1000 means everything is seen frim the camera lens.

3. Renderer

The renderer is what actually draws everything on the screen. You can think of it like a painter, it takes all the objects in the scene, looks through the camera, and paints the final image onto your browser. In Three.js, the most commonly used renderer is the WebGLRenderer. When creating it, you need to tell it where to display the scene in the browser. Usually, this is done by attaching it to a DOM element, like the

or a specific .

import * as THREE from 'three';

// Create the renderer
const renderer = new THREE.WebGLRenderer();

// Set the size of the renderer (usually the window size)
renderer.setSize(window.innerWidth, window.innerHeight);

// Add the renderer to the HTML document
document.body.appendChild(renderer.domElement);

Now that we have a scene, a camera, and a renderer, let’s add a 3D object. In Three.js, creating an object happens in three main steps

1. Create the geometry

The geometry defines the shape of our object. It’s basically the XYZ points that make up the object in 3D space.

Three.js has a bunch of built-in geometries, like cubes, spheres, cones, and planes that can be seen in the docs. For this tutorial, we’ll use a sphere:

const geometry = new THREE.SphereGeometry(15, 32, 16);

15 is the radius of the sphere

32 is the number of horizontal segments

16 is the number of vertical segments

This gives us a smooth-looking sphere.

2. Create the material

The material defines how the geometry looks. we can think of it as the wrapping paper for your 3D shape.

Three.js has many materials that can aslo been seen in their docs. Some respond to light (like MeshStandardMaterial), while others don’t. For simplicity, we’ll use MeshBasicMaterial, which does not rely on lights:

const material = new THREE.MeshBasicMaterial({
  color: 0xf9a8d4,
  wireframe: true,
});

color: sets the color of the sphere

wireframe: true makes the sphere display as a wireframe, so you can see its structure

3.Creating a mesh
A mesh is created by combining geometry and material. The mesh is the actual object that can be added to the scene.

const sphere = new THREE.Mesh(geometry, material);
sphere.position.set(8, -30, 0)
scene.add(sphere);

Now the sphere exists in the scene, ready to be rendered.

Animate the sphere

We can make the sphere spin to make the scene more dynamic:

const animate = () => {
requestAnimationFrame(animate);

sphere.rotation.x += 0.01;
sphere.rotation.y += 0.005;
sphere.rotation.z += 0.01;

renderer.render(scene, camera);

};

animate();

At this point, you have a 3D animated sphere rotating on your screen! Of course, there’s much more to Three.js than just this. It’s used in interactive websites, games, simulations, and a whole lot more but if you’ve struggled with Three.js like I have, congratulations, you’ve just created your first 3D object. From here, you can, Add lights to your scene, Experiment with materials, colors, and geometries and Play around with what you’ve built and see how changes affect your scene.

Also, check out the examples in the official Three.js documentation they’re a great source of inspiration and learning and maybe once I’ve mastered Three.js, I’ll come back with a more detailed tutorialand this time, we might build something even more exciting.

Some cool Web APIs

Adetola Esther — Tue, 28 Oct 2025 07:48:34 +0000

Last week, I decided to switch up how I learn. Instead of just reading tutorials and documentation, I tried something simple, asking three core questions about every new concept I came across, a technique recommended by my mentor.

Those three questions were:

What does it do? (What’s its purpose or behavior?)
What does it take? (What inputs, dependencies, or setup does it require?)
What does it return? (What’s the output or result you can expect?)

This technique forces clarity and Using this approach, here’s what I explored last week.

1. Interception Observer

What does it do?

interception Observer is used to detect interaction between the target element and its ancestor element. It is used to detect if some elements are visible at viewports or not.
It provides an efficient way to track visibility changes without constantly listening to scroll or resize events.

What does it take?

An Intersection Observer takes two main inputs:

1) A callback function
This function is triggered whenever the visibility of the observed element changes. It receives a list of IntersectionObserverEntry objects, which contain information about each observed target.
If an entry’s isIntersecting property is true, it means the target element is visible within the viewport or within the specified root element.

2) An options object
This object can include the following properties:
a) root: Defines the element that is used as the viewport for checking the visibility of the target. It must be an ancestor of the target element. If not specified, the browser’s viewport is used by default.
b) threshold (sometimes misheard or mistyped as choiceOde): Can be a single number or an array of numbers between 0 and 1. It specifies how much of the target element must be visible before the callback is triggered.
Example: 0.5 means the callback fires when half of the element is visible; 1 means the callback fires only when the entire element is visible. The default value is 0.
c) rootMargin: Works similarly to CSS margins. It accepts one to four values (margin-top, margin-right, margin-bottom, margin-left) and can be used to expand or shrink the root’s bounding box. For example, "0px 0px -50px 0px" can trigger earlier or later than the actual visibility point.

What does it return?

It returns an observer object that provides methods such as .observe() and .unobserve(), allowing you to start or stop observing specific target elements for visibility changes.

When to use Intersection Observer

Intersection Observers are useful in many real world web interactions, including:

Lazy loading images – Only load images when they’re about to appear on the screen.
Detecting visibility – Check whether a specific element is within the viewport.
Autoplay or pause media – Automatically play a video when visible and pause when it scrolls out of view.
Infinite scrolling – Load more content when the user reaches the end of a page or list.

2.createElement()

What does it do?

In an HTML document, the document.createElement() method is used to dynamically create new HTML elements using JavaScript. Instead of hardcoding everything inside your HTML file, this method lets you generate elements on the fly and attach them to the DOM. JavaScript dynamically builds and updates the interface by creating, modifying, and removing elements without reloading the page.
This makes the web app more efficient and interactive, as it allows constructing UI components directly with JavaScript rather than writing repetitive static HTML.

What does it take?

The createElement() method takes one argument, a string representing the tag name of the element you want to create.
For example:

const button = document.createElement('button');

Here, a element is created in memory but not yet added to the page.

What does it return?

the new element.

3.Canva API

The Canvas API provides a means for drawing graphics via JavaScript and the HTML <canvas> element. Among other things, it can be used for animation, game graphics, data visualization, photo manipulation, and real-time video processing.

The Canvas API largely focuses on 2D graphics allowing developers to create visual elements dynamically including animations, charts, game graphics, image effects, and even real-time video processing.

What does it take?

To use the Canvas API, you typically need:
a) An HTML element: This defines the drawing area in your document. For example:

<canvas id="myCanvas" width="400" height="400"></canvas>

b) A rendering context
In JavaScript, you access the drawing functions by retrieving the context

const canvas = document.getElementById('myCanvas'); const ctx = canvas.getContext('2d');

The getContext('2d') method gives you the 2D drawing context, which contains all the methods needed to draw shapes, text, images, and more.

c) Drawing instructions
Once you have the context, you can call methods like:

ctx.fillRect(x, y, width, height) – Draws a filled rectangle.
ctx.beginPath() and ctx.lineTo() – Used to create complex paths and shapes.
ctx.drawImage() – Renders images or videos onto the canvas.

What does it return?

Channel Messaging API

What does it do?

The Channel Messaging API allows two separate scripts running in different browsing contexts (such as two iframes or an iframe and its parent document) to communicate directly with each other.
It creates a two-way communication channel, where each side can send and receive messages asynchronously through dedicated message ports.
This makes it useful for scenarios where web components, embedded widgets, or isolated scripts need to share data safely and efficiently without relying on global variables or storage.

What does it take?

A message channel is created using the MessageChannel() constructor. Once created, the two ends of the channel can be accessed through: MessageChannel.port1 and MessageChannel.port2

The context that creates the channel uses port1, while the second context (such as an iframe) uses port2.

You can send messages through port2.postMessage() and transfer the port itself to another browsing context using window.postMessage() along with two arguments(the message to send, the object to transfer ownership of)
The receiving context listens for messages using onmessage, and grabs the message content from event's data.
To reply, it can use its own MessagePort.postMessage() method.
When communication is no longer needed, MessagePort.close() can be called to close the connection on both ends.

What does it return?

a communication bridge

Geolocation API

What does it do?

The Geolocation API allows users to share their physical location with web applications if they choose to.
For privacy and security reasons, the browser always asks for the user’s permission before sharing any location data. Once granted, the API enables a web app to access the device’s geographic position, using the best available method (such as GPS, Wi-Fi, or network information).

For browser extensions, any feature that accesses geolocation data must explicitly declare the "geolocation" permission in the manifest file.

What does it take?

The Geolocation API takes:

1 User permission
The browser automatically prompts the user to grant or deny location access before the API can return any data.
2 Callback functions
The API works asynchronously and requires callback functions to handle success or error responses.

The Geolocation API is accessed via a call to navigator.geolocation; this will cause the user's browser to ask them for permission to access their location data. If they accept, then the browser will use the best available functionality on the device to access this information. Developer can now access this location information in a couple of different ways:

a) Geolocation.getCurrentPosition(): Retrieves the device's current location.
b) Geolocation.watchPosition(): Registers a handler function that will be called automatically each time the position of the device changes, returning the updated location.

Each of these methods can take up to three arguments:
1 A success callback (required) executed when location retrieval succeeds. It receives a GeolocationPosition object containing data such as latitude, longitude, and accuracy.
2 An error callback (optional) executed if retrieval fails. It receives a GeolocationPositionError object explaining what went wrong (e.g., permission denied, timeout, or unavailable data).
3 An options object (optional) that allows developers to configure retrieval settings such as accuracy, timeout, and caching behavior.

navigator.geolocation.getCurrentPosition(
  (position) => {
    console.log(position.coords.latitude, position.coords.longitude);
  },
  (error) => {
    console.error(error);
  },
  { enableHighAccuracy: true, timeout: 5000 }
);

What does it return?

The Geolocation API returns a Geolocation object, which provides access to the methods and properties needed to retrieve and monitor location data.
When successfully executed, it provides a GeolocationPosition object containing detailed information such as:

coords.latitude
coords.longitude
coords.accuracy
timestamp

When to use Geolocation API

Geolocation API can be useful when building

Weather apps
Maps and navigation
Ride-hailing or delivery apps
Logistics and fleet management
Fitness and outdoor activity apps

Storage API

What does it do?

The Storage API provides a way for web applications to store data locally on a user’s device directly in the browser so that information can persist between sessions without needing a server connection.
It allows developers to save key value data, user preferences, and small amounts of application state, making websites faster and more interactive even when offline.
There are two main parts of the Storage API:

localStorage – Stores data permanently (until explicitly cleared by the user or the site).
sessionStorage – Stores data temporarily for a single session (it’s cleared once the browser tab is closed).

What does it take?

The Storage API takes: A key and a value. Data is stored in key value pairs, where both are strings.

localStorage.setItem('username', 'Adetola');
Here, 'username' is the key, and 'Adetola' is the value being stored.

A key (for retrieval or removal) –
To read stored data:
const name = localStorage.getItem('username');
To remove data:
localStorage.removeItem('username');
Or to clear everything at once:

localStorage.clear();

What does it return?

The Storage API itself returns a Storage object, which provides methods (setItem(), getItem(), removeItem(), clear()) for interacting with stored data.

When data is retrieved using getItem(), it returns the string value associated with the specified key. If the key doesn’t exist, it returns null.

References

SEO and Next.js: How to Implement and Optimize for Better Results

Adetola Esther — Tue, 28 Oct 2025 06:29:28 +0000

What is SEO?

SEO stands for Search Engine Optimization. It is the process of making a website more visible in search results to increase both the quality and quantity of traffic. Unlike paid ads, SEO focuses on organic traffic, making websites easier for users to find naturally through search engines like Google and Bing.

Why is SEO Important?

Organic search dominates traffic: Around 50% of website traffic comes from search engines. Unlike paid advertising which may be shown to people who aren’t actively looking. organic search happens when a user types a specific query. By ranking for those keywords, your website positions itself as the solution to their problem, leading to higher quality leads and better conversion rates. 2.Search is a daily habit: Over 8.5 billion searches happen on Google every day. Search is deeply integrated into people’s lives. Businesses without a strong organic presence risk being invisible to their audience. Since most searches now happen on mobile, Google prioritizes mobile-friendly websites. This means businesses need fast, responsive, user-friendly websites to perform well in search rankings and build a strong brand perception.
It’s sustainable: Unlike paid ads that stop driving traffic once the campaign ends, SEO continues to work long term, making it a more sustainable strategy.
It builds trust: Ranking high on Google is a signal of credibility. Users tend to trust organic results more than ads, so appearing at the top transfers that trust to your brand.
It outperforms paid ads in the long run While ads can provide a short-term boost, SEO offers long-term visibility and trust that ads cannot match.

Implementing SEO in Next.js

Metadata Management The easiest way to start with SEO is by managing your Html metadata using the next/head document. Metadata is like your page title and description, is crucial for SEO. It's the first thing search engines see and what appears in search results. Next.js provides a straightforward way to handle this using the metadata object or the generateMetadata function (for App Router) or the next/head component (for Pages Router).

Static Metadata: For pages with content that doesn't change, you can define a static metadata object. This is ideal for things like your homepage, "about us" page, or a static landing page.

 import type { Metadata } from 'next'

 export const metadata: Metadata = {
   title: 'My Awesome Website',
   description: 'The best website for all your needs.',
 }

 export default function Page() {
   //...

Dynamic Metadata: For dynamic pages, like blog posts or product pages, you'll need to generate metadata based on the content. The generateMetadata function allows you to fetch data and use it to create unique titles and descriptions for each page.

import type { Metadata, ResolvingMetadata } from 'next'

type Props = {
  params: { slug: string }
}

export async function generateMetadata(
  { params }: Props,
  parent: ResolvingMetadata
): Promise<Metadata> {
  // Fetch data for the specific blog post
  const post = await fetch(`https://.../posts/${params.slug}`).then((res) => res.json())

  return {
    title: post.title,
    description: post.description,
  }
}

export default function Page({ params }: Props) {
  //...
}

Optimizing SEO in Next.js

SEO in Next.js goes beyond metadata—it’s about leveraging the framework’s built-in features for speed, crawlability, and user experience.

Rendering Strategies Choosing the right rendering method is crucial for SEO:
Static Site Generation (SSG): Pages are pre-rendered at build time into static HTML. This makes them fast-loading and ideal for content that doesn’t change often (e.g., landing pages).
Server-Side Rendering (SSR): Pages are rendered on the server for each request. This is best for highly dynamic, user-specific content, like a product inventory or a profile page. The advantage is that crawlers still see the complete HTML.
Incremental Static Regeneration (ISR): A hybrid approach that combines SSG and SSR. Pages are generated statically but can be updated at intervals or when data changes. This offers both speed and freshness.
Image and Font Optimization Page speed is a major SEO factor, and Next.js helps here:
Automatic image optimization (resizing images based on device and lazy-loading them only when they appear in view).
Built-in font optimization, reducing load time and improving Core Web Vitals.

Server-Side Rendering (SSR)

The delivery of content from a server to a user’s browser is a foundational challenge in web development. The architectural approach chosen directly shapes performance, user experience, and business outcomes.
For a while now, the debate has centered on two core strategies: Server-Side Rendering (SSR) and Client-Side Rendering (CSR).

SSR generates a complete HTML page on the server and delivers it ready for immediate display in the browser.
CSR, by contrast, sends a minimal HTML shell and relies on JavaScript in the browser to construct the page. At their core, these strategies represent a fundamental trade-off: should the computational workload be centralized on the server or distributed across user devices? In this section, we’ll focus on SSR.

What is SSR?

Server-Side Rendering (SSR) is a technique where a web page’s HTML is generated on the server in response to a user’s request.
When a user navigates to a URL:

The server processes the request.
It fetches any required data.
It generates a complete HTML document.
That document is sent to the browser, which can immediately display the content. This is different from CSR, where the server sends a lightweight HTML shell and relies on JavaScript running in the browser to fetch data, construct the DOM, and render the final page.

Why Do You Need SSR?

SSR solves several common challenges in modern web development:

Faster First Paint / Initial Load Since the browser receives a fully rendered page, users can see meaningful content almost immediately.
Improved SEO Search engine crawlers can index SSR pages more effectively because the content is present in the initial HTML, not hidden behind JavaScript execution.
Consistent User Experience Across Devices SSR reduces reliance on client-side processing power. This makes it ideal for users on older devices or slower networks, where heavy JavaScript rendering would otherwise cause delays.

When to Use SSR

Content-heavy sites that need SEO (e.g., blogs, e-commerce stores, news sites).
Applications targeting a global audience where device performance and network speed vary.
Pages requiring fast initial load times to reduce bounce rates.

When Not to Use SSR

Highly interactive, dynamic applications (e.g., dashboards, single-page apps) where most of the content changes after the page loads.
Applications with real-time updates (e.g., stock tickers, chat apps) that rely heavily on client-side rendering anyway.
Projects with limited server resources, since SSR increases server workload.

Pros of SSR

Faster initial page load and first contentful paint
Better SEO since crawlers see pre-rendered HTML
Consistent experience across devices
Good for static or semi-static content with high visibility needs

Cons of SSR

Heavier load on the server, which can affect scalability 
Slower page transitions (compared to CSR) since each navigation triggers a new server request 
Increased complexity when integrating with client-side interactivity Caching and performance optimization can be more challenging

Accessibility.

Adetola Esther — Mon, 28 Jul 2025 09:22:59 +0000

What is accessibility?

Accessibility is the practice of making your app or website accessible to everyone regardless of their ability or disability. It is often referred to as A11y(as in, 'a', then 11 characters, and then 'y'). It can be seen as treating everyone the same, and giving them equal opportunities, no matter what their ability or circumstances.

What type of disabilities are we looking at?

1) People with visual impairments
This includes:

Blindness
Low vision
Color blindness

Many visually impaired users rely on screen readers, which convert digital text into speech, or screen magnifiers. Designers and developers should ensure that all visual elements are also accessible through text, proper HTML semantics, and ARIA labels.

2) people with hearing impairments
This includes individuals with hearing loss ranging from mild to profound
To make content accessible to them,

Videos should be captioned
Audio should come with transcripts
Textual alternatives should be provided for sound-based interactions

3) people with mobility impairments
This includes:

Paralysis or loss of limb function
Neurological disorders affecting control
Age-related movement limitations Such users may not use a mouse. They might navigate entirely with a keyboard, voice control, or adaptive switches. Therefore, all functionality should be operable using a keyboard alone. The Web Content Accessibility Guidelines (WCAG) were developed by the World Wide Web Consortium (W3C) to standardize accessibility. These guidelines are organized around four core principles, known by the acronym POUR.

1. Perceivable

Users must be able to perceive the content, regardless of how they interact with it.
Best practices:

Provide text alternatives (alt) for images
Use captions and transcripts for media
Ensure sufficient color contrast
Structure content with proper headings

2. Operable

Users must be able to interact with and control the interface.
Best practices:

All functionality should be accessible via keyboard
Allow users to pause or disable animations
Avoid flashing content that could trigger seizures
Provide clear navigation and focus indicators

3. Understandable

Content and operation should be easy to comprehend.
Best practices:

Use plain, simple language
Make navigation consistent across pages
Label all forms clearly
Identify input errors and offer suggestions

4. Robust

Content must be usable with a wide range of technologies, including assistive tools.

Best practices:

Use semantic HTML elements <button> <nav> <header> etc.
Add ARIA roles and states where necessary
Ensure compatibility with screen readers and assistive browsers

How to Implement Accessibility in Your Projects

Accessibility is the right thing to do as building accessible sites benefits everyone. A common accessibility myth is that accessibility is an expensive "added extra" to implement on a project.These are some practical suggestions you can take to make your website or app more accessible

1. Start with Semantic HTML

Use the correct HTML elements for structure and meaning.
For example:
Use <button> for buttons, not <div>
Use <label> elements properly linked to form inputs

2. Caption and Transcribe All Media

Don’t rely on auto-generated captions. Always provide human-reviewed captions and transcripts for audio or video content.

3.Navigation

Presenting menus as structured lists gives assistive technologies the context they need to help users navigate. It also improves responsiveness on various devices and screen sizes.
Practice includes:

Placing your menu in a consistent location across all pages
Use HTML or ARIA to highlight the active/selected item
Label menus clearly for easy understanding

4. Order and Grouping

Grouping related items enhances navigation and helps screen readers communicate structure and progress clearly.
Practice includes:

Use unordered lists <ul>for menus or items where order doesn’t matter
Use ordered lists <ol> where sequence is important (e.g. steps in a process
Make sure only <li> elements are children of your lists

5. Color Contrast

Color contrast ensures that text and interactive elements are legible, even for users with low vision or color blindness. Text and background contrast should be at least 4.5:1 and Essential UI icons should have a contrast ratio of at least 3:1

Git as an onion

Adetola Esther — Mon, 16 Jun 2025 10:16:10 +0000

Git is an open-source version control system that allows developers to track and manage their codebase. It allows several developers to be able to work on one particular project simultaneously without interfering with each other's work. We'll be looking at Git as an onion in which we unfold each layer one by one until we get to the core which is understanding what Git really is.

Benefits of Git

Git helps in tracking changes, making it possible to reverse back to the previous stage in case something goes wrong.
Git allows for multiple people to be able to work on one single project at once.
Git acts as storage, allowing people to share their work. Git heavily relies on the branching system.

Branching
One of the layers of our onion is Branching.
Branching traditionally means diverging from the main development line. It is copying a copy of what already exists.
A branch can also be called a pointer to a commit. The default branch is always the main branch in which other branches are then created from. Branches are mainly created for features, bugs, fixes, experiments, and so on.

Branching Strategy
Branching Strategy is basically defining a set of rules to define how to work with branch. It is creating a structured workflow.

Types of Workflow

Centralized Workflow
In a centralized workflow, work is done usually in the main branch, and it is the most common branch among developers working on personal projects. This is actually not often advised as it is hard to keep track of changes.
Gitflow Workflow
Gitflow Workflow, unlike centralize workflow, this involves a number of branches. There is usually the main branch, which is the stable branch and then the development branch where all the changes happen. We also have a feature branch, which is created solely for development of a particular feature, a release branch for a release, hotfix branch to fix codes already in production, and so on.
Forking Workflow
A fork is a copy of a repo a developer has worked on. A developer can make a copy of a repo(fork a repo)and then make their own changes and then push to their account without affecting the original repo. This workflow is usually used in open source projects.
GitHub Workflow
GitHub Workflow compare to other workflows is lightweight and favoured by GitHub. This workflow is also created around branches and revolves around pull requests. The GitHub Workflow is the workflow in which we will be discussing more in depth in this article.

GitHub workflow heavily operates on a pull request system. Once changes are made in a development branch, the changes are then pushed to the main branch and then this is done by creating a pull request. What the pull request does is it announces a push to a branch, allowing other collaborators to discuss, reveal changes, or even add more commits to the pull request.

Pull Requests
A pull request is another layer of the onion. A pull request improves code quality, as it allows a review system which ensures only quality codes are pushed to production. It also allows transparency to know what changes are made and then who made them. It also allows control which makes sure that only what we want to be pushed to production are pushed. And lastly, pull request also encourages collaborations as it allows developers to review each other's codes, approve and leave comments if there is need to.

A pull request is created using the Git push command
After a pull request has been approved, it is merged into the destination branch.

Merging
After a Pull request has been reviewed and found satisfactory by the reviewer, it is then Merge into the new branch, fully allowing changes made in the feature branch to be visible also in the destination branch.

Type of merge

Merge commit
The default type of merge on GitHub is the merge commit. With this, a new branch is created that brings changes made in the feature branch. This contains histories of both branches.
Squash and merge
Changes made in the feature branch are squashed into a single commit before merging into the destination branch.
Rebase and merge
Using this approach, the commits from the feature branch are placed on the destination branch, and then a merge is executed. The history of the destination branch is rewritten with the new commits.

Merging vs Rebasing
Git Rebase solves the same problem as Git merge. They were both designed to integrate changes from one branch to another. This is however just done in different ways. Git Merge combines histories and creates a merge commit, while Rebase moves your commit on top of another branch, completely rewriting the history. Git Merge preserves exact commit history, while Git Rebase creates a linear and cleaner history.

When to Merge?

When collaborating with other developers on shared branch
To preserve historical paths development took, what branches were combined and so on

When to Rebase?

When working on a solo project
To avoid unnecessary merge conflicts

Merge conflicts
A Merge Conflict occurs when changes are made on the same line of code by different developers. A Merge Conflict can also happen if the file with the changes made in has been deleted. A Merge Conflict has to be resolved before a Merge can happen.

Pull requests go through several states. The first one is the open state which indicates the PR is active and under construction ready to be merged. The second stage is the approved stage after which one or more reviewers have gone through the code and are satisfied with the states. This indicates that the PR is ready to be merged. Change Requested states. This indicates that a reviewer requested that changes be made in a particular file before the PR can be merged. Closed PR. A PR that is closed has been merged.

Git Cherry Picking
Git cherry Picking is an advance merging method. Gits Cherry Picking copies specific commits to another branch. It moves specific commits from one branch and then just that commit is moved into another branch. It creates duplicate commits in each branches, which can also cause confusion.

It is an advanced Gits feature and shouldn't replace a commit.Cherry‑pick does not move the commit. It creates a copy of the commit, but with a new parent in the branch that you're cherry‑picking into. The original commit stays the same.

When to cherrypick?

bug fix that applies to multiple versions of a product
Merge changes from a branch into another without merging the entire branch.

Git Blame
Git Blame is one of the many layers of the onion. It shows the last changes made in the file, when it was made and who made them

When to use Gif Blame

When debugging, it can be used to trace who walked on the path.
To preserve history.
For accountability.

Understanding Git is like peeling an onion layer by layer Before you get to the core, which is understanding how Git works, we have to peel through each layers, one after the other. Pool request, branching, etc. There are several other layers that are also not discussed in this article.