This week I released my latest project to the world: a tiny webpage that allows you to generate your own version of the “I ain’t reading all that” meme. I don’t remember how that idea came to me, except that I was using this meme a lot and making my own versions of it. After the perfect combination of “it would be fun if…” and “I wonder how…”, on an evening when I was left to my own devices, I opened my laptop and started working on it. This tiny project was super fun because I learned a lot and it’s always fun to code something stupid.

The Editing Part

Technology-wise, this is a very simple project, as you can probably imagine. It uses HTML, Javascript, CSS, and the only dependency is the library I use to generate the image. Originally, I was hoping to do the drawing part on my own, but I couldn’t find a simple way to do it immediately, so I landed on html2canvas. I guess I could have drawn the image myself using a canvas but a) I was really adament on having an “edit in place” type of experience and b) I didn’t want to duplicate the theming part using CSS and then reproduce it in Javascriptto generate the image myself. I took a peek at the html2canvas repository and it looks like it’s going through the DOM of the element you want to draw, extracting all the styles applied via CSS and doing the drawing part. If anything, it shows that using a library was the right option, especially if I wanted this to ship.

Speaking of the editing experience, I knew I only wanted the word “reading” to be editable. I originally thought about using an input element but then I remembered the contenteditable attribute that does what it says on the tin, which is to make an element editable. I did have tweak its default behaviour a little to make it work as I want though:

• I set its value to plaintext-only because I didn’t want to allow pasting some weird text from Word that would potentially break the layout.
• I prevented line breaks, so went you press the return key, it does nothing.
• I disabled pasting altogether.

Of course, one of my least favourite ¹ colleagues found a way to break it if you enter a very very long string of character, which takes dedication since you can’t copy and paste. I suspect it’s an easy fix if I just set a maximum number of characters?

The Pretty Parts

Once I had found a library to generate the image, it didn’t take long to have a prototype ready, even if it looked horrible. CSS is not really my forte because I left the world of frontend development a long time ago, when CSS3 was this shiny new thing. Needless to say, this is where I learned the most. This project uses flexbox, some minor animations, CSS variables as well and more importantly calc, which makes things a lot easier if you want consistent spacing. I’m sure this is CSS 101 nowadays.

In retrospect, creating a layout with CSS and flexbox was a lot less scary and painful than I thought it would be, which made me reconsider my use of bootstrap a little which is my go to solution for websites, especially admin consoles.

I knew from minute 1 that I wanted to have different colours for the conversation part, because what would be the point otherwise. It was really hard to just come up with colours, so I just grabbed some from Pastel and hoped for the best. The theme names are pretty random and I tweaked them so much that I’m not sure they still describe the theme well, but at least they exist. This blog post (that I mentioned in a previous weekly update) made it really trivial to implement the theme selection part.

The Boring Part

Something this simple with no server counterpart is very easy to deploy, so I just threw it onto Netlify. I was tempted to do the image generation on the backend but there was some security and maintenance concerns that I frankly couldn’t be bothered with. This would also mean that I would be able to add an API, develop a slack bot that automatically posts messages, and, and, and… Sometimes it’s better to just purposefully restrict oneself.

Once you select a theme or “upload”² a custom profile picture to use in the conversation, the website will remember it for you and that’s one more thing I didn’t want to be responsible for. As a result, everything is just stored locally into LocalStorage and restored on page load.

What’s Next?

I think this project is pretty much done, but I want to spend a little bit more time on the design part and come up with new themes with funnier names. I already took it way further than I thought I would, including adding proper metadata and an opengraph preview image. If you’re curious, the source code is available on GitHub and I’m available on Mastodon if you have suggestions.