DEV Community: Jerry Satpathy

Your React App Breaks When the Internet Drops. Here’s a Better Way.

Jerry Satpathy — Sat, 28 Feb 2026 10:58:49 +0000

Internet connectivity is outside a developer’s control.

User experience is not.

When a connection drops, most applications either freeze silently, fail API calls without feedback, or leave users staring at broken UI states. The result is confusion, repeated actions, and unnecessary frustration.

React Network Notifier exists to solve this problem cleanly. It detects network changes, surfaces clear offline messaging, and manages reconnect transitions without adding dependencies or boilerplate to your application.

Version 2.0.0 is a complete rewrite focused on performance, flexibility, and modern React compatibility.

What It Does

react-network-notifier is a zero-dependency React component that:

Detects network disconnection
Displays configurable offline states
Handles reconnect events with smooth transitions
Works with React and Next.js
Supports Server-Side Rendering (SSR)

What’s New in v2.0.0

1. Rewritten Build System (Microbundle → Tsup)

The package was rebuilt using Tsup.

Results:

Smaller bundle
Faster build pipeline
Final bundle size under 10KB (minified)

2. Multiple Layout Variants

Three visual modes are now supported:

variant="toast"

variant="banner"

variant="fullscreen"

toast: small floating notification
banner: horizontal alert
fullscreen: immersive offline state (default)

This makes the component usable across dashboards, SaaS products, and internal tools.

3. Native Dark Mode Support

Theme configuration:

theme="light"  |  "dark"  |  "system"

When set to "system", the component respects the user’s OS preference automatically.

4. Reconnect State Handling

When connectivity returns:

A success message is shown
The component transitions out smoothly

Reconnect messages are fully customizable.

5. ASCII or SVG Icons

Two icon modes are supported:

iconType="ascii"  
iconType="svg"

This allows the component to fit both retro developer tools and modern UI systems.

6. CSS Modules Instead of Inline Styles

Version 2 removes heavy inline style objects and uses injected CSS modules instead.

Benefits:

Reduced runtime overhead
Cleaner rendering
Improved performance consistency

Installation

npm install react-network-notifier  
# or  
yarn add react-network-notifier

Basic Usage

Add it to your root layout:

import  NetworkNotifier  from  "react-network-notifier";  

function  App() {  
  return (  
  <>  
  <NetworkNotifier  />  
 {/* Your application */}  
  </>  
 );  
}  

export  default  App;

No configuration required.

Custom Configuration Example

import  NetworkNotifier  from  "react-network-notifier";  

const  customMessages  = [  
  "It looks like your router took a coffee break.",  
  "Offline mode activated.",  
];  

const  reconnectMessages  = [  
  "Connection restored.",  
];  

function  App() {  
  return (  
  <NetworkNotifier  
  messages={customMessages}  
  reconnectMessages={reconnectMessages}  
  variant="toast"  
  theme="system"  
  iconType="svg"  
  closable={true}  
  />  
 );  
}

Configuration Props

Prop	Type	Default	Description
`messages`	`string[]`	`[]`	Array of strings displayed when the connection is lost.
`reconnectMessages`	`string[]`	`[]`	Array of strings displayed when the connection is restored.
`images`	`string[]`	`[]`	Array of ASCII art strings shown during offline states.
`styles`	`React.CSSProperties`	`{}`	Inline styles to override or extend default component CSS.
`variant`	`"toast" \	"banner" \	"fullscreen"`
`iconType`	`"ascii" \	"svg"`	`"ascii"`
`theme`	`"light" \	"dark" \	"system"`
`closable`	`boolean`	`true`	If `true`, allows users to manually dismiss the notification.

Technical Summary

Zero dependencies
Under 10KB minified
TypeScript-first
SSR-safe
Tree-shakeable
No runtime setup required

Links

NPM:

https://www.npmjs.com/package/react-network-notifier

GitHub:

https://github.com/J3rry320/react-network-notifier

Final Thoughts

Offline handling is often treated as an edge case. In reality, it is a core UX scenario.

React Network Notifier v2.0 is designed to integrate into modern React systems with:

Minimal footprint
No dependencies
SSR safety
Configurable presentation

If you care about resilient UI architecture, this is a small but meaningful addition to your stack.

Contributions and feedback are welcome.
And as always Happy Coding! 🧑🏻‍💻

Making Your Website Talk (Without Scaring Your Users)

Jerry Satpathy — Fri, 06 Feb 2026 07:30:17 +0000

Let’s be honest: most websites are too quiet. We spend our lives staring at glowing rectangles, reading text like it’s 1995. But your browser has a hidden superpower called the Web Speech API. It can talk. And no, I don't mean those weird auto-playing video ads from 2008.

Today, we’re building a Weather Dashboard that doesn’t just show you the temperature—it summarises the vibes and reads them to you.

The Stack

React.js: Because we like components and state management that makes sense.
Web Speech API: Specifically window.speechSynthesis.
OpenWeatherMap API: For the data (or any weather API of your choice).

1. The "Brains": Fetching & Summarising

First, we need something worth saying. A raw JSON response saying {"temp": 273.15} is great for machines, but humans prefer "It's freezing, stay inside."

const fetchWeatherSummary = async (city) => {
  const response = await fetch(`https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=YOUR_API_KEY&units=metric`);
  const data = await response.json();

  // A simple summarizer (You could pipe this to an LLM for more "flavour")
  return `Currently in ${data.name}, it's ${data.main.temp} degrees with ${data.weather[0].description}. My professional advice? ${data.main.temp > 25? "Wear a hat.":"Grab a jacket."}`;
};

2. The "Voice": Meet SpeechSynthesis

The window.speechSynthesis controller is the boss. It manages the queue of "utterances" (the things you want to say).

The `useSpeech` Hook

Don't clutter your UI logic. Let’s wrap the speech engine in a clean React hook.

import { useState, useEffect } from 'react';

export const useSpeech = () => {
  const [voices, setVoices] = useState<SpeechSynthesisVoice[]>([]);

  useEffect(() => {
    const updateVoices = () => {
      setVoices(window.speechSynthesis.getVoices());
    };

    window.speechSynthesis.onvoiceschanged = updateVoices;
    updateVoices();
  }, []);

  const speak = (text: string, voiceName?: string, rate = 1, pitch = 1) => {
    // Cancel any ongoing chatter
    window.speechSynthesis.cancel();

    const utterance = new SpeechSynthesisUtterance(text);

    // Find the voice or default to the first one
    if (voiceName) {
      utterance.voice = voices.find(v => v.name === voiceName) || null;
    }

    utterance.rate = rate;   // 0.1 to 10
    utterance.pitch = pitch; // 0 to 2

    window.speechSynthesis.speak(utterance);
  };

  return { speak, voices, pause: () => window.speechSynthesis.pause(), resume: () => window.speechSynthesis.resume() };
};

3. The Dashboard Component

Now, let’s glue it together. We’ll create a button that fetches the data and then reads it out loud.

import React, { useState } from 'react';
import { useSpeech } from './hooks/useSpeech';

const WeatherDashboard = () => {
  const [summary, setSummary] = useState("");
  const { speak, voices } = useSpeech();

  const handleWeatherUpdate = async () => {
    const text = await fetchWeatherSummary("London");
    setSummary(text);
    speak(text, voices[0]?.name, 1.1, 1);
  };

  return (
    <div className="p-8 max-w-md mx-auto bg-white rounded-xl shadow-md">
      <h1 className="text-2xl font-bold">Weather Talker</h1>
      <button 
        onClick={handleWeatherUpdate}
        className="mt-4 px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600"
      >
        Get Audio Summary
      </button>
      {summary && <p className="mt-4 italic text-gray-600">"{summary}"</p>}
    </div>
  );
};

Pro-Tips for the Speech API

Voices are Lazy: Voices don't always load immediately. That onvoiceschanged event in our hook is crucial; otherwise, your voices array will be empty on the first render.
User Activation: Browsers hate noise. You cannot trigger speak() on page load. It must be inside a user-triggered event (like a click).
The "Vocalize" Shortcut: If you want to skip the boilerplate, there is a handy NPM package called vocalize.ts. It’s a TypeScript-first wrapper for this exact API. Full disclosure: it’s currently in a bit of a dormant state, but the core logic is solid, and an update is coming soon to modernise the internals.

Why bother?

Accessibility is the obvious answer. Screen readers are great, but sometimes a specific "Read this for me" feature is exactly what a user needs when they're multitasking or vision-impaired.

Plus, it's just fun to make your computer talk back to you. Just don't give it a sarcastic personality unless you're prepared for the consequences.

And as always Happy coding!

The Day My Linux Server Started Distributing Windows Malware

Jerry Satpathy — Wed, 04 Feb 2026 06:43:47 +0000

Here's a Minimal & Practical Guide to Server Hygiene

If you run a server long enough, you will eventually open a directory, spot a file you don't recognise, and think: “I did not put this here.”

I had my "moment" during the React2shell (CVE-2025-55182) outbreak. I found a file named Agtisx.exe sitting in a temp folder. A Windows executable on a Linux box is a red flag big enough to cover a stadium.

It wasn't just a stray file; it was the payload for a campaign turning my infrastructure into a distribution hub to infect Windows servers. My clean server had become a staging ground for someone else’s war.

This guide exists so that the moment becomes mildly interesting instead of emotionally devastating. We aren't aiming for "military-grade" complexity. We want clean, boring, predictable systems that let you sleep at night.

1. SSH: Make Logging In Aggressively Boring

If logging into your server feels exciting, you’ve already failed. Your job isn't to defeat "hackers"; it’s to make your server so unrewarding that they move on to someone else.

Your config file at (/etc/ssh/sshd_config) should at the very least enforce:

Key-based login only. No passwords.
No root login. Force a standard user.
Minimal attempts. Give them three tries, then kick them.

#Edit /etc/ssh/sshd_config with these settings:
PasswordAuthentication no
PermitRootLogin no
PubkeyAuthentication yes
MaxAuthTries 3

Why it works: Bots love low-hanging fruit (passwords and root). They hate keys and effort. Be the effort.

2. Keys & Secret Rotation is Hygiene, Not Panic

SSH keys live forever unless you actively rotate them. They sit on old laptops, archived backups, CI machines you no longer use, and devices you forgot ever had access.

Environment variables behave the same way.

Once a secret exists, it tends to spread. It gets copied into .env files, pasted into dashboards, shared with teammates, backed up, and sometimes logged by mistake. Over time, you stop remembering where it lives, but it still works.

Rotating keys and secrets is not a response to an incident. It is routine maintenance. It limits the damage of forgotten access and reduces the blast radius of mistakes.

If you are thinking, “But nothing bad happened,” that is exactly the point. Rotation is what keeps it that way.

3. The Local Firewall: Trust but Verify

Even if your cloud provider has a "Security Group," run a local firewall. It’s your second line of defence against human error—specifically, your own misclicks.

The Rule: Expose SSH, HTTP, HTTPS, and your specific app ports. Block everything else.

# Example using UFW (Uncomplicated Firewall)
sudo ufw default deny incoming
sudo ufw allow ssh
sudo ufw allow http
sudo ufw allow https
sudo ufw enable

4. Fail2ban: Outsource the Annoyance

Brute-force attempts are a fact of life. You aren't being targeted; you just exist. Fail2ban watches your logs and quietly jails IPs that behave poorly.

# Check status of blocked IPs
sudo fail2ban-client status sshd

5. Audit Your Services

Malware loves persistence, and persistence loves services. Run this command:

systemctl list-unit-files --state=enabled

Ask one question for every line: “Do I know why this is here?”

If the answer is No: Investigate.
If the answer is still No: Disable it.

6. The Post-Moment Forensic Routine

When you find a file like Agtisx.exe, don't just delete it. You need to know how it got there.

Step 1: Check the Metadata

Before deleting, look at the file's "birth certificate":

stat Agtisx.exe

This tells you the exact second it was created (Birth) or modified. Note the timestamp.

Step 2: Check Permissions and Ownership

Who "owns" the malware?

ls -la Agtisx.exe

Owned by www-data? Your web app was the entry point (e.g., React2shell).
Owned by root?This implies privilege escalation.

Step 3: Confirm via Logs

Match the stat timestamp against your logs:

# Search web logs for activity around the 'stat' timestamp
grep "2025-02-04 10:30" /var/log/nginx/access.log

7. Recovery: The "Burn It Down" Philosophy

Once a server is compromised enough to host attack payloads, you can rarely trust the OS again.

Snapshot the evidence: Save logs and the malware sample to an isolated folder.
Rotate everything:
- SSH Keys: Generate new ones; revoke all old ones.
- Secrets: Change DB passwords, API keys, and .env files.
Delete the instance: Terminate the server. Do not try to "clean" it.
Redeploy Fresh: Provision a new instance, apply your "Boring Config," and patch the vulnerability (e.g., update React) before going live.

8. Predictability Beats Fancy Tools

Your server should only talk to places you expect. Check your active connections:

ss -antp

Normal: Web traffic, database connections, updates.
Not Normal: Random IPs, unknown processes, strange ports.

9. File Hygiene: Stop the Clutter

Your server is not a downloads folder. Make sure to check if there are

No random binaries in home directories.
No world-writable directories.
No executable permissions unless required.

# Find world-writable directories
find / -xdev -type d \( -perm -0002 -a ! -perm -1000 \) -print

10. Backups: The Disaster Circuit-Breaker

Backups don’t prevent incidents; they prevent disasters. They turn a "compromise" into a "recovery."

The Golden Rule: If the thought of restoring your server feels scary, your backups aren't finished yet.

The Goal

A clean server has:

A few ways in.
A few things are running.
Few places to hide.
Predictable behaviour.

The best compliment a professional server can receive is: “Nothing interesting happened today.”

The goal is to build for boredom & to Sleep better.
And as always Happy Coding!

How I Built a Google Maps Scraper to Generate Leads for My New Agency (And Why I Open-Sourced It)

Jerry Satpathy — Fri, 14 Nov 2025 06:19:13 +0000

When you're building a brand-new agency, there’s one problem you can’t escape:

Finding clients.

Before we had a portfolio, before we had referrals, before anyone even knew our name — we needed a reliable way to identify businesses that might need websites, branding, software, or digital marketing.

At Code Media Labs — my newly formed agency — that responsibility fell on me.

And like many new founders, I turned to the simplest place to find businesses:

Google Maps.

The Struggle Every New Agency Knows

If you've ever done manual prospecting, you know the routine:

Search “Interior Designers near me”
Scroll, scroll, scroll
Click each listing
Copy the name, phone, rating, URL
Paste into a spreadsheet
Repeat 150+ times

It’s slow. It's painful. And it steals hours from the work that actually builds your agency.

One night — after manually extracting yet another list — I said:

“Enough. I’m automating this.”

And that turned into a tool that helped my agency survive its early months.

From Internal Hack → Lead Machine

I opened VS Code and wrote a small Puppeteer script:

Launch Google Maps
Search for a keyword
Scroll automatically
Extract business details
Save everything cleanly

The first version was rough. But it worked.

I could instantly generate lists like:

Cafes in Cuttack
Marketing agencies in Bhubaneswar
Retail shops in Saheed Nagar
Manufacturers across Odisha

For a brand-new agency, this sped up our outreach dramatically.

Instead of spending hours gathering data, I could spend hours pitching and closing.

Why I Decided to Open-Source It

Initially, the scraper was private — a purely internal survival tool.

But the more I talked to other freelancers and small agencies, the more I realised:

“Everyone is struggling with lead generation, especially early on.”

So I cleaned up the tool, added a CLI, refined the output, wrote proper documentation, and published it.

Originally, I wanted to publish it as a scoped package (@cml/google-maps-scraper), but scoped namespaces are paid.

So I renamed it clean and simple:

👉 gmaps-scraper

A free, open-source Google Maps scraping tool for everyone.

NPM: https://www.npmjs.com/package/gmaps-scraper

GitHub: https://github.com/Code-Media-Labs/google-maps-scraper

What the Tool Can Do

🔍 Scrape any Google Maps query
🏪 Extract business details (name, rating, reviews, phone, URL)
🔁 Auto-scroll until all results are loaded
🛡 Automatically deduplicate entries
📦 Export results to:
- results.json
- results.xlsx
🧰 Use as:
- A CLI command
- A Node.js importable library

For freelancers and new agencies, this is a huge time-saver.

How to Use It

Installation

Global (CLI usage):

npm install -g gmaps-scraper

Local (project usage):

npm install gmaps-scraper

CLI Usage

Search for all interior designers in Bhubaneswar:

gmaps-scraper scrape -q "Interior Designers in Bhubaneswar"

Custom output path:

gmaps-scraper scrape -q "Cafes in Cuttack" -o cafes.json

Headless mode + limited scrolls:

gmaps-scraper scrape -q "Hotels in Puri" --headless -m 50

💻 Library Usage (Node.js)

import { scrapeGoogleMaps } from  "gmaps-scraper";

const results =  await  scrapeGoogleMaps({

searchQuery:  "Cafes in Cuttack",

outputPath:  "cafes.json",

maxScrollAttempts:  80,

headless:  true,

});

console.log(`Found ${results.length} cafes`);

console.log(results);

Example Output

[  {  "name":  "Urban Café",  "rating":  "4.5",  "reviews_count":  "1,204",  "phone":  "+91 9876543210",  "maps_link":  "https://www.google.com/maps/place/..."  }  ]

Real Talk: Google Maps Can Break Your Selectors

Scraping Google Maps isn't “set-and-forget.”

Google changes:

class names
container structure
layout
nested DOM elements

Your selectors may break.

But fixing them is simple if you know what to look for.

Old selector:

const name = await element.$eval('.business-name', el => el.textContent);

Updated selector:

const name = await element.$eval('.place-title span', el => el.textContent);

Whenever Google makes a UI update, just inspect again and adjust your selectors.

Who Should Use This?

This tool is built for anyone who needs structured business data from Google Maps — especially if you’re trying to grow or automate your workflow. You’ll benefit from this scraper if you are:

A new agency looking for qualified leads quickly
A freelancer who wants to find clients without spending hours searching manually
A marketer needing business lists for outreach, campaigns, or segmentation
A founder validating a market or researching local competitors
An SEO specialist creating or updating business directories
A developer building automation tools, dashboards, or datasets
A data analyst collecting local business information for insights

If you’re early in your journey and want to save time, remove repetitive work, and scale your lead generation, this tool gives you a massive head start.

What's Coming Next

I’m actively adding:

Address, website, and business hours extraction
Anti-detection and rate-limiting features
Region/language support
Cleaner error handling
CSV and CRM-friendly output formats

If you want to contribute, PRs are welcome!

Final Thoughts

When you're building a new agency, every hour counts.

This tool saved me countless hours of lead generation — and helped bring in our earliest clients.

That’s why I open-sourced it.

If it helps someone else who’s just starting, it’s worth it.

If you’ve built an internal tool that saved you time… consider open-sourcing it. You might help someone who’s exactly where you were.

And as always, Happy Coding 🧑🏻‍💻

Built with ❤️ by Code Media Labs

How to Use the CSS aspect-ratio Property for Responsive Layouts

Jerry Satpathy — Sun, 28 Sep 2025 14:47:53 +0000

As front-end developers, we’ve all battled with awkwardly stretched images, mysteriously squashed video embeds, or divs that seem to believe geometry is optional. Enter CSS’s aspect-ratio property, our knight in shining layout armour.

This property has quickly become a modern CSS favourite. It lets us maintain proportionate layouts without relying on padding hacks, JavaScript workarounds, or obscure "magic numbers." Let’s dive into how it works and why it changes the game.

What is aspect-ratio?

The aspect-ratio property allows you to control the ratio between an element’s width and height. Instead of hardcoding both dimensions, you define the relationship, and the browser does the rest.

Here’s the syntax:

.element {
  aspect-ratio: 16 / 9;
}

That 16 / 9probably looks familiar. It’s the widescreen video ratio. You can also set it to 1 / 1 for a perfect square or 21 / 9 if you want something more cinematic.

Why is aspect-ratio Useful?

Before this property, developers had to rely on clever but hacky tricks:

Using padding-top percentages, such as 56.25% for a 16:9 ratio (since 9 ÷ 16 = 0.5625).
Calculating and setting height with JavaScript.
Faking ratios with background images.

These approaches got the job done, but they were messy and didn’t always play well with responsive design. Now, you can write one clean line of CSS and move on with your life.

How Does It Actually Work?

Think of aspect-ratio as a rule that says:

“No matter what, keep these proportions.”

If only the width is set, the height automatically adjusts.
If only the height is set, the width adjusts.
If both are set explicitly, aspect-ratio keeps quiet and steps aside.

Example with width and ratio:

.video-container {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #eee;
}

Here, the width fills the parent, and the height follows along smoothly at the correct ratio.

Real-World Applications

Video embeds: YouTube and Vimeo iframes that stay perfectly proportioned.
Image grids: Thumbnails that don’t squish or stretch.
Cards and placeholders: Consistent layouts even without real content inside.
Brand consistency: Great for product photos where the visual style needs to stay uniform.

Combining with Other CSS Properties

The aspect-ratio property pairs really well with other layout tools:

.card {
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 8px;
  overflow: hidden;
}

Now you’ve got a consistently shaped card that looks clean and scales gracefully.

Browser Support

The best part is that modern browsers have supported it very well since 2021. You don’t need to polyfill or worry about strange quirks. And since Internet Explorer has retired, we can enjoy this feature with a lot less stress.

A Quick Analogy

Think of aspect-ratio as the reliable friend in group photos. They’re never the ones who look unnaturally stretched or squeezed. While others get complicated, aspect-ratio just keeps everything looking balanced.

Closing Thoughts

The aspect-ratio property may feel small at first, but it quietly solves one of the longest-running pain points in web design. It saves time, removes the need for hacks, and makes responsive design a little more fun.

If you haven’t used it yet, try adding aspect-ratio into your next project and see how much easier it makes layout work.

And as always, Happy Coding! 👾

JSDoc: Your Secret Weapon for Adding Types to JavaScript (Without the Full TypeScript Overhaul)

Jerry Satpathy — Sat, 15 Feb 2025 12:01:58 +0000

TypeScript is a fantastic tool for adding static typing to JavaScript, catching errors early and making large codebases more manageable. But let's be honest, sometimes a full TypeScript migration can feel like climbing Mount Everest. What if you could get most of the benefits of a statically typed system without the complete overhaul? Enter JSDoc, your secret weapon for adding types (and excellent documentation!) to your JavaScript projects.

The Power of JSDoc

JSDoc, those familiar comments above your code, can do more than explain what your functions do. They can also define types! Using @typedef and @type you can create complex, reusable type definitions in your JavaScript files. This allows you to add type safety and improve code readability without the full complexity of TypeScript.

Why JSDoc Might Be Right for You

Smaller Projects: For smaller projects, the overhead of a full TypeScript setup might be overkill. JSDoc offers a lightweight way to add structure and documentation.
Gradual Adoption: JSDoc can be a fantastic stepping stone towards TypeScript. You can start with JSDoc, generate declaration files, and gradually transition to full TypeScript if needed.
Existing JavaScript Codebases: Migrating a massive JavaScript codebase to TypeScript can be daunting. JSDoc allows you to introduce types incrementally, without rewriting everything at once.
Documentation as a First-Class Citizen: JSDoc emphasizes documentation, which is crucial regardless of your typing system. A well-documented codebase is always a plus.

Defining Types with `@typedef` and `@type`

Here's where the magic happens. Let's see how you define types using JSDoc:


/**
 * @typedef {Object} Point
 * @property {number} x - The x-coordinate.
 * @property {number} y - The y-coordinate.
 */

/**
 * Calculates the distance between two points.
 * @param {Point} p1 - The first point.
 * @param {Point} p2 - The second point.
 * @returns {number} The distance between the points.
 */
function distance(p1, p2) {
  const dx = p2.x - p1.x;
  const dy = p2.y - p1.y;
  return Math.sqrt(dx ** 2 + dy ** 2);
}

/**
 * @type {Point}
 */
const originPoint = { x: 0, y: 0 };

console.log(distance(originPoint, { x: 3, y: 4 }));

In this example:

@typedef {Object} Point: Defines a Point type as an object with x and y properties, both numbers.
@param {Point} p1: Uses the Point type to specify the type of the p1 parameter.
@param {Point} p2: Uses the Point type to specify the type of the p2 parameter.
@type {Point}: Annotates the originPoint constant with the Point type.

Generating `.d.ts` Files

The real power of JSDoc types comes when you generate TypeScript declaration files (.d.ts). The TypeScript compiler (tsc) can parse your JSDoc comments and create these files for you. This means you get type-checking and code completion in your IDE, even while writing plain JavaScript!

Here's the basic tsconfig.json configuration:


{
  "compilerOptions": {
    "target": "es2020",
    "module": "commonjs",
    "outDir": "./dist",
    "declaration": true,
    "allowJs": true,
    "emitDeclarationOnly": false, // Set to true to ONLY emit .d.ts files
    "esModuleInterop": true
  },
  "include": ["./src/**/*.js"],
  "exclude": ["node_modules"]
}

Then, run npx tsc (or tsc if installed globally) in your project directory. This will generate the .d.ts files in your outDir (./dist in this example). Below you can see the declaration file tsc generates for you

The Best of Both Worlds

JSDoc with type generation provides a fantastic middle ground. You can enjoy the benefits of type safety and improved documentation without the full overhead of TypeScript. It's a great option for projects where a complete TypeScript migration isn't feasible or necessary, allowing you to gradually introduce types and improve your code quality over time.

So, next time you're thinking about adding types to your JavaScript, don't immediately jump to a full TypeScript conversion. Consider JSDoc – it might be exactly what you need.

And as always
Happy Coding 🧑🏻‍💻

Effortlessly Generate Professional Videos with AI-Powered Clip-Creator CLI

Jerry Satpathy — Sat, 01 Feb 2025 05:18:17 +0000

In today's digital age, video content is king. Whether you're a content creator, marketer, educator, or social media enthusiast, producing high-quality videos that engage and captivate your audience is crucial. However, the process of creating these videos can often be time-consuming and complex. Enter Clip-Creator CLI - a groundbreaking command-line interface tool that leverages the power of AI to simplify and revolutionize video creation.

Creating high-quality video content has never been easier and cheaper, thanks to the innovative Clip-Creator CLI. This open-source command-line tool leverages the power of LLMs to generate engaging video clips, complete with audio and scripts, in just a few simple steps. Whether you are a content creator, marketer, or educator, Clip-Creator CLI is here to transform your video production process.

Why Use Clip-Creator CLI?

In a world where video content reigns supreme, standing out requires both quality and efficiency. Clip-Creator CLI provides:

AI-Powered Script Generation: Let advanced AI models handle the scriptwriting, ensuring engaging and relevant content.
Automated Video Creation: Customize video parameters to suit your needs, from duration to content category.
Diverse Content Categories and Tones: Match your video’s style and message with a wide range of categories and tones.
High-Quality Audio: Enhance your videos with premium audio tracks sourced from FreeSound.
High-Definition Visuals: Access a vast library of stunning visuals from Pexels to make your content visually appealing.
Fact-Checking Support: Keep your content accurate and trustworthy with built-in fact-checking features.
User-Friendly Web Interface: Seamlessly navigate through the video creation process with an intuitive web UI.

How Clip-Creator CLI Can Automate Your Social Media Video Generation

Clip-Creator CLI isn't just about creating standalone videos; it can be integrated with other services to automate your social media video generation process. Here are some ways to get the most out of it:

Text-to-Speech (TTS) Services: Integrate with TTS APIs to automatically add realistic voiceovers to your videos. Whether it's a tutorial or a marketing video, TTS can bring your scripts to life.
Social Media APIs: Use APIs to automatically post your videos to social media platforms. Schedule posts, track engagement, and streamline your social media strategy without lifting a finger.

Free and Efficient Content Creation

One of the best things about Clip-Creator CLI is that you can generate videos for free using Pexels and FreeSound APIs. As long as you respect the rate limits of these services, you can access a wealth of high-quality visuals and audio tracks without any cost. Additionally, leveraging large language models (LLMs) within the usage limits allows you to keep the content creation process efficient and cost-effective.

Total Video Creation Capacity

On average, you can create approximately 1600-10,000 videos per month for free using Clip-Creator CLI. This estimate assumes balanced usage across all APIs and adherence to their respective rate limits.

Unleash your creativity and start producing a substantial volume of high-quality videos effortlessly!

Getting Started

To start creating amazing video content with Clip-Creator CLI, follow these simple steps:

Install Clip-Creator CLI:
Install the package using npm or yarn or npx

npm install -g clip-creator
#or 
yarn add global clip-creator 
#or 
npx clip-creator [command]

Configure Your API Keys:
To get started, create a configuration file containing your API keys along with any other default or advanced configurations you wish to pass to the package. This ensures that the video creation process is seamless and tailored to your needs.

{
  "freeSoundApiKey": "your-key",
  "groqApiKey": "your-key",
  "pexelsApiKey": "your-key"
}

Generate Your First Video Clip:
Customize your video creation by specifying parameters that suit your requirements. Use the configuration file you created to streamline the process, or you can pass the configuration interactively via the CLI

clip-creator create --category "Educational" --tone "Professional" --topic "Rise of AI" --duration 30 --config /path/to/config.json

Tip: Remember, the order of precedence is: Command Line Interface (CLI) -> Config File -> Interactive Prompt. This means that any parameters specified in the CLI will override those in the config file, and those in the config file will override interactive prompts.

Interactive Configuration
If you prefer not to create a configuration file or pass parameters via the CLI, you can directly run the clip-creator create command to interactively input all necessary configurations. This mode will prompt you for each required detail, ensuring a smooth and guided setup process.

Simply run:

clip-creator create

This command will walk you through setting up your video creation parameters interactively, making it convenient for users who prefer a hands-on approach without pre-setting configurations.

Launch the Web Interface

To start the web interface and enjoy a user-friendly experience, follow these steps:

Start the Web Interface:
Run the following command to launch the web interface:

clip-creator web --port 3003

Open Your Browser:
After starting the web interface, open your web browser and navigate to:
http://localhost:3003/index.html

This will bring up the web-based UI, where you can visualize and manage your video creation process seamlessly. The web interface provides a clean and intuitive environment, allowing you to see the output and make any necessary adjustments interactively.

Get Involved

We invite the community to contribute, improve, and use Clip-Creator CLI. It’s open-source and available under the MIT license. For professional inquiries or to hire the author, visit my LinkedIn.

Conclusion

Clip-Creator CLI is your go-to tool for creating professional-grade videos with minimal effort. Leveraging AI and seamless integration with top content sources, it has never been easier to produce stunning videos. Get started with Clip-Creator CLI today and elevate your content creation to new heights!

Introducing Markdown Parser React v2.0.0: Your Go-To Markdown Rendering Solution

Jerry Satpathy — Mon, 20 Jan 2025 11:01:40 +0000

If you've ever worked with Markdown in a React or a Next.js application, you know how important it is to have a robust and customizable parser. That’s why, I’m thrilled to introduce the newest version of Markdown Parser React—a feature-rich, easy-to-use, and highly customizable React component for rendering Markdown content in your applications.

Why Markdown Parser React? 🤔

Whether you’re building a blog, a documentation platform, or an interactive dashboard, Markdown Parser React offers everything you need:

Full Markdown Support: From headers and links to tables and code blocks.
Customizable Styling: Tailor the look and feel to match your brand or project theme.
Accessibility: Designed with ARIA attributes for better screen reader support.
Extended Features: Task lists, definition lists, syntax highlighting, math equations, and more!
Inline and Block Rendering: Handle both inline Markdown (e.g., bold text, math equation, underlined text) and block elements (e.g., tables and lists).
Lightweight and Fast: Optimized for performance to keep your app snappy.

Getting Started 📦

You can install Markdown Parser React in your project using npm, yarn, or pnpm:

npm install markdown-parser-react

# or

yarn add markdown-parser-react

# or

pnpm add markdown-parser-react

Basic Usage 🛠️

Rendering Markdown content is as easy as this:


import Markdown from "markdown-parser-react";

function App() {
  return <Markdown content="# Hello World
This is **Markdown**!" />;
}

export default App;

Advanced Features 🔥

Markdown Parser React shines when you want to customize your Markdown rendering. Here’s how you can configure it:


import Markdown from "markdown-parser-react";

function BlogPost() {
  const markdownContent = `
# Welcome to My Blog  

This is a _formatted_ paragraph with a [link](https://example.com).

- [x] Task 1
- [ ] Task 2

\`\`\`javascript
console.log("Hello, Markdown!");
\`\`\`

| Column 1 | Column 2 |
|----------|----------|
| Cell 1   | Cell 2   |
`;

  return (
    <Markdown
      content={markdownContent}
      options={{
        customClasses: {
          headings: "blog-heading",
          paragraphs: "blog-paragraph",
        },
        customStyles: {
          headings: { color: "#2c3e50", fontFamily: "Georgia, serif" },
        },
        linkTarget: "_blank",
        sanitizeHtml: true,
        maxNestingLevel: 4,
      }}
      className="blog-content"
    />
  );
}

Features Highlight:

Custom CSS Classes: Assign specific CSS classes to headings, paragraphs, and more.
Custom CSS Styles: Assign specific styles to headings, paragraphs, and more.
Safe HTML Rendering: Protects your app from potential security threats.
Accessible by Default: Includes ARIA labels for better UX.

Built for Modern Frameworks 🏗️

If you’re using Next.js, avoid server-client rendering mismatches by dynamically importing the Markdown component:


import dynamic from "next/dynamic";

const Markdown = dynamic(() => import("markdown-parser-react"), { ssr: false });

function MyPage({ content }) {
  return <Markdown content={content} />;
}

Who Should Use Markdown Parser React? 🌟

Developers building blogs or documentation sites.
Content creators who need Markdown support in their React projects.
Teams, requiring a secure and accessible Markdown rendering solution.

Join the Community

Markdown Parser React is open-source and MIT-licensed. If you find it useful, consider giving it a ⭐️ on Github. Contributions and feedback are always welcome!

Try It Out Today!

Don’t miss out on making your Markdown content shine in React. Install Markdown Parser React today and supercharge your projects.

What feature are you most excited about? Let me know in the comments or share your thoughts on GitHub!

Happy Coding 🧑🏻‍💻

How “Silicon Valley” Inspired Me to Create a Photo Compressor CLI for Web Developers

Jerry Satpathy — Wed, 15 Jan 2025 11:56:21 +0000

Hey there! So I was binging the famous HBO TV series Silicon Valley and got inspired to build something related to compression. And here's a thought – have you ever struggled with optimizing images for your website or project? If so, After hacking around for half a day I've got something exciting: photo-compressor. It's a command-line tool designed to compress and convert images to the super-light .webp format seamlessly.

This tool is powered by Sharp, which makes it fast and reliable. It helps you optimize media like a pro. Whether you’re working with local files or cloud-hosted images, photo-compressor has your back. I understand it's just a wrapper around sharp but we will be adding features and further optimization down the line

Why Use photo-compressor?

Here’s why you’ll love it:

Optimize Local Images: Compress images in a local directory effortlessly.
Optimize Cloud Images: Process images directly from URLs or even a directory of image URLs.
No Naming Headaches: It’ll automatically handle file name conflicts for you.
Detailed Logs: Get insights on savings and processing time.

Installation: Get Started in No Time

Installing photo-compressor is a breeze. Choose your favourite package manager:

npm install -g photo-compressor

Or, if you’re a Yarn fan:

yarn global add photo-compressor

Don’t want to install anything globally? No problem! Run it directly using npx:

npx photo-compressor

How to Use It: Commands and Options

Using photo-compressor is straightforward. Here’s the rundown of its commands and options.

Common Options

-h, --help: Display help information.
-V, --version: Check the current version of the package.

Commands

1. Optimize Local Images

Easily compress images from a local directory:

photo-compressor local --dir <path_to_directory> --output <path_to_output_directory>

Options:

-d, --dir <path>: Directory to scan for images (required).
-o, --output <path>: Output directory for optimized images (default: ./optimized).

2. Optimize Cloud Images

Do you have images hosted online? Compress them like this:

photo-compressor cloud --url <image_url_OR_array_of_images> --output <path_to_output_directory>

Options:

-u, --url <url>: URL of the image or an array of image URLs (required).
-o, --output <path>: Output directory for optimized images (default: ./optimized).

Real-World Examples

Here are some practical examples to get you started:

Optimize Local Images

photo-compressor local --dir ./images --output ./optimized

Optimize Cloud Images

photo-compressor cloud --url ['https://example.com/image1.jpg', 'https://example.com/image2.jpg'] --output ./optimized

A Quick Backstory

Why did I create this tool? Honestly, I was binge-watching Silicon Valley and got inspired to build something related to compression. It turns out, it’s a neat solution for web developers who need to quickly optimize images for better web performance. (P.S. I’m still a noob, so feedback is always welcome!)

Join the Fun

The development community is all about collaboration. If you’ve got ideas to improve this tool or find any bugs, head over to our GitHub repository and contribute!

Happy Coding! Let me know in the comments what you think about the package.

Themeify: A Simple Tool to Beautify Your React and Next.js Projects

Jerry Satpathy — Wed, 08 Jan 2025 14:23:04 +0000

Are you tired of spending endless hours tweaking fonts and colour palettes for your React and Next.js projects? Meet Themeify, your new best friend for effortlessly applying stunning themes!

What’s Themeify All About?

Themeify is a simple CLI tool designed to help you quickly apply custom fonts and colour palettes to your projects. With support for popular UI frameworks like MUI, Tailwind, ShadCN, and Bootstrap, you’ll never have to worry about manually setting up your themes again.

Why Themeify?

We know how tedious it can be to get your UI just right. Themeify takes away the hassle, letting you focus more on building awesome features and less on fiddly design tweaks. It’s perfect for those who want a cohesive, professional-looking interface without the fuss.

Key Features

Apply Themes: Easily apply predefined or custom themes.
Preview Themes: Get a sneak peek of your themes with specified colour palettes.
List Palettes and Themes: Quickly see all available options.
Cleanup: Keep your project neat by removing generated files.

Getting Started

Installation is a breeze! Just use npm, yarn, or npx:

Using npm

npm install -g themeify

Using yarn

yarn global add themeify

Using npx (no installation required)

npx themeify

How to Use Themeify

Applying a theme is as simple as running a command. Here’s an example of applying a custom theme to a React project using Tailwind CSS:

themeify apply --path ./my-react-app --framework Tailwind --theme vibrantPastel --palette vibrant --font Poppins

Or if you’re like me and prefer a guided setup, just run the:

themeify apply

You’ll get a series of prompts to help you choose the right framework, theme, palette, and font. Easy peasy!

Why We Built Themeify

We created Themeify to make the lives of developers easier. We understand the struggle of making a UI look perfect and how much time it can consume. With Themeify, you can achieve a polished look in minutes, freeing up your time to work on what matters — building great features.

Join the Community

We’d love for you to join the Themeify community! If you have any issues, or suggestions, or just want to say hi, head over to our GitHub Issues page. Your feedback is super valuable to us.

Contribute to Themeify

If you’re interested in contributing, we welcome you with open arms! Check out our Pull Request guidelines and join us in making Themeify even better.

Let’s Connect

If you like what I’m doing and want to collaborate or have any projects in mind, feel free to reach out! You can find me on LinkedIn.

License

This project is licensed under the MIT License. See the LICENSE file for more details.

We hope you find Themeify as useful as we do. Happy theming, and more importantly Happy Coding!

Introducing Vocalize.ts: Simplify Voice Interaction in Your Web Application

Jerry Satpathy — Wed, 21 Aug 2024 16:55:23 +0000

In today's world, voice interaction is becoming an increasingly important part of user experience. From virtual assistants to voice-activated devices, the ability to interact with technology through speech is not just a luxury—it's becoming an expectation. However, implementing voice recognition and text-to-speech (TTS) features in web applications can be complex and time-consuming. That's where Vocalize.ts comes in.

What is Vocalize.ts?

Vocalize.ts is a lightweight TypeScript library designed to make it easier than ever to integrate speech recognition and synthesis into your web applications. Whether you want to add simple voice commands to control your app or create a fully interactive voice-driven interface, Vocalize.ts provides the tools you need with minimal setup.

Why Vocalize.ts?
When I started working on Vocalize.ts, I noticed that while there were plenty of libraries for voice interaction, most were either too complex, heavy, or lacked proper documentation. My goal with Vocalize.ts was to create a library that is easy to use, well-documented, and optimized for modern web development practices.

Here are some of the key benefits:

Ease of Use: Vocalize.ts is designed with simplicity in mind. With just a few lines of code, you can set up voice commands and start recognizing user input.
Customizable TTS: The library allows you to customize the text-to-speech output for each command, providing options for volume, rate, pitch, and even voice selection.
Preset Moods: With Vocalize.ts, you can easily set the tone of your app’s responses by using predefined mood settings like happy, calm, sad, angry, surprised, and neutral. These moods adjust the TTS settings automatically to match the desired emotional tone.
Lightweight: Built with microbundle, Vocalize.ts is optimized for performance and small bundle sizes, making it a perfect fit for modern web applications.
Cross-Browser Compatibility: Vocalize.ts leverages the Web Speech API, ensuring compatibility across all modern browsers that support speech recognition and synthesis.

How Does It Work?

Vocalize.ts abstracts the complexities of the Web Speech API, allowing you to focus on building your application rather than dealing with the nuances of voice recognition and synthesis. Here’s a quick example to show how easy it is to get started:


import { Vocalize } from "vocalize.ts";

// Initialize Vocalize with default options
const vocalize = new Vocalize({
  recognitionOptions: {
    lang: "en-US",
    continuous: false,
    interimResults: false,
  },
  ttsOptions: {
    volume: 1,
    rate: 1,
    pitch: 1,
  },
  presetMood: "happy",
  onCommandRecognized: (phrase) => {
    console.log(`Command recognized: ${phrase}`);
  },
  onCommandUnrecognized: (phrase) => {
    console.log(`Command not recognized: ${phrase}`);
  },
  onError: (error) => {
    console.error(`Speech recognition error: ${error.message}`);
  },
});

// Register a command
vocalize.registerCommands([
  {
    phrase: "hello world",
    action: () => ({
      speak: true,
      text: "Hello, world!",
      options: { mood: "happy" },
    }),
  },
]);

// Start listening for commands
vocalize.startListening();

In this example, when the user says "hello world," the application responds with a cheerful greeting, thanks to the happy mood setting.

Use Cases for Vocalize.ts

Voice-Activated Interfaces: Create hands-free interfaces for users with accessibility needs or for scenarios where touch or keyboard interaction isn't practical.
Interactive Tutorials: Guide users through your application with voice commands and responses, making tutorials more engaging and interactive.
Smart Home Applications: Integrate Vocalize.ts into your web-based smart home dashboard to control devices through voice commands.
Educational Tools: Build educational apps that interact with users using voice, making learning more immersive and effective.

Getting Started with Vocalize.ts

Ready to add voice interaction to your web app? Getting started is easy. Simply install Vocalize.ts via npm or yarn:

npm install vocalize.ts

yarn add vocalize.ts

For detailed documentation, examples, and more, check out the Vocalize.ts GitHub repository.

Contributing to Vocalize.ts

Vocalize.ts is an open-source project, and contributions are welcome! Whether you have ideas for new features, want to improve the documentation, or want to report a bug, your input is valuable. Head over to the GitHub repo to get involved.

Voice interaction is the future, and with Vocalize.ts, adding this capability to your web applications has never been easier. Whether you're building the next big voice-activated app or want to add some cool voice features to your existing project, Vocalize.ts is here to help.

Try it out today, and bring your web applications to life with voice!

Server-Side Rendering: A Comprehensive Guide for Modern Web Developers

Jerry Satpathy — Mon, 24 Apr 2023 12:03:32 +0000

As web developers, we always strive to create fast, efficient, and user-friendly websites.

One essential aspect of delivering a great user experience is ensuring that our content loads quickly and efficiently. Server-side rendering (SSR) is a technique that can help us achieve this goal. In this article, we will discuss the basics of server-side rendering, its benefits, and how to implement it in various popular web development frameworks.

What is Server-Side Rendering?

Server-side rendering is the process of generating the final HTML on the server and sending it to the client's browser. With SSR, the server pre-renders the content into HTML and then sends it to the browser, which only has to display the pre-rendered content.

This approach contrasts with client-side rendering (CSR), where the browser receives an empty or minimal HTML shell and uses JavaScript to fetch and display the content. While CSR offers some benefits, such as faster subsequent page loads, it can also lead to slow initial loading times and negatively impact SEO.

Benefits of Server-Side Rendering

Improved performance: Since the browser receives pre-rendered HTML from the server, it can start displaying the content almost immediately. This leads to faster initial page load times and a better user experience.

Better SEO: Web crawlers like Googlebot can have difficulty indexing websites that rely heavily on client-side rendering. With SSR, search engines can easily crawl and index your content, leading to better search rankings.

Enhanced social sharing: When a user shares a link to your website on social media platforms, these platforms often fetch the content and display a preview. SSR makes it easier for these platforms to fetch the required information and create a visually appealing preview.

Implementing Server-Side Rendering

Now that we understand the benefits of server-side rendering, let's explore how to implement it in some popular web development frameworks:

React
To implement SSR in a React application, you can use the popular Next.js framework. Next.js is a powerful, production-ready framework that allows you to create server-rendered React applications easily. It provides a built-in development server, automatic code splitting, and static site generation capabilities.

To get started with Next.js, you can follow the official Getting Started guide.

Vue.js
For server-side rendering with Vue.js, you can use the Nuxt.js framework. Nuxt.js is a versatile framework that offers various features, such as automatic code splitting, static site generation, and a development server with hot module replacement.

To start using Nuxt.js, check out the official Getting Started guide.

Angular
Angular Universal is the official solution for server-side rendering in Angular applications. It allows you to pre-render your Angular application on the server and includes support for both Node.js and .NET Core.

To implement SSR in an Angular app, follow the official Angular Universal guide.

Conclusion

Server-side rendering is an essential technique for modern web developers, as it helps improve performance, search engine optimisation, and social sharing capabilities. By leveraging popular frameworks such as Next.js, Nuxt.js, and Angular Universal, you can quickly and easily implement server-side rendering in your applications.

So, take the time to explore these frameworks and give your users the fast and efficient browsing experience they deserve!

Happy coding!🧑🏽‍💻

DEV Community: Jerry Satpathy

Your React App Breaks When the Internet Drops. Here’s a Better Way.

What It Does

What’s New in v2.0.0

1. Rewritten Build System (Microbundle → Tsup)

2. Multiple Layout Variants

3. Native Dark Mode Support

4. Reconnect State Handling

5. ASCII or SVG Icons

6. CSS Modules Instead of Inline Styles

Installation

Basic Usage

Custom Configuration Example

Configuration Props

Technical Summary

Links

Final Thoughts

Making Your Website Talk (Without Scaring Your Users)

The Stack

1. The "Brains": Fetching & Summarising

2. The "Voice": Meet SpeechSynthesis

The useSpeech Hook

3. The Dashboard Component

Pro-Tips for the Speech API

Why bother?

The Day My Linux Server Started Distributing Windows Malware

1. SSH: Make Logging In Aggressively Boring

2. Keys & Secret Rotation is Hygiene, Not Panic

3. The Local Firewall: Trust but Verify

4. Fail2ban: Outsource the Annoyance

5. Audit Your Services

6. The Post-Moment Forensic Routine

7. Recovery: The "Burn It Down" Philosophy

8. Predictability Beats Fancy Tools

9. File Hygiene: Stop the Clutter

10. Backups: The Disaster Circuit-Breaker

How I Built a Google Maps Scraper to Generate Leads for My New Agency (And Why I Open-Sourced It)

The Struggle Every New Agency Knows

From Internal Hack → Lead Machine

Why I Decided to Open-Source It

What the Tool Can Do

How to Use It

Installation

CLI Usage

💻 Library Usage (Node.js)

Example Output

Real Talk: Google Maps Can Break Your Selectors

Old selector:

Updated selector:

Who Should Use This?

What's Coming Next

Final Thoughts

And as always, Happy Coding 🧑🏻‍💻

How to Use the CSS aspect-ratio Property for Responsive Layouts

What is aspect-ratio?

Why is aspect-ratio Useful?

How Does It Actually Work?

Real-World Applications

Combining with Other CSS Properties

Browser Support

A Quick Analogy

Closing Thoughts

JSDoc: Your Secret Weapon for Adding Types to JavaScript (Without the Full TypeScript Overhaul)

The Power of JSDoc

Why JSDoc Might Be Right for You

Defining Types with @typedef and @type

Generating .d.ts Files

The Best of Both Worlds

Effortlessly Generate Professional Videos with AI-Powered Clip-Creator CLI

Why Use Clip-Creator CLI?

How Clip-Creator CLI Can Automate Your Social Media Video Generation

Free and Efficient Content Creation

Total Video Creation Capacity

Getting Started

Launch the Web Interface

Get Involved

Conclusion

Introducing Markdown Parser React v2.0.0: Your Go-To Markdown Rendering Solution

Why Markdown Parser React? 🤔

Getting Started 📦

The `useSpeech` Hook

Defining Types with `@typedef` and `@type`

Generating `.d.ts` Files