JavaScript

In my first post about JavaScript compression and the different levels supported by the three major competitors in the JavaScript minimization, obfuscation, and optimization tools space. I the article I discussed which tool provided the best compression in regards to the resulting byte count. And found that Google took the over all crown with Microsoft following very closely behind. A comment posted on that article by Eric J. Smith of Code Smith, provided a nice lead in to my second article in this series, he posted this comment: ...

A little more than a year and half ago I created a MSBuild Task for the YUI Compressor that was very well received, and even highlighted on the YUI Compressor site. At the time of writing that article YUI Compressor was king of the hill, and for the most part the only game in town that was really designed for production level use. Since then a number of new competitors have been released by Google and Microsoft, and I wanted to see how they stacked up against the YUI Compressor. ...

One of the important things about web programming, especially when using AJAX, from a usability standpoint is to provide a responsive user interface to the audience. This level of responsiveness to the user’s actions can be achieved in many different ways; showing messages, changing colors, adding animation, changing contexts, basically anything that provides a natural transition from the action performed by the user to the reaction by the application to indicate that their action is actually causing something to happen. ...

I recently had a conversation with Scoot Koon (LazyCoder) over Twitter about the wacky JavaScript type comparisons that are allowed. I was interested to see what weird oddities would come out if I compared the whole type system against it self. So I sat down and wrote a simple JavaScript routine to do just that, and the below reference table is the output of that routine. null undefined true false -1 0 1 NaN Infinity "" " " “null” “undefined” “true” “false” “-1” “0” “1” “NaN” “Infinity” null null null – – – – – – – – – – – – – – – – – – undefined undefined undefined – – – – – – – – – – – – – – – – – – true – – true – – – true – – – – – – – – – – true – – false – – – false – false – – – false false – – – – – false – – – -1 – – – – -1 – – – – – – – – – – -1 – – – – 0 – – – 0 – 0 – – – 0 0 – – – – – 0 – – – 1 – – 1 – – – 1 – – – – – – – – – – 1 – – NaN – – – – – – – – – – – – – – – – – – – – Infinity – – – – – – – – Infinity – – – – – – – – – – Infinity "" – – – "" – "" – – – "" – – – – – – – – – – " " – – – " " – " " – – – – " " – – – – – – – – – “null” – – – – – – – – – – – “null” – – – – – – – – “undefined” – – – – – – – – – – – – “undefined” – – – – – – – “true” – – – – – – – – – – – – – “true” – – – – – – “false” – – – – – – – – – – – – – – “false” – – – – – “-1” – – – – “-1” – – – – – – – – – – “-1” – – – – “0” – – – “0” – “0” – – – – – – – – – – “0” – – – “1” – – “1” – – – “1” – – – – – – – – – – “1” – – “NaN” – – – – – – – – – – – – – – – – – – “NaN” – “Infinity” – – – – – – – – “Infinity” – – – – – – – – – – “Infinity” So some of the oddities that emerged to me are: ...

In this economy you have to do everything to keep your skills fresh and current so that employers find you a desirable hire. I really though the tips provided in 8 Ways to Recession-Proof Your Programming Career where spot on when this article came out last year. And now that the TechRepublic has released 10 kills developers will need in the next 5 years. I have decided to give you some of my favorite Wrox books that align very well to this TechRepublic article. ...

Today IE6 really kicked my butt, I had the following code working in FireFox, IE7, etc, all except IE6: ShowLoadingPanel(); // execute some code here HideLoadingPanel(); The above code is really simple, it shows a full screen loading panel when I am executing some code in between the Show and Hide functions for the loading panel. It worked in every browser that I tried except for IE6. This seemed to occur because the execution of the JavaScript was happening in the same thread as the UI rendering of the screen, which would block all screen updates to the browser until the JavaScript was executed. By the time all the JavaScript is done rendering the UI is in it’s final visual state, so it looks like the loading graphic was never run. Note I don’t know for sure that this is what is really happening, but it definitely seems like the most likely possibility. But if this is true it really explains the lack of support for JavaScript Animation, which heavily relies on a progressive incremental rendering of the UI. ...

For the longest time I have been wanting to add my Twitter status to my blog in place of my quote right under my blogs name in the header. (see above) Today I sat down and figured out what I needed to do to accomplish this and to my surprise it only took all of 10 minutes to complete. What you need in order to achieve the same for your own blog is: ...

As anybody who has run a growing website or blog knows, response time is going to get worse with the more users you have visiting your site. The users come from all angles, RSS feeds, homepage visits, search engine visits, people sealing your static files that you host, and pretty much anything else that can be served over HTTP. The solution to this problem is to off load your static content on to a Content Delivery Network or CDN. CDN providers cost a lot of money though, so it is nothing for us mere mortals with one server can afford. ...

Today I had the need to create a custom event using jQuery, in order to launch a customized form validation event from a global submit event. I did this so I could focus in on the first form field that had an error. My event from the global.js script, that is included on every page of IdeaPipe, looks like this: $("form").submit(function () { var valid = $(this).validate(); // if the form didn't validate then focus the input on the first error if (!valid) $(this).find(":input[error]:first").focus(); return valid; }); This is pretty standard jQuery. What this code above does is set a custom function for the submit event for any tag on the page. The submit event will only be allowed to continue if a return value of true is returned from the function. ...

Recently for IdeaPipe I have been looking for ways to deliver my content more quickly and reduce unnecessary bandwidth use. According to Yahoo’s Performance Team more than half of the viewers of the Yahoo websites start with an empty cache, which means the browser has to download all the resources for the first time. This combined with a high traffic website and unneeded white space and comments can really add up to a significant bandwidth use. There are many popular ways to minify your static content tax on your bandwidth, using many popular tools, as described in this excerpt from Yahoo: ...