DEV Community: Artaza Sameen

🚀 Introducing Command King - The Ultimate VS Code Extension for Command Management!

Artaza Sameen — Sat, 14 Jun 2025 17:17:20 +0000

Are you tired of constantly switching between terminals and remembering complex commands? I've built something that will change how you manage your development workflow!

Command King automatically discovers and organizes all your npm scripts and custom commands in a beautiful hierarchical tree view right in VS Code.

✨ Key Features:

Auto-discovery of package.json scripts and .cmdk files
Hierarchical command organization
One-click command execution in integrated terminal
Command descriptions for better team collaboration
Real-time updates with file watchers
Full CRUD operations for custom commands

Perfect for:

DevOps engineers managing complex deployment scripts
Full-stack developers juggling multiple services
Team leads wanting to standardize command documentation
Anyone who wants to streamline their development workflow
No more digging through package.json files or remembering obscure commands. Just click and run!

The extension supports both simple string commands and extended objects with descriptions, making it perfect for teams that need proper documentation.

Ready to become the king of your commands? 👑

Install From Here:

https://marketplace.visualstudio.com/items?itemName=ArtazaSameen.command-king

Download Instagram reels by scraping using NodeJS

Artaza Sameen — Sun, 04 Jun 2023 09:03:16 +0000

Introduction

Today, we are going to use web scraping in NodeJS to extract direct download links for Instagram Reels Video

Install Required NPM Packages

Puppeteer : Puppeteer is a Node.js library which provides a high-level API to control Chrome/Chromium ( Browser )

Cheerio : Cheerio is a HTML DOM parser and helps us traverse raw HTML and XML

npm install puppeteer
npm install cheerio

Firs, we need get the raw generated HTML, using Pupperteer and then parse the HTML using Cheerio to extract out the direct download link.

Note: We are using Puppeteer to get the HTML because the video link is hydrated into the page using Javascript. If, we use a simple request to get the raw HTML, the video tag won't be available

First Step (Get the raw HTML)

This is how the raw HTML looks likes when we inspect the page

Define a function that gets the raw HTML, including the video tag

async function getHTML(url) {
  // Launch a headless browser instance
  const browser = await puppeteer.launch({ headless: "new" });

  // Create a new page
  const page = await browser.newPage();

  // Navigate to a URL
  await page.goto(url);

  // Wait for the video tag to appear
  await page.waitForSelector("video");

  // Get the HTML content
  const html = await page.content();

  // Close the browser
  await page.close();
  await browser.close();

  // Return the HTML content
  return html;
}

Second Step (Parse the raw HTML)

We are going to parse the raw HTML, that we get from the getHTML() function

async function getReelVideo(url) {
  const html = await getHTML(url);

  // calls cheerio to process the html received
  const $ = cheerio.load(html);

  // Searches the html for the video tag and get the src atttribute
  const videoDirectLink = $("video").attr("src");

  // returns the direct video link
  return videoDirectLink;
}

Last Part

Now we can run the getReelVideo() function the get direct download link of a Instagram Reel

getReelVideo("https://www.instagram.com/reel/CrQ9TvAAuRe/").then((link) =>
  console.log(link)
);

Output:

https://instagram.fccu19-1.fna.fbcdn.net/v/t66.30100-16/120641351_1702239160229021_7989127058867652451_n.mp4?_nc_ht=instagram.fccu19-1.fna.fbcdn.net&_nc_cat=105&_nc_ohc=QoyEWM5tB-AAX_8SGz5&edm=AP_V10EBAAAA&ccb=7-5&oh=00_AfAU1hwxYlztdGfqHxpNxyTBDCOzNnLwBw7KnEdj7dLAuw&oe=6463ADB1&_nc_sid=4f375e

How to use PrismJS in ReactJS

Artaza Sameen — Sun, 04 Jun 2023 08:48:10 +0000

Introduction

Prism is a lightweight, extensible syntax highlighter, built with modern web standards in mind. It’s used in millions of websites, including some of those you visit daily

For more info on PrismJS Click Here

Install PrismJS using npm

I assume that your React project is configured correctly. After your React
project is up and running. Install PrismJS on the terminal.

npm i prismjs

After we have installed prismjs we will import

Language Support
Themes
Plugins

Import Prism and Theme in your project

Here we are importing PrismJS and the Theme.

import Prism from "prismjs"; // Prism
import "prismjs/themes/prism-okaidia.min.css"; // Import theme

Themes are stored in the prismjs/themes/ directory. Here are all
the possible themes supported by PrismJS.

prism-coy.min.css
prism-dark.min.css
prism-funky.min.css
prism-okaidia.min.css
prism-solarizedlight.min.css
prism-tomorrow.min.css
prism-twilight.min.css

Add language support and Plugins

In order to enable syntax highlighting we need the language from the
'prismjs/componenent/' directory. In this project we are going to highlight C++ code.

We are going to import plugins from the prismjs/plugins directory.

And we are going to use the normalize-whitespace plugin to
remove all leading and trailing spaces in the code.

// C is required for C++ highlighting to work
require("prismjs/components/prism-c");

// Add language support for C++
require("prismjs/components/prism-cpp");

// To remove extra white spaces
require("prismjs/plugins/normalize-whitespace/prism-normalize-whitespace");

To see which plugins are supported in PrismJS Click Here

How to put code in HTML

After we have imported all the required files. We are place your code inside the pre > code tags, like the example below. Here, xxxx is the name of the language

To see all the languages supported by PrismJS Click Here

<pre>
  <code className="language-xxxx">
    <!-- Your code here -->
  </code>
</pre>

But, wait. It is not over yet, the syntax highlighting will not work yet now.
We have to call the Prism.highlighAll() function to highlight our code
after rendering the html.

Final Code Example

Now the final code. Here we are going to call the Prism.highlightAll() function inside useEffect() hook. This will highlight our code after the
Component is rendered.

import Prism from "prismjs"; // Prism
import "prismjs/themes/prism-okaidia.min.css"; // Import theme

require("prismjs/components/prism-c");
require("prismjs/components/prism-cpp");
require("prismjs/plugins/normalize-whitespace/prism-normalize-whitespace");

function App() {

  useEffect(() => {
    Prism.highlightAll();
  });

  return (
    <pre>
      <code className="language-cpp">
        // Your First C++ Program

        #include <iostream>

        int main() {
            std::cout << "Hello World!";
            return 0;
        }


      </code>
    </pre>
  );
}

And now the rendered App component will have code highlighting enabled

Note: This process also works on NextJS