Forem: Bilal Asghar

React's Responsive Magic: Harnessing useCheckMobileScreen Hook 🔥

Bilal Asghar — Sat, 12 Aug 2023 11:14:56 +0000

Hey fellow developers! Have you ever thought about how to make your React app look good on both small mobile screens and big desktop computers? You know, we have these things called media queries in CSS that help us with that. But sometimes, dealing with media queries can be tough and make things messy. Well, guess what? You don't need to worry anymore!
Let me introduce you to a new friend: the 'useCheckMobileScreen' custom hook. It's here to make things easier for you!

Meet the Hook in Action

Now, let's see how this magical hook works in your code:

import { useEffect, useState } from "react";

const useCheckMobileScreen = () => {
  const [width, setWidth] = useState(window.innerWidth);

  const handleWindowSizeChange = () => {
    setWidth(window.innerWidth);
  };

  useEffect(() => {
    window.addEventListener("resize", handleWindowSizeChange);
    return () => {
      window.removeEventListener("resize", handleWindowSizeChange);
    };
  }, []);

  return {
    isMobile: width <= 768,
  };
};

export default useCheckMobileScreen;

import useCheckMobileScreen from "hooks";
const App = () => {
  const { isMobile } = useCheckMobileScreen();
  return (
    <>
      {isMobile ? (
        <div>Render something for Mobile Only</div>
      ) : (
        <div>Render Something on Desktop Only</div>
      )}

      {/* Also In Case if you have different styles for mobile & desktop */}
      <p
        className={`${
          isMobile ? "mobile-screen-paragraph" : "desktop-screen-paragraph"
        }`}
      >
        Text Goes here
      </p>
    </>
  );
};
export default App;

Wrapping It Up

So there you have it, the secret to making your React app a superstar on every screen: the useCheckMobileScreen hook! It's a simple little helper that makes a big difference in creating a user-friendly and adaptable app. So go ahead, give it a try, and watch your app shine bright on screens big and small. Happy coding, and keep spreading that responsive magic! 🌟📱💻

Power of Promises in JavaScript - Asynchronous Magic 🔥

Bilal Asghar — Wed, 09 Aug 2023 06:23:51 +0000

Promise is a good way to handle asynchronous operations.

It's used to find out if the asynchronous operation is successfully completed or not.

A promise may have one of three states

Pending - process is not complete
Fulfilled - operation is successful
Rejected - an error occurs

Create a Promise

To create a promise object, we can use the Promise() constructor

let promise= new Promise(function(resolve,reject){
   //do something
})

If the promise returns successfully, the resolve() function is called. And, if an error occurs, the reject() function is called.

Example

Let's suppose that the program below is an asynchronous program.

const count=true;
let countValue= new Promise(function(resolve,reject){
 if(count)
   {
     resolve("There is a count value");
   } else {
        reject("There is no count value");
   }
});

Promise Chaining

Promises are useful when you have to handle more than one asynchronous task, one after another.
For that, we use promise chaining.
You can perform an operation after a promise is resolved using methods then(), catch() and finally().

then() Method

The then() method is used with the callback when the promise is successfully fulfilled or resolved.

promiseObject.then(onfulfilled,onRejected);

You can chain multiple then() methods with the promise.

//returns a promise
let countValue = new Promise(function(resolve,reject)
 {
  resolve("Promise resolved");
 })

// execute when promise is resolved successfully.
countValue.then(function successValue(result){
     console.log("result");
}).then(function successValue1(){
     console.log("You can call  multiple functions this way.");
});

// Promise resolved
// You can call multiple functions this way

catch() Method

The catch() method is used with the callback when the promise is rejected or if an error occurs.

//returns a promise
let countValue = new Promise(function(resolve,reject){
   reject("Promise rejected");
})

// execute when promise is resolved successfully.
countValue.then(function successValue(result){
    console.log("result");
}).catch(function errorValue(result){
    console.log("result");
});

// Promise rejected

Promises Vs Callback

JavaScript Promise	JavaScript Callback
The syntax is user-friendly and easy to read	The syntax is difficult to understand
Error handling is easier to manage	Error handling may be hard to manage

Farewell, Nodemon! 💔

Bilal Asghar — Fri, 04 Aug 2023 07:31:39 +0000

Nodemon has been our trusty friend, helping Node.js developers by automatically restarting our servers whenever we made changes to our code.

So if you don’t know what nodemon is, according to their official website:

“Nodemon is a utility depended on about 3 million projects, that will monitor for any changes in your source and automatically restart your server. Perfect for development.” (nodemon.io, 2023).



npm install -g nodemon #install it globally
npm install -D nodemon #install it locally (dev dependency)

nodemon server.js localhost 8080 #then to run your local dev server

But now, with the release of Node.js 18, we don't need Nodemon anymore. Node.js 18 comes with a cool new feature called "--watch" that does the same thing. In this article, we'll explore how to use this built-in feature and enjoy an easier coding experience.

The Magic of "--watch"

With Node.js 18, we now have a built-in solution for auto-reloading, which means we can say goodbye to Nodemon. The magic is in the "--watch" feature. It allows Node.js to keep an eye on our code and automatically restart the server whenever we make changes.

For a Single Entry Point File:



node --watch server.js

For Multiple Watch Paths:



node --watch-path=./src --watch-path=./tests index.js

Disabling Console Output Clearing:



node --watch --watch-preserve-output server.js

Goodbye, Nodemon! 💔 It's been a wild ride, but we're ready to embrace change and explore new horizons. We'll forever cherish the auto-reloading memories, but it's time to move forward without you. #NewChapter #NoMoreNodemon

Building a File Upload REST API with Node.js and Express🔥

Bilal Asghar — Wed, 02 Aug 2023 06:23:58 +0000

Introduction

In today's web applications, file uploads have become a common feature, enabling users to share images, documents, and other files with ease. As a developer, you can implement this functionality by building a File Upload REST API using Node.js and Express, providing a seamless experience for your users. In this article, we'll guide you through the process of creating a robust and secure file upload API step by step.

Prerequisites

Before we begin, make sure you have the following prerequisites installed on your system:

Node.js and npm: Ensure you have Node.js and npm (Node Package Manager) installed on your machine.
Express.js: Set up an Express.js project by initializing a new Node.js application and installing the Express package.
Multer: Install the Multer package, which will facilitate handling multipart/form-data, allowing us to process file uploads.

Step 1: Setting Up the Project

Let's kickstart the project by creating a new directory and initializing a Node.js project:

mkdir file-upload-api
cd file-upload-api
npm init -y

Install Express.js and Multer packages:

npm install express multer

Step 2: Create the Server

Create an index.js file and set up the basic Express server:

// index.js
const express = require('express');
const multer = require('multer');
const app = express();
const port = 3000; // You can use any available port

app.listen(port, () => {
  console.log(`Server is running on http://localhost:${port}`);
});

Step 3: Configure Multer for File Uploads

Next, we'll configure Multer to handle file uploads. Create a new folder named uploads to store the uploaded files:

mkdir uploads

Update the index.js file to configure Multer:

// index.js
const express = require('express');
const multer = require('multer');
const app = express();
const port = 3000;

// Multer Configuration
const storage = multer.diskStorage({
  destination: (req, file, cb) => {
    cb(null, 'uploads/');
  },
  filename: (req, file, cb) => {
    cb(null, Date.now() + '-' + file.originalname);
  },
});

const upload = multer({ storage });

app.listen(port, () => {
  console.log(`Server is running on http://localhost:${port}`);
});

Step 4: Define the File Upload Endpoint

Now, let's create an endpoint to handle file uploads. We'll use the upload.single() middleware from Multer to handle a single file upload with the field name 'file':

// index.js
const express = require('express');
const multer = require('multer');
const app = express();
const port = 3000;

// Multer Configuration...
// ...

// File Upload Endpoint
app.post('/upload', upload.single('file'), (req, res) => {
  if (!req.file) {
    return res.status(400).json({ error: 'No file uploaded' });
  }
  res.json({ message: 'File uploaded successfully', filename: req.file.filename });
});

app.listen(port, () => {
  console.log(`Server is running on http://localhost:${port}`);
});

Step 5: Test the API

node index.js

Use a tool like Postman or any other API client to send a POST request to http://localhost:3000/upload, with the file attached in the request as form data with the key 'file'. You should receive a response with a success message and the filename of the uploaded file.

Conclusion

Congratulations! You've successfully built a File Upload REST API using Node.js and Express. This API can handle single-file uploads securely and efficiently. You can further enhance this API by adding validation, supporting multiple file uploads, or integrating it with a database to store file metadata.

Github Repository: https://github.com/MalikBilal111/file-upload-node-rest-api

Connect with me on Linkedin and GitHub to stay updated and join the discussion!

Navigating JavaScript Objects: Different Iteration Methods 🚀

Bilal Asghar — Sat, 29 Jul 2023 06:02:06 +0000

In JavaScript, objects don't support native iteration, preventing us from using popular "for...of" loops designed for arrays. Similarly, methods like map() or forEach() don't work since they are specific to arrays.

However, fear not! There are alternative ways to iterate through JavaScript objects effectively. Let's explore two of them below:

Using "for...in" Loop:

The "for...in" loop comes to the rescue when dealing with JavaScript objects. This loop allows us to iterate through the enumerable properties of an object effortlessly. Here's an example of how you can use the "for...in" loop for this purpose:

const myObject = {
  name: "Bilal",
  age: 25,
  occupation: "Senior Software Engineer",
};

for (let key in myObject) {
  console.log(key, myObject[key]);
}

Utilizing "Object.entries()":

Another approach is to use "Object.entries()". This method returns an array containing arrays of key-value pairs representing the enumerable properties of the object. We can then use array methods like "map()", "forEach()", or even "for...of" loops to iterate through the returned array:

const myObject = {
  name: "John",
  age: 30,
  occupation: "Developer",
};

const entries = Object.entries(myObject);

entries.forEach(([key, value]) => {
  console.log(key, value);
});

Both methods provide effective ways to loop through JavaScript objects, enabling us to handle their properties efficiently. So, whether you prefer the simplicity of "for...in" or the versatility of "Object.entries()", these techniques will empower you to navigate through objects with ease. Happy coding!

A Guide to Cache Storage in JavaScript: Boosting Performance with Caching

Bilal Asghar — Fri, 28 Jul 2023 06:29:08 +0000

In modern web development, optimizing website performance is crucial for providing a smooth and efficient user experience. One powerful technique to achieve this is by leveraging caching mechanisms. JavaScript offers a powerful API called Cache Storage, which allows developers to store and manage cached responses, reducing server load and speeding up page loading times. In this article, we'll delve into the world of Cache Storage and explore how it can be implemented to boost the performance of your web applications.

What is CacheStorage?

Cache Storage is an API that forms a part of the Service Worker API in JavaScript. It provides a mechanism to cache network responses and assets, making them available for retrieval later without the need to make a new network request. By storing responses locally, subsequent requests for the same resources can be handled faster, leading to improved page load times and reduced data usage.

The Benefits of Caching

Faster Load Times
Offline Support
Reduced Bandwidth

Working with CacheStorage

// Register the service worker
if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/service-worker.js')
    .then(() => {
      console.log('Service worker registered.');
    })
    .catch((error) => {
      console.error('Error registering service worker:', error);
    });
}

// Cache a response
self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open('my-cache')
      .then((cache) => {
        return cache.addAll([
          '/',
          '/styles.css',
          '/app.js',
          '/logo.png',
          // Add other assets to cache here
        ]);
      })
  );
});

// Intercept fetch requests and serve from cache if available
self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.match(event.request)
      .then((response) => {
        return response || fetch(event.request);
      })
  );
});

Conclusion

Cache Storage in JavaScript is a powerful tool for improving website performance by caching responses and assets. By leveraging the caching mechanism, you can significantly reduce page load times, provide offline support, and conserve bandwidth. However, it's essential to use caching judiciously and update cache entries when resources change to ensure users receive the latest content. With the right implementation, Cache Storage can be a game-changer in optimizing web applications and providing users with a seamless experience.