DEV Community: Tejasvi Shinde

Why Everyone Is Moving to Vite in 2025

Tejasvi Shinde — Wed, 09 Jul 2025 15:56:55 +0000

I’ll be honest, for the longest time, I stuck with Webpack and the usual Angular CLI defaults. I didn’t get the Vite hype. Then I spun up a Vite project for a tiny component library I was building, and it blew me away.

Here’s why developers (myself included) are moving to Vite like it’s the default now.

1. It’s super Fast
No exaggeration. Vite’s cold starts are nearly instant, even on large projects. HMR updates in milliseconds, not seconds.

I moved an old project from Webpack to Vite, and this was the difference:

Initial load time with Webpack

Initial load time with Vite

It’s powered by esbuild, which is built in Go, so it’s crazy fast compared to Babel-based tooling.

2. Setup is Actually... Fun?

No 400-line webpack.config.js, no cryptic loaders. Just this:

npm create vite@latest

Then pick your framework (React, Vue, Svelte, even Lit or vanilla), and you’re rolling.

Here’s a vite.config.ts I used in a recent React + Tailwind project:

Simple. Clean. Predictable.

3. It Plays Nice with Everything
Whether it’s TypeScript, Tailwind, PWA, SSR, or even monorepos with NX, Vite has solid plugin support.

You don’t have to do the dance of "is this plugin still maintained?" like we sometimes do with Webpack.

For example, adding Tailwind is just:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Then drop it in your main.css:

@tailwind base;
@tailwind components;
@tailwind utilities;

That’s it. No gotchas.

4. Even Angular Is Joining the Party
This one excites me: Angular now supports Vite. The Angular team is pushing Vite adoption as an optional, faster build path.

If Angular, known for its opinionated tooling, is opening up to Vite, that says something.

TL;DR
If you haven’t touched Vite yet, try it on a weekend project or a personal component library. It’ll make you rethink what “dev server speed” should feel like.

Use Vite for modern web apps, fast development cycles, or greenfield projects.
Stick with Webpack when you're dealing with legacy infrastructure or highly custom setups.

It’s not perfect, but in 2025, Vite feels like the new default, and honestly… it deserves it.

RTSP stream to Web Browser using FFMPEG

Tejasvi Shinde — Fri, 22 Jan 2021 05:08:15 +0000

If you need to stream your video from the webcam to your browser webpage.
To achieve this I have tried a few different ways but none of them is as good as converting RTSP to HLS and then pass to Browser.

We will follow the below steps

RTSP stream
Understanding FFMPEG
Converting RTSP TO HLS
Passing HLS to a web browser

1.RTSP Stream

What is RTSP?
RTSP, also known as Real-Time Streaming Protocol, is a lesser-known protocol for streaming video online. This protocol was designed to control the streaming servers used in entertainment and communications systems.

When the RTSP controls the server to client connection, video-on-demand streams are used; when it controls the client to server connection, RTSP utilizes voice recording streams.

RTSP commonly is used for Internet Protocol (IP) camera streaming, such as those coming from CCTV or IP cameras.
Rather than forcing your viewers to download an entire video before watching it, the RTSP stream allows them to watch your content before the download is complete.

You cannot directly stream RTSP over HTTP. Because of this, there is no easy, straightforward way to stream RTSP in a web browser, as RTSP is designed more for streaming video on private networks such as security systems within a business. However, you can stream RTSP using additional software that’s embedded onto your website.
Furthermore, to achieve this I have used FFMPEG

2. Understanding FFMPEG

FFmpeg is a command-line tool that converts audio or video formats. It can also capture and encode in real-time from various hardware and software sources such as a TV capture card.
Basically, it is a wrapper that converts RTSP to HLS.
(HLS stands for HTTP Live Streaming. In short, HLS is a media streaming protocol for delivering visual and audio media to viewers over the internet and supported by the web browser)

Check this FFMPEG for more information

3. Converting RTSP TO HLS

To Achieve this we have to use FFMPEG commands.
Basically from node, I will run bash file which has those commands this will run in the background and when it receives RTSP stream It parallelly changes them to HLS.

4. Passing HLS to a web browser

we are almost done because passing HLS to a web browser is easy.

I hope you guys got a basic idea about this conversion.

Remember to run this we need a server to run in the background it can be simple HTTP-SERVER or NGX-SERVER.

Code Implementation

Index.html

<!DOCTYPE html>
<html>
<head>
  <title>Live Cam</title>
</head>
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
<body>
  <!-- Use this if you only support Safari!!
    <div id="player">
        <video id="video" autoplay="true" controls="controls">
            <source src="http://192.1xx.x.1xx:8080/playlist.m3u8" />
            Your browser does not support HTML5 streaming!
        </video>
    </div>
-->
  <video id="video" autoplay="true" controls="controls" type='application/x-mpegURL'></video>
  <script>
    if (Hls.isSupported()) {
      var video = document.getElementById('video');
      var hls = new Hls();
      // bind them together
      hls.attachMedia(video);
      hls.on(Hls.Events.MEDIA_ATTACHED, function () {
        console.log("video and hls.js are now bound together !");
        hls.loadSource("http://192.1xx.x.1xx:8080/playlist.m3u8");
        hls.on(Hls.Events.MANIFEST_PARSED, function (event, data) {
        });
      });
    }
  </script>
</body>
</html>

In code you can see I have added the HLS CDN link you can use NPM Package too.
You can see in this line code hls.loadSource("http://192.1xx.x.1xx:8080/playlist.m3u8");

My HTTP-SERVER is running on http://192.1xx.x.1xx:8080 and /playlist.m3u8 I will come to this.

setup-ffmpeg.sh

#!/bin/bash
VIDSOURCE="rtsp://192.1xx.x.xxx:5554"
AUDIO_OPTS="-c:a aac -b:a 160000 -ac 2"
VIDEO_OPTS="-s 854x480 -c:v libx264 -b:v 800000"
OUTPUT_HLS="-hls_time 10 -hls_list_size 10 -start_number 1"
ffmpeg -i "$VIDSOURCE" -y $AUDIO_OPTS $VIDEO_OPTS $OUTPUT_HLS playlist.m3u8

In the bash file, I have provided VIDSOURCE="rtsp://192.1xx.x.xxx:5554" RTSP link.
You can see it at the end playlist.m3u8. This will create a file playlist.m3u8 and start dumping stream one after another so at the end we will refer to this file.

When you run the bash file you can see the changes in your folder like this

FFMPEG provides a lot of useful commands. You can try a different set of commands and use them as per your requirements.

Alexa skill with Twilio voice Integration

Tejasvi Shinde — Tue, 22 Dec 2020 15:27:56 +0000

Imagine you give a command to your Amazon Echo/Alexa to make a phone call🤙🏻

Pre-requisites

Twilio
Knowledge of Alexa Custom Skills
AWS Lambda

One such technology is Amazon Alexa, it provides the programming blocks to implement voice-based interactions with a customer through the Amazon Echo speaker. While Twilio provides the voice communication layer between the customer and your backend contact center infrastructure.

1) What is Twilio

Twilio is a developer platform for communications. Software teams use Twilio APIs to add capabilities like voice, video, and messaging to their applications. This enables businesses to provide the right communications experience for their customers.

Requirements

Twilio account
Twilio AccountSid and Auth Token
Twilio Number

Reference links

Twilio sign-up
Twilio voice API

You need to create a Twilio account. once you have one, you can get a free phone number for your country. Make sure the phone number you get at Twilio supports voice.
In your Twilio account settings, you need to find out the account session Id and authentication token. You will need them in the next stage when creating your Lambda function.

TwilML
TwiML (the Twilio Markup Language) is a set of instructions you can use to tell Twilio what to do when you receive an incoming call, SMS, or fax.
How TwiML works
When someone makes a call to one of your Twilio numbers, Twilio looks up the URL associated with that phone number and sends it a request. Twilio then reads the TwiML instructions hosted at that URL to determine what to do, whether it's recording the call, playing a message for the caller, or prompting the caller to press digits on their keypad.
At its core, TwiML is an XML document with special tags defined by Twilio to help you build your Programmable Voice application.

to learn more refer here

2) Alexa custom skill kit

you just need to follow few steps to create a custom skill follow this

3) Aws lambda

1.If you don't already have one, get an Amazon AWS account (free).
2.From the AWS Console (https://aws.amazon.com), you need to create a Lambda function which will execute the code that will send the request to Twilio voice outbound call.

Creating a lambda function steps

1.Create a new Execution Role for the function by selecting Create New Role->Basic Execution Role. In IAM console, create new IAM Role, enter name and clock Allow button.
2.Go to AWS Services and select Lambda
3.Click Lambda and follow the process for adding Name. Choose the Node.js as the Runtime, Role and create the function. The Lambda function that we have created is shown in the screenshot below

4.Select 'Event Sources' tab and add Alexa Skill Kit event source
5.Now, save the Lambda function.

If you stuck in between please check this

It helped me because I am also not completely familiar with AWS so any suggestions or help much appreciated.

also in the lambda function
Create the payload we want to send, including the Twiml location, from which Twilio will fetch instructions when the call connects

I hope you found this post helpful.

Introduction to Storybook JS

Tejasvi Shinde — Thu, 10 Dec 2020 06:40:56 +0000

I have recently come across a cool UI tool i.e Storybook.
Storybook is really efficient and helps in faster UI development.

Before jumping on anything lets get clear on

What is a storybook?

Storybook is an open-source tool for developing UI components in isolation for React, Vue, Angular, and more. It makes building stunning UIs organized and efficient.
You can develop entire UIs without needing to start up a complex dev stack, force certain data into your database, or navigate around your application

With Storybook, you create stories for your components. Each story shows the behavior for a single component with specific states set.

Storybook helps you document components for reuse and automatically visually test your components to prevent bugs. Extend Storybook with an ecosystem of addons that help you do things like fine-tune responsive layouts or verify accessibility.

Storybook integrates with the most popular JavaScript UI frameworks and (experimentally) supports server-rendered component frameworks such as Ruby on Rails.

Learning

If you want to build a simple application in your framework with the storybook, LearnStorybook will help you!

Few more resources
Implementation with Angular
Implementation with React
Implementation with Vue

JavaScript Set

Tejasvi Shinde — Tue, 08 Dec 2020 06:57:27 +0000

Javascript set object does not allow duplicate values to be pushed it contains only unique values.

First, we declare a variable set using const in which we assign a set object with a new keyword.

const animals = new Set();

Now, we add animals to set variable using set object add() method.

animals.add('🐷');
animals.add('🐴');
console.log(animals.size); // 2
animals.add('🐴');
console.log(animals.size); // 2

Javascript set only store unique values either it’s for string or number or object. So, the set will neglect the 🐴 add when he found out the same value again.

Strings are a valid iterable so they can also be passed-in to initialize a set

console.log('Happy Coding'.length); // 13
let sentence = new Set('Happy Coding'); //12
console.log(sentence.size);

Note: Set has a size property, not a length property.