CSS Art: Nintendo Switch

#css #art #webdev #showdev

This weekend, I streamed while live coding/drawing a Nintendo Switch with HTML and CSS. The drawing is:

Responsive: resize the window to see it change
Semantic: sections, the buttons are buttons
Customizable: CSS variables to change the JoyCon colors
Realistic: at least that was the goal 😅

Here's the demo on CodePen (the drawing and the original photograph):

The process took around 4 hours (broken into different sessions that I will call "my kids are finally sleeping" and "my kids are not awake yet") that I put together and sped up on this video:

Later, I did another version. This time I plugged in a library I created to handle the Gamepad API, and I tried connecting the JoyCon to the computer... it works :)

If you have a Nintendo Switch, try plugging the left controller into your computer via Bluetooth, then head to this demo (only some of the buttons will work):

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Top comments (5)

Mads Stoumann • Feb 6 '23

Great work, as always! Was there a “draw a Nintendo Switch”-challenge? This one popped up in my feed last week as well: codepen.io/kassandrasanch/pen/mdPRyVx

Alvaro Montoro • Feb 6 '23 • Edited

Thanks! And about the challenge, not that I know, but Manz also did one this weekend, and they told me of one more developer (although it might have been Kass)... Maybe we picked it because it's a relatively easy one to code. Don't ask me to draw the playstation 5 with controllers 😳😅