Forem: Taimoor Sattar

9 reasons to use Gatsby Framework for React developer

Taimoor Sattar — Sun, 01 Jan 2023 20:03:38 +0000

Gatsby is a React-based framework that can be used to create static and dynamic websites. Most React developers would think why would we need Gatsby if we can build websites using React?

React is not a Framework, but it is a Javascript library used to build reusable components. To build the website, We need to take care of many things e.g. Page routing, code automation, Image optimization, SEO, etc. For that, we need to install an extra package to build the code infrastructure for the website.

Instead of building the infrastructure from scratch, we can use a framework (built on React) to build the website.

There're many React frameworks available but the most popular are Nextjs, Gatsbyjs, and Create React App. Below I've outlined 9 reasons to use Gatsby Framework for React developers.

Sr#	Reasons	Description
1.	Gatsby Functions	We can define an API function in the Gatsby that responds to the incoming HTTP request. Gatsby function is like a server function that is executed when we send the HTTP request.
2.	Gatsby Plugin	Gatsby provides thousands of plugins that we can use in the project to add functionality to the website. Moreover, Gatsby provides a source plugin that we can use to source data at build time from different resources e.g. WordPress, CSV, SANITY, excel, APIs, etc.
3.	Filesystem Routes	In Gatsby, we can create a Page component to define the route of the website. We can define static or dynamic routes based on the need. Dynamic route renders the page based on the slug in the URL.
4.	Partial Hydration	React Server Component is possible with Partial Hydration. With Partial Hydration, Gatsby sends only necessary Javascript to the client browser. Partial Hydration is like executing React component on the server.
5.	Render Data	Gatsby gives the choice to the user to render the website either at build time (Static Site) or at runtime (Server-Side Rendering).
6.	Head API	You might be familiar with React Helmet NPM Package that is used to manage the meta tags in the document Head. Gatsby provides Head API out of the box that we can use to manage the meta tags in the document Head.
7.	Script Component	Gatsby provides a script component that we can use to load the script component on the website. With the Script Component, we can define loading strategies that provide performance out of the box.
8.	Slice API	In Gatsbyjs, we can use Gatsby Slice API to build only those pieces of component that are changed and else remain constant.
9.	GraphQL Data Layer	Gatsby ships with GraphQL data layer by default. We can use the GraphQL layer to query the build time data.

If all the above benifits makes sense to you, you might need to try Gatsbyjs. If you're interested to learn, I've wrote a Gatsbyjs Course.

How To Code And Build Your Website?

Taimoor Sattar — Fri, 15 Jul 2022 10:08:00 +0000

In this blog, I share with you a brief roadmap on how you can start to code and build your website online.To start writing code, you first need to have a code editor. The most popular choice for the code editor among developers is the VScode editor.

To get started, you first need to understand the basic languages e.g. HTML, CSS, and Javascript. HTML is a markup language, CSS is used to style HTML elements, and Javascript loads dynamic content. You can understand it better by looking at the image below, where the skeleton of the body is described as HTML, the outer skin is described as CSS and his action as Javascript.

If you want to learn more about the basic languages, you can follow the below link

A client-side language such as HTML, CSS, or Javascript is responsible for displaying content on a browser (front-end). If we want to perform server-side tasks like a filesystem and connect with the database; then we need to learn server-side languages e.g. nodejs, and PHP. You have the option to choose between different server-side languages. If you are a WordPress lover, then PHP is the way to go. If you want to write Javascript on the server, then Nodejs is the option.

As mentioned, Javascript is used to load dynamic content (UI) without refreshing the page e.g. validating user input, popup modal/ads, toggling dark and light mode, etc. But if the UI of the website becomes more complex, then handling it with Javascript could be a very lengthy task. So, we need a more robust UI library, Reactjs. React is the JavaScript library for building user interfaces and is the most popular among developers. It helps you manage a lot of things easier with features like Virtual DOM(normal DOM updates are slow), handling data with states, component-based structure, etc.

Along with ReactJS, we need a framework that makes our development workflow smoother e.g. Page route, SSR, SSG, code automation, image optimization, etc. The most popular React frameworks are Gatsbyjs and Nextjs. As I’m more inclined towards Gatsbyjs, here I’ll discuss the Gatsbyjs framework. Gatsby is a modern web framework built on top of React and GraphQL. We can use Gatsbyjs to build both static and dynamic sites. To get started with Gatsbyjs, you can choose Gatsby starter template. In the Gatsby project, any **.js file located in the src/pages folder serves as a page route. To start running the Gatsby project, we can execute the below command in the terminal.

npm run develop

After, Your site is now running at http://localhost:8000.

We also need a backend server in Gatsbyjs to perform backend tasks. Luckily, in Gatsby, we can write serverless functions without running servers. To create a serverless function, we can create a **.js file at the src/api location in the project. In the frontend, we can execute the serverless function by sending HTTP requests to the respective API route.

For example, the newsletter.js file located at src/api create the API route at http://localhost:8000/api/newsletter. So to execute the respective function from the frontend, we can send the HTTP response to the respective API route as in the below code:

import axios from "axios"

async function onSubmit(data: { name, email }) {
 let subscribe = await axios.post(`/api/newsletter`, {
 name: String(data.name),
 email: String(data.email),
  });

 if (subscribe?.data?.message === "success") {
 console.log("Great!!!");
  }
}

To store the user’s data we need a database. There are many options to choose between the database e.g SQL or non-SQL. To interact with the database, we need a server e.g. nodejs. But, some of the database companies allow the developer to perform CRUD (create, read, update, and delete) operations on the database using the API. So, we can add an extra API layer to the database. Instead of interacting with the database, we can send the HTTP requests to the API route to retrieve or mutate the data. In this way, we can perform CRUD operations on both clients (frontend) and server sides.

For example, Sanity_io is the unified content platform. To mutate and retrieve the data from the Sanity server, we can send the HTTP request to the respective API route along with the query parameter.

To deploy your website, you need to have a public domain and a host server. If you don’t have a public domain, don’t worry you can host your website on the subdomain of the host server. The most popular hosting website are listed below.

Netlify
GitHub Pages
Heroku
Vercel
Render
Surge
Firebase

Depending on the hosting website, you might have many options to build and deploy your website. But, the approach that we can follow is to push your code on Github (ship your code) and then deploy it on the netlify server as shown below

Netlify is the hosting platform to host your assert/code live on the web. Netlify triggers a build command whenever you push your code up on Github. After your website is successfully built, netlify generates a public URL that you can visit to view your website. To learn more about how to deploy your website on netlify, you can visit this page.

Final Words

You have a brief understanding of how you can learn to code. To start off, practice some code online and get your hands dirty with the project. Some of the projects that you start doing right now are listed below

Build a responsive website with HTML, CSS, and Javascript
Build a todo list with React Project
Store user’s details in the database.

In case you are interested in a more in-depth course, you can check out the Build website with Gatsbyjs - course.

Create an image slider using HTML and CSS

Taimoor Sattar — Fri, 06 May 2022 11:27:34 +0000

In this section, we learn how to create image slider using HTML and CSS. You can view the full source code at the below link.

https://codepen.io/taimoorsattar/pen/yLJBdKO

👆👆👆

To get started, we can structure Html code as shown below:

<div class="wrapper">
  <h2>Image Slider</h2>
  <div class="slider">
    <img
      src="https://i.picsum.photos/id/694/500/500.jpg?hmac=cEe2DO9tVxp0o0HjSI5RboKc75ofkq50NvKBIlB_0fQ"
      alt="pic"
    />

    <img
      src="https://i.picsum.photos/id/531/500/500.jpg?hmac=eaduedF4dw0jS6AeDrrxNJIxAlsmWfdZWEPdEG84WRw"
      alt="pic"
    />

    . .
    <!-- More Images Here. -->
    . .
  </div>
</div>
<!-- wrapper -->

You can add as many image as you like. To download dummy images, you can visit picsum.photos site.

In the above HTML, we have define the class names to the HTML elements that is structure as below.

.wrapper
  └── .slider
      └── <img>
      └── <img>
      └── ....<img>...

We can insert as many image as we like. We can only see those images that are visible to us. As describe in the below image, yellow area is the visible area where image are shown. The image slider left to reveal more images.

Next, we need to define the width and height of the visible area as shown above. To define the width of visible area, we can define the .wrapper class as below.

.wrapper {
  margin: auto;
  max-width: 960px;
}

In order to allow more images to be revealed, the visible area should scroll. For that, we can define the .slider class as below.

.slider {
  overflow-x: scroll;
  white-space: nowrap;
}

Next, to make the scroll bar of slider more fancy, we can write the below code in CSS.

::-webkit-scrollbar {
  height: 5px;
  width: 10px;
  border-radius: 5px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 5px;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 5px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555;
}

Also, I've wrote a blog about CSS scrollbar if you're interested to learn, visit the below link.

CSS scrollbar

Finally, our image slider preview as below.

How Do I Build A Platform To Sell My Course?

Taimoor Sattar — Mon, 21 Mar 2022 16:00:59 +0000

There are many online platforms for selling courses online, however, I found a few limitations. For the course platform, I would like more customization of landing pages, subscriptions, and content structure. Therefore, I created my own platform for selling courses myself.

Here, I'll briefly describe how I built a platform for selling my course. We used Gatsby Framework, Sanity_io, and Stripe to build the website.

Gatsby is a framework built on React. We use the Gatsby Framework to build the frontend and backend. The benefits of using the Gatsby framework are as follows:

It supports thousands of plugins that we can use in the project.
We can fetch the data both at build and runtime.
Run serverless function.

To get started with the Gatsby Framework, you can choose the starter template from the below page.

https://www.gatsbyjs.com/starters

The starter template is the reference point. You can customize the starter template as per your need. For the project, we used Tailwind CSS to style the HTML elements. Tailwind CSS provides utility classes that we can use in the project. Take a look at the image below to see how tailwind works.

You can also find tons of Tailwind CSS components online that you can use in your project. Some of the example websites are listed below.

In order to make the website available on the internet, we host the project on Github and deploy the repo on Netlify. Netlify provides a better user experience to build, deploy, and scale production applications.

Gatsby is a framework, not a database. So, we need a database to store and manage the content data. I use Sanity_io for that purpose. You can see the official Sanity page below.

https://www.sanity.io

Sanity_io has two layers as below.

Sanity Studio
Sanity Server

The Sanity Server is a database, fully managed by the Sanity team so we don't need to worry about that. Sanity has a pricing model that charges for data usage.

Sanity Studio is a CMS that allows us to fully customize the document's schema. In our case, we can create different documents in Sanity Studio e.g. course, customer, subscription, etc. For each document, we can define custom schema as per the requirements.

Stripe is the platform we use to process online payments. To collect payments from users, we need to build a checkout page. In Stripe, we have multiple options to create checkout. Below are two approaches to creating Stripe checkout:

Stripe built-in checkout (fully managed by Stripe team).
Create custom checkout using the Stripe API.

Stripe's built-in checkout is easier to use since we can have fewer bugs and more payment solutions out of the box.

How to interconnect different layers of service?

The data is stored in Sanity Studio, the frontend UI is built on Gatsby Framework, and recipient subscription details are available on the Stripe server. As described, we have three layers of services. We want the data to be available to the user in the Gatsby project. To glue the data layers, we can use the API.

By using the Stripe Node API, we can retrieve and modify the recipient subscription. In the Gatsby framework, we use serverless functions to execute the Stripe Node API calls. You can find the Stripe Node API on the below page.

https://stripe.com/docs/api?lang=node

To get the Sanity data in the frontend, we can send the HTTP requests to the respective API route. We can use the Sanity GROQ language to get the desired data from the Sanity server. You can learn more about Sanity GROQ language on the following page.

https://www.sanity.io/docs/groq

Final words

Here, I discuss briefly how I built my course platform website. If you want to learn more, you can check the below course.

Build A Standout Website

Also follow me on twitter @taimoorsattar7 for more update.

How to use Promise in JavaScript

Taimoor Sattar — Thu, 05 Aug 2021 10:09:56 +0000

Promise in JavaScript is the way to wait for a certain action to process or complete. The promise has the following states:

Pending: incomplete (initial state), neither fulfilled nor rejected.
Fulfilled: The process was successfully completed.
Rejected: The process failed.

So, where the promise is useful? We can use promise in JavaScript in a different situation. For example:

Wait for the response from the HTTP request
async and await function
Schedule Task e.g. setTimeout and setInterval

We can use fetch in JavaScript to retrieve the data from a certain API endpoint. The fetch in JavaScript is a promise that returns the data if the request is successfully processed.

Let's take an example. We have 1st person that's giving the promise and 2nd person that's waiting for the promise to fulfill.

In JavaScript, we can define the promise as below:

const myPromise = new Promise((resolve, reject) => {
  setTimeout(() => {
    if(Math.random() > 0.5){
      resolve('foo');
    }else{
      reject("Exception!")
    }
  }, 300);
});

In the above, we define the promise that waits for 0.3 seconds and returns the pass or fails message based on the boolean logic (true or false).

Now, to wait for the promise to complete, we can write code in JavaScript as below:

myPromise
.then(value => { return value + ' and bar'; })
.then(value => { console.log(value) })
.catch(err => { console.log(err) })
.finally(() => {
    console.log('Promise completed');
});

In the above code, the following callback function runs:

.then: Executes when the process is successfully completed
.catch: Executes when the process is failed
.finally: execute at every condition

Moving further... Let's say, we have more than one person that is giving the promise. We can define in JavaScript as below:

const promise1 = Promise.resolve("great");
const promise2 = new Promise((resolve, reject) => {
  setTimeout(resolve, 300, 'Yesss!!!');
});

We can use Promise.all that returns a promise which resolves after all of the given promises have either fulfilled or rejected. We can write in JavaScript as below:

Promise.all([promise1, promise2]).then((values) => {
  console.log(values);
})
.catch(error => {
  console.error(error.message)
});

The above code will log the following in the console:

["great","Yesss!!!"]

The previous example works OK if all the promises resolve successfully. But... let's say, If one of the promises is rejected, the overall Promise.all will be rejected even if every other promise is resolved successfully.

Let say, If we are waiting for many promises. Some promises got fulfilled and some are rejected. In JavaScript, we can define promise as below:

var p1 = new Promise((resolve, reject) => {
  setTimeout(() => resolve('p1_delayed_resolution1'), 1000);
});

var p2 = new Promise((resolve, reject) => {
  reject(new Error('p2_immediate_rejection'));
});

In Promise.all, we can use the .catch statement to handle the error of each promise.

Promise.all([
  p1.catch(error => { return error }),
  p2.catch(error => { return error }),
]).then(values => {
  console.log(values[0]) // "p1_delayed_resolution"
  console.error(values[1]) // "Error: p2_immediate_rejection"
})

How to become web developer in 2021?

Taimoor Sattar — Tue, 12 Jan 2021 08:04:07 +0000

To learn about web development in 2021, you have to understand what makes up the websites.

In the blog, we cover the fundamental concepts to kickstart your career as a web developer in 2021.

Start from the basics

If you want to learn website development, start from the basics. Before you run, you have to learn how to walk. The basic ingredient of website development is HTML, CSS, and JavaScript.

HTML is the structure layout of the website. For example, heading, paragraph, sidebar, etc.

CSS used to style the HTML content of the website. CSS adds styles to the content like color, margin, padding, typography, etc.

JavaScript is used to add/render dynamic content to the website without refreshing the page. For example, open and close menu-content items, popup modal, etc. We can use JavaScript to load the content based on certain actions e.g. click of the button, load content based on specific routes, etc. If your website is complex, handling dynamic content with just JavaScript is complex work. You need a library that can help dynamic content rendering easy for you. That's where ReactJS helps you to build user interfaces. Some other React alternative is Svelte, VUE.js, Angular, etc.

HTML, CSS, and JavaScript are the front end of the website that browser can understand. We can manipulate and change the property/logic of HTML, CSS, and JavaScript on the browser using the inspect tool. So, if you are making a website that needs bank account validation, it's not a good idea to serve all of your logic on the front-end.

Connecting with the backend/database

Backend languages run on the server, not on the browser. NodeJS, PHP, etc are some programming languages that run on the servers. The server could be accessed by administrators, not the public. We can validate/perform the logical operation on the server.

In the Backend, you can perform the logical operations to CRUD (Create, Read, Update, and Delete) into the database. Different types of databases are SQL and non-SQL databases.

SQL database is table-based while the non-sql database is documentation-based (key-value).

Example of SQL databases are:

MYSQL
PostgreSQL

Examples of NON-SQL databases on the internet are:

MongoDB
Firebase

We use the database to store, retrieve, and manipulate the data on the server e,g. store login credential.

Contribute to open source projects

Taking an online course helps to learn the fundamental concepts of website development. After that, you can follow up with the open-source projects on the internet. Contributing to the open-source project helps you to learn the technique to solve problems in a more convenient way.

Search open-source projects on GitHub and start to contribute. Manage your project with version control using Git. Git helps you to collaborate with teams, track your history changes version control files.

Learn the Framework

The framework makes it easy for developers to start making websites as it bundles with the initial configuration settings. Configuration setting may include routing, code automation, architecture, etc. You can more focus on programming stuff, rather than automation/configuration stuff.

Examples of some modern React frameworks are NextJs, Gatsby, etc.

Manage documents on CMS

CMS (Content Management System) allows you to manage files/posts on the servers. CMS is mainly for administration purposes. With CMS, you can create, manage, update content on the website, assign different roles to the users, and upload files.

Examples of CMS are strapi, WordPress, etc.

Hosting project on the public server

To share your local project with the public, you need to host it on the hosting provider. There are different hosting providers on the internet. Some of them are listed below:

There are different architectures in which to host your website on the public server. You may choose monolithic or microservices architecture to host your website. There main difference between the two architectures is that whether you want all of your application services in one place(server) or host service in a different place (server). You can host your front-end application service on one server and back-end service on another server.

If you like this post, follow me on Twitter @taimoorsattar7 for more update.

To find out more, visit my blog taimoorsattar.dev.

javascript url

Taimoor Sattar — Wed, 30 Dec 2020 07:21:28 +0000

CSS with javascript

Taimoor Sattar — Wed, 30 Dec 2020 07:16:12 +0000

Is Create-React-App Good For SEO?

Taimoor Sattar — Wed, 23 Dec 2020 08:09:44 +0000

In short, create-react-app is not good for SEO.

why?

create-react-app is a SPA (single page application). In a SPA, all necessary HTML, JavaScript, and CSS code retrieved by the browser with a single page load or data add dynamically to the page based on certain actions.

Search engines and social media look for SEO meta tags on the website. Based on these meta tags, display formated content to the user.

By default in create-react-app, metatag like title and description mentioned in public/index.html. When the page loads, the default title shows in the tab of the browser and for every route, it follows the same.

What if, you are fetching an article post from an API and after fetching the data, it updates the value of title and description. But the default title shows up in the SEO, not the fetching title. If your app depends on SEO then it is a huge problem.

So how you can overcome this?

You need to prerender the create-react-app. To prerender, You can download either of two npm package as below:

The above plugins work well if you are not using Windows / local storage objects in your project (Javascript), else you need to follow some extra checks.

Moreover, you can use Gatsby and the next JS are the frameworks that are built on React with SEO friendly pre-rendered website.

You can follow me on Twitter @taimoorsattar7 for more updates.

How do you promote your online business?

Taimoor Sattar — Wed, 16 Dec 2020 09:53:53 +0000

How to Document your repository in GitHub?

Taimoor Sattar — Fri, 03 Apr 2020 21:52:00 +0000

Documentation of your repo will help you in many aspects. When you link your repo to the hiring team, they will better understand what your code is doing. Also, it will help others to contribute to your project. To write documentation for your repo, you can create README.md in the root of the repo.

README.md reads as a markdown file. I have also written details articles about Markdown Get Started Guide. Markdown does not give you whole lot control over the styling of the page. For example, center the image, adjust the width and height, etc. Additionally, you can also write HTML (inline-CSS) in the README.md file as shown below:

<div align="center">
  <br>
  <img alt="logo" src="/image.png" width="200px">
  <h1>Your headline</h1>
</div>
<br>

What information to include in `README.md`?

It all depends on your project. It is how you explain what the project is all about. But I have listed out some point that you can list in your documentation repo:

- Include Photo or logo
- How it Works
- Getting started.
- Prerequisites
- How to contribute (Write CONTRIBUTING.md)
- Information about team
- Related Project
- Contributors, Backers, or Sponsors.
- License

Add Table of Content (TOC)

If your README.md file has a long length, then it's better to add table of content. You can add a table of content like this below:

- [How it Works](#how-it-works)
- [Getting started](#get-started)
- [Contributing](#contributing)
- [Core team](#core-team)
- [License](#license)

Clicking the TOC link will scroll to the desire section.

## How it Works
your explanation...

## Getting started](#get-started)
your explanation...

## [Contributing](#contributing)
your explanation...

## [Core team](#core-team)
your explanation...

## [License](#license)
your explanation...

Create Badge/shields

Batches/shields look nicer as it adds information on your repo. Batches/Shields are small block legible badges in SVG and raster format, which can be included in GitHub readmes or any other web page. You can check the status of repo like code size, commit status, or deployments, etc. You can look at how these Badges look on the repo.

How you can add these badges

If you use Netlify to deploy your code; you get a badge on their dashboard which shows deploys status. shields.io and codetriage are also good resources to add badges for your repo. you can add in README.md as shown below:

<img src="https://img.shields.io/github/languages/code-size/taimoorsattar7/underlinejobs" alt="GitHub Code Size in Bytes">

further structure your documentation

README.md describes the basic information about the repo. If your information is long enough to fit into README.md, you can make further sections. For example, CODE_OF_CONDUCT.md and CONTRIBUTING.md. Write how to contribute to this repo in the CONTRIBUTING.md and code of conduct in CODE_OF_CONDUCT.md. In this way, you can be more organized.

Your documentation should be grammatically correct so it is properly understood by others. You can check grammatical mistakes using tools like hemingwayapp and grammarly.

Show some love if you like this article. Follow me on twitter @taimoorsattar7 as I post frequently.

Whats your's set of software used in you daily routine?

Taimoor Sattar — Fri, 20 Dec 2019 18:53:40 +0000

In daily routine, there are lot of software I used to interact with. I prefer Grammarly for writing, Vs studio code for writing code, affinity designer for designing stuff, gitbook for documentation.