Manorisms

© 2020. All rights reserved.

Book Review: Eloquent JavaScript

17 Mar 2011

<h3> Eloquent JavaScript: A Modern Introduction to Programming</h3>

Read More »

Hanselminutes #256: JavaScript& jQuery: Moving beyond Alert()

16 Mar 2011

Dave Ward ( @encosia ) and I were honored to be guests on Hanselminutes #256: JavaScript & jQuery: Moving beyond Alert() while we were at the MVP Summit in Redmond, WA.

Read More »

{Dev:unplugged} HTML5 Contest

15 Mar 2011


<h3>Contest</h3>
In addition to launching IE9 yesterday Microsoft has recently launched a new HTML5 competition called {Dev:unplugged}.

The goal is to encourage innovation and push the barrier as to what HTML5 and related technologies can create.

The contest is split between 3 main categories: Games, Music, and Innovation. To help get you started, Microsoft is even providing assets, recommending resources, and referring to various code samples.

<h3>Judges</h3>
As a side note, I am honored to be one of the judges for this contest alongside some extremely talented leaders in this field:

<ul><li>Andrew Dupont (@AndrewDupont)</li><li>Dion Almaer (@dalmaer)</li><li>Brad Neuberg (@bradneuberg)</li><li>Allison House (@allison_house)</li><li>Rob Ford (@fwa)</li><li>Ben Galbraith</li><li>Robert Nyman (@robertnyman)</li><li>Dominic Espinosa (@mrs_moustache)</li><li>Naveen Selvadurai (@naveen)</li><li>Grant Skinner (@gskinner)</li><li>Remy Sharp (@rem)</li></ul>
<h3>Prizes</h3>
To encourage participation there are over $40,000 worth in prizes that will be given away with the Grand Prize winner receiving $9,000 in cash and a trip to the Future of Web Apps Converence in Las Vegas.

<h3>Rules</h3>
The following are the rules of the competitions. You can find more details on their website.

<ol><li>No Plugins: The submission must stick to HTML/CSS/JS on the client-side (no restrictions on the server-side)</li><li>Same Markup: The submission has to work across IE9 RC, Chrome Beta and Firefox Beta.</li><li>Making the Web Native: The submission must be amazing! We will be keeping an eye out for submissions that push the envelope and blur the line between a web app and a native app.</li></ol>
<h3>Get Coding</h3>
So, what are you waiting for? Shoot for the stars and start developing the next innovation on the web! You have until May 8, 2011 to submit your web application to be included in the content. Sign up today!

Read More »

Dynamically Appending Elements to jQuery Mobile ListView

24 Feb 2011

I’ve been developing with jQuery Mobile the past several weeks and the application I’m working on has a listing page where I am retrieving the results via $.ajax and then dynamically appending the results to the current page. I started out with a page very much like the following…
<pre><div data-role="page" id="hackerNews">

<div data-role="header" data-backbtn="false">
Refresh
<h1>Hacker News  
0
</h1>
</div>


<div id="content" data-role="content">
<ol class="newsList" data-role="listview"></ol>
</div>

</div>


</pre>…but when I tried to dynamically render the ListView into the content area the browser ended up rendering something like the screenshot below on the left, where I had expected it to render something like the screenshot on the right.

<div></div><div></div>In the following example, I will pull the most recent items from Hacker News and display them inside of a jQuery Mobile ListView.

After some digging and researching, it turns out the difference between the left screenshot and the right is just one line of code. All you have to do is to call the $.listview() widget off of your list jQuery object… so, something like $( "#myUnorderedList" ).listview();.

Make sure to notice line #61, which is the main difference between the screenshot above!
<pre>var hackerNews = (function( $, undefined ) {
var pub = {};

pub.init = function() {
//Refresh news when btnRefresh is clicked
$( “#btnRefresh” ).live( “click”,
function() {
pub.getAndDisplayNews();
});

//When news updated, display items in list
amplify.subscribe( “news.updated”,
function( news ) {
displayNews( news );
});

//When news updated, then set item count
amplify.subscribe( “news.updated”,
function( news ) {
$(“#itemCount”).text( news.items.length );
});
};

pub.getAndDisplayNews = function() {
//Starting loading animation
$.mobile.pageLoading();

//Get news and add success callback using then
getNews().then( function() {
//Stop loading animation on success
$.mobile.pageLoading( true );
});
};

function getNews() {
//Get news via ajax and return jqXhr
return $.ajax({
url: “http://api.ihackernews.com/” +
“page?format=jsonp”,
dataType: “jsonp”
}).then( function( data, textStatus, jqXHR ) {
//Publish that news has been updated & allow
//the 2 subscribers to update the UI content
amplify.publish( “news.updated”, data );
});
}

function displayNews( news ) {
var newsList = $( “#hackerNews” )
.find( “.newsList” );

//Empty current list
newsList.empty();

//Use template to create items & add to list
$( “#newsItem” ).tmpl( news.items )
.appendTo( newsList );

//Call listview jQuery UI Widget after adding
//items to the list for correct rendering
newsList.listview( “refresh” );
}

return pub;
}( jQuery ));

hackerNews.init();
hackerNews.getAndDisplayNews();
</pre>I am utilizing some of the new jQuery 1.5 Deferred syntax and also the publish/subscribe methods from the Amplify Library released by appendTo recently. I’m also using the Revealing Module Pattern to protect the global scope.



View Demo Edit Demo

Read More »

jQuery.Deferred to Tell When Certain iframes Are Loaded

22 Feb 2011

Since jQuery 1.5 came out I’ve been intrigued about the new jQuery.Deferred feature, but hadn’t used it until now. You might think that Deferreds are isolated to only jQuery.ajax requests, but they are much more flexible than that. jQuery.ajax utilize defferds, but you can also use them to define your own set of promises.
<blockquote>Eric Hynds wrote an awesome blog post entitled Using Deferreds in jQuery 1.5 describing the inns and outs of jQuery Deferreds in much more detail, but I thought I’d share a use case that I found helpful in a recent project.</blockquote>I’m working on a project where there are multiple hidden iframes loaded on the page (don’t ask why LOL) and I needed a way to tell if they were all loaded. Almost immediately I thought about using the new Deferred feature!

<pre>(function($) {

function iFrameLoaded( id, src ) {
var deferred = $.Deferred(),
iframe = $( “” ).attr({
“id”: id,
“src”: src
});

iframe.load( deferred.resolve );
iframe.appendTo( “body” );

deferred.done(function() {
console.log( “iframe loaded: “ + id );
});

return deferred.promise();
}

$.when(
iFrameLoaded(“jQuery”, “http://jquery.com”),
iFrameLoaded(“appendTo”, “http://appendto.com”))
.then( function() {
console.log( “Both iframes loaded” );
});

}(jQuery));
</pre>
The above code creates a new jQuery.Deferred object (line 4) and iframe element. Once the iframe is loaded, we tell the deferred object to resolve itself (line 10). At that point we define our own event handler to respond to when the deferred is done (line 13). In this case we just print to the console that “iframe loaded”. Then we return the deferred promise (line 17) so that we can use it in the new jQuery.when method.

Next we call the jQuery.when method (line 20) and pass all the promises we want fulfilled before we proceed. Once all the iframes are loaded, then the then method will execute (line 23) printing out “Both iframes loaded” to the console.



View Demo Edit Demo

<blockquote>Note: This same concept can also be applied to a set of images loading and many other applications.</blockquote>

Read More »