DEV Community: Vishal Sharma

Creating a Custom Hook in React

Vishal Sharma — Tue, 28 Mar 2023 12:11:44 +0000

What are Hooks?

Hooks are a feature introduced in React version 16.8 that allow developers to use state and other React features in functional components without the need for class components. Hooks are functions that allow you to use state, lifecycle methods, and other React features inside functional components.

There are several built-in hooks in React, including:

useState : allows you to add state to a component.

useEffect : allows you to perform side effects in a component (such as fetching data from an API and only run when value in dependency array change).

useLayoutEffect : similar to useEffect but runs synchronously after all DOM mutations.

useContext : allows you to access context values in a component.

useReducer : an alternative to useState that allows for more complex state management.

useRef : allows you to reference DOM elements or values that persist between renders.

useMemo : allows you to memoize a value (i.e. only recalculate when value in dependency array change).

useCallback : allows you to memoize a function (i.e. only recreate when value in dependency array change).

What is a custom hook?

React custom hooks are reusable functions that encapsulate and share logic between components. They allow developers to abstract away complex logic and create more modular, composable code. Custom hooks are created using the use prefix and follow the rules of hooks in React, meaning they can only be called at the top level of a component or other hook.

As a React developer, it’s important to learn the process of creating custom hooks to solve problems or add missing features within your own React projects. You can create custom hooks for various purposes like fetching, posting data, managing local storage, listening to screen size (breakpoints) change for css in js.

To create a custom hook, it’s important to remember the following two rules:

Custom Hooks should always be named with the prefix use. For example, a custom hook that manages local storage could be named useLocalStorage, while a hook that handles authentication could be named useAuthentication. In our case, we’ll be creating a hook called useFetch.

Custom Hooks should be composed of one or more built-in React Hooks or other custom Hooks. This means that every custom Hook is essentially a new combination of Hooks. If a custom Hook doesn’t use any Hooks internally, it shouldn’t be considered a custom Hook and should not use the use prefix.

Let’s Start Creating our own custom hook called useFetch.

Before start coding we will do brainstorming about what we need this custom hook to do and how much code abstraction we want.

So generally when we fetch data from api we set that data in a state variable or in store and show that data in UI using JSX.
We also store error in case if api fail or throw any error we would show proper error message in UI.
Then we also use a loading state to convey user that there is some processing going on by showing a loader or skeleton screen.
At last we also want to cancel the previous api call if we make same api call again. This is useful in case where user is searching. We should cancel the previous calls to make sure user see correct data on UI.

Now let’s start the coding 🚀

import { useState, useEffect } from "react"

export const useFetch = ({ url }) => {
  const [data, setData] = useState(null)
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState(null)

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch(url)
        const json = await response.json()
        setData(json)
        setLoading(false)
      } catch (error) {
        setError(error)
        setLoading(false)
      }
    }

    fetchData()
  }, [])
  return { data, loading, error }
}

Above we have an implementation of the hook which we can use in a component.

function MyComponent() {
  const { data, loading, error } = useFetch({
    url: "https://jsonplaceholder.typicode.com/todos/1",
  })

  if (loading) {
    return <div>Loading...</div>
  }

  if (error) {
    return <div>Error: {error.message}</div>
  }

  return <div>{data.title}</div>
}

But this is lacking some features like

It will only run on component mount. There is no other way to refetch the data.
This is always run on component mount we can’t skip the call.

Let’s add missing features to this hook

import { useState, useEffect, useCallback } from "react"

export const useFetch = ({ url, skip = false }) => {
  const [data, setData] = useState(null)
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState(null)

  const fetchData = useCallback(() => {
    ;(async () => {
      try {
        const response = await fetch(url)
        const json = await response.json()
        setData(json)
        setLoading(false)
      } catch (error) {
        setError(error)
        setLoading(false)
      }
    })()
  }, [url])

  useEffect(() => {
    if (skip) return
    fetchData()
  }, [fetchData, skip])
  return { data, loading, error, refetch: fetchData }
}

Now this hook will the the api call

When we update the url (if this is a state and cause re-render)
We are now exporting a new function refetch and we can call this function to fetch data again on let’s say a button click.
At last we have added a new config property skip. If we set this to true the API call will be skipped and we can use refetch to fetch the data.

Finally we will add the abortController to cancel the previous api call the we try to make next api call before previous call finish executing.

import { useState, useEffect, useCallback, useRef } from "react"

export const useFetch = ({ url, skip = false }) => {
  const abortController = useRef(null)
  const [data, setData] = useState(null)
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState(null)

  const fetchData = useCallback(() => {
    ;(async () => {
      try {
        setLoading(true)
        abortController.current?.abort()
        abortController.current = new AbortController()
        const response = await fetch(url, {
          signal: abortController.current.signal,
        })
        const json = await response.json()
        setData(json)
        setError(null)
        setLoading(false)
      } catch (error) {
        setData(null)
        setError(error)
        setLoading(false)
      }
    })()
  }, [url])

  useEffect(() => {
    if (skip) return
    fetchData()
  }, [fetchData, skip])
  return { data, loading, error, refetch: fetchData }
}

By creating custom hooks like this, we are encapsulating complex logic and can reuse this across multiple components, making our code more modular and easier to maintain.

Now to to make a fetch API call in a component we just need a single expression like this.

const { data, loading, error, refetch } = useFetch({
  url: "https://jsonplaceholder.typicode.com/todos/1",
  skip: true,
})

Overall, React custom hooks are a powerful way for creating reusable and modular code in React applications. They can help reduce duplication, improve code organization, and make it easier to maintain and update complex logic over time.

Checkout following libraries for more custom ready to use hooks

Solid JS vs React JS. What is Better?

Vishal Sharma — Sat, 11 Mar 2023 12:11:44 +0000

Choosing the correct JavaScript framework is crucial for the success of your web development project in today’s fast-paced world. With a lot of options, deciding on the most suitable one for your needs can be confusing.

With ReactJS being released in 2013 it should not be much of a surprise that it’s more popular than SolidJS which was first open-sourced in 2018 and officially had version 1.0 released in 2021 , making it roughly 5 years younger than ReactJS. But SolidJS is faster and efficient then ReactJS in almost all the metrics.

So what is SolidJS?

SolidJS is a modern frontend library that focuses on performance and fine-grained reactivity which means that it will not re-render the components every time a state updates but will track the functions and blocks using a dependency and update or execute that part only. Therefore it doest not use a virtual DOM but instead makes use of a compiler to track and update the reactive parts of your components.

On the surface, SolidJS and ReactJS appear to be closely related. Both SolidJS and ReactJS use JSX for templating (HTML in JS) and use hooks, functional components. SolidJS follows the same philosophy as ReactJS, with unidirectional data flow, read/write segregation and immutable interfaces.

But in browser, both manipulate page’s HTML elements (DOM) differently to deliver the desired user experience. ReactJS uses virtual dom and diffing algorithm to update dom on state update and SolidJS use reactive primitives (proxies) to manage state and use its compiler to update dom thus does not require a virtual dom.

A Brief Comparison

Feature	ReactJS	SolidJS
TypeScript support	✅	✅
Declarative nature	✅	✅
Unidirectional data flow	✅	✅
JSX first-class support	✅	✅
Direct manipulation of the DOM	❌	✅
Avoids component re-rendering	❌	✅
Highly performant	❌	✅
Rich community and ecosystem	✅	❌
Excellent developer documentation	✅	✅
Scaffolding tools	✅	✅
Conditional rendering	✅	✅
Server-side rendering (i.e., hydration)	✅	✅
Concurrent rendering (i.e., suspense)	✅	✅

Now we’ll go into more detail on the similarities and differences between ReactJS and SolidJS.

Starting a new project

The most critical part of adopting any frontend framework is its ease of use. No matter how performant a framework is, If using it to create a new project is too complex, its adoption in the frontend ecosystem will be slow.

Creating a new ReactJS project

ReactJS has different options for creating a new project, including create-react-app, Vite and a manual setup using Webpack. The most widely used is create-react-app. You can read more about this topic here. With Node.js installed on your computer, you can run this command on your terminal to create a new React project using create-react-app:

> npx create-react-app react-app

This will generate a new react application named react-app with webpack as the build tool and npm as the default package manager.

Creating a new SolidJS project

You can use SolidJS Vite Templates to create a new app. To create your new SolidJS app, run following commands on your terminal:

> npx degit solidjs/templates/js my-app
> cd my-app
> npm i # or yarn or pnpm

This will generate a new SolidJS app named my-app with npm as the package manager and Vite as the build tool. Now you can use npm run dev to run the local server.

Component Structure

Components are one of the fundamental building blocks of modern frontend frameworks. React and SolidJS have exactly the same programmatic structures and support for components (individual, reusable pieces of code). SolidJS components look very similar to React functional components, and they both use JSX , the popular HTML-like syntax extension to JavaScript.

React and SolidJS offer the same components, but each framework has a unique rendering approach. React components render every time (barring memoization use), while SolidJS components only render once.

//SolidJS component

import Component from "./Component"

function App() {
  return (
    <div>
      <h1>Solid Application</h1>
      <Component />
    </div>
  )
}

export default App

//ReactJS component

import Component from "./Component"

function App() {
  return (
    <div>
      <h1>React Application</h1>
      <Component />
    </div>
  )
}

export default App

As you can see basic structure of both components is same. Also both use props the same way. The only difference is Solid does not allow prop destructuring as it loses the reference of the state variable due to this.

State Management

State refers to the data that frontend app use to either show on UI or do some action on. States are meant to change on user interaction and update the UI accordingly. State can be both global (available throughout the app) and local(available to a specific component).

State Management in ReactJS

For local state management in individual components, React use useState hook. Hooks are basically functions intended to run when triggered by the framework at specific times. For eg. useState function will run whenever component re-render and keeps track of the value you set using setter method. Under the hood useState hook use Closures to achieve this. Apart form this we can use useRef hook also to store the data but this is not going to trigger the re-render of the function.

State Management in SolidJS

SolidJs also use similar approach to manage state called createSignal. It looks similar to react but is very different fundamentally. createSignal method returns an array of two functions [getter,setter] = createSignal() which we can call to get and set the value. On the other hand, the SolidJS createSignal method can be used outside a component, so it’s easy to export it like any other variable and import it in any component it’s needed. This makes handling global state straightforward in SolidJS. Apart from this SolidJs also have a concept of derived Signal where you can do the operations on the the existing state to return a new value which will change every time state updates.

A function that accesses a signal is effectively also a signal: when its wrapped signal changes it will in turn update its readers.

const [count, setCount] = createSignal(0) //Signal
const doubleCount = () => count() * 2 // Derived Signal

Side Effects

React use useEffect hook to trigger side-effects on state change. useEffect hooks accepts a callback function and a dependency array. An empty dependency array means effect callback will run only once on component mount. We can also return a cleanup function from the callback which react is going to run every-time before re-calling the functions and at last on component unmount.

useEffect(() => {
  const connection = createConnection(serverUrl, roomId)
  connection.connect()
  return () => connection.disconnect()
}, [roomId])

Above useEffect callback will run on component mount and after that every time roomId change. That’s why it is preferred to pass primitive data types in dependency array as objects, arrays as react uses referential equality to check whether these complex values have changed. To make sure object is created only when required we can use useMemo hook which returns the same value and reference until a value in dependency array change. In case of functions we should use useCallback hook which again is going to return same function reference until a value in dependency array change.

In SolidJS an effect can be created by importing createEffect from solid-js and providing it a function. The effect automatically subscribes to any signal that is read during the function’s execution and reruns when any of them change. This means that we just need to use the state getter function inside the createEffect and sold will take care of the rest.

const [count, setCount] = createSignal(0)
createEffect(() => {
  console.log("The count is now", count())
})

The above callback function inside create effect will reruns whenever count changes.

Memoization

React depends on memoization for its applications to render quickly so it provides different memoization techniques from component memoization to functions memoization. Its important in react to use these as react will re-render components on state update and its upto us to figure out if we want to re-render a component, calculate a value or initialize a function on state update or not.

memo

memo is a higher order function which takes a component as first param and a callback function with boolean return value in second param. If you don’t pass second param react will shallow compare the current and previous props to determine if to render a component or not.

function MyComponent(props) {
  /* render using props */
}
function areEqual(prevProps, nextProps) {
  /*
  return true if passing nextProps to render would return
  the same result as passing prevProps to render,
  otherwise return false
  */
  //true means component will not re-render
  //false means component re-render.
  //This is the inverse from shouldComponentUpdate.
}
export default React.memo(MyComponent, areEqual)

Unlike the shouldComponentUpdate() method on class components, the areEqual function returns true if the props are equal and false if the props are not equal. This is the inverse from shouldComponentUpdate.

useCallback

useCallback hook lets you cache a function definition between re-renders. Means if you are passing a function down to a component which is using memo the component will still re-render on parent re-render as you are creating new definition of the passed function. In that case you can you useCallback hook that let’s you cache the function reference between re-renders.

const cachedFn = useCallback(fn, dependencies)

useMemo

useMemo lets you cache the result of a calculation between re-renders. So if you are doing some very expensive operation to get a value on component render you can use this hook to cache the value so that if any dependency updates that only function will run to calculate the value.

const cachedValue = useMemo(calculateValue, dependencies)

SolidJS createMemo

SolidJS manages memoization through a single method called createMemo. This method keeps track on any signal or derived state used and run only when any value updates.

const [count, setCount] = createSignal(0)
const cachedData = createMemo(() => {
  //some expensive operations using count()
  console.log(count())
})

Is SolidJS Better Than ReactJS?

Deciding whether to learn SolidJS or ReactJS depends on several factors you want to prioritize in your web app or web development journey.

SolidJS outperforms ReactJS in terms of performance and user-friendliness. Although it shares similarities with React, SolidJS has distinct implementation differences. For instance, state management in SolidJS is more straightforward, and its rendering and DOM update mechanisms are faster than those of ReactJS. Additionally, SolidJS offers a wide range of built-in functionalities that would require external libraries in ReactJS.

However, SolidJS being a relatively new framework, hasn’t gained the same level of adoption and ecosystem size as ReactJS. Therefore, it may be easier to find third-party packages and integrations that are compatible with ReactJS rather than SolidJS.

Furthermore, resources for learning and problem-solving are more readily available for ReactJS on websites like Stack Overflow and programming blogs. Additionally, if you’re looking for job opportunities in web development, ReactJS currently has a larger job market than SolidJS.

Ultimately , learning SolidJS should not pose a challenge for those who have already learned React because SolidJS offers a simpler syntax compared to React and use things similar to react like JSX, States, Effects, Memos.

7 ways to generate a react project

Vishal Sharma — Wed, 25 May 2022 12:11:44 +0000

Creating a new React application is not a simple task.

Creating a new React application requires careful consideration of various factors that will impact its scalability, collaboration and compatibility with your current and future tools and needs. These decisions include the type of app you are building (e.g. Complex web app, static landing site , content heavy blog site or an seo targeted e-commerce app), the level of server engagement, the number of developers working on the app, the reuse of components from other applications, and the build and deployment process. These decisions should be made with your end goal in mind and will require a significant amount of effort to ensure the success of the app.

So let’s start with what’s React?

React is a JavaScript library for building user interfaces. It was developed by Facebook and is widely used for building web and mobile applications. React allows developers to create reusable components that can be easily managed and composed to build complex user interfaces. React uses a virtual DOM (Document Object Model) to optimize the rendering of components and improve the performance of the application.

This article presents a collection of the methods, frameworks and tools for creating React applications. These options range from optimizing for quick setup for small websites (or just to test react) to catering to global scale, and some even do both. I hope that this article will assist you in constructing a React application that satisfies your needs, reduces errors and time wasted in the process.

1. Nothing but React

You can include the React bundle from a CDN directly in your HTML file to quickly get a taste of how React works and what it can do. However, this method is not recommended for creating production applications.

To use React from a CDN (Content Delivery Network) in an HTML file, you can include the React and ReactDOM libraries by adding script tags to the head of your HTML file.

Here is an example of how to include React and ReactDOM from a CDN in an HTML file:

<!DOCTYPE html>
<html>
  <head>
    <script src="https://unpkg.com/react@18.2.0/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@18.2.0/umd/react-dom.development.js"></script>
  </head>
  <body>
    <!-- your HTML content goes here -->
  </body>
</html>

Note that the exact URL of the React library may vary depending on the version of React that you want to use. You can find the latest version of React and ReactDOM at the following URLs:

Once you have included the React and ReactDOM libraries in your HTML file, you can use React to create and render components in your application.

For example, you can create a simple React component using the React.createElement function and render it to the page using theReactDOM.render function:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>React CDN</title>
  </head>
  <body>
    <div id="root"></div>
    <script src="https://unpkg.com/react@18.2.0/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@18.2.0/umd/react-dom.development.js"></script>
    <script>
      ReactDOM.createRoot(document.getElementById("root")).render(
        React.createElement("h1", null, "Hello world!")
      )
    </script>
  </body>
</html>

This will render an h1 element with the text Hello world!.

Using this way use can not use .jsx syntax because we don’t have babel parser in place to parse and covert the syntax to plain JS.

2. From Scratch (Without any tooling)

React and React DOM are JavaScript libraries that are typically installed via the npm package manager. These libraries provide the building blocks for creating web applications using the React framework.

Once React and React DOM are installed, it is common to also set up a build tool such as webpack and a transpiler such as Babel in order to bundle and transpile the code for the application. This process involves creating configuration files that specify how webpack and Babel should be used to build the application.

Overall, the process of setting up a React application involves installing the necessary npm packages and configuring webpack and Babel to properly build and transpile the code. This allows developers to manage all of the build-related configuration in a centralized location, making it easier to maintain and update the application as it grows.

I have written a detailed blog explaining this method. Read it here

3. Next.js

Next.js is a popular framework for building server-rendered React applications. It provides a simple and efficient way to create React projects with automatic code splitting, server-side rendering, and optimized performance.

To generate a new React project using Next.js, you can follow these steps:

Install the create-next-app command-line tool by running npm install -g create-next-app. This will allow you to easily create a new Next.js project.
Create a new Next.js project by running the create-next-app command and specifying a name for your project:

create-next-app my-project or use npx create-next-app my-project which don’t require you to install create-next-app package locally.

This will create a new directory with the specified name and generate the basic file structure and configuration for a Next.js project.

Navigate to the new project directory and install the dependencies by running npm install.
Run the development server by running npm run dev. This will start the development server and open a new browser window with your Next.js app.
Modify the pages/index.js file to modify the homepage and add content to your app.
Next.js uses the pages directory to define the routes of your app. Each JavaScript file in the pages directory corresponds to a route, and the components exported from those files are rendered when the corresponding route is accessed.

For example, the pages/index.js file defines the root route of the app, and the components exported from this file are rendered when the root route is accessed.

To create a new route create a new js file in pages directory and default export the react component. Next will create a route for you with name of the js file.

For example, create pages/newPage.js file and next will create /newPage route.

Next by default will server side render each page and will return static html along will react bundle to browser.
You can also create dynamic routes in pages directory. Dynamic routes are routes that have a variable component, such as /posts/:id or /users/:username. These routes allow you to render different content for each value of the variable component. For example To create a dynamic route for /posts/:id create a folder with name posts in pages directory and inside this folder create file [id].js. Along with this you can create an index.js which will render on /posts route.

Along with a react component you can also use lifecycle methods of next.js.

In a Next.js page getServerSideProps, getInitialProps, getStaticPaths, and getStaticProps are functions that can be used to fetch data or perform other tasks before a page is rendered. These functions are called “lifecycle methods” because they are executed at different stages of the page rendering process.

Here is a brief overview of these lifecycle methods:

getServerSideProps is a function that is executed on the server side before the page is rendered. It allows you to fetch data or perform other tasks that require server-side rendering, such as server-side rendering with authenticated content or server-side rendering with a database. The results of getServerSideProps are passed to the page as props.
getInitialProps is a legacy function that was used in Next.js versions prior to 9.3. It is similar to getServerSideProps but is executed on the server side as well as the client side. If you are using a version of Next.js prior to 9.3, you can use getInitialProps to fetch data or perform other tasks before the page is rendered.
getStaticProps is a function that is executed at build time to generate static pages. It allows you to fetch data or perform other tasks that do not require server-side rendering, such as generating static pages with data from an API or a file system. The results of getStaticProps are passed to the page as props and are available at runtime.
getStaticPaths is a function that is used in conjunction with getStaticProps to generate static pages for dynamic routes.To generate static pages for dynamic routes, you need to specify the values of the variable component that you want to pre-render. You can do this by implementing the getStaticPaths function in your page file.

In general, you should use getServerSideProps when you need to perform server-side rendering, such as with authenticated content or a database. You should use getStaticProps when you need to generate static pages, such as with data from an API or a file system, getStaticPaths to create and return list of dynamic paths on build time . You should avoid using getInitialProps if you are using a version of Next.js newer than 9.3.

By using these lifecycle methods, you can control the data and behavior of your pages in a Next.js application and optimize the rendering process for different scenarios.

Here is an example of a page file with all lifecycle methods

// pages/posts/[id].js
import React from "react"
// Server Side fetch
import fetch from "node-fetch"

const Posts = () => {
  return (
    <div>
      <h1>Hello, world!</h1>
      <p>Welcome to my Next.js application.</p>
    </div>
  )
}

// This gets called on every request
export async function getServerSideProps() {
  // Fetch data from external API
  const res = await fetch(`https://.../data`)
  const data = await res.json()

  // Pass data to the page via props
  return { props: { data } }
}

// This function gets called at build time
export async function getStaticPaths() {
  // Call an external API endpoint to get posts
  const res = await fetch("https://.../posts")
  const posts = await res.json()

  // Get the paths we want to pre-render based on posts
  const paths = posts.map(post => `/posts/${post.id}`)

  // We'll pre-render only these paths at build time.
  // { fallback: false } means other routes should return 404.
  return { paths, fallback: false }
}

// This also gets called at build time
export async function getStaticProps({ params }) {
  // params contains the post `id`.
  // If the route is like /posts/1, then params.id is 1
  const res = await fetch(`https://.../posts/${params.id}`)
  const post = await res.json()

  // Pass post data to the page via props
  return { props: { post } }
}

export default Posts

Finally Next also provides a way to create api routes. Create api folder inside pages and inside this create apiRoute.js. Here you can default export a function to handle api calls to /api/apiRoute.js. Inside the function we can use switch case statement to handle api methods like GET, POST.

export default function handler(req, res) {
  const { method, body } = req

  switch (method) {
    case "POST": {
      res.status(200).json({ name: "John Doe", method })
    }
    case "GET": {
      res.status(200).json({ name: "John Doe", method })
    }
  }
}

To build your Next.js app for production, run the npm run build command and then the npm run start command to start the production server.

Overall next.js is a good to go if your application involves lots of dynamic rendering and routing but you also want to use server side rendering to improve page performance and seo.

4. Gatsby

Gatsby.js is a static site generator for React that allows you to build fast and modern websites. It comes GraphQL out of the box to access data. GraphQL allows you to declaratively express your data needs. This is done with queries, queries are the representation of the data you need.

GraphQL is certainly not required, but the benefits of adopting GraphQL are significant. GraphQL will simplify the process of building and optimizing your pages, so it’s considered a best practice for structuring and writing Gatsby applications.

One of the key benefits of Gatsby.js is it let’s you create multiple pages using a single template on build time. In gatsby-node.js, you can use the GraphQL query to generate pages.

exports.createPages = async ({ graphql, actions, reporter }) => {
  const { createPage } = actions

  // Define a template for blog post
  const blogPost = path.resolve(`./src/templates/blog-post.js`)

  // Get all markdown blog posts sorted by date
  const result = await graphql(
    `
      {
        allMarkdownRemark(sort: { frontmatter: { date: DESC } }, limit: 1000) {
          nodes {
            fields {
              slug
            }
            frontmatter {
              title
            }
          }
        }
      }
    `
  )

  if (result.errors) {
    reporter.panicOnBuild(
      `There was an error loading your blog posts`,
      result.errors
    )
    return
  }

  const posts = result.data.allMarkdownRemark.nodes

  // Create blog posts pages
  // But only if there's at least one markdown file found at "content/blog" (defined in gatsby-config.js)
  // `context` is available in the template as a prop and as a variable in GraphQL

  if (posts.length > 0) {
    posts.forEach((post, index) => {
      const previous = index === posts.length - 1 ? null : posts[index + 1]
      const next = index === 0 ? null : posts[index - 1]

      createPage({
        path: post.fields.slug,
        component: blogPost,
        context: {
          slug: post.fields.slug,
          previous,
          next,
        },
      })
    })
  }
}

It uses server-side rendering and code splitting to deliver fast initial load times and smooth navigations. It also includes optimized image loading and automatic asset optimization to further improve the performance of your site.

Gatsby.js also offers a rich developer experience with features such as hot reloading, error debugging, and integration with popular tools and libraries. You can also use Gatsby’s plugin system to extend the functionality of your site with features such as analytics, SEO, or social media integration.

Gatsby.js also provides a flexible and powerful routing system that allows you to define the routes and corresponding pages of your site. You can create static pages or use dynamic routes to render different content for different URLs.

In addition to its core features, Gatsby.js has a vibrant and active community that maintains a wide variety of plugins and themes to help you build your site. You can use these resources to quickly add functionality or customize the appearance of your site.

How to start?

To setup gatsby project you can choose from Gatsby Starter Library which provides multiple starter projects with different frameworks integration out of the box.https://www.gatsbyjs.com/starters/ or we can you gatsby’s Quick Start Guide https://www.gatsbyjs.com/docs/quick-start/

Gatsby also have a next.js like approach for routing where we create a .js files in pages directory and export default the React component and then that component will be exposed to /<filename> route. In addition to this we can export a Head function from the file and return from that function will be injected to head tag of the page.

I have used Gatsby to create [this](codeentity.tech] blog site.

Why Gatsby?

Gatsby is all about speed: well-optimized websites with great SEO and performance and great ramp-up speed to build the app. It generates static HTML in advance, which can subsequently be stored on CDNs (Content Delivery Network) across the globe to facilitate quicker access.

One best thing I like about gatsby is its plugin ecosystem where you can get a plugin for almost anything.

From transforming markdown to html, adding _target to external routes. Ahead caching internal routes created by markdown, Adding custom meta tags, Generating RSS Feed you will get a plugin for the task you want to do or to extend its functionality.

Overall, Gatsby.js is a powerful and flexible tool for building fast and modern websites with React. Whether you are building a blog, portfolio, or e-commerce site, Gatsby.js has the tools and resources you need to create a high-performing and scalable site.

5. Remix.run

Remix is fullstack React frameworks similar to next.js but with its own unique features and benefits. Originally offered as a paid subscription service, the creators of Remix announced inOctober 2021 that the framework would be made open source.

One key feature of Remix is its focus on server-side rendering (SSR). This means that the backend and frontend of an application can be built using a single Remix app. Instead of fetching data on the frontend and rendering it on the screen, as is the case with vanilla React, Remix fetches data on the backend and serves the HTML directly to the user. This approach has the benefit of minimizing the amount of JavaScript that is required on the client side, resulting in faster page loads and a more efficient user experience.

But wait next is also doing same thing so what’s the difference. Why would I use Remix instead of Next.

Well Co-Founder of Remix Ryan Florence has written a detailed blog on this topic. You can read it here.

In this blog he has listed following advantages of using Remix over Next.

Remix is as fast or faster than Next.js at serving static content
Remix is faster than Next.js at serving dynamic content
Remix enables fast user experiences even on slow networks
Remix automatically handles errors, interruptions, and race conditions, Next.js doesn’t
Next.js encourages client side JavaScript for serving dynamic content, Remix doesn’t
Next.js requires client side JavaScript for data mutations, Remix doesn’t
Next.js build times increase linearly with your data, Remix build times are nearly instant and decoupled from data
Next.js requires you to change your application architecture and sacrifice performance when your data scales
We think Remix’s abstractions lead to better application code

One of the standout features of Remix is its support for nested routing. Nested routing refers to the idea of linking segments of the URL to the component hierarchy in the user interface. This has a number of benefits, as it allows developers to use the URL to control things like which layouts are rendered on the page, which JavaScript bundles are loaded, and what data dependencies those layouts have.

In contrast to some web applications that fetch data inside of components, which can result in slower page loads and a less smooth user experience, Remix loads data in parallel on the server and sends a fully formed HTML document to the client. This helps to improve the performance and efficiency of the application, as it minimizes the amount of data that needs to be transferred over the network and reduces the number of requests that need to be made.

You can follow https://remix.run/docs/en/v1/tutorials/blog this blog to setup the remix project.

6. Create React App

This one is the most commonly used tool on the list, but probably the last choice for a real-world production application.

Create React App is a command-line tool that allows you to quickly create and set up a new React application. It is developed and maintained by the React team and is the easiest way to create a new React application.

Using Create React App, you can create a new React application with just a few commands. It will automatically set up a development environment for you, including installing the necessary dependencies, configuring Webpack and Babel, and creating a development server.

One of the key benefits of Create React App is its simplicity. It abstracts away many of the complexities of setting up a React application, allowing you to focus on building your application instead of worrying about the underlying configuration.

Create React App will abstract the config and provide support of

Importing svg as component
Sass, Just need to install sass compiler.
Testing with Jest and React Testing Library.
Latest React Features like using React.lazy for code splitting.

Create React app is good option if creating admin dashboards where seo is not important and focus is on shipping product quickly instead of website optimization.

To create a new react app follow these steps

npx create-react-app my-app
cd my-app
npm install
npm start

Create React App also provides option to add typescript and to change package manager to yarn instead of npm.

npx create-react-app my-app --template typescript

This command will generate a typescript project.

In addition, the structure of a React app created with Create React App is consistent across projects, which makes it easier to switch between different React projects and understand how they are organized.

7. Vite

Vite is a modern build tool for JavaScript applications that allows you to quickly set up and develop a new project. It is designed to be fast and lightweight, making it an excellent choice for building React applications.

I personally prefer vite over cra as dev build time is too fast in vite. Around 10x fast.

Why Vite is fast

At its core, Vite does 2 things

Serve your code locally during development.
Bundle your Javascript, CSS and other assets together for production.

There are other tools(bundlers) that do the same thing, such as webpack, Parcel and Rollup, so what makes Vite different?

The problem with the tools mentioned above is that they have to build everything on every save, and if you have a very large application, that could take several minutes every time you save, even with Hot reloading in some frameworks, the update speed gets significantly slower as you add more code and dependencies to the app.

Vite has taken a different approach to this, kind of a reverse approach. Vite starts the server right away, takes the dependencies that don’t change often, and pre-bundles them using esbuild.

Vite uses route-based code-splitting to figure out what parts of the code actually need to be loaded, and doesn’t have to pre-bundle everything.

Vite serves the source code using native ES Module support in modern browsers. This lets the browser take the job of bundling in development, which consequently makes your code to load instantly, no matter how large the app is.

It also supports Hot Module Replacement for an extremely fast feedback loop during development.

When building for production, Vite uses Rollup under the hood, so you don’t have to worry about configuring it.

Creating a Project with Vite

To create a Vite application, open your terminal and navigate to the folder where you want to save the Vite program. Then run this command:

npm create vite@latest

You’ll be prompted to select a framework and a variant(template). In our case, we’ll be using React, so select React.

You can also directly specify the template you want to use and the project name in one single line:

npm create vite@latest react-app --template react

Next, run the following commands in the terminal

cd react-app
npm install
npm run dev

Running the above command will start the development server. Then open your browser and enter http://localhost:3000.

Vite is faster then cra but is relatively new and don’t have that much community compared to cra. But it’s a good option if you are creating a side project in react as it comes with various templates and also support server side rendering.

Apart from react you can generate projects in several other frameworks also. https://vitejs.dev/guide/#trying-vite-online

Conclusion

There we go! We’ve looked at 7 different methods for generating a React Project. Each with its own pros and cons. Now that you have a better understanding of the options available to you, you can choose the best method for creating your next big thing. I hope this article was helpful in your decision-making process.

Create React project without CRA(or any build tool)

Vishal Sharma — Fri, 13 May 2022 12:11:44 +0000

But why? Can’t we use CRA or other similar tools.

While CRA can be a useful tool for quickly getting started with a new React project, creating a project from scratch has several advantages that can be valuable for developers who want more control, a deeper understanding of their project, or the opportunity to try out new technologies and approaches.

Creating a React project from scratch has several advantages over using a tool like Create React App (CRA).

One of the main advantages is that it gives you more control over the project setup and configuration. When you use CRA, the tool handles a lot of the setup and configuration for you, which can be convenient. However, this also means that you have less control over how the project is set up and how it is built.

On the other hand, when you create a project from scratch, you have the opportunity to fully customize the project setup and build process to suit your needs. This can be particularly useful if you have specific requirements or preferences for how your project should be set up, or if you want to use a particular build tool or configuration that is not supported by CRA.

Another advantage of creating a project from scratch is that it can help you better understand the underlying technologies and tools that are being used in your project. By setting up the project yourself, you will gain a deeper understanding of how the different pieces fit together and how they work, which can be valuable knowledge to have as you develop and maintain your project.

Finally, creating a project from scratch also gives you the opportunity to learn and experiment with new technologies and approaches. While CRA is a convenient tool that can help you get started quickly, it may not always support the latest technologies or best practices. By creating a project from scratch, you can try out new tools and approaches and see how they work in your project.

Before we start

Before starting, you need to set up the environment:

Installing Node.js

Node.js is an open-source, cross-platform runtime environment that helps us write JavaScript applications and execute them.

Node >=18.0.0 You can get it from: https://nodejs.org/en/. This will also install the npm (node package manager).

IDE

To start coding with React, we can use the Visual Studio Code IDE which can be downloaded from: https://code.visualstudio.com/download. I personally prefer vscode but you can use any text editor of your choice like atom, webstorm, sublime.

Let’s Start

To generate a React project without using any tooling, you can follow these steps:

Create a new directory for your project and navigate to it.
Initialize a new npm package by running npm init and following the prompts. This will create a package.json file in your project directory.
Install the React and ReactDOM packages by running npm install react react-dom. This will add the React and ReactDOM packages to your project as dependencies and update the package.json file.
Create an index.html file in your project directory and add the following content:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>React CDN</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="index.js"></script>
  </body>
</html>

Create an index.js file in your project directory and add the following content:

import "/node_modules/react/umd/react.development.js"
import "/node_modules/react-dom/umd/react-dom.development.js"

const element = React.createElement("h1", null, "Hello world!")
ReactDOM.render(element, document.getElementById("root"))

Run a local development server by installing a tool such as http-server and running http-server in your project directory.
Open your browser and navigate to the URL of your local development server to view your React app.

Now let’s enhance this by using babel to transpile ths .jsx syntax and webpack to generate dev and prod bundles.

To enhance the project that using webpack and Babel, we can follow these steps:

Install the webpack and webpack-cli packages by running npm install --save-dev webpack webpack-cli. This will add the webpack and webpack-cli packages to your project as development dependencies and update the package.json file.
Install the Babel packages by runningnpm install --save-dev @babel/core @babel/preset-env @babel/preset-react babel-loader. This will add the Babel packages to your project as development dependencies and update the package.json file.
Create a webpack.config.js file in your project directory and add the following content:

module.exports = {
  entry: "./index.js",
  output: {
    filename: "bundle.js",
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ["@babel/preset-env", "@babel/preset-react"],
          },
        },
      },
    ],
  },
}

This configuration tells webpack to use the babel-loader to transpile your JavaScript code using the Babel presets for environment and React.

Modify the index.html file to include the bundle file generated by webpack:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>React CDN</title>
  </head>
  <body>
    <div id="root"></div>
    <!-- Webpack will create build at this path -->
    <script src="dist/bundle.js"></script>
  </body>
</html>

Modify the package.json file to include the following scripts:

"scripts": {
    "build": "webpack --mode production",
  }

Modify index.js to:

import ReactDOM from "react-dom/client"

const element = <h1>Hello World</h1>
ReactDOM.createRoot(document.getElementById("root")).render(element) // React 18

This script allow you to build your project for production using npm run build.

Run npm run build to build your project. This will generate dist folder with bundle.js file.
Now run index.html using http-server module or you can use live server extension if you are using vscode.
Let’s include html template file in webpack configuration to generate a complete prod ready bundle.

To include the HTML template in webpack configuration, you will need to use a webpack plugin called html-webpack-plugin. This plugin allows you to specify an HTML template file that will be used to generate an HTML file for your application.

To use the html-webpack-plugin, you will first need to install it as a dependency for your project. You can do this by running the following command in your terminal:

npm install html-webpack-plugin --save-dev

Once the html-webpack-plugin is installed, you can add it to your webpack configuration by adding the following code to your webpack.config.js file:

const HtmlWebpackPlugin = require("html-webpack-plugin")

module.exports = {
  // other webpack configuration goes here
  plugins: [
    new HtmlWebpackPlugin({
      template: "path/to/template.html",
      filename: "index.html",
    }),
  ],
}

This will tell webpack to use the specified HTML template file to generate an HTML file for your application. The generated HTML file will be placed in the output directory specified in your webpack configuration and will be served when your application is built and run.

You can also use the html-webpack-plugin to customize the generated HTML file by specifying various options such as the title of the page, the favicon, and any metadata that should be included in the head of the HTML file. For more information on the options available for the html-webpack-plugin, you can refer to the plugin’s documentation.

Run npm run build to build your project. This will generate dist folder with bundle.js and index.html file.
You can run this index.html similarly using http-server module or you can use live server extension.
There’s something still pending in this config which is we can not import css files to project.
To setup this install style loader and css loader by running npm install --save-dev style-loader css-loader.
Now add this to webpack config by making following changes.

// Add this to rules array in module object.
{
  test: /\.css$/,
  use: ["style-loader", "css-loader"],
}

Create a style.css file and add some styles in it.
Import this file in index.js
Repeat step 8 & 9. You will see the css changes applied. But this will add changes in js bundle and webpack will inject these as style tag on run time.
To extract css into separate file we can use MiniCssExtractPlugin.

But it’s not practical to build the project after making a single change. So we will setup a dev mode using webpack-dev-server

Install Webpack Dev Server using npm install --save-dev webpack-dev-server.
Create a webpack.config.dev.js and add following code.

const path = require("path")
const HtmlWebpackPlugin = require("html-webpack-plugin")

module.exports = {
  entry: "./index.js",
  output: {
    filename: "bundle.js",
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ["@babel/preset-env", "@babel/preset-react"],
          },
        },
      },
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./src/index.html",
    }),
  ],
  devServer: {
    historyApiFallback: true,
  },
  devtool: "source-map",
}

We have some extra properties in this config.
This configuration file can be used with the webpack-dev-server to start a development server for project. To use this add following script to package.json."start": "webpack-dev-server --mode development --config webpack.config.dev.js"
Run npm run start or npm start to start the development server and view your React app. Webpack will automatically transpile your code using Babel and reload the page when you make changes.

Now we can change the folder structure a bit so that we can make it similar to conventional react project.

Create a folder with name public at root and move index.html to this folder.
Create a folder with name src at root and move index.js and styles.css to this folder.
Also we need to change these paths webpack and webpack dev config.

After this activity your folder structure should look like:

Now we need to have a way to copy static assets like fonts and images to the bundle folder

To copy static assets such as images, fonts, or other media files using webpack, you can use the copy-webpack-plugin and the file-loader.

Here is an example of how to use the copy-webpack-plugin to copy static assets in your webpack configuration file:

const CopyWebpackPlugin = require("copy-webpack-plugin")

module.exports = {
  // your webpack configuration goes here
  plugins: [
    new CopyWebpackPlugin({
      patterns: [
        {
          from: "public",
          to: "assets", // This will be the path you will use to import the file. For eg. /assets/image.png
          globOptions: {
            ignore: ["**/index.html"], //Ignore index.html file
          },
        },
      ],
    }),
  ],
}

This configuration will copy all files from the public directory to the assets directory in the output directory. Now you can import the files present in public folder using absolute path directly in image src or in css url

Copy an image.png file to public folder
Change element variable in index.js to

const element = (
  <>
    <h1>Hello World</h1>
    {/* Src path will be the path you will give in `to` property in config */}
    <img src="/assets/image.png" />
  </>
)

Restart the server and you will see and image in browser.

copy-webpack-plugin is not designed to copy files generated from the build process; rather, it is to copy files that already exist in the source tree, as part of the build process.

This means that if we want to import images dynamically into .js or .css we can not use this. For that we need to use file-loader

npm install --save-dev file-loader

Copy following code to webpack.config.dev.js rules array.

{
  test: /\.(png|jpg|gif|svg)$/,
  use: {
  loader: "file-loader",
  options: {
    name: "[name].[ext]",
    outputPath: "assets/",
    },
  },
}

Now you can import image file to js file using import syntax. Let’s try it out

Copy a image file image2.png to src folder.
Import file in index.js using following syntax.

import image from "./image.png"

Modify img tag to use the imported file

const element = (
  <>
    <h1>Hello World</h1>
    <img src={image2} />
  </>
)

Now you can see the result in browser.

To get a bit clarity how this works add a new image tag with src path from assets and run npm run build.

Check the dist folder to how webpack is generating the final build.

At last

Now as a final step we can modify webpack.config.js a bit to include versioning in the build process. Webpack provides versioning support out of the box.

In webpack.config.js modify output.filename to bundle.[hash].js.

Delete the dist folder and run npm run build. Webpack will generate bundle with a hash code.

If you are pushing the code to git add .gitignore file at root level and add following code

node_modules
dist

This will ignore the node_modules and dist folder as we don’t need to push these.

What Next

We can add sass or postcss support using loaders.
Extract out css to separate bundles and hash css bundles also.
Add svgr to import svg as react components.

Data Structure and Algorithms with JS - Part 4 : Tree

Vishal Sharma — Sat, 16 Apr 2022 12:11:44 +0000

A tree is a non-linear data structure that represents a hierarchical relationship between nodes. Each node in a tree has a value and can have zero or more child nodes, which are connected to it via edges. The node at the top of the tree is called the root node, and the nodes that do not have any children are called leaf nodes.

The tree data structure is often used to represent hierarchical relationships in data, such as the structure of a file system, the structure of an organization, or the structure of a decision-making process.

Some common terminologies used in the context of tree data structure:

Root : The root of a tree is the topmost node in the tree. It is the ancestor of all other nodes in the tree.
Child : A child of a node is a node that is directly connected to it via an edge. A node can have zero or more children, depending on the structure of the tree.
Parent : A parent of a node is a node that is directly connected to it via an edge. Every node in a tree, except for the root, has a parent.
Leaf : A leaf is a node that does not have any children. Leaf nodes are the terminal nodes of a tree.
Subtree : A subtree of a tree is a portion of the tree that includes a node and all of its descendants.
Ancestor : An ancestor of a node is a node that is located above it in the tree and can be reached by traversing the tree upwards from the node. The root of the tree is an ancestor of every node in the tree.
Descendant : A descendant of a node is a node that is located below it in the tree and can be reached by traversing the tree downwards from the node. Every node in the tree is a descendant of the root.
Sibling : Siblings are nodes that have the same parent.
Degree : The degree of a node is the number of children it has.
Height : The height of a tree is the number of edges on the longest downward path between the root and a leaf. The height of a node is the number of edges on the longest downward path between the node and a leaf.
Depth : The depth of a node is the number of edges on the path from the root to the node.
Level : The level of a node is the number of ancestors it has. The root of the tree is at level 0, and the children of the root are at level 1, and so on.
Path : A path in a tree is a sequence of nodes connected by edges.
Traversal : Traversal refers to the process of visiting and processing the nodes of a tree in a specific order. There are various tree traversal algorithms, including

Some characteristics of the tree data structure :

Hierarchical structure:

Trees have a hierarchical structure, with the root node at the top and the leaf nodes at the bottom. This structure allows for the representation of complex relationships between nodes.

Recursive structure:

Trees have a recursive structure, with each node potentially having its own sub-tree of child nodes. This allows for the representation of an unbounded number of nodes within a tree.

Non-linear:

Trees are a non-linear data structure, meaning that the nodes in a tree are not stored in a contiguous block of memory like an array. Instead, each node is stored separately and is connected to other nodes via edges.

Efficient search:

Trees can be used to efficiently search for specific values within a dataset. For example, binary search trees allow for efficient search operations by exploiting the hierarchical structure of the tree.

Efficient insertion and deletion:

Trees can be used to efficiently insert and delete elements, particularly if the tree is balanced.

Flexible structure: Trees have a flexible structure, which allows them to adapt to changing data and changing requirements. For example we can have any number of child nodes to fit our requirements.

There are several types of tree data structures, each with its own characteristics and use cases:

N-ary tree:

Trees can have more than two children per node, in which case they are called n-ary trees.

Binary tree:

A binary tree is a tree data structure in which each node has at most two children. Binary trees are commonly used to implement search algorithms, such as binary search.Read More…

Binary search tree:

A binary search tree is a binary tree in which the value of each node is greater than the values of its left children and less than the values of its right children. Binary search trees are used to efficiently search for specific values within a dataset.Read More…

Balanced tree:

A balanced tree is a tree data structure in which the heights of the left and right subtrees of each node differ by at most 1. Balanced trees are used to maintain efficient search and insertion/deletion operations.Read More…

Heap:

A heap is a tree data structure that satisfies the heap property, which states that the value of each node is greater than or equal to the values of its children (in a max-heap) or less than or equal to the values of its children (in a min-heap). Heaps are used to implement efficient priority queues and sorting algorithms.

A max-heap is a complete binary tree in which the value of each node is greater than or equal to the values of its children. The root node of a max-heap is the maximum element in the heap.

A min-heap is a complete binary tree in which the value of each node is less than or equal to the values of its children. The root node of a min-heap is the minimum element in the heap.Read More…

Trie:

A trie (also known as a prefix tree) is a tree data structure used to store a dynamic set or associative array where the keys are sequences (usually strings). Tries are used for efficient prefix-based search, such as for spelling correction or for efficient data retrieval in databases.Read More…

Splay tree:

A splay tree is a self-balancing binary search tree that rearranges itself after each search operation to bring the searched-for item closer to the root. Splay trees are used to implement efficient data structures for dynamic sets and associative arrays.Read More…

Red-black tree:

A red-black tree is a self-balancing binary search tree that maintains a specific coloring scheme (red and black) in order to balance the tree. Red-black trees are used to implement efficient data structures for dynamic sets and associative arrays.Read More…

AVL tree:

An AVL tree is a self-balancing binary search tree that maintains balance by enforcing a height difference constraint between the left and right subtrees of each node. AVL trees are used to implement efficient data structures for dynamic sets and associative arrays.Read More…

Binary Search Tree Implementation using JavaScript

class TreeNode {
  constructor(value) {
    this.left = null
    this.right = null
    this.value = value
  }
}

class BinarySearchTree {
  constructor() {
    this.root = null
  }

  insert(value) {
    let newNode = new TreeNode(value)
    if (!this.root) {
      this.root = newNode
      return
    }
    let curr = this.root
    while (curr) {
      if (value <= curr.value) {
        if (curr.left) {
          curr = curr.left
        } else {
          curr.left = newNode
          break
        }
      } else {
        if (curr.right) {
          curr = curr.right
        } else {
          curr.right = newNode
          break
        }
      }
    }
  }
  lookup(value) {
    if (!this.root) return "Empty Array"
    let curr = this.root
    while (curr) {
      if (value === curr.value) {
        return curr
      } else if (value < curr.value) {
        curr = curr.left
      } else {
        curr = curr.right
      }
    }
    return "Not Found"
  }
  remove(value) {
    if (!this.root) return "Empty Array"
    let curr = this.root
    let parentNode = null
    while (curr) {
      if (value < curr.value) {
        parentNode = curr
        curr = curr.left
      } else if (value > curr.value) {
        parentNode = curr
        curr = curr.right
      } else {
        if (!curr.right) {
          if (!parentNode) {
            this.root = curr.left
          } else {
            if (curr.value < parentNode.value) {
              parentNode.left = curr.left
            } else if (curr.value > parentNode.value) {
              parentNode.right = curr.left
            }
          }
        } else if (!curr.right.left) {
          if (!parentNode) {
            this.root = curr.left
          } else {
            curr.right.left = curr.left
            if (curr.value < parentNode.value) {
              parentNode.left = curr.right
            } else if (curr.value > parentNode.value) {
              parentNode.right = curr.right
            }
          }
        } else {
          let leftmost = curr.right.left
          let leftmostParent = curr.right
          while (leftmost.left !== null) {
            leftmostParent = leftmost
            leftmost = leftmost.left
          }
          leftmostParent.left = leftmost.right
          leftmost.left = curr.left
          leftmost.right = curr.right
          if (!parentNode) {
            this.root = leftmost
          } else {
            if (curr.value < parentNode.value) {
              parentNode.left = leftmost
            } else {
              parentNode.right = leftmost
            }
          }
        }
      }
    }
  }
}

const tree = new BinarySearchTree()
tree.insert(9)
tree.insert(4)
tree.insert(6)
tree.insert(20)
tree.insert(170)
tree.insert(15)
tree.insert(1)
console.log(tree.lookup(20))
/**
TreeNode {
  left: TreeNode { left: null, right: null, value: 15 },
  right: TreeNode { left: null, right: null, value: 170 },
  value: 20
}
 */
console.log(tree.lookup(150)) // Not Found
console.log(JSON.stringify(traverse(tree.root)))
/**
 * {"value":9,
 * "left":{"value":4,"left":{"value":1,"left":null,"right":null}, "right":{"value":6,"left":null,"right":null}},
 * "right":{"value":20,"left":{"value":15,"left":null,"right":null},"right":{"value":170,"left":null,"right":null}}}
 */

// 9
// 4 20
//1 6 15 170

function traverse(node) {
  const tree = { value: node.value }
  tree.left = node.left === null ? null : traverse(node.left)
  tree.right = node.right === null ? null : traverse(node.right)
  return tree
}

const maxDepth = function (root) {
  if (!root) return 0
  let maxDepth = 0
  const helper = (root, depth) => {
    if (root.left) helper(root.left, depth + 1)
    if (root.right) helper(root.right, depth + 1)
    if (!root.left) {
      if (depth > maxDepth) maxDepth = depth
      return
    }
    if (!root.right) {
      if (depth > maxDepth) maxDepth = depth
      return
    }
  }
  helper(root, 1)
  return maxDepth
}

Trees are a common data structure used in computer science to represent hierarchical relationships between objects.

Some common applications of tree data structures include:

Hierarchical data representation:

Tree data structures are often used to represent the hierarchical data structures, such as the hierarchy of files and directories in a file system or organizational structures. Each directory is represented as a node in the tree, with the files in that directory being the child nodes of the directory node.

Decision making:

Trees can be used to represent decision-making processes, such as in the game of chess where each move is represented as a node in the tree and the possible subsequent moves are the child nodes. The tree can be searched to find the best move based on a set of predetermined criteria.

Web navigation:

Trees can be used to represent the structure of a website, with the home page being the root node and the child nodes representing the pages linked from the home page. This can help with navigation and search functionality on a website.

Searching and sorting:

Trees can be used to implement efficient search and sorting algorithms, such as binary search trees and red-black trees to filter large amount or to find related keywords and results in a search engine.

Network routing:

Trees can be used to represent the topology of a network or network routing algorithms, with the nodes representing devices and the edges representing connections between the devices. This can help with routing data packets through the network.

Parsing:

Trees can be used to represent the structure of a mathematical expression, with the nodes representing the operators and the leaves representing the operands. This can be used to evaluate the expression or to simplify it. Other then this Trees are often used in natural language processing and computer science to represent the structure of a sentence or program.

Here are some tree data structure problems from LeetCode

Data Structure and Algorithms with JS - Part 3 : Stack and Queue

Vishal Sharma — Mon, 28 Mar 2022 12:11:44 +0000

Stack

A stack is a linear data structure that follows the Last In First Out (LIFO) principle. This means that the last element added to the stack will be the first one to be removed.

Stacks are commonly used to store data temporarily while a program is executing. They can be used to implement function calls, as well as to reverse the order of items.

Operations that are typically supported by stacks include:

push: adds an element to the top of the stack
pop: removes the element at the top of the stack and returns it
peek: returns the element at the top of the stack without removing it
isEmpty: returns true if the stack is empty, false otherwise

Here is an Example of a Stack implementation using LinkedList in Javascript

class StackNode {
  constructor(value) {
    this.value = value
    this.next = null
  }
}

class Stack {
  constructor() {
    this.top = null
    this.bottom = null
    this.length = 0
  }
  peek() {
    return this.bottom.value
  }
  isEmpty() {
    return !!this.length
  }
  push(value) {
    let newNode = new StackNode(value)
    if (!this.top) {
      this.top = newNode
      this.bottom = newNode
    } else {
      newNode.next = this.top
      this.top = newNode
    }
    this.length++
    return this
  }
  pop() {
    if (!this.top) return null
    let value = this.top.value
    if (this.length === 1) {
      this.bottom = null
    }
    this.top = this.top.next
    this.length--
    return value
  }
}
const myStack = new Stack()
console.log(myStack.push("google"))
/**
 Stack {
  top: StackNode { value: 'google', next: null },
  bottom: StackNode { value: 'google', next: null },
  length: 1
}
 */
console.log(myStack.push("udemy"))
/**
 Stack {
  top: StackNode {
    value: 'udemy',
    next: StackNode { value: 'google', next: null }
  },
  bottom: StackNode { value: 'google', next: null },
  length: 2
}
 */
console.log(myStack.push("discord"))
/**
 Stack {
  top: StackNode {
    value: 'discord',
    next: StackNode { value: 'udemy', next: [StackNode] }
  },
  bottom: StackNode { value: 'google', next: null },
  length: 3
}
 */
console.log(myStack.pop()) //discord
console.log(myStack.pop()) //udemy
console.log(myStack.peek()) //google
console.log(myStack.isEmpty()) //true

We can implement stack using array and linked list both.

Array-based stack: This type of stack is implemented using an array, where the elements are stored in contiguous memory locations. The array can be resized as needed to accommodate new elements. Insertion and deletion operations are typically O(1) time complexity.

Linked list-based stack: This type of stack is implemented using a linked list, where each node in the list contains a value and a pointer to the next node in the list. Insertion and deletion operations are typically O(1) time complexity.

Stacks are widely used in computer science and have many practical applications. Some common uses of stacks include:

Evaluating mathematical expressions: Stacks are often used to evaluate mathematical expressions, such as infix, prefix, and postfix notation.

Compiler design: Stacks are used in compiler design for tasks such as syntax parsing, symbol table management, and code generation.

Function calls: Stacks are used to store information about function calls in a program, including the return address and the values of local variables. Javascript call stack and an error we encounter in infinite loop stack overflow. 😝😝

Undo/redo functionality: Stacks can be used to implement undo/redo functionality in text editors, image editors, and other software applications.

Backtracking: Stacks can be used to store the state of a problem as it is being solved, allowing the algorithm to backtrack and try alternative solutions if necessary.

Maze solving: Stacks can be used to store the path taken during a maze-solving algorithm, allowing the algorithm to backtrack and try alternative paths if necessary.

Topological sorting: Stacks can be used to implement topological sorting algorithms, which are used to order the vertices of a directed acyclic graph.

Memory management: Stacks are used in memory management to keep track of the memory used by a program and to allocate and deallocate memory as needed.

DFS (depth-first search): Stacks are used to implement DFS algorithms, which traverse the graph or tree vertically.

Here are some Leetcode problems that involve stacks:

Valid Parentheses: Given a string containing just the characters ’(’, ’)’, ’{’, ’}’, ’[’ and ’]’, determine if the input string is valid.
Evaluate Reverse Polish Notation: Evaluate the value of an arithmetic expression in Reverse Polish Notation.
Basic Calculator: Implement a basic calculator to evaluate a simple expression string.
Decode String: Given an encoded string, return its decoded string.
Min Stack: Design a stack that supports push, pop, top, and retrieving the minimum element in constant time.
Maximal Rectangle: Given a 2D binary matrix filled with 0’s and 1’s, find the largest rectangle containing only 1’s and return its area.
Trapping Rain Water: Given n non-negative integers representing an elevation map where the width of each bar is 1, compute how much water it is able to trap after raining.
Evaluate Division: Equations are given in the format A / B = k, where A and B are variables represented as strings, and k is a real number (floating point number). Given some queries, return the answers.
Remove Duplicate Letters: Given a string s, remove duplicate letters so that every letter appears once and only once. You must make sure your result is the smallest in lexicographical order among all possible results.

Queue

A queue is a linear data structure that follows the first-in, first-out (FIFO) principle. This means that the first element added to the queue will be the first one to be removed. Queues are often used to store data that needs to be processed in a specific order, and they support a limited set of operations, such as inserting an element at the back of the queue (also known as enqueuing), removing an element from the front of the queue (also known as dequeuing), and checking the element at the front of the queue.

Queues can be implemented using an array or a linked list. Array-based queues have a fixed size and may need to be resized if the number of elements exceeds the capacity of the array. Linked list-based queues can grow and shrink dynamically as elements are added and removed.

Here is an Example of a Queue implementation using LinkedList in Javascript

class QueueNode {
  constructor(value) {
    this.value = value
    this.next = null
  }
}

class Queue {
  constructor() {
    this.first = null
    this.last = null
    this.length = 0
  }
  peek() {
    return this.first.value
  }
  enqueue(value) {
    let newNode = new QueueNode(value)
    if (!this.first) {
      this.first = newNode
      this.last = newNode
    }
    this.last.next = newNode
    this.last = newNode
    this.length++
    return this.last
  }
  dequeue() {
    if (!this.first) return null
    if (this.first === this.last) this.last = null
    let value = this.first.value
    this.first = this.first.next
    this.length--
    return value
  }
}
const myQ = new Queue()
console.log(myQ.enqueue("Joy")) //QueueNode { value: 'Joy', next: null }
console.log(myQ.enqueue("Matt")) //QueueNode { value: 'Matt', next: null }
console.log(myQ.enqueue("Pav")) //QueueNode { value: 'Pav', next: null }
console.log(myQ.dequeue()) //Joy
console.log(myQ.enqueue("Sam")) //QueueNode { value: 'Sam', next: null }
console.log(myQ.dequeue()) //Matt
console.log(myQ.dequeue()) //Pav

There are several types of queue data structures, each with its own characteristics and use cases:

Standard queue: A standard queue is a basic queue data structure that supports the operations of enqueuing and dequeuing elements. It can be implemented using an array or a linked list.

Circular queue: A circular queue is a queue data structure that uses a fixed-size array and wraps around when the end of the array is reached. It allows for efficient insertion and deletion operations, but requires careful handling to avoid overwriting elements that have not yet been dequeued.

Priority queue: A priority queue is a queue data structure where each element has a priority associated with it. Elements are dequeued in order of their priority, with the highest priority element being dequeued first. Priority queues can be implemented using an array, a linked list, or a heap data structure.

Double-ended queue (deque):A double-ended queue (deque) is a queue data structure that allows for efficient insertion and deletion at both ends of the queue. It can be implemented using an array or a linked list.

Blocking queue: A blocking queue is a queue data structure that blocks enqueuing operations if the queue is full and dequeuing operations if the queue is empty. This can be used to synchronize multiple threads or processes that are accessing the queue.

Concurrent queue: A concurrent queue is a queue data structure that is designed to be thread-safe, allowing multiple threads to enqueue and dequeue elements concurrently without the need for explicit synchronization.

Some common uses of queues include:

Task scheduling: Queues can be used to store tasks that need to be processed in a specific order, such as jobs in a printer queue or tasks in a CPU scheduling algorithm.

Communication buffers: Queues can be used to store data that needs to be transmitted between two systems, such as packets in a network communication protocol.

BFS (breadth-first search): Queues are used to implement BFS algorithms, which traverse the graph or tree horizontally (level by level)..

Event-driven programming: Queues can be used to store events that need to be processed in a specific order, such as user input events in a graphical user interface (GUI).

Asynchronous programming: Queues can be used to store tasks that need to be executed asynchronously, such as in a web server handling multiple requests simultaneously.

Here are some Leetcode problems that involve queues :

Implement Queue using Stacks: Implement a first-in, first-out (FIFO) queue using only two stacks.
Rotate Array: Given an array, rotate the array to the right by k steps, where k is non-negative.
Queue Reconstruction by Height: Suppose you have a random list of people standing in a queue. Each person is described by a pair of integers (h, k), where h is the height of the person and k is the number of people in front of this person who have a height greater than or equal to h. Write an algorithm to reconstruct the queue.
Find Median from Data Stream: Median is the middle value in an ordered integer list. If the size of the list is even, there is no middle value. So the median is the mean of the two middle value.
Sliding Window Maximum: Given an array nums, there is a sliding window of size k which is moving from the very left of the array to the very right. You can only see the k numbers in the window. Each time the sliding window moves right by one position.
Design Circular Queue: Design your implementation of the circular queue. The circular queue is a linear data structure in which the operations are performed based on FIFO (First In First Out) principle and the last position is connected back to the first position to make a circle.
Number of Islands: Given a 2d grid map of ‘1’s (land) and ‘0’s (water), count the number of islands. An island is surrounded by water and is formed by connecting adjacent lands horizontally or vertically. You may assume all four edges of the grid are all surrounded by water.
Number of Provinces: There are n cities. Some of them are connected, while some are not. If city a is connected directly with city b, and city b is connected directly with city c, then city a is connected indirectly with city c. A province is a group of directly or indirectly connected cities and no other cities outside of the group. Return the total number of provinces.

Conclusion

In conclusion, we can say that Stacks and Queues are linear data structures that are used to store and manipulate data in a specific order. Stacks follow the last-in, first-out (LIFO) principle, while Queues follow the first-in, first-out (FIFO) principle. Both data structures support a limited set of operations, such as pushing and popping elements in the case of stacks, and enqueuing and dequeuing elements in the case of queues.

Data Structure and Algorithms with JS - Part 2 : Linked List

Vishal Sharma — Mon, 07 Mar 2022 12:11:44 +0000

A linked list is a linear data structure that consists of a sequence of nodes. Each node in a linked list stores a reference to an object and a reference to the next node in the sequence. The last node in the list typically has a reference to null, indicating the end of the list.

Linked lists have several advantages over arrays.

Insertions and deletions at the beginning of the list are very fast, as they only require updating a single reference. In contrast, inserting or deleting an element at the beginning of an array requires shifting all the elements of the array by one position, which can be time-consuming.
Linked lists also don’t required consecutive memory space, because they store the data and a reference to the next node, rather than the entire list of elements together.

However, linked lists have some disadvantages compared to arrays.

They do not provide constant-time access to individual elements, since you have to start at the beginning of the list and follow the references to find the element you are looking for.
Linked lists also require more memory per element, because they store both the data and the reference to the next element.
Because each element within an array only needs to store its value, compared to a linked list where there is also a pointer field along with the data field, an array takes up less memory.

Linked lists are often used in applications where the list is frequently modified, such as in the implementation of stacks, queues, and hash tables.

Here is an example of a simple linked list implementation in JavaScript:

class LinkedNode {
  constructor(value) {
    this.value = value
    this.next = null
  }
}

class LinkedList {
  constructor(value) {
    this.head = new LinkedNode(value)
    this.tail = this.head
    this.length = 1
  }
  append(value) {
    const newNode = new LinkedNode(value)
    this.tail.next = newNode
    this.tail = newNode
    this.length++
  }
  prepend(value) {
    const newNode = new LinkedNode(value)
    newNode.next = this.head
    this.head = newNode
    this.length++
  }
  insert(index, value) {
    //check params
    if (index >= this.length) {
      this.append(value)
    } else {
      let targetNode = this.traverseToIndex(index)
      const newNode = new LinkedNode(value)
      newNode.next = targetNode.next
      targetNode.next = newNode
      this.length++
    }
  }
  remove(index) {
    if (index > this.length) return "Invalid Index Value"
    if (index === 0) {
      this.head = this.head.next
      this.length--
      return
    }
    let targetNode = this.traverseToIndex(index)
    targetNode.next = targetNode.next.next
    this.length--
  }
  traverseToIndex(index) {
    let currNode = this.head
    for (let i = 1; i < index; i++) {
      currNode = currNode.next
    }
    return currNode
  }
  reverse() {
    if (!this.head.next) return
    // Method 1
    // let curr = this.head
    // this.head = null
    // while(curr){
    // this.prependNode(curr)
    // curr = curr.next
    // }

    //method 2
    let first = this.head
    let second = first.next
    while (second) {
      let temp = second.next
      second.next = first
      first = second
      second = temp
    }
    this.head.next = null
    this.head = first
  }
  prependNode(node) {
    let newNode = new LinkedNode(node.value)
    newNode.next = this.head
    this.head = newNode
  }
  printList() {
    const array = []
    let currNode = this.head
    while (currNode !== null) {
      array.push(currNode.value)
      currNode = currNode.next
    }
    return array
  }
}

const sampleList = new LinkedList(10)
sampleList.append(20)
sampleList.append(30)
sampleList.prepend(5)
sampleList.prepend(15)
sampleList.insert(3, 56)
sampleList.printList()
sampleList.reverse()
sampleList.printList()

There are several types of linked lists that you can implement in JavaScript. Some common types of linked lists include:

Singly linked list:

A singly linked list is a linked list where each node stores a reference to the next node in the list, but not to the previous node. This means that you can only traverse the list in a single direction, starting from the head of the list. The linked list we have implemented above is a singly linked list. Singly Linked list node:

class LinkedNode {
  constructor(value) {
    this.value = value
    this.next = null
  }
}

Doubly linked list:

A doubly linked list is a linked list where each node stores a reference to both the next and previous nodes in the list. This allows you to traverse the list in both directions, starting from either the head or the tail of the list.

Here is an example of a doubly linked list implementation in JavaScript:

class LinkedNode {
  constructor(data) {
    this.data = data
    this.next = null
    this.prev = null
  }
}

class LinkedList {
  constructor() {
    this.head = null
    this.tail = null
  }

  add(data) {
    const newNode = new LinkedNode(data)
    if (this.head === null) {
      this.head = newNode
      this.tail = newNode
    } else {
      this.tail.next = newNode
      newNode.prev = this.tail
      this.tail = newNode
    }
  }

  remove(data) {
    let current = this.head
    while (current !== null) {
      if (current.data === data) {
        if (current.prev !== null) {
          current.prev.next = current.next
        }
        if (current.next !== null) {
          current.next.prev = current.prev
        }
        if (current === this.head) {
          this.head = current.next
        }
        if (current === this.tail) {
          this.tail = current.prev
        }
        return
      }
      current = current.next
    }
  }

  contains(data) {
    let current = this.head
    while (current !== null) {
      if (current.data === data) {
        return true
      }
      current = current.next
    }
    return false
  }

  printForward() {
    let current = this.head
    while (current !== null) {
      console.log(current.data)
      current = current.next
    }
  }

  printBackward() {
    let current = this.tail
    while (current !== null) {
      console.log(current.data)
      current = current.prev
    }
  }
}

You can use this doubly linked list implementation by creating a new instance of the LinkedList class and adding nodes to the list using the add method:

const list = new LinkedList()
list.add(1)
list.add(2)
list.add(3)

console.log(list.contains(2)) // prints true
console.log(list.contains(4)) // prints false

list.remove(2)
console.log(list.contains(2)) // prints false

list.printForward() // prints 1 3
list.printBackward() // prints 3 1

Circular linked list:

A circular linked list is a linked list where the last node in the list points back to the first node, forming a circular loop. This allows you to traverse the list in a loop, starting from any node in the list.

Here is an example of a circular linked list implementation in JavaScript:

class LinkedNode {
  constructor(data) {
    this.data = data
    this.next = null
  }
}

class LinkedList {
  constructor() {
    this.head = null
  }

  add(data) {
    const newNode = new LinkedNode(data)
    if (this.head === null) {
      this.head = newNode
      newNode.next = this.head
    } else {
      let current = this.head
      while (current.next !== this.head) {
        current = current.next
      }
      current.next = newNode
      newNode.next = this.head
    }
  }

  remove(data) {
    if (this.head === null) {
      return
    }
    let current = this.head
    while (current.next !== this.head) {
      if (current.next.data === data) {
        current.next = current.next.next
        return
      }
      current = current.next
    }
    if (this.head.data === data) {
      if (this.head.next === this.head) {
        this.head = null
      } else {
        current.next = this.head.next
        this.head = this.head.next
      }
    }
  }

  contains(data) {
    let current = this.head
    if (current === null) {
      return false
    }
    do {
      if (current.data === data) {
        return true
      }
      current = current.next
    } while (current !== this.head)
    return false
  }
}

You can use this circular linked list implementation by creating a new instance of the LinkedList class and adding nodes to the list using the add method:

const list = new LinkedList()
list.add(1)
list.add(2)
list.add(3)

console.log(list.contains(2)) // prints true
console.log(list.contains(4)) // prints false

list.remove(2)
console.log(list.contains(2)) // prints false

Skip list:

A skip list is a data structure that combines elements of linked lists and arrays to provide fast search and insertion operations. In a skip list, each node has multiple pointers to other nodes, allowing you to skip over large sections of the list when searching for an element. It is a linked list with multiple levels, where each level has a certain probability of being skipped during a search. This allows the skip list to have a search time that is logarithmic (O(log(n))) in the number of elements, similar to a balanced binary search tree. Skip lists are interesting data structures that rely on a random element in its design.

Here is an example of a Skip linked list implementation in JavaScript:

class SkipListNode {
  constructor(val) {
    this.val = val
    this.next = new Array(16 + 1).fill(null)
    this.level = 0
  }
}

class SkipList {
  constructor() {
    this.head = new SkipListNode(null)
    this.MAX_LEVEL = 16
    this.level = 0
  }

  randomLevel() {
    let level = 0
    while (Math.random() < this.P && level < this.MAX_LEVEL) {
      level++
    }
    return level
  }

  search(val) {
    let curr = this.head
    for (let i = this.level; i >= 0; i--) {
      while (curr.next[i] !== null && curr.next[i].val < val) {
        curr = curr.next[i]
      }
    }
    curr = curr.next[0]
    if (curr !== null && curr.val === val) {
      return curr
    }
    return null
  }

  insert(val) {
    let curr = this.head
    let update = new Array(this.MAX_LEVEL + 1).fill(null)
    for (let i = this.level; i >= 0; i--) {
      while (curr.next[i] !== null && curr.next[i].val < val) {
        curr = curr.next[i]
      }
      update[i] = curr
    }
    curr = curr.next[0]
    if (curr === null || curr.val !== val) {
      let level = this.randomLevel()
      if (level > this.level) {
        for (let i = this.level + 1; i <= level; i++) {
          update[i] = this.head
        }
        this.level = level
      }
      curr = new SkipListNode(val)
      for (let i = 0; i <= level; i++) {
        curr.next[i] = update[i].next[i]
        update[i].next[i] = curr
      }
    }
  }

  remove(val) {
    let curr = this.head
    let update = new Array(this.MAX_LEVEL + 1).fill(null)
    for (let i = this.level; i >= 0; i--) {
      while (curr.next[i] !== null && curr.next[i].val < val) {
        curr = curr.next[i]
      }
      update[i] = curr
    }
    curr = curr.next[0]
    if (curr !== null && curr.val === val) {
      for (let i = 0; i <= this.level; i++) {
        if (update[i].next[i] !== curr) {
          break
        }
        update[i].next[i] = curr.next[i]
      }
      while (this.level > 0 && this.head.next[this.level] === null) {
        this.level--
      }
    }
  }
}

const list = new SkipList()
list.insert(1)
list.insert(2)
list.insert(3)
list.insert(6)
console.log(list.search(2)) // prints Node with val 2
console.log(list.search(4)) // prints null
list.remove(2)
console.log(list.search(2)) // prints null

XOR linked list:

An XOR linked list is a data structure that uses a special type of pointer called an “exclusive or” (XOR) pointer to store the reference to the next node in the list. XOR linked lists can be used to implement a doubly linked list using only a single field in each node, rather than two fields (one for the next node and one for the previous node). This can be more memory-efficient, but can also be more complex to implement. We can not implement a proper XOR linked list in Javascript as we cannot access the memory address. So in js it will be equivalent to a doubly linked list.

Here are a few Leetcode problems that involve linked lists:

Reverse Linked List: Reverse a singly linked list.

Merge Two Sorted Lists: Merge two sorted linked lists and return it as a new sorted list.

Add Two Numbers: You are given two non-empty linked lists representing two non-negative integers. The digits are stored in reverse order and each of their nodes contain a single digit. Add the two numbers and return it as a linked list.

Linked List Cycle: Given a linked list, determine if it has a cycle in it.

Linked List Cycle II: Given a linked list, return the node where the cycle begins. If there is no cycle, return null.

Remove Nth Node From End of List: Given a linked list, remove the n-th node from the end of list and return its head.

Palindrome Linked List: Given a singly linked list, determine if it is a palindrome.

Conclusion

Linked List Type	Insertion Complexity	Access Complexity	Pros	Cons
Singly Linked List	O(1)	O(n)	Simple to implement.	Poor performance for certain operations. (e.g. inserting at a specific position.)
Doubly Linked List	O(1)	O(n)	Allows for insertion and deletion at both ends of the list.	Requires more memory due to additional pointers.
Circular Linked List	O(1)	O(n)	Allows for efficient insertion at the end of the list.	Poor performance for certain operations. (e.g. inserting at a specific position.)
Skip List	O(log n)	O(log n)	Allows for efficient search and insertion.	Requires more memory due to additional pointers.
XOR Linked List	O(1)	O(n)	Uses less memory than doubly linked list.	Complex to implement and may have poor performance for certain operations.

Data Structure and Algorithms with JS - Part 1 : Arrays

Vishal Sharma — Fri, 25 Feb 2022 12:11:44 +0000

Arrays are a fundamental data structure in computer science and are used in a wide variety of applications. They are particularly useful for storing and manipulating large datasets, as they allow us to access and manipulate elements quickly using their indices.

There are several advantages to using arrays:

Arrays are efficient for storing and accessing data. Because elements are stored in a contiguous block of memory, we can access them quickly using their indices.
Arrays are easy to use. They offer a simple interface for storing, accessing, and manipulating data.
Arrays are flexible. We can store elements of any data type in an array, and we can add or remove elements at any time.

There are also some limitations to using arrays:

Arrays have a fixed size. Once we create an array, we cannot change its size unless we create a new array and copy the elements from the old array to the new one.
Arrays are not always the most efficient data structure for certain operations. For example, inserting or deleting elements from the middle of an array can be time-consuming, as it requires shifting all the elements after the inserted/deleted element.

Despite these limitations, arrays are still a widely used data structure due to their simplicity and efficiency. They are commonly used in a variety of programming languages, including C, C++, Java, and Python, as well as in many other applications.

In JavaScript , arrays are a subclass of the object data type, and they have a length property that represents the number of elements in the array. They are dynamic, which means that we can add or remove elements from the array at any time.

Elements of small enough arrays are stored in an internal fixed-size array. V8 allocates some extra space in the internal array to achieve constant amortized time for push() and similar operations that grow the array. When the array length decreases, the internal array may also shrink.

Once a JS array becomes large (this also includes holey arrays), V8 starts using a hash table to store the array elements. The array is now associated with the “slow” dictionary elements kind.

From [V8 Deep Dives] Understanding Array Internals

We can manipulate arrays in various ways. Here are a few examples:

push method adds an element to the end of the array
unshift method adds an element to the beginning of the array
pop method removes the last element of the array
shift method removes the first element of the array
splice method removes or adds elements to the array at a specific index

Let’s Implement basic Array class in js

class MyArray {
  constructor() {
    this.length = 0
    this.data = {}
  }

  get(index) {
    return this.data[index]
  }
  push(item) {
    this.data[this.length] = item
    this.length++
    return this.length
  }
  pop() {
    let lastItem = this.data[this.length - 1]
    delete this.data[this.length - 1]
    this.length--
    return lastItem
  }
  delete(index) {
    this.shiftItems(index)
    delete this.data[this.length - 1]
    this.length--
  }
  shiftItems(index) {
    for (let i = index; i < this.length - 1; i++) {
      this.data[i] = this.data[i + 1]
    }
  }
}

const newarr = new MyArray()
newarr.push("Hi") //1
newarr.push("fiji") //2
newarr.push("you") //3
newarr.push("me") //4
newarr.delete(2) //3
newarr.get(2) //me
console.log(newarr) //{ length: 3, data: { '0': 'Hi', '1': 'fiji', '2': 'me' } }

Algorithms implemented using Arrays

Sorting

Sorting is a common operation in competitive programming. Sorting an array can make it easier to search for a specific element or to find the minimum or maximum element. There are many different sorting algorithms to choose from, including

Selection Sort
Bubble Sort
Insertion Sort
Merge Sort
Quick Sort

Searching

Linear search and binary search are two algorithms that can be used to search for a specific element in an array.

Linear search is a simple algorithm that involves iterating through the array element by element and comparing each element to the target element. If the target element is found, the search is complete. If the target element is not found, the search continues until the end of the array is reached. Linear search has a time complexity of O(n), where n is the size of the array. This means that the time taken by the algorithm increases linearly with the size of the array.

Binary search is a more efficient algorithm that can be used to search for an element in a sorted array. It works by dividing the array in half and comparing the target element to the middle element. If the target element is less than the middle element, the search continues in the left half of the array. If the target element is greater than the middle element, the search continues in the right half of the array. This process is repeated until the target element is found or it is determined that the element is not present in the array. Binary search has a time complexity ofO(log n), which means that the time taken by the algorithm increases logarithmically with the size of the array.

Techniques used to solve problems using Arrays

Prefix sums:

Prefix sums are a technique that can be used to quickly find the sum of a range of elements in an array. They work by storing the cumulative sum of the elements in the original array in a new array. For example, if the original array is [1, 2, 3, 4], the prefix sum array would be [1, 3, 6, 10]. Here is an example of how you might implement prefix sums in JavaScript:

function prefixSums(array) {
  let prefixSumArray = [array[0]]
  for (let i = 1; i < array.length; i++) {
    prefixSumArray[i] = prefixSumArray[i - 1] + array[i]
  }
  return prefixSumArray
}

let array = [1, 2, 3, 4]
let prefixSumArray = prefixSums(array)
console.log(prefixSumArray) // Output: [1, 3, 6, 10]

You can then use the prefix sum array to quickly find the sum of a range of elements in the original array. For example, to find the sum of the elements in the range [1, 3] (i.e., the sum of the second, third, and fourth elements in the array), you can use the following code:

let startIndex = 1
let endIndex = 3
let sum = prefixSumArray[endIndex] - prefixSumArray[startIndex - 1]
console.log(sum) // Output: 9

Prefix sums have a time complexity of O(n) and require O(n) additional space to store the prefix sum array. They are useful for quickly answering queries about ranges of elements in an array, and they can be especially useful in dynamic programming problems where you need to perform repeated queries on the same array.

Here are a few examples of Leetcode problems where prefix sums can be used to efficiently find the solution:

Subarray Sum Equals K: Given an array of integers and a target sum, find the number of contiguous subarrays whose sum is equal to the target sum.
Minimum Size Subarray Sum: Given an array of n positive integers and a positive integer s, find the minimal length of a contiguous subarray of which the sum ≥ s. If there isn’t one, return 0 instead.
Range Sum Query - Mutable: Given an integer array nums, you are allowed to perform the following operations: sumRange(i, j): Returns the sum of the elements in nums between indices i and j (i ≤ j), inclusive. update(i, val): Modifies nums by updating the element at index i to val.
Number of Subarrays with Bounded Maximum: We are given an array A of positive integers, and two positive integers L and R. Return the number of (contiguous, non-empty) subarrays such that the value of the maximum array element in that subarray is at least L and at most R.
Subarray Product Less Than K: Your are given an array of positive integers nums. Count and return the number of (contiguous) subarrays where the product of all the elements in the subarray is less than k.

In all of these problems, prefix sums can be used to efficiently find the sum or product of a range of elements in the array, which can then be used to solve the problem.

Two pointer technique:

The two pointer technique is a technique that involves using two pointers to iterate through an array and perform some operation on the elements. It is often used to solve problems that involve finding a pair of elements that meet some condition or to find the maximum or minimum of a contiguous subarray.

Here is an example of how the two pointer technique might be used to find the maximum sum of a contiguous subarray in an array:

function maxSumSubarray(array) {
  let maxSum = 0
  let start = 0
  let end = 0
  let currentSum = 0
  while (end < array.length) {
    currentSum += array[end]
    if (currentSum > maxSum) {
      maxSum = currentSum
      start = start
      end = end
    } else if (currentSum < 0) {
      currentSum = 0
      start = end + 1
    }
    end++
  }
  return maxSum
}

let array = [2, -3, 4, -1, -2, 1, 5, -3]
let maxSum = maxSumSubarray(array)
console.log(maxSum) // Output: 7

In this example, the two pointers start and end are used to mark the start and end of the current contiguous subarray. The currentSum variable is used to store the sum of the elements in the current subarray. The algorithm iterates through the array, adding each element to the currentSum and updating the maxSum and start and end pointers as necessary.

The two pointer technique can be very useful for solving problems that involve finding pairs of elements or subarrays that meet certain conditions. It is often used in competitive programming and can be an efficient way to solve certain types of problems.

Here are a few examples of Leetcode problems where two pointers technique can be used to efficiently find the solution:

Two Sum: Given an array of integers, return indices of the two numbers such that they add up to a specific target.
3Sum: Given an array nums of n integers, are there elements a, b, c in nums such that a + b + c = 0? Find all unique triplets in the array which gives the sum of zero.
Container With Most Water: Given n non-negative integers a1, a2, …, an, where each represents a point at coordinate (i, ai). n vertical lines are drawn such that the two endpoints of line i is at (i, ai) and (i, 0). Find two lines, which together with x-axis forms a container, such that the container contains the most water.
Valid Palindrome: Given a string, determine if it is a palindrome, considering only alphanumeric characters and ignoring cases.
Reverse String: Write a function that reverses a string. The input string is given as an array of characters char[].

Do not allocate extra space for another array, you must do this by modifying the input array in-place with O(1) extra memory.

In all of these problems, the two pointer technique can be used to efficiently iterate through the array and perform some operation on the elements, such as comparing them to a target value or checking for palindromicity.

Sliding window:

The sliding window technique is a technique that involves maintaining a window of elements in an array and sliding it along the array to perform some operation on the elements in the window. It is often used to solve problems that involve finding the maximum or minimum of a contiguous subarray or finding the number of elements that meet some condition.

Here is an example of how the sliding window technique might be used to find the maximum sum of a contiguous subarray of size k in an array:

function maxSumSubarray(array, k) {
  let maxSum = 0
  let currentSum = 0
  for (let i = 0; i < k; i++) {
    currentSum += array[i]
  }
  maxSum = currentSum
  for (let i = k; i < array.length; i++) {
    currentSum += array[i] - array[i - k]
    maxSum = Math.max(maxSum, currentSum)
  }
  return maxSum
}

let array = [2, -3, 4, -1, -2, 1, 5, -3]
let maxSum = maxSumSubarray(array, 3)
console.log(maxSum) // Output: 7

In this example, the sliding window is represented by the currentSum variable, which stores the sum of the elements in the current window. The algorithm iterates through the array, adding each element to the currentSum and subtracting the element that is being removed from the window. The maxSum variable is used to store the maximum sum of all the windows.

The sliding window technique can be very useful for solving problems that involve finding the maximum or minimum of a contiguous subarray or the number of elements that meet a certain condition. It is often used in competitive programming and can be an efficient way to solve certain types of problems.

Here are a few examples of Leetcode problems where the sliding window technique can be used to efficiently find the solution

Minimum Window Substring: Given a string S and a string T, find the minimum window in S which will contain all the characters in T in complexity O(n).
Longest Substring Without Repeating Characters: Given a string, find the length of the longest substring without repeating characters.
Find All Anagrams in a String: Given a string s and a non-empty string p, find all the start indices of p’s anagrams in s.
Longest Substring with At Most Two Distinct Characters: Given a string s , find the length of the longest substring t that contains at most 2 distinct characters.
Sliding Window Maximum: Given an array nums, there is a sliding window of size k which is moving from the very left of the array to the very right. You can only see the k numbers in the window. Each time the sliding window moves right by one position. Return the max sliding window.

In all of these problems, the sliding window technique can be used to efficiently iterate through the array or string and perform some operation on the elements in the window.

2D Array:

The 2D array technique is a technique for working with two-dimensional arrays, which are arrays that have rows and columns. 2D arrays are commonly used to store and manipulate data in a variety of contexts, such as image processing, data analysis, and competitive programming.

There are many algorithms and techniques that can be used to work with 2D arrays, including looping through the elements of the array, rotating the array, finding the maximum or minimum of a submatrix, and using prefix sums to find the sum of a range of elements.

To use the 2D array technique effectively, it is important to have a good understanding of how 2D arrays work and how to manipulate them. This may involve understanding how to access and modify elements of the array, how to iterate through the elements of the array, and how to use algorithms and techniques to perform operations on the elements of the array.

Overall, the 2D array technique is a powerful tool for working with data and solving problems in a variety of contexts, and it is an important concept to understand for those interested in computer science and data analysis.

Here are a few examples of Leetcode problems where the 2D array technique can be used to find the solution.

Rotate Image: You are given an n x n 2D matrix representing an image. Rotate the image by 90 degrees (clockwise).
Maximal Square: Given a 2D binary matrix filled with 0’s and 1’s, find the largest square containing only 1’s and return its area.
Spiral Matrix: Given a matrix of m x n elements (m rows, n columns), return all elements of the matrix in spiral order.
Spiral Matrix II: Given a positive integer n, generate a square matrix filled with elements from 1 to n^2 in spiral order.
Set Matrix Zeroes: Given a m x n matrix, if an element is 0, set its entire row and column to 0. Do it in-place.

In all of these problems, the 2D array technique can be used to manipulate and analyze the elements of the array in order to find the solution.

Dynamic Programming:

Dynamic programming is a technique for solving problems by breaking them down into smaller subproblems and storing the results of these subproblems to avoid redundant work. It is often used to solve problems that have overlapping subproblems, such as optimization problems or problems that involve computing the same value multiple times.

Here is an example of how dynamic programming might be used to solve the Fibonacci sequence problem:

function fibonacci(n) {
  let cache = new Array(n + 1).fill(0)
  return fibonacciHelper(n, cache)
}

function fibonacciHelper(n, cache) {
  if (n === 0 || n === 1) {
    return n
  }
  if (cache[n] > 0) {
    return cache[n]
  }
  cache[n] = fibonacciHelper(n - 1, cache) + fibonacciHelper(n - 2, cache)
  return cache[n]
}

console.log(fibonacci(10)) // Output: 55

In this example, the fibonacci function uses dynamic programming to compute the nth number in the Fibonacci sequence. The fibonacciHelper function is used to compute the Fibonacci value recursively, with a cache to store the results of previous computations to avoid redundant work.

Dynamic programming can be very useful for solving problems that involve optimization or computing the same value multiple times. It is often used in competitive programming and can be an efficient way to solve certain types of problems.

Here are a few examples of Leetcode problems where dynamic programming can be used to find the solution.

Climbing Stairs: You are climbing a stair case. It takes n steps to reach to the top. Each time you can either climb 1 or 2 steps. In how many distinct ways can you climb to the top?
Maximum Subarray: Given an integer array nums, find the contiguous subarray (containing at least one number) which has the largest sum and return its sum.
Unique Paths: A robot is located at the top-left corner of a m x n grid (marked ‘Start’ in the diagram below). The robot can only move either down or right at any point in time. The robot is trying to reach the bottom-right corner of the grid (marked ‘Finish’ in the diagram below). How many possible unique paths are there?
Minimum Path Sum: Given a m x n grid filled with non-negative numbers, find a path from top left to bottom right which minimizes the sum of all numbers along its path.

5.Coin Change: You are given coins of different denominations and a total amount of money amount. Write a function to compute the fewest number of coins that you need to make up that amount. If that amount of money cannot be made up by any combination of the coins, return -1.

In all of these problems, dynamic programming can be used to break the problem down into smaller subproblems and store the results of these subproblems to avoid redundant work. This can help to improve the efficiency of the solution and make it possible to solve larger or more complex problems.

These are just a few examples of the many algorithms and techniques that are commonly used in competitive programming and that involve working with arrays.

Conclusion

Arrays are a fundamental data structure that is commonly used in competitive programming. These are some techniques and algorithms that can be used to work with arrays and solve problems efficiently, such as linear search, binary search, sorting algorithms, prefix sums, two pointer technique, sliding window technique, 2D array techniques, and dynamic programming.

To be successful in competitive programming, it is important to have a strong understanding of these techniques and be able to apply them effectively to solve problems. This may involve understanding how to access and modify elements of an array, how to iterate through the elements of an array, and how to use algorithms and techniques to perform operations on the elements of an array.

Overall, the ability to effectively work with arrays is an important skill for those interested in competitive programming and can be the key to solving a wide range of problems.

Data Structure and Algorithms with JS - Part 0

Vishal Sharma — Sat, 01 Jan 2022 12:11:44 +0000

Data structures are an essential aspect of computer science and programming. They provide a way to organize and store data in a computer so that it can be accessed and modified efficiently. In this blog, we will cover some basic concepts and common data structures that you should know as a programmer.

What is a data structure?

A data structure is a way of organizing and storing data in a computer so that it can be accessed and modified efficiently. There are many different types of data structures, each with its own set of benefits and drawbacks.

Some common data structures include arrays, linked lists, stacks, queues, trees, and graphs.

Arrays

An array is a linear data structure that stores a fixed-size sequence of elements of the same data type. The elements in an array are stored in contiguous memory locations and can be accessed using an index. Arrays are efficient for accessing and modifying elements, but they are not very flexible when it comes to inserting and deleting elements.

Linked Lists

A linked list is a linear data structure that consists of a sequence of nodes. Each node contains a value and a reference (or pointer) to the next node in the list. Linked lists are flexible because they allow you to insert and delete elements easily, but they are not as efficient as arrays for accessing and modifying elements.

Stacks

A stack is a linear data structure that follows the last-in, first-out (LIFO) principle. It has two main operations: push and pop. Push adds an element to the top of the stack, and pop removes the element from the top of the stack. Stacks are often used to implement undo/redo functionality and to evaluate expressions.

Queues

A queue is a linear data structure that follows the first-in, first-out (FIFO) principle. It has two main operations: enqueue and dequeue. Enqueue adds an element to the end of the queue, and dequeue removes the element from the front of the queue. Queues are often used to implement task scheduling and buffering.

Trees

A tree is a non-linear data structure that consists of nodes organized into a hierarchy. The top node is called the root, and the nodes below it are called child nodes. Each child node may have its own child nodes, forming a sub-tree. Trees are often used to represent hierarchical relationships and to perform operations such as searching and sorting.

Graphs

A graph is a non-linear data structure that consists of a set of vertices (or nodes) and a set of edges that connect the vertices. Graphs can be directed (where the edges have a direction) or undirected (where the edges have no direction). They are often used to represent relationships and connections between data.

Choosing the right data structure

When choosing a data structure, it’s important to consider the operations that you will be performing on the data and the efficiency of each data structure for those operations. For example, if you need to access and modify elements frequently, an array might be a better choice than a linked list. On the other hand, if you need to insert and delete elements frequently, a linked list might be a better choice.

What is an Algorithm?

As a computer programmer, it is important to understand the basics of algorithms and time space complexity. An algorithm is a set of steps that can be followed to solve a problem. It is the foundation of computer programming and is used to create software, applications, and websites.

One important aspect of algorithms is their time and space complexity, which measures how efficient an algorithm is in terms of the resources it uses. Time complexity refers to the amount of time an algorithm takes to complete its task, while space complexity refers to the amount of memory or storage space it requires.

What is Complexity Notation!?

One way to measure the efficiency of an algorithm is through the use of Big O notation. Big O notation is a way to describe the upper bound of an algorithm’s time complexity. It is typically used to describe the worst case scenario, or the maximum amount of time it will take for the algorithm to run.

For example, if an algorithm has a time complexity of O(n), this means that the time it takes to run will increase linearly with the size of the input (n). An algorithm with a time complexity of O(n^2) means that the time it takes to run will increase with the square of the size of the input.

Other common notations for time complexity include Omega notation (Ω), which describes the lower bound of an algorithm’s time complexity, and Theta notation (Θ), which describes both the upper and lower bounds of an algorithm’s time complexity.

Here is a table comparing the different notations:

Notation	Meaning
O	Upper bound
Ω	Lower bound
Θ	Both upper and lower bounds

There are several different types of time and space complexity cases.

The most common ones are:

O(n) - This type represents the linear time complexity of an algorithm, where n is the size of the input data. An algorithm with an O(n) time complexity means that the time it takes to complete the task increases linearly with the size of the input data.

O(1) - O(1) time complexity is considered the best possible time complexity. This represents a constant time complexity, meaning that the time it takes to complete the task does not depend on the size of the input data.

O(log n) - This type represents a logarithmic time complexity, meaning that the time it takes to complete the task increases logarithmically with the size of the input data.

O(n log n) - This type represents a time complexity that is a combination of linear and logarithmic.

O(n^2) - This type represents a quadratic time complexity, meaning that the time it takes to complete the task increases exponentially with the size of the input data.

Big-O Complexity Chart: http://bigocheatsheet.com/

In general, we want to choose algorithms with the lowest possible time complexity. However, it’s important to keep in mind that time complexity is just one factor to consider when choosing an algorithm. Other factors, such as the simplicity of the algorithm and the amount of space it requires, may also be important considerations.

Overall, understanding algorithm and time space complexity is crucial for choosing the most efficient solution to a problem. By using the different types and understanding their meanings, we can better evaluate the efficiency of different algorithms and choose the one that best fits our needs.

Basics of Markdown - Syntax and Examples

Vishal Sharma — Sun, 28 Nov 2021 12:11:44 +0000

Markdown is a lightweight markup language that is used to format text on the web. It was created in 2004 by John Gruber, a software developer, and Aaron Swartz, an internet activist, as a way to write and format text in a simple and straightforward manner.

Markdown is written in plain text, which means you can use any text editor to write in it. It uses a set of special characters and symbols to indicate formatting, such as bold, italic, and headers. This makes it easy to read and write, as you don’t have to use complex formatting tools or HTML tags.

Here is a table of the most common Markdown syntax:

Syntax	Description
#	Denotes a heading. The number of `#` symbols indicates the heading level (e.g. # is a top-level heading, `##` is a second-level heading, etc.)
* , -	Denotes a bullet point in a list.
1.	Denotes a numbered list.
text	Denotes a link. The `text` is the text that will be displayed, and the `url` is the link destination.
text	Denotes bold text.
_text_ , *text*	Denotes italic text.
>	Denotes a blockquote.
**

code

** | Denotes a code block. Anything between the backticks will be formatted as code. |
| | Denotes an image. The alt text is a description of the image, and the image url is the location of the image. |
| ___ | Denotes an horizontal Line |

Here are some examples of how these syntax elements can be used in Markdown:

# Heading Level 1
## Heading Level 2
### Heading Level 3
#### Heading Level 4
##### Heading Level 5
###### Heading Level 6

* Bullet point 1
* Bullet point 2
* Bullet point 3

1. Numbered list item 1
2. Numbered list item 2
3. Numbered list item 3

---
horizontal line

- Unordered List item 1
- Unordered List item 2
- Unordered List item 3

[Link example](http://example.com)
![alt text](https://images.unsplash.com/photo-1541364983171-a8ba01e95cfc?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=387&q=80)

**Bold text**

*Italic text*

> Blockquote

`Single line of code`

Multiline of code
Next line
Last line

Preview of above markdown

Heading Level 1

Heading Level 2

Heading Level 3

Heading Level 4

Heading Level 5

Heading Level 6

Bullet point 1
Bullet point 2
Bullet point 3

Numbered list item 1
Numbered list item 2
Numbered list item 3

horizontal line

Unordered List item 1
Unordered List item 2
Unordered List item 3

Link example

Bold text

Italic text

Blockquote

Single line of code

Multiline of code
Next line
Last line

As you can see, Markdown is a simple and easy-to-use language that allows you to format text for the web without the need for complex tools or HTML tags. It is widely used in blogging platforms, online forums, and even in version control systems like Git.

Checkout my markdown previewer project

Hiding an Element with CSS: Display vs Visibility vs Opacity

Vishal Sharma — Fri, 17 Sep 2021 12:11:44 +0000

CSS offers various ways to hide elements on a web page, but it’s important to understand the differences between them in order to choose the right one for your specific use case. In this blog post, we will explore the display: none, visibility: hidden, and opacity: 0 properties and how they can be used to hide elements.

Here’s a quick comparison table:

Property	Description	Collapses	Events	Tab Order	Animatable
display: none	Hides an element and takes up no space in the layout	✅	❌	❌	❌
visibility: hidden	Hides an element but takes up space in the layout	❌	❌	❌	❌
opacity: 0	Makes an element fully transparent but still takes up space in the layout	❌	✅	✅	✅

display: none

The display property determines how an element is displayed on the web page. The none value completely removes the element from the document, including all its children. This means that the element will not take up any space on the page and will not be visible to the user.

.toggle {
  display: none;
}

One important thing to note about display: none is that it not only hides the element, but it also removes it from the document entirely. This means that any events or interactions associated with the element will no longer work. For example, if the element is a button that triggers an action when clicked, that action will no longer be triggered when the button is hidden usingdisplay: none.

visibility: hidden

Unlike display: none, the visibility: hidden property does not remove the element from the document. Instead, it only hides the element and leaves empty space where the element would have been.

.toggle {
  visibility: hidden;
}

This can be useful in cases where you want to hide an element but still want to preserve its layout and keep its space on the page. For example, if you have a navigation menu with multiple items and you want to hide one of the items temporarily, using visibility: hidden will allow you to keep the layout of the menu intact.

opacity: 0

The opacity property determines the transparency of an element. A value of 0 means that the element is completely transparent and not visible to the user.

.toggle {
  opacity: 0;
}

Like visibility: hidden, opacity: 0 does not remove the element from the document. It only makes the element transparent, so it will still take up space on the page and any events or interactions associated with the element will still work.

Choosing the right property

When it comes to hiding elements, you should choose the right property based on your specific needs. Here are some general guidelines to help you make the right decision:

If you want to completely remove the element from the document and change layout, use display: none.
If you want to hide the element but preserve its layout and space on the page, use visibility: hidden.
If you want to hide the element but still allow it to interact with the user, use opacity: 0.

It’s important to note that these properties can be used in combination with each other, depending on your needs. For example, you can use opacity: 0 to make an element transparent and visibility: hidden to hide it, or you can use display: none to remove an element from the document and opacity: 0 to make it transparent. This is useful when you are adding a complex animation using keyframes and need to have different behaviors in animation cycle.

Conclusion

In conclusion, the display:none, visibility:hidden, and opacity:0 CSS properties are all useful for hiding elements on a webpage. display:none completely removes the element from the page, while visibility:hidden and opacity:0 only hide the element but still take up space on the page. It’s important to consider which one is most appropriate for the specific situation, as they can affect the layout and functionality of the page in different ways. Understanding and utilizing these properties can help create a more polished and visually appealing website.

CSS Pre Processors- SASS

Vishal Sharma — Sun, 15 Aug 2021 12:11:44 +0000

CSS preprocessors are tools that allow you to write more efficient and maintainable CSS code. They extend the capabilities of plain CSS by adding features such as variables, mixins, and functions, which can help you write more modular and scalable stylesheets.

There are several popular CSS preprocessors available, including Sass, Less, and Stylus. In this blog, we’ll take a look at Sass and provide some examples of how it can be used to make your CSS more efficient and maintainable.

What is Sass?

Sass (short for Syntactically Awesome Stylesheets) is a CSS preprocessor that adds features such as variables, mixins, and functions to CSS. It is written in Ruby, but can be used with any project regardless of the programming language being used. Sass files have a .scss extension and are compiled into regular CSS files that can be used in any web project.

Why use Sass?

There are several benefits to using Sass in your web projects:

Maintainability

Sass allows you to use variables and mixins, which can make your CSS code more maintainable by allowing you to define styles in a single place and reuse them throughout your stylesheets. This can help reduce duplication and make it easier to update your styles in the future.

Modularity

Sass allows you to use import statements to split your stylesheets into smaller, more manageable files. This can make it easier to organize your code and keep your stylesheets organized and easy to read.

Functionality

Sass adds features such as functions and operators, which can help you write more efficient and powerful stylesheets. For example, you can use functions to perform calculations and generate styles dynamically, or use operators to concatenate strings or perform other operations.

How to use Sass

To use Sass in your project, you’ll need to install a Sass compiler. There are several options available, including the command-line sass compiler, preprocessor plugins for popular text editors, and compilers like dart-sass to integrate with build tools like webpack.

Once you have a Sass compiler installed, you can start using Sass in your project by creating .scss files and using the @import directive to include them in your main stylesheet.

Here’s an example of how you might use Sass in a project (We will be using scss syntax in this blog to write sass code):

// Define a variable for the primary color
$primary-color: #333;

// Define a mixin for reusable styles
@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  -ms-border-radius: $radius;
  border-radius: $radius;
}

// Use the mixin and the variable in your styles
.btn {
  background-color: $primary-color;
  @include border-radius(5px);
}
// when this Sass code is compiled, it will output the following CSS:
.btn {
  background-color: #333;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  border-radius: 5px;
}

As you can see, Sass allows you to use variables and mixins to make your CSS more maintainable and efficient. There are many more features available in Sass, including functions, operators, and control directives such as @if, @else, @while, @for, @each.

Conditional Execution @if

As you’d expect, the Sass @if directive and its companions @else if and @else, allow you to include Sass code in the CSS output only if certain conditions are met. The basic syntax is simple:

$age: 27;

.bg-color {
  @if $age < 18 {
    background-color: red;
  } @else if $test == 18 {
    background-color: blue;
  } @else {
    background-color: green;
  }
}
// when this Sass code is compiled, it will output the following CSS:
.bg-color {
  background-color: green;
}

Conditional Looping - @while

As its name implies, the @while directive will continue to output CSS produced by the statements while the condition returns true.

$font-size: 1;

@while $font-size < 4 {
  .font-size-#{$font-size} {
    font-size: #{$font-size}rem;
  }
  $font-size: $font-size + 1;
}
// when this Sass code is compiled, it will output the following CSS:
.font-size-1 {
  font-size: 1rem;
}
.font-size-2 {
  font-size: 2rem;
}
.font-size-3 {
  font-size: 3rem;
}

⚠️ Heads up! Although@while is necessary for a few particularly complex stylesheets, you’re usually better of using either @each or @for if either of them will work. They’re clearer for the reader, and often faster to compile as well.

Unconditional Looping @for

You can use the @for directive to execute a group of statement a specific number of times. It has two variations. The first, which uses the through keyword, executes the statements from to , inclusive and replacing the through keyword with to makes the loop exclusive, that is, it will not be executed when the variable is equal to :

@for $i from 1 through 4 {
  .font-size-#{$i} {
    font-size: #{$i}rem;
  }
}
// when this Sass code is compiled, it will output the following CSS:
.font-size-1 {
  font-size: 1rem;
}
.font-size-2 {
  font-size: 2rem;
}
.font-size-3 {
  font-size: 3rem;
}
.font-size-4 {
  font-size: 4rem;
}

@for $i from 1 to 4 {
  .font-size-#{$i} {
    width: 2px * $i;
  }
}
// when this Sass code is compiled, it will output the following CSS:
.font-size-1 {
  font-size: 1rem;
}
.font-size-2 {
  font-size: 2rem;
}
.font-size-3 {
  font-size: 3rem;
}

Map through list or map @each

Finally, the @each directive will execute a set of items in either a list or a map. For such a powerful structure, the syntax is quite straightforward:

//List
$align: (left, right, center);
@each $direction in $align {
  .text-#{$direction} {
    text-align: $direction;
  }
}
// when this Sass code is compiled, it will output the following CSS:
.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

.text-center {
  text-align: center;
}

//Map
$font-map: (
  xs: 12px,
  sm: 14px,
  md: 16px,
  lg: 18px,
  xl: 24px,
);

@each $key, $value in $font-map {
  .text-#{$key} {
    font-size: $value;
  }
}

// when this Sass code is compiled, it will output the following CSS:
.text-xs {
  font-size: 12px;
}

.text-sm {
  font-size: 14px;
}

.text-md {
  font-size: 16px;
}

.text-lg {
  font-size: 18px;
}

.text-xl {
  font-size: 24px;
}

Functions & Mixins

SCSS also supports functions and mixins.

Functions

Functions allow you to perform operations on values and return a result. For example, you can use the darken function to reduce the lightness of a color by a given percentage:

color: darken(#ff0000, 20%);

SCSS also have a number of built-in modules with functions for working with values and styles. Here are some examples of the types of functions that are available in SCSS:

color module. Some functions from color module are:
- rgb(): The rgb() function allows you to specify a color using the red, green, and blue channels.
- opacify(): The opacify() function increases the opacity of a color.
- transparentize(): The transparentize() function decreases the opacity of a color.
- lighten(): The lighten() function increases the lightness of a color by a given percentage.
- darken(): The darken() function decreases the lightness of a color by a given percentage.
- saturate(): The saturate() function increases the saturation of a color by a given percentage.
- desaturate(): The desaturate() function decreases the saturation of a color by a given percentage.
- grayscale(): The grayscale() function converts a color to grayscale.
- complement(): The complement() function returns the complement of a color.
math module. Some functions from math module are:
- abs(): The abs() function returns the absolute value of a number. width: abs(-100px); // 100px
- ceil(): The ceil() function returns the smallest integer that is greater than or equal to a number. width: ceil(99.5px); // 100px
- floor(): The floor() function returns the largest integer that is less than or equal to a number. width: floor(99.5px); // 99px
- max(): The max() function returns the maximum value in a list of numbers. width: max(100px, 200px, 300px); // 300px
- min(): The min() function returns the minimum value in a list of numbers. width: min(100px, 200px, 300px); // 100px
- percentage(): The percentage() function converts a number to a percentage. width:percentage(math.div(100px, 50px)); // 200%
string module. Some functions from string module are:
- unquote(): The unquote() function removes quotes from a string.
- quote(): The quote() function adds quotes to a string.
- str-length(): The str-length() function returns the length of a string. width: str-length("Hello, world!"); // 13
- to-upper-case(): The to-upper-case() function converts a string to uppercase.
- to-lower-case(): The to-lower-case() function converts a string to lowercase.
list module. Some functions from list module are:
- length(): The length() function returns the length of a list.
```
$list: 1px 2px 3px;
width: length($list); // 3
```
- nth(): The nth() function returns the nth element of a list.
```
$list: 1px 2px 3px;
width: nth($list, 2); // 2px
```
- join(): The join() function concatenates two lists.
```
$list1: 1px 2px;
$list2: 3px 4px;
width: join($list1, $list2); // 1px 2px 3px 4px
```
- append(): The append() function adds an element to the end of a list.
```
$list: 1px 2px;
width: append($list, 3px); // 1px 2px 3px
```
map module. Some functions from map module are:
- map-get(): The map-get() function retrieves the value for a given key in a map.
- map-merge(): The map-merge() function merges two maps together. If the maps have overlapping keys, the values from the second map will overwrite the values from the first map.
- map-remove(): The map-remove() function removes a key-value pair from a map.

Mixins

Mixins, on the other hand, allow you to define a set of styles that can be reused throughout your stylesheet. For example, you might define a mixin for a common button style:

@mixin button {
  font-size: 16px;
  color: #fff;
  background-color: #000;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

You can then use the mixin in your stylesheet by including it using the @include directive:

.btn {
  @include button;
}

Mixins can also accept arguments, allowing you to customize the styles that are included. For example:

@mixin button($color) {
  font-size: 16px;
  color: #fff;
  background-color: $color;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.btn {
  @include button(#000);
}

Overall, functions and mixins are powerful features of SCSS that allow you to write more efficient and maintainable stylesheets. By using these features, you can write code that is easier to read and understand, and that can be easily reused throughout your application.

DEV Community: Vishal Sharma

Creating a Custom Hook in React

What are Hooks?

What is a custom hook?

Solid JS vs React JS. What is Better?

So what is SolidJS?

A Brief Comparison

Starting a new project

Creating a new ReactJS project

Creating a new SolidJS project

Component Structure

State Management

State Management in ReactJS

State Management in SolidJS

Side Effects

Memoization

memo

useCallback

useMemo

SolidJS createMemo

Is SolidJS Better Than ReactJS?

7 ways to generate a react project

So let’s start with what’s React?

In this article

1. Nothing but React

2. From Scratch (Without any tooling)

3. Next.js

4. Gatsby

How to start?

Why Gatsby?

5. Remix.run

6. Create React App

7. Vite

Why Vite is fast

Creating a Project with Vite

Conclusion

Create React project without CRA(or any build tool)

But why? Can’t we use CRA or other similar tools.

Before we start

Installing Node.js

IDE

Let’s Start

Now we need to have a way to copy static assets like fonts and images to the bundle folder

At last

What Next

Data Structure and Algorithms with JS - Part 4 : Tree

There are several types of tree data structures, each with its own characteristics and use cases:

Binary Search Tree Implementation using JavaScript

Some common applications of tree data structures include:

Hierarchical data representation:

Decision making:

Web navigation:

Searching and sorting:

Network routing:

Parsing:

Here are some tree data structure problems from LeetCode

Data Structure and Algorithms with JS - Part 3 : Stack and Queue

Stack

Queue

Conclusion

Data Structure and Algorithms with JS - Part 2 : Linked List

Here is an example of a simple linked list implementation in JavaScript:

Singly linked list:

Doubly linked list:

Circular linked list:

Skip list:

XOR linked list:

Conclusion

Data Structure and Algorithms with JS - Part 1 : Arrays

We can manipulate arrays in various ways. Here are a few examples:

Let’s Implement basic Array class in js

Algorithms implemented using Arrays

Sorting

Searching

Techniques used to solve problems using Arrays

Prefix sums:

Two pointer technique:

Sliding window:

2D Array:

Dynamic Programming: