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

Apple iPhone Developer Program Extended

March 13th, 2009

Apple wrote to me today, letting me know that the iPhone Developer program renewal has been extended until July 11 with 60 days to renew. That hopefully should put people’s minds at ease who are worried about their programs expiring. Code onward!

Technorati Tags: , , , ,

Regarding Safari 4 Multi-Touch UI and Netbooks

March 9th, 2009

iPhone Safari and Safari 4 comparison

Something is odd about Safari 4’s user interface. Daring Fireball summarized many of the concerns around the tabs layout.

But I think Apple’s designers had a secret design criteria for Safari 4: Multi-Touch.

Apple is known for their minimialism and attention to detail. And a few things about the Safari 4 interface only make sense with this new criteria:

  • A Moved Close Tab – Close Tab buttons now sit on top of the address and search bars – and further away from the bookmarks bar. Accidental touches will only activate the address or search bars, instead of activating a bookmark.
  • A Modified Reload – Reload now matches iPhone’s Reload. Visually, this is a much harder thing to mouse click with, but makes perfect sense to someone familiar with a multi-touch interface.
  • A New New Tab – Safari has gained a button. New Tab. Why? Well, there used to be no way to get a new tab opened without a keyboard or menu (we use ऎ-T), also the reason why iPhone added a button here.
  • A New New Bookmark – Minimalists adding another button? Why? Again, same reason here. No way to add a new bookmark without a keyboard or menu.

I’m guessing that multi-touch user interactions are more positionally accurate (which is why Safari 4’s reduced hit area for “drag window around” works in a multi-touch scenario) due to direct user manipulation. That might explain some of the slight inconveniences Apple is making to pursue a unified multi-touch but full computing interface.

I don’t know if Apple’s Netbook will run full Mac OS X, but I’m pretty sure that Safari 4’s user interface will at least be consistent:

Multi-Touch Netbook

Technorati Tags: , ,

Safari 4 Public Beta

February 24th, 2009

Safari 4 has entered public beta. It’s blazingly fast (unless you’re using WebKit nightlies already) and has tons of features, even outside of the WebKit core.

Apple’s press release

Some additional notes:

  • The Safari 4 Welcome animation is done in HTML5 and CSS Animation. It’s not a video. (Well the compass is) But still very sexy.
  • I swiped the welcome animation audio and placed it in this post.
  • The Top Sites feature is slick. Those curved preview surfaces are just not ready to be done in CSS Effects.
  • CSS Transforms 3D is not available in this public beta.
  • Tabs are placed on top. It’s a little harder to drag them around for me when re-arranging, but see if you like them better.
  • Safari 4 does not use 1 process per tab contrary to other news reports.

On Google Chrome Lite

February 19th, 2009

Elaborating on what I wrote (originally for a blog post) in ReadWriteWeb’s Google I/O contest:

In 2009, Google should embed Google Chrome into Google Toolbar, which has a HUGE install base. This would be a huge driver to accelerate Google’s web platform, convert more folks over to a modern browser experience. Imagine a Chrome “Lite” running inside Toolbar inside IE, billed as a “web accelerator”.

I should be clear: Only Google knows how many people have installed Google Toolbar. Even so, I suspect it’s a large number, placing Toolbar on Google’s homepage and paying to 3rd parties like Adobe to bundle Google Toolbar. Google is also very secretive about this number, so it’s got to be either really large, or really small.

Can you imagine what the world would be like if one day most IE users turned into Google Chrome users? Web standards, fast WebKit goodness everywhere.

A web developer can only dream.

Technorati Tags: , , , ,

Google will be Real Time in 2010

February 17th, 2009

A few days after Thanksgiving 2010 actually, with 4 months margin of error.

I just read Greg Linden’s notes on Google Fellow Jeff Dean’s keynote at WSDM 2009.

Follow my wonderfully flawless math here:

  • Google took 10 years to drop their index update latency by a factor of x10000 – from several months to “minutes”.
  • Google’s current update latency is “in minutes”. We’ll assume the worst case of 30 minutes (otherwise Jeff might’ve said “under an hour”)
  • Assuming linear trends, Google reaches the next speed factor every 8.7 hours.
  • If you define “real-time web” as updating once per second, Google will achieve real-time search in 657 days, a little less than 2 years.
  • 657 days from Feb 10, 2009 (when Jeff gave his talk) is:
  • November 29, 2010.

Google does not fear the Real-Time Web.

Technorati Tags: , , , , , , ,

Google App Engine Adding XMPP and Background Tasks

February 6th, 2009

Google updated the App Engine roadmap this evening with huge news! XMPP, inbound / outbound email, and background tasks are coming to Google App Engine this year!

With these additions, a ton of new application possibilities open up! For example:

Instant Messaging, Real-Time Applications

XMPP opens the door to IM applications, and any applications that benefit from real-time updates (more so than just simple polling)

Micro-blogging, Email automatons

Inbound and outbound email opens the door to complete micro-blogging applications like Twitter and Jaiku as well as all sorts of email based automaton systems.

Game Simulation and Calendaring

Scheduled tasks and background processing open the door to persistent game state simulation, alerts, and calendaring. (for example… or maybe you just want to send reminders to pick up the milk)

Pretty cool stuff! Things are definitely going to heat up in 2009!

Technorati Tags: , , ,

Offline Processing Coming to Google App Engine

January 27th, 2009

If you look carefully at the Google I/O 2009 sessions page, you’ll see this session listed:

Offline processing on App Engine: a look ahead

App Engine was designed to run request-driven web applications, although this will change in the coming year with the release of a number of offline computing components. In this session, we’ll explore the task queue/executor model of computation and some of the more interesting applications.

While I am under NDA with the App Engine team for some things, this was quite an unexpected thing to look forward to!

A lot of applications can benefit from offline processing components; from message queue processing to game simulation.

In other words: Games, Instant messaging, and Micro messaging types of applications will be possible with App Engine sometime during this year (which is not to say necessarily launching at Google I/O). 2009’s going to be very interesting.

Technorati Tags: , , , ,

A New WhiteHouse.gov

January 20th, 2009

A New www.WhiteHouse.gov

Welcome to the White House

Taken at 12:01 AM Eastern Standard Time, January 20, 2009.

Technorati Tags: , ,