Update on the canvas element

With support for the canvas element coming in Firefox 1.5, the two major alternatives to Internet Explorer (Firefox and Safari) will be one step ahead–of IE 7, that is. Some ideas are floating around how to add support for canvas to IE, however:

So here is the challenge: Write some Javascript that detects lack of support for canvas, and support for DirectAnimation. It then replaces the <canvas …/> element with an <object …/> element which invokes DirectAnimation. The Javascript will then have some wrappers that convert the <canvas …/> Javascript function into DirectAnimation calls.

Btw, the canvas element may also prove to be a great thing for Sparklines.

Be sure to wade through this presentation.

While waiting, read the docs and look at these demos (in Safari, or Firefox DP). Oh, and here’s mine.

OSCON Ruby on Rails pointers

Sean Mountcastle has put up his notes on the Extracting Rails from Basecamp OSCON session. Read and learn both about Rails’ history and how to start an Open Source project.

A lengthy report on the OSCON Rails tutorial is available from Phil Windley.

And, be sure to read David’s account of having nice shoes and winning the Google/O’Reilly 2005 Open Source “Best Hacker” award.

More automatic testing with JavaScript

As a follow up to the previous article: with the very latest SVN trunk of script.aculo.us having all sorts of nice unit testing thanks to efforts of Jon Tirsen (and some make-it-look-good additions from Michael Schuerig) a very nice framework for (more or less pragmatic) in-browser unit testing of JavaScript (and HTML!) has come in to place (it’s still to be considered quite alpha, but it basically works).

For some working examples on this fire up test/inplaceeditor_unit.html or test/test.html in Firefox (Safari/IE currently not supported, planned!) and watch the magic. Be sure to do a “view source” for the interesting part.

If you want to be a part of this and have suggestions on this (or patches…), please subscribe to the rails-spinoffs mailling list!

Apple finds Ruby on Rails has a “clean design” that you “won’t want to miss”

Besides releasing a two button mouse (whoa) today (so much for “Hell froze over”), there’s a mention of Ruby on Rails on Apple’s developer pages:

If you are considering using Ruby to write web-based applications, you won’t want to miss the Ruby on Rails project. Rails is an open source web programming framework that is rapidly gaining mindshare due to its simplicity and clean design. 

Safari Goodness Galore

The next version(s) of Safari will include all sorts of updates, like:

• Improved Javascript performance: It already runs circles around Mozilla’s implementation, so the Gecko team will have to come up with something here
• Styleable form controls (I wanted this since the days of the Safari Beta. This also means that contenteditable will be supported better!)
• DOM/JavaScript patches (yeah)
• Various other stuff (please implement dispatchEvent!)

What’s also a good thing: There’ll soon be committers from outside Apple–this will definitely speed up development. Can’t wait… 🙂

Automatic testing of your web pages with JavaScript

Yes, this is possible.

A proof of concept (currently Firefox only) is included with the test file for the new AJAX in-place editor
(coming in the next script.aculo.us version).

Excerpt from the test case:

new Test.Unit.Runner({

  test_InPlaceEditor: function() { with(this) {
    inPlaceEditor = new Ajax.InPlaceEditor($('tobeedited'),
      'inplaceeditor_result.html');

    Event.simulateEvent('tobeedited','mouseover');
    assertEqual("rgb(238, 238, 238)",
      Element.getStyle('tobeedited','background-color'));

    Event.simulateEvent('tobeedited','mouseout');
    assertEqual("transparent",
      Element.getStyle('tobeedited','background-color'));

    Event.simulateEvent('tobeedited','mouseover');
    Event.simulateEvent('tobeedited','click');
    assertHidden($('tobeedited'));

    (...)

Kudos to Jon Tirsen to coming up with most of this!

What’s needed now is way to automatically record events and make a test case skeleton out of it. That would allow for complete automatic browser based tests. How cool is that?

What’s coming in script.aculo.us V1.1?

Loads of bugfixes and some very nice new features, here’s a quick demo page showing some of those.

An application a day keeps the sit-ups away

Ok, so we had this idea to build a community site to tell the world: Hey look, there are people that care about each other! Let’s tell “the good news”, the small enjoyable moments of life. And get some goodwill going.

Said, done.

With two people (one of them a non-programmer) working one day on this, we did a concept, a design, complete programming with tests and live deployment for a forum/blog crossover type of application. About 3/4 of the day was spend on coming up with the concept and the design. The Implementation itself was silly easy.

The application features a database backend (compatible with MySQL and PostgreSQL), complete user management with email-based registration confirmation, password reset, RSS feeds for articles and comments, ajax-based article commenting, pagable article lists, some administration functions and so on and so forth.

Because of the nice and clean MVC architecture it will be trivial to add additional stuff to it, as we like.

Talk about RAD. Have I said that Rails is great?

script.aculo.us V1.1beta1 released

So—what’s new?

Changes from 1.0.0:

• Fixed rendering of last frame of animation when from/to is not 0.0/1.0. [thanks to David Zülke]
• Added returning the generated combined effects to allow for .cancel() on all effects
• Updated Ajax.Autocompleter to deal with parameters options correctly [Martin Marinschek]
• Added incremental and local autocompleting and loads of documentation to controls.js [Ivan Krstic]
• Fixes various (possible) memory leaks with IE and Mozilla
• Make effects.js, dragdrop.js and controls.js compatible with some 3rd-party JavaScript libraries (like IE7) by refactoring to use Object.extend() [David Zülke]
• Make Effect.Highlight restore any previously set background color when finishing (makes effect work with set CSS classes)
• Added capability to remove draggables/droppables and redeclare sortables in dragdrop.js
• Added Effect.ScrollTo to smoothly scroll the page to an element
• Better Firefox flickering handling on SlideUp/SlideDown
• Added support for cancelling dragging my hitting ESC

Changed logic of drag-and-drop to only include the last referenced droppable when firing a drop event. This change also offers slight performance gains. [Dominik Wagner]

Download on script.aculo.us!

Disabling text-selection for Web 2.0 apps

With rich internet applications, that look and feel like desktop apps, you’ll sooner or later run into the problem of browser text-selection, especially if you use some more advanced UI interaction.

You often just want it off because it gives your users no advantages in usability but messes with the layout, and can make images grayed-out or text unreadable.

So, here’s a quick remedy to this (requires the most current version of the Prototype JavaScript library), which will also allow your users using text-selection in input boxes and textareas as usual:

if(/MSIE/.test(navigator.userAgent)) {
  document.onselectstart = function(event) {
    if(!/input|textarea/i.test(Event.element(event).tagName))
      return false;
  };
  } else { // assume DOM
  document.onmousedown = function(event) {
    if(!/input|textarea/i.test(Event.element(event).tagName))
      return false;
  };
}

You can also extend this to allow more elements having text selection. So, if you want paragraphs have text selection, too, just change the regular expression to:

!/p|input|textarea/i

Or you could implement your own testing function that can do checks on more stuff, like CSS class names or specific ancestor elements.

NB: This kind of thing shouldn’t ever be used on normal websites where the user expects that text and image selection is working. It’s strictly for specialized web apps, where text-selection can interfere with enhanced/customized UI elements. No user wants to copy the text from the submit button, or the ‘drag’ text from a dragging handle. But they will want to be able to copy other text contents from the app, besides expecting text input boxes and textareas to work as they should.