Enterprise Guts slides up, with CSS animations

I just realized that I didn't post the final version of my slides from my talk at ZendCon, but now I have: Digging Through the Guts of Enterprise PHP. However, they will only work in Safari, since I hacked CSS transitions into S5. Different builds of WebKit (and different releases of Safari) will have varying degrees of support for everything used in there (sliding, fading, and flipping). For the talk itself, I ended up having to go back a couple of weeks in the WebKit builds, since they broke a few things... Part of the fun of using experimental technology in a nightly build, though.

As a bonus, this means that the slides (mostly) work in the iPhone/iPod Touch version of Safari:

Due to how S5 triggers moving to the next slide, you just need to bring up the control bar at the bottom so you can tap on the arrows to move forward. In the last bit there, the animation of two simultaneous transforms, flipping the slides around, caused what we software engineers refer to as a "rendering freak out" followed by mobile Safari freezing up. All in due time!

S5 with CSS Slide Transitions in WebKit

So, in an effort to have the ability to post my slides for my Zend/PHP Conference talk online without having to rely on Flash or typically awkward HTML exports from other formats, I've decided to go with S5, as mentioned previously. I've also decided to add a little of WebKit's recent additions of CSS transforms and animation support for transitions.

Since CSS CSS animation only occurs when attributes change, it just means that the current and next slides need to have the changes applied at different times, or at the same time, depending. To make managing these things easier, I started with a base object:

function Transition() { }
Transition.prototype = {
 "duration" : 1,
 "cslide" : null,
 "nslide" : null,
 "transition" : function(toggle) {
  this.cslide.style.WebkitTransition =
   this.nslide.style.WebkitTransition =
    (toggle
     ? 'all ' + this.duration + 's ease-in-out'
     : 'all 0s none');
 },
 "prepare" : function() { },
 "perform" : function() { },
 "cleanup" : function() { },
 "run" : function(cid, nid) {
  this.cslide = document.getElementById(cid);
  this.nslide = document.getElementById(nid);
  this.cslide.style.visibility = this.nslide.style.visibility = 'visible';
  this.transition(false);
  this.prepare();
  var dis = this;
  setTimeout(function() {
   dis.transition(true);
   setTimeout(function() { dis.perform.apply(dis); }, 0);
  }, 0);
  setTimeout(function() {
   dis.transition(false);
   dis.cslide.style.visibility = 'hidden';
   dis.cleanup.apply(dis);
  }, dis.duration * 1000);
 }
}

The code managing the switch of the slides now calls RunTransition(transitions[snum], cid, nid);, where transitions just holds an array of constructor references corresponding to the slide numbers (snum):

var transitions = [
 null,
 Fade,
 Wipe,
 Rotate,
 Rotate,
 Fade
]

function RunTransition(className, cid, nid) {
 var trans = new className();
 trans.run.call(trans, cid, nid);
}

Each transition just extends Transition and overrides the applicable methods in order to change the slide CSS properties at the correct time, like this Fade transition:

function Fade() { }
Fade.prototype = new Transition;
Fade.prototype.prepare = function() {
 this.cslide.style.opacity = '1';
 this.nslide.style.opacity = '0';
}
Fade.prototype.perform = function() {
 this.cslide.style.opacity = '0';
 this.nslide.style.opacity = '1';
}

I've uploaded a very quick demo of the transitions in action, which will work in whichever builds of WebKit support CSS transforms and animation. It worked a bit smoother in WebKit builds a few weeks ago than those current (bugs galore at the moment), but nightly builds always tend introduce unpredictable behavior.

Update (1/25): Between fixes in the WebKit trunk since this post, and fixes in my code (with many thanks to smfr in comments and on the bug itself), all of the transitions work in the current Webkit nightly! From my final note, just in case anyone else has issues with transforms when used with transformations:

"If you set the WebkitTransform using just matrix() in the first step, then set the WebkitTransition, then set the WebkitTransform using both matrix and scale, it (reasonably) will not apply the transformation. When I set both both functions for the start and end styles, it works beautifully."

Books to give away during my ZendCon08 talk!

In order to bribe more people to attend my talk at ZendCon08, my publisher has sent me three copies of my book to give away! I haven't quite figured out how to dole them out yet, or even have any idea how many people will attend the talk and want a copy, but I'll figure something out.

I think for the talk, I'll use a modified S5 theme I have in-progress using Safari's new CSS transforms and animation support for transitions. I'll post some examples of that as I make it ready for the talk, since I can't really post the content of my talk until I get the go-ahead from those who give it at IBM. The talk centers around looking at source code from work, and I'd rather not upset IBM's Higher Powers by exposing even part of the product without explicit permission...

Proposal accepted for ZendCon08

My proposal "Digging Through the Guts of Enterprise PHP: A Case Study," which looks at PHP usage, techniques, and features as used at my day job at IBM, got accepted for the Zend/PHP Conference and EXPO 2008!

An exploration of the features of PHP used in the Ajax-driven user interface of IBM Rational Build Forge, with a focus on inheritance, interfaces, and Iterators. This talk will demonstrate how we built its user interface on a solid foundation of PHP.

I submitted it shortly after the call for papers opened up and this year, I got in. I've never spoken at a conference before, but it'll at least make for an interesting (and hopefully even successful) experience.