My Shitty Codepens

When you look at trending Codepens, you’ll find some amazing work. My Codepens aren’t among those. They suck because I genuinley suck and most of my Codepens are attempts to suck less by trying to understand how something works. In this post, I want to go over all the shitty Codepens I’ve made over the years and explain why I made them. You can view my shitty Codepens as a collection.

This post succeeds the one I did reviewing my CodePen years ago and I’ll update it over time.

Tic Tac Toe Take Three

I made a series of videos called Hour Makes where I tried to implement something in an hour. I failed every attempt except for this one where I’ve managed to make a shitty version of Tic Tac Toe (for the third time). It sucks because:

• the AI amounts to grid[randint()],
• it looks like shit, and
• you always go first.

I plan to revitalize the series giving myself 90 minutes instead so stay tuned for that.

SVG Drawing App

There was a time I was trying to make a drawing app. I was torn between a canvas based approach and an SVG based one. While the SVG approach can be higher quality since it’s vector based, it’s harder to do things like flood filling. It works by:

1. noting when a mouse has been pressed down,
2. appending an SVG path starting at the mouse position,
3. appending the current mouse location to the path and,
4. closing the path on mouse up.

While it works, it results in some gnarly SVG, which is to be expected. There are many features I wanted to add, but this is just a rough proof of concept.

My First Paint Worklet

I learned about paint worklets and I was eager to try it out. Sadly, I’m not very creative so my first attempt ended up like that, a squiggly teal line. I even wrote a post about this but I haven’t published it yet. The most interesting thing about this is the hack I used to get this to work in Codepen which doesn’t let me upload files. I had to put the worklet code in a script element which I would then load as a data URI. I also converted it into base64 which wasn’t necessary.

Note that I’m working on a post which compares workets to web workers and web sockets.

Voronoi Diagram

When I learned about Voronoi Diagrams, I rushed to make one. Sadly, my first attempt resulted in an infinite loop which would have crashed the browser were it not for CodePen stopping it¹. That results in that weird lattice. On top of that, I made the code far less efficient by constantly manipulating the canvas instead of working off of its ImageData.

I eventually fixed the infinite loop outside of Codepen, but the algorithm didn’t work as one color would dominate. I eventually figured out how to do this (albeit inefficiently) and I’ll write about this in the future.

Estimating π

I was looking into web workers and I was trying to find an algorithm which would take a long time to run. I initially tried to do pi estimation, but the aformentioned voronoi diagram seemed more realistic (if you ignore that more efficient algorithms exist). Like seriously, why estimate π when Math.pi and 4 * Math.arctan(1) exist?

This one also threw an infinite loop error, though it isn’t one.

Sample HTML for RSS Test

I made this when I was working on a post on making good web feeds. I was trying to show how these embeds will be rendered differently based on the feed readers and the importance of progressive enhancement.