Forem: Pawar Shivam

🌍 Earth Replies to Your Future — What If the Planet Answered Back?

Pawar Shivam — Sat, 18 Apr 2026 10:02:08 +0000

This is a submission for Weekend Challenge: Earth Day Edition

🌌 What I Built

Most climate apps show numbers.

This one talks back.

Earth Replies to Your Future is an immersive, cinematic web experience where users send a message to Earth… and Earth replies.

Not with data — but with emotion.

The goal was simple:
👉 turn awareness into feeling

Instead of dashboards and statistics, this project creates a personal conversation between the user and the planet.

After receiving Earth’s response, users make a choice — and the experience transforms into a visual future based on that decision.

🎥 Demo

👉 Live Experience: [https://earth-day-dev-weekend-challenge.vercel.app/]
👉 GitHub Repo: [https://github.com/pawarshivamd/earth-day-dev-weekend-challenge

What to expect:

🌍 AI-generated poetic responses (typed in real-time)
🎧 Earth speaking using voice synthesis
🌫️ Bad future → red tones, shake, smoke
🌿 Good future → glow, particles, calm atmosphere

(Tip: Use sound for full experience)

💻 Code

The full source code is available here:
👉 [Add GitHub Repo Link]

⚙️ How I Built It

🧠 AI Layer (Core Experience)

I used Google Gemini API (gemini-1.5-flash) as the emotional brain of the project.

Instead of basic prompts, I designed structured instructions:

Assign a role → “You are Earth…”
Control tone → poetic, reflective, human-like
Limit length → short, meaningful responses
Avoid robotic language

This ensures:
👉 every response feels alive
👉 every interaction is unique

🎨 Frontend Experience

React + Vite → fast and modular UI
Tailwind CSS → glassmorphism + responsive design
Framer Motion → cinematic transitions between scenes

Instead of pages, I built scene-based flow to make the app feel like an interactive film.

🎧 Immersion Layer

SpeechSynthesis API → Earth literally speaks
Ambient background audio → triggered after user interaction
Subtle particles + gradients → depth and atmosphere

⚡ Performance & UX Decisions

Used Page Visibility API to pause heavy video/audio when tab inactive
Avoided heavy video-first approach → used optimized visuals + motion
Built a “Dice Roll” suggestion system for users who don’t know what to write

🧩 Key Challenges

1. Making AI feel human

Early outputs felt robotic.

✅ Solved using:

strict prompt engineering
role-based storytelling
tone constraints

2. Balancing design vs performance

Heavy video backgrounds caused lag.

✅ Solution:

lightweight visuals
motion-based immersion instead of raw media

3. Creating emotion without data

No charts. No dashboards.

Focus was on:

pacing
storytelling
user decisions

🏆 Prize Categories

✅ Best Use of Google Gemini

Gemini powers the entire experience:

generates emotional responses
adapts to user input
creates a different journey every time

💭 Why This Matters

We don’t lack information about climate change.

We lack connection.

This project is an attempt to make people pause —
not to analyze…

…but to feel.

🕊️ Final Thought

“The future was never written. It was always yours to choose.”

🌍 If Earth could reply to you… what would you say?

Stop Building Multiple Components — Use Class-Based Variants Instead

Pawar Shivam — Sat, 11 Apr 2026 17:58:28 +0000

Learn how to build one reusable timeline component and control multiple UI variations using only CSS classes.

=> We Keep Rebuilding the Same Component 😐

Timeline for roles
Timeline for progress
Timeline for steps

👉 Every time → new component

=> The Real Problem

It’s NOT UI complexity

👉 It’s how we think about components

=> Common Developer Mistakes

• duplicate HTML for similar layouts
• add unnecessary JS for switching UI
• create multiple CSS files

👉 More code, more bugs

=> Real Example (From My Project)

I built two timeline versions:

👉 Version 1 (Roles)

👉 Version 2 (Progress)

=> They Look Different… But 👀

👉 Same structure
👉 Same HTML
👉 Same logic

=> The Fix: One Reusable Component 🔥

=> 1. Single HTML Structure

<div class="container-timeline">
  <div class="timeline">
    <div class="timeline-row active">
      <div class="dot"></div>
      <div class="hline"></div>
      <div class="num"></div>
      <div class="card-sec">Content</div>
    </div>
  </div>
</div>

👉 No duplication
👉 Clean structure

=> 2. Layout with Pure CSS

.timeline-row:nth-child(odd) .card-sec {
  left: 60%;
}

.timeline-row:nth-child(even) .card-sec {
  right: 60%;
}

👉 No JS needed
👉 Fully responsive logic

=> 3. Auto Numbering (Zero JS 😎)

.timeline {
  counter-reset: step;
}

.timeline-row {
  counter-increment: step;
}

.num::before {
  content: counter(step, decimal-leading-zero);
}

👉 No props
👉 No manual numbering

=> 4. Variant Switch (The Real Power)

Just change ONE class:

<div class="container-timeline"></div>

<div class="container-timeline container-timeline-progress"></div>

👉 That’s it 😳

=> What Changes Automatically?

With .container-timeline-progress:

• progress line activates
• colors change (active/pending)
• completion state appears

.container-timeline-progress .timeline::before {
  background: linear-gradient(...);
}

=> Hidden Dev Insight 🧠

Most UI differences are:

👉 styling differences
👉 state differences

NOT structure

=> So What Should Handle It?

👉 CSS (not JS)

=> Real UI Architecture Rule

Design like this:

.timeline { }              /* base */
.container-timeline-progress { }  /* modifier */

👉 Base = structure
👉 Modifier = variation

=> Why This Matters

• reusable components
• less code
• easier maintenance
• scalable design system

=> Final Thought

Stop building new components for small changes…

👉 Start designing flexible ones 🚀

=> What Do You Think?

Do you create new components for variations — or reuse with classes?

Tried Ordering Coffee… Got Rejected by an AI Teapot 🤖☕❌

Pawar Shivam — Tue, 07 Apr 2026 18:41:18 +0000

This is a submission for the DEV April Fools Challenge

☕ What I Built

I built Coffee Refuser 9000 — a strictly compliant implementation of the infamous HTTP 418 I'm a teapot error.

In a world obsessed with caffeine, this application takes a bold stand. It is a teapot… and it refuses to brew coffee.

No matter what you request — Latte, Espresso, or Cappuccino — the app responds with a uniquely crafted, sarcastic, and dramatic refusal message. Powered by AI, every rejection feels personal, poetic, and slightly offensive (in a fun way 😄).

It only accepts Tea — the one true beverage this teapot respects.

🚫 Demo

Check out the live (and very stubborn) teapot:
👉 https://ais-dev-bemem4suenaft6h3m2v2sn-323154044951.asia-southeast1.run.app/

Try ordering coffee… I dare you 😄

💻 Code

Explore the source code here:
👉 https://github.com/pawarshivamd/april-fools-coffee

The repository contains the core logic, UI, and the AI-powered sarcasm engine behind the teapot.

⚙️ How I Built It

This project focuses on “useless but polished” engineering — because over-engineering a joke makes it better 😄

React + Vite → Lightning-fast UI for instant rejection
Google Gemini AI → Powers the Sarcasm Engine that generates dynamic refusal messages
Tailwind CSS → Clean “artisanal teapot” aesthetic
Framer Motion → Teapot wiggles + dramatic shake effects
Lucide React → Icons for beverages I refuse to make

🏆 Prize Category

🥇 Best Google AI Usage

Using a state-of-the-art LLM just to say “No” in creative ways…
This is peak 2026 engineering.

🫖 Best Ode to Larry Masinter

A faithful (and slightly aggressive) tribute to RFC 2324.
This teapot takes its job very seriously.

😄 Final Thoughts

Not every project needs to be useful.
Some just need to make people smile… or argue with a teapot ☕❌

Give it a try — but don’t expect coffee.

From ENIAC to AI: A Woman's Journey Through 80 Years of Code

Pawar Shivam — Sat, 04 Apr 2026 18:29:01 +0000

This is a submission for the 2026 WeCoded Challenge: Frontend Art

Show us your Art

Inspiration

This artwork was inspired by the incredible women who built the foundation
of computing — from the 1940s pioneers who programmed ENIAC with punch cards,
to today's developers writing AI-powered code with holographic interfaces.

The piece is split into two worlds:

Left side (sepia, 1940s): A female developer standing beside the ENIAC machine, holding punch cards — representing trailblazers like Grace Hopper and the "human computers" of that era.
Right side (cyberpunk, 2026): A modern developer with a holographic badge, AR glasses, floating code snippets, and a glass keyboard — representing where we are today and where we are going.

The glowing split line in the center with the ♀ symbol represents the
continuous thread of women in tech across all eras. The message is simple:
we were always here, and we are not going anywhere.

My Code

Built with pure HTML + CSS — no frameworks, no libraries.

Key techniques used:

CSS animations (@keyframes) for glowing dials, floating code, scan lines
CSS Grid and absolute positioning for the split-screen layout
Inline SVG for the holographic syntax tree
CSS custom properties for theming

What Happens When Two IDs Clash? (And Why Your CSS Still Breaks)

Pawar Shivam — Sat, 04 Apr 2026 16:58:33 +0000

=> Two Same IDs? Big Problem 🚨

You write:

<div id="box">First</div>
<div id="box">Second</div>

👉 This is INVALID HTML

IDs must be unique.

=> But What Actually Happens?

Browser doesn’t crash 😄

👉 It still renders both
👉 But behavior becomes unpredictable

=> CSS with Same ID

#box {
  color: red;
}

👉 BOTH elements become red

Even though it’s wrong ❌

=> JavaScript Problem (Hidden Bug)

document.getElementById('box')

👉 Only returns FIRST element

Second one ignored ❌

=> Now Let’s Make It Complex 🔥

<div id="box" style="color: green;">First</div>
<div id="box">Second</div>

#box {
  color: red;
}

👉 First = green (inline wins)
👉 Second = red

=> Add `!important`

#box {
  color: red !important;
}

👉 Now BOTH become red

Even inline gets overridden 😳

=> What If Same ID in Multiple CSS Files?

<link href="a.css">
<link href="b.css">

a.css:

#box { color: blue; }

b.css:

#box { color: red; }

👉 Result: red

👉 Last loaded file wins

=> Same Specificity Inside Same File

#box { color: blue; }
#box { color: red; }

👉 Bottom rule wins

=> Why This Is Dangerous

• Unpredictable behavior
• JS bugs
• Hard debugging
• Breaks accessibility

=> Real Dev Rule

👉 ID = UNIQUE

Always.

=> Better Approach

Use classes:

<div class="box"></div>
<div class="box"></div>

👉 Safe + scalable

=> Pro Insight

Specificity is NOT the only factor

Final winner depends on:

👉 Specificity
👉 Source order
👉 Inline styles
👉 !important

=> Final Thought

Browser tries to fix your mistakes…

👉 But your code becomes harder to control

=> What Do You Think?

Have you ever debugged a bug caused by duplicate IDs?

Why pointer-events: none Can Break Your UI (Silently)

Pawar Shivam — Tue, 31 Mar 2026 16:54:18 +0000

=> Why Click Events Suddenly Stop Working

You write this:

.overlay {
  pointer-events: none;
}

And suddenly:

👉 buttons don’t click
👉 links don’t work
👉 UI feels broken

=> What `pointer-events: none` Actually Does

It tells the browser:

👉 ignore all mouse interactions

So:

👉 clicks pass through the element

=> Real Problem Scenario

.card {
  position: relative;
}

.overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

Now:

👉 overlay is visible
👉 but not clickable

=> Where It Gets Dangerous

Sometimes parent has:

.container {
  pointer-events: none;
}

👉 All child elements also stop receiving clicks

=> Why This Causes Bugs

UI looks perfectly fine…

👉 but interactions fail

This is one of the hardest bugs to detect.

=> When It’s Useful

Use it for:

decorative overlays
animation layers
visual effects

=> Fixing the Issue

Enable interaction again:

.button {
  pointer-events: auto;
}

Or remove it if not needed.

=> What Developers Often Miss

This property doesn’t change UI visually.

👉 only behavior changes

=> Real UI Tip

If clicks are not working:

👉 inspect pointer-events first

=> Bonus Trick

Clickable overlay pattern:

.overlay {
  pointer-events: none;
}

.overlay button {
  pointer-events: auto;
}

=> What Do You Think?

Have you ever faced a UI bug where clicks stopped working for no reason?

Using address tags for Local SEO

Pawar Shivam — Mon, 30 Mar 2026 17:02:14 +0000

=> What Most Developers Do

They write contact info like this:

<div class="contact">
  <p>ABC Company</p>
  <p>Ahmedabad, India</p>
  <p>+91 99999 99999</p>
</div>

👉 Looks fine visually
👉 But search engines don’t fully understand it

=> The Semantic Way

HTML already provides a tag for this:

<address>
  ABC Company<br>
  Ahmedabad, India<br>
  <a href="tel:+919999999999">+91 99999 99999</a>
</address>

=> Why `<address>` Matters

It tells browsers and search engines:

👉 this is contact information
👉 this is business/location data

=> SEO Advantage

Search engines can better:

identify business details
connect location data
improve local search visibility

=> Accessibility Benefit

Screen readers understand:

👉 this section contains contact info

Better experience for users.

=> What Developers Often Miss

They focus on design:

👉 but ignore meaning

=> Important Rule

<address> is NOT for:

random text
blog author bio

It should be used for:

👉 contact info of person or organization

=> Combine With Other SEO Techniques

For best results, use with:

proper headings
structured data (JSON-LD)
Google Business Profile

=> Real UI Tip

Place <address> in:

footer
contact page
business info section

=> What Do You Think?

Have you ever used <address> for SEO in your projects?

I Built a Clamp() Generator — No More Media Queries for Typography

Pawar Shivam — Sun, 29 Mar 2026 10:52:48 +0000

=> The Hidden Problem With `rem` Units

Most developers assume:

👉 1rem = 16px

But that’s not always true.

=> When Things Break

You use a template or UI kit…

And suddenly:

👉 spacing looks off
👉 typography feels inconsistent
👉 layout breaks

Why?

Because:

👉 root font size is different

=> The Real Issue

html {
  font-size: 14px;
}

Now:

👉 1rem = 14px (not 16px)

Every rem value changes.

=> Why This Is Dangerous

If your project depends on:

rem for spacing
rem for typography

Then changing root font size:

👉 affects entire layout

=> Real Scenario

You finish full UI…

Then you change:

html {
  font-size: 18px;
}

Now:

👉 margins increase
👉 padding changes
👉 layout breaks

=> What Developers Often Miss

rem is not fixed.

👉 it’s dynamic
👉 depends on root font size

=> How My Clamp Generator Solves This

In my tool:

👉 you can define root font size
👉 generate values based on your setup

Example:

font-size: clamp(1rem, -1.57rem + 7.14vw, 3rem);

👉 works correctly with your root size

=> Why I Added Root Font Option

Because:

👉 every project is different
👉 templates override defaults
👉 teams use custom scaling

=> Best Practice

Before using rem:

👉 check root font size

=> Pro Tip

Keep this consistent:

html {
  font-size: 16px;
}

Or define your system clearly.

=> Real Developer Advice

Never assume defaults.

👉 always verify foundation values

=> Built This Tool

If you're working with responsive typography:

👉 https://clamp-generator-ten.vercel.app/

Save time. Avoid media queries. Use clamp.

=> What Do You Think?

Have you ever faced layout issues because of changing root font size?

Why contain in CSS Can Fix Your Performance Bottlenecks

Pawar Shivam — Sat, 28 Mar 2026 09:39:45 +0000

=> What If Components Didn’t Affect Each Other?

Normally in CSS:

👉 one element can affect the whole layout
👉 browser recalculates everything

This slows down rendering.

=> The Hidden CSS Optimization

.card {
  contain: layout paint;
}

Now the browser treats it like:

👉 an isolated component
👉 no outside impact

=> What `contain` Actually Does

It limits:

layout calculations
paint rendering
size reflows

=> Different Types of Containment

.box {
  contain: layout;
  contain: paint;
  contain: size;
  contain: style;
}

Or all together:

.box {
  contain: strict;
}

=> Why This Improves Performance

Without contain:

👉 changes trigger global recalculation

With contain:

👉 only local area updates

=> Real Use Case

.card {
  contain: content;
}

Perfect for:

cards
widgets
dashboards

=> What Developers Often Miss

Modern performance is not just:

👉 lazy loading
👉 image optimization

It’s also:

👉 rendering isolation

=> Warning

If used incorrectly:

👉 layout can break
👉 size calculations may fail

=> Real UI Tip

Use contain when:

👉 component is independent
👉 layout doesn’t depend on outside

=> What Do You Think?

Would you use CSS contain instead of optimizing everything manually?

Why content-visibility: auto Can Make Your Site Instantly Faster

Pawar Shivam — Fri, 27 Mar 2026 18:43:30 +0000

=> What If Browser Didn’t Render Everything?

Normally, the browser renders:

👉 entire page
👉 even off-screen content

This wastes performance.

=> The Hidden Performance Hack

.section {
  content-visibility: auto;
}

Now the browser:

👉 skips rendering off-screen content
👉 renders only when needed

=> Why This Is Powerful

For long pages:

blogs
dashboards
feeds

This can:

👉 improve load time
👉 reduce memory usage
👉 boost performance

=> Real Example

.card {
  content-visibility: auto;
  contain-intrinsic-size: 300px;
}

=> Why `contain-intrinsic-size` Matters

Without it:

👉 layout shift can happen

This gives a placeholder size until content loads.

=> What Developers Often Miss

Optimization is not always JavaScript.

Sometimes CSS can do it better.

=> When to Use It

Use for:

long scrolling pages
repeated components
off-screen sections

=> When NOT to Use

Avoid on:

above-the-fold content
critical UI elements

=> Real UI Tip

If your page feels heavy:

👉 try skipping rendering instead of optimizing everything

=> What Do You Think?

Would you use content-visibility in your next project for performance?

The CSS :has() Selector — The Parent Selector We Waited Years For

Pawar Shivam — Thu, 26 Mar 2026 13:07:00 +0000

=> Why Targeting Parent Was Always Hard

Before this, CSS could only go downward:

.parent .child {
  color: red;
}

But you couldn’t do:

👉 style parent based on child

=> The Game-Changer: `:has()`

Now you can:

.card:has(img) {
  border: 2px solid green;
}

👉 If .card contains an image → style it

=> Real Power Example

Form validation:

.form-group:has(input:invalid) {
  border: 1px solid red;
}

👉 No JavaScript needed

=> Interactive UI Without JS

.button:has(:hover) {
  background: black;
}

Or:

.menu:has(.active) {
  display: block;
}

=> Why This Is Big

You can now:

reduce JavaScript
write cleaner CSS
build smarter UI logic

=> What Developers Often Miss

This is not just a selector.

👉 It’s conditional logic in CSS

=> Performance Note

:has() can be expensive if overused.

Avoid:

*:has(.child)

👉 Too broad = slow

=> Browser Support

Now supported in modern browsers.

But always test before production.

=> Real UI Tip

Use :has() for:

form states
conditional styling
parent-based layouts

=> What Do You Think?

Will :has() reduce the need for JavaScript in UI logic?

text-box-trim — The CSS Property Most Developers Don’t Know Yet

Pawar Shivam — Wed, 25 Mar 2026 12:54:00 +0000

=> Why Text Never Looks Perfectly Centered

You center text using:

.container {
  display: flex;
  align-items: center;
  justify-content: center;
}

But still…

👉 text looks slightly off
👉 not visually centered

=> The Hidden Problem

Fonts have built-in spacing:

extra space above (ascenders)
extra space below (descenders)

So even when centered…

👉 it doesn’t look centered

=> The Modern CSS Solution

.text {
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}

=> What This Actually Does

removes extra space above and below text
aligns text based on font metrics
creates pixel-perfect typography

=> Why This Is Powerful

Now you can:

👉 truly center text
👉 align text inside buttons
👉 fix UI inconsistencies

=> Real UI Example

Buttons often look off:

.button {
  display: flex;
  align-items: center;
  justify-content: center;
}

Even then…

👉 text feels slightly higher or lower

With trim:

👉 perfectly balanced

=> Browser Support Warning

This is an experimental feature.

Not supported everywhere yet.

=> Safe Approach

Use fallback:

.text {
  line-height: 1;
}

Then enhance with:

.text {
  text-box-trim: trim-both;
}

=> What Developers Often Miss

The issue is not alignment.

It’s font metrics.

=> Real UI Tip

If your design looks “almost perfect” but not quite:

👉 it’s probably text spacing

=> What Do You Think?

Do you think text-box-trim will become a standard for modern UI design?

Forem: Pawar Shivam

🌍 Earth Replies to Your Future — What If the Planet Answered Back?

🌌 What I Built

🎥 Demo

What to expect:

💻 Code

⚙️ How I Built It

🧠 AI Layer (Core Experience)

🎨 Frontend Experience

🎧 Immersion Layer

⚡ Performance & UX Decisions

🧩 Key Challenges

1. Making AI feel human

2. Balancing design vs performance

3. Creating emotion without data

🏆 Prize Categories

💭 Why This Matters

🕊️ Final Thought

Stop Building Multiple Components — Use Class-Based Variants Instead

=> We Keep Rebuilding the Same Component 😐

=> The Real Problem

=> Common Developer Mistakes

=> Real Example (From My Project)

=> They Look Different… But 👀

=> The Fix: One Reusable Component 🔥

=> 1. Single HTML Structure

=> 2. Layout with Pure CSS

=> 3. Auto Numbering (Zero JS 😎)

=> 4. Variant Switch (The Real Power)

=> What Changes Automatically?

=> Hidden Dev Insight 🧠

=> So What Should Handle It?

=> Real UI Architecture Rule

=> Why This Matters

=> Final Thought

=> What Do You Think?

Tried Ordering Coffee… Got Rejected by an AI Teapot 🤖☕❌

☕ What I Built

🚫 Demo

💻 Code

⚙️ How I Built It

🏆 Prize Category

🥇 Best Google AI Usage

🫖 Best Ode to Larry Masinter

😄 Final Thoughts

From ENIAC to AI: A Woman's Journey Through 80 Years of Code

Show us your Art

Inspiration

My Code

What Happens When Two IDs Clash? (And Why Your CSS Still Breaks)

=> Two Same IDs? Big Problem 🚨

=> But What Actually Happens?

=> CSS with Same ID

=> JavaScript Problem (Hidden Bug)

=> Now Let’s Make It Complex 🔥

=> Add !important

=> What If Same ID in Multiple CSS Files?

=> Same Specificity Inside Same File

=> Why This Is Dangerous

=> Real Dev Rule

=> Better Approach

=> Pro Insight

=> Final Thought

=> What Do You Think?

Why pointer-events: none Can Break Your UI (Silently)

=> Why Click Events Suddenly Stop Working

=> What pointer-events: none Actually Does

=> Real Problem Scenario

=> Where It Gets Dangerous

=> Why This Causes Bugs

=> When It’s Useful

=> Fixing the Issue

=> What Developers Often Miss

=> Real UI Tip

=> Bonus Trick

=> What Do You Think?

Using address tags for Local SEO

=> What Most Developers Do

=> The Semantic Way

=> Why <address> Matters

=> Add `!important`

=> What `pointer-events: none` Actually Does

=> Why `<address>` Matters

=> The Hidden Problem With `rem` Units

=> What `contain` Actually Does

=> Why `contain-intrinsic-size` Matters

=> The Game-Changer: `:has()`