DEV Community: Bhoomit Ganatra

Tools I Use to Increase My Productivity.

Bhoomit Ganatra — Sat, 05 Jul 2025 05:59:02 +0000

I’m always looking for ways to save time, reduce friction, and make my workflow smoother. Whether it’s automating boring stuff, avoiding context switching, or just flexing with a bit of Vim, these are the tools I use every day to stay productive (and sometimes just feel productive).

I use macOS, btw.

🐳 OrbStack

OrbStack is my go-to tool for running Docker containers and Linux on macOS. It’s fast, lightweight, and feels way smoother than Docker Desktop. The setup is dead simple, and it gets out of the way so I can focus on building — not waiting for containers to start. If you’re tired of Docker Desktop hogging your resources, this is the upgrade you didn’t know you needed.

🎯 LocatorJS

LocatorJS is a Chrome extension that lets me option-click (or alt-click) on any React component in the browser, and boom — it opens directly in my IDE.

It works with React, Preact, and SolidJS. If you’re tired of digging through the DOM or guessing component names, LocatorJS makes frontend development feel like magic. It even has a Babel plugin for more advanced setups. Also, it’s open source — shoutout to the team behind this gem: GitHub

🔔 Built-in Reminder App

I’ll be honest — I forget stuff. A lot. The built-in reminder app on my phone helps me offload mental clutter. Grocery items? Meeting follow-ups? Random blog ideas at 2 AM? It all goes in here. It’s not fancy, but it keeps me sane. Productivity isn’t just about dev tools — it’s about remembering to reply to your boss too.

🧙 Vim VSCode Extension

I use Vim emulation in VSCode — partly for efficiency, but mostly because it feels cool. Yes, I know I’m flexing. Yes, I still sometimes forget I’m in insert mode. But once you get the muscle memory down, it’s hard to go back.

📦 PackageFlex

PackageFlex is a small but insanely useful Chrome extension. It adds a dropdown on npm package pages showing all the install commands — npm, yarn, pnpm, bun, etc.

As someone who switches between projects with different package managers daily, this saves me the Google search every single time.

🧮 TablePlus

TablePlus is hands-down the best GUI I’ve used for relational databases. Whether it’s PostgreSQL, MySQL, or SQLite, it just works. Clean UI, snappy performance, and helpful features like multi-tab editing, safe mode, and inline editing — it’s made my DB workflows 10x more enjoyable.

💬 Discord (Yes, Seriously)

You might think Discord is just for memes and late-night debates on whether tabs or spaces are better. But I also use Discord’s webhooks to post automated messages from my scripts or apps. No frontend? No problem. Just push data to a Discord channel and move on. It’s a surprisingly effective and lightweight way to debug, log, or share updates.

🖥️ Zsh + Dotfiles

As a developer, you probably spend a good chunk of your day in the terminal — so why not make it look good and feel just right? A well-configured shell can boost your productivity and make your workflow smoother (and cooler).

I use Zsh with a few essential plugins like autosuggestions, syntax highlighting, and a custom theme. Everything is wired up through my personal dotfiles — feel free to check them out here:

👉 github.com/bhumit070/dotfiles

It’s a small thing that makes a big difference when you’re living in the terminal.

🔥 Bruno

Bruno is an open-source API client that works completely offline and integrates seamlessly with Git. Think of it as a clean, developer-first alternative to tools like Postman. I love that my API collections live alongside my code, version-controlled, and portable. No account, no sync issues — just open it and start hitting endpoints.

📸 Flameshot

Sometimes you just need to show QA that “it works on my machine” — with proof. Flameshot is my go-to for quick, clean, and annotated screenshots. It’s open source, lightweight, and makes it super easy to capture and highlight exactly what you need. Bonus: it’s great for writing documentation or bug reports too.

☁️ LocalStack

LocalStack is a lifesaver when working with AWS services locally. It emulates cloud services like Lambda, S3, DynamoDB, and more — all in a single container. I use it to test my AWS-based applications without ever leaving my laptop or racking up a cloud bill. It’s especially helpful when experimenting with Terraform or CDK setups in a controlled environment.

🗑️ trash-cli

If you’re someone like me who runs rm a bit too recklessly, trash-cli can be a real lifesaver.

Instead of permanently deleting files, trash sends them to your system’s trash can, while recording the original path, deletion date, and permissions. It works seamlessly with desktop environments like KDE, GNOME, and XFCE, but you can use it straight from the terminal or in your scripts.

It’s basically a safety net for your command line — because we’ve all deleted something we shouldn’t have.

Final Thoughts

At the end of the day, tools are just tools — what really matters is how well they fit into your workflow. These are the ones that make my life a little easier, a little faster, and a lot more fun. If you use any cool tools I should try, drop them in the comments — always down to discover new stuff!

Let me know in the comments what kinda tools you use in your daily life to increase your productivity.

Connect with Me

If you liked this post or want to geek out about productivity, dev tools, or anything tech, feel free to connect:

Exploring the Hidden Gems of HTML: 11 Lesser-Known Tags You Should Know

Bhoomit Ganatra — Sun, 18 Aug 2024 05:17:49 +0000

HTML is an incredible markup language that forms the backbone of web development. Despite its simplicity and lack of strict syntax rules like semicolons, HTML is a great starting point for anyone learning to code. It introduces concepts of proper syntax and logic, laying the groundwork for more advanced programming languages.

In the world of web development, HTML can be thought of as the skeleton that holds everything together. JavaScript serves as the organs that make the webpage functional, while CSS is the outer appearance, adding style and visual appeal. HTML's elements, or tags, tell the browser what each part of the page should do. For example, headings are marked with <h1> or <h2>, paragraphs with <p>, and containers with <div>.

While many are familiar with basic HTML tags, there are some lesser-known tags that can significantly enhance your web pages. Let's explore 10 of these hidden gems, complete with code demos.

1. `<abbr>` Tag: The Abbreviation Assistant

The <abbr> tag is perfect for displaying the meaning of acronyms or abbreviations. By wrapping an acronym in the <abbr> tag and adding a title attribute, you can provide additional information when users hover over the abbreviation.

Code Example:

<p>The <abbr title="HyperText Markup Language">HTML</abbr> is the standard markup language for creating web pages.</p>

When you hover over "HTML," a tooltip will display "HyperText Markup Language."

2. `<code>` Tag: Displaying Code Snippets

The <code> tag is your go-to for displaying code blocks on a webpage. It automatically displays text in a monospace font, making your code snippets clear and distinct.

Code Example:

<p>To print "Hello, World!" in Python, use the following code:</p>
<code>print("Hello, World!")</code>

This will display the Python code snippet in a monospace font.

3. `<kbd>` Tag: Keyboard Input Display

The <kbd> tag is used to display keyboard inputs. Wrapping keyboard keys in the <kbd> tag will display them in a monospace font, giving them the appearance of keyboard buttons.

Code Example:

<p>To save your work, press <kbd>Ctrl</kbd> + <kbd>S</kbd>.</p>

This will show "Ctrl + S" as if they are keyboard buttons.

4. `<datalist>` and `<option>` Tags: Interactive Input Suggestions

The <datalist> tag, combined with the <option> tag, allows you to create input fields with interactive suggestions.

Code Example:

<label for="color">Choose a color:</label>
<input list="colors" id="color" name="color">
<datalist id="colors">
  <option value="Red">
  <option value="Green">
  <option value="Blue">
  <option value="Yellow">
  <option value="Black">
</datalist>

When you start typing in the input field, a list of color options will appear.

5. `<dialog>` Tag: Quick and Easy Pop-ups

The <dialog> tag provides a straightforward way to create modals or pop-ups.

Code Example:

<dialog id="myDialog">
  <p>This is a simple dialog box.</p>
  <button onclick="document.getElementById('myDialog').close()">Close</button>
</dialog>
<button onclick="document.getElementById('myDialog').showModal()">Open Dialog</button>

Clicking the "Open Dialog" button will show the dialog box, and the "Close" button will close it.

6. `<details>` and `<summary>` Tags: Native Dropdowns

The <details> and <summary> tags are perfect for creating native dropdown menus without the need for CSS or JavaScript.

Code Example:

<details>
  <summary>More Information</summary>
  <p>This is additional information that is hidden by default.</p>
</details>

Clicking "More Information" will reveal the hidden content.

7. `<time>` Tag: SEO-Friendly Time Representation

The <time> tag helps search engines read time values, which can improve your website's SEO.

Code Example:

<p>The event will take place on <time datetime="2024-12-25">December 25th, 2024</time>.</p>

This will display "December 25th, 2024" as readable text, but search engines will recognize it as a date.

8. `<ruby>`, `<rt>`, and `<rp>` Tags: Ruby Notation

Ruby notation can be achieved with the <ruby>, <rt>, and <rp> tags, useful for adding annotations to text.

Code Example:

<ruby>明日<rt>Ashita</rt></ruby> means "tomorrow" in Japanese.

This will display "明日" with "Ashita" as a small annotation above it.

9. `<progress>` Tag: Simple Progress Bars

The <progress> tag is an easy way to create progress bars without writing any CSS.

Code Example:

<label for="file">File upload progress:</label>
<progress id="file" value="32" max="100">32%</progress>

This will display a progress bar showing 32% completion.

10. `<meter>` Tag: Scalable Value Representation

The <meter> tag represents a scalar measurement, such as a score or rating.

Code Example:

<p>Test score:</p>
<meter value="0.6" min="0" max="1" low="0.3" high="0.8" optimum="0.7">60%</meter>

This will display a meter bar, which adjusts its color based on the value.

11. `<fieldset>` and `<legend>` Tags: Grouping Form Elements

The <fieldset> and <legend> tags provide a simple way to group related form elements together.

Code Example:

<fieldset>
  <legend>Personal Information</legend>
  <label for="name">Name:</label>
  <input type="text" id="name" name="name"><br><br>
  <label for="email">Email:</label>
  <input type="email" id="email" name="email">
</fieldset>

This will display a box labeled "Personal Information" containing the form fields.

Conclusion

These lesser-known HTML tags can add a new level of functionality and accessibility to your web pages. Whether you're creating dropdowns, displaying code snippets, or enhancing form fields, these tags offer a range of possibilities without the need for extra CSS or JavaScript. Experiment with them, and you might find yourself incorporating them into your regular web development practices.

If you found this blog helpful, be sure to share it with others and stay tuned for more tips on programming, web development, and the journey of learning to code.

Inspiration for this blog : https://www.youtube.com/watch?v=VkWJQe_EsjQ

Your comprehensive guide to shell scripting

Bhoomit Ganatra — Fri, 02 Aug 2024 07:06:45 +0000

Have you ever wondered what shell scripting is and why it’s so important? When building a website or mobile application, writing code is essential to make it function. But what if you need to automate repetitive tasks on your system? This is where shell scripting comes in handy. By writing a shell script, you can automate various tasks, saving time and effort, and making your workflow more efficient.

And do you know what according to stackoverflow survey shell scripting is used more than java? yes, in a professional level too.

Your comprehensive guide to shell scripting
- Table of contents
- What is shell script?
- Structure of shell script
- Header
- Script
- How to create shell script?
- Let's create a simple shell script
- Hello world in shell script
- Running shell script 🏃
- Defining variables in shell script
- Passing arguments to shell script 🔑
- Using Variables in shell script 🔄
- Conditions in shell script 🔎
- Loops 🔁
- Functions 🔨
- Debugging the shell script
- Note
- Arrays in shell script
- Importing files in shell script
- Wrapping up 🎉

What is shell script?

Shell script is a scripting language ( programming language) that can be used to automate task in you system via command line interface.

So let's start learning shell scripting.

Structure of shell script

Every shell script has 2 parts

Header
Script

Header

In header we define in which shell the script should be executed. like sh, bash, fish or any other shell.
The header is optional, but it is recommended to use it.
If you do not defined header, it will be default to the default shell of the operating system in which the script is executed.
To know which shell is default in the system, type echo $SHELL in your terminal.
To define header, the syntax is as below.

#!/bin/sh

#!/bin/sh is the header.
The #! is called shebang.
and /bin/sh where shell is located, most probably all the shells are located in /bin directory, unless you are unlucky enough to work on some tricky system.

Script

The script is bunch commands that you want to execute line by line.

How to create shell script?

When you work with languages like javascript, python or java, you can write a script and save it in a file like script.js, script.py or script.java.
Same as above, shell script has extension .sh and you can write your script in it.

Let's create a simple shell script

Open your terminal and type touch script.sh to create a file.

It will create a file called script.sh in your current directory.
Now open the favorite editor and we will write some script to execute in terminal, I use vscode, you can use any editor of your choice.

Hello world in shell script

Let's print hello world in terminal.
Just type echo hello world in the file you have created and save it.

Running shell script 🏃

Now you might be wondering how to run this script?
Your shell can run this script by typing ./script.sh in your terminal, as shown below.
Now you might get an error like permission denied: ./script.sh, because by default shell scripts are not executable, we need to make it executable.
To make it executable type chmod +x ./script.sh in the terminal.
Now you can run the script by typing ./script.sh in the terminal, and you will get the output as hello world.

Defining variables in shell script

Same as other programming languages, shell script also has variables.
To define a variable see the syntax below.

#!/bin/sh

# define variables
name="Bhoomit"

To access the variable, we use $ and the name of the variable.

#!/bin/sh

# define variables
name="Bhoomit"

# access variables
echo $name

It will print Bhoomit in the terminal.

Passing arguments to shell script 🔑

Now let's pass some input to the script.
This input is known as arguments.
To pass arguments to the script, type ./script.sh message1 in the terminal.
And to access the arguments in the script we can use $1 and $2 and so on.
We do not have named arguments in shell script, so we use $1 and so on ( we will also use this in next section as well).
To accept arguments in shell script, we need to define the arguments in the header of the script.
The syntax is as below.

#!/bin/sh
# define arguments
echo $1;

This will print the first argument in the terminal.
If we need to pass something like hello world as an argument, we need to wrap it in quotes, else it will be treated as multiple arguments.

Using Variables in shell script 🔄

Now we know that we can pass input to the script, let's store them in variable and print the variables.
To define variable the syntax is as below.

#!/bin/sh
message=$1;

echo $message;

This will print the first argument in the terminal.
We can also use this variable in string, like string interpolation.

echo "Message is $message";

Make sure to use double quotes in the string interpolation, else it will print the variable as it is.

Conditions in shell script 🔎

Now that we know we can pass arguments and store them in variable, now let's check if passed argument is valid or not, but using if else condition.
The syntax for if else condition is as below.

if [ CONDITION ]
then
    CODE TO BE EXECUTED IF CONDITION IS TRUE
else 
    CODE TO BE EXECUTED IF CONDITION IS FALSE
fi

In some places use will see [[ CONDITION ]] instead of [ CONDITION ], it also works but if you wish to improve portability of scripts use single square brackets, as these are inbuilt and older than [[.
Now let's check if passed arguments in the script is empty or not, check the code below.

#!/bin/sh
message=$1;

if [ -z $message ]
then
    echo "Invalid message!";
else
    echo "Message is $message";
fi

In above code the -z operator is used to check if the variable is empty or not, there are many more like -n, -eq, -ne, -lt, -le, -gt, -ge and so on.
I have created a github gist for common operators in shell scripting.
Now I will leave it on you to search for how to use else if and switch case in shell scripting.

Loops 🔁

Sometimes in shell script we need to perform some simple task multiple times, and at that time loops can be your friend.
There are 4 types of loops in shell scripting.
1. While
2. For
3. Until
4. Select
Each loop has it's own syntax but the structure remains same

LOOP_NAME CONDITION
do
    CODE TO BE EXECUTEED
done

Now let's see the example of for loop.

#!/bin/bash

for file in "$PWD"/*
do
    echo "Processing file: $file"
done

In above example we are looping through all the files in the current directory and printing the file name.
The $PWD is a shell built-in variable that holds the current working directory.
The * is a wildcard that matches any sequence of characters.
The do keyword is used to start the loop and done is used to end the loop.
We can also use break keyword to exit the loop and continue keyword to skip the current iteration.
Here is example of that in for loop.

#!/bin/bash

for file in "$PWD"/*
do
    if [[ $file == *".skip" ]]; then
        continue  # Skip files with ".skip" extension
    fi

    echo "Processing file: $file"

    if [[ $file == *".stop" ]]; then
        break  # Stop processing if file has ".stop" extension
    fi
done

I have created a github gist for other loop examples in shell scripting.

Functions 🔨

Functions are way to reuse code all the programming languages, now let's see how we can create a function in shell scripting.

#!/bin/bash

# Define a function

greet() {
    echo "Hello, How are you?"
}

In above example we have defined a function named greet that prints Hello, How are you? in the terminal.
In shell scripting we do not have to write function keyword or def or something else to defined it as a function.
Now to call the function we use function name to call the function as shown below.

#!/bin/bash

greet

Now when you will build real shell script, you might be wondering how to pass arguments to the function? Well we can pass arguments to the function in the same way we pass arguments to the script.
To pass arguments to the function we use $1, $2 and so on.
Let's see how we can achieve this in the script.

#!/bin/bash

greet() {
    message=$1

    if [ -z $message ]; then
        message="How are you?"
    fi

    echo "Hello, $message"
}

greet "Bhoomit"

Now if you pass arguments to the function, greet "Bhoomit" it will print as expected.
But what if we want to pass arguments to the function via script?, we can't be doing greet $1 $2 and so on, it is tedious and error prone.
To overcome this problem we can use we can call function like this greet "$@" and it will pass all the arguments to the function.
Now the one more issue you might encounter is if you define message variable in the function, it will be accessible in the function and outside the function.
To solve this issue we can use local in front of the variable so it will be local to the function only.

#!/bin/bash

localVariables() {
    local message=$1

    # other code
}

Note: If you use local outside function body, it will give error.

Debugging the shell script

Sometimes the code is against us, and does not work as expected, nah it's not code never lies, and it would be some mistake in the code, but how do we debug that?
To debug the shell script you can use echo statement to print but the funny thing is that the shell script will continue to execute even if it encounters an error.
To debug the shell script we can use set -x to print the commands before executing them.
It will show you how the script is executing and what is the output of the commands, something like this.
Now that's cool but what if we want to terminate the script on error?
Well we can use set -e to terminate the script on error.
It will show you the error and exit the script.
It will stop on error but it will not stop if it encounters an undefined variable, to stop this on undefined variable we can use set -u.
Note: There can be many ways you can shoot yourself in the foot, so I highly recommend to use set -u, because sometimes undefined variables can make a lot of mess.
Check this github issue Where steam tries to delete everything on system due to undefined variable.

Note

The above things are more than enough to do shell scripting.
And if you are using below features of shell script, I would highly recommend to move to any other language to perform the tasks like js, python or golang or any other language of your choice.
Unless you are working on some tricky system, where only shell scripting can be used, or you are maintaining dotfiles like me.

Arrays in shell script

Same as other programming languages, in shell script we can also use arrays.
To define an array in shell script the syntax is as below.

#!/bin/sh

# define array
array=("January" "February" "March" "April" "May" "June" "July" "August" "September" "October" "November" "December")

# access array
echo ${array[0]}

To access the array we use ${array[index]} and the index of the array.
Also we can use ${array[@]} to access all the elements of the array, and it will print all the elements in the terminal.
We can also use for loop to iterate through the array.

#!/bin/sh

# define array
array=("January" "February" "March" "April" "May" "June" "July" "August" "September" "October" "November" "December")

# loop through array
for element in "${array[@]}"
do
    echo $element
done

Importing files in shell script

Now it is common to split the code in multiple files and import them in the main script.
Let's say we have multiple files like this.
- script.sh
- functions.sh
- variables.sh
script.sh is main script and functions.sh has functions and variables.sh has variables.
now to import the files we can use source keyword, as shown below.

#!/bin/sh

# script.sh

source ./variables.sh
source ./functions.sh

functionFromFunctionsFile

#!/bin/sh

# functions.sh

functionFromFunctionsFile() {
    echo $variableFromVariablesFile
}

#!/bin/sh

# variables.sh
variableFromVariablesFile="Hello, World!"

If you run the script.sh, the final output should be Hello, World!.

Wrapping up 🎉

Now that you have super power of shell script, just remember to use it wisely, because with great power comes great responsibility.
This is all the things that I have learned in shell scripting, and I hope you have learned something new too.
Connect with me on other platforms as well.
- Linkedin
- Twitter
- Github

Nodejs and typescript boilerplate

Bhoomit Ganatra — Wed, 03 Jul 2024 12:07:19 +0000

Node Boilerplate Typescript

This repo is boilerplate for typescript and nodejs projects

What is included

Server with express
Security Packages
- hpp - Express middleware to protect against HTTP Parameter Pollution attacks
- helmet - Helmet helps secure Express apps by setting HTTP response headers.
File uploading
Sending Emails
Logging
- By default it is configured to log on console but you can extend it to write to any file as well
Object(s) Validation using zod
Error Handling
Express Req object extend with typescript support

Routing

The base path for api will be api.
Any folder you put inside modules folder that container routes.ts file will be added to express router stack and that will be route for the api as well.
So suppose if you make folder something like modules/v1/file/routes.ts then all the routes defined in that routes.ts file will be registered and will be available at domain/api/modules/v1/file.
So think like routing as a file based routing.
You must export router as default export from routes.ts file to make this happen.

Error handling

You can alway use try catch in your controllers to handle errors by your self, but here I have used different approach.
Just wrap your any controller/middleware that receives express's req,res object wrap them in PromiseHandler function and this will handle the rest of the stuff.
Also you can create custom errors in error folder as per your requirement and handle it in handleApiError according the way you want.

Exploring 40 Free APIs for Your Next Programming Project.

Bhoomit Ganatra — Sat, 02 Mar 2024 12:25:07 +0000

Are you on the hunt for free APIs to elevate your programming projects? Look no further! In this comprehensive guide, we'll delve into 40 remarkable APIs that cover a diverse range of functionalities. Whether you're a seasoned developer or just starting out, these APIs offer a wealth of opportunities to enhance your applications. Let's dive in and explore each API in detail:

Unsplash API: Access a vast library of high-quality stock photos to enhance your applications' visual appeal. Perfect for blog posts, social media integrations, and more.
YouTube API: Take control of your YouTube channel by leveraging the API to customize thumbnails, titles, and other metadata. Ideal for A/B testing and optimizing your content strategy.
Family Guy API: Discover where your favorite shows are available across different streaming platforms, simplifying the search for binge-worthy content.
Pantry API: Simplify database management with this lightweight solution that allows you to store JSON data and includes a CRUD interface. Great for small-scale applications.
Clearbit API: Enhance your applications with company logos retrieved effortlessly via HTTP requests. Ideal for corporate integrations and brand recognition.
Waifu API: Delve into the world of anime with this fun API that lets you create your own anime wife using endpoints like Ufi. Perfect for anime enthusiasts and meme generators.
Internet Game Database API: Access comprehensive game data, including versions, genres, covers, and images, to power gaming-related applications and services.
Discord API: Build custom bots for Discord channels, allowing for interactive experiences and community engagement. A must-have for gaming communities and online forums.
World News API: Stay informed with up-to-date global news headlines for your applications. Note the limited request quota for the free tier.
Random Data Generator API: Generate realistic fake data for testing purposes without the need for an API key. Ideal for populating databases and simulating real-world scenarios.
Foreign Exchange Rates API: Access accurate foreign exchange rates, including historical data, for applications requiring currency conversion functionality.
Svix API: Seamlessly integrate webhooks into your applications to facilitate data exchange between different services. Offers SDKs for various programming languages.
Kroki API: Transform text inputs into diagrams in JPEG or PNG format, perfect for visualizing data and enhancing blog posts or documentation.
Google Docs API: Tap into the power of Google Docs by programmatically accessing and manipulating document data. Great for automating document workflows and collaboration tasks.
HTTP Status Docs API: Quickly access detailed documentation for HTTP status codes, simplifying error handling and troubleshooting in your applications.
GeoCoding Places API: Translate textual addresses into map coordinates for seamless integration with mapping services. Useful for location-based applications and services.
Ticketmaster API: Discover and access event data, including tickets and schedules, for various entertainment events. Ideal for event discovery and ticket purchasing applications.
I Love PDF API: Perform various operations on PDF files, such as extraction, editing, and compression, simplifying document management tasks in your applications.
CloudConvert API: Convert files between different formats with ease, albeit with limited usage for the free tier. Perfect for applications requiring file format conversion capabilities.
Ollama API: Run large language models locally with this privacy-centric API, offering capabilities like text generation and analysis without compromising data privacy.
Free Dictionary API: Access dictionary definitions and word data without the need for an API key. A handy tool for language-related applications and educational projects.
OpenWeather API: Retrieve accurate weather data for various locations worldwide, enabling weather forecasting and analysis in your applications.
Alpha Vantage API: Access comprehensive stock market data, including historical and real-time stock prices, for building trading bots and financial applications.
Yahoo Finance API: Retrieve historical stock data for analysis and visualization purposes. Note that this API is accessed through the "why finance" package in Python.
Deck of Cards API: Integrate card-related functionalities, such as drawing cards, shuffling decks, and managing piles, into your card game applications.
WordPress REST API: Access and manipulate WordPress data via RESTful endpoints, enabling seamless integration with WordPress-powered websites.
Spotify API: Retrieve music-related data, including artists, albums, and tracks, for building music discovery and recommendation applications.
Podcast Index API: Access podcast metadata and transcripts for enhancing podcast discovery and analysis in your applications.
DeepGram API: Utilize speech-to-text capabilities and audio analysis tools for processing audio content in your applications.
Zen Quotes API: Retrieve inspirational quotes for incorporating motivational features into your applications.
Open Food Facts API: Retrieve product information based on barcode inputs, facilitating food product analysis and comparison.
Stripe API: Accept payments and manage finances seamlessly with this popular payment processing API.
Resend API: Send emails effortlessly from your applications with simple integration and support for various programming languages.
Trace.mo API: Retrieve anime series based on frame inputs for anime-related applications and services.
Favorite App API: Integrate data from your favorite productivity apps to enhance workflow automation and data analysis.
Alpaca API: Create automated stock trading bots with access to comprehensive stock market data and trading functionalities.
NASA API: Access a treasure trove of space-related data, including astronomy pictures, Mars weather, and observation data, for educational and research purposes.
The Movie DB API: Retrieve movie-related data, including titles, genres, and ratings, for building movie discovery and recommendation applications.
DigiDates API: Handle date-related functions, such as date validation and leap year checks, with ease in your applications.
OpenSky Network API: Track planes in real-time with access to flight data and aircraft information for aviation enthusiasts and travel-related applications.

These APIs offer a wide range of functionalities and capabilities to enhance your programming projects. Whether you're building a web application, mobile app, or automation tool, integrating these APIs can add value and functionality to your projects. So go ahead, explore, and start building amazing applications today!

Reference taken from -> https://www.youtube.com/watch?v=YHxj3LvZoLQ&t=183s

Streamlining JavaScript Development with PackageFlex: One-Click Copy for npm Install Commands

Bhoomit Ganatra — Sat, 27 Jan 2024 08:55:44 +0000

Hello fellow developers! Today, I'm thrilled to introduce a tool that's going to revolutionize the way you work with npm packages. Say hello to PackageFlex Chrome Extension – your shortcut to streamlined npm install commands!

The Frustration

As JavaScript developers, we've all been there. You find a fantastic npm package, and you're ready to integrate it into your project. But, oh boy, the process of copying the install command and ensuring it aligns with your preferred package manager can be a bit of a headache.

Introducing PackageFlex

PackageFlex is designed with one goal in mind – to simplify the npm package management process. With this Chrome Extension, you can now copy install commands for npm, yarn, pnpm, or bun with just one click! No more toggling between documentation pages or manually adjusting commands.

Key Features

One-Click Copy: Easily copy install commands for npm, yarn, pnpm, and bun with a single click, saving you time and frustration.
Enhanced Experience: Enjoy a streamlined npm website interface that integrates seamlessly with your preferred package manager.
Flexibility: Whether you're a fan of npm, yarn, pnpm, or bun, PackageFlex adapts to your workflow, making it the perfect companion for every JavaScript developer.

How It Works

Installation: Get started by installing the PackageFlex Chrome Extension. Simply clone the repository or download the ZIP file, enable developer mode in Chrome, and load the extension.
Usage: Visit the npm website and navigate to your desired package. Look for the PackageFlex icon in your browser's toolbar. Click on the icon to open the options menu, choose your preferred package manager, and click "Copy" – it's that easy!

Before

After

Ready to Try PackageFlex?

Head over to the PackageFlex GitHub repository to explore the code, and installation instructions, and contribute to the project.

Conclusion

PackageFlex is not just a tool; it's a game-changer for JavaScript developers looking to streamline their workflow. Try it out, share your thoughts, and let's make JavaScript development even more enjoyable together!

Happy coding! 🚀💻

Destiny: A Tool to Manage Cluttered Folders

Bhoomit Ganatra — Sun, 14 Jan 2024 05:21:23 +0000

Description
How to Use
- Installation
- Organizing Files
How it Works
Conclusion

Description

Destiny is a command line tool written in go that simplifies the organization of cluttered folders. If you've ever struggled with maintaining a tidy file system, Destiny is here to make your life easier. Unlike a traditional shell script, Destiny includes checks for excluded files and provides a more manageable and user-friendly experience.

How to Use

Installation

If you are on macOS or Linux, use the following command to install Destiny:

curl https://raw.githubusercontent.com/bhumit070/destiny/main/install.sh | bash

Organizing Files

To organize files in the current folder, run:

destiny

To organize files in a specific folder, provide the folder path as an argument:

destiny /path/to/folder

How it Works

Destiny employs a simple yet effective approach to file organization:

File Scan:

Destiny scans all files in the target folder.

Folder Creation:

For each unique file extension, Destiny checks if a corresponding folder exists. If the folder does not exist, Destiny creates a folder with the same name as the file extension. File Movement: Destiny moves each file to the folder associated with its file extension.

Example: If you have a file named hello.txt, Destiny creates a folder named txt (if not exists) and moves the file into it.

Conclusion

Destiny is a user-friendly tool that significantly improves the organization of your files. Whether you're dealing with a cluttered workspace or aiming for a more systematic approach, Destiny has got you covered. For suggestions or feedback, please create an issue on the GitHub repo.

Also if you like Destiny, please star the repo.

Syncing Across Tabs: The JavaScript Magic You Didn't Know Existed!

Bhoomit Ganatra — Sat, 06 Jan 2024 13:44:09 +0000

I recently discovered a fascinating feature on the SoundCloud website: the ability to seamlessly control audio playback across multiple tabs in the same browser. Intrigued by this, I delved into how it was implemented and stumbled upon a powerful tool - JavaScript's Broadcast Channel API.

The Broadcast Channel API allows communication between browser tabs, making real-time updates and synchronization possible. It's supported by major browsers, making it a versatile solution for enhancing user experiences.

Using the Broadcast Channel API

To implement this feature, create a BroadcastChannel object with a channel name, like so:

const broadCast = new BroadcastChannel('audio-player');

Now, you can send messages using postMessage:

broadCast.postMessage({
    type: 'audio-played',
});

To receive messages, subscribe to the onmessage event:

broadCast.onmessage = ({ data = {} }) => {
    console.log(data);
};

This simple yet powerful API enables real-time communication between browser tabs, opening up possibilities for dynamic and synchronized user interfaces.

I have created a sample demo to showcase this feature.

Conclusion

The Broadcast Channel API offers a seamless solution for enhancing multi-tab support on your website. Explore this feature in your projects and unlock the potential for dynamic and synchronized user experiences.

Follow me for more updates

Programming YouTubers I recommend

Bhoomit Ganatra — Sun, 31 Dec 2023 10:47:30 +0000

Some YouTube channels I follow to keep myself updated in the tech world

For everything about tech
1) Fireship Tech - https://www.youtube.com/@Fireship
2) codedamn - https://www.youtube.com/@codedamn
3) Theo - https://www.youtube.com/@t3dotgg
For typescript-related stuff
1) Basarat Ali Syed - https://www.youtube.com/@basarat
2) Matt Pocock - https://www.youtube.com/@mattpocockuk
3) Andrew Burges - https://www.youtube.com/@andrew-burgess
For Backend and Architecture
1) Hussein Nasser - https://www.youtube.com/@hnasr
2) Arpit Bhayani - https://www.youtube.com/@AsliEngineering
3) Gaurav Sen - https://www.youtube.com/@gkcs
For SQL
1) PlanetScale - https://www.youtube.com/@PlanetScale
2) TechTFQ - https://www.youtube.com/@techTFQ
For NextJs
1) Josh tried coding - https://www.youtube.com/@joshtriedcoding
2) Hamed Bahram - https://www.youtube.com/@hamedbahram
3) Jack 🤔 Herrington - https://www.youtube.com/@jherr
For Javascript
1) Akshay Saini 🚀 - https://www.youtube.com/@akshaymarch7
2) Hitesh Choudhary - https://www.youtube.com/@HiteshChoudharydotcom
3) Chai Aur Code - https://www.youtube.com/@chaiaurcode

Say goodbye to chrome's misleading icon 🔒

Bhoomit Ganatra — Wed, 17 May 2023 18:26:00 +0000

Hello everyone 🙋🏼‍♂️,
In this article, I will talk about google chrome's misleading icons which can be seen 👀 in the URL bar which is this 👉 🔒

Why I think this is the best move by Google and should have been done very early.
Now you might be wondering what's your problem with the padlock it indicates that the website is secure and has https.

Well my dear friend let me tell you that, that icon is misleading, in many articles I have seen that, people say
if you want to stay away from fake and phishing sites and want your data to be protected check that lock icon on the browser, if it shows a lock icon it means that website is safe to use and you can enter your details there
but what they don't know is even though that lock is shown it is not guaranteed that website is secure for you and you can not assume that your data will be protected

Now you might be wondering what.....?

By many articles and youtuber videos, you might be told that sites that shows lock icons are safe, well that's true but not 100% it can be just a little, because when you see that lock icon on the address bar it just indicates that no one can read the data between you and the website
but no one knows what is on the website

so no one can meddle in between which is also known as man in the middle attack but once data reaches the site it is in the developer's hand how the developer keeps it

so let's just say I made a phishing site ( which I don't but let's just assume ) that looks exactly the same as Facebook now I share that site with you, you just check that website has a lock icon and enter your Facebook login and the password voila now I have access to your Facebook login and password 😈

but you might say then how did you get the lock icon, the answer is I got it for free, yes you heard it right, as a developer I can deploy my site on a 5$ machine on the internet and get that lock icon for my site for just free.

Thus, this lock icon does not always means that the website is safe and secure.

So now you might be wondering how can I check the authenticity of that website.

Hmm....,
Here are a few steps which you can check to ensure the authenticity of that website.

Check for domain name - remember the Facebook example I gave before - I do not own a Facebook domain but if it is a phishing site then it might have a domain like faceebook.com or faceboook.com which is hard to see, but you can check if you just pay little more attention
Often we become victims of these spam sites because we are getting something that is too good to be true like 90%off on iPhone or some expensive things which we are getting for pennies, just remember on the internet there is nothing too good to be true (or it is just too hard to find these kinds of things.) at that time you can check for domain name age by going to who. is's website and you can also check other people's reviews online

You can read more about it here on chromium's blog.

To conclude, the presence of a lock icon does not guarantee the security of a website. It's essential to adopt a comprehensive approach to ensure your online safety. Pay attention to the domain name, be cautious of suspicious offers, and utilize additional security indicators such as trust seals, certifications, and reputable reviews.

By being vigilant and practicing these steps, you can protect yourself from falling victim to phishing attacks

Connect with me on other platforms

Deep Link Nightmare 💀

Bhoomit Ganatra — Wed, 26 Apr 2023 17:56:00 +0000

Have you ever experienced a technology nightmare that left you frustrated and disappointed? Well, let me tell you about my worst experience with Firebase deep link and Instagram webview. It all started when I was trying to implement deep linking into my app, and little did I know the rollercoaster ride that awaited me. As I delved deeper, I found myself stuck in a maze of errors and bugs that seemed never-ending. And just when I thought it couldn't get any worse, Instagram webview decided to join the party. In this article, I'll share my story of how this seemingly simple task turned into a nightmare that lasted for weeks.

At first glance, my client's requirements seemed pretty straightforward. They wanted their app to have a specific page with a deep link, and when the user clicked on that deep link, the app would open directly to that page. As an experienced developer, I was confident that I could easily implement this feature using Firebase deep links.

I started by creating the deep link URL and testing it on my device. Everything seemed to be working as expected, simple right

Just when I thought I was done with the deep link feature, my client contacted me again with a new requirement. They wanted to track the number of clicks on the deep link and have the data available only in the admin panel.

I thought I will give firebase a deep link and firebase will provide me statistics with link clicks app opens and what not but as you know expectations always hurts

There is not way firebase gives that information to us because these links are generated dynamically from my backend.

So I started thinking about alternate solution so I came with an idea that the user will be first redirected to my landing page and then I will redirect them to my deeplink thus I will get link click count and and app page will open as well, once again simple right but I lost the link previews which deep links were giving me, but as I was aware of meta and og tags it was an easy task to generate link previews I just need to dynamically send html from my server and I was done

Now again peaceful days 😌

But these peaceful days did not last long and deep link stopped working

reason: My client started facebook and instagram advertising and when my custom link was shared on was redirecting to deep link but not redirecting to my app 😭 and this is the issue with react native webview and it is still open in github since 2016

So my colleague android ( did I mention this issue was in android only 😅 ) developer came with an idea to open the android app with custom scheme

Little note about custom schemes

custom schemes are links which can help you open your app from the browser these custom schemes gets registered at os level at time of installing the app

Below is example of whatsapp website trying to open whatsapp app through custom scheme

but the issue remains same 😔, instagram webview can not handle if the app is not installed and the webview crashes, so now what!!!

We observed that our link just only does not work in webview else it works find, so we just need to find a way so that when the link in clicked in instagram and facebook it gets opened in external browser and link will just work fine 🎊

But the question is how do I we do that ?

Remember when I said I was sending meta tags to generate link previews after some research I found about one meta tag

<meta http-equiv="refresh" content="0; url=intent://${intent_link}/#Intent;scheme=https;action=android.intent.action.VIEW;end;" />

So now what happens is when someone clicks on the link the in app browser is opened and then it openes an external browser and then the browser opens the my original deep link and then deep link takes the control what to do

After days of struggling and endless brainstorming sessions with my team, we finally found a solution that worked seamlessly. By using a combination of custom schemes and the meta refresh tag, we were able to bypass the limitations of Instagram webview and provide a smooth user experience for our clients.

Looking back, it was a tough journey, but the lessons we learned along the way were invaluable. We gained a deeper understanding of how webview technology works and how to handle unforeseen obstacles that arise during development.

In conclusion, while the road to implementing Firebase deep links and Instagram webview may have been bumpy, we emerged victorious with a solution that exceeded our client's expectations. And who knows, maybe the next time we face a similar challenge, we'll be better equipped to tackle it head-on.

All about Screen 🖥 command

Bhoomit Ganatra — Sun, 05 Jun 2022 18:46:29 +0000

Hey there everyone have you ever run a service and wondered why the hell this service does not have detached mode ( detached mode means a service which runs in background and does not freeze your terminal ) so this is the one stop solution for you

What is screen command

You can assume screen command as a new screen for you inside terminal where can you create multiple virtual screen to run multiple services

This command is very useful if you are in server using ssh and want to run a service in background but service itself does not provide a detached mode. ( e.x. ElasticSearch )

If you have unix system ( linux or macos ) screen command should be available to you

To check screen command is available to you or not just run

screen -v

it it returns any version like this voila you have screen command installed.

Now let's have a look how it works

You can create a screen with below command

screen -S SCREEN_NAME

it will create a screen put you into that screen
to create a screen without entering into it you can run

screen -dmS SCREEN_NAME

it will create a screen but it won't go into screen

Now that you have created a screen if you want to see a list of screen you have created you can use below command

screen -ls

it should give you the list of screens you have created!
Screen Version

Now that you have created and listed out screens you can enter into any screen by typing below command

screen -dR SCREEN_NAME

in case you can see your screen in

screen -ls

command but unable to enter it try to enter into screen by using full name of screen with pid.SCREEN_NAME

pid is id which you can see in screen -ls command

Now that you can created, listed and entered into screen and did you stuff now you want to make sure it runs in background so to come out from screen and run in background you have to press CONTROL+A+D

by pressing this you will come out of screen and it will run in background

How to delete a screen to delete a screen enter into the screen and press CONTROL+D it will terminate your screen and you will see an output like this

So this is all basics about screen command which you have inside your system to know more about it type

screen --help

you will get all the options available there.

Thanks for reading!

DEV Community: Bhoomit Ganatra

Tools I Use to Increase My Productivity.

🐳 OrbStack

🎯 LocatorJS

🔔 Built-in Reminder App

🧙 Vim VSCode Extension

📦 PackageFlex

🧮 TablePlus

💬 Discord (Yes, Seriously)

🖥️ Zsh + Dotfiles

🔥 Bruno

📸 Flameshot

☁️ LocalStack

🗑️ trash-cli

Final Thoughts

Connect with Me

Exploring the Hidden Gems of HTML: 11 Lesser-Known Tags You Should Know

1. <abbr> Tag: The Abbreviation Assistant

2. <code> Tag: Displaying Code Snippets

3. <kbd> Tag: Keyboard Input Display

4. <datalist> and <option> Tags: Interactive Input Suggestions

5. <dialog> Tag: Quick and Easy Pop-ups

6. <details> and <summary> Tags: Native Dropdowns

7. <time> Tag: SEO-Friendly Time Representation

8. <ruby>, <rt>, and <rp> Tags: Ruby Notation

9. <progress> Tag: Simple Progress Bars

10. <meter> Tag: Scalable Value Representation

11. <fieldset> and <legend> Tags: Grouping Form Elements

Conclusion

Your comprehensive guide to shell scripting

Table of contents

What is shell script?

Structure of shell script

Header

Script

How to create shell script?

Let's create a simple shell script

Hello world in shell script

Running shell script 🏃

Defining variables in shell script

Passing arguments to shell script 🔑

Using Variables in shell script 🔄

Conditions in shell script 🔎

Loops 🔁

Functions 🔨

Debugging the shell script

Note

Arrays in shell script

Importing files in shell script

Wrapping up 🎉

Nodejs and typescript boilerplate

Node Boilerplate Typescript

What is included

Routing

Error handling

Exploring 40 Free APIs for Your Next Programming Project.

Streamlining JavaScript Development with PackageFlex: One-Click Copy for npm Install Commands

The Frustration

Introducing PackageFlex

Key Features

How It Works

Before

After

Ready to Try PackageFlex?

Conclusion

Destiny: A Tool to Manage Cluttered Folders

Table of Contents

Description

How to Use

Installation

Organizing Files

How it Works

Conclusion

Syncing Across Tabs: The JavaScript Magic You Didn't Know Existed!

Using the Broadcast Channel API

Conclusion

Follow me for more updates

Programming YouTubers I recommend

Say goodbye to chrome's misleading icon 🔒

Deep Link Nightmare 💀

1. `<abbr>` Tag: The Abbreviation Assistant

2. `<code>` Tag: Displaying Code Snippets

3. `<kbd>` Tag: Keyboard Input Display

4. `<datalist>` and `<option>` Tags: Interactive Input Suggestions

5. `<dialog>` Tag: Quick and Easy Pop-ups

6. `<details>` and `<summary>` Tags: Native Dropdowns

7. `<time>` Tag: SEO-Friendly Time Representation

8. `<ruby>`, `<rt>`, and `<rp>` Tags: Ruby Notation

9. `<progress>` Tag: Simple Progress Bars

10. `<meter>` Tag: Scalable Value Representation

11. `<fieldset>` and `<legend>` Tags: Grouping Form Elements