hearing Michael Scott.

#frontendchallenge #devchallenge #css

Frontend Challenge CSS Art Submission

This is a submission for Frontend Challenge: Office Edition sponsored by Axero, CSS Art: Office Culture.

Inspiration

Here's a CSS art project inspired by The Office, an American series about a the office life at a paper company in Scranton, Pennsylvania.

The project uses pure HTML, CSS, and JavaScript to render an animated pixel-art office scene with music playback.

Demo

You can see the full working demo here:

Here is the source code.

Journey

This project started as a challenge to render CSS-based art of a meme scene involving office culture. Over the course of development, I explored and corrected multiple errors, particularly involving audio playback integration. To start with, I explored different memes of The Office and initially wanted to work on the preview below:

However, rendering fine details using CSS proved really difficult for a beginner. Therefore, I looked at doing a simple office layout and adding the Office show's opening soundtrack- a most defining part of the show.

The biggest errors encountered were related to JS.

Removed MIDI.js buffering: Initially tried to use MIDI.js to play background music, but encountered issues with buffering and autoplay restrictions. MIDI was replaced with native for simpler, reliable playback.
Replaced AudioContext + Buffering: Switched from using AudioContext and decodeAudioData() to streaming to avoid unnecessary complexity and delays in playback.
Corrected GitHub-hosted file issue: Realized that GitHub raw links don't provide correct Content-Type headers for audio streaming. Switched to Dropbox.

I'm proud of the results I made despite my short timeline. In retrospect, using grids the way @alvaromontoro does would have greatly improved my workflow. They have the best tutorials so far, check them out. I'm also excited to make my second challenge-related post this year!

Here's a couple of things I learned

CSS art is difficult. It was an assumption before but doing put into perspective the nitty-gritties that I had ignored. I as a 'conventional' artist, I am curious about how and why different artists choose their specific media and the experience here enriched my perspective on how to approach art-making. Despite its difficulties, I got great output and intend to continue.
GitHub is not a reliable CDN for direct media streaming. Which is probably a good idea on Github's side.
Using display: grid and pixel blocks would greatly have improved my output. After checking out some of the entires in the CSS Art section on codepen, I quickly realized some technical choices offer great advantage than others.

Going forth, I'm going to implement them instead of stacking divs.

Choosing a color palette early helps. Similar to traditional art, having a set of colors to work with makes decision making easier. However, unlike traditional art, colors work differently on screen and this changes how colors need to be approached.
SCSS makes it easier to use mixing and variables. I'm exploring it's applications for Codepen as well as the use of BEM to modularize reusable CSS components.
I've seen a couple of posts showing that react works well when doing CSS art with JS. I might check them out.

What Next?

Here is a thread of art I have made this year that I am thinking of converting into CSS art: https://x.com/kindlanski/status/1922022390290133317. What do you think I should do as CSS art next? I'm thinking of Mickey, the turtle, or the Nairobi skyline. Here is Mikey:

as a sidenote, my page refreshed before I saved a draft so I restarted the post. such a roller-coaster

Cheers!