Beautiful Greenfield Apps with Gravatar, Disqus, and AddThis

Our company sponsored hackathon is over, but I'm still trying to grok all the new tech I got to play with. If you haven't already, check out Part 1 of our hackathon story to learn about how MVC3, Bootstrap, and OpenID featured in our application.

It is really amazing what free external services can do bring additional functionality to your web application. During the hackathon I got the chance to add three services to app that really made it feel whole.

Gravatar

I first learned about Gravatar when I found it being used on the MemphisJUG website. This free service let's users set up one profile pic to rule them all. If a website know's your email address, it can pull the associated Gravatar using a pretty simple image link. The necessary HTML for your web application to use a Gravatar is:

< img src="http://www.gravatar.com/avatar/HASH/" />

You merely replace HASH with a MD5 hash of the user's email address and the magic is done.

Well, almost. Turns out getting an MD5 hash appears to require another step in .NET. I might have some basic lack of understanding about hashing, but my thought is that the code required to get an MD5 hash is much too complicated. Why this isn't just a built-in extension method on String is beyond me.

Instead the process involves using the System.Security.Cryptography.MD5 class, byte arrays, and a String Builder. Luckily I found a blog post that explained all this.  You can find it and additional details on Gravatar images in the links below.

http://en.gravatar.com/site/implement/images/
http://blogs.msdn.com/b/csharpfaq/archive/2006/10/09/how-do-i-calculate-a-md5-hash-from-a-string_3f00_.aspx

Disqus

If you've been using the web at all, you've probably already stumbled upon Disqus before. Disqus allows you to post comments to pages, using a variety of login providers. But the magic of Disqus is that it is just a javascript widget, so sites can start supporting Disqus in matter of minutes.

To get started, register your site on Disqus. Get the "Universal Code" and change the javascript to include your site's shortname, a unique identifier for your site in your Disqus account. Make sure the pages you want to include Disqus are linked within your application with canonical URLs. While all the rules for the rules for URL normalization may not be required, we did notice that a link that gave a different URL, but pointed to the same page, pulled up two different sets of Disqus comments. Then just drop in the Javascript widget and you're done.

http://docs.disqus.com/developers/universal/
http://en.wikipedia.org/wiki/URL_normalization

AddThis

If there is one thing that changes way too often online, it is the current up and coming social network. AddThis is another easy to use javascript widget to quickly get some often desired functionality, namely the ability to share links on a social network. AddThis takes it a step farther: 1) It supports a very large number of social networks and 2) It dynamically can choose which networks to show by default based on how which services individual users have selected before. Combined with a plenty of customization options, analytics, and other features AddThis might be the social sharing plugin to rule them all.

https://www.addthis.com/help/client-api#.TuuyndSXQsI

Summary

While digging into a greenfield project is a good time to explore what you are capable of, it also is great time to check out what free services are already out their. Using javascript widgets and external resources can quickly give you features that may take hours or days of development to create on your own. Our hackathon project was much more feature complete because we could utilize tools like Gravatar, Disqus, and AddThis to provide the social integration required of Web 2.0 applications.

Beautiful Greenfield Apps with MVC3, Bootstrap, and OpenID

I haven't done much greenfield development in the past year. So when the company sponsored hackathon was announced this year, I was a bit wary. Could I keep up with the speed demons out there when I had spent so much recently in low gear, slogging through legacy code?

Luckily there were plenty of resources for my team to use when we got started. We're only a couple of hours into the hackathon, but I wanted to record and share some of the stuff we've used so far.

MVC3 Templates

Since I was so rusty with greenfield development, I did do some excercises before the hackathon to get back into that mindset.  The links below handle straight forward new MVC3 applications. We hadn't decided on a persistence strategy before the hackathon, so I also got some practice with Entity framework. If you haven't seen Entity framework in action before, it really does seem well suited for the type of rapid development that a hackathon imposes.

http://www.asp.net/mvc/tutorials/getting-started-with-aspnet-mvc3/getting-started-with-mvc3-part1-cs
http://msdn.microsoft.com/en-us/data/gg685467

CSS patterns via Bootstrap

Now while the examples above quickly give you a very functional web application, they are ugly. No one is going to attract users with the default CSS in the MVC3 templates. Now a hackathon is not the time to do a focus group; we need at least a basic set of UI patterns. We could have stolen the design patterns from work, but that wouldn't make for a good blog post. Instead we pulled the in the CSS and JavaScript from the Bootstrap project by the Twitter team. This is a pretty great open-source set of design documents which really gives the application a modern look and feel. It even has a NuGet package to ease the implementation.

http://twitter.github.com/bootstrap/
http://nuget.org/packages/Twitter.Bootstrap

OpenID via DotNetOpenAuth in MVC3/Razor

Now you don't get to have your app branded Web 2.0 if you're still asking users to create yet another password/security question on your site. OpenID is the de facto standard for solving this problem (Suggestions to use Facebook Connect were laughed at derisively). Unfortunately OpenID has somewhat of a bad reputation for ease of implementation. So imagine our glee when we found a NuGet package for OpenID in Razor no less. We did have some trouble finding the blog posts on how to use the package properly, but I've listed the links below to save you the trouble.

http://nuget.org/packages/OpenIdPortableArea.RazorViews
http://www.johncoder.com/Post/sample-aspnet-mvc-application-using-openidportablearea
http://johncoder.com/Post/handling-messages-in-openidportablearea

Summary

We've gotten off to a great start with our hackathon application. There are a great number of resources for greenfield application development on the Microsoft stack, especially for enterprise-y developers like me who don't usually get the opportunity for this kind of development. MVC3 templates, Bootstrap, and DotNetOpenAuth give developers a great tool-set to become Web 2.0 in a few short hours.