The Iceberg Secret: Napkin Look & Feel!

Intended Audience:
If you've ever had to develop a GUI mock-up or prototype for someone in "management" before... this one's for you!



The Secret:
Let me introduce you to "The Iceberg Secret" of UI development. From Joel on Software:

You know how an iceberg is 90% underwater? Well, most software is like that too -- there's a pretty user interface that takes about 10% of the work, and then 90% of the programming work is under the covers. And if you take into account the fact that about half of your time is spent fixing bugs, the UI only takes 5% of the work. And if you limit yourself to the visual part of the UI, the pixels, what you would see in PowerPoint, now we're talking less than 1%.

That's not the secret. The secret is that People Who Aren't Programmers Do Not Understand This.

The Solution: (but only if you're a Java Swing developer)

The solution to your prototype woes is called the "Napkin" Look & Feel. It makes your GUI reflect the current state of its development: as if it was all written on a napkin during lunch and then magically scanned into a mock-up.



Some of the underwhelming (sarcasm) features:

• Crinkled paper background.
• Randomly rendered lines (aka hand-drawn with a pen) for outlines, borders, boxes, etc.
• Disabled == erased... even images get erased!
• Hand-written fonts.
• Menus and pop-ups... sticky notes!!!
  

(My favourite part is the "sticky notes" theming for menus and pop-up menus. It makes me feel warm and fuzzy inside.)


So, the next time the word "prototype" comes to mind... just think "Napkin"!


About the author: When the word "prototype" comes to Ethan's mind... he thinks "Napkin"!

Rave: Firebug extension for Firefox

I'm something of a web-development "purist". Many of my recent web-development sessions have boiled down to manually editing code--whether it be HTML, CSS, Javascript, PHP or SQL--using nano (like notepad for Linux). These sessions typically go something like:

code... code... code... open in web-browser... dang! ... code... refresh browser... code... code... aha! ... code [etc.]

When you're manually debugging PHP, I'd recommend the print_r function for starters. When you're manually debugging CSS... it's another story. (There's a reason it was named "Cascading".) In everything but the simplest HTML+CSS layout, there are usually conflicting styles and it never fails but that an unwanted style manifests itself. You can easily spend more time trying to fix CSS "bugs" than doing actual development because none of your inspector tools 'splain what's going on thoroughly.


The good news:
... Well, tracking down those pesky stylesheet issues has never been easier. I'd like you to meet my newest best friend¹: the Firebug extension for Firefox! It's an all-in-one browser plugin to make whatever you're doing on the web--from scripting to CSS hacking--that much easier.


In addition to awesome features like a content/connection profiler, it has the best CSS inspector/editor/debugger/whatever I've seen:

1. A "Click an element in the page to inspect" button that lets you take the problem right to the point of conflict. (No more endless DOM tree-navigation with DOM Inspector.)
2. A hierarchical view of active styles (by inline/external stylesheet) as well as listing inactive styles. When I figured out what I was looking at... well, my wife heard me shouting from the other room; it's that awesome.
   
3. Interactive style editing: to make sure it looks the right way before coding the styles, or to see how well your minor style "tweaks" look.
4. Layout guide: Click on a DOM element to see what the current padding, border, margin, and positioning are. Killer.
   

The real beauty of it is that the friend who recommended Firebug is even more keen on the Javascript features than the CSS inspector/editor--let the good times roll!


Images:

1. Firebug Layout Inspector:

2. Firebug Style Hierarchy:

Notes:
1. My previous new best friend was (and still is) jQuery.