Having fun while designing WordPress theme with dual monitor and live.js

I never thought that dual monitor will be very productive and fun. I don’t even open several windows in my monitor because it’s too distracting. I always open each window in full screen.  But not anymore with live.js and dual monitor.  It’s really fun !

Why I use dual monitor for WebDesign

Rainy season is coming here in Indonesia. It’s humid, hot, mosquitos, and that’s not the worst part. The worst part is the electricity going to be down a lot. Daily black out is common here.

When electricity is down, I can’t work on my computer, no battery :). So recently i decided to retire my PC as my main computer and use my netbook as my main computer. It’s a tough decision, because my laptop is a netbook, and that means low-spec.

I use Asus EEEPC 1025CE with 10 inch monitor, 1024x600px res, 1.86 Dual Core Intel Atom Processor, 2GB of RAM, 256MB of VRAM. I can’t use Windows 8, resolution is too low, It’s slugish using Windows 7, even on Ubuntu, so I downgrade it to Windows XP. And it’s perfect. (it takes whole night to hunt for the the drivers, btw)

I bought it because of the 12 hour battery life (actually it’s only about 7-9 hours). Hopefully it’s durable, I own another Asus EEEPC, bought it 5 years ago and it’s still kickin’. And of course it’s very cheap. I only use it to code on the go anyway. I don’t really need high spec mechine. And i prefer netbook than tablet. If i have the time, i might upgrade the HDD to SSD. I hate Hard Drive for mobile device, it doesn’t make sense.

Dual Monitor for Web Design

Because 1024x600px is too small and limiting to do real designing (perfect for coding, btw). I plug my monitor in, and set it as secondary monitor. Play with it for a while, and found a nice small windows application for dual monitor, and found that i can put the browser in one monitor and notepad++ on the other monitor to edit the stylesheet. The problem is i still need to refresh the browser every time i save changes.

Live.js and WordPress Theming

But then the I found live.js, a javascript to reload the CSS file everytime i save the changes, and reload the page everytime I save the javascript. All i need to do is to load the script.

How i load live.js in my dev WordPress install

To load the script i  save live.js script and add it in my local xampp install so i can reuse it in multiple local install. and create a file in Must Use Plugins directory.

 <?php

/* Enqueue Scripts */
add_action( 'wp_enqueue_scripts', 'my_mu_plugin_auto_refresh_live_js' );

/**
 * Live JS on front end
 * @link http://livejs.com/
 */
function my_mu_plugin_auto_refresh_live_js() {

    /* located in htdocs/_html/_resources */
    wp_enqueue_script( 'my-mu-live-refresh', 'http://html.dev/_resource/livejs/live.js', array(), '4', false );
}

Now every time i need to use the script in my local development i just copy the file to mu-plugins directory. Easy and fast.

But always remember not to include the file and load live.js in your live site! the script is only for development in your local computer.

Other Resources for live browser refresh

Maybe this solution is not for you. While looking for browser auto refresh solution i found other solution, here’s the list:

1. LiveReload ( formerly XRefresh (?) ): it’s for Mac and it’s premium.
2. Notepad++ Document Monitor add-on.
3. AutoReload Firefox add-on.
4. Tincr Chrome add-on.

I didn’t try any of the solution above, in my opinion live.js is the easiest solution, It’s portable, I can use any browser, and that’s what i need. Probably the best solution for live browser refresh for web development.