Forem: eastermukora

These are really cool!

eastermukora — Thu, 04 Sep 2025 18:06:11 +0000

Alvaro Montoro

Sep 4 '25

10 Cool CodePen Demos (July 2025)

#showdev #html #css #javascript

Comments 1

2 min read

hearing Michael Scott.

eastermukora — Wed, 23 Jul 2025 14:55:39 +0000

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: // Detect dark theme var iframe = document.getElementById('tweet-1946275733183074517-432'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1946275733183074517&theme=dark" }

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

Cheers!

reflections and compilations

eastermukora — Wed, 29 Jan 2025 20:50:17 +0000

This is a submission for the 2025 New Year Writing challenge: Compiling 2025.

2025 should be the year of trying new things right? After a few years of being told that some things can't be done. AI can't be done more cheaply. You need an NVIDIA chip. You have to be in Silicon Valley. Here comes DeepSeek which reminds us that with a unity of purpose and grit, we can achieve what is required. This is my mantra for 2025. Someone can do it despite the circumstances, and that someone can be me.

My aspiration for the new year is to revisit past projects and improve them to refine my technical skills. A year ago, I built a few projects as I began on React Native and want to revisit them and improve with the skills I now have. I also want to apply new skills to the existing projects as a way of breaking new technical ground. My initial goal for learning React Native was to build a language app for native languages in East Africa. This has not changed. Instead of overwhelming myself with an ambitious timeline, I intend to start small and approach my goal incrementally. Building a small feature into my app and gradually improving it by adding other features throughout the year.

// Detect dark theme var iframe = document.getElementById('tweet-1778157935442702346-554'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1778157935442702346&theme=dark" }

Additionally, I shy away from the backend a lot. To tackle this, the plan is to improve a link-sharing app created last year in the design format of bento to explore authentication and API development.

Beyond coding, my engagement with the tech community has mostly been from the shadows. For example, despite being part of the dev.to community since 2020, I have rarely shared nuggets on how to approach problems and offered personal perspectives on various tech subjects I am passionate about. This is the year that changes. Moreover, I aim to give at least one talk at a conference this year. Sharing knowledge and engaging in discussions should help me solidify my expertise and connect with other passionate developers. Aside from tech, I intend to use the tools other developers have crafted to commit to my art pursuits. For example, as I publish this, I have done 24 consecutive days of #dailyartsketches. You can just do things!

Point me towards any tools you're using to ensure consistency!

At the end of 2025, I hope to look back at a year of steady progress, with improved past projects, collaboration and supporting other engineers and creators. Consistent sharing, learning, collaboration and public engagement will help me prepare for bigger projects and opportunities in future. In the spirit of just doing things, I also intend to just not do things and commit to what I feel most passionate about.

What are some great conferences that are welcoming for beginners and newbies to give talks in? I am interested in open-source, and digital health.