DEV Community: Rupak Dey

swagrLite ⚡️ – Say Hello to a Lightweight Swagger Editor Alternative

Rupak Dey — Tue, 22 Jul 2025 14:55:50 +0000

We’ve all been there: you're trying to tweak your OpenAPI spec, and you end up tangled in YAML errors, weird validation issues, or—you guessed it—paywalls.

Enter swagrLite ⚡ — a lightweight, open-source Swagger Editor–like tool built with React, TypeScript, and Vite. It gives you the core features you need to write, validate, and explore OpenAPI YAML files without jumping through hoops.

👉 Try It Out Here!

🚀 Why swagrLite?

Swagger Editor (editor.swagger.io) is great—until it locks features behind a paywall 💰.
That’s where swagrLite⚡️ steps in.

It offers a fast and minimal experience, perfect for quick spec validation, API testing, or just learning how OpenAPI works.

✨ Features at a Glance

🧾 YAML Parsing with basic error detection
✅ OpenAPI Schema Validation so your specs are always compliant
🪠 Real-time squiggles for instant YAML & OpenAPI feedback
🔍 Clickable Error Panel to jump to the source of problems
🧭 API Exploration mode to test and learn how your API works
🕒 Debounced Validation for a smoother typing experience
📁 File Import/Export to manage specs locally
📂 Drag and Drop Support for importing YAML files quickly

🔧 More features coming soon! Stay tuned for improvements and new tools.

🤝 Contributions Welcome!

If you spot a bug 🐞, have an idea 💡, or just want to help out—open an issue or submit a PR here!

This project thrives on community input. Whether it's feature requests or code contributions, you're welcome to jump in.

🌟 Spread the Word!

If you find swagrLite helpful, consider:

⭐️ Starring the repo
📢 Sharing with your dev friends
💬 Tweeting about it
🧑‍💻 Using it in your own projects

Let’s make OpenAPI editing smoother and more accessible—without the paywalls.

3 Lightweight JavaScript Carousel Libraries

Rupak Dey — Fri, 15 Oct 2021 05:41:47 +0000

Save for later.

embla-carousel.com

A lightweight carousel library with fluid motion and great swipe precision.

glidejs.com

A dependency-free JavaScript ES6 slider and carousel. It’s lightweight, flexible and fast. Designed to slide. No less, no more.

splidejs.com

A lightweight, flexible and accessible slider and carousel. No dependencies, no Lighthouse errors.

Thank you for reading. Please leave a like if you enjoyed the post and follow for upcoming articles!

P.S. Want the next post to be something specific? Do let me know in the comments.

🤘🏻

Connect with me : Github
Support me : Buy me a coffee!

Dashboard Widget with Tailwind CSS & Chart.js

Rupak Dey — Mon, 11 Oct 2021 06:59:00 +0000

Save for later.

Hello. Through this post we'll see how we can make a dashboard widget (in the cover photo) with the help of Tailwind CSS and Chart.js!

Let's directly get into it 🚀

Step 1: Include the assets

You may do this either via CDN or NPM. I've used CDN here.

<link rel="stylesheet" 
href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css"  
/>
<link rel="stylesheet" 
href="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.css"
/>
<script 
src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.js">
</script>

Step 2 : Build the interface

This consists of making the card, placing the text and chart.

<div class="min-w-screen min-h-screen bg-gray-200 flex items-center justify-center px-5 py-5">
  <div class="w-full max-w-3xl">
    <div class="-mx-2 md:flex">
      <div class="w-full md:w-1/3 px-2">
        <div class="rounded-lg shadow-sm mb-4">
          <div class="rounded-lg bg-white shadow-lg md:shadow-xl relative overflow:hidden">
            <div class="px-3 pt-8 pb-10 text-center relative z-10">
              <h4 class="text-sm uppercase text-gray-500 leading-tight">
                Followers
              </h4>
              <h3 class="text-3xl text-gray-700 font-semibold leading-tight my-3">
                13,579
              </h3>
              <p class="text-xs text-green-500 leading-tight">
                🔺 40.9%
              </p>
            </div>
            <div class="absolute bottom-0 inset-x-0">
              <canvas id="chart1" height="70"></canvas>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Step 3 : Add the chart

This is the JavaScript we need to generate the chart.

<script>
        const chartOptions = {
        maintainAspectRation: false,
        legend: {
          display: false
        },
        tooltips: {
          enable: false
        },
        elements: {
          point: {
            radius: 0
          }
        },
        scales: {
          xAxes: [
            {
              gridLines: false,
              scaleLabel: false,
              ticks: {
                display: false
              }
            }
          ],
          yAxes: [
            {
              gridLines: false,
              scaleLabel: false,
              ticks: {
                display: false,
                suggestedMin: 0,
                suggestedMax: 10
              }
            }
          ]
        }
      };

      var ctx = document.getElementById("chart1").getContext("2d");
      var chart = new Chart(ctx, {
        type: "line",
        data: {
          labels: [1, 2, 1, 3, 5, 4, 7],
          datasets: [
            {
              backgroundColor: "rgba(101, 116, 205, 0.1)",
              borderColor: "rgba(101, 116, 205, 0.8)",
              borderWidth: 2,
              data: [1, 2, 1, 3, 5, 4, 7]
            }
          ]
        },
        options: chartOptions
      });
</script>

Output!

This is how it turns out to be.

Congrats! You've made a dashboard widget successfully. Do modify it according to your style and share it in the comment section below!
🙌🏻

Thank you for reading. Please leave a like if you enjoyed the post and follow for upcoming articles!

P.S. Want the next post to be something specific? Do let me know in the comments.

🤘🏻

Connect with me : Github
Support me : Buy me a coffee!

3 Sites that make CSS easy!

Rupak Dey — Sat, 09 Oct 2021 05:32:22 +0000

Save for later.

csslayout.io

Popular layouts and patterns made with CSS.

purecss.io

Set of small, responsive CSS modules that you can use in every web project.

griddy.io

Learn the CSS Grid!

Thank you for reading. Please leave a like if you enjoyed the post and follow for upcoming articles!

P.S. Want the next post to be something specific? Do let me know in the comments.

🤘🏻

Connect with me : Github
Support me : Buy me a coffee!

Are you aware of the 5 Second Rule?

Rupak Dey — Wed, 06 Oct 2021 06:04:42 +0000

Save for later.

This rule is commonly applied to Landing Page Design.

It helps to understand if the scope of the page is clear.

To do :

Show your page to someone for 5 seconds.
Hide it and ask them what they feel the purpose of the page was.

This will tell you, if your page is communicating the same as you intended it to.

The 3 important elements to take care of :

Title
CTA (Call to Action)
Catchy Image

You page should communicate :

What your brand/business does
What the website is for
What the visitor/user is supposed to do, i.e., Call to Action

You only have 5 Seconds to get your user involved!

Thank you for reading. Please leave a like if you enjoyed the post and follow for upcoming articles!

P.S. Want the next post to be something specific? Do let me know in the comments.

🤘🏻

Connect with me : Github
Support me : Buy me a coffee!

3 JS code snippets sites to use daily!

Rupak Dey — Mon, 04 Oct 2021 05:25:50 +0000

Save for later.

1loc.dev

JS utilities in single line of code.

htmldom.dev

Managing DOM with JS.

30secondsofcode.org

Snippets for all development needs.

P.S. Want the next post to be something specific? Do let me know in the comments.

🤘🏻

Connect with me : Github
Support me : Buy me a coffee!

VIIT : Why use this website layout?

Rupak Dey — Sun, 03 Oct 2021 06:36:42 +0000

Save for later.

People scan information and don't read all the content.

So that's why content type and placement is important.

Content that appears above the fold is what the user will see first.

The top of the page should attract users to continue scrolling.

What content is faster to consume?

Videos give more info than still images.
Images are easily scannable.
Icons are perceived faster than words.
Text used to give longer information.

Are you applying it to your design?

P.S. Want the next post to be something specific? Do let me know in the comments.

🤘🏻

Connect with me : Github
Support me : Buy me a coffee!

3 Sites for FREE UI KITS!

Rupak Dey — Thu, 30 Sep 2021 13:37:14 +0000

Save for later.

Clean REACT Solutions

Rupak Dey — Tue, 28 Sep 2021 13:19:45 +0000

Save for later.

1. Self-invoking functions

Fetch data async when the page loads

2. Long Shadows

Create artistic effects easily with CSS in JS

3. Building Timers

Make super simple timer with useRef hook

P.S. Want the next post to be something specific? Do let me know in the comments.

🤘🏻

Connect with me : Github | Tutoring | Freelance Web Dev

3 ways to clone in JS

Rupak Dey — Mon, 31 May 2021 12:42:22 +0000

Objects in JavaScript are reference values, you can't simply just copy using the '='

Save It For Later! Let's begin...

const food = {a : 'apple', b : 'burger'}

1. Spread

{...food}

2. Object.assign

Object.assign({}, food)

3. JSON

JSON.parse(JSON.stringify(food))

Result

{a : 'apple', b : 'burger'}

Do you know the difference between these 3 ways? Comment down below!

Connect with me : Github | Tutoring | Freelance Web Dev

Ways to get a DATE 😉

Rupak Dey — Tue, 16 Mar 2021 06:19:04 +0000

...in JAVASCRIPT 😂

Save for later.

1. Date.now()

Date.now()

This method returns the number of milliseconds elapsed since Jan 1, 1970 00:00:00 UTC.

2. getFullYear()

new Date().getFullYear()

Get the year as a 4 digit number (yyyy).

3. getMonth()

new Date().getMonth() + 1

Get month as a number (0-11).

4. getDay()

const day = new Date().getDay()
const days = ['Sun', 'Mon', 'Tue', 'Wed', 'Thurs', 'Fri', 'Sat']
console.log(days[day])

Get weekday as a number (0-6).

5. getDate() 💕😎

new Date().getDate()

Get the day as a number (1-31).

Hope you find one soon! 😁

P.S. Want the next post to be something specific? Do let me know in the comments.

🤘🏻

Dos & Don'ts For Resetting CSS

Rupak Dey — Sun, 14 Feb 2021 13:30:52 +0000

Why reset CSS ?

Main reason is to fix any inconsistencies with default styles between different browsers.

Save It For Later! Let's begin...

1. DO reset box sizing

* {
   box-sizing : border-box;
}

2. DO reset margins & paddings

* {
   margin : 0;
   padding : 0;
}

body {
   margin : 0;
   padding : 0;
}

3. DO reset form elements

button,
input,
optgroup,
select,
textarea {
   font-family : inherit;
   font-size : 100%;
   line-height : 1.15;
   margin : 0;
}

4. DON'T remove list styles

❌

ul, li {
   list-style : none;
}

instead remove from specific elements within
✅

.navigation {
   list-style: none;
}

5. DON'T remove focus styles

❌

:focus {
   outline : none;
}

instead you can change it's style
✅

:focus {
   outline: none;
   box-shadow: 0 0 0 2px #565663;
}

They are definitely useful for consistent styling & also gives you a clean slate to work with.

Do you use reset CSS in your projects?
Share your thoughts and let's chat in the comments!

P.S. Want the next post to be on something specific? Do let me know in the comments.

🤘🏻

Connect with me : Github | Tutoring | Freelance Web Dev