WebKit CSS Animation behavior weirdness

Okay, not weirdness. I guess more like (up until now) undocumented behavior. Due to a workaround that I needed to implement in order to properly clear out CSS properties when starting a new transition in my hacked-out S5 presentation, I filed Bug 23528: CSS transitions on opacity fail when used with visibility in certain circumstances.

When performing a transition, I had expected that a function like the following (simplified for demonstration) would work:

/**
 * 1. take the element,
 * 2. make it visible,
 * 3. yet transparent,
 * 4. then set the transition,
 * 5. and then have it fade from opacity of 0 to 1 over one second.
 */
function fadeIn() {
    // <span id="one" style="visibility: hidden;">testing</span>
    var theOne = document.getElementById("one");
    theOne.style.visibility = "visible";
    theOne.style.opacity = 0;
    theOne.style.WebkitTransition = "all 1s ease-in-out";
    theOne.style.opacity = 1;
}

Instead of fading in over one second, the span instantly appears, as if the last three lines of the function didn't even exist. This happens because CSS changes don't take effect when you assign new values. They queue up, taking effect once the JavaScript thread of execution ends. This makes sense for static changes, so that if you have a whole load of changes to apply to the DOM where many of the changes end up canceling out by the time the thread ends, the browser has no reason to apply each one of them to the DOM just in order to remove the change in the end. It also makes sense in a pure performance sense, since this keeps the JavaScript execution moving along at a nice, steady pace, rather than having to wait for the DOM to apply the change before moving on to the next step in the process.

Unfortunately for the code example above, it means that since the DOM node starts out completely opaque, the last three lines of the fadeIn function do effectively fall off and the span simply becomes visible. In order to get around this, the last couple of lines have to run on a different JavaScript "thread" so that it splits up the batched DOM changes into two parts and the node properly fades in:

function fadeIn() {
    // <span id="one" style="visibility: hidden;">testing</span>
    var theOne = document.getElementById("one");
    theOne.style.visibility = "visible";
    theOne.style.opacity = 0;
    setTimeout(function() {
        theOne.style.WebkitTransition = "all 1s ease-in-out";
        theOne.style.opacity = 1;
    }, 0);
}

Macworld

Anyone heading to Macworld this week, should feel free to swing by booth 3418 in the North Hall and say hello! I attend in order to demo and talk about IBM Rational Build Forge to and with anyone interested. It may seem like an odd thing to demo at Macworld, but I have prepared things especially for showing off in MacOS 10.5, which I use on both my own personal machine and my work machine.

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!

OLPC G1G1

Having taken part in the first round of OLPC's G1G1, I can definitely say that these things make fantastic ultra-portable machines. Since they run Redhat-based Linux (which you can of course replace with Debian if you prefer, or just replace the UI), you can easily install everything from FreeDoom to Apache HTTPD Server. In short order, I installed subversion, Apache HTTPD Server, PHP5, and MySQL (Vim and SSH come preinstalled). Since they designed these things for kids to carry to school through everything from rain storms to sand storms, they'll out-rugged anything else even remotely like it.

Or, you can give it to someone you know who can get use out of the myriad of Activities it includes for kids to learn everything from reading and writing to programming to music.

Either way, Go give one.

Opera may have just found what it needed

Today, the Opera Desktop Team and Jon Hicks both announced Jon's joining Opera as Senior Designer! This comes as very exciting news to someone who has had to continually add "...and Opera." to many browser discussions here in the States, even among fellow developers.

Jon's biggest challenge (and advantage) will, in my opinion, come in the form of making Opera approachable and continually usable to new users, without hiding its power from them. I definitely wish the both of them the best of luck, and eagerly wait to see what happens next.

Power Failure + Road Trip = Fail

Well, that sucked. Back on a normal hosting service...backup power supplies work much better when outages only last a matter of seconds.

Google launching open source browser based on WebKit?

No idea whether this theory holds any water, but given the recent speculation hitting...everywhere, I checked http://code.google.com/p/chrome/ and found a login screen (quickly followed by a permission denied error), rather than a Not Found error for a project that doesn't exist.

Wondering what this will bring to WebKit that Safari doesn't (aside from Gears and even-more-targeted advertising), but I guess we'll see soon enough.

Edited to add: the more I read about this, the more it looks like they ported a bunch of features from Opera (tabs above window chrome, long-running scripts' threads not killing your browser, Speed Dial-like default page, etc.) to a WebKit-based browser with what sounds like XUL for the window chrome itself. I guess tomorrow we'll find out for sure, but it seems a bit odd that an open source project would outright deny access to the public before launch, and distribute the info under the most closed-minded CC license available (feel free to share it, just don't touch it, don't charge for it, and you'd better tell people who made it). I suppose after the recent Android SDK excitement, this still makes a decent step forward, but still. I guess so long as it takes market share away from IE, I shouldn't complain too much.

Target to pay out $6M and have quarterly/annual accessibility tests

Found via Glenda the Good, this marks a huge milestone in moving from infrequently enforced laws regarding government sites to making sites and web applications of private entities accessible to the general public.

"As part of the settlement, Target will establish a $6 million fund from which members of the California settlement class can make claims. In addition, the National Federation of the Blind will certify the Target Web site through its Nonvisual Accessibility Web Certification program once agreed upon improvements are completed in early 2009. Target and NFB have agreed to a three-year relationship during which NFB will perform accessibility testing of the Target Web site. For more information about the terms of the settlement, please visit www.nfbtargetlawsuit.com."

The $6,000,000 fund doled out to those who file claims will draw attention to this, but to me the (comparatively) rapid compliance and ongoing tests make this worthwhile. Target won't just throw money at the issue, but will make its site accessible to those using assistive technologies, and maintain that for at least three years following!

I couldn't resist one named "Tendrils"

While setting up the most recent addition to the house (my wife's new hi-res 17" MacBook Pro), I had a little time during Windows' installation into its VMWare image, so I took a look through some more of the visualizations. I saw this one, and ported it to JavaScript, adding a few lines to animate it:

I recommend sticking to a low number of tendrils (especially in Opera, which gets choppy rather quickly), or the non-animated version.

Based on Tendrils, Created by Tom De Smedt (which Tom based on the "Tendrils" algorithm by ART+COM).

Fun with visualizations

Looking through MacResearch, I saw NodeBox, "...a Mac OS X application that lets you create 2D visuals (static, animated or interactive) using Python programming code and export them as a PDF or a QuickTime movie." A bit of a hobbyist math geek, I checked it out a bit and realized that a lot of the Python source code used with NodeBox looks rather similar to JavaScript interacting with the canvas HTML5 element.

So I took a few and wrote a quick library to behave similarly to NodeBox, albeit for JavaScript to run in a browser. I just looked at the parametric equation examples for something easy to start off with, and wrote a few examples. The first, extremely simple example more or less just draws a circle within certain bounds:

function CircleEquation(dt, steps, r) {
 Frozen.Chart.Equation.call(this, steps, dt);
 this.r = r;
}
CircleEquation.prototype = new Frozen.Chart.Equation;
CircleEquation.prototype.next = function() {
 this.x = Math.cos(this.t) * this.r;
 this.y = Math.sin(this.t) * this.r;
 return Frozen.Chart.Equation.prototype.next.apply(this);
};

function circleTest1() {
 chart.clear();
 chart.map.lineWidth = 0.5;
 chart.renderEquation(new CircleEquation(4.5, 75, 95));
}

This results in the following visualization:

You can see it in action, along with a couple of slightly more interesting examples. NodeBox can do a lot more than simple charting, this part of its functionality just inspired a fun exercise in web+math geekery.

Heading to Google I/O at the end of the month

As an added benefit of living in the Bay Area again, I get much easier access to many of the conferences and events that go on around Ajax/RIAs/etc. May 28-29, I'll take BART into the city in order to attend Google I/O, which looks extremely interesting. Somehow, in the short two days, I need to find my way to the sessions on design patterns, performance, HTML5, open source, and chase down some of the speakers and fellow developers to pick their brains for a bit. Fun!

History meme

Indirectly tagged by Arve Bersvendsen's entry.

wollstonecraft:~ shawn$ history | awk '{a[$2]++ } END{for(i in a){print a[i] " " i}}'|sort -rn|head
85 screen
52 ssh
50 ls
44 vi
39 cd
36 svn
25 ping
20 telnet
16 cp
14 mv

I guess I reattach my screen session a lot. The telnet calls probably stem from checking the server once I got it up and running again, since the router had some issues letting everyone through for a while.

No place like 67.102.65.250

I haven't posted in a while, partly to figure out the details of, and then execute a move from Austin, TX to Oakland, CA. It made for a hell of a trip, but a successful one nonetheless. I still have my job with IBM, now working remotely and officially from my home office. From my desk chair, I can see the loading docks of the bay in the distance, and have already timed the trip from my favorite peanut sauce source to the house at a mere 15 minutes (with light traffic)!

The site(s) and email(s) went down during the move partly because of DNS issues that resulted in utter failure to move to the temporary hosting service, and partly because so much came up that needed handling in the last couple of weeks that I just had too many higher priority things to do. Speaking of which...back to unpacking!

Vienna + PHP (source code) + iUI

Source posted! BSD License. From the README:

You'll need to do a few things to get this working:

1. Move the extracted vienna directory to /Library/WebServer/Documents
2. Download iUI (http://code.google.com/p/iui/) and put the main iui directory into the extracted vienna/ directory
3a. Setup a cron job to copy ~/Library/Application Support/Vienna/messages.db to the extracted vienna/ directory
3b. For the adventurous: mv ~/Library/Application Support/Vienna/messages.db to the extracted vienna/ directory and sym-link it back to ~/Library/Application Support/Vienna/
4. Make sure to enable web sharing
5. Go to (your computer's name).local/vienna

Vienna + PHP + iUI

So, sick of not having the ability to feed my XML addiction when away from my machine, I took an hour this morning and hacked together a quick'n'dirty iPhone/iPod Touch UI for my Vienna database using MacOS 10.5's standard PHP (with SQLite PDO), iui, and my Vienna database (stored in sqlite3). I gave it read-only access to the database, partly so I wouldn't have to worry about screwing it up, partly because I didn't feel like bothering just yet. I just need to add a "Mark Read" button to make an Ajax call.

I'll ask the Vienna devs if they'd like a copy of the source to toy with and generally improve, since I blatantly stole reused Joe Hewitt's design and markup for iui-enabled Digg.

Note: though my uploaded demo does pull from a copied Vienna database, it does not pull from a live one, since I wrote the code to run on a desktop MacOS 10.5 machine and not a Linux server. I then just made a bookmark on my iPod Touch to my iMac on the local network.

Othello for iPhone/iPod Touch posted in Apple's Web Apps

Just saw this morning that it went up yesterday.

Othello for iPhone/iPod Touch

Since I woke up early today for some unknown reason and couldn't fall back asleep...I took fifteen minutes and made a game of Othello that I wrote ages (okay, six or seven years) ago in JavaScript ready for the iPhone and iPod Touch, since I now have the latter. It may not adhere exactly to the rules of the game when someone runs out of moves, but I wrote it from my memory of the game and not a rulesheet.

It doesn't have different levels of game play, or a polished look, or score saving, or anything like that. But it comes in a very small package and works just fine when not connected to a network. Basically, I only stripped out unnecessary markup, fixed the width to something friendly with the iPhone/iPod Touch's vertical orientation, and made it a single file under 5k (not counting the three images, which total 238 bytes).

Net access down again

As I write this, from the conference in San Francisco, the Time Warner Cable business access has remained down for about 20 hours. After talking with customer support, it apparently only went down for a few seconds, however their hardware requires that you unplug the modem and attached router, then plug them back in, before anything will work again.

This unplugging and re-plugging gets very difficult when five hours away by jet (and about 60 hours away by planned travel).

So, here I sit and wait to hear back from someone who has the keys to the place so I can walk her through un/re-plugging the applicable boxes in the office, as I wonder why this only seems to happen when I travel...

Edited to add: finally back up. Looks like the router behind the connection went toes up for some reason...that sucked. Time Warner had a ton of outages throughout Austin when this all started, who knows why the router flipped out, though.

No properly-bound book for ZendCon, but discounts!

So the binding of the books won't happen in time for me to have one to bring with me to the Zend Conference, but I will have a bound manuscript to show off. I will also have flyers to hand out, which will give you a 35% discount on the book!

It ended up working out better for me to go out there for a few days around the conference (I arrive on the 6th), so if anybody in the Bay area feels up for a Saturday night run to any one of the many restaurants I miss in San Francisco, it would make me very happy! If not, I'll just go without you anyway, as I plan to do most of the nights that week (except, of course, the evening of Happy Hour 2.0).

Editing completed!

Unless they send something back again for additional changes, I've just sent off the last of the copy edits for the book! Next, I think I'll get PDFs of each chapter to go over the layout/presentation. Also, somewhere in this process, the book will start showing up on Amazon.com, Rough Cuts, etc.

Quick post, I know. But I just got back from a trip out to Seattle for PAX and feel quite worn out.

With more editing comes the end of the E-Prime text

Well, I kept the book E-Prime up until this part of the process, and for that I feel satisfied. I don't feel proud enough of it to think myself better than the professional copy editors at Prentice Hall, though, so here it ends. Writing the initial draft in E-Prime definitely made it easier to keep the text as relevant and clear as possible, so it definitely feels well worth it to me.

For the uninitiated, writing in E-Prime means writing in a more active, subjective voice. Developers do things. These practices achieve these results. The cornerstone of E-Prime comes in removing all conjugations of "to be" from language. Writing something like "The rendering in Figure 3 is better." doesn't explain anything about what makes it better in that context. Writing in E-Prime doesn't always come easily, but it does make it much easier to write more coherently.

At least, I told myself that as I wrote the book. Time will tell, I suppose.

Great new server, same lousy connection

I should say that for more than a year, Time Warner Cable (business class) has had a very strong, reliable connection. About a week ago, though, they had a cable cut and lost DNS for all of Texas...then took about 24 hours to fix it. Today, the connection dropped again and they immediately leapt into action and promised to send someone around on Monday to take a look at it. I politely convinced them to send someone today instead, but the connection has returned of its volition.

I took advantage of today's extended outage to switch the old server (iMac 333MHz G3 with 512M/80G) out for the new server (PowerEdge SC440 Dual Core Xeon 2.4GHz with 2G/2x250G RAID1). As long as the business line stays online, this should speed things up a bit.

Practice with the canvas tag: cellular automata

I decided to do a quick study on the canvas tag (which I'll use in the chapter on game development) before diving into the next chapter, so I ported an old PHP script that generated one-dimensional cellular automata to a JavaScript and <canvas> cellular automata display. I recommend numbers 30, 60, 182, and 225 (see Elementary Cellular Automaton on Mathworld for more, including previews of all 256 of them).

This obviously will not work in IE, and I have it defaulting to rendering them line by line so that it doesn't seize up Firefox and Safari for a few seconds (depending on which one you pick) while it draws it out. Opera displays it incredibly quickly and seems the only browser to have threaded rendering rather than locking up the browser until it finishes when drawing it all at once.

WAI-ARIA makes life much easier

I decided to re-post here my comment to the A List Apart article, Accessible Web 2.0 Applications with WAI-ARIA, as it seemed from most of the other comments that people don't really see just how much WAI-ARIA will help both developers and users.

In the current methods of adding screen reader support (see an example at Juicy Studio with excellent descriptions), it takes a lot of scripting in order to dynamically inform a screen reader that things have changed. These methods also rip the user out of whatever they’ve started reading or writing at that time, and drop their cursor wherever the change occurs. The later versions of Jaws don’t quite do that, but in order to support a broader user base, you need to do it that way...Jaws costs a lot of money for an individual to keep paying for every year.

With WAI-ARIA, this gets handled just by adding an attribute of aaa:live, and you can fully control the urgency with which the screen reader will read the updated DOM elements! This not only keeps the user in their current context, but allows “polite” live elements to wait for the user to complete their current task before the user needs to hear it. Errors and other urgent information can either user “assertive” or “rude” in the worst case scenarios.

This doesn’t even touch on some of the benefits of the other attributes available, but just the aaa:live attribute itself makes screen reader support infinitely easier to implement and much, much more flexible.

You can see some good examples on the Firevox (open source, cross platform Firefox screen reader) site.

Yes, this very new working draft has some time and work before it exists as a specification. But it needs support from developers in order to take off some of its rough edges, and for the more widely-used screen readers to start paying closer attention. WAI-ARIA can only help developers and we have every reason to help push this project forward.

Note: I edited the comment to use actual links and markup...and to fix some spelling errors.

PHP object oddity

While writing about abstraction, I realized that since $variable->$something works, why shouldn't it work when $something=42? Well, logically, because $variable->42 won't work. It triggers a "Parse error: syntax error, unexpected T_LNUMBER, expecting T_STRING or T_VARIABLE or '{' or '$'" when attempted. However...

$a=1;
$b=new stdClass;
$b->$a='a';
var_dump($b);

...results in:

object(stdClass)#1 (1) {
  ["1"]=>
  string(1) "a"
}

Which, I suppose makes sense that PHP, in its type-cast-happy wisdom, would simply make it a string key. But it does create object variables only accessible through abstracting the variable key with another variable by using $b->$a. It will also cast an array to a key of "Array" without any of the array values, and it also triggers a notice about the Array to String conversion.

Just something I did not expect...

Then again, I also didn't expect the following to work in PHP 5.2.1:

function あ() {
 $い = 'あ';
 echo $い;
}
あ();

Opera Developer Console

It figures I would find this as I wrap up the initial draft of the chapter on client-side debugging, but it makes me extremely happy to see it: Opera has started work on a Developer Console, which (among many other things) logs XMLHttpRequest calls.

The Opera Developer Community runs through some of the DOM, JavaScript, and CSS tools, and the Opera Desktop team posted about it over a month ago when they initially started putting it into their development builds.

From what I can tell by peaking at the source (since, like most Opera extensions, they wrote it in JavaScript), it looks like they made a simple wrapper object and replaced the native object (after storing a backup reference for when logging gets shut off again) in order to create hooks into each of the events so it can report everything as it happens.

This means that I can now debug XMLHttpRequest usage in more than one browser, which makes life much easier than either guessing how it went or using a standalone traffic sniffer.

Edited two minutes later to add: you can get it from the Opera Developer Tools page.

A fantastic idea!

Goodwill just opened Good Bytes Cafe in San Antonio, an internet cafe built around accessible computer/internet access. Things like this not only help those who will use them, but also people who will see it in action. Most people never think about how they would use computers if they lost their sight, or the control necessary to precisely control a mouse.

Edited 01/18/06: The article has expired, so have a link to the actual site for Good Bytes Cafe.