DEV Community: Tirth Patel

Python Portfolio - Dynamic Invitation Image Generator

Tirth Patel — Sun, 19 Mar 2023 18:02:54 +0000

Whenever you are host of any event, sending invitations to your near & dear ones is major task. And sometimes tedious also if your guest count is big. 😣

Suppose, you plan to send a personalized invitation to each member that includes his/her name on it. This will need you a graphic designer who can sit all day long and can generate such personalized invitation posters with dynamic name on each. ⌨️

To solve your issue, I have made a tool in Python that leverages the power of OpenCV to implement image processing on a invitation poster. It can embed name (or any detail) on image and give you a separate poster for each invitee. 🕺

How to use the tool

Here is a simple outline which you can follow:

Let's take example of Birthday Invitation to understand the execution of this tool.
Source code : Github Repo Link

1) Providing necessary details:

You will have to give 2 details viz. invitation poster image (jpg/png/jpeg) and list of names (text file)

Sample birthday invitation poster:
(you need to put this image in code folder)

List of invitee names:

Mr. Tirth Patel
Ms. Sneha Shah
Mr. Bhavesh Jain
Mr. Rahul Singh
Mr. Rushi Patel
Mrs. Kavita Ahuja

2) Selecting location co-ordinates for where to put name.

You need select the location co-ordinates on the image at which you want to put the name of the invitee.
In the code folder, please open select_coordinate.py file and update the filename of invitation image which you are using.
Once you run it, double click on the image where you want to put the name. This can be trail & error excercise. Iterating this process 2-3 times will give you exact location you want.

3) Hurrah! Lets generate personalized invitation for all

Now we have image, names and co-ordinates where to put the name.
Open generate_invitation.py file and update the filename which you are going to use.
Execute this python script in your IDE and you can see, personalized invitation is generated for all the invitees. (check the outputs folder)

Scope of this tool 🚀

As of now, this tool only supports name on an Invitation poster. But the core concept is image processing. You can use it for multiple use cases. Like certificate generation, name tag generation, ID card generator and many more.
Due to time constraints, I have limited the development scope to Python only. If you need some web app for this, please ping me in comment section.
After Invitation generation, sending these personalized invitation is also a mammoth task. If you need to send them in Whatsapp, we can use Whatsapp API provided by Facebook to automate the generation and sending process. If your use case is to send on email, we can utilize Python or any such framework to send emails with the generated output.

Closing comments 🙋‍♂️

Thank you for reading along with me. If you find any queries on the topic mentioned above, please ping me in the comments. 💬
Knowledge spreads by sharing. So please share this article with your concerned friends. 📱
PS: Also, I humbly request you to write which topic you want in my next blog. I will include that in my target list. 🎯

Tirth Patel, signing off!🫡

5 ways to make React app super fast 🚀

Tirth Patel — Sat, 11 Mar 2023 02:06:00 +0000

Are you struggling to make your gigantic react app more efficient in terms of Performance? ⚡

Don't worry! You've landed at the right location. These 5 methods will make your slow 🐢 React app into a fast app 🐇.

For busy readers, here are the 5 methods in a nutshell.

use callback
useMemo
memoized components
Components Lazy import
Image Lazy loading

1. useCallback

When you declare a normal component, it runs each time when your component renders.
Instead of declaring a normal function in the component, wrap it with useCallback.
useCallback is a React hook that gives you a cached function. It is cached until any of its dependencies are changed.
This way you get 2 benefits. 1) On change of any of its dependencies you get a fresh function respective to that value. 2) Unnecessary function calls are reduced which in turn increases the app's performance.
Have a look at these basic conversions from normal functions to the useCallback function.

export const MyProfile: React.FC = (props) => {
  const {birthYear, name} = props

  // normal function. this is called every time component renders
  const calculateAge = () => {
    const currentYear = new Date().getFullYear()  
    return currentYear - birthYear
  }

  // efficient function. this will be called only when dependencies will be changed
  const efficientCalculateAge = useCallback(() => {
    const currentYear = new Date().getFullYear()
    return currentYear - birthYear
  }, [birthYear])

  return (
    <Fragment>
      <p>Your Age : {efficientCalculateAge()}</p>
    </Fragment>
  )
}

2. useMemo

Typically in a React component, there are more variables than functions.
Above we mentioned to cache functions. How if we can cache variables also? 🤔
Here useMemo enters your game. Just do all the computation stuff and store the value wrapped with useMemo.
Benefits of useMemo are the same as useCallback. Just the difference would be useMemo will return a variable while useCallback will return a function.
Here is how you can simply implement useMemo in your project.

export const MyCart: React.FC = (props) => {
  const {cartList} = props

  // this will be re-evaluated on every render
  const totalAmount = cartList.reduce((acc, item) => {
    return acc + item.price
  }, 0)

  // this will be re-evaluated only when cartList changes
  const efficientTotalAmount = useCallback(() => {
    return cartList.reduce((acc, item) => {
      return acc + item.price
    }, 0)
  }, [cartList])

  return (
        <Fragment>
            <p>Total cart amount : {efficientTotalAmount}</p>
        </Fragment>
    )
}

3. memoized Components

Suppose you have Profile component. It includes 5 children components. So you might have noticed that even if the props of one child component have changed, all 5 will re-render. Have you thought WHY?
It is because other children's components are not memoized.
Technically we can understand a memo as It lets you skip re-rendering a component when its props are unchanged.
It is also a kind of caching. Caching of components. Here when the parent component re-renders, it rerenders all of its children. React also does that. But if the component is memoized, React will return the unchanged cached copy of the component. This will eventually same computation time and in return, we'll get SPEED.⚡

export const MyProfile: React.FC = (props) => {
  const {userId} = props
  const [cartList, setCartList] = useState([])

  const getCartListData =useCallback(async (userId:number) => {
    return await fetch(`https://jsonplaceholder.typicode.com/users/${userId}`)
  },[])

  useEffect(() => {
    getCartListData(userId).then((data) => {
      setCartList(data)
    })
  }, [userId])

  // MyCart component will be re-rendered only when cartList changes
  return (
    <Fragment>
      <MyCart cartList={cartList} />
    </Fragment>
  )
}


export const MyCart: React.FC = memo((props) => {
  const {cartList} = props

  // this will be re-evaluated on every render
  const totalAmount = cartList.reduce((acc, item) => {
    return acc + item.price
  }, 0)

  // this will be re-evaluated only when cartList changes
  const efficientTotalAmount = useCallback(() => {
    return cartList.reduce((acc, item) => {
      return acc + item.price
    }, 0)
  }, [cartList])

  return (
        <Fragment>
            <p>Total cart amount : {efficientTotalAmount}</p>
        </Fragment>
    )
})

4. Lazy imports of components

Making a gigantic app includes hundreds of components. Some small, some big.
To load all heavy (in terms of computation) components in one go will surely impact the app's startup time.
Wise approach would be to dynamically import the components as and when required. We also call it Lazy Loading.
Suppose there is a component called <CropImage />. It has some heavy libraries used in it. We can lazily load it when the user wants to open that.

import React, {Fragment} from 'react'

// importing CropImage as a lazy component
const CropImage = React.lazy(() => import('./CropImage'))


export const MyProfile: React.FC = (props) => {
  // Using React.lazy and Suspense we can import the component only when it is needed
  const CropImageComponent = () => {
    return (
      <Suspense fallback={<div>Loading...</div>}>
        <CropImage />
      </Suspense>
    )
  }

  return (
    <Fragment>
      <CropImageComponent />
    </Fragment>
  )
}

5. Lazy loading images

Suppose any app requires 500 images in the entire project. If we load all 500 images at once, that will lead to heavy computation on the client side. (Internet required to load images etc)
In this case, I would suggest lazily load images. Only when the user comes to the respective component where that image is required, the only image is loaded not at the start of the app.
react-lazyload and react-image-lazy are some of the libraries which can make this happen.

Source : react-lazy-load-image-component

Key takeaways 📝

You shall use React hooks like useCallback and useMemo to take benefit of cached variables/functions. And get the latest update value whenever any of the dependencies are modified.
Lazy loading gigantic and complex components is a wise choice, especially for a scalable app trying to improvise a performance.
Assets such as images, videos, etc can also be used lazily as required.

Closing comments 🙋‍♂️

Thank you for reading along with me. If you find any queries on the topic mentioned above, please ping me in the comments. 💬
Knowledge spreads by sharing. So please share this article with your concerned friends. 📱
PS: Also, I humbly request you to write which topic you want in my next blog. I will include that in my target list. 🎯

Tirth Patel, signing off!🫡

Run python in HTML :

Tirth Patel — Wed, 18 Jan 2023 05:54:56 +0000

Python was the foundation of my technical career. I gained my Python skills and worked on many AI/ML projects. But when I have to show the output, I cannot run the python file for each stakeholder. There were some limitations. It needs to be contained within a product, which can be portrayed on some kind of website or mobile app.

Then, I had no idea how to build a bridge to connect these. Later, I learn about APIs (in Django/Flask) that can link my machine learning API with a web application so that users may use my API in a real sense.

But that approach seems to be lengthy as well as costly (you need to host the Python API on a cloud server).

But thanks to PYSCRIPT... 🙌

The pyscript team had brought a revolution in cross-platform connection technology.

With the help of Pyscript, you can run Python in HTML. Just you need to import a JS script via CDN. And that's it. You are ready to rock.

Get Started

The process to set up and run pyscript is very simple. Create an index.html file and paste the below code.

<!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>Python in HTML : Pyscript</title>
        <link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
    </head>
    <body>
        <h1>Python in HTML : Pyscript</h1>
        <py-script>
            print("This hello world is written in Python and rendered in HTML using Python's print()")
        </py-script>
        <script defer src="https://pyscript.net/latest/pyscript.js"></script>
    </body>
</html>

In the above code snippet you can see that, apart from the basic HTML boilerplate, we have added CSS and JS script of pyscript. And a special tag is provided by Pyscript. In which you can run Python commands.
When you will open the index.html file in the browser, you can see something similar to this:

Pre-cooked examples

Pyscript has the ability to leverage HTML benefits along with the power of Python. So you can dig deep via Pyscript Example.
Above website contains almost every segment of Pyscript from bottom to top. Starting from basic print functions to using Matplotlib and Numpy for Data Visualization.
You check each example available on the above-mentioned link. (TIP: Run Ctrl+U or Right click -> View Page Source to check the HTML and pyscript code used in the respective example). Here are some snaps of a couple of demo examples.

How extensible is Pyscript?

When Pyscript was launched, initially they have limited functionalities of Python integrated. Like REPL (Read, Eval, Print, Loop) and like that.
But today, the horizon of Pyscript is way too big. You can use many Python libraries like Time, Numpy, Matplotlib, and many others.
One of the most fascinating features which I like is the Import of external python files. It is just like importing a normal JS file in HTML and using the interwoven function of that.
Similarly, you can also write complex python logic, ML APIs, and much more in a separate file. Import them in HTML, and leverage the benefit of Python via HTML.

Closing comments 🙋‍♂️

Thank you for reading along with me. If you find any queries on the topic mentioned above, please ping me in the comments. 💬
Knowledge spreads by sharing. So please share this article with your concerned friends. 📱
PS: Also, I humbly request you to write which topic you want in my next blog. I will include that in my target list. 🎯

Tirth Patel, signing off! 🫡

MunchPay Node API - Apply semantic versioning

Tirth Patel — Thu, 01 Dec 2022 18:29:53 +0000

Recalling SemVer

A quick revision of the Semantic Version. It consists of 3 sections.

MAJOR.MINOR.PATCH

MAJOR: It represents the major version of the app. Any incompatible change, API modification, or such changes are handled under this number.

MINOR: When you add new functionality in a backward compatible manner is introduced in the product. Any improvement (like performance, optimization, etc) can be covered under this.

PATCH: As the name suggests it is reserved for bug fixes internal to the system/product. Note that these bug fixes should be backward compatible.

Let's make MunchPay API 💰

Let's make a basic payment API called as MunchPay. This API will have just 2 routes: 1) Get payment methods 2) Make payment
To get started we need to have a Node App which can serve as an API server. For sake of this blog, I've used Express JS. These are the checkpoints that should be ready to move ahead.
- Create a Node project
- Install the following npm packages: express, nodemon
- Write boilerplate for express server
- Create 1 GET route: getPaymentMethods
- Create 1 POST route: makePayment
- Update the scripts in package.json to spin up the server
You can clone this repo MunchPay API Get Started to align until this step.

Deploying dev version on public 🌐

To deploy MunchPay API, we'll use Vercel. I have mentioned a detailed guide on how to deploy the Express JS app on Vercel in this Deploy Node JS on Vercel
To shorten the length of this article we're not covering each step here.
Once API will be deployed you can see something like this. (If you don't want to deploy, running it on local server will also work)

Release the first version 1️⃣

Let's make this API public and release the first stable version.
NOTE: To declare a public API we need to maintain proper documentation of what is changed in each release.
Create a README.md file at the root of the project. This will serve as documentation of our MunchPay API. (Actual APIs use other tools like Swagger/OpenAPI etc for maintaining documentation)
Node projects give us a nice option to manage versions of our project.
Go to the root of the project in a terminal. And execute this command :

yarn version

This will show you the current version and prompt for a new version. Enter the new version as 1.0.0. As we're releasing for the first time, this will be the base version for our Public API.
You will notice that the yarn version command will also commit the version changes.

Planning new patch release 🏷️

Patch means any internal bug fixes with backward compatibility. This means this change should not break the end users' app.
You can see src/controllers/payment.js file. In this initially, we've artificially set up a bug. We're using amount value from request body for currency conversion. But validation is not done if amount is not passed in body. This is a potential bug.
Let's rectify this. Replace the function with the following function. [controllers/payment.js]

// POST /makePayment
router.post('/make-payment', (req, res) => {
    const { amount, mode } = req.body

    if (!amount) {
        return res.status(400).json({
            message: 'Amount is required',
        })
    }

    const convertedAmount = convertINRToUSD(amount)
    res.json({
        message: 'Payment Successfull ✅',
        amount: convertedAmount,
        currency: 'USD',
        mode,
    })
})

For PATCH the process can be something similar to this. Fix Bug → Increment patch version → Update documentation (README in our case) → Deploy the changes
Run

yarn version

Type version as: 1.0.1. Press enter to update the version.
Modify README.md accordingly.
Once version is updated you can ping base API to check latest API version. localhost:8080

Deploying new minor release 🔖

MINOR means any internal improvement with backward compatibility. So this change should not break the user's app.
You can perform any such change in our API. Currently, all available payment methods are static. You can call another API to fetch payment methods according to the user's region.
Once those changes are done, further process is the same as we did in deploying the PATCH version.
Modify code → Increment minor version → Update documentation (README in our case) → Deploy the changes

Publishing a major release ⭐

MAJOR means a groundbreaking change that will affect end users.
You can plan any such incompatible update in our API. Suppose you change the route name of makePayment API or you change the method of getPaymentMethods from GET to POST. (or any such change)
Once those changes are done, further process is the same as we did in deploying the PATCH version.
Modify code → Increment major version → Update documentation (README in our case) → Deploy the changes
NOTE: When we increment a major version, minor and patch values must be pointed to 0. So now your API's version will be 2.0.0.

Key takeaways 📝

We saw how to plan patch, minor and major releases based on MunchPay payment API.
Incrementing version and reflecting changes in the documentation must be done without fail for any new release (patch, minor or major)
Deploying our Node API and releasing it for public use.

Closing Comments 🙋‍♂️

Thank you for following along with me. If you find any queries on the above-mentioned topic, please ping me in the comments.
Knowledge spreads by sharing. So please share this article with your concerned friends.
PS: Also, I humbly request you to write which topic you want in my next blog. I will include that in my target list. 🎯

Tirth Patel, signing off! 🫡

4 Important Rules of Semantic Versioning

Tirth Patel — Fri, 25 Nov 2022 11:52:35 +0000

There are many things which a wise developer takes cares of. One of them is Semantic Versioning.

Before jumping onto Semantic versioning, let's consider one example:

Suppose you are developing an app named Building 🏢. While building this app, you need to integrate a third-party package called Crane 🏗️. When you installed Crane in your Building app, its version was 2.1.0. After some time you need one more package named Truck 🚚, which was having 1.1.4 version. Among these 2 packages; Crane was not following the standards of Semantic Versioning. And package Truck was appropriately following the rules of semantic versioning.

Let's pause this example here for a while and understand what is semantic versioning. At the end of article, we'll continue this example and see how Crane and Truck's releases will affect your Building app.

WHAT? ⚙️

Semantic Versioning is also called as SemVer for short notation. It is a standardized pattern to mark versions of any app, package, library, API, or any other product wherever it is applicable. (In the further article SemVer stands for Semantic Versioning)

MAJOR.MINOR.PATCH

Sample SemVer(s)

- 2.4.0 (Major: 2, Minor: 4, Patch: 0)
- 4.6.2 (Major: 4, Minor: 6, Patch: 2)

Semantic Version consists of mainly 3 parts (it may be more depending on how many levels deep you want to take it)

MAJOR: It represents the major version of the app. Any incompatible change, API modification, or such changes are handled under this number.

MINOR: When you add new functionality in a backward compatible manner is introduced in the product. Any improvement (like performance, optimization, etc) can be covered under this.

PATCH: As the name suggests it is reserved for bug fixes internal to the system/product. Note that these bug fixes should be backward compatible.

WHY? 📢

Reduce dependency hell: Suppose in an app, you have 15 dependencies of third-party packages. If those 15 packages don't follow the proper practices of SemVer then you will not know which package to update and what impact it will make on the app. At a point, you will end up in dependency hell where you will have to wait for third-party packages to update their versions in order to release your app. Practices rules of SemVer we can easily and efficiently do dependency management.
Following standards for release planning and deployments: Any release's stability and lifespan can be judged by its SemVer. For CI/CD pipelines also appropriate versioning plays a vital role.

RULES 📝

There are some standard practices that should be followed while using Semantic Versioning.

MAJOR, MINOR, PATCH must be whole numbers (0,1,2...). These should not include negative integers or decimal points.
Once version details are published for any app, they should not be altered. Version values can only be changed as a new release.
Comparing 2 SemVer must be from left to right based on the increasing value of the number. Ex : 1.0.0 < 1.1.0 < 2.0.0 < 2.0.1
Major version 0 (0.x.y) is for the development phase. During this, the app must not be considered stable.

(For more details visit semver.org)

Completing our Building App 🏢

Let's wind up our article by completing the example. We're building an app named Building. And among that; Crane was not following SemVer. The truck was following.
When you plan the release of the Building app at that time 🏗️ Crane's version -> 2.1.3 & 🚚 Truck's version -> 1.2.2. By this, we can predict that for Crane -> till version 2.x.y & Truck -> till version -> 1.p.q we can publish our app and there will be no breaking changes.
But this surety can only be assured by a package Truck and not from Crane. The reason is Crane is not following SemVer standards. So in the next release Crane -> version 2.1.5 they might introduce some breaking changes of which we're unaware.
If we're using more ill-planned packages like Crane, this can lead to dependency hell and end up in an issue for App. So be cautious to choose packages...

What about Practical ❓🤔

Too much technical jargons so far... 😅. Only theory can't be sufficient. We'll look into the practical application of SemVer by developing a Node-based MunchPay API. Where we'll check each aspect of versioning and deploying.
Stay tuned for the continued series article: Semantic Versioning in MunchPay Node API for practical exposure.

Closing comments 🙋‍♂️

Thank you for reading along with me. If you find any queries on the above-mentioned topic, please ping in the comments.
Knowledge spreads by sharing. So please share this article with concerned friends.
PS : Also, I humbly request you to write which topic you want in my next blog. I will include that in my target list. 🎯

Tirth Patel, signing off! 🫡

Deploy Node API (Express Typescript) on Vercel

Tirth Patel — Wed, 16 Nov 2022 14:12:21 +0000

A couple of weeks back, I developed an API in Node based on Typescript. I tried to deploy it on Heroku.

But the process was long and time-consuming. Also, I noticed that Heroku is terminating free accounts from 28 Nov'22. ☹️

So I tried to experiment with various other platforms to deploy my Typescript-based Node API. Amon them free, robust, and versatile platform I found is VERCEL. Based on my experience, here are a few simple steps which you can follow and easily deploy Typescript-based Node API on Vercel. 🚀

1) Express + Typescript Boilerplate App ✏️

Create express project with typescript. You can follow the below-mentioned steps to make a boilerplate for the project. (Github repo link is provided at end of article)

Initialize node project
```
npm init -y
```

Install packages (you can use npm/yarn/pnpm)

yarn add express
yarn add -D typescript
yarn add -D @types/node
yarn add -D @types/express
yarn add -D nodemon
yarn add -D ts-node

Create tsconfig.json
To work with typescript we need to make tsconfig.json file which will help to compile and build Typescript files in plain JS. Execute below command
```
npx tsc --init --rootDir src --outDir build --esModuleInterop --resolveJsonModule --lib es6 --module commonjs --allowJs true --noImplicitAny true
```

Once the file is created you can keep it as is, or cleanup non necessary stuff. Replace content of tsconfig.json with following :

    {
    "compilerOptions": {
        "module": "commonjs",
        "esModuleInterop": true,
        "allowSyntheticDefaultImports": true,
        "target": "es6",
        "noImplicitAny": true,
        "moduleResolution": "node",
        "sourceMap": true,
        "outDir": "dist",
        "baseUrl": ".",
        "paths": {
            "*": ["node_modules/*", "src/types/*"]
        }
    },
    "include": ["./src/**/*"]
    }

Update scripts in package.json
```
"start": "nodemon src/index.ts",
```

Write express server code : Create file : src/index.ts and paste following code in it

  import express, { Request, Response } from 'express'

  const app = express()
  const port = process.env.PORT || 8080

  app.get('/', (_req: Request, res: Response) => {
    return res.send('Express Typescript on Vercel')
  })

  app.get('/ping', (_req: Request, res: Response) => {
    return res.send('pong 🏓')
  })

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

Spin up server : Run yarn start or npm run start command in terminal to start express serve. You can open browser and go to localhost:8080. API will return response of Express Typescript on Vercel.

2) Initialize git in our project. 📥

Make a .gitignore file in the root of the folder. And add node_modules to it. If .gitignore file exists check that node_modules is added into it.
Execute git init in the terminal (from root of project) or you can use VS Code's source control tab to initialize git repository.
Connect local repo to remote (github/bitbucket). You can use any of the version control system to publish your repository.

3) Create Vercel project 🗃️

Go to vercel.com -> Login
Login using the Version control platform you have kept your repository.
From the dashboard -> Add new project -> Select your repository -> Deploy
Afer deployment you will see something similar to this! 😟

(ERROR 🚨)

Don't worry... Just follow on steps to fix it. 👍

4) Add Vercel config in app ⚙️

In the above step, after your fist deploy is completed, you can see that we're not getting Express Typescript on Vercel response from API.
To work this as expected, we need to tell Vercel that is a API and you need to serve this as a serverless function.
For this, simply we need to add vercel.json file in root of our project. Paste below code in file.

{
    "version": 2,
    "builds": [
        {
            "src": "dist/index.js",
            "use": "@vercel/node",
            "config": { "includeFiles": ["dist/**"] }
        }
    ],
    "routes": [
        {
            "src": "/(.*)",
            "dest": "dist/index.js"
        }
    ]
}

NOTE: Check your tsconfig.json file. The value against outDir must be kept instead of dist. If your config file has any other value than dist, replace it at either of both places.

5) Add a `pre-commit` hook 🏷️

Vercel requires plain JS source files instead of Typescript. In order to do this, we need to build the project before committing and send compiled JS files so that Vercel can parse those files and serve the API.
Install pre-commit and rimraf package :

  yarn add -D pre-commit
  yarn add -D rimraf

Modify scripts field in package.json file as follows:

  "scripts": {
  "start": "nodemon src/index.ts",
  "build": "rimraf dist && tsc",
  "ts.check": "tsc --project tsconfig.json",
  "add-build": "git add dist",
  "test": "echo \"Error: no test specified\" && exit 1"
  },

Add new field pre-commit field in package.json :

  "pre-commit": [
      "ts.check",
      "build",
      "add-build"
  ]

What this will do? → Whenever you will commit, the commands written in pre-commit will be executed. It will check Typescript errors, build the project and add build folder to the staged changes. (If you opt for manual build, don't forget to run build command to start build.)

5) Re-Deploy and Re-Check API 🔁

Commit the changes you have made and push the commit to GitHub. Check on vercel for the new deployment. Vercel will automatically trigger a new deployment on every push. Incase it is not started, you can manually start a deployment.
Once new deployment is live, you can copy the deploy URL and run in browser. You will see Express Typescript on Vercel as a API response. Hurrah 😃

To assure that API is working perfectly, you can also hit /ping route which will return pong 🏓 as the response.

Closing comments 🙋‍♂️

Thank you for following steps with me. Incase you find any issue in above mentioned steps, please ping in comment.
Also a humble request you to write which topic you want in my next blog. I will include that in my target list. 🎯
Github repo link for this project : Express Typescript Code

Tirth Patel, signing off! 🫡

Deploy Express JS (Node App) on Vercel

Tirth Patel — Wed, 09 Nov 2022 17:58:14 +0000

After Heroku announced the termination of free plans 😏, it has become need for developers to find free alternatives to Heroku for deploying apps.

While researching this, I found many options that can cater to our needs, viz. Digital Ocean, AWS, GCP, and many others. But these cloud providers need a dense setup, and the pricing is way too high.

But I have 🎁 for you…

You can deploy your Express app on Vercel for FREE. 🎉

I’ll let you know steps by which you can easily deploy Express app on Vercel. (You can start from step 2/3 if you have existing Express JS App)

PS: In this blog, especially I’m focusing on Node (Express) app. For python or other tech stacks, we can discuss it in another blog. ⌚

1) Basic Express App 📝

(if you already have one, you can skip this step. Github repo link at bottom of article)

Init Node JS app : Go to folder in which you want to create app and run following command
```
  npm init -y
```

Install packages : After app is initiated, install express package using yarn/npm
```
  yarn add express / npm install express
```

Boilerplate for Express : Create index.js file in root of the folder. And copy the below code snippet

    const express = require('express')

    const app = express()

    app.get('/', (req, res) => {
        res.send('Express JS on Vercel')
    })

    app.get('/ping', (req, res) => {
        res.send('pong 🏓')
    })

    const port = process.env.PORT || 8080

    app.listen(port, (err, res) => {
        if (err) {
            console.log(err)
            return res.status(500).send(err.message)
        } else {
            console.log('[INFO] Server Running on port:', port)
        }
    })

Update NPM scripts : Add start script in scripts object

"scripts": {
    "start": "node index.js"
}

Spin up app : Start your app by running yarn start or npm run start. Upon starting server, open browser and navigate to localhost:8080. You will get Express JS on Vercel as a response from our Express app.

2) Initialize git in our project. 💻

Make a .gitignore file in the root of the folder. And add node_modules to it. If .gitignore file exists check that node_modules is added into it.

Execute git init in the terminal (from root of project) or you can use VS Code's source control tab to initialize git repository.
Connect local repo to remote (github/bitbucket). You can use any of the version control system to publish your repository.

3) Create Vercel project 💾

Go to vercel.com -> Login
Login using the Version control platform you have kept your repository.
From the dashboard -> Add new project -> Select your repository -> Deploy

4) Add Vercel config in app ⚙️

In the above step, after your fist deploy is completed, you can see that we're not getting Express JS on Vercel response from API.
To work this as expected, we need to tell Vercel that this is an API and you need to serve this as a serverless function.

For this, simply we need to add vercel.json file in root of our project. Paste below code in file

{
    "version": 2,
    "builds": [
        {
            "src": "index.js",
            "use": "@now/node"
        }
    ],
    "routes": [
        {
            "src": "/(.*)",
            "dest": "index.js"
        }
    ]
}

NOTE: In the dest field, please put the filename which is the base entry file of your project. Suppose you have app.js as your base file you need to modify this config accordingly. Then only Vercel will know which file to serve as a base file for API execution.

5) Re-Deploy and Re-Check API 🔁

After vercel.json file is added, push these changes to git repository.

Vercel will automatically trigger a deployment when you push in your branch. If it doesn't trigger automatic deployment, you can start a manual deployment.
Once the new deployment is live, you can now see by refreshing the VERCEL deploy URL and check that now we're getting

Express JS on Vercel

as a API response.
To assure that API is working perfectly, you can also hit /ping route which will return pong 🏓 as the response.

Github Repo Link : Express JS on Vercel

How can we forget Typescript❓🤔

Stay tuned for a fresh new article on Deploying Typescript based Express App on Vercel. Coming soon...

Tirth Patel, signing off! 🫡

Create new branch from commit ID

Tirth Patel — Thu, 27 Oct 2022 06:42:52 +0000

Many times due to unwanted push/pull/merge your branch mess up with unwanted code. Some unncessary and buggy commits line up in your branch's commit history.

In this case you wish to create new branch from last correct commit.

The naive approach is to hard reset the branch to specific commit, then create a new branch. 😏

But hold on.... You can accomplish that without the resetting stuff. 😎

Voila!!

Here are the steps :

Run git log : Get the ID of commit which you want to create new branch from.
Execute git checkout -b <branch_name> <commit_id>

And there you go... 🎉

Now you have created a new branch based of the commit_id that was entered in the command.

Microfrontend

Tirth Patel — Mon, 27 Jun 2022 18:01:02 +0000

Microfronted is such a fantastic concept that can revolutionize front-end development.

The new era of web development is heading towards micro frontends. It's like breaking the big stones from the mine into small diamonds. Tech giants like Google, Facebook, etc are using this architecture for many years.

DEV Community: Tirth Patel

Python Portfolio - Dynamic Invitation Image Generator

How to use the tool

1) Providing necessary details:

2) Selecting location co-ordinates for where to put name.

3) Hurrah! Lets generate personalized invitation for all

Scope of this tool 🚀

Closing comments 🙋‍♂️

5 ways to make React app super fast 🚀

Are you struggling to make your gigantic react app more efficient in terms of Performance? ⚡

1. useCallback

2. useMemo

3. memoized Components

4. Lazy imports of components

5. Lazy loading images

Key takeaways 📝

Closing comments 🙋‍♂️

Run python in HTML :

Get Started

Pre-cooked examples

How extensible is Pyscript?

Closing comments 🙋‍♂️

MunchPay Node API - Apply semantic versioning

Recalling SemVer

Let's make MunchPay API 💰

Deploying dev version on public 🌐

Release the first version 1️⃣

Planning new patch release 🏷️

Deploying new minor release 🔖

Publishing a major release ⭐

Key takeaways 📝

Closing Comments 🙋‍♂️

4 Important Rules of Semantic Versioning

WHAT? ⚙️

WHY? 📢

RULES 📝

Completing our Building App 🏢

What about Practical ❓🤔

Closing comments 🙋‍♂️

Deploy Node API (Express Typescript) on Vercel

1) Express + Typescript Boilerplate App ✏️

2) Initialize git in our project. 📥

3) Create Vercel project 🗃️

4) Add Vercel config in app ⚙️

5) Add a pre-commit hook 🏷️

5) Re-Deploy and Re-Check API 🔁

Closing comments 🙋‍♂️

Deploy Express JS (Node App) on Vercel

1) Basic Express App 📝

2) Initialize git in our project. 💻

3) Create Vercel project 💾

4) Add Vercel config in app ⚙️

5) Re-Deploy and Re-Check API 🔁

How can we forget Typescript❓🤔

Create new branch from commit ID

Microfrontend

5) Add a `pre-commit` hook 🏷️