DEV Community: Nick Vu

Bánh Mì: A Journey in Every Bite — Vietnam Drawn in Pure CSS

Nick Vu — Sat, 08 Aug 2026 18:06:09 +0000

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

Inspiration

Bánh mì is one of those foods that can make an ordinary moment feel complete. The first crackle of the baguette, the savory layers inside, the brightness of pickled carrot and daikon, the cool cucumber, fresh coriander, and a small flash of chili all arrive in one bite. It is practical, generous, full of contrast, and often the easiest answer to a very familiar question: “What should we eat?”

That feeling became the starting point for this artwork. I did not want to draw only a sandwich. I wanted the page to feel like a small love letter to Vietnam: something warm, familiar, slightly nostalgic, and immediately recognizable even before a reader notices every detail.

The central idea is “A journey in every bite.” A large, cut-open bánh mì crosses a north-to-south silhouette of Vietnam. The map is rendered as a dark charcoal-lacquer serving board, while the sandwich sits above it in toasted gold, orange, green, cream, and chili red. The contrast keeps the bread as the focal point while allowing the shape of the country to remain clearly visible behind it.

The composition borrows the mood of an aged Vietnamese street poster. The background uses warm parchment tones, faint grid lines, tiny imperfections, double borders, corner ornaments, restrained sea-wave marks, and a mixture of serif and compact uppercase typography. I wanted it to feel printed and handled rather than perfectly digital.

Behind the map is a stationary, Đông Sơn-inspired bronze drum. It is not intended as an exact historical reproduction. Instead, its central multi-ray star, concentric engraved rings, geometric rhythm, and burnished copper palette act as a visual reference to Vietnamese decorative heritage. Earlier versions used a simple orange sun, but the drum gave that large circle a more meaningful role in the story while staying quiet enough to support the sandwich.

Geography is part of the composition rather than an afterthought. Hà Nội and TP. Hồ Chí Minh appear as red blinking markers, positioned near their locations on the map. Hoàng Sa, Trường Sa, and Phú Quốc are represented with small island forms and visible labels. The ingredients are not presented as claims about regional origins; they form a visual flavor journey inside the bánh mì itself.

At the bottom left, the page includes a playful dictionary-style definition:

Bánh mì · noun

Vietnam’s crisp, crackly answer to “What should we eat?”—a baguette packed with savory fillings, bright pickles, fresh herbs, and inevitable crumbs.

That line captures the tone I wanted for the whole piece: respectful, affectionate, and a little bit fun.

Demo

If the embed is not available in your reader, open the live Bánh Mì CSS artwork on CodePen.

Journey

Choosing a strict CSS-art constraint

I built the final artwork with pure HTML and CSS. There is no JavaScript, SVG, canvas, image asset, CSS library, dependency, or external font. Keeping that constraint made every visual decision more interesting: each shape had to come from ordinary browser primitives.

The Vietnam mainland is a percentage-based clip-path polygon placed inside a responsive map container. A slightly offset copy creates the shadow, and layered gradients add the charcoal-lacquer depth and grain. Browsers without polygon clip-path support receive a simpler rounded fallback silhouette instead of a broken composition.

The bánh mì is assembled from nested elements and pseudo-elements. Gradients form the toasted crust and soft highlights. Rounded borders create the baguette halves. Narrow rotated shapes become crust scores, carrot, and daikon. Repeating radial gradients suggest slices of pork and pâté texture. Conic gradients create cucumber sections. Small circles become chili rings, and groups of rounded leaves create coriander. Even the crumbs and steam are CSS shapes.

The bronze drum also uses only CSS. Repeating radial and conic gradients produce engraved rings and geometric divisions. A clip-path polygon forms the central star, while inset shadows and layered copper colors make the disc feel aged rather than flat.

Designing the motion

The entrance sequence is deliberately simple. The poster fades in, the map arrives with opacity and a small translation, and the sandwich settles into place. These transforms do not collapse or expand element height, so the composition stays stable during loading.

After the entrance, the ambient movement is restrained: steam drifts, coriander sways, crumbs fall, and the two city markers pulse. The bronze drum remains stationary. Removing its loop was an important decision because movement in such a large background shape competed with the food.

For visitors who prefer less motion, prefers-reduced-motion: reduce shortens animations, removes delays, and limits iteration. Decorative groups are hidden from assistive technology, the page keeps semantic heading order, and the complete artwork has a concise screen-reader description.

Making one poster work at several sizes

Responsiveness was one of the hardest parts because this is an illustration, not a normal stack of page sections. The stage uses percentage positioning, clamp(), viewport-aware sizes, and mobile-specific adjustments. The map keeps its tall aspect ratio, while the bánh mì scales down and recenters so neither end is cut off on a narrow screen. Typography, the definition card, island labels, city markers, and the drum all reduce without losing their hierarchy.

I repeatedly checked the design at desktop, tablet, and phone proportions. I also removed horizontal overflow and avoided external requests, which keeps the CodePen self-contained.

Refining the story by removing things

The final page came from many small corrections. The map silhouette was redrawn to make its north-to-south curve more recognizable. Hà Nội and TP. Hồ Chí Minh were repositioned. Phú Quốc was moved closer to its geographic relationship with the mainland, and the Hoàng Sa, Trường Sa, and Phú Quốc labels were restored after an overly aggressive cleanup.

Early versions included a yellow dotted route, a cut-looking route marker, pickles, herbs, pork, pâté, and a chili scattered across the map. Individually those details were charming, but together they made the geography feel busy. Removing them gave the map space to breathe and made the bánh mì the unquestioned focal point. The sea marks were also limited to the right and lower areas so they would not visually pull the map westward.

What I am proud of

I am most proud that the image reads at two distances. From far away, it is a bold bánh mì crossing Vietnam. Up close, it rewards inspection: the bread scoring, cucumber wedges, tiny seeds, herb leaves, lacquer grain, island clusters, city pulses, crumbs, poster borders, and engraved drum rings all have their own small construction story.

This project reminded me that effective CSS art is not only about adding clever shapes. It is also about hierarchy, subtraction, cultural care, responsive composition, and knowing when an animation should stop. The most technical solution is not always the best visual solution.

If I continue the project, I would refine a few intermediate breakpoints and create a short making-of view that separates the map, drum, bread, and fillings into layers. For this challenge, though, I like that the final result remains a single dependency-free poster: Vietnamese comfort, drawn entirely in CSS.

Make our component's Tailwind class names more understandable in React's JSX

Nick Vu — Sat, 15 Jun 2024 16:57:58 +0000

Background

Have you ever seen a long list of class names with barely knowing which components we try to debug?

I cannot deny that Tailwind helps our web development faster, especially, with styling, but when we try to use many of its utility class names within a single element. As a result, we cannot see the actual identity of that component and it may become a guessing game.

One of the solutions is that we can add a unique id or class name to identify that component

but I'd admit as a developer that sometimes, I'm too lazy to put it, or copy/paste components somewhere and forget to change their class name identities.

Solution

To solve the above problem programmatically, I implemented a higher-order component

const withComponentClassName = (WrappedComponent) => {
  const WrapperComponent = (props) => {
    const componentName =
      WrappedComponent.displayName || WrappedComponent.name;

    const className = componentName ? `c-${componentName}` : '';

    return (
      <div className={className}>
        <WrappedComponent {...props} />
      </div>
    );
  };

  return WrapperComponent;
};

export default withComponentClassName;

And then use it in components

export default withComponentClassName(MyComponent);

After that, it generates JSX like below

<div className="c-MyComponent">
   <MyComponent {...props} />
</div>

Now every single component will have this pattern in DOM. We can clearly see where those elements are from.

The only trade-off with this approach is that we have an extra div element wrapping our component that increases our DOM size, but in the long run, it has boosted my team's development as well as UI debugging.

3 questions I stumped upon when I developed this approach:

We still can forget to place it in our components, how to prevent that?

We implemented a custom ESLint rule to verify export default of our components with withComponentClassName usage (I'll share it with more detail in another post)

Can we embed that class name into the component's elements directly instead of adding an extra div?

The solution is more complicated and actually, it may make unexpected re-renderings due to class name prop/state updates, so we've accepted this simpler solution

Can we hide that class name addition layer on production?

Yes, we can add a condition in withComponentClassName like below

const withComponentClassName = (WrappedComponent) => {
  //production variable depends on your codebase setup
  if(production === true) {
     return WrappedComponent;
  }

  const WrapperComponent = (props) => {...};

  return WrapperComponent;
};

export default withComponentClassName;

ReactJS vs SolidJS

Nick Vu — Sun, 07 Aug 2022 15:52:00 +0000

I have had experience with ReactJS for a while, and recently, I found a new interesting framework which is SolidJS. Its community is still very small (~21k stars now on Github), so I'm not sure it's mature enough for enterprise products.

Right now I'm standing for ReactJS because of the huge community support but I believe SolidJS will have a bright future too.

I raised this post to get your opinions about SolidJS vs ReactJS.

A few questions in my mind

SolidJS is good enough for real web development?
Which one is faster in terms of web performance?
If you choose SolidJS, why?
Any strong points from SolidJS that can replace ReactJS in the future?

I really appreciate your precious ideas and welcome all open discussions.

Happy coding!