8 silly JavaScript projects that will put a smile on your face

July 13, 2020
Written by
Reviewed by

8 JavaScript projects that will put a smile on your face

Code is a powerful means of self-expression. Building things because they’re useful is great. Purely ridiculous coding projects are less common but awesome.

In this post, I’ll show you 8 JavaScript projects that will (hopefully!) bring you joy, or at least some mild amusement.

 

1. Pettier

gif of the Super Mario Brothers scrolling by with text that reads "super petty."

At a previous company I worked at, an engineer merged a pull request changing 4 spaces to 2 spaces in the entire JavaScript codebase. Hundreds of engineers were stuck in a merge conflict traffic jam, derailing productivity for hours. Good times.

It’s so easy to have opinions about code style at the expense of  substance. Instead of arguing about semicolons, why not convince your team to use Pettier? Taking the nihilistic approach to code style conventions, Pettier randomizes your linter configuration every time you save a file. I’ve gotta say, the project’s naming is spot on. For those not in the know, it’s a pun on Prettier, one of the most popular JavaScript code formatters.

2. ComcastifyJS

animated gif of a white old school computer with a pink screen. Text on the screen reads "loading..." and the background is light blue with pink palm trees.

Occasionally I long for simpler times. Remember when images used to take forever to load, inching across your screen like caterpillars? Relive those times with Comcastify, which can make any site load images more slowly.

Jokes aside, we shouldn’t assume everyone has fast connectivity because most of the world does not. Perhaps experiencing Comcastify’s demo will help you reflect on how your app’s performance is an inclusivity issue.

Comcastify was made by the Onion’s dev team. “The Onion, but for npm” is the best fake startup idea I’ve heard in awhile. I’m totally stealing that idea for the next time I play presentation roulette.

 

3. KonamiJS

animated gif of a gloved hand punching in the Konami code on a giant Nintendo controller for the first generation console.

Easter eggs can be delightful, but sometimes it’s hard to justify the time needed to implement them.

KonamiJS enables developers to embed a joyful surprise inside other projects. The Konami Code was a cheat code for old video games that started being used around 1986. KonamiJS has been around since 2009, which is basically forever in JavaScript years.

Try punching in the Konami code on Buzzfeed and see what happens. Now that I know about KonamiJS, I’ll try using the Konami Code on whatever random websites I’m browsing when I’m supposed to be working, just to see what happens.

If you want to add a non-Konami easter egg to your project, worry not. There are some tools to make that possible. Egg.js is a vanilla JavaScript library that triggers a callback when whatever sequence of keystrokes you define is pressed. There is also an easter egg component for React applications. The only limit is your imagination.

4. Raptorize

animated gif of a man surrounded by velociraptors, holding his arms out and backing away slowly.

JQuery might not be a hot new thing anymore but it still powers plenty of the web (and there’s no reason to hate on it). If you are working on a JQuery site, why not treat your users to a velociraptor roaring across their screen via this glorious plugin?

You could even combine Raptorize with KonamiJS and trigger the raptor when the Konami Code is entered.

5. VaporJS

Animated gif of a person wearing a holographic..snuggie? With wifi signs on the chest and head. They are making a weird face and vapor is floating up from the bottom of the viewport to the top.

I would totally wear this outfit tbh

When I was a junior engineer, I was so excited about building things. The more senior I get, the more excited I am about deprecating things. Is there anything more satisfying than deleting code, than seeing all that glorious red in a pull request? I think not.

An open secret in the software industry is that the best code is no code. All code is technical debt. That doesn’t mean you shouldn’t build things. You should be scrupulous about requirements gathering and make sure you are building the right thing. Also, be ruthless about cutting features that aren’t being used.

VaporJS, not to be confused with vaporwave, is a JavaScript framework that does...nothing. But hey, it’s extremely maintainable! For another variation on this theme, see Kelsey Hightower’s No Code project.

 

6. Undefined is a function

A real milestone in every JavaScript developer’s career is getting hit by the ubiquitous Undefined is not a function error. Well, that is a thing of the past, because it is a function now. Just install the npm package according to these instructions and watch the magic happen.

Now, if only somebody could universally fix trying to console.log an object [Object]. Perhaps object.toSting() can help.

animated gif of Sting, giving us a little wink.
animated gif of Thanos pressing a button on his phone and causing an explosion behind him, which he's walking away from.

I walked out of the theater after seeing Infinity Wars with a profound sense of confusion and disappointment.  Don’t even get me started on Thanos’s weird misappropriation of Malthusian economics.

Anyway, ThanosJS cuts down on project bloat by randomly deleting half the project files. Unfortunately (fortunately?) there is no actual implementation. Which explains why the instructions tell you to gem install even though it’s supposedly a JavaScript library.

The site exists to be a demo of Netlify Drop, which I must admit is actually pretty cool.

8. Volkswagen

black and white animated gif of four men getting out of a Volkswagon bug and then disassembling it completely.

Oh sweet, my build failed” said nobody ever. Not gonna lie, I’ve certainly been reduced to tears by continuous integration. The bigger your test suite gets, the easier it is to write unit tests that leak state. Then they fail randomly even though nothing is really wrong.

Volkswagen detects whether your tests are running in a CI server. If so, it makes them pass no matter what. Getting your pull requests merged has never been easier.

Conclusion

If you enjoyed this post, you might want to peruse this giant list of awesome projects in a variety of languages. You can also check out the Stupid Hackathon for some ridiculous hardware hacks.

If you’ve built something silly or playful with code, please tell me about it. I could certainly use a little more levity right now. You can reach me on Twitter or in the comments below.