Tools of the trade, helmet not included.

So for the past two days I’ve been coding and coding and coding some more. The site that’s currently in development is almost done! Whenever I code though, I need to have some alone time.. not just for my sake, but for everyone’s.

When I’m coding, I sort of get lost in time. I even get a little rude sometimes. I just can’t be bothered with things generally. It’s not that I intend to be this way, but it takes so much focus and energy that when I’m in it I get a little snippy with people that interrupt the flow. I’ve also been known to vocally exclaim when I’m victorious.

Knowing this about myself, I often code at home instead of in the office. Thankfully, my boss understands this about me and doesn’t have a problem with that (and no one wants a grump or a hermit in the office anyways—kind of a downer). Plus, when I reach a good point I need breaks, which sometimes I forget to take at the office. The advantage of being at home is I can walk to the kitchen, have a little snacky and get back to it with fresh eyes. Helps when designing too, certainly, but when there’s tricky coding to be done, sometimes you just have to think and not type and the solution appears.

Plus it helps if I wear the helmet. Wouldn’t wanna get hurt bashing my head against the wall.

But let’s get to the point—I got to use some new (to me) techniques for this site, and I’m pretty excited about them.

JQuery plugins I’m using for the first time


The first time I came across this plugin was when I was building the UIC Center for Urban Education site. I needed something to make the blocks fit into each other, but ended up using Masonry for the sake of keeping it simple, but I think they might be developed by the same person/people. Not sure.

In any case, this time I used it for category filtering. You see this a lot on new WordPress themes usually, where you might want to sort portfolio items by type. This site actually uses Quicksand  which does the same thing, but I really wanted to give Isotope a try. It’s got a TON of features that I won’t be using this time around, but it certainly got the job done for me this time.

It was really easy to set up and implement in ExpressionEngine. I didn’t have any trouble, and it took me less than an hour to get it running and test it with new categories and so on. I’m no JQuery Ninja™, so my expectations of getting things right on the first try are generally low, but this plugin is extremely well-documented. Kudos and thanks to the developers of Isotope! They’ve sure earned my $25 license fee.


This one was dead easy to use, and works exactly as promised. The only trick was getting the margin between the columns right, but it sure didn’t take much to figure that out. Columns on websites used to be a real b*tch if I may say. I think there’s a CSS3 column thing now, but I don’t trust it for wide support yet.

No fail plugins I pretty much always use

There are some plugins that are go-tos for certain things because they’re easy to use and they never fail.


I’m still waiting to build a site where I don’t use Cycle. It’s great, and there are a ton of options for transitions and paging. This was the first time I used thumbnail images for paging, but I’ve never been disappointed by this one.


I actually didn’t need this one for the site I’m developing right now, but it’s been another go-to for many projects. I haven’t tried out version 2  yet, but if it ain’t broke I don’t see a reason to fix it. Maybe there are more features, who knows? Still a great plugin.

Some cool tools I use to make development easier

…because why do more work than necessary?

960 Gridder

This little bookmarklet is awesome. We use the 960 grid A LOT (I’m not convinced of going larger than that just yet, what with the iPad being 1024px), so this is great for testing. You can install it on your bookmarks bar and whenever you want to check if you’re lining up your grid right you just click the button, and you can adjust the number of columns to match your layout. It’s also fun to use it on other sites just to check what grid they’re using.

960 Grid Demo

Again, love the 960 grid, but rather than try to get sizes of elements from PSDs, I can count the columns of the guides in Photoshop and check it against the demo. I always know there’s 20px between the columns. This is just a way to figure out sizing at a glance, count the columns and that’s how many pixels it is! So useful.

Cut & Paste Character Count

Ok these last two are a little unusual, and certainly not specific to development, but that’s what I use them for! This one is just a basic character counter, like you’d have in MS Office and the like. When I’m working from a design or a wireframe, I may need to have the text trimmed to a certain number of characters. So I’ll go to the design, copy the block of text from the area that I want to be the limit, and see how many characters it is. That usually becomes the maximum allowed, and then it gets finished off with a …

Fraction Reducer

Ok, before you make fun of me for using a fraction reducer, consider this. 744:345. I use a plugin in ExpressionEngine called ED Imagresizer which is for dynamically resizing and cropping images so that clients don’t have to worry about doing it themselves, and I don’t have to worry about users downloading the gigundo images that the client might upload. The way that this plugin works is I can set a maxWidth or a maxHeight and then set a cropratio. So if I want an image to be a square that’s 70px, I would tell it maxWidth=”70″ cropratio=”1:1″. Easy. But if I want to make an image that’s 744px x 354px then I have to set maxWidth=”744″ and cropratio=”uhhhhhh”. So sure, I was a chemistry major, I’ve taken multivariable calculus. Could I figure this out on my own? Of course, I can easily tell at least they’re both divisible by 3, which would get me closer, but OMG WHY AM I DOING THIS?? I put it into this guy and I know my cropratio is 124:59. DONE. Don’t make fun of me.

So that’s my whole roundup for development of this site so far—not quite finished but pretty close! Any other developers out there? Any tools you can’t live without? Leave ’em in the comments!