Blog Archives

Angry birds is not working on chrome after installing the latest offline version [ FIX ]

A couple of weeks ago angry birds -web-  got a new version that is capable of working offline with HTML5 Cache !

Some people reported that it doesn’t work and craches on this screen:
angry birds crash chrome version

 

Today, I tried to delete the cache and re-install the game .. and it worked fine =)

Here is HOW:

Go to

Options >under the Hood > Content settings > Click “All Cookies and site data…”

OR simply write  chrome://settings/cookies in your address bar !

You will find a long list of all sites “Cookies and Other Data” in your browser !

in the small box above write “chrome.angrybirds

angrybirds fix for offline version on google chrome

 

 

You will find only 1 entry filter, click “session storage” then > “Remove

NOTE: All your saved data <levels> will be lost ! (90%)


Now.. open up your angry birds web app and wait for the installation.
and u r done =D

 

 

 

 

 

Advertisements

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