Rewriting Lolcaptions: Part 1

Why I want to remake a web game I built 4 years ago

Photo by Kah Lok Leong on Unsplash

From Humble Beginnings (aka Flash Games)

I have a group of friends who I’ve known since high school that I’ve played video games with for years. Back in college, we used to play an online multiplayer flash game hosted on Kongregate called Lolcaptions.

The loop of the game was simple:

1. Vote on an image from a random set that you thought you could caption with something funny
2. Submit your hilarious caption
3. Vote on all the captions submitted by you and other players
4. See the winning caption on the image
5. Have a laugh and win some points if your caption was the winner

We spent so many mindless hours in this game having a total blast putting dumb captions on random pictures from the internet. There was a text chat where we would banter on with each other and strangers that came into our lobby. It was a great time that we still look fondly back on. Sadly, one evening when we went to load up the game, it was gone! It vanished into the unknown void of the internet.

A few months later, I had gone through a couple of software engineering internships where I spent some time learning the basics of web development. I realized that I could probably use these acquired skills to rebuild Lolcaptions myself for us to enjoy again.

And so I did! I threw together the best thing I could with the knowledge and tooling available to me back in 2015. Soon enough, my friends and I were back to playing the game we enjoyed so much. If you’re interested in playing, you can find the latest code here and the (still) working app here.

Fast Forward 4 Years

I still play video games with those same friends and we still remember Lolcaptions, both the old version we discovered and the later version I built. We occasionally drop into the version I deployed years ago for some quick fun.

In the meantime, I also spent a whole lot more time building and learning about web development. The tools available to build stuff for the web completely blew up between then and now. It feels like a field where if you’re not constantly learning, you’re doomed to be left behind.

I thought about everything I learned building Lolcaptions back in 2015. I also thought about and fun and rewarding the whole experience was from start to finish. So I thought…

If I were to do it all over again with what I know now, how would I do it? What more could I learn?

Old vs. New

Here’s the basic summary of what I built and how I built it back in 2015:

• I didn’t do any pre-planning or mock out what I was building. I just started hacking away at code.
• The whole frontend scaffolding was just plain HTML/CSS/JS with no framework or tooling like package managers or bundlers.
• All frontend JS logic was done with JQuery.
• Styling was based off Twitter Bootstrap, which was basically my go-to for making sites look half presentable.
• The server was written with Node with Express middleware and SocketIO for the websocket functionality.
• There was no persistence to the application, aka no backend database. Images were pulled from the Imgur API, there was no sign up system, and there was no player history to track. Everything was saved in the browser session and server memory.
• TravisCI for some basic build automation. There were no unit tests so nothing much to automate there.
• It was deployed and hosted on a Heroku free Dyno with no custom domain.

So here’s what I’m planning on doing this time around:

I could write up another whole piece on what I learned from doing everything above, but I’m hoping this series should yield the same if not even more learnings than before.

Mockups and Wireframes: I’m not very confident in my visual design skills. So, I’m forcing myself to get at least a little better by first developing mockups and wireframes before getting into code. I’m not aiming to design anything drastically different than what I did before. I really just want to flex my design muscles more than I have in the past (which is close to none). I’m gonna try out Figma as my wireframing tool of choice mostly because Scott from Level Up Tutorials talks a lot about it on his Podcast.

JavaScript Frameworks: I know a LOT more about frontend frameworks and how they can make your projects more powerful, flexible, and organized. Moreover, they make you the developer more productive. So I’m reaching for React and some other modern frontend tooling like Styled Components to build out the face of the app.

No CSS Libraries: I also really suck as CSS and styling websites. I’d like to lean less on pre-packaged CSS libraries like Bootstrap and do all my own layout and styling from scratch. Modern browser features like CSS Grid are super powerful and almost replace the need for CSS libraries in some places.

A Database: I’d like to take advantage of a managed database service like Firebase to support the real-time nature of the game while enabling some cooler features like player score tracking or letting players save their favorite captioned images to view and share later.

Containerization: I want to make the app deployable via a container image. This will give me better flexibility to deploy to other platforms (although I’m still a big fan of Heroku) and provide a modern deployable artifact for the project.

Automated Testing: The old project had 0 tests. This time around I plan to add unit tests to both the backend and frontend, functional testing using something like Cypress for the frontend, and some API integration testing for the backend. All these inclusions should also make my CICD more robust and full featured (I might take some tips from myself on this one).

Code Style and Project Structure: Lastly, I did an OK job of making the old code repo as well organized as I could with a decent README and opensource license. I’d like to iterate on this to make it that much easier for others to contribute, but also run and enjoy the game themselves. Again, there are a LOT of learnings I’ve had between then and now on how to opensource a project.

What’s Coming Up Next

Now that I know what I’m building and have a plan laid out for how to tackle it, I’m going to be spending the next few weeks doing it while recording my learnings throughout the different phases of the process.

If you would like to follow along yourself:

• The Trello board where I will be tracking my todo list and notes. I will also be copying my designs from Figma over here since I don’t have a way to share them publicly
• The Github repo for lolcaptions-v2 where I will be iterating on the client and server code
• My Twitter where I’m going to try to post updates as they happen

I intend this to be the first in a series of pieces detailing my experience going through this development process and outlining what I’ve learned. More to come!