Tl;dr
Here is the demo site. Or just click here.
Introduction
While at Recurse Center, Lucas and I wanted to learn Typescript. We decided that it would be nice to make a bookmarklet, in order to keep the project simple and small.
At first, we wanted to build a plugin for hand-drawn underline effects, but it turned out that it's hard for CSS pirates to hijack the text-decoration property.
Still though, a "bad underlining" library?! It's got legs.
From that idea, I remembered the dumb viral web thing Font Bomb, and, inspired, we decided to write a library that could make every letter on a webpage manipulable. The marketing department came up this name:
letter-messer-upper.js
We do the hard work of crawling the DOM and wrapping every element in a span. Then, it's up to the developer to decide how to mess up every letter.
For example: haven't you ever wanted to make a webpage look like a ransom letter? Now you can: ransomify.
And since these are bookmarklets, you can save them to your bookmarks bar and run them on any site. We usually tested them out against the New York Times website.
The possibilities are endless. I'd love to make it easier to work with, so that a developer can define some behavior and blamo, you've got a new bookmarklet.
Learnings
Typescript, createTreeWalker (which knows how to crawl the DOM tree), and how hard it is to configure Gulp.
Again, here's the demo site and the Github repo.