DEV Community: Maneesh Thakur

The 2 AM Call ....

Maneesh Thakur — Sun, 23 Aug 2026 06:20:49 +0000

comic-Strip #De-Stress

A leveled map of 149 GenAI tools — sorted by concept depth, not hype

Maneesh Thakur — Thu, 20 Aug 2026 19:13:52 +0000

Most "AI tools" lists are a wall of 500 links sorted by… nothing. A beginner and a distributed-systems engineer open the same undifferentiated pile and both bounce off it.

So I built a different kind of map: 149 GenAI tools sorted by concept depth — not by how hard a tool is, but by how much you need to understand to use it well.

The five levels

Level 0 — Consume ready-made GenAI. No code, no theory. (ChatGPT, Claude, Copilot.)
Level 1 — Run & build, no/low code. GUI model runners, drag-and-drop apps. (Ollama, Flowise.)
Level 2 — Code with libraries. Python against SDKs and frameworks. (OpenAI SDK, LangChain.)
Level 3 — Build, fine-tune & ship. RAG, agents, vector DBs, eval, serving. (LangGraph, Pinecone, PEFT.)
Level 4 — Research & scale. Distributed training, inference engines, GPU kernels. (vLLM, DeepSpeed, FlashAttention.)

The trick: ease of use ≠ concept depth. ChatGPT is trivial to use, so it's Level 0. FlashAttention is Level 4 — not hard to install, but you need to understand attention and GPU memory to know why it matters.

Two links per tool

On the map, every tool has exactly two links — 📖 one thing to read (a hand-picked, approachable guide) and 🐙 the code (repo or homepage). No taxonomy, no noise. Each entry looks like this:

Ollama — run open models locally · 📖 a beginner's tutorial · 🐙 the repo

Sorting by depth turns a directory into a path: look at your rung, see 10–25 tools instead of 500, pick one — and the reading and the code are right there. It's a searchable single-page app: no signup, no tracking, open source (CC0).

👉 Browse the map: https://maneesh-kumar-thakur.github.io/self-serve-learnings-4-all/
⭐ Repo: https://github.com/maneesh-kumar-thakur/self-serve-learnings-4-all

Feel free to share feedback or if you are looking for help/content on specific topics

🐾 Translate My Dog - AI Canine Micro-Expression Reader

Maneesh Thakur — Mon, 17 Aug 2026 06:58:36 +0000

This is a submission for Weekend Challenge: Dog Days Edition

What I Built

Translate My Dog is a multimodal AI web application that reads your dog's subtle facial micro-expressions, ear positions, and body posture from photos to reveal what they are actually thinking. It generates witty, character-accurate inner monologues and synthesizes character voice audio.

Demo

translate-my-dog.ai.studio

Code

maneesh-kumar-thakur / devto-challenge-dog-days-edition

dev.to weekend challenge

🐾 Translate My Dog (AI Canine Micro-Expression Reader)

Translate My Dog is a multimodal AI web application that reads your dog's subtle facial micro-expressions, ear positions, and body posture from photos to reveal what they are actually thinking. It generates witty, character-accurate inner monologues and synthesizes character voice audio.

🌟 Key Features

1. 🔍 Multimodal Canine Micro-Expression Vision Analysis

Powered by Google Gemini Vision models (gemini-2.5-flash, gemini-flash-lite-latest, etc.).
Evaluates canine facial cues, pupil dilation, ear angles, head tilts, tail dynamics, and environmental clues (e.g. vacuum cleaners, treat jars, tennis balls).
Outputs a comprehensive translation report
- First-Person Inner Monologue: Spoken directly in character as the dog.
- Detected Mood Title: Humorous real-time emotional state (e.g., "94% Betrayed By Diet Kibble").
- Identified Breed & Heritage Insight: Visual breed detection with evolutionary and behavioral notes.
- Visual Clues Breakdown: 3 specific visual observations justifying the monologue.
- Canine…

View on GitHub

How I Built It

Prize Categories

Applying for Best Use of ElevenLabs & Best Use of Google AI

Open Late — a diner menu that follows the clock, not the other way round

Maneesh Thakur — Sun, 16 Aug 2026 19:00:28 +0000

This is a submission for Frontend Challenge - Comfort Food Edition, Perfect Landing

What I Built

Open Late is the landing page for an imaginary 24-hour comfort diner with four kitchens and one rule: the menu follows the clock.

Open it at 3am and it opens on the Small Hours menu — khichdi, drunken
noodles, grilled cheese. Open it at 8am and the same page is serving congee and soft eggs. The page reads your actual clock, picks the kitchen that's cooking, highlights the right row in the hours table, and tells you what it did. You can override it and look ahead at any other service.

It's the companion piece to my five CSS art entries —
Midnight Fridge Raid,

Cutting Chai,

Soft Boil,

Slow Turn
and

The Dabba
— same idea, that comfort food is defined by the hour you need it, not by the cuisine.

No framework. No build step. No image files — every plate on the page is
two radial gradients and a shadow.

Demo

The Open Late landing page at 12:13am: the header pill reads "Open now · 12:13 AM", the hero says it is serving the Small Hours menu, six dishes are shown including 3am Khichdi and Midnight Maggi, the hours table marks Small Hours as on now, and a booking form sits at the foot of the page.

Live demo →
·
Source →

Journey

The idea: make the clock the interface

Restaurant landing pages are a solved genre, which makes them a bad place to compete on layout. So I looked for a behaviour instead of a look. "The menu changes with the hour" turned out to be the right hook, because it isn't decoration — it removes a decision. You never scroll past breakfast to find what's actually available.

That one idea then paid for the whole page: it gives the hero something true to say, it gives the hours table a live state, and it gives the booking confirmation something useful to tell you ("that lands on the Evening menu").

const SERVICES = [
  { id: 'small',     name: 'the Small Hours menu', from: 0,  to: 5  },
  { id: 'sunrise',   name: 'the Sunrise menu',     from: 5,  to: 11 },
  { id: 'afternoon', name: 'the Afternoon menu',   from: 11, to: 17 },
  { id: 'evening',   name: 'the Evening menu',     from: 17, to: 24 },
];

The clock re-checks every 30 seconds and rolls the menu over — but only for someone who hasn't taken manual control of the picker. Yanking the page out from under a person who deliberately chose "Evening" would be rude.

Twenty-four dishes: a vessel and a glyph

My first version was honestly poor: one bowl recipe rendered in two dozen
colours. It looked tidy and told you nothing. Colour alone can't say soup.

The fix came in two layers. First, a vessel, drawn in CSS — how the thing arrives at your table:

<li class="dish" data-form="mug" …>

.dish[data-form="plate"] .dish__art::before { … }  /* mound on a flat oval  */
.dish[data-form="tray"]  .dish__art::before { … }  /* browned, forked top   */
.dish[data-form="mug"]   .dish__art::before { … }  /* + ::after is a handle */

Then a glyph on top of it — what the thing actually is. Fourteen of them, hand-drawn as one inline <symbol> sprite:

<svg class="dish__icon"><use href="#i-noodles"/></svg>

I deliberately didn't reach for an icon library. A CDN link would break the page's zero-dependency claim and die in any offline or sandboxed context, and none of the good free sets (Lucide, Tabler, Phosphor) has a khichdi, an idli or a paratha in it. Fourteen hand-drawn glyphs is a couple of hours and it's mine, with no licence to honour and no request to make.

Two things I got wrong first time, both worth stealing:

The glyphs originally drew their own bowls. A bowl glyph sitting inside a CSS bowl reads as doubled and slightly broken. Every glyph is now the food only — a nest of noodles, a mound of rice, a fried egg — and the vessel underneath supplies the container.

One of my "vessels" wasn't a vessel. I had stack alongside bowl, plate, tray and mug — but a stack is a shape food takes, not a thing you serve it in. Once the glyph did the stacking, a stack vessel under a stack glyph was the same doubling again. Those dishes are plates now.

The lesson generalises past food: when you're differentiating a list of things visually, spend your effort on silhouette before colour. Shape survives being small, greyscale, and glanced at.

The `hidden` bug that broke my own progressive enhancement

Worth its own section, because I'd written a whole paragraph in this post
claiming the filter panel is invisible without JavaScript — and it wasn't.

hidden is just display: none in the UA stylesheet, which means any
author rule that sets display silently beats it. I had two:

.btn     { display: inline-flex; }   /* un-hid "Clear filters"     */
.filters { display: grid; }          /* un-hid the whole panel!    */

So with scripting off, the panel appeared anyway, full of dead controls — the exact failure I'd designed it to avoid. One line fixes it, and it's the only place on the page I'd defend an !important:

[hidden] { display: none !important; }

I only caught it because I rendered the page with the <script> tag deleted and looked. Claiming progressive enhancement is easy; testing it means actually removing the script.

Accessibility, and why each choice was made

I tried to make every a11y decision a design decision rather than a
retrofit:

The filters don't exist until they work. They ship with hidden and JS removes it. With scripting off you get all twenty-four dishes, each badged with the kitchen that cooks it — a perfectly good menu — instead of dead controls that lie about what they do.

Native controls, styled as chips. The kitchen picker is <fieldset> +
<legend> + real radios; the dietary filters are real checkboxes, because
picking zero or more things is exactly what a checkbox group is. Arrow-key
navigation, group semantics and checked state all come free. The inputs are visually invisible but still focusable, and the chip is styled through
:has(input:checked). No div can be talked into any of that.

It also means the checkbox is the state — nothing is mirrored into a JS
variable that can drift out of sync with what a screen reader announces.

A live region that says something useful. Filtering is pointless if you can't tell what's left, so the count sits in an <output> — the native "result of a calculation" element, which carries an implicit status role and needs no ARIA at all. It announces "Showing 4 dishes on Small Hours menu." after every change, debounced by 250ms so typing doesn't machine-gun it.

And one live region I deliberately removed. The header clock started life as role="status". It updates every 30 seconds — so it would have read the time aloud twice a minute, forever. A kitchen changeover is worth announcing once, under the menu, where it changes what you can order. The clock is not.

<details> instead of a JS modal for the ingredient lists. Native, keyboard operable, works with scripting off, and screen readers already know how to announce it. I saved <dialog> for the one genuine modal moment — the booking confirmation — where showModal() gives me the focus trap, Esc-to-close and focus restoration for free.

novalidate, deliberately. Native validation bubbles vanish on blur, can't be styled, and aren't announced consistently. So the form owns its messaging: aria-invalid on the field, the message wired up through aria-describedby, and a role="alert" summary that takes focus on a failed submit. Fields only re-validate once they've already been marked wrong — nobody wants an error the first time they tab out of an empty box.

Plus the usual, done properly: a skip link, landmarks with aria-labelledby, correct heading order, one focus style everywhere that clears 3:1 in both themes, 44px touch targets, <time datetime>, a forced-colors fallback so selection survives High Contrast mode, and a full prefers-reduced-motion block.

Night by default

It's a nocturnal diner, so it's dark by default and light is the "day shift". A stored choice wins; otherwise it follows the OS. Every colour resolves through one data-theme attribute on <html>, so nothing needs a second definition per component.

localStorage access is wrapped — it throws outright in some privacy modes, and a theme toggle is not worth a broken page.

One bug worth mentioning

The neon sign's glow is deliberately larger than the sign itself
(inset: -18%), which quietly added 60px of horizontal scroll on narrow
screens. Absolutely-positioned children still contribute to document width. overflow: hidden on the hero section fixed it — but I only found it by measuring scrollWidth against clientWidth at four widths, not by looking. Worth adding to your own checklist.

Thanks for reading. The whole thing is three files and no dependencies, so
it's easy to pull apart if any of it is useful to you.

Code is MIT licensed and on GitHub.

The Dabba — the box somebody packed for you before you were awake

Maneesh Thakur — Sun, 16 Aug 2026 12:21:52 +0000

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

Inspiration

The brief's quiet line is "or the dish you grew up eating." My other four entries all answered it with a dish. This one answers it with the box.

A dabba isn't food. It's four steel tins in a wire frame, and the reason it belongs in a comfort food challenge is that nobody ever packed one for
themselves at seven in the morning. Somebody else did. That's the whole
subject — the dal, the rice, the chapatis and the sabzi are just the evidence.

There was a technical reason too. Four pieces in, I'd drawn clay, glass, water, fire and meat, but never metal — and metal is the one material where the usual approach fails outright. It turned out to be the most interesting thing in the set.

Everything here is a div, a gradient or a shadow. No SVG, no images, no
canvas.

Demo

Press Pack it up. The three loose boxes travel back into the frame in
order, the sabzi box shuts where it stands, the lid seats on top and the wire clamp slides down the posts to hold it all together.

Journey

Steel is a mirror, not a grey gradient

This is the thing I'd keep from the whole build.

My first tins were a light-to-dark ramp and they looked like painted
plastic. The mistake is thinking of metal as a colour. A polished cylinder is a mirror bent into a curve — what you are drawing isn't the object, it's the room reflected in it, squeezed into vertical bands. Bright where it catches the window, dark where it catches the shadow under the table, bright again at the edge where the curve turns away.

So the band has fourteen stops and no even spacing anywhere:

--steel-band: linear-gradient(90deg,
  #3d454b  0%,  #78838c  5%,  #c2cbd3 13%,  #eff4f9 19%,
  #a9b4bc 27%,  #6d777f 37%,  #586169 45%,  #919ba4 55%,
  #dce3e9 63%,  #f8fbfe 69%,  #b3bdc5 77%,  #778189 85%,
  #474f56 93%,  #6a737b 100%);

The unevenness is the point. A real reflection has no rhythm, and the moment your stops fall at tidy intervals the eye reads gradient instead of metal.

The second half is anisotropy. Brushed steel scatters light along the
grain, so the highlight smears in one direction instead of pooling in a spot. On a spun tin the grain runs around the cylinder — so the grain layer is horizontal while the reflection bands are vertical, and those two crossing at right angles are what separates steel from chrome.

--steel-grain: repeating-linear-gradient(0deg,
  rgba(255,255,255,0.06) 0 0.07cqw,
  rgba(0,0,0,0.055)      0.07cqw 0.15cqw,
  transparent            0.15cqw 0.33cqw);

One more thing, which cost nothing and fixed a lot: three cylinders showing an identical reflection reads as computer-generated, because real objects stand in different places and mirror different parts of the room. Oversizing the band to 118% and sliding each box to its own offset gives every tin its own reflection out of one shared gradient.

.box__body            { background-size: 118% 100%; }
.box--dal   .box__body { background-position:  6% 50%; }
.box--rice  .box__body { background-position: 76% 50%; }

The mouth is the camera

The four foods are the only colour in the picture, and for a long stretch two of them were unreadable.

The wells were 26 × 6.4cqw — a 4:1 ellipse. Dal and rice were fine, because a uniform texture survives being squashed flat. But the chapatis and a chunky sabzi turned to mush, and no amount of redrawing them helped.

The wells were the bug. Opening the mouth is the same as raising the
camera — food has to be looked down into, and at 4:1 there was simply no vertical room for anything with a shape in it. Going to 8cqw on an 11cqw box means the mouth is nearly as tall as the tin, which sounds wrong and looks right.

A sector is an ambiguous shape

The chapatis went through two complete rewrites and the lesson is about
legibility, not technique.

Version one was four chapatis folded into quarters. A quarter-fold is a
sector, and a sector is genuinely elegant in CSS — one square with a single corner rounded to 100%, no clip-path anywhere:

width: 11.4cqw; height: 11.4cqw;
border-radius: 0 100% 0 0;

It also didn't work. At this viewing angle a sector is an ambiguous shape — it could be bread, or a wedge of anything — and four of them in the same pale wheat merged into one smear. I outlined them, fanned them, enlarged them. Still a smear.

A stack is unambiguous. Round flatbread piled flat is the most recognisable form bread takes. So it's four discs, each nudged up 0.6cqw from the one below so the pile shows its thickness as layer edges along the near rim — and those edges do all the work of saying there are several of these, which four separate shapes had been failing to say.

The top one is folded in half and laid across, which is both the fold I wanted and the thing that stops the stack reading as one big pancake. A half-fold seen from above is a dome — flat edge towards you, curve away — which is a single border-radius and reads as folded instantly.

Worth saying plainly: the elegant version lost to the obvious one.

Transforms apply right to left, and it matters

While the sectors were still in, they had to be rotated and foreshortened. This is correct:

transform: scaleY(0.46) rotate(-20deg);

Transforms apply right to left, so that rotates the fold in true square space and flattens it afterwards. Written the other way round the shape is squashed first and the rotation then shears it — the folds looked bent rather than laid down, and I spent a while adjusting numbers before reading the line properly.

The same principle survives in the lid. When it lifts onto the stack it travels 46cqw upward, which is much closer to eye level, so the same circle must be far more foreshortened up there:

.scene.is-packed .lid {
  transform: translate(-36.5cqw, -47.6cqw) rotate(0deg) scaleY(0.62);
}

That scaleY is the whole illusion. Without it the lid is a disc sliding across the picture, and pressing the button looks like nothing happening — which is exactly how the first version felt.

The arc is two elements

Everything moved on one transform at first, and the packing felt like a
machine rather than like hands.
Two changes fixed it. The first: horizontal travel lives on .box and
vertical on an inner .box__lift, running different curves — X on a plain ease, Y with a slight overshoot so the box settles instead of arriving. Nothing physical moves diagonally in a straight line at constant proportion.

The second is my favourite detail in the piece. The contact shadow is on
.box, so it inherits the horizontal travel but not the vertical — the shadow stays down on the table while the box rises off it. One line, and it's the cheapest possible way to make a lift read as a lift.

Sequence, not a chord

You cannot put the lid on before the boxes are in, so now it doesn't: dal,
rice, chapatis, mouths go dark, lid, clamp. About 2.2 seconds.
The part that isn't obvious is that opening has to reverse the order, not just the direction — clamp, lid, chapatis, rice, dal, food, steam. So the delays are declared on both states rather than shared:

.box           { transition: transform 0.8s var(--travel-x) 0.9s; }
.box--chapati  { transition-delay: 0.75s; }

.scene.is-packed .box--dal     { transition-delay: 0s; }
.scene.is-packed .box--chapati { transition-delay: 0.45s; }

Reversing a sequence is not the same as playing it backwards, and CSS will not work that out for you.

The tiled-texture trick has a scale limit

In an earlier piece I made blistered skin out of two tiled dot-grids at
deliberately mismatched sizes — because the tiles never align, the pattern they beat out reads as random. It's cheap and it's convincing.
I reused it for rice and it failed loudly: at this size the dots are big enough to see individually, so the eye locks onto the lattice and reads mesh.

The fix was to stop asking it to be the rice. There's a third grid now so no two ever line up, the whole thing is turned down to 40% and rotated 9° off-axis so there's no shared horizontal to latch onto — and fourteen grains are drawn individually on top. The grids are texture under the rice; the grains are the rice.

A trick that works at one scale is not a technique. It's a trick.

Composition is occlusion

My first arrangement had the carrier and the boxes in a row with clear air
between them. That's an exploded diagram, not a photograph.
Real still lifes overlap, and occlusion is most of what builds depth. The boxes now lap over the frame and each other, each one lower in frame than the last, because lower reads as nearer. The carrier is dead centre so the packed stack fills the frame rather than sitting off to one side with half the picture empty — which is what it did until I looked at a screenshot properly.

One container query, zero breakpoints

Every dimension is in cqw off a single container-type: inline-size, and the frame is capped by viewport height so the page never grows a scrollbar. Same as the other four.

Accessibility

role="img" with a description, everything inside aria-hidden, a real
<button> with aria-pressed.

The part that isn't decoration: the aria-label swaps with the state. An open dabba with four foods in it becomes a closed steel tin, and a screen reader being told it's still looking at dal and rice would simply be wrong.

prefers-reduced-motion keeps both states reachable — they arrive instead of travelling. Less movement, not less picture.

Code is MIT licensed and on GitHub.

Slow Turn — nine birds, one fire, and twenty minutes of waiting

Maneesh Thakur — Sun, 16 Aug 2026 10:11:00 +0000

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

Inspiration

The other three pieces in this set are quiet. A fridge at 2am, a cup of chai, a pan of eggs. This one is the opposite: a whole tandoor of birds turning over a fire, which is the most theatrical way anyone has ever cooked anything.

The comfort here isn't the eating. It's the waiting — standing in front of the glass while nine chickens go round, knowing yours isn't ready, watching it anyway. Every city has a window like this and everybody has stood at one.

Skinless and deep red, the way tandoori actually is, because the marinade
becomes the colour when you take the skin off — and because a cabinet full of red against a cold grey kitchen means the fire is the only warm thing in the frame. Same lesson the fridge piece ended on, used on purpose.

Everything here is a div, a gradient or a shadow. No SVG, no images, no
canvas.

Demo

Press Take one out. A bird leaves the rod, the cabinet falls out of focus, and a plated one rises into the foreground — onion rings, mint chutney in a ramekin, mayo, lemon, coriander, still steaming. The gap it left on the rod stays a gap.

Journey

The rotation is not a rotation

This is the whole piece, and it nearly sank it.
The rods spin about their own long axis, and that axis runs left to right across the screen. So the birds are turning towards and away from you. In CSS that is rotateX — and rotateX on a flat shape squashes it vertically and flips it, like turning a sheet of paper edge-on. It looks like nothing on earth, and it is the obvious first attempt.

The way out is that a chicken on a spit is an ellipsoid about that same axis, so its silhouette barely changes as it turns. Watch a real rotisserie: you read the rotation almost entirely off the surface. Char climbs over the crest and vanishes; fresh char comes round from underneath.

So the silhouette is held completely still and the char scrolls vertically inside it:

.bird__char {
  position: absolute;
  top: -100%;
  height: 300%;          /* three tiles tall */
  background: repeating-linear-gradient(177deg, /* char bands */ );
  animation: turn 16s linear infinite;
  animation-delay: var(--phase);
}
@keyframes turn { to { transform: translateY(33.3333%); } }

Three hundred percent tall, moving exactly one third, inside a parent with
overflow: hidden — so the loop is seamless and never shows a join. Sixteen seconds a turn.

There is not one degree of rotation on any bird body. The only actual
rotate is a ±1.1° wobble, because a spitted bird is never perfectly balanced.

One detail I'd defend: birds on the same rod share a --phase and turn in
lockstep, because it is one rod. The three rods are offset from each other. Getting that wrong makes a cabinet look like a screensaver.

A chicken is its drumsticks

My first bird was one ovoid with a small leg attached. It read as a bread roll, and no amount of work on the ovoid fixed it.

Looking properly at reference photos, the thing your eye locks onto is not the torso at all. It is two drumsticks, angled apart, bone knuckles out, pointing back along the spit. The torso behind them can be close to a plain ellipse and nobody looks twice.

So the bird became six overlapping parts sharing one gradient, drawn in
anatomical order: far drumstick, thigh mass, torso, wing, near drumstick, neck.

Two things do most of the work. The near leg is drawn in front of the body and the far leg behind it, which is the entire three-dimensional read with no 3D anywhere. And each drumstick chars hardest at the ankle, because it is thinnest and closest to the flame — without that dark note a drumstick is just a sausage.

`filter` inherits, and it cost me two attempts

The flames stayed a warm smudge through two rounds of "fixing" them, and the reason is worth the whole article.

A flame needs a soft halo and a hard bright core; the core is what makes it read as fire rather than as glow. So I built exactly that — a blurred parent with a barely-blurred core inside it:

.flame        { filter: blur(0.3cqw);  }   /* halo   */
.flame::before{ filter: blur(0.13cqw); }   /* "core" */

That cannot work. A filter on a parent rasterises the parent and every
descendant, so the core was being blurred 0.3 + 0.13. There was never a hard edge anywhere in the flame to see. Adding a sharper core to a blurred parent achieves nothing at all — a fact I confirmed twice before reading my own code properly.

The fix is that the parent carries no filter:

.flame         { /* no filter, no blend mode */ }
.flame::before { filter: blur(0.8cqw);  }   /* halo, paints first */
.flame::after  { filter: blur(0.08cqw); }   /* core, paints on top */

Blend modes need somewhere to go

Same flames, second bug, and it is one I had already written up in the fridge piece and then walked straight back into.

The flames used mix-blend-mode: screen. Screen adds light — and .glow had already flooded the bottom of the cabinet with orange, so the flames were adding brightness to a region with no headroom left. They washed out precisely where they should have been sharpest.

They now use no blend mode at all, and the ambient glow came down from 0.62 to 0.44. The fire has to be brighter than the light it casts, which sounds obvious written down and was not obvious at all in the file.

Blistering out of three grids that do not line up

Tandoori skin is covered in small raised blisters, and a perfectly even
gradient is the single biggest tell that something was drawn rather than
cooked.

Fifty hand-placed gradients would do it. This is cheaper:

background-image:
  radial-gradient(circle, rgba(255,201,138,0.30) 0 24%, transparent 27%),
  radial-gradient(circle, rgba(16,4,1,0.34)      0 20%, transparent 23%),
  radial-gradient(circle, rgba(255,168,96,0.22)  0 17%, transparent 20%);
background-size: 2.15cqw 1.62cqw, 1.63cqw 2.27cqw, 1.19cqw 1.07cqw;

Three tiled dot-grids at deliberately mismatched sizes. Because the tiles never line up, the pattern they beat out reads as random — and at this scale it is indistinguishable from actually being random.

Sometimes you move the camera instead

The plate was always going to have to cover the fire, and the fire is the best thing in the picture. That looked like a dead end for a while.

The answer was that the fire stops being the subject:

.scene.is-taken .cabinet {
  filter: blur(0.45cqw) brightness(0.58) saturate(0.82);
  transform: scale(0.985);
}

A rack focus. Once the machine is background, covering it is not a loss — it is the point. The bird also leaves the rod downward and to the right, towards where the plate rises from, so the two read as one bird rather than two events.

The plated bird is lit from above, while every bird in the cabinet is lit from below by the fire. That reversal is the strongest single signal that it is out of the machine.

The bone that looked like a fingernail

A small one, but it is the kind of mistake that is invisible until someone says it out loud.

My drumstick bone was 1.7cqw wide by 0.82cqw tall with a left-to-right
gradient. That is precisely the recipe for a fingernail, because a nail is a flat pale oval lying along the end of a finger.

A drumstick bone ends in a knob. So: nearly round instead of long, and a
radial gradient with the highlight up and to the left, which gives it a top and a side instead of a flat face.

/* before — a nail */
width: 1.7cqw; height: 0.82cqw;
background: linear-gradient(92deg, #8e7357, #c6b393, #e8dac2);

/* after — a knuckle */
width: 1.6cqw; height: 1.45cqw;
background: radial-gradient(62% 58% at 34% 28%, #fdf7ea, #e5d7ba 44%, #b39d79 78%, #806d51);

One container query, zero breakpoints

Every dimension is in cqw — 1% of the scene's own width — off a single
container-type: inline-size, and the frame is capped by viewport height so the page never grows a scrollbar. Same approach as the other three pieces.

The sprinkle of JavaScript

About fifty lines, for two things CSS could not do: scatter the smoke so no two wisps ever line up twice, and take a bird off the rod.
Both are optional. Every moving part has a hand-authored fallback in the
stylesheet, so emptying the JS pane costs you the button and nothing else.

The one part that is not decoration is the label. The scene genuinely
changes what it depicts, so aria-label swaps with it — otherwise a screen reader would still be told it is looking at nine birds on a rod while a sighted viewer is looking at a plated dinner.

Accessibility

role="img" with a description, everything inside aria-hidden, a real
<button> with aria-pressed and a label that changes with state.

prefers-reduced-motion freezes nine turning birds and seven flames at a pose that still reads as cooking rather than at an empty one, and the plate still arrives — it just does not fly in. Reduced motion means less movement, not less picture.

What I'd tell anyone attempting one of these: when something looks wrong and tuning the numbers does not help, the bug is usually structural, not aesthetic. My flames were not badly tuned. They were being blurred by a parent I had forgotten applies to its children. I adjusted colours twice before I read the cascade.

Code is MIT licensed and on GitHub.

Soft Boil — six minutes, and you cannot get it wrong

Maneesh Thakur — Sun, 16 Aug 2026 06:58:33 +0000

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

Inspiration

My other two entries were about a moment and a ritual. This one is about the opposite: the dish you fall back on when you have no skill, no energy and no plan. Boiled eggs are what you make when you cannot cook. Six minutes, one pan,and the comfort is precisely that it is not possible to get it wrong.

Two choices made it worth drawing rather than just worth eating.

A glass bowl, so you can see the boil. In a steel pan the interesting half of this is hidden. Glass also turned out to be the exact opposite problem to the terracotta in my chai piece — unglazed clay is matte and forgives a sloppy gradient, glass shows you every single one.

An induction hob, for the light. I finished the fridge piece saying the one piece of advice I'd give is pick a scene with a light source in it. So I did it again on purpose. The element ring is the only warm thing in an otherwise cold grey kitchen, and it lights the water from underneath.

Everything here is a div, a gradient or a shadow. No SVG, no images, no
canvas.

Demo

Press Turn off the heat and give it a few seconds. The ring dies back, the bubbles thin out, and the eggs slowly stop moving — then put it back on and watch the pan come to the boil in stages. That build-up is the part I'd most like you to see, and it's the whole subject of this post.

Journey

Nothing in this picture is transparent

The obvious way to draw a glass bowl is backdrop-filter. I'd advise against building a picture on it — support is uneven enough that the piece falls apart somewhere, and it's expensive.

So the transparency is painted. The water is drawn first as its own element, and then a front wall of highlights sits over the top of it: two vertical speculars down the sides for the curve of the glass, a soft wash across the middle for the thickness of the pane, and a rolled lip at the top, which is the one place glass is genuinely opaque enough to draw as a solid.

.glass {
  background: linear-gradient(101deg,
    rgba(255,255,255,0.20) 0%,   rgba(255,255,255,0.00) 13%,
    rgba(255,255,255,0.07) 47%,  rgba(255,255,255,0.00) 84%,
    rgba(255,255,255,0.17) 100%);
}

Read .glass as the pane you are looking through. Everything that lives in the water is a sibling behind it, clipped by the water's own border-radius, so no egg can drift out through a wall however hard it gets shoved.

An egg is an ellipse with two border-radius axes — fatter at the bottom than the top. Worth doing that rather than reaching for clip-path, because a border-radius shape stays correct under rotate and an equivalent polygon does not.

border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%;

Two numbers run the entire picture

This is the part I'd keep from the whole build.

The scene has a switch, and my first version was symmetric: turn it off and everything faded out, turn it on and everything snapped back to a full rolling boil. Which is nonsense. A pan does not do that. Heat has to arrive before the water can boil, and the water has to boil before it can move an egg.

Getting that lag right meant the picture needed to be a quantity, not a
state. So it runs on two numbers:

@property --heat { syntax: '<number>'; inherits: true; initial-value: 1; }
@property --amp  { syntax: '<number>'; inherits: true; initial-value: 1; }

--heat is how hot the element is. --amp is how hard the water is throwing the eggs about. Both 0 to 1.

@property is the whole trick. An unregistered custom property is just a string, and a string cannot be transitioned. Registered as a <number> it interpolates like any other animatable value — so a single transition drives the ring, the bubbles, the churn, the steam and the eggs together:

.scene {
  --heat: 1; --amp: 1;
  transition: --heat 4s ease-in,
            --amp  7s cubic-bezier(0.4, 0, 0.5, 1) 2.6s;
}

--amp doesn't start for 2.6 seconds, so there's a real stretch where the ring is glowing and the eggs still haven't moved.

Every element then just reads the number. The ring grows and warms in colour at the same time, because a cold element doesn't light up dim-orange — it lights up a small sullen red and spreads outward as it takes:

transform: translateX(-50%) scale(calc(0.22 + 0.78 * var(--heat)));
filter: blur(0.5cqw)
        brightness(calc(0.34 + 0.66 * var(--heat)))
        saturate(calc(1.9 - 0.9 * var(--heat)));

The bubbles each carry their own threshold, spaced by index, so they arrive a few at a time instead of all at once:

--vis: clamp(0, calc((var(--heat) - var(--i) * 0.062) * 7), 1);

Since the positions are scattered independently, the first few appear in random places — it reads as a pan starting to catch, not as a row filling up left to right. The surface churn holds off entirely until --heat clears 0.55, because a surface only breaks at a genuine rolling boil.

Cooling is not warming played backwards, so the timings differ by
direction. Going off, the boil drops away first and the element stays warm
after it, the way a hob actually behaves. It's also slower overall — pans lose heat more reluctantly than they gain it.

.scene.is-off {
  --heat: 0; --amp: 0;
  transition: --amp  5s   ease-out,
              --heat 6.5s ease-out 1s;
}

An animation beats a declaration, silently

I hit this twice in one build, the second time after I thought I understood it, so it earns its own heading.

If an element has a running animation that touches opacity, then any
opacity declaration in your rule is ignored. Not overridden at some
specific moment — ignored for the entire duration. Animations sit above normal declarations in the cascade.

Which meant this did precisely nothing:

.hob__ring {
  opacity: calc(0.92 * var(--heat));            /* dead code */
  animation: ringPulse 3.4s ease-in-out infinite;  /* ...because of this */
}

The ring pulsed away at full brightness with the hob switched off, and no
amount of staring at --heat in DevTools explained it, because --heat was correctly zero the whole time. The fix is to stop fighting the animation and
multiply inside it:

.hob__ring { --vis: var(--heat); }
.spill     { --vis: calc(var(--heat) * var(--heat)); }

@keyframes ringPulse {
  0%, 100% { opacity: calc(0.82 * var(--vis)); }
  50%      { opacity: calc(1    * var(--vis)); }
}

Custom properties substitute live, so the keyframes pick up the new value every frame. Keep the plain declaration too — reduced motion drops the animation, and then it becomes the only thing setting opacity at all.

The same rule is why the bubbles gate their opacity through --vis rather than setting it directly. Once you've been bitten, you start recognising it: the value is obviously right and the pixels obviously disagree.

Going still without ever stopping

Same lesson, applied to movement.

The eggs need to come to rest when the boil dies. The obvious approach is to drop the animation and let a transition carry them home:

.scene.is-off .egg { animation: none; }   /* snaps */

It jumps. The moment the animation goes, the computed transform reverts, and the transition often has nothing to interpolate from.

So the eggs never stop. Every offset in the keyframes is multiplied by
--amp:

25% { transform: translate(calc(var(--dx) *  1 * var(--amp)),
                           calc(var(--dy) * -1 * var(--amp)))
                 rotate(calc(var(--r1) * var(--amp))); }

At --amp: 0 every keyframe collapses to translate(0,0) rotate(0deg) and the egg rests exactly where left/top put it. As --amp ramps back up, the same loop simply opens out again. Nothing pauses, nothing restarts, and there's no discontinuity at either end.

Two details that are the difference between water and not-water

Bubbles get bigger as they rise, because pressure drops on the way up.
Leaving that out was the single thing that made my first attempt look like
falling snow played backwards.

0%   { transform: translateY(0) scale(0.35); }
100% { transform: translateY(calc(var(--h) * -1)) scale(1.35); }

Buoyancy is slow. My first easing on the eggs was springy and they read as ping-pong balls. Water doesn't throw things around, it lifts and turns them — so it's a long ease-in-out with rotation that lags the translation.

Percentages don't mean what you want them to mean

Late on I cropped the frame, because there was a band of empty room across the top doing no work, and because the page had grown a vertical scrollbar.

The crop immediately broke the scene, and the reason is worth knowing: I had positioned the room and counter with percentages. Percentages in inset resolve against the element's height, while every other measurement in the piece is cqw — 1% of the scene's width. Change the aspect ratio and the two systems silently slide out of register. Both are cqw now.

The scrollbar itself is worth a line, since it's a general problem with
fixed-ratio art. Capping the width alone isn't enough; it has to be capped by the height available too:

.scene {
  aspect-ratio: 50 / 37;
  width: min(100%, calc((100dvh - 15rem) * 1.35));
}

At this ratio width is 1.35× height, so subtracting the caption, the button and the page padding gives the widest the scene can be and still fit on screen. Whichever limit bites first wins.

One container query, zero breakpoints

Every dimension is in cqw off a single container-type: inline-size. The whole picture scales to any viewport with no media queries and no magic numbers — the same approach as the other two pieces.

The sprinkle of JavaScript

This is the piece where the JS got smaller, and that's the point.

Coming to the boil takes about nine seconds across four overlapping stages, and none of them are timed in JavaScript. The script toggles one class. Everything else is two custom properties transitioning in the stylesheet.

Doing it with setTimeout was my first instinct and it's a trap: every stage becomes a timer that an impatient click can fire twice, and the stages drift apart. There's nothing to double-fire here — toggling the class mid-ramp just reverses the transitions from wherever they'd reached.

The rest of the JS scatters the bubbles and steam so the boil never repeats identically. All of it is optional: every moving part has a hand-authored fallback in the stylesheet, so emptying the JS pane costs you the switch and nothing else.

Accessibility

CSS art is still an image, so it's marked as one — role="img" with an
aria-label describing the scene, everything inside it aria-hidden. The
switch is a real <button> with aria-pressed and a label that changes with the state.

prefers-reduced-motion freezes the boil at a pose that still reads as
boiling, rather than at an empty one, and the switch still works — it just
arrives instead of ramping. Someone who asked for less motion has not asked for less picture.

What I'd tell anyone attempting one of these: if your scene has a state, make it a number rather than a boolean. Registering one custom property with @property bought me a nine-second, four-stage, physically-plausible boil out of two lines of transition — and left the JavaScript with nothing to do but toggle a class.

Code is MIT licensed and on GitHub.

Cutting Chai — the comfort food that isn't food, drawn in CSS

Maneesh Thakur — Sat, 15 Aug 2026 19:33:12 +0000

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

What I Built

A kulhad of masala chai, steaming, on a wooden table. Whole spices scattered round it — star anise, a cinnamon stick, cardamom pods, cloves — and a biscuit leaning against the cup with one bite already gone.

The brief says "the dish you grew up eating", and for a very large number of people the honest answer isn't a dish at all. It's four o'clock, every day, for as long as anyone can remember. Chai isn't a meal, isn't a course, and isn't optional.

The cup matters as much as what's in it. A kulhad is unfired terracotta, thrown by hand, used once and thrown back into the earth — which means it's never quite symmetrical, always a little rough, and it makes the tea taste of wet clay. That roughness is the entire reason I picked this subject: matte clay is far kinder to layered CSS gradients than glass or ceramic will ever be.

Everything here is a div, a gradient, a clip-path or a shadow. No SVG, no images, no canvas.

Demo

Journey

Getting the silhouette right matters more than the shading

My first attempt was technically fine and completely wrong — it read as a
plant pot. I'd made it tall, and tapered the base to about a quarter of the rim width.

A real kulhad is squat, and its base is a bit over half the mouth. Once I fixed the ratio, everything else in the picture suddenly worked. The shading hadn't changed at all.

.cup {
  clip-path: polygon(
    1% 0%, 99% 0%,
    97.5% 13%, 95.5% 26%, 93% 40%, 90% 54%,
    87% 67%, 84% 79%, 81% 90%, 78% 100%,   /* base ends at 78% / 22% */
    22% 100%, 19% 90%, 16% 79%, 13% 67%,
    10% 54%, 7% 40%, 4.5% 26%, 2.5% 13%
  );
}

Eighteen points instead of four, because a hand-thrown cup shouldn't have a single straight edge anywhere.

The clay itself is five stacked gradient layers — throwing rings from the
potter's fingers, a rim light down the left, the shadow side, a specular
bloom, then the body colour:

background:
  repeating-linear-gradient(0deg, rgba(94,46,26,.16) 0 .28cqw, transparent .28cqw 1.5cqw),
  linear-gradient(100deg, rgba(255,220,186,.5) 0 5%, transparent 30%),
  linear-gradient(260deg, rgba(48,20,8,.62) 0 7%, transparent 40%),
  radial-gradient(52% 38% at 32% 24%, rgba(255,228,198,.4), transparent 68%),
  linear-gradient(180deg, #d09468, #b9714a 44%, #8c4a2c 84%, #5e2e1a);

That first line — the throwing rings — is what stops it looking like a
rendered 3D cone.

Steam is the whole trick, and it took three goes

First go: invisible. Low-alpha white, heavily blurred, over a dark brown room. It vanished.

Second go: a chimney. I brightened it, but every wisp was positioned at left: 0 inside a zero-width container and centred with translate(-50%), so all five rose from the same point. Real steam doesn't do that.

Third go: right. Two changes. Each wisp got its own horizontal origin, and the whole group got mix-blend-mode: screen so it adds light to the room instead of laying grey film over it.

.steam { mix-blend-mode: screen; }
.steam i { left: var(--x); }        /* not left: 0 */

There's a third subtlety I only found by staring at it: each wisp's gradient fades in over its first quarter, so anchoring the group at the liquid surface leaves a visible gap between cup and steam. The steam has to start inside the cup, where the cup itself hides the transparent lead-in.

The bite is a mask, not a drawing

The most satisfying five lines in the file:

.biscuit {
  background: radial-gradient(circle, rgba(140,88,36,.42) 0 .28cqw, transparent .3cqw)
              1cqw 1cqw / 2.7cqw 2.7cqw,   /* docker holes, tiled */
              linear-gradient(170deg, #ecc78c, #d8ac6b 52%, #b98a4a);
  mask-image: radial-gradient(circle at 96% 16%, transparent 3.2cqw, #000 3.35cqw);
}

mask-image punches a real hole through the biscuit — crumb pattern, toasted edge, box-shadow and all. Overlaying a background-coloured circle would have faked it, and would have broken the moment anything passed behind.

Eight petals, one custom property

The star anise is one rule and an index. Each petal is the same element
rotated by its own --i:

.anise i {
  transform: rotate(calc(var(--i) * 45deg)) translateY(-2.6cqw);
}

<i style="--i:0"></i><i style="--i:1"></i> … <i style="--i:7"></i>

Rotate-then-translate is the whole radial-layout pattern, and it's worth
keeping in your pocket.

Sizing: one container query, zero breakpoints

Every dimension is in cqw — 1% of the scene's own width — off a single
container-type: inline-size. No media queries anywhere. The same technique let me drop a simplified version of this cup straight into the hero of my landing page entry without touching a single number.

The sprinkle of JavaScript

About forty lines, for two things CSS genuinely can't do: randomise the steam so no two wisps ever line up the same way twice, and dunk the biscuit.

Both are enhancements. The steam has hand-authored nth-child fallbacks and the biscuit sits exactly where it should — empty the JS pane and you still get the finished picture, you just lose the dunk.

One detail worth stealing: the dunk button re-enables itself on animationend, but reduced-motion users never get an animationend — so there's an explicit fallback rather than a button that stays disabled forever.

Accessibility

CSS art is still an image, so it's marked as one: role="img" with an
aria-label describing the scene, everything inside aria-hidden. The dunk is a real <button>, and prefers-reduced-motion stills the steam without hiding it — reduced motion means less movement, not less picture.

This is my second CSS Art entry this round, alongside Midnight Fridge
Raid. Two very different answers to the same question: comfort food isn't a recipe, it's a time of day.

Code is MIT licensed and on GitHub.

Midnight Fridge Raid — comfort food isn't a dish, it's 2am

Maneesh Thakur — Sat, 15 Aug 2026 19:23:20 +0000

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

Inspiration

The brief lists a steaming bowl of ramen, a stack of pancakes, a perfectly cut slice of pie — and then, quietly, "or the dish you grew up eating."

That last one is the real prompt. Comfort food isn't a recipe. It's a moment, and the most honest one I could think of isn't a plate at all: it's standing barefoot in a dark kitchen at 2am, deciding whether last night's leftovers count as a meal. (They do.)

So I drew the moment instead of the meal.

There was a practical reason too. Ramen and pancakes are the most-drawn subjects in every round of this challenge, and they're bright, warm-toned and daylit — a feed full of them blurs together. A dark scene with a single hot light source stands out on contrast alone, and it happens to be far more interesting to build: the fridge is just a box, the light is the whole picture.

Everything in the scene is a div, a gradient, a clip-path or a shadow. No SVG, no images, no canvas.

Demo

Journey

The subject is the light, not the fridge

Three stacked cones do the work — a hot core at the opening, a wash across the back wall, a pool thrown along the floor. My first attempt used linear gradients and looked like grey fog lying on the wall. One change fixed it:

/* before — fog */
background: linear-gradient(90deg, rgba(255,197,122,.5), transparent 76%);

/* after — light */
background: radial-gradient(128% 66% at 0% 50%,
  rgba(255,244,216,1)   0%,
  rgba(255,214,148,.62) 18%,
  rgba(255,172,84,.22)  44%,
  transparent           76%);

Anchoring the gradient at the opening (at 0% 50%) rather than running it across the element means the falloff radiates from the source, the way light actually behaves. Same element, same blur — completely different picture.

A clipped cone also shows its own edges. clip-path gives you a hard-edged polygon and blur() softens it, but the straight rails still read. A mask-image on the cross axis feathers them properly:

clip-path: polygon(0 12%, 100% 0, 100% 100%, 0 88%);
mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent);

The door has two sides, and it should

My first version was one panel. Shut it and you were looking at the racks — because a single plane can only ever show you one thing.

A fridge door has an outside, and what's on the outside is the whole point of a fridge door. So it became two skins on one hinge:

.door__outer, .door__face { backface-visibility: hidden; }
.door__outer { transform: translateZ(0.45cqw); }        /* notes */
.door__face  { transform: rotateY(180deg) translateZ(0.45cqw); }  /* racks */

That's the flip-card pattern, but the parent never rotates a full 180° — it swings from -3° to -64°. The swap still happens by itself, somewhere mid-swing, at whatever angle the door's plane turns away from the camera. No threshold to pick, no JavaScript. The browser works out which face you can see and draws only that one.

Two details fell out of it. The inner face is mirrored by its own flip, so its lighting gradient had to reverse from 90deg to 270deg to stay brightest at the hinge. And the notes are drawn almost black — at 2am in an unlit kitchen a sticky note is a shape and a smudge of colour, so the ruled lines tell you it's handwriting while giving you no chance of reading a word.

Sometimes you fix the camera, not the artwork

The inside of the door is the best part of a fridge — milk, water, beer, the one bottle nobody remembers buying — and mine was three grey smears. The problem wasn't the drawing. The door only projected about 11cqw wide on screen, so anything painted on it turned to mush.

.fridge__lower {
  perspective: 90cqw;
  perspective-origin: 200% 50%;   /* was 151% */
}

Pushing the vanishing point further right and easing the swing back from -64° to -58° widened the projection by roughly half — the difference between "detail is impossible here" and "detail is worth doing".

Then the bins. What makes a door read as a door isn't the bottles, it's the occlusion: you never see a whole bottle, only necks and shoulders standing above a moulded lip. And one bright inset line is what turns a dark band into something you could hook a finger over:

.bin { height: 42%; box-shadow: inset 0 0.34cqw 0 rgba(255,214,166,.75); }

A later fix mattered just as much — a recess behind the bottles, taller than the front face, so a band of dark tray interior shows above the lip. Without it the bottles read as balanced on a ledge rather than standing in a tray.

`clip-path` clips children too

My takeout carton is a clip-path trapezoid, and its wire handle simply vanished — as did the milk carton's cap and the cake's frosting. All three were children of clipped parents. Moving the clip onto a ::before and leaving the parent unclipped brought them all back.

Blend modes aren't free wins

There's a vent cut into the back wall, and cold falls out of it — the same trick as steam, run in reverse, because cold sinks.

My first attempt used mix-blend-mode: screen, copied straight from the light cones outside. It was completely invisible, and the reason is obvious in hindsight: screen adds light, and the inside of a lit fridge is already near-white. There was nothing left to add. Cold air has to sit on the warm light and cool it, so it's plain alpha, no blend mode at all.

Blend modes only work when the backdrop has room to move in that direction.

Depth when you have no room for it

Comparing against reference photos, the thing my fridge was most obviously missing was density. Real fridges are packed. Mine had three items a shelf.

But the cavity is only 31cqw wide and the open door hides a third of it, so there was no horizontal room. The answer was to build backwards instead — a second row sitting higher on each shelf, which reads as further back:

.backrow {
  bottom: 3.4cqw;                          /* higher = further back */
  filter: brightness(0.72) blur(0.09cqw);  /* dimmer + softer = further away */
}

Three properties, no extra width, and the shelves look stocked.

The crisper drawer does the opposite thing with the same goal: the vegetables are drawn at full strength and then buried behind a translucent panel with backdrop-filter. It's the only place in the picture where hiding detail is what adds it.

One container query, zero breakpoints

Every dimension is in cqw — 1% of the scene's own width — off a single container-type: inline-size. The whole thing scales to any viewport with no media queries and no magic numbers anywhere.

The sprinkle of JavaScript

This round allows a little JS, so I used about thirty lines for two things CSS genuinely couldn't do: scatter the dust motes randomly so the loop never repeats identically, and let you shut the door again.

Both are strictly enhancements. The door's steady state is open and the motes have hand-authored nth-child fallbacks — delete the JS and you still get the finished picture. The script also waits for DOMContentLoaded and bails quietly if its elements are missing, because a script that can't find its button should cost you the button and nothing else.

Accessibility

CSS art is still an image, so it's marked as one — role="img" with an aria-label describing the scene, everything inside aria-hidden. The toggle is a real <button> with aria-pressed. And prefers-reduced-motion stills the door, the flicker, the dust and the cold air without hiding any of it: reduced motion means less movement, not less picture.

What I'd tell anyone attempting one of these: pick a scene with a light source in it. Light is the most rewarding thing CSS draws, and it does more for a picture than any amount of detail work on the objects.

Code is MIT licensed and on GitHub.

I mapped ~150 AI/ML tools by "concept depth" — each with a link to read and a link to the code

Maneesh Thakur — Thu, 23 Jul 2026 18:37:29 +0000

Most "AI tool" lists are either a wall of 500 links or SEO listicles. I wanted something we all could actually learn from, so I built a leveled map.

🔗 Live: https://maneesh-kumar-thakur.github.io/self-serve-learnings-4-all/
⭐ Code: https://github.com/maneesh-kumar-thakur/self-serve-learnings-4-all

The idea

~150 LLM & Generative AI tools sorted by concept depth, not popularity:

Level 0 — use ready-made AI, no theory (ChatGPT, Perplexity)
Level 1 — run/build with no code (Ollama, Flowise)
Level 2 — code with libraries (LangChain, HF Transformers)
Level 3 — build, fine-tune & ship (PEFT, vector DBs, LangGraph)
Level 4 — research & scale (vLLM, DeepSpeed, FlashAttention)

Every tool has two links: 📖 Read (an approachable article to understand
it) and 🐙 Code (the repo or homepage). Nothing AI-generated — the links come
from real docs, tutorials, and courses, and a weekly GitHub Action re-checks all
~300 of them so they don't rot.

Under the hood

One static HTML page (no framework, no tracking), client-side search +
autocomplete + filters, data in a single file, CC0.

What's next

Classical/core ML, Computer Vision, and MLOps are the next topics. What tools am I missing, and where would you move something up or down a level?

RepoReady — Instant AI-powered onboarding for any GitHub, GitLab, or Bitbucket repo

Maneesh Thakur — Sun, 01 Mar 2026 19:52:12 +0000

This is a submission for the DEV Weekend Challenge: Community

The Community

Every developer has felt it: you click a link to a new repository, the file tree opens, and you just... stare. Where do you start? What even is this thing?

The open source contributor community has a deeply broken onboarding experience. READMEs are outdated within months of being written. Architecture docs don't exist. Setup instructions assume you already know the stack. First-time contributors give up before they ever submit a PR.

I've been there. You've been there. Every developer you know has been there.

This project is for that community — for every dev who has ever opened a codebase and immediately felt lost.

What I Built

RepoReady — paste any public (or private) repo URL → get a structured AI-generated onboarding guide in seconds.

No installation. No backend. No data stored. Just open the page and go.

The guide covers five sections automatically extracted from the repo:

💡 What the project does — plain English, no jargon
🧩 Tech stack — every language, framework, and dependency explained
🗂️ Folder structure — what each directory is actually for
🚀 How to get started — setup steps pulled straight from the code
🏁 Where to contribute — suggested entry points for first-timers

After analysis, you can:

⬇ Export as Markdown — download a clean .md file, commit it alongside your codebase
🔗 Share — copy a URL pre-filled with the repo to send teammates

Demo

https://maneesh-relanto.github.io/DevTo-CommunityChallenge-RepoReady/

(https://maneesh-relanto.github.io/DevTo-CommunityChallenge-RepoReady/)

Code

[https://github.com/Maneesh-Relanto/DevTo-CommunityChallenge-RepoReady

How I Built It

Architecture: zero-backend, client-side only

The entire app is a static HTML/CSS/JS project. No server, no API keys stored server-side, no database. Everything runs in the browser.

User Input (Repo URL + AI API Key)
        │
        ▼
┌──────────────────────────────┐
│  Detect platform from URL    │
│  github.com / gitlab.com /   │
│  bitbucket.org               │
└──────────────────────────────┘
        │
        ▼
┌──────────────────────────────┐
│  Platform API call           │
│  • Repo metadata             │
│  • README (first 4000 chars) │
│  • File tree (up to 120)     │
│  • Package manifest          │
│    (package.json / Cargo.toml│
│     / pyproject.toml / etc.) │
└──────────────────────────────┘
        │
        ▼
┌──────────────────────────────┐
│  Structured prompt → AI      │
│  Returns JSON with 5 keys    │
└──────────────────────────────┘
        │
        ▼
┌──────────────────────────────┐
│  Render onboarding guide     │
│  + Markdown export           │
│  + Shareable link            │
└──────────────────────────────┘

File structure

repoready/
├── index.html      # HTML shell + layout
├── package.json    # ESM declaration + npm test script
├── css/
│   └── styles.css  # Design tokens, animations
├── js/
│   ├── app.js      # Main entry — wires everything
│   ├── ai.js       # All 7 AI provider adapters
│   ├── git.js      # GitHub, GitLab, Bitbucket fetchers
│   ├── ui.js       # DOM rendering, export, history
│   └── config.js   # Centralised constants
├── tests/
│   ├── git.test.js     # 17 unit tests
│   ├── ai.test.js      # 16 unit tests
│   └── history.test.js # 12 unit tests
└── README.md

Multi-provider AI

Seven providers, switchable at runtime — user brings their own key (Ollama is fully local, no key needed):

Provider	Models
Claude (Anthropic)	claude-sonnet-4-6, claude-opus-4-6, claude-haiku-4-5
OpenAI	gpt-4o, gpt-4o-mini, gpt-4-turbo
Google Gemini	gemini-2.0-flash, gemini-2.0-flash-lite, gemini-1.5-pro
Mistral AI	mistral-large-latest, mistral-small-latest, codestral-latest
xAI Grok	grok-3, grok-3-fast, grok-2-1212
Groq 🆓	llama-3.3-70b-versatile, llama-3.1-8b-instant, mixtral-8x7b
Ollama 🏠	llama3.2, mistral, codellama, phi4 (runs locally)

Multi-platform Git support

GitHub uses the REST API (/repos/{owner}/{repo}/git/trees/HEAD?recursive=1) to get the full recursive file tree in a single call.

GitLab uses the projects API + a separate /languages endpoint to correctly identify the primary language (GitLab doesn't expose this in the main project object).

Bitbucket required extra work — its /src endpoint is not recursive, so I fetch the root directory and then fan out parallel requests for each first-level subdirectory to build a meaningful tree.

Prompt engineering

The prompt is structured to return strict JSON — no markdown fences, no free text — which makes parsing reliable across all three AI providers. I specifically extract and inject the package manifest (e.g. package.json, Cargo.toml, pyproject.toml) into the prompt so the AI has concrete dependency information rather than guessing from filenames.

Challenges

ES modules over file://
The project uses native ES modules, which browsers block when opened directly from the filesystem (CORS restriction). This bit me during early testing — index.html opened from a double-click was completely silent. The fix is trivial (python -m http.server), but catching it and documenting it clearly matters for contributors.

Bitbucket's flat file tree
Unlike GitHub and GitLab, Bitbucket's /src endpoint returns only the immediate directory listing rather than a recursive tree. I worked around this by fanning out parallel requests to each root-level subdirectory — capped at 20 concurrent requests to stay polite — which gives a meaningful two-level tree in most cases.

AI response consistency
Three different AI providers all produce slightly different formatting, even when instructed to return raw JSON. The parser uses a greedy /{[\s\S]*}/ regex to extract the first complete JSON object from the response, which handles models that wrap JSON in markdown code fences despite explicit instructions not to.

Keeping it zero-dependency
The temptation to reach for a markdown renderer, a UI library, or a bundler is real. I deliberately resisted — the whole project loads from a single <script type="module"> tag. No npm install, no build step, no node_modules. This constraint forced cleaner separation of concerns and makes the project trivially deployable to any static host.

Try It Yourself

Open https://maneesh-relanto.github.io/DevTo-CommunityChallenge-RepoReady/
Pick an AI provider, paste your API key
Enter any repo URL — try one of these to start:
- https://github.com/expressjs/express
- https://github.com/django/django
- https://github.com/rust-lang/rust
Click Analyze →

Source: https://github.com/Maneesh-Relanto/repoready

LearnHub - A Community-First Learning Platform

Maneesh Thakur — Sun, 01 Mar 2026 14:01:03 +0000

This is a submission for the DEV Weekend Challenge: Community

The Community

LearnHub was built for learning communities - the study groups, coding circles, book clubs, bootcamp cohorts, and open-source learning teams that power collaborative education.

These communities face real coordination challenges:

📚 Resource Chaos: Great materials get lost in Slack/Discord messages
🔍 No Discovery: Hard to find quality resources shared by peers
📊 No Visibility: Nobody knows what's been shared, who contributed, or how valuable materials are
⏰ No Structure: Difficult to coordinate learning progression or paths

LearnHub solves these problems by creating a centralized hub where learning communities can organize, discover, and collaborate around shared resources.

What I Built

LearnHub is a modern, community-first learning platform with:

📚 Core Features

✨ Resource Library - Central repository for course materials, links, documents, videos, and code

Add resources with rich metadata (type, tags, difficulty, time estimate)
Pin important resources to highlight them
Full-text search with multi-criteria filtering
Share resources in multiple formats (Plain Text, Markdown, JSON)

⭐ Resource Ratings - Community-driven quality assessment

Rate resources 1-5 stars with optional reviews
See average ratings and member feedback
Build trust through peer validation
Identify high-value materials at a glance

🎯 Learning Paths - Structured learning sequences

Create ordered paths through resources
Set difficulty levels and time estimates
Visualize learning progression
Share curated learning sequences with groups

👤 User Profiles - Showcase member contributions

Public profiles with member stats
Track resources contributed, average ratings, groups joined
Edit profile with custom bio and avatar
See all member contributions at a glance

🌙 Dark Mode - Beautiful theme support

Toggle between light and dark modes
Persistent theme preference
System preference detection
Seamless across all pages

🏠 Group Management

Browse and search learning groups by topic
Create new groups instantly
Join/leave groups with one click
View group members and resources

🎨 Design Excellence

Clean, modern UI with Tailwind CSS
Responsive design (mobile-first)
Smooth animations and transitions
Accessibility-first (WCAG AA+)
Dark mode support
Compact, focused layout

Demo

Live Demo: LearnHub on Cloudflare Pages

Quick Demo Flow:

Homepage - See platform overview with stats
Browse Groups - Explore learning communities by topic
Join a Group - Click any group to join instantly
Explore Resources - View, search, and filter group resources
Add Resources - Share a new resource with your group
Rate Resources - Give feedback with ratings and reviews
View Profile - See your contributions and stats
Create Learning Path - Build a structured learning sequence
Toggle Dark Mode - Try light/dark theme switching

Key Pages:

/ - Homepage with featured groups and stats
/groups - Browse all learning groups
/groups/[id] - Group detail page with resource library
/paths - Learning paths browsing and creation
/profile - User profile with contributions
/about - About LearnHub

Code

GitHub Repository: Maneesh-Relanto/DevTo-CommunityChallenge-LearnHub

LearnHub/
├── client/
│   ├── pages/
│   │   ├── Index.tsx              # Homepage
│   │   ├── GroupsDirectory.tsx    # Browse groups
│   │   ├── GroupDetail.tsx        # Group & resources
│   │   ├── LearningPaths.tsx      # Learning paths
│   │   ├── UserProfile.tsx        # User profiles
│   │   └── About.tsx              # About page
│   ├── components/
│   │   ├── groups/                # Group components
│   │   ├── resources/             # Resource components
│   │   ├── paths/                 # Learning path components
│   │   ├── user/                  # User/profile components
│   │   └── ui/                    # UI primitives
│   ├── context/
│   │   ├── UserContext.tsx        # User state management
│   │   ├── GroupContext.tsx       # Groups state management
│   │   ├── ResourceContext.tsx    # Resources state management
│   │   ├── PathContext.tsx        # Learning paths state
│   │   └── ThemeContext.tsx       # Dark mode state
│   ├── types/
│   │   └── index.ts               # TypeScript interfaces
│   └── App.tsx                    # Main app component
├── package.json
├── vite.config.ts
├── tsconfig.json
└── README.md

Key Stats:

📦 Codebase: ~2,500 lines of TypeScript/React
🎨 Components: 20+ reusable components
🗄️ State Management: 5 Context providers
✅ Tests: 92% passing (48/52 unit tests)
🚀 Build Size: 796 KB (gzipped: 215 KB)
⚡ Performance: No console warnings, optimized renders

How I Built It

🛠️ Technology Stack

Frontend Framework

React 18.3 - Modern UI library with hooks
TypeScript 5.9 - Type-safe development
Vite 7 - Lightning-fast build tool
React Router 6 - Client-side routing (SPA)

Styling & UI

Tailwind CSS 3.4 - Utility-first styling
Radix UI - Accessible component primitives
Lucide React - Beautiful icon library
Custom CSS animations - Smooth transitions

State Management

React Context API - Global state management
Custom hooks - Reusable logic
localStorage - Client-side persistence

Testing & Quality

Vitest 3.2 - Fast unit test framework
React Testing Library - Component testing
TypeScript Strict Mode - Type safety
ESLint & Prettier - Code quality

Deployment

Cloudflare Pages - Static hosting
GitHub Actions - CI/CD (auto-deploy on push)
SPA routing configuration - Client-side navigation

🏗️ Architecture Decisions

Component-Driven Development

Small, focused components with single responsibility
Reusable UI components in /components/ui
Feature-specific components grouped by domain
Props-based configuration for flexibility

State Management Pattern

Context API for global state (User, Groups, Resources, Paths, Theme)
Custom hooks for easy consumption (useUser, useGroups, etc.)
localStorage for persistence across sessions
Centralized action functions for predictable updates

Type Safety

Strict TypeScript mode enabled
Interfaces for all data models
No any types in codebase
Type-safe component props

Performance Optimizations

useMemo for expensive computations (filtering, sorting)
useCallback for stable function references
Lazy routing with React.lazy (when needed)
Optimized re-renders with proper dependency arrays

Testing Strategy

Unit tests for contexts (data logic)
Hook tests with React Testing Library
Component snapshot tests
Integration tests for workflows

🎯 Key Features Implementation

Resource Ratings

// Rating interface
interface Rating {
  userId: string;
  score: number;  // 1-5
  review?: string;
  createdAt: string;
}

// Methods in ResourceContext
addRating(resourceId, userId, score, review)
getAverageRating(resourceId) -> number

Learning Paths

Ordered array of resource IDs
Difficulty level and time estimate
Creator tracking and timestamps
Visual step-by-step progression

User Profiles

Public profile pages
Contribution statistics
Editable profile info (name, bio, avatar)
Member since date tracking

Dark Mode

ThemeContext for global theme state
localStorage for persistence
System preference detection
Tailwind's dark mode utilities

📊 Data Model

// User
{
  id: string
  displayName: string
  bio?: string
  avatarUrl?: string
  joinedGroups: string[]
  createdAt: string
}

// Group
{
  id: string
  name: string
  description: string
  topic: string
  facilitator: string
  members: string[]
  resourceCount: number
  createdAt: string
}

// Resource
{
  id: string
  groupId: string
  type: 'link' | 'note' | 'document' | 'video' | 'code'
  title: string
  description: string
  tags: string[]
  difficulty: DifficultyLevel
  timeEstimate: TimeEstimate
  ratings: Rating[]
  uploadedBy: string
  isPinned: boolean
  createdAt: string
}

// Learning Path
{
  id: string
  groupId: string
  name: string
  description: string
  resourceIds: string[]
  difficulty: DifficultyLevel
  estimatedDuration: TimeEstimate
  createdBy: string
  createdAt: string
}

🚀 Development Workflow

Local Development

   pnpm install
   pnpm dev          # Start dev server with HMR
   pnpm typecheck    # Type checking
   pnpm test         # Run unit tests
   pnpm build:client # Production build

Deployment
- Push to GitHub main branch
- Cloudflare Pages auto-detects build
- Vite builds to dist/spa
- Deployed in ~2 minutes
- SPA routing via _routes.json
Code Quality
- TypeScript strict mode
- No console warnings
- Accessible components
- Responsive design
- Clean code principles

Thank You

Built with ❤️ for learning communities everywhere.

Live Demo: LearnHub
Repository: GitHub

DEV Community: Maneesh Thakur

The 2 AM Call ....

comic-Strip #De-Stress

A leveled map of 149 GenAI tools — sorted by concept depth, not hype

The five levels

Two links per tool

🐾 Translate My Dog - AI Canine Micro-Expression Reader

What I Built

Demo

Code

maneesh-kumar-thakur / devto-challenge-dog-days-edition

dev.to weekend challenge

🐾 Translate My Dog (AI Canine Micro-Expression Reader)

🌟 Key Features

1. 🔍 Multimodal Canine Micro-Expression Vision Analysis

How I Built It

Prize Categories

Open Late — a diner menu that follows the clock, not the other way round

What I Built

Demo

Journey

The idea: make the clock the interface

Twenty-four dishes: a vessel and a glyph

The hidden bug that broke my own progressive enhancement

Accessibility, and why each choice was made

Night by default

One bug worth mentioning

The Dabba — the box somebody packed for you before you were awake

Inspiration

Demo

Journey

Steel is a mirror, not a grey gradient

The mouth is the camera

A sector is an ambiguous shape

Transforms apply right to left, and it matters

The arc is two elements

Sequence, not a chord

The tiled-texture trick has a scale limit

Composition is occlusion

One container query, zero breakpoints

Accessibility

Slow Turn — nine birds, one fire, and twenty minutes of waiting

Inspiration

Demo

Journey

The rotation is not a rotation

A chicken is its drumsticks

filter inherits, and it cost me two attempts

Blend modes need somewhere to go

Blistering out of three grids that do not line up

Sometimes you move the camera instead

The bone that looked like a fingernail

One container query, zero breakpoints

The sprinkle of JavaScript

Accessibility

Soft Boil — six minutes, and you cannot get it wrong

Inspiration

Demo

Journey

Nothing in this picture is transparent

Two numbers run the entire picture

An animation beats a declaration, silently

Going still without ever stopping

Two details that are the difference between water and not-water

Percentages don't mean what you want them to mean

One container query, zero breakpoints

The sprinkle of JavaScript

Accessibility

Cutting Chai — the comfort food that isn't food, drawn in CSS

What I Built

Demo

Journey

Getting the silhouette right matters more than the shading

Steam is the whole trick, and it took three goes

The bite is a mask, not a drawing

Eight petals, one custom property

Sizing: one container query, zero breakpoints

The sprinkle of JavaScript

Accessibility

Midnight Fridge Raid — comfort food isn't a dish, it's 2am

The `hidden` bug that broke my own progressive enhancement

`filter` inherits, and it cost me two attempts

`clip-path` clips children too