Google+ API Now Released

Developers rejoice! Google has now released the API for Google+!! For the uninitiated, in the simplest term possible, “Google+ is the answer of Google to Facebook.” For years now, developers have developed applications, tools and everything you can think of that utilizes the APIs of the top social networking sites such as Facebook and Twitter. And upon the entry of Google+, developers are craving to incorporate the power and innovation of this new service from Google into their applications. Probably the most requested feature that users, especially marketers, are craving for is to automatically post to Google+ via an API to instantly update their stream without logging in to the site. It has been long implemented on Facebook, and countless number of users are utilizing it, usually, to manage all of their updates to multiple social networks in one place.

As of now, the API focuses on public data only, meaning, the API can only access the posts made publicly available by the user. To get started, you must first turn the API on via your Google API Console located at https://code.google.com/apis/console/. You may notice that you have a limit of 1,000 queries per day. I think the courtesy limit gives too little courtesy to the developers. I think it can be increased by enabling billing and pay for the excess queries that you fetch every day. It would be bad for large-scale applications that are developed by small-time individuals, simply because it won’t scale unless you pay for it. Imagine paying for an API access, especially when Facebook, the top social network lets you use their API with more than 100x the limit given by Google. Let us see what will happen in the following months.

To get an overview of what the Google+ API can offer, I used Google’s APIs Explorer and noticed that as of now, there are only three methods available:

activities.get
Get an activity.
activities.list
List all of the activities in the specified collection for a particular user.
people.get
Get a person’s profile.

Using the APIs Explorer, testing the queries is such a breeze. First, we must enable Private Access since the request needs to be authorized via OAuth. I tried out the activities.list method by selecting the method and filling up the userId with “me” and collection with “public”. Take note that “public” is the only value permitted in the collection field as of now, since the API can only access public data for the mean time. It also seem that JSON is the only output format that the API supports. The fields editor is very handy, since you can simply select the fields that you want returned. After clicking the Execute button, the APIs Explorer instantly returned the response to my request as seen from the picture above.

At this stage, only “reading” the data from Google+ is possible with the API. “Writing” data however is still missing in action. So far, only apps that fetch data from Google+ will benefit from this initial release of the API, we still need to wait before third-party apps can post to your stream and before we can see an app named Facebook to Google+.

Update: It seems that billing is not yet enabled for the Google+ API, though you can request to raise the courtesy limit, it still depends on Google whether they’ll approve of the request.

August 18, 2011August 18, 2011

How Web Browsers Work

I found an interesting read earlier today as I was browsing my Twitter account. As I was feeling geeky today, I checked out a tweet from @ChromiumDev about how browsers work. As a web developer, I am always puzzled about how different browsers render different pages differently, which always makes my work a pain in the @ss. The article is a bit technical, which in my opinion, can only be fully understood if you have at least a bachelor’s degree in a computer-related course. Originally researched and written by Tali Garsiel, here’s a link on the detailed and informative article.

How Browsers Work:

Behind the Scenes of Modern Web Browsers

Tali Garsiel (author) – Developer, Incapsula,
Paul Irish (editor) – Developer Relations, Google
August 16, 2011

May 20, 2011May 20, 2011

Chrome-flavored Angry Birds Javascript Cheats

It’s nearly a week since I’ve played the web version of Angry Birds by Rovio. This version is obviously designed for Google Chrome, although it’s not Chrome-exclusive, browsers that supports HTML5 features like Local Storage, Canvas and WebGL would be able to run the game. I believe that this is a huge leap in terms of web technology. It gives us an excellent full-featured(?) game that doesn’t use third-party plugins such as Adobe Flash, Shockwave or Java applet.

I’ve also seen huge amount of websites that brags about the game was hacked on the day it was released. I wasn’t surprised at all since the data on the Local Storage is readily viewable by anyone especially those who uses Chrome by using its built-in Developer Tools.

resources — The variables saved on the Local Storage using Developer Tools of Google Chrome.

To use these, simply go to the Chrome Angry Birds site at http://chrome.angrybirds.com, then type the following javascript codes to the address bar. Anyway, here are some of the cheats that you’ll probably use:

Unlock all levels. The most famous cheat. This is the cheat that you will always stumble on the web. Will unlock all the levels including Chrome Dimension.
[javascript]javascript: for(i=0;i<70;i++) { localStorage.setItem(‘level_star_’+i,’3’);}[/javascript]

Opposite:

[javascript]javascript: for(i=0;i<70;i++) { localStorage.setItem(‘level_star_’+i,’-1′);}[/javascript]
Collect all the chrome balls. What this doesn’t do is unlock the levels in Chrome Dimension. If you want to unlock the levels there, use the cheat above. The problem when using the cheat above is that even if the Chrome Dimension levels are all unlocked, the Chrome balls will still appear on their respective levels. In order to flag them as collected, use the code below.
[javascript]javascript: for(i=0;i<7;i++) { localStorage.setItem(‘chrome_ball_’+i,’collected’);}[/javascript]

Opposite:

[javascript]javascript: for(i=0;i<7;i++) { localStorage.setItem(‘chrome_ball_’+i,’not’);}[/javascript]
Change highscore. What this code does is change your highscore to a random number between 50,000 to 100,000. Feel free to modify to suit your bragging rights.
[javascript]javascript: for(i=0;i<70;i++) { localStorage.setItem(‘level_score_’+i,Math.floor(Math.random()*50000)+50000);}[/javascript]

Opposite:

[javascript]javascript: for(i=0;i<70;i++) { localStorage.setItem(‘level_score_’+i,0);}[/javascript]
Mark Cutscenes as viewed. When this has been enabled, cutscenes will be marked as viewed, thus, you have the power to skip them.
[javascript]javascript: for(i=0;i<4;i++) { localStorage.setItem(‘cutscene_’+i,’shown’);}[/javascript]

Opposite:

[javascript]javascript: for(i=0;i<4;i++) { localStorage.setItem(‘cutscene_’+i,’waiting’);}[/javascript]
Mark Tutorials as viewed. When enabled, tutorials (instructions) won’t show up anymore. Use the opposite to show tutorials.
[javascript]javascript: for(i=0;i<5;i++) { localStorage.setItem(‘tutorial’+i,’shown’); }[/javascript]

Opposite:

[javascript]javascript: for(i=0;i<5;i++) { localStorage.setItem(‘tutorial’+i,’waiting’); }[/javascript]

I’ve written these without checking for typos, so feel free to tell me if you have corrections regarding the codes.

April 12, 2011

jQuery Mobile: The Next Big Thing Comes in Minified Package

Introduction

For the seasoned web developer, there’s no denying it, jQuery is one of the best and widely used JavaScript framework aside from ExtJS, Dojo, MooTools and Google Web Toolkit to name a few. According to BuiltWith.com, at the time of this writing, jQuery is the top JavaScript framework used with 44.01% of websites using it. With the Top 1 Million Websites indexed by BuiltWith.com, it is used by approximately 44.82% of internet websites, solidifying its stature as the best JS Framework in the world. And if you are curious, the 2nd most used JavaScript Library used is Facebook for Websites with a usage of 15.11%. Such a huge difference in numbers, it’s a landslide victory for jQuery. Combined with its ease of use, small memory footprint, cross-browser compatibility and its popularity, it’s no surprise that it is the ideal JS library for noobs and pros alike.

With the popularity of mobile computing, suddenly mobile browser shares skyrocketed from a small minority to an indispensable business consideration for major companies. Back then, mobile browsers were just a simple browser, very limited compared to mainstream desktop browsers. All they’re capable of doing is display WAP sites and simple HTML websites. Mobile browsers which can run WMLScripts were considered advanced then. As the mobile devices level-up, so are their capabilities. Smartphones in general, gained mainstream popularity, arguably because of the iPhone in 2007. As the devices gain more processing power, so are the possibilities that it can achieve. These phones are capable of displaying full websites instead of the usual stripped-down version of the page. They behave more of a mini-netbook with phone features.

jQuery Mobile

Enter JavaScript. Web developers wanted to incorporate JavaScript into their mobile websites since smartphones are now capable to do so. From simple client-side form validation to some jaw-dropping transition animations, the more interactive a site is, the more visitors it is likely to attract. With this in mind, it’s inevitable that JS is sure to stay in the mobile market. Like the desktop browser, it needs a JavaScript library to make development easier and more feature-rich. Here comes jQuery Mobile, a framework built on top of the already stable jQuery library. According to the jQuery Mobile overview, it can be described as:

Delivering top-of-the-line JavaScript in a unified User Interface that works across the most-used smartphone web browsers and tablet form factors.

Although the said framework only targets only smartphone and tablet web browsers, as long as the HTML mark-up is semantically correct, it will silently and discretely fallback to a plain HTML page. Probably the best feature of the library is transforming the differently-rendered pages from different mobile web browsers into a uniform, familiar touch-friendly user-interface.

The images above shows the difference in terms of rendering of a single webpage using an old mobile browser and a smartphone. We can notice a large difference in terms of style when viewing a website when jQuery Mobile is capable of running. And by simple analogy, we can say that customers and visitors alike are more likely to visit a mobile website that has better visual eye-candy, and therefore the website will get more traffic. We can also notice that the one with the framework is ergonomically-designed for touch-enabled phones. Notice the iPhonesque design of the page? It almost blends seamlessly with the designs of the iPhone and Android interface, so users are almost familiar with it.

But why?

So what’s the point of using the framework when not all mobile phone is supported? Well for one thing, you aren’t given any kind of disadvantage if you use the framework. Let’s assume that most of your visitors who visit your site through mobile web browsers uses smartphones. When they see your site, they will be shown a clean, touch-optimized page designed especially for their devices’ capabilities. But when a visitor visits your site using a non-compatible mobile web browser, they would simply be shown a plain mobile webpage with almost no difference in content with your touch-friendly page. The good thing in here is that you won’t need to change any of your HTML code to suit these browsers. As I’ve said before, it falls back discretely to plain HTML when the browser used cannot run JavaScript. It’s a win-win situation for you!

I therefore conclude

jQuery Mobile is still in its alpha stage, meaning it shouldn’t be used for production websites, but rather for testing purposes only. As of this writing, the current version is 1.0 alpha 4.1. It’s still a bit far for a stable release, heck it’s not even on beta yet. But based on user responses, feedback is quite good. A few bugs are found and sprout everyday, but results are promising. Since it was built on top of the full jQuery framework, in my personal opinion, I think it is safe to use it for production on desktop websites. Yes, it runs perfectly on desktop browsers too! Your desktop websites inherits a few touch capabilities such as dragging the page to scroll down, cool huh? But as of now, we have to keep an eye on its development, and I’m sure we’ll still be surprised in what it can do. Next time, I’ll probably make a simple tutorial on how to incorporate jQuery Mobile in your pages, as if it wasn’t on the official documentation yet.

January 12, 2011January 12, 2011

Google Fonts: Making the Web Beautiful!

I recently discovered Google Fonts API that allows web developers to embed fonts into their web pages which gives them the freedom to style the page as they want without resulting to rasterized text. It sets us free from the overused default web browser fonts such as Arial, Verdana and Courier fonts. This is quite useful for SEO since your stylized text doesn't need to be a .JPG or .PNG image anymore, but a pure text that can be searchable and indexable by common web crawlers. The API provides a simple way to include a dynamic stylesheet that includes the necessary declarations on embedding Google's wide variety of fonts. The fonts available are listed on the Google Font Directory. Take note that the fonts in the directory are all open-source licensed, so we have an almost complete freedom in using them, whether for personal or for commercial purposes. But I have to add that not all browsers support embedding of fonts. Old ones and browsers from low-power devices such as old mobile phones won't benefit from this service. According to Google, these browsers are known to support Google Fonts:

Google Chrome: version 4.249.4+
Mozilla Firefox: version: 3.5+
Apple Safari: version 3.1+
Opera: version 10.5+
Microsoft Internet Explorer: version 6+

Using the API is fairly simple. For example, if you want to embed the font UnifrakturMaguntia, you simply add the following code to your HTML code, preferrably inside the <head> tag:

[html light=”true”]
<link href="http://fonts.googleapis.com/css?family=UnifrakturMaguntia" rel="stylesheet" type="text/css" />
[/html]

Take note of the href value of the href attribute, it always takes the form of

[code light=”true”]http://fonts.googleapis.com/css?family=FontName[/code]

where FontName is the name of the font found on the Google Font Directory.

If we were to examine the content of the code, it just adds a new CSS stylesheet to our HTML page that is hosted at Google's servers. But we can also notice that it can take several parameters that are dynamically generated as we provide different sets of parameters to it. For instance, if we copy/paste the value of the href attribute of our link in the example above (http://fonts.googleapis.com/css?family=UnifrakturMaguntia), the API will return a CSS stylesheet that looks like this:

[css]
@media screen {
@font-face {
font-family: ‘UnifrakturMaguntia’;
font-style: normal;
font-weight: normal;
src: local(‘UnifrakturMaguntia’), url(‘http://themes.googleusercontent.com/font?kit=7KWy3ymCVR_xfAvvcIXm36ofnEspxrPLQXtAOAVG_vM’) format(‘truetype’);
}
}
[/css]

After inserting the <link> element into the <head> of our HTML, we can now add styles to our document using the font-family CSS style and the font named UnifrakturMaguntia is now available and accessible to our HTML page.

[css light=”true”]p { font-family: ‘UnifrakturMaguntia’, arial, serif; }[/css]

If you can see the code above, we also added the font arial and serif into the styles. The reason is to support non-modern browsers. So if your page is opened by user using a browser that doesn't support embedding of fonts, it will use the next font available, Arial. But if it still doesn't support the Arial font, such as old mobile phone browsers, it will use it's built-in serif font to display the content. If you are using a modern browser, then you should be able to see it in action with the example below:

This text is supposedly using the UnifrakturMaguntia font.

You may try to select the text above, then copy it. The text should paste into any other text editors.

To learn more about using the API such as requesting multiple fonts and styles, you can see Google's Getting Started guide.