DEV Community: Kushal

Diffey.in: The Online Text Comparison & Diff Tool

Kushal — Sat, 15 Nov 2025 14:13:25 +0000

Introducing Diffey: The Effortless Online Text Comparison & Diff Tool

Have you ever found yourself struggling to spot the differences between two versions of a document, a piece of code, or even a simple block of text? Whether you’re a developer reviewing code, a writer editing drafts, or a student checking assignments, comparing text can be tedious and error-prone.

That’s why I built Diffey — Free Online Text Comparison and Diff Tool — a free, privacy-friendly online diff tool designed to make text comparison fast, accurate, and enjoyable.

Why Diffey?

There are plenty of diff-tools out there, but I wanted something that was

Instant: No sign-up, no installation, just open and compare.
Flexible: Works for code, documents, essays, or any text.
Privacy-first: Your data never leaves your browser.
User-friendly: Clean interface, easy to use, and accessible from any device.

Key Features

Side-by-side Comparison: Paste your texts into two editors and see differences highlighted in real time.
Granular Control: Choose to compare by line, word, or character for the level of detail you need.
Handy Tools: Swap, clear, and copy text with a single click.
Character Count: Instantly see the length of each version.
Theme Toggle: Switch between light and dark modes for comfortable viewing.
No Cost, No Catch: 100% free, with no ads or tracking.

Who Is Diffey For?

Developers: Review code changes, debug, or check merge conflicts.
Writers & Editors: Track revisions, compare drafts, or check for accidental changes.
Students & Teachers: Spot similarities or differences in assignments and essays.
Anyone: If you need to compare text, Diffey is for you!

How to Use Diffey

Visit diffey.in
Paste your two text versions into the “Version A” and “Version B” editors.
Click “Compare” — differences are instantly highlighted.
Adjust the diff granularity as needed, swap or clear text, and enjoy a distraction-free experience.

Final Thoughts

I created Diffey to solve my own frustrations with clunky, privacy-invasive diff tools. My hope is that it helps you work faster and with more confidence, whether you’re coding, writing, or just curious about what’s changed.

Give it a try and let me know what you think! Your feedback and suggestions are always welcome.

Happy comparing!
https://diffey.in

Also check out GivenWhenZen — Online Gherkin Editor and Formatter by Diffey.in

Originally published at https://www.kushalbhalaik.xyz on November 15, 2025.

GivenWhenZen - A Free Online Gherkin Editor for BDD Enthusiasts by Diffey.in

Kushal — Fri, 24 Oct 2025 16:28:27 +0000

Hello, folks!!

I come bearing news: I finally completed something that I wanted to work on for a long time: GivenWhenZen-A Free Online Gherkin Editor/Formatter for BDD Enthusiasts.

🎯 Why I Built This:

As a QA developer deeply involved in BDD (Behavior-Driven Development), I often found myself switching between different tools to format and validate Gherkin feature files. Though there are a few options available, BUT I wanted something simpler-a clean, fast, browser-based editor/validator that just works. I vibe-coded it in a few hours, drawing inspiration from JSONlint.com.

✨ Key Features:

• Real-time formatting with smart indentation
• Instant validation and linting
• Support for Cucumber, JBehave, and SpecFlow
• Dark/Light theme options
• Keyboard shortcuts for productivity
• Zero setup required-works in your browser

💡 Built to inspire:

• Clean, minimalist UI inspired by modern code editors
• Fast performance with instant feedback
• Built using vanilla JavaScript for maximum performance
• free to use

• BDD practiti
oners (anyone who used BDD in 2025)
• QA engineers
• Product owners writing acceptance criteria
• Developers implementing Cucumber/SpecFlow tests

🔗 Try it out: https://diffey.in/givenwhenzen

Also try out the Diffey.in - Text Comparison & Diff Tool Diffey.in - Text Comparison & Diff Tool

Getting started with Deno

Kushal — Sat, 15 Feb 2020 14:09:25 +0000

In this article, I’m going to show you how to get started with Deno — A secure runtime for JavaScript and TypeScript. We’ll see Installation of Deno, Hello World program and setting up an http-server.

The What?

Deno is a secure runtime for Javascript & Typescript (right out of the box) just like Nodejs is a runtime for Javascript. Deno was created by same guy who created Nodejs i.e. Ryan Dahl.

Deno aims to improve what Ryan Dahl thinks he should’ve done with Nodejs like:

Installing Deno.

There are few options available on official site deno.land/.

We are gonna install it using Power-shell command:

`iwr https://deno.land/x/install/install.ps1 -useb | iex`

The Deno.exe executable file is stored in C:\Users<username>.deno\bin\deno.exe by default.

In macOS or Linux $HOME/.local/bin

Following command will give info about Deno, V8 Engine & Typescript version installed on your machine.

`deno --version`

Hello World — Writing first program with Deno.

Open up your terminal and just type following:

`deno [https://deno.land/std/examples/welcome.ts](https://deno.land/std/examples/welcome.ts)`

will result into:

What happened here is we execute a code present in a remote file, AWESOME!!

Now let’s execute a local code:

Create a file inside “C:\deno” > index.ts (it could have .js extension for a javascript file)

Now using terminal execute following command:

`deno index.ts`

`or`

`deno index.js`

Setting up an http-server.

Deno provides an http-server i.e.

`[https://deno.land/std@v0.30.0/http/server.ts](https://deno.land/std@v0.30.0/http/server.ts)`

As provided on official website example, here’s how you can create a running server on your machine:

Code:

`import { serve } from "https://deno.land/std@v0.30.0/http/server.ts";`

`const s = serve({ port: 5000 });`

`console.log("Listening on http://localhost:5000/");`

`for await (const req of s) {
  req.respond({ body: "Hello World!!" });
}`

just copy paste above code into your “index.ts” file and run it with following command.

`deno -A index.ts`

-A flag provides all the necessary permission for your app to run on your machine

Using Oak middle-ware with deno http server.

Oak is a middleware framework for Deno’s net server, more on this can be found on GitHub repo: https://github.com/oakserver/oak

NOW let’s create a GET & POST endpoint by altering our “index.ts” code with following:

import { Application, Router } from "[https://deno.land/x/oak/mod.ts](https://deno.land/x/oak/mod.ts)";

const router = new Router();

router.get("/", context => {
  context.response.body = "Hello World!";
});

router.post("/", context => {
  context.response.body = "You have made a POST request!";
});

const app = new Application();

app.use(router.routes());
app.use(router.allowedMethods());

const server = app.listen({ port: 5000 });

console.log("Listening on [http://localhost:5000/](http://localhost:5000/)");

Result:

So, that was it regarding installing Deno, writing first ‘Hello-World” program and setting up an http-server along with Oak middleware.

Resources:
Deno — a better Node.js? | Krzysztof Piechowicz : https://www.youtube.com/watch?v=mzfw9TwBiQc&t=616s

Deno Examples: https://deno.land/#example

Oak Middleware: https://github.com/oakserver/oak

Original article on: https://blog.kushalbhalaik.xyz/getting-started-with-deno/

GitHub Pages — A Comprehensive guide w/ images (Part 2)

Kushal — Sun, 12 Jan 2020 07:00:28 +0000

This is part 2 of the article series GitHub Pages — A Comprehensive guide w/ images

Recently I started building my personal website as everyone is building one for themselves these days. I got a cool TLD (.xyz), and that is the only money I wanted to spend. Since then I’ve been looking for ways to host it without any costs.

In part 1 of this series we saw how to publish GitHub User Pages and how to link it with custom-domain.In this article we’ll see how to have more than one Github Pages per account (Yes, it is possible). Commençons!!

Before proceeding make sure you already have a repository .github.io

Setting up Multiple Github Pages:

Let’s create a new repository:

Goto Github.new and fill out the new repository details, I’ll call it demo:

Note: It is important to keep this repository public

Now goto repository settings:

On Settings page, scroll down to Github Pages section:

Make the repository Public, if you see following message:

Once repository is Public GitHub Pages will become enabled for the current repository

Click on None, then view current options:
we can either choose following options:
Using “master” branch of demo repository for publishing GitHub pages (Like in GitHub User Pages)
Using /docs page under “master” branch for publishing GitHub Pages
We’ll be using gh-pages branch option which is currently not available as gh-pages branch doesn’t exist for demo repository as of yet

Copy the demo repository link:

Now clone the repo to local machine: Here, far11ven is my GitHub username

~$ git clone https://github.com/far11ven/demo.git

Create local gh-pages branch and push it to GitHub:

~$ cd demo
~$ git branch gh-pages
~$ git push remote -u origin gh-pages

Go back to demo settings on GitHub and select gh-pages as source for publishing:

After this step whatever you put in gh-pages branch will be automatically published.

Let’s create a simple index.html file within this repository:

~$ echo “Hello gh-pages!!” > index.html

Add, commit and push your changes to GithHub remote:

~$ git add *
~$ git commit -m “Initial commit”
~$ git push -u origin gh-pages

You can see in your browser demo repository has been published

You will have a main GitHub User Page (One per account) username.github.io and all other repos will be published as sub pages

or,

if you have already linked a custom-domain to your GitHub User Page, the n you can see the published page at www.example.com/your-repo-name
in my case demo repo will be published at far11ven.github.io/demo

Setting up custom-domains:

i) Setting up Github Pages as a domain

To have our subpages be listed as demo page we need to do following changes in our GitHub repo and our Domain provider

Create a CNAME file in your repository: I will be doing it via GitHub UI, just create a CNAME file (with no extension) and just enter your sub-domain name inside it, nothing else. in my case, I want to make demo pages appear as your-website.com

Once Done, commit your changes.

Add a new DNS record on your DNS provider: We need to change existing CNAME records to point to created GitHub pages i.e. username.github.io

ii) Setting up Github Pages as a sub-domain:

To have our subpages be listed as demo page we need to do following changes in our GitHub repo and our Domain provider

Create or Edit an existing CNAME file in your repository: I will be doing it via GitHub UI, in my case, there is already a CNAME File so I ‘ll just edit the existing file and replace everything in it with my sub-domain, nothing else. in my case, I want to make demo pages appear as demo.kushalbhalaik.xyz

Once Done, commit your changes.

Add a new DNS record on your DNS provider for existing Domain: We need to change existing CNAME records to point to created GitHub pages i.e. username.github.io

Important Points:

Again, at this point, nothing needs to be done from our end, we need to wait for changes to reflect on both GitHub and Cloudflare end, Which may take some time (usually its prompt) but may take some time based on your DNS provider
You won’t be able to access your pages via username.github.io, or username.github.io/our-repoin case you try and enter this in browser, you’ll be redirected to your custom domain or custom sub-domain
Your can-not add multiple GitHub Pages as a sub-doman to GitHub User Page i.e demo.far11ven.github.io in my case is not a valid url

Final Result:

We have successfully created a sub-domain to host our another github-page, follow these steps to create even more pages within your website.

Cheers!!

Original article on: https://blog.kushalbhalaik.xyz/github-pages-a-comprehensive-guide-w-images-part-2/

GitHub Pages — A Comprehensive guide w/ images (Part 1)

Kushal — Sat, 11 Jan 2020 16:45:56 +0000

Recently I started building my personal website as everyone is building for themselves these days. I got a cool TLD (.xyz), and that I is the only money I wanted to spend. Since then I’ve been looking for ways to host it without any costs.

I’ve tried different host providers such as Heroku, 000webhost so far, which are good options. My website is vastly static pages so far until I figure out how to have a cms such as Ghost to be integrated with Gatsby for adding content periodically (Of course for free). Anyways I thought if my site is mostly static pages so why not give Github Pages a try (it’s been on my list for a quite sometime now) and along the way I encountered various hurdles and there wasn’t an elaborate article around it. So folks here we are :)

This is part 1 of this article series, part 2 will be coming soon. Enchanté.

Setting up Github Pages:

This is the most straight forward thing, it’s all neatly illustrated here on Github Pages, but as this article‘s name suggests I’m bound:

We’ll start by creating a repository on Github:

Goto Github.new, a cooler way to create Github repositories (You’ll see).

Make sure your repo-name is username.github.io
The pages ending with username.github.io are called User Pages, where username could belong to an individual or an organization

Note: It is important to make your repository Public, in order for your GitHub User pages to be accessible to all

We won’t be creating any other branch, because User Pages require to be built from master branch.
And in this article, we won’t use Jekyll to publish our pages.

First clone the repo to local machine: Here, username is GitHub username

~$ git clone https://github.com/username/username.github.io.git

Create an index.html file inside this repository:

~$ cd **username**.github.io

~$ echo “Hello World!!” > index.html

Add, commit and push your changes to Github remote:

~$ git add *

~$ git commit -m “Initial commit”

~$ git push -u origin master

Type {username.github.io} in browser and you’re done publishing your first website to github pages.

Setting up Github Pages on your custom-domain:

We have successfully created and deployed Github Pages. But I want users to visit my custom domain kushalbhalaik.xyz. Lets link’em up:

Created a CNAME file in your repository: I will be doing it via GitHub UI, just create a CNAME file (with no extension) and just enter your domain name inside it, nothing else.

Once Done, commit your changes.

Change DNS records on your DNS provider: We need to change existing CNAME records to point to created github pages i.e. username.github.io

Important Points:

At this point, nothing needs to be done from our end, we need to wait for changes to reflect on both GitHub and Cloudflare end, Which may take some time (usually its prompt) but may take some time based on your DNS provider
You won’t be able to access your pages via username.github.io, in case you try and enter this in browser, you’ll be redirected to your custom domain

So this was all to get you started with your very own Github Pages (User). In Part 2 of this series we’ll be taking deeper look into gh-pages and linking pages to your sub-domain. Stay Tuned!!

Original article on: https://blog.kushalbhalaik.xyz/github-pages-a-comprehensive-guide-w-images-part-1/

Bootstrap icons — Overview

Kushal — Fri, 03 Jan 2020 05:42:26 +0000

#bootstrap #html

Bootstrap is a large and complex frontend library which we all fancy having some powerful functionality and customization built-in. Occasionally though, when you need to have icons in your web projects; you go straight to Font-awesome or Glyphicons (Bootstrap v3). But developers and designers often felt constricted to the fact that they have to rely on some other third party library for the icons having to pay for icons they desire. This just didn’t seem right for any of us.

Fast forward 2019, gone are the days when we had to choose between Font-awesome or Glyphicons (Bootstrap v3), For the first time ever, Bootstrap has its own icon library, custom designed and built for its components… (navbars, button, cards, and more).

You can Track latest releases on Github here, also you can checkout Bootstrap icons documentation.

Getting Started

With npm

`npm install bootstrap-icons`

Download

Download the project from here, and from the icons folder and directly copy icons SVGs which you require in your project.

Usage

Choose how you would like to integrate Bootstrap icons in your web application.

External image

Use directly from the project directory and reference them like normal images with the <img> element.

Code:

`<img src="/assets/img/bootstrap.svg" width="64" height="64" title="Bootstrap">`

Preview:

Embedded

Embed your icons within the HTML of your page (as opposed to an external image file). Here we’ve used a custom width and height.

Code:

`<svg class="bi bi-chevron-right" width="64" height="64" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
      <path fill-rule="evenodd" d="M6.646 3.646a.5.5 0 01.708 0l6 6a.5.5 0 010 .708l-6 6a.5.5 0 01-.708-.708L12.293 10 6.646 4.354a.5.5 0 010-.708z" clip-rule="evenodd"/>
</svg>`

Preview:

As CSS

You can also use the SVG within your CSS (be sure to escape any characters, such as # to %23 when specifying hex color values). When no dimensions are specified via width and height on the <svg>, the icon will fill the available space.

Code:

`               .bi::before {
                              display: inline-block;
                              content: "";
                              background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='%23333' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/></svg>");
                              background-repeat: no-repeat;
                              background-size: 1rem 1rem;
                            }`

Preview:

Styling

Color can be changed by setting a .text-* class or custom CSS:

Using bootstrap css classes

Code:

`<svg class="bi bi-alert-triangle text-danger" width="64" height="64" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg">`

`                              ...`

`</svg>`

Preview:

Using custom css classes

Code:

`.my-custom-css-class{
                      color:green;
                    }`

Preview:

Using Style Attribute

Code:

`style="color:blue;"`

Preview:

Original article on: https://blog.kushalbhalaik.xyz/bootstrap-icons-overview/

Email Templating with EJS (Node + Express + SendGrid)

Kushal — Thu, 02 Jan 2020 06:54:18 +0000

nodejs #express #ejs

I’ve been building a social links website 8link, which requires me to interact with my users at different levels. So the type of email interaction with my users, I’ve narrowed it down to the following categories of emails:

Welcome email (With verify link)
Password reset link
Automated response to user queries
The actual response to User queries
Occasional promo or newsletters

I’ve been using a Node.js +Express back-end and I wanted to achieve it with same frame-work. So I started using SendGrid Email API to achieve this goal.

SendGrid already has a Templating service, if you are interested you can check it here.

Back to Templating with EJS,
in This article, we’ll see how can we create Re-Usable HTML Templates with EJS and then deliver them with SendGrid.

We’ll start by creating a simple node project:

npm init sendgrid-mailer

Install following dependencies,

npm i --save express cors ejs

Our Package.json should look like:

Let’s create a simple endpoint to serve our email “/hello”

Notice //set express view engine to ejs
app.set(“view engine”, “ejs”);

it should give us the following response:

We are halfway there, Now create a welcome-mail.ejs file in views (Template) folder in the project root directory.

Now add some HTML code in there, which will serve as an underlying template for our welcome mail:

You will see the following syntax in this HTML, which is used to receive data before rendering it. We are using the following variables for manipulating data:

//these are EJS expressions to dynamically receive and display data while rendering an HTML

<%= user_firstname %>
<%= confirm_link %>

Now we need to make changes to our “/hello” endpoint

We’ll need to import following to our index.js file:

//imports
const path = require(“path”);
const ejs = require(“ejs”);

and our “/hello” app route function will change to :

app.get(“/hello”, (*req*, *res*, *next*) => {
let emailTemplate;
let capitalizedFirstName = “John”;
let userEmail = “John@example.com”;

ejs
.renderFile(path.join(__dirname, “views/welcome-mail.ejs”),
{
  user_firstname: capitalizedFirstName,
  confirm_link: “http://www.8link.in/confirm=" + userEmail
})
.then(*result* => {
  emailTemplate = result;
  res.send(emailTemplate);
})
.catch(*err* => {
  res.status(400).json({
      message: “Error Rendering emailTemplate”,
      error: err
     });
  });

});

in here, ejs.renderFile() take .ejs file path and specify values for _user_firstname _and confirm_link

Now if we hit “/hello” we get:

Whoops.. we now have our welcome template, we just have to deliver it via email now.

Let's integrate SendGrid now:

First signup for SendGrid mail API, by clicking here and get the API -KEY

Now get @sendgrid/mail package from npm.

npm i --save @sendgrid/mail

Import following into index.js

const SGmail = require(“@sendgrid/mail”);

Now in our code first register the SendGrid API Key

SGmail.setApiKey(process.env.SendGrid_Key);

//Note: store SendGrid_Key in your projects' config file

and replace **res.send(emailTemplate); **with following code:

const message = {
  to: userEmail,
  from: { email: “welcome@8link.in”, name: “8link” },
  subject: “Welcome link”,
  html: emailTemplate
};

return SGmail.send(message).then(*sent* => {

// Awesome Logic to check if mail was sent

   res.status(200).json({
      message: “Welcome mail was sent”

      });

}).catch(*err* => {

      console.log(“Error sending mail”, err);
      res.status(400).json({
          message: “Welcome mail was not sent”,
          error: err
      });

});

Our final code should look like:

And if I hit my “/hello” endpoint again, I should see that mail was sent successfully:

Full Code on Github: https://github.com/far11ven/SendGrid-Mailer

Original article on: https://blog.kushalbhalaik.xyz/email-templating-with-ejs-node-express-sendgrid/