The Silly Side of Code Snippets

By on CSS, JavaScript

Sometimes the daily grind of web design can make us take things a little too seriously. While that’s good for getting things done, it can also drain us of the passion we have for our work. It’s not a place where you want to be for the long term.

Creating something fun is a great way to rediscover that joy. It’s often the most casual experiments that can relieve stress and bring about excitement. And it’s also an opportunity to learn a new technology without the pressures associated with client work.

This collection is dedicated to those sorts of projects. These developers all created something unique and, at the same time, a bit humorous. You can tell they had fun putting them together. Enjoy!

Make It Rain

Enter a world where cheerful emoji fall from the sky. This fun snippet uses JavaScript to enable seemingly random faces, animals and objects move about the screen.

See the Pen EMOJI Rain by Robert Heiser

Pig Latin Translator

The web is used by people from all corners of the globe. Therefore, language translation is a big deal. However, knowing how to say something in Pig Latin probably isn’t that important in the grand scheme of things. But, is it fun? Ellhay esyay.

See the Pen Pig Latin Translator by Chazona Baum

Misfortune Cookie

Here’s an interactive element that provides humorous observations and advice. Click on the fortune cookie to find out the bad news. Oh yeah, you’ll also get a selection of lucky numbers.

See the Pen Fortune Cookie by Jon Kantner

Security as Entertainment

Quick, name two things that are all over the web. Give up? Okay, brace yourselves: CAPTCHAs and GIFs. Pretty hard to avoid them in the age of social media and spam. This phony login form combines both to make for an entertaining and secure experience.

See the Pen Giphy Captcha by Fumie Wada

Funny Face Generator

Generating things at random has multiple uses in design and development. It can help us do anything from increase security to creating a more interesting UX. This Pen uses a library called Context Free that generates images from written instructions. Click on any face to create a whole new set.

See the Pen faces by Gerard Ferrandez

Gassy Rhino

The image of a large creature passing gas may not be as graceful as the Mona Lisa. But it is a fun way to experiment with the GSAP animation library. Take a look at the code and see what makes him toot, er, tick. If you prefer some under-the-sea action, there’s also a turtle.

See the Pen Farting Rhino by Sarah Drasner

Retro Joke Interface

Everybody loves old technology. But what they love even more is outdated tech that also tells bad jokes. Click on the “File” menu of this old-school computer to display another one-liner.

See the Pen
Computer Jokes | CodePenChallenge
by Andrew Wilson

It’s like Twitter, but for Dads Only

The phenomenon known as “dad jokes” slowly creeps up on the male population. When one becomes a father, the goofiest attempts at humor start to emanate. Mothers cringe. Children laugh (sometimes). Here, we have an imagined social media network expressly for the purpose of relating this brand of comedy.

See the Pen
New Twitter 2019 but for dad jokes #cpc-dad-joke #codepenchallenge
by Hussard (@hussard)

Laughter and Creativity Go Together

It’s long been said that laughter is the best medicine. When it comes to fueling creativity and refreshing your brain, it really does appear to be true.

The code snippets above are great reminders of why web designers quite often love their jobs. When you create something just for the sake of fun, it reflects how much you enjoy your work.

So, take a cue from these folks and build something silly. It’s good for the soul and will prepare you to take on those less-exciting challenges in your daily life.

Need a few more laughs? Check out our CodePen Collection for even more ideas.