The Future of Web Development

(…my not so humble opinion.)

Delphi 3 Box

Delphi 3 Box

Back in the days when I was still a naive little boy, full of potential, wits and enthusiasm for user interfaces on a peecee, I made my first ever UI in Delphi 3. Personal Edition. It was supposed to become the most advanced, but simplest to operate ceedee burning program ever, in an apple-esque fashion. All it eventually did was start up, show the UI and the ‘Close’ feature worked perfectly as well.
Instead of feeling miserable or like a failure, I really felt good about it. I started and closed my ‘ultimate ceedee burning program’ again and again and again to marvel at its impeccable design. I never showed it to anyone else.
The power that development tools for desktop application give - even to little kids that are just fooling around - inspired me to think about how we webfolk could leverage the principles and ideas that lie within.
The power that a GUI builder (usually a feature inside an Integrated Development Environment) exposes is the ability to create UIs to users that do not necessarily need a technical background in order to use it. Fantastic, potentially functional designs can be created for Windows desktop apps in Visual Studio, ye olde Delphi or more specialised tools. Mac OS has the wonderful Interface builder that comes with XCode for Cocoa apps. With those tools at hand, it’s not really rocket-science to create a User Interface. In fact, the tools allow specialised UI Designers and User Interaction designers to create mockups and even prototypes with limited functionality.
The Ultimate ceedee burning app I created during my wild days was actually my first-ever working prototype. All I’m trying to say really, is that if even a kid can do it, surely there must be real value there.

Latest trends in the web development industry have been gearing toward porting existing desktop applications to work in a web browser. Our email reading software is moving to a web application like GMail or Live Mail; golden oldies like Thunderbird, Outlook and Mail.app are bound to be left alone eventually. Office suites like OpenOffice.org and MS Office can be replaced - or augmented, whatever - by Google Docs or Office Live.
Recently Google announced its Chrome OS to the world and promised that within a year we’ll see the first Netbooks coming out with Chrome OS pre-installed. The most important thing about Chrome OS is that it’s really a shell around its web browser, Chrome. All applications that you’ll be able to run in Chrome OS will be web applications.
A lot of my friends - who also happen to be of the web developer breed - cheered when Google announced its plans for a web-centric OS, including yours truly. But, in fact we ought to have been scared shitless… what’s a web OS worth without a convincing set of web applications? How can users migrate to such an OS without thinking twice and leaving their precious desktop workflow behind? Over the years, a slew of very smart people pondered and chipped in on conceptual user interface and interaction design. Wouldn’t it be a waste if all that valuable knowledge and proof is trashed, binned, set on fire and pissed on by a small set of cocky web developers?
No, with the current state of web application development, we cannot expect people to switch to web apps, let alone a web OS. We are still missing architectural components, like a system that provides a common bridge and transport of objects between web applications - comparable to OLE. I don’t know about you, but I’m quite attached to dragging my favorite Youtube videos and dropping them in a Google Docs document…
But the core feature, the heartbeat of any OS competitive to Windows, is choice. And at the moment, we’re already having trouble coming up with one decent alternative for each commonly used desktop application. Take text editors, for example. Coders/ programmers are quite picky and opinionated when you ask them what their favorite editor is, mainly because there’s a plethora of choice: VIm, Emacs, joe, pico, nano, Textmate, phpEd, Notepad(++), Slickedit, Editpad, Editra, UltraEdit, etc. What alternative would we have in a web OS? Bespin, and… well, that’s it really. I don’t have to explain to you that that’s unacceptable, I at least will not switch to any OS if I would be forced to use Bespin as my editor and leave precious TextMate behind… CHOICE!

The only way I believe we can make strides into offering more choice to users, thus quickly expanding the amount choice in web applications, is to retain existing knowledge of user interface and interaction design. We need to create tools that with which web UIs can be developed just as easily as with modern desktop tools. In other words, we need GUI builders and mockup design tools that implement and grok current dogmas and principles of designing UIs, potentially usable for kids.
The first and only effort in that direction at the moment is Atlas, by the 280 North team. It’s a tool that is inspired by the GUI builder of XCode and design principles of the Mac OS. It’s a fantastic product and idea with lots of potential, but pretty much worthless if there won’t be more choice in comparable tools soon. On top of that: the Atlas project and technology behind it is not mature yet, so it’s debatable if desktop application replacements can be developed with Atlas and Cappuccino. But, I’m biased: at Ajax.org, we’re going to try and start offering choice with our own IDE and GUI Builder. Again, because we need more choice in tools that are all about user-centric, not feature-centric design.

Let’s try not to re-invent the wheel, but make developing web applications easier for all by building upon decades of knowledge in computer science and User Interaction and Design studies.

Let’s meet at JSConf in November!

I’m very happy to announce that my beloved open source project is announced over at JSConf EU as an Advanced Silver Sponsor!

Additionally, Ruben Daniels and I will be presenting about the new APF version and the insane stuff you can build with it:

Title: Building collaborative applications with Ajax.org Platform
Abstract/ About: Web trends and technologies today are converging to do one thing particularly well: collaborate.
All of us dream about the possibility to weave collaborative features from products like Google Wave, EtherPad, SubEthaEdit, Mozilla Bespin, Google Docs into our own applications.
Ajax.org Platform combines technology and open standards into a solution to build web applications with rich collaborative features at minimum expense.
The simple-yet-elegant, declarative API makes it easier to learn, while its openness in design allows it to be extended to the level you and your team are comfortable with.
Forget lock-in of vendors and other libraries or frameworks, forget waiting for the Big Boys to open source their latest inventions.
Start building your next - or first - collaborative web application today, visit ajax.org.

I’m really looking forward to meet all of the cool people that will be attending the very first JSConf in Europe!
The ones who are lucky enough to have obtained a ticket can really call themselves the avant-garde of the Javascript community ;)

I hope to see you there!

Ajax.org Platform 3.0 delayed a bit…

While having a blast in Boston at The Ajax Experience (#tae), we received loads of feedback to our plans and thoughts.

We decided to act upon that and started hacking again on APF, so that it would incorporate all those ideas into one, awesome release.

This basically meant a major refactor on top of what we already did up till before #tae. Guess what that means… a delay!

Yepper, it will take us at least a week from now to complete and stabilize the lot to reach Beta quality.

Will it be worth the wait? You decide:

  • contentEditable=”true” on any element
  • DOM3 including DOM events support
  • Choose between declarative XML and JSON markup to build UI’s
  • New language to bind widgets to each other and widgets to data
  • Tons of fixes of bugs and annoyances
  • IDE in the making…
  • more…

The release will be announced together with a new version of the Ajax.org website - hey it’s build with APF, so that makes sense, right? - and also on this blog.

Stay tuned and thanks so much for your patience!

Visual communication with Jing

I’ve been using this tool for a couple of months now, together with my colleagues at Javeline, and it has proven itself to be a power tool. If I want to show off a (supposedly) cool new thing I’m working on, or visualize this nasty bug that my co-worker promised to fix months ago, I press ‘Command+Shift+1′ automatically now; Jing captures what I’m doing in image or video quality and afterwards I can upload it to my account at Screencast.com with the push of a button. It puts the short URL to my video clip on the clipboard, so that I can paste it in into my chat conversation or blog article right away:

http://screencast.com/t/ojI7mlTF2

It just works. Nice.

It’s free, works on Windows and Mac OS X.

Share and Enjoy:
  • Print
  • Digg
  • del.icio.us
  • Facebook
  • Google Bookmarks
  • Fleck
  • Reddit
  • Technorati

Introducing HTML5 features… now! (Part one)

We think the HTML5 specification, published and maintained by the WHATWG, and the Open Web initiative are beautiful entry points to jump start a new generation of Internet applications. There is one downside to these endeavors: we web developers need to wait for browser vendors to implement features like the <audio> tag, <video> tag, undo/ redo, local storage, cross-domain XHR, validation, etc. And even when these features are implemented inside the new browser versions, we still need to wait for them to hit mainstream and replace the old versions. But we don’t want to wait, we want them now!
Continue reading ‘Introducing HTML5 features… now! (Part one)’

Did you know that JS can be weird sometimes?

Of course you did, otherwise you wouldn’t read this! Anyway, I found this little easter egg in Javascript land:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function test(){
    var privateVar = 10;
    function tryXs(){
        if (false) {
            var privateVar = 5;
        }
        alert(privateVar);
    }
    this.callme = function(){
        tryXs.call(this);
    }
}
 
var oTest = new test();
oTest.callme();

Now what do you think what will the alert() show us? UNDEFINED! Now why would that be???
Well, apparently the ‘var’ in

1
2
3
if (false) {
    var privateVar = 5;
}

screws things up for us; even though the if-statement is evaluated to FALSE at all times, thus never executing the statement body (’var privateVar = 5′). Reasonably, you’d expect the alert dialog to display the value ‘10′, but apparently it still parses the body of the if-statement and pulls a string of the variable scoping rules.
Want to hear something even more weird? It’s consistent behavior! This occurs in all major browsers (I tested IE 6, FF 3.0.1, Opera 9.51 and Safari 3.1.2) and the alert shows ‘10′ when you remove the ‘var’ from ‘var privateVar = 5′. That actually makes sense again!

I’m quite interested to see and hear if anyone can give me an explanation for this behavior, because I probably lack the skill(s) to see any practical use in this ‘feature’ ;).
Does anyone else know a weird Javascript nugget like this?

Share and Enjoy:
  • Print
  • Digg
  • del.icio.us
  • Facebook
  • Google Bookmarks
  • Fleck
  • Reddit
  • Technorati

Fun with Ubiquity

Today I came across the most interesting announcement from Mozilla’s Aza Raskin: Ubiquity 0.1 alpha is out. That means I have a new toy to play with!

Ubiquity is an add-on for the Firefox browser that enables the user to interact with content like never before; contextual fragments of a webpage can be translated, sent by email, looked up with Google Maps, searched with by wikipedia, youtube, flickr and so much more. I suggest you watch the video!

As with every other new toy, I started playing with it right away and I immediately fell in love with the ‘email’ command. I could simply select some text, do ALT+SPACE, type ‘email this to ruben’, hit ENTER and go! It automatically fires up GMail, sets subject, to-address, body text and the only thing left to do is press ‘Send’.
Problem: I do like GMail, but I use it only for emergencies. When ALL my other mailboxes are unavailable, which happens, like…never. So I rolled my own little Ubiquity command called ‘mail’ that does the exact same thing as ‘email’, but uses the standard ‘mailto:’ interface to access your desktop email client.
Problem: it doesn’t support HTML mail, thus no fancy content like images and hyperlinks. I guess I could add a couple of regular expressions that parse the body text for links and replaces images with BBCode-like placeholders - [img src=http://path.to/image.jpg]. I’ll do that upon request, ok?

This is only a very simple, first tryout of what I could do with this Ubiquity alpha. There’s probably more to come, so check up on me regularly when you’re interested.

Enjoy!

Share and Enjoy:
  • Print
  • Digg
  • del.icio.us
  • Facebook
  • Google Bookmarks
  • Fleck
  • Reddit
  • Technorati

Gem of the day

It’s not like I’m going to post a random thing I found useful as a Gem-of-the-day every day, but let’s stick with often.

The first gem is this one:

/**
 * Execute a script in the global scope.
 *
 * @param {String} str
 * @type  {String}
 */
jpf.exec = function(str){
    if (!str) return str;
    var head, script;
    if (window.execScript) {
        window.execScript(str);
    } else if (head = document.getElementsByTagName("head")[0]) {
        script = document.createElement('script');
        script.setAttribute('type', 'text/javascript');
        script.text = str;
        head.appendChild(script);
        head.removeChild(script);
    } else {
        eval(str, window);
    }
    return str;
};

So what does this little gem do? Well, it provides a developer the power to execute a piece of script - at runtime of course - in the global scope. For example, if your XmlHttpRequest loads the content of a .js script file (e.g. the Content-type header is set to ‘text/javascript’), ‘exec()’ will execute that script as if it were loaded with a <script> tag in the <head> section.

Dynamic script loading this feature is called. Wow. Anyway, we use it at Javeline and I found it in the Mootools library - lots of cool stuff in there by the way.

Update: Added the eval fallback with its second argument telling eval to execute the code in the scope of the window object. (This is supported by Gecko browsers only)
Update2: Changed document.head reference to document.getElementsByTagName(”head”)[0]. (Thx Mors)

Hello world!

Everyone, this really is my first personal blog article ever! Oh well, there’s a first time for everything, right?

But just like the first I rode a bike, I’ll probably fall down flat-faced a couple of times over here before I get the hang of it, so please don’t hold it against me.

The blogging-thing has been on my todo-list for a long, long time since I started working at eBuddy.com in 2004. I’ve experienced a great deal of fun stuff that I would’ve liked to share at that time, but didn’t have my domain registration stuff in order. Now I work for Javeline and they own a web hosting company called HelderHosting! How convenient!

On this blog I will try to bore you with talks about Javascript development. Mainly that and a lot of PHP will sneak in as well. All right, CSS is also my victim and - oh no, I am going to use the word - Ajax. Yes. The damn word seems to haunt every respectable webdeveloper out there, including poor little me. Of course, I made my own Ajax framework, who hasn’t these days? My only hope is that the RIA community will make up their minds really soon, until we end up like having one of the few flaws that PHP seems to suffer from: almost every PHP developer has his own freaking framework! Quite pathetic, really. But they say it’s their strength, so I let them believe that of course.

Random rants will pass revue as well, as you might’ve noticed already. However, I’ll try to keep it organized. Promise. (Hmm, ‘organized random rants’, a contradictio in terminus, isn’t it?)
I’d like to save some room for humor as well. And music. And more culture. Oh, heck: just include everything that completes life. My life.

See you around,
Mike.

Share and Enjoy:
  • Print
  • Digg
  • del.icio.us
  • Facebook
  • Google Bookmarks
  • Fleck
  • Reddit
  • Technorati