JavaScript Markdown Helper

What I love about Markdown is the simplicity of it, not needing to mess around with those rich text editors, all it needs is a standard plain old textarea. The annoying thing is when inputting code or creating lists, it doesn't preserve the indentation or list prefix when starting a new line.

So, I built my own Markdown helper script which when you hit the return key, it checks to see if the line is a bullet, numbered list, code block or blockquote and automatically indents and adds the Markdown syntax. If you hit return again on an empty line, it will remove that item and return to regular paragraph text.

JavaScript Markdown Helper

It's a pretty lightweight script that's super easy to use, just include the JavaScript file and call the function via onKeyPress() on the textarea. Tried and tested in the usual Firefox 11, Safari 5, Chrome 18 and Internet Explorer 6 onwards.

You can view the working example or view the code on Github.

Toggle Switch Using a PNG Overlay

I was in need of a more robust and cross browser compatible toggle switch, so I though I'd approach it in a different way than your usual CSS3 switches.

My solution uses a semi transparent PNG overlay for the rounded rectangle, with an inner image which animates from left to right, and vice versa. The toggle can be triggered by either clicking the switch, or the accompanying label.

Toggle Switch

The result is a jQuery powered, checkbox based toggle switch that looks and functions the same in most browsers, even IE6. It also has retina images for any iDevices that support them.

You can view the working example or view the code on Github.

Minecraft Avatar via PHP

Here's a little something I built for fun a while back, when I was more active on Minecraft. I wanted a real simple way to generate a user's Minecraft avatar from their skin, and be able to display at any size.

Minecraft Avatar

It's as easy as this to use:

<img src='face.php?u={username}&s={size}' />

What the script does is grabs their skin from the Minecraft server, copies the face and facial accessories only and merges them into an 8 x 8 image, then resizes to the specified size. If the username does not exist, then it uses the default skin, which is stored in a base64 encoded variable to save an extra cURL request.

View the code on Github

23-Feb-2012 at 4:21pm

Isle of Wight Photos

Last week I was on holiday in the Isle of Wight and used it as an ideal opportunity to take some photos. Below is one of my favorite photos of the week, which was taken at the Duver in Bembridge and shows the Bembridge beach and lifeboat station in the far distance.

The Duver, Bembridge

Another photo I was really happy with, is of the River Yar in Bembridge, taken just before dusk. I managed to get this great shot in between lots of bursts of rain which occurred throughout the week.

River Yar, Bembridge

Xbox Last Seen Widget

Xbox Last Seen

Today I spent a little bit of time creating a tiny XBOX widget. It's a shame the XBOX Community Developer Program has taken so long for me to gain access to, so instead all the data is scraped from http://gamercard.xbox.com/en-US/rentedsmile.card.

Usually I don't tend to rely on scraping to get my data, but since I have no access to their API I had no choice really. Also, the gamercard has so much hidden information, it's almost as if they expect you to scrape it.

View the code on Github

05-Jul-2011 at 5:24pm