I’ve Been MVP’ed

MVP_08Banner_EN

As I woke up this morning I checked my Twitter feed on my iPhone and saw the following tweet…

RT @Zannabanana: Welcome back MVPs! @robzelt @plitwin @DanWahlin @anthony808 @chadcampbell & Welcome new MVPs @SaraJChipps and @elijahmanor

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 :)

aspnetinsidersEarlier 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…)

twitter8 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…

@Zannabanana @AndyLeonard @johnnystock @lazycoder @mjlefevre @SaraJChipps @johnnystock @rob_james @D_Guidi @mstum @TheCodeJunkie @Frozzare @unclebiguns @DeveloperInfra @SteveAndrews @foreachdev @ChrisLove @arcanecode @AlanBarber @wendy_dance @DavidGiard @wbm @julielermanvt @alvinashcraft @RachelAppel @ddurose @sergeb @jgaylord @kyleNash @SuprotimAgarwal @wpstudios @JeremySkinner @JMBucknall @EduBergantini @GavinOsborn @maartenballiauw @MrTyzik @PrintsCharming @JRGarcia @Raycast @omarq @omarq @ronnycarreras @jglozano @christianaspnet @KathleenOrland @sergeb @donniefitz2 @tommynorman @geekedout @thegeekyouneed @tasid @shuraCL @karlprosser @davepurdon @taurafigueiredo @DouglasAguiar @novogeek @vimpyboy @dmohl @A_Robson @jcoehoorn @ifandelse @schmehi @vitaminjeff @jthomp @ehexter @snahider @ssathya @DeanWeber @navin_l @tobint @rrubin @toncijukic @darthobiwan @_Neville @Raycast @stimms @funcakes @neilcamm @D_Guidi @ivaylovasilev @eddiespooner @jbasilio @tekchic @stevenabanks @JavaScript1x @CoderDennis @kirstinj

Read More »

Increase Your Website Performance by Hosting jQuery with a CDN

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

  1. Decreased Latency
  2. Increased Parallelism
  3. 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…

  1. Type in 'about:config' into the Firefox's navigation TextBox
  2. Filter for the 'extensions.yslow.cdnHostnames' Preference Name
  3. Double-Click & enter 'ajax.googleapis.com,ajax.microsoft.com' into the dialog box
  4. 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…
Read More »

Quickly Testing Various jQuery UI Themes on Your Website

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

    If I am missing some others, please leave a comment and I will add it to the above list.
Read More »

Jumpstarting Your Next jQuery Plugin with an Online Tool

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 :)

StarterInput

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);

base.init = function(){

base.options = $.extend({},$.ImageTextOverlay.defaultOptions, options);

// Put your initialization code here
base.createAndUpdateImageText(base.$el, base.options);
}

// Sample Function, Uncomment to use
// base.functionName = function(paramaters){
//
// }

base.createAndUpdateImageText = function($ctlImage, options) {
var $ctlText = base.createImageText();
base.updateImageText($ctlImage, $ctlText, options, function() {
base.createAndUpdateImageText($ctlImage, options);
});
}

base.createImageText = function() {
var $imageText = $('#ctlImageText');

if ($imageText.length == 0) {
$('
')
.css({
position: "absolute"
})
.appendTo('body')
.hide();
$imageText = $('#ctlImageText');
}

return $imageText;
}

base.messageIndex = 0;
base.updateImageText = function($ctlImage, $ctlText, options, onComplete) {
var message = options.messages[base.messageIndex++ % options.messages.length];
var messageOptions = $.extend({}, options, message);
$ctlText.html(message.text).css({
fontSize: messageOptions.fontSize
});

$ctlText.css({
top: messageOptions.top,
left: messageOptions.left,
color: messageOptions.color,
letterSpacing: messageOptions.letterSpacing,
backgroundColor: messageOptions.backgroundColor,
}).fadeIn('slow').animate({ opacity: 1.0 }, 3000).fadeOut('slow', function() {
onComplete();
});
}

base.init();
}

$.ImageTextOverlay.defaultOptions = {
fontSize: "24px",
letterSpacing: "normal",
color: "white",
backgroundColor: "transparent"
}

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

Read More »

Unit Testing with jQuery using FireUnit & QUnit

Today’s screencast is the 5th in a series of developer Firefox Extensions. You can view my previous 3 short Screenr screencasts here…

    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 += ' ';
    }

    return translated;
    }
    this.TranslateWord = function(english) {
    /*const*/ var SYLLABLE = 'ay';

    var pigLatin = '';

    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.

    FireUnit

    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…

    FireUnitCompare

    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









      QUnitWithFireUnit

      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.

      Read More »