My experience in updating to Bootstrap V2

Over the weekend I updated SkillsLibrary to use the newer version of Bootstrap from Twitter. You can see the new version which is running on AppHarbour (which I’m using as my UAT environment) http://skillslibrary.apphb.com/ and compare it to the older version running in production: http://skillslibrary.net/.

Bootstrap V2 is going to be released on 31st Jan. 2012 and you can read about the changes from the official source here.

In this article I’ll go through some of my own personal experience in terms of upgrading.

Configurable Download

From the outset, the Bootstrap team have improved the deployment of this resource by allowing you to configure your download and receive it as two single CSS and JS files.

The first thing to notice as an unauthenticated user is that I’ve removed the “Hero Unit” from the home page and replaced it with smaller title text and a carousel of images.  Part of the reason for that change was that, the previous version of Bootstrap had a Hero Unit CSS class which has not been carried forward:

Home Page Carousel

Another reason was that I had always planned to implement a carousel of images and now that it’s a core component in Bootstrap, it seemed like a good time to make that change:

Most of the other changes are not visible until you log in although there were some other smaller tweaks that I had to make across the site to accommodate the new base styles.

Re-styled Forms

The most significant site-wide change involved updating the layout of forms and their controls to match the new V2 component styling.  Forms in V1 were really nice but the semantics have been significantly improved in V2.  The following image highlights some of the differences that I made to upgrade the Registration form:

You can see that the rows in the form have had their class name changed from clearfix to the more semantically sensible name of control-group.  Likewise, the area at the bottom of the form has changed from actions to form-actions and labels now have a class name to distinguish them.  There were other changes as well, but these were the ones that I had to make to all of my forms.

Navigation

When you log in to the application, there are lots of changes that become apparent, starting with the Global Navbar.  The following image compares the previous version with the current one:

From a purely visual perspective, you can see that the Search box has altered to display more rounded corners and that the dropdown menu’s have received a significant upgrade to their appearance.  But the HTML semantics have also changed but have remained very simple. 

One thing that I have not yet implemented as yet, but which I will definitely be doing is to make use of the sprite images that have been bundled with Bootstrap to make my menu’s and buttons look much snazzier!  Using those sprite images makes it easy to achieve results such as this with the ‘out of the box’ experience:

Split Button Dropdowns

A key improvement for SkillsLibrary was the introduction of the new Button Dropdowns which have been introduced.  Prior to these I had hacked together a rough user experience for performing additional actions against Activities by using the V1 dropdowns but now they have bundled them to create a beautiful Split Button Dropdown experience:

It’s lots of little things such as this which have really tightened up the user interface a lot.

Dialogs

Probably the other major UX feature that I implemented was the Modal Dialogs.

These existed in the V1 version of Bootstrap but have again been improved to include enhancements such as dark background when the modal is displayed and cleaner styling and semantic HTML options for closing the dialogs.

Other

There were several other smaller changes to styles and HTML syntax.  Some of the component class names changed and other components have had improved UI.  One of these was the popover controls which now make it easier to display a prominent title and description text as a single component.

Conclusion

SkillsLibrary is a moderately complex web application with about 30-40 pages.  All up, it took me about 4 hours to upgrade from V1 to V2 of Bootstrap.  Having done so I feel very satisfied that the UX improvements that I’ve discussed in this article have made it worthwhile but I also feel happy that implementing further components (such as the Typeahead and Collapse) controls will allow me to reduce my overall 3rd party JS dependencies.

The A,B,C,D's of an enterprise SOA

This is a big year for us at work as we mobilize our resources to bring about some really sweeping changes in our technology platforms.  Coupled with the major technology will come a change in the way we build software.

One of the major changes for us is to change the way that we manage inter-application communications.  We are moving towards a more formalized version of SOA which involves a greater number of web services which interoperate via distinct messages over HTTP.  As we retire old systems and replace them with newer ones, we will undoubtedly take the time to modernize and move more of our communications into the newer way we do things.

All change uncovers challenges that can cause pain and will likely see us stumble.  This, is an inevitable side-effect of changing, of moving from one place to another.  It is also a great opportunity to learn new things and as such it presents a good vehicle for personal development and growth.

To simplify the job of capturing and communicating the knowledge that we gain from our excursion down the enterprise SOA path, I have identified 4 key subject headings that act as boundaries for different knowledge areas.  They are described as the ABCDs of SOA knowledge base.

A is for Accessing (Authentication and Authorization)
Knowledge about:

• Standards based protocols for managing access and trust (WS-*).  
• How to use our technology to implement those standards (.NET, WCF, Https).

B is for Building
Knowledge about:

• What technology to choose when we are dealing with services (e.g. WCF Web API, ADO.NET Data Services, WCF, etc)
• How the respective technologies work
• Designing RESTful architectures

C is for Consuming
Knowledge about:

• Browser security policies for accessing remote origins
• Libraries for making AJAX calls
• Working with JSON and XML in the consumer
• Consuming HTTPS with untrusted certificates
• Composing SOAP messages from the consumer
• Composing oData formatted queries from the consumer

D is for Deploying

• Configuring SSL
• Designing a homogeneous environment for hosting application services
• Configuring application endpoints and security accounts

It's the sum of all this (and more) knowledge that goes into having a successful services-based application environment.  Internalizing the knowledge gained and feeding that into process and culture change will be a real but hopefully rewarding challenge.

Decomposition - As as human activity

The other night I watched a great documentary on ABC TV the other night called Slumming It, hosted by Kevin McCloud.  You can watch Part 1 of that show at the following link:

YouTube - Slumming It Part 1

The documentary was shot in Dharavi (India's largest slum) which has been built on top of a dump.  The slum was said to be home to over 1 million people.  The footage showed scenes which were, to a first-worlder... pretty horrific!

In one scene, people washed their clothes in water into which fed an open sewer.  Another scene showed a new load of raw garbage being unloaded into the slum and then you saw loads of slum dwellers climb over the garbage looking for anything of value.

Yet amid all of this, the people looked happy and, amazingly, the clothes they wore were immaculate.

While watching the show I couldn't help but ask myself whether this is where we have come from, where are headed, or, is it where we are now?  These people live amid sewers and scavenge through rubbish to survive and yet they just think of it as life.  How hard it must be to evaluate the quality of your existence when it is all you know?

I also thought of the decomposition - of breaking things down and extracting anything of value from them - as being analogous with the human activity.  In a shrinking economy, could it be that this could be a more valued skill in developed economies too?  The ability to pour over quantities of products and decompose them into their constituent parts to find valuable elements?

In the past, we have been a very wasteful society.  Filling our houses and sheds with old, unused PCs, TVs, clothes, everything.  In a more scarce future, could it be that decomposition and recycling the old into new things of value could be a more vital human activity?

Is this what Prince Charles meant when he referred to Dharavi as a model for sustainability and as a model for "cities of the future"?

Using Javascript to query the Google APIs

Tonight I decided to see how easy it would be to query Google+ programmatically using the Google APIs.  All up, it took me about 20 minutes from beginning to end to get the following screenshot running in a browser.

The first thing you need to do is to create an account and get yourself an API Key.  You do this through the API console.  This allows you to select which services you would like to work against and then assigns you a key that you use to access those services.  In my case, I just selected the Google+ service but there’s some really useful services that I need to look at in future such as Translate and Url Shortner.  Here’s an image of part of that screen:

Once I set up my access, I headed to the API Explorer to get a feel for the API that I would be querying.  The API Explorer is an awesome tool which lets you explore each of the APIs and run queries against them to get back results.  Here is a screenshot of the Google+ API running inside of the API Explorer:

Basically, you select the API, and then choose which method you want to execute, you fill in the parameters and then hit Execute to get back the results.  Running the activities.list method with my parameters returned some JSON in the results view so that I could see what data would be returned:

As you can see in the above image, the query returns an items collection with properties for each item returned.  For example, in the image above, you can see the title for the first G+ entry is “Nice, easy workflow”, and that the URL for that entry is displayed just below that.

Armed with my API Key and some knowledge about the API, next I created a web page and started coding.  The following Javascript executes a query against the activities.list method of the Google+ API for my userId.

As you can see, the steps are pretty straightforward.

1. Load the Google API client script and supply a callback to handle the loaded event for the API
2. In the callback, set your API key and load the API you want to use
3. Configure a request and execute it

The final method to display is the method that I used to display the list of results on the page called enumerateResults in the image above. That method simply takes the list of results and appends them to a HTML list element using some of the properties that we saw in the API Explorer for that API’s results:

So that’s it.  20 minutes from beginning to end.  Some other useful links that you might find handy if you want to work against the Google API’s are:

• Google API Client Library Wiki – A wiki with examples and explanations for working with the Javascript library (there are other SDK’s that you can work with).
• Google API Explorer – Explore Google APIs interactively
• Google API Console – Get access to use the APIs
• Google Groups – There are groups for each API where you can ask questions and get help