markandey.com by Mobify

Sublime Text Editor (screen cast)

Sublime text is really nice editor . Watch the screenshot to see some awesome features of it.

Open File Command Window (type text for file name and @ for function : for line number)	cmd+p
Open command Window (Package Controll etc.)	cmd+shift+p
Shortcuts To Remember
Find:	cmd+f
Find Selection (quick find)	cmd+alt+G
Swap Line	ctr+cmd+down
Multi Column Selection	ctrl+shift+up/down
Scope Selection	cmd+shift+space
Brackets Select	ctrl+shit+M
Indentation Select	cmd+shift+j
Tag Select	cmd+shift+a
Line Select	cmd+L

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);

Demo-0

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.

Fork on GitHub

Curl Request with custom IP and hostname (in php)

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

Scenarios

If host-name used in RequestURL, is not in public domain.
If you are trying to avoid load balancer routing, while curling to a local domain.
If single server serves multiple hostnames, and hostnames are not yet registered.

Here is what you have to do!!

Curl with url by IP-Address. (that might return 400 error if server is serving multiple domain.)
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>

Here is plugin page

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 }; }

fork github Repo

This is how to fake Siri on chrome

When Apple declared Siri , everyone knew that siri is not magical, all technology involved in siri is already present. Here is how you can make your own.

Voice Recognition
Voice input is a proposed HTML5 feature by Google. Its already experimentally available in latest versions of chrome.

<input id="speech" type="text" x-webkit-speech onspeechchange="startSearch">

Intelligence with Wolfram Alpha
Wolfram Alpha is one of the most awesome search engine (or Computational Knowledge Engine in their terms). They have open API to make your own app.

"http://api.wolframalpha.com/v2/query?"+q+"&appid="+key;

Text-To-Speech
Recently chrome brought up the tts support in its chrome extension, which can be used to give voice to you Siri hack.

chrome.tts.speak(
    utterance,
    options,
    function() {
      if (chrome.extension.lastError) {
        console.log('Error: ' + chrome.extension.lastError.message);
      }
    });

Demo