satine.org

So, was John Gruber right? This is what I found while browsing the new iTunes Store (cool stuff, btw!):

User-Agent: iTunes/9.0 (Macintosh; Intel Mac OS X 10.5.8) AppleWebKit/531.9

Survey says: Yes.

It’s important to understand that iTunes is only using WebKit to render the iTunes Store and iTunes LP. The rest of the iTunes UI still remains native in Carbon.

Previous versions of iTunes had a custom native UI for viewing the iTunes Store and were definitely not WebKit based prior to iTunes 9.

Technorati Tags: Apple, iTunes, WebKit

What is Snow Stack?

A new 3D CSS Visual Effects demo using pure HTML, WebKit’s 3D CSS Effects extensions and JavaScript.

You can now see Snow Stack’s live demo if you have Snow Leopard and Safari. On Leopard, you can use WebKit nightly build 45754 or later for a slightly slower experience.

Instructions

Click here to open the Snow Stack live demo. Arrow keys to move, “Space” to toggle magnify mode. Mouse click on an image to view on Flickr. You need to “right arrow” on the right wall to get more photos loaded in.

Many thanks to Simon Fraser for his help with performance profiling Snow Stack.

And yes, OS X Leopard with WebKit nightly will also do accelerated 3D transforms now, just like iPhone Safari.

Implementation Notes

• Larger images load in after 2 seconds for high quality zoomed images.
• State changes are handled via CSS.
• Reflections use CSS masks instead of a Canvas draw (standard box reflections don’t quite work yet).
• Reflections sit on a scaleY(-1.0) coordinate system and are tracked independently, which is surprisingly easy.
• This demo pushed a few performance limits and currently avoids drawing and animating a drop shadow and border.
• Animating transforms with a transform list must have only 1 function to animate in hardware.
• Snow Stack’s 3D transforms, transform and opacity animations all run on the GPU. Layout and networked image loading happens on the CPU.
• Key states are tracked manually (timers handle keyboard delay and repeats) so a smooth motion can be achieved when the keys are held down.
• Cell sizes are chosen at initial window load time and don’t change on window resize, although the origin does. It’s rather slow, however, so I may end up changing that.
• The computedStyle transform matrix is used to calculate how far away the dolly is from the target image, which is then used to assign a scaled rotation to the “camera”. Ideally, this might be done a different way, but the results are pretty good, and fast.
• To give you a sense of the effort involved, this demo was written over 3 days, a few hours each evening.
• Snow Stack’s source code is now available from the CSS-VFX project.

Other CSS Visual Effects Demos

• CoverFlow for Safari on iPhone
• HTML5 Video Reflections

Updates and iPhone Apps

• Snow Stack’s source code (with examples on how to use your own images) is now available from the CSS-VFX project.
• I also work on iPhone apps in my spare time, if you have a moment, please check out my iPhone app, iRhyme, a song writer’s rhyming dictionary.
• The song in the video (a surprisingly frequent question) is Ratatat – “Beat 1” from their demo album “9 Beats”

Technorati Tags: WebKit, Snow Leopard, Leopard, Mac OS X, graphics, 3D, CSS Effects, HTML, JavaScript

Why are building browsers in vogue again?

Quite simply, a browser renaissance, started with WebKit, a small and flexible open source code base that used less memory and power, and kicked ass at rendering the Web.

WebKit is really helping folks easily create and extend browsers with its very flexible and understandable code base. It’s truly the Linux renaissance again, driving innovation, and place browsers where they were difficult or impossible to put before. And WebKit’s rivals didn’t sit still, they’re also kicking ass at an insane clip, and we, the users and developers, benefit.

Great hardware needs great software.

The browser is really your OS now – your apps live and run there, and you want them to run well. The browser experience matters again. That’s why Apple is here, making a great browser to sell with their hardware. Google, Nokia, HTC, Palm and many others are here for the same reason.

Closely related to this activity are pure browser vendors like Opera, selling a quality mobile web browser to hardware OEMs that don’t have the time to make their own. This is also Mozilla’s goal with Fennec.

A flashier World Wide Web.

• Flash: Adobe needs to protect its dominance on the desktop Web interactive media experience. Adobe also wants to duplicate Flash’s success in mobile.
• CSS Visual Effects: Apple is tired of Flash’s slow pace of innovation, performance and constant crashing on Mac OS X. Steve and Bertrand’s insurance policy. And why the hell not when you make stuff like Quartz, Core Animation, QuickTime X, and iPhones.
• Silverlight: Microsoft builds their own browser, why not their own Flash?
• HTML5 Video: Everyone doesn’t want all video to go through a Flash plugin. Plus, cool video reflections!

What your high tech company should think about.

• If you make consumer hardware products, having a great browser will be a key strategic factor to having great applications, user experience, and long-term extensibility.

• If you make consumer facing applications, browsers now offer the best user interface framework “toolkit”. There are only very few reasons to use or build a custom UI framework today, primarily availability and performance.

• If you make pure web applications already, targeting these modern browsers now makes sense, the most desirable consumers now have these types of browsers, and the market share continues to climb.

• If you make or use software frameworks, innovations in the browser wars have yielded some amazing technology that you should be taking advantage of. The 3 JavaScript engines, WebKit Nitro, V8, and Mozilla TraceMonkey now are starting to surpass other dynamic languages in performance and other languages are starting to play catch up.

• If you are Google, I’d do this.

While we’re talking about JavaScript …

• Distributing computation work to browsers is a new frontier. Imagine offloading your search indexing or database indexing to visiting users. Having compute clusters will lower the cost of building large scale distributed services in the near future. Today’s primary barrier for this is bandwidth consumption (distributed applications still have large amounts of I/O) but it will work today for certain applications.

• JavaScript as a server-side language also makes great sense long-term, where code passes seamlessly between servers and clients. Today’s primary barrier for this is mature system libraries and standards for JavaScript, but there are already great companies working on this, and the concept is far from new. (too many links to share here)

Food for thought …

Thanks to Om Malik for the inspiration to write this post. The one question I wish I had a better answer for is: “Why does Apple have Safari on Windows?” I believe the answer may be something more than, “oh hell no, Google ain’t gonna release no WebKit browser on Windows before we do…” (rewind to June 2007) but what the actual answer is, we may not know for some time.

Updates: Corrected that TraceMonkey is the Mozilla JS engine, not Tamarin. Thanks Dirkjan!

Technorati Tags: WebKit, HTML5, JavaScript, Browsers, Mozilla, Opera, Apple, Google, Palm, Nokia, RIM, OHA, Kitchen Sink, Linux, Flash, Silverlight, Microsoft