A slightly closer look at JSMin
A month or three ago I did a post on different JS compression utilities. At that time I had decided that the YUI compressor was the best.
"In my opinion YUI is the best, you can choose several different compression levels and it works very well compressing prototype, so well in fact that we got it to shrink down an extra 10k than what had been done with ShrinkSafe. Also the YUICompressor is semi-intelligent with whitespace, it checks for ascii characters before and after a piece of whitespace to know if it should remove it."
After learning a bit more, I haven't completely changed my mind, but I thought that I would mention JSMin a bit more. The main reason for this second look is that when combined with gzip (or deflate), JSMin really is a wonderful solution to compressing your javascript files (and the solution recommended by the jQuery team).
Speaking of jQuery, you can use JSMin to shrink the jquery.js down from 95k to 53k. Then you can use gzip on your server and it will crunch down to about 15k! I haven't tried using gzip on a yui compressed file, but it may have the same problems that a PACKED js file has. Meaning gzip either won't work on it, or your functions will "esplode".
You can grab JSMin here (at the time of this post, the link to download the file is at the bottom of the page).
Print This Post
Weekly Training – Debugging
It's time to learn how to get the bugs out. This week we covered basic debugging (from starting the server) to using some external tools (such as the fantastic Firebug plug-in). For the full show you can check the audio clip at the end (I'll post it when I'm done 'cleaning' it).
Highlights:
- Rational debugging mode
- Firebug (for both CSS editing and javascript debugging)
- Drew's fantastic commentary as nothing works the way he intends (for the first 20-ish minutes)
- My extremely long pause... that I think I may still be on.
On a side note, there are two other tools that are very helpful when trying to debug or develop on IE, Safari, Linux browsers, etc. They are XRAY and Aardvark, and both are bookmarklets (meaning you bookmark the javascript itself and run it when you need it, similar to a bookmark).
XRAY can be found here http://www.westciv.com/xray/.
Aardvark can be found here http://karmatics.com/aardvark/bookmarklet.html.
Audio clip will be here when I'm done editing it... UPDATE: Or it won't, looks like my sansa destroyed the file, I mean it's still there, just not in a format that any program can read... I may still play with this, but I'm thinking it's a lost cause... sorry 
Print This Post
jQuery… IBM endorsed?!?
Now that I have your attention, it's not completely what you are thinking, they haven't endorsed it for E-Com, but they have a very nice article written up in the DeveloperWorks under "XML - Web Development". I have toyed with jQuery a bit and I think it may be a better solution for simple animation and style changing. It is by no means a replacement for prototype (which is so powerful - for js - that it gives me headaches), but it is a nice solution to simple problems, and it has some very nice features (you can select anything, seriously, anything on the page). There's just one thing to remember... Unobtrusiveness is the key so remember to put everything in the "document ready" section.
$(document).ready(function() { // put all your jQuery goodness in here. }); |
OR you can use the short cut, like so...
$(function() { // Put more jQuery goodness here. }); |
So if you wanted to do a click event, you would do something like this.
$(document).ready(function() { $('#buttonDiv').click(function() { $('#grow').animate({height: 500, width: 500 }, "slow", function(){ alert('The element is done growing!'); }); //alert function }); //click function }); //ready function |
I threw in some extra commenting so you could more easily see the ending tags of each function (also this blog engine tends to remove all whitespace in the code section so while it looks pretty while typing, it usually comes out stripped...) Also something to keep in mind is that all javascript should be unobtrusive, meaning you shouldn't need to use onClick events unless you absolutely have to. So as typed in the jQuery example above, the line " $('#buttonDiv').click(function() {//do something} " would be something close to " docuement.getElementById('buttonDiv').click(function() {//do something} " in standard javascript.
Anyway, that is a quick intro to jQuery, check "Simplifiy Ajax development with jQuery" on DeveloperWorks for more.
Print This Post
JS Compressors
So Jason found that one of the compressed versions of prototype we were using was causing some function to not work. The prototype file in question had been shrinked using ShrinkSafe, which is based on Rhino, and is actually made by dojo (I figured since IBM has a dark-alliance with dojo, it'd work fairly well with Websphere. Needless to say, ShrinkSafe is well... crap. So here is what you should use instead.
- jsmin*
- /packer/
- YUICompressor*
*Now I didn't link to the jsmin or to YUI because they could be updated, and they are files you run locally on your box while /packer/ is a copy-paste web-util.
In my opinion YUI is the best, you can choose several different compression levels and it works very well compressing prototype, so well in fact that we got it to shrink down an extra 10k than what had been done with ShrinkSafe. Also the YUICompressor is semi-intelligent with whitespace, it checks for ascii characters before and after a piece of whitespace to know if it should remove it.
Print This Post
Form input=”checkbox” clearing
So it turns out that there is a fairly-easy way, and a wicked-easy way to handle almost things you come across. And if it feels like it's way to hard, I'm pretty sure it is. Needless to say we were on the NordicTrack site working on a form for the 'compare' feature, and we needed to clear all the check-boxes on the page whenever certain buttons are pressed (the 'bug' so that it would compare the two items listed in the series). We finally ended up with this nice little loop (lifted partially from a google code site)
var frm = document.selectionform;
var el = frm.elements
for(i=0;i<el.length;i++){
if(el[i].type == "checkbox"){
el[i].checked = false;
}
}
Now while this is super-great, I knew that it could be better done since we are incorporating Prototype into the project, but I couldn't remember the command that would make this better. Well, I just stumbled on to it. What we needed was a one liner.
Form.reset(formname)
That's it, that would have fixed the entire thing, no looping, no extra variables, just that line. Now if you use this in your own code elsewhere, remember that it erases everything from your form, not just check-boxes.
Print This Post
Useful JScript Event Handlers
I was working on Freemotion - more specifically the consumer side where you can choose a vendor/distributor in your area - and noticed that the page didn't work in Firefox, but was working flawlessly in IE. Naturally this had to be fixed, as it is pure blasphemy to have IE working when Firefox doesn't. So I checked the event handlers on the select box and found an onkeyup, and an onchange. Now normally the onchange should be sufficient to change the page, however I ended up using an onmouseup in conjunction with the onkeyup. It fixed the problem, and now I post what I found on the interweb in my search for event handlers.
Useful javascript event handlers:
* onAbort - The user aborts the loading of an image
* onBlur - form element loses focus or when a window or frame loses focus.
* onChange - select, text, or textarea field loses focus and its value has been modified.
* onClick - object on a form is clicked.
* onDblClick - user double-clicks a form element or a link.
* onDragDrop - user drops an object (e.g. file) onto the browser window.
* onError - loading of a document or image causes an error.
* onFocus - window, frame, frameset or form element receives focus.
* onKeyDown - user depresses a key.
* onKeyPress - user presses or holds down a key.
* onKeyUp - user releases a key.
* onLoad - browser finishes loading a window or all of the frames within a frameset.
* onMouseDown - user depresses a mouse button.
* onMouseMove - user moves the cursor.
* onMouseOut - cursor leaves an area or link.
* onMouseOver - cursor moves over an object or area.
* onMouseUp - user releases a mouse button.
* onMove - user or script moves a window or frame.
* onReset - user resets a form.
* onResize - user or script resizes a window or frame.
* onSelect - user selects some of the text within a text or textarea field.
* onSubmit - user submits a form.
* onUnload - user exits a document.
Print This Post