Forem: Shrihari Mohan

Dynamic open graph images for your website | No code using dynamicog.com

Shrihari Mohan — Sun, 13 Oct 2024 08:39:47 +0000

DynamicOG solves the hassle of creating images for your dynamic websites that contain lot of pages.

og-images are the preview images you see when you share the link in any communication channels.

og-image is added using meta tag.

<meta property="og:image" content="{{IMAGE_URL}}" />

This IMAGE_URL is the only one you should take care.

To generate docs image like this

Use the following url in your meta tags!

https://dynamicog.com/og/docs/img?
logo=https%3A%2F%2Fdynamicog.com%2Ffillers%2Fstripe-logo.png&
title=Find%20a%20guide%20to%20integrate%20Stripe's%20payments%20APIs%20%7C%20Stripe&
sub=Payments%20infrastructure%20for%20the%20internet&
name=Stripe&
website=stripe.com&
dark=true

Just change in the url dark=true to dark=false you will get this

Try with your content and logos! https://www.dynamicog.com/og/docs

Find all the templates here and its free to use!

Generate Dynamic Open Graph Images using Nextjs

Shrihari Mohan — Sun, 16 Jun 2024 17:47:27 +0000

Dynamic OG

Dynamic OG helps developers easily create og images without needing to develop their proprietary code.

It is completely free to use and a self-hosted paid version is also available. This tutorial serves as a base for Dynamic OG.

Here are some of the templates available in Dynamic OG. Get started with the Simple theme below.

All these are dynamically generated based on the queries on the url.

Use Dynamic OG for your projects/companies for free.

Getting started witht the simple theme

We're going to use nextjs and ImageResponse from next/og to create our simple images.

To create a new nextjs app

npm i create-next-app

npx create-next-app@latest

In this simple-og project we're going to use App Router. You can also find the github repo at the bottom of the blog.

✔ What is your project named? … simple-og
✔ Would you like to use TypeScript? … No / Yes
✔ Would you like to use ESLint? … No / Yes
✔ Would you like to use Tailwind CSS? … No / Yes
✔ Would you like to use `src/` directory? … No / Yes
✔ Would you like to use App Router? (recommended) … No / Yes
✔ Would you like to customize the default import alias (@/*)? … No / Yes
Creating a new Next.js app in /Users/shrihari/testRepos/simple-og.

npm install @vercel/og

Inside your app folder create 2 files.

cd simple-og/src/app 
touch Simple.tsx
touch img/route.tsx

In the Simple.tsx file. You have to be picky with the css as the ImageResponse supports only certain types of styles.

type TSimpleTemplate = { title: string , website: string }

export function SimpleTemplate({ t }: { t: TSimpleTemplate }) {
  return (
    <div
      style={{
        background: '#f8fafc',  color: '#334155',
        width: '100%', height: '100%',
        display: 'flex',  alignItems: 'center', 
        justifyContent: 'center', padding: "24px",
      }}>
      <div style={{
        margin: '6px', padding: "24px", width: "100%",
        borderRadius: "24px", height: "100%", fontSize: 72, 
        display: "flex", flexDirection: "column",
        border: `#334155 2px solid`, color: '#334155'
      }}>
        {t.title?.slice(0, 80)}
        <hr style={{ border: `#334155 1px solid`, width: "100%" }}></hr>
        <p style={{ fontSize: "52", fontWeight: "700", display: 'flex',
           justifyContent: 'center', color: '#334155' }}> {t.website}</p>
      </div>
    </div>
  )
}

In the img/route.tsx file

import { SimpleTemplate } from '../Simple';
import { ImageResponse } from 'next/og'
import { NextRequest } from 'next/server'

// Route segment config
export const runtime = 'edge'

// Image generation
export async function GET(request: NextRequest) {

  const params = request.nextUrl.searchParams

  const title: string = params.get("title") || "No title";
  const website: string = params.get("website") || "No website"

  const t = { title, website }

  return new ImageResponse(
    (
      <SimpleTemplate t={t} />
    ),
    {
      width: 1200,
      height: 630,
      headers: {
        'Cache-Control': 'public, max-age=3600, immutable',
      },
    },
  )
}

On your browser open http://localhost:3000/simple/img?title=Every%20moment%20is%20a%20fresh%20beginning.&website=blogs.gratitude.com

Just change the queries param values to generate a dynamic image based on the queries.

Deploy on your preferred servers. You can use vercel for free if you are using only couple thousands requests per month!

Source code on github simple-og-image

It is completely free to use all our default templates and a self-hosted paid version is also available. This tutorial serves as a base for Dynamic OG.

Self Hosted Dynamic OG Includes

Get lifetime access for just $10 per template. Customize them to match your style. Own your templates for ever.
Leave server setup to us. Deploy on your preferred platform: Cloudflare Workers, Netlify Functions, Vercel, or even machines.
You own the source code of your templates. This means your designs are yours, not ours. We simply provide the tools.

Learn more about Dynamic OG

How to test open graph meta tags locally ?

Shrihari Mohan — Sun, 18 Feb 2024 13:16:43 +0000

I have created a chrome extension that lets you preview your meta tags. Localhost Open Graph Tester hosts your meta tags on a seperate website and gives you the link to preview test.

Just click the extension icon on the development site , it will open a new tab with the link for you to share.

Local images won't share directly, upload the images in postimages or imgbb first, use the url in the meta tags. Then click the extension again to create a new sharer link!

How this extension works ?

When you click the extension we copy the meta tags of the active tab and host it in different domain, where it will be available for the internet.

It also helps you debug your tags easily. I have attached a sample dev.to where you can see the hosted tags in a table. Peep at the Source code

This extension saves the hassle of ngrok tunnels or public URLs. Simply click the extension icon to instantly test your OG tags on localhost. If this extension helps you Rate us

Important Links

Cloudflare Pages NextJs + D1 Database ᐧ My experience developing sharejson

Shrihari Mohan — Sat, 03 Feb 2024 16:22:22 +0000

The biggest challenge I encountered during Next.js development was the lack of hot reloading when using a D1 database locally. We have to use experimental-edge when using getServerSideProps.

Development is time consuming! npm run dev will not give D1 database bindings

I have to rebuild the entire project every time I make a change, even a minor one. This can be very time-consuming.

I managed to complete sharejson.com because it's a single-page application with only one table. However, for larger projects with more tables, I wouldn't recommend using D1 due to the significant development time required. It simply doesn't feel efficient in these scenarios.

Test your Next.js application with hot reload while mocking database responses and test the database logic later to make development easier.

Setting up Nextjs Pages & D1 Database

npm create cloudflare@latest my-next-app -- --framework=next

Creates a new Next.js project with pages setup. Once we have the wrangler cli , we can directly deploy app.

We have to change the env.d.ts for bindings.

declare global {
  namespace NodeJS {
    interface ProcessEnv {
      [key: string]: string | undefined;
      DATABASE: D1Database;
    }
  }
}
export { };

After signing up with Cloudflare, you can create a database on their platform and access environment variables. Add wrangler.toml file with D1 details.

[[d1_databases]]
binding = "DATABASE"
database_name = "db"
database_id = "database-id-from-website"

I've isolated database operations in the src/server folder. However, the db variable remains undefined during npm run dev as hot reloading isn't supported. For database access, use npm run pages:dev, but be aware that this disables hot reloading.

const db = process.env.DATABASE

export const selectFromJsons = async (id: string) => {
  const stmt = db.prepare(`select * from jsons where id = ?1`).bind(id)
  const results = await stmt.first()
  return results
}

Overall, using D1 and Pages has been a positive experience, as it currently runs everything for free.

Funny Developing Mistakes I Wasted Hours on

Shrihari Mohan — Sun, 27 Aug 2023 16:12:18 +0000

Using Routing Module Instead Of Module

Because there were no erros in the console and whatever in the component file doesn't render.

const routes: Routes = [
  {
    path: 'items',
    loadChildren: () => import('./comps/CompsRoutingModule.module').then(m => m.CompsRoutingModule)
  }
// That should have been just module.
];

Same Variable Names Different Files

Sometimes we may introduce the same function or variable name in a different context. This can cause VS Code to mess up the imports we were looking for, especially if we didn't know that the name had already been used.

`yarn dev` vs `yarn start`

yarn start doesn't refresh changes on file save. I sometimes accidently select start.

Using Wrong Environments in Postman

I just hit some post request to production without realizing for 10 mins.

Try Our new product for free!

DocsAI - Create AI support agents with your documents in the most affordable price, starts at 0$. Don't need a bot , but need ai help on your docs just upload and start chating !

Using for a company ? Check out our pricing Just contact me for personalized pricing !

MongoDB Basic design patterns and 6 rules of thumb - in 3 mins

Shrihari Mohan — Wed, 16 Aug 2023 09:56:10 +0000

Thanks to William Zola for making this possible.

This article is a bit more in-depth than mine, if you have the time. I took bits and peices from that.

One to Few (< couple 100s) - Embedding

Storing Devices against a Person. You can save all those devices inside an array. Since a person can own only few number of devices.

{
   _id : ObjectID('1234'),
  name: 'MKBHD',
  devices : [
     { name: 'Samsung', model: 'S23 Ultra' },
     { name: 'Apple', model: '14 Pro Max' }
  ]
}

Pros

No need second query since all of them are in one place.

Cons

Cannot treat devices as stand alone entities. Like grouping devices based on name will be tough to execute.

One to many (< couple 1000s) - Referencing

A Book and its Pages. There can several hundred pages but never more than couple 1000s.

Book
{
  _id : ObjectID('1111'),
  title : 'The Lord of the Rings' , 
  author : 'J.R.R. Tolkien' ,
  pages : [
  ObjectID('2222'),
  ObjectID('3333'),
  ObjectID('4444')
  ]  
}

// Fetch the Book document by id
> book = db.Book.findOne({id: 1111});
// Fetch all the pages that are linked to this Book
> bookPages = db.Pages.find({_id: { $in : book.pages } } );

Pros

Each pages can be queried efficiently.

Cons

Need a application level second query to get both book and pages, which with a right index doesn't look different than sql level join.

One to squillions - (indefinitely large)

Likes and comments of a Post can be arbitrarily large. You save the unique id of Post in the Likes.

Post 
{
  _id : ObjectID('1111') ,
  content : "This is a good day!",
  creatorId : "1234",
  createAt: 2023-08-19T17:07:24.426Z
}

Likes 
{
   name : "Elon",
   postId :  ObjectID('1111'), // Reference to the Post document
   createdAt: 2023-08-19T17:06:24.426Z
}
{
   name : "Musk",
   postId :  ObjectID('1111') // Reference to the Post document
   createdAt: 2023-08-19T17:07:24.426Z
}

This also needs a appication level join and we can use mongodb operators to get count , recent 500 comments.

> post = db.Post.findOne({id: ObjectID('1111') });  //index
> last500Likes = db.Likes.find({postId: post._id})
.sort({createdAt : -1}).limit(500) // postId is indexed

Two way referencing

A user and their posts. This way we can get user and all his posts. In some other scenario , we can get a list of posts recently posted.

User 
{
  _id : ObjectID('1111'),
  posts : [                 // Reference to Post
    ObjectID('2222'),
    ObjectID('3333'),
    ObjectID('4444')
  ]
}

Post 
{
  _id : ObjectID('2222') ,
  content : "This is a good day!"
  userId : ObjectID('1111') // Reference to User
}

{
  _id : ObjectID('3333') ,
  content : "This is a great day!"
  userId : ObjectID('1111') // Reference to User
}

{
  _id : ObjectID('4444') ,
  content : "This is a day!"
  userId : ObjectID('1111') // Reference to User
}

Denormailization

This is used to prevent application level joins to to read frequently at the expense of costlier update query. We will use the same example of Books and Pages with denormalizations.

In the each pages with its id attached with a context. This way when getting a Book we can get a context of what each Page looks like without application Join. However if you need more information about the page thats a seperate query.

This comes with a expense of update becuase whenever context changes we have to update Page and Book.

Book
{
  _id : ObjectID('1111'),
  title : 'The Lord of the Rings' , 
  author : 'J.R.R. Tolkien' ,
  pages : [
   { id :ObjectID('2222'), 
     context: "In a hole in the ground there lived a hobbit." 
   },
   { id: ObjectID('3333'), 
     context: "It had a perfectly round door like a porthole" 
   },
   { id: ObjectID('3333'), 
     context: "There were doors on either side"
   }
  ]  
}

6 Rules of thumb

One: Favor embedding unless there is a compelling reason not to.

Two: Needing to access an object on its own is a compelling reason not to embed it.

Three: If an array is likely to grow large, it is better to store it as a separate document or collection. This will improve performance and scalability.

Four: Don’t be afraid of application-level joins: If you index correctly and use the projection specifier, then application-level joins are barely more expensive than server-side joins in a relational database.

Five: Consider the read-to-write ratio with denormalization. A field that will mostly be read and only seldom updated is a good candidate for denormalization.

Six: How you model your data depends entirely on your particular application’s data access patterns.

How Do GPT-3.5, Bing, and Bard Explain Promises to a 5-Year-Old?

Shrihari Mohan — Sun, 30 Jul 2023 12:43:34 +0000

AI Chatbots Are Making Learning to Program Easier

As a developer, I've always found that the best way to learn something new is by asking questions. But sometimes, it can be hard to find someone who can explain complex concepts in a way that's easy to understand.

That's where AI chatbots come in. In this blog post, I'll share my hot take on the 3 leading AI chatbots for learning to program.

So without further ado, let's get started!

Prompt - "Explain javascript promises like I am 5"

ChatGPT - 3.5

Alright, imagine you're playing a game with your friend, and you want to get a cool toy from a vending machine. But the vending machine takes a little time to give you the toy, and you don't want to wait there doing nothing.

So, you give your friend a special promise note that says, "Hey, I'll give you a toy when I get it from the machine." Your friend can continue playing other games or doing other stuff instead of just waiting.

Now, when the vending machine finally gives you the toy, you keep your promise and give the toy to your friend. Your friend is happy because they got the toy they were promised, and you're happy because you made your friend happy!

In JavaScript, sometimes we have to do things that take some time, like fetching data from the internet or loading images. We use promises just like the promise note you gave your friend. The promise says, "Hey, I'll let you know when I'm done getting the data or image."

JS Promises Explained!

chat.openai.com

Bard

Imagine you're at a restaurant and you want to order a hamburger. You tell the waiter what you want, and they give you a buzzer. The buzzer will buzz when your hamburger is ready.

The buzzer is a promise. It's a way of saying, "I'll let you know when your hamburger is ready."

In JavaScript, promises are objects that represent the eventual completion or failure of an asynchronous operation. An asynchronous operation is something that takes time to finish, like loading a web page or making a network request.

// Create a promise.
let promise = new Promise(function(resolve, reject) {
  // Do something that takes time.
  setTimeout(function() {
    // Resolve the promise with a value.
    resolve("Your hamburger is ready!");
  }, 3000);
});

// Attach a handler to the promise.
promise.then(function(value) {
  // Do something with the value.
  console.log(value);
});

Bing Chat

Imagine you want to climb a tree in the park, but you have to ask your mom for permission first. You don't know if she will say yes or no, so you have to wait for her answer. A promise is like a way of telling your mom: "Please let me know if I can climb the tree or not, and I will do something else depending on your answer."

For example, you can say: "If you say yes, I will be very happy and go to the park with my friends. If you say no, I will be sad and stay at home and play with my toys." These are the two possible outcomes of your promise: either it is fulfilled (your mom says yes) or it is rejected (your mom says no).

A promise in JavaScript is similar. It is an object that represents a task that may or may not be completed in the future. It has two functions that are called when the task is either successful or unsuccessful. These functions are called resolve and reject.

For example, you can write a promise like this:

let climbTree = new Promise(function(resolve, reject) {
  // ask mom for permission
  let permission = askMom();
  // if permission is granted, resolve the promise
  if (permission) {
    resolve("Yay! I can climb the tree!");
  }
  // if permission is denied, reject the promise
  else {
    reject("Oh no! I can't climb the tree!");
  }
});

Then, you can use the promise like this:

climbTree.then(function(message) {
  // this function is called when the promise is resolved
  console.log(message); // "Yay! I can climb the tree!"
  // do something else when you are happy
}).catch(function(error) {
  // this function is called when the promise is rejected
  console.log(error); // "Oh no! I can't climb the tree!"
  // do something else when you are sad
});

This way, you don't have to wait for your mom's answer before doing something else. You can just tell her what you want to do depending on her answer, and then move on with your life. That's how promises work in JavaScript. They make your code easier to read and manage.

Bot/Quality	Chat GPT-3.5	Bard	Bing Chat
Explanation	OK	Good	Good ✅
Gave code.	No	Yes	Yes ✅
Code Relevance	No	Somewhat Yes	Yes ✅

I overall enjoyed the Bing's answer.

Peace 🕊

The Strong World of Developers: Trying, Catching, and Moving On

Shrihari Mohan — Thu, 06 Jul 2023 06:44:33 +0000

Rejection is a part of life, and for developers, it's no exception. However, these strong individuals have their own unique way of coping with rejection.

In this article, we delve into the world of developers and explore how they handle setbacks by employing their programming skills. So, fasten your seatbelts and prepare to discover how they try, catch their feelings, and move on!

The Try/Catch Mindset

Developers are well-versed in the concept of error handling through try/catch blocks. In the realm of programming, errors are expected, and handling them gracefully is crucial.

Similarly, when faced with rejection, developers adopt a similar mindset. They embrace the challenge, acknowledging that not every attempt will yield success.

Trying with Determination:

Developers possess a tenacious spirit. They understand that perseverance and continuous effort are essential for growth and success.

When faced with rejection, they approach it as an opportunity to learn and improve. They don't let errors define them but instead use them as stepping stones for future.

Catching Their Feelings:

Just as a try/catch block catches errors, Developers employ a similar mechanism to catch their feelings. They understand that rejection can evoke a range of emotions, from disappointment to self-doubt.

Instead of dwelling on these negative emotions, they acknowledge them, process them, and then move forward. By catching their feelings, they maintain a healthy emotional state while avoiding being consumed by negativity.

Debugging and Self-Reflection:

Developers are skilled in debugging code to identify and resolve issues. Likewise, They analyze their actions, seek feedback, and identify areas for improvement. By debugging their approach, they can make adjustments and increase their chances of success in future endeavors.

Moving On:

One of the core principles of development is efficiency. Developers optimize code, seeking ways to make it faster and more efficient.

Similarly, when confronted with rejection, developers don't linger on what didn't work out. They swiftly adapt, make necessary adjustments, and move on to new opportunities.

They understand that dwelling on past failures hinders progress and prevents them from seizing new possibilities.

Please Add finally in the comments. How you like to try / catch end with finally.

🕊 peace

If you are here it means you may have found this blog helpful. Just follow me @shrihari which will motivate to write more. You can make a Buttermilk 🥛. Small support comes a long way!

Subscribe If you want to receive these blogs in your mail from @Medium for free!

More things from me

Cancel repeated requests in Angular with interceptors

Shrihari Mohan ・ Apr 16

#webdev #javascript #angular #tutorial

How I Built a chrome extension that finds Ghost CSS : Ghost-CSS-Detector

Shrihari Mohan ・ Jan 11

#webdev #javascript #tutorial #css

Beyond Coding : The DevOps Tasks I do as a web dev.

Shrihari Mohan ・ Mar 26

#webdev #programming #devops #productivity

Cancel repeated requests in Angular with interceptors

Shrihari Mohan — Sun, 16 Apr 2023 17:33:04 +0000

By using interceptors, you can intercept and modify HTTP requests and responses globally across your entire application.

In this we're going to create a component , service and interceptor

In src/app/cancel-repeated-apis/cancel-repeated-apis.html



<div class="h-screen gap-4 flex items-center justify-center bg-black">
  <button class="p-3 bg-cyan-400  rounded-lg" (click)="handleClick(1)">
    API 1
  </button>
  <button class="p-3 bg-red-400 rounded-lg" (click)="handleClick(2)">
    API 2
  </button>
</div>

we're using tailwind along with it. Nothing serious , just 2 buttons with different colors.

In src/app/cancel-repeated-apis/cancel-repeated-apis.ts



import { Component } from '@angular/core';
import { ApiService } from '../services/api.service';

@Component({
  selector: 'app-cancel-repeated-apis',
  templateUrl: './cancel-repeated-apis.component.html',
  styleUrls: ['./cancel-repeated-apis.component.scss']
})
export class CancelRepeatedApisComponent {

  constructor(private apiService: ApiService) { }

  // Takes an number and calls a sample api using that
  async handleClick(num: number) {
    try {
      const res = await this.apiService.get(`https://dummyjson.com/products/${num}`)
      console.log("🔥 ~ handleClick ~ res:", res)
    }
    catch (err) {
      console.log("🔥 ~ handleClick ~ err:", err)
    }
  }
}

In /src/app/services/api.service.ts



import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})

export class ApiService {
  constructor(private http: HttpClient) { }

  // get request using http , Make sure to import in modules
  public get(url: string) {
    return this.http.get(url).toPromise();
  }

}

In /src/app/interceptors/cancel-same-apis.interceptor.ts



import { Injectable } from '@angular/core';
import { HttpRequest, HttpHandler, HttpEvent, HttpInterceptor, HttpResponse } from '@angular/common/http';
import { Observable, Subject } from 'rxjs';
import { tap, takeUntil } from 'rxjs/operators';

@Injectable()
export class CancelSameApisInterceptor implements HttpInterceptor {
  private cache = new Map<string, Subject<void>>();

  constructor() { }

  intercept(request: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> {

    // Only cancel GET requests
    if (request.method !== 'GET') {
      return next.handle(request);
    }

    // if you want to check params as well then use request.urlWithParams.
    const url = request.url;

    // check if the request is already cached
    const cachedResponse = this.cache.get(url);

    // cancel any previous requests
    if (cachedResponse) {
      cachedResponse.next();
    }

    const cancelRequests$ = new Subject<void>();

    // cache the new request , so that we can cancel it if needed.
    this.cache.set(url, cancelRequests$);

    const newRequest = next.handle(request).pipe(

      // cancel the request if a same request comes in.
      takeUntil(cancelRequests$),

      // complete the subject when the request completes.
      tap((event) => {
        if (event instanceof HttpResponse) {
          this.cache.delete(url);
        }
      })
    );

    return newRequest;

  }
}

Don't forget to add this interceptor in the provider in app.module.ts or your respective modules.



  providers: [{ provide: HTTP_INTERCEPTORS, useClass: CancelSameApisInterceptor, multi: true }]

We have a map that holds url as key and cancelRequest$ as value.
We always check the cache before request. If cache exists we cancel previous requests using the value which is observable that is passed in the takeUntil.

takeUntil - takeUntilsubscribes and begins mirroring the source Observable. It also monitors a second Observable, notifier that you provide. If the notifier emits a value, the output Observable stops mirroring the source Observable and completes. If the notifier doesn't emit any value and completes then takeUntil will pass all values.

🕊 peace

If you are here it means you may have found this blog helpful. Just follow me @shrihari which will motivate to write more. You can make a Buttermilk 🥛. Small support comes a long way!

Subscribe If you want to receive these blogs in your mail from @Medium for free!

More things from me

Redis + 🐂 Bull = Easy Background Jobs in nodeJs

Shrihari Mohan ・ Apr 15 '23

#node #webdev #javascript #programming

How I Built a chrome extension that finds Ghost CSS : Ghost-CSS-Detector

Shrihari Mohan ・ Jan 11 '23

#webdev #javascript #tutorial #css

Node.js Cron: Handling Overlapping Tasks Like a Noob

Shrihari Mohan ・ Apr 6 '23

#node #webdev #javascript #programming

Redis + 🐂 Bull = Easy Background Jobs in nodeJs

Shrihari Mohan — Sat, 15 Apr 2023 10:49:15 +0000

Real world use cases why you should use redis in your apps.

Job processing: You could use Redis and Bull to process image uploads, generate PDFs, send emails in background.

Task scheduling: Just like crons.

Caching: cache slow running queries and also api responses.

Real-time updates: Redis can be used to publish and subscribe to messages, making it a great tool for implementing real-time updates in Node.js applications.

Rate limiting: You could use Redis to limit the number of API requests a user can make in a given time period.

Setting up redis

For windows
you can directly Download this and run the redis-server inside bin folder or use of wsl2 the Official way

For Linux
If your linux supports snap then its simple Or follow these simple steps from Offical Docs

sudo snap install redis

For mac

brew install redis
redis-server

If you want to know more

By default the redis will start in redis://localhost:6379

Setting up NodeJs

Hope you have a sample nodeJs template
Add bull to the dependenceis.

npm install bull
yarn add bull

Create Jobs.

import express from 'express'
import Queue from 'bull'

const myQueue = new Queue('test-queue', 'redis://localhost:6379');
const app = express()
const port = 3000

let count = 1

app.get('/', async (req, res) => {
  // Add jobs to the queue
  await myQueue.add({ data: { count: count++ } });
  res.send('Hello World!')
})

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

})

// process jobs from the queue 
myQueue.process(async (job) => {
  console.log(`Processing job ${job.id} with data `, job.data);
  return Promise.resolve();
});

Thats it you are done. All you have to do is hit the apis to schedule a job and myQueue will keep on logging.

Make sure your redis is up and running , redis url is connect.

Peace 🕊

If you are here it means you may have found this blog helpful. Just follow me @shrihari which will motivate to write more. You can make a Buttermilk 🥛. Small support comes a long way!

Subscribe If you want to receive these blogs in your mail from @Medium for free!

More things from me

How I Built a chrome extension that finds Ghost CSS : Ghost-CSS-Detector

Shrihari Mohan ・ Jan 11 '23

#webdev #javascript #tutorial #css

Two things that make my Terminal experience awesome 🚀 in Mac/Linux

Shrihari Mohan ・ Sep 18 '22

#productivity #javascript #linux #webdev

🚀 Angular ng-templates: Crafting Reusable templates with Ease

Shrihari Mohan ・ Feb 14 '23

#webdev #javascript #angular #programming

Node.js Cron: Handling Overlapping Tasks Like a Noob

Shrihari Mohan — Thu, 06 Apr 2023 18:08:01 +0000

One common cron problem is when a cron job takes longer to complete than the interval between two consecutive runs. In this case, the second instance of the job will start before the first one has finished, leading to overlaps and potentially unexpected behavior such as duplicates.

The script consists of a job that is run every 5 seconds using the CronJob library, and a delay function that simulates a long running task.

The script uses a simple flag isJobRunning to prevent overlapping runs of the job, and a jobSkippedCount variable to keep track of how many times the job has been skipped due to overlapping.

We're going to use nanoid to know job ids and cron to schedule jobs.

npm install nanoid
npm install cron

Let's dive into the code:

import { CronJob } from 'cron'
import { nanoid } from 'nanoid'

let isJobRunning = false
let jobSkippedCount = 0

const delay = (ms) => {
  return new Promise((resolve) => {
    setTimeout(resolve, ms)
  })
}

const job = new CronJob('*/5 * * * * *', async () => {
  if (isJobRunning) {
    jobSkippedCount++
    console.log("__ JOB SKIPPED COUNT __ ", jobSkippedCount)
    if (jobSkippedCount > 2) {

      /* If a job takes more than 15 seconds 
         to complete we can stop this job, 
         throw a error and start a new job */

      console.log("__ TIMEOUT __")
      jobSkippedCount = 0
      isJobRunning = false

    }
    return
  }
  isJobRunning = true
  try {
    const id = nanoid(10)
    console.log("\n\n__ JOB RUNNING __ ", id, new Date())

      /* Your  functionality goes here 
    I have used a delay function to 
    simulate a long running job */

    await delay(16000)
    isJobRunning = false
    jobSkippedCount = 0
    console.log("__ JOB COMPLETED __ ", id, new Date())

  }
  catch (err) {
    console.error(err);
  }
})

job.start();

There are 3 scenarios that happen with this our cycle is 5 seconds once and max skip count is 2

1. Everything is smooth

delay(2000) - The cron job executes and finishes its task before the next cycle, producing the following output:

__ JOB RUNNING   __  EC6MqpB4FG 2023-04-06T17:53:35.004Z
__ JOB COMPLETED __  EC6MqpB4FG 2023-04-06T17:53:37.017Z
__ JOB RUNNING   __  6nutPdea6_ 2023-04-06T17:53:40.004Z
__ JOB COMPLETED __  6nutPdea6_ 2023-04-06T17:53:42.005Z

2. Skipped a job but no TIMEOUT

delay(7000) - The cron job executes and finishes its task by skipping one cycle, producing the following output:

__ JOB RUNNING   __  soR8V3YrQp 2023-04-06T17:54:15.006Z
__ JOB SKIPPED COUNT __  1
__ JOB COMPLETED __  soR8V3YrQp 2023-04-06T17:54:22.019Z
__ JOB RUNNING   __  8-LBtb85Jq 2023-04-06T17:54:25.002Z
__ JOB SKIPPED COUNT __  1
__ JOB COMPLETED __  8-LBtb85Jq 2023-04-06T17:54:32.004Z

3. Reaches Timeout

delay(17000) - The cron job fails to complete within timeout so a new job starts: Regardless whether the previous job completed or not. We will start the job after timeout.

You may need to kill your logic using event emitters in order to stop the function execution.

__ JOB RUNNING   __  lrMOLDgtzm 2023-04-06T18:00:05.004Z
__ JOB SKIPPED COUNT __  1
__ JOB SKIPPED COUNT __  2
__ JOB SKIPPED COUNT __  3
__ TIMEOUT __
__ JOB COMPLETED __  lrMOLDgtzm 2023-04-06T18:00:22.015Z
__ JOB RUNNING   __  qPK1lQ8QuV 2023-04-06T18:00:25.003Z
__ JOB SKIPPED COUNT __  1
__ JOB SKIPPED COUNT __  2
__ JOB SKIPPED COUNT __  3
__ TIMEOUT __
__ JOB COMPLETED __  qPK1lQ8QuV 2023-04-06T18:00:42.003Z

isJobRunning - is a flag that indicates whether the job is currently running.

jobSkippedCount is a counter that keeps track of how many times the job has been skipped due to overlaps. This also helps **TIMEOUT** , We can set a maximum number of skips allowed like 5. Then if the job is skipped for 5th time then it will reset and start a new job.

delay() - A function that returns a promise that resolves after a given number of milliseconds, Typically your logic.

This is more like a temporary hack to avoid overlaps , these timeout scenarios are so dangerous.

A more scalable approach is to use a queueing system to manage the jobs. This can allow multiple instances of the job to be queued up and executed in sequence, without overlaps or duplicates. Popular queueing systems for Node.js include Bull, Bee-Queue, and Agenda.

Thanks for reading
🕊 Peace

Try Our new product for free!

DocsAI - Create AI support agents with your documents in the most affordable price, starts at 0$. Don't need a bot , but need ai help on your docs just upload and start chating !

Using for a company ? Check out our pricing Just contact me for personalized pricing !

Beyond Coding : The DevOps Tasks I do as a web dev.

Shrihari Mohan — Sun, 26 Mar 2023 06:21:12 +0000

1. Using `SSH` collaboration across `Dev Tools`.

As a developer, you may have found yourself needing to verify code changes or perform hotfixes on production servers. Visual Studio Code's SSH extension allows you to directly connect to remote folders, simplifying the debugging process and . You can navigate through systems as if you're on the server itself, without interfaces or multiple logins. (NeoVim is also good alternative if you know the shortcuts)
Connect to SQL servers behind a bastion host with ease using DBeaver and local tunneling. Here's how you can do it.
Controlling workflow with Git CLI and SSH. I started on command line then moved to Github Desktop and then back to CLI .I had inconsistencies with fetch and getting latest commits.

2. Going through server logs.

Getting to know the linux commands really comes handy when gazing. The combinations of less and grep brings great deal of analytics and easy problem solving.

Commands I use regularly.
less - view file contents page by page with navigation
tail - view the end of a file or live stream of log data
cat - view a file
grep - search for a specific pattern in a file

I also set up oh-my-zsh that covers most of the terminal enhancements one could have.

3. Using docker for local setups

Streamlining my local development process has never been easier since I started using Docker - now I can effortlessly set up MySQL, MongoDB, and even the operating system, without the hassle of configuring each service individually on my machine.

Peace 🕊

If you are here it means you may have found this blog helpful. Just follow me @shrihari which will motivate to write more. You can make a Buttermilk 🥛. Small support comes a long way!

Subscribe If you want to receive these blogs in your mail from @Medium for free!

Try Our new product for free!

DocsAI - Create AI support agents with your documents in the most affordable price, starts at 0$. Don't need a bot , but need ai help on your docs just upload and start chating !

Using for a company ? Check out our pricing Just contact me for personalized pricing !

Forem: Shrihari Mohan

Dynamic open graph images for your website | No code using dynamicog.com

Generate Dynamic Open Graph Images using Nextjs

Dynamic OG

Getting started witht the simple theme

Self Hosted Dynamic OG Includes

How to test open graph meta tags locally ?

How this extension works ?

Important Links

Cloudflare Pages NextJs + D1 Database ᐧ My experience developing sharejson

Setting up Nextjs Pages & D1 Database

Funny Developing Mistakes I Wasted Hours on

Using Routing Module Instead Of Module

Same Variable Names Different Files

yarn dev vs yarn start

Using Wrong Environments in Postman

Try Our new product for free!

MongoDB Basic design patterns and 6 rules of thumb - in 3 mins

One to Few (< couple 100s) - Embedding

Pros

Cons

One to many (< couple 1000s) - Referencing

Pros

Cons

One to squillions - (indefinitely large)

Two way referencing

Denormailization

6 Rules of thumb

How Do GPT-3.5, Bing, and Bard Explain Promises to a 5-Year-Old?

ChatGPT - 3.5

JS Promises Explained!

Bard

Bing Chat

The Strong World of Developers: Trying, Catching, and Moving On

The Try/Catch Mindset

Trying with Determination:

Catching Their Feelings:

Debugging and Self-Reflection:

Moving On:

More things from me

Cancel repeated requests in Angular with interceptors

Shrihari Mohan ・ Apr 16

How I Built a chrome extension that finds Ghost CSS : Ghost-CSS-Detector

Shrihari Mohan ・ Jan 11

Beyond Coding : The DevOps Tasks I do as a web dev.

Shrihari Mohan ・ Mar 26

Cancel repeated requests in Angular with interceptors

More things from me

Redis + 🐂 Bull = Easy Background Jobs in nodeJs

Shrihari Mohan ・ Apr 15 '23

How I Built a chrome extension that finds Ghost CSS : Ghost-CSS-Detector

Shrihari Mohan ・ Jan 11 '23

Node.js Cron: Handling Overlapping Tasks Like a Noob

Shrihari Mohan ・ Apr 6 '23

Redis + 🐂 Bull = Easy Background Jobs in nodeJs

Setting up redis

Setting up NodeJs

More things from me

How I Built a chrome extension that finds Ghost CSS : Ghost-CSS-Detector

Shrihari Mohan ・ Jan 11 '23

Two things that make my Terminal experience awesome 🚀 in Mac/Linux

Shrihari Mohan ・ Sep 18 '22

🚀 Angular ng-templates: Crafting Reusable templates with Ease

Shrihari Mohan ・ Feb 14 '23

Node.js Cron: Handling Overlapping Tasks Like a Noob

1. Everything is smooth

2. Skipped a job but no TIMEOUT

3. Reaches Timeout

This is more like a temporary hack to avoid overlaps , these timeout scenarios are so dangerous.

Try Our new product for free!

Beyond Coding : The DevOps Tasks I do as a web dev.

1. Using SSH collaboration across Dev Tools.

2. Going through server logs.

3. Using docker for local setups

Try Our new product for free!

More things from me

How I Built a chrome extension that finds Ghost CSS : Ghost-CSS-Detector

Shrihari Mohan ・ Jan 11

Two things that make my Terminal experience awesome 🚀 in Mac/Linux

Shrihari Mohan ・ Sep 18 '22

`yarn dev` vs `yarn start`

1. Using `SSH` collaboration across `Dev Tools`.