DEV Community: Rakhi Singh

Best Practices to Optimize a Video Streaming Platform

Rakhi Singh — Sat, 01 Feb 2025 07:29:21 +0000

Streaming high-quality video efficiently is a challenge that requires careful optimization. Whether you're building a custom video player or handling large media files, optimizing video playback can significantly improve user experience.

In this post, we'll explore best practices for improving video streaming performance, from buffering optimization to adaptive resolution management. Let's dive in! 🎬

Before starting the discussion let's assume that we are getting video streaming API response in this format.

{
  "bitrates": {
    "1080p": "https://your-server.com/videos/1080p/",
    "720p": "https://your-server.com/videos/720p/",
    "480p": "https://your-server.com/videos/480p/"
  },
  "chunks": ["chunk0.mp4", "chunk1.mp4", "chunk2.mp4"] 
}

1️⃣ Why Not Just Use the `<video>` Tag? 🤔

When you think of a video player, the first thing that comes to mind is the <video> element. But this approach has limitations:

✅ Works well for short videos that can be downloaded in one go.

❌ Inefficient for long videos (e.g., movies or live streams) because it requires downloading the full file upfront.

❌ No control over buffering & resolution based on network conditions.

✅ Better Approch: Media Source API (MSE)

The Media Source API (MSE) allows dynamic buffering, adaptive streaming, and smooth resolution changes based on real-time network conditions.

How Does It Work? (Basic Setup)

Here’s how we can use MSE to stream video dynamically:

<video id="videoPlayer" controls></video>
<script>
  const video = document.getElementById('videoPlayer');
  let mediaSource = new MediaSource();
  video.src = URL.createObjectURL(mediaSource);

  mediaSource.addEventListener('sourceopen', async () => {
    const { bitrates, chunks } = await fetchManifest();
    const resolution = getOptimalResolution();
    fetchAndAppendChunks(mediaSource, bitrates[resolution], chunks);
  });

  async function fetchManifest() {
    const response = await fetch('https://your-server.com/manifest.json');
    return response.json();
  }
</script>

This script:

Fetches available video resolutions (from a JSON manifest file).
Selects the best resolution based on network speed.
Loads video chunks dynamically instead of downloading everything at once.

2️⃣ Optimizing Video Loading & Buffering 🚀

Ever noticed how Netflix & YouTube start playing videos instantly? They use chunk-based loading:

✅ Divides video into small chunks 🔹🔹🔹

✅ Loads only a few chunks initially (for instant playback)

✅ Fetches additional chunks on demand (as the video progresses)

Implementation

async function fetchAndAppendChunks(mediaSource, baseUrl, chunks) {
  const sourceBuffer = mediaSource.addSourceBuffer('video/mp4; codecs="avc1.64001E, mp4a.40.2"');
  let chunkIndex = 0;

  async function appendNextChunk() {
    if (chunkIndex >= chunks.length) {
      mediaSource.endOfStream();
      return;
    }

    const response = await fetch(`${baseUrl}${chunks[chunkIndex]}`);
    const chunk = await response.arrayBuffer();
    sourceBuffer.appendBuffer(chunk);
    chunkIndex++;

    sourceBuffer.addEventListener('updateend', appendNextChunk, { once: true });
  }

  appendNextChunk();
}

3️⃣ Managing Resolution Automatically 📶

Streaming services adjust video resolution based on available bandwidth to prevent buffering.

function getOptimalResolution() {
  const speed = navigator.connection.downlink; // Get network speed in Mbps
  if (speed > 5) return "1080p";
  if (speed > 2) return "720p";
  return "480p";
}

✅ Monitors internet speed 📶

✅ Automatically switches resolution to prevent lag

✅ Ensures smooth playback even on slow networks

4️⃣ Separating Video & Audio for Better Control 🎵🎥

For a better user experience, separate video and audio streams. This allows:

Multi-language support: Users can switch audio tracks without restarting the video.
Adaptive audio streaming: Loads only the necessary audio based on network conditions.

🔹 Advanced use case: Load separate audio.mp4 and video.mp4 files using multiple SourceBuffers.

5️⃣ Caching Video Data for Faster Playback 🔄

Caching reduces unnecessary API calls and speeds up video loading.

✅ Use Service Workers & Cache API to store video chunks.

✅ Implement LRU (Least Recently Used) caching to discard old video chunks.

✅ Enable offline playback by caching frequently accessed content.

Example:

self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.open('video-cache').then((cache) => {
      return cache.match(event.request).then((response) => {
        return response || fetch(event.request).then((response) => {
          cache.put(event.request, response.clone());
          return response;
        });
      });
    })
  );
});

🎯 Conclusion

Optimizing video streaming is crucial for a smooth user experience. By using chunk-based loading, adaptive streaming, caching, and MSE, we can build highly efficient video players.

🚀 Key Takeaways

✅ Use MSE instead of <video> for long videos

✅ Implement chunk-based loading for fast startup

✅ Dynamically adjust resolution based on network speed

✅ Cache video data to reduce reloading & improve performance

What other optimizations do you use for video streaming? Share your thoughts in the comments! 🎥✨

Top 10 Practices to make your app accessible

Rakhi Singh — Sat, 18 Jan 2025 11:52:42 +0000

Early in my career, I thought accessibility was simple. I believed it was only for people with disabilities and that it mostly happened automatically. My understanding was basically:

Add alt text to images <img/> tags and you're done!

But now, as a more experienced software engineer, I see accessibility differently. First of all, accessibility is for everybody. When a user wants to submit a form, they should be able to press the Enter key instead of hunting for the submit button. Accessibility isn’t just about compliance; it’s about creating seamless, enjoyable experiences for everyone.

Accessibility is not just about adding a few lines of code. It's a fundamental part of software development and an architectural decision we must make while developing a simple button or Table on the app.

My Top 10 Accessibility Practices

Here are my top 10 accessibility practices that I implement in every app I build:

1. Use Semantic Elements
Use proper HTML5 semantic elements like <header>, <nav>, <article>, <button>, <footer>. These elements provide context to screen readers and improve navigation for users.

<header>
    <h1>App Title</h1>
</header>
<nav>
    <ul>
        <li><a href="/home">Home</a></li>
        <li><a href="/about">About</a></li>
    </ul>
</nav>
<article>
    <p>This is the main content.</p>
</article>

2. Add Keyboard Controls
Ensure users can navigate your app using just the keyboard. For example, they should be able to move between pages or features using Tab, Arrow keys, or other intuitive keyboard shortcuts.

document.addEventListener('keydown', (event) => {
    if (event.key === 'ArrowRight') {
        moveToNextTab();
    } else if (event.key === 'ArrowLeft') {
        moveToPreviousTab();
    }
});

function moveToNextTab() {
    // Logic to focus the next tab
}

function moveToPreviousTab() {
    // Logic to focus the previous tab
}

3. Use ARIA Labels Wisely
Add ARIA (aria-label, aria-labelledby, etc.) attributes to elements when necessary, but don’t overuse them. Prefer semantic HTML first.

<button aria-label="Close Modal">X</button>

4. Add alt Attributes to Images
Every <img> element should have an alt attribute that describes the image—or use alt="" for decorative images.

<img src="profile.jpg" alt="User Profile Picture" />
<img src="decorative-line.png" alt="" />

5. Enable Table Navigation with Keyboard
For <table> elements, ensure users can navigate rows and columns using the Arrow keys.

const table = document.querySelector('table');
table.addEventListener('keydown', (event) => {
    const currentCell = document.activeElement;
    if (event.key === 'ArrowDown') {
        moveFocus(currentCell, 'down');
    } else if (event.key === 'ArrowUp') {
        moveFocus(currentCell, 'up');
    }
});

function moveFocus(cell, direction) {
    // Logic to shift focus to the appropriate cell
}

6. Manage Focus Effectively
Decide where the focus should land when a page loads or a modal opens. For example, when you open any editable app the focus first should go to the editor.

function openModal() {
    const modal = document.querySelector('#modal');
    modal.style.display = 'block';
    modal.querySelector('input').focus(); // Focus on the first input field
}

7. Keyboard Controls for Media
Implement keyboard controls for play/pause, volume adjustments, and seeking forward or backward.

const video = document.querySelector('video');
document.addEventListener('keydown', (event) => {
    if (event.key === ' ') {
        video.paused ? video.play() : video.pause();
    } else if (event.key === 'ArrowRight') {
        video.currentTime += 5; // Seek forward 5 seconds
    } else if (event.key === 'ArrowLeft') {
        video.currentTime -= 5; // Seek backward 5 seconds
    }
});

8. Accessible Forms
Ensure labels are associated with their inputs and provide helpful error messages or use autoComplete attribute of input element so that user doesn't have to type everything.

<form>
    <label for="username">Username:</label>
    <input type="text" id="username" name="username" required />
    <span class="error" id="username-error" aria-live="polite"></span>
</form>

9. Color Contrast Matters
Maintain a high color contrast ratio between text and background.

body {
    background-color: #ffffff;
    color: #000000;
}

.button {
    background-color: #007bff;
    color: #ffffff;
}

10. Create a Design System
When you start working on building an app, every time you can't think every time about accessibility you should build accessible atomic components once and reuse them.

function AccessibleButton({ label, onClick }) {
    return (
        <button onClick={onClick} aria-label={label}>
            {label}
        </button>
    );
}

Final Thoughts

Accessibility is not an afterthought. It’s a mindset that should be embedded in your development process from the start. By making these practices a part of your workflow, you’ll create apps that are not only functional but also inclusive and user-friendly.

Guide - Setting Up Jest for Unit Testing in a TypeScript React Project

Rakhi Singh — Fri, 10 Jan 2025 17:26:38 +0000

Recently, I got a chance to work on my first typescript project, and my first task was to set up unit test cases. At first glance, it seemed simple enough. I started following random documentation and ChatGPT suggestions, only to end up with a mess. If you’ve experienced GPT giving a solution only to later suggest removing it, you’ll relate to my frustration.

After countless docs, GitHub issues, and a little frustration, I finally cracked the code and set up a clean, robust unit testing environment. 🎉

And then I thought, “Why not document this to save future-me and fellow devs from the same struggle?” So, here it is:

Here, I’ve written one more comprehensive guide on the internet to help fellow developers set up their first unit test environment in a TypeScript project—the right way.

Step 1: Install Required Libraries

Start by installing the necessary libraries to set up a Jest environment:

npm install -D @types/jest @types/react-dom @types/react ts-jest typescript @testing-library/jest-dom @testing-library/react

Step 2: Initialize `tsconfig.json`

Run the following command to create a tsconfig.json file in your project’s root directory:

ts-jest config:init

Step 3: Configure `tsconfig.json`

Replace the content of your tsconfig.json file with the following configuration:

{
  "compilerOptions": {
   "types": ["@testing-library/jest-dom", "node", "jest"],
    "module": "commonjs",
    "target": "es6",
    "outDir": "./dist",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "jsx": "react",  
    "lib": ["es2019", "dom"]  
  },
  "include": ["./src/**/**.*", "src/*.ts", "src/setupTests.tsx"]
  "exclude": ["node_modules"]
}

Step 4: Configure Jest

Replace the content of your jest.config.js file with the following:

module.exports = {
  testEnvironment: "jest-environment-jsdom",
  setupFilesAfterEnv: ["<rootDir>/src/setupTests.tsx"], // Update the path if your setupTests file is located elsewhere
  transform: {
    "^.+\\.tsx?$": "babel-jest", // Or ts-jest if you're using ts-jest
  },
  moduleFileExtensions: ["ts", "tsx", "js", "jsx"],
};

Next, create a setupTests.tsx file in your src folder and add the following:

import "@testing-library/jest-dom";

Step 5: Write Test Cases

Create a test file, e.g., YourComponent.test.tsx, in your project’s tests folder. This is where you’ll write your unit test cases.

Step 6: Run Tests

Run the following command to execute your tests:

npm test

Personal Note - When you are working with Typescript you will see this below error

Property 'toBeInTheDocument' does not exist on type 'JestMatchers<HTMLElement>'

To resolve I have already added configuration in the above code but If you still see the issue then

Try importing this library @testing-library/jest-dom in all your test files.
Make sure that you have the correct Babel configuration.

Notes

Remember, this guide focuses on setting up the environment; you’ll need to figure out how to write the actual test cases based on your application.

I hope this guide saves you the frustration I faced. Happy testing! 🚀

Can React v19 replace React Query(Tanstack)?

Rakhi Singh — Fri, 20 Dec 2024 11:56:53 +0000

The React team has recently launched the stable version of React 19, bringing a host of new features and improvements that are set to revolutionize how we build React applications.
While these updates aim to provide native solutions to common patterns and challenges in React development, one key question arises: do these new hooks have the potential to replace popular packages like Tanstack Query (formerly React Query)?

What’s New in React 19

React 19 introduces several new hooks and features designed to simplify data handling, improve performance, and enhance developer experience. Here am going to a brief overview of some of the most notable changes that are common between React 19 and Tanstack :

1. useActionState This hook helps manage common cases for actions, providing built-in support for handling errors, pending states, and form submissions.

const [error, submitAction, isPending] = useActionState(
  async (previousState, newName) => {
    const error = await updateName(newName);
    if (error) return error;
    return null;
  },
  null
);

2. useFormStatus This is a kind of game-changing hook, with no need for any context API, or props drilling, this hook allows components to access the form state of the Parent component.

import { useFormStatus } from 'react-dom';

function DesignButton() {
  const { pending } = useFormStatus();
  return <button type="submit" disabled={pending}>Submit</button>;
}

3. useOptimistic Another common UI pattern when performing a data mutation is to show the final state optimistically while the async request is underway.

function ChangeName({ currentName, onUpdateName }) {
  const [optimisticName, setOptimisticName] = useOptimistic(currentName);

  const submitAction = async (formData) => {
    const newName = formData.get("name");
    setOptimisticName(newName);
    const updatedName = await updateName(newName);
    onUpdateName(updatedName);
  };

  return (
    <form action={submitAction}>
      <p>Your name is: {optimisticName}</p>
      <label>Change Name:</label>
      <input type="text" name="name" disabled={currentName !== optimisticName} />
    </form>
  );
}

Now, you might be thinking, "Do I need Tanstack Query for my async handlers?" Well, the answer is: it depends on your use case! Let's understand HOW ?😅

Why and When to Choose React Query for Complex Scenarios?

Advanced Caching: React Query provides robust caching mechanisms that can handle complex data structures and keep your application in sync with the server state effortlessly.

Automatic Background Synchronization: It supports background refetching, polling, and refetching on events like window focus, ensuring the data is always up-to-date. No more stale data 🔄

Query Invalidations: React Query allows developers to manage when and how your data should be refreshed, ensuring that your UI is always up-to-date without unnecessary re-fetches. 🎯

Error Handling: It provides a comprehensive approach to handle errors gracefully, making your application more resilient. 🚑

Conclusion

In the end, I guess you have already got the answer to the question we raised at the beginning - Can React v19 replace Tanstack? 🤔

It completely depends on our application scale! 🏗️

For simpler use cases, like fetching API data and managing API states, I would recommend giving React v19's native hooks a try. They are neat, easy to use, and perfect for straightforward scenarios. 🌟

However, if you are working on a large application and need to handle more complex tasks like caching, revalidating, and synchronizing data with the server, then Tanstack Query is your best buddy! 🦸‍♂️🦸‍♀️

In summary:

React v19 hooks: Great for simple API fetching and state management. 👍
Tanstack Query: Perfect for handling caching, synchronization, and complex data scenarios. 💪
Happy coding! 🎉✨

test

Rakhi Singh — Fri, 20 Dec 2024 06:07:28 +0000

How to Create a React Application Post-CRA Deprecation

Rakhi Singh — Fri, 20 Dec 2024 06:03:31 +0000

I was recently working on a project and learned that the React team deprecated create-react-app two years back. Initially, I didn't buy it But when I went to the new React-dev website, I noticed forgot about CRA they haven't mentioned how to create a simple React+bundler App

Create a React App Without CRA: Using Vite or Webpack
Since the React team deprecated create-react-app (CRA), developers are looking for alternative ways to set up their React applications. Two popular choices are Vite and Webpack. In this post, we will compare these tools and provide basic setup instructions for each.

Vite vs. Webpack
Vite
Pros:
Fast development server with instant hot module replacement (HMR).
Built-in support for modern JavaScript features.
Minimal configuration needed to get started.
Cons:
Newer tool, so it may have less community support compared to Webpack.
Webpack
Pros:
Highly configurable and flexible for complex build setups.
Extensive plugin ecosystem and community support.
Proven track record with many large-scale applications.
Cons:
Initial configuration can be more complex and time-consuming.
Slower build times compared to Vite.
Setting Up a React App with Vite
Create a New Vite Project:

npm create vite@latest my-react-app -- --template react
cd my-react-app
npm install
Start the Development Server:

bash
Copy code
npm run dev
Vite Configuration:

Vite requires minimal configuration out of the box. The default setup should work for most React projects.
You can customize the vite.config.js if needed.
Setting Up a React App with Webpack
Initialize Your Project:

bash
Copy code
mkdir my-react-app
cd my-react-app
npm init -y
npm install react react-dom
npm install webpack webpack-cli webpack-dev-server html-webpack-plugin babel-loader @babel/core @babel/preset-env @babel/preset-react
Create Project Structure:

Create a src folder and add index.js and App.js files.
Create a public folder and add an index.html file.
Configure Webpack:

Create a webpack.config.js file:
javascript
Copy code
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(dirname, 'dist'),
filename: 'bundle.js',
},
module: {
rules: [
{
test: /.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
},
},
{
test: /.css$/,
use: ['style-loader', 'css-loader'],
},
],
},
resolve: {
extensions: ['.js', '.jsx'],
},
plugins: [
new HtmlWebpackPlugin({
template: './public/index.html',
}),
],
devServer: {
contentBase: path.join(dirname, 'dist'),
compress: true,
port: 9000,
},
};
Babel Configuration:

Create a .babelrc file:
json
Copy code
{
"presets": ["@babel/preset-env", "@babel/preset-react"]
}
Start the Development Server:

bash
Copy code
npx webpack serve
Conclusion
Both Vite and Webpack offer powerful ways to set up a React application without CRA. Vite provides a faster and simpler setup, ideal for smaller projects and rapid development. Webpack, on the other hand, offers extensive configurability and a robust ecosystem, making it suitable for more complex projects.

Choose the tool that best fits your project requirements and preferences. Happy coding!

How to Create a React Application Post-CRA Deprecation

Rakhi Singh — Thu, 19 Dec 2024 04:39:05 +0000

Hey there, fellow developers! 👋

I was recently working on a project and learned that the React team deprecated create-react-app (CRA) two years ago. 😲 Naturally, this got me thinking about alternative ways to set up a JavaScript-based React application.

When I checked out the official React documentation, I noticed they now focus on full-stack frameworks like Next.js and Gatsby. These are awesome if you’re building an end-to-end application, but they can be overkill if you just want a simple JSX-based project. 🏗️

Before starting - What does CRA do? - Create React App (CRA) is a powerful package that automates the setup of a new React project. It handles all the necessary configuration and installs the required dependencies, providing a zero-configuration bundler. This allows developers to start building their applications without worrying about the complex setup of tools and configurations.

So, now CRA has been deprecated then how to setup pure JSX App? 🤔
Here I will share Two popular choices(Vite and Webpack) to create a client-based application with the React library. Below Section, We'll compare these tools and give you setup instructions for each. Let’s dive in! 🏊‍♂️

⚡ Vite vs Webpack 🔧

Vite

Pros:

-Fast development server with instant hot module replacement (HMR).
-Built-in support for modern JavaScript features.
-Minimal configuration is needed to get started.

Cons:

-Newer tool, so it may have less community support compared to Webpack.

Webpack

Pros:

-Highly configurable and flexible for complex build setups.
-Extensive plugin ecosystem and community support.
-Proven track record with many large-scale applications.

Cons:

-Initial configuration can be more complex and time-consuming.
-Slower build times compared to Vite.
-Setting Up a React App with Vite

Create a New Vite Project:

1. Run the Vite command in your terminal

npm create vite@latest my-react-app -- --template react
cd my-react-app
npm install

2. Start the Development Server:

npm run dev

Vite Configuration:

Vite requires minimal configuration out of the box. The default setup should work for most React projects.
You can customize the vite.config.js if needed.

Setting Up a React App with Webpack

1. Initialize Your Project:

mkdir my-react-app
cd my-react-app
npm init -y
npm install react react-dom
npm install webpack webpack-cli webpack-dev-server html-webpack-plugin babel-loader @babel/core @babel/preset-env @babel/preset-react

2. Create Project Structure:

 1. Create a src folder and add index.js and App.js files.
 2. Create a public folder and add an index.html file.

3. Configure Webpack:

Create a webpack.config.js file:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
        },
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
  resolve: {
    extensions: ['.js', '.jsx'],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './public/index.html',
    }),
  ],
  devServer: {
    contentBase: path.join(__dirname, 'dist'),
    compress: true,
    port: 9000,
  },
};

4. Babel Configuration:

Create a .babelrc file:

{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}

5. Start the Development Server:

npx webpack serve
Conclusion
Both Vite and Webpack offer powerful ways to set up a React application without CRA. Vite provides a faster and simpler setup, ideal for medium projects and rapid development. Webpack, on the other hand, offers extensive configurability and a robust ecosystem, making it suitable for more complex projects.

Choose the tool that best fits your project requirements and preferences. Happy coding!

DEV Community: Rakhi Singh

Best Practices to Optimize a Video Streaming Platform

1️⃣ Why Not Just Use the <video> Tag? 🤔

✅ Better Approch: Media Source API (MSE)

2️⃣ Optimizing Video Loading & Buffering 🚀

Implementation

3️⃣ Managing Resolution Automatically 📶

4️⃣ Separating Video & Audio for Better Control 🎵🎥

5️⃣ Caching Video Data for Faster Playback 🔄

🎯 Conclusion

🚀 Key Takeaways

Top 10 Practices to make your app accessible

My Top 10 Accessibility Practices

Final Thoughts

Guide - Setting Up Jest for Unit Testing in a TypeScript React Project

Step 1: Install Required Libraries

Step 2: Initialize tsconfig.json

Step 3: Configure tsconfig.json

Step 4: Configure Jest

Step 5: Write Test Cases

Step 6: Run Tests

Notes

Can React v19 replace React Query(Tanstack)?

Now, you might be thinking, "Do I need Tanstack Query for my async handlers?" Well, the answer is: it depends on your use case! Let's understand HOW ?😅

Conclusion

test

How to Create a React Application Post-CRA Deprecation

How to Create a React Application Post-CRA Deprecation

⚡ Vite vs Webpack 🔧

1️⃣ Why Not Just Use the `<video>` Tag? 🤔

Step 2: Initialize `tsconfig.json`

Step 3: Configure `tsconfig.json`