DEV Community: Sushil Bajracharya

WebLines reached 100 users

Sushil Bajracharya — Thu, 26 Mar 2026 04:12:40 +0000

I checked WebLines in the Chrome Web Store today and noticed it had reached 100 users. Didn’t expect that to feel this nice, but it does 😊.
It’s a small number, but seeing something I built being used by people... feels a bit special.

If you’re one of those 100, thank you.

I’m not planning anything big or complicated with it.
Just want to keep improving it slowly, adding stuff that helps, and keeping it simple.

If you’ve used it, I’d love to know what you think.

Even small feedback helps — what felt good, what didn’t, or even things that just felt unnecessary.

How I Published My First Chrome Extension

Sushil Bajracharya — Sun, 27 Jul 2025 15:42:16 +0000

I’ve always wanted to build and publish tools that make life a little easier, for myself and for others. Starting with a Chrome Extension felt right. Chrome is the most widely used browser in the world, and the Web Store makes publishing beginner-friendly with a low one-time developer fee of just $5 USD.

In Nepal, we don’t have easy access to international payment methods like Mastercard, Visa, or PayPal. While some banks have introduced “Dollar Cards,” Chrome Web Store does not support them at this time.

Luckily, I have an awesome brother, Sagun, who lives abroad. He stepped in and made the payment for me. If you have awesome people living abroad, too, try asking if they could help you with the fees. If you don’t have anyone abroad to help, there are services in Nepal that assist with Mastercard payments. For example, Technology Channel (Bishworaj Poudel) might be able to help you with this.

Tips: It’s a good idea to create a new Google account specifically for your Chrome developer account. Keeping it separate helps keep things organized and secure.

I registered a Trader account on the Chrome Web Store. Identity verification was simple, but location verification required a recent utility bill or a government-issued document with both name and address. I wasn’t sure what to use initially, but fortunately, Nepal's driver’s license has all the necessary details. I submitted it, and within two days, my Trader account was verified.

The rest of the process went smoothly. I designed the extension’s logo, screenshots, promo image, and other visuals using Figma, making sure they matched the dimensions recommended by the Chrome Web Store.

Tip: Stick to the official size guidelines to avoid image rejection or awkward cropping.

Once the assets were ready, I uploaded them along with the extension, filled out the basic information, and submitted them for review.

Since WebLines is a simple tool with minimal permissions, it was approved in just 2 days. Those two days felt long. I was really pumped to see my first extension live.

🔗 Try WebLines for yourself: Visit the Chrome Web Store

If you’re building something or have questions about publishing your extension, feel free to ask down in the comments. And if you’ve already launched one, share it. I’d love to see what you’ve made!

WebLines: Your On-Screen Ruler for Perfect Alignment

Sushil Bajracharya — Sun, 27 Jul 2025 15:13:21 +0000

Check out WebLines on the Chrome Web Store and follow along with the story below.

Back story

While working on a complex design project recently, I found myself obsessing over alignment—tweaking absolute positions and spending more time than I’d like to admit, and then, half-jokingly, I told my teammates:
"I think I need a ruler to check if these elements are in line!"

That random joke sparked an idea:
"What if I could have a ruler inside my web browser?"
A tool that lets me draw straight lines across a webpage to check alignment quickly and visually.

I immediately searched the Chrome Web Store, and as expected, someone had already thought of it.
But instead of feeling discouraged, I saw an opportunity. I thought:
“Why not build my version with my twist?”
I tried a few amazing existing extensions, read their reviews, and noticed some areas where the user experience could be improved. So I built a version that addressed those gaps and better fit my workflow—hoping it might help others too. That’s how WebLines was created.

What is WebLines?

WebLines is a simple Chrome Extension that allows you to draw horizontal or vertical lines across any webpage. These lines help you visually verify whether elements are aligned properly. No more squinting or nudging with guesswork.

You can:

Draw multiple lines anywhere on the screen
Customize line color and opacity
Remove lines easily
Manage everything from a clean, user-friendly popup

It’s designed to be lightweight, intuitive, and genuinely helpful. Something I wish I had when I was aligning those divs.

🚀 Try WebLines
Install WebLines from the Chrome Web Store

Final Thoughts

WebLines started as a random joke, but turned into a tool I now rely on whenever I need to check visual alignment. It’s simple, reliable, and does exactly what I built it for.
If you’re a developer or person who values precision, give WebLines a try, and if you do, I’d love to hear your feedback. Let me know how it felt using it so I can keep improving it for everyone.

Why is Semantic Versioning and how to add it in your React application

Sushil Bajracharya — Wed, 07 May 2025 20:29:14 +0000

As your React application evolves—introducing new features, fixing bugs, and optimizing performance—it becomes increasingly important to track these changes systematically. This is where Semantic Versioning (SemVer) comes into play.

What Is Semantic Versioning?

Semantic Versioning is a versioning scheme that assigns meaningful version numbers to software releases, following the format:

MAJOR.MINOR.PATCH

Each segment tells a story:

MAJOR: For breaking changes or major architectural shifts.
MINOR: For adding features in a backward-compatible way.
PATCH: For backward-compatible bug fixes or small improvements.

For example, version 2.1.3 implies the second major release, with one minor feature update, and three patches since the last minor update.

Why Use Semantic Versioning in React Apps?

Using SemVer brings structure and predictability. It:

Helps your team and users understand the impact of updates.
Supports better version control across environments (like staging vs. production).
Encourages good development habits.

Adding Version Info to Your React Project

Manually Updating the Version

In every React project (created via create-react-app, Vite, etc.), there’s a package.json file where the project version is stored:

// package.json
{
  "name": "my-react-app",
  "version": "1.0.0",
  ...
}

Every time you push a meaningful change—be it a bug fix, feature addition, or breaking change—update this version number accordingly.

Displaying Version Number in the UI

You might want to display the version number somewhere in your app—maybe in the footer, an “About” section, or for debugging purposes.

Here’s how you can do it:

a. Access the Version from package.json

You can import the version number like this:

// src/components/Version.tsx
import React from 'react';
import packageJson from '../../package.json';

const Version = () => {
  return (
    <p style={{ fontSize: '0.8rem', color: '#888' }}>
      Version: {packageJson.version}
    </p>
  );
};

export default Version;

Note: This works as long as your project setup supports importing JSON (it does by default in most React setups).

b. Use It in Your App

// src/App.tsx or wherever appropriate
import React from 'react';
import Version from './components/Version';

function App() {
  return (
    <div>
      <h1>My Awesome React App</h1>
      {/* Other components */}
      <footer>
        <Version />
      </footer>
    </div>
  );
}

export default App;

Now your version will be visible in the UI—super handy for both users and developers to keep track of the release they’re using.

⸻

Final Thoughts

Semantic Versioning may seem like a small detail, but it plays a big role in keeping your development process sane, especially as your app grows. By pairing it with visible version info in your UI, you make life easier for users, teammates, and even your future self.

It’s a lightweight step that adds clarity and professionalism to your project.

How to Clean Up node_modules Folders and Free Gigabytes of Space

Sushil Bajracharya — Wed, 07 May 2025 19:56:04 +0000

Working on multiple Node.js projects often leaves your system buried under countless node_modules folders. These directories can quietly eat up a surprising amount of disk space. Manually removing them is not just boring — it’s time-consuming. In this post, we’ll explore fast, efficient ways to delete all node_modules folders recursively and free up your system.

💡 Note: This guide uses Unix-based commands and is intended for macOS and Linux. Windows users can follow along using WSL or Git Bash. npkill works on all platforms.

Basic Command to Delete node_modules

The simplest way to delete all node_modules directories from the current folder and its subdirectories is by using the find command:

find . -name 'node_modules' -type d -prune -exec rm -rf '{}' \

This command searches for directories named node_modules and deletes them recursively. However, if there are many directories to delete, it can take a long time.

Improving the Command

To improve the efficiency of the command, you can use the + at the end of the exec command, which will combine multiple delete operations into one:

find . -name 'node_modules' -type d -prune -exec rm -rf '{}' +

While this command is faster because it batches the delete operations, it might not provide real-time feedback. It can be problematic if you want to monitor the progress or resume the operation in case it gets interrupted.

Making the Command Resumable

To make the deletion process resumable and provide real-time feedback, you can use the \; at the end of the exec command and add the -print option:

find . -name 'node_modules' -type d -prune -print -exec rm -rf '{}' \

With this command, each node_modules directory is deleted individually, and the deleted directory is printed to the console. This approach makes it easier to see the progress and resume the operation if it gets interrupted.

Usage Note

Before running any of these commands, make sure to navigate to the root directory of your projects. You can do this using the cd command. Alternatively, you can specify the project directory directly in the find command:

cd /path/to/your/project
find . -name 'node_modules' -type d -prune -print -exec rm -rf '{}' \;

Or without changing the directory:

find /path/to/your/project -name 'node_modules' -type d -prune -print -exec rm -rf '{}' \;

Interactive Method

Prefer a visual interface over terminal commands? npkill is a great tool for scanning and deleting node_modules folders interactively.

npx npkill

npkill will display a list of node_modules directories with their sizes, and you can select which ones to delete interactively.

Conclusion

Cleaning up node_modules directories is a quick win for reclaiming valuable disk space. Whether you lean toward a command-line solution or prefer something more interactive, the methods above make it easy to manage and remove these space-hungry folders. Pick the approach that fits your workflow best — and keep your development environment clean, fast, and clutter-free.

Making clean API requests to the Backend with URLSearchParams in React.

Sushil Bajracharya — Tue, 02 Jan 2024 18:16:53 +0000

In the earlier days of crafting URLs in my React projects, I leaned on the trusty technique of String Interpolation for wrangling those pesky URL parameters. Sure, it got the job done, but deep down, it felt a bit off, like wearing mismatched socks – functional working, yet not quite right. The code lacked the finesse I yearned for, and as the project grew, the unease lingered. If you've ever sensed that discomfort when using String Interpolation for URL parameters, you're not alone. Let's explore a more fitting solution that not only does the job but does it with a touch of elegance.

Enter ---> a cleaner and more structured approach using URLSearchParams in React.

"URLSearchParams" is a built-in JavaScript object that allows you to work with the query string of a URL. It provides methods for appending, deleting, getting, and setting key-value pairs in the query string.

Here is how we can utilize URLSearchParams for clean API.

 const queryParams = new URLSearchParams();
 queryParams.append("limit", "10");
 queryParams.append("offset", offset);
 if (isActive) {
   queryParams.append("active", "true");
 }

 const params = `?${queryParams.toString()}`;
 const url = `${api}${params}`;

We create a new instance of URLSearchParams to manage our URL parameters. The append method adds parameters to the URLSearchParams instance. Here, we add "limit" with a static value of "10," "offset" with a dynamic value, and "active" conditionally. The if (isActive) statement ensures that the "active" parameter is appended only if the isActive variable is truthy. We construct the query string using queryParams.toString(). Finally, we combine the base API URL (api) with the constructed query string to form the complete URL.

Advantages:

Structured Parameters: Each parameter is appended individually, enhancing readability.
Conditional Appending: Conditions for appending parameters are clearer.
Dynamic Values: Easily accommodates dynamic values.
Automatic Encoding: Takes care of encoding special characters, reducing the risk of errors.

While both approaches achieve the same result, the URLSearchParams approach is cleaner, more readable, and easier to maintain, especially as our project complexity increases. If you have found a better way, feel free to share it in the COMMENTS. Do REACT and FOLLOW ME to hear more from me.

REFERENCE:
UrlSearchParams in JS
What is urlsearchparams in javascript

Impact of letter casing on design

Sushil Bajracharya — Mon, 01 Jan 2024 20:20:04 +0000

In my latest web project, I opted to use material tailwind component library to aid me in development. In the package, I encountered uppercase words in buttons and it left me a bit confused about this design choice. To know more about how I should feel seeing this UPPERCASED Design, I delved deep into my research on letter casing.

According to my research, I found there to be 3 standard letter casings,

Sentence casing
Title Casing
ALL CAPS

Design is so simple, that's why it is so complicated. - Paul Rand

Sentence casing
Sentence casing is taught to us by our teachers in schools and colleges. We capitalize the first letter of the sentence. The sentence case looks casual, cleaner, and improves readability.
When to use:
a. Sentence casing is more legible, we use it for long texts such as paragraphs, long text contents, etc. It is easier to scan and read.
b. Can be used freely, it is causal and clean.
Title Casing
Title casing is capitalizing every word in a sentence. This casing was popularized by Apple. In the title case, each word is given emphasis and words stand out, but it makes reading/scanning of text slower and more difficult.
When to use:
a. As the title suggests, we can use it in titles and subtitles.
b. Can be used in navigation elements like links.
c. Not to be used in labels, buttons, and long texts.
ALL CAPS
ALL CAPS is capitalizing each letter of the word. This makes the word stand out in the UI but it makes readability hard.
I found it interesting to know that there are different theories on why it is difficult to read. One theory states that SINCE LETTERS ARE CAPITAL, it is difficult for us to distinguish the letters as all the letters have the same height, we lose the height advantage. Another source counters the claim saying it is difficult to read not because of shape but because of lack of practice.
ALL CAPS means important, it should not be overused and it should not be where reading long text is required.
When to use:
a. When we want to emphasize and direct the user's attention to a specific element or piece of information.
b. We can use it in UI buttons, tabs, headings, titles, and labels where text length is shorter than one line.

Based on my findings, it turns out that having ALL CAPS in buttons isn't as frowned upon. Due to this unsettlement, I got to learn about the cases and share my understanding. If you have anything you want to share, feel free to express it in the COMMENTS. Do REACT and FOLLOW ME to hear more from me.

Follow me if you want to know, why I decided not to use Tailwind Material and created my own custom components.

REFERENCES:

Why letter casing is important to consider during design decisions
Writing styles for a better UI and UX
[All Caps on UI: Good or Bad? ]:(https://uxdworld.com/2017/12/30/all-caps-on-ui-good-or-bad/)

Sharp or Rounded Borders in Design

Sushil Bajracharya — Mon, 01 Jan 2024 18:19:15 +0000

I was working on a web project that involved creating an examination system tailored for pilots. Since childhood, I have regarded the profession of a pilot as a serious and meticulous undertaking, so, my primary focus was on achieving a design that exuded professionalism and seriousness. During the design process, the consideration of incorporating sharp edges caught my attention, prompting me to delve deeper into the intricacies of when to opt for sharp borders versus rounded ones. As I delve into my discoveries and understanding of rounded and sharp border design, allow me to share the insights I've gathered.

The choice between Sharp and Rounded styles can significantly impact the visual appeal, usability, and emotional response of a website. The unexpected revelation emerged when I realized the subtle link between sharp designs and my childhood. From early warnings about sharp objects like scissors, pencils, thorns, scales, and more, the association of sharp designs with strictness and seriousness became remarkably apparent. In light of my research, I've compiled a list outlining the distinctions between sharp and rounded design styles. Here's a breakdown of the differences:

Aesthetic Appeal:

Sharp Borders: Sharp edges and straight lines convey a sense of precision and modernity. They often contribute to a clean and minimalistic aesthetic, making elements stand out with a bold and defined look.

Rounded Borders: On the other hand, rounded borders offer a softer and more approachable feel. They can create a friendly and inviting atmosphere, which might be well-suited for websites with a focus on user engagement or content consumption.

Brand Identity:

Sharp Borders: Companies with a high-tech or professional image might benefit from sharp borders to reinforce a sense of precision and efficiency. This style can align well with brands in industries such as technology, finance, or consulting.

Rounded Borders: Brands aiming for a warm and inclusive image, such as those in the hospitality, health, or lifestyle sectors, may find that rounded borders help communicate a friendlier and more welcoming identity.

Usability and Accessibility:

Sharp Borders: In some cases, sharp borders can be advantageous for creating a clear visual hierarchy. They can help define distinct sections and guide users through the content more efficiently, especially when combined with contrasting colors.

Rounded Borders: Rounded edges are often associated with a softer user interface. This can reduce visual friction, making it easier for users to focus on content without distractions. Rounded borders can also contribute to a more tactile and touch-friendly design, enhancing the overall user experience, especially on mobile devices.

Device Responsiveness:

Sharp Borders: If your website needs to adapt to various screen sizes and resolutions, sharp borders can be more forgiving in terms of maintaining a polished appearance. Straight lines tend to scale well, preserving the integrity of the design across different devices.

Rounded Borders: While rounded borders can be responsive as well, they may require additional considerations to ensure a consistent and appealing look, especially on smaller screens.

I hope my insights will guide your decisions while you design your next project. In addition to the insights shared, another valuable lesson was the consistency of the design, whether you lean towards a serious tone with sharp edges or a friendlier feel with rounded borders, you must follow it throughout your project. Feel free to share your thoughts in the comments.

Currently, I'm delving into the impact of letter casing on design, and if you're eager to explore this and other captivating insights in the realm of design and development, consider following me for regular updates.

Builtin token generator in Node

Sushil Bajracharya — Tue, 23 May 2023 17:37:34 +0000

For those who are already familiar with the concept, you can skip the explanation and directly access the code snippet: Go to Code. For those who are interested in learning about it, I encourage you to continue reading below.

Introduction

In modern web applications, JSON Web Token (JWT) authentication is a widely adopted method to secure APIs and authenticate users. The tokens are generated using cryptographic algorithms, such as HMAC or RSA, among others, to ensure both their uniqueness and security. These algorithms play a crucial role in generating secure tokens that can be trusted for authentication and data integrity.
For the generation of these tokens, it requires a secret. secret is a key that is used sign and verify the integrity of the token.

Choosing a strong secret key is crucial for secure token verification. Using simple and easily guessable secrets like "secret123" or "catdog123" can make the token verification process vulnerable to unauthorized intruders. In the early stages of my Node.js journey, I had used such secrets. It is important to select a unique and complex secret key to enhance the security of the tokens and in this blog post, we will explore how to generate secure random token easily in the console using NodeJs and it's builtin crypto module.

Prerequisites:
Before proceeding, make sure you have Node.js installed on your machine. You can download the latest version from the official Node.js website (https://nodejs.org).

Code

To generate a secure secret key, you can follow these steps:

require('crypto').randomBytes(64).toString('hex')

Copy the above line of code:
Open terminal or console.
Run node on the terminal or console.
Paste the code.
Press enter to run the code.

Remember to save and bookmark this blog post so that you can easily refer back to it whenever you need to generate a secret key for your future projects.