Forem: Ibrahim

Why do we need git

Ibrahim — Wed, 25 Mar 2026 13:58:02 +0000

Have you ever been working on a school project or a piece of code, made a huge mistake, and realized you couldn't go back? Or maybe you saved a file as project_final.py, then project_final_v2.py, and finally project_actual_final_v3_STOP_CHANGING.py? It’s a nightmare!

This is exactly why Git was created. In this post, we’re going to look at what Git is, how it acts like a "time machine" for your work, and why it is the most important tool you will ever install on your computer.

What is Git?
In simple terms, Git is a Version Control System. That sounds fancy, but think of it like the "Version History" in Google Docs or a "Save Point" in a video game.

Git watches your folder and remembers every single change you make. If you write a line of code today and delete it tomorrow by accident, Git has a memory of exactly what that line was. It keeps your project's history organized so you never have to worry about losing your best ideas.

Why Should Anyone Care?
If you want to work in tech, Git is not optional—it’s a superpower! Here is why:

You Can Undo Anything: If your code breaks (and it will!), you can just tell Git to "go back to how it was 10 minutes ago."

Working Safely: You can create a "copy" of your project to test a new idea. If the idea fails, your main project stays perfectly safe.

Teamwork: If you are working with a friend in Kisumu and another in Nairobi, Git helps merge all your code together without overwriting each other's work.

It’s the Industry Standard: Every big company (like Google or Netflix) uses Git. Knowing it makes you look like a pro.

The Big 4 Concepts
To speak "Git," you only need to know these four words:

Repository (Repo): This is just a folder where Git is "watching" your files. It’s the home for your project.

Commit: This is like hitting the "Save" button, but with a note. You tell Git: "I am saving my work now, and I added the Login button."

Branch: This is a separate path. You can have a "Main" branch for your working app and a "Testing" branch for your crazy ideas.

Merge: This is when you take the good ideas from your "Testing" branch and put them back into your "Main" branch.

A Real-Life Example: The Lem-in Project
Imagine you are working on the Lem-in ant farm project. You have a "Brain" that finds the shortest path, and it works perfectly.

Now, you want to try a new, faster math trick (like Edmonds-Karp). Without Git, you might change your code, break everything, and forget how the old version worked. With Git, you just make a Commit of your working code. Then, you try the new trick. If it breaks, you just "Rollback" to your last commit, and your working ant farm is back instantly!

Getting Started
To start, you just need to install Git and use a few simple commands in your terminal:

git init: Starts a new Repo.

git add .: Tells Git to look at your changes.

git commit -m "My first save": Saves your work.

How the internet works

Ibrahim — Fri, 20 Mar 2026 12:52:45 +0000

How the Internet Actually Works
We use the internet for everything—Instagram, Netflix, homework, or just Googling "why is my cat weird." But have you ever stopped to wonder how a video gets from a computer halfway across the world onto your phone screen in a second?

It’s not magic, and it’s not just "stuff floating in the air." It’s actually a lot simpler than you think.

It’s basically just a bunch of very long wires People talk about "the cloud" like everything is flying around in the sky. In reality, the internet is mostly a giant web of cables.

There are massive wires running under our streets and even across the bottom of the ocean. When you click a link, you’re basically sending a "hello" through those wires to another computer.

The "Client" and the "Server" To understand how things move, you just need to know two terms:

The Client (That’s you!): Your phone or laptop is the client. You are "requesting" or asking for something.

The Server (The Librarian): A server is just a big computer that sits in a cold room somewhere. Its only job is to hold files (like a YouTube video) and wait for someone to ask for them.

Think of it like a pizza shop: You call and ask for a pizza (the request), and the shop sends it to your house (the response).

IP Addresses are like your home address Every computer in the world has its own "mailing address" called an IP Address. It looks like a bunch of numbers: 142.250.190.46.

Since we aren't robots, we don't want to type numbers. We type things like google.com.
There is a system called DNS that acts like a giant phonebook. It sees google.com and says, "Oh, you mean the computer at 142.250.190.46! Let me connect you."

"Packets" (The LEGO pieces) A website or a video is way too big to send all at once. So, the internet breaks it into tiny pieces called Packets.

Imagine you’re sending a LEGO set to a friend. If you send the whole built castle, it’ll break. Instead, you put the pieces in many small envelopes and mail them. When your friend gets all the envelopes, they snap the pieces back together.

Your browser does the same thing—it catches all the "packets" and puts them back together so you can see the photo or video.

In short:
You type a name (like twitter.com).

Your computer looks up the "address" in the phonebook.

You send a "Hey, can I see this page?" message through a wire.

The other computer sends the page back in tiny pieces.

Your browser puts the pieces together.

How to Set Up Node.js and React with Vite

Ibrahim — Fri, 20 Mar 2026 08:52:27 +0000

🚀 How to Set Up Node.js and React with Vite (Simple Guide)
Starting a new project can feel like a big task, but it’s actually very easy! In this guide, we will set up Node.js and create a React app using a fast tool called Vite.

Let’s get started!

Part 1: Install Node.js
What is Node.js?
Think of Node.js as the engine that runs your code. When you install it, you also get npm. npm is like a big store where you can get free tools (libraries) for your website.

Step 1: Download
Go to nodejs.org.

Download the LTS version (this is the stable one).

Open the installer and click Next until it’s finished. You don't need to change any settings!

Step 2: Check it
Open your Terminal (Mac) or Command Prompt (Windows) and type:
node -v

If you see a number (like v20.x.x), it works!

Part 2: Create Your React App
We will use Vite. It is a modern tool that makes building websites much faster than the old ways.

Step 1: Start the Project
In your terminal, go to your Desktop:
cd Desktop

Now, run this command to start the setup:
npm create vite@latest

Follow these steps:

Project Name: Type my-react-app.

Framework: Choose React.

Variant: Choose JavaScript.

Step 2: Open the Folder
Type this to go into your new project:
cd my-react-app

Step 3: Install the Tools
Type this to download all the React files you need:
npm install

Step 4: Start the Website!
Type this to see your app:
npm run dev

Now, look at your terminal. It will give you a link (like http://localhost:5173). Open that link in your browser. Your app is running! 🥳

📂 Understanding Your Files
When you open your project in a code editor (like VS Code), look for these:

src/App.jsx: This is the main file. Change the text here, and it changes on your website!

package.json: This is just a list of the tools your project uses.

Cool Feature: When you change a word in App.jsx and hit Save, the browser updates automatically. You don't even have to refresh! This is called Hot Reloading.

💡 Quick Commands to Remember
npm run dev — Start your project for coding.

npm run build — Make your project ready for the real world.

my hobbie of playing keyboard after coding

Ibrahim — Wed, 11 Mar 2026 12:40:09 +0000

After spending hours writing code, debugging errors, and trying to make everything work perfectly, I often find myself needing a break. Coding is mentally intense. It demands focus, logic, and attention to detail. Sometimes, my brain just needs to step away from functions, loops, and endless lines of text. That’s when I turn to my keyboard and start playing music.

Playing music feels like a complete reset for my mind. My fingers, which have been typing semicolons and curly braces, now glide across black and white keys. Chords, melodies, and rhythms replace syntax and logic. There’s a satisfaction in hearing a song come together, in creating something that flows naturally without needing to follow strict rules. Unlike coding, mistakes in music are part of the process, and experimentation is encouraged.

Interestingly, this break often helps me return to coding with a fresh perspective. Problems that seemed impossible before suddenly make sense after a short musical session. Music relaxes the mind, improves focus, and inspires creativity. It’s a reminder that creativity and logic aren’t opposites—they complement each other.

Beyond problem-solving, playing music after coding is simply joyful. It’s an outlet for expression, a way to celebrate small victories, and a chance to recharge. The satisfaction of hitting the right chord, finishing a melody, or discovering a new sound mirrors the feeling of completing a challenging piece of code—but in a more playful, emotional way.

For me, the keyboard isn’t just an instrument; it’s a bridge between focus and relaxation, work and play. After hours of coding, it’s my way to step back, enjoy the moment, and return to my projects energized and inspired. Music reminds me that even in the world of coding, there’s room for creativity, fun, and joy.

My First Experience Using Figma as a Beginner

Ibrahim — Fri, 20 Feb 2026 21:09:47 +0000

My First Experience Using Figma as a Beginner

Recently I tried using Figma for the first time, and honestly, it was much easier than I expected. I’m not a design expert, but the whole experience felt smooth and beginner-friendly. So here’s my simple, personal experience.

Starting Figma for the First Time

When I opened Figma, the first thing I noticed was how clean the interface looked. Nothing felt confusing. The tools were organized, and everything was easy to find.

I also liked that I didn’t need to install anything. Figma runs in the browser, so I could start right away.

Surprisingly Easy to Learn

I thought design tools would be complicated, but Figma proved me wrong. Within a few minutes, I was able to:

drag shapes

add text

change colors

move things around

resize elements

Everything felt simple and natural.

Templates Made My Life Easy

Figma has templates for apps, websites, layouts, and more. As a beginner, this helped me a lot. Instead of starting from a blank screen, I could follow a layout and learn as I went.

Collaboration Looked Really Cool

Even though I was working alone, I noticed how easy it is to design with others in real time. It’s like Google Docs but for design. This will be super useful for team projects.

What I Created

For my first try, I made a simple Facebook-style post — just text, a background, and a layout similar to what you see on Facebook.

It wasn’t complicated, but seeing it come to life made me feel proud and excited to learn more.

Final Thoughts

My first time using Figma was great. It’s simple enough for beginners but powerful enough for serious design work. You don’t need design experience — just curiosity.

If you’re new to UI/UX or want a tool that’s easy to learn, Figma is a great place to start.

How to Update a README File (Simple and Easy Guide)

Ibrahim — Wed, 18 Feb 2026 14:49:51 +0000

How to Update a README File (Simple and Easy Guide)

A README file is one of the most important parts of a project. It tells people what the project does, how to use it, and any important details they need to know. Keeping your README updated makes your project clear and helpful for others.

This article explains, in very simple terms, how to update a README file.

Find Your README File

Every project has a main folder where all the files are stored. Inside that folder, look for a file named:

README.md

README.txt

or just README

This is the file you need to update.

Open the File

Open the README file using any text editor you like, such as:

Notepad

TextEdit

VS Code

GitHub’s built-in editor

Once the file is open, you can start editing it.

Decide What Needs to Be Updated

Before you change anything, think about what needs updating. Ask yourself:

Did the project change?

Are the instructions still correct?

Did you add new features?

Is there anything confusing or missing?

This helps you focus on the right parts.

Edit the README

Rewrite or update the information in simple, easy-to-understand language.
Common things you may want to update include:

What the project does

How to install it

How to use it

Steps or examples

New features

Problems or warnings

Credits or licenses

If something is outdated, remove it so the file stays accurate.

Use Simple Formatting (Optional)

If your file ends with .md, it uses Markdown. Markdown helps you format text easily.

Some basic Markdown tools:

→ big title

→ small title

→ bullet point

→ code block

Example:

My Project

This project helps users do simple tasks easily.

Using simple formatting makes your README look cleaner and easier to read.

Save Your Changes

After editing, save the file.

If your project uses Git, update your README online by running:

git add README.md
git commit -m "Updated README"
git push

This uploads your changes for others to see.

Check Your README

Before you finish, read your updated README and check:

Is it easy to understand?

Are the steps correct?

Does it look clean and organized?

Are there any spelling mistakes?

A quick review makes your file look more professional.

Final Tip

Keep your README updated whenever you change your project.
A clear README helps others use your project without confusion—and makes your work look polished and complete.