Wow, what a way to wake up in the morning! As you might imagine, Iāve been beaming inside ever since ;) What an honor to be accepted into the Microsoft Most Valuable Professional (MVP) Award!
Shortly laterĀ that morning I received the official email welcoming me to the programā¦
Congratulations, you are one of only a few thousand people around the world who have been recognized with a Microsoft MVP Award.
I want to thank everyone who has supported & encouraged meā¦ and of course all the tweet love youāve shown :)
Earlier this year I was also accepted into the ASPInsiders program which has enabled me to converse with the developers of ASP.NET MVC, provide feedback, and play with the newest bits of software before they are released.
I look forward to growing more as a developer and will attempt to continue and provide helpful and timely resources, tips, and tricks for web developers (ASP.NET, ASP.NET MVC, jQuery, HTML, CSS, etcā¦)
As Iām sure you know I am quite active on Twitter and provide daily tech tweets that are also posted on my blog in a daily tech tweet roundup and also archived to delicious.
Thanks for all the tweetulations today by the following band of twitter folkā¦
In the following screencast I will demonstrate how to speed up your website by using a Content Delivery Network (CDN). Specifically, I will be swamping out a local copy of jQuery with one hosted by Google. You can host a variety of files (example: jQuery, jQuery UI, Prototype, script.aculo.us, MooTools, Dojo, SWFObject, YUI, etc...) with a CDN as well, but the following screencast only shows jQuery being hosted.
First of all, you might be wondering "What is a CDN and why do I need to use one?". If so, you are in luck because Encosia wrote a great blog post concerning this question and here is what he came up with. A CDN provides...
Decreased Latency
Increased Parallelism
Better Caching
For a detailed explanation of the above 3 concept please read his detailed blog post. Now without further ado, here is the screencast.
In the above screencast, I showed how you can replace your local reference of jQuery (see line 4 below) with a version of jQuery that is hosted on a CDN (such as line 5 from Google or line 6 from Microsoft).
Test Page
It is worth to not that even after updating your update to use Google or Microsoft as your CDN, YSlow will still not recognize those files as being hosted on a CDN. YSlow only recognizes itself, Yahoo, as a known CDN. The good news is that you can register other CDNs (such as Google &| Microsoft) deep inside of Firefox's configuration. In order to update this setting you can follow these instructionsā¦
Type in 'about:config' into the Firefox's navigation TextBox
Filter for the 'extensions.yslow.cdnHostnames' Preference Name
Double-Click & enter 'ajax.googleapis.com,ajax.microsoft.com' into the dialog box
Restart Firefox and re-run YSlow
As I mentioned above, there are many files on CDNs that are available for you to reference in your project. The two CDNs that I highlighted in the above screencast areā¦
The following short screencast shows how you can use the jQuery UI ThemeRoller Firefox Bookmarklet to quickly switch the theme on your webpage in order to compare and tweak out the colors that is just right for your website.
Ā
Not only do the jQuery UI Plugins support the jQuery UI Themes, but there are several other jQuery Plugins that also utilize the themes as well such as
The following screencast focuses on how to quickly make a jQuery plugin. The intent is not to dig deep into the ins and outs of a jQuery Pluginās wiring. If that is what you are looking for there are many other good tutorials out there for that such asā¦
This screencastās focus is to build off of your current knowledge of how to build a jQuery Plugin (although it doesnāt have to be too deep), and allow you to quickly focus on the building your plugin, rather than worrying about how all the little pieces are wired together.
The tool we will be using is called Starter: jumptstart Your jQuery Plugins and you just provide the new jQuery Plugin name, optional namespace, parameters, options, etcā¦ and then you are on your way focusing on the guts of your Plugin.
Ā
Update: This screencast has been posted on Nettuts+ for voting. If you like it, then please consider voting for the 3rd entry on the Nettuts+ blog postā¦
The plugin that we will be creating is an ImageTextOverlay that will allow you to provide a list of message and overlay them over a message. The message will fade in and out in succession and you will be able to change the properties of each message (such as itās location, size, color, etcā¦). I was inspired to write this small plugin after hearing someone on Twitter wanting something similar to this.
Sometimes it is easiest if we look at how we want to use our Plugin before actually creating it. So, here is a simple page that is selecting an image and calling our imageTextOverlay plugin. You can see how there is a default top & left positions provided and then a list of messages. Each message only needs to have a text property provided, but you can also provide many other properties to override the default values.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
The next step is to starting entering our plugin Class Name and Default Options into the Starter: jumptstart Your jQuery Plugins online tool. Then we just click the Create button to prototype out our plugin! We can either copy/paste the results into our own file or there is even a Download button so you donāt have to copy/paste :)
Now we can focus on writing the core logic of our jQuery plugin and not have to worry about all the nuts and bolts of how a plugin should be structured. So, here is what I put together for the ImageTextOverlay plugin. I will highlight only the lines of code that I actually wroteā¦ everything else was generated by the online tool!
(function($){
$.ImageTextOverlay = function(el, options){ // To avoid scope issues, use 'base' instead of 'this' // to reference this class from internal events and functions. var base = this;
// Access to jQuery and DOM versions of element base.$el = $(el); base.el = el;
// Add a reverse reference to the DOM object base.$el.data("ImageTextOverlay", base);
$.fn.imageTextOverlay = function(options){ return this.each(function(){ (new $.ImageTextOverlay(this, options)); }); }
// This function breaks the chain, but returns // the ImageTextOverlay if it has been attached to the object. $.fn.getImageTextOverlay = function(){ return this.data("ImageTextOverlay"); }
})(jQuery);
As I mentioned above, I only wrote the lines that are highlighted. The rest of the plugin was written by the Starter: jumptstart Your jQuery Plugins online tool!
If you are interested in other screencasts, I have made several others that you may be interested in as wellā¦
In addition to this post being part in a series of Firefox Extension screencasts, it is actually also the 3rd part of an old series looking through various JavaScript Unit Testing frameworksā¦
The following short screencast will give a quick review of the FireUnit Firefox Firebug Add-on and also the QUnit Unit Testing framework for jQuery. In case you donāt want to watch the 4 minute screencast I thought I would go ahead and flush out the rest of this blog post with code, screenshots, and commentary.
As a review, to exercise our Unit Testing frameworks we have been using a simple Pig Latin function as our testing subject.
This code is not optimal and it will be refactored in a future post. So, please focus on the Unit Testing and not the actual Pig Latin function :)
So, here is the Pig Latin converter function we will be using for our testsā¦
function EnglishToPigLatin() { this.CONSONANTS = 'bcdfghjklmnpqrstvwxyz'; this.VOWELS = 'aeiou'; this.Translate = function(english, splitType) { var translated = '';
var words = english.split(/\s+/); for (var i = 0; i < words.length; ++i) { translated += this.TranslateWord(words[i]); if (i+1 < words.length) translated += ' '; }
if (english != null && english.length > 0 && (this.VOWELS.indexOf(english[0].toLowerCase()) > -1 || this.CONSONANTS.indexOf(english[0].toLowerCase()) > -1 )) { if (this.VOWELS.indexOf(english[0].toLowerCase()) > -1) { pigLatin = english + SYLLABLE; } else { var preConsonants = ''; for (var i = 0; i < english.length; ++i) { if (this.CONSONANTS.indexOf(english[i].toLowerCase()) > -1) { preConsonants += english[i]; if (preConsonants.toLowerCase() == 'q' && i+1 < english.length && english[i+1].toLowerCase() == 'u') { preConsonants += 'u'; i += 2; break; } } else { break; } } pigLatin = english.substring(i) + preConsonants + SYLLABLE; } }
return pigLatin; } }
First we are going to write a simple set of 20 FireUnit tests that can be ran inside Firefoxās Firebug using the FireUnit Add-on.
If we run the webpage inside of Firefox, we donāt see anything from the browser window, but if we open Firebug and click the āTestsā tab, then we can see the output of the 20 tests.
One of the other nice features of FireUnit is that its compare assertion will actually show the difference of the two values instead of just saying they are the same or not. Here is an example of the output from a failing compareā¦
The output is pretty impressive, but what if you already have a lot of existing QUnit Unit Tests or what if you would also like to have some sort of User Interface to your test page. Well, the nice thing about FireUnit is that you can integrate it into QUnit! By adding several lines of code we can have the output of our QUnit tests render to the FireUnit Add-on as well!
The following is a set of QUnit Unit Tests with 4 lines of code near the end that registers the output with FireUnit as well.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
English To Pig Latin QUnit Tests
English To Pig Latin QUnit Tests
Now, not only do we have a User Interface on the webpage, but we also have the tests running in Firebug.
For more information about FireUnit you can check out a post by Jonn Resig and itās Wiki on GitHub. And if you are interested in QUnit, there is a nice overview on the jQuery webiste.
Earlier this year I was also accepted into the ASPInsiders program which has enabled me to converse with the developers of ASP.NET MVC, provide feedback, and play with the newest bits of software before they are released. 
As Iām sure you know I am quite active on Twitter and provide daily tech tweets that are also posted on my blog in a daily tech tweet roundup and also archived to delicious. 
