The one thing I always do when I begin a project is to add a navbar with **background blur**. Just got obsessed with it.

My Personal Website. [View ](https://shrihari-portfolio.vercel.app/)
![Personal Website](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hn9r9x3h2a8qxlpn5mmc.gif)

PvZ2[PlantsVsZombies](https://pvz-2-api.vercel.app/)

![Open source Contibution.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7wmle38osjalpvpksui7.gif)

---

We will see how to do this in your website too! Just add this to your navbar container.

```css
.bg-blur {
  background: transparent;
  backdrop-filter: blur(10px);
}
```

#Code Review

`background: transparent;` - If you are having background color make sure you **remove color** and add this. This is what allows the **background content to be visible** on the navbar.

`backdrop-filter: blur(10px);` - This creates that smooth transition of navbar over background with that blur. Play with that values. `10px` works good for me.

For more information. [MDN Docs
](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#browser_compatibility)
![Browser Compatability](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0sdlgqxbt51i2y2ag9i2.png)

_Peace 🕊_

---

If you are here it means you may have enjoyed reading this blog. Just follow me @shrihari which will motivate to write more, contribute open source.

You can make a drink [Buttermilk 🥛](https://www.buymeacoffee.com/shriharimohan). Small support comes a long way!

Subscribe If you want to receive these blogs in your mail from @[Medium](https://medium.com/@shriharimohan) for free!

## Try Our new product for free!
[DocsAI](https://docsai.app/) - 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](https://docsai.app/pricing) Just contact me for personalized pricing !

![docsAi](https://firebasestorage.googleapis.com/v0/b/shrihari-personal-storage.appspot.com/o/banner-docs-jpeg.jpeg?alt=media&token=45c47666-de2a-4e02-8881-beb6e43ce581)

{% embed https://dev.to/shrihari/the-chrome-dev-tool-you-are-missing-feat-recorder-4ao5 %}

{% embed https://dev.to/shrihari/two-things-that-make-my-terminal-experience-awesome-in-mac-3eie %}

{% embed https://dev.to/shrihari/colors-design-inspiration-websites-for-new-comers-1lcb %}









The one thing I always do when I begin a project is to add a navbar with background blur. Just got...

Navbar with background blur! Aesthetic look in 2 lines of code .

Shrihari Mohan

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

{% youtube https://youtu.be/_j19lZVwjGM %}

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

---

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

```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`
```typescript
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`
```typescript
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`
```typescript
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.

```typescript
  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` - `takeUntil `subscribes 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 🥛](https://www.buymeacoffee.com/shriharimohan). Small support comes a long way!

Subscribe If you want to receive these blogs in your mail from @[Medium](https://medium.com/@shriharimohan) for free!

## More things from me
{% embed https://dev.to/shrihari/redis-bull-easy-background-jobs-in-nodejs-50le %}

{% embed https://dev.to/shrihari/how-i-built-a-chrome-extension-that-finds-ghost-css-ghost-css-detector-4aj0 %}

{% embed https://dev.to/shrihari/nodejs-cron-handling-overlapping-tasks-like-a-noob-c32 %}



 




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

Cancel repeated requests in Angular with interceptors


![Log out from one tab](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pwm9r55mmcvtlh9t7ed6.gif)

The following method is limited to local session of same browser profile. This method will not work for incognito.

Lets dig into it.

## Log in page

1. In our login page component. I just have an **click event** on the **login** button. 
2. Then I am using **data service** to handle all the **login/logout** operations.

```javascript
import { Component } from '@angular/core';
import { DataService } from './service/dataService.ts/data.service';

export class LoginPageComponent implements OnInit {

  constructor( private dataService: DataService, private title: Title) {
    title.setTitle('Dummy App')
  }

  ngOnInit(): void {
  }

  async onLogin() {
    this.dataService.login()
  }
}
```

## Home Page
1. `onLogOut()` is the Log Out click event functions!
2. In`onLogOut()` set the localStorage with a unique key for logout! like `logout-event`

> **Storage Events** won't emit unless value is **changed** thats why we're using `Math.random()`

```javascript
import { Component, OnInit } from '@angular/core';
import { Title } from '@angular/platform-browser';
import { DataService } from 'src/app/service/dataService.ts/data.service';

@Component({
  selector: 'app-home-page',
  templateUrl: './home-page.component.html',
  styleUrls: ['./home-page.component.css']
})
export class HomePageComponent implements OnInit {
  constructor(private dataService: DataService, private title: Title) {
    this.title.setTitle('Home')
  }

  ngOnInit(): void {
  }

  onLogOut() {
    window.localStorage.setItem('logout-event', Math.random().toString())
    this.dataService.logOut()
  }

}
```


## Data Service
1. This contains a basic login , logout functions.
2. `start()` creating a **Event Listener** for storage events.
3. `storageEventListener()` this filters only the `logout-event` and call `logout()` to call **AUTH APIs** and route to login page. 
4. `stop()` Remove **Event Listeners** on destroy!

```javascript
import { Injectable, OnDestroy } from '@angular/core';
import { Router } from '@angular/router';

@Injectable({
  providedIn: 'root'
})
export class DataService implements OnDestroy {

  isLoggedIn: boolean = false

  constructor(private router: Router) {
    // Start listening to storage events
    this.start()
  }

public login = () => {
    // Do the APIs For Auth
    this.isLoggedIn = true 

    // Route to home page
    this.router.navigate(['']) 
  }

  public logOut = () => {
    // Do the APIs For Auth
    this.isLoggedIn = false 

    // Route to login page
    this.router.navigate(['/login'])
  }

  // Bind the eventListener
  private start(): void {
    window.addEventListener("storage", this.storageEventListener.bind(this));
  }

  // Logout only when key is 'logout-event'
  private storageEventListener(event: StorageEvent) {
    if (event.storageArea == localStorage) {
      if (event?.key && event.key == 'logout-event') {
        console.log("🔥 ~ storageEventListener ~ event", event.newValue)
        this.logOut()  
      }
    }
  }
 
  // Handle active listeners when onDestroy 
  private stop(): void {
    window.removeEventListener("storage", this.storageEventListener.bind(this));
  }

  ngOnDestroy() {
    this.stop()
  }

}
```

_Peace 🕊_

---

If you are here it means you may have enjoyed reading this blog. Just follow me @shrihari which will motivate to write more.

You can make a drink [Buttermilk 🥛](https://www.buymeacoffee.com/shriharimohan). Small support comes a long way!

Subscribe If you want to receive these blogs in your mail from @[Medium](https://medium.com/@shriharimohan) for free!

## Try Our new product for free!
[DocsAI](https://docsai.app/) - 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](https://docsai.app/pricing) Just contact me for personalized pricing !

![docsAi](https://firebasestorage.googleapis.com/v0/b/shrihari-personal-storage.appspot.com/o/banner-docs-jpeg.jpeg?alt=media&token=45c47666-de2a-4e02-8881-beb6e43ce581)

##More Free Articles from me
{% embed https://dev.to/shrihari/oauth-for-beginners-and-key-terms-1plo %}

{% embed https://dev.to/shrihari/navbar-with-background-blur-aesthetic-look-in-2-lines-of-code--4kp6 %}

{% embed https://dev.to/shrihari/why-array-index-starts-with-0-a-pointers-magic--j53 %}



The following method is limited to local session of same browser profile. This method will not work...

Sign out of all tabs if logged out from one - Angular & Storage Events


Our setup utilises a secure bastion host protected by Google Authenticator's time-based one-time password authentication for added security.

If your DB is protected by a **Jump Server**. Then we can't directly connect the db with DBeaver , it does not have built-in support for Google Authenticator.

So we're going to create local **ssh tunnel** then connect the DBeaver to our tunnel.

There are many ways to create a ssh tunnel, Such as by using `PuTTY` or `openSSH` or `terminal`. Right now we're going to use `terminal` (Linux / Mac). If you're using windows you can use any `bash/WSL` or `PuTTY` to create a tunnel.

I have a `key` to connect to host, In a single command we can create a local **ssh tunnel**.

```bash
ssh -L <local_port>:<remotemariadbhost>:<remote_port> <bastion_user>@<bastion_host> -i <path_to_ssh_key>
```

## Breaking down of the command
**ssh** - the command to initiate an SSH connection

**-L** - local port forwarding option, which sets up a secure tunnel between the local machine and the remote MariaDB host through the bastion host

**local_port** - the local port number to use for the secure tunnel

**remotemariadbhost** - the hostname or IP address of the remote MariaDB host to connect to via the secure tunnel

**remote_port** - the port number of the remote MariaDB host to connect to via the secure tunnel

**bastion_user** - the username to use when connecting to the bastion host

**bastion_host** - the hostname or IP address of the bastion host that is accessible from the local machine

**-i** - the option to specify the path to the SSH private key to use for authentication

**path_to_ssh_key** - the path to the SSH private key file to use for authentication


## To forward the db connection to our localhost:3310
```bash
ssh -L 3310:db.sample.com:3306 shrihari@3.92.143.106 -i key
```

![Sample](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lrjsvqthzxyz7tt0a1dg.png)

Upon successful key authentication, the connection to your database is made available locally, allowing for seamless and secure access.

You can Test your connection using DBeaver, make sure the `port`, `username` and `password` is correct.

![DBeaver Connection](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wqhtwo8vfu71c0noo3p3.png)

So whenever you're starting you just have to do this one port forwarding command and DBeaver is good to go.

_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 🥛](https://www.buymeacoffee.com/shriharimohan). Small support comes a long way!

Subscribe If you want to receive these blogs in your mail from @[Medium](https://medium.com/@shriharimohan) for free!

## Try Our new product for free!
[DocsAI](https://docsai.app/) - 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](https://docsai.app/pricing) Just contact me for personalized pricing !

![docsAi](https://firebasestorage.googleapis.com/v0/b/shrihari-personal-storage.appspot.com/o/banner-docs-jpeg.jpeg?alt=media&token=45c47666-de2a-4e02-8881-beb6e43ce581)

##More Free Articles from me
{% embed https://dev.to/shrihari/oauth-for-beginners-and-key-terms-1plo %}

{% embed https://dev.to/shrihari/navbar-with-background-blur-aesthetic-look-in-2-lines-of-code--4kp6 %}

{% embed https://dev.to/shrihari/why-array-index-starts-with-0-a-pointers-magic--j53 %}

Our setup utilises a secure bastion host protected by Google Authenticator's time-based one-time...

DBeaver + SSH + Bastion Host + Google Authenticator : 🤝How to connect

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](https://drive.google.com/drive/folders/1vk-zr_w9hb2IpOsRNtm8xwnIP4GFaz8B?usp=share_link) this and run the `redis-server` inside `bin` folder or use of `wsl2` the [Official way](https://redis.io/docs/getting-started/installation/install-redis-on-windows/)

**For Linux**
If your linux supports `snap` then its simple Or follow these simple steps from [Offical Docs](https://redis.io/docs/getting-started/installation/install-redis-on-linux/)
```bash
sudo snap install redis
```


**For mac**
```bash
brew install redis
redis-server
```
If you want to know [more](https://redis.io/docs/getting-started/installation/install-redis-on-mac-os/)

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.

```bash
npm install bull
yarn add bull
```

Create Jobs.
```javascript
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.


![Sample Out](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bl4174f55iqmk7xbuosf.png)

_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 🥛](https://www.buymeacoffee.com/shriharimohan). Small support comes a long way!

Subscribe If you want to receive these blogs in your mail from @[Medium](https://medium.com/@shriharimohan) for free!

## More things from me
{% embed https://dev.to/shrihari/how-i-built-a-chrome-extension-that-finds-ghost-css-ghost-css-detector-4aj0 %}

{% embed https://dev.to/shrihari/two-things-that-make-my-terminal-experience-awesome-in-mac-3eie %}

{% embed https://dev.to/shrihari/angular-ng-templates-crafting-reusable-templates-with-ease-2dap %}

Real world use cases why you should use redis in your apps.  Job processing: You could use Redis and...

Redis + 🐂 Bull = Easy Background Jobs in nodeJs

I have a created a chrome extension thats let you preview your meta tags. [Localhost Open Graph Tester](https://chromewebstore.google.com/detail/localhost-open-graph-test/nggoiohoonibebildpjhlaakfoccpfln) 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](https://postimages.org/) or [imgbb](https://imgbb.com/) 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](https://github.com/ShrihariMohan/og-tester)

![Sample devto 1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fiymwq7wyrqd0lacrgic.png)



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](https://chromewebstore.google.com/detail/nggoiohoonibebildpjhlaakfoccpfln) 


---

## Important Links 
1. [Source code](https://github.com/ShrihariMohan/og-tester) 
2. [Chrome Extension](https://chromewebstore.google.com/detail/nggoiohoonibebildpjhlaakfoccpfln)
3. [Localhost open graph tester - Home](https://localhost-og-checker.vercel.app/)


![Filler Image ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gbzxuulweiwn479w5u4a.jpeg)


I have a created a chrome extension thats let you preview your meta tags. Localhost Open Graph Tester...

How to test open graph meta tags locally ?

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.

```bash
npm install nanoid
npm install cron
```

Let's dive into the code:

```javascript
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:

```bash
__ 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:

```bash
__ 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.

```bash
__ 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](https://www.npmjs.com/package/bull), [Bee-Queue](https://www.npmjs.com/package/bee-queue), and [Agenda](https://www.npmjs.com/package/agenda).

Thanks for reading
 🕊 `Peace`

---

## Try Our new product for free!
[DocsAI](https://docsai.app/) - 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](https://docsai.app/pricing) Just contact me for personalized pricing !

![docsAi](https://firebasestorage.googleapis.com/v0/b/shrihari-personal-storage.appspot.com/o/banner-docs-jpeg.jpeg?alt=media&token=45c47666-de2a-4e02-8881-beb6e43ce581)



One common cron problem is when a cron job takes longer to complete than the interval between two...

Node.js Cron: Handling Overlapping Tasks Like a Noob

There ever been the time where you would repeatedly testing something manually when you are developing?

For example Form Validations , Filling up the forms and user flows. 

**Who is this blog for ?**
This is meant for developers who are willing to go extra mile for testing their flow with automation. (This feature is still experimental)

**Example**
Lets assume this wierdly layed out form where the **_Next_** button is disabled until all the details are filled. We're working on the 2nd step where we would want to click next and test something.

Imagine going over 20 times manually filling this up! That is where chrome recorder comes in 😇

![User Form](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rcvzj0rrh7frw7s6vhio.png)

This is what recorder does. For the very first time I train the recorder do what I am doing and from next time onwards we can just let the recorder take control doing that.

![Chrome Recorder Demo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iq1hu4i5ozdg2wk6in2x.gif)

Lets see how we can do this 
1. Open your console / Developer tools 
2. Press **CMD/CTRL + SHIFT + P** to open command run 
3. Type **Recorder** and click **Show Recorder**
4. Click **Start new recording** and do the flow. Thats it


![Show Recorder](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/id89vydq6lafi0dah81a.png)

![Demo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h2kz5gcul09xq0uui6iw.gif)
 
There are lot of options after you have done recording.

You can export as json and share.
![Export](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2gi87mdbpsfkg68l8rq7.png)

All the events can be edited such as value changes and other stuff. You can also **add timeouts** to make way for api calls.
![Event Changes](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e5dvabqkxs6utdxob89o.png)

For more information visit [Record, replay, and measure user flows](https://developer.chrome.com/docs/devtools/recorder/)

I have tested this feature in Angular 11 and Nextjs. Its safe to say I've saved time ( lot of boring stuff ) at my company when testing flows.
 
_Peace_ 🕊

--- 

If you are here it means you may have enjoyed reading this blog. Just follow me @shrihari which will motivate to write more, contribute open source.

You can make me drink [Buttermilk 🥛](https://www.buymeacoffee.com/shriharimohan). Small support comes a long way!

Subscribe If you want to receive these blogs in your mail from @[Medium](https://medium.com/@shriharimohan) for free!

---
## Try Our new product for free!
[DocsAI](https://docsai.app/) - 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](https://docsai.app/pricing) Just contact me for personalized pricing !

![docsAi](https://firebasestorage.googleapis.com/v0/b/shrihari-personal-storage.appspot.com/o/banner-docs-jpeg.jpeg?alt=media&token=45c47666-de2a-4e02-8881-beb6e43ce581)

---

## More Free Articles From me 
{% embed https://dev.to/shrihari/51-100-510-why-you-have-to-be-careful-with-doubles-and-floats--29eg %}

{% embed https://dev.to/shrihari/top-ui-frameworks-for-angular-and-react-1951 %}

{% embed https://dev.to/shrihari/colors-design-inspiration-websites-for-new-comers-1lcb %}

 


There ever been the time where you would repeatedly testing something manually when you are...

The Chrome Dev Tool you are missing : FEAT Recorder



![Og Image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s7p9tbevc9wqkvmy2cbr.png)

## 1. Not afraid of learninig something new ! 
You just be like "give me some time , this shit can be done!". You will just bypass the fear of learning something new. 

At the end of the day you just work with what suits your needs and learning new is the part of development.

## 2. Syntax ain't a problem
You are far better with your syntax skills even when learning the new language.

## 3. You Stop watching Youtube/Tutorial Videos
You directly go to the docs where you would find stuff easily and complain about inconsistencies in the docs. 

You prefer reading rather than watching a video because ultimately you develop the habit of finding what you need when reading easily.

## 4. You start exploring other things beyond coding.
Such as writing a documentation/blogs for what you do , writing test cases , automating a testing flow and cloud related things.


_Peace_ 🕊

--- 

If you are here it means you may have enjoyed reading this blog. Just follow me @shrihari which will motivate to write more, contribute open source.

You can make a drink [Buttermilk 🥛](https://www.buymeacoffee.com/shriharimohan). Small support comes a long way!

Subscribe If you want to receive these blogs in your mail from @[Medium](https://medium.com/@shriharimohan) for free!

---
## Try Our new product for free!
[DocsAI](https://docsai.app/) - 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](https://docsai.app/pricing) Just contact me for personalized pricing !

![docsAi](https://firebasestorage.googleapis.com/v0/b/shrihari-personal-storage.appspot.com/o/banner-docs-jpeg.jpeg?alt=media&token=45c47666-de2a-4e02-8881-beb6e43ce581)

---

## More Free Articles From me 

{% embed https://dev.to/shrihari/the-chrome-dev-tool-you-are-missing-feat-recorder-4ao5 %}

{% embed https://dev.to/shrihari/top-ui-frameworks-for-angular-and-react-1951 %}

{% embed https://dev.to/shrihari/colors-design-inspiration-websites-for-new-comers-1lcb %}


1. Not afraid of learninig something new !   You just be like "give me some time , this...

You ain't a beginner developer no more!


## 📧 Creating email templates & other boilder plates
In our app we do send a lot of **mail notifications** to the users and creating a template is hell of a work. Also we can get **HTML Email** template. 

The same can be used to create UI friendly texts all over the web pages

![Creating Email Templates](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7tpoy0cvbj24if8dzv8p.png)

## 🔡 Explaning stuff like regexes.
I have used it many times, never really got to sit down and leart properly. I have to do it soon. Often chat gpt shines when explaining something.

### Forming Regex 
![Forming Regex](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j3z9kzgi5bc0q6ftluxt.png)

### Explaining Regex
![Explaining Regex](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/suor737vmsvb56gms4h6.png)

## 📜 Getting documentation
I always do docs first then stackoverflow which really helps in the learning.

![Getting documentation](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k3uqz2lkcnlshrsuyoq0.png)

_Peace 🕊_


---

If you are here it means you may have enjoyed reading this blog. Just follow me @shrihari which will motivate to write more.

You can make a drink [Buttermilk 🥛](https://www.buymeacoffee.com/shriharimohan). Small support comes a long way!

Subscribe If you want to receive these blogs in your mail from @[Medium](https://medium.com/@shriharimohan) for free!

## Try Our new product for free!
[DocsAI](https://docsai.app/) - 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](https://docsai.app/pricing) Just contact me for personalized pricing !

![docsAi](https://firebasestorage.googleapis.com/v0/b/shrihari-personal-storage.appspot.com/o/banner-docs-jpeg.jpeg?alt=media&token=45c47666-de2a-4e02-8881-beb6e43ce581)

##More Free Articles from me
{% embed https://dev.to/shrihari/oauth-for-beginners-and-key-terms-1plo %}

{% embed https://dev.to/shrihari/navbar-with-background-blur-aesthetic-look-in-2-lines-of-code--4kp6 %}

{% embed https://dev.to/shrihari/why-array-index-starts-with-0-a-pointers-magic--j53 %}










📧 Creating email templates &amp; other boilder plates   In our app we do send a lot of mail...

Utilizing Chat GPT as a Web Developer

Hello people if you're a terminal or command person you would really wanna know these 2 things.


I have been using [iterm2](https://iterm2.com/) in mac and [Terminator](https://terminator-gtk3.readthedocs.io/en/latest/) in linux for a very long time because it provides me with the helpful feature that can split a single terminal window in to multiple panes.

When working with several terminal windows, this multiple pane view is extremely useful for organising them.

![Iterm2 Split pane view](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pj0bfb48vz3wmdocf7mq.png)

## 1. Fig
{% embed https://fig.io/ %}

This man autocompleted almost everything from reading package.json for commands ( web development related work) to github and basic command line operations.

Here is some basic web dev and git flows.

![Web Dev & Git Flows](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r14z2fi6mvyri7hsviiz.gif)

This is currently stable in mac , beta in linux and in the development for windows.

## 2. theFuck
{% embed https://github.com/nvbn/thefuck %}


![Fuck helping me in git](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/238xm99zy7wmlu267nky.gif)

Yep you heard that right and _The fuck_ is available for **Mac and Linux**.

When I make spelling errors in commands, I say “**fuck**,” and they take it personally. It doesn’t have to be that word personsally if its NSFW. We can configure to something like Jesus!

It doesn't have to be that word personsally if its NSFW. We can configure to something like **Jesus**

For my purposes, it works flawlessly, and I also have an Ubuntu laptop where I frequently use it.

_Peace_🕊

---

If you are here it means you may have enjoyed reading this blog. Just follow me @shrihari which will motivate to write more, contribute open source.

You can make a drink [Buttermilk 🥛](https://www.buymeacoffee.com/shriharimohan). Small support comes a long way!

Subscribe If you want to receive these blogs in your mail from @[Medium](https://medium.com/@shriharimohan) for free!

## Try Our new product for free!
[DocsAI](https://docsai.app/) - 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](https://docsai.app/pricing) Just contact me for personalized pricing !

![docsAi](https://firebasestorage.googleapis.com/v0/b/shrihari-personal-storage.appspot.com/o/banner-docs-jpeg.jpeg?alt=media&token=45c47666-de2a-4e02-8881-beb6e43ce581)

## More Free Articles From me 

{% embed https://dev.to/shrihari/the-chrome-dev-tool-you-are-missing-feat-recorder-4ao5 %}

{% embed https://dev.to/shrihari/top-ui-frameworks-for-angular-and-react-1951 %}

{% embed https://dev.to/shrihari/colors-design-inspiration-websites-for-new-comers-1lcb %}




Hello people if you're a terminal or command person you would really wanna know these 2 things.  I...

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

Internally Integers and Floats are stored differently.
This is how integers are stored depending upon the machine the number of bits will be different. ( Normally it will be 32 or 64 bit)

![Integers Representation](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wdu0o67rohl3rua26sd9.png)

By default most of the modern languages save a float/double 
as double precision( 64 Bit) But for this blog I will show you a 32 bit model! For the same value 20 but 20.0 will be saved in the IEEE754 Double Precision Format.

Below is the image showing single precision format
![32 Bit Single Precision](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7dcuuvvpp1gh8w18t5k8.png)


## But why ?
This is because we can save integers easily in the binary form but not floats. Floats are special numbers and always require special care when dealing them especially if you're using them for calculations. [This talks about Floats and Binary](https://www.log2base2.com/storage/how-float-values-are-stored-in-memory.html)

## 5.1
We can see there are some errors during the conversion of this float to binary. This is why we get this title.

![5.1 * 100 ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8cztjig8pttqmznbjarb.png)
 
We had this problem when we were developing a payment page as the input should be number. 

The simplest solution is to use regex pattern for number and input type = "text"

. _Peace 🕊_

 
---

If you are here it means you may have enjoyed reading this blog. Just follow me @shrihari which will motivate to write more and contribute open source and may considering a [buttermilk 🥛](https://www.buymeacoffee.com/shriharimohan).

---
## Try Our new product for free!
[DocsAI](https://docsai.app/) - 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](https://docsai.app/pricing) Just contact me for personalized pricing !

![docsAi](https://firebasestorage.googleapis.com/v0/b/shrihari-personal-storage.appspot.com/o/banner-docs-jpeg.jpeg?alt=media&token=45c47666-de2a-4e02-8881-beb6e43ce581)

---

If you want to receive these blogs in your mail from @[Medium](https://medium.com/@shriharimohan). Subscribe to my blogs 

{% embed https://shrihari-portfolio.vercel.app/blogs %}

## More Free Articles From me 
{% embed https://dev.to/shrihari/a-custom-right-click-menu-on-angular-feat-primeng-4hji %}

{% embed https://dev.to/shrihari/top-ui-frameworks-for-angular-and-react-1951 %}

{% embed https://dev.to/shrihari/colors-design-inspiration-websites-for-new-comers-1lcb %}


 


Internally Integers and Floats are stored differently. This is how integers are stored depending upon...

5.1 * 100 != 510 🤯 , Why you have to be careful with Doubles and Floats !

I have struggled a lot on finding a open source project to contribute just to make my profile good for recruitments and will be a great opportunity to learn how other people really code.

So here is a simple [password generator web app](https://rp-generator.netlify.app/) that is already live.

Let me know if you guys want to contribute so that you can something as project on a resume. 

Share this post to the students who are excited to start.

There are a lot of things that can be done here. Comment down below or contact me at [Twitter](https://twitter.com/papashrihari) I will just start up with some of the issues in the site (Mostly UI and Additonal Enhancements of your choice) 

{% embed https://github.com/ShrihariMohan/random-password-generator %}

Thanks & Happy Coding
_Peace_ 🕊

I have struggled a lot on finding a open source project to contribute just to make my profile good...

discuss

For those who wish to have a better resume. Just Contribute to this.

There ever been the time where you went deep in to the monitor screen just to concentrate on some code ?

There ever been the time where you minify your eyes because the text you are seeing is not clearly visible ?

I used only **dark mode** till today as I was struggling coding in my bright environment. I leaned in to the monitor eventhough the brightness was full. 

![Light Mode](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bthquy3ngvs78iduuxde.png)

![Dark Mode](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w328u01vvlzzgf3tfs3o.png)

If you're comfortable reading code in light mode in your current environment then thats light mode is for you.

As I always work in a well lit environment the light mode really helps see the code sharply. Just like 📝 paper and ink.

Its not just coding but on other places too! I felt more comfortable seeing in light mode in environment.

![Light Mode](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vpq2mgfwkc7mb3odmina.png)

![Dark Mode](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/52io4c9mfxb25c7fd7d2.png)

**These preferences are going to change as the day progress.**
In the well lit environment seeing things in dark mode stresses eyes but goes oppositely in low light environment. 

## Take away !
So ultimately if you are doing a lot of coding in the low light, dark mode is best. If you are doing in day time I prefer light mode ( atleast for me ). 

I do both.

There never been one preference is better than other. Thats why its called preferences! 

Thanks & Cheers!
_Peace_ 🕊

---
## Try Our new product for free!
[DocsAI](https://docsai.app/) - 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](https://docsai.app/pricing) Just contact me for personalized pricing !

![docsAi](https://firebasestorage.googleapis.com/v0/b/shrihari-personal-storage.appspot.com/o/banner-docs-jpeg.jpeg?alt=media&token=45c47666-de2a-4e02-8881-beb6e43ce581)

---

There ever been the time where you went deep in to the monitor screen just to concentrate on some...

Dear Only Dark Mode Users ! FEAT : Light Mode 🔆

##1. NgIf with else
This is a common scenario such as showing Loader where we will use `ngIf="isLoading"` and `ngIf="!isLoading"`. Instead we can use the following syntax.

```typescript
export class HomePageComponent {
  constructor() {}
  isLoading : boolean = false
}
```

```html
<div *ngIf="isLoading else content">
  <h1> Loading ... </h1>
</div>

<ng-template #content>
  <h1> Hello there </h1>
</ng-template>
```

##2. Reuse Static HTML 
By creating a reference to the template we can then use that to reuse with the help of `ng-container` and `ngTemplateOutlet`.
```html

<ng-template #staticContent>
  <h1> 
      This content can be used in this 
      component any number of times
  </h1>
</ng-template>


<ng-container *ngTemplateOutlet="staticContent"></ng-container>
<ng-container *ngTemplateOutlet="staticContent"></ng-container>
<ng-container *ngTemplateOutlet="staticContent"></ng-container>
```

![Static HTML](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oad87ym8vxnrfi2qnpgx.png)

##3. Resue Dynamic HTML With `ng-template`
`ng-template` also will take variables inside that and render dynamically.

```typescript
export class HomePageComponent {
  constructor() {}

  user_1 = {
    id: 1,
    firstName: 'Walter',
    lastName: 'White'
  }

  user_2 = {
    id: 2,
    firstName: 'Jesse' 
  }
}

```

```html
<ng-template #userTemplate let-user>
  <span *ngIf="user">First Name : {{user.firstName}}</span>
  <span *ngIf="user&& user.lastName"> Last Name : {{user.lastName}}</span>
</ng-template>

<ng-template 
*ngTemplateOutlet="userTemplate; context: {$implicit: user_1 }">
</ng-template>
<br>
<ng-template 
*ngTemplateOutlet="userTemplate; context: {$implicit: user_2 }">
</ng-template>

```
![Sample 3](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cza6xwz7ykvu14cet7uo.png)


The context object's keys will be available for binding by the local template let declarations (in this case `let-user`). Using the key **`$implicit`** in the context object will set its value as default.

We can also use the following syntax to assign it to variables without `$implicit` and you can use multiple let declarations in an `ng-template` by separating them with a `comma`. For example, if you have a component with properties user and address, you can use both in an `ng-template` like this

```typescript
export class HomePageComponent {
  constructor() {}
  user = {
    id: 1,
    name: 'Walter',
    lastName: 'White'
  }

  address = {
    street: 'Bakers Street'
  }
}
```

```html
<ng-template #myTemplate let-user="user" let-address="address">
  <p>{{ user.name }}</p>
  <p>{{ address.street }}</p>
</ng-template>

<ng-template 
 *ngTemplateOutlet="myTemplate; 
 context: {user : user , address : address }">
</ng-template>

```

_Peace 🕊_


---
Hey I just made an chrome extension that makes your css debugging easier. Try and give me suggestions to improve. [Find Ghost Css](https://chrome.google.com/webstore/detail/ghost-css-detector/pphfihfikeimkmnjielhjjgapkmnimnm)

If you are here it means you may have enjoyed reading this blog. Just follow me @shrihari which will motivate to write more.

You can make a drink [Buttermilk 🥛](https://www.buymeacoffee.com/shriharimohan). Small support comes a long way!

Subscribe If you want to receive these blogs in your mail from @[Medium](https://medium.com/@shriharimohan) for free!

## Try Our new product for free!
[DocsAI](https://docsai.app/) - 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](https://docsai.app/pricing) Just contact me for personalized pricing !

![docsAi](https://firebasestorage.googleapis.com/v0/b/shrihari-personal-storage.appspot.com/o/banner-docs-jpeg.jpeg?alt=media&token=45c47666-de2a-4e02-8881-beb6e43ce581)

##More Free Articles from me
{% embed https://dev.to/shrihari/how-i-built-a-chrome-extension-that-finds-ghost-css-ghost-css-detector-4aj0 %}

{% embed https://dev.to/shrihari/navbar-with-background-blur-aesthetic-look-in-2-lines-of-code--4kp6 %}

{% embed https://dev.to/shrihari/why-array-index-starts-with-0-a-pointers-magic--j53 %}



1. NgIf with else   This is a common scenario such as showing Loader where we will use...

🚀 Angular ng-templates: Crafting Reusable templates with Ease



Lets say you have some content on your page and whenever user uses `cmd/ctrl + p`  you have to only print the table part.

![Random stuffy using tailwind](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4v3ha50wz32wq7mrh0lu.png)

Now when printing we will get all the stuff fromm our web page. But expected result is the 2nd Image.
![Without](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p5alrh503l3epu8vqpgw.png)
![With](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b59nz27e3hyhx3ud6htg.png)


Here's how you do it. Just add `print-only`  class to whatever stuff you want to print.

The visibility CSS property shows or hides an element without changing the layout of a document.

```css
@media print {
  body {
    visibility: hidden;
  }

  .print-only  {
    visibility: visible;
  }
}
```

_Peace 🕊_

---

If you are here it means you may have enjoyed reading this blog. Just follow me @shrihari which will motivate to write more.

You can make a drink [Buttermilk 🥛](https://www.buymeacoffee.com/shriharimohan). Small support comes a long way!

Subscribe If you want to receive these blogs in your mail from @[Medium](https://medium.com/@shriharimohan) for free!

## Try Our new product for free!
[DocsAI](https://docsai.app/) - 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](https://docsai.app/pricing) Just contact me for personalized pricing !

![docsAi](https://firebasestorage.googleapis.com/v0/b/shrihari-personal-storage.appspot.com/o/banner-docs-jpeg.jpeg?alt=media&token=45c47666-de2a-4e02-8881-beb6e43ce581)




Lets say you have some content on your page and whenever user uses cmd/ctrl + p  you have to only...

Print Particular part of the screen easily when using CMD/CTRL + P in HTML/CSS

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](https://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 

```bash
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.
```ts
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.

```ts
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.

---

The biggest challenge I encountered during Next.js development was the lack of hot reloading when...

Cloudflare Pages NextJs + D1 Database ᐧ My experience developing sharejson

##[1. TS faker](https://ts-faker.vercel.app/)
Generate Fake data using typescript interfaces. Supports JSON and SQL. Its merely a proof of concept it doesn't help when having interfaces composed of other interfaces.

But works well when you have simple structures. I am trying to contact with the author to have more features. [Post by author](https://dev.to/sirwanafifi/ts-faker-generating-fake-data-using-typescript-interfaces-2em2)

![TS Faker](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jadxtevd88wyw1gg96o8.png)

##2. Tailwind Colors
One of the best color pallete available and that too open source ❤️. I use this to choose colors on all projects.

{% embed https://tailwindcss.com/docs/customizing-colors#default-color-palette %}

##[3. Make Types from JSON](https://jvilk.com/MakeTypes/)
I am a huge typescript guy , I use types for almost everthing. Those extra times save a lot of trouble. When working with 3rd party apis,[](url) this is very helpful.

![Make Types](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1bdvjk28ap6qj9daqbpl.png)

##4. Excalidraw
Easy to create sketches and share as png/svg.
{% embed https://excalidraw.com/ %}

##5. MDN Docs
Everything is here !
{% embed https://developer.mozilla.org/en-US/ %}

_Peace_ 🕊

--- 

If you are here it means you may have enjoyed reading this blog. Just follow me @shrihari which will motivate to write more, contribute open source.

You can make me drink [Buttermilk 🥛](https://www.buymeacoffee.com/shriharimohan). Small support comes a long way!

Subscribe If you want to receive these blogs in your mail from @[Medium](https://medium.com/@shriharimohan) for free!

---
## Try Our new product for free!
[DocsAI](https://docsai.app/) - 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](https://docsai.app/pricing) Just contact me for personalized pricing !

![docsAi](https://firebasestorage.googleapis.com/v0/b/shrihari-personal-storage.appspot.com/o/banner-docs-jpeg.jpeg?alt=media&token=45c47666-de2a-4e02-8881-beb6e43ce581)

---
## More Free Articles From me 

{% embed https://dev.to/shrihari/the-chrome-dev-tool-you-are-missing-feat-recorder-4ao5 %}

{% embed https://dev.to/shrihari/51-100-510-why-you-have-to-be-careful-with-doubles-and-floats--29eg %}

{% embed https://dev.to/shrihari/top-ui-frameworks-for-angular-and-react-1951 %}





1. TS faker   Generate Fake data using typescript interfaces. Supports JSON and SQL. Its...

Utilities I use for web development. 🗿

When you spend enough time at the front-end development, There will be some irritating moments where you couldn't figure out what is happening with the margins/paddings and scroll issues.

The `ghost-css` comes in handly when tackling these problems. We just make the following to all the elements.

```css
* {
    background: #171717 !important;
    color: #EDEDED !important;
    outline: solid #DA0037 1px !important;
  }
```
The above code does the following to your website.  You can see there is a small problem with the alignment with `Silly Project` , 2nd one is slightly above. 
![Without this](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/981v05dmx3y70xxlyxgq.png)

![Sample Example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5evwyh6u04cmqmrcg4us.png)

The first horizontal line we can see this clearly and the problem is because of the video being different heights. 

This 3 lines of code have saved me a lot of debugging with getting to know whats wrong with the code easily.

More use cases and found an existing post on dev.to after writing this. 
{% embed https://dev.to/david_ojeda/how-to-find-ghost-css-elements-1h00 %}

If you are here it means you may have enjoyed reading this blog. Just follow me @shrihari which will motivate to write more.

You can make a drink [Buttermilk 🥛](https://www.buymeacoffee.com/shriharimohan). Small support comes a long way!

Subscribe If you want to receive these blogs in your mail from @[Medium](https://medium.com/@shriharimohan) for free!

_Peace 🕊_
___
## Try Our new product for free!
[DocsAI](https://docsai.app/) - 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](https://docsai.app/pricing) Just contact me for personalized pricing !

![docsAi](https://firebasestorage.googleapis.com/v0/b/shrihari-personal-storage.appspot.com/o/banner-docs-jpeg.jpeg?alt=media&token=45c47666-de2a-4e02-8881-beb6e43ce581)

---

## More things from me
{% embed https://dev.to/shrihari/the-chrome-dev-tool-you-are-missing-feat-recorder-4ao5 %}

{% embed https://dev.to/shrihari/print-particular-part-of-the-screen-easily-when-using-cmdctrl-p-5c5 %}

{% embed https://dev.to/shrihari/oauth-for-beginners-and-key-terms-1plo %}









When you spend enough time at the front-end development, There will be some irritating moments where...

Finding Ghost elements with Ghost CSS !

The very first language I learnt was C and it took months to understand pointers. I can never forget pointers in my life. 

If you know pointers and arrays here is the summary of this blog
1. arr[] -> arr behaves like a pointer that holds the **First element address**
2. arr[0] = * (arr + 0) = * arr, here **+** is not decimal arithmetic but **pointer arithmetic**. Thats why index starts with 0.


For more details here you go!
The only thing you should know to understand is

`&` - means **address of**
`*`  - means **value at that address**
`%p` - Format Specifier used to print address
> size of a data type may vary with compiler and operating systems.

We will understand what `&` and `*` means with a simple C program. 

```c
#include <stdio.h>

int main() {
    int value = 10 ;
    int * addressOfValue = &value;
    
    printf("Initial Address %p\n", addressOfValue);
    printf("After Adding 1 %p", addressOfValue + 1);
    printf("Value %d", *addressOfValue);

    return 0;
}
```

## Code Breakdown
- `value` is a int variable holding 10
- The size of the `value` is 4 bytes 
- `addressOfValue` is a (int *) type. This means `addressOfValue` contains address of a integer variable
- The size of the `addressOfValue` is 4 bytes ( Pointer Variable size )
- `&value` is address of value. We're assigning the address of integer variable to `addressOfValue`

## Output
```bash
Initial Address 0x7ffc1c122f1c
After Adding 1 0x7ffc1c122f20
Value 10 
```

To improve clarity, let's convert the hexadecimal above to decimal.

![Pointers & Values](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kl0rr1sntehtel5xs2mm.png)


0x7ffcb63b6e7c = 140720779439900
0x7ffcb63b6e80 = 140720779439904

we used **value of** operator (*) to print the value at the address. That is 10

There is a difference of 4 Bytes. We added 1 to the `addressOfValue` it **added 4 bytes**. So here addition is not numbers but size of the value (4 Bytes).

If long int is 8 Bytes. Then addition of 1 to the address will **add 8 bytes**. 

![Size Matters](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cpnapc6tk9t4npnszu8v.gif)

So what I am trying to say here is 
```bash
0x7ffcb63b6e7c + 0 = 140720779439900
0x7ffcb63b6e7c + 1 = 140720779439904
```

## Array & Pointers Magic
The Below is a simple Array for loop where index starts with 0. You get where I am going .. see the next piece of code
```c
#include <stdio.h>

int main() {
   int arr[] = {1 , 2 , 3 };
   int arrSize = 3;           
   
   for ( int ind = 0 ; ind < arrSize ; ind ++) {
       printf("%d ", arr[ind]);
   }
   return 0;
}

// Output
// 1 2 3
```

I will change the above code with the help of pointers.
```c
#include <stdio.h>

int main() {
   int arr[] = {1 , 2 , 3 };
   int arrSize = 3;           
    
   int * arrPointer = arr;
    
   for ( int ind = 0 ; ind < arrSize ; ind ++) {
       printf("%d ", * ( arrPointer + ind ) );
   }
   return 0;
}

//Output
//1 2 3
```
## Code Breakdown
- arrPointer gets the address of arr.  Note that we didn't use & operator because arr itself is a **special pointer** pointing to first element in an array
- We changed the printf that * ( arrPointer + ind)
```bash
 * (0x7ffcb63b6e7c + 0) = *(140720779439900) = 1 
 * (0x7ffcb63b6e7c + 1) = *(140720779439904) = 2 
 * (0x7ffcb63b6e7c + 2) = *(140720779439908) = 3 

```

To be more precise this is what happens ,
**arr[ind] = *(arr + ind)**
```bash
#include <stdio.h>

int main() {
   int arr[] = {1 , 2 , 3 };
   int arrSize = 3;           
   
   for ( int ind = 0 ; ind < arrSize ; ind ++) {
       printf("%d ", * ( arr + ind ) );
   }
   return 0;
}

// Output
// 1 2 3
```



_peace🕊_

---

If you are here it means you may have enjoyed reading this blog. Just follow me @shrihari which will motivate to write more, contribute open source.

You can make a drink [Buttermilk 🥛](https://www.buymeacoffee.com/shriharimohan). Small support comes a long way!

Subscribe If you want to receive these blogs in your mail from @[Medium](https://medium.com/@shriharimohan) for free!

## Try Our new product for free!
[DocsAI](https://docsai.app/) - 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](https://docsai.app/pricing) Just contact me for personalized pricing !

![docsAi](https://firebasestorage.googleapis.com/v0/b/shrihari-personal-storage.appspot.com/o/banner-docs-jpeg.jpeg?alt=media&token=45c47666-de2a-4e02-8881-beb6e43ce581)

## More Free Articles From me 

{% embed https://dev.to/shrihari/the-chrome-dev-tool-you-are-missing-feat-recorder-4ao5 %}

{% embed https://dev.to/shrihari/two-things-that-make-my-terminal-experience-awesome-in-mac-3eie %}

{% embed https://dev.to/shrihari/colors-design-inspiration-websites-for-new-comers-1lcb %}





The very first language I learnt was C and it took months to understand pointers. I can never forget...

Why Array Index Starts with 0 , A pointers magic !

This is in India!
I completed my college in **2021 May** with a offer to a MNC company in **2020 Oct**.

From that MNC I was asked to study a shit load of stuff Like Spring boot , SQL, JDBC, JUnit, HTML, CSS, Javascript, Angular, Cypress.

Yes I worked hard that 6 months with a help of my brother @koushikmohan1996 only to know, I am not a great fit for that company and Glassdoors reviews were worse. My college people have some agreement with the MNC to select certain people. Don't know about the politics but its not good. I hate the college and management. ( Hate is a strong word thats why I am using it )

Luckily I panicked and started applying for startups using [Angel List](https://angel.co). 

Rejections were so high without even a single round. Lack of experience is a curse in start-ups. 

But there was that 1 Guy who sent me a **4 day Full-Stack website challenge** in MEAN stack. At that time I knew only A (Angular with bootstrap).  Remaining MEN (Mongo Express Node) I had to depend on my brother. Eventhough I understand the APIs and DB , Syntatically I was struggling.

My brother gave me a sample of 1 route , 1 controller with mongodb setup. Even if everything went south I know I could depend on him. He is just a fucking awesome guy 😎.

I took that setup and I went all day and night. But it took 5 days for me to complete it. Whatever I wrote I clearly explained why I made those decisions and He just selected me as a First Employee of the company. 

I started in that company after 2 days.

##Here is the code that got me thejob.
{% embed https://github.com/ShrihariMohan/forum %}

---

## Why I had to leave after 1 year ?

- Since it was Work from home I was home all day without any human interactions.

- I was working alone for a very long time (4 months) as a only employee. Even though other people joined we're independently working.

- Yes I learnt a lot of stuff from infra -> code -> design but the process was slow and decisions were rough to me. Because there is no tech lead who could've solved a problem in minutes that took days. Learning from senior will be the best way to know how things work in a company. The CTO was not  technical but he understands.

- I was working more than 10Hrs and I was missing out the balance.

- The money was low. Its less than What I was offered at the MNC

_Peace 🕊_

---

If you are here it means you may have enjoyed reading this blog. Just follow me @shrihari which will motivate to write more.

You can make a drink [Buttermilk 🥛](https://www.buymeacoffee.com/shriharimohan). Small support comes a long way!

Subscribe If you want to receive these blogs in your mail from @[Medium](https://medium.com/@shriharimohan) for free!
 
## Try Our new product for free!
[DocsAI](https://docsai.app/) - 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](https://docsai.app/pricing) Just contact me for personalized pricing !

![docsAi](https://firebasestorage.googleapis.com/v0/b/shrihari-personal-storage.appspot.com/o/banner-docs-jpeg.jpeg?alt=media&token=45c47666-de2a-4e02-8881-beb6e43ce581)


This is in India! I completed my college in 2021 May with a offer to a MNC company in 2020 Oct.  From...

How I Got My First Full-Stack Developer Job as a Fresher in a Start-Up!

When our company recently experienced a crash, we were tasked with analyzing a massive 16GB/perDay log file. Thats when we found out about Glogg.

For those who lack a centralized log management system like `CloudWatch`, `Loggly`, or `Sentry` , `Glogg` is the way.

glogg is a multi-platform GUI application to browse and search through long or complex log files. It is designed with programmers and system administrators in mind. glogg can be seen as a graphical, interactive combination of grep and less.

{% embed https://glogg.bonnefon.org/ %} 

A fork of glogg for mac 
{% embed https://klogg.filimonov.dev/ %}

Regarding very large files, such as the 16GB file in our case, the indexing process typically takes around 30 seconds, while searches can be completed within 1-2 minutes. This approach is much more efficient than using terminal commands such as `less`, `more`, and `tail`, which can be difficult to follow and provide little insight into their processes.

![Klogg/Glogg](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sgeyhwqa0sy7i62o24sp.png)

While Glogg can certainly provide a temporary solution for disorganized logs, it's important to note that a comprehensive log management system, such as CloudWatch, Loggly, or Sentry, is the ideal long-term solution. These platforms offer centralized storage, easy accessibility, and powerful search capabilities that enable you to efficiently manage and analyze your logs. 

_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 🥛](https://www.buymeacoffee.com/shriharimohan). Small support comes a long way!

Subscribe If you want to receive these blogs in your mail from @[Medium](https://medium.com/@shriharimohan) for free!

## Try Our new product for free!
[DocsAI](https://docsai.app/) - 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](https://docsai.app/pricing) Just contact me for personalized pricing !

![docsAi](https://firebasestorage.googleapis.com/v0/b/shrihari-personal-storage.appspot.com/o/banner-docs-jpeg.jpeg?alt=media&token=45c47666-de2a-4e02-8881-beb6e43ce581)






When our company recently experienced a crash, we were tasked with analyzing a massive 16GB/perDay...

Glogg your way through mountains of logs

These are the tags I Frequently use everyday in my development.

My favourite is switching to **default image** if the **src** is not available (Its in last).

##1. `<small>` and `<strong>`
At times you can easily get lost with `font-sizes` and `font-weights` . This comes in handy. You may say we can use `<b> Content with Bold</b>`but `<b>` is to bring attention. `<strong>` gives more importance. [Read More](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/strong) 

```html
<p> Hey There This is  <strong> great important </strong> </p>
<small> No need for this to be big </small>
```
![Strong and Small](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/le7efnwdp15znknd1z1g.png)

##2. `<dl>`,  `<dd>` and  `<dt>` 
The Description list element is used to list certain terms and descriptions. I mostly use this to represent `label` and `value` that has like 20 of them to display.
```html
 <dl>
    <dt> Like ❤️ </dt>
    <dd> If you are interested in these type of blogs </dd>
    
    <dt> Comment  </dt>
    <dd> If you want to add some more to this list </dd>
    
    <dt> Save For Later </dt>
    <dd> Its absolutely Free! </dd>
  </dl>
```

```css
dt {
  font-weight: bold;
}
dd {
  margin-bottom: 1rem;
}
```
![Description List](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uo2pia65cql677x8pief.png)

##3. `<fieldset>` and `<legend>`
I think one of the most underrated tag, Because I love this and always use it. It gives a great border and legend text. Try to create this without fieldset and you see how tough that will be. (atleast for me)
```html
<fieldset>
  <legend> <strong> You need only MDN Docs </strong></legend>
  <dl>
    <dt> Like ❤️ </dt>
    <dd> If you are interested in these type of blogs </dd>
    
    <dt> Comment  </dt>
    <dd> If you want to add some more to this list </dd>
    
    <dt> Save For Later </dt>
    <dd> Its absolutely Free! </dd>
  </dl>
</fieldset>
```
```css
fieldset {
  padding: 1rem;
  border-radius: 8px;
}

legend {
  padding: 0.5rem;
  border: 3px solid gray;
  border-radius: 8px;
}
```
![Fieldser](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zzh7cffjkx5iuudn25va.png)

##4. Fallback to default Image if src not available.
Say I have 2 image links 
- https://picsum.photos/id/237/200/300 - Cute Dog
- https://picsum.photos/200/300 - Some Random Image (Default Image)

Here's how the fallback works
```html
<object data="https://picsum.photos/id/237/200/300" class="image-container">
  <img src="https://picsum.photos/200/300" />
</object>
```
```css
.image-container {
  height:300px;
  width:300px;
}
```
Expected Result for the above code is the dog 🐶 ! Yes dogs comes.

![Dog Result](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l8q632fudvcnpjqa026a.png)

For the sake of this I will just remove the `data` attribute value. This works with invalid links , Content not available in that link. So we can have a fallback default image.

```html
<object data="" class="image-container">
  <img src="https://picsum.photos/200/300" />
</object>
```
![Fallback Image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cobko6jm70rj09hbxj3v.png)

This results to the random image. This is pretty handy when there is no user compulsion to upload images so we can show random default image without the need of `if/else` in javascript or using some weird `onerror` callbacks.

_Peace 🕊_

---

If you are here it means you may have enjoyed reading this blog. Just follow me @shrihari which will motivate to write more, contribute open source.

You can make a drink [Buttermilk 🥛](https://www.buymeacoffee.com/shriharimohan). Small support comes a long way!

Subscribe If you want to receive these blogs in your mail from @[Medium](https://medium.com/@shriharimohan) for free!

## Try Our new product for free!
[DocsAI](https://docsai.app/) - 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](https://docsai.app/pricing) Just contact me for personalized pricing !

![docsAi](https://firebasestorage.googleapis.com/v0/b/shrihari-personal-storage.appspot.com/o/banner-docs-jpeg.jpeg?alt=media&token=45c47666-de2a-4e02-8881-beb6e43ce581)

{% embed https://dev.to/shrihari/the-chrome-dev-tool-you-are-missing-feat-recorder-4ao5 %}

{% embed https://dev.to/shrihari/two-things-that-make-my-terminal-experience-awesome-in-mac-3eie %}

{% embed https://dev.to/shrihari/colors-design-inspiration-websites-for-new-comers-1lcb %}






These are the tags I Frequently use everyday in my development.  My favourite is switching to default...

You may have missed these HTML Tags/Tricks.

Are you that guy who does email and password for sign ups! Don't be that guy you don't have to do this anymore.

Because if thats the case then you have to do the following
- Verify Email
- Forgot Password
- Encrypt/Decrypt passwords

Open Authorization helps in retrieving the users information in a secure manner. A password less login is more secure and you don't forget.

OAuth doesn’t give away your password instead uses access tokens to prove an identity.

##Flow of Oauth
![OAUTH Flow](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4y4mwsnqwahf27l8ko8v.png)

1. At you web app (frontend) you have sign up with google, facebook.

2. At your backend you will have a clientId , clientSecret ( provided by the 3rd party a.k.a google , facebook) which generates a sign up url and redirects to it. Now you see your 3rd party screen to log in. You log in.

3. After successful login, a request from 3rd party will be sent to your backend with details of the user.

4. Now you redirect from your backend to frontend with the user details.

## Key Terms
**Client Id** 
A client Id will be the public identification of your app.

**Client Secret**
A secret is used to encrypt/decrypt sensitive data , authorizes app and should be kept hidden in the backend. This should be only used to make requests.

**Redirect URI**
When setting up oauth there will be _Developer Portal_ provided by a 3rd party services. Here only you will get yours Ids and Secrets. Here you have to add a redirect URI that is the 3rd step. The 3rd party will call your api which is provided in this url that contains accessToken and other stuff.

**Access Token**
An access token is used to identify and authorize users. An accessToken will always expire after some amount of time.

**Refresh Token**
This is used to refresh the accessToken. If the accessToken has 1 hr validity then the refresh token may have 24hrs validity. This is used to avoid the frequent log in with 3rd party to get accessTokens.

**State**
If you want a specific information from the 3rd party like **userId** you set the id in the state. whenever the 3rd party calls our backend you will have the id with you in the state. Almost all oauth, we will be using this to pass some ids and references.

**Scope**
When setting up oauth you will be asked for a scope. A scope limits the access to certain parts of user's private data.
For example , 
Google may share your Displayname , Email , phone. But not other details like Date of birth. Scopes provide a way to limit the amount of access that is granted to an access token.

## Why should you use it ?
1. There is no need to maintain usersname/passwords. 
2. No Need to validate emails. 
3. No forgot passward scenarios.

Overall its just makes our login system more easy and secure.
If nothing works for you then you should try **Magic Links* that's for another day.

_Peace 🕊_

---

If you are here it means you may have enjoyed reading this blog. Just follow me @shrihari which will motivate to write more.

You can make a drink [Buttermilk 🥛](https://www.buymeacoffee.com/shriharimohan). Small support comes a long way!

Subscribe If you want to receive these blogs in your mail from @[Medium](https://medium.com/@shriharimohan) for free!

## Try Our new product for free!
[DocsAI](https://docsai.app/) - 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](https://docsai.app/pricing) Just contact me for personalized pricing !

![docsAi](https://firebasestorage.googleapis.com/v0/b/shrihari-personal-storage.appspot.com/o/banner-docs-jpeg.jpeg?alt=media&token=45c47666-de2a-4e02-8881-beb6e43ce581)

##More Free Articles from me
{% embed https://dev.to/shrihari/print-particular-part-of-the-screen-easily-when-using-cmdctrl-p-5c5 %}

{% embed https://dev.to/shrihari/navbar-with-background-blur-aesthetic-look-in-2-lines-of-code--4kp6 %}

{% embed https://dev.to/shrihari/why-array-index-starts-with-0-a-pointers-magic--j53 %}




 



Are you that guy who does email and password for sign ups! Don't be that guy you don't have to do...

OAUTH for beginners and Key Terms.



{% embed https://chrome.google.com/webstore/detail/ghost-css-detector/pphfihfikeimkmnjielhjjgapkmnimnm/ %}
Injecting the ghost-css in the current tab that helps find the elements.
![Sample](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a36gutqj8r5rsfx1rri5.gif)

{% embed https://dev.to/shrihari/finding-ghost-elements-with-ghost-css--1fa0 %}


##Folder Structure

![Folder structure](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3mtpge2fvll57kzf3xk5.png)

`manifest.json` -  Every extension requires a JSON-formatted file, named manifest.json, that provides important information. This file must be located in the extension's root directory. [More information](https://developer.chrome.com/docs/extensions/mv3/manifest/)

Lets see whats `manifest.json` looks like
```js
{
  "name": "Ghost CSS Detector",
  "version": "1.0.3",
  "description": "Find the ghost css in your app in a single click.",
  "manifest_version": 3,
  "author": "Shrihari Mohan",
  "action": {
    "default_icon": {
      "48": "assets/icon.png",
      "96": "assets/icon.png"
    }
  },
  "icons": {
    "48": "assets/icon.png",
    "96": "assets/icon.png"
  },
  "host_permissions": ["<all_urls>"],
  "permissions": ["scripting"],
  "background": {
    "service_worker": "bg-ghost.js"
  }
}
```

These are some boiler plate which you can find more about [here](https://developer.mozilla.org/en-US/docs/Web/Manifest)

Some of the important things to note is
`host_permissions` - Specifies the Domain for which the extension should be allowed. For my requirements it should be allowed to all URLs. More from [Google Dev](https://developer.chrome.com/docs/extensions/mv3/declare_permissions/) 

`permissions` - Gives your extension access to the chrome.scripting API. [More on permissions](https://developer.chrome.com/docs/extensions/mv2/declare_permissions/#manifest)

`background.service_worker` - This is where we enable/disable the css.

Let's see our ghost css and service worker
```css
* {
    background: #171717 !important;
    color: #EDEDED !important;
    outline: solid #DA0037 1px !important;
  }
```

```js
// Insert Ghost Css
const addGhostCss = async (tabId) => {
  await chrome.scripting.insertCSS({
    files: ["ghost.css"],
    target: { tabId },
  });

  //Setting Custom ON/OFF Bg color 
  chrome.action.setBadgeBackgroundColor({
    color: "#DA0037",
    tabId
  });
}

// Remove Ghost Css
const removeGhostCss = async (tabId) => {
  await chrome.scripting.removeCSS({
    files: ["ghost.css"],
    target: { tabId },
  });

  //Setting Custom ON/OFF Bg color 
  chrome.action.setBadgeBackgroundColor({
    color: "#171717",
    tabId
  });
}

// Capture the onClick of the ghost icon at the top bar.
chrome.action.onClicked.addListener(async (tab) => {
  
  // Getting the state of previous badgeText
  const prevState = await chrome.action.getBadgeText({ tabId: tab.id });
  const nextState = prevState === 'ON' ? 'OFF' : 'ON'
  if ( nextState == 'ON') {
    await addGhostCss(tab.id)
  }
  else {
    await removeGhostCss(tab.id)
  }
  chrome.action.setBadgeText({text: nextState , tabId: tab.id });
});

// Setting Default Value
chrome.runtime.onInstalled.addListener(() => {
  chrome.action.setBadgeText({
    text: "OFF"
  });

  chrome.action.setBadgeBackgroundColor({
    color: "#171717"
  });
});
```

If you've like the extension and use it, Please review it and make suggestions to improve.

[Leave a review](https://chrome.google.com/webstore/detail/ghost-css-detector/pphfihfikeimkmnjielhjjgapkmnimnm/)
[Click to Create a Issue.](https://github.com/ShrihariMohan/ghost-css-detector/issues)


_Peace 🕊_


---

If you are here it means you may have enjoyed reading this blog. Just follow me @shrihari which will motivate to write more.

You can make a drink [Buttermilk 🥛](https://www.buymeacoffee.com/shriharimohan). Small support comes a long way!

Subscribe If you want to receive these blogs in your mail from @[Medium](https://medium.com/@shriharimohan) for free!

## Try Our new product for free!
[DocsAI](https://docsai.app/) - 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](https://docsai.app/pricing) Just contact me for personalized pricing !

![docsAi](https://firebasestorage.googleapis.com/v0/b/shrihari-personal-storage.appspot.com/o/banner-docs-jpeg.jpeg?alt=media&token=45c47666-de2a-4e02-8881-beb6e43ce581)

##More Free Articles from me
{% embed https://dev.to/shrihari/oauth-for-beginners-and-key-terms-1plo %}

{% embed https://dev.to/shrihari/navbar-with-background-blur-aesthetic-look-in-2-lines-of-code--4kp6 %}

{% embed https://dev.to/shrihari/why-array-index-starts-with-0-a-pointers-magic--j53 %}


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

Thanks to [William Zola](https://www.mongodb.com/blog/authors/william-zola) for making this possible.

[This article](https://www.mongodb.com/blog/post/6-rules-of-thumb-for-mongodb-schema-design) 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.

---


Thanks to William Zola for making this possible.  This article is a bit more in-depth than mine, if...

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

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."

{% embed https://chat.openai.com/share/96c29e35-09e5-4b02-ab68-61a75f515af6 %}

---

### 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.

```javascript
// 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:

```javascript
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:

```javascript
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 🕊

---


AI Chatbots Are Making Learning to Program Easier  As a developer, I've always found that the best...

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

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!


![Thinking with Try and Catch Curly Braces](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/njzejvscleeug3t1cwfr.jpeg)

##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 🥛](https://www.buymeacoffee.com/shriharimohan). Small support comes a long way!

Subscribe If you want to receive these blogs in your mail from @[Medium](https://medium.com/@shriharimohan) for free!

## More things from me
{% embed https://dev.to/shrihari/efficiently-manage-repeated-requests-in-angular-with-interceptors-4amn %}

{% embed https://dev.to/shrihari/how-i-built-a-chrome-extension-that-finds-ghost-css-ghost-css-detector-4aj0 %}

{% embed https://dev.to/shrihari/beyond-coding-the-devops-tasks-i-do-as-a-web-dev-311f %}


Rejection is a part of life, and for developers, it's no exception. However, these strong individuals...

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

## Using Routing Module Instead Of Module
Because there were no erros in the console and whatever in the component file doesn't render.
```javascript
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`.

![node](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/97w3ol8sr7i57gxhq8k8.png)

## Using Wrong Environments in Postman
I just hit some `post` request to production without realizing for 10 mins.
![Postman](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/asxtpnalukjgqdvirpjt.png)

---
## Try Our new product for free!
[DocsAI](https://docsai.app/) - 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](https://docsai.app/pricing) Just contact me for personalized pricing !

![docsAi](https://firebasestorage.googleapis.com/v0/b/shrihari-personal-storage.appspot.com/o/banner-docs-jpeg.jpeg?alt=media&token=45c47666-de2a-4e02-8881-beb6e43ce581)

---







Using Routing Module Instead Of Module   Because there were no erros in the console and...

Funny Developing Mistakes I Wasted Hours on

##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.](https://dev.to/shrihari/dbeaver-ssh-bastion-host-google-authenticator-how-to-connect-lph)


- 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 🥛](https://www.buymeacoffee.com/shriharimohan). Small support comes a long way!

Subscribe If you want to receive these blogs in your mail from @[Medium](https://medium.com/@shriharimohan) for free!

## Try Our new product for free!
[DocsAI](https://docsai.app/) - 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](https://docsai.app/pricing) Just contact me for personalized pricing !

![docsAi](https://firebasestorage.googleapis.com/v0/b/shrihari-personal-storage.appspot.com/o/banner-docs-jpeg.jpeg?alt=media&token=45c47666-de2a-4e02-8881-beb6e43ce581)

## More things from me
{% embed https://dev.to/shrihari/how-i-built-a-chrome-extension-that-finds-ghost-css-ghost-css-detector-4aj0 %}

{% embed https://dev.to/shrihari/two-things-that-make-my-terminal-experience-awesome-in-mac-3eie %}

{% embed https://dev.to/shrihari/angular-ng-templates-crafting-reusable-templates-with-ease-2dap %}

1. Using SSH collaboration across Dev Tools.    As a developer, you may have found yourself...