DEV Community: Jerry Satpathy

Government Websites Don't Have to Look Like They're Stuck in 2010

Jerry Satpathy — Sun, 31 May 2026 12:56:22 +0000

This afternoon, I took on a personal redesign challenge: reimagining a government tender portal using modern web design principles.

The goal wasn't to criticise the existing platform. Government systems often prioritise functionality, compliance, and long-term stability. However, many public-facing portals still struggle with usability, discoverability, and visual clarity.

So I asked a simple question:

What if a government procurement platform were designed with the same care as modern SaaS products?

The Approach

Instead of treating the portal like an administrative dashboard, I redesigned it as a discovery-first experience.

The new interface focuses on:

Clear visual hierarchy
Faster access to opportunities
Mobile-friendly navigation
Modern search and filtering experiences
Improved accessibility and readability
Trust-building through transparency and data visualisation

And out came this

Key Changes

Reimagined Hero Section

The homepage now focuses on helping users discover opportunities rather than overwhelming them with navigation and dense information.

Modern Analytics Dashboard

Procurement activity, tender trends, and vendor participation are presented through clean data visualisations instead of traditional tables.

Opportunity-Centric Design

Featured tenders and procurement categories are showcased using modern card layouts that make important information easier to scan and understand.

Consistent Design System

Every section follows the same visual language, spacing system, typography scale, and component patterns to create a more cohesive experience.

The Tech Stack

The redesign was built using:

Next.js
TypeScript
Tailwind CSS
Recharts
Lucide Icons

Why This Matters

Digital public infrastructure impacts millions of people.

When government websites are easier to use, citizens spend less time searching for information, vendors can participate more easily in procurement processes, and organisations benefit from increased transparency and engagement.

Modern UX isn't just about aesthetics. It's about reducing friction.

Final Thoughts

This project is a concept redesign exploring how public-sector digital experiences can evolve using modern design and development practices.

Government websites don't need to look flashy.

They need to be clear, accessible, trustworthy, and pleasant to use.

And with today's tools and design systems, that's more achievable than ever.

Check out the demo!

And as always, Happy Coding & Designing!

Designed and developed as a concept by Code Media Labs.

I Built an AI-Powered Interview Simulator That Runs Entirely in Your Terminal

Jerry Satpathy — Fri, 29 May 2026 15:59:55 +0000

Interview prep is mostly passive.

You read through question lists, watch videos, or practice with a friend if you can find one. None of it feels particularly real.

So I built Interview Coach, a CLI tool that runs mock interviews, scores your answers, and gives you a breakdown of what you did well and where you fell short.

How it works

interview-coach start

Pick a role, an experience level, and how many questions you want. The interview starts immediately.

★ Question 1/5

Category: React
Difficulty: Medium

How would you optimise a React application experiencing unnecessary re-renders?

After each answer, you get:

A score
A verdict
Specific feedback
What a strong answer would have looked like

At the end, a full session report is generated.

It's not just for developers

The questions adapt to the role you choose. A few examples:

Content Writer — How would you rewrite a technical article for a non-technical audience?

Sales Executive — A prospect says your product is too expensive. How would you respond?

Teacher — How would you explain a difficult concept to students with different learning styles?

Same tool, any profession.

Under the hood

The stack is intentionally small: Node.js, Commander, Inquirer, Groq, Zod, Chalk, Ora, Boxen, Webpack.

Sessions are saved locally, so you can review past reports and track how you're improving over time. Nothing leaves your machine except the requests to generate questions and evaluate answers.

Try it

npm install -g interview-coach

npx interview-coach

Feedback, bug reports, and contributions are welcome.
And as always, happy coding!

I Reimagined the Cuttack Municipal Corporation Website with Next.js, Tailwind & Recharts

Jerry Satpathy — Thu, 28 May 2026 07:58:45 +0000

Redesigning a Municipal Website: CMC Cuttack

Government websites are some of the most important digital products people use. People rely on them for taxes, certificates, complaints, licenses, public notices, and emergency information.

But many municipal portals across India still feel stuck in the early 2010s, with cluttered layouts, poor mobile usability, overwhelming menus, low accessibility, and information overload.

So I decided to redesign one.

The Existing Website

I picked the official Cuttack Municipal Corporation website: cmccuttack.odisha.gov.in

CMC already offers several important citizen services, including property tax, trade license, grievance redressal, water and sewerage, tenders and notices. The functionality exists. But the overall experience still feels information-heavy, visually dense, and inconsistent on mobile, especially for non-technical users.

And honestly, this is not just a Cuttack problem. Most government websites across India still prioritise listing information over designing usable digital experiences.

The Goal

The idea was simple:

What if a municipal website felt more like a civic operating system instead of a static government portal?

I wanted it to feel alive, responsive, transparent, and approachable, with modern layouts, a citizen-first hierarchy, and real-time data visibility. Instead of treating the site like a document archive, I wanted it to feel like a living platform.

You can explore the live demo here: codemedialabs.in/demo/cmc

Tech Stack

The concept is built with:

Next.js — for the app framework and routing
Tailwind CSS — for the utility-first styling system
Lucide React — for the icon set throughout the UI
Recharts — for all the data visualisation components

The goal was to keep the frontend lightweight, scalable, and production-ready, with a heavy focus on spacing systems, typography hierarchy, responsive behaviour, and accessibility-friendly layouts.

Design Direction

One thing I was careful about: not making this feel like a crypto dashboard, an admin panel template, or a startup SaaS clone. Government platforms need a different visual language. They should feel trustworthy, calm, readable, and authoritative.

So the direction became: Apple-inspired minimalism + smart city dashboards + civic accessibility.

The UI uses large typography, clean spacing, modular cards, muted gradients, and structured information blocks — without becoming visually overwhelming.

What I Built

Navbar

The navigation is sticky with a clean white backdrop and subtle blur. On desktop, it shows links for Services, Ward Info, Tenders, Dashboard, and About, alongside Sign In and Pay Online CTAs. On mobile, it collapses into a smooth CSS-animated drawer that locks scroll and closes on outside click.

Hero Section

The original CMC portal immediately overwhelms users with dense navigation and competing content. The redesigned hero focuses on three things:

A search bar — the primary action. Large, prominent, with a blue search button, and popular service tags below it (Property Tax, Trade License, Water Bill, Building Approval), so users don't have to think.

A Quick Actions card — a dark blue panel on the right with six instant-access buttons: Property Tax, Register Complaint, Water Bill, Trade License, Track Application, and Certificates. Each has an icon and lifts slightly on hover.

A stats strip — anchored below the hero fold, spanning four key numbers: 2.67L+ Citizens Served, 12,458 Complaints Resolved, 95% Water Coverage, and 312 MT Waste Collected Today. Small but impactful — it immediately communicates scale and activity.

Citizen Services

Four service cards arranged in a responsive grid:

Property Tax — pay online quickly and securely
Grievance Redressal — register and track civic complaints with real-time updates
Water & Sewerage — apply for new connections and manage utility bills
Building Approval — submit and track building plan approval requests

Each card has a colour-coded icon, a description, and an "Explore Service" link that animates on hover. Clean, scannable, no clutter.

Dashboard Preview

This section does two things in a split layout:

Civic Performance chart — a Recharts area chart showing service efficiency across six dimensions: Sanitation, Water, Transport, Emergency, Waste Management, and Citizen Services. It has a "LIVE" badge and a styled tooltip with a glossy card. The gradient fill under the line gives it a premium feel.

Notices & Updates panel — a dark blue card with the three most recent notices, each tagged by type (NOTICE, TENDER, NEWS) with colour-coded badges and dates. A "View All" link sits at the top.

Know Your Ward + City Highlight

A two-column section with two very different jobs:

Know Your Ward — a dark blue card with a search input for ward number or property ID. Below it are four quick-access buttons: Ward Councillor, Garbage Schedule, Water Supply, and Flood Alerts. This is the hyperlocal civic layer that most government sites completely miss — especially relevant for Cuttack during monsoon seasons and waterlogging situations.

Cuttack — The Silver City — an immersive photo panel with a gradient overlay, showcasing the city's identity. The copy leans into Cuttack's 1000-year heritage, silver filigree craftsmanship, and the Mahanadi river. Four identity tags: Millennium City, Silver Filigree, Mahanadi River, Smart City. Two CTAs: Explore Cuttack and City Dashboard.

Governance Intelligence

A full section built around making civic operations visible.

Four KPI cards at the top:

Avg Response Time: 2.4 hrs (down 18%)
Ward Satisfaction: 91% (up 6%)
Digital Applications: 18.2K (up 22%)
Infrastructure Health: 88% (up 9%)

Ward Analytics — a Recharts RadarChart comparing five wards (W-12, W-18, W-24, W-31, W-42) across three dimensions: Sanitation, Water supply, and Grievance resolution. It gives an immediate sense of which wards are performing and which need attention.

Infrastructure Monitoring — a dark card with five animated progress bars showing active status for Street Lights (94%), Water Pumps (88%), Drain Sensors (72%), Traffic Signals (91%), and CCTV Network (86%). Below that, three stat blocks: 128 Flood Sensors, 42 Air Quality Nodes, 67 Smart Signals.

Live City Monitoring

This was the most technically interesting part of the project.

A live SVG map of Cuttack with ten ward nodes plotted across a grid background with a stylised Mahanadi river path. Each ward is colour-coded by risk level — green for Normal, amber for Watch, red for Critical — with a halo effect around each node. Hovering a ward shows a tooltip with its drainage percentage, traffic load, and flood risk.

Above the map, five metric cards update every 2.2 seconds with randomised values simulating live telemetry: Drainage Health, Flood Risk, Field Teams, Traffic Load, and New Complaints. The numbers fluctuate in realistic ranges, so the dashboard feels genuinely alive.

Below the map, ten ward cards display the static data for each area — Buxi Bazaar, Choudhury Bazaar, Ranihat, College Square, Mangalabag, CDA Sector 6, Badambadi, Jobra, Cantonment, and Nimpur — each with a pulsing dot in its risk colour.

Smart Civic Analytics

Three charts that transform raw data into transparency:

Grievance Resolution — a Recharts BarChart comparing resolved vs. pending complaints from January to May. Dark blue bars for resolved, light blue for pending. The trend is obvious at a glance: resolve rates are climbing, backlogs are shrinking.

Budget Allocation — a doughnut PieChart showing FY 2025–26 sectoral spending: Roads (35%), Water (25%), Sanitation (20%), Parks (10%), Health (10%). Simple and honest.

Water Supply Stability — a full-width dark blue LineChart spanning the whole week (Monday to Sunday), showing daily uptime percentages across all wards. Weekly average: 95.6%, shown in a floating stat card above the chart.

Leadership

Two profile cards for the Mayor (Shri Subhash Chandra Singh) and the Commissioner (Ms Kirandeep Kaur Sahota, IAS). Each has a photo, role badge, a short bio, and two stat blocks — Active Projects and Civic Drives for the Mayor; Smart Projects and Digital Services for the Commissioner. The cards have a subtle glow that expands on hover.

Footer

A full dark footer (#07152d) with a top CTA bar, a four-column grid (brand + stats, Quick Links, Important Links, Contact), and a bottom bar with copyright and legal links. The contact section shows the CMC address on Link Road, Cuttack, the 1800 345 6767 helpline, and cmc@cuttack.gov.in.

Design Challenges

Designing for Trust

This was the most interesting constraint. Civic platforms cannot feel gimmicky, startup-ish, or trend-chasing. The UI needs to balance authority, simplicity, and professionalism while still feeling modern. That balance is much harder than designing a typical SaaS dashboard — and it shaped almost every decision, from the navy palette to the conservative use of animation.

Balancing Information Density

Government websites contain large amounts of information by nature. The challenge is not removing it — it's structuring it properly: prioritising actions, improving discoverability, reducing cognitive load through spacing, grouping, and visual rhythm.

What This Tells Us

Government websites are public infrastructure. Bad UX in civic systems creates confusion, accessibility barriers, lower digital adoption, and reduced trust. When millions of citizens interact with a system, even small usability improvements matter enormously.

This redesign is an exploration of what that future could look like, a municipal platform that feels transparent, fast, mobile-friendly, and genuinely citizen-first.

Especially as more public services move online across India, this kind of design thinking deserves to be part of the conversation.

If you're working on a government platform, civic tech product, or any digital experience that needs to go beyond the template, we'd love to help build it. At Code Media Labs, we design and develop production-ready systems that are fast, accessible, and actually enjoyable to use. Whether you're starting from scratch or modernising something long overdue for a rethink, reach out at codemedialabs.inand let's build something worth using.

And as always, happy coding.

Built by Code Media Labs. Live demo: codemedialabs.in/demo/cmc

Announcing markdown-parser-react v3.0.0: A Complete Architectural Overhaul

Jerry Satpathy — Sun, 12 Apr 2026 07:57:51 +0000

Markdown is the backbone of the modern web—from documentation to personal blogs. But for too long, React developers have had to choose between "lightweight but insecure" or "robust but heavy."

Today, I’m thrilled to announce the launch of markdown-parser-react v3.0.0. This is a ground-up rewrite designed for the security-conscious, performance-driven developer.

Why an Overhaul?

The Core Reason was the Move to Token-Based Rendering
In previous versions, we relied on standard HTML rendering. In v3, we’ve moved entirely away from dangerouslySetInnerHTML.

The core of the library is now a Token-based React Renderer. Instead of generating a raw HTML string, we parse Markdown into an AST (Abstract Syntax Tree) and convert those tokens directly into React nodes using React.createElement.

What does this mean for you?

Security by Design: It is inherently protected against most XSS attacks because we aren't injecting raw strings into the DOM.

Performance: It integrates perfectly with the React Lifecycle and Virtual DOM, ensuring smoother updates and flawless hydration in SSR environments like Next.js.

The "Everything is a Component" Philosophy: Because every part of your markdown is now a React node, you can treat it like any other part of your app.

What’s New in v3?

1. Advanced Component Overrides (The Killer Feature)
This is where v3 truly shines. You can now swap any standard Markdown element for a custom React component.

Want to replace a standard <a> tag withnext/link for client-side navigation? Or maybe turn <h1> tags into beautifully styled Shadcn/UI headers? Now you can:

<Markdown 
  content={content} 
  options={{
    components: {
      h1: ({ children }) => <CustomHeader level={1}>{children}</CustomHeader>,
      a: (props) => <InternalLink {...props} />,
      code: ({ children, language }) => <MySyntaxHighlighter lang={language}>{children}</MySyntaxHighlighter>
    }
  }} 
/>

2. GitHub-Style Alerts & Native Footnotes
We’ve added native support for blockquote callouts ([!NOTE], [!TIP], etc.) and common markdown footnotes ([^1]). This makes the library perfect for academic writing, technical docs, or citation-heavy blogs.

3. Advanced Math (TeX/LaTeX)
Math is no longer an afterthought. With support for inline ($) and block ($$) equations, you can use the onRenderMath hook to integrate engines like KaTeX or MathJax effortlessly.

4. Semantic DX (Developer Experience)

WCAG Compliant: New asArticle, id, and aria props ensure your rendered content is accessible.
Strictly Typed: Full TypeScript support for a better IDE experience.
Secure Defaults: sanitizeHtml is now enabled by default.

The Vision: Code Media Labs

With v3, markdown-parser-react officially transitions under the Code Media Labs branding. Our mission is to build lightweight, high-performance tools that solve real-world problems for the modern web and open-source those tools for everyone to use.

This package is a core component of the ecosystem we are building. By making markdown rendering safe and extensible, we’re setting the stage for more complex systems.

What's Next?
Our focus at Code Media Labs is currently split between infrastructure and intelligence:

Synapse: Our upcoming "Intelligent Factory Operating System." We are applying the same high-performance standards used in this library to build a robust ERP platform for industrial environments.

Mira: Our internal intelligence engine.** Mira isn't just about sentiment analysis; it's a multimodal suite**. It combines high-speed demographic analytics with a custom TTS (Text-to-Speech) system built on top of Piper. Whether it's parsing public sentiment or giving that data a voice, Mira is designed for speed and privacy.

Get Started
If you’re looking for a markdown solution that doesn’t compromise on security or React-native features, give v3 a spin.

Install it now:

npm install markdown-parser-react

Check out the docs:
Markdown-Parser-React
I’d love to hear your feedback! Let’s build a better, safer web together. And as always, Happy Coding

Follow me for more updates on Next.js, TypeScript, and our journey at Code Media Labs.

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 🧑🏻‍💻

DEV Community: Jerry Satpathy

Government Websites Don't Have to Look Like They're Stuck in 2010

The Approach

Key Changes

Reimagined Hero Section

Modern Analytics Dashboard

Opportunity-Centric Design

Consistent Design System

The Tech Stack

Why This Matters

Final Thoughts

I Built an AI-Powered Interview Simulator That Runs Entirely in Your Terminal

How it works

It's not just for developers

Under the hood

Try it

I Reimagined the Cuttack Municipal Corporation Website with Next.js, Tailwind & Recharts

Redesigning a Municipal Website: CMC Cuttack

The Existing Website

The Goal

Tech Stack

Design Direction

What I Built

Navbar

Hero Section

Citizen Services

Dashboard Preview

Know Your Ward + City Highlight

Governance Intelligence

Live City Monitoring

Smart Civic Analytics

Leadership

Footer

Design Challenges

Designing for Trust

Balancing Information Density

What This Tells Us

Announcing markdown-parser-react v3.0.0: A Complete Architectural Overhaul

Why an Overhaul?

What does this mean for you?

What’s New in v3?

The Vision: Code Media Labs

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

The `useSpeech` Hook

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

Generating `.d.ts` Files