Archive for November 2010

Unless you’ve been living in a cave for the past several months, you know the about the major shift in web development called HTML5.  It seems everyone is talking about and justly so.  It was the number one top trends for 2010 and will continue to change how we write web applications.  Although the spec has not been finalized (indeed, its quite some time away from that), most mainstream browsers have already adopted some elements of HTML5 into their standard releases.

One common misconception is that HTML5 is just one big ‘thing’.  On the contrary, HTML5 is really a bunch of different features which are being defined by the HTML5 spec.  Unfortunately, most browsers do not support all of the features.  This makes it very important that you degrade gracefully when a feature is not supported by the browser.  It’s a small price to pay if you want to be on the bleeding-edge of web technology.  This is especially true if you’re a mobile web developer.

There are several techniques you can script to test for elements, properties of those elements, whether a property retains its value etc.  Instead of incorporating all these checks into your scripts, I would recommend taking a look at Modernizr.

Modernizr is an open source initiative to ease the pain of detecting HTML5 support on your pages.  So, what would commonly take several lines of code to check if the canvas element is supported and provides text functionality can be shrunk to only 1 line with Modernizr.
Without Modernizr:

function supports_canvas_text() {
   if (!supports_canvas()) {
      return false;
   }
   var hidden_canvas = document.createElement('canvas');
   var ctx = hidden_canvas.getContext('2d');
   return typeof ctx.fillText == 'function';
}

and with Modernizr:

if (Modernizr.canvastext)  {
   //supported
}

Eventually all browsers will support the full HTML5 spec and these checks will become unnecessary. But in the meantime, if you’re inclined to start leveraging HTML5, Modernizr is a must-have for your scripting toolset.

Solution Setup

For this project, I went with my tried and true solution structure:

/root
   /lib
   /src
   /tools

I copied the System.Web.Mvc assembly to the lib folder and updated the reference accordingly.  I always recommend this approach especially when dealing with pre-release libraries.  The New Project dialog adds a reference to the default installation directory for the ASP.NET MVC version you choose.  This is usually “C:\Program Files\Microsoft ASP.NET\ASP.NET MVC 3\Assemblies”.  The problem with this is that your web host probably doesn’t install pre-release software.  By including it as a local library and setting “Copy Local” to true you can ensure that the required version is copied to the output directory.  It also helps when you add to version control and want to update the library to the latest release candidate.
copy local true

I also did the same for the LinqToTwitter and DotNetOpenAuth libraries.

Razor Template

Before you start using Razor templates, I highly recommend you read Scott Guthrie’s overview on Razor layouts.   There’s a couple new files you need to be familiar with including  _ViewStart.cshtml and _Layout.cshtml.  Essentially, _ViewStart removes the need for you to explicitly set the layout for each view you add and specify any common view code you want to have execute before rendering the view.  _Layout is what you commonly know as your Site.Master page.

First Try – Twitter API

To wrap this post up, I want to just take a quick look at wiring up all the Twitter API authentication process. The first step to get OAuth working is to get a consumer key and secret from Twitter. It’s a quick and easy process. Just go to https://twitter.com/oauth_clients and select “Register a New Application”. Complete all the required fields and you’ll be presented with the key and secret. Make sure you select “Browser” as the Application Type. Don’t worry about the callback URL for now – just put http://google.com or something similar for now.

Next, add the required assemblies that you downloaded with Linq to Twitter to your project. These include LinqToTwitter.dll and DotNetOpenAuth.dll. An important step is to create a class that implements the IConsumerTokenManager interface in the DotNetOpenAuth library. This is the class that will manage all the access tokens and secrets for OAuth. For the sake of this quick POC, I’m using the InMemoryTokenManager included in the Using OAuth with ASP.NET MVC sample project. The only configuration change you have to make is to add a your consumer secret and key to the Web.config as illustrated below:

Linq to Twitter Configuration Settings

Linq to Twitter Configuration Settings

Take a look at that project to get a quick connection to the Twitter API going. I ran my project and was able to connect exactly as expected. Next time we’ll look at the wireframes for the application and getting more of the functionality of the site going.

Facebook just announced details of “Project Titan”.  The new messaging inbox combines SMS, email, instant messages and Facebook messages in one ‘social inbox’.  Additionally, users will have their own @facebook.com email address.  This means people who aren’t already on Facebook can actually deliver emails to Facebook.  The system will also execute rules to determine which channel is best to deliver the message depending on your availability and status.

One statement that caught my attention was when Mark discussed the feedback they received on how people are using email – particularly high schoolers.  What is this demographic’s sentiment towards email?  ”Too slow and formal”.

I recall when “slow” was a word reserved for the regular postal service – ‘snail mail’.  How much have we evolved in only a few years since email’s inception that now email is the new snail mail!

I think this is a wonderful trend but can be somewhat disconcerning to today’s workforce.  What will the communication trends look like 10 years from now when these high schoolers enter the workforce.  We rely on email constantly in today’s organizations — a process which the current generation of youngsters find horribly inefficient.

Will email be as antiquated as postal mail by the time this generation enters the workforce?  What technologies will be driving the communication channels in the next few years.  Couple this announcement with a recent study by Airwide Solutions that claims social networking will be more popular than voice and SMS by 2015.

Without a doubt, this is a very exciting time with phenomenal changes in the way we collaborate on the horizon.

Plenty of links for web design this week including the announcement of ASP.NET MVC RC 3 (with intellisense for the Razor view engine!).  Plenty of How To’s as well to get your social media campaigns off to the right start.  In no particular order, check out some of this weeks stories you may have missed.

Social Media

Web Design & Development

Business Life

Overview

Have you ever tweeted something that you would like your friends to retweet as soon as possible.  I’ve seen this with new product announcements, Twitter contests, building buzz and even when applying for a social media gig.  Usually the tweet includes something like “Pls RT!”  With this project, I thought I’d create a retweeting engine to announce to your friends that you have a status you’d like them to retweet.  This sounded like a great opportunity to deep dive into the Twitter API and OAuth within .NET application.  Hence a neat side project that may have some usefulness and will definitely get us exploring some important API’s.

Technology Stack

Twitter API

There are plenty of good .NET Twitter Libraries available with varying degrees of functionality.  I am a huge fan of Linq so I decided to give Linq to Twitter a spin since it has high API coverage and supports oAuth out of the box.

ASP.NET MVC R3

I’ve been using the ASP.NET MVC framework since it’s first community preview several years ago and have fallen in love. It has evolved in many ways since the first CTP and I’m looking forward to experiment with some of its newest features – particularly the Razor view engine.

OAuth

I believe the best way to get up to speed with an API is to jump right in and start working with it.  One of the components I’m most excited to explore is the OAuth implementation for the Twitter API.  With more and more services adopting the OAuth protocol, I think its safe to expect it to become the de-facto security layer for most social API’s available.

Other Tools

As to the other frameworks and tools involved in the project, you can expect to see the usual suspects. At this time I don’t think they’ll be a need for a database since most of the data will be coming from the Twitter API. The tools of the trade up to this point will include:

  • Visual Studio 2010 Ultimate
  • jQuery v1.4.4

I’m looking forward to sharing the experience step-by-step so don’t be surprised if I hit some speed bumps (or canyons) along the way. In the next part we’ll look at some preliminary solution setup and wiring some of the external libraries together. We’ll also mockup some screens and see what views and controllers it would be implying.