JSConsole Remote Debugging and JSBin Live Preview

Read More »

Book Review: Eloquent JavaScript

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

Read More »

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

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


<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

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 »