tobin harris

Links for 2009-07-03 [del.icio.us]

2009-07-04T00:00:00-07:00

Installing on OSX - Couchdb Wiki
Getting CouchDB up and running on OSX. Document DB goodness here I come...

HTTP Status Code 408 - I'm a Tea Pot :)

2009-07-02T04:41:25-07:00

I was trawling through HTTP status codes today on WikiPedia and found the 418 - I’m a Tea Pot status code. How amusing :)

Apparently it’s part of the HyperText Coffee Pot Protocol.

Although this protocol is an April Fools joke, I actually think it could be useful as the standard response to send to Internet Explorer 6 ;)

Links for 2009-06-30 [del.icio.us]

2009-07-01T00:00:00-07:00

SurveyMonkey - Sign up
Online survey

Links for 2009-06-29 [del.icio.us]

2009-06-30T00:00:00-07:00

shaml-architecture - Google Code
ASP.NET MVC/NHibernate app out-of-the-box generator running on Mono and .NET. Mmmmmm
A vision of enterprise platform: Security Infrastructure
ayende on security
Don’t Create Aggregate Roots
Udi talks about DDD and validation and Domain Events.

Links for 2009-06-26 [del.icio.us]

2009-06-27T00:00:00-07:00

Hog Bay Software — Surprisingly adept software for Mac OS X
Simple task management app ala GTD.

OSX MonoDevelop MVC?

2009-06-25T15:40:48-07:00

Scott C Reynolds blogged about how he’s been playing with MonoDevelop on OSX. I thought I’d download it, and was pleased to see this…

Bigger Piccy…

I’ve not actually clicked beyond this point yet, but it’s exciting to see that MVC is actually hinted at in MonoDevelop. Can’t wait to see what the support is like…

Links for 2009-06-24 [del.icio.us]

2009-06-25T00:00:00-07:00

redis - Google Code
Hash based DB looks very cool and easy to use.
2008-01-17_222514.gif (image)
The BAD USABILITY calendar. Funny, and a valuable resource :)
xVal - Home
NHibernate + jQuery aware validation engine. Mmmm... very interesting...
xVal - a validation framework for ASP.NET MVC « Steve Sanderson’s blog
xVal validation with MVC and jQuery and standard server side validation.

Links for 2009-06-20 [del.icio.us]

2009-06-21T00:00:00-07:00

Macromedia - FlashPaper 2 : At a Glance
Flash Paper for exporting documents into flash.

Links for 2009-06-18 [del.icio.us]

2009-06-19T00:00:00-07:00

Lean Manufacturing Blog, Kaizen Articles and Advice | Gemba Panta Rei
Kanban Background and Agile Projects
Border-radius: create rounded corners with CSS! - CSS3 . Info
Amazing CSS3 stuff. Make things look cool with ZERO effort :) yUML.me is getting some of this action

New App for Writing Documents Online

2009-06-11T18:03:05-07:00

I’m a big fan of BaseCamp – an online project management tool. BaseCamp also gives you WriteBoards, which are roughly analogous to shared, online MS Word Documents.

WriteBoards are cool, but they fall short in a few areas. Firstly, they’re not pretty enough; I don’t feel that I’d really want to show a customer a WriteBoard document. Also, they only support TextTile, and I quite like Markdown and MultiMarkdown. Finally, WriteBoards don’t have a good public API, so getting at the content and re-purposing it is a PITA.

I’ve been having fun creating various online tools this year, such as yUML. yUML went live after only four days of development work, but seemed to hit a positive note with many users.

Enlarge Image.

The image above shows another online tool that I’ve thrown together: working name is myDocs. This was another four-day project, who’s goals were to help me publish Word-Lookalike documents online.

myDocs has the following features:

Author onlnie using TextTile orMarkdown
Pretty to look at
Pretty to print out
Keeps version history
Compare versions showing added and removed content
Add sticky note comments to documents
Review documents and comments

My company, Engine Room are benefitting from it internally, but we have yet to think of how it might be used by anyone else.

This tool doesn’t have a public home page yet, but there is a demo page available.

If you like what you see, post up your thoughts and I’ll think about how to release it to a wider audience!

NHibernate: Calling Update Unnecessarily

2009-06-11T13:13:04-07:00

I often see code that looks a bit like this:

public ActionResult UpdatePost(int id, FormCollection form)
{	
    // we won't worry about where _nhibernateSession 
    // comes from for this example.

	var post = _nhibernateSession.Load<Post>(id);
	post.Title = form["PostTitle"];
	post.Body = form["PostBody"];
	_nhibernateSession.Update(post); 
	_nhibernateSession.Transaction.Commit();
}

Can you see what’s wrong here? The call to _nhibernateSession.Update(post) is useless.

Why? Because the NHibernate session already knows that the object is being changed. NHibernate tracks objects so it can know if any changes need writing to the database.

A call to Update is used to tell NHibernate to start tracking an object that it is not being tracked already (aka detached object). In the example above, the Post is loaded from the NHibernate session, and is already being tracked. Calling Update on an object that is already being tracked is silly.

It’s easy to think that Update signals NHibernate to save changes to the database - to instantly flush them. This is not the case. Update simply indicates an object has changes to be saved, not when they are saved. Don’t use Update in an attempt to trigger an instant flush, that’s what Flush and Commit are for.

Your code will look cleaner without Updates all over the place. Consider this: our latest NHibernate driven MVC app makes zero calls to Update. We don’t need Update because we don’t have a scenario where we detach and attach objects to the NH session. All functionality can be achieved though Save, Commit and Rollback.

The previous example should really just exclude the redundant Update as follows:

public ActionResult UpdatePost(int id, FormCollection form)
{	
	var post = _nhibernateSession.Load<Post>(id);
	post.Title = form["PostTitle"];
	post.Body = form["PostBody"];	
	_nhibernateSession.Transaction.Commit();
}

When Update Is Required

So when is an Update required? Here’s a valid use of Update:

public ActionResult UpdatePost(int id, FormCollection form)
{	
	var post = HttpContext.Session[id] as Post;
	post.Title = form["PostTitle"];
	post.Body = form["PostBody"];
	_nhibernateSession.Update(post);	
	_nhibernateSession.Transaction.Commit();	
}

Here, the Post is pulled out of the Http session – it is not being tracked yet. Then, it’s properties are changed, and Update is called. The object is re-associated with the session, and NHibernate will assume that it needs saving even though it observed no changes after re-association. In other words, Update implies a save is required (Lock can be used to associate an object with the session without making NHibernate assume a save is required).

The call to Update is valid when a detached object is being re-associated with a session, and you want the session to assume the object has changed.

This variation will also work:

public ActionResult UpdatePost(int id, FormCollection form)
{	
	var post = HttpContext.Session[id] as Post;
	_nhibernateSession.Update(post); // <-- 
	post.Title = form["PostTitle"];
	post.Body = form["PostBody"];	
	_nhibernateSession.Transaction.Commit();	
}

The end result is the same, but because Update is called before the changes are applied to the object, NHibernate will waste CPU cycles tracking the changes made after the call to Update before finally flushing them to the database. It’s not bad, just a tad wasteful.

PDF Output With yUML, And Other Things...

2009-06-04T03:05:06-07:00

http://yuml.me is less than a month old, and traffic has settled around 1000 visits a day. Users out there have generated well over 31,000 UML diagrams so far, wow!

I’ve continued to collect and fix bugs, and add new capabilities.

PDFs

You can now output your diagrams in PDF form. PDF’s support full zoom on diagrams which looks really pretty, try this example.

Creating a PDF is as simple as adding .pdf to the end of your link, for example:

<a href="http://yuml.me/diagram/scruffy/class/[Customer]->[Order].pdf">My Diagram</a>

My Diagram

The diagrams looks like this:

JPEG Output

yUML generates .png images by default. These don’t play well in some contexts, due to how some programs png handle transparency. Eduardo Mauro, the creator of ConnectedText pointed this out, as one of his customers was using copy/pasting yUML diagrams with FireFox.

Getting a .jpg file from yUML is as simple as adding .jpg onto the end of your link. Example:

<img src="http://yuml.me/diagram/scruffy/class/[Customer]+1->*[Order], [Order]++1-items >*[LineItem], [Order]-0..1>[PaymentMethod].jpg" />

A Bit More Scruffy

The scruffy diagrams in yUML now are a bit more scruffy! This is simply down to a slighly more effective hand-writing font.

<img src="http://yuml.me/diagram/scruffy/class/[Customer]+1->*[Order], [Order]++1-items >*[LineItem], [Order]-0..1>[PaymentMethod]" />

If you don’t like scruffy, just remove the /scruffy bit from the URL.

Bug Fixes

My next plans for yUML are to wipe out some of the annoying bugs in the DSL. I’m also looking at parsing the DSL using a real PEG parser, which will allow for some a more funky and flexible DSL. I won’t be breaking backward compatibility though, so all existing images will still work.

Enjoy!

yUML Direction Control and Scaling

2009-05-23T03:17:03-07:00

I really need to give yUML it’s own blog or news page or something :)

Until then, a few things that are new with yUML.

Class Diagram Direction Control

By default, class diagrams switch from horizontal layout to vertical if there are 4 or more classes in the diagram. If you don’t want this behavior, you can override it by tweaking the URL adding a dir:lr or dir:td, where td is Top Down and lr is Left Right. Example of use:

http://yuml.me/diagram/scruffy;dir:lr/class/[Customer]+1->*[Order], [Order]++1-items >*[LineItem], [Order]-0..1>[PaymentMethod], [PaymentMethod]^[Card], [PaymentMethod]^[Cash], [PaymentMethod]^[Cheque].

Diagram Scaling

Sometimes you want a bigger or smaller diagram. yUML lets you do this if you add a scale:120 to the image URL (120 being the % size you want to scale). Here’s an example

http://yuml.me/diagram/scruffy;scale:200/class/[Customer]+1->*[Order]

Another example is this:

http://yuml.me/diagram/scruffy;dir:lr;scale:75/class/[Customer]+1->*[Order], [Order]++1-items >*[LineItem], [Order]-0..1>[PaymentMethod], [PaymentMethod]^[Card], [PaymentMethod]^[Cash], [PaymentMethod]^[Cheque].

Combining

You can combine these effects to make some interesting diagrams, here’s how you might bolt together an org chart.

http://yuml.me/diagram/plain;scale:200;dir:td/class/My Company{bg:green}->Research{bg:yellow}, My Company->Marketing{bg:lightblue}, My Company->Sales{bg:orange}, Sales-note:Outsourced to Blah inc

Enjoy!

Awesome Pencil and Paper iPhone Prototyping

2009-05-21T04:20:42-07:00

There’s something beautifully creative about sketches. I’ve blogged about it before:

To add to the collection, I just stumbled upon this post about someone creating iPhone GUI prototypes using cardboard and paper.

Beautiful.

Notes on "Meeting the Challenge of Simplicity"

2009-05-15T15:26:28-07:00

I recently watched a video on InfoQ of Giles Colborne give a talk on simplicity and user experience. Whilst I watched it, I took notes. Putting these study notes on my blog might be useful to someone…

Introduction

Mentions the book “What Do People Do All Day”. Well recommended.

The ZX81 took away his childhood desire to be an astronaught!
He looks at how people use technology in houses, workplaces, streets and stores.
Runs cxpartners.co.uk and cxpartners.com.
Clients include Noka and the BBC.
They focus on turning peoples understanding into great user interfaces for phones, desktop, web etc.

How User Experiences are Changing

User experiences are getting smaller.
In the old days, everyone wanted a “portal”.
Yahoo! were leaders back then.
Until Google came along.
Google is simpler, with a smaller, more targeted user experience.
weather.com is one of his favourite web sites (sarcastic!)
He says there are 113 links to tell us what the weather is going to be like.
Compares to a desktop widget with no links.
People are crying out for less.
Small, compact, simple user experiences are becoming popular.
One reason is that people dont’ have time.
They need to do more things in less time.
They don’t have time to “play” with software.
No-one reads the manual. Noone.
The software needs to be it’s own documentation.
Mobile computing platforms are hugely popular and used.
A task needs to be completed quickly on mobile device.
It’s the platform everybody uses.
Most of the planet are using portable devices.
This makes people want less.
A computer is a consumer device, not a specialist device.
That’s why people love simple interfaces.

What is Simplicity?

Isn’t simplicity just a new word for Usability?
No. It’s slightly different.
ISO 9241-11 definition of usability is a “combination of efficiency, effectiveness and satisfaction”.
Traditional systems (work based sofware) are highly efficient and effective, but satisfaction isn’t a real factor.
Call center usability has more focus on efficiency than effectiveness and satisfaction.
Shaving 2 seconds of a call saves 100,000s of $$$ a year.
Web sites target effectiveness and satisfaction.
Efficiency isn’t such a factor.
Simplicity implies larger satisfaction.
Simplicity is not about removing features.
MS Word has a lot of features.
Microsoft Write was crap, removing all the features didn’t help it.

Looking at what it is NOT…

Adding instructions is not simplicity. Telling people what to do doesn’t make it simpler.
Making something into steps - Wizards. This sounds like simplicity, but it isn’t really.
The experience of using a Wizard doesn’t feel simple. It feels forced and contrived.
You’ve no idea where the computer is taking you, so anxiety is increased.

Quote: “The achievement of maximum effect with minimum means” - Dr Koichi Kawana

What does that mean?
Imagine driving, and traffic lights turn green as you appraoch them. The experience is very simple. * If they turn red as you approach, the experience is complicated and frustrating.
Simplicity is referring to the experience that we give users, not the artifacts.
Simplicity is difficult to pin down. You can’t see it. It’s elusive.
User Experience occurs at many levels, and software is only one.
Program model-mental model, visual output, input mechanisms, physical dimensions and handling etc.
Devices exist in a context/eco system. iPod example - when it first took off it seems remarkable.
Part of it’s eco system was iTunes. Anyone could get their music on to their iPhone using iTunes.
This context was very important.
“The achievement of maximum effect with minimum means” is about what the user is doing.

Building in Simplicity

How can we build-in simplicity?
Another good book - “The Laws Of Simplicity”.
Process for simplicity is a bunch of guidelines that you try and follow in a more or less specific order.
Example, when working for online bank, he saw a date control that contributed to a frustrating user experience.

Rule: You have to begin with the context.

Select a month, select a year was for chosing a bank statement. There are lots of ways this can fail in context (no statements for given date.)
Understanding context is understanding the effect a user is trying to produce.
Ask, What does the user know? use that information to deliver a better experience.
Simple interfaces require smarter software.
Put the intelligence back into the software.
Things go wrong when work is pushed on to end users.

Rule: Just Simple Enough. Don’t over simplify.

3 step process. Shrink, Hide, Embody.
Drop down menu in UI is an example. Pushing functionality out of the way. Leave room for what people want to do.
Remove the irrelevant, emphasise what matters.

A travel planner is a very complex problem. It’s very unstructured. Different people have very different goals. People plan to different levels of details. A wedding trip is very different to a full holiday, for example. Time, place and money all there. Deciding between options.

Laying all that out in a meaningful way was very difficult. Then they realised that all the complexity was inside the users head. Users were just creating lists. The resultant travel planner was just a list of stuff! They could just drag stuff onto a list, sort and group it. A very simple solution.

A complex task can sometimes demand a very simple solution. You can let people have the knowledge, not the software.
Orgainising information can make it much more accessible.
Tidying a UI can sometimes simplify it, because of the users perception.
Waiting takes away the sense of simplicity. Don’t make people wait.

Book: “The Humane Interface” by Jeff Raskin

Jeff found a way of making a computer appear to start instantly by showing a picture of the screen before the loading was happening (I think Apple do this).
Taking away waiting time gives the sense of simplicity.

Testing…

We are not like the people who use our software.
Testing requires real people. Some end users.
If you can’t do that, then you can count clicks.
Another method is Goms KLM. Keybaord presses, mouse repositioning, moving hand from keyboard to mouse, system reponse time, user thinking time.
Adding up all this gives a measure of efficiency.
Over and above standard click tracking, it includes more subjective experience into account.

“People will do anyting to avoid thinking.” That includes pretending the sofwtare is broken.

Understand the users process and context
Shrink hide embody
Organize the UI
Eliminate waiting
Testing

Warning Signs

Warning bells should ring when people say stuff like

“We’ll put in a linear step by step process”. Controlling the user is a bad thing.
“We’ll let the user decide, let them customize…”. That’s not making a decision, don’t make users configure sotware.
“What if the user wanted to…”. What if’s during design meetings are when user interaces and features expand out of control. You need to go away and find out before building.
“Instructions” System should correspond to mental model. Instruction indicate a problem.
“Long lists” People lose themsleves in long lists! People lose focus when reading long lists. Simplicity gives way to hypnotism.
“Home Pages”. The desktop is the worst part of the WIMP OS. It’s the place where noone wants to be. Noone comes to the computer to use their desktop. It’s a place wheres stuff accrues. What would happen if you didn’t have a desktop. Home pages are the same. Software should start in a place that most people want to be.
“Error messages”. Something has gone wrong. The computer invites people to get into a fight with the software.
Simplicity is a type of usability. It’s not all of usabiltiy. It’s important as we try and cram technology into more areas of our lives.
You need to put in effort. You need to understand the solution up front.
You have to exercise constraint. Don’t be lured by complexity.
Smarter programming, not always more programming.

Minimalism

Minimalism is very pleasing.
“Perfection is achieved not when there is nothing more to add but where there is nothing more to take away.”
Avoid modes. Somthings are inherently modal (photoshop).

yUML Diagrams Look Cool On GitHub

2009-05-07T09:12:36-07:00

View Diagrams on GitHub

I messed about with putting yUML diagrams on a GitHub gist, I think they work well with the GitHub style.

I’ve also put them in a README.markdown file, which gets displayed by default on the repository home page, if it exists. And you can also embed them in the the Wiki.

yUML Scruffy Hand Drawn Look

2009-05-07T09:06:24-07:00

I thought it would be fun to have a scruffy hand drawn look for yUML diagrams, which I’m really fond of.

To get the scruffy look you’d just add /scruffy/ in the URL. Example:

<img src="http://yuml.me/diagram/scruffy/class/[Form{bg:orange}]+-*>[Control], [Form]++-0..1>[Border], [Form]-1>[Handle]" />

The benefit of this style is that it reminds people that diagrams are just for rough communication purposes, not a prescription of what WILL be built.

I’ve blogged about this a few times last year

In case you’re interested, the neat version looks like this:

<img src="http://yuml.me/diagram/class/[Form{bg:orange}]+-*>[Control], [Form]++-0..1>[Border], [Form]-1>[Handle]" />

A Touch Of Polish for yUML

2009-05-04T03:55:21-07:00

Thought it might be nice to add a touch of polish to yUML. We’ve now got:

Soft Shadows
Ability to embed colour in diagrams in the DSL: [Customer{bg:orange}]
Smaller label text
Long labels wrap onto multiple lines

Enjoy!

yUML and jQuery for Large Diagrams

2009-05-02T04:55:12-07:00

yUML is for creating back of napkin style UML drawings, in a fast and hassle-free way. I much prefer small UML diagrams backed up with text, and yUML reflects this mind-set. If you do want to create larger diagrams, then this post might help you.

Inspired by Eelco Vissers blog post, I thought of fairly neat way to make it easier to construct larger diagrams.

First, create a DIV, and write your yUML DSL text in it.

<div class="diagram" style="">
	[Account]++-1>[Company],
	[Company]++-1>[Settings],
	[Company]+-*>[Completion],
	[Completion]-1>[Candidate],
	[Completion]^[WebBasedCompletion],
	[Completion]^[PaperBasedCompletion],
	[Completion]-1>[Questionnaire],
	[Questionnaire]->[ScoreSet],
</div>

The benefit of having the DSL text in a div as opposed to an img tag is that it’s is quite easy to read and edit. Next, use this little jQuery script to take the DIV contents and construct a regular yUML image tag. My jQuery skillz are a bit naff, I’m sure someone could improve on this :)

<script type="text/javascript" charset="utf-8">
	$('document').ready(function(){
		text = $('.diagram').html().substring(1,$('.diagram').html().length-1).replace('\t','').replace('\n','');
		$('.diagram').html(''); //clear DSL
		$('.diagram').append('<img src="http://yuml.me/diagram/class/' + text + '"/>');		
	});
</script>

The script builds the image tag using the text in the div, and appends the tag to the DOM. The example in this post generates this image:

I appreciate that It’s not as convenient as embedding the DSL straight in an image tag. Personally, I’ll probably stick to creating small diagrams that way. For those that want to build larger UML diagrams, this approach might do the trick?

yUML - For NOT Sketching UML Diagrams Online!

2009-04-30T14:25:37-07:00

yUML is a tool that lets you create UML diagrams using only <img> tags. Here’s an example:

<!-- This is the Image Tag you'd put in your blog post -->
<img src="http://yuml.me/diagram/class/[Customer]<>-*>[Order]" />

And this outputs the following image.

The useful thing about this is that, if you learn the DSL used to for the img tags, you can create diagrams straight from your blogging tool. This makes it useful for bloggers or analysts who want to embed diagrams in their documents.

To get a feel for what’s possible, see the class diagram samples and the use case diagram samples.

yUML also has a simple online editor for those who want to generate a diagram online, and then drag it into Word or LiveWriter, or a folder on their disk.

This product is only in Beta, and I’m hoping it can blossom into something truly useful and valuable. I need to start thinking about how to fund the hosting, and how to speed up the image generation for starters!

I’d be really interested in hearing opinions and feedback from anyone that uses it. Even if it’s just “This SUCKS” :)

.NET Config for Multiple Developers

2009-04-30T10:19:33-07:00

Here’s a simple solution I just thought up for when you have multiple developers working on a project, and you want each to have their own connection string in Web.config (under source control).

I’ve seen some pretty complex approaches to this, but what about this one…

//Global.asax.cs

protected void Application_Start()
{	
    //other stuff here...

    UoW.Configure(
        WebConfigurationManager
           .ConnectionStrings[Environment.MachineName].ConnectionString);
}

Then, in web config, you’d have something like this.

//Web.config

<connectionStrings>		
    <add name="TOBIN-AB69C7A1F" connectionString="server=.\SQLEXPRESS2008;database=MdlDevelopment;Trusted_Connection=true"/>
    <add name="LIVESERVER-101" connectionString="data source=192.168.1.87;Integrated Security=SSPI;Trusted_Connection=true"/>
    <!-- add yours here -->

In short, each developer adds a new connection string to the Web.Config. The name is his machine name. Simple huh!

Rake and .NET: The Story Continues

2009-04-09T07:19:09-07:00

It seems more and more folks are using Rake to automate .NET development tasks. This is great news, and I hope we’ll soon see a community effort to make Rake even more valuable for the .NET developer.

Peter Mounce pointed me at his project, containing Rake tasks designed for .NET projects. Amongst other things, there are tasks to run NCover, XUnit and FXCop. It’s certainly worth a look, and I’d be interested in helping develop it further.

Peter has also blogged about using Rake with .NET, and I regularly see a RakeFile.rb in James “Fluent NHibernate” Gregory’s .NET projects.

Los Techies blogger, Derick Bailey, recently wrote about Rake and .NET. His post gives a nice overview, including pretty screen shots of how it works.

Finally, I’ve blogged about Rake with .NET a few times too.

Happy Raking.