Programming

Facebook’s ‘A Look Back’ video is composed in CSS3

Yesterday evening when I got notification from Facebook that “A Look Back” video was ready. I decided to give it a shot. Without thinking much about it, I simply hit the play button and as video progressed I realized some of the images were half loaded. That was weird. If the video is being played then how ‘image loading’ is happening. Like any curious web developer, I took out ‘our’ Swiss Knife a.k.a. Chrome Devtools. And voilà, it was nothing but CSS3. I was completely jaw-dropped, whole video was composed in PURE CSS3 and JavaScript. Who would have thought that?

Go check yourself. Visit https://www.facebook.com/lookback, open devtools and play the video (if your video is not yet ready then you will only see tiles of images).

devtools

As you can see the DOM tree of photo tiles. Links, position and dimensions of the image are visible on the right.

scale and translate

Throughout the video scale and translate functions are primarily used to do create moving and scaling effects.

WYSIWIG

No surprise there as your statuses are treated as just another SPAN element.

Object object

Apparently code is not bug free (if you know what I mean)

Audio

Yes, song is played via audio tag. You play that song in a new tab. I have copied the link, just click here.

After some observations, I realized there is no use of transition. All the ‘easing’ related calculations are done via JavaScript and applied dynamically. That is weird for sure. I am heavily using transitions in my startup Expojure for various animations and results couldn’t be better. Even John Resig recommended to have CSS Transitions over JavaScript based animations.

But the major question remains, how whole animation sequence is converted in a video? Because when you ‘Share Your Movie’, it is nothing but a traditional video. From my understanding, it must be done using headless browser on top of which screen capturing is happening. Let us assume PhantomJS is used as a headless browser as it is the most popular one out there. PhantomJS supports screen capture. So snippet like –

var page = require('webpage').create();
page.open('http://facebook.com/lookback', function() {
  page.render(frame.png');
  phantom.exit();
});

would create a single snapshot of the page. Considering the video is shot on 60 FPS with duration of 60 seconds, about 3600 images must have been taken using screen capture. These stack of images can be converted in a video using libraries like OpenCV. Whole concept is just my assumption. Maybe the real process is different or simpler than this. I would love to know your comments on this.

It is undoubtedly some of the finest software engineering. It also makes sense, as unlike Google+, Facebook is giving you choice of photos and status you want to include in the video. So it is just storing a list of posts on the database and using that list, whole DOM animation is rendered on the servers to create a video. However I am not sure if CSS was the obvious choice but from my experience with 3DTin, obvious choice would have been Canvas API as we partly worked on WebGL based animation.

What really impressed me was, implementation of KISS Principle. Instead of creating a video editor (in Canvas API), Facebook kept everything simple and straightforward from both Developer’s and Viewer’s perspective. It lets you select the posts you want to see and the script takes care of rest of the things. From a web developer’s perspective, it is indeed a top-notch work. After all why would you build a video editor just to let users to customize their montage (which they are going forget after few months).

Kudos to Facebook’s Engineering Team. Great Work.

Kudos

Advertisements
Standard
How-To

Hacking Tikona WiFi to get WiFi access from Ubuntu

After having dreadful experience with Tikona Customer Care, this morning I registered 4th complaint of this week knowing that there won’t be answer from them nor their ‘Quack Mechanics’ will be able to solve them. So I decided to hack it. After going through various FAQs on Tikona Portal I came to know what is the configuration of it and I finally managed to connect too.

Distro which I’m using is Ubuntu 11.04.

Here are steps  –

Step 1:  

First go to ‘Network Manager’ then click on ‘Connect to Hidden Wireless Network’.

Tikona_hack_1

Step 2: 

Then you will get similar window. Give ‘Network Name’ whatever you want and select ‘Wireless Security’ as ‘WPA and WPA2 Enterprise’ as Tikona uses WPA Encryption. 

 

Tikona_hack_2

 

Step 3: 

Then it will open a New Window which will look simlar to below. You have to fill up the details as shown in the snapshot. Select ‘Authentication’ as ‘Tunneled TLS’. Select ‘Inner Authentication’ as ‘MSCHApv2’. Then you have to enter your ‘User Name’ and ‘Password’ provided by Tikona Digital Networks. Once details are filled up as shown in snapshot then hit ‘Connect’.

 

Tikona_hack-connect_to_hidden_wireless_network3

Step 4: 

After couple of seconds this Notification will appear. Then go to your browser and Normal Login Page will appear which we see while connecting via Ethernet. 

Tikona_hack_-_final
Screenshot-tikona_digital_networks_-_mozilla_firefox

 

Thats it! Happy Surfing!!

 

 

 

Standard