DEV Community: Larry Margerum

Build Your Bowl - A CSS Only Arroz Caldo You Actually Get to Season

Larry Margerum — Sun, 16 Aug 2026 01:26:14 +0000

Inspiration

Arroz caldo is the dish that shows up in my kitchen uninvited. Someone's sick, it's raining, a day just needs marking quietly — and there it is, ginger and rice simmering on the stove before I've really decided to make it.

The thing I always loved about it growing up was that the last step was never fixed. My mother never measured the garnish. Chili if you needed heat, calamansi if you needed something sharp to cut through it, a boiled egg if the day called for something that felt like a full meal. The base was always the same. The finishing was always yours.

When I saw this challenge allowed "a sprinkle of JavaScript," I didn't want to just paint a static bowl and call it a day — soup bowls are basically a genre unto themselves in CSS art at this point. I wanted to build the one thing that actually captures what makes this dish comfort food: that you get to decide what goes in it. So the bowl starts nearly bare, and you build it yourself, one click at a time.

Demo

larrymargerum-devto-frontend-bowl.pages.dev

larrymargerum01 / devto-frontend-challenge-bowl

Dev.to Frontend Challenge - CSS Challenge project inspired by Arroz caldo

Build Your Bowl — CSS Art, Comfort Food Edition

A pure CSS art project that visualizes a bowl of arroz caldo (Filipino chicken rice soup) with interactive toppings. Every visual element — from the broth's simmering glow to the steam rising from the bowl — is crafted with CSS. JavaScript plays only a supporting role, toggling class names to reveal ingredients.

🎨 Features

Pure CSS Art — All visual effects (gradients, shadows, transforms) are pure CSS
Container Query Responsive — Scales beautifully from mobile to large displays
Interactive Toppings — Add garlic, scallion, egg, calamansi, and chili oil
Hover Previews — See ghosted previews of toppings before clicking
Stir Animation — Click the bowl or "Stir the pot" button for a swirling animation
Completion Celebration — A golden ring pulse appears when all toppings are added
Accessibility — Full keyboard navigation and ARIA attributes

🍲 The Bowl

This visualization represents…

View on GitHub

Click the pot (or hit "Stir the pot") to swirl whatever's currently in the bowl. Hover a topping before clicking it — the bowl will show you a faint preview of what you're about to add. Fill all five and the rim gives you a little something back.

Journey

I went in with a rule for myself: CSS does the drawing, CSS does the motion, JavaScript is only allowed to flip switches. No canvas, no SVG, nothing procedurally drawn by a script — if it moves or changes color, a stylesheet is responsible for it.

That constraint ended up shaping almost every interesting decision in the build:

The rice. Instead of eighty individual grain elements, the whole texture is one zero-size div with an box-shadow list — every grain is just an offset, a size, and a color in a single CSS property. It's a trick I'd seen in other CSS art before but never had a real reason to reach for until I needed to fill a bowl with something that had to look scattered, not gridded.

The interactivity had to be honest. My first instinct was to reach for JavaScript to handle showing/hiding garnishes, but that felt like cheating the "CSS is the star" spirit of the challenge. So each topping's visibility, its pop-in bounce, even the broth quietly warming up as you add things — all of it lives in CSS transitions reacting to a class name. The JavaScript that's left is genuinely boring: it toggles a class and updates one sentence of status text. If you open dev tools, the JS file is short enough to read in ten seconds; the stylesheet is not.

The hover preview was the one that made me happiest. Hovering a topping chip — before you've clicked anything — ghosts a faint preview of that ingredient into the bowl. That's :has() reaching from a button in the control rail all the way into the canvas, with zero JavaScript involved in making it happen. I didn't know I'd end up using :has() for something like this when I started; it came from wanting the bowl to feel responsive to intent, not just clicks.

What I got wrong first. Everything in the bowl — every grain, every scallion ring, every chili sliver — is positioned relative to the bowl's true center, and early on I had one wrapper anchored to a corner instead of the center. Nothing looked broken, exactly, just subtly off in a way that took a while to track down, because the bug was in the coordinate system, not in any one shape. That was a good reminder that in CSS art, your math has to be as disciplined as your gradients.

What I'm proud of. That the idea and the technique are actually the same thing. "Make it your own" isn't just a caption under a picture of soup — it's something you do, and everything that happens when you do it is CSS earning its keep.

What's next. I'd like repeated clicks on a topping to intensify it — more chili, more garlic — and a shareable link that captures whatever bowl you've built, so you can send someone your specific combination instead of just a screenshot.

Built with HTML, CSS (custom properties, container queries, :has(), the box-shadow particle technique), and just enough JavaScript to flip a few switches.

Build Your Bowl - A CSS Only Arroz Caldo You Actually Get to Season

Larry Margerum — Sat, 15 Aug 2026 15:32:48 +0000

Inspiration

Demo

larrymargerum-devto-frontend-bowl.pages.dev

larrymargerum01 / devto-frontend-challenge-bowl

Dev.to Frontend Challenge - CSS Challenge project inspired by Arroz caldo

Journey

That constraint ended up shaping almost every interesting decision in the build:

Built with HTML, CSS (custom properties, container queries, :has(), the box-shadow particle technique), and just enough JavaScript to flip a few switches.

Dreams Don't Always Arrive on Schedule.

Larry Margerum — Wed, 15 Jul 2026 21:55:14 +0000

A few days ago, I was sitting in front of my computer much later than I planned. The room was quiet except for my keyboard and my occasional sigh when I couldn't solve the same problem for many hours. I was working on a small project. For an experienced developer, it would probably take only a few hours, but for me, I was still trying to understand why my code was not working as expected.

At one moment, I leaned back in my chair and asked myself a question:

"Did I choose the wrong time to follow my dream?"

It is not an easy question to ask yourself.

When I first became interested in programming, I wasn't thinking about money, remote work, or becoming successful. What interested me was the fact that people can create something from their imagination. A developer can sit in front of a computer and build something that helps another person somewhere else in the world. I always thought there was something beautiful about that.

I still remember the first time I wrote a program that actually worked. It was nothing special, and if I saw that code today, I would probably laugh. But at that moment, it felt like magic. For the first time, I wasn't only using technology—I was creating it.

That feeling is still with me today.

Over the years, I spent a lot more time learning than I expected. Sometimes I went to sleep thinking about a bug and woke up with an idea for the solution. Sometimes I forgot about time because I enjoyed building something so much. There is a special feeling when you finally solve a problem that seemed impossible before.

But this journey has not been easy.

Many times, I felt like I was standing in the same place while everyone else was moving forward. I would open LinkedIn or other social media and see people sharing their new jobs, promotions, and achievements while I was still trying to find my first real opportunity in the industry.

And then AI became impossible to ignore.

Suddenly, many people started asking if developers would still be needed in the future. Every week, there is another article or video talking about AI replacing jobs. For someone who is still trying to start a career in tech, it can feel very discouraging.

There were many nights when I asked myself if I spent years learning something that might change before I even have the chance to work in this field.

But every time I think about giving up, I remember that programming was never only about finding a job for me.

I simply enjoy building things.

I enjoy learning new technologies. I enjoy solving problems. I enjoy becoming a little better than I was yesterday.

AI may change many things, but it cannot replace curiosity. It cannot replace the feeling of solving a difficult problem after many hours. And it cannot replace the dreams that people have.

So, I decided to accept the uncertainty.

I don't know what this industry will look like in ten years. I don't know how many applications I will send before someone gives me a chance. I don't know how many times I will doubt myself before I finally feel that I belong here.

But I know one thing.

Tomorrow morning, I will sit in front of my computer again.

I will continue building projects. I will continue learning. I will continue trying, even on days when it feels difficult.

Because dreams do not always come when we expect them to.

And maybe that is okay.

Maybe one day I will look back at these years and realize that they were not the years when I was falling behind.

Maybe they were the years that taught me how to keep going.

If you have ever felt uncertain about your future in tech, I would really like to hear your story. Sometimes, knowing that we are not alone makes a big difference.