Adding a display over network !

| MAD Blog

You are doomed if your laptop has only one HDMI Port & you are running Linux in that box.

Unlike windows – where there are tons of easy to run solution, & there are still tons of solutions if you have big numbers in your pocket.

Certainly – I neither wish to spend money on external VGA/HDMI extender or docking station nor to change OS. So after googling a lot I discovered a solution which utilized a different machine to act as the streaming client. You can use RPI or an old p4 machine.

Below is how it works.

  1. Adds a virtual display on your machine, usually all graphics card support at least one virtual display.  You do all this using xrandr
  2. Create a VNC Server to stream that display – but since you cannot each time run two commands just to connect display – we are running VNCViewer in listen mode
  3. Connect to vnc viewer & keep running it in the background.

You Laptop —[Display Data]—> Network —-> VNCViewer

As suggested above you data is being streamed over the network ¬†– you cannot run 4k data. But if you have good Lan speed you won’t face any problem.

I have also optimized settings for best experience – so far I can use terminal, watch videos – the only drawback is you feel the lag when you use keyboard or mouse for realtime feedback.

In Client Machine, i.e. your laptop.

You will need to install x11vnc & screen

#!/bin/bash
#Run VNC server in remote device. 10.0.0.2 is my machine which has monitor connected.
ssh  [email protected] "nohup /root/vncserver.sh > /dev/null 2>&1 &"
xrandr --addmode VIRTUAL1 1920x1080
xrandr --output VIRTUAL1 --mode 1920x1080 --right-of eDP1 # find your main display
screen -X -S vnc quit
killall x11vnc
# adjust postion 1920x1080+3511+180, i.e. 3511+180 accordingly
# i have different resultion display so had to move.
screen -dmS vnc  x11vnc -connect 10.0.0.2:5500  -display :0 -clip 1920x1080+3511+180 -wirecopyrect  -viewonly --nossl -ncache 10 -ncache_cr

In server Machine (LAN address 10.0.0.2)

if [[ $(ps -ef | grep -c vncviewer)  -ne 1 ]];
then
    echo "Running"
else
   export DISPLAY=:0.0;
    vncviewer -listen 0 -fullscreen -owncmap -viewonly;
fi

You will need to install VNC Viewer in client side.

Just Another DIY “Smart” Watch

Note : This article was written after project was partially completed, so i don’t have better images.

There are hundred’s of projects for building “Smart watch using arduino”, I have curated a list of better projects at end of this article. I didn’t plan to copy any of given projects but at end it turned out that world is a big place. So this blog post is my effort in developing “My smartwatch”.

Hardware :

  1. Arduino Pro mini
  2. Bluetooth module (HC-05)
  3. OLED Module (SSD1306)
  4. LiPo Battery (110 mAh)
  5. Thin copper wire, single strand if possible.
  6. FTDI Breakout board or any way to program Arduino pro mini.
  7. Micro USB female pins
  8. Membrane Tape

Tools :

  • Soldering iron – along with soldering wire, flux, etc.
  • 3d Printer/Good Crafting Skills to make a case
  • Working brain ! (Recommended)

Software :

  • Android Phone (BTTerm) /Linux System(minicom, rfcomm), Windows Phone, Windows *, Mac OS Users are on their own but you can search for “Bluetooth serial terminal”
  • Arduino IDE
  • Common Sense ! (Recommended)

The guide here is definitely not a step by step guide, it just tells the flow (an algorithm not code).

  1. Desolder pins in your OLED display. Yea, all header pins.. for noobs like me it’s a tough task.| MAD Blog
  2. Desolder pins of HC-05/HC06 if it has, if you got module without header, skip
  3. Connect all GND, VCC pins of arduino, hc-05, oled Easy ?
  4. Solder oled pins SCL -> A5, SDA -> A4  to arduino.
  5. Solder hc-05 pins  TX -> 10, RX -> 11  to pro mini.
  6. Then Solder VCC with a switch (Any you prefer) & to battery.
  7. Upload the code
  8. Connect to HC-05 using phone & send any data.

| MAD Blog
HC-05 Soldered
| MAD Blog
Oled, HC-05, ProMini Stacked.
| MAD Blog
Everything stacked Packed
| MAD Blog
Back View
| MAD Blog
Front View
| MAD Blog
| MAD Blog
| MAD Blog

Click here to watch working video.

Below is arduino code :

#include "U8glib.h"

U8GLIB_SSD1306_128X64 u8g(U8G_I2C_OPT_NO_ACK);	// Display which does not send AC

#include <SoftwareSerial.h>
// software serial #1: RX = digital pin 10, TX = digital pin 11
SoftwareSerial bluetooth(10, 11);
#define buflen 10
 char str[buflen+1];
 int strCount=0;


// setup input buffer
#define LINE_MAX 30 
uint8_t line_buf[LINE_MAX] = "Booting...";
uint8_t line_pos = 0;

// setup a text screen to support scrolling
#define ROW_MAX 12


uint8_t screen[ROW_MAX][LINE_MAX];
uint8_t rows, cols;

// line height, which matches the selected font (5x7)
#define LINE_PIXEL_HEIGHT 7

// clear entire screen, called during setup
void clear_screen(void) {
  uint8_t i, j;
  for( i = 0; i < ROW_MAX; i++ )
    for( j = 0; j < LINE_MAX; j++ )
      screen[i][j] = 0;  
}

// append a line to the screen, scroll up
void add_line_to_screen(void) {
  uint8_t i, j;
  for( j = 0; j < LINE_MAX; j++ )
    for( i = 0; i < rows-1; i++ )
      screen[i][j] = screen[i+1][j];
  
  for( j = 0; j < LINE_MAX; j++ )
    screen[rows-1][j] = line_buf[j];
}

// U8GLIB draw procedure: output the screen
void draw(void) {
  uint8_t i, y;
  // graphic commands to redraw the complete screen are placed here    
  y = 0;       // reference is the top left -1 position of the string
  y--;           // correct the -1 position of the drawStr 
  for( i = 0; i < rows; i++ )
  {
    u8g.drawStr( 0, y, (char *)(screen[i]));
    y += u8g.getFontLineSpacing();
  }
}

void exec_line(void) {
  // echo line to the serial monitor
  Serial.println((const char *)line_buf);
  
  // add the line to the screen
  add_line_to_screen();
  
  // U8GLIB picture loop
  u8g.firstPage();  
  do {
    draw();
  } while( u8g.nextPage() );
}

// clear current input buffer
void reset_line(void) { 
      line_pos = 0;
      line_buf[line_pos] = '\0';  
}

// add a single character to the input buffer 
void char_to_line(uint8_t c) {
      line_buf[line_pos] = c;
      line_pos++;
      line_buf[line_pos] = '\0';  
}


void setup(void) {
  Serial.begin(9600);
  bluetooth.begin(9600);
  Serial.print("Hello");
//  bluetooth.println("Hi");
    
//     u8g.firstPage();  
//     u8g.drawStr( 0, 0, "Booting..");
// set font for the console window
  u8g.setFont(u8g_font_5x7);
  //u8g.setFont(u8g_font_9x15);
  
  // set upper left position for the string draw procedure
  u8g.setFontPosTop();
  
  // calculate the number of rows for the display
  rows = u8g.getHeight() / u8g.getFontLineSpacing();
  if ( rows > ROW_MAX )
    rows = ROW_MAX; 
  
  // estimate the number of columns for the display
  cols = u8g.getWidth() / u8g.getStrWidth("m");
  if ( cols > LINE_MAX-1 )
    cols = LINE_MAX-1; 
  
  clear_screen();               // clear screen
  delay(1000);                  // do some delay
  exec_line();                    // place the input buffer into the screen
  reset_line();                   // clear input buffer
}


void loop(void) {
  
   // Keep reading from HC-05 and send to Arduino Serial Monitor
  if (bluetooth.available()){
    char c = bluetooth.read();
    Serial.write(c);
//    uint8_t c;
    
    if ( line_pos >= cols-1 ) {
      exec_line();
      reset_line();
      char_to_line(c);
    } 
    else if ( c == '\n' ) {
      // ignore '\n' 
    }
    else if ( c == '\r' ) {
      exec_line();
      reset_line();
    }
    else {
      char_to_line(c);
    }
}
  if (Serial.available())
    bluetooth.write(Serial.read());

}


As told initially my build is not the best one, there are people with better electronics & better output check these :

http://www.instructables.com/id/Make-your-own-smart-watch/?ALLSTEP

http://makezine.com/projects/make-43/open-source-smartwatch/

http://www.tinkernut.com/portfolio/make-smartwatch-old-cell-phone-part-1/

http://oswatch.org/mkII_build_page_1.php

https://hackaday.io/project/12876-chronio

http://blog.zakkemble.co.uk/diy-digital-wristwatch/

Kindle Universal Dashboard

Kindle is Super awesome !

Because of its e-ink display. I wanted a display to¬†present data which has¬†– Least power consumption, Not painful to eyes & obviously one which doesn’t emit blue light.
E-Ink displays fit perfectly to my requirement – acquiring a display which can be driven using Raspberry Pi or Arduino is hard, size/cost ratio is much higher.

On googling I found some display modules which were more or near to 70-80$ – even smaller display – which impulsed me to get a Kindle Touch (8th Generation) at around 74$ approx.

Kindle - MadhurendraKindle comes with an experimental browser but it is narrowed version of WebKit, which is pretty useful if you want to display static content or just want to make a control panel, it can easily render normal websites which use js/CSS & works pretty well.¬†But support for HTML5 is almost absent¬†– so you can’t use WebSockets to push data, using long polling/fast polling is only solutions so far.

Moreover, there was another problem which I had to fix¬†–¬†Kindle has fixed timeout which sends it to sleep mode – for mine it was 10min, after digging I found you can use `~ds` or similar but for me, nothing worked.

We can only hope that support to remove timeout or change timeout period will be added in future releases. I think old kindle supports.

If you can’t change timeout or you want to use few other features I suggest you to jailbreak. Follow steps mentioned here¬†http://www.mobileread.com/forums/showthread.php?t=275877 , Don’t jump, It works for kindle touch 8th generation. Tried, tested, working ! ¬†For KT3 you will need to install¬†MRPI along with¬†KUAL. Once done your kindle is officially out of warranty¬†ūüėÄ . Post that you need to install¬†USBNet¬†– it will ¬†allow you to ssh to your kindle. ¬†All this will allow you to execute “lipc-set-prop com.lab126.powerd preventScreenSaver 1″ this on the kindle. It will simply disable screensaver. ūüôā

Once you have your kindle whose screen doesn’t lock¬†you can simply go & execute ¬†a simple nodejs script to push data.

Note : Kindle doesn’t support¬†WebSocket & none of transport methods in socket.io except “polling”.¬†

Below is nodejs server code :

var http = require('http'),
	fs = require('fs');
	//sanitize = require('validator').sanitize;
	
var app = http.createServer(function (request, response) {
	fs.readFile("client.html", 'utf-8', function (error, data) {
		response.writeHead(200, {'Content-Type': 'text/html'});
		response.write(data);
		response.end();
	});
}).listen(1337);

var io = require('socket.io')({
    "polling duration": 60,
    'log level' :1
}).listen(app);

io.set('transports', [ 'polling']);

io.sockets.on('connection', function(socket) { 
	socket.on('message_to_server', function(data) { 
		var escaped_message = (data["message"]);
		io.sockets.emit("message_to_client",{ message: escaped_message }); 
	});
});

Below is code of client.html

<!DOCTYPE html>
<html>
	<head>
		<script src="/socket.io/socket.io.js"></script>
		<script type="text/javascript">
			var socketio = io.connect();

			socketio.on("message_to_client", function(data) {
				document.getElementById("chatlog").innerHTML = ("<hr/>" + data['message'] + document.getElementById("chatlog").innerHTML);
			});

			function sendMessage() {
				var msg = document.getElementById("message_input").value;
				socketio.emit("message_to_server", { message : msg});
			}
		</script>
	</head>
	<body>
		<input type="text" id="message_input"/>
		<button onclick="sendMessage()">send</button>
		<div id="chatlog"></div>
	</body>
</html>

Voila – It works !

Below is video of working ¬†in case you want to see demo before getting hands dirty ūüôā

Warning & Update : This method might consume more power than expected, as experimental browser has loading status Рwhich continuously refreshes a section of the screen. To overcome this problem I will be polling server with long interval difference Рwhich will be adjustable by the server.

Note for nerds :¬† Since this method uses browser – it’s more flexible – but if you are possessive about power consumption & screen space – You can use JAVA to develop kindlet application. Lightweight pub/sub protocols like MQTT¬†should help you in the¬†way.


photo_20161030_124622Designing a wall holder : 
You can google for covers or design own or use some double sided foam tape. Since i had access to 3d printer i got two of http://www.thingiverse.com/thing:832273 printed & hung it on the wall Рit just helped me in reading few books apart from using it only as display. SWAP!    

Use it as :

  • Scoreboard
  • Notification
  • Weather system
  • Wallpaper slideshow
  • News/RSS feeds display
  • Home automation control
  • Anything
  • Book reader ūüôā

At the end, even if you place it behind your monitor it won’t hurt or push the new data to your eyes & spoil the code castle you were building.

Custom Nginx with PageSpeed

Pulling nginx from source, customizing & auto updating across servers is a pain,  We use pagespeed & custom header modules across all our servers, it autominifies resources & increases page performance without giving pain.

Below is script we use :

Continue reading

Offline Wikipedia with Elasticsearch and MediaWiki

Wikipedia is Awesome ! It’s open, its free – Yea. & its huge in size, millions of articles¬†¬†but as developer how to exploit the free knowledge.

I started digging internet just to find ways to exploit my fresh 9+ GB of XML Gzipped archive which seemed to me of no use as even a simple text editor can’t open it. (Just out of excitement what’s inside, how its structured, Schema ! )

Luckily people have already imported it. Elasticsearch is fast, reliable & its good for searching, so https://github.com/andrewvc/wikiparse was a saver.

  • Installed elastic search
  • Ran command to import

it took almost 48 hour in an i5, with 8gb ram – where mistake was i used same harddisk for data storage & database. Time might vary.

Data was imported but its still of no use ! Why ? Its in text/wiki format, parses is needed.

After doing search only solution i found was using mediawiki api, which is in PHP there were lots of things missing as its only for mediawiki but not for parsing plain text. (Though i didn’t spend much time in learning internal API)

I quickly downloaded mediawiki, ran nginx with php, installed it & used API.php.
it was good to see my offline API too, but still many things were missing, confusing, API has hard to modify structure. So i created a parse.php

<?PHP
header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: GET, POST');  
header('Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept, Key');

function fixLink ($this, $nt, $section, $tooltip, &$result)  {
		$linkName = "editSection-$section"; // the span around the link
		$anchorName = "editSectionAnchor-$section"; // the actual link anchor, generated in Linker::makeHeadline
		$chromeName = "editSectionChrome-$section"; // the chrome that surrounds the anchor	
		$result = preg_replace('/(\D+)( title=)(\D+)/', '${1} class=\'editSectionLinkInactive\' id=\'' . $anchorName . '\' onmouseover="editSectionHighlightOn(' . $section . ')" onmouseout="editSectionHighlightOff(' . $section . ')" title=$3', $result);
		$result = preg_replace('/<\/span>/', '<span class="editSectionChromeInactive" id=\'' . $chromeName . '\'>&#8690;</span></span>', $result);
		// while resourceloader loads this extension's css pretty late, it's still
		// overriden by skins/common/shared.css.  to get around that, insert an explicit style here.
		// i'd welcome a better way to do this.
		$result ='';
		return true;
	}


require(dirname(__FILE__) . '/includes/WebStart.php');

$wgHooks['DoEditSectionLink'][] = 'fixLink';

//include("api.php");

$output = $wgParser->parse(
    $_POST['text'],
    Title::newFromText('Some page title'),
    new ParserOptions());
   
echo json_encode(array('html'=>$output->getText()));

So all steps were :

NodeJs – Improving performance using native binding

This is known fact that javascript is really slow in terms of sync operations like multiplications, divisions etc. – Since nodejs is based on js – Node inherits the curse.
Check http://benchmarksgame.alioth.debian.org/u64/compare.php?lang=v8&lang2=gpp this article to cross check the fact. Nodejs is fast in some aspects. I love it ūüėõ

Doesn’t matter how much you improve your algorithm but c++ will outperform if you are running a sophisticated algorithm but one can push through imprecation.
Nodejs is based on V8 (Most ports), v8 based on C++, You must be already aware of that you can use C++ in nodejs – But it seems complex.

But it is not – It is easy to build a native extension & compile in seconds https://medium.com/@devlucky/how-to-get-a-performance-boost-using-node-js-native-addons-fd3a24719c85#.3uzqa9r4w this article does well in explaining basics. but if you want to dive deep check official documentation.

if you want a really explanatory presentation check https://ivanvergiliev.github.io/node-cpp/#opening.

Email Spoofing – Why its dead !

There was a time, when mail spoofing was an art, was a thing to impress people, was a way to phish attack someone.
With increasing intelligence in spam filters – it became harder, you need good IP reputation to deliver mail to box.
But now it has become almost impossible to spoof address like [email protected] . Why ? Have computer turned intelligent ? No.

The problem of spam protection isn’t new to market. So people came up with DNS based solutions which can allow sender to list IP addresses authorized to send mails.
“Sender Policy Framework (SPF) for Authorizing Use of Domains in E-Mail” – You can read rfc at https://www.ietf.org/rfc/rfc4408.txt (if you want to dig).

The standard was good, Not good it was best! It block all ways to prank people, but mails were still being delivered, because Network administrator weren’t smart enough to add all server. So as workaround big providers ran algorithms on top to make sure genuine mails which are failing spf are not delivered to spam.

This is all good – but for hardcore phishers it became little hard, people do check mails regularly & getting into network is just distributing malware.
Attacker can perform MITM alter content of mail while its being delivered.

There wasn’t any check.

Solution was DKIM – DomainKeys Identified Mail (DKIM) Signatures , it allows all mail servers to sign messages & certain header fields using defined hashing algorithms & verification using public/private key. Public key is published as DNS record, but private key is kept private.

Acquiring private key is little hard. Its hardest thing. You need to regulate keys to make sure that no one cracks it – if you keep key size 2048 it will make mail delivery slow, if you keep it 512bit with present computing its easy to crack.

DKIM provides way to authorize only certain application to send mail, but there was still no way to get reports on how effective is measure, how many mails are being spoofed & what to do with spoofed mails.

Mails were being delivered even after DKIM failure.

People came with DMARC standard – again it was published using DNS TXT record – it helps in getting reports & also blocking mails. Check the rfc at https://datatracker.ietf.org/doc/rfc7489/

Certainly as every security system comes with an overhead, These standard make mail processing resource intensive. There are many ways to reduce processing cost keeping security upto-date.

There were many spamming attacks originating on behalf of our site, post implementation of DMARC using DMARC Plus, they almost reduced 80% after few months.

One thing to note – if you make a single mistake in any of DNS record you can miss all your mails – So its better to take advice from someone who knows Standard well & can help you in deploying. Make sure you go Slow…

Website Optimization – Cache Cache Cache !

You must have heard about cache in web (caches are everywhere in computer science), most times you find it really buggy when changes aren’t reflected as soon as you make them.
For sites with small traffic these things are buggy – but they contribute a major in server traffic when you have a million hits even a thousand.

From server to browser what what we can cache ? & why to cache ?

  1. Enabling code caching – if you are running nodejs server etc things are in your favour because process is running & its already using existing variables still you should make sure that you don’t fetch/store too much data – you should implement cache in your code AND if you are using php or similar scripting language – let me tell you things are really slow – each time you make a request if apache – php thread is spawned, nginx a new thread along with socket is created – PHP code is compiled to opcode & then executed, That’s a lot – You can use opcaches or APC for optimizing php script. Alternatives may follow other languages.
  2. Caching static content – Since static content are not changing every other minute or day – most files are kept as it is for years!, you should tell your server that these contents are rarely changed – Check nginx cache config & Apache cache config
  3. Setting cache expiry header – This one is definitely under you control doesn’t matter if you are in shared hosting or running own server. You should send cache expiry header with all static content. Basically cache expiry tells browser to keep the file for next n days – though it is not strict , browsers send head request to see if file is changed or not.
  4. Offline Storage/WebSQL/Offline Application – Yes, You read it right – You can use offline storage to cache insensitive data on users browser only – this will reduce load on server & data transferred – you can even cache js & css.
  5. CDN – Content delivery networks can also help you a lot in caching – since libraries like jquery, bootstrap etc are so common today if you use CDN your page might not need to load JS & CSS, This is because that file might already exists in browser cache when some other website requested it. You should Thank to other guy – someday other guy will thank you.

Website Optimization – Minfiying Output using PHP

Minification is technique used in which we remove all unnecessary Whitespaces Which include tab, space, newline, carriage return etc. This is done just to reduce data transfer.
Since not everyone is serving a million hits a seconds – minifying html doesn’t help much, Instead enabling GZIP compression is a better technique.

Apart from this – minifying css & js help in reducing number of requests – this reduces number of http connection created to serve a client hence reducing load on server.

These advantages are only a small part of web optimization process but still it is adopted widely – Why ? – Show off !, Make code unreadable, looks cool!.
Though server level optimizations ( like – GZIP, Cache proxy for static content, Apache vs Nginx, CDN, Server location, Number of DNS lookup, Serving content based on user device etc.) work better than just compressing code & uploading.
As an example – there is latency of 400+ ms from India to NY, while 100+ ms for Singapore from India – if we have 10 request per page using singapore server will save 3sec!.

I think i am diverging from main 0bj3ct!v3 of this article. Coming back to minification everyone wants their code to look cool. So recently i’ve been working on college fest site & had idea to minify the code. Did google search & finally came up with following code !

Just including the below code makes the html one-liner & cool.
This is just an application of output buffer, you can do really cool things by handling output buffer.

You can read more about ob_start here, its really interesting.

Note: This code has methods to minify css & js – They are just for reference. I suggest using Grunt with cleancss & uglifyjs, or either. Also you should not use this technique in sites with heavy traffic – it will increase load on server, reduce response time.

<?PHP

//buffer & process all the output using minify_html.
ob_start("minify_html");

function minify_html($input) {
    if(trim($input) === "") return $input;
    // Remove extra white-space(s) between HTML attribute(s)
    $input = preg_replace_callback('#<([^\/\s<>!]+)(?:\s+([^<>]*?)\s*|\s*)(\/?)>#s', function($matches) {
        return '<' . $matches[1] . preg_replace('#([^\s=]+)(\=([\'"]?)(.*?)\3)?(\s+|$)#s', ' $1$2', $matches[2]) . $matches[3] . '>';
    }, str_replace("\r", "", $input));
    
    // Minify inline CSS declaration(s)    
    if(strpos($input, ' style=') !== false) {
        $input = preg_replace_callback('#<([^<]+?)\s+style=([\'"])(.*?)\2(?=[\/\s>])#s', function($matches) {
            return '<' . $matches[1] . ' style=' . $matches[2] . minify_css($matches[3]) . $matches[2];
        }, $input);
    }
    return preg_replace(
        array(
            // t = text
            // o = tag open
            // c = tag close
            // Keep important white-space(s) after self-closing HTML tag(s)
            '#<(img|input)(>| .*?>)#s',
            // Remove a line break and two or more white-space(s) between tag(s)
            '#(<!--.*?-->)|(>)(?:\n*|\s{2,})(<)|^\s*|\s*$#s',
            '#(<!--.*?-->)|(?<!\>)\s+(<\/.*?>)|(<[^\/]*?>)\s+(?!\<)#s', // t+c || o+t
            '#(<!--.*?-->)|(<[^\/]*?>)\s+(<[^\/]*?>)|(<\/.*?>)\s+(<\/.*?>)#s', // o+o || c+c
            '#(<!--.*?-->)|(<\/.*?>)\s+(\s)(?!\<)|(?<!\>)\s+(\s)(<[^\/]*?\/?>)|(<[^\/]*?\/?>)\s+(\s)(?!\<)#s', // c+t || t+o || o+t -- separated by long white-space(s)
            '#(<!--.*?-->)|(<[^\/]*?>)\s+(<\/.*?>)#s', // empty tag
            '#<(img|input)(>| .*?>)<\/\1>#s', // reset previous fix
            '#(&nbsp;)&nbsp;(?![<\s])#', // clean up ...
            '#(?<=\>)(&nbsp;)(?=\<)#', // --ibid
            // Remove HTML comment(s) except IE comment(s)
            '#\s*<!--(?!\[if\s).*?-->\s*|(?<!\>)\n+(?=\<[^!])#s'
        ),
        array(
            '<$1$2</$1>',
            '$1$2$3',
            '$1$2$3',
            '$1$2$3$4$5',
            '$1$2$3$4$5$6$7',
            '$1$2$3',
            '<$1$2',
            '$1 ',
            '$1',
            ""
        ),
    $input);
}
// CSS Minifier => http://ideone.com/Q5USEF + improvement(s)
function minify_css($input) {
    if(trim($input) === "") return $input;
    return preg_replace(
        array(
            // Remove comment(s)
            '#("(?:[^"\\\]++|\\\.)*+"|\'(?:[^\'\\\\]++|\\\.)*+\')|\/\*(?!\!)(?>.*?\*\/)|^\s*|\s*$#s',
            // Remove unused white-space(s)
            '#("(?:[^"\\\]++|\\\.)*+"|\'(?:[^\'\\\\]++|\\\.)*+\'|\/\*(?>.*?\*\/))|\s*+;\s*+(})\s*+|\s*+([*$~^|]?+=|[{};,>~+]|\s*+-(?![0-9\.])|!important\b)\s*+|([[(:])\s++|\s++([])])|\s++(:)\s*+(?!(?>[^{}"\']++|"(?:[^"\\\]++|\\\.)*+"|\'(?:[^\'\\\\]++|\\\.)*+\')*+{)|^\s++|\s++\z|(\s)\s+#si',
            // Replace `0(cm|em|ex|in|mm|pc|pt|px|vh|vw|%)` with `0`
            '#(?<=[\s:])(0)(cm|em|ex|in|mm|pc|pt|px|vh|vw|%)#si',
            // Replace `:0 0 0 0` with `:0`
            '#:(0\s+0|0\s+0\s+0\s+0)(?=[;\}]|\!important)#i',
            // Replace `background-position:0` with `background-position:0 0`
            '#(background-position):0(?=[;\}])#si',
            // Replace `0.6` with `.6`, but only when preceded by `:`, `,`, `-` or a white-space
            '#(?<=[\s:,\-])0+\.(\d+)#s',
            // Minify string value
            '#(\/\*(?>.*?\*\/))|(?<!content\:)([\'"])([a-z_][a-z0-9\-_]*?)\2(?=[\s\{\}\];,])#si',
            '#(\/\*(?>.*?\*\/))|(\burl\()([\'"])([^\s]+?)\3(\))#si',
            // Minify HEX color code
            '#(?<=[\s:,\-]\#)([a-f0-6]+)\1([a-f0-6]+)\2([a-f0-6]+)\3#i',
            // Replace `(border|outline):none` with `(border|outline):0`
            '#(?<=[\{;])(border|outline):none(?=[;\}\!])#',
            // Remove empty selector(s)
            '#(\/\*(?>.*?\*\/))|(^|[\{\}])(?:[^\s\{\}]+)\{\}#s'
        ),
        array(
            '$1',
            '$1$2$3$4$5$6$7',
            '$1',
            ':0',
            '$1:0 0',
            '.$1',
            '$1$3',
            '$1$2$4$5',
            '$1$2$3',
            '$1:0',
            '$1$2'
        ),
    $input);
}
// JavaScript Minifier
function minify_js($input) {
    if(trim($input) === "") return $input;
    return preg_replace(
        array(
            // Remove comment(s)
            '#\s*("(?:[^"\\\]++|\\\.)*+"|\'(?:[^\'\\\\]++|\\\.)*+\')\s*|\s*\/\*(?!\!|@cc_on)(?>[\s\S]*?\*\/)\s*|\s*(?<![\:\=])\/\/.*(?=[\n\r]|$)|^\s*|\s*$#',
            // Remove white-space(s) outside the string and regex
            '#("(?:[^"\\\]++|\\\.)*+"|\'(?:[^\'\\\\]++|\\\.)*+\'|\/\*(?>.*?\*\/)|\/(?!\/)[^\n\r]*?\/(?=[\s.,;]|[gimuy]|$))|\s*([!%&*\(\)\-=+\[\]\{\}|;:,.<>?\/])\s*#s',
            // Remove the last semicolon
            '#;+\}#',
            // Minify object attribute(s) except JSON attribute(s). From `{'foo':'bar'}` to `{foo:'bar'}`
            '#([\{,])([\'])(\d+|[a-z_][a-z0-9_]*)\2(?=\:)#i',
            // --ibid. From `foo['bar']` to `foo.bar`
            '#([a-z0-9_\)\]])\[([\'"])([a-z_][a-z0-9_]*)\2\]#i'
        ),
        array(
            '$1',
            '$1$2',
            '}',
            '$1$3',
            '$1.$3'
        ),
    $input);
}

Maintaining JS Libs – Changing bower path

If you are web developer it becomes hard to manage all js libraries if you aren’t using any package manager.
Few folks created bower to make the job easier. (As far as functionality is concerned, it works same as npm, if you have used.)

Steps for installations are just for linux guys – windows people – DIY.

First you need to install npm `sudo apt-get install npm`
You can install it by `sudo npm install -g bower`

Once you have installed bower, You can install a web package, just by executing following command in the directory of project –

`bower install jquery`

You can even use your own git repository as source or any other url

`bower install https://github.com/jquery/jquery.git#2.0.3`

Above command will install jquery for your project.

Once you have installed it successfully things will be kept in
`bower_components/jquery`
you can refer it by
`bower_components/jquery/dist/jquery.js`. Simple. That’t it ?

No.

if you are like me – possessive about your directory structure – You want everything inside something like `assets/lib/jquery/dist/jquery.js`, or simply want it inside `assets/lib` directory instead of too many file/directory in root.

You can create a file in root of project `.bowerrc`, put following content inside the file
`{
“directory” : “assets/lib”
}
`

Since filename begins with `.` it will be hidden in file browsers, clean.

Again – do you find these long assets path annoying ? – `Grunt` to rescue – check http://bower.io/docs/tools/#grunt