Practical Jokes in the Browser

I know April Fool’s Day is at the beginning of this month, but hey, now you’ve got a year to prepare. Not to mention a gool ol’ practical joke can be done anytime.

Fair warning on this stuff… you gotta be tasteful. Putting someone’s stapler in the jello is pretty hilarious unless it’s somehow a family heirloom, or it’s someone who’s been the target of a little too much office prankery to the point it isn’t funny anymore. Do good. Have fun.

LOLOLOL

Open a browser tab, open the console, paste in this:

setTimeout(function() {
  var text = new SpeechSynthesisUtterance("LOLOLOLOLOLOLOLOL"); 
  speechSynthesis.speak(text);
}, 600000);

Then minimize the window and leave it. 10 minutes later their computer will start LOLing at them mysteriously.

AOL

Open up their browser settings and change the default search engine to something, uh, let’s just say… less practical.

Cloud to Butt

Browser plugins have the power to do just about anything to a web browser. You gotta be subtle. How about replacing the word cloud with butt on every single website.

CSS Trickery

Right here on the Media Temple blog we’ve talked about using a browser extension to custom CSS on any page to influence the styles. Time to get weird with it.

You could edit the global stylesheet to make every image on the web black and white:

img {
    filter: grayscale(100%);
}

Or make their cursor bizarrely too big:

body {
    cursor: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/np_cursor_740125_000000.png), default;
}

Or perhaps make the browser window flash with blurry just for a quick moment every once in a while:

@keyframes weirdblur {
  98% {
    filter: blur(0);
  }
  99% {
    filter: blur(2px)
  };
  100% {
    filter: blur(0);
  }
}

body {
  animation: weirdblur 5s infinite;
}

If adding custom CSS on every page in a global stylesheet isn’t powerful enough for you, there are plugins for allowing you to run JavaScript as well.

Expanding text?

Is TextExpander installed on the machine? TextExpander allows you to set trigger words that you type that expand out into more text to save time. This isn’t specific to the browser, but will work anywhere they type. Perhaps pick a subtle trigger, like instead of their name “Chris”, you use “-chris” as a trigger. More rare to type, but not never. Perhaps they sign their name in emails like that sometimes. Have it replace with something else:

Bizarre Screensavers

The world is your oyster here, especially when you install a screensaver like WebViewScreenSaver which lets you set any URL as the screensaver. Less is more here. Might I suggest something subtle like this very average hammer for sale on Amazon.

Keyboard and Mouse

You can’t just go remapping someone’s keyboard. A prank, but it’s so intense that they would need to get to the bottom of it immediately and it would screw up their day.

Much more subtle to slightly change their keyboard repeat rate, or their mouse tracking speed.

The Unclickable Folder

Temporarily remove all the icons from their desktop, except one weird folder. Then take a screenshot of the entire desktop with just that one folder sitting there. Then set that as the desktop background.

Then move everything back and remove that folder. There will be a ghost folder there as part of the background now, which should be sufficiently frustrating.

Tim Holman’s CSS Pranks

Into this? Wanna see more ideas?

About the Author Chris is a web designer and developer. He writes about all things web at CSS-Tricks, talks about all things web at conferences around the world and on his podcast ShopTalk, and co-founded the web coding playground CodePen. More by this Author