Do you notice anything strange about the txt URL parameter? āRyvwnuāā¦ what is that? Well, it stands for āElijahā
I put on my cracker hat and found that it was a simple character substitution algorithm. Take the letter you want āEā and add 13 characters to it āRā.
This eBook reminded me a lot of Cody Lindleyās jQuery Enlightenment in that it split itās eBook into small bit size installments (known as recipes) that can be consumed either sequentially or on a individual basis. The recipes are organized into situations or problems that you might want to solve using jQuery. This eBook differs from jQuery Enlightenment in that it focuses on the interaction with ASP.NET WebForms, which has a unique rendering of its server controls.
Most of my web development history has been doing ASP.NET WebForms (and more recently ASP.NET MVC) so, I enjoyed reading this eBook. I could understand the situations, problems, and pain points that the eBook addressed. It was nice to see how jQuery can resolve these issues in an unobtrusive and cross-browser way while only requiring a small amount of code.
Each recipe is formatted in the same wayā¦
A challenge that explains the situation, problem, or pain point being addressed
The solution displayed in the form of HTML and jQuery
An explanation of the code broken up in paragraphs, code snippets, and screen shots
A link to a live demonstration
A list of supported browsers for the above recipe
Useful links that are appropriate to further explain features from the code.
I would have written some of the code differently and I did find some performance concerns, but nothing major and when push comes to push and shove many micro-optimizations become moot in the big picture. Selector optimization and looping performance can help make your code become more efficient, but it is really DOM manipulation that will kill your performance in the end.
Despite these minor issues, I do recommend this eBook for any ASP.NET WebForms developer hoping to learn how jQuery could be integrated into their environment.Ā Ā Ā Ā
Mix 2010, a 3 day Microsoft conference for web designers and developers, recently opened up to all developers the opportunity to submit sessions that will be voted upon and possibly included in the conference line-up.Ā
Voting for these sessions begins today (January 5, 2010) and will close on January 15, 2010. At the end of the voting they will choose 10 sessions with the highest votes to be added to their conference. The winners of the selected proposals will be announced January 18, 2009.
You can view a comprehensive list of sessions or a filtered list of just my 4 jQuery sessions on the Mix10 website. There are 162 sessions and 92 speakers represented in the voting. You are able to vote for 5 sessions during your ballet submission. How do I know those statsā¦ well, because Iām a geek and ran some jQuery in the FireBug console ;)
var uniqueSpeaker = []; var speakerSelection = $('table tr td:nth-child(2) a'); speakerSelection.sort().each(function(i) { var speaker = $(this).text(); speaker = speaker.replace(/^\s+|\s+$/g,"") if (uniqueSpeaker[speaker] === undefined) { uniqueSpeaker[speaker] = 1; } else { uniqueSpeaker[speaker] += 1; } });
var numberOfUniqueSpeakers = 0; for(var key in uniqueSpeaker) { console.log(key + ': ' + uniqueSpeaker[key] + ' sessions'); numberOfUniqueSpeakers++; };
console.log('Number of Sessions: ' + speakerSelection.length); console.log('Number of Unique Speakers: ' + numberOfUniqueSpeakers);
Note: If you actually wanted to run the above script you will need to jQueryify the Mix10 Open Call Entries webpage since it doesnāt have jQuery referenced. The jQueryify bookmarklet inject jQuery into a webpage that doesnāt already have it referenced.
Speaking of jQuery, the 4 session that I submitted to Mix10 are jQuery relatedā¦
An overview of several in-depth concepts that developers need to learn to bring their jQuery development to the next level.
We will review 6 things that you should know such as "What Is This?", "Am I Referencing the jQuery Object or a DOM Element", "Understanding Selectors", "Combine and Minify Your Scripts", "Different Ways of Storing Data", and "The Dos And Don'ts of Events".
Along the way, I'll share several helpful websites and tools to make your job as a jQuery developer easier.
In the past 10 years, more and more Web development has moved off the server and migrated to the browser, making a user's experience more responsive. Unfortunately, this transition hasn't always been pleasant for developers. The good news is that tooling Front-End debugging is much better.
We will examine some necessary tools for development such as FireBug and several other helpful tools. Our main focus will be on Debugging Selectors, Debugging Events, and Debugging Chains. During the session we'll review some common scenarios and how to debug them.
jQuery has a wide variety of events and selectors that it already supports. Despite the rich functionality jQuery provides, you will eventually come to a spot where you need some event or selector that it doesn't support. The good news is that jQuery has made it easy to extend the library to support custom events and selectors.
In this session we are going to take a look at some of the existing events and selectors that jQuery makes available and then we will move on to show how we can extend jQuery to support our own custom needs.
Along the way, we will touch on what Event Driven Programming means and how custom jQuery events can make your code abide by the Open Closed Principle.
The concept of Unit Testing has been around for quite some time in the development world, but it's adoption in the JavaScript arena has been quite low.
In this session, we will examine a jQuery Unit Testing framework and a JavaScript Mocking framework to assist you in your Front-End Browser Unit Tests.
You can also use the discipline of Test Driven Development as you build out new jQuery and JavaScript functionality.
We will also examine how to integrate these Unit Tests into your Continuous Integration environment.
Of course Iād like for you to vote for one or more of my jQuery sessions above (click the Vote For Our Session Submission image above), but in addition I recommend you also look at the sessions by the following individualsā¦
I got an interesting Twitter question the other day and thought I would blog about it to help anyone who has a similar situation.
Question
Hey buddy! How can I do a simple thing as loading a page into a div using Ajax and on the loaded page, execute a simple task as executing a javascript with an alert box?!? The page is loaded but the javascript just doesn't run! If I access the page direct directly, the alert pops out ok! --@montedesucata
Ā
Scenario 1
My initial thoughts were that he was trying to put an entire HTML document (pulled back from an AJAX call) inside another HTML document (the document that made the AJAX call). You can't do that because then youād have two html elements, two head elements, two body elements, etc... in one document. So, my first example was to put the contents into an iFrame.
Note: You can also, strip out the body content of the returned full HTML document and inject that into your current document, but then you might not have the correct scripts or css files that were included in the head element (or wherever you put those).
<!DOCTYPE html>
<meta charset=utf-8 /> Load Full HTML Document via AJAX into iFrame
Load Full HTML Document via AJAX into iFrame
The contents of the FullTestHtmlWithAlert.html are belowā¦
<!DOCTYPE html>
<meta charset=utf-8 /> Load Full HTML Document via AJAX into iFrame
Hello World From Full Html Document
The following is a screenshot of the results after clicking the Load button.
Feel free to Demo the above code below...
Scenario 2
The other scenario is that the HTML from the AJAX call is a partial document, meaning that it doesnāt include html, head, body, etcā¦ tags and is just content that might be found in a body tag. This is a simpler case and the results can easily be injected into another DOM element in the document.
<!DOCTYPE html>
<meta charset=utf-8 /> Load Full HTML Document via AJAX into iFrame
Load Parital HTML Document via AJAX into Div
The contents of the PartialTestHtmlWithAlert.html are belowā¦
1
2
a
b
The following is a screenshot of the results after clicking the Load button.
I was reading Paul Irishās (@paul_irish) recent blog post entitled Updates from all around ā Dec 2009 and I saw an interesting for loop syntax that he referencedā¦
for (var i = -1, len = arr.length; ++i < len; ) // the cool guy loop
He went on further to show some performance results of the above syntax compared to the old for loop style most of us are used to.
I thought this was interesting, so I decided to put my own suite of tests together to exercise various looping techniques and determine their average performance.Ā
Note: In my test methods I wanted to simulate a semi-real world scenario where an array would be used and in the loop an item from the array would be referenced.
The test runner accepts the size of the array to be looped and the number of times you want the test to be ran. The end result will print the average time (in milliseconds) the test took to the console.
Here are the functions that I am profilingā¦
function oldAndBusted() { for (var i = 0; i < arr.length; ++i) { arr[i]; } }
function oldAndBustedCached() { var arrLength = arr.length; for (var i = 0; i < arrLength; ++i) { arr[i]; } }
function coolGuyLoop() { for (var i = -1, len = arr.length; ++i < len; ) { arr[i]; } }
function coolGuyLoopCached() { var arrLength = arr.length; for (var i = -1, len = arrLength; ++i < len; ) { arr[i]; } }
function whileLoopCached() { var i = 0, arrLength = arr.length; while (i < arrLength) { arr[i]; i++; } }
function reverseWhileLoop() { var i = arr.length; while (i--) { arr[i]; } }
Here are the results of my testing...
You can view, run, and edit the tests for yourself on JS Bin (jsbin.com/uvoye/edit)
From a speed perspective here is how the various looping techniques ranked against each other (#1 being fastest & #6 being slowest)
Reverse While Loop
The Cool Guy Loop
Old and Busted Cached
While Loop Cached
The Cool Guy Loop Cached
Old and Busted
I was actually surprised that āthe cool guy loop cachedā was slower than āthe cool guy loopā. I was thinking if I saved off the array length into a variable that it would speed up the loop instead of accessing the length every time.Note: If you have any variations of a loop you would like to see in my test cases, please provide a comment with your suggestion.
Note: The above performance times were ran using FireFox 3.6 Beta 4 using FireBug 1.5X.0b8 on an Intel Quad Core 2.00GHz Laptop running Win7.
