DEV Community: Md Mafiz Uddin

What is MCP? A Simple Guide to AI’s Next Big Thing

Md Mafiz Uddin — Wed, 19 Mar 2025 17:52:02 +0000

Imagine a World Where AI Integrates Effortlessly

Meet MCP (Model Context Protocol)—an open standard that might be the game-changer developers and innovators have been dreaming of.

Pioneered by Anthropic’s bold vision, MCP tackles a core LLM limitation: They’re brilliant but hands-off. They’ll write you an essay but won’t email it, craft a database query but won’t hit “run.” MCP rewires that with context—unlocking a new level of AI capability.

How MCP Works

MCP’s power is in its context. It’s a framework built on four pillars: resources, tools, prompts, and sampling. Here’s the real scoop:

Resources: Your files, databases, or live feeds—like GitHub repos or Slack channels. MCP servers tap these, giving AI a window into your world.
Tools: The magic sauce—executable functions. Think “fix this code” or “post this update.” The better the tools, the stronger the MCP server. Quality here is make-or-break.
Prompts: Smart, pre-set guides that keep AI on track—think of them as the AI’s cheat sheet. A server with sharp prompts means sharper results.
Sampling: The wild card—leveraging multiple LLMs to run different tools, blending outputs for richer solutions. It’s like an AI brainstorming session.

Why It’s a Big Deal

MCP’s strength hinges on its servers. A top-tier server with ace tools and prompts turns AI into a doer, not just a thinker. A shaky one? You’re stuck with suggestions, not solutions.

And here’s the kicker: It’s not just for big players like Cursor or Windsurf. The race is wide open—new tools will emerge, and you could build one.

Picture This

Your AI:

✅ Dives into your GitHub repo, spots a pesky bug in your code

✅ Fixes it using a tool

✅ Checks your Slack channel for past chatter about the issue

✅ Uses sampling across models to validate the best fix

That’s MCP flexing its muscles.

MCP vs. APIs

🔹 APIs are static, one-trick ponies.

🔹 MCP builds a living ecosystem where context drives action—and anyone can join the party.

The catch? It’s only as good as the servers you craft.

Explore More

MCP is open-source and yours to shape: modelcontextprotocol.io

What’s Your Take?

How could MCP’s context and tools reshape your workflow? What killer MCP server would you build?

Let’s hash it out in the comments! 🚀

Before We End...

That's all for now. I hope you've found this helpful
:) Happy streaming!

Regards: Md Mafizuddin

For any queries connect with me: LinkedIn: @mdmafizuddin Twitter: @whyknowmee Github: @pacehut Instagram: @mafiz._

HTTP Live Streaming: An In-Depth Look

Md Mafiz Uddin — Fri, 25 Oct 2024 13:32:04 +0000

HTTP Live Streaming (HLS) has transformed video delivery, enabling smooth, adaptable playback across diverse devices and network conditions. Created by Apple, this powerful protocol allows users to experience video without buffering, regardless of device or internet quality, making it a go-to solution for online video streaming. In this guide, we’ll break down what HLS is, how it works, and the technical foundations that make it so effective.

What is HLS?
How Does HLS Work?
HLS Components and Process Flow
Adaptive Bitrate Streaming Explained
Benefits of HLS
Comparing HLS to Other Protocols
Real-World Use Cases for HLS
The Future of HLS

What is HLS?

HTTP Live Streaming (HLS) is a video streaming protocol used to transfer media over the internet by breaking content into small, sequential chunks. It enables video content to adapt seamlessly to changing network speeds by offering different quality levels that can adjust dynamically during playback.

Contrary to what its name suggests, HLS is not limited to live content—it's commonly used for on-demand videos as well. The technology behind HLS allows for a continuous and high-quality experience across all devices, whether it’s a smartphone, laptop, or television.

How Does HLS Work?

An HLS stream originates from a server where (in on-demand streaming) the media file is stored, or where (in live streaming) the stream is created. Because HLS is based on HTTP, any ordinary web server can originate the stream.

HLS achieves smooth playback and adaptive quality by dividing the video into smaller parts called segments or chunks. These chunks are generally between 2-10 seconds each and are stored as individual files on the server. Here’s an overview of how it works:

Encoding and Segmenting: The original video file is encoded at multiple bitrates and resolutions. Each version is then segmented into smaller parts, which makes it easier to handle the video in short, digestible pieces.
Playlist Files (Manifests): HLS uses .m3u8 files (known as playlists or manifests) to keep track of these segments. The playlists direct the player on which segments to download and in what order. Two types of playlists are commonly used:
- Master Playlist: Points to various quality levels available for playback.
- Variant Playlists: Each points to chunks of a specific quality level.
Dynamic Quality Selection: As the viewer’s device streams the video, the player continuously assesses the available network bandwidth and chooses the optimal quality level for that moment.
HTTP Delivery: Since HLS segments are delivered over HTTP, they are compatible with Content Delivery Networks (CDNs), which helps scale the delivery to global audiences.

HLS Components and Process Flow

To fully grasp how HLS operates, let’s break down the key components and the process flow.

1. Encoding Multiple Qualities

Encoding is the first step in HLS. The original video is converted into several versions at varying resolutions and bitrates (e.g., 240p at 300kbps, 480p at 800kbps, 720p at 1500kbps). This encoding process creates multiple versions suited for different network conditions.

2. Segmenting the Video

The encoded video is split into shorter segments. For instance, a 10-minute video could be divided into 5-second chunks. This segmentation is key to achieving adaptive bitrate streaming.

3. Playlist (Manifest) Files

The playlist files organize the segments and provide instructions to the player:

The Master Playlist (master.m3u8) contains links to each quality level.
The Variant Playlist (playlist.m3u8) lists the specific segments for a particular quality level. Each variant playlist contains URLs for the individual video chunks.

4. Adaptive Streaming Process

When a user initiates playback, the player downloads the master playlist to access all available quality levels and chooses a variant playlist based on network speed. If the connection weakens, the player switches to a lower-quality variant playlist seamlessly.

5. Delivery Over HTTP

Each chunk is delivered over standard HTTP, which ensures compatibility with CDN caching for scalability and improved performance.

Adaptive Bitrate Streaming Explained

Adaptive Bitrate Streaming (ABR) is a core feature of HLS. The player continuously monitors network conditions and device capabilities, allowing it to switch between quality levels in real-time. Let’s break down how ABR works in a live scenario:

Initial Playback: When playback begins, the player selects a quality level that matches the current network speed.
Network Changes: If the connection speed drops, the player switches to a lower bitrate (e.g., from 720p to 480p) to maintain smooth playback.
Quality Restoration: As the connection improves, the player reverts to a higher-quality version.

ABR makes it possible for viewers to watch content without needing to manually adjust quality, enhancing the overall experience.

Benefits of HLS

Broad Compatibility: HLS works across major operating systems, including iOS, Android, and most browsers, thanks to its reliance on HTTP.
Adaptive Streaming: HLS adjusts video quality dynamically, ideal for mobile users and others on variable connections.
Scalability with HTTP and CDNs: Since HLS uses HTTP, it scales easily using CDN caching, allowing providers to deliver video to global audiences with reduced latency.
Security: HLS supports encryption and secure streaming through HTTPS, making it more secure than older protocols.

Comparing HLS to Other Protocols

HLS vs. MPEG-DASH

Compatibility: HLS has broader support on Apple devices, while MPEG-DASH is codec-agnostic and works better in some modern, cross-platform environments.
Flexibility: MPEG-DASH allows for a wider range of codecs, while HLS often relies on H.264.

HLS vs. RTMP

Scalability: RTMP is an older protocol, and its reliance on Flash makes it less suitable for modern use. HLS’s compatibility with HTTP/CDNs makes it far more scalable.
Latency: RTMP has lower latency than HLS, which can be beneficial in some real-time applications.

Real-World Use Cases for HLS

Live Sports: Real-time, adaptive video for viewers on mobile networks.
News Broadcasting: HLS ensures reliable playback on any device.
Education: Adaptive bitrate keeps online classes smooth and accessible to students on varied connections.

The Future of HLS

As internet access improves and streaming becomes increasingly central to online experiences, protocols like HLS will continue to adapt and expand. Emerging features, such as Low-Latency HLS (LL-HLS), are reducing delays, further enhancing HLS’s applicability for live and interactive content.

In short, HLS is one of the most powerful tools for delivering adaptive, scalable, and high-quality video. Its HTTP-based delivery, combined with adaptive bitrate streaming, makes it ideal for a wide range of applications, from entertainment to education. By demystifying the inner workings of HLS, we gain a deeper appreciation for how this technology enhances our everyday streaming experiences.

Before We End...

That's all for now. I hope you've found this helpful
Happy Streaming :)

Regards:
Md Mafizuddin

For any queries connect with me:
LinkedIn: @mafizonly
Twitter: @whyknowmee
Github: @pacehut
Instagram: @mafiz._

How to create a Browser Extension?

Md Mafiz Uddin — Wed, 22 Feb 2023 13:39:30 +0000

Google Chrome is a popular web browser that allows users to customize their browsing experience with extensions. Chrome extensions are small software programs that add functionality to the browser. They can modify and enhance the appearance and functionality of web pages, manage downloads, block ads, and more. In this blog, we will learn how to create a simple Chrome extension that can help users manage their to-do list. We will also add a nice design to the extension using CSS and neo-brutalism design UI.
.
.
.

Step 1: Setting up the Chrome Extension

To create a Chrome extension, we first need to create a new folder and name it whatever we like. In this example, let's name it "todo-extension". Inside this folder, we will create the following files:

manifest.json
popup.html
popup.js
popup.css . .

The manifest.json file is a configuration file that provides information about the extension, such as the name, version, and permissions. Here is an example of a basic manifest.json file for our to-do list extension:


{
    "manifest_version": 3,
    "name": "To-do List",
    "version": "1.0",
    "description": "A simple to-do list extension",

    "action": {
      "default_popup": "popup.html"

    },
    "permissions": ["storage"]
  }

In the manifest.json file, we specify the name, version, and description of the extension. We also specify the icons that will be used for the extension, and the permissionsrequired to use the extension. In this case, we need permission to access the browser storage.
.
.

Step 2: Creating the UI

In the popup.html file, we will create the UI for the to-do list extension. This file will be displayed when the user clicks on the extension icon in the Chrome toolbar. Here is an example of the code for the popup.html file:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>To-do List</title>
    <link rel="stylesheet" type="text/css" href="popup.css" />
    <link
      href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600&display=swap"
      rel="stylesheet"
    />
  </head>
  <body>
    <div id="container">
      <h1>To-do List</h1>
      <form id="todo-form">
        <input type="text" id="todo-input" placeholder="Add a new todo..." />
        <button type="submit" id="add-todo">Add</button>
      </form>
      <ul id="todo-list"></ul>
    </div>
    <script src="popup.js"></script>
  </body>
</html>

.
.

Here's the CSS code which I guess is not relevant to our topic and you must have done this simple designing till now.
**

body {
    background-color: #262626;
    color: #fff;
    font-family: "Open Sans", Arial, sans-serif;
    font-size: 14px;
    margin: 0;
    padding: 0;
}

#container {
    max-width: 350px;
    margin: 20px auto;
    padding: 10px;
    box-sizing: border-box;
    max-height: 400px;
    overflow-y: auto;
}

#container::-webkit-scrollbar {
    width: 6px;
    background-color: #f1f1f1;
}

#container::-webkit-scrollbar-thumb {
    background-color: #888;
    border-radius: 3px;
}

h1 {
    text-align: center;
    margin-bottom: 20px;
}

form {
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
}

input[type="text"] {
    padding: 10px;
    font-size: 14px;
    border: none;
    border-radius: 3px;
    outline: none;
    box-shadow: none;
    background-color: #fff;
    color: #000;
    margin-bottom: 10px;
}

button[type="submit"] {
    padding: 10px;
    font-size: 14px;
    border: none;
    border-radius: 3px;
    outline: none;
    box-shadow: none;
    background-color: #4285f4;
    color: #fff;
    cursor: pointer;
    margin-top: 10px;
}

button[type="submit"]:hover {
    background-color: #3367d6;
}

ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

li {
    padding: 10px;
    font-size: 14px;
    background-color: #eee;
    border-radius: 3px;
    margin-bottom: 10px;
    color: #000;
}

li:last-child {
    margin-bottom: 0;
}

.
.

Step 3: Adding Functionality with JavaScript

Now we will add the functionality to the extension using JavaScript. In the popup.js file, we will write the code that will handle the user input and save the todosto the browser storage.

First, we will get the form and input field using their ids. Then we will add an event listener to the form that will trigger when the user submits the form. In the event listener, we will prevent the default form submission behavior, get the value of the input field, clear the input field, add the todo item to the list, and save the todo to the browser storage. We will also define two helper functions: addTodoToListand saveTodoToStorage. The addTodoToListfunction will add the todo item to the unordered list (ul) in the UI, and the saveTodoToStoragefunction will save the todo item to the browser storage.

// get the form and input field
const form = document.getElementById("todo-form");
const input = document.getElementById("todo-input");

// add event listener to the form
form.addEventListener("submit", function (event) {
  // prevent default form submission behavior
  event.preventDefault();

  // get the value of the input field and clear the field
  const todoText = input.value;
  input.value = "";

  // add the todo item to the list and save it to the browser storage
  addTodoToList(todoText);
  saveTodoToStorage(todoText);
});

// add a todo item to the list
function addTodoToList(todoText) {
  const list = document.getElementById("todo-list");
  const item = document.createElement("li");
  item.innerText = todoText;
  list.appendChild(item);
}

// save a todo item to the browser storage
function saveTodoToStorage(todoText) {
  chrome.storage.sync.get(["todos"], function (result) {
    const todos = result.todos || [];
    todos.push(todoText);
    chrome.storage.sync.set({ todos: todos });
  });
}

// load todos from the browser storage when the popup is opened
chrome.storage.sync.get(["todos"], function (result) {
  const todos = result.todos || [];
  for (const todo of todos) {
    addTodoToList(todo);
  }
});

.
A Simple and In-depth explanation of what the above code does:

__
The first three lines of the code define variables for the input, button, and list elements of the to-do list. These variables are used throughout the code to interact with these elements.
__
The next block of code adds an event listener to the button element that handles adding new to-do items to the list. When the button is clicked, the code gets the text from the input field, checks that it is not empty, creates a new list item element, sets its text content to the input text, adds it to the list, and clears the input field.
__
The next block of code loads any existing to-do items from storage when the popup is opened. This code uses the chrome.storage.sync API to get the "todos" key from storage, which contains an array of to-do items. If the "todos" key exists, the code creates a new list item element for each item in the array and adds it to the list.
__
The final block of code saves the current to-do items to storage when the popup is closed. This code uses the window.beforeunload event to detect when the popup is being closed. It then creates an array of the text content of each list item and saves it to the "todos" key in storage using the chrome.storage.sync API.

Overall, this code handles the creation, display, and storage of to-do items in the to-do list extension.

Step 3:How to load your Chrome extension?:

Open Google Chrome and type chrome://extensions in the address bar. This will take you to the Extensions page.
Click on the toggle switch in the upper right-hand corner to enable Developer Mode.
Click on the "Load unpacked" button in the upper left-hand corner. This will open a file dialog box.
Navigate to the directory where your extension is saved and select the folder.
Click "Select Folder". Your extension will now be loaded and ready to use.

Note: You will need to reload the extension every time you make changes to the code. To do this, go back to the Extensions page and click the "Reload" button next to your extension.

.
.

Before We End...

That's all for now. I hope you've found this helpful

Regards:
Md Mafizuddin

For any queries connect with me:
LinkedIn: @mafizonly
Twitter: @whyknowmee
Github: @pacehut
Instagram: @mafiz._

Mastering React Hooks: Simplifying Your Components

Md Mafiz Uddin — Sun, 29 Jan 2023 17:21:26 +0000

React Hooks

React Hooks are a way to add state and other React features to functional components. They were introduced in React 16.8 and are a simpler way to manage state and component lifecycle methods in your components, compared to class components.

Popular React Hooks

Here are some popular React Hooks that we will be discussing in this blog:

- useState
- useEffect
- useContext

Let's dive into each of these hooks and understand what they do, and how to use them in our components.

.
.
.

useState

The useState hook allows us to add state to our functional component. State is data that can change and affect our component's rendering. We use useState by passing in an initial value, and it returns an array with two items: the current state value and a function to update it.

import React, { useState } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

.
.
.

useEffect

The useEffecthook lets us run some code after every render of our component, and it can also control how often that code is run. This hook is great for making API calls, handling component cleanup, and more. We use useEffectby passing in a callback function that runs after every render of the component. We can also pass in a second argument, an array of values, to control how often the effect runs.

import React, { useState, useEffect } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `You clicked ${count} times`;
  }, [count]);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

.
.
.

useContext

The useContexthook allows us to easily access and use data from our React context in our functional component. This hook makes it easy to share data between components without passing props down the component tree. We use useContextby passing in the context we want to access and it returns the current value of that context.

import React, { useContext } from 'react';

const MyContext = React.createContext();

function Example() {
  const value = useContext(MyContext);

  return (
    <div>
      <p>The value from context is: {value}</p>
    </div>
  );
}

Important Points :

React Hooks allow you to add state and other React features to functional components.
Popular Hooks include useState, useEffect, useContext, useReducer, useRef, and useMemo.
Hooks allow you to reuse state logic across multiple components without having to write a class component.
Hooks can make your code cleaner, more organized, and easier to maintain.
You can use Hooks to manage complex state, perform data fetching, handle side-effects, and optimize performance.
React Hooks are a recent addition to the React library, but they have quickly become a popular way to write modern React applications. . . #### Now React Hooks are a powerful tool for adding state and other React features to functional components. Popular Hooks like useState, useEffect, useContext, useReducer, useRef, and useMemoprovide a more organized, maintainable, and reusable way of writing React applications. By allowing developers to manage complex state, perform data fetching, handle side-effects, and optimize performance, Hooks have quickly become a popular way to write modern React applications.

Before We End...

That's all for now. I hope you've found this helpful

Regards:
Md Mafizuddin

For any queries connect with me:
LinkedIn: @mafizonly
Twitter: @whyknowmee
Github: @pacehut
Instagram: @mafiz._

JavaScript Callbacks and Promises (Async Evolution)

Md Mafiz Uddin — Sat, 28 Jan 2023 16:22:11 +0000

JavaScript Callbacks (why fear?)

Every JavaScript beginner will face this question at least once: "What is a callback function?"
Well, we can find the answer in the word callback itself. It's all about notifying the caller after the successful completion or failure of a task.

# First, what is a function?

A function in JavaScript is a set of statements that performs a task. This set of statements can exist without a function, but having them in a function helps us reuse the task in multiple places.

Suppose there is an example of a function that doubles a value if the value is an even number. We pass a number as an argument to the function.

function doubleEven(n) {
    if (n % 2 === 0) {
        return n * 2;
    }
    return n;
}

Now you can use this function in as many places as you need to:

doubleEven(10); // Output, 20
doubleEven(5); // Output, 5

But at any level of your journey to learn JS, you must be knowing that "You can pass a function as an argument to another function"

# Callbacks

A callback function is a function that is passed as an argument to another function, to be “called back” at a later time.

But Why??

Callbacks make sure that a function is not going to run before a task is completed but will run right after the task has completed
It helps us develop asynchronous JavaScript code and keeps us safe from problems and errors.

# How to create a Callback?

Let's assume there's a function foo() which accepts a callback and calls it wherever it wants in it's body.


    function foo(bar)
    {
          console.log("foo is executing");
          bar();
          console.log("foo called bar which is a callback");
    }

Now, How to call foo() ??

For this we can directly write a function at the arguments' place or first we can create a function separately and then pass it as callback.


 /**
 Invoke foo by passing a function as an argument.
 */
   foo(function() {
       console.log('bar is called');
    });

Notice that we have passed the entire function definition as an argument to foo. The passed function doesn't have a name. It is called an anonymous function.

We can also pass Arrow Functions as callbacks.
Arrow functions are nothing but a different way of writing functions in JavaScript


 foo(() => {
   console.log("callback function is called")
  });

# Built-In Methods of JavaScript:

JavaScript provides built-in methods which accepts callbacks.
e,g. setTimeout() , setInterval()......

Let's see,


     const message = function() {  
     console.log("This message is shown after 3 seconds");
     }

     setTimeout(message, 3000); 
     //after 3 seconds it will log the statement provided

So, How this is working we will dive into it later.

# Promises in JS

The constructor syntax for a promise object is:

 let promise = new Promise(function(resolve, reject) {
  // executor (the producing code)
});

The function passed to new Promise is called the executor. When new Promise is created, the executor runs automatically.

Its arguments resolve and reject are callbacks provided by JavaScript itself. Our code is only inside the executor.

When the executor obtains the result, be it soon or late, doesn’t matter, it should call one of these callbacks:

resolve(value) — if the job is finished successfully, with result value.
reject(error) — if an error has occurred, error is the error object.

So to summarize: the executor runs automatically and attempts to perform a job. When it is finished with the attempt, it calls resolve if it was successful or reject if there was an error.

The promise object returned by the new Promise constructor has these internal properties:

state — initially "pending", then changes to either "fulfilled" when resolve is called or "rejected" when reject is called.
result — initially undefined, then changes to value when resolve(value) is called or error when reject(error) is called.

Here’s an example of a promise constructor and a simple executor function with “producing code” that takes time (via setTimeout):

`      let promise = new Promise(function(resolve, reject) {
        // the function is executed automatically 
       //when the promise is constructed

        // after 1 second signal that the 
        // job is done with the result "done"
         setTimeout(() => _resolve__("done")_, 1000);
      });

We can see two things by running the code above:

The executor is called automatically and immediately (by new Promise).
The executor receives two arguments: resolve and reject. These functions are pre-defined by the JavaScript engine, so we don’t need to create them. We should only call one of them when ready.

After one second of “processing”, the executor calls resolve("done") to produce the result. This changes the state of the promise object

That was an example of a successful job completion, a “fulfilled promise”.

And now an example of the executor rejecting the promise with an error:

`let promise = new Promise(function(resolve, reject) {
  // after 1 second signal that the job is finished with an error
  setTimeout(() => _reject__(new Error("Whoops!"))_, 1000);
});

To summarize, the executor should perform a job (usually something that takes time) and then call resolve or reject to change the state of the corresponding promise object.
A promise that is either resolved or rejected is called “settled”, as opposed to an initially “pending” promise.

# Consumers: then, catch

A Promise object serves as a link between the executor (the “producing code”) and the consuming functions, which will receive the result or error. Consuming functions can be registered (subscribed) using the methods .then and .catch.

.then ( )

The most important, fundamental one is .then.

The syntax is:

promise.then(  
function(result)  {  _/* handle a successful result */_  },
function(error)  {  _/* handle an error */_  }  );

.catch ( )

The other method use to capture the errors of the promise object we use .catch()

   let promise =  new  Promise((resolve, reject)  => {
                                setTimeout(()  =>   
                               reject(new  Error("Whoops!")), 1000); });
   // shows "Error: Whoops!" after 1 second_

# In Summary

To Summarize:

A JavaScript function can accept another function as an argument.
Passing the function as an argument is a powerful programming concept that can be used to notify a caller that something happened. It is also known as the callback function.
You can use callback functions to notify the caller depending on a use case. Callbacks are also used to carry out certain tasks depending on the state (pass, fail) of other tasks.
But be careful – nesting too many callback functions may not be a great idea and may create Callback Hell. We will dive into it sometime later.. ##
Promise is an important building block for the asynchronous concept in JavaScript.
A promise object has two internal properties, state and result. These properties are not code-accessible.
The consumer of a promise can use the .then(), .catch(), and .finally() methods to handle promises.

Before We End...

That's all for now. I hope you've found this helpful

Regards:
Md Mafizuddin

For any queries connect with me:
LinkedIn: @mafizonly
Twitter: @whyknowmee
Github: @pacehut
Instagram: @mafiz._

DEV Community: Md Mafiz Uddin

What is MCP? A Simple Guide to AI’s Next Big Thing

Imagine a World Where AI Integrates Effortlessly

How MCP Works

Why It’s a Big Deal

Picture This

MCP vs. APIs

Explore More

What’s Your Take?

HTTP Live Streaming: An In-Depth Look

Table of Contents

What is HLS?

How Does HLS Work?

HLS Components and Process Flow

1. Encoding Multiple Qualities

2. Segmenting the Video

3. Playlist (Manifest) Files

4. Adaptive Streaming Process

5. Delivery Over HTTP

Adaptive Bitrate Streaming Explained

Benefits of HLS

Comparing HLS to Other Protocols

HLS vs. MPEG-DASH

HLS vs. RTMP

Real-World Use Cases for HLS

The Future of HLS

Before We End...

How to create a Browser Extension?

Step 1: Setting up the Chrome Extension

Step 2: Creating the UI

Step 3: Adding Functionality with JavaScript

Step 3:How to load your Chrome extension?:

Before We End...

Mastering React Hooks: Simplifying Your Components

React Hooks

Popular React Hooks

useState

useEffect

useContext

Important Points :

Before We End...

JavaScript Callbacks and Promises (Async Evolution)

JavaScript Callbacks (why fear?)

# First, what is a function?

# Callbacks

# How to create a Callback?

# Built-In Methods of JavaScript:

# Promises in JS

# Consumers: then, catch

.then ( )

.catch ( )

# In Summary

Before We End...