satine.org

by Charles Ying

A Kick Ass Browser Renaissance

July 5th, 2009

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: , , , , , , , , , , , , , , , ,

Safari 4 CSS Video Effects

June 4th, 2009

Safari 4 Video

If you have a recent browser build of WebKit nightly, you’re going to love this movie trailers demo I’ve been hacking on. Click on the image above, select a movie trailer, and check out Safari 4’s video reflections using CSS Effects. Recent WebKit nightlies with the latest QuickTime installed give the best experience, with flawless transitioned video reflections. Safari 4 Beta also provides a decent experience, but doesn’t transition reflections.

What you are seeing is:

  • A WebKit reflection applied to a HTML5 video tag. It’s also just 1 line of CSS, and the same reflection is applied to the movie poster thumbnails as well:

-webkit-box-reflect: below 1 -webkit-gradient(linear, left top, left bottom, color-stop(0.5, transparent), color-stop(1.0, rgba(255, 255, 255, 0.5)));

  • HTML5 video events, “loadstart” and “finished” which then change the page state.

  • CSS Transitions handle all of the animation, so my code simply adds and removes the “darker” class to make the text and the movie thumbnails fade out while the video is playing. Things like stopping the video before it fully fades in just works.

Up until Safari 4, video reflections had not been working very smoothly. But times sure have changed.

I should note that video reflections are really tough to do, especially in a web browser. Flash makes it somewhat possible, but not easy, and certainly not as fast as what you see here. And I hope this example gives you a taste of what a cinematic user experience might look like in a web browser.

You may also be interested in my post on CSS CoverFlow, complete with snapping, physics, and perspective correct 3D.

Technorati Tags: , , , , ,

iRhyme – A NLP Rhyming Dictionary for iPhone

March 30th, 2009

I have always been frustrated with writing song lyrics. Almost all my songs have been instrumental, except for one, which had terrible lyrics and took forever to write.

Before starting PixVerse, I prototyped a NLP lyric writing helper with a markov-chain language model. Sadly, it didn’t seem to offer much practical help when I actually tried to write some lyrics with it. Back on the shelf it went, until recently.

I came back to song writing, but this time on iPhone. I changed the goal to be: “A rhyming dictionary that works really well for songwriters.”

I looked at the existing rhyming dictionaries on the web and iPhone. A lot of them really don’t work well – you get all these words that don’t really fit thematically with what you’re trying to write. No soul, just obscure terms that happen to rhyme.

So it was time for a new approach: Use a lot of interesting data and simple algorithms.

iRhyme constructs its rhymes database from a simple natural language analysis of a very large song archive (corpus). Think of iRhyme as the collective knowledge of songs and songwriters condensed into a 16 MB iPhone app. Most of the effort went into packing all those rhymes in a easily retrievable format.

It was very cool to see the results of the analysis. With some tweaks, iRhyme had linked over 1.5 million relevant words and rhymes together, with some pretty canny free-associative rhymes emerging from the data. iRhyme has over 50,000 unique words, all used in real songs.

For now, you can buy iRhyme for $0.99 on iPhone. It’s a pretty good value compared to the cost of an “old world” printed 100,000 entry rhyming dictionary. iRhyme also fits better in your pocket (the entire database is stored locally).

I am also currently working on upgrading iRhyme’s database, increasing iRhyme’s depth even further, which will part of an upgrade once I can figure out how to pack all the new data into the 10MB over-the-air App Store limit.

iRhyme is available from getirhyme.com or directly from the App Store.

Technorati Tags: , , , ,