Walkthrough of the elements: http://www.youtube.com/watch?v=eJZx9c6YL8k – and slides.

Google devs (alpha) take on the concept with polyfills for almost all of the features: http://polymer-project.appspot.com/. Just looking at the samples gives you a good idea of the benefits.

Actually Polymer.js lets you use the concepts today in ‘Evergreen’ browsers – but native support is when the benefits starts kicking in.

My advice would be to stay on the AngularJS path, it is in line with where we’re going!

Trolling commence :)

ANUGCast #157 JavaScript Best Practices part 1

ANUGCast #158 JavaScript Best Practices part 2

You can also find them in their iTunes feed:
itunes.apple.com/podcast/aarhus-.net-user-group/id298609451?subMediaType=Audio

So without further ado I introduce the MOSS of Fury.

A good read for anyone into frontend development and there are loads of code samples and clever tricks ready to use in your next project. Also there are a few suggestions on how to get VS2010 up to speed when it comes to client side development.

You’ll find the HTML5 slides from the presentation here:

Javascript Management
(Chrome, Safari and FireFox only)

But since users are no loner browsing actual pages, you need to take extra steps to maintain state, handle url’s and serve indexable content to the crawlers. This post should give you a head start on your next fully fledged AJAX application.

State and bookmarkable url’s

Basically we wanna accomblish two things here:

1. Be able to change the browser’s current url without causing roundtrips to the server.
2. Route those url’s to JavaScript functionality and dynamic content.

In modern browsers history.pushState() gives you full control, allowing you to manage history and change urls strictly on the client – this can be any valid url within the current domain. The onpopstate event will then let you listen for url changes and map relevant content and functionality.

Usually though you need to support a few more browsers and are stuck with location.hash and the onhashchange event which has wider support. The concept here is to use the hashfragment of the document (which does not cause roundtrips) to emulate url structures and/or parameters.

This could look something like this:
site.com/search.aspx#?term=foo&filter=bar

Or this perhaps prettier one:
site.com/search.aspx#/foo/bar/or/what/ever

As long as it’s a valid url it can take whatever form you fancy, and if you include a plugin like Ben Almans jQuery Hashchange, this approach will have you going in IE6 and IE7 too.

From here on out, it’s about updating location.hash while listening for changes with onhashchange, then execute functionality accordingly. In other words you’re now linking to specific parts of the application and allowing users to bookmark relevant url’s.

Abstracting url handling

While very possible to do manually, this url-to-functionality mapping can get quite tedious. Fortunately there are quite a few libraries to help you abstract this part. Ben Almans extended BBQ plugin is taking the hashchange a step further, adding jQuery.param and jQuery.deparam methods to help querying url’s.

A few other examples: Basic, Advanced.

Also more elaborate frameworks like Backbone.js and the lighter Spine.js has Route modules for mapping functionality. These also give the advantage of supporting history.pushState() while falling back on location.hash in older browsers – sounds like a win-win.

Here’s an example of routes in Backbone.js

var Workspace = Backbone.Router.extend({
  routes: {
    "help":                 "help",    // #help
    "search/:query":        "search",  // #search/kiwis
    "search/:query/p:page": "search"   // #search/kiwis/p7
  },
  help: function() {
    ...
  },
  search: function(query, page) {
    ...
  }
});

Indexing content with Googles Hashbang

Now that your about to turn your AJAX application up to 11, you need some way to dish out content to search engines to complete the scenario. If you’re able to go with the modern approach of changing proper url’s with pushState(), you just have to make sure that the server is able to render relevant content based on the same url’s – which might include some useragent detection skills.

When it comes to the hashfragment things get a bit more complicated, as it’s not a part of the communication with the server. Google is aware of that and offers a solution with the hashbang notation – ‘#!’. With this you’re letting Google know that this ‘ajax-url’ is indexable and that the server is able to render a snapshot of the html. The crawler will then make one additional request using the hashfragment as a parameter.

Using one of the previous examples, this is what happens:
site.com/search.aspx#!/foo/bar/or/what/ever

Will result in this additional request:
site.com/search.aspx?_escaped_fragment_=/foo/bar/or/what/ever

The server then has to process this request and render a snapshot of the relevant content.

Basically thats it, you now have hashbang url’s in the Google index linking directly to your AJAX functionality.

Using redirects

You can use redirects to help with the server part, it can sometimes make things easier. As long as the crawler eventually ends up at a page, it’s perfectly safe to do redirections.

Lets say the crawler requests:
site.com?_escaped_fragment_=/foo/bar

You could redirect to this relevant content:
site.com/foo/bar

Also if you’re using a framework like Backbone.js with pushState() for modern browser and location.hash as fallback for older ones, redirects will complete the cycle.

The modern browser gets a pushState() for AJAX functionality on:
site.com/foo/bar

The older browser gets a hashchange for AJAX functionality on:
site.com#!/foo/bar

The server redirects the crawlers additional request from:
site.com?_escaped_fragment_=/foo/bar

To this:
site.com/foo/bar

So 301′s or 302′s?

Using 301 ‘Moved permanently’ redirects, the target url will end up in the Google index, if you use 302 ‘Moved temporarily’ it will be the #! url.

Usually 302′s straight to the AJAX experience is the way to go, but remember that disabled users, or users with JavaScript turned off, could hit that url too.

Here’s the official info on Google’s AJAX crawling, there’s som e good info on creating HTML snapshots as well.

Originally created by Marcin Wichary and modified by many people in the Google Chrome team. Use them whenever you need to spread the word of HTML5 awesomeness to techies, clients, suits and other decision makers!

slides.html5rocks.com
(Launch it in Chrome if you want all the demos to run)

Feeds

• feedburner.com/LearningJquery
• feedburner.com/BrandonAaron
• alexsexton.com/?feed=rss2
• weblog.bocoup.com
• paulirish.com/feed
• microsoft.com/feeds/scriptjunkieLearn
• feeds.benalman.com/benalman
• dustindiaz.com
• alistapart.com/articles
• jszen.blogspot.com/feeds
• phpied.com
• blog.getify.com/feed
• tagneto.blogspot.com/feeds
• yuiblog.com/YahooUserInterfaceBlog
• feedburner.com/yayQuery
• blog.jquery.com
• perfectionkills.com
• stevesouders.com/blog/feed
• feedburner.com/adequatelygood
• css-tricks.com
• feedburner.com/JsconfLive
• feedburner.com/VigetInspire
• feedburner.com/JupiterMain
• feedburner.com/badassjs
• feedburner.com/JohnResig
• feedburner.com/reybango/zSyW
• addyosmani.com/blog/feed
• ajaxian.com
• feedburner.com/chrisheilmann
• erichynds.com/feed
• allyoucanleet.com/feed
• danheberden.com/feed
• danwebb.net/feed/atom.xml
• feedburner.com/webdevnet

Newsletters

• javascriptweekly.com
• html5weekly.com
• dartweekly.com

blog.vertica.dk/post/Hvad-er-forretningsvc3a6rdien-af-et-rundt-hjc3b8rne.aspx

So that library jQuery has that .animate() method, that has them options, with one being the step callback – looking like this.

$( 'span' ).animate({
	// Properties of the elements to animate
	opacity: 0.25,
	left: '+=50'
},
{
	// step is a callback for each step of the animation
	step: function( now, fx ) {
		// do stuff...
	}
});

Nothing new, nothing fancy, but if you look at the two arguments being applied, things start to get kinda interesting. Especially when the latter being the jQuery.fx prototype object, you suddenly have a load of properties to utilize – one of them being the fx.pos. This is a modulus 1 kinda value that sweeps from 0 to 1 through the duration of the animation, allowing you to animate other stuff that can be calculated using that factor.

There’s probably not a lot of use cases for the next example, but it shows the callback and arguments in use in a simple way – click result to see the animation.

Note that both this and fx.elem is a reference to the element currently being animated.

A more useful scenario is one where I had to do a quick poll type functionality for a project. After vote was given, I wanted the polling result to animate and count to the resulting score. All I had to do was to multiply it by fx.pos.

// Calculate score by multiplying by fx.pos that sweeps from 0.0 to 1.0.
step: function( now, fx ) {
	$span.text( Math.floor( fx.pos * score ) + '%' );
}

Here’ a simple version of how it turned out – submit your answer.

And here’s a link to the full fiddle.

Cheers.

Guess I should have thought of that :|

Yeah I know, just what the world needs, another jQuery plugin. Still it’s more flexible and handles more scenarios than others I’ve come across, so I guess it deserves a little write-up.

I recently worked on a dashbord-style interface for a client and needed to handle various widgets in a flexible grid. Actually more than a grid it would be endless combinations of different sized widgets as users began to customize the page – one could end up looking something like this:

Now this is easily done in CSS by floating containers of various sizes:

.col, .col_100, .col_75, .col_50, .col_33, .col_25
{
    float:left;
    margin:0 0 15px 15px;
    padding:10px;
    width:465px;
}
.col_75 { width:340px; }
.col_50 { width:215px; }
.col_33 { width:131px; }
.col_25 { width:90px; }

However, as the content of each individual container grows, the rows are no longer aligned and the floats start cluttering up:

Indeed not teh roxXor and one way to handle it is to clear the floats every time there’s a full row. Depending on the design that may do just fine.

Another way is to use a piece of JavaScript to set the height of each container, to that of the max height within a given row. When working with heavy styled containers as in the above example, that is usually the best way to go.

So including the Align Height Plugin to do just that, we end up with a flexible solution that works:

When the DOM is ready you assign the plugin to the relevant containers, in this case that would be all divs with a class that begins with col..

$( document ).ready( function(){
	$( '#page > div[class^="col"]' ).alignHeight();
} );

The plugin goes through all the elements, calculate rows and align the height accordingly. To do that it needs to know what percentage of a rows total width the element corresponds to. These values are paired in the sizes object and defaults to :

// className : value
sizes: {
	'col' : 100,
	'col_25' : 25,
	'col_33' : 33.33,
	'col_50' : 50,
	'col_75' : 75,
	'col_100' : 100
}

But when applying the plugin you can easily map your own like this:

$( document ).ready( function(){
	$( '#page > div[class^="col"]' ).alignHeight( { 'col_news' : 75, 'col_feed' : 25 } );
} );

So go have a look at the full fiddle or head on over to GitHub and download the plugin:

jquery.alignheight.js ( 3.3kb )
jquery.alignheight.min.js ( 1.6kb minified with JSMin ).