Gracefully Detect Old Browsers and Fallback from HTML5

Category : HTML5, JavaScript, Software development, web

HTML5 rocks! It even says so in this (highly recommended) great web tutorial, but there are still a lot of browsers out there, that still do not support HTML5, or some of it’s features.

First, What is HTML5?

Wikipedia defines HTM5 – HTML5 is a language for structuring and presenting content for the World Wide Web, a core technology of the Internet. It is the fifth revision of the HTML standard (created in 1990 and standardized as HTML4 as of 1997[1]) and as of September 2011 is still under development. Its core aims have been to improve the language with support for the latest multimedia while keeping it easily readable by humans and consistently understood by computers and devices (web browsers, parsers, etc.). HTML5 is intended to subsume not only HTML4, but XHTML1 and DOM2HTML (particularly JavaScript) as well.

How do I find out which features are supported in each browser?

HTML5Rocks keeps track for each features support in each browser another cool site to check would be caniuse.

Now, the really issue is what do you do at run-time? how do you gracefully fallback when there is no support for the great feature you have implemented using HTML5.

There are two way to detect and fallback from HTML5, the right way, and the wrong way

So here they are:

WRONG WAY – On the server-side, check the User Agent header and serve different pages based on the user agent header… Not recommended – first, there a lot of  User Agents, second, this is a very buggy approach because headers change and are not deterministic (FF can easily send IE headers).

RIGHT WAY – Use JavaScript to detect when there is no support for a HTML5 feature (AKA object detection) here is an example:

 function start(){ if(supports_canvas()){ // Do funky HTML5 canvas fun }else{ // fallback to boring old HTML } } function supports_canvas() { return !!document.createElement('canvas_bogus_name').getContext; } 

 

Have fun and support HTML5:

Voice Recognition API in Android Apps Using RecognizerIntent

Category : Android, Google, Java, Open source, Software development

Voice interface is not a common application user interface, we do not usually interact with application using voice. But when it comes to mobile it makes more sense.
We are used to talk to a phone all day – why not talk to our phone apps?
Not all voice interaction should look like this video:


Here is how you use Android Voice Recognition API:

  1. Call the RecognizerIntent  - your application call the Voice recognition Intent that records the voice.
  2. Intent processes the voice recording – sends it to the voice Recognition Service and returns
  3. A list of string is passed to an implemented callback method in you application
  4. You process the string and continue the interaction with the user

Here is a simple call to the intent:

     /**
     * Fire an intent to start the speech recognition activity.
     */
    private void startVoiceRecognitionActivity() {
        Intent intent = new Intent(RecognizerIntent.ACTION_RECOGNIZE_SPEECH);
        intent.putExtra(RecognizerIntent.EXTRA_LANGUAGE_MODEL,
                RecognizerIntent.LANGUAGE_MODEL_FREE_FORM);
        intent.putExtra(RecognizerIntent.EXTRA_PROMPT, "Speech recognition demo");
        startActivityForResult(intent, VOICE_RECOGNITION_REQUEST_CODE);
    }


And here is the callback:

      /**
     * Handle the results from the recognition activity.
     */
    @Override
    protected void onActivityResult(int requestCode, int resultCode, Intent data) {
        if (requestCode == VOICE_RECOGNITION_REQUEST_CODE && resultCode == RESULT_OK) {
            // Fill the list view with the strings the recognizer thought it could have heard
            ArrayList matches = data.getStringArrayListExtra(
                    RecognizerIntent.EXTRA_RESULTS);   

          //DO SOMETHING WITH THE MATCHES

        super.onActivityResult(requestCode, resultCode, data);
    }

Here is a full code sample – I played with it today and will very little effort created a Pizza ordering application for my next demo session.

How to Make Web Pages Fit and Scale Nicely on Android Web Browser

4

Category : Android, CakePHP, PHP, Software development, web

I just released an Android version of my Cats Idol pet project – it lets you browse through photos of cats submitted by other people, rate the cats, and set the photos as your Android wallpaper.

One of the things I wanted to do was to provide users with the ability to upload photos straight from their phone. I decided that a web interface would be the easiest way to go at it. So, my application has a button called “Add cat” that launches the Android web browser with a URL of my server-side CakePHP-based upload HTML form.

The Problem

Then I ran in to a problem -  The HTML upload page was “zoomed out” on android, seemed like the browser did not scale the HTML properly and you needed a lot of zooming in order to work with it.

I thought this was a problem with my android code but found that it was actually a server-side issue.

After some digging, I found a solution to this issue.

The Solution

Adding these two Meta Tags in the head Tag of the HTML page solved this issue:

<meta name="HandheldFriendly" content="true" />
<meta name="viewport"
          content="width=device-width,
                 height=device-height, user-scalable=no" />


In CakePHP I added these Meta Tags to the mobile.ctp layout so it will affect all pages using the mobile layout.

Using these Meta tags fixed the way Android showed the HTML web page – The page looks zoomed-in and fits the screen very nicely:

Cloud Services and Application Performance Monitoring

Category : SAAS, Software development, web hosting

In his interesting article, Cloud Automation: problem & solution, Dor Juravski talks about Performance and SLA as key challenges to cloud based applications and services. Dor also suggests Application Performance Monitoring (APM) as a mitigation to this challenge.

When we move from in-house application to cloud-based application, we shift some of  the responsibilities around SLA, DR and performance to the cloud service provider. Having said that, we still own the business risk of our application not been there for our clients/internal workers.

What will happen, it time, is that cloud services will be utilised like water and electricity today – we will use cloud services and not even think about performance or disaster recovery. Till that day will come, we will still need to be mindful and understand our  cloud-provider’s SLA, performance policies and their alignment with our business KPIs. If needed we should consider APM tools to help us manage these KPIs.

Cloud services are the way of the future, we need to address the key challenges and be aware of the business and technical implications of the new order.

PHP foreach is by default by value and not by reference

Category : PHP, Software development

It is a little wired for Java and .NET developer, but PHP by default returns a copy of the iterated array item when running a foreach statement.

From the official PHP site – Note: Unless the array is referenced, foreach operates on a copy of the specified array and not the array itself. foreach has some side effects on the array pointer. Don’t rely on the array pointer during or after the foreach without resetting it.

Here is a wrong way to manipulate an item in an array:


$arr1 = array(1, 2, 3, 4);
$arr2 = array(1, 2, 3, 4);
$arr = array(arr1,arr2);
foreach ($arr as $value) {
   //add an element to the inner array 
   $value[] =  5;
}
 

The $value is a copy of the item and the changed do not affect the item in the array itself.

Java and .NET developers, like myself, scratch their head and say “why doesn’t the foreach work?” or “what doesn’t the items in the foreach change?”

the answer is you need to use the & sign to let PHP know you need a reference rather then a value.

So here is the correct way to do the same thing:


$arr1 = array(1, 2, 3, 4);
$arr2 = array(1, 2, 3, 4);
$arr = array(arr1,arr2);
foreach ($arr as &$value) {
    //add an element to the inner array 
   $value[] =  5;
}
 

CakePHP Ajax/JSON calls fail? Try turning debug output off

Category : AJAX, CakePHP, Software development, Tips

ajax CakePHP is a rapid development framework for PHP that provides an extensible architecture for developing, maintaining, and deploying applications. CakePHP provides several Ajax features, but if cakephp debug is not turned off, most Ajax calls and JSON encoding would fail.

The problem / symptoms

When calling a server side cakephp method through Ajax calls usualy in combination with JSON encoding, the call fails. The server returns HTTP 200 and everything seems fine, but the Ajax call just doesn’t work.

Continue Reading

When to Stop Support for old Browsers such as FireFox 2 and Internet Explorer 6

2

Category : Best practices, Software development, web

Let’s face it- old browsers are a pain in the rear. Browsers like FireFox 2 and Internet Explorer 6 do not behave like modern browsers. They do not render HTML in the same way and do not interpret JavaScript in the same way. You can, most of the time, fix these issues, but the process costs a lot in terms of testing, development, and time to market. I was just involved in a project were a client insistent on going through 12 browsers and paid hundreds of thousands of dollars for that line item.

The problem is that clients still use these browsers and expect to view your site properly with their legacy browsers. So, when do you stop supporting old browsers?

Continue Reading

Useful JQuery Plugin to Display Errors, Messages, and Alerts: Gritter

Category : jquery, Open source, Software development, Tips, web

Real estate on your web page could be as important as real estate in real life. You got very little space on your client screen and need to use every inch (or pixels). Errors and messages take up valuable space that could be better used for more important things.

That is why Gritter is a great JQuery plugin – it saves real estate on your page by showing alerts, messages and errors in a floating bubble way, that is both informative and (because you can configure Gritter to fade away after a few seconds) non intrusive:

This image was taken from one of our new site’s design, we decided to use Gritter instead of putting the errors and notification inline.

Check out Gritter’s demo site and project site and, for CakePHP developers, here is an article about integrating Gritter with CakePHP.

It is open source, looks great, easy to integrate, and is very useful!

CakeOTP 1.1 – User Registration with One Time Password for CakePHP Released

Category : CakePHP, New Release, Open source, PHP, release, Security, Software development

CakeOTP is a reference implementation of User Registration with a secure, table-less and expirable implementation of One Time Password for the popular CakePHP development framework.

New in CakeOTP release 1.1

1) Automatic login process, after the account activation- The user is automatically logged into the site and is redirected to an internal page, immediately after activating his/her account.
2) User email validation.

Download this release here.

Checkout the Online Demo, project page and getting started page.

JQuery AJAX POST Sending Only Partial Data? Try URL Encoding.

7

Category : AJAX, Deep Dive, JavaScript, jquery, Software development


JQuery is a great JavaScript framework that makes web developer life much easier. But like all framework, you need to learn its gotchas in order to work effectively with it. Here is one of those gotchas -

Jquery POST method lets you create Ajax HTTP POST request to the server. It is actually a shorthand to the JQuery Ajax method:


$.ajax({
  type: "POST",url: "save.php",
  data: "param1="+paramValue1
  +"&param2=paramValue2",
  complete: function(){ }, //manage the complete if needed
  success: function(){}}//get some data back to the screen if needed
});

The problem

When executing the AJAX call, only part of the data is passed to the server and the rest vanishes. You usually see that some or all of the parameters you tried to pass are missing or cut in the middle.

The cause

JQuery uses ‘&’ as a separator between the parameters. If you have a ‘&’ within your key or value parameters, then the JQuery AJAX request gets really messed up.

The solution

Encode the parameters, replace & with %26 which is the standard encoding for that character.

Semi-Automatic

Use .replace(/&/g, “%26″) -

Here is a working example:


$.ajax({
  type: "POST",url: "save.php",
  data: "param1="+paramValue1.replace(/&/g, "%26")
  +"&param2=paramValue2.replace(/&/g, "%26")",
  complete: function(){ }, //manage the complete if needed
  success: function(){}}//get some data back to the screen if needed
});
Fully Automatic

A more elegant way is to slightly change the way we call the meethod and let JQuery do that encoding for you -

Here is a working example:


$.ajax({
 type: "POST",url: "save.php",
 data: { "param1": paramValue1,
 "param2": paramValue2 },
 complete: function(){ }, //manage the complete if needed
 success: function(){}//get some data back to the screen if needed
});