manage the large code

Palash Gupta — Sat, 17 Jul 2021 17:45:47 +0000

When we are working on project there are some code which kept on re-using.

So we make a function out of it. let's say we want to convert a number into the currency

const numberWithCurrencyAndComma = (number: number): string => {
  return number.toLocaleString('en-IN', {
    currency: 'INR',
    currencyDisplay: 'symbol',
    minimumFractionDigits: 0,
    style: 'currency',
  })
}

and generally, with this, we try to keep this function in the lib/utils so we can import and use this function whenever we want

that's how the beauty of the pure function 😍

but let's say there is a another project and we want to get the same result then sharing the code would be the better approach as a module which rushjs helps managing the code better

so let's try our hands dirty

npm install -g @microsoft/rushjs

mkdir rush
cd rush
rush init

This will configure the basic intial setup for our monorepo config

i am using pnpm (verify with this with rush.json) so start setting up different projects

mkdir apps
yarn create react-app my-app --template typescript

and add this project to rush by adding to the rush.json under projects

{
      "packageName": "my-app",
      "projectFolder": "apps/my-app"
}

then under the project root run this commands

rush update

this will link all the projects to the rush and install all the dependencies

now let's make the sharable code to this project

mkdir utils
cd utils
npx tsdx create lib

this will prompt you to choose

basic
react
react-with-storybook

let's choose basic this will configure the basic boilerplate.

and add this project to the rush.json

{
      "packageName": "@utils/lib",
      "projectFolder": "utils/lib"
}

now try to run this command one more time

rush update --purge

Note: if there is an permission issue try to run this command with sudo

Now it's the time link the package to our own react app

rush add -p @utils/lib

now you can import the function

import { numberWithCurrencyAndComma } from "@utils/lib";

This how we manage project with single one manager
let me know down in the comments about your thoughts 😄

Here is link for the sample repo https://github.com/palashgdev/rushjs

Lazy loading image

Palash Gupta — Sat, 30 Jan 2021 16:35:17 +0000

Have you ever wondered what type of magic shows in the platform like Medium to render the image

First, the image is blurred and after sometime image, the whole image is loaded

How this is happing ????

Two images are being rendered the first one with low-resolution but with the exact width and height of the original image, and in parallel, we are loading the original image with full resolution and when the images are loaded, the low-resolution image is replaced with the full resolution image

TADA...

but let's hold for a sec how we can achieve this one in code

import { useEffect, useState } from 'react'

const useLazyImage = (src: string): useLazyImageProps => {
  const [sourceLoaded, setSourceLoaded] = useState<string | null>(
    null,
  )
  const [loading, setLoading] = useState<boolean>(true)

  useEffect(() => {
    const img = new Image()
    img.src = src
    img.onload = () => {
      setLoading(false)
      setSourceLoaded(src)
    }

    return () => {
      img.remove()
    }
  }, [src])

  return {
    loading,
    src: sourceLoaded,
  }
}

interface useLazyImageProps {
  loading: boolean
  src: null | string
}

export default useLazyImage

there are a hell of a lot of things that are going on here let go through one by one

useLazyImage is a hook that accepts the address of the full resolution image and returns the loading true/false and src

while mounting the component it creates the img element with the address of the image and when the image finishes it loading we set the loading to false via onLoad event and remove the img node on un-mounting the node.

is-it simple

Let me know down in the comments

DEV Community: Palash Gupta

manage the large code

Lazy loading image