Anatomy of an HTML5 Page Transition

One of the sexy new trends in HTML5 development right now is Page Transitions.  One of the first places I noticed Page Transitions in use was the GitHub Repository Explorer; as you click around to different directories and files, the content slides in and out without reloading the page.

While most of this functionality can be achieved through Javascript alone, the actual URL History manipulation has only been available in the (relatively) recent incarnations of HTML5.  When you add in the ability to take advantage of CSS3 transitions for sliding pages in and out, you end up with a pretty modern example of HTML5 capabilities.

Overview

Here is a pretty typical scenario; two pages with identical layout, but different content.

1. User clicks a link that has the transition-link attribute
2. Download the page with $.ajax call and grab content (<div> with role="main" attribute)
3. Slide out the old content, slide in our new content.
4. Change the menu button highlight and URL.

Page HTML Structure

Setting up your pages to use transitions requires some plumbing hookup to specify what parts of the page are content and what links should load new content in.  In our case, we attach handlers for any link elements with a transition-link attribute, and we look for a div element with a role="main" attribute as our content area.

Retrieving The Other Page With jQuery

When our page loads, we attach to all our transition links click events so we can load our other page with ajax instead of with a browser refresh.

You may notice that we are taking advantage of jQuery's new $.Deferred object for the loadPage function.  This lets us specify callbacks for when the page is done loading, or if there is an error loading the other page.

Transitioning The Page Contents Out and In

Once we've loaded the new page's contents, we're ready to start transitioning the old content out and slide the new content in.  To do this, I took advantage of the jQuery UI Effects library and chained some call backs to insert the new content after we finish hiding the current content.

Bonus Points: We get some bonus points here at the bottom for detecting CSS Transitions and using those instead.  The style for the CSS3 Transitions can be found in the jQuery Mobile source on GitHub.

A more styled fleshed out version of this concept can be found live on my DropBox account.

Now Playing - Lupe Fiasco - Superstar

HTML5 Dialog Element Styling For Pleasure and Profit

Recently I had a great opportunity to work on a small part of a Lync Powered Expert Question Answer Service.  My portion of the code was a simple one page HTML popup that allowed a person to chat with an expert.

One of the cool things I found out about during the project was the HTML5 Dialog Element

The dialog element represents a conversation, meeting minutes, a chat transcript, a dialog in a screenplay, an instant message log, or some other construct in which different players take turns in discourse.

Nifty, eh?  I use jquery to insert the root dialog element, then whenever a message is sent or received I inject the dt and dd elements.  Here is an example of what the conversation looks like in HTML

By default, the browser will display this like this:

Now that's kinda lame, I want it to look like a real chat screen (with some slick Metro UI Styling), so I added some CSS (take a look at the JSSFiddle CSS Tab for my styles) to hide the dt element and give it a nice blue bubble look.  I even added some nice CSS triangles into the mix for some minor speaker perspective.

I've put up a fully coded example with a boring chat bot over at jsFiddle for you to enjoy and mess around with.

Now Playing - La Roux - In For The Kill (Skream Remix) [WTC Mashup]

Jacob

Roll your own Text Messaging Apps with Twilio and MVC 3

I've been messing around with Twilio and their awesome set of TwiML API's this weekend and made a fun little C# Twilio library for creating simple text (and voice) based applications from MVC 3 sites.

How Twilio's TwiML API Works

An SMS comes in to one of your Twilio Phone Numbers.

Twilio Makes a POST or GET call to a URL you set up.

Your site provides a TwiML Response that Twilio parses and executes.

(See Twilio's own how it works page for a way better explanation.)

Using TwilioSharp to Send TwiML Responses From MVC

As part of my handy dandy TwilioSharp helper library I've created a base TwiML Controller for easily creating TwiML Responses with a Fluent TwiMLBuilder Class.  

The TwiML Controller exposes a TwiML method that is meant to emulate the ease of use of the Json method available in all MVC Controllers.  The TwiML method takes a Func<TwiMLBuilder, TwiMLBuilder> that acts as your Response Factory method; this makes building complex responses easier by allowing for in line fluent declarations.

Full Fledged Example

You can view a full fledged Magic 8-Ball Answerizer 3000 example on GitHub (which is also live on AppHarbor until I run out of money in my Twilio Account).  Including a more in depth example of using the Fluent TwiMLBuilder for answering phone calls.

(The Magical 8-Ball Answerizer 3000 on AppHarbor)

Now Playing - Tommy Tutone - 867-5309 / Jenny