DEV Community: Naman Dhakad

Tonkotsu ramen in CSS

Naman Dhakad — Sun, 02 Aug 2026 17:08:22 +0000

This is a submission for Frontend Challenge - Comfort Food Edition, CSS Art.

Inspiration

Tonkotsu ramen. It's the bowl I want when nothing else will do — slow-simmered pork-bone broth turned milky and opaque, a jammy marinated egg, soft rolled chashu, scallions, menma, a clean nori sheet, and that iconic pink narutomaki spiral. The whole thing is comfort in liquid form: rich, warm, and steaming.

I wanted to see if that feeling — not just the look of food, but the mood of a quiet late-night ramen-ya — could come through with CSS as the main ingredient. So this isn't just a bowl on a page; it's a composed table scene: warm wooden grain under an overhead light, a bamboo trivet, chopsticks resting on a ceramic hashioki, a small dish of pickled ginger, and a stamped order ticket.

Demo

I built it as a single self-contained HTML file (HTML + CSS + a light sprinkle of JavaScript). It's live here:

Try it: hover the ajitama egg, and move your cursor around — the steam and the overhead light shift with a gentle parallax. (Everything still works and stays still if you prefer reduced motion.)

Journey

The star of the show is CSS, as the prompt asks. JavaScript is deliberately light — only two small, purposeful things: nudging the steam's rhythm so it never loops like a metronome, and a soft pointer-parallax for depth. Here's what the CSS is doing:

Broth — layered radial-gradients for the milky tonkotsu surface, with floating chili-oil droplets and sesame specks stacked via tiny radial-gradients in mix-blend-mode: screen.
Narutomaki swirl — the pink spiral is a conic-gradient cut into rings with a radial-gradient mask, so you get the real "pinwheel" cross-section instead of a flat disc.
Chashu — rolled pork viewed from above: a repeating-radial-gradient renders the concentric spiral of the meat roll, with faint fat layers and a glaze highlight.
Noodles — repeating-radial-gradient tangles peeking out from under the toppings.
Ceramic bowl — the depth is all box-shadow: inset lights on the rim, inset darkness inside, and a cast shadow below, plus a curved specular highlight on the flank.
Steam — blurred, semi-transparent puffs rising on @keyframes with randomized durations and three drift variants (rise, riseL, riseR) so the plume feels organic rather than mechanical.
Typography & mood — a Noto Serif JP + Cormorant Garamond title block (ラーメン / Tonkotsu Ramen), a torn-edge order ticket with a red 味 hanko stamp, and a warm color grade to push the "I want to eat this" psychology.

A real bug worth calling out: at one point the wood-grain background was rendering on top of the bowl, burning dark stripes across the broth, chopsticks, and ticket. The culprit was a mix-blend-mode: multiply ::after layer painting above the scene. The fix was giving the scene z-index + isolation: isolate so all the internal blend modes stay contained — a good reminder that stacking context, not just z-index, decides what wins.

What I'm proud of: the narutomaki mask trick and the steam randomization — both are small but they sell the "alive" feeling.

What's next: a pour-and-stir animation on click, and a dark/light "shop sign" toggle.

This work is licensed under the MIT License.

A better mailto fallback with JavaScript

Naman Dhakad — Tue, 28 Jul 2026 16:06:09 +0000

A normal mailto: link is still the simplest way to put an email address behind a Contact button. The rough edge is what happens after the click.

The visitor's browser may open a desktop app they do not use. It may have no useful mail handler configured. Meanwhile, the visitor may already be signed in to Gmail, Outlook, Proton Mail, or another webmail service.

You can keep the ordinary link and add a better choice on top of it.

1. Keep the mailto link

Start with the HTML you already have:

Email us

This matters because the anchor remains useful without the library. If JavaScript is unavailable, the browser still sees a normal mailto: URL and can hand it to the visitor's configured mail app.

2. Install smart-mailto

Install the framework-agnostic core package:
npm install @smart-mailto/core

The package has no runtime dependencies.

3. Initialize it once

Put the import in your browser entry file and call the initializer once:
import { initSmartMailto } from '@smart-mailto/core';

initSmartMailto();

That is the full migration. You do not have to replace each anchor with a custom component.

smart-mailto uses one delegated click listener for valid mailto: anchors, including links added later. When a visitor clicks one, the library opens a provider picker instead of sending them straight to the operating system's default mail app.

The recipient and existing subject or body values stay with the email intent. Exact prefill support varies by provider.

The fallback paths

The picker does not assume that every visitor wants one of the suggested webmail services.

Copy Address is included by default, so the visitor can copy the recipient and continue in any mail service.
Default Mail App is included on mobile by default. If you want to show that option on desktop too, initialize with initSmartMailto({ includeNative: true }).
If the picker cannot load, smart-mailto returns to the original mailto: URL.
If the recipient is empty or invalid, the library leaves the click alone and lets the browser handle it.

The original anchor stays the safety net throughout.

What changes for the visitor

Before:

Click the email link.
Hope the browser opens the right app.

After:

Click the same email link.
Choose a webmail provider, use the default mail app, or copy the address.

Your HTML stays familiar, while the visitor gets a route that matches how they actually send email.

For the complete walkthrough, see the practical smart-mailto guide. The smart-mailto repository contains the source, package documentation, and configuration reference.

🚀 From Paper to Pixels: How I Built an AI-Powered Exam Platform with Google Gemini

Naman Dhakad — Tue, 03 Mar 2026 05:53:05 +0000

Transforming PDF question papers into interactive CBT experiences - a journey through hackathons, AI, and building for millions of students

The Spark ✨

It was 2 AM in the hostel room. My friend was frustrated—again. He'd solved a 180-question JEE mock test on paper, only to realize he'd made a calculation error on question #45 that threw off his entire ranking. No instant results. No analytics. No way to know his weak areas.

"If only there was a way to just... upload the PDF and take it like the real exam."

That question changed everything.

🎯 What I Built: Rankify

Rankify is an AI-powered platform that transforms any PDF question paper into a fully interactive computer-based test (CBT). No more paper. No more manual checking. Just upload, practice, and analyze.

The Magic Flow ✨

graph LR
    A[📄 PDF Upload] --> B[🤖 AI Extraction]
    B --> C[👁️ Review & Edit]
    C --> D[⚙️ Configure Test]
    D --> E[🎮 Take the Test]
    E --> F[📊 Analyze Results]

Features That Actually Matter 🎮

Feature	What It Does	Why It Matters
AI Extraction	Gemini reads your PDF and extracts questions	No manual typing
Confidence Scores	Each question gets a 1-5 confidence rating	Know what to review
Diagram Detection	AI finds and maps diagrams to questions	Visual questions handled
Multi-PDF Batch	Process 10 PDFs at once	Save time
Offline Mode	Works without internet	Study anywhere

🧠 The Hackathon Journey

This wasn't a weekend project. It started at an MLH hackathon where I had 24 hours to prove the concept worked.

Day 1: The Chaos 🌪️

Me at 6 PM: "I'll use Gemini to extract questions from PDFs!"
Me at 8 PM: *Reading Gemini documentation*
Me at 10 PM: *Making API calls that fail*
Me at midnight: *First successful extraction! 🎉*
Me at 2 AM: *It works but the JSON is garbage*

Day 2: The Pivot 🔄

I realized the hard way: JSON output from LLMs is unpredictable. So I built:

Zero-tolerance prompts - Instructions so strict Gemini had no choice but to behave
Fallback chains - If one model fails, automatically try the next
Confidence scoring - A multi-factor algorithm to rate extraction quality

// The fallback chain that saved my hackathon
const modelFallback = [
  'gemini-2.5-flash',      // Best quality
  'gemini-2.5-flash-lite', // Quality + speed  
  'gemini-2.0-flash',      // Reliable backup
  'gemini-2.0-flash-lite'  // Last resort
]

The Result? 🏆

A working prototype that extracted 85 questions from a JEE sample paper in 3 minutes. Not perfect—but proof it was possible.

🔥 What I Learned

Technical Wins 💻

Gemini's Vision API is underutilized

Most people use it for images. But PDFs? That's where the magic happens for educational tech.
Prompt engineering > Fine-tuning

I spent zero dollars on training. Just better prompts.
Client-side AI is viable

Privacy-first architecture actually became a selling point.

The Hard Lessons 😵

Problem	Solution
Rate limits	Implemented exponential backoff + model fallback
PDF parsing issues	Added pdf.js preprocessing
JSON hallucinations	Built a validation layer with confidence scores
Cost tracking	Created real-time usage dashboard

Soft Skills That Stuck 🎯

MVP-first thinking: Ship fast, iterate faster
User empathy: Students don't care about AI—they care about results
Failure tolerance: 70% of my experiments failed. That's okay.

📝 My Google Gemini Feedback: The Good, The Bad, The Ugly

✅ What Worked Brilliantly

Multi-modal = Game changer 🎨
Processing text + images together meant diagrams weren't a separate problem.
Context caching 💾
Reduced costs by 60%. Essential for production apps.
Large context windows 📏
1M tokens = entire question papers in one go. Unreal.
JSON mode 📋
Structured output without post-processing. So good.

⚠️ Where Google Could Improve

PDF parsing is inconsistent
Rotated pages, watermarks, and scanned docs still cause headaches.
Rate limits are tight
For a free tier, it's restrictive. I had to build a queuing system.
Error messages are cryptic
"Internal error" tells me nothing. Help us help you!
Cost visibility
Real-time spend tracking would prevent surprises.

😬 The Ugly Truth

Sometimes Gemini hallucinates. It sees a question it can't parse and just... makes up options. That's why confidence scoring exists now.

🚀 Where I'm Going Next

The journey continues:

Phase 1: Cloud Run Deployment

gcloud run deploy rankify-ai \
  --source . \
  --region us-central1 \
  --no-allow-unauthenticated \
  --labels dev-tutorial=blog-devcommunity2026

Phase 2: Agent Development Kit (ADK)

Building specialized agents for different subjects:

Physics Agent 🧪
Chemistry Agent ⚗️
Math Agent 📐

Phase 3: A2A Protocol

Agent-to-agent communication for complex multi-step reasoning

💡 To Anyone Building with Gemini

Start with Vision - It's more mature than you think
Build for failure - Every API call can fail
Hide the AI - Users want results, not technology
Trust but verify - Confidence scores are your friend

🎤 Final Thoughts

Building Rankify taught me that AI isn't about replacing humans—it's about amplifying. A what we can do student in a small town with a cracked phone can now practice with the same quality as someone with expensive coaching.

That's what keeps me building.

Thanks for reading! If you want to try Rankify, check out the live demo. And if you're entering the Built with Google Gemini: Writing Challenge—good luck! 🎉

MLH #DEVChallenge #GoogleGemini #Vue #Nuxt #AI #WebDev