The idea came to me when I read some articles by Federico Viticci about his workflows and techniques for automation. A huge part of those techniques relied on bookmarklets. I decided to look for a nice website that collected those little tools and when I couldn’t find one I liked, I decided to come up with my own.

I first released a demo on CodePen, but later I decided to turn it into a full-fledged website. People like it, there’s a steady stream of visitors to the site and since the initial release, the open source community added several new bookmarklets.

Things I’ve learned

  • Open Source
  • Build Processes
  • Templating
  • Design
  • Development

The most interesting part about this project is working with the community. As a single person, I can’t even begin to cover a decent amount of bookmarklets, so I depend on other people adding their own contributions. So far, those collaborative efforts have been very enjoyable and they’ve helped the site grow quite a bit.

Colour is an important part of the project. It helps users quickly discover their favourite networks.

Other than that, this was one of my first projects to rely on a build system, specifically gulp. While this involved lots of head-scratching at first, it didn’t take very long until I started seeing the benefits of my setup. And now, I would never create this site without a build system again.

Technologies I’ve used

  • HTML
  • CSS
  • Sass
  • Node.js

I experimented with different approaches to templating. This includes Underscore and Handlebars templates, but I ended up using Mustache templates, because they fit best with what I wanted to achieve.

All bookmarklets are saved within their own JSON data files. This makes it easier to maintain, but it also means there needs to be some sort of concatenation. That’s where Node.js cam into the play. Using plain Node inside my gulp setup allowed me to easily concatenate the files, feed all the data into my templates and generate the full site very efficiently.

If you enjoyed reading this case study you might want to share it on Twitter, on Facebook, or on Pinboard. You should also take a look at the project's website, if you haven't already. For comments and questions, contact me on Twitter.

View more projects