Chomper Stomping jQuery/JavaScript/CSS 3/HTML 5, Java/PHP/Python/ActionScript, Git, Chrome/Firefox Extensions, Wordpress/Game/iPhone App Development and other random techie tidbits I've collected


TOTW: Modernizr

Modernizr is a JavaScript library that you include on your page that executes itself and adds a series of classes to your HTML tag. This allows to implement modern CSS functionality without worrying about writing conditionals in JavaScript or anything complicated like that. You simply write one (or at most two) style definitions around the functionality you want, like this:

.functionalityYouWant #myElement{
css3thing: blah;

.no-functionalityYouWant #myElement{
oldSchoolWay: blah;

So, real world example:

.cssgradients .sideNavTitleBox{
background: -moz-linear-gradient(center bottom, #000 13%, #353535 84%);
background: -webkit-gradient(linear, center bottom, center top, color-stop(0.13, #000), color-stop(0.84, #353535));

.no-cssgradients .sideNavTitleBox{
background-color: #000;
background-image: url(/media/images/backgrounds/left_nav_box_header.gif);
background-repeat: repeat-x;
background-position: left top;

Again, you don't have to write any javascript at all, you just include the library on the page and it runs all on it's own and enables this awesomeness!

EDIT: Oh look, ALA just posted a great article on modernizr.


TOTW: Freenode IRC Webchat Client

This week's Tool of the Week is The Freenode IRC Webchat Client.

What it does:

Allows you to chat on Freenode IRC through your browser, even if your corporate proxy blocks IRC (IRC is the third biggest security hole for corporate networks).

When you need it:

  • When you don't have an IRC Client installed
  • When IRC is blocked

How to use it:


TOTW: Dynamic Dummy Image Generator

This week's Tool of the Week is Dynamic Dummy Image Generator.

What it does:

Allows you to display custom sized dynamic images on any webpage using nothing but a normal image tag and a special URL.

When you need it:

  • Mockups
  • Prototypes
  • Place Holder Images

How to use it:

The Example:


TOTW: Subversion & Subversion Clients for Mac

I did a little research a few months back about Subversion Clients for Mac. I ended up switching to GIT, but since I already had this post mostly finished, here's what I found. This is going to break a little from the traditional TOTW format since it's more of a sampling of a lot of different tools. I've already posted about two of these before...

What it is:
Subversion is a semi-modern version control system. As I said, Git is quickly replacing it as the "next big thing". But if you are going to do version control, and you're not doing Git, you should at least consider Subversion (and I'd stay away from CVS, it's old and borked). It allows you to "save states" of your program. So, instead of "save as" > "myProject1", then "save as" > "myProject1working" and then "myProject1tryNewThing" etc, you would just have one copy of your project/file that you "commit" to your version control. Each commit lives as it's own snapshot so that if you need to go back to another version, you just browse your history and restore that version. You can even "diff" your current version with any other older version to see what you changed if you're trying to figure out how you broke something.

When you need it:
Anytime you do any software project at all, big or small, I'd say you need version control. But here's the bullet list:

Working on a software project:

  • In a group
  • By yourself on one machine
  • By yourself across multiple machines
  • Working on an open source project to help distribute the source code
  • Joining an open source project (if they don't have version control, they aren't worth joining, unless you are joining to set them up with version control 😉 )

There's a few options out there, but no clear winner. On Windows, TortoiseSVN seems to be the clear winner, and is a great tool. Nothing stands out this way on Mac. At least nothing free. So here you'll find a list of several Subversion clients for Mac. My favorite as of this writing is Versions, but it costs $60 (there's a free 30 day trial). I recommend setting up a subversion server (either on your local machine, or corsair) and using it. Any job worth having is going to require you to use a version control system, so it's best you become familiar with one now.

Here's a question on StackOverflow discussing these plugins if you're interested in learning a little more.

Using Subversion from command line

Martin Ott's Binaries
Free Subversion Book


Versions provides a pleasant way to work with Subversion on your Mac. Whether you're a hardcore Subversion user or new to version control systems, Versions will help streamline your workflow. Versions is here now, so say hello to the fresh new look of your repository and start saying less to that command-line interface. Download the free demo to take it for a spin.


SCPlugin Download


ZigVersion is an easy to use interface for Subversion, a popular open source version control system. Instead of simply reproducing the command line concepts as a graphical interface, we looked at the typical workflows of professional programmers and designed an interface around them.


TOTW: Google Closure JavaScript Compiler Web Interface

This week's Tool of the Week is Google Closure JavaScript Compiler. I know everyone has probably heard of it, but if you haven't gotten around to checking it out, this post is great for you.

What it does:

Allows you to compile JavaScript down to a compressed form. It reads in your JavaScript, parses it, and re-writes it to be much smaller. This is good for you because it will make your site load faster, much faster in some cases.

When you need it:

  • To compress your JavaScript
  • To combine multiple JavaScript Files

How to use it:

The Example:

Additional Notes:
Notice in the compile directions there is an @output_file_name parameter. You can change this to something other than "default.js" (you can name it anything you want. Then you can actually access the results by clicking on the link on the right hand pane that says "The code may also be accessed at default.js" (if you rename it it will put the name you put instead of default.js). Here's the file generated by my example.


TOTW:Hallelujah Button

This week's tool of the week is the Hallelujah button.

What it does:

Plays an instant hallelujah chorus sound effect.

When you need it:

Ever work for a long time on a bug or a problem that is just horribly awful to try and figure out? Then when you finally do you just want to stand up and shout? Enter the Hallelujah button. The perfect sound effect for just such an occasion.

Yeah, this week's tool of the week was a little weak. I made the Hallelujah button one day last week when I was bored. Then when I was done I noticed, which is basically the same thing. Oops. Oh well... So this post serves the dual purpose of being this week's tool of the week and being the announcement of

Hoping to put a poll for people to say how they spelled hallelujah (hardly anyone knows how to spell it) as well as a daily hallelujah counter.


TOTW:Online JSON Parser

This week's Tool of the Week is Online JSON Parser.

What it does:

Allows you to paste in a JSON string and have it validated. It will immediately allow you to see pesky subtle errors in your JSON syntax. Just edit your JSON string right there in the box and it will auto update the preview below live so you can immediately see the effects your changes have on the outcome.

When you need it:

  • When trying to debug or write JSON

How to use it:

The Example:



This week's Tool of the Week is

What it does:

Allows you to edit a text file collaboratively in real time with others. Each person's changes are highlighted in a unique color. The file gets saved to their server at a unique URL that you can share and reference. You can view past versions of the file using a "Time Slider". It's kind of like Google Wave, but easier to use... There is even a chat feature on the side of the page for off-document conversation that persists from session to session.

When you need it:

  • When walking through or collaborating on some code with another developer
  • When collaborating on a text document (like a list or something)

How to use it:

In case you blinked at the end, I had Firefox and Chrome both open and was editing the same pad from within the two browsers. It kept the edits in sync live between the two browsers. This would have been more apparent had I actually had them both showing, which I should have done, but didn't think about it until just now...


TOTW: Firebug HTML > Layout

This week's tool of the week is another component of Firebug, the "Layout" tool.

What it does:

Allows you to edit html element box dimensions directly in the browser to get that perfect witdh/height/padding/margin/border combo you're looking for.

When you need it:

  • Resolving float issues
  • Adjusting Padding/Margin
  • Prototyping Layouts

How to use it:

Screencast on

The example:


TOTW: Firebug Console

This is a special Tool of the Week, because it focuses on a sub-set of a larger tool. This week's Tool of the Week is the console feature of the Firefox extension Firebug by Joe Hewitt, Rob Campbell, FirebugWorkingGroup.

What it does:

Allows you to run commands and play with the JavaScript on a web page, as well as output information from a webpage through a dos/shell style console; all from within the browser window. It's as if you "opened the hood" of the browser and started running diagnostics/talking to the robot that controls the page display.

When you need it:

  • prototyping JavaScript
  • debugging JavaScript
  • writing JavaScript

How to use it:

Please note that this doesn't even BEGIN to scratch the surface of the power of this little tool. Check out the documentation, here and here.

The Example: