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

11Jan/100

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:

28Dec/090

TOTW: Etherpad.com

This week's Tool of the Week is Etherpad.com.

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...

21Dec/090

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 screencast.com

The example:

17Dec/090

Exploring jQuery getScript, or “How I created the jQuery getScriptLite plugin”!

I set out to discover how the getScript function in jQuery works today. Here is what I found. This post sort of illustrates just how easy it is to dig into the jQuery source and really learn the library.

The first thing I did is hop over to github and pop open the source for the 1.3.2 release:

http://github.com/jquery/jquery/tree/1.3.2/src

Since getScript() is an AJAX function, I naturally clicked on "ajax.js". On line 109 I found:

Oh wow! It's just a convenience method! It doesn't do anything magical at ALL. It simply calls $.get().

Now, I could have stopped there, but for fun, let's go deeper. On line 93 I found the get() function:

Ok, so get() is really just a convenience method for ajax(), so let's look for that. Line 25, the ajax() function:

Wait, that's not the one! I don't really know how this works, but that can't be the one because it strips out the script tags. I find another one later on on line 170 that goes all the way to line 451. Way down on line 253 it seems to handle the actual script loading:

Aha! Clever. Creates a script tag and sets it's source to the one we specified and then on line 278 appends it to the head of the document, I'm assuming at that point running the script because two lines later it returns out of the function:

So, there you have it! It would almost seem that you could do the same thing by:

In fact, that seems to work just fine. Hrm... Fork me on github and/or get the plugin!

14Dec/090

JavaScript Console v0.0.1

jsConsoleSS

So I just made this little extension for Chrome.

There were some pretty convoluted to gymnastics I had to go through to get the console on the page and get it to execute the JS I wanted it to execute. Pretty much the only hook you have it an onClick (from what I can tell). They've got it locked down TIGHT.

This needs a LOT of experimentation done, but it looks like you can use it to define functions on the page through the console and call those functions. However, the functions do NOT persist. So, you can do:

function test(){
alert('test');
}
test();

and "execute js" and an alert will come up and say "test".

But you can't do:

function test(){
alert('test');
}

and "execute js" and then:

test();

and "execute js" and expect an alert to pop up.

I'm sure there are many sound reasons for this from a security standpoint, but it's annoying as hell to try and program for. It would be great if I could fix this and I have a few ideas as to how I can do that...

The main reason I'm making this is basically as a prototype/POC for the Status-bar Calculator port from FF since I'm going to have to do some very similar things to get the Calculator to show up in the bottom right hand corner (like this does).

EDIT: After publishing the extension, it was pointed out to me that Chrome already *has* a JavaScript console if you hit Ctrl + Shift + J. However, that console only allows single line input, whereas this allows for as many lines as you want, making this just a *little* more functional. It would be awesome if I could find a way to hook this console into that console.

Checkout the project page.

14Dec/092

TOTW: Spoon.net/browsers

This weeks Tool of the Week is spoon.net's browser sandbox tool.

What it does:

Allows you to run sand-boxed versions of each of the major (and minor) browsers from within Firefox.

When you need it:

  • Cross browser testing
  • Running multiple versions of the same browser at once

How to use it:

Screencast hosted on screencast.com

9Dec/090

Chrome Extension – Status-bar Calculator v0.1.9

So I ported the Status-bar Calculator over to Chrome. It took me a little under 2 hours.

Chrome extensions are shaping up to be a gagillion times easier to create than FF extensions were back when I started doing them four years ago. I actually re-wrote the entire thing from scratch. It functions completely differently, relying entirely on the eval() function to do all of the math (where the FF version jumps through some crazy hoops).

The Chrome version has something I've wanted for a long time: history.

It's not persistent yet, but while you are in a "session" the equation history keeps building below the box so you can see where you've been if you are plugging away at a list and lose your place.

As with the FF version, it's MIT license. Steal it, or hack on it and contribute back to me (I'll definitely credit you and much appreciate it).

You can check out the source code here or on Etherpad here.

I'm looking forward to really fleshing this thing out and making it rock for whenever extensions make their public debut in Chrome. Oh, yeah, btw, you have to install the developer beta of Chrome to get extensions...

7Dec/090

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:

5Dec/090

Google Wave Invitations

So after my previous post with the rousing endorsement for wave (haha) it turns out I actually have 16 wave invitations I can send out.

If anyone wants one, leave a comment with the e-mail you want me to send it to (if you don't want your e-mail sent to the world, just leave a blank comment or something and I'll look at the e-mail you used to make the comment)

4Dec/090

Google buys Etherpad

Google has purchased Etherpad to kill it so they won't have competition for Wave.

I'm a user of both Etherpad and Wave, and I can say without a doubt that Etherpad (right now) is better. This is crap. Doesn't really look "not evil" to me. Oh well.

Guess this means I'll have to take it out of my TOTW rotation (it was scheduled for the last monday of Dec)...