Forem: NasreenKhalid

How to Set Up a GitHub Actions Cron Job to Prevent Supabase Inactivity

NasreenKhalid — Sat, 22 Mar 2025 19:37:16 +0000

If you want to keep your Supabase account active and prevent automatic suspension due to inactivity, you can set up a GitHub Actions cron job to ping your database at regular intervals. This tutorial will guide you through the process in simple steps.
Steps to Create a GitHub Actions Cron Job
1️⃣ Create a New GitHub Repository (If Not Already Done)
Go to GitHub and create a new repository.

Clone the repository to your local system or work directly on GitHub.

2️⃣ Navigate to the .github/workflows Directory
In your repository, create a new folder named .github/workflows.

Inside this folder, create a new file, e.g., prevent-supabase-inactivity.yaml.

3️⃣ Write the GitHub Actions Workflow YAML File
Copy and paste the following YAML code into the file:

yaml
Copy
Edit
name: Prevent Supabase Inactivity

on:
  schedule:
    - cron: '0 0 * * 0'  # Runs at midnight every Sunday
  workflow_dispatch:  # Allows manual triggering

jobs:
  ping-database:
    runs-on: ubuntu-latest
    steps:
      - name: Make an API request to Supabase
        run: |
          curl -X GET "https://your-supabase-url.com/rest/v1/" \
          -H "apikey: YOUR_SUPABASE_API_KEY" \
          -H "Authorization: Bearer YOUR_SUPABASE_API_KEY"

4️⃣ Replace the Placeholders with Your Supabase Details
your-supabase-url.com → Replace with your Supabase project URL.

YOUR_SUPABASE_API_KEY → Replace with your Supabase API key.

5️⃣ Commit and Push the Workflow to GitHub
Save the file and commit the changes:

6️⃣ Enable GitHub Actions in Your Repository
Go to your GitHub repository → Click on Actions.

Find the newly added workflow and ensure it's enabled.

7️⃣ Verify That the Workflow Runs Automatically
Your cron job will now run every Sunday at midnight (UTC).

You can manually trigger the workflow from the GitHub Actions tab.

Final Thoughts
This simple automation helps prevent your Supabase account from being marked inactive by periodically sending a request to your database. If needed, you can modify the cron schedule based on your preferences.

Happy Coding...

https://replit.com/refer/nasreenazaan

The Digital Dive Book -- My own community platform

NasreenKhalid — Sun, 27 Oct 2024 08:23:20 +0000

This is a submission for the Wix Studio Challenge: Community Edition.

My Community Platform

Demo

This platform is a space where creative minds unite to share, learn, and inspire! Here, skilled artists, crafters, and DIY enthusiasts from all backgrounds showcase their unique talents, share tutorials, and exchange tips. Whether you want to improve your skills, learn something new, or connect with like-minded creatives, this community is for everyone who loves making and creating.

There are pages like:

Home
Our crafts
Members
Events
Contact
About
Seek Advice
Profile

Development Journey

I used JavaScript to:

Fetch and Display Data from APIs: Integrated external APIs (like a quote or advice generator) to bring real-time data onto the site.

Build a Community Forum Feature: Created a space where users could post and comment on arts and crafts tutorials. Using JavaScript, I enabled real-time updates, so users see new posts and interactions.

Enable Custom User Interactions: I added interactive elements, such as "Like" buttons, personalized user feeds, and filtered search options, all powered by custom JavaScript to enhance engagement.

Enhanced Form Submissions: Through JavaScript, I customized the behavior of forms, enabling conditional logic and custom validation to improve the ease of sharing skills, resources, and feedback among community members.

Velo APIs

I used following APIs:

Open Weather Map API to generate weather data
Ninja quotes Api to generate quote of the day
News api -- https://newsapi.org -- to generate headlines
https://api.adviceslip.com/advice to generate an advice

Submission: Nasreen Khalid

I passed PSM I Certification

NasreenKhalid — Sun, 26 Nov 2023 08:04:17 +0000

Hello all,
So, I took a break from coding for some time and decided to opt for PSM I certification and I am very delighted to share the news that I passed my PSM I Certification and after going through all the tedious process, I wanted to share my journey with you all just as an assistance for your future endeavors.
PSM I stands for professional scrum master certification and is pivotal for people who want to grasp the concepts of Agile and Scrum development processes and their implementation.
Myself being a software engineer and having the experience of Business analyst for more than six years considers this certification as an add-on in my career in terms of both learning and growth.
The steps that I followed to achieve the goal of passing the exam is as follows:

Step I: Register yourself on https://www.scrum.org/ and download the official scrum guide from the following link:

https://scrumguides.org/
This document is very important, you need to read it thoroughly and understand the concepts very well.

Step II:

To get extra practice, I used the following resources:

Free Open Assessments from scrum.org

https://www.scrum.org/open-assessments
The questions here are lesser than actual test but gives you a fair idea of what you will have in the exam

Charged Resource

https://mplaza.training/
I purchased this resource for about 15-20$ but I would say it is worth the money as there are unlimited tests available which will give you very good practice for the actual exam

Free Resource

https://mlapshin.com/index.php/scrum-quizzes/
This is free and there are two phases Real mode and Learning mode, both of them are very useful and helps you a lot in preparing for the exam
https://www.thescrumexperts.com/
This one is also free and again very very helpful to test your concepts for actual exam.

Step III:

After I had done too many practice tests and when I felt confident enough to appear in the exam, I purchased the certification for $200 (which is a hefty amount in my opinion since they are not even giving a hard copy of the certificate) from scrum.org and attempted it the same day. Make sure there are no distractions during the test and read the questions carefully before answering. The tactic which worked for me was to read the options one by one and discard the irrelevant ones straightaway so you can focus on the likely answers, this strategy will also save time.
The exam is of 60 minutes with 80 questions which means you have 40 seconds to spend on every question but since I had already done a lot of practice tests so I could manage the time very well and I even had around 15 minutes left in the end to revise my answers and change them (if needed)

I scored 91% in the exam and got a congratulations email from scrum.org with the certificate and badge. The certificate does not expire so it's good to showcase this skill in your resume.

It's really not necessary that you pass the exam in the first attempt, don't worry if you didn't make it in the first time, you can practice more and give it another try and you will nail it.

This is all about the certification process. If you have any more questions regarding the process, you can leave a comment and I will get back to you.

Meanwhile, happy coding...

https://replit.com/refer/nasreenazaan

How to sort an array of month names -- Javascript

NasreenKhalid — Wed, 31 May 2023 06:25:32 +0000

Hi there, so I was working with some dates and months arrays in javascript and came across this fact that if you sort an array of month names in javascript using the sort() method, it will sort the array in alphabetical order making 'April' the first month of the year which is not what we want. Following is the output when you simply use sort() method on an array of names in Javscript:



const months = ['January', 'March', 'February', 'May', 'June','April'];

months.sort()
console.log(months);

Below is the output:

So, what we should do is to define a new array which contains the names of the months in chronological order and then compare both the arrays and also we need to define a comparison function which will compare the indices of both the arrays using the indexOf method, the function will look like this:



const months = ['January', 'March', 'February', 'May', 'June','April'];

months.sort((a, b) => {
  const monthOrder = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
  return monthOrder.indexOf(a) - monthOrder.indexOf(b);
});

console.log(months);

The resulting array of 'months' will show the names in the correct order as we want:

Hope you find this article useful while brushing up your basic javascript skills.
Have a good time coding...

Create modal with Reactstrap

NasreenKhalid — Tue, 30 May 2023 04:44:32 +0000

Modals are a great way to display input forms or display any alert/notification/message to the users.
Today, we will use the react-bootstrap library to display a sign-in form and try to add different controls to open/close the modal on user actions.
Let's start by creating a new react app by typing in the following command:

npx create-react-app modal_app

After the react app is created, we will install reactstrap and bootstrap in our project using the following command:

npm install reactstrap bootstrap

Now we will write the code to open the modal in App.js file which will look like this:

import React from 'react'
import 'bootstrap/dist/css/bootstrap.min.css';
import {
    Button, Modal, ModalFooter,
    ModalHeader, ModalBody
} from "reactstrap"

function App() {

    // Modal open state
    const [modal, setModal] = React.useState(false);

    // Toggle for Modal
    const toggle = () => setModal(!modal);

    return (
        <div style={{
            display: 'block', width: 700, padding: 30
        }}>
            <h4>ReactJS Reactstrap Modal Component</h4>
           <Button color="danger" onClick={toggle}>
        Click Me
      </Button>
            <Modal isOpen={modal}
                toggle={toggle}
                modalTransition={{ timeout: 2000 }}>
                <ModalBody>
                     Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
          aliquip ex ea commodo consequat. Duis aute irure dolor in
          reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
          culpa qui officia deserunt mollit anim id est laborum.
                </ModalBody>
          <ModalFooter>
          <Button color="primary" onClick={toggle}>
            Do Something
          </Button>{' '}
          <Button color="secondary" onClick={toggle}>
            Cancel
          </Button>
        </ModalFooter>
            </Modal>
        </div >
    );
}

export default App;

We have added two buttons 'Do Something' and 'Cancel' in the footer of the modal for more user interactivity.

Modals look nice and gives a good look to our user interfaces. Hope you can use this modal in your future projects.

Happy coding...

React Date Range Picker

NasreenKhalid — Sat, 24 Dec 2022 11:13:03 +0000

Adding date range picker is an essential part of web applications when it comes to making a date selection or developing any kind of calendar component.
Today, we will try to explore the react 'react-date-range' package which is a handy react date library that allows us to choose date and date ranges.

Let's begin by installing the above mentioned package in our react app:



npm install --save react-date-range

Please note that the above package will expect the date-fns dependency in order to calculate days so we need to install the following also:



npm install --save react date-fns

After the necessary installations, create a separate component where you can add the date range code.

Following are the imports that will be required in our react-component:



import React, { useState } from "react";
import { addDays } from "date-fns";
import 'react-date-range/dist/styles.css'; // main style file
import 'react-date-range/dist/theme/default.css'; // theme css file
import { DateRangePicker } from 'react-date-range';

Now, we will use react useState hook to define the start_date, end_date and the key (selection of the dates)



  const [state, setState] = useState([
    {
      startDate: new Date(),
      endDate: addDays(new Date(), 7),
      key: "selection",
    },
  ]);

Please note that we will use the addDays dependency to specify the start_date and end_date.
Now we can call DateRangePicker Component in the following manner:



<DateRangePicker
        onChange={(item) => setState([item.selection])}
        showSelectionPreview={true}
        moveRangeOnFirstSelection={false}
        months={2}
        ranges={state}
        direction="horizontal"
      />

This will show a nice daterange selection on our web page which is useful in multiple scenarios.
Complete code for this component is shown below:



import React, { useState } from "react";
import { addDays } from "date-fns";
import 'react-date-range/dist/styles.css'; // main style file
import 'react-date-range/dist/theme/default.css'; // theme css file
import { DateRangePicker } from 'react-date-range';

const DateRange = () => {
  const [state, setState] = useState([
    {
      startDate: new Date(),
      endDate: addDays(new Date(), 7),
      key: "selection",
    },
  ]);

  return (
    <div>
      <h1>Safe Travels Co</h1>
      <h2>Book Your Flight below</h2>
      <DateRangePicker
        onChange={(item) => setState([item.selection])}
        showSelectionPreview={true}
        moveRangeOnFirstSelection={false}
        months={2}
        ranges={state}
        direction="horizontal"
      />
      ;
    </div>
  );
};

export default DateRange;

Hope you guys enjoy reading the above article.
Happy coding...

Push Notifications with React JS and Firebase

NasreenKhalid — Fri, 19 Aug 2022 11:01:25 +0000

Push notifications are an essential part of different marketing campaigns when it comes to digital business.

Today we will try to send push notifications setup in Firebase to our react app.

Create firebase project

Let's start by creating a new project in firebase and generate the firebaseConfig variable having all the important information as shown below:

Now in your React app >> src directory, create a firebase-config.js file and add the following code:

import { initializeApp } from "firebase/app";

const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_AUTH_DOMAIN",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_BUCKET_ID",
  messagingSenderId: "YOUR_SENDER_ID",
  appId: "YOUR_APP_ID",
  measurementId: "YOUR_M_ID",
};

// Initialize Firebase
export const firebase = initializeApp(firebaseConfig);

Now we need to generate a token from our react app which will help us to generate our notification from firebase.
For this add the following method in your react app > firebase-config.js

import { initializeApp } from "firebase/app";
import {getMessaging,getToken, onMessage} from 'firebase/messaging';

const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_AUTH_DOMAIN",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_BUCKET_ID",
  messagingSenderId: "YOUR_SENDER_ID",
  appId: "YOUR_APP_ID",
  measurementId: "YOUR_M_ID",
};

// Initialize Firebase
export const firebase = initializeApp(firebaseConfig);

const messaging = getMessaging();

export const requestForToken = () => {
  return getToken(messaging, { vapidKey: "YOUR_VAPID_KEY" })
    .then((currentToken) => {
      if (currentToken) {
        console.log('current token for client: ', currentToken);
        // Perform any other neccessary action with the token
      } else {
        // Show permission request UI
        console.log('No registration token available. Request permission to generate one.');
      }
    })
    .catch((err) => {
      console.log('An error occurred while retrieving token. ', err);
    });
};

export const onMessageListener = () =>
  new Promise((resolve) => {    
    onMessage(messaging, (payload) => {
      resolve(payload);
    });
  });

Please note that vapid_key in the above code will be generated by navigating to Firebase console of your project >> Cloud messaging section >> Web Configuration section and generate key pair as shown below:

Then click on 'Send test message' button and add the token here generated from your react app.

To complete the code in our react app, lets go to the react app again and create a folder Notifications where we'll create a file Notifications.js and call the requestToken method from firebase-config.js as shown below:

import React, {useState, useEffect} from 'react'
import toast, { Toaster } from 'react-hot-toast';
import { requestForToken, onMessageListener } from '../../firebase-config';

const Notification = () => {
  const [notification, setNotification] = useState({title: '', body: ''});
  const notify = () =>  toast(<ToastDisplay/>); 
  function ToastDisplay() {
    return (
      <div>
        <p><b>{notification?.title}</b></p>
        <p>{notification?.body}</p>
      </div>
    );
  };

  useEffect(() => {
    if (notification?.title ){
     notify()
    }
  }, [notification])

  requestForToken();

  onMessageListener()
    .then((payload) => {
      setNotification({title: payload?.notification?.title, body: payload?.notification?.body});     
    })
    .catch((err) => console.log('failed: ', err));

  return (
     <Toaster/>
  )
}

export default Notification

Please note that we have used 'react-hot-toast' library to display our notifications in front-end.

Now when you will run your react app, you will see a token generated in the console which you have to copy/paste in the 'Add an FCM registration token' field in firebase/notification/compose as shown below:

Clicking on Test button will pop-up the notification on your react app.

Please note that you have to create a firebase-messaging-sw.js file in the public folder of your app where you will add the following code in order to create a service-worker which will run in the background of your app:

// Scripts for firebase and firebase messaging
// eslint-disable-next-line no-undef
importScripts("https://www.gstatic.com/firebasejs/8.2.0/firebase-app.js");
// eslint-disable-next-line no-undef
importScripts("https://www.gstatic.com/firebasejs/8.2.0/firebase-messaging.js");

// Initialize the Firebase app in the service worker by passing the generated config
const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_AUTH_DOMAIN",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_BUCKET_ID",
  messagingSenderId: "YOUR_SENDER_ID",
  appId: "YOUR_APP_ID",
  measurementId: "YOUR_M_ID",
};

// eslint-disable-next-line no-undef
firebase.initializeApp(firebaseConfig);

// Retrieve firebase messaging
// eslint-disable-next-line no-undef
const messaging = firebase.messaging();

messaging.onBackgroundMessage(function (payload) {
  console.log("Received background message ", payload);

  const notificationTitle = payload.notification.title;
  const notificationOptions = {
    body: payload.notification.body,
    icon: "/logo192.png",
  };

  // eslint-disable-next-line no-restricted-globals
  return self.registration.showNotification(
    notificationTitle,
    notificationOptions
  );
});

Now you can create a test message from firebase and it will show on the react app.

Happy coding...

React Slick Slider with Delete functionality

NasreenKhalid — Wed, 15 Jun 2022 05:58:51 +0000

Sliders are one of the most common and widely used ways to display images in our web applications.
There are many packages that allow us to make use of pre-built sliders and make our websites beautiful.
Today, I will discuss the react-slick-carousel over here and display the images using react slick carousel, also we will create a delete button with each image allowing user to delete the image on the fly.
You can read further documentation related to react-slick-slider here

Installation

Let's begin by first installing the slider package

npm

npm install react-slick --save

yarn

yarn add react-slick

Also, we would need to install the css files for the slider:
`

import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";

Now, let's create an image array having some images which we will display in the carousel:

const images= [
    "https://media.istockphoto.com/photos/forest-wooden-table-background-summer-sunny-meadow-with-green-grass-picture-id1353553203?b=1&k=20&m=1353553203&s=170667a&w=0&h=QTyTGI9tWQluIlkmwW0s7Q4z7R_IT8egpzzHjW3cSas=",
"https://image.shutterstock.com/image-photo/old-brick-black-color-wall-260nw-1605128917.jpg",
  ],

We would also need to define a settings variable which contains the basic options for our slider like below:

const settings = {
  dots: false,
  autoplay: true,
  infinite: true,
  speed: 500,
  slidesToShow: 1,
  slidesToScroll: 1,                                                             
};

Now, in our React component we will call our slider and make it work:

 export default function ReactSlider() {

const [pics, setPics] = useState([]);

  const settings = {
    dots: true,
    infinite: true,
    speed: 500,
    slidesToShow: 1,
    slidesToScroll: 1
  };
  return (
<>
    <Slider {...settings}>
      {images.map((item, index) => (
            <div key={index}>
               <img alt="name"
                    src={item}
                    style={{ width: 400, height: 300 }}
                    />
         <div style={{ position: "absolute", top: "0px" }}>
            <Button onClick={() => {           
             const filterIndex =images.indexOf(i);
             if (filterIndex > -1) {        
             images.splice(filterIndex, 1)                                   
             setPics(images.filter((item, i)=>i !== item));                                 
                            }
                            }                                  
                 >X</Button>
                 </div>
                    </div>
                     ))}
    </Slider>
</>
  );
}

Notice that we have also placed an 'X' button with each image and filtered the images array excluding those images where user have clicked the delete button so as soon as the button is clicked the image will get deleted from the slider and remaining images will be shown.

I hope you enjoyed reading the above article .

If you are looking for a learning experience that makes you a professional developer with hands-on coding skills, join one of the best courses here

Happing coding...

Update Mongo DB By NodeJS Cron Job

NasreenKhalid — Wed, 08 Jun 2022 07:53:34 +0000

We have multiple scenarios where we need to update our database fields at some particular time instants based on some conditions for example I need to update the status of all students to a particular batch after the course has finished, there are many ways to automate this process so that the fields in my database are updated automatically on a particular time.

Node JS Cron Package

Performing a particular task at a particular instant can be efficiently achieved through a Cron Job.
Node Cron is a handy npm package where you schedule different jobs and they run at the particular time instants periodically. Cron Jobs are common to achieve tasks like sending email notifications, deleting error logs or updating some order statuses etc.

Problem Statement

Today, I am also going to discuss a same scenario where I have a 'Campaigns' table in the mongo database and if the end_date of campaigns is lesser than today then I have to update the status of all those campaigns to 'inactive'. I will make use of Node JS Cron Job to run every midnight and check all the records in 'Campaigns' collection and update the ones that have the above mentioned condition.

Now let's start coding.
First we need to install node-cron package in our node app, I am assuming that you have already created a simple node/express app, if you are new to Node then you can follow my nodejs/express tutorial here.

Let's begin by installing node-cron package by using following command:

npm install --save node-cron

Now in the index.js file we will import the cron package and schedule our job:

const cron = require('node-cron');

Below is the cronjob runs every midnight and set the active campaigns to inactive if end_date is lesser than today

Also, note that first we need to convert today's date in the same format as saved in db

var todayDate = new Date().toISOString().substring(0, 10);

cron.schedule('0 1 * * *', () => {
  console.log('Running a task every midnight (1:00 am)');
  Campaign.findOneAndUpdate({ campaignStatus: 'active', end_date: { 

    $lt: todayDate, 

 }}, { $set:  {campaignStatus: 'inactive' }},

 {returnNewDocument: true}, (err, data) => {
  if (err) {
    return errorHandler(dbError, res);
  }
})
});

The above job runs every midnight and update the campaigns status accordingly.

If you wish to read more about setting the time intervals in your cron jobs then this is a very helpful link describing all the asterisks purpose in our cron job schedule.

Hope you enjoyed reading this article and it helps you in your coding journey.

If you are looking for a learning experience that makes you a professional developer with hands-on coding skills, join one of the best courses here

Happy coding...

Code Splitting in React

NasreenKhalid — Tue, 19 Apr 2022 09:46:28 +0000

Code Splitting is a common practice in the world of application development, it basically is the phenomenon where you split the huge bundles/packages in your application into smaller chunks and download them only when required.

Problem Statement

To explain our problem statement, we can take the example of an app where user is on the login page and there is a possibility that this is not a valid user or even if he is a valid user he may not complete the login process and enter into my app, in both the cases we are wanting the user to download all of our app without considering the fact that this is a bad user experience as well as can result in a lesser performing application.

Code splitting technique helps avoiding the hassle of downloading all the files in an application in one-go, the root files can be downloaded immediately and the additional scripts are set to 'lazy' load after the page or application is interactive, thus improving the overall performance and user experience.

React applications can also grow humongous as you keep on adding components depending upon the nature of your application so here also we can employ the technique of code splitting where we create multiple bundles that can be loaded at runtime.

Code splitting allows us to keep the amount of code same and load the lines that will be required by the user or/and avoid loading those that may never be required by the user.

Dynamic Import

One way of implementing code splitting is through dynamic import. So, instead of doing this:

import { data } from './data';

console.log(data);

We can implement the below syntax which will be automatically splitted by Webpack:

import("./data").then(data => {
  console.log(data);
});

React.lazy

'lazy' is a React command that helps us to lazily fetch a component for example you can set the Products page to lazy load as shown below:

const ProductsPage = lazy (()=>import('../pages/products'))

React.lazy takes a callback function that must call a dynamic import(). This must return a Promise which resolves to a module with a default export containing a React component.
The lazy component should then be rendered inside a Suspense component, which allows us to show some fallback content (such as a loading indicator) while we’re waiting for the lazy component to load.

import React, {lazy, Suspense } from 'react';

const Products = lazy(() => import('./Products'));

function Main() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <Products />
      </Suspense>
    </div>
  );
}

You can even wrap multiple lazy components with a single Suspense component.
Code splitting makes our react apps much faster and efficient since every time the browser is refreshed it will not download the whole component again and just fetch it from cache and execute instantaneously.

It is crucial to decide where in your app to introduce code splitting. You want to make sure you choose places that will split bundles evenly, but won’t disrupt the user experience.

Code Splitting in Routes

A good place to start implementing 'Code Splitting' is with routes. Most people on the web are used to page transitions taking some amount of time to load. You also tend to be re-rendering the entire page at once so your users are unlikely to be interacting with other elements on the page at the same time.

Below is an example of using lazy loading with React Router:

import React, { Suspense, lazy } from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';

const Home = lazy(() => import('./routes/Home'));
const Products = lazy(() => import('./routes/Products'));

const App = () => (
  <Router>
    <Suspense fallback={<div>Loading...</div>}>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<Products />} />
      </Routes>
    </Suspense>
  </Router>
);

Code Splitting can also be helpful in setting the error boundaries in an app, for example when some modules fail to load due to some issue then error can be triggered gracefully. These errors are useful for the developers to help find the root cause of the issue and also provide a good user experience.

Avoid Waterfalls

It is very important to be very careful while you are splitting your code/components that run in a hierarchy.
For example, when you're code splitting at route level and your route is going to lazy load but the route itself loads two/three components, one of which is again lazy loaded and that component is again loading something else which is also lazy loaded so this will result in a messy waterfall and it will take a lot of time for your app to be actually interactive:

In order to avoid this situation, we can make use of the following points:

Make sure that you be very very smart while using the lazy loading and
Also, you can make use of 'Resource optimization' in javascript which is the 'preload' and 'prefetch' tag that instructs the browser to request a resource for a page/component about which we know that it will be lazy loaded at some point in time.

I will end this article by emphasizing that at the end of the day it is all about making your users happy and code splitting is one way of achieving that.

If you are looking for a learning experience that makes you a professional developer with hands-on coding skills, join one of the best courses here

Happy coding...

Discover the useLocation hook in React

NasreenKhalid — Mon, 14 Mar 2022 12:40:21 +0000

React js is a popular framework which allows us to develop component based web pages which are robust, fast and easier to maintain. Today, we will talk about the react-router-dom npm package which is a fully functional client and server-side routing package in React, it makes the navigation within different pages of our app easier and simple.
In this article, we will take a look at the useLocation hook included in the React Router library.

Create a React App:

Let's begin by creating a new app using the following command:

npx create-react-app myapp

Installing the React Router library:

Now, we would need to install the react-router-dom library by entering the following command in the terminal window of our app:

npm install react-router-dom

or if you are using yarn

yarn add react-router-dom

useLocation Hook:

In order to use any hooks from react-router-dom we would have to import them as follows:

import { useLocation } from ‘react-router-dom;

We can get the output of uselocation hook in the following manner:

const location = useLocation();
console.log(location);

useLocation hook returns the location object from the current url which includes the following

pathname: this the path of the url
search: the query string (?) included in the url
hash: result of the hash fragment (#) from the url

For example if I have a url http://localhost:3000/products/school/?name=bags then the result from useLocation object will be the following:

{pathname: '/products/school/', search: '?bags', hash: '', state: undefined}
hash: ""
pathname: "/products/school/"
search: "?bags"
state: undefined

Please note that the useLocation object will update each time when the url changes hence it is very useful in the cases when you want to trigger a function based on the change of your url. You can also extract the query parameters from the url through the useLocation object and make some decision based on the query parameter.
For example in the above url http://localhost:3000/products/school/?bags location.search will be equal to ?name=bags so we can display the products belonging to the "bags" category depending on the result obtained through the uselocation hook.

Example

Below is a small code snippet showing how we can extract the pathname and search parameter from uselocation hook:

import React from 'react';
import {useLocation} from "react-router-dom";

function Products() {

  const location = useLocation();
  console.log(location);

  return (
    <div>
      <h1>Products page</h1>
      <p>{location.pathname}</p>
      <p>{new URLSearchParams(location.search).get('name')}</p>
    </div>
  );
}

Running the above code snippet for http://localhost:3000/products/school?name=bags will return the following results:

pathname: /products/school
Query: bags

Thus we found out the useLocation is one of the very useful hooks in react-router-dom library and you can use it easily in your applications.

I hope you enjoyed reading this article.

If you are looking for a learning experience that makes you a professional developer with hands-on coding skills, join one of the best courses here

Happy coding....

Weather App using Node JS and handlebars templating engine

NasreenKhalid — Thu, 17 Feb 2022 12:51:35 +0000

As we all know that Javascript is a very powerful language which helps us to do amazing things on the web and with the combination of Node JS (running on the server-side) it has become even more tremendous.

Today, we'll create a simple weather app using the openweathermap api where user will enter a city and we will display the current temperature, weather condition, humidity value and name of the city. My goal here is to experiment with the integration of Node JS on the server side and handlebars as the templating engine just to give you guys a different touch of the syntax of templates, partials and views which we'll create to render the app on the webpage.

So, let's start by creating a new app in the code editor of your choice, I am using VS code and I will navigate in the terminal of my application and initialize node by typing:

npm init

This will create a package.json file in the root of your app indicating the metadata(information) related to your app and all the dependencies required in this app will also be handled in this file.
Next, we will install all the dependencies (npm packages) that we will use through out the project. I have mentioned the dependencies, their use and the commands required to install below:

express -- it is the standard server-side framework for Node JS that's why we need to have this installed

npm i express

handlebars template engine -- it is the templating language framework which we will use to generate the HTML for our views/pages

npm i hbs

request -- finally we would need the request module to make the HTTP calls and get the required data

npm i request

Now, we will create a src folder in the root directory of our app and create an app.js file there and require the dependencies and also place the initial code for the server to setup:

const express = require('express');
const req = require('express/lib/request');

const app = express();

const port = process.env.PORT || 3000;

// create a default route for our server
app.get('/', (req,res)=>{
    res.send('This is the default Route...')
})

app.listen(port, () => {
    console.log('Server is up and running on port: ', port)
});

The above code will make sure that the server is running on port 3000.
Please note that for this app you have to login to openweathermap website and generate an api key which will be used in the base url of this app.
We have defined the base_url and secret key in a separate file called config.js in an object called constants:

Now we will create another file weatherData.js in the root directory and call the api to retrieve current temperature, name of the city, weather description and humidity. For this purpose, we would have to import the request module since we will make an http request to the openweathermap api and then fetch the data from api:

const request = require('request')
const constants = require('./config')

const weatherData = (address, callback) => {
    const url  = constants.openWeatherMap.BASE_URL + encodeURIComponent(address) + `&appid=` + constants.openWeatherMap.SECRET_KEY

request({url,json:true},(error,{body})=>{
    // console.log(body)
    if(error){
        callback(`Can't fetch the data`,undefined)
    } else {
        callback(undefined, {
           temperature: body.main.temp,
           description: body.weather[0].description,
           cityName:body.name,
           humidity:body.main.humidity
        })
    }
})
}

module.exports = weatherData;

The above code is getting the data from the api in a callback function and targeting the response object to extract the required data which is

temperature: body.main.temp
description: body.weather[0].description,
cityName:body.name,
humidity:body.main.humidity

Now we can call this weatherData method in src/app.js to have access to the response:

const weatherData = require('../weatherData')

Also, we'll define a /weather route here where we can console.log the results obtained:

// This is the Route to get the weather data
// localhost:3000/weather?address=chicago
app.get('/weather', (req,res) => {
    const address = req.query.address

    if(!address){
        return res.send({
            error: "Please enter a location to search weather"
        })
    }
   weatherData(address,(error, {temperature, description,cityName,humidity}) => {
       if(error){
           return res.send({
               error
           })
       } 
       console.log(temperature,description,cityName,humidity)
       res.send({
           temperature,
           description,
           cityName,
           humidity
       })
   })
})

Also, we will be creating two folders under templates:

partials -- to create the partial to be used on different pages in our app like header/footer
views -- to create the html for homepage and other pages

We would need to specify the views and partials path in src/app.js as follows:

const hbs = require('hbs');
const path = require('path');

const port = process.env.PORT || 3000;

// specifying the path to our public folder having static assets
const publicStaticDirPath = path.join(__dirname,'../public')

const viewsPath = path.join(__dirname,'../templates/views')
const partialsPath = path.join(__dirname,'../templates/partials')

app.set('view engine','hbs');
app.set('views', viewsPath);
hbs.registerPartials(partialsPath)

app.use(express.static(publicStaticDirPath))

Please note that we also have a public directory in the root of our app where we'll define all the static assets like style.css and app.js

Now let's move to the views folder and create an index.hbs file where we will defing the html for the index page using handlebars templating engine:

<!DOCTYPE html>
<html>
    <head>
        <title>{{title}}</title>
        <link rel="stylesheet" href="css/style.css"/> 
    </head>
    <body>
        <div class="main-content">
            {{!-- > refers to the partial: header --}}
            {{>header}}
            <article class="widget">
                <h3 class="text">Please enter the location below:</h3>
                <form class="weatherLocation"><input placeholder="location..." type = "text"/><button>Seach</button>
                </form>
                <div class="weatherInfo">
                    <div class="temperature"><span></span></div>
                    <div class="description">    
                        <div class="weatherCondition"></div>
                         <div class="place"></div>    
                        <div class="humidity"></div>
                    </div>
                </div>
                <div class="date"></div>
            </article>
        </div>
        <script src="js/app.js"></script> <!-- absolute path -->
    </body>
</html>

Now we move on the app.js file which is created in the public/js folder where we will select the elements from the DOM, and render the output on the screen, please note that the style.css file is not included here but you can have a look at the complete code here

var fetchWeather = "/weather";

const weatherForm = document.querySelector('form');
const search = document.querySelector('input');


// const weatherIcon = document.querySelector('.weatherIcon i');
const weatherCondition = document.querySelector('.weatherCondition');

const tempElement = document.querySelector('.temperature span');

const locationElement = document.querySelector('.place');

const humidityElement = document.querySelector('.humidity');

const dateElement = document.querySelector('.date');

const monthNames = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]

dateElement.textContent = new Date().getDate() + ", " + monthNames[new Date().getMonth()].substring(0, 3) + " " + new Date().getFullYear();


weatherForm.addEventListener('submit', (event) => {
    event.preventDefault();

    locationElement.textContent = "Loading...";
    tempElement.textContent = "";
    weatherCondition.textContent = "";
    const locationApi = fetchWeather + "?address=" + search.value;

    fetch(locationApi).then(response => {
        response.json().then(data => {
            if(data.error) {
                locationElement.textContent = data.error;
                tempElement.textContent = "";
                weatherCondition.textContent = "";
            } else {
                locationElement.textContent ='City: ' + data.cityName;
                tempElement.textContent = (data.temperature - 273.5).toFixed(2) + String.fromCharCode(176);
                weatherCondition.textContent = 'Weather Condition: ' + data.description;
                humidityElement.textContent = 'Humidity: ' + data.humidity;
                weatherForm.reset();
            }
        }) 
    });

})

The code here is self explanatory in which we have just fetched the /weather route and rendered the output object into different divs on the webpage and once the output is displayed, we reset the form so that the user can type in another search value.

Also, please note that the openweathermap api returns the temperature in kelvin therefore we would have to subtract 273 from the output so that the temperature is displayed in Celsius.

We also display current date by calling the javascript standard new Date() method and since the getMonth() call will return a value from 0-11 but we want to display the name of the month so we store the names of the months in an array and retrieve the name of the month from the array depending on the result of new Date().getMonth() method.

locationApi is actually the endpoint which includes the base route i-e /weather and then the location which needs to be passed as the query parameter, this will make a call to the weatherData function and return our desired result.

I have tried to explain as much as possible in the above article, however you can get more insight in the app by going through the code here

If you are looking for a learning experience that makes you a professional developer with hands-on coding skills, join one of the best courses here

I hope you enjoyed reading the article..
Wish you all the very best of luck...
Happy coding...