DEV Community: Anshuman Bhardwaj

Add comments to your Docusaurus website in 5 minutes

Anshuman Bhardwaj — Tue, 09 May 2023 12:48:53 +0000

Docusaurus is one of the best static site generator for blogs and documentation projects. Docusaurus is backed by Meta Open Source team and is quite popular among developer communities for great performance and simple set up.

In this guide, you'll add comments to your Docusaurus documentation project.

Why do I need comments?

For documentation

A documentation is the door to your software, and its best advocate. It is also one of the most frequent touch-points with your customers. Collecting comments on your documentation, makes customers feel heard, reduces the threshold for issue reporting, and gives your tech-writers actionable feedback to work on.

For blog

A blog is a great opportunity to build and empower developer communities. Enabling comments on your blog welcomes healthy discussions and brainstorming between your community members.

Prerequisites

Before proceeding with this guide, you must have your Docusaurus project setup locally.

To collect comments, likes, and dislikes you'll use docsly.dev. docsly is a user feedback tool for documentation. You can sign up for a free account.

Get project credentials

To get your project's publicId, follow these steps:

Open the dashboard.
Select development project from the top navigation bar.
Go to Settings > API keys section.
Click Copy Public ID.

You must use the publicId from the development project in your dashboard
while testing locally.

Installation

Install the latest version of @docsly/react package using your favorite package manager.

pnpm add @docsly/react
# or
yarn add @docsly/react
# or
npm install @docsly/react

Initializing docsly

docsly uses swizzling to wrap itself inside the default <Footer /> component provided by Docusaurus.

Wrapping the Footer component doesn't impact the default behavior. It only lets docsly to enhance the documentation experience.

You need to initialize docsly using the publicId and pathname (to learn more about props, see component ). In Docusaurus, you can get the pathname using the useLocation hook from @docusaurus/router.

To initialize docsly,

Create a new file ./theme/Footer/index.js in the project root.
Copy the below code and paste it into the newly created file.
Replace the publicId copied from the docsly dashboard.

// ./theme/Footer/index.js
import React from "react";
import Footer from "@theme-original/Footer";
import Docsly from "@docsly/react";
import "@docsly/react/styles.css";
import { useLocation } from "@docusaurus/router";

export default function FooterWrapper(props) {
  const { pathname } = useLocation();
  return (
    <>
      <Footer {...props} />
      <Docsly publicId="<copied-from-dashboard>" pathname={pathname} />
    </>
  );
}

🥳 Your documentation is now ready to collect feedback using docsly.

To avoid misuse of the development project's private ID, you must create a new project and use its publicId when deploying your project.

Deployment

You can deploy your website wherever you want. For example, you can deploy on Cloudflare pages in two minutes.

Example project

We've got a Docusaurus template project working with the latest @docsly/react package hosted live at docusaurus.docsly.dev.

You can also check out the code on GitHub.

Additional notes

By now you must have realized that you can use docsly on any React application. So, what are you waiting for? Sign up today.

I'm eager to see your comments.

Sending login notifications to users using Auth0 Actions

Anshuman Bhardwaj — Sun, 21 Aug 2022 13:24:00 +0000

You can never be too sure about your security on the internet. The good news is that most companies are becoming proactive in preventing hacking attempts on users by notifying them about suspicious login activity. Some banks even go as far as informing users about every login attempt, and I like it.

At this point, most users have gotten at least one email from services like Gmail or Twitter telling them about a login activity on their account, something like the image below.

In this article, you'll learn how to set up something similar for your application using Auth0 Actions. Auth0 Actions are JavaScript functions that you can plug in at different stages of the authentication flow, such as user sign-up, login, and reset password to extend the default functionality. Auth0 Actions allow you to use third-party libraries and store secrets to use within your code.

You might have guessed already where I'm going with this but let me paint a picture for you (literally). The Auth0 Action will execute after the login is initiated and send an email just before finishing up the login flow, as shown below.

In this example, the action will notify the user with an email, but you can also do an SMS or anything—the sky is the limit, my friend.

Prerequisite

To follow along with this example, you need an Auth0 account. You can sign up for a free one if you haven't got one. You'll also need an email sending service such as Sendgrid to send an email.

Set up Auth0 Action

To set up an action,

Open your Auth0 dashboard
Select the Actions > Flows option in the left navigation bar and click on Build Custom
Fill out the Create Action **form as shown below and click on the **Create button
Add the @sendgrid/mail npm package to the dependency section of the editor.
Add the SENDGRID_API_KEY to the secrets section.

Update the onExecutePostLogin function in the code editor as below. The event object provides the required information such as the stored secrets, email, name, IP address of the device used, and geolocation. You can read more about the event object in the documentation.

exports.onExecutePostLogin = async (event) => {
  const sgMail = require('@sendgrid/mail')
  sgMail.setApiKey(event.secrets.SENDGRID_API_KEY)
  const { user, request } = event;
  const { ip, geoip } = request;
  const msg = {
    to: user.email, // Change to your recipient
    from: "f@theanshuman.dev", // Change to your verified sender
    subject: `Recent login from ${geoip.cityName}, ${geoip.countryCode}`,
    html: `Hi ${user.name}, your account has been logged in recently from <b>${geoip.cityName}</b>, <b>${geoip.countryCode}</b> from IP address <b>${ip}</b>.`,
  };
  sgMail
    .send(msg)
    .then(() => console.log("Sent successfully"))
    .catch((err) => {
      console.log(err);
    });
};

Click on the Deploy button to activate the action.
It's time to test the action. Log into your application
Open the Monitoring > Logs section inside the Auth0 dashboard to see Actions execution details.

Conclusion

In this article, you learned about Auth0 Actions and how easily you can create one to send login notifications to your users. Auth0 is a leading authentication and authorization platform that provides developers with features such as social logins, user management, and passwordless logins. You can sign-up for free on Auth0 to try this example or experiment with one of your own.

I hope you find this article helpful! Should you have any feedback or questions, you can put them in the comments below. For more such articles, follow me on Twitter

Until next time

Next.js for beginners

Anshuman Bhardwaj — Mon, 18 Apr 2022 07:18:04 +0000

Next.js is already a widely known framework for React applications when writing this article. Honestly, there are tons of reasons for it to be popular and widely adopted, but I'm not going to go into that rabbit hole for today (I've done it many times already 😎). Instead, I'll walk you through a series of questions (don't worry, I'll answer them with you) to explain it better.

Disclaimer: When I say for beginners I mean beginners in Next.js. This article is meant for developers who have been doing React for a while and who want to get serious in Application development with React. So, if you don't know the fundamentals React, reading up React Docs instead would be a good idea.

If you've decided to proceed, let's get the party started.

What's Next.js?

Next.js is a React framework that provides additional optimizations and configurations out-of-the-box for developers.

But, what does that mean?

To answer this better, we should answer another question first.

Why is Next.js?

The answer to this question starts with "What is React?", (man, now you're just going in circles), bear with me, my friend.

React is a library for building web applications in a declarative fashion.

React does many things for us. It also has great community and support but it lacks "opinion". It's a library, so it's minimal by definition and leaves a lot of heavy lifting on the developers like routing, asset management, and optimizations like code splitting. While this gives a lot of flexibility, it also leads to bad choices and poor application organization.

This is where Next.js comes into the picture. It gives the right set of tools and guides you with a process to make the most out of them.

It provides built-in support for

Directory-based routing
Pre-rendering to HTML for SEO (Search engine optimization)
- SSR (server-side rendering at request time)
- SSG (static site generation at build time)
API routes
Middlewares
Image optimization
Code splitting

to name a few.

It does all of this while keeping

developer experience optimal
maintenance overhead to a minimum

How's Next.js?

Wait, wait... before you get started about my bad English (because you didn't watch Avengers: Infinity War), I'd request you to watch this video so you get the joke (that's really important, to me 😅).

Coming back to the question, well Next.js does it by covering up the things developers want while building upon what React has provided. For example, React is excellent at developing applications with declarative code but it lacks routing (as it doesn't have its own), Next.js provides a perfect solution for path-based routing.

Next.js became quite popular by solving the SEO problem with client-side applications including React.

Ideally React applications are rendered on the client/browser, which has a couple of drawbacks like

slow initial load due to large bundle size and JavaScript execution on the client
bad SEO due to client-side rendering
unnecessary network calls from client side leading to network waterfall

Next.js solves this by pre-rendering React applications before sending the response to the user.

Pre-rendering is compiling React components into their HTML layout on the server side.

Pre-rendering makes the user experience better as

it delivers a smaller JavaScript bundle, which reduces the time to download and process it on the client-side
rendering on the server is fast because of better computing power
data-fetching on the server saves us from network calls waterfall on the client. On top of that it'll be much faster if the data source is the Next.js API routes

Next.js provides two methods of doing pre-rendering: SSR, which generates the HTML at the request time (good for pages using live data), and SSG, which produces the HTML at the build time (better for static pages).

The below diagram explains the difference between CSR (Client Side Rendering) versus SSR (Server Side Rendering) versus SSG (Static Site Generation)

Both SSR and SSG enable us to leverage the simplicity of React without compromising on user experience. Next.js being the great framework, picks the best rendering strategy for you based on how you've structured your page-making Next.js a robust framework for delivering production-ready applications with React.

You can already see my love for Next.js (very hard to hide). I'll be unleashing this love by continuing this Next.js beginners course in articles and YouTube videos.
We'll discuss Next.js fundamentals in detail and build a production-ready application with Next.js, including development and deployment. So, make sure to follow me to get the latest updates.

I hope you find this article helpful! Should you have any feedback or questions, you can put them in the comments below. For more such articles, follow me on Twitter

Until next time

3 Ways to declare variables in JavaScript: var, let, and const explained

Anshuman Bhardwaj — Mon, 11 Apr 2022 07:05:38 +0000

At the time of writing this article there are only two popular ways of declaring variables in JavaScript: let and const, poor var is long lost in the darkness of misunderstood principles.

The idea behind writing this article is to try and clear up the air around why new developers are sceptical about using var and every time I ask this question in an interview all I get to hear is "var is bad", "var makes global variables" bla, bla.

tldr;

var is function scoped, that is it'll only be accessible in the scope of the function it's declared in.
let and const are block-scoped, that is they'll only be accessible in the scope of the block they're declared in.

Those who are looking for a deeper explanation should continue reading.

var

var has been around since the beginning of time (just kidding, I think even before that). Some characteristics of a variable declared using var

it is function scoped when defined inside one otherwise is globally scoped
can be re-declared in the same scope without throwing an error (even in strict mode)
can be re-assigned
can be used before the declaration line in code (although the value will be undefined)

console.log(test); // undefined

var test = "512";

console.log(test); // 512

because the interpreter sees this code like

var test; // undefined is the default value
console.log(test); // undefined
test = "512"
console.log(test); // 512

const and let

The behavior of const and let is the same other than the fact that variables declared using const cannot be re-assigned.

Some characteristics of variables declared using const and let

it is block-scoped when defined inside one otherwise is globally scoped
cannot be re-declared
variables declared using let can be re-assigned but not const
cannot be used before the declaration line in code (Reference error is thrown because variables are not a given default value)

console.log(test); // ReferenceError: Cannot access 'test' before initialization

var test = "512";

console.log(test);

Conclusion

Every tool is build for serving some purpose, we should utilise for it's goodness and not just follow the herd criticising it.

I'll be writing another article explaining how we can best use these tools.

That's it for this one. I hope you find this article helpful! Should you have any feedback or questions, please feel free to put them in the comments below. For more such articles, please follow me on Twitter

Until next time

3 worst things you can do in an interview

Anshuman Bhardwaj — Mon, 04 Apr 2022 06:31:57 +0000

While I was at Canoo, I took around 100 interview calls, ranging from technical screening to behavioral & culture fit tests. I met some great candidates and some who really disappointed me. In this article, we will take a look at three of the worst things I've seen in an interview that you should avoid doing.

Being clueless

Let me add to it, being clueless about

the company
the role
the skill set required

One gentleman I was interviewing last summer showed up at the interview without even knowing what the heck is Canoo doing.
It was shocking for me because you're sitting in front of a person who probably has spent months b

How many times has it happened that you looked at the Job title and just applied straight away?

Don't lie, it happens, I know. It used to happen to me when I was starting out my career. I used to desperately apply for jobs without even checking the job description, let alone the company details.

Over the years I've realised that it's important for you to

understand the role, most companies put a "first 90 days goal" or similar road map in their job posting which should help you understand more about the role and day-to-day working of the team.
understand the company mission and its values you should always read up about the company you're applying to. I check the company website, most of them have an About section or Careers section which tells a lot about the company values and priorities. Some good companies even have their own blog which will give you a good insight into the company.

Being unprofessional

This goes without saying that one should behave professionally when in an interview, and if you're like me you'd be shocked to see people yawning in an interview.

Last year I talked to one person who had the camera setup below his face, giving a weird angle, and was constantly scratching his back. He was looking as if he doesn't care about the interview, no matter how good he was at coding, I didn't see my team working with someone so lazy or unprofessional.

Let's get it straight, being fun !== being unprofessional.

When I speak of professionalism, I don't mean you should be wearing a suit, but at least you shouldn't show up yawning in an interview.

No matter how much you hate this but an interviewer only has 30-40 minutes to get an impression from you. I know this sounds crazy but the 30 minutes call you get with them is your chance to show how amazing you are, how well you can communicate and express your opinions, how you present yourself and your arguments.

Always remember, you only have this one call to make a good impression because they don't know you outside of this very call. (unless you already have built a social brand for yourself)

Being ignorant

This January I was taking a technical screening call with a candidate. She was smart and confident at the beginning of the conversation but soon that got overshadowed by how ignorant and defensive she got on feedback to her answers. This made me a little concerned about her being a team player and I asked couple more questions to see how she handles more such questions. It felt like she is ignoring my input and constantly trying to prove that she is correct.

Not just her, the person I was talking about in the last section was also somewhat like her. He didn't take the suggestions and feedback on how he could've done better. Instead, he started talking defensively, ignoring and making an annoyed face.

It's alright to be annoyed, but I think in a team you'll be annoyed at some point. We all need to learn how to handle such situations and communicate well without letting our egos take over.

Looking back, I'm sure I've made similar mistakes in the past but I was lucky enough to have more patient interviewers. I've learned my lessons and the biggest one is, to accept mistakes honestly and try to learn from them. Being humble about your mistakes will get you respect and constructive feedback.

That's it for now. I hope you find this article helpful! Should you have any feedback or questions, please feel free to put them in the comments below. For more such articles, please follow me on Twitter

Until next time

The right way to use LocalStorage in JavaScript

Anshuman Bhardwaj — Mon, 28 Mar 2022 12:26:05 +0000

Being a web developer we all have been into a situation, where we want to persist a piece of information like user data, theme preference, or the selected filters, to give our users a consistent experience across browser sessions.

Well, that's exactly where the LocalStorage API comes into the picture.

Hold on, Hold on! Let's start from the basics

What is LocalStorage?

The LocalStorage API of web browsers allows to store and then read the stored data across browser sessions.

Let's break it down:

It allows us to store data into persistent memory so that the data is still available when we restart the browser or even the computer.
It stores the data locally to that origin, meaning you can only read/write the data to LocalStorage for the current origin i.e the following combination (protocol+domain+port)

It is to be noted that the LocalStorage starts empty and the items added during a private session get cleared as soon as the last private tab is closed.

Internals of LocalStorage

The LocalStorage is a key-value store, meaning it stores the given value against the provided key, just like a JavaScript object but persistent.

Key-Value store provides fast lookup and writes because of its structure finding the right element will always take constant time (apart from the time to do I/O). This means having hundreds of keys in your LocalStorage wouldn't slow down the lookup. (Not sure why you would be doing that.)

With its speed comes one limitation, the key and value both have to be a string to be stored in the LocalStorage.
Well, this isn't so hard to get around.

Currently the Web Storage specification allows you to store up to 5MB per app per browser.

How to use LocalStorage?

Thankfully the LocalStorage API is fairly simple to interface with.

Let's go ahead and see how we can do the basic operations like Create/Read/Update/Delete on LocalStorage,

Writing data

The localStorage.setItem() accepts a string as key and the value is also accepted as string.

    localStorage.setItem('<key>', '<value>')

The above line of code will write the value against the given key, if the already exists, the existing value will be overwritten.

Reading data

To read the stored information, we need to provide the key

  const value = localStorage.getItem('<key>')
  // value will be null or string

null is returned if no data is found with the given key.

Storing Objects in LocalStorage

You might be wondering, "Strings! Jeez, what am I going to do about an object?". Don't worry.

We are still allowed to store a serialized version of the object,

    // storing an object in LocalStorage
    const user = { name: 'anshuman_bhardwaj' }
    localStorage.setItem('user', JSON.stringify(user))

    // reading the object from LocalStorage
    const strinifiedUser = localStorage.getItem('user')
    if(strinifiedUser) {
      const retrivedUser = JSON.parse(strinifiedUser)
    }

Deleting data

There are two methods for removing stored data from LocalStorage programmatically

`removeItem`

If you already know which item to delete, removeItem is the way to go.

    localStorage.removeItem('<key>')

`clear`

If you want to remove all keys from the storage, then clear is a clear choice. (you see what I did there?)

    localStorage.clear()

As exciting as it may sound, the clear method shouldn't be used all that much because it clears everything and not just the items that you added.

This means if you are interacting with services that use LocalStorage e.g. authentication modules like Firebase Auth or Okta, clearing the LocalStorage will also delete the data those services had put in and it'll break their behavior.

Yeah, don't worry, I got you.

In computer science we should always focus on encapsulation, meaning we should hide the information or encapsulate it, so to say. Well, that's exactly how we are going to solve our little problem here.

The following pattern was suggested to me by my friend & colleague Ryan.

Creating and using Namespace in LocalStorage?

We can apply the principle of encapsulation here by putting all of our data under a predefined & unique key or namespace. This will allow us to hide our from other parts of the application (which we don't control) and also save us from mistakenly updating the data which we shouldn't.

"Sounds good, but how do we do that?", you might be wondering.

Well, it's simpler than it sounds and works by enclosing the whole application state under one single key rather than using a new key for each information.

Step 1

Create a key, predictable yet unique. A good example would be [your-app-name]+[some-unique-token] i.e. DEV-007

Step 2

While storing information, we read the namespace value from the LocalStorage, deserialize it, update the value against the key inside the object and then serialize it again before writing to LocalStorage.

Step 3

While reading the information, we read the namespace value from the LocalStorage, deserialize it and return the value of the key from the object.

This way we treat the namespace like it's own little LocalStorage.

Below is a code implementation of the above

const NAMESPACE = "DEV-007";

function writeToStorage(key, value) {
  const serializedData = localStorage.getItem(NAMESPACE);
  const data = serializedData ? JSON.parse(serializedData) : {};
  data[key] = value;
  localStorage.setItem(NAMESPACE, JSON.stringify(data));
}

function readFromStorage(key) {
  const serializedData = localStorage.getItem(NAMESPACE);
  const data = JSON.parse(serializedData);
  return data ? data[key] : undefined;
}

function clear() {
  localStorage.setItem(NAMESPACE, JSON.stringify({}));
}

function removeItem(key) {
  const serializedData = localStorage.getItem(NAMESPACE);
  const data = serializedData ? JSON.parse(serializedData) : {};
  delete data[key]
  localStorage.setItem(NAMESPACE, JSON.stringify(data));
}

The above implementation of clear and removeItem is safe to use and solves our issue.

Don't worry you will not have to write your own implementation because there exists an npm package store2 that solves the above problem and provides smarter localstorage.

That's all for today. Should you have any questions or suggestions please feel free to drop them in the comments below.
For more such content, please follow me on Twitter

Until next time

What the heck is SSG: Static site generation explained with Next.js

Anshuman Bhardwaj — Mon, 21 Mar 2022 09:05:12 +0000

If you are a web developer && you don't live under a rock, you must have come across this buzzword called "SSG".

In the next 5 minutes, we will learn it down to the basics.

What is SSG?

Static Site Generation a.k.a. SSG is pre-rendering your React app into HTML at build time.

Let's break it down. Ideally, your React app is client-side rendered, meaning the user's browser will first download the complete JavaScript bundle and then execute it before the user can even see any content. Sounds pretty slow huh? It really is.

Pre-rendering to HTML means that we will convert the React Component to an HTML file and send the HTML file to the client so it can quickly show that to our user without much processing or bandwidth.

That's what server-side rendering is, you might be wondering.

Yes, it is, the Static in SSG comes from the fact that this whole process doesn't happen for each user request (like SSR) instead of at the build time, making SSG even faster than Server-side rendering.

In short, SSG will make the HTML pages out of a React app at the build time so it doesn't have to do it for every request, and neither does the browser have to do it on the client-side.

Why do we need SSG?

SSG exists to serve a specific use case, serving dynamic pages built in React as HTML.

What's the benefit you ask?

SEO, search engine optimisation is one of the top benefits of doing SSG as it make indexing the pages easy for the crawlers.
Speed: As you can guess, serving an HTML page is much faster for the end-user because the browser doesn't have to do much processing upfront. The pre-rendering makes it easy for the browser to fetch the HTML and render it straight up.
Caching with CDNs: Building HTML pages opens the possibility for CDN caching to show its charm. The pages are stored closer to the user globally and hence can be accessed much faster. Every request doesn't have to wait for the server to render the page, it just receives the page from CDN, saving us compute resources and money.

Use case

While you can use SSG in any scenario as long as the page can be rendered at the build time, here are some popular use case patterns for SSG

Marketing websites
Blogs and documentation, like my own blog
Portfolio websites

Tip: An easy way to know if you should use SSG is by answering: "Can you pre-render the page ahead of a user's request?" If the answer is yes, then you should choose Static Generation.

Using Next.js for SSG

Building Static pages with Next.js is simple. It works pretty similarly to building any other page i.e by creating a new file in the pages directory.

A static page for a static route

Let's start by creating a static route ./pages/first-ssg.tsx

Because the page is rendered at the build time, Next.js needs to get all the data before the rendering. Next.js looks for a getStaticProps method exported from the page to run at the build time. This method should return an object with props key, which is passed to the Page component.

getStaticProps should be used to fetch all the information needed to render the page. For example, if we are making an About company page, getStaticProps is the right place to fetch company details from our API endpoint.

// ./pages/first-ssg.tsx
import type { NextPage } from "next";

export async function getStaticProps() {
  // get all the data needed for rendering the page
  const data = await fetchPageData();
  return {
    props: { data },
  };
}

const FirstSSG = ({ data }) => {
 return (
      <main>
        {/* more html content */}
      </main>
 )
}

export default FirstSSG;

Note: getStaticProps does not have access to the incoming request (such as query parameters or HTTP headers) because it runs at the build time and not at the request time.

A static page for a dynamic route

Let's create a dynamic route ./pages/[id].tsx

Apart from the getStaticProps for page-specific data, Next.js now also needs to figure out what are all the possible paths for this route, because Next.js will have to render the pages for these paths at the build time.

For this purpose, Next.js expects a getStaticPaths method which will list down all the possible paths for a dynamic route at the build time. For example, if it is a dynamic blog page we will need to list down all the available blogs as paths.

The paths returned by getStaticPaths contains a params object which will be passed to the getStaticProps. You can use the params to pass the data about the path, like the blog slug or id, which can later be used by the getStaticProps to get data for the page.

// ./pages/[id].tsx
import type { NextPage } from "next";

export async function getStaticPaths() {
  return {
    paths: [
      { params: { ... } }
    ],
    fallback: // true or false or 'blocking', to be discussed later
  };
}

export async function getStaticProps({ params }) {
  // get all the data needed for rendering the page
  const data = await fetchPageData(params);
  return {
    props: { data },
  };
}

// Your page layout
const FirstSSG = ({ data }) => {
 return (
      <main>
        {/* more html content */}
      </main>
 )
}

export default FirstSSG;

That's all you need to do in order to build a Static website using Next.js.

It can't be all rosy, can it? Let's talk about some pitfalls.

Pitfalls

One of the biggest drawbacks of this approach is the build time. If you have thousands of pages, building all of them will take a lot of time. I know there are solutions like Incremental Static Regeneration and fallback prop, which can be used in conjunction to get around this. We'll see this in a bit.
Another problem that can arise is outdated pages. Because you get the page data at build time, the data might be stale after some time. So you might have to schedule builds or trigger them at specific intervals to make sure data is the latest. This can also be resolved with Incremental Static Regeneration. However, if this is the case you should probably think about Server-side rendering and not Static pages for this route.

The `fallback` option

As we discussed above, there is a fallback option that can be returned from the getStaticPaths and it is used for the paths which were not in the paths list returned from getStaticPaths.

It is important to understand the fallback option will not regenerate or update paths which were rendered at the build time instead it only works for the path not pre-rendered at build time.

The fallback option can be extremely useful for apps with thousands of pages, making build time fast while keeping the user experience at best.

Why Next.js?

I prefer Next.js because it provides both the options,

Server-side rendering
Static site generation

So, I can choose while writing the page which way I want to go.

It also provides great integration with the Vercel cloud platform which allows edge-caching and CI/CD for free.

That's it for this one. I'll be writing another article explaining Incremental Static Regeneration soon. I hope you find this article helpful! Should you have any feedback or questions, please feel free to put them in the comments below. For more such articles, please follow me on Twitter

Until next time

Create your own URL shortener with Next.js and MongoDB in 10 Minutes

Anshuman Bhardwaj — Mon, 14 Mar 2022 09:39:40 +0000

Motivation

A few weeks back, I was working on a Twitter bot to post my popular articles and I realized that links of some articles are not parsed well in the Tweet. However, shortening them using Rebrandly worked well.

So, I decided to make a URL shortener for myself.

Breakdown

We need a

service to create a unique hash for each long URL
database to persist long to short URL mapping
service to redirect short links to their destination

As always, Next.js was my first choice for building the complete service and MongoDB for storing links.

Development

Now that we have figured out the steps, let's work on them one by one

Setup the project

Let's use the npx create-next-app url-shortener command to generate a boilerplate for our app.

./.env.local

DB_NAME=url-shortner
ATLAS_URI_PROD=mongodb+srv://<user>:<password><cluster>.mongodb.net/url-shortner?retryWrites=true&w=majority

API_KEY=<a-long-random-string>
HOST=http://localhost:3000

These environment variables should also be stored in your Vercel project.

The value of HOST should be set to your domain when you host this project. If you don't have a public domain, just you NEXT_PUBLIC_VERCEL_URL environment variable instead of HOST.

Setting up MongoDB

Run npm i --save mongodb
Create a mongodb.ts file at the root of the repo.

// ./mongodb.ts

import { Db, MongoClient } from "mongodb";
import { formatLog } from "./utils";

// Create cached connection variable
let cachedDB: Db | null = null;

// A function for connecting to MongoDB,
export default async function connectToDatabase(): Promise<Db> {
  // If the database connection is cached, use it instead of creating a new connection
  if (cachedDB) {
    console.info(formatLog("Using cached client!"));
    return cachedDB;
  }
  const opts = {
    useNewUrlParser: true,
    useUnifiedTopology: true,
  };
  console.info(formatLog("No client found! Creating a new one."));
  // If no connection is cached, create a new one
  const client = new MongoClient(process.env.ATLAS_URI_PROD as string, opts);
  await client.connect();
  const db: Db = client.db(process.env.DB_NAME);
  cachedDB = db;
  return cachedDB;
}

Add create-short-link service

Go ahead and add a ./api/create-link.ts file to create a REST endpoint for this service.

Couple of things we need to be aware of

A unique Hash is required to make short URLs. I used nanoid to generate a random short hash for the long URL.
This endpoint should only be accessed by the POST method.
We should set up an API-KEY authentication to secure the endpoint. This can be done by generating a long string and using it as an API-KEY header.

// ./api/create-link.ts

import { NextApiRequest, NextApiResponse } from "next";
import connectToDatabase from "../../mongodb";
import { customAlphabet } from "nanoid";
import { COLLECTION_NAMES } from "../../types";

const characters =
  "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
const getHash = customAlphabet(characters, 4);

export default async function CreateLink(
  request: NextApiRequest,
  response: NextApiResponse
) {
  const apiKey = request.headers["api-key"] as string;
  if (request.method !== "POST" || apiKey !== process.env.API_KEY) {
    return response.status(405).json({
      type: "Error",
      code: 405,
      message: "Only POST method is accepted on this route",
    });
  }
  const { link } = request.body;

  if (!link) {
    response.status(400).send({
      type: "Error",
      code: 400,
      message: "Expected {link: string}",
    });
    return;
  }
  try {
    const database = await connectToDatabase();
    const urlInfoCollection = database.collection(COLLECTION_NAMES["url-info"]);
    const hash = getHash();
    const linkExists = await urlInfoCollection.findOne({
      link,
    });
    const shortUrl = `${process.env.HOST}/${hash}`;
    if (!linkExists) {
      await urlInfoCollection.insertOne({
        link,
        uid: hash,
        shortUrl: shortUrl,
        createdAt: new Date(),
      });
    }
    response.status(201);
    response.send({
      type: "success",
      code: 201,
      data: {
        shortUrl: linkExists?.shortUrl || shortUrl,
        link,
      },
    });
  } catch (e: any) {
    response.status(500);
    response.send({
      code: 500,
      type: "error",
      message: e.message,
    });
  }
}

Redirect short links to destination

Now that we can create short links, let's add the logic to redirect users to the actual destination.

For that, we can make a dynamic route in Next.js app and write the redirect logic on the server-side.

// ./pages/[hash].tsx

import { NextApiRequest, NextApiResponse, NextPage } from "next";
import Head from "next/head";
import connectToDatabase from "../mongodb";
import { COLLECTION_NAMES } from "../types";

export async function getServerSideProps(request: NextApiRequest) {
  const hash = request.query.hash as string;
  const database = await connectToDatabase();
  const campaign = await database
    .collection(COLLECTION_NAMES["url-info"])
    .findOne({ uid: hash });

  if (campaign) {
    return {
      redirect: {
        destination: campaign.link,
        permanent: false,
      },
    };
  }

  return {
    props: {},
  };
}

const HashPage: NextPage = () => {
  return (
    <div>
      <Head>
        <title>URL Shortener</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <h1>Requested link not found</h1>
    </div>
  );
};

export default HashPage;

This page will redirect the user to the destination if the hash value is available in the database otherwise, it'll show the "Link not found" message.

Hosting

Hosting this project is a piece of cake because Next.js integration with Vercel is excellent.

A simplified list of steps:

Push your Next.js project to a GitHub repository
Go to https://vercel.app and login with your GitHub account
Import the url-shortener repository by clicking on the "New Project" button on the Vercel dashboard.

You can also read about this in detail here.

Once done with the above steps, head to project settings and add the environment variables we defined in our .env.local file to the Vercel project's environment variables.

You can also connect your custom domain to this project from the settings.

🎉 Tada! Your URL shortener is ready and hosted now.

What's next?

Well, you can continue to use this project as a REST API like I do or you can create a front-end to make it a web app.

Before making it a public web app, make sure you put in additional security.

You can clone this project from this GitHub Repo.

This article is not meant to be followed in production and should only be taken for learning purposes.

Many optimizations can be made in the above approach like using a better database or indexing it properly to make it faster.

I hope you find this article helpful! Should you have any feedback or questions, please feel free to put them in the comments below.

For more such content, please follow me on Twitter

Until next time

5 String methods every JavaScript developer should know

Anshuman Bhardwaj — Mon, 07 Mar 2022 08:31:06 +0000

Dealing with Strings is inevitable in all programming languages, so it's great to know that JavaScript provides some amazing String manipulation functions right out of the box.

Today we are going to see five such string methods to make your life easy as a developer.

includes

One of the most common problems is to check if a string contains certain words or symbols. For example, checking if the user's email is from Gmail or Hotmail.

The includes method checks if the string contains the occurrence of provided sub-string. It returns a boolean value.


let email = 'hi@theanshuman.dev'

email.includes('gmail') // false

email = 'sundar@gmail.com'

email.includes('gmail') // true

Tip: We can use the endsWith method for the above use case to make it more efficient.

match

The match method returns the occurrences of the sub-strings matching the Regex pattern provided.

It is useful when we don't know the exact string but know the pattern of the string we are looking for. For example, we don't know the user's email but know that there will be one email mentioned in the string.

Another good case is to use it for matching groups from a Regex. For example, we have an unsubscribe URL that contains the type of newsletter and user auth token.

The match method makes it super easy to extract the matching groups from the string, as named values.


const unsubscribeUrlPattern = /unsubscribe\/(?<type>[^/]+)\/(?<token>[^/]+)/

const { type, token } = url.match(unsubscribeUrlPattern)?.groups ?? {}

replaceAll

You must have come across a use case where you want to update the text before rendering it to the user's view. For example, you got some Jira ticket numbers in this release notes and you want to make the links so users can click on it to check them out.

Well, that's exactly what replaceAll can help you with. It replaces all the instances of the given sub-string/regex with the second argument.


let notes = 'Please checkout TS-4550 for more details. Also, TS-5589 will have test instructions.'

notes = notes.replaceAll(/TS-[0-9]+/g, '<a href="https://jira.com/$&" />')

// $& is used to insert the matched substring i.e. TS-4550

trim

The trim method is super handy when you're validating form inputs, user's tend to leave unnecessary white spaces in text inputs.

The trim method removes white space from both ends of a string and returns a new string, without modifying the original string.

toLowerCase

You might already know this, but string comparison can be painful when you don't know whether the values coming from the other side are case-neutral or not.

The best way to go about this is by making the values lowercase, so both values adhere to the same case. It comes very handy when comparing values on the server or client-side like user inputs with database values.


const userEmail = // value from input

validateSignIn(userEmail.toLowerCase()) // to avoid case 
// sensitive mis-match


function validateSignIn(email) {
    // check if email is available on back end
}

In the above example, if we always send lowercase emails to the back end on both sign-up and sign-in, then we can avoid case-sensitive value bugs from the user's end.

That's it for today. I hope you find this article helpful!
These are my top five picks, if you feel I missed some important methods, please feel free to comment below.

For more such content, please follow me on Twitter

Until next time

Resources

MDN docs

Memoization: the what, why and how?

Anshuman Bhardwaj — Mon, 28 Feb 2022 08:30:57 +0000

What is Memoization?

Imagine, I'm your Math teacher and I gave you a problem to solve. You took 5 minutes to solve it, and the answer was correct. Good job!

10 Minutes later, I give you the exact same problem. What would you do?

You'll just tell me the same answer you did 10 minutes ago right away and spend the next 5 minutes talking to your crush, right? (unless you really love Math, haha)

Well, that right there is Memoization for you.

Memoization is caching expensive computations, so the computer doesn't have to do the same computation more than once, hence saving a lot of time and resources.

Why do we need Memoization?

Memoization is most useful for common subset problems, where a smaller section of the problem has to be calculated multiple times to reach the final answer.

A good example of such problem is the Fibonacci series where the next number is the sum of the previous two.

0, 1, 1, 2, 3, 5, 8 ......

this can be simplified using the following formula

 fib(n) = fib(n - 1) + fib(n - 2)

As you can see, this equation can be written as a recursive function


// return nth number from Fibonacci series
function fib(n) {
    if (n === 0) {
        return 0
    }
    if (n === 1) {
        return 1
    }
    return fib(n - 1) + fib(n - 2)
}

Now let's try our code: node index.js <n>

Note: Code is running on a Ryzen 3400G with 16GB RAM

Well, this looks all good you might say.

Not so fast. Let's try with some bigger numbers.

I guess, by now you can see what the problem is. The computation takes exponentially longer as we increase the number.

How can Memoization help?

Before we solve the problem, let's see what the problem is.

Looking at the above execution tree, we can see that problems are repeated more and more as we go down the tree.

So, the problem is we are doing the same computations multiple times.

The solution: Cache the computations or Memoize

Let's make the same fib a memoized function memoFib.

It's actually very simple to do so, we just need to introduce a cache.


const cache = {}

function memoFib(n) {
    if (cache[n]) return cache[n]
    if (n === 0) {
        return 0
    }
    if (n === 1) {
        return 1
    }
    cache[n] = memoFib(n - 1) + memoFib(n - 2)
    return cache[n]
}

Time for the verdict:

And we have a clear winner! The memoFib took almost constant time for all of these computations. While the fib went crazy.

Hence, it's evident how important Memoization is.

How can I Memoize?

Well, if you have been writing code for a while you must have done it in one way or the other.

The simplest way to do it is to cache function calls using a dictionary-like structure e.g. a Map or an Object in JavaScript.

If you're a React developer, you might have come across hooks like useMemo or useCallback. Both of these hooks are an implementation of Memoization.

These hooks Memoize the returned value, so the value is not computed on every render of the React Component. Hence, making your apps faster.

You can read more about them here.

That's it for now. I hope you find this article helpful! Should you have any feedback or questions, please feel free to put them in the comments below. I would love to hear and work on them.

For more such content, please follow me on Twitter

Until next time

4 ways of finding elements in a JavaScript Array

Anshuman Bhardwaj — Mon, 21 Feb 2022 08:49:04 +0000

Arrays are the building blocks for data-based web apps. We can store and manipulate data using an Array easily.

Today, we are going to see 4 ways to find an element in an Array, along with some use cases explained with examples.

I know, I know...

find

the find method returns the first item that returns true for the passed callback condition, otherwise returns undefined if all items return false for the callback condition.

const numbers = [1, 3, 4, 6, 10];

numbers.find(element => element > 6); // 10

numbers.find(element => element > 10); // undefined

findIndex

the findIndex method returns the index of the first item that returns true for the passed callback condition, otherwise returns -1 if all items return false for the callback condition.

const numbers = [1, 3, 4, 6, 10];

numbers.findIndex(element => element > 6); // 4

numbers.findIndex(element => element > 10); // -1

The find methods are useful when you don't know exactly what you're looking for, but you know a way to identify it. For instance, you know the user's email but not the complete object.

indexOf

the indexOf method returns the index of the first item that matches the passed element, otherwise returns -1.

const numbers = [1, 3, 4, 6, 10];

numbers.indexOf(10); // 4

numbers.indexOf(16); // -1

The indexOf uses the same comparison logic as ===. Hence, using it on an array of Object will not be a good idea.

lastIndexOf

the lastIndexOf methods similar to indexOf we saw above, the only difference being it starts the look up from the tail end of the array.

So, it's a good idea to use lastIndexOf if you know that the element has a higher chance of being in the latter half.

const numbers = [1, 3, 4, 6, 10];

numbers.lastIndexOf(10); // 4

numbers.lastIndexOf(16); // -1

The indexOf methods are useful when you know exactly what you're looking for. For instance, it's best to use them for primitive data types like number or strings.

Summary

To summarise, I would suggest using

find, when you don't know what you're looking for but you know how it should look.
findIndex, to get the index of the element.
indexOf, when you know exactly what you're looking for, and want the index of the element.
lastIndexOf, when you know what you're looking for, you know it's somewhere at the end, and want the index of the element.
when the array items are objects, find and findIndex are the way to go.

That's it for now. I hope you find this article helpful! Should you have any feedback or questions, please feel free to put them in the comments below.

For more such articles, please follow me on Twitter

Until next time

Resources

MDN docs

3 Array methods every JavaScript developer should know

Anshuman Bhardwaj — Mon, 14 Feb 2022 09:18:13 +0000

Arrays are something all of us come across every day. Today I'll share my picks for 3 of the most uncommonly used Array methods.

isArray

In JavaScript, we have to infer the data type of variables way too often, even more often in nested Objects. One of the ways most JavaScript developers do it (including myself) is to check the length property


const data = { ... }

// true, if arrayKey exists and the arrayKey has a length property
(data?.arrayKey && data.arrayKey.length)

Although this works, what if I told you there is even a better way to do this?

The Array.isArray(param: any) call checks if the passed value is indeed an array or not and returns a boolean value.


Array.isArray([]); // true
Array.isArray(new Array(22)); // true

Array.isArray(0) // false
Array.isArray({}); // false
Array.isArray(null); // false
Array.isArray(undefined); // false

For the next two, let's consider a situation

You have to rate some students based on a test as follows

failed: if all answers were wrong
passed: if some answers were correct
excellent: if all answers were correct

some

The Array.some() methods run the provided function on each item of the array and return true, if the provided function returns true for any of them, otherwise false.

So in our scenarios, we can apply Array.some() for the second use case.


function isCorrectAnswer(answer) { 
 // return true if the answer was correct, otherwise false 
}

const answers = [{ ... }]

// didStudentPass will be true, if any of the answers were  // correct
const didStudentPass = answers.some(isCorrectAnswer)

every

The Array.every() methods run the provided function on each item of the array and return true, if the provided function returns true for all of them, otherwise false.

Array.every() seems like a perfect fit for the other two scenarios.


function isCorrectAnswer(answer) { 
 // returns true if the answer was correct, otherwise false 
}

function isInCorrectAnswer(answer) { 
 // returns true if the answer was wrong, otherwise false 
}

const answers = [{ ... }]

// didStudentFail will be true, if all of the answers were incorrect    

const didStudentFail = answers.every(isInCorrectAnswer)

// didStudentExcel will be true, if all of the answers were correct    

const didStudentExcel = answers.every(isCorrectAnswer)

That's it for now. I hope you find this article helpful! Should you have any feedback or questions, please feel free to put them in the comments below, I would love to hear and work on them.

For more such content, please follow me on Twitter

Until next time

DEV Community: Anshuman Bhardwaj

Add comments to your Docusaurus website in 5 minutes

Why do I need comments?

For documentation

For blog

Prerequisites

Get project credentials

Installation

Initializing docsly

Deployment

Example project

Additional notes

Sending login notifications to users using Auth0 Actions

Prerequisite

Set up Auth0 Action

Conclusion

Next.js for beginners

What's Next.js?

Why is Next.js?

How's Next.js?

3 Ways to declare variables in JavaScript: var, let, and const explained

tldr;

var

const and let

Conclusion

3 worst things you can do in an interview

Being clueless

Being unprofessional

Being ignorant

The right way to use LocalStorage in JavaScript

What is LocalStorage?

Internals of LocalStorage

How to use LocalStorage?

Writing data

Reading data

Storing Objects in LocalStorage

Deleting data

removeItem

clear

Creating and using Namespace in LocalStorage?

Step 1

Step 2

Step 3

What the heck is SSG: Static site generation explained with Next.js

What is SSG?

Why do we need SSG?

Use case

Using Next.js for SSG

A static page for a static route

A static page for a dynamic route

Pitfalls

The fallback option

Why Next.js?

Create your own URL shortener with Next.js and MongoDB in 10 Minutes

Motivation

Breakdown

Development

Setup the project

Setting up MongoDB

Add create-short-link service

Redirect short links to destination

Hosting

What's next?

5 String methods every JavaScript developer should know

includes

match

replaceAll

trim

toLowerCase

Resources

Memoization: the what, why and how?

What is Memoization?

Why do we need Memoization?

How can Memoization help?

How can I Memoize?

4 ways of finding elements in a JavaScript Array

find

findIndex

indexOf

lastIndexOf

`removeItem`

`clear`

The `fallback` option