Flipboard Like UI on iPhone Safari ( JavaScript + CSS3)


I was trying to make Flipboard like UI in CSS3 and JavaScript!! I quickly made it to work on chrome, but it sucked on iPhone, and it took ages for me to make it work.

How I made it?

My approach is simple I used basic CSS3 attribute

-webkit-transform: rotateX(180deg);
-webkit-transition-duration: 2s;

Step-1:
To achieve complete flip of a page you need to add CSS style of -webkit-transform: rotateX(180deg);

Problem with 180 flip is your HTML content goes upside down, to simulate flipboard like animation you can not flip it complete 180 degrees

Step-2:
Then i decided to just flip 90 degree and back to zero degree Demo-1, To fake half page flip i added a mask on it so that one half of animation is not visible Demo-2.


With this concept of mine I went ahead and made full page flip demo for iPhone here Demo-3.

Scan to see demo on iPhone



Problems on iPhone's Safari

1) z-order problem on webkit, with 3D transform
This mask thing could not work properly because In  iPhone's safari when a object is  3D transformed , z-order does not work properly.  I worked around it by making one half of page to transparent.

2) Touch Events of iPhone
Touch events on iPhone have some serious problem, i encountered weird problem with event propagation.


Feel free to ask any question about the Demo, Please let me know if You have better solution to emulate Flipboard UI.



Curl Request with custom IP and hostname (in php)

There could be following instances you might encounter while doing curl!

Scenarios 
  1. If host-name used in RequestURL, is not in public domain.
  2. If you are trying to avoid load balancer routing, while curling to a local domain. 
  3. If single server serves multiple hostnames, and hostnames are not yet registered. 
Here is what you have to do!!
  1. Curl with url by IP-Address. (that might return 400 error if server is serving multiple domain.)
  2. To solve this include host in HTTP header. 
How To do it?

In PHP

$ipaddress='10.14.9.7';
$url='path/to/file?';
$session = curl_init('http://'.$ipaddress.$url);
$headers = array("Host: ".$http_host);     
curl_setopt($session, CURLOPT_HTTPHEADER, $headers);
curl_setopt($session, CURLOPT_RETURNTRANSFER,true);
curl_setopt($session, CURLOPT_TIMEOUT, $timeout);
$content = curl_exec($session);
echo $content

This how to get local ip and hostname in php
$ipaddress=$_SERVER['SERVER_ADDR'];
$hostname=$_SERVER['HTTP_HOST'];


In command line curl 
 curl "http://10.14.9.7/path/to/file" -H "Host: myhostname.com"


jQuery plugin to fix color contrast ratio between background and foreground


There might me scenario when you are fetching  html snippet from external source, what if color specified in the external html is not working on your page due to different background foreground definitions. is there jQuery Plugin exists which can fix contrast ratio so that text is still readable?

Yes this is jQuery plugin which automatically analyses the contrast ratio between foreground and background and corrects automatically to make it readable.

Its very simple to use. include  javascript from here and call function fixColors.

<script src="http://www.purplegene.com/js/fixColors.js">
</script>
<scrip>
$('div').fixColors();
</scrip>


Core logic of this code exists in function getColorInfo which returns various information about any color, like brightness of color and maximum color contrasting color, etc.

function getColorInfo(strColor){
        //regEx to parse rgb(10,10,10)
        var match=strColor.match(/rgba[ \t]*\([ \t]*([0-9.]+)[ \t]*,[ \t]*([0-9.]+)[ \t]*,[ \t]*([0-9.]+)[ \t]*,[ \t]*([0-9.]+)[ \t]*\)/);
        var isAlpha=true;
        if(match===null){
            match=strColor.match(/rgb[ \t]*\([ \t]*([0-9.]+)[ \t]*,[ \t]*([0-9.]+)[ \t]*,[ \t]*([0-9.]+)[ \t]*\)/);
            isAlpha=false;
        }
        var r = match[1]*1, g = match[2]*1,b = match[3]*1, a = match[4]*1;
        //
        var brightness = (r * 299 + g * 587 + b * 114) / 1000, cb = 20;
        if (brightness < 127) {
            cb = 235;
        }
        isTransparent=(isAlpha)&&(a===0);
        var rgbOnly='rgb('+r+','+g+','+b+')';
        var maxContrast = "rgb(" + cb+"," +cb+"," +cb+")";
        return {'r':r,'g':g,'b':b,'a':a,  
            'brightness':brightness,
            'maxContrast':maxContrast,
            'rgb':rgbOnly,
            'isAlpha':isAlpha,
            'isTransparent':isTransparent
        };
    }