DEV Community: Shahmir Faisal

The Power of a Standout Portfolio for Software Developers

Shahmir Faisal — Sun, 21 Jan 2024 12:54:11 +0000

In the fast-paced world of software development, where competition is fierce and innovation is key, having a standout portfolio is not just an advantage—it's a necessity. Your portfolio is more than a collection of projects; it's a visual narrative that can leave a lasting impression on potential employers, collaborators, and clients. Here's how you can make your portfolio compelling and truly stand out:

Crafting a Visual Narrative

Homepage Design

Eye-catching Introduction: Capture attention with a visually appealing homepage that provides a snapshot of your skills and experience.
Testimonials: Consider featuring brief testimonials or endorsements from colleagues, clients, or mentors to build credibility.

Technology Highlights

Skill Cloud: Showcase your proficiency in key technologies through an engaging visual representation, such as a skill cloud or tag cloud.
Achievement Showcase: Highlight notable achievements and milestones prominently on your homepage.

Visual Appeal

Interactive Elements: Incorporate interactive elements, such as animations or dynamic graphics, to enhance visual appeal and user engagement.
Portfolio Timeline: Create a visual timeline showcasing the evolution of your skills and major projects over time.

Showcasing Diverse Projects

Versatility is Key

Project Categories: Organize your projects into categories, highlighting diverse skills and areas of expertise.
Impact Metrics: Include quantifiable metrics showcasing the impact of your projects, such as improved efficiency or increased user engagement.

Provide Context

Problem-Solution Overview: Clearly articulate the problem each project aimed to solve and how your solution addressed it.
User Stories: Integrate user stories or testimonials to provide a human perspective on the impact of your work.
Project Challenges Blog: Dedicate a section to blog about the challenges faced in various projects and the innovative solutions implemented.

Visuals Matter

Interactive Demos: If applicable, include interactive demos or walkthroughs to allow visitors to experience your projects firsthand.
Before-and-After Visuals: Include visuals illustrating the challenges faced, emphasizing the transformation achieved through your solutions.

Highlighting Problem-Solving Skills

Core of Development

Scenario-Based Solutions: Describe real-world scenarios where your problem-solving skills made a significant impact.
Interactive Challenges: Integrate coding challenges or puzzles that demonstrate your approach to problem-solving.
Problem-Solving Blog Series: Develop a blog series focusing on different aspects of problem-solving in software development.

Discuss Challenges

Technical Deep Dives: Provide in-depth technical analyses of specific challenges encountered in your projects and the innovative solutions devised.
Lessons Learned Section: Dedicate a section to reflect on lessons learned from challenges and how they shaped your growth.

Case Studies

In-Depth Analysis: Expand on specific projects with comprehensive case studies, detailing decision-making processes, challenges, and iterative improvements.
Problem-Solving Frameworks: Illustrate the frameworks or methodologies you employ when tackling complex problems.

Providing Code Samples

Transparency Through Code

GitHub Integration: Showcase your commitment to transparency by seamlessly integrating links to your GitHub repositories or specific code samples.
Coding Style Guide: Provide a coding style guide within your portfolio, showcasing your commitment to clean and maintainable code.

Organized Code

Code Documentation: Emphasize well-documented code with comments, explaining key sections and providing insights into your coding practices.
Interactive Code Demos: Embed interactive code demos to allow visitors to explore your coding skills in real-time.

GitHub Contributions

Open Source Involvement: If relevant, highlight your contributions to open-source projects, demonstrating collaboration and community engagement.
Code Review Highlights: Showcase instances where you contributed to or received positive feedback on code reviews.

Incorporating Feedback and Iteration

Dynamic Portfolio

Evolution Timeline: Showcase the evolution of your skills and projects over time, emphasizing continuous learning and improvement.
Feedback Integration: Feature instances where you received feedback and how you incorporated it into your work, demonstrating adaptability.

Show Growth

Learning Journey Blog: Include a blog section discussing your learning journey, documenting challenges faced, and lessons learned.
Continuous Improvement Metrics: Highlight metrics that demonstrate your commitment to continuous improvement, such as certifications, courses, or new skills acquired.

Conclusion

In conclusion, a standout portfolio is not merely a compilation of projects; it's a holistic representation of your skills, problem-solving prowess, and growth as a developer. By incorporating testimonials, interactive elements, diverse project displays, and transparent code samples, you transform your portfolio into a compelling narrative that resonates with potential employers.

MyDevPage: Create a Portfolio Website Instantly

MyDevPage allows you to build a portfolio website in minutes. Focus on building great projects and enhancing your skills rather than wasting your time building a portfolio website from scratch or customizing expensive templates.

MyDevPage handles everything:

Portfolio Creation
SEO
Analytics
Customization
Custom Domain
Contact Form

How to use Next.Js 14 Server Actions

Shahmir Faisal — Wed, 10 Jan 2024 08:59:14 +0000

Next.Js 14 has added a lot of cool features that make development so much easier like:

App Router
Server Actions
Route Handlers
Client and Server Components

In this article, we will be covering Server Actions.

What are Server Actions

A Server Action is simply an asynchronous function that runs on the server whenever a form is submitted. It allows you to run the code directly on the server. This way, you don't have to make a separate backend or API and don't need to send requests to the API. You can communicate with a database directly in a Server Action.

You can use it in both client and server components.

Using Server Actions

Using Server Actions in Server Components

Simply make an asynchronous function inside a server component. Add the "use server" directive inside the function (at the top). Then attach an action property to the form element.

The Server Action receives a formData object as an argument that lets you access the values of the input fields. After this, you can perform validation and store information directly in a database. No need to create an API endpoint.

// server component

export const Form = () => {
  const createPost = async (formData) => {
    "use server"
    const title = formData.get("title")
    const description = formData.get("description")

    // store the post in the database directly
  }

  return (
    <form action={createPost}>
      <input type="text" name="title" />
      <input type="text" name="description" />
      <button type="submit">Submit</button>
    </form>
  )
}

Using Server Actions in Client Components

Since a client component is rendered on the client, you cannot create Server Actions in a client component. But what you can do is, you can create a new file and add the use server directive at the top of the file. Now any function you create inside of that file will be considered a Server Action. Then you can import those Server Actions into a client component.

"use server"

export const createPost = async (formData) => {
  const title = formData.get("title")
  const description = formData.get("description")

  // store the post in the database directly
}

Now you can import this Server Action in a client component.

// client component
"use client"

import { createPost } from './actions'

export const Form = () => {
  return (
    <form action={createPost}>
      <input type="text" name="title" />
      <input type="text" name="description" />
      <button type="submit">Submit</button>
    </form>
  )
}

Showing a Loading State

Now you might be wondering, how can we show a loading state because the function is being executed on the server.

To do this you can create a separate client component for your button. Inside of this component, you can use the useFormStatus hook. It tells you whether the Server Action has finished executing or is still being executed.

Note: You can only use the useFormStatus hook inside of a form. That's why you have to create a separate component for your button and place it inside the form.

"use client"

import { useFormStatus } from "react-dom"

export const Button = ({ children }) => {
  const { pending } = useFormStatus()

  return (
    <button type="submit" disabled={pending}>
      {children} {pending && "Loading..."}
    </button>
  )
}

Now we can use it inside the form.

// client component
"use client"

import { createPost } from './actions'
import { Button } from './Button'

export const Form = () => {
  return (
    <form action={createPost}>
      <input type="text" name="title" />
      <input type="text" name="description" />
      <Button>Submit</Button>
    </form>
  )
}

Handling Errors and Success State

Now to show errors and success messages to the user, we can make use of the useFormState hook. It accepts a Server Action and an Initial State as an argument. It returns the New State and a copy of the Server action.

// client component
"use client"

import { createPost } from './actions'
import { Button } from './Button'
import { useFormState } from "react-dom"
import { useEffect } from 'react'

export const Form = () => {
  const [createPostState, createPostAction] = useFormState(createPost, {
    error: null,
    success: false
  })

  useEffect(() => {
    if (createPostState.success) {
      alert("Post created!")
    }

    if (createPostState.error) {
      alert(createPostState.error)
    }
  }, [createPostState])

  return (
    <form action={createPostAction}>
      <input type="text" name="title" />
      <input type="text" name="description" />
      <Button>Submit</Button>
    </form>
  )
}

When using the useFormState hook. Your Server Action will receive an extra argument prevState. So you can modify your server action like this:

"use server"

export const createPost = async (prevState, formData) => {
  const title = formData.get("title")
  const description = formData.get("description")

  if (!title) {
    return { error: "Enter the title!", success: false }
  }

  if (!description) {
    return { error: "Enter the description!", success: false }
  }

  // store the post in the database directly
  return { error: null, success: true }
}

Conclusion

Server Actions in Next.Js 14 is an amazing feature. It makes development faster since you don't need a separate backend or API. From creating Server Actions to using them in different scenarios, this guide has provided a comprehensive overview of using Next.Js 14 Server Actions. To learn more about Next.Js 14 and Server Actions, read their official documentation.

MyDevPage: Create a Portfolio Website Instantly

MyDevPage handles everything:

Portfolio Creation
SEO
Analytics
Customization
Custom Domain
Contact Form

How to use Next.Js 14 with Supabase

Shahmir Faisal — Thu, 04 Jan 2024 13:50:36 +0000

Next.js provides a solid foundation for building React applications with server-side rendering, while Supabase offers a scalable and easy-to-use backend-as-a-service with PostgreSQL as the database.

Since the release of Next.js 13 and then Next.js 14, there have been a lot of changes. We now have the:

App Router
Client and Server components
Route Handlers
Server Actions

Combining these new features with Supabase will speed up the development process and will help you build things faster. So in this article, we will learn how to integrate Supabase with your Next.Js 14 project.

Setting up a Next.Js Project

npx create-next-app@latest

On installation, you'll see the following prompts:

What is your project named? my-app
Would you like to use TypeScript? No / Yes
Would you like to use ESLint? No / Yes
Would you like to use Tailwind CSS? No / Yes
Would you like to use `src/` directory? No / Yes
Would you like to use App Router? (recommended) No / Yes
Would you like to customize the default import alias (@/*)? No / Yes
What import alias would you like configured? @/*

After the prompts, create-next-app will create a folder with your project name and install the required dependencies.

Using Supabase in the Project

Now to use Supabase in the project we have to follow the following steps:

Installing the Supabase Libraries

Next, we have to install the required libraries to work with Supabase.

npm install @supabase/auth-helpers-nextjs @supabase/supabase-js

Setting the Environment Variables

Create a new file named .env.local in the root of your project and paste your Supabase Project URL and Anon Key.

You can get this information by going to the supabase project dashboard then on the left side click settings and then click on API.

NEXT_PUBLIC_SUPABASE_URL=PROJECT_URL
NEXT_PUBLIC_SUPABASE_ANON_KEY=ANON_KEY

Using Supabase in Client Components

To use Supabase in client components, call the createClientComponentClient function to create a Supabase client. You can then use this client to perform operations.

"use client"

import { createClientComponentClient } from "@supabase/auth-helpers-nextjs"
import { useState, useEffect } from "react"

export const ClientComponent = () => {
  const supabase = createClientComponentClient()
  const [users, setUsers] = useState([])

  const getUsers = async () => {
    const { data, error } = await supabase.from("users").select("*")
    setUsers(data)
  }

  useEffect(() => {
    getUsers()
  }, [])

  return <h2>This is a client component</h2>
}

Using Supabase in Server Components

To use Supabase in server components, call the cookies function and then call the createServerComponentClient function and pass the cookies object to create a Supabase client. You can then use this client to perform operations.

import { createServerComponentClient } from "@supabase/auth-helpers-nextjs"
import { cookies } from "next/headers"

export const ServerComponent = async () => {
  const cookieStore = cookies()
  const supabase = createServerComponentClient({
    cookies: () => cookieStore
  })

  const { data, error} = await supabase.from("users").select("*");

  return <h2>This is a server component</h2>
}

Using Supabase in Server Actions

To use Supabase in server actions, call the createServerActionClient function and pass the cookies function to create a Supabase client. You can then use this client to perform operations.

import { createServerActionClient } from "@supabase/auth-helpers-nextjs"
import { cookies } from "next/headers"

export const Form = () => {
  const addPost = async (formData: FormData) => {
    "use server"

    const title = formData.get("title") as string
    const description = formData.get("description") as string

    const supabase = createServerActionClient({
      cookies
    })

    const { data, error } = await supabase.from("posts").insert({
      title,
      description
    })
  }

  return (
    <form action={addPost}>
      <input type="text" name="title" />
      <input type="text" name="description" />
      <button type="submit">Submit</button>
    </form>
  )
}

Using Supabase in Route Handlers

To use Supabase in route handlers, call the cookies function and then call the createRouteHandlerClient function and pass the cookies object to create a Supabase client. You can then use this client to perform operations.

import { createRouteHandlerClient } from "@supabase/auth-helpers-nextjs"
import { cookies } from "next/headers"

export const GET = async (request: Request) => {
  const cookieStore = cookies()
  const supabase = createRouteHandlerClient({ cookies: () => cookieStore })

  const { data, error} = await supabase.from("users").select("*")

  return Response.json(data)
}

Supabase Authentication

Next, we will learn how to authenticate users and add authorization using Supabase.

Creating a Middleware

When using the Supabase client on the server, you must perform extra steps to ensure the user's auth session remains active. Since the user's session is tracked in a cookie, we need to read this cookie and update it if necessary.

Next.js Server Components allow us to read a cookie but not write back to it. Middleware on the other hand allows us to both read and write to cookies.

Create a new file named middleware.ts in the src folder (if you have one) or in the root of your project. And paste the following code:

import { createMiddlewareClient } from '@supabase/auth-helpers-nextjs'
import { NextResponse } from 'next/server'

import type { NextRequest } from 'next/server'

export async function middleware(req: NextRequest) {
  const res = NextResponse.next()

  const supabase = createMiddlewareClient({ req, res })

  // Refresh session if expired - required for Server Components
  await supabase.auth.getSession()

  return res
}

API Route for Code Exchange

Supabase requires us to set up a Code Exchange route, to exchange an auth code for the user's session, which is set as a cookie for future requests made to Supabase.

Create a new folder named auth inside the app folder, inside of this create another folder callback and then create a route.ts file and paste the following code

import { createRouteHandlerClient } from "@supabase/auth-helpers-nextjs"
import { cookies } from "next/headers"
import { NextResponse } from "next/server"

import type { NextRequest } from "next/server"

export async function GET(request: NextRequest) {
  const requestUrl = new URL(request.url)
  const code = requestUrl.searchParams.get("code")

  if (code) {
    const cookieStore = cookies()
    const supabase = createRouteHandlerClient({
      cookies: () => cookieStore
    })
    await supabase.auth.exchangeCodeForSession(code)
  }

  // URL to redirect to after sign in process completes
  return NextResponse.redirect(`http://localhost:3000/`)
}

Sign Up a User

import { createServerActionClient } from "@supabase/auth-helpers-nextjs"
import { cookies } from "next/headers"

export const SignUp = () => {
  const signUp = async (formData: FormData) => {
    "use server"

    const name = formData.get("name") as string
    const email = formData.get("email") as string
    const password = formData.get("password") as string

    const supabase = createServerActionClient({
      cookies
    })

    const { data, error } = await supabase.auth.signUp({
      email,
      password,
      options: {
        data: {
          name
        },
        emailRedirectTo: `http://localhost:3000/auth/callback`
      }
    })
  }

  return (
    <form action={signUp}>
      <input type="text" name="name" />
      <input type="email" name="email" />
      <input type="password" name="password" />
      <button type="submit">Submit</button>
    </form>
  )
}

Log In a User

import { createServerActionClient } from "@supabase/auth-helpers-nextjs"
import { cookies } from "next/headers"

export const LogIn = () => {
  const logIn = async (formData: FormData) => {
    "use server"

    const email = formData.get("email") as string
    const password = formData.get("password") as string

    const supabase = createServerActionClient({
      cookies
    })

    const { data, error } = await supabase.auth.signInWithPassword({
      email,
      password
    })
  }

  return (
    <form action={logIn}>
      <input type="email" name="email" />
      <input type="password" name="password" />
      <button type="submit">Submit</button>
    </form>
  )
}

Log Out a User

"use client"

import { createClientComponentClient } from "@supabase/auth-helpers-nextjs"

export const LogOut = () => {
  const supabase = createClientComponentClient()

  const logOut = async () => {
    await supabase.auth.signOut()
  }

  return <button onClick={logOut}>LogOut</button>
}

Get the Logged In User

import { createServerComponentClient } from "@supabase/auth-helpers-nextjs"
import { cookies } from "next/headers"
import { redirect } from "next/navigation"

export const Profile = async () => {
  const cookieStore = cookies()
  const supabase = createServerComponentClient({
    cookies: () => cookieStore
  })

  const {
    data: { session }
  } = await supabase.auth.getSession()  

  if (!session) {
    redirect("/login")
  }

  const user = session.user

  return <h2>User Profile</h2>
}

Conclusion

Next.Js 14 and Supabase is a powerful combination and it allows us to build things faster. From setting up a Next.js project to initializing the Supabase client, fetching data, and implementing user authentication, this guide has provided a comprehensive overview of using Supabase with Next.Js 14. To learn more about Next.Js 14 and Supabase, read their official documentation.

MyDevPage: Create a Portfolio Website in Minutes

MyDevPage allows you to build a portfolio website in minutes. Focus on building great projects and enhancing your skills rather than wasting your time in building a portfolio website from scratch or customizing expensive templates.

MyDevPage handles everything:

Creating a portfolio
SEO
Analytics
Customization
Custom Domain
Contact Form

How to send emails using Next.js 14, Resend and React-Email

Shahmir Faisal — Sat, 30 Dec 2023 10:20:23 +0000

Communication with your users is really important and emails are one of the means of communication. Sending emails is really important for applications. These are some of the reasons:

User Onboarding and Account Verification
Password Resets and Account Recovery
Notification and Alerts
Communication and Updates
Marketing and Promotions
Support and Customer Service

In this article, we will dive into sending emails using Next.js 14, Resend and React-Email. We will leverage the latest Next.js features, such as the app directory and server actions.

Setting up Resend

Before we can start using Resend in our app, first you have to create an account on Resend.
After creating the account, you have to verify your domain name and the email address you will be using to send emails.

Once that's done, go to the API Keys page and create a new api key.

Copy an existing API key or click Create Api Key to create a new one.

Setting Up Your Next.js Project

npx create-next-app@latest

On installation, you'll see the following prompts:

What is your project named? my-app
Would you like to use TypeScript? No / Yes
Would you like to use ESLint? No / Yes
Would you like to use Tailwind CSS? No / Yes
Would you like to use `src/` directory? No / Yes
Would you like to use App Router? (recommended) No / Yes
Would you like to customize the default import alias (@/*)? No / Yes
What import alias would you like configured? @/*

After the prompts, create-next-app will create a folder with your project name and install the required dependencies. Next, we have to install the packages for sending emails.

npm i resend react-email @react-email/components @react-email/render

Let's talk about the packages we just installed:

resend: It is the service that we will be using to send emails
react-email: It allows us to create email templates using React Js.
@react-email/render: For converting react js based templates to an html string.

Creating a Simple Form

Let's now create a simple form where the user can enter his name, email and message. And when it is submitted we will send the detail to the entered email.

export default function Form() {
  return (
    <form>
      <label htmlFor="name">Name</label>
      <input type="text" id="name" name="name" />
      <label htmlFor="email">Email</label>
      <input type="email" id="email" name="email" />
      <label htmlFor="message">Message</label>
      <textarea name="message" id="message" cols={30} rows={10}></textarea>
      <button type="submit">Send</button>
    </form>
  )
}

Creating an Email Template

Now let's create an email template using React Js.

import { Html, Heading, Text } from "@react-email/components"
const EmailTemplate = ({
  name,
  email,
  message
}: {
  name: string
  email: string
  message: string
}) => {
  return (
    <Html lang="en">
      <Heading as="h1">New Form Submission</Heading>
      <Text>You just submitted a form. Here are the details:</Text>
      <Text>Name: {name}</Text>
      <Text>Email: {email}</Text>
      <Text>Message: {message}</Text>
    </Html>
  )
}
export default EmailTemplate

Creating Server Action

Server action is the latest feature of Next.js 14. It is an asynchronous function that runs on the server. We can use it to handle form submissions and to handle email logic on the server. So when you submit a form the function will start running on a server. In this case, you don't have to create API routes to handle any sensitive logic, like communicating with the database.

Create a file named actions.ts in the src folder (if you have) or the root of your project.

"use server"
import { Resend } from "resend"
import EmailTemplate from "./components/EmailTemplate"
interface State {
  error: string | null
  success: boolean
}
export const sendEmail = async (prevState: State, formData: FormData) => {
  const name = formData.get("name") as string
  const email = formData.get("email") as string
  const message = formData.get("message") as string
  try {
    const resend = new Resend(process.env.RESEND_API_KEY)
    await resend.emails.send({
      from: "Shahmir <shahmir@mydevpa.ge>",
      to: email,
      subject: "Form Submission",
      react: EmailTemplate({ name, email, message })
    })
    return {
      error: null,
      success: true
    }
  } catch (error) {
    console.log(error)
    return {
      error: (error as Error).message,
      success: false
    }
  }
}

Create a .env.local file in the root of your project and paste the Resend API key you created earlier.

The sendEmail function is a server action. It receives the previous state and the formData, that gives you access to the values of the form. Then it uses resend to send the email to the provided email address. In the from field, make sure to use an email that you verified on your Resend account.

In some cases, the react property might not work and you might receive an error while sending emails. In that case you can convert the React component into an HTML string.

"use server"
import { Resend } from "resend"
import EmailTemplate from "./components/EmailTemplate"
import { render } from "@react-email/render"
interface State {
  error: string | null
  success: boolean
}
export const sendEmail = async (prevState: State, formData: FormData) => {
  const name = formData.get("name") as string
  const email = formData.get("email") as string
  const message = formData.get("message") as string
  try {
    const resend = new Resend(process.env.RESEND_API_KEY)
    await resend.emails.send({
      from: "Shahmir <shahmir@mydevpa.ge>",
      to: email,
      subject: "Form Submission",
      html: render(EmailTemplate({ name, email, message }))
    })
    return {
      error: null,
      success: true
    }
  } catch (error) {
    console.log(error)
    return {
      error: (error as Error).message,
      success: false
    }
  }
}

Using Server Action with the Form

Now let's use the server action we created above with our form component.

"use client"
import { sendEmail } from "@/actions"
import { useEffect } from "react"
import { useFormState } from "react-dom"
export default function Form() {
  const [sendEmailState, sendEmailAction] = useFormState(sendEmail, {
    error: null,
    success: false
  })
  useEffect(() => {
    if (sendEmailState.success) {
      alert("Email sent!")
    }
    if (sendEmailState.error) {
      alert("Error sending email!")
    }
  }, [sendEmailState])
  return (
    <form action={sendEmailAction}>
      <label htmlFor="name">Name</label>
      <input type="text" id="name" name="name" />
      <label htmlFor="email">Email</label>
      <input type="email" id="email" name="email" />
      <label htmlFor="message">Message</label>
      <textarea name="message" id="message" cols={30} rows={10}></textarea>
      <button type="submit">Send</button>
    </form>
  )
}

We are using the useFormState hook. It accepts the action and the initial state and returns the new state and the action function that we can attach with our form.

In the end we added an action property to our form and gave it the server action function.

Now when you submit the form you should receive an email.

Conclusion

This article aimed to help you quickly get started with sending emails. The Resend and React-Email libraries make it so easy to achieve this. To learn more about Resend and React-Email read their official documentation.

MyDevPage: Create a Portfolio Website Instantly

MyDevPa.ge allows you to build a portfolio website in minutes. Focus on building great projects and enhancing your skills rather than wasting your time in building a portfolio website from scratch or customizing expensive templates.

MyDevPa.ge handles everything:

Creating a portfolio
SEO
Analytics
Customization
Custom Domain
Contact Form

Single Responsibility Principle - SOLID Principles in Javascript

Shahmir Faisal — Sat, 23 Apr 2022 14:30:15 +0000

This is the first article in our series of articles covering the SOLID Design Principles.

What are the SOLID Design Principles?

SOLID is a set of object-oriented design principles allowing you to write understandable and maintainable code. It makes sure that changing one part of your code doesn't impact other parts. SOLID is an acronym for 5 key design principles:

S - Single Responsibility principle
O - Open-Closed principle
L - Liskov Substitution principle
I - Interface Segregation principle
D - Dependency Inversion principle

In this series, we will cover all these 5 principles. We will cover the first one in this article.

Single Responsibility principle

The Single Responsibility Principle states that a class should have only one responsibility means that it should have only one reason to change or in other words, it should have only one job.

If your class has multiple responsibilities, it's better to split it into multiple classes to avoid the violation of single responsibility.

Example

Consider we're building an application to manage the students and their courses.

Naive Solution

We might have a class like this:

class Student {
  constructor(name) {
    this.name = name;
    this.courses = [];
  }

  enrollCourse(course) {
    this.courses.push(course);
    this.notify(course);
  }

  notify(course) {
    console.log(`${this.name}, you have successfully enrolled ${course}.`);
  }
}

const Shahmir = new Student("Shahmir");
Shahmir.enrollCourse("Physics");

// Output
// Shahmir, you have successfully enrolled Physics.

Here we have 2 properties, the name, and courses of the student. Then a function enrollCourse for adding courses and uses the notify function to notify the student about that course.

Now the solution looks good, isn't it? However, it's violating the single responsibility principle.

Why's it Violating the Single Responsibility?

If you carefully look at the above example, it has 2 responsibilities:

Enrolling Courses
Notifying Students about the new enrolled course

The class has 2 reasons to change:

if we want to change how we're enrolling in the course
if we want to change how we notify the user

Here are the problems with the notify function:

What if we want to send an email or a push notification to notify the student instead of just printing the message in the console? We need to come back and make changes to the class.
What if we have 10 different classes and we want the notify functionality in them? We need to write the function 10 times.
And what if we want to change the function again? We need to make changes in 10 different places.

Better Solution

Why not just take that function out of the class? This will make the class use the single responsibility principle and we will be able to use that function wherever we want. And whenever we want to make changes, we will only change one part of the code without affecting the other parts.

function notify(message) {
  console.log(message);
  // we can also email or send a push notification
}

class Student {
  constructor(name) {
    this.name = name;
    this.courses = [];
  }

  enrollCourse(course) {
    this.courses.push(course);
    notify(`${this.name}, you have successfully enrolled ${course}.`);
  }
}

const Shahmir = new Student("Shahmir");
Shahmir.enrollCourse("Physics");

// Output
// Shahmir, you have successfully enrolled Physics.

Now the class has only one responsibility and that is to enroll the courses. The notify function is separate from the class.

So that's it. Will see you in the next article covering the open-closed principle.

Follow me on:

Twitter

LinkedIn

Github

Scope in JavaScript and How the Lexical Environment Works

Shahmir Faisal — Sat, 09 Apr 2022 14:59:35 +0000

Scope in Javascript

Scope determines the accessibility of variables in JavaScript. It means where you can access a particular variable in your code. In Javascript, we have 2 types of scope:

Global Scope
Local Scope

Global Scope

Whenever you declare a variable outside of any function, then it is in the global scope and the variable is called global variable. Global variables can be accessed from anywhere in the code.
Example:

var x = 10;

Local Scope

Whenever you declare a variable inside of a function, then it is in the local scope and the variable is called local variable. Local variables can only be accessed inside of the function they are declared in.
Example:

function localScope() {
  var x = 10;
}

localScope();

But how does javascript allow global variables to be accessed from anywhere and restrict local variables from getting access outside of the function they are declared in? It happens because of Lexical Environment.

What is Lexical Environment?

A lexical environment consists of 2 things:

Local Memory Space
A reference to the Lexical Environment of parent

Local Memory Space means the memory space (where variables are stored) of a function or global scope if you are outside of any function. Reference means it has access to the lexical environment of the parent.

Let's understand it with some simple examples.

Example 1

var x = 10;

function printX() {
  console.log(x);
}

printX();

// Output
10

Here, we created a variable x and assigned 10 to it then we are calling a function that prints the value of x. Now, when we call the function it outputs 10 but we don't actually have x inside the function, we have it in the global scope. How does it access x from the global scope?

The answer is simple, it's because of the lexical environment.

When we try to print x inside of the function, the javascript engine tries to find it in the lexical environment of the function which consists of local memory and a reference to the lexical environment of the parent. When it fails to find it in the local memory of function then it will move to the lexical environment of the parent (global scope in this case) using the reference. Which again consists of local memory and a reference to the lexical environment of its parent. The engine will find x in the memory of the global scope and will print it.

Example 2

function createX() {
  var x = 10;
}
createX();
console.log(x);

Uncaught ReferenceError: x is not defined

We get an error, but why?

When we try to access x in the global scope, the javascript engine tries to find it in the lexical environment. X is not defined in the memory space of global scope (it is actually in the local memory space of createX). So it moves to the lexical environment of its parent. We don't have any parent of global scope, so it means x does not exist. That's why we get that error.

Example 3

var x = 10;

function outer() {
  function inner() {
    console.log(x);
  }
  inner();
}

outer();

// Output
10

Here we have an outer function and then an inner function inside of it which tries to access x. When we call inner, the javascript engine tries to find x in its lexical environment. It fails to find it in the local memory space of inner, so using the reference to the lexical environment of the parent, it moves to the lexical environment of outer, still, x is not in the local memory space of outer, again using the reference, the engine moves to the lexical environment of its parent (global scope). And there we have x in the memory. So it prints the value x in the console.

Scope Chain

The way Javascript Engine moves from one lexical environment to another to find the variable is called scope chain.

Helpful Resources

Adding Lottie Animations to Your Website

Shahmir Faisal — Sat, 02 Apr 2022 14:57:25 +0000

What are Lottie animations?

Lottie is a JSON-file format for adding animations to your web and mobile applications. Lottie animations are eye-catching and can communicate messages more effectively than images and text. They make the overall user experience a lot more enjoyable. Lottie animations work on the web, iOS, Android, Windows, and React Native, so no matter what device or browser your audience uses, they'll be able to view them.

Examples:

LottieFiles

LottieFiles is an amazing website where you will find tons of free animations created by designers. And we'll be using their animations for our project. Head over to this page where you will find all the amazing animations. Pick any animation. For our purpose, we'll be using this one:

Below you will find the ''Lottie Animation URL". This is the URL of the JSON file of this animation. Copy it. But how can we use it?

Using Lottie Animations

LottiFiles has an npm package named as @lottiefiles/lottie-player. You can either import it from CDN or can install it.

CDN

<script src="https://unpkg.com/@lottiefiles/lottie-player@0.4.0/dist/tgs-player.js"></script>

NPM

npm i @lottiefiles/lottie-player

import "@lottiefiles/lottie-player";

Usage

Add the element lottie-player and set the src property to a URL pointing to the JSON file which you copied earlier.

<lottie-player src="https://assets4.lottiefiles.com/packages/lf20_l3sfdi9x.json" ></lottie-player>

It accepts some other properties as well which you can use to control the behaviour of the animation:

<lottie-player src="https://assets4.lottiefiles.com/packages/lf20_l3sfdi9x.json" autoplay loop controls background="transparent" speed="1" ></lottie-player>

You can play around with these properties here.

That's it!

This article was originally published on my hashnode blog.

Building Custom Authentication for Your Next.js Apps

Shahmir Faisal — Sat, 26 Mar 2022 04:56:07 +0000

Next.js is an open-source web development framework built on top of Node.js enabling you to build SEO-friendly React-based web apps by utilizing its features like server-side rendering and static-site generation.

Authentication

Handling authentication and authorization in your next.js app can be a bit tricky. There are so many options when it comes to adding auth like NextAuth, Auth0, Firebase, etc. And these are pretty easy to start with. But sometimes you might need to build your own authentication feature to suit our web app needs rather than using these pre-built solutions. So in this article, we'll be building our own authentication feature using jwt, cookies, and mongodb.

Let's Get Started

First, you need to have node.js installed on your machine. You can get it from their official website.
Next, create an empty next.js project by running the following command:

npx create-next-app next-custom-auth --example "https://github.com/vercel/next-learn/tree/master/basics/learn-starter"

Now we need the following packages for our app:

Install the packages:

npm i axios cookies-next jsonwebtoken mongoose

Setting Up MongoDB

Create a '.env.local' file in the root of your project and add the environment variable for mongodb uri.

Now create a 'lib' folder in the root of your project, inside of that create a 'dbConnect.js'. Add the following code in it:

// lib/dbConnect.js

import mongoose from "mongoose";

async function dbConnect() {
  return await mongoose.connect(process.env.MONGODB_URI);
}

export default dbConnect;

Here, we're creating an asynchronous function that uses mongoose to connect to the MongoDB database. We will call this function whenever we need to perform database operations.

Building the UI

Now let's build the UI for the home, signup, and signin page.

Layout Component

Create a 'components' directory in the root of the project and then add a 'Layout.js' file.

// components/Layout.js

import Link from "next/link";

export default function Layout({ children }) {
  return (
    <>
      <nav>
        <Link href="/">
          <a>Home Page</a>
        </Link>

        <Link href="/signup">
          <a>SignUp</a>
        </Link>

        <Link href="/signin">
          <a>SignIn</a>
        </Link>
      </nav>

      <section>{children}</section>
    </>
  );
}

We will use this component for all of our pages. It adds a navigation bar and renders its children.

Home Page

Inside of your 'index.js' file in the pages directory add the following code:

// pages/index.js

import Layout from "../components/Layout";

export default function HomePage(props) {

  const signoutHandler = () => {
      // logic for signout
  };

  return (
    <Layout>
      <h1>Home Page</h1>
      <p>
        This is the home page and it is protected. Only authenticated users can
        access this page.
      </p>

      <p>
        <strong>Name</strong>: name
      </p>
      <p>
        <strong>Email</strong>: email
      </p>

      <button onClick={signoutHandler}>Sign out</button>
    </Layout>
  );
}

It will look like this:

SignUp Page

Create a 'signup.js' file in the 'pages' directory and add the following code:

// pages/signup.js

import Layout from "../components/Layout";
import { useState } from "react";

export default function SignupPage() {
  const [name, setName] = useState("");
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");

  const signupHandler = async (e) => {
    e.preventDefault();
    // signup logic
  };

  return (
    <Layout>
      <h1>SignUp</h1>

      <p>Only unauthenticated users can access this page.</p>

      <form onSubmit={signupHandler}>
        <input
          type="text"
          placeholder="Name"
          onChange={(e) => setName(e.target.value)}
          value={name}
        />
        <input
          type="email"
          placeholder="Email"
          onChange={(e) => setEmail(e.target.value)}
          value={email}
        />
        <input
          type="password"
          placeholder="Password"
          onChange={(e) => setPassword(e.target.value)}
          value={password}
        />
        <button>SignUp</button>
      </form>
    </Layout>
  );
}

It will look like this:

SignIn Page

Create a 'signin.js' file in the pages directory and add the following code:

// pages/signin.js

import Layout from "../components/Layout";
import { useState } from "react";

export default function SigninPage() {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");

  const signinHandler = async (e) => {
    e.preventDefault();
    // Signin logic
  };

  return (
    <Layout>
      <h1>SignIn</h1>

      <p>Only unauthenticated users can access this page.</p>

      <form onSubmit={signinHandler}>
        <input
          type="email"
          placeholder="Email"
          onChange={(e) => setEmail(e.target.value)}
          value={email}
        />
        <input
          type="password"
          placeholder="Password"
          onChange={(e) => setPassword(e.target.value)}
          value={password}
        />
        <button>SignIn</button>
      </form>
    </Layout>
  );
}

It will look like this:

I've added some CSS but I'm not going to show it here because styling isn't the focus of this article.

Creating the User Model

Create a 'models' directory at the root of the project. Inside, add a 'user.js' file and add the following code:

// models/user.js

import mongoose from "mongoose";

const UserSchema = new mongoose.Schema({
  name: String,
  email: String,
  password: String,
});

export default mongoose.models.User || mongoose.model("User", UserSchema);

Here, we're creating a User schema using mongoose. It has the name, email, and password properties. Finally, we're creating a model and exporting it.

Building the API

Now we will work on the API. To begin, first, let's create a directory name 'api' in the 'pages' directory where we will add all of our endpoints.

Signup Endpoint

Create a 'signup.js' file in the 'api' directory and add the following code:

// pages/api/signup.js

import dbConnect from "../../lib/dbConnect";
import User from "../../models/user";
import jwt from "jsonwebtoken";
import { setCookies } from "cookies-next";

export default async function handler(req, res) {
  await dbConnect();

  const { name, email, password } = req.body;

  if (req.method === "POST") {
    const userExist = await User.findOne({ email });

    if (userExist)
      return res.status(422).json({ message: "Email already in use!" });

    const user = new User({ name, email, password });
    await user.save();

    const token = jwt.sign({ userId: user._id }, process.env.TOKEN_SECRET, {
      expiresIn: "1d",
    });

    setCookies("token", token, {
      req,
      res,
      maxAge: 60 * 60 * 24, // 1 day
      path: "/",
    });

    res.status(201).json(user);
  } else {
    res.status(424).json({ message: "Invalid method!" });
  }
}

Here, we created a handler function. Inside, we're using the dbConnect function to connect the database and destructed the properties from req.body. After that, we're only accepting POST requests. Then, we're validating the email and saving the user. We're creating a jsonwebtoken and storing it in a cookie using the setCookies method. The maxAge means it will expire after 24 hours. Make sure to add the TOKEN_SECRET in your .env.local file that you can use for creating jwts.

You can learn more about cookies-next from here.

SignIn Endpoint

Create a 'signin.js' file in the 'api' directory and add the following code:

// pages/api/signin.js

import dbConnect from "../../lib/dbConnect";
import User from "../../models/user";
import jwt from "jsonwebtoken";
import { setCookies } from "cookies-next";

export default async function handler(req, res) {
  await dbConnect();

  const { email, password } = req.body;

  if (req.method === "POST") {
    const user = await User.findOne({ email, password });

    if (!user)
      return res.status(422).json({ message: "Wrong email or password!" });

    const token = jwt.sign({ userId: user._id }, process.env.TOKEN_SECRET, {
      expiresIn: "1d",
    });

    setCookies("token", token, {
      req,
      res,
      maxAge: 60 * 60 * 24, // 1 day
      path: "/",
    });

    res.status(200).json(user);
  } else {
    res.status(424).json({ message: "Invalid method!" });
  }
}

It is very similar to the signup endpoint. Here, we're accepting the email and password of a user and validating it before letting the user to signin.

Connecting the API with Frontend

Now head over to the 'signup.js' file in the 'pages' directory and add the following code in the signupHandler function:

// pages/signup.js

const signupHandler = async (e) => {
    e.preventDefault();

    try {
      const res = await axios.post("/api/signup", {
        name,
        email,
        password,
      });

      router.push("/");
    } catch (error) {
      console.log(error);
    }
  };

Here we're using axios to send an HTTP request to the signup endpoint along with the name, email, and password of the user. Once the user signs up, we're redirecting to the home page using the router object provided by next.js.

You can import router and axios like so:

import axios from "axios";
import { useRouter } from "next/router";

// inside of the component
const router = useRouter();

Now head over to the 'signin.js' file in the 'pages' directory and add the following code in the signinHandler function:

// pages/signin.js

 const signinHandler = async (e) => {
    e.preventDefault();

    try {
      const res = await axios.post("/api/signin", {
        email,
        password,
      });

      router.push("/");
    } catch (error) {
      console.log(error);
    }
  };

Here we're sending an HTTP request to the signin endpoint along with the email and password of the user. Once the user signs in, we're redirecting to the home page.

Now open the 'index.js' file in the 'pages' directory and add this code in signoutHandler function:

// pages/index.js

const signoutHandler = () => {
    removeCookies("token");
    router.push("/signin");
  };

It removes the 'token' cookie to signout the user.

Fetching User Data

Now we need to verify whether the user is signed in or not to restrict the home page from being accessed by an unauthenticated user.

Create a file 'getUser.js' in the 'lib' directory and add the following code:

// lib/getUser.js

import { getCookie } from "cookies-next";
import jwt from "jsonwebtoken";
import User from "../models/user";

export default async function getUser(req, res) {
  const token = getCookie("token", { req, res });

  try {
    const data = jwt.verify(token, process.env.TOKEN_SECRET);
    let user = await User.findById(data.userId);
    user = JSON.parse(JSON.stringify(user));
    return user;
  } catch (error) {
    return null;
  }
}

We will use the getUser function to verify the user. It takes in the req and res object and fetches the cookie. Then it verifies the token using the jwt.verify method. Then it fetches the user from the database using its id.

Remember, we stored the user's id in the token early in our article.

Then there's some serializing and parsing. What's that? Here, we're serializing and parsing the user document, it's because the _id of a document is of type ObjectId and we need to convert it into a string. You can avoid it and run the code to see what's going to happen. After that, we finally returned the user. If we don't have any user we will simply return null.

Now add this code in the 'index.js' file in your 'pages' directory:

// pages/index.js

export async function getServerSideProps({ req, res }) {
  await dbConnect();
  const user = await getUser(req, res);
  if (!user) {
    return {
      redirect: {
        permanent: false,
        destination: "/signin",
      },
      props: {},
    };
  }
  return {
    props: {
      user,
    },
  };
}

Here we're using server-side rendering to fetch the user data. If there's no user, we'll simply redirect to the 'signin' page otherwise we're good to go. You can the user data that we're returning as props in your component.

Now we need to make sure that only unauthenticated users can access the signin and signup pages. For both of the pages add the following code:

// pages/signup.js and pages/signin.js

export async function getServerSideProps({ req, res }) {
  await dbConnect();

  const user = await getUser(req, res);
  if (user) {
    return {
      redirect: {
        permanent: false,
        destination: "/",
      },
      props: {},
    };
  }
  return {
    props: {},
  };
}

If the user is available we will redirect to the home page.

That's it!

Conclusion

Adding authentication from scratch can be a bit spiny but you can go through this article to quickly understand how to do it. One thing which we missed was password hashing. You can do that by using the bcrypt package. The main goal was to build using jwt, cookies, and mongodb.

Here's the:

Live version of the app.

Source code.

Follow me on twitter.

My Blog.

Bootstrap 5 is Out! What's new in it?

Shahmir Faisal — Sat, 27 Jun 2020 18:32:54 +0000

Yes, you heard it right. Bootstrap 5 has released! But wait, It's in Alpha so breaking changes will continue to occur until a stable release. Anyways, It comes out with some new and exciting updates and we'll discuss them.

Major Updates

1- No Jquery

One of the exciting updates about Bootstrap 5 that I like is that It isn't using jquery anymore:). So there is no jquery. And it will make our website fast as well. And all of us know that we don't need any jquery. Vanilla Javascript got us covered. We can do anything using vanilla.js that jquery is capable of doing.

2- No Support for IE

Bootstrap 5 is not supporting Internet Explorer anymore. And it's great. I mean it's 2020 and we should use modern browsers that can support every css property(in some situations we still have to use vendor prefixes) like chrome, firefox, etc.

3- Improvements to docs

The official docs have improved. And the UI of the official bootstrap site has also updated. They’ve upgraded their sidebar to use expandable sections (powered by bootstrap collapse plugin) for faster navigation. Their docs pages are no longer full-width to improve readability and make their site feel less app-like and more content-like.

4- CSS Variables

In v4, bootstrap only included a handful of css variables for
fonts and color. But in v5, bootstrap is using css variables for components and layouts as well. Take a look at the following css variables that bootstrap 5 is using for the table:

.table {
  --bs-table-bg: #{$table-bg};
  --bs-table-accent-bg: transparent;
  --bs-table-striped-color: #{$table-striped-color};
  --bs-table-striped-bg: #{$table-striped-bg};
  --bs-table-active-color: #{$table-active-color};
  --bs-table-active-bg: #{$table-active-bg};
  --bs-table-hover-color: #{$table-hover-color};
  --bs-table-hover-bg: #{$table-hover-bg};

  // Styles here...
}

5- Starter Npm Project

Bootstrap also provided a starter npm project that we can use to get up and running with bootstrap. You can get the starter project by clicking here.

6- New Forms

Bootstrap 5 also updated the styling for forms. Bootstrap 5 provides fully custom styling for checkboxes, radios, select, file, etc.

7- Utilities Api

Bootstrap 5 comes with an amazing Utilities Api. It let you create your own utility classes. Utilities are also becoming a preferred way of styling the websites like Tailwind css. So it can come in handy while building websites. Below is an example of how you can create your own utilities using this Api.

$utilities: (
  "opacity": (
    property: opacity,
    class: o,
    values: (
      0: 0,
      25: .25,
      50: .5,
      100: 1,
    )
  )
 );

8- Updated Grid System

The grid system has also updated in v5. A new grid tier has added which is xxl. Just like we have .m and .p classes for margin and padding, in the same way, a new .g class has also added for grid gutters. Grid columns are no longer position: relative by default.

These are some of the major updates. To learn more about bootstrap 5 go to the official website.

How to use it?

Just like we use bootstrap 4, in the same way, we can also use bootstrap 5 as well.

Using NPM

npm install --save bootstrap@5.0.0-alpha1

Using CDN

<!-- CSS only -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css" integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" crossorigin="anonymous">
<!-- JavaScript and dependencies -->
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js" integrity="sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/" crossorigin="anonymous"></script>

Conclusion

Bootstrap 5 comes with a lot of great updates and you should definitely give it a shot. However, remember that it's in alpha so breaking changes will continue to occur. So don't use it for a production-ready application. Try to use it for personal or small projects. So that's it. I hope you learn something from this article. Take care.

If you want to connect with me follow me on twitter

Web Scraping with Puppeteer and Nodejs

Shahmir Faisal — Thu, 25 Jun 2020 12:12:38 +0000

In this article, I'll show you how you can do web scraping using Puppeteer and Nodejs. To get started we have to first understand what web scraping is and how Puppeteer can help us to do so.

Web Scraping

Web scraping is a process of extracting data from web pages. It involves fetching the web page and then extracting data from it. After extracting the data you can do whatever you want with that data. You can use that for an API or can store that in a CSV file.

Puppeteer

Puppeteer is an open-source Nodejs library developed by Google. It is based on chromium, a popular version of Google Chrome. Puppeteer runs headless by default but can be configured to run full (non-headless) Chrome or Chromium.
It not only allows us to do web scraping but we can do much more with it. Like:

Generating screenshots of web pages.
Generating pdf.
Automate form submission, UI testing, keyboard input, etc.

Let's do some web scraping

To get started, we need Nodejs on our system. If you don't have Nodejs, you can install it by going to the official website.
Now create a folder and name it however you want and open it in vscode. Open the terminal and write the following command to initialize the project folder with a package.json file:

npm init -y

Now create an index.js file. After this, run the following command to install Puppeteer:

npm install --save puppeteer

Installation will take some time because it will also install chromium. So be patient.

For this particular guide, we will scrap this web page:

To keep things simple, we will only extract the title and the summary from this web page. Now open the index.js file and follow these steps:

Step 1

Require Puppeteer so that we can use it.

const puppeteer = require("puppeteer");

Step 2

Create an async function so that we can use the await keyword. This is because puppeteer uses promises.

async function scrap() {
}
scrap();

We will write the rest of the code in this function.

Step 3

Call puppeteer.launch() to launch the browser.

const browser = await puppeteer.launch();

Step 4

Call browser.newPage() to create an instance of the page.

const page = await browser.newPage();

Step 5

Call page.goto() and give the URL of the web page that we want to scrap as an argument.

await page.goto("https://www.imdb.com/title/tt1013752/");

Step 6

Call page.evaluate(). It takes a function as an argument. In this function, we can select any element from the web page. In our case, we will select the title and the summary from that web page.
Go to that web page and open the developer tools. Click on the inspect tool(on the top left corner) and then click on the title.

Right-click on the highlighted element on the Elements tab then click on "copy" and then click on "copy selector" to copy its css selector. In the same way, you can also copy the selector of the summary as well. Now take a look at the following code:

const data = await page.evaluate(() => {
   const title = document.querySelector("#title-overview-widget > div.vital > div.title_block > div > div.titleBar > div.title_wrapper > h1").innerText;
   const summary = document.querySelector("#title-overview-widget > div.plot_summary_wrapper > div.plot_summary > div.summary_text").innerText;
   return {
     title,
     summary
   }
});

In the above code, we selected the title and the summary and then stored the innerText in the variables(title and summary). After that, we returned an object(we use es6 shorthand syntax) which contains the title and summary. This object will be stored in the data variable. In the same way, you can select any element from the web page, and then whatever you will return from that function will be stored in the data variable.

Now as we have successfully extracted the data, we can do anything with it. We can store it in a CSV file or can use it for an api.

Last step

Call browser.close() to close the browser.

await browser.close();

To execute the index.js file write the following command in the terminal:

node index.js

This is how our code looks like:

const puppeteer = require("puppeteer");

async function scrap() {
  // Launch the browser
  const browser = await puppeteer.launch();
  // Create an instance of the page
  const page = await browser.newPage();
  // Go to the web page that we want to scrap
  await page.goto("https://www.imdb.com/title/tt1013752/");

  // Here we can select elements from the web page
  const data = await page.evaluate(() => {
    const title = document.querySelector(
      "#title-overview-widget > div.vital > div.title_block > div > div.titleBar > div.title_wrapper > h1"
    ).innerText;
    const summary = document.querySelector(
      "#title-overview-widget > div.plot_summary_wrapper > div.plot_summary > div.summary_text"
    ).innerText;
    // This object will be stored in the data variable
    return {
      title,
      summary,
    };
  });

  // Here we can do anything with this data

  // We close the browser
  await browser.close();
}

scrap();

Conclusion

Web scraping is a fun thing to do. It has so many use cases. There are some other libraries that you can use for web scraping. However, Puppeteer makes it easier to do so. It not only allows us to do web scraping but there are some other things that we can also perform.

If you want to connect with me, follow me on twitter.