New Year, New Theme

The new year is a good excuse to enable a new theme. I downloaded a ThemeHall theme and tweaked it a bit.

I wanted to have a twitter link in the WordPress ‘Tagline’ but it escapes all HTML, I’ve modified the theme to allow it, but not cleanly. I wonder if there’s a nice way?

The new theme installation gave me an excuse to test a plugin I’ve been wanting create. A full background image ‘mega compressor’ that fades nicely into the full high res image once loaded. My aim is to get the initial page load to be fast, but without the annoying background image pop-in.

I initially wanted to simply set a background image in css, load the high-res one in JavaScript then set the background-image of the body to the high res one. The browser would then use the CSS3 transition to animate it nicely. Unfortunately only Chrome supports doing transitions on the background-image element. Never mind. You can see an example of Chrome Background-image transitions

So I’ve had to use jQuery to create a temporary div, that’s set to the low res, and then faded out over the body with the high res image. Its live on this blog, you can do a few force refreshes to see it in action.

The actual JavaScript isn’t really the bit I was most interested in, it was actually the server side where it would automatically blur and mega compress an image, send that to the client and automatically fade in the high res on load.

jQuery code below, remember to set body to the initial low resolution image using CSS.

Code of Christmas – Koa

The Code of Christmas is Koa, a Node.js middleware. It’s created by the same people as Express, and it seems this is the direction the developers want to take. Its hard to tell at the moment if Express will be continually developed or if you will need to move to Koa.


By far the largest change is the use of generators, this removes the usual ‘Callback hell’ that express apps can face. They say that performance very similar, but reading and writing code is much improved. The main problem I see with this, is that generators are so new in JavaScript you need to run node with the –harmony flag.

Its only recommended you use Koa for new projects, as it will be a lot of work moving express apps over.

I’m going to stick with express until Koa has been out a little longer, and hopefully can be run without any additional flags being needed to be set.


Code of the week – Joy.js

This week its Joy.js the HTML5 2D game engine. It allows you to quickly and easily get a basic 2D game or animation going.

It includes a keyboard control library, particle effects, sprites and many more out of the box.  I’m currently using it to make a little Christmas animation. More on that shortly..

New WordPress 3.8

This blog is now running WordPress 3.8. Swanky admin area. I like it.

I’ve also enabled the ‘Twenty Fourteen’ theme, which looks very modern. Maybe a little boring?

Code of the week – PhantomJS

This week it’s PhantomJS the headless web browser. It’s based on Webkit and programmed in JavaScript. Perfect for wide range of uses: testing, crawling, scraping.


Easy to install download the pre-complied binary and then launch from the terminal, or use one of the many libraries that plug it into other languages.

I’ve used it recently to take a screen shot of a JavaScript rendered web page, the screen shot is used as a thumbnail. You simply tell PhantomJS to load the URL, wait for a certain number of seconds, or even better wait for a DOM element to be created/changed, take the screenshot to a png, done.

There are so many uses for a full rendering JavaScript executing headless browser I will post up some code examples soon.

Sublime Paste Overwrite Plugin

Renamed from, ‘Sublime Paste Insert Plugin’ as @andrejkvasnica quite rightly pointed out, its actually like typing when insert is turned off.  The new name is ‘Sublime Paste Overwrite Plugin’ which better describes what it does anyway as well as being accurate.

Myke sent an email around asking if knew about a Sublime plugin that would delete as many characters as in the clipboard. Like typing with the insert button off.

No-one did, and googling didn’t reveal anything. So I made one, it wasn’t that difficult and not many lines of code.

Download it here >

Requires Sublime Text 3
Create a PasteOverwrite folder inside your Sublime Packages folder. (Go to preferences > Browse packages to get there)
Copy the files over

Press ctrl+shift+v to paste overwrite.
Change the key binding in Default.sublime-keymap

How Does it Work?

It basically loops around each selection (you can have multiple cursors in sublime remember!). Deletes the length of string that’s on the clipboard and then inserts the clipboard text. Easy.

Lazy Spammers

You know spammers are getting confident, when they send you a comment to spin yourself.

Lazy Spammer


I’ve been going through these all day manually spinning them – and then spam binning them.

What happened to the hard working spammers?

Why windows explorer is annoying

Dragging and dropping a file from one window to another, and the path of this drag moves over a network location, CD drive, or other slow location. Of course windows tries to look in this location, to be helpful and freezes the drag operation, and puts windows explorer into a non responding state.

Even though you didn’t drop it in that location. Happens annoying frequently.