Speaking at QCon London

For all of you interested in a solid introduction to and what to expect when using Prototype and script.aculo.us, I’m doing a talk on Spending the weekends at home again at QCon London, on Friday, March 16.

Head over to the QCon site for more info about the conference.

Some familiar faces there also include Dave Thomas, Zed Shaw, Ezra Zygmuntowicz (I won’t miss the talk on Rails Deployment!), Dave Crane (Author of Prototype and Scriptaculous Quickly, an upcoming book on Prototype & script.aculo.us!) and of course Londoner James Adam.

See you there!

Fake moon landing?

Ben Nolan (of Behaviour fame) has a nice CANVAS-tag based moon lander for your enjoyment (Safari and Firefox only).

Start your engines.

Vienna Ruby meeting

Slowly but surely, Ruby and Rails is getting some momentum here in “enterprise-software” infested Austria, so we need a Stammtisch to discuss things. If you’re in Vienna on January 31, drop by and have some beer & ruby fun.

Christoph has the details (in german).

script.aculo.us 1.7

On the heels of the recent release galore here’s one more:

script.aculo.us 1.7 is final!—download away!

So what’s new? Basically, the new stuff is all about Effect.Morph and all the goodness you can read about here and here.

Of course, we’re on Prototype 1.5 final now.

As always, get the fine print from the CHANGELOG.

Now, if script.aculo.us only had an API documentation like the new one for Prototype. The wiki is great, but a more complete, up-to-date and coherent resource would be even better. Well, let’s see about that… 😉

Of course thanks to the contributors. And yeah, I know that there are quite a bunch of tickets and patches pending—let’s get this one out first and get all that love in the next version. 🙂

NOTE: This is not the version included in Rails 1.2.1.—. You can use this version with Rails 1.2.1, just download and overwrite the files provided by Rails! The next Rails release will include this, of course. 🙂

Prototype 1.5 out now, with complete API docs

Prototype 1.5.0 has arrived. Besides tons of additions, this release marks the unvealing of the all-new Prototype site, available at:

http://prototypejs.org/

Thanks to the heroic efforts of foremost Justin Palmer and the rest of the Prototype core team we now present complete API docs, one of the things that has been missing from this great library.

Enough talk, head over to the official site to read the details, and get Prototype 1.5.0 today.

Don’t forget to digg this.

Rails 1.2 coming soon

With release candidate 2 out now, Ruby on Rails 1.2 is scheduled to be released in the very near future.

Again, if you want to make use of the tons of tweaks, additions and improvements, grab it, and test with your apps!

On the JavaScript side of things, Prototype has seen lots of updates lately, and this new improved version is part of the Rails release candidate, so don’t miss it.

script.aculo.us 1.7.0 beta 2

This new beta of the upcoming script.aculo.us 1.7 release adds support for using the morph effects with style definitions in CSS classes:

So, first define a CSS class:

.warning {
  font-size: 15px;
  color: #f00;
  border: 4px soild #f00;
}

Then use it with .morph():

$('mydiv').morph('warning');

Thanks to Tobie Langel for this niceness. Additionally, next to the string based style strings, you can also use the style definitions you know from .setStyle() in Prototype:

$('mydiv').morph({fontSize:'20px',color:'#abcdef'});

Effects should now also play faster, provided your browser and computer is fast enough, as the maximum frames per second setting is now at 60fps vs. 25fps in earlier releases.

Also, some issues are addressed in the included new beta of Prototype, mainly Opera 9 issues and a using Safari with HTTP authorization; plus of course lots of other fixes and new cool stuff.

Download script.aculo.us 1.7.0 beta 2 here or grab it from SVN.

Oh yes, and happy holidays to you—have fun (maybe with playing around with this?) and be sure to report issues. Oh yes, and more stuff is coming… 🙂

(3).times(function(){ alert(‘Ho!’) });

Ruby on Rails 1.2 release candidate

The Ruby on Rails 1.2 Release Candidate 1 is out now!

Next to all sorts of cool new stuff within the framework, It also includes all the latest Prototype and script.aculo.us features (both Prototype 1.5.0_rc2 and script.aculo.us 1.7.0 beta 1 is part of it). So be sure to get a glimpse of the future right now… 🙂

script.aculo.us morph effects

script.aculo.us 1.7 beta 1 is out now (see below!)—and the big new thing is Effect.Morph which allows for CSS style-based effects, and its companion, the Effect.Transform shortcut to set up complex animations in a snap (while I’ve been thinking of adding this for some time now, there’s some inspiration coming from Bernie’s Better Animation Class).

Let’s look at how Effect.Morph is used:

1
2
3

new Effect.Morph('error_message',{
  style:'border-width:3px; font-size:15pt; color:#f00'
});

This will start an effect to morph the div element with id error_message smoothly from whatever border-width currently is set, whatever font-size is set (note the currently set font-size must have the same unit, in this case pt), and whatever color is set to the given new values. Because Effect.Morph queries the original values with Prototype’s Element.getStyle API, it doesn’t matter whether these styles are set inline or in an external stylesheet definition. Of course the effect supports all usual options, like duration or transition.

It internally uses a new addition to the String API in script.aculo.us 1.7, that is String.prototype.parseStyle. This method is smart about how to parse CSS style properties correctly. For example, it will automatically parse a ‘border-width’ property to be split up in ‘border-left-width’, ‘border-top-width’ and so on. This allows you to use styles freely as you do in everyday CSS files.

But! Prototype and script.aculo.us are about making development easier, having less stuff to type and think about, and handle common cases with the utmost niceness:

$('error_message').morph('font-size:15pt; color:#f00');

.morph() ia automatically available for all elements. It takes an optional second argument, an object that’s given to the generated Effect.Morph. You can use this to chain morph effects, like this:

$('blah').morph('background:#800').morph('background:#fff',{delay:3});

Effect.Transform is a helper that doesn’t generate a normal effect, but stores a more complex set of Effect.Morph effects to be generated when called upon.

Let’s see an example of how this works:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

// define the Effect.Transform and store for later
var transformation = new Effect.Transform([
  { 'div.morphing': // divs with CSS class 'morphing'
      'font-size:20px;padding-left:40em;opacity:0.5' },
  { 'error_message': // or '#error_message'
      'width:480px;border-width:10px;' + 
      'border-right-width:20px;' +
      'margin:20px;margin-bottom:-20px;' +
      'font-size:30px;' +
      'background:#954' }
],{ duration: 1.3 });

// sometime later
transformation.play();

Effect.Transform takes an array of tracks, which are defined in a ‘identifier or CSS selector’: ‘style’ syntax, and generates Effect.Morph effects when you call the play() method. You can also add additional tracks later on, which the addTracks() method.

Notably, you can use DOM object ids or CSS selectors to choose which elements should be acted upon—which means that at any given time you call play(), Effect.Transform will automatically choose the correct elements for the effects, given on these rules. Also, you can an Effect.Transform when none of the referenced elements are already rendered—as long as they are there when you actually call play().

If you need a complex one-shot effect, you can also do this:

1
2
3
4
5
6
7
8
9

// one-shot transformation
// shrink and fade info messages, 
// highlight error messages
new Effect.Transform([
  { '#messages li.info':
      'font-size:1px;height:0px;opacity:0' },
  { '#messages li.error':
      'font-size:12px;background:#fee;color:#f00' }
],{ duration: 1.3 }).play();

The 1.7 beta version also contains the newest Prototype 1.5.0_rc2 library, fresh from SVN, which fixes lots of things here and there.

With your help (beta testing gives good karma!) we can hopefully sort any bugs out and have this released soon (maybe as an Xmas present?)!

So, get started by downloading from SVN, or use this link to get 1.7.0 beta 1. If you use Ruby on Rails, be sure to grab edge Rails, or the 1-2-prerelease branch, which both include the beta.

script.aculo.us 1.7 beta demos

Go to the main blog entry on the script.aculo.us 1.7 beta.

Element.morph

How easy is that?

$('morph_example').morph('background:#080;color:#fff');

Element.morph demo

Effect.Morph

Effect.Morph

1
2
3
4
5
6
7
8
9

new Effect.Morph('error_message',{
  style:'background:#f00; color:#fff;'+
    'border: 20px solid #f88; font-size:2em',
  duration:0.8
});

// same thing with Element morph is
$('error_message').morph('background:#f00; color:#fff;'+
  'border: 20px solid #f88; font-size:2em',{duration:0.8});

Effect.Morph demo
Reset

Effect.Transform

• First info message
• Second info message
• First error message
• Third info message
• Second error message

1
2
3
4
5
6

new Effect.Transform([
  { "#messages li.info":
      "font-size:1px;line-height:0px;height:0px;opacity:0;padding:0px" },
  { "#messages li.error":
      "font-size:15px;background:#f00;color:#fff" }
],{ duration: 0.6 }).play();

Run Effect.Transform one-shot demo