Insight into Google’s Input / Output machine

Google has just updated its Google I/O site with details about the 2012 edition of the event. Registration for the event opens on March 27th (If I remember correctly, the tickets for Google I/O 2011 were sold out in less than an hour. Good luck for those looking forward for the tickets.). Like the 2011 edition, this year also Google has added some cool stuff on its site. Google I/O 2011 site had an awesome countdown timer (Chrome experiment) which was counting down to start of the event. The brilliant designers at Google have taken it a step further and have built a game called “Input/Output” to play-with till the event. This game is again a Chrome experiment and I am really impressed with it. I played with it for couple of hours and this post is an (unofficial) insight into some of the technologies used in this experiment.

About “Input / Output machine”

The objective of the game is simple: use the tools and machine parts to create a Rube Goldberg-inspired machine that moves a particle from the <input> to the </output>. It looks simple but, believe me, it is very addictive. Its the New Angry Birds!! Once you get going with the machine, you can just unleash your creativity and build some creative ones. Also, Google has promised that some of your creations could be featured at Google I/O 2012. Build your machine and share it on Google+ using #io12.

Technologies used

The JavaScript code which is the backbone of this whole experiment is not obfuscated, fortunately. That made it easier for me to dig through what is going behind the scene. The whole experiment seems to be heavily dependent on Canvas rendering. HTML5 canvas element is very powerful but it is very difficult to work with when it comes to handling user interactions. Easel.js is a neat solution to this problem – It allows you to retain a full hierarchy of display objects rendered on the canvas and enable interaction on them. (If you have seen the cool charts on Google Zeitgest 2011 site, that was also built using Easel.js). Every tool on the toolbox is rendered as a display object onto the board and then the necessary event handlers are added to facilitate the positioning of the tool on the board.

For calculating the motion of the particle and transforming the particle, JavaScript library “Slyvester – Vector and Matrix Math for JavaScript” has been used. Another interesting JavaScript library used is “Stativus : StateCharts” which is a micro framework for maintaining state charts of an application. Apart from these, there are few utility libraries like “Underscore.js”, “jQuery Easing”, etc being used. All the aforementioned libraries are packaged inside a single JavaScript file named as “experiment.js”

JavaScript Libraries used

• Easel.js – Library to work with HTML5 canvas. It provides a retained graphics mode for canvas including a full, hierarchical display list, a core interaction model, and helper classes to make working with Canvas much easier.
• Slyvester - Vector and Matrix Math for JavaScript. It includes classes for modeling vectors and matrices in any number of dimensions, and for modeling infinite lines and planes in 3-dimensional space. It lets you write object-oriented easy-to-read code that mirrors the math it represents.
• Stativus – Library for maintaining the state charts of an application. Statecharts are a great way to organize your web application and make it more robust and increase code reuse.
• Underscore.js – Utility library that provides a lot of the functional programming support.
• jQuery Easing Plugin – jQuery plugin to give advanced easing options.

Quick hack to unlock different particles

When you click on the <input>, you get options to position the <input> and you will also see another option to change the particle (as shown in the screenshot below). By default, only the first particle is enabled. As you build the machine and progress on the game (not really sure about the trigger – Chrome particle gets active on remixing some existing machine), you will get few additional particles – Anti-gravity Plus particle, Androidify particle, Chrome fast particle. Here is a quick hack to unlock all those particles by default:

1. Information about the unlocked particles are stored in a variable called USER_METADATA.
2. Open JavaScript Console (Cmd + Shift + J) on your Google Chrome.
3. Enter the following lines: USER_METADATA.hasPlusParticle = true;USER_METADATA.hasAndroidParticle = true;USER_METADATA.hasChromeParticle = true;
4. Yay! You are all set. Now, you can try out all the available particles.

Well done, Google! It is very addictive and I am going to spend more days on it. Please let me know if there is anything incorrect in this post.

Update: Thomas Reynolds, the lead developer of this project commented on this post with some corrections. “We actually only use Ease.js, which is the Penner Easing Equations from inside Easel. Our canvas renderer is 100% custom. Regarding the particle hack, so glad you found that! There are a ton of "developer" hacks, mostly global variable, just waiting to be tweaked.”

-- Varun

Google DevFests India 2011

Google has been organizing many developer events across the globe to meet the developers and understand their expectations. DevFest is one such event which provides a great opportunity to learn more about Google technologies and developer products. Developer advocates and engineers from Google will be present at the event. This will be an useful forum for the developers to interact with Google engineers. The event is open to all. There are only limited seats. Register here.

Event  : Google DevFest 2011

Venue : The Lalit Ashok Bangalore
Date    : Sep 15, 2011 08:30 - 17:00

Venue : HICC and Novotel, Hyderabad
Date    : Sep 17, 2011 08:30 - 17:00

More details here.

-- Varun

[Screenshots] Google+

I got the chance to explore Google+ today. To me, it looks like Facebook with privacy concerns addressed. The interface looks simple and easy to use unlike Google Wave. The mobile version of Google+ looks equally impressive. Will it be a Facebook killer? I don’t see that happening anytime soon. Lets wait and watch. Check out the rest of the post for screenshots.

Hover over the images to know more about them.

 

 Google+ Android Native App

Google+ Mobile Web

Take an interactive demo here.

-- Varun

Make your Flash contents playable on iPhone with Swiffy

Ever since Steve Jobs termed Flash as a dying technology and confirmed that they don’t have any such plans of supporting Flash - “we don’t spend a lot of energy on old technology”, there were many attempts to make the flash content playable on devices running iOS. Some of them succeeded to some extent. Google has taken a step on this direction to promote open technologies. Google has pushed a new product into Google Labs – Swiffy, a SWF to HTML5 converter. This product from Google is definitely much better. This labs product allows you to upload a SWF file, and it will produce an HTML5 version which will run in modern browsers with a high level of SVG support such as Chrome and Safari.

Highlights

• Swiffy animations are almost as compact as that of the original SWF files. Swiffy uses a compact JSON representation of the animation, which is rendered using SVG and a bit of HTML5 and CSS3.
• Swiffy animations take advantage of the advancements in JavaScript execution speed and hardware accelerated 2D graphics.
• Supports a bunch of user interactions apart from the plain old animations.
• Wide range of browser support. Check out the browsers supporting SVG here.

Try it out yourself here. Check out the gallery of converted SWF files.

-- Varun

Google App Engine 1.5: What’s new

The first day of Google I/O 2011 is over and Google has already released updates to bunch of its products. Google App Engine is no exception to that. Google App Engine got upgraded to 1.5 with some interesting features. This upgrade is mainly focused on the maintenance aspect of your applications. New features are being introduced to ease the maintenance process and build a better application infrastructure. A new runtime for Go Programming Language has also been introduced.

Highlights:

• Backends:  Now, you can write applications which can run for a longer duration of time. Backends are developer-controlled, long-running, addressable sets of instances which are as large as the developer specifies. There are no request deadlines, they can be started and stopped (or dynamically start when called), they can use between 128M and 1G of memory and proportional CPU. With this, you can think about creating applications like reporting, etc.
• Pull Queues: Now the applications can pull tasks from the queue whenever it is ready to process. Pull Queues linked with Backends will be really handy for batch processing.
• Go runtime: The third official programming language to be supported by Google App Engine. An experimental runtime for Go Programming Language has also been bundled with 1.5 upgrade. Not sure how many developers are actually using Go (Of course, some Googlers will be using it).
• HTTP response size: HTTP request and response size has been upgraded to 32 MB.
• Apart from the owners, the users who have uploaded the code can also download it from the admin console.
• Google App Engine is going to be graduated from Preview later this year. Check out the new pricing model once it goes live.

For more details, check out the official blog post.

-- Varun

Google Yoodle

If you are an internet user, I am sure you would have heard about Google Doodle - Google's special logos for special events. Heard about Google Yoodle?? Yoodle is YouTube's version of Google Doodle. Today, while I was watching some videos on YouTube, I noticed YouTube sporting a new logo. It is to celebrate the "50th Anniversary of the First Human Spaceflight". Clicking on the logo will take you to a free film "First Orbit" on YouTube. Check the address bar on the page and you will find this - "feature=yoodle". This feature seems to be there for around 9 months now. If you know abt the first Yoodle, post the details here as a comment.

-- Varun 

Google's 'Tilt' Easter Egg

Friends at Search Engine Land have just discovered an interesting Easter Egg on the lines of recursion - Just type any of these keywords 'Tilt', 'Tilted', or 'Askew'. If you find out more such keywords, let me know through comments.

-- Varun

[Tech] Insight into Google Instant Previews

Google has launched Instant Previews few days ago – a feature which adds screenshot preview of the page along with the search results. The feature does not seem to add much of value addition to search results (as they claim). Nevertheless, the implementation of the feature is rich enough to add huge value for a web developer. Google has employed some neat techniques to ensure that the performance of the search remains the same with this new feature. If you are a web developer or a person interested in learning cool things, you can continue reading rest of the post. And, if you are frustrated with the previews, you can use this script to turn off the feature.

Techniques involved in Google Instant Previews

JavaScript Compilation. Like any other Google products, Google search also uses a lot of JavaScript. JavaScript is minified and crunched using Google’s Closure Compiler. The JavaScript on the results page is loaded lazily so that it does not interfere with the page load. Also, JavaScript is cached very aggressively on the client-side.

On-demand JSONP.  The result previews are loaded only on-demand whenever the user activates it. The browser needs to make asynchronous call to Google servers to get the previews and render it on the screen. Modern browsers have a restriction on the number of concurrent requests the page can send to any host. To overcome this, Google uses a separate domain for hosting the result previews. (Ex: client1.google.com, client2.google.com). Data can be loaded in different ways using JavaScript:

• Simple AJAX call (XmlHttpRequest – XHR) to the server. XHR gives you good control and error handling becomes easy with it. However, XHR does not allow cross-domain access. Only same-origin requests are permitted (Modern browsers have started to support cross-domain access using cross-origin resource sharing). In the case of Instant Previews, the previews need to be fetched from a different sub-domain “client1.google.com”.
• JSONP. JSONP is another technique where in the requested script returns the desired data as a JSON object wrapped in a JavaScript callback function. Error handling with JSONP is a bit harder to do than XHR but it is not subject to same-origin restrictions. Read this Wiki article to know about the implementation details of JSONP. Google uses this technique to get the result previews. Things to consider while using JSONP:
  1. If you are adding the script tag directly to the page, some of the browsers may show the page loading icon. To avoid that, wrap the DOM call to insert the script in window.setTimeout() – This will be executed in a separate context.
  2. After your requests come back and the processing is done, set the source of the script tag to null and remove the tag. This will prevent the browser from slowing down because of too many script tags. 

Data URIs. The previews shown are not just plain images streamed from the Google server. The data received from the JSONP calls is actually the image data being sent as set of data URIs. (I have used the same technique in VComment – Visual Comment Engine). Data URIs are base64 encodings of image data, that modern browsers can use to display images, instead of loading them from a server as usual. If you have noticed the previews closely, a bounding box will be added to the preview. The usage of data URIs over static images has made this highlighting easier. Data URIs are gzip-compressed to make them comparable in size to the original JPEGs. Data URIs are also aggressively cached on the client-side. 

More information about these techniques can be found here.

Note: This post was originally written in the last week of November 2010. Just realized that it was sitting on my drafts itself.  Well, better late than never. 

-- Varun

Start menu for Google Chrome

Most of you would have been already aware of the fact that Google has launched its Chrome web store recently. If you are using the latest versions of Chrome, you can install apps on your Chrome from the web store. Once the app is installed, you can launch it from the popular “New Tab” page of Chrome. A new section titled “Apps” has been added to the “New Tab” page. This section will show the icons of all the installed apps as Thumbnails. Clicking on the app icon will launch the app. If you have a big list of apps installed on your Chrome, it will become difficult to search for the app and launch it from here. To make it simple, Google has built an extension “App Launcher” which will act as a Windows Start Menu for Chrome.

App Launcher for Chrome

App Launcher for Chrome is an extension built by Google for launching the apps installed on Chrome. Install the extension from here. The extension will add a browser action icon clicking on the same will show a list of installed apps. From there, you can launch an app by either clicking on it in the list, or using arrow keys to select it and then pressing enter. The search box on top of the list is quite handy. (However, you have to use only lower cases while searching. Looks like a bug). With this extension, you can launch an app from any page without having to open the “New Tab” page.

-- Varun

[via @labnol]

Android 2.3 GingerBread – Quick Preview

Google has recently announced the launch of its new Android Phone Nexus S along with the next version of Android which is 2.3 (code named as GingerBread). I had a quick look at the new and exciting features added in this version. There are lots of exciting things for a developer than for an end user. Not many user features have been added. Many features have been added under-the-hood to increase the performance on Android 2.3.

The first thing I want to tell you guys is that GingerBread is not the major UI refactoring (as we thought). May be the next version Android 3.0 (codenamed HoneyComb) will feature a fully revamped UI. However, there are UI refinements for simplicity and speed in GingerBread. Google’s new phone Nexus S will be the first device to get GingerBread and it will be on sales from Dec 16 in the U.S. Nexus One owners will eventually get OTA update in the next few weeks.

Highlights

• User facing features (Check out the screenshots below)
  • UI refinements and speed.
  • Improved Android keyboard.
  • One touch Copy / Paste
  • Improved power management
  • Internet calling. Yes, its available. :)
  • Download manager
• Developer features
  • Performance improvements for gaming
  • Gyroscope and other new sensors
  • Write native code in your Android app
  • Near Field Communication.
  • Support for new media formats – VP8 and WebM support

Apart from the above mentioned improvements, there are improvements to the platform itself. Linux Kernel has been upgraded to 2.6.35. Dalvik VM has been upgraded to support concurrent garbage collection, JIT optimizations, etc. Some of the core libraries have also been upgraded to enhance the performance. Read the complete platform highlights here.

Android 2.3 GingerBread running on an emulator

 

New icons and notification bar in GingerBread

Android Keyboard on GingerBread and One-touch Copy/Paste

Download Manager

Flat buttons on GingerBread

-- Varun

Google eBooks for Android

We know this has been coming and Google eBooks Store is finally here. The store which is currently available only in the U.S. hosts over 3 million Google eBooks. The best thing about Google eBooks is that its open and supports many devices. You can read it on the web, or your tablet, or your smartphone. Native apps for Android and Apple devices are also available. Font, font size, day/night reading mode and line spacing are all configurable. You can discover and buy the new eBooks from Google eBooks Store or from any of the partners.

Google eBooks for Android

The free application is already available in the market. If you are not finding the application in the market, you can get the .apk from here. I tried out the app and the interface is pretty neat. I have not used Kindle or any other book readers but the usability of the Google eBooks is just awesome. Google is definitely getting better on its mobile user interfaces.

 

-- Varun

Google Reader for Android

Google has released an official app for Google Reader for Android phones. We have been waiting for this for years and it has finally arrived. The free app supports all the basic features like subscribing to a feed, sharing, liking, starring, friends, etc. Multiple accounts are also supported by the app. The app can be downloaded from the market.

Highlights

• Neat interface without ads. Rendering is quite good as well.
• Multiple accounts.
• Synced preferences.
• Search.
• Ease of sharing. The article can be shared via email, facebook, twitter, etc.

Lowlights

• Articles can not be synced to your device for offline reading.

I have been using NewsRob to read my Google Reader articles on mobile. I will continue to use that till Google adds support for offline reading.

-- Varun

Auto-Tweet your Google Reader Shared Items without using any third-party services

Google Reader is one of the most popular Atom and RSS feed aggregator service from Google. It allows you to share the articles you like with your friends (followers). You may want to link your Twitter account with Google Reader so that whenever you share something, the same will be shared on your Twitter stream as well. I wrote a script back in Jan 2009 to semi-automate the same. But, the script has stopped working as Twitter supports only OAuth authentication now. There are lots of third-party apps / plugins available to do the same. But, you will have to connect to those services with your Google / Twitter credentials. Here is a simple way to auto-tweet your Google Reader Shared Items without using any third party service.

Steps to Auto-Tweet your Google Reader Shared Items

1. Feed Discovery. Whenever you share items on Google Reader, you will have a Public atom feed associated with your account. To know your feed URL, go to “Your stuff” > “Shared Items”. “Your Shared Items” page will open up. Click on the “show details” link at the right top corner. Details will show the Feed URL associated with your shared items. Note: Make sure your items are public. Click on the “sharing settings” to change the settings of your shared items.

2. Burning your Feed. The next step is to burn your feed. You can use Google’s FeedBurner. Go to http://feedburner.google.com. Copy / Paste the Feed URL (from step#1) in the ‘Burn a feed right this instant’ text box. Click on ‘Next’. In the next screen, FeedBurner will ask you to provide the feed title and an address for the feed. After providing the details, click on ‘Next’. FeedBurner will burn the feed for you. It will show a screen to setup FeedBurner stats. You can do it later. Click on ‘Skip directly to feed management’.

3. Linking with your Twitter Account.  The last step is to link your Twitter to the feed which is just burnt. Go to the ‘Publicize’ tab and select ‘Socialize’ option from the sidebar. Click on ‘Add a Twitter account’ button. This will open the Twitter page asking you to sign in to Twitter if you have not signed in already. Then, it will ask you to authorize access to your Twitter account for Google. Allow access to Google. After adding the Twitter account, you can configure few settings like formatting options, item count, items filtering, etc. After choosing the desired setting, click on ‘Activate’ to activate the service. That’s all. FeedBurner will periodically check for new feeds from Google Reader shared items and post them on Twitter stream automatically. Note: Your twitter account is linked directly with the Google account without having to use any third-party service.

This is what I would recommend – Read it on Reader, Share it on Twitter. Enjoying reading and happy sharing.

-- Varun