pseudoberries random thoughts about life, hacking and open source

Objective Web

For quite some time I've been annoyed by a concept utilized by most web applications. The administration panel. The separate site for managing the site. If you, for example, want to edit a news entry, you would have to open up this administration panel, locate the post you want to change, make your changes, hit Save and open the site again to see how your changes looked. So what's the problem with this? First of all it's inelegant and cumbersome. But most importantly it's not user friendly. Users should be able to see the end result of their modification while they're making modifications. Sure, you could have a Preview button or some fancy WYSIWYG HTML editor, but the end result would still be different. The preview solution is too cumbersome to use, and the editor is most often embedded in the administration panel rather than the site itself.

My idea is to make modifications of a site element (or "object") identical to the end result. All within the web browser. This has already been done to some extent in Flickr, Facebook and Plone3. There you are able to click a field (like a heading or text) and it transforms into an input field and two buttons - Save or Cancel. Flickr is by far the most elegant solution I've seen, but it only utilizes these features on some of the content. Also, none of the fields will appear as seen while editing them. The Save and Cancel buttons will not be a part of the final result. In addition, the input area is often too small or too large to fit the text currently in it. Often the fonts and colors are completely different in the input field. Finally none of these sites / systems utilizes this concept to its full potential - everywhere.

Why can't the user be able to see the results of his modifications on the fly? Todays modern web browsers are so sophisticated that this should be possible. Just take a look at the advanced and very elegant Organizr web interface of Flickr. It's almost like a stand alone application running directly on your computer! There will ofcourse be some challenges regarding browser compliance. For instance, Safari doesn't allow much styling of input fields while Firefox does. There's also the issue of metadata - data that you won't see in the end result. A small drop-down menu in the corner of each "object" might be a solution to this.

I've put up a small mockup of this idea. It works best in Firefox, and ideally you should be able to click on each individual element to edit it instead of entering "Edit mode". Play around with it, I'd love to hear your thoughts! I've not come up with any good names for it yet. Until another name springs out of the top of my head, it's called "Objective Web". Tacky.

Firebug

Today a friend showed me Firebug - an addon to Firefox which lets you edit, debug, and monitor CSS, HTML, and JavaScript live in any web page!

At first I wasn't impressed - I've seen this before in the Web Developer addon. But after I tried it, I was amazed at how elegant and useful this addon was! It highlights each HTML element when you hover over it with your pointer and shows all the CSS styles that affect the selected tag!

You can edit everything and see the changes on-the-fly. It also includes a DOM Inspector-like inspect function so you can easily locate any element on the page.

An undo function does not exist, however, so I wouldn't rely on it as your full time development IDE However it's still in beta, so that might be added in the future!

This is a must for any web developer!