Monthly Archives: May 2011

the future of web from #GoogleIO

a couple of weeks ago, Google held its 2 days conference #IO2011.

What is google IO ?
In case you don’t know .. Google IOInput Output- is a 4 years old (since 2008) developer conference, Google held it annually to show the world the advancement they made during the year and introduces the new technologies on the roadmap. and it is one of the most famous development conferences around the world that includes lots of parrell codecamps , sessions and ……………sdfsdf.

what GoogleIO keynote speeches focused on last years ?
IO2008 : Client . Connectivity . Cloud , IO2009: HTML5 , IO2010: Google Android
and in this year -IO2011-: day1: Andriod/Media , day2: Google Chrome and the future of web.

this is a summary in a headings-like what Google introduced in the this keynote to Google chrome and the web. <Open Web>

1. Chrome

* Some Facts about Google Chrome browser:

<IMAGE1>
= Users:  there are 160 million users World wide to Chrome, doubled from last year.
= Release cycle: Google has switched to a 6 week release cycle (version 4 at last I/O, version 11 now)
= Upcoming APIs: fill in text fields via speech and/or perform translations, via simple HTML.
= Performance < Hardware acceleration – major focus>:
Microsoft’s animated fish(2D sprites) is a Demo introduced by microsoft  in the last Mix Conference .. MS was trying to proof that #IE10 is fastest browser in hardware acc..  BUT Google used it against them in #IO and tested it under Canvas 2D <MS Example> with a 10X speed improvment <1000 fish>, and tested it again with WebGL  <10,000 sprite fish> with another 10X Speed improvement in this link .

* Chrome Web Store:

intro: Users of an installed app spend 2x more time in the app, perform 2.5x more transaction (e.g. in games), Now available in 41 languages, world-wide.
= In-app payments: next to reach, monetization is also an important aspect of an app store.
= Challenges: make it work at Google scale, make it frictionless.
= Solution: easy to integrate in existing webapps, 5% transaction fee.
= Web Store (including in-app purchasing) will be available in other browsers such as Firefox

* Demo Web Apps:

Angry Birds as a web app.
Performance was a challenge, Impossible to implement until recently.
Two versions: HD version via WebGL… Less capable version via Canvas as a fall-back.
Can be played offline (uses web storage, can allocate more because it’s in the store)

Rome
?? : An interactive film starring Jack White and Norah Jones… Implemented via WebGL.
Morphs 3D models (one animal into another etc.).. Users can interact with the content and add their own models.
– Used the library three.js (“The aim of the project is to create a lightweight 3D engine with a very low level of complexity — in other words, for dummies. The engine can render using Canvas, SVG and WebGL.”).

1. Chromebooks < Chrome OS Notebooks >

Available online June 15 in the US, UK, France, Germany, Netherlands, Italy and Spain. More countries follow later.
Cr-48 pilot program: 1 million applicants.

Keywords: instant on, always connected, all-day battery, access your stuff anywhere, continually updated, security built in (every piece of data is encrypted, /sandboxing/ for apps and plugins).

Chrome OS features highlighted in the talk:
= Support for Adobe Flash
= Support for peripherals (cameras, USB sticks)
= New media player, a panel that can float over the current app or switched to full screen.
= Google’s new music and video services also work on Chrome OS.
= Photos: make it easy to get them into the cloud. Upload from SD card to Picasa (which can be installed as a web app ❤ ).
= Webapps (such as Picasa) can plug into the Chrome OS file manager and register actions for files. (Example: “Send to Picasa”. Similarly: uploading to Box.net, Dropbox )
= Offline-enabled apps: Google Mail, Google Calendar, Google Docs. Third parties: Marvel comics, Angry Birds, USA Today, NPR, Sports Illustrated, etc.
= Hardware partners: Samsung, Acer, Intel, Verizon.
= Positive feedback on Cr-48 connectivity. Thus: international deals for 3G connectivity.
==
[ Samsung Chromebook. 12.1″ display, 8 hour battery, 8s boot, instant-on, always connected, 2 colors, $429 ($499 with 3G) ]
[ Acer Chromebook. 11.6″ display, 6 hour battery, 8s boot, instant-on, always connected, starting at $349]
= Jailbreaking: all Chromebooks can be jailbroken. 😀
= Chromebooks for business and education (including hotels, public internet access points, etc.)
= Challenge: administration of computers… Chrome OS: easy updates.
= Access to virtualized desktop apps via webapp from Citrix.
= Feedback from businesses: 75% of all applications can be handled via webapps and desktop virtualization.
= Business-focused hardware (in development): A Chromebox (looks like a Mac mini) to drive a large(r) monitor.
= Business features: centralized admin console to configure users, apps, and policies.
= Offer for businesses: 28$ per user and month, sold by Google.
= Offer for schools: 20$ per user and month.

P.S.. All IO2011 attendees took a free (not released 2 public yet) 10″ Samsung galaxy tab.

This post will be updated with some video links and other cool stuff Sooon ;)D=_) Keeep watchin 🙂

Advertisements

Youtube is DOWN !!

its 7:17 pm cairo local time [+2] , and yes … YOUTUBE IS DOWN !!

Screen shots ..

html5 speech bookmarklet

As I promised in the last post, I made this simple bookmarklet that will change any textbox to be speech recognition enabled 😀

Just click CTRL + SHIFT + B to open the bookmarks bar, right click it and press add page..  write “enable speech” in name and paste the following code in URL

javascript:(function(x) { var i, current; for (i in x) { current = x[i]; if (current.type == "text") { current.setAttribute("x-webkit-speech", "x-webkit-speech"); current.setAttribute("speech", "speech"); } } })(document.getElementsByTagName("input"));

NOW .. open up any website that contains a textbox and click the bookmarklet and you will find that small speech icon in the textbox.

Enjoy =D

Here is a screen shot for google.com after clicking on the bookmarklet 😀

google enabled speech

plug in your mic and “speak now” =d

Note: make sure you have chrome version 11 or later.

coding time,

(function(x) {
        var i, current;
        for (i in x) {
            current = x[i];
            if (current.type == "text") {
                current.setAttribute("x-webkit-speech","x-webkit-speech");
                current.setAttribute("speech","speech");
            }
        }
    })(document.getElementsByTagName("input"));

I made a self executing anonymous function, and passed all input elements to it.. filtered them with If statement to get only the textboxes.. finally addin the two attributes, Very simple =D

Try it, and tell me if you have any problems.

you can FORK it on github.com

thanks…

HTML5 speech support

I remember at the beginning of this year when I read about the google chrome’s experiments to add support of HTML5 speech recognition, they put it for the public by running chrome with extra parameter flag passed to the application.

    %LocalAppData%\Google\Chrome\Application\chrome.exe --enable-speech-input

That was very interesting & inspiring for me. and from 2 weeks ago with the release of version 11 they enabled it finally & added it to the translation service. and I was going to blog about it and explain how to add it to you web applications.. & Yess, I got very busy and forgot 🙂 .. Yesterday, at Google’s famous conference –google IO– and exactly at the second day key note speech they talked about it =D .. so I am going to write a brief of how to add it to your apps and extra stuff.

=-=

Simply, If you want to have the speech recognition in your web app, all you have to do is add an extra attribute to the input tag to enable speech recognition input =d

<input type="text" x-webkit-speech />

Thats pretty simple, Just adding an extra attribute will get it work !! <thanks HTML5>

Lets see it in action <google translate>, open google translate , point source language from “detect language” to “english” and press the mic icon and SPEAK !:D


<note: the speech recognition attribute is attached to an input (not textarea) as you could think, <inspect element & see ;)> ..

I thought if there is any other properties related to this in the DOM element, so Lets use the developer tools in google chrome press CTRL + SHIFT + J to open chrome’s console. lets use the embedded method console.dir() that will populate every method/property in a given Element.

console.dir( document.createElement('input') );

here is the props/methods that could be related:

webkitSpeech: false
onwebkitspeechchange: null

So, using these prop you can attach event, test if the browser support speech recogniztion etc..

here is how to test if the browser support it or not:

if ("webkitSpeech" in document.createElement('input')){
//do something
}

what about other browsers than chrome & safari (browsers that doesn’t use the webkit layout engine):

In google ‘s translate input element, they put two attributes related to the speech : speech &  x-webkit-speech , and if you read the API Draft you will find that speech is standard. and you have to put both attributes, now lets add some extra stuff to our test:

var newElement = document.createElement('input');
if ("webkitSpeech" in newElement || "Speech" in newElement){
//do something
}

and extra attrubite to the first exmaple :

<input type="text" x-webkit-speech speech />

Finally , add the value [ =”” ] fo the sake of xhtml strict specification:

<input type="text" x-webkit-speech="x-webkit-speech" speech="speech" />


What about a small piece of code or even chrome extension that enables any input text in any webpage we are in to be speech recognition ready ??

I ‘ll go study now and may be tonight I’ll write a simple bookmarklet and post it tomorrow.

Thanks

JQuery 1.6.1 is coming with the fixes

In a couple of days JQuery team will release a new version of jquery (1.6.1), after the community struggled the problems of the backward compatibility in the last release (1.6) .. the new release redefine the usage and the effect of it on the DOM objects of both .attr() and .prop() ,
in this version the boolean attribute manipulation with .attr() will  back  as it was before the 1.6 release.
lets see an example:

<input id="mychkbox" type="checkbox" checked>

the result of the previous markup is a checked checkbox as we all know =d,
but thats the property value not the attribute value cuz the attribute “checked” is not set.

lets see the .attr() results in v.1.6:

alert($("#mychkbox").attr("checked")) // result >> ""
alert($("#mychkbox").prop("checked")) // true
alert(document.getElementById("mychkbox").checked") // true

thats because the attribute doesn’t change when the user change its state by clicking on it.,  thats fine.. but look at the following code

in the coming 1.6.1 release & prior versions than 1.6:

alert($("#mychkbox").attr("checked")) // true
alert($("#mychkbox").prop("checked")) // true (in 1.6.1 only)
alert(document.getElementById("mychkbox").checked") // true

in the coming release the behavior of .attr() will back as it was before 1.6 just because the sake of backward compatibility.

so it will work exactly as expected but that doesn’t mean you have to keep using attr() , switch to .prop() cuz it is more faster and oriented.

it might be confusing now what we should use for what when it comes to .prop() and .attr(), so here is the best usage as the Jquery team stated:
” The .prop() method should be used for boolean attributes/properties and for properties which do not exist in html (such as window.location).
All other attributes (ones you can see in the html) can and should continue to be manipulated with the .attr() method. ”

it is expected to see Jquery 1.6.1 at the end of this week, Also you can fill up the following proposal for new features to be landed in jquery 1.7.

ThankQ

JQuery 1.6 release & backward compatibility !

Today, and as you see from the blog post title 😀 , JQuery 1.6 has been released !

But this time not like 1.5 release, there is no much new features as 1.5 had (deferred obj., jqXHR.. etc)..

so what we have here with 1.6 ??

case-mapping of data- attributes:

Its just a change in the way data- attributes object properties creation, in earler versions data-max-value will create an object with a property like max-value but now with 1.6 , the object would be maxValue..  So what about backward compatibility ?!” , people must start fixing there already written code. !

new methods: .prop(), .removeProp():

Jquery added 2 new methods to its default JQuery object, those methods will work with DOM attributes, I know whats on your mind now –.attr() huh!- yeah, the .attr() used to be the only method that works with elements attributes/properties (beside .val() & other task-specific methods) , It might be confusing so lets define both first:

attribute:  is the initial value shipped with the DOM element ex. <input type=text value=”initialValue”>
property:  it is the dynamic value, ie. any value added by user or changed programmatically.

now JQuery put an end to this, and gave us brand new methods for properties to keep the attr() method for its real work.. so from on when you call .attr(“”) you will get the initial value only !!
that means having the same code will run differently when updating to the new version. backward compatibility ?!

Here is a simple example I have made for more explanation:

=#1= open this fiddle [uses Jquery 1.5.2]
write something in the textbox, and click the “click here to test” button

you will notice that the result is same as you wrote.

in the other side:

=#2= open this fiddle [uses Jquery 1.6]
write something in the textbox, and click the “click here to test .attr()” button

you will notice that the result is the initial value of the textbox.

BUT .. If you clicked the other button which uses the new .prop() method will get you the current value of the textbox.

Finally.. this new version of jquery doesn’t have any other major new features,all other changes are bugfixes, Performance Improvements and some new methods.

you can check all new methods and changes to the API at this link.

==============

update: my twitter timeline got something related:

check this tweet of @jeresig (founder of jquery).

After a discussion on Hacker News regarding the attr boolean changes in jQuery 1.6, we just landed a fix: http://j.mp/j0uMEb

Its good to know also that @jeresig is moving from mozilla to the famous online academy – Khan academy -.

ThankQQ for your time 🙂

HTML5 data-* attribute

Weeks ago I was enjoying my free time playing around in twitter’s response html & ajax requests =D .. I have found a “data-*” attribute in the html metadata .. It reminded me with the old days when I used to write attributes from my own mind in ASP.NET Repeater to the repeated elements. just to use it later in Jquery click handler or something.. later on I found that this is just realted to HTML5’s dataset I read about years but actually I forgot it, horrible memory !
may be writing a couple of lines here won’t let me forget it again !=)

the good part is I started digging in W3C Draft to refresh my memory and know the changes dropped to it.
//so lets talk a little bit about it !

HTML5 is not just a markup language .. HTML5  comes with new JavaScript APIs that works with its new features.. in our example here (the dataset) ..

lets write some markup to play around with:

<div id="container">
  <span data-color="black">Samsung 23' LCD</span>
  <span data-color="silver">BenQ 19' LCD</span>
</div>

Now If you are familiar with simple DOM methods you will know that its simply possible to access these custom attributes with getAttribute() and change the values of it by setAttribute()

example:

 var target = document.getElementsByTagName("span")[0];
 alert(target.getAttribute("data-color")); //black
 target.setAttribute("data-color", "blue");
 alert(target.getAttribute("data-color")); //blue

Till now we have nothing new, only a couple of “hand-made” attributes and normal getAttribute & setAttribute Methods..
its time now to look at HTML5 related API

HTML5 provide a new property called dataset that returns DOMStringMap (name-value pairs object)

See the highlighted lines:

    var target = document.getElementsByTagName("span")[0];
    alert(target.getAttribute("data-color")); //black

    target.setAttribute("data-color", "blue");
    alert(target.getAttribute("data-color")); //blue

    alert(target.dataset.color); // blue

    target.dataset.color = "red";
    alert(target.dataset.color); // red

the dataset property gives you an access to the custom attributes you have made in the markup, the keys inside the dataset object doesn’t have “data-” part so “data-ballSize” would be “dataset.ballSize”.

Jquery data-* support:

We already know the .DATA() method in Jquery (added with V.1.2.3 -2008) .. a couple of months ago Jquery added support for HTML5’s dataset, lets see an example for that.

    var target = $("span:first");
    var myData = target.data;
    alert(myData.color); //black

myData will have All values of inserted in any data- attribute as JSON Object.

or you can directly get the values and use it. Like..

    var target = $("span:first");
    var myValue = target.data("color");
    alert(myValue); //black

ThankQ for reading, Hope you enjoyed it.