Forem: Rabeeh Ebrahim

Simplify VS Code: Ditch Your Auto-Save Extension Today

Rabeeh Ebrahim — Sat, 01 Feb 2025 08:24:30 +0000

If you are already using the third-party auto-save extension. There’s a good news for you, VS Code comes with a built-in auto-save feature.

The problem with the third-party auto-save extension is that you can't adjust the delay to save the file.

On each keypress, the plugin will try to save the file, which will compile the code, thus making the compiling process slower. This will affect your developer experience when the codebase is larger.

In this tutorial I will help you to enable the auto-save and set the delay for it. After enabling this settings, you can uninstall your auto-save extension.

Step 1: Go to the Settings

Open Settings by going to File > Preferences > Settings

Step 2: Configure Auto-Save

Type "auto save" in the settings. Click the "Files: Auto Save" dropdown and select the "afterDelay" value. Set the "Files: Auto Save Delay" to 1000 milliseconds, as shown in the screenshot below.

Step 3: Restart Visual Studio Code Editor

After restarting Visual Studio Code, the auto-save feature will be active, making your development experience more smoother.

I hope you found this tutorial helpful. Stay tuned for more tutorials!

Demystifying HTTP Status Codes: Essential Knowledge for Node.js Newbies

Rabeeh Ebrahim — Thu, 07 Sep 2023 16:23:12 +0000

Status codes are an essential part of web development, including Node.js, as they provide communication between the client (usually a web browser) and the server. They indicate the outcome of an HTTP request, helping developers and users understand what happened during a request-response cycle.

Here's a brief overview of why status codes are important:

Communication: Status codes allow the server to communicate the outcome of a request to the client, indicating whether the request was successful, encountered an error, or requires further action.
Debugging: They assist developers in diagnosing and debugging issues with web applications by providing clues about the nature of the problem.
User Experience: For end-users, status codes help in understanding why an operation failed (e.g., a broken link or access denied), leading to a better user experience.

HTTP status codes are categorized into five series:

1xx (Informational): This series provides interim responses to inform the client that the server is still processing the request. These are rarely used in practice.
2xx (Successful): These status codes indicate that the client's request was received, understood, and successfully processed.
3xx (Redirection): These codes indicate that further action is needed to fulfill the request. They often involve redirecting the client to a different URL or resource.
4xx (Client Errors): These status codes signify that the client has made an error in the request, such as requesting a non-existent resource or lacking proper authentication.
5xx (Server Errors): These codes indicate that the server encountered an error or is incapable of performing the request due to various reasons.

Common HTTP Status Codes for Node.js Developers:

200 OK: The most common success code, indicating a successful request and response.
201 Created: Used when a new resource has been successfully created as a result of the request.
204 No Content: Indicates that the request was successful, but there is no response body to return.
301 Moved Permanently: Signals a permanent redirection to a different URL.
400 Bad Request: Indicates that the client's request is malformed or contains invalid data.
401 Unauthorized: The client must provide valid credentials (e.g., a username and password) to access the requested resource.
403 Forbidden: The client does not have permission to access the requested resource, even if authenticated.
404 Not Found: The requested resource could not be found on the server.
500 Internal Server Error: A generic server error response when no more specific message is suitable.
503 Service Unavailable: Indicates that the server is temporarily unable to handle the request, typically due to overloading or maintenance.

Deploy Your Nodejs app on Render.com

Rabeeh Ebrahim — Mon, 30 Jan 2023 17:45:39 +0000

If you finish a project using Nodejs and wondering where to deploy for free. You have come to the right place. Before talking about this let's talk about why you should deploy your project in the cloud. The main thing is that you can showcase your project to the world. Where others can benefit from your app and also you can showcase it to the recruiter. It helps in landing a job.

There are many cloud services to deploy but here I am focusing on Render.com. Why render? because it's completely free. You got free 100 GB bandwidth and 500 build minutes. That’s enough to deploy your project as a student or as a hobbyist. Now, let's start the step-by-step process to deploy the app.

Step 1 - Create an Account

Sign up for render.com. I recommend you sign up using a GitHub account. So it will be more convenient to add projects from your repository. And also make sure that you push your project into a GitHub repository without .env and node_modules.

Step 2 - Select the Repository

Click the “new” button on the navbar then select “web service”. Select the repository you want to deploy in the list under “connect a repository” and click “connect”. If you don’t find your list, click on the Configure account under your GitHub account username. Select your username on the install render page. Select ‘All repositories’ and save.

Step 3 - Create Nodejs App

Fill in the name of your project. If you want to deploy from another branch select branch from the drop-down menu or leave it as the default value. Change your start command to a node + the name of the main file to execute in order to run the application. In my case, it will be ‘node app.js’. And click the “Create Web Service” to initiate your Nodejs app.

Step 4 - Add Environment Values

Voilà! you just created your first Nodejs app. But there is another important thing to do. Which is adding environment variables. remember that we ignored .env files while pushing the code. So we need to add env variables to the deployed app manually. Click on the environment on the side panel. Click “Add Environment Variable”. Add key and value there. After adding all environments click “save changes”.

Finally, we made it. The app should be redeployed again after updating the environment variables. Check the log section to see any errors. Wait for some minutes and check the URL provided right below the project name.

Thanks for reading! Hope you like it. Follow me for more content like this.

How I Get Into The Open-Source World

Rabeeh Ebrahim — Sun, 29 Jan 2023 16:53:36 +0000

I always ponder about how to get into the open-source world. People are talking about open source and Its benefits like improving coding skills, learning clean code, team collaboration, job opportunities…etc. In order to contribute all you want is a few git commands, a programming language you are interested in, and minimal usage of GitHub.

My journey starts when the arrival of the Hacktoberfest event in 2022. This event is conducted by Digital Ocean annually in the month of October. Their main motive is to make a contribution to open-source as a part of your life.

You just need to make 4 contributions to any valid GitHub repositories. If it’s successful and you will win a t-shirt or a tree to plant. The choice is yours, you can choose either of these options. They will ship that to your country without any extra penny. And if it’s a tree. It will be planted for you.

Besides code contributions, you can do low-code or no-code contributions as well. Such as writing or improving documentation, translation, testing…etc. This was a new thing in 2022 Hacktoberfest because, in the last year's event, they didn’t bring this low-code and no-code contribution. So this is a good opportunity for those who have less experience in the technical field. You can learn more about low code contribution here.

Before Hacktoberfest, I occasionally made some small contributions. My first contribution was fixing a typo in 30 Days of Javascript by Asabaneh. I also contributed to a fitness website called Fitnezz. Which is an HTML website. As a beginner programmer, you don’t need to get advanced in order to contribute. If you know HTML and CSS that’s enough to contribute. Open source is not only for Building real-world projects. It’s also a way for learning and sharing what you know.

While participating in Hacktoberfest I contribute to the project called MAMOMIA. Which is a food-ordering website made with HTML, CSS, and JavaScript. I made four pull requests (contributions) there. Which was a great experience for me. As a reward, I got the t-shirt which will eventually ship to my country.

Hacktoberfest is a great kickstart for me to start my open-source journey. After that event, I started to contribute to some projects. This year I will contribute as much as I can. So that I can improve my coding skill, network with people, and get job opportunities as well. If you are interested in open source, don’t wait for the next Hacktoberfest. Just learn the basics of git and GitHub and start contributing now.

Thanks for reading my blog. If you like this feel free to give a thumbs up on this article and follow me for more tech content like this.

Originally posted on rabeeh.tech

How to Deploy a React App

Rabeeh Ebrahim — Thu, 15 Dec 2022 10:47:45 +0000

If you are a beginner in react and watched a couple of tutorials on the internet then you probably built some projects to showcase. So what will be the next step? Yeah, absolutely, you are right! We need to deploy it on the internet so that everyone can have a look at your project.

Before deploying, I just want to give you some advice: try adding some additional features or tweaking the UI of your project, don't just deploy it as-is. If you're feeling adventurous, try building the same project without watching the tutorial. Although, You can refer to some parts for guidance.

Okay now, let’s deploy it to a hosting provider. I am using Netlify here. There is also another hosting provider to deploy your react app. let’s focus on Netlify here.

Create an account in Netlify using GitHub and create a team. Click Add new site and select ‘Import an existing project’. Then you should select the repository to import. after that, you can see some settings for your project. below like this:

You don’t need to do anything here. Just click “Deploy site”.

Ta-da! Your react app will be deployed soon and you can see the link in your project overview.

Mom in Tech (MongoDB Atlas Hackathon 2022 on DEV)

Rabeeh Ebrahim — Thu, 08 Dec 2022 22:30:39 +0000

What I built

Introducing Mom in Tech. A tech community for single moms. Who are struggling to meet both ends. Read blogs and atomic essays, Chat live, Participate in events and many more.

Category Submission:

Search No More (Search Blogs, Events, Jobs)
About Real-time (Group Chat)
Choose Your Own Adventure

App Link

https://momintech.netlify.app/

Screenshots

Description

A Tech Community for single moms, who are struggling to raise their children and make ends meet. Get inspired by the successful and motivational stories of fellow members. Acquire knowledge from articles and resources.

Post blogs, atomic essays, thoughts, and success stories here. Let your content inspire other members of this community. Attend events happening near you. Apply to job openings and many more.

Chat live in group. Start chating with fellow techies.

Link to Source Code

https://github.com/codewithrabeeh/mom_in_tech

Permissive License

MIT

Background

(What made you decide to build this particular app? What inspired you?)
I saw a tweet from a random person. It was about her life as a single parent. And she was trying hard to land a job in tech. Ofcourse, she is interested in tech. but her miserable life stops her from learning tech.
That's where this idea came from. A community for single moms to share their thriving stories, resources, jobs...etc. to become successful in tech.

How I built it

(How did you utilize MongoDB Atlas? Did you learn something new along the way? Pick up a new skill?)
Atlas change stream and autocomplete search are amazing features. The blogs were very helpfull to implement this. At first I thought it will be a tough nut to crack. But the articles and vlogs from mongodb team have helped me. Also the user experience of mongodb atlas is great. I learnt many thinks along with this journey.

Is it okay to post every (programming related) medium blogs to dev.to?

Rabeeh Ebrahim — Sat, 01 Oct 2022 14:43:33 +0000

What's your thoughts on this?

How To Remove The Uncommitted Changes in Git

Rabeeh Ebrahim — Tue, 21 Jun 2022 12:28:30 +0000

Have you ever changed your mind and tried to remove the uncommitted changes? I stuck at once. Doing basic things in git is easy-peasy, like live hosting, committing, pushing…etc. but when you do advanced stuff. You will be in a pickle soon.

Maybe, I am a beginner at using git at that time. Though it’s easy to remove the uncommitted changes. All you have to do is:

git reset --hard [commit id]

Actually, you don’t need that commit id (to do on the current branch). You can do without that. The recent uncommitted codes will be removed from your git folder and become as fresh as your last commit.

How to Kill a Local Host in Linux

Rabeeh Ebrahim — Wed, 08 Jun 2022 14:24:46 +0000

Sometimes when you try to run a port through terminal, you may end up getting errors like 'address already in use'.

I get this even when I disconnect the host. Although it happens sometimes only. Follow this steps to Kill the local Host.

Step 1:
Open Your Linux Terminal

Step 2:
Types this command below.
sudo lsof -iTCP:3000 -sTCP:LISTEN
Please note that: type your port address instead of 3000

Step 3:
You get an output similar to this.

COMMAND   PID   USER   FD   TYPE DEVICE SIZE/OFF NODE NAME
node    25215  user    20u  IPv6 240148      0t0  TCP *:hbci (LISTEN)

note that PID

Step 4:
type kill 25215

Voila, you killed it :)