6 Awesome Tools I Use To Develop Social Fixer

Jun 8, 2012 • Matt Kruse

Some of us have the insatiable desire to build. To create. To assemble. To hook together existing things in new ways that haven’t been done before. And while we work hard to perfect whatever it is our project turns out to be, it is always made possible by the great work of others from which we can build.

"If I have seen farther it is by standing on the shoulders of giants." – Isaac Newton(paraphrased)

Here are some of the tools I use when developing Social Fixer, which I think deserve recognition. And keeping with my philosophy of supporting independent developers such as myself, I have purchased or donated to support each of them!

Greasemonkey is a Firefox extension that allows developers to insert scripts into web sites to run their custom code. This is the very core of Social Fixer. It began as a simple Greasemonkey script, and I later created tools to translate that script into native extensions for other browsers. But I develop the code using Greasemonkey, and without it, Social Fixer could not exist. Big kudos to the developers of Greasemonkey, who do this in their spare time, just because they enjoy it.

This Firefox extension provides fantastic debugging capabilities within Firefox. With it I can inspect the CSS applied to elements, trace through Javascript code to debug it, see all the ajax requests that are being made, and more. Like Greasemonkey, I simply couldn’t create Social Fixer without it.

There are lots of editors out there, and I’ve probably tried most of them. Previously, I was using Notepad++ for my development (and still do for some things), but I recently switched to Sublime Text and I’m not looking back. It has a ton of fantastic features and customization options. One of the key features I love is that if I close it down with unsaved changes to files (or even new files that have never been saved), it preserves them for when I open it back up. I can drop things into new tabs and keep notes without having to worry about saving files or losing what I was working on. I love it.

I had used Circle Dock for quite a while as a quick-launcher in Windows, but it just wasn’t as convenient as I wanted. So I was very happy to find Radian through a Lifehacker article. It does everything I want, and does it well. I use it to quickly launch the apps I use, as well as to quickly fire off my packaging scripts that build the extensions. When I don’t have it, I find myself lost, not remembering how to start the apps that I use many times every day!

I just found this add-on a couple days ago, and my life got so much easier. Facebook’s Javascript code is minified, making it unreadable in Firebug. Also, since entire components are on one line in the source, I can’t step through the debugger line by line to see what their code is doing. JS Deminifier automatically un-minifies their Javascript code before it hits the browser, so Firebug sees it in fully expanded, readable, formatted text. This makes my Javascript debugging and reverse-engineering so much easier.

This is a web site that will take mangled, ugly Javascript or HTML and format it to be readable. I’ve used it so many times over the last few years that I’ve made several donations to the site’s maintainer. Though the newly-discovered JS Deminifier add-on will reduce my dependency on this site a bit, I still use it for chunks of HTML that I pull out of Facebook, or pieces of script that JS Deminifer won’t handle. It’s absolutely an essential tool for me.

If you’re a developer, I hope you check out some of these great tools, and possibly include them in your toolbox too!