DEV Community: Jerry Satpathy

Building a Cricket Trivia Game Was Easy. Normalising 7,000+ Players Was Hard.

Jerry Satpathy — Sun, 21 Jun 2026 14:41:03 +0000

When I started building Stumped!, a cricketer guessing game, I thought the hard part would be coming up with clever clues.

I was wrong.

The real hard part was turning thousands of raw, ball-by-ball cricket scorecards into clean, human-readable player profiles.

Here is how a simple trivia game helped me learn more about normalising data.

The Dream vs. The Reality

I wanted to generate rich, dynamic clues for players, like:

"This batter scored 573 runs in the death overs at a strike rate of 135.8."

To do that, I turned to the amazing open datasets at Cricsheet. They provide incredible ball-by-ball archives. But there's a catch: raw match data and game-ready player profiles speak entirely different languages.

Cricsheet tells you what happened on delivery 4.2 of Match X. It does not tell you a player's career stats. Everything had to be derived from scratch.

1. Turning Matches into Careers

Step one was flipping the data architecture from match-centric to player-centric. I built a pipeline that ingests every single delivery and progressively updates a player’s lifetime accumulator object:

players[name] = {
    "matches": 0,
    "bat_runs": 0,
    "bat_balls": 0,
    "bowl_runs": 0,
    "bowl_wickets": 0,
    // ...you get the idea
}

Instead of querying a massive database of matches every time a user plays, we build the careers once beforehand.

2. The "Who TF is V Kohli?" Problem

Then came the initials. Cricket scorecards love abbreviations.

EJG Morgan

RG Sharma

V Kohli

Humans see "V Kohli" and know it's Virat. Computers see it and shrug. Worse, multiple players share the same initials.

I tried scraping external sports sites to map these messy strings to unique humans, but between rate limits, anti-bot shields, and wildly inconsistent formatting, the scrapers failed hard. Right now, I am back to the drawing board, trying to figure out how to reliably enrich these player profiles without losing my sanity.

(Pro tip: This is exactly why Stumped asks users to guess surnames. Surnames are way more reliable than ambiguous initials.)

3. Extracting the Spicy Stats

Basic career averages are boring trivia. To make the game fun, I needed to slice and dice the data into highly specific cricket archetypes:

Batting Phases: Grouping deliveries into Powerplays (overs 0–5), Middle (6–15), and Death (16–20) to find the clutch finishers.
The Psychology of the Chase: Tracking performance when setting a target vs. chasing one.
Nemesis vs Favourite Bowler: Who dismisses this batter the most? Who do they absolutely smash for fun? (Rule #1 of the pipeline: Your nemesis cannot also be your favourite victim. The logic got messy here, but it made the clues feel remarkably human.)
The Weird Stuff: Tracking golden ducks, diamond ducks, maiden overs, and dot-ball percentages.

4. Flattening the Monster

Deeply nested JSON objects are a pain to consume on the frontend. The final step of the pipeline takes all those complex, deep career structures and flattens them into a clean, single-level profile:

{
  "bat_runs": 2443,
  "bat_average": 29.08,
  "bat_strike_rate": 136.7,
  "fielding_catches": 47,
  "nemesis_bowler_name": "Hardik Pandya",
  "favorite_bowler_name": "Umar Gul"
}

Now, generating a clue is as simple as reading a single key-value pair.

Lesson Learned

Building the game took a fraction of the time it took to clean records and handle weird edge cases. Under the hood, a single clue represents thousands of rows of raw match data processed into something actually readable.
If I started this project again, I'd invest in the name normalisation layer first, before writing/generating a single line of stat-aggregation code.

We just launched the game! If you want to check out this and other fun side projects we’ve been hacking on, take a look at The Almanac Project or test your cricket trivia knowledge directly at Stumped!.

And as always Happy Coding!

The Ultimate Next.js Cheat Sheet for Beginners (2026 Edition)

Jerry Satpathy — Thu, 11 Jun 2026 09:25:29 +0000

If you're learning React in 2026, you've probably heard one piece of advice repeatedly:

"Use Next.js."

But when you first open a Next.js project, it can feel overwhelming:

What's the app folder?
Why are some components running on the server?
When should I use "use client"?
Do I still need API routes?

This guide answers those questions and gives you a practical cheat sheet you can bookmark and revisit whenever you're building a Next.js application.

What is Next.js?

Next.js is a React framework that helps you build fast, production-ready web applications.

It comes with:

File-based routing
Server-side rendering
Static site generation
API routes
Image optimization
SEO support
Server Components
Full-stack capabilities

Think of it as React + everything you need to build and deploy a modern application.

TL;DR: Next.js Cheat Sheet

Feature	What It Does	Example
Create App	Create a new Next.js project	`npx create-next-app@latest my-app`
Route	Create a page	`app/about/page.tsx` → `/about`
Dynamic Route	Create URL parameters	`app/blog/[slug]/page.tsx`
Layout	Shared UI between pages	`app/layout.tsx`
Server Component	Default component type	`async function Page()`
Client Component	Enables state & events	`"use client"`
Navigation	Link between pages	`<Link href="/about" />`
Router	Navigate programmatically	`router.push("/dashboard")`
Search Params	Read URL query values	`useSearchParams()`
Metadata	SEO configuration	`export const metadata = {}`
Data Fetching	Fetch server-side data	`await fetch(url)`
Revalidation	Refresh cached data	`revalidate: 3600`
No Cache	Always fetch fresh data	`cache: "no-store"`
Server Actions	Handle forms on the server	`"use server"`
Loading UI	Show loading states	`app/loading.tsx`
Error UI	Handle route errors	`app/error.tsx`
Not Found	Custom 404 page	`app/not-found.tsx`
API Route	Create backend endpoints	`app/api/users/route.ts`
Middleware	Run code before requests	`middleware.ts`
Images	Optimized image loading	`<Image />`
Fonts	Built-in font optimization	`next/font/google`
Environment Variables	Store secrets/config	`process.env`
Static Rendering	Pre-render pages	Default caching behavior
Dynamic Rendering	Render on every request	`cache: "no-store"`
Production Build	Create deployable build	`npm run build`
Deploy	Deploy instantly	Vercel, Docker, AWS, etc.

Golden Rule

Need...	Use
State (`useState`)	Client Component
Event Handlers	Client Component
Browser APIs	Client Component
Database Access	Server Component
API Calls	Server Component
Better SEO	Server Component
Smaller Bundle Size	Server Component
Form Submission	Server Action
Shared Navigation	Layout
Dynamic URLs	`[slug]` Routes

Folder Structure Cheat Sheet

app/
├── layout.tsx       # Shared layout
├── page.tsx         # Home page
├── loading.tsx      # Loading UI
├── error.tsx        # Error UI
├── not-found.tsx    # 404 page
├── api/
│   └── users/
│       └── route.ts
└── blog/
    └── [slug]/
        └── page.tsx

The 5 Things Every Beginner Should Memorise

Every folder becomes a route.
Components are Server Components by default.
Add "use client" only when needed.
Fetch data directly inside Server Components.
Use Server Actions for forms instead of creating unnecessary API routes.

1. Create a New Next.js Project

Create a project:

npx create-next-app@latest my-app

With TypeScript:

npx create-next-app@latest my-app --typescript

Move into the project:

cd my-app

Start the development server:

npm run dev

Visit:

http://localhost:3000

2. Understanding the App Router

Modern Next.js applications use the App Router.

A typical project looks like this:

app/
├── layout.tsx
├── page.tsx
├── loading.tsx
├── error.tsx
├── not-found.tsx
└── dashboard/
    └── page.tsx

Every folder becomes a route automatically.

For example:

app/page.tsx
→ /

app/about/page.tsx
→ /about

app/dashboard/page.tsx
→ /dashboard

No routing configuration needed.

3. Pages vs Layouts

A page represents a route.

export default function Page() {
  return <h1>Hello World</h1>;
}

A layout wraps multiple pages.

export default function Layout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <main>
      {children}
    </main>
  );
}

Layouts persist between page navigations, making them perfect for:

Navigation bars
Sidebars
Footers
Shared UI

4. Dynamic Routes

Need a blog post page?

Create:

app/blog/[slug]/page.tsx

Example URL:

/blog/nextjs-cheatsheet

Access the slug:

export default async function BlogPost({
  params,
}: {
  params: Promise<{ slug: string }>;
}) {
  const { slug } = await params;

  return <h1>{slug}</h1>;
}

5. Server Components (Default)

One of the biggest changes in modern Next.js is that components are Server Components by default.

Example:

export default async function Page() {
  const users = await fetch(
    "https://jsonplaceholder.typicode.com/users"
  ).then((res) => res.json());

  return <div>{users.length} users found</div>;
}

Benefits:

Smaller JavaScript bundles
Better performance
Better SEO
Secure access to databases and APIs

6. Client Components

Need state, event handlers, or browser APIs?

Use:

"use client";

Example:

"use client";

import { useState } from "react";

export default function Counter() {
  const [count, setCount] = useState(0);

  return (
    <button onClick={() => setCount(count + 1)}>
      Count: {count}
    </button>
  );
}

Use Client Components when you need:

useState
useEffect
Event handlers
Browser APIs
Custom hooks

Otherwise, stay with Server Components.

7. Navigation

Link between pages:

import Link from "next/link";

<Link href="/about">
  About
</Link>

Programmatic navigation:

"use client";

import { useRouter } from "next/navigation";

const router = useRouter();

router.push("/dashboard");
router.replace("/login");
router.back();

8. Search Parameters

URL:

/products?page=2

Read the value:

"use client";

import { useSearchParams } from "next/navigation";

const params = useSearchParams();

const page = params.get("page");

Result:

"2"

9. Metadata and SEO

Static metadata:

import type { Metadata } from "next";

export const metadata: Metadata = {
  title: "My Website",
  description: "Built with Next.js",
};

Dynamic metadata:

export async function generateMetadata() {
  return {
    title: "Blog Post",
  };
}

This automatically generates SEO-friendly meta tags.

10. Data Fetching

Simple fetch:

const data = await fetch(url);

Cache for one hour:

await fetch(url, {
  next: {
    revalidate: 3600,
  },
});

Always fetch fresh data:

await fetch(url, {
  cache: "no-store",
});

Next.js has built-in caching and revalidation, which helps improve performance.

11. Server Actions

Server Actions let you run server-side code directly from forms without creating API endpoints.

Create a Server Action:

"use server";

export async function createUser(
  formData: FormData
) {
  const name = formData.get("name");

  // save to database
}

Use it inside a form:

<form action={createUser}>
  <input name="name" />
  <button>Create User</button>
</form>

This is now the recommended approach for many form submissions in the App Router.

12. Loading States

Create:

app/loading.tsx

Example:

export default function Loading() {
  return <p>Loading...</p>;
}

Next.js automatically displays this while data is loading.

13. Error Handling

Create:

app/error.tsx

Example:

"use client";

export default function Error({
  error,
  reset,
}: {
  error: Error;
  reset: () => void;
}) {
  return (
    <button onClick={reset}>
      Try Again
    </button>
  );
}

14. API Routes

Need an API?

Create:

app/api/users/route.ts

GET example:

export async function GET() {
  return Response.json({
    success: true,
  });
}

POST example:

export async function POST(
  request: Request
) {
  const body = await request.json();

  return Response.json(body);
}

15. Image Optimization

Use the built-in Image component:

import Image from "next/image";

<Image
  src="/hero.jpg"
  alt="Hero"
  width={1200}
  height={600}
/>

Benefits:

Lazy loading
Responsive images
Better performance
Automatic optimization

16. Fonts

Install fonts directly from Google Fonts:

import { Inter } from "next/font/google";

const inter = Inter({
  subsets: ["latin"],
});

Apply globally:

<body className={inter.className}>

17. Environment Variables

Create:

DATABASE_URL=
NEXT_PUBLIC_API_URL=

Server only:

process.env.DATABASE_URL

Available on the client:

process.env.NEXT_PUBLIC_API_URL

Rule of thumb:

If the browser needs access to it, prefix it with NEXT_PUBLIC_.

18. Production Build

Build your application:

npm run build

Run production mode:

npm run start

Check for production errors before deployment.

19. When Should I Use a Server Component?

Use a Server Component when:

Fetching data
Querying databases
Accessing secrets
Rendering static content

Example:

export default async function Products() {
  const products = await getProducts();

  return <div>{products.length}</div>;
}

20. When Should I Use a Client Component?

Use a Client Component when:

Using state
Using effects
Handling clicks
Accessing browser APIs

Example:

"use client";

import { useState } from "react";

export default function LikeButton() {
  const [likes, setLikes] = useState(0);

  return (
    <button
      onClick={() => setLikes(likes + 1)}
    >
      {likes}
    </button>
  );
}

Final Thoughts

When you're starting with Next.js, don't try to learn everything at once.

Focus on these four concepts first:

Routing
Server Components
Client Components
Data Fetching

Once those topics click, the rest of the framework starts making sense.

Bookmark this cheat sheet, keep building projects, and you'll be productive with Next.js much faster than you think.

And as always, Happy coding!

Building an Immersive Tourism Experience with Next.js and Framer Motion

Jerry Satpathy — Mon, 08 Jun 2026 10:51:49 +0000

Most tourism websites feel like digital filing cabinets: you click a button, read a fact, and move to the next page. But what if a website felt less like a directory and more like a story?

Recently, while designing a concept for Odisha Tourism at Code Media Labs, We wanted to move away from static layouts and toward scrollytelling. In this experience, the user travels through landscapes, culture, and history simply by scrolling.

Here is how to build this experience using Next.js and Framer Motion.

1. The Concept: Think in Chapters

Instead of listing attractions, break your site into narrative chapters. Think of each section as a scene in a movie. Each chapter should have a distinct mood that changes as the user moves through it, using background images and large typography to define the "vibe" of that location.

2. Use Scroll Progress as Your "Main Switch"

In Framer Motion, we use useScroll() to track exactly where the user is on the page. Imagine your entire webpage as a long slider from 0 (top) to 1 (bottom).

You can "map" this scroll position to any animation property using useTransform(). Here is a simple example:

// This tells the code: when scroll is 0 to 0.5, 
// the opacity goes from 0 (invisible) to 1 (visible).
const opacity = useTransform(scrollYProgress, [0, 0.5], [0, 1]);

return (
  <motion.div style={{ opacity }}>
    <h1>Welcome to the Wilderness</h1>
  </motion.div>
);

3. Cinematic Motion Effects

You don't need complex code to make a site feel professional. Focus on these three simple Framer Motion techniques:

A. Parallax (Creating Depth)
Move your background images slightly slower than the scroll speed to create a 3D effect.

// Moves the image up by 200px as the user scrolls
const y = useTransform(scrollYProgress, [0, 1], [0, -200]);

<motion.div style={{ y }}>
  <img src="/nature.jpg" />
</motion.div>

B. Scaling Headlines
Make text feel responsive by tying its size to the scroll.

// Headline grows from 90% size to 100% as you reach the section
const scale = useTransform(scrollYProgress, [0, 0.3], [0.9, 1]);

<motion.h1 style={{ scale }}>Into The Untamed</motion.h1>

4. Performance: Keep it Smooth

Because these sites are image-heavy, they can easily become laggy. Keep the experience snappy with these habits:

Animate "Transforms" only: Avoid changing width, height, or padding during scroll. Instead, use transform (for moving/scaling) and opacity. These are much faster because they don't force the browser to recalculate the page layout.

Lazy Loading: Don't load high-resolution images for the "Coastline" section if the user is still at the "Dawn" chapter. Use Next.js Image component with loading="lazy".

Share Values: If five elements need to fade in at once, create a single opacity variable and pass it to all of them, rather than calculating it five times.

5. Story Over Tech

The biggest lesson?

Motion doesn't create immersion—storytelling does.

Framer Motion and Next.js are just the tools. If the layout is cluttered, no amount of fancy animation will save it. Keep your text minimal, let your visuals carry the emotional weight, and ensure every animation serves the narrative, not just the "cool" factor.

The Takeaway

Websites don't have to behave like documents. They can behave like experiences. By combining simple, performant animations with a clear narrative, you can transform a standard travel site into a journey that inspires people.

What kind of story are you planning to tell on your next project?

You can find the live demo here

And as always, Happy Coding!

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! 👾