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).
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.
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);
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) {
$('<div id="ctlImageText" />')
.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…
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.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="PigLatinBad.js"></script>
<script type="text/javascript">
var englishToPigLatin = new EnglishToPigLatin();
//Invalid Arguments
fireunit.compare(englishToPigLatin.TranslateWord(null), '', 'Passing Null Should Return Blank');
fireunit.compare(englishToPigLatin.TranslateWord(''), '', 'Passing Blank Should Return Blank');
fireunit.compare(englishToPigLatin.TranslateWord('1234567890'), '', 'Passing 1234567890 Should Return Blank');
fireunit.compare(englishToPigLatin.TranslateWord('~!@#$%^&*()_+'), '', 'Passing ~!@#$%^&*()_+ Should Return Blank');
//Consonant Words
fireunit.compare(englishToPigLatin.TranslateWord('beast'), 'eastbay', 'Passing Beast Should Return Eastbay');
fireunit.compare(englishToPigLatin.TranslateWord('dough'), 'oughday', 'Passing Dough Should Return Oughday');
fireunit.compare(englishToPigLatin.TranslateWord('happy'), 'appyhay', 'Passing happy Should Return appyhay');
fireunit.compare(englishToPigLatin.TranslateWord('question'), 'estionquay', 'Passing question Should Return estionquay');
fireunit.compare(englishToPigLatin.TranslateWord('star'), 'arstay', 'Passing star Should Return arstay');
fireunit.compare(englishToPigLatin.TranslateWord('three'), 'eethray', 'Passing three Should Return eethray');
//Vowel Words
fireunit.compare(englishToPigLatin.TranslateWord('apple'), 'appleay', 'apple Should Return appleay');
fireunit.compare(englishToPigLatin.TranslateWord('elijah'), 'elijahay', 'elijah Should Return elijahay');
fireunit.compare(englishToPigLatin.TranslateWord('igloo'), 'iglooay', 'igloo Should Return iglooay');
fireunit.compare(englishToPigLatin.TranslateWord('octopus'), 'octopusay', 'octopus Should Return octopusay');
fireunit.compare(englishToPigLatin.TranslateWord('umbrella'), 'umbrellaay', 'umbrella Should Return umbrellaay');
//Sentences
fireunit.compare(englishToPigLatin.Translate('hello'), 'ellohay', "Passing 'hello' Should Return 'elloh'");
fireunit.compare(englishToPigLatin.Translate('hello world'), 'ellohay orldway', "Passing 'hello world' Should Return 'elloh orldw'");
fireunit.compare(englishToPigLatin.Translate('hello world!'), 'ellohay orld!way', "Passing 'hello world!' Should Return 'ellow orld!w'");
fireunit.compare(englishToPigLatin.Translate('Hello World'), 'elloHay orldWay', "Passing 'Hello World' Should Return 'elloH orldW'");
fireunit.compare(englishToPigLatin.Translate('Hello World!'), 'elloHay orld!Way', "Passing 'Hello World!' Should Return 'elloH orld!W'");
// Wait for asynchronous operation.
setTimeout(function() {
// Finish test
fireunit.testDone();
}, 1000);
</script>
</head>
<body />
</html>
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">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>English To Pig Latin QUnit Tests</title>
<link rel="stylesheet" href="http://jqueryjs.googlecode.com/svn/trunk/qunit/testsuite.css" type="text/css" media="screen" />
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://jqueryjs.googlecode.com/svn/trunk/qunit/testrunner.js"></script>
<script type="text/javascript" src="PigLatinBad.js"></script>
<script type="text/javascript">
$(document).ready(function() {
module("Pig Latin");
var englishToPigLatin = new EnglishToPigLatin();
test('Invalid Arguments', function() {
equals(englishToPigLatin.TranslateWord(null), '', 'Passing Null Should Return Blank');
equals(englishToPigLatin.TranslateWord(''), '', 'Passing Blank Should Return Blank');
equals(englishToPigLatin.TranslateWord('1234567890'), '', 'Passing 1234567890 Should Return Blank');
equals(englishToPigLatin.TranslateWord('~!@#$%^&*()_+'), '', 'Passing ~!@#$%^&*()_+ Should Return Blank');
});
test('Consonant Words', function() {
equals(englishToPigLatin.TranslateWord('beast'), 'eastbay', 'Passing Beast Should Return Eastbay');
equals(englishToPigLatin.TranslateWord('dough'), 'oughday', 'Passing Dough Should Return Oughday');
equals(englishToPigLatin.TranslateWord('happy'), 'appyhay', 'Passing happy Should Return appyhay');
equals(englishToPigLatin.TranslateWord('question'), 'estionquay', 'Passing question Should Return estionquay');
equals(englishToPigLatin.TranslateWord('star'), 'arstay', 'Passing star Should Return arstay');
equals(englishToPigLatin.TranslateWord('three'), 'eethray', 'Passing three Should Return eethray');
});
test('Vowel Words', function() {
equals(englishToPigLatin.TranslateWord('apple'), 'appleay', 'apple Should Return appleay');
equals(englishToPigLatin.TranslateWord('elijah'), 'elijahay', 'elijah Should Return elijahay');
equals(englishToPigLatin.TranslateWord('igloo'), 'iglooay', 'igloo Should Return iglooay');
equals(englishToPigLatin.TranslateWord('octopus'), 'octopusay', 'octopus Should Return octopusay');
equals(englishToPigLatin.TranslateWord('umbrella'), 'umbrellaay', 'umbrella Should Return umbrellaay');
});
test('Sentences', function() {
equals(englishToPigLatin.Translate('hello'), 'ellohay', "Passing 'hello' Should Return 'elloh'");
equals(englishToPigLatin.Translate('hello world'), 'ellohay orldway', "Passing 'hello world' Should Return 'elloh orldw'");
equals(englishToPigLatin.Translate('hello world!'), 'ellohay orld!way', "Passing 'hello world!' Should Return 'ellow orld!w'");
equals(englishToPigLatin.Translate('Hello World'), 'elloHay orldWay', "Passing 'Hello World' Should Return 'elloH orldW'");
equals(englishToPigLatin.Translate('Hello World!'), 'elloHay orld!Way', "Passing 'Hello World!' Should Return 'elloH orld!W'");
});
if (typeof fireunit === "object") {
QUnit.log = fireunit.ok;
QUnit.done = fireunit.testDone;
}
});
</script>
</head>
<body>
<h1>English To Pig Latin QUnit Tests</h1>
<h2 id="banner"></h2>
<h2 id="userAgent"></h2>
<ol id="tests"></ol>
<div id="main"></div>
</body>
</html>
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.
For those of you that do ASP.NET or ASP.NET AJAX development, then the following Firebug Add-ons might be of interest to you.
FireAtlas is a tool that enables you to view the PageRequestManager events, trace WebService calls, inspect Partial Updates, and view any installed application components. You can actually try out some samples pages to exercise most of the functionality of this Add-on, but I will be viewing the twitter scheduler application TwtMstr (developed by @wbm) to demonstrate some of the features in my screencast.
FireCookie is another useful tool that allows you to view any cookies that are relevant for the current web page. This can be handy for an ASP.NET developer to inspect the .ASPXROLES, .ASPXAUTH, or ASP.NET_SessionId values that are common for most ASP.NET applications.
Yet again, I hope this was beneficial to you. If you enjoyed the presentation I would appreciate either a comment to this blog &| a tweet about it to share with others.
Also, if you have any suggestions that you have to help become a better presenter I would appreciate that as well. If you have a minute, please add a comment with your thoughts.
You will most likely be asked to speed up the performance of some web page whether it be your corporate, personal, or some other web page. There are so many things that can cause a web page to be perceived as slow that it is helpful to have a tool to give you a guideline of where to start.
Fortunately, there are two great tools for the Firebug Add-on for Firefox that do performance checking of any given web page. The tools we will be looking at in the following screencast are Google’s Page Speed and Yahoo’s YSlow Add-ons.
Yet again, I hope this was beneficial to you. If you enjoyed the presentation I would appreciate either a comment to this blog &| a tweet about it to share with others.
Also, if you have any suggestions that you have to help become a better presenter I would appreciate that as well. If you have a minute, please add a comment with your thoughts.
Today I decided to record another screencast, and I decided to dig into the FireQuery add-on for Firebug.
FireQuery adds extra functionality to the HTML tab and allows you to visually see embedded data elements and event handlers that were added via jQuery. Also, the familiar jQuerify Bookmarklet has been built into Firebug allowing you to inject jQuery into pages that didn’t have it installed previously. This enables you to play around with jQuery or extract information for a webpage that might not previously have jQuery installed.
Yet again, I hope this was beneficial to you. If you enjoyed the presentation I would appreciate either a comment to this blog &| a tweet about it to share with others.
Also, if you have any suggestions that you have to help become a better presenter I would appreciate that as well. If you have a minute, please add a comment with your thoughts.
Tonight I created my first Screenr screencast showcasing the Firefinder Add-on for the popular Firebug Add-on for the even more popular Firefox browser :) Whew, that was a mouth full!
Firefinder is a helpful tool when creating a selector for jQuery, which is usually where you start for most jQuery work. In the following screencast I show how to use Firefinder in conjunction with the Firebug console window in order to add some animation effects to my blog on the mouse over and mouse out events.
I hope you found this screencast helpful. There are many Firebug Add-ons that are useful for web development and I hope to extend this series to include several of the others.
If you enjoyed the above screencast I would appreciate it if you could retweet it by clicking the following and posted it to your Twitter account… thanks :)
Last week I gave a presentation at the Compuware Thought Leadership meeting entitled, "Dive Into ASP.NET MVC RC2".
Several people asked me about the presentaiton and were interested in the material. However, the meeting was closed to only Compuware employees. So, I thought I would make a screencast of the talk.
The screencast covers the following:
An quick overview of what is "MVC"
Pros & Cons comparing ASP.NET MVC to ASP.NET WebForms
Answers to questions you might be thinking
Review of new features since the beta release
Demonstration & code review of a demo app using ASP.NET MVC RC2
Note: This is my first screencast, so please be patient with me :)
You can download the sample ASP.NET MVC RC2 application demonstrated in the screencast... PetShop5Rc2.zip
