DEV Community: dcodes

Semantic search with Node.js and LangChain

dcodes — Sun, 02 Jul 2023 23:15:06 +0000

LangChain is an innovative library that has recently burst onto the AI scene. Available for both JavaScript and Python, it's a versatile tool designed to streamline the integration of Large Language Models (LLMs) with other utilities like hnswlib, facilitating the swift development of your AI applications.

In today's blog post, we're going to leverage the power of LangChain to build a compact movie search application.

The beauty of this application lies in its use of OpenAI embeddings stored within the hnswlib vector store. Comparing embeddings with LangChain becomes a breeze, and we’ll build a dynamic, interactive front-end with Next.js.

If you think this is a lot, just hold on, we’re going to go through everything and you’ll realize how easy it is to build your own semantic search engine.

So let's get started, and you'll see just how LangChain can supercharge your AI application development journey with very little code.

What is Semantic Search?

Before we delve into the intricacies of implementing semantic search, it's crucial that we first understand its essence and significance in the realm of data retrieval.

Before Semantic Search

In the pre-semantic search era, our search capabilities were confined to exact matches or the utilization of regular expressions.

When users conducted a search, our systems returned results closely matching the entered phrase.

However, a significant drawback of this approach was the lack of comprehension. Our servers, oblivious to the semantics of the words, conducted searches based purely on textual resemblance.

This meant that even a minor spelling error could derail the entire search process, resulting in irrelevant results or, worse, none at all.

After Semantic Search

With the advent of semantic search, it's as if our servers have gained a newfound understanding.

They're no longer simply matching data based on text characters but instead, comprehending the meaning of words and their connection with other words within their context.

Search results are now filtered based on the intent behind the search query.

This transformative approach to information retrieval is what we'll be delving into in this blog post.

We'll be exploring the power of semantic search and demonstrating how to implement this advanced tool in a series of simple steps.

What are Embeddings?

In the context of machine learning, embeddings are a form of representation for categorical data, such as words or phrases, in a way that preserves the semantic relationships between them.

They are vectors (or arrays of numbers) where each point corresponds to a particular category or word. These vectors sit in a high-dimensional space, and the 'distance' and 'direction' between vectors capture the relationships between the corresponding words or categories.

When it comes to natural language processing, embeddings allow us to convert words or phrases into a form that a machine learning algorithm can understand.

The beauty of embeddings is that they capture more than just the standalone meaning of words - they also encapsulate the context and semantic relationships that exist between different words.

This makes them invaluable when dealing with tasks like semantic search, where understanding context and relationships is crucial.

For the purposes of our movie search application, we will be utilizing OpenAI's embeddings - specifically, the Ada-2 model.

This model comes highly recommended by OpenAI due to its efficiency and cost-effectiveness. It enables us to convert our search queries and movie titles into meaningful vectors that capture the semantics of the words involved.

Once we have these embeddings, we'll be storing them in the hnswlib vector store - a high-performance library for nearest neighbour search.

This task is made straightforward with the LangChain library, which provides seamless integration between LLMs and other tools like hnswlib. This powerful combination of technologies lays the foundation for the semantic search capabilities of our application.

What is HNSWLIB?

HNSWLIB, or Hierarchical Navigable Small World graphs library, is an open-source, highly efficient approximate nearest neighbour (ANN) search library written in C++.

It implements the Hierarchical Navigable Small World (HNSW) algorithm, which is renowned for its remarkable speed and accuracy in high-dimensional spaces.

ANN search, which lies at the core of the HNSW algorithm, is a problem of finding data points in a dataset that are closest to a given point.

Traditional methods of performing the nearest-neighbour searches can be computationally expensive, especially when dealing with high-dimensional datasets.

This is where approximate methods, like the one implemented in HNSWLIB, come in - they provide a good trade-off between speed, accuracy, and memory usage.

In our movie search application, we'll be utilizing HNSWLIB as a vector store. This means we'll be storing the OpenAI embeddings (which are essentially high-dimensional vectors representing search queries and movie titles) in an HNSWLIB index.

When a user performs a search, we can quickly find the movies whose embeddings are nearest to the embedding of the search query - thus, effectively implementing semantic search.

Furthermore, the integration of HNSWLIB with the LangChain library allows us to handle the storage and retrieval of embeddings in an efficient and streamlined manner, paving the way for effective and responsive semantic searches.

While HNSWLIB is a powerful choice for storing and retrieving embeddings, it's not the only option at your disposal when working with the LangChain library.

LangChain provides seamless integration with a multitude of vector store options, each with its unique strengths, allowing you to choose the one that best suits your specific needs.

Here are some of the alternatives you might consider:

Memory Vector Store
Chroma
Elasticsearch
FAISS
LanceDB
Milvus
MongoDB Atlas

How Does Semantic Search Work?

Semantic search represents a paradigm shift in information retrieval. It aims to improve search accuracy by understanding the searcher's intent and the contextual meaning of the terms as they appear in the searchable dataspace.

To understand how semantic search operates, let's take our movie search application as an example.

First, we generate embeddings for each movie title in our database. These embeddings are essentially numerical representations of the movie titles and other data related to the same movie.

for example: what happens in the movie? or what does the main character do to succeed? the more information you give in generating the embedding, the more efficient the semantic search will be and users can search for the same movie with very different queries.

For example, if you make the entire movie story an embedding, then people could easily search for movies just by describing some part of the story and get the exact movie they were trying to find.

Because embeddings are high-dimensional vectors, they tend to be large, and traditional methods of handling such data (like searching, reading, and looping through a typical relational database such as PostgreSQL or a document database like MongoDB) can be resource-intensive.

Instead, we store these embeddings in a specialized vector store like HNSWLIB. Vector stores are designed to handle high-dimensional data efficiently. They leverage Approximate Nearest Neighbors (ANN) algorithms, which enable us to search through these embeddings rapidly and accurately.

Once we have generated and stored embeddings for every movie title in our database, the next step is handling the user's search queries.

When a user enters a search term, we generate an embedding for this term in the same way we did for the movie titles. This embedding, which again captures the semantics of the user's query, is then compared with the stored movie title embeddings.

By comparing the user's search query embedding with the movie title embeddings, we can gauge their similarity.

This comparison doesn't just involve matching the exact phrases but also takes into account the meaning and context of the words. The system then returns the most similar movie titles as search results.

In essence, it’s like our server is understanding the user’s intent, and not just matching character strings.

Through this process, semantic search offers a more nuanced, accurate, and efficient approach to information retrieval. It provides a richer, more intuitive search experience by interpreting the user's intent and the context behind the search query.

Getting Started

Before we kickstart our journey into semantic search with Node.js and LangChain, it's important to ensure your development environment is set up correctly.

First and foremost, Node.js should be installed on your PC. If you haven't installed it yet, you can download it from the official Node.js website.

Once Node.js is installed, we will set up a new Next.js application. To do this, open a terminal and run the following command:

npx create-next-app@latest

This will trigger a prompt with several options. For the purposes of our tutorial, we'll be using the app router and enabling Typescript, and TailwindCSS with ESLint features. Choose the options according to your preferences.

Next, we need to install the necessary libraries for our project. Open a terminal in the root directory of your Next.js application, and use the following commands to install each library:

yarn add langchain hnswlib-node gpt-3-encoder

Note: If you're using a Windows PC, you might need to install Visual Studio before you can properly build the hnswlib-node package. This is due to the native code contained within the package.

With the above steps, you'll have a new Next.js project set up and ready, with all the required libraries installed. In the following sections, we'll delve into how to leverage these tools to build our semantic search application.

Database

For the database in our tutorial, we will be using a JSON file for simplicity's sake. Let's call this file movies.json. I’ve gotten the movie data from this open-source repository (thanks to them) and restructured it for our needs.

The movies.json file will store an array of movies, each represented by an object. The structure of each movie object will be as follows:

[
  {
    "id": "a8c1479b-dd6b-488f-970b-ec395cf1798b",
    "name": "The Wizard of Oz",
    "year": 1925,
    "actors": [
      "Dorothy Dwan",
      "Mary Carr",
      "Virginia Pearson"
    ],
    "storyline": "Dorothy, heir to the Oz throne, must take it back from the wicked Prime Minister Kruel with the help of three farmhands."
  },
]

You can add as many movie objects as you want to the movies.json file. Just ensure that they follow the same structure as the above example.

As we proceed, we will generate and store embeddings for each movie property in our movies.json database. These embeddings will later enable us to implement our semantic search.

Generating the Embeddings

Before we can begin serving search requests in our application, we need to generate embeddings for every movie in our database and save them into a vector store. These embeddings will provide the foundation for our semantic search capabilities.

Estimate OpenAI embeddings price

If you like to know how much it would cost for generating your embeddings, here’s a small snippet of code to calculate it.

Just remember this calculates it only for the Ada-2 model, if you use a different model, change the second argument’s value:

import { encode } from "gpt-3-encoder"

/**
 * @param text
 * @param pricePerToken Price per token (For ada v2 it is $0.0001/1k tokens = 0.0001/1000)
 * @returns Price in usd
 */
const estimatePrice = (text: string, pricePerToken = 0.0001 / 1000) => {
  const encoded = encode(text)

  const price = encoded.length * pricePerToken

  return price
}

export default estimatePrice

Now that we have a function to estimate the price of encoding a given text, let's apply it to our movie data.

Here's how you can use the estimatePrice function to calculate the total cost of generating embeddings for all your movies:

import movies from "../data/movies.json"
import estimatePrice from "./estimatePrice"

const run = async () => {
  const textsToEmbed = movies.map(
    (movie) =>
      `Title:${movie.name}\n\nyear: ${
        movie.year
      }\n\nactors: ${movie.actors.join(", ")}\n\nstoryline: ${
        movie.storyline
      }\n\n`
  )

  const price = estimatePrice(textsToEmbed.join("\n\n"))

  console.log(price)
}

run()

Running this script gives us a result of 0.0040587, which is less than 1 cent. This low cost makes the use of OpenAI's services extremely affordable for our application.

Let’s get back to generating embeddings, here's how you can generate the embeddings for the movies data:

// ./functions/generateEmbeddings.ts
require("dotenv").config()
import { HNSWLib } from "langchain/vectorstores/hnswlib"
import { OpenAIEmbeddings } from "langchain/embeddings/openai"
import movies from "../data/movies.json"

const generateEmbeddings = async () => {
  try {
    const start = performance.now() / 1000

    const textsToEmbed = movies.map(
      (movie) =>
        `Title:${movie.name}\n\nyear: ${
          movie.year
        }\n\nactors: ${movie.actors.join(", ")}\n\nstoryline: ${
          movie.storyline
        }\n\n`
    )

    const metadata = movies.map((movie) => ({ id: movie.id }))

    const embeddings = new OpenAIEmbeddings()

    const vectorStore = await HNSWLib.fromTexts(
      textsToEmbed,
      metadata,
      embeddings
    )

        // saves the embeddings in the ./movies directory in the root directory
    await vectorStore.save("movies")

    const end = performance.now() / 1000

    console.log(`Took ${(end - start).toFixed(2)}s`)
  } catch (error) {
    console.error(error)
  }
}

generateEmbeddings()

This script does the following:

It reads the list of movies from our movies.json file.
For each movie, it generates a single string combining the title, year, actors, and storyline.
It creates an array of these strings (textsToEmbed) and an associated array of metadata (metadata). Each element in the metadata array is an object with an id field corresponding to the id of the movie.
It creates a new instance of OpenAIEmbeddings which we'll use to convert our texts to embeddings.
It uses the fromTexts method of the HNSWLib class to generate embeddings for each string in textsToEmbed and store them in a new vector store.
Finally, it saves this vector store in the "movies" directory.

Remember to set your OpenAI API key in your .env file before running this script. The key should be named exactly "OPENAI_API_KEY" and LangChain will automatically pick it up.

By following these steps, you can ensure that every movie title in your database has an associated embedding stored in the vector store, ready to be utilized in semantic searches.

Now we have our vector store saved in the ./movies directory and ready to be used to search for movies.

Creating the Search Functionality

With the embeddings stored in the ./movies directory, we are now ready to create the semantic search functionality in our application.

LangChain provides a convenient way to perform similarity searches on the embeddings we've generated.

The similaritySearch method from the HNSWLib class allows us to compare the embeddings we've generated and find the most similar entries based on a given text.

This powerful feature forms the backbone of our semantic search engine.

Here's how you can create a function that performs a similarity search:

require("dotenv").config()
import { OpenAIEmbeddings } from "langchain/embeddings/openai"
import { HNSWLib } from "langchain/vectorstores/hnswlib"

const search = async (text: string) => {
  try {
    const vectorStore = await HNSWLib.load("movies", new OpenAIEmbeddings())

    const results = await vectorStore.similaritySearch(text, 2) // returns only 2 entries

    results.forEach((r) => {
      console.log(r.pageContent.match(/Title:(.*)/)?.[0]) // Use regex to extract the title from the result text
    })
  } catch (error) {
    console.error(error)
  }
}

search("a tom cruise movie")

This function takes a string of text as input, loads our stored embeddings from the ./movies directory, and performs a similarity search on the embeddings.

The second argument to similaritySearch method indicates the number of similar entries we want to find - in this case, we're asking for the top 2 most similar entries.

We then log the titles of the movies that were found to be most similar to the input text. In this example, the input text is "a tom cruise movie".

Running this function will output:

Title:Mission: Impossible
Title:Mission Impossible III

This is exactly what we want! With this, we have successfully implemented semantic search in our application.

The search functionality now understands the meaning of the search query and finds the most relevant results, rather than just looking for exact matches in the text.

Building the API

Having created the semantic search functionality, we are now ready to implement an API that will allow clients to use this feature. We will build this API using Next.js's route handler.

To do so, create a file in ./api/search/route.ts and add the following code:

import { OpenAIEmbeddings } from "langchain/embeddings/openai"
import { HNSWLib } from "langchain/vectorstores/hnswlib"
import { NextResponse } from "next/server"
import movies from "@/data/movies.json"

export async function GET(req: Request) {
  const { searchParams } = new URL(req.url)

  const q = searchParams.get("q")

  if (!q) {
    return new NextResponse(JSON.stringify({ message: "Missing query" }), {
      status: 400,
    })
  }

  const vectorStore = await HNSWLib.load("movies", new OpenAIEmbeddings())

  const searchResultIds = searchResult.map((r) => r.metadata.id)

  let results = movies.filter((movie) => searchResultIds.includes(movie.id))

  return NextResponse.json({ results })
}

Here's what the code does:

We define a GET function that handles GET requests to the API.
The function extracts the query string q from the URL of the request.
The function loads our stored embeddings and performs a similarity search on them using the provided query string.
It then filters the list of movies to include only those whose IDs match the metadata of the search results.
Finally, the function returns a JSON response that contains these filtered movies.

This function forms the core of our API. It allows clients to search for movies based on the semantic meaning of a provided query string. We have limited the number of results to the top 5 most similar entries to keep our API responses manageable.

Here’s an example response:

{
  "results": [
    {
      "id": "a203e314-7ce0-429e-945e-81c1ea905d9f",
      "name": "Mad Max 3: Beyond Thunderdome",
      "year": 1985,
      "actors": [
        "Mel Gibson",
        "Tina Turner"
      ],
      "storyline": "Max is exiled into the desert by the corrupt ruler of Bartertown, Aunty Entity, and there encounters an isolated cargo cult centered on a crashed Boeing 747 and its deceased captain."
    },
    ]
}

The Frontend

Next.js and Tailwind CSS are great for rapidly developing sleek and modern web applications. The user interface (UI) for our movie search app is straightforward: we need a search input to enter queries, and a space to display the resulting movies.

First, install the react-use library, which provides a variety of helpful hooks, but we only need the useAsyncFn to handle asynchronous functions.

You can install it using Yarn with the following command:

yarn add react-use

Now, let's build our interface. Here's a basic frontend setup that connects to the API we previously created leveraging the useAsyncFn hook from the react-use package to handle the asynchronous API request. Here's how to set it up:

"use client"
import { useState } from "react"
import { useAsyncFn } from "react-use"

interface SearchResults {
  results: {
    id: string
    name: string
    year: number
    actors: string[]
    storyline: string
  }[]
}

export default function Home() {
  const [query, setQuery] = useState("")

  const [{ value, loading }, search] = useAsyncFn<() => Promise<SearchResults>>(
    async () => {
      const response = await fetch("/api/search?q=" + query);
      const data = await response.json();
      return data;
    },
    [query]
  )

  return (
    <main className="flex min-h-screen flex-col items-center p-5 lg:p-24 w-full mx-auto">
      <h1 className="text-4xl font-bold text-center">Search Movies</h1>

      <form
        onSubmit={(e) => {
          e.preventDefault()
          search()
        }}
      >
        <input
          type="text"
          name="search"
          className="border-2 border-gray-300 bg-black mt-3 h-10 px-5 pr-16 rounded-lg text-sm focus:outline-none"
          placeholder="Search anything"
          value={query}
          onChange={(e) => setQuery(e.target.value)}
        />
      </form>

      <div className="mt-10">
        {loading ? (
          <div>Loading...</div>
        ) : (
          <div className="flex flex-wrap gap-5">
            {value?.results.map((movie) => (
              <div
                key={movie.id}
                className="flex flex-col bg-gray-800 rounded-lg shadow-lg p-5 w-full max-w-sm"
              >
                <h2 className="text-xl font-bold">{movie.name}</h2>
                <p className="text-sm">{movie.year}</p>
                <p className="text-sm">{movie.actors.join(", ")}</p>
                <p className="text-sm">{movie.storyline}</p>
              </div>
            ))}
          </div>
        )}
      </div>
    </main>
  )
}

This UI component comprises a search bar and a list of results. When a user types a query into the search bar and submits it, a request is made to our API, and the results are displayed on the screen.

It's important to note that the useAsyncFn hook automatically handles the loading state for us, showing a loading message until the results are fetched and ready to be displayed.

As you can see, now our front-end works well with the API and our semantic search functionality is completely set up and good to go.

Conclusion

In this tutorial, we have explored a modern approach to building an effective and economical semantic search engine.

We used LangChain and OpenAI embeddings, along with HNSWLib to store the embeddings, allowing us to create a semantic search engine for a collection of movies.

This approach showcases how language models can be leveraged to provide powerful features with affordable costs, thanks to the efficiency of OpenAI's Ada v2 model and the convenience of the LangChain library.

The use of semantic search provides a more intuitive and user-friendly search experience, helping users find more relevant results even if the exact phrasing or keywords aren't used.

But we've only just scratched the surface of what's possible. There's an abundance of vector stores to explore for storing data, each offering its own unique capabilities and trade-offs.

Elasticsearch, for instance, is an option that would enable full-text search functionality and complex querying options.

As AI technologies continue to advance and evolve, so do the possibilities for what we can achieve with them. Whether it's building a semantic search engine, a recommendation system, or another application, the potential is limited only by our imagination.

Write better code by following these JavaScript best practices

dcodes — Thu, 18 May 2023 09:50:32 +0000

Whether you're a seasoned developer looking for ways to refine your coding style or a beginner eager to grasp the essentials, this blog post is for you. In this comprehensive guide, we'll explore various best practices that can help you elevate your JavaScript skills to the next level.

1. Adopt a Consistent Coding Style

The first step to improving your JavaScript game is to adopt a consistent coding style. Why is this important? A consistent coding style enhances the readability and maintainability of your code. Think of it as a blueprint that provides structure and coherence to your scripts.

There are several popular coding style guides that you can follow:

Idiomatic JavaScript, which is community-based
Google's JavaScript Style Guide
Airbnb's JavaScript Style Guide

Choose a guide that aligns with your programming style and stick to it throughout your projects, your projects should look like that only one person wrote the code even if many other developers worked on the same project.

2. Naming variables and functions

Next on our list is the naming convention for variables, functions, and other code structures. This practice isn't just about aesthetics or semantics, but it's also about code readability and efficient debugging.

Remember, in JavaScript, the standard is to use camel-case for variables and functions (like myVariableName), and Pascal case for classes (like MyClassName).

// ❌ Poorly named variables:
let a = 'John';
let fn = () => console.log('Hello');

// ✅ Descriptive variable names:
let firstName = 'John';
let sayHello = () => console.log('Hello');

3. Use Shorthands but Be Cautious

Shorthands are a great way to write code faster and cleaner, but be wary as they might return surprising results. To prevent such unexpected outcomes, make sure to always check the documentation, find relevant JavaScript code examples, and test the result.

// ❌ Traditional function declaration:
function square1 (num) {
  return num * num
}
// ✅ Using arrow functions (shorthand):
const square2 = num => num * num

// ❌ Very long code:
let x

if (y) {
  x = y
} else {
  x = 'default'
}

// ✅ A more succinct way to achieve the same result using logical OR:
let x = y || 'default'

4. Add meaningful comments to your code

Commenting on your code is like leaving breadcrumbs for your future self or other developers. It helps in understanding the flow and purpose of your code, especially when working on team projects.

However, remember to keep your comments short, and concise, and only include key information.

// ❌ Over-commenting or not commenting at all:
function convertCurrency (from, to) {
  // Conversion logic goes here
}

// ✅ Using appropriate comments:
/**
 * Converts currency from one type to another
 *
 * @description Converts one currency to another
 * @param {string} from - The currency to convert from
 * @param {string} to - The currency to convert to
 * @returns {number} - The converted amount
 * */
function convertCurrency (from, to) {
  // Conversion logic goes here
}

In this example, the first one does not give the developer what is from and what is to , but the second example lets the programmer easily understand what are the arguments for and describes what the function does.

5. Follow the SoC principle

To keep things simple and organized, it's best not to use JavaScript for adding direct styling. This is known as separation of concerns (SoC). Instead, use the classList API to add and remove classes, and define the style rules with CSS.

This way, CSS does all the styling and JavaScript handles all of the other functionalities of your application.

This programming concept is not exclusive to JavaScript, (SoC) the Separation of concerns is a practice to separate functionalities and not mix up different technologies.

To keep it short: CSS should do CSS stuff but JavaScript should not do CSS.

// ❌ Avoid using JavaScript for styling:
let element = document.getElementById('my-element')
element.style.color = 'red'

// ✅ Changing styles by adding/removing classes:
let element = document.getElementById('my-element')
element.classList.add('my-class')

6. Avoid global variables

When declaring local variables, use let and const to prevent overriding global variables. Both create block-scoped local variables, but the key difference is that let can be re-declared while const can't. So, use them wisely according to your specific needs.

// ❌ Using var for variable declaration:
var x = 1

// ✅ Using let and const for variable declaration:
let x = 1
const y = 2

7. Use `for...of` Instead of `for` Loops

The for...of the statement, introduced in ECMAScript 6, is a more efficient alternative to traditional for loops. It comes with a built-in iterator, eliminating the need to define the variable and the length value. This makes your code cleaner and enhances its performance.

// ❌ Using traditional for loop:
let cities = ['New York', 'Los Angeles', 'Chicago', 'Houston', 'Phoenix']
for (let i = 0; i < cities.length; i++) {
  const city = cities[i]
  console.log(city)
}

// ✅ Using for of loop:
let cities = ['New York', 'Los Angeles', 'Chicago', 'Houston', 'Phoenix']
for (const city of cities) {
  console.log(city)
}

8. Adhere to the Single responsibility principle

One way to adhere to the single responsibility principle is by creating helper functions for common tasks.

These functions should be context-independent so they can be called from any module, enhancing the reusability and modularity of your code.

// ❌ Doing multiple tasks in one function:
function calculateOrderTotal (order) {
  let total = 0

  for (let i = 0; i < order.items.length; i++) {
    total += order.items[i].price * order.items[i].quantity
  }

  let tax = total * 0.07

  return total + tax
}

// ✅ Doing one task in one function:
function calculateSubTotal (items) {
  let total = 0

  for (let i = 0; i < items.length; i++) {
    total += items[i].price * items[i].quantity
  }

  return total
}

function calculateTax (total) {
  return total * 0.07
}

function calculateOrderTotal (order) {
  let subTotal = calculateSubTotal(order.items)
  let tax = calculateTax(subTotal)

  return subTotal + tax
}

9. Understand the Lack of Hoisting in Classes

Unlike functions, classes in JavaScript are not hoisted, meaning you need to declare a class before you call it. This might seem counterintuitive at first, especially if you're accustomed to function hoisting, but it's a fundamental principle that must be understood and respected when using classes in JavaScript.

// ❌ Calling a class before declaration:
const hat = new Hat('Red', 1000)
hat.show()
class Hat {
  constructor (color, price) {
    this.color = color
    this.price = price
  }
  show () {
    console.log(`This ${this.color} hat costs $${this.price}`)
  }
}

// ✅ Calling a class after declaration:
class Hat {
  constructor (color, price) {
    this.color = color
    this.price = price
  }
  show () {
    console.log(`This ${this.color} hat costs $${this.price}`)
  }
}

const hat = new Hat('Red', 1000)

10. Avoid Mutating Function Arguments

Directly modifying the properties of an object or the values of an array passed as a function argument can lead to undesirable side effects and hard-to-trace bugs. Instead, consider returning a new object or array. This practice aligns well with the principles of functional programming where immutability is key.

// ❌ Mutating function arguments:
function updateName (user) {
  user.name = 'bob'
}

let user = { name: 'alice' }
updateName(user)
console.log(user) // { name: 'bob' }

// ✅ Avoid mutating function arguments, return new object instead:
function updateName (user) {
  return { ...user, name: 'bob' }
}

let user = { name: 'alice' }
let updatedUser = updateName(user)
console.log(user) // { name: 'alice' }
console.log(updatedUser) // { name: 'bob' }

11. Handle Promises Correctly

In the asynchronous world of JavaScript, promises are a prevalent concept. However, they must be handled correctly to prevent unexpected behaviour. JavaScript provides a try...catch block that can be used to handle exceptions that may arise during the execution of your asynchronous code.

This way, you ensure errors are caught and dealt with appropriately, maintaining the robustness of your code.

// ❌ Not handling promises correctly:
async function fetchData () {
  const response = await fetch('https://jsonplaceholder.typicode.com/todos/1')
  const data = await response.json()

  return data
}

// ✅ Handling promises correctly:
async function fetchData () {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/todos/1')
    const data = await response.json()

    return data
  } catch (error) {
    // Handle your errors here...
    throw new Error(error)
  }
}

12. Avoid the Over-Nesting in your code

This one is one of the most common mistakes that beginners do, they nest block after block after block, a for loop inside another loop inside an if.else inside a try catch on and on.

Once you know, you have quite a clutter and you don’t know what exactly the code does and where to find the code responsible for what you’re looking for.

Debugging this type of code could be quite difficult and overwhelming, and when other programmers see it, you will confuse them too, not to mention you’ll give off the “Unprofessional” vibe.

// ❌ Nesting code blocks too much and not using the return keyword
function checkNumber (num) {
  if (num > 0) {
    console.log('Number is positive.')
  } else {
    if (num < 0) {
      console.log('Number is negative.')
    } else {
      console.log('Number is zero.')
    }
  }
}

// ✅ Using the return keyword instead of the else statement
function checkNumber (num) {
  if (num > 0) {
    console.log('Number is positive.')
    return
  }

  if (num < 0) {
    console.log('Number is negative.')
    return
  }

  console.log('Number is zero.')
}

13. Optimizing for loops

There is a common way of writing for loops in JavaScript, here is an example of how most developers write loops in JavaScript

var languages = ['Python', 'JavaScript', 'C++', 'Ruby'];
for(var i=0;i<languages.length;i++){
  codeIn(languages[i]);
}

For a small array like this, this loop is highly efficient and runs without any problem, but when it comes to larger datasets and an array with thousands of indexes, this approach can slow down your loop process.

What happens is that when you run languages.length the length of the array will be re-computed each time the loop runs, and the longer your array is, the more inefficient it will be to re-calculate the array length every time the loop runs especially when the length of the array is static which is in most cases.

What you should do instead is store the array length in a different variable and use that variable in your loops, for example:

var languages = ['Python', 'JavaScript', 'C++', 'Ruby'];
var langCount = languages.length;
for(var i=0;i<langCount;i++){
  codeIn(languages[i]);
}

With this tweak, the 'length' property is accessed only once, and we use the stored value for subsequent iterations. This improves performance, particularly when dealing with large data sets.

Another elegant approach is to declare a second variable in the pre-loop statement:

var languages = ['Python', 'JavaScript', 'C++', 'Ruby'];
for(var i=0, n=languages.length; i<n; i++){
  codeIn(languages[i]);
}

In this approach, the second variable 'n' captures the array's length in the pre-loop statement, thus achieving the same result more succinctly.

Conclusion

Remember, these practices aren't just about writing cleaner and better-structured code. They're also about producing code that's easier to maintain and debug.

Software development is a continuous process. Creating the development code is just the first step of the software life cycle. It's crucial to continually monitor, debug, and improve your code in the production stage.

So there you have it, 13 JavaScript best practices to elevate your coding game. Whether you're a beginner or an experienced developer, adopting these habits will help you write better, more efficient, and maintainable code. Happy coding!

React and express.js form validations with Zod

dcodes — Mon, 05 Dec 2022 02:49:42 +0000

Whether you are a front-end developer or a back-end developer, you probably have faced difficulties with validating forms, sometimes you are writing too many if else statements that will make your code bloated and hard to maintain.

The best way to handle form validations throughout your code is definitely not by writing lines and lines of control flow statements, but to use a library that does all of that for us.

There are many libraries out there that you can use, but in this blog post, I will be using Zod along with React.js to do all of the form validations from the front end and show the errors back to the user.

Also, we will be using Zod again to validate the same form from the back which we will be writing using Node.js and Express.js.

What is Zod?

Zod is a TypeScript-first schema declaration and validation library. Zod can be used for any validation, from a simple string type to a very complex nested object.

The best thing about Zod is that it is very user-friendly and easy to use, it helps avoid duplicate declarations.

You declare the validator and Zod will infer the static type in TypeScript.

For example, you have a simple schema written in Zod

const User = z.object({
  name: z.string(),
  email: z.string().email(),
})

You can get the TypeScript type by writing the following code

type UserType = z.infer<typeof User>

It will generate the following TypeScript type

type UserType = {
    name: string;
    email: string;
}

Some other great aspects of Zod:

No dependencies
Works in Node.js and all modern browsers
Tiny: 8kb minified + zipped
Immutable: methods (i.e. .optional()) return a new instance
Concise, chainable interface
Functional approach: parse, don't validate
Works with plain JavaScript too! You don't need to use TypeScript.

So let’s get started with some form validations with Zod.

Getting started

For the front end, we will be creating a simple React application and have a form in it, we will be validating the form by using Zod and showing the errors back to the user if there are any.

Setting up a React application

Let’s create a simple React application using Vite.

Vite is a rapid development tool for modern web projects. It focuses on speed and performance by improving the development experience. Vite uses native browser ES imports to enable support for modern browsers without a build process.

Run the following command to create a Vite project

yarn create vite

After you run the command, it will ask you to name the project.

I will name it “react-zod”.

Vite create provide project name

After that select your preferred front-end framework

Vite React

After that select your programming language, and I will choose TypeScript.

Zod does not require you to use TypeScript, so if you want to go ahead with JavaScript it is totally fine.

Vite.js React.js TypeScript project

After that, your application will be created and you can cd into it and install the dependencies by running yarn in your terminal.

I will also install TailwindCSS with React, which makes writing CSS code much easier, follow this simple tutorial to install TailwindCSS in your React project.

I will create a sample form that contains some different data types just for the tutorial.

This is our first and only page of the React application, with this form we will test and validate all of our inputs.

import { ChangeEvent, FormEventHandler, useState } from "react"

function App() {
  const [data, setData] = useState<any>({})

  const onSubmit: FormEventHandler<HTMLFormElement> = (e) => {
    e.preventDefault()
  }

  const onChange = (e: ChangeEvent<HTMLInputElement>) => {
    const { name, value } = e.target

    if (name === "isAdmin") {
      setData((prev: any) => ({ ...prev, [name]: !prev.isAdmin }))
    } else {
      setData((prev: any) => ({ ...prev, [name]: value }))
    }
  }

  return (
    <div className="w-full max-w-5xl p-5 mx-auto">
      <h1 className="text-center text-3xl font-bold">
        React Form validation with ZOD
      </h1>

      <form
        onSubmit={onSubmit}
        className="mt-10 max-w-sm mx-auto flex flex-col gap-2"
      >
        <div>
          <label className="mb-1">Name</label>
          <input
            className="px-5 py-2 outline-none border border-gray-300 w-full rounded-md"
            placeholder="Name"
            type="text"
            name="name"
            value={data.name}
            onChange={onChange}
          />
        </div>
        <div>
          <label className="mb-1">Email Address</label>
          <input
            className="px-5 py-2 outline-none border border-gray-300 w-full rounded-md"
            placeholder="Email Address"
            type="text"
            name="email"
            value={data.email}
            onChange={onChange}
          />
        </div>
        <div>
          <label className="mb-1">Password</label>
          <input
            className="px-5 py-2 outline-none border border-gray-300 w-full rounded-md"
            placeholder="Password"
            type="password"
            name="password"
            value={data.password}
            onChange={onChange}
          />
        </div>
        <div>
          <label className="mb-1">Percentage</label>
          <input
            className="px-5 py-2 outline-none border border-gray-300 w-full rounded-md"
            placeholder="Percentage"
            type="text"
            name="percentage"
            value={data.percentage}
            onChange={(e) => {
              const value = Number(e.target.value)
              setData((p: any) => ({ ...p, percentage: value }))
            }}
          />
        </div>
        <div>
          <label className="mb-1">Is Admin</label>
          <input
            className="px-5 py-2 outline-none border border-gray-300 w-full rounded-md"
            placeholder="Boolean"
            type="checkbox"
            name="isAdmin"
            checked={data.isAdmin}
            onChange={onChange}
          />
        </div>

        <button
          type="submit"
          className="py-2 px-5 rounded-lg border hover:bg-gray-50"
        >
          Submit
        </button>
      </form>
    </div>
  )
}

export default App

The code above is a simple React component that includes a simple form inside of it which has a few fields that are name, email, password, percentage, isAdmin each with a different data type.

The goal is to validate any data that will be filled by any user and only submit the form when all of the fields pass all of the form validations that will be taken care of by Zod.

We have a onChange function that will be triggered whenever each input has a change in its value

  const onChange = (e: ChangeEvent<HTMLInputElement>) => {
    const { name, value } = e.target

    if (name === "isAdmin") {
      setData((prev: any) => ({ ...prev, [name]: !prev.isAdmin }))
    } else {
      setData((prev: any) => ({ ...prev, [name]: value }))
    }
  }

We are also checking if the name is equal to isAdmin in that case we are changing the state to the opposite value of the previous value to get a Boolean value.

The onSumbit button is an empty function which only has a simple function inside of it which is the e.preventDefault() which will prevent the page to reload. We will come back to this function later to handle the submit form action.

This is how the application looks like

Installing Zod

Install Zod by running the following command in the terminal

yarn add zod

Important: If you are using TypeScript, it is required that you have TypeScript version 4.1 or above installed on your machine, if you haven’t make sure you install the latest version by running the following command

yarn global add typescript@latest

Also it is important to set your strict value as true in your tsconfig.json file.

Now it’s time to create a schema using Zod.

Creating a schema with Zod

First, let's create a folder and store all of our schemas inside of it.

Create a folder to store all of your schemas inside of your src directory, I will name the folder schemas

Create a schema type for the form above inside of that folder, src/schemas/form.ts

This is how the folder structure looks like

Now we can use zod by importing it.

import { z } from "zod"

Creating our Form object with zod

import { z } from "zod"

export const Form = z.object({
  name: z.string(),
  email: z.string().email(),
  password: z.string(),
  percentage: z.number(),
  isAdmin: z.boolean(),
})

As you can see, we are using the object property of zod to tell it that our Form object has some specific properties with specific types.

name: z.string() makes sure that name is always string

email: z.email() makes sure that the email field has a valid e-mail address.

percentage: z.number() makes sure that the percentage is a valid number.

isAdmin: z.boolean() makes sure that the field contains a boolean.

But this is not all, there are so many other things we can do with zod like making sure a certain property has a specific length, or a number is between a specific range.

We can also add custom error messages when a particular field fails validation, for example, if we want the name to have a minimum length of 2 and a maximum length of 32, we can do something like this

const name = z
  .string()
  .min(2, "Name must be at least 2 characters")
  .max(32, "Name must be at most 32 characters")

Let’s make our form much better by adding more validations to it.

import { z } from "zod"

export const Form = z.object({
  name: z
    .string({ description: "Your name" })
    .min(2, "Name must be at least 2 characters")
    .max(32, "Name must be at most 32 characters")
    .optional(),
  email: z.string().email(),
  password: z
    .string()
    .min(8, "Password must be at least 8 characters")
    .max(64, "Password must be at most 64 characters"),
  percentage: z
    .number()
    .min(0, "Percentage must be at least 0")
    .max(100, "Percentage must be at most 100"),
  isAdmin: z.boolean().default(false),
})

By default, all of the values are expected to be required, meaning they should be defined and have a value of their specific type when any data is parsed to the schema. We are using the optional() method on the name property to make it an optional property.

Creating TypeScript types from a Zod schema

We can create a TypeScript type directly from our Zod schema just by using the infer method.

export type FormType = z.infer<typeof Form>

This will create the following TypeScript type

type FormType = {
    name?: string | undefined;
    email: string;
    password: string;
    percentage: number;
    isAdmin: boolean;
}

As you can see, the name property is optional in the TypeScript type as well.

Validate the React form with Zod

Now that our schema is ready to be used, let’s write a function to validate the React form by using Zod.

Go to your App.tsx file and import the Form schema that we just created.

import { Form } from "./schemas/form"

Create a function inside of the App component with the name validate to handle the form validation, here is how the validate function looks like

const validate = () => {
  const formData = Form.safeParse(data)

  if (!formData.success) {
    const { issues } = formData.error

    setErrors(issues)
  } else {
    setErrors([])
  }
}

In this function, we are using the safeParse method on the Form object. which will return a property with the name success which is a boolean if the value is true it means that the validation was not successful otherwise it is successful.

After the function creation, we can easily call it whenever the form is submitted

 const onSubmit: FormEventHandler<HTMLFormElement> = (e) => {
    e.preventDefault()

    validate()
  }

Error handling with Zod

When the validation is not successful or the success value equals false then another property will be returned from the safeParse method which is the error object which also has another property on it with the name issues which is exactly what we need.

The issues property is an array of objects with the following schema

{
  code: "invalid_type",
  expected: "string",
  message: "Required",
  path: ["email"],
  received: "undefined",
}

What we need in this object is the message property, we can easily access this message property and use it to show it back to the user so that they will understand why the validation failed.

This message property can also be easily configured when the Zod schema is initialized, for example,

const User = z.object({
  name: z.string().min(2, 'Name must be at least 2 characters'), // will show this error if "name" property has a length of less than 2 characters
  email: z.string().email(),
})

Back to our validate function, we are also running a function with the name setErrors which updates the state errors which were defined above by using a simple useState hook.

const [errors, setErrors] = useState([])

If you want to make this type-safe, you can use the ZodIssue type which comes with Zod which can be imported easily

import { ZodIssue } from "zod"

Updating the state

const [errors, setErrors] = useState<ZodIssue[]>([])

Showing the error back to the user

Now that we have written our validate function, if there is any error when the user submits the form, it will update the errors state with the new errors.

We can use this state to show it back to the user.

I will create a new function with the name getError which will get one argument path and return the error message in the errors state.

const getError = (path: string) => {
    const error = errors.find((error) => error.path === path)

    return error ? (
      <small className="text-red-500">{error?.message}</small>
    ) : null
  }

As you can see we are returning a JSX element <small> with a red colour.

We can run this function under every input element in our Form component.

This is how our Form component looks like

<form
  onSubmit={onSubmit}
  className="mt-10 max-w-sm mx-auto flex flex-col gap-2"
>
  <div>
    <label className="mb-1">Name</label>
    <input
      className="px-5 py-2 outline-none border border-gray-300 w-full rounded-md"
      placeholder="Name"
      type="text"
      name="name"
      value={data.name}
      onChange={onChange}
    />

    {getError("name")}
  </div>
  <div>
    <label className="mb-1">Email Address</label>
    <input
      className="px-5 py-2 outline-none border border-gray-300 w-full rounded-md"
      placeholder="Email Address"
      type="text"
      name="email"
      value={data.email}
      onChange={onChange}
    />
    {getError("email")}
  </div>
  <div>
    <label className="mb-1">Password</label>
    <input
      className="px-5 py-2 outline-none border border-gray-300 w-full rounded-md"
      placeholder="Password"
      type="password"
      name="password"
      value={data.password}
      onChange={onChange}
    />
    {getError("password")}
  </div>
  <div>
    <label className="mb-1">Percentage</label>
    <input
      className="px-5 py-2 outline-none border border-gray-300 w-full rounded-md"
      placeholder="Percentage"
      type="text"
      name="percentage"
      value={data.percentage}
      onChange={(e) => {
        const value = Number(e.target.value)
        setData((p: any) => ({ ...p, percentage: value }))
      }}
    />
    {getError("percentage")}
  </div>
  <div>
    <label className="mb-1">Is Admin</label>
    <input
      className="px-5 py-2 outline-none border border-gray-300 w-full rounded-md"
      placeholder="Boolean"
      type="checkbox"
      name="isAdmin"
      checked={data.isAdmin}
      onChange={onChange}
    />
    {getError("isAdmin")}
  </div>

  <button
    type="submit"
    className="py-2 px-5 rounded-lg border hover:bg-gray-50"
  >
    Submit
  </button>
</form>

Trying it out

Now it is time to try out our application and see if it works as expected.

First, let's submit the form with empty values.

As you can see we get required errors for objects that didn’t have the optional() method run on.

Let’s add data to the fields

Now we no longer get the required error messages, but we get other validation messages that we have defined above.

If we fill out the form without any mistakes, we no longer will see the validation errors.

Congratulations, now your form is validated with as little effort as possible, thanks to Zod there is no longer the need to write lines and lines of if and else cases and other control flow statements to validate your forms.

Validating a form in Node.js with Zod

let’s create a simple Node.js backend by using express.js to validate the same form that we have just created, but this time from the backend and sending back the proper error messages to the client.

This is how our simple node.js server code looks like

const express = require('express')
const app = express()

app.use(express.json())

app.post('/form/submit', (req, res) => {})

const PORT = process.env.PORT || 3000

app.listen(PORT, () => {
  console.log(`Server is running on port ${PORT}`)
})

Let’s update the POST route with the proper code to validate the same data in the form that we created in the front end.

Creating a Zod Schema

First things first, let’s create the Zod schema for the form validations.

const Form = z.object({
  name: z
    .string()
    .min(2, 'Name must be at least 2 characters')
    .max(32, 'Name must be at most 32 characters')
    .optional(),
  email: z.string({ required_error: 'Email is required' }).email(),
  password: z
    .string({ required_error: 'Password is required' })
    .min(8, 'Password must be at least 8 characters')
    .max(64, 'Password must be at most 64 characters'),
  me: z.string({ required_error: 'You must provide me' }),
  percentage: z
    .number({ required_error: 'Percentage is required' })
    .min(0, 'Percentage must be at least 0')
    .max(100, 'Percentage must be at most 100'),
  isAdmin: z.boolean().default(false)
})

This one is a bit different, when we are initializing a type of a property like z.string() we are also passing in the options and setting the required_error property, this way were are able to overwrite the default required error message.

Creating and validating the route with express and Zod

Now that our schema is ready to use, let’s create a POST route with express and validate the input data with Zod.

app.post('/form/submit', (req, res) => {
  try {
    const body = Form.safeParse(req.body)

    if (!body.success) {
      res.status(400).json({ message: body.error.issues[0].message })
      return
    }

    // Do something with the data

    res.json({
      message: 'Form submitted successfully'
    })
  } catch (error) {
    res.json({
      message: error.message
    })
  }
})

Of course, you can send a different response back to the client if there is an issue in validating the form, but for this tutorial, I will be sending back the first issue message.

Let’s test our route with various data and see if it works as expected

First test

// request
{
  "name": "John",
  "email": "test", 
  "password": "123456",
  "isAdmin": "true"
}

// response
{
  "message": "Invalid email"
}

Second test

// request
{
  "name": "John",
  "email": "test@gmail.com", 
  "password": "123456",
  "isAdmin": "true"
}

// response
{
  "message": "Password must be at least 8 characters"
}

Third test

// request

{
  "name": "John",
  "email": "test@gmail.com", 
  "password": "12345645",
  "isAdmin": "true"
}

// response
{
  "message": "Percentage is required"
}

Fourth test

// request
{
  "name": "John",
  "email": "test@gmail.com", 
  "password": "12345645",
  "isAdmin": "true", 
  "percentage": 3
}

// response
{
  "message": "Expected boolean, received string"
}

Final test

// request
{
  "name": "John",
  "email": "test@gmail.com", 
  "password": "12345645",
  "isAdmin": true, 
  "percentage": 3
}

// response
{
  "message": "Form submitted successfully"
}

Congratulations, now your form is validated strongly from the back end as well, without having to do too many configurations and writing endless lines of code which will make your code extremely bloated and making it more difficult to maintain.

Since Zod works perfectly well with TypeScript, it will make your code type-safe leaving no space for unexpected errors and bugs.

Thanks for reading this blog post, if you enjoyed the blog, make sure you share it with other developers so that they can benefit from it as well.

If you have any notes, please let me know from the comments.

How to set HTML lang attribute in Next.js

dcodes — Tue, 06 Sep 2022 12:40:38 +0000

Changing the lang attribute on the HTML element could be useful to let search engines know what language is your content written in.

The HTML lang attribute is used to indicate the language of the document. This can be used by browsers to display content in a way that is more appropriate for the user's language.

It can also be used by some search engines to index and rank results based on the user's language preference.

The HTML tag is also used to declare the character encoding of the document. This is important for ensuring that text is displayed correctly when viewed in different languages.

The lang attribute is very important to be specified so you don't risk your search index ranking.

How to change the lang attribute in NextJS

Changing the lang attribute in a normal HTML file is very straightforward

<html lang="en">
  <!-- Your content here -->
</html>

Since Next.Js is a React framework, it does not work the same way since there is no HTML file to edit, when you first create the next application with the command npx create-next-app it doesn't automatically set the lang attribute to English.

lang attribute is not set to the web page or pages by next.js

Next.js makes it easy to make your application support multiple languages and allows us to change the lang attribute from the next.config.js file.

You only need to change the i18n (i18next) property inside the next configuration file

/** @type {import('next').NextConfig} */
const nextConfig = {
  ...
  i18n: {
    locales: ["en"],
    defaultLocale: "en",
  },
}

module.exports = nextConfig

We have two properties inside of the Next.js configuration file that is required to have values.

Locales

A list of the locales that are supported by your application, if your application only supports the English language, then you only need to add the English ISO language code. Or if your application supports multiple languages like English as well as Spanish, then you have to add both of them to the list, for example:

const nextConfig = {
  ...
  i18n: {
    locales: ["en", "esp"],
    defaultLocale: "en",
  },
}

Not the lang attribute has been added by Next.js

Language attribute added next.js

Default locale

The defaultLocale property of the Next.js configuration file accepts only a string, which is the default ISO language code that your application supports. If your application has a default language of French, then your default locale value should be like this:

const nextConfig = {
  ...
  i18n: {
    locales: ["en", "fr"],
    defaultLocale: "fr", // default lang fr
  },
}

If you don't know the language code that you want, here is a list of all the language codes that you can use.

Multiple domains for multiple languages

If your website has multiple domain names for different languages, then you can use another property that Next.js provides, which is the domains property.

The "domains" property

The domains property is a list of domains for specific languages.

For example, if you have a domain with the name "example.com" and you want it to have the English language, and you also have another domain for the french language which is "example.fr" then setting the domains would be very useful.

Example

/** @type {import('next').NextConfig} */
const nextConfig = {
  i18n: {
    locales: ["en", "fr"],
    defaultLocale: "en",
    domains: [
      {
        /**
         *  the domain example.com will
         *  have english language
         */
        domain: "example.com",
        defaultLocale: "en-US",
      },
      {
        /**
         * the domain example.fr will
         * have french language
         */
        domain: "example.fr",
        defaultLocale: "fr",
      },
      {
        domain: "example.nl",
        defaultLocale: "nl-NL",
        /**
         * Other locales in the list
         * will be redirected to this domain
         */
        locales: ["nl-BE"],
      },
    ],
  },
}

module.exports = nextConfig

In the example above, the main domain which is "example.com" will have a lang attribute set to "en" which means it will have the English language.

"example.fr"(s) HTML lang attribute will be set to "fr" (french language).

"example.nl"(s) HTML lang attribute will be set to "nl" (dutch language) also any locales in the locales list will be redirected to this domain, in this case, the "nl-BE" locale will be redirected to the "example.nl" domain.

Switch between different locales

We can switch between different locales in Next.js by using the Next.js router.

Let's say you want to redirect the user to the home page / but with a different locale, here is how to do it

const changeLocale = () => {
  router.push(
    "/todo",
    {},
    { locale: locale ? (locale === "en" ? "fr" : "en") : "en" }
  )
}

Using Next.js Link

You can achieve the same thing by using the Next.js Link component

<Link
  href="/todo"
  locale={router.locale ? (router.locale === "en" ? "fr" : "en") : "en"}
>
  <button>Change locale</button>
</Link>

Conclusion

The blog post showed how to set up Next.js and add multiple languages. It is an easy process that can be used to make applications support more than one language. If you are looking for an easy way to include multiple languages in your application, Next.js is a great option.

That's it, if you found this blog post valuable, make sure to share it with other cool developers.

How to use stubs with Cypress

dcodes — Sun, 28 Aug 2022 19:04:07 +0000

Cypress is a great tool for integration tests, unit tests and end-to-end tests for your front-end applications. It provides many features that make it easy to use and reliable. Cypress is also easy to install and test code.

It has a wide range of plugins that can be used to extend its functionality. It also has a great community that can help you get started with using cypress.

What is stubbing in testing applications?

A stub is a piece of code that is used to stand in for another piece of code that is not yet available or is not possible to give you the desired outcome that you want.

For example, if a testing suite needs to make a call to an external API, but the API has not yet been built, the testing team can use a stub to mimic the functionality of the API.

Or if you are calling your API you need actual data in your database which is not available at all times and you still want to get back a favourable response from the API, using the real API, in this case, would be very inconvenient and that's when stubbing comes in.

This allows the testing suite to continue running without error, and also provides a way to assess how the system will behave when the real API is integrated.

While stubbing can be useful in some scenarios, it should not be overused, as it can lead to tests that are not realistic. In general, it is best to avoid stubbing when possible and only use it when necessary.

Why use stubs in your applications?

The stub function in Cypress is useful when you want to test unique scenarios in your application and make sure your application works as expected in every scenario and with various datasets that your application might get.

For example, if you want to retrieve some data from your server from the browser, in order to do that, you have to actually have some data in your database which is not always a guarantee that this data is available.

It might be available on your end, but it might not be available when you run your tests in the cloud or when you hand it over to a partner, with stubs, you always make sure that your tests run everywhere without depending heavily on the APIs.

Stubs can also help to speed up your test processes and help you avoid slow tests. since your application is no longer waiting for the server to process the data and send it back to the client.

Another case of using stubs in Cypress is sometimes your tests depend on your application's date and time, this causes inconvenience for your tests since it makes your application time dependent.

Instead, you can use the cy.clock() function which helps you control the time of your browser and skip through time.

Ways to do stubbing in Cypress

There are multiple functions that Cypress provides to stub other functions, the most important ones are the following:

cy.stub() : replaces a function, and controls its behavior.
cy.intercept(): Spy and stub network requests and responses.
cy.spy(): To wrap a function in a spy, use the cy.spy() command.
cy.clock(): To control time in the browser.

cy.stub() is useful for stubbing any function or method inside your application for example: disabling the prompt function on the window object.

cy.intercept is when you want to change the requests and response data of the networks between your browser and your APIs directly.

cy.spy() lets you wrap function and record invocations of that function without actually replacing the original function.

cy.clock is useful to take control of the time of the browser, for example instead of waiting for a counter to finish, you can skip ahead of time and avoid unnecessary waiting in your tests.

The main difference between cy.spy() and cy.stub() is that cy.spy() does not replace the method, it only wraps it. So, while invocations are recorded, the original function is still called without being modified.

This can be very useful when testing methods on native browser objects. You can verify a method is being called by your test and still have the original function action invoked.

Examples of using stubs spies and clocks

In this blog post, I will provide you with some examples and use cases for stubs, spies, and clocks in Cypress.

Stubbing API calls in Cypress with cy.intercept()

If you are using a modern front-end framework for your applications, it is more likely that you are using client-side rendering.

So, instead of the server getting all of the data and generating the page, your application utilizes the browser to fetch all of the data that your application requires, we can use Cypress to manipulate these requests that go to your server by changing the request and response properties.

In order to do that, we will use the cy.intercept() command of Cypress.

For this example, I have created a small to-do app that fetches data from JSON placeholder API.

This is how it looks.

All of the to-do data is coming from the JSON placeholder API.

Let's say we want to stub the response that we are getting back from the API and get back a custom response in the body of the response.

Let's say you only want to get back two entries from the APIs directly.

In order to do that, I will create a JSON file inside the fixtures folder that cypress provides, and insert the data there.

Fixtures are static sets of data in a located file that you can use throughout your tests.

The fixture cypress/fixtures/todos.json

[
    {
        "userId": 1,
        "id": 1,
        "title": "First todo",
        "completed": false
    },
    {
        "userId": 1,
        "id": 2,
        "title": "Second todo",
        "completed": false
    }
]

The spec file

describe("My todo app", () => {
  it("Gets back only two entries", () => {
    cy.intercept("https://jsonplaceholder.typicode.com/todos*", {
      fixture: "todos.json",
    })
    cy.visit("/")

    cy.get("[data-cy=todo-item]").should("have.length", 2)
  })
})

Notice that we have put a * after the complete URL, this is that for all the different query parameters this interception is being made.

And also make sure that you put the cy.intercept() before the cy.visit() because sometimes the request is being sent without the intercept function finishing completely, therefore making your test fail.

You can also change the method of the request by typing the request method in the first parameter, for example:

cy.intercept("GET", "https://jsonplaceholder.typicode.com/todos*", {
  fixture: "todos.json",
})

If you don't want to use a fixture, you can edit the interception by providing the body with a value.

cy.intercept("GET", "https://jsonplaceholder.typicode.com/todos*", {
  body: [{ title: "First" }, { title: "Second" }],
})

You can also change other properties of the request like headers

cy.intercept("https://jsonplaceholder.typicode.com/todos*", {
  body: [{ title: "First" }, { title: "Second" }],
  headers: {
    Authorization: "Bearer <token>",
  },
})

Stubbing functions and properties using the cy.stub() command

Cypress lets you stub functions and properties by using the cy.stub() command.

The function takes two arguments, one of them is the object and the second argument is the method you want to stub.

How to use stub in cypress

An example of using cy.stub() in Cypress

describe("Stubbing", () => {
  const obj = {
    sum: (a: number, b: number) => a + b,
  }

  it("should stub the function", () => {
    cy.stub(obj, "sum").returns(3) // returns 3 instead of a + b

    expect(obj.sum(10, 20)).to.equal(3)
  })
})

As you can see the function will always return 3 no matter what are the inputs.

Stubbing a function based on call count

Sometimes we want to change the returning values of a function based on the call count of that function.

If you want to get some value back for the first function call and get back a different value for the second and third call, you can achieve this by using the onFirstCall(), onSecondCall() and onThirdCall() methods.

it("should stub the function for the first 3 calls", () => {
    cy.stub(obj, "sum")
        .onFirstCall()
        .returns(3)
        .onSecondCall()
        .returns(10)
        .onThirdCall()
        .returns(20)

    expect(obj.sum(10, 20)).to.equal(3)
    expect(obj.sum(10, 20)).to.equal(10)
    expect(obj.sum(10, 20)).to.equal(20)
})

The onFirstCall() method lets you modify the function only for the first call, the onSecondCall() and onThirdCall() also do the same thing for the second and third function call.

Restore a stubbed method

Sometimes you only want to stub your method only once and restore it to the original method. once ran the specific amounts of times that you wanted.

Storing the stub inside of a variable could also be useful so that later in the code you can restore it to the original method.

it("should stub and restore the function", () => {
    const stub = cy
        .stub(obj, "sum")
        .onFirstCall()
        .returns(3)
        .onSecondCall()
        .returns(10)
        .onThirdCall()
        .returns(20)

    expect(obj.sum(10, 20)).to.equal(3)
    expect(obj.sum(10, 20)).to.equal(10)
    expect(obj.sum(10, 20)).to.equal(20)

    stub.restore()

    expect(obj.sum(10, 20)).to.equal(30)
})

Stub a property

Stubbing is not only for methods, you can actually stub properties of objects and change their values by using the value() method.

describe("Stub a property", () => {
  const car = {
    color: "red",
    getColor() {
      return this.color
    },
  }

  it("should stub a property", () => {
    expect(car.getColor()).to.equal("red")

    cy.stub(car, "color").value("blue")

    expect(car.getColor()).to.equal("blue")
  })
})

You can also change the value to an object or array or any other data type.

describe("Stub a property", () => {
  const car = {
    color: "red",
    getColor() {
      return this.color
    },
  }

  it("should stub a property", () => {
    expect(car.getColor()).to.equal("red")

    cy.stub(car, "color").value({ message: "blue" })

    expect(car.getColor()).to.deep.equal({ message: "blue" })
  })
})

Cypress app actions and stubs

We can easily stub methods and functions directly inside our application with Cypress.

How do Cypress app actions work?

Because Cypress architecture allows interaction with the application under test, this is simple. All we need to do is to expose a reference to the application's model object by attaching it to the window object.

For example, you can write some JavaScript like this inside of your application

  if (window.Cypress) {
    window.actions.myMethod = myMethod
  }

This way you can use this inside of your Cypress tests

cy.window().its("actions").invoke("myMethod")

Since app actions can easily be used inside of Cypress tests, we can easily stub them and change their return value.

it("should stub a method with app actions", () => {
  cy.visit("/")
  cy.window()
    .its("actions")
    .then((actions) => {
      cy.stub(actions, "myMethod").returns(20)
    })

  cy.window().its("actions").invoke("myMethod").should("eq", 20)
})

Learn about app actions here.

Write your own logic in a stubbed method

Sometimes you don't just want to change the return value of a function or method, what you want is to change some of the logic of the function.

You can do this by calling the callsFake() method.

it("should stub a method with app actions", () => {
  cy.visit("/")
  cy.window()
    .its("actions")
    .then((actions) => {
      cy.stub(actions, "myMethod").callsFake(() => {
        // some logic
        return "Output with logic"
      })
    })

  cy.window()
    .its("actions")
    .invoke("myMethod")
    .should("eq", "Output with logic")
})

Using Spy with Cypress

The spy function is useful by letting you know that a function was called with the right arguments or the function's call count, or to determine what was the return value of the spied function.

A spy does not modify the behaviour of the function - it is left perfectly intact. A spy is most useful when you are testing the contract between multiple functions and you don't care about the side effects the real function may create (if any).

Difference between spies and stubs

A spy is used to test how a particular piece of code is used. Spies are typically used to verify that a function is being called with the correct arguments, or that a callback is being executed as expected.

A stub, on the other hand, is used to replace the behaviour of a particular piece of code. Unlike spies, stubs don't care how the code they're replacing is used - they only care about providing the expected output.

Example of using Spy with Cypress

describe("Using Spy", () => {
  const obj = {
    color: "red",
    getColor() {
      return this.color
    },
    setColor(color: string) {
      this.color = color
    },
  }

  it("should spy the function", () => {
    cy.spy(obj, "getColor")

    obj.getColor()

    expect(obj.getColor).to.have.been.called

    cy.spy(obj, "setColor")

    obj.setColor("blue")

    expect(obj.setColor).to.have.been.calledWith("blue")

    obj.getColor()

    expect(obj.getColor).to.have.returned("red")
  })
})

In this example, we are making sure that the function getColor() has been called at least one time.

Also, we are making sure that the function setColor() has been used with the correct arguments.

We are also making sure that the function getColor() returns the right values.

If you don't run the function, your assertion will fail.

it("should spy the function", () => {
    cy.spy(obj, "getColor")

    // failing test on purpose
    expect(obj.getColor).to.been.called
})

Manipulating time with clock() and tick() in Cypress

Let's say we have a text and we want to make sure that the end-use will read that text, in order to do that, we will create a simple timer and make the user stop for 10 seconds and then let them in.

This might be useful for your application but it doesn't make any sense to make the application wait when it is being tested.

In order to control the browser's time, use the cy.clock() command for initialization and use the cy.tick() command to skip through time.

The cy.tick() command accepts an argument which is the amount of time to pass in milliseconds.

describe("My todo app", () => {
  it("Should skip through time", () => {
    cy.clock(new Date())
    cy.visit("/")
    cy.tick(10000) // ten seconds
  })
})

This way our tests will not necessarily wait.

The browsers clock is different from the specs clock

Note that using the cy.clock() command will only change the application's clock and not the specs clock which is outside of the application.

it("should not have the same time as the spec's time", () => {
  cy.clock(new Date(Date.UTC(2022, 8, 20)), ["Date"])
  cy.visit("/")
  cy.window().its("Date").invoke("now").should("not.equal", Date.now())
})

As you can see, the application's date is totally different from the specs date and time.

Conclusion

We’ve explored Cypress and how it can be used to create stubs for functions and API calls, spies and clocks. We’ve also looked at some code examples to help you get started. If you found this blog post valuable, don't forget to share it with your colleagues and friends.

Do you have any notes? let us know down below 👇

Beautify GitHub profile

dcodes — Sun, 21 Aug 2022 19:45:00 +0000

There is no better way to show off your skills than having an attractive GitHub profile, not only does it show you’re passionate and love your job, but it will also make you stand out when applying for a job. In this article, I will show you what makes a good profile and GitHub profile overview and how to beautify GitHub profile.

Now, let’s build an awesome GitHub profile and impress those recruiters 😀

GitHub profile README

In order to start editing our profile, we need to create a public repository and name it exactly like our GitHub username and create a file inside of it called README.md, wherever we put this readme file will show up on our GitHub profile page.

Now it is time to start writing some markdown and make our profile a little fun to look at, what is a markdown file? Markdown is a lightweight markup language that is intended for readability and to make the code look just like the output. Read more here.

Let’s start by adding something simple, like adding an introduction of ourselves. You can use bullet points and emojis to add aesthetic typography to it.

Here is how mine looks, feel free to add more information about yourself.

There are some cool dynamic features you can add to your readme file and take your profile to a completely next level 🚀

Here are some features you can use which will help you build an eye-grabbing GitHub profile.

1. Use a GitHub profile README generator

Don’t waste your time writing all the GitHub profile README file all by yourself, there are some other quick and handy tools that can help you build a beautiful GitHub profile without wasting your time.

README file generators

Here are some GitHub profile README generators that can help you build your GitHub with minimum effort and ease.

2. Show the latest followers on your profile

For this purpose, you can use the GitHub API to update your profile and bring your latest followers and show them on your profile.

Here’s an example of my GitHub profile, as you can see it shows the latest accounts who have followed me, and will update automatically every day.

How does it work?

Before writing any code let’s see how this works, first, we have to set up a CronJob to run every day at a specific time and fetch the latest data.

Then, we need to write a script that sends a request to the GitHub API and returns our latest followers, after that we make this script to write a piece of HTML to embed in our README file and then commit the changes and push them to update our repository.

What do you need to do?

Set up a CronJob.
Write a script that gets the latest data.
Update the repository with the same script.

How to set it up?

There are some simple steps you can take to implement this to your own GitHub account, I highly recommend having a look at my GitHub account and try to implement what I’ve done there.

Write a script that fetches the latest data (Or you can go to my GitHub account and copy the script there)
Generate a personal access token and select the read:user scope when you do.
Create a .yml workflow file that runs the script every day (Or you can use mine
Create a repository secret called TOKEN and paste the personal access token as the value
Add that token as an argument in the yml file.
In your README.MD file add two lines of comment to indicate the start of the section and the end of the sectoin, so that when you write the script you know where to put the HTML file that you generate, these two lines might look like something like this:

That’s it, if you’ve done all of these steps correctly, your followers will be shown on your GitHub profile and will automatically update every day, or anytime you push any changes to the main branch.

3. Add dynamically generated stats card

You can also add a dynamically generated status card which you can change and customize as you want.

We will use this GitHub repo GitHub-README-stats to generate our stats card.

How to add GitHub stats cards to your profile?

Doing this is pretty straightforward and easy, you can just copy and paste the markdown code into your README.md file.

The only change you’ll need to make is just to change the username on the link to your own GitHub username.

The cool thing about this is that there are multiple cards you can add to your profile and you can customize each however you want.

GitHub cards examples

4. Add a list of your latest blog posts

You can also add a list of your latest blog posts.

For this we will be using a workflow using GitHub actions, we will schedule it to run a cron job to automatically update the list every day or every some hours.

The workflow we’ll be using is called blog post workflow by gautamkrishnar.

Implementing this is quite easy just go to the blog post workflow repository and follow the instructions.

5. Add a profile header

Adding a header image will instantly make your GitHub account stand out.

You can use REHeader by Khaleel Gibran to generate a profile header image, it will generate you a header image that you can later download and upload to your GitHub repository and show it off on your profile.

I recommend putting the header image at the very top of your profile.

6. Add an animation

Yes, you can also add GIFs as well.

You can create or download a GIF file and add it to your GitHub profile, pretty cool right?

Here is an example of an animation on a GitHub profile 👇

Credit: argyleink

What else can I do?

There are many other things you can add to your GitHub profile and customize it as you want, here are some extra features you can add to your GitHub.

Integrating WakaTime into your GitHub readme

There is a Vs Code extension called WakaTime, once you set it up, it will calculate the minutes of you coding a specific programming language.

They also have an API feature that you can use to get that data and show it off on your GitHub profile so that others know which programming language you use the most.

You can use wakapi to integrate WakaTime with your GitHub profile.

Showing off the projects starred by you

You can also show a list of projects starred by you. It’s also a CronJob and uses the GitHub actions to run every day.

Starred can help with that.

Showing your latest YouTube videos on your profile README

If you’re a YouTuber or have some videos published on YouTube, you can show them off on your GitHub account as well.

Just as we added a CronJob to fetch our blog posts every day, we can use the same action to fetch our YouTube videos, instead this time we change the feed link to YouTube.

Replace the channel_id with your own channel id:

https://www.youtube.com/feeds/videos.xml?channel_id=<your-channel-id>

Add a game to your GitHub profile

Yes, you can add a game to your GitHub profile, and others who show your page can play it.

Here’s an inspiration which is made by rossjrw which you can add to your profile as well.

How to get more inspiration to beautify your GitHub profile?

Awesome GitHub Profile READMEs provides GitHub profile examples and a great place full of creativity where you can find the best Github profiles and get inspiration from them to build your own beautiful GitHub profile.

Thanks for reading, hope you enjoyed it and you got something out of it, and if you did please consider sharing this article with a friend.

If you want to stay tuned for more content just like this one, give me a follow from Twitter

Building a REST API with Prisma and express.js

dcodes — Tue, 26 Apr 2022 11:41:30 +0000

Prisma is a wonderful tool when it comes to TypeScript ORMs, it’s well compatible with typescript and you don’t have to write poorly-formed SQL queries anymore.

In this tutorial, we will create a REST API with Express.js and Prisma.

Prisma is compatible with many databases like Mongo, MySQL, PostgreSQL, and some other databases.

In this tutorial, we will use Postgres.

There are some things that are required before you start with this tutorial.

You’ll have to have Postgres installed on your computer, install here.
Node.js must be installed, download here.
You’ll have to know the basics of express.js and node.js.

Let’s get started.

First create a folder and cd into it, for example, mkdir prisma && cd prisma

Once you get into the directory run npx prisma init this will create a folder named “prisma” with some basic configurations.

Initialize a node.js application by running npm init

Install the Prisma and Prisma client by running yarn add -D prisma and yarn add @prima/client

In your datasource db configurations, make sure you choose postgresql as your database.

In order to change your database URL, you’ll have to change it from the .env file that Prisma already created for you.

What you’ll have to change is just the database name, username, and password of your Postgres database when you first installed it, if you want to create a new user, here is how.

Before building our REST API let’s first build the schemas for our database collections, we’ll have two collections, users and games for this tutorial.

Each user can have multiple games, so there are database relations involved as well. Games on the other hand can be connected to multiple users as well.

Creating the game collection.

For creating any collection with Prisma, we use the model syntax followed by the collection name.

We have used the uuid function which comes with Prisma, to generate a new id for any new entry.

We used the @unique constraint for the name so that we’ll not have multiple games with the same name.

The default for the createdAt field is now() which Prisma automatically generates when the entry is created.

We have used @updatedAt for the updatedAt field, this will also automatically be generated whenever the entry is updated.

Creating the User collection.

The user will have two rows, id, and name to keep it simple for this tutorial.

Defining table relations

Now that we defined both collections for the users and the games, it’s now time to define the relationships between them.

As mentioned before, we want a user to be able to have multiple games, and we also don’t want duplicate game entries so we want a game to be associated with multiple users as well.

Let’s define the relationships.

We just need to add two more lines of code in the schema.

Now that we have defined our schemas, it’s time to make these changes in the Postgres database as well, because this schema is nothing but a piece of code, we’ll have to tell Prisma to take these schemas and make these changes in the database as well.

For that Prisma has provided us with a command.

In the root directory of your application run npx prisma migrate dev this will make the changes to your database and migrate the changes. The migrations will be put into the folder prisma/migrations

If you encounter errors when running this command, make sure that Postgres is installed properly on your computer and the username and password that you put inside the .env file are correct.

Now our database is completely in sync with our Prisma schema, there is another command that we need to run, this one is for TypeScript it will create the types using the Prisma schema so that your application will be completely type-safe.

For that run npx prisma generate this will generate the TypeScript defenitions inside the .\node_modules\@prisma\client folder.

Now our TypeScript definitions have been created, it’s time to use the Prisma client so that we can run queries.

Create a file called prisma.ts or client.ts and write the following code.

import { PrismaClient } from "@prisma/client"

const prisma = new PrismaClient()

export default prisma

We will now import this instance into other places of our code to do database queries.

Building the REST API

Not it’s time to build an API using express.js.

Let’s build a simple express.js server in our app.ts file in the root directory.

import express from "express"
import prisma from "./prisma" // importing the prisma instance we created.

const app = express()
app.use(express.json())

const PORT = process.env.PORT || 3000

app.listen(PORT, () => console.log(`Server is running on port ${PORT}`))

Basically, in a REST API we’ll have CRUD applications, so let’s first start with creating data.

Starting with the POST route.

We will create a POST route to handle inserting new users and games into the database.

app.post("/users", async (req, res) => {
  try {
    const { name, games } = req.body

    // games is an array of string | string[]

    const newUser = await prisma.user.create({
      data: {
        name, // name is provided by the request body
        games: {
          // create or connect means if the game existed, we will use the old one
          // if not, we will create a new game
          connectOrCreate: games.map((game: string) => ({
            where: {
              name: game,
            },
            create: {
              name: game,
            },
          })),
        },
      },
    })

    res.json(newUser)
  } catch (error: any) {
    console.log(error.message)
    res.status(500).json({
      message: "Internal Server Error",
    })
  }
})

Creating the GET Route.

app.get("/users", async (req, res) => {
  try {
    const users = await prisma.user.findMany()

    res.json(users)
  } catch (error) {
    res.status(500).json({
      message: "Something went wrong",
    })
  }
})

This will return all users.

If we wanted to know which games these users have, we can just simply use the include property provided by Prisma.

app.get("/users", async (req, res) => {
  try {
    const users = await prisma.user.findMany({
      include: {
        games: true,
      },
    })

    res.json(users)
  } catch (error) {
    res.status(500).json({
      message: "Something went wrong",
    })
  }
})

This will populate the games field of all users.

Creating the PUT Route.

app.put("/users/:id", async (req, res) => {
  try {
    const { name, games } = req.body
    const { id } = req.params

    const updatedUser = await prisma.user.update({
      where: {
        id,
      },
      data: {
        name,
        games: {
          connectOrCreate: games.map((game: string) => ({
            where: { name: game },
            create: { name: game },
          })),
        },
      },
    })

    res.json(updatedUser)
  } catch (error) {
    res.status(500).json({
      message: "Something went wrong",
    })
  }
})

The DELETE Route.

app.delete("/users/:id", async (req, res) => {
  try {
    const { id } = req.body

    const deletedUser = await prisma.user.delete({
      where: {
        id,
      },
    })

    res.json(deletedUser)
  } catch (error) {
    res.status(500).json({
      message: "Something went wrong",
    })
  }
})

That’s it for our simple Prisma and Express.js REST API application.

Of course, there are many compound queries you can do with Prisma with absolute ease and readability and the fewest space for errors thanks to Prisma’s compatibility with TypeScript.

You can also check the Prisma Documentation at their main website.

Thanks for reading.

Share this article if you found it useful.

10 React community hooks you should be using

dcodes — Thu, 24 Feb 2022 19:40:00 +0000

React could be the best tool when it comes to front-end development, React by itself is very powerful, but if you use these community hooks inside your projects, not only your code will be much more clear and concise, it will also be more performant and could avoid the possibility of redundant re-renders and performance issues.

When it comes to programming clean code is what you should always strive for, here are my top 10 community hooks that will help you to write cleaner and more performant code:

1. React hook form

If we want to create a form with only React, it can get really frustrating in creating our states for each individual input and updating them, let alone validation and all that dirty code that come with it.

React form hook lets you handle all that heavy lifting with just some simple lines of code, your code will be much more concise and you can validate your data and handle errors and show them back to the user with the minimum effort on our side.

The React hook form is a big module, read more about it here to learn more about its various features.

Sample usage:

import { useForm } from "react-hook-form"

export default function App() {
  const {
    register,
    handleSubmit,
    watch,
    formState: { errors },
  } = useForm()

  const onSubmit = (data) => console.log(data)

  console.log(watch("example")) // watch input value by passing the name of it

  return (
    /* "handleSubmit" will validate your inputs before invoking "onSubmit" */
    <form onSubmit={handleSubmit(onSubmit)}>
      {/* register your input into the hook by invoking the "register" function */}
      <input defaultValue="test" {...register("example")} />
      {/* include validation with required or other standard HTML validation rules */}
      <input {...register("exampleRequired", { required: true })} />
      {/* errors will return when field validation fails */}
      {errors.exampleRequired && <span>This field is required</span>}
      <input type="submit" />
    </form>
  )
}

2. useUpdateEffect

Sometimes in your React application you want to trigger a function only when a certain state is updated, this is basicaly useEffect only on update.

This can be achieved without using any third-party hooks, but it can make your code just a little bit messy.

Here’s how we used to do it (without a library):

const mounted = useRef(false)

useEffect(() => {
  if (mounted.current) {
    // this function will not be called on the first render
  } else {
    mounted.current = true
  }
}, []) // it will be called everytime the dependecty list is updated

Here’s a cleaner way to do this, it is by using the react-use library which includes many other great hooks.

import { useUpdateEffect } from "react-use"

const Home = () => {
  useUpdateEffect(() => {
    // will not run on the first render
    console.log("Runs only if the state updates")
  }, [fName])

  return ( ...)
}

3. useCopyToClipboard

The hook is self explanatory, it returns a state and a function to update the state and also copy that state to the clipboard.

The state will have the value of the string that the user copies to clipboard (notice we can not read already saved text from a users clipboard from this, we can only get the value of the text that the user copied from our website), it will also have an error property if some error happens when the function runs.

The implementation is also as easy as that:

import { useCopyToClipboard } from "react-use"

const App = () => {
  const [text, setText] = useState("")
  const [state, copyToClipboard] = useCopyToClipboard()

  return (
    <div>
      <input value={text} onChange={(e) => setText(e.target.value)} />
      <button type="button" onClick={() => copyToClipboard(text)}>
        copy text
      </button>
    </div>
  )
}

4. useLocalStorage

Interacting with the browsers local storage could sometimes be frustrating because the localstorage can be accessed only when the component mounts, for that case you'd need to use the local storage only inside the useEffect hook, which could lead you to a messy code, that’s where the use of this hook comes in.

The useLocalStorage hook takes 2 arguments, the first one is the key of the item that you want to set in your local storage, and the second one is the initial value of that item, which means if that item is empty inside the users local storage, we will use that value as the initial value.

The hook also returns an array of 3 Items, first is the value of that item, second is a function to update the value, the third and the last one is a function to remove that item from local storage.

Sample usage:

import { useLocalStorage } from "react-use"

export default function App() {
  const [token, setToken, removeToken] = useLocalStorage("token", "foo") // initial value is foo

  return (
    <div>
      <div>Value: {token}</div>

      <button onClick={() => setToken("bar")}>bar</button>

      <button onClick={() => setToken("baz")}>baz</button>

      <button onClick={() => removeToken()}>Remove</button>
    </div>
  )
}

5. useHover

This hook is used to know whether a specific element is hovered or not, but the usage is a bit different from the other hooks.

You pass it a JSX element and it will return an array of two items, the first one is the element that you should use inside your JSX, the second one is the isHovered boolean state.

Here’s how:

import { useHover } from "react-use"

const App = () => {
  // you can use the hovered argument from the function here
  const element = (hovered: boolean) => (
    <p>Sample text which is {hovered ? "hovered" : "not hovered"}</p>
  )
  // or you can get the hovered state from the hook
  const [textElement, isHovered] = useHover(element)

  return <div>{textElement}</div>
}

6. useIdle

This hook is used to know whether the user has gone idle or the user is active, you can pass it two arguments, first is the amount of milliseconds to pass to decide the user has gone idle and the second one is the initial state you can add true or false by default it is set to false

import { useIdle } from "react-use"

const App = () => {
  const isIdle = useIdle(3000) // this will return true if the user has gone idle for more than 3 seconds

  return <div>{isIdle ? "User is idle" : "User is not idle"}</div>
}

7. useClickAway

This hook is useful when we want to trigger a function whenever we click outside of a specific UI component, for example we have an opened modal and we want to close the modal whenever the user clicks outside the modal, basically we are saying if the user clicks anywhere else which is not the modal, we want to run a function (in this case is closing th modal)

import { useClickAway } from "react-use"

const App = () => {
  const ref = useRef(null)

  useClickAway(ref, () => {
    console.log("OUTSIDE CLICKED")
  })

  return (
    <div
      ref={ref}
      style={{
        width: 200,
        height: 200,
        background: "red",
      }}
    />
  )
}

8- useDebounce

The main use case of this hook is when we want to search some queries from an API but we don’t want to send the request everytime the user types a word, because in that case we send so many redundant requests to the API and overload the server which is not a very scalable solution.

What we do instead is we wait for the user to finish typing and then we send the request, which is ideal.

import { useDebounce } from "react-use"

const App = () => {
  const [input, setInput] = useState("")
  const [loading, setLoading] = useState(false)

  useDebounce(
    () => {
      setLoading(true)
      // you should now send the request to the api
      // ...
      // ...
      setLoading(false)
    },
    500,
    // the amount of milliseconds to wait before firing the function
    [input] // the dependencies to watch for changes
  )

  return <input value={input} onChange={(e) => setInput(e.target.value)} />
}

9- useWindowSize

This hook returns the height and width of the screen and will automatically update whenever the screen size changes.

import { useWindowSize } from "react-use"

const App = () => {
  // gets the height and width of the window
  const { width, height } = useWindowSize()

  return (
    <div>
      <div>width: {width}</div>

      <div>height: {height}</div>
    </div>
  )
}

10- useSwr

This hook makes it easy to handle requests when mounting a component.

The hook takes in two arguments, the first one is the url of the request, and the second one is the fetcher function which could be any function that sends a request to a server.

Then it gives you back the isValidating, error, and the response data states, the isValidating state works just like any loading state.

It will also give you a function called mutate() which you can use to refetch the API again, this is useful when you are muating some data for example you are deleting an todo from a todo list, after that action is successful you can call the mutate() function again to get back the latest data.

This example below simply fetchs some data when the component mounts.

import useSWR from "swr"

const fetcher = (url: string) => fetch(url).then((r) => r.json())

const App = () => {
  const { data, mutate, error, isValidating } = useSWR(
    "https://jsonplaceholder.typicode.com/todos/1",
    fetcher
  )

  if (error) return <div>failed to load</div>
  if (!data) return <div>loading...</div>
  return <div>Todo title: {data.title}!</div>
}

These were my top 10 hooks in this article, I hope you find them useful and if you do, please consider sharing this article.

Thanks for reading this article, if you had any questions or comments, please feel free to contact me on twitter, I also post daily content on my twitter so, make sure you give me a follow too.

Website: https://dawsoncodes.com

Syntax highlighting with Prism and Next.js

dcodes — Tue, 18 Jan 2022 08:25:58 +0000

You might want to build your blog from scratch, you design your website beautifully, and everything is great, but when it comes to including a block of code inside your blog post, you face some challenges.

Syntax highlighting is a great way to make code more readable; in this tutorial, I will show you how you can use PrismJs with Next.js to highlight the syntax of your code blocks inside your blog posts.

Hi, I'm Dawson, and I love web development. I write blogs and tweets about web development and my most recent projects; please give me a follow if you are interested.

Why PrismJs?

PrismJS is the ideal choice for syntax highlighting with JavaScript right in the browser. PrismJS has support for all modern browsers. It has +5M downloads per week from npmjs.com.

PrismJs is a lightweight, fast syntax highlighting library explicitly made for frontend languages. It depends on community contributions to expand and cover all languages. The highlighting is very customizable and has a variety of languages and themes.

PrismJs It has been designed to be highly customizable with the most beautiful shade of colors, and you can also extend it. And it supports almost every Programming language.

If you want to use a library in your frontend, it is a must for the library to be lightweight because it will run on the client-side (on the user's browser). This means we must use lightweight packages in our frontend of the application.

Using PrismJs with Next.js to highlight syntax

PrismJs is a syntax highlighting library. It is designed to use as little of your computer's resources as possible and can be customized with CSS and JavaScript.

This article will show you how to set up PrismJs with Next.js and create a simple syntax highlighter for your blog posts.

How it works?

Let's see how syntax highlighting works in the first place.

Suppose you are building a personal blog and want to create blog posts, you have two options to save your blog data inside your database, one of them is to save your blog content as pure HTML and then return the HTML later when a user shows the page, the better way to do this is using the Markdown language.

Markdown is a lightweight markup language with plain text formatting syntax. It is designed to be easy to read and write for people who are not experts in the computer programming language. The goal of Markdown is to be as easy-to-read and easy to write as possible. A markdown-formatted document should be publishable as-is, as plain text, without looking like it's been marked up with tags or formatting instructions.

If you don't know how the Markdown syntax works, please make sure you read it here.

The goal is to get the Markdown from the database and show it on our HTML page, but we can not directly do that because if we do, the reader will see the Markdown syntax, which is not something you'd want to happen.

For that, we will use a library called React Markdown which is a library that converts Markdown to React components (JSX) which is precisely what we need.

This will convert your Markdown syntax to HTML syntax. For example, it converts (# to h1, and ## to h2, etc.), which means now we have pure HTML syntax in our HTML page, which is ideal.

React Markdown automatically puts any Markdown syntax code blocks inside the <pre> tag and then inside the <code> tag, for example:

<pre>
  <code>
    Your code here
  </code>
</pre>

Starting a Next.js app

We first initialize a Next.js application with npx create-next-app@latest prism-app. We will put this in a named folder, in this case (prism-app)

Then go to the directory of your application and install react-markdown and prismjs.

Starting with React Markdown

With React markdown, we will parse our Markdown and convert them to HTML tags. Here is how:

export default function Home ({ markdownContent }) {

  return (
    <div className='container'>
      <ReactMarkdown children={markdownContent} />
    </div>
  )
}

As simple as that, React Markdown will handle all of the Markdown converting with the highest level of safety, which means you are safe from XSS Attacks that users might want to utilize.

Prism Themes

There are various Prism themes that you can apply to your code. Here is how you can use them.

Go to the PrismJS GitHub repository. There are a bunch of themes that you can choose; pick the one you like, download the CSS file, and then import it to your _app.js file.

import '../styles/globals.css'
import '../styles/prism-one-dark.css'

function MyApp ({ Component, pageProps }) {
  return <Component {...pageProps} />
}

export default MyApp

Highlighting Syntax with PrismJS

Now that we have the code blocks in our HTML pages and the Prism CSS file, it is time to highlight the syntax to make it more readable and beautiful to the reader.

Since we are using Next.js, we will use the React hook useEffect, and we will run a function when the React component mounts, highlighting all the syntax.

The function that we are planning to run is highlightAll() comes with Prismjs, which will automatically grab the <pre> and <code> blocks and will highlight them all.

We also have to import the JavaScript for each programming language so that PrismJS can highlight a specific programming language. You can import only the programming language that you want to import as few resources as possible, which will make your frontend blazing fast without the user having to download large chunks of JavaScript.

Your JSX should look something like this:

import { useEffect } from 'react'
import Prism from 'prismjs'

require('prismjs/components/prism-javascript')
require('prismjs/components/prism-css')
require('prismjs/components/prism-jsx')

export default function Home ({ markdownContent }) {
  useEffect(() => {
    Prism.highlightAll()
  }, [])

  return (
    <div className='container'>
      <ReactMarkdown children={markdownContent} />
    </div>
  )
}

That's it; now your syntax highlighter must work perfectly; feel free to try the other Prism themes and see which one you like the most.

If you liked this article, please make sure you follow me on Twitter, where I write daily tweets about web development.

Twitter: https://twitter.com/DawsonCodes

Website: https://www.dawsoncodes.com/

Continuous Integrations with GitHub actions

dcodes — Sat, 08 Jan 2022 18:26:02 +0000

In this blog post, I will show you how Github Actions work and how you can use it to spend less time deploying and more time coding.

Hi 👋 I'm Dawson. I daily tweet about web dev tips and write long-form content like this. So if you like it, please consider giving me a follow on Twitter.

What is Github Actions?

Github Actions is another feature on Github. It relies on the GitHub webhooks API to detect commits and pull requests, allows you to build and deploy your code.

You're able to create pipelines with customizable actions per stage, monitor your repository for changes, and run the appropriate pipeline for the event that happened. For example, if new code is pushed, then run some tests.

You can specify conditions that need to be fulfilled before running actions. You can create your custom scripts or use ready-to-use workflow templates.

What are the Advantages of GitHub Actions?

No more Re-deploying

Deploying your application once you make changes to your code manually could be exhausting, and repetitive.

On a personal use case, let's say you deploy your apps manually. You write some code; you push to GitHub, ssh into your VPS, pull the changes from Github, build and deploy, and forget to add something? REPEAT. Exhausting right?

With Github Actions, you can create a CI/CD pipeline that does all of those things for you, what you have to do is push to GitHub, and GitHub will take care of your workflow.

Automating your open-source workflow

Open source projects take outstanding advantage of this service; it makes everything much more straightforward.

Imagine maintaining an extensive open source project, and contributors send pull requests all the time, some of those pull requests might break your code if you merge it into your main branch.

What can you do? You can set up a workflow with Github Actions and build and test the app every time someone creates a pull request so that before you even try to consider reading a pull request, you already see that this pull request breaks some part of your code.

No third party tool

The best thing about GitHub Actions is that you probably already use GitHub.

So it's much better to use GitHub Actions than to use some other third-party tool to manage your CI/CD pipeline and build high-performing, secure pipelines.

A large variety of already set up workflows

You don't need to manage your workflows; you can use already made environments to run your pipeline workflow.

It is easy

Github CI/CD pipeline is also more accessible than other CI/CD tools and does not require you to have a full-time DevOps team that is cost-intensive and not ideal for startups. Instead, you can quickly learn how to use it and create workflows with your development team.

You don't need a server to run actions

All these actions will be happening on Github servers. This means you save resources because you don't have to run them on your server.

How it works?

These Github actions that we talked about will only trigger when specific events happen, like push and pull request. Let's say that we only want a particular action to happen only when the event is push, meaning that every time some new changes are being pushed to the Github repository.

So basically, GitHub will listen to an event and trigger the actions given by the developer.

Each job will run on a different server, for example, any job in the job tag is run by a server, and another job has another server.

Sometimes we want jobs to run one after another. If we decide to do so, we need to use the needs tag in the other job and include the other jobs` name. More of this later

The CI/CD pipeline

Today, one of the most common workflows is the CI/CD pipeline, which runs some actions in order.

Commit: you commit your changes to GitHub.
Test: Workflow starts running tests.
Build: Build starts if the test ran successfully.
Deploy: Deploys the latest changes to the server.

Code is pushed from development to a testing environment and finally to production for end-users to access.

The Github workflow syntax

Github Actions use the .yml language to define workflows. So if you don't have a basic understanding of reading YML, I recommend reading some articles about it.

There are many syntaxes that Github uses to define workflows, I will talk about the most used and common ones, and later in this article, we will write our workflow for a node.js application, test it and then deploy it to our own VPS.

Here are some of the most essential .yml syntaxes of Github workflow:

name: is the name of your workflow file.
on: contains the list of events in which we want to trigger the action.
jobs: The list of jobs we want to run after the event happens.
runs-on: is the operating system in which you want to run the workflow.
steps: a list of actions you want to run after the event happens.
uses: you can import other people's written actions and re-use them.
with: a list of variables. Think of it as environment variables.

Secrets

Sometimes you want to add a password or a private key inside your workflow file.

But you don't want other people to see it, and you still want to run the actions.

In this case, you can put your repository secrets from your repository settings; you can specify the name of your key and the value of your key.

Later you can use these secrets in your .yml file by using the ${{ secrets.YOUR_SECRET }} syntax.

Writing a sample Github workflow

In this tutorial, I'll show you how to set up a GitHub workflow so that when we push some changes to our main branch on GitHub, our website will automatically build, test, and host itself again. which will save us a lot of time & effort.

So, in summary:

We push some changes to Github.
Event triggers.
Github will download our code and test it on their server.
If the test is successful, Github will access our VPS using SSH keys.
Fetches the latest changes.
Builds the app.
Restarts the app.

The following code shows the Github workflow code for testing, building, and hosting a node.js app on a VPS using SSH keys:

name: Node.js CI

on:
  push:
    branches: [ master ]

jobs:
  build-and-test:
    runs-on: ubuntu-latest

    strategy:
      matrix:
        node-version: [16.x]

    steps:
    - uses: actions/checkout@v2
    - name: Use Node.js ${{ matrix.node-version }}
      uses: actions/setup-node@v2
      with:
        node-version: ${{ matrix.node-version }}
        cache: 'npm'
    - run: npm i
    - run: npm run build
    - run: npm run test

  deploy:
    needs: build-and-test
    runs-on: ubuntu-latest

    strategy:
      matrix:
        node-version: [16.x]

    steps:
      - uses: actions/checkout@v2
      - name: Use Node.js ${{ matrix.node-version }}
        uses: appleboy/ssh-action@master
        with:
          host: ${{ secrets.IP }}
          username: ${{ secrets.USERNAME }}
          key: ${{ secrets.KEY }}
          script: cd path/to/your/app/directory && git checkout . && git pull && npm run build && pm2 restart MyApp

The first job we have created is to build and test the app on the Github servers.

If the first action was successful, the second one will be executed. We specified this by using needs syntax and adding the previous job name.

Great, now your server hosts itself again without you having to worry about build fails or errors in your code. Now, you can spend more time coding and less time re-deploying.

Thank you for taking the time to read my blog post. If you found it helpful, please feel free to follow me on Twitter, where I post daily web development tips.

website: https://dawsoncodes.com
Twitter: https://twitter.com/dawsoncodes

DEV Community: dcodes

Semantic search with Node.js and LangChain

What is Semantic Search?

Before Semantic Search

After Semantic Search

What are Embeddings?

What is HNSWLIB?

How Does Semantic Search Work?

Getting Started

Database

Generating the Embeddings

Estimate OpenAI embeddings price

Creating the Search Functionality

Building the API

The Frontend

Conclusion

Write better code by following these JavaScript best practices

1. Adopt a Consistent Coding Style

2. Naming variables and functions

3. Use Shorthands but Be Cautious

4. Add meaningful comments to your code

5. Follow the SoC principle

6. Avoid global variables

7. Use for...of Instead of for Loops

8. Adhere to the Single responsibility principle

9. Understand the Lack of Hoisting in Classes

10. Avoid Mutating Function Arguments

11. Handle Promises Correctly

12. Avoid the Over-Nesting in your code

13. Optimizing for loops

Conclusion

React and express.js form validations with Zod

What is Zod?

Getting started

Setting up a React application

Installing Zod

Creating a schema with Zod

Creating our Form object with zod

Creating TypeScript types from a Zod schema

Validate the React form with Zod

Error handling with Zod

Showing the error back to the user

Trying it out

Validating a form in Node.js with Zod

Creating a Zod Schema

Creating and validating the route with express and Zod

How to set HTML lang attribute in Next.js

How to change the lang attribute in NextJS

Locales

Default locale

Multiple domains for multiple languages

The "domains" property

Switch between different locales

Using Next.js Link

Conclusion

How to use stubs with Cypress

What is stubbing in testing applications?

Why use stubs in your applications?

Ways to do stubbing in Cypress

Examples of using stubs spies and clocks

Stubbing API calls in Cypress with cy.intercept()

Stubbing functions and properties using the cy.stub() command

How to use stub in cypress

Stubbing a function based on call count

Restore a stubbed method

Stub a property

Cypress app actions and stubs

How do Cypress app actions work?

Write your own logic in a stubbed method

Using Spy with Cypress

Difference between spies and stubs

Example of using Spy with Cypress

Manipulating time with clock() and tick() in Cypress

The browsers clock is different from the specs clock

Conclusion

Beautify GitHub profile

GitHub profile README

Here are some features you can use which will help you build an eye-grabbing GitHub profile.

1. Use a GitHub profile README generator

README file generators

7. Use `for...of` Instead of `for` Loops