Writing
Articles and notes I've published on Hashnode
Set the height of a container to 100vh - x
To set the height of a container to 100vh - x (where x is the height of your navigation bar), you can use a combination of Tailwind CSS classes and custom utility classes. Unfortun…
Tailwind CSS Container: The Complete Developer's Guide
What is Tailwind's Container? Tailwind's .container class is a responsive utility that sets max-width based on screen size. Unlike Bootstrap, it's intentionally minimal, giving you…
How to Free Up Storage Space and Improve Performance on Windows 10/11
Introduction In this comprehensive tutorial, I will walk you through the process of optimizing your Windows storage and enhancing system performance. By following these systematic…
Ultimate Guide to Website Auto Redirects
I’ll share a real-life experience with you. I built a website and deployed it on Netlify.app, but later I moved it to my own custom domain. The problem was that the old Netlify URL…
PHPMailer + Gmail SMTP: Simple Configuration Tutorial
To configure SMTP in PHPMailer, you need three main things: Host, Username, and Password. Host: This is your SMTP server. You can use Gmail, Amazon SES, Outlook, or even your own w…
Send Emails Like a Pro with PHPMailer in PHP
This guide will walk you through setting up and using PHPMailer to send emails, even with attachments. What is PHPMailer? PHPMailer is a popular PHP class that provides a full-feat…
JavaScript Cheat Sheet — FreeCodeCamp
Basics Use let to declare variables you may reassign. Use const for variables that shouldn’t change. Variable names: letters, numbers, _, $ — can’t start with a number. Initializat…
Go Global with Your Localhost
Have you ever built a web app on your local computer and wished you could share it with someone across the world without deploying it to a server? Or maybe you want to test webhook…
Top 10 Arabic Google Fonts for Modern Designers
The Most Beautiful Arabic Fonts on Google Fonts – A Curated Guide for Designers Typography is not just about choosing a font—it's about finding a voice. For Arabic script, which ca…
Fixing - MongooseServerSelectionError: Could Not Connect to MongoDB Atlas
MongoDB Atlas is a powerful cloud-based database solution, but sometimes developers run into the MongooseServerSelectionError when trying to connect their Node.js application to Mo…
Understanding Proxy Servers: A Comprehensive Guide
Introduction A proxy server acts as an intermediary between a user and the internet. It's also known as web proxy, or anonymous IP. It offers various benefits, including enhanced s…
Firebase Realtime Database in ReactJS
First, follow the initial four steps from the Firebase Authentication in ReactJS guide to create your Firebase project. For detailed instructions, refer to that article. In this ar…
Firebase Authentication in ReactJS
I don't want to make this blog theoretical. I aim to explain the process of building authentication using Firebase and ReactJS. The blog is short and easy to understand, making it…
How to create an API using Node.js and Express.js
Creating an API in Node.js using Express.js involves several steps. This guide aims to simplify the process, focusing on practical implementation rather than lengthy theoretical ex…
Lets Learn ExpressJS
What is ExpressJS? Express.js is a lightweight and flexible web application framework for Node.js, providing powerful features for building web servers and APIs with ease and effic…
Let's Learn NodeJS
What is NodeJS? NodeJS is an open-source, cross-platform, JavaScript runtime environment. You can run JavaScript outside of the browser. JavaScript can also talk to native machine…
Hooks in React
To understand the scenario of why you need hooks in React, you must this video completely. I am jumping directly to the keynotes, but make sure you also watch Hitesh sir's storytel…
Custom React
Building a custom react: Let's construct our own React and explore its behind-the-scenes workings. File Name: index.html <meta name="viewport" content="width=device-width, initial-…
File Structure in React
Deep dive into the basic react file structure node_modules: stores all React dependencies and packages, including core React modules (e.g., react, react-dom) and their associated d…
Create React Projects
Pre-requisite: Code Editor (VS Code or other) Node.js (an open-source, cross-platform JavaScript runtime environment) Install Node.js node -v (check version in command line) React.…