MikedeBoer.nl

The Future of Web Development

mikedeboer — Wed, 09 Dec 2009 16:20:34 +0000

(…my not so humble opinion.)

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!

mikedeboer — Thu, 15 Oct 2009 14:59:25 +0000

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…

mikedeboer — Sat, 03 Oct 2009 15:26:39 +0000

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

mikedeboer — Thu, 19 Mar 2009 15:47:25 +0000

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.

Introducing HTML5 features… now! (Part one)

mikedeboer — Mon, 24 Nov 2008 16:05:35 +0000

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 tag, 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!

Note: The screencast software I’m using seemed to flicker a bit. I’m a first time user, I’ll hope to get it fixed next time.

The last couple of months we at Javeline have been working hard to get the open source Javeline Platform (JPF) ready for this new generation. The first showcase I present to you here is an implementation of the HTML5 and elements, with two key differences:

The ‘j’ - namespace, so they are called and . This difference is not really shocking, I know, but quite essential, because it enables a lot of features that Javeline Platform can provide. You can see it in action in the screencast below.
Since we cannot wait for the right A/V codec for the browser to stand up, we have to support them all: Apple Quicktime for .mov files and podcasts for example, Silverlight and Windows Media Player for .wmv files and streaming WMP, Flash for .flv and .mp3 files and VLC for .ogg files. In fact, VLC is also the default player for Linux clients, because it features the only reasonably functioning browser-plugin on that platform.

So how does it work?

Well, the basic syntax for a standard element looks like this:

 
  id  = "myVideo1" 
  src = "http://url_to_your_video.mov">  
    Video Codec not supported. 
>

And the code for a standard element looks like this:

 
  id  = "myAudio1" 
  src = "http://url_to_your_audio.mp3">  
    Audio Codec not supported. 
>

Basically what I’ve done is

implemented the HTMLMediaElement interface
gathered all the knowledge that is available about scripting the media player controls that can play media inside browsers and implemented those API’s as a layer on top of the HTMLMediaElement interface.

The result is a cross-browser and cross-platform solution for embedding rich media into your web application or static webpage - like on this blog - that can be controlled fully with Javascript! In other words: the and tags are now a real thing, whereas you - webdeveloper - don’t need to wait any longer. We want HTML5 and we want it now!
At the bottom of this article you will find a full demonstration of the tag. It shows a screencast with me explaining how to use the and for your own web application(s).

Next, I will show you how to add player controls to both and elements. Since they share the same ancestor - the HTMLMediaElement interface - I can show the player controls for the example first and simply reuse it for the example.

Playback control.

The HTMLMediaElement specifies a couple of accessor methods that enable developers to control the playback of a media file, like ‘play()’, ‘pause()’ and ‘canPlayType()‘.
Example: say you want to give a visitor basic control over the video and/ or audio files you provide, but want them to have the same look and feel as your web application. From a usability and interface design perspective this is quite important. Since you can now control the and elements with simple accessor methods you may use your own button widgets to add a Play and Pause button. The onclick event would in this case fire ‘myVideo1.play()’ and ‘myVideo1.pause()’ respectively. Really, it’s that simple:

 id = "myVideo1" 
  src      = "http://url_to_your_video.mov" 
  autoplay = "true" 
  controls = "false" 
  volume   = "90">  
    Video Codec not supported. 
> 
 
 
  background = "{!myVideo1.paused?'pause.png':'play.png'}" 
  onclick    = "myVideo1.paused ? myVideo1.play() : myVideo1.pause()" /> 
 
 value = "{myVideo1.getCounter(myVideo1.currentTime, '%M:%S')}" /> 
 
 
  realtime = "false" 
  value    = "[myVideo1.position]" /> 
 
 
  value = "{myVideo1.getCounter(myVideo1.currentTime, '%M:%S', true)}" 
  class = "jpf_countdown" /> 
 
 
  value = "{Math.round(myVideo1.volume)}" />
 
 
  width = "80" 
  value = "[myVideo1.volume]" 
  min   = "0" 
  max   = "100" />

You can use the ‘getCounter()’ function to transform the currentTime from milliseconds to a human readable format. The modifier ‘%M:%S’ displays a currentTime value of 360,000 as ‘06:00′. A third argument specified as ‘true’ (Boolean) will return a countdown.

Javeline Platform supports two-way property binding. In other words: your controls are not limited to listening to changing properties, but may also change it themselves. You can now grab the knob of the slider control and seek through the movie or sound! I’d say give it a whirl, it’s quite fun to do once you know it’s Javascript doing the dirty work…

// Curly brackets: one way property binding (read-only)
{Math.round(myVideo1.volume)} 
 
// Square brackets: two way property binding (read-write)
[myVideo1.position]

Let’s add some style

Styling in JPF is done with skins, which is something I would love to explain in a later article, but for now I’ll stick with the notion of their existence.
When I apply some basic styling rules, the code will look like this:

 resizable="true" width="482" height="353" minwidth="400" 
  minheight="250" xmlns:j="http://www.javeline.com/2005/jml">
     id = "myVideo1" 
      src      = "http://url_to_your_video.mov" 
      autoplay = "true" 
      controls = "false" 
      volume   = "90"
      left = "2" right = "4" top = "2" bottom = "30">  
        Video Codec not supported. 
    > 
 
     
      background = "{!myVideo1.paused?'pause.png':'play.png'}" 
      onclick    = "myVideo1.paused ? myVideo1.play() : myVideo1.pause()" /> 
 
     
      value = "{myVideo1.getCounter(myVideo1.currentTime, '%M:%S')}" 
      class = "jpf_counter" /> 
 
     
      realtime = "false" 
      skin     = "slider16" 
      value    = "[myVideo1.position]" 
      left     = "80" 
      right    = "182" /> 
 
     
      value = "{myVideo1.getCounter(myVideo1.currentTime, '%M:%S', true)}" 
      class = "jpf_countdown" /> 
 
     
      value="{Math.round(myVideo1.volume)}" />
 
     
      width = "80" 
      value = "[myVideo1.volume]" 
      min   = "0" 
      max   = "100" /> 
>

As you might have noticed, I just added a ‘’ element, which basically serves as a container element for the video and player control elements. The advantages of using a here instead of a

are twofold: 1) I’m able to use a skin like with all the other elements and 2) I can now use the ‘resizable’ attribute, with which I can make the entire video player resizable with drag and drop by setting it to ‘true’. Read all about it - and more - on the next page…

ResizeMe!

Well, I’ll be short on this one: setting the ‘resizable’ attribute on any visual Javeline Markup Language (JML) element makes it resizable by dragging the borders and dropping them at their new position(s). With additional properties like ‘minwidth’, ‘minheight’, ‘maxwidth’ and ‘maxheight’ you can enforce the necessary constraints on the resizing behavior. Simply put: check out the video player in this article, grab one of its corners and drag it around!

DOM operations

Both and elements can be modified and controlled in real time using standard DOM operations.
Example: say we have a list of videos that a visitor of your site can pick from. Since it is a web application, no page refresh should happen, not even when the user starts switching between videos. That’s where setAttribute comes in to play; when the user selects another video, a simple setAttribute(’src’, ‘new_video.mov’) will do the trick! You can see me showing a couple more DOM operations in the screencast below.

Cut and paste for your blog

You can copy and paste the code below and you’ll get the same result on your own pages instantly (it includes the elements in a way that works well with blog editors like wordpress and blogspot). What’s left for you to do is build beautiful interfaces and enhance those web application with stunning rich media!

 src="http://cdn.ajax.org/platform/1.0rc1/jpf_av5.1.0rc1.js">> type="text/javascript">>

Conclusion

We tried to solve the hard problems, gather all available knowledge on scripting player controls and provide them to you in a ‘ready-to-roll’ package. The final release of the video/audio tag will include auto detecting available plugins instead of only trying the preferred plugin for the specified format. This will solve all the multi os problems that are there.

I would love to hear all comments and feedback you have. As the HTML5 spec is subject to change almost every day, I think that the and elements will be subject to change as well. I hope this showcase will spur more discussion about the next generation of browser interfaces and we at Javeline would love to chime in with this little contribution.

More to come…

As I mentioned earlier in this article, we’ve been working hard and implemented quite a few more features of the HTML5 specification in the upcoming JPF 1.0 RC1 version, which is due to be released soon, so stay tuned!

Did you know that JS can be weird sometimes?

mikedeboer — Fri, 05 Sep 2008 14:13:05 +0000

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

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?

Fun with Ubiquity

mikedeboer — Wed, 27 Aug 2008 15:39:23 +0000

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!

Gem of the day

mikedeboer — Fri, 15 Aug 2008 15:47:50 +0000

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