PHP Blink(1) Class

I've been playing around and having quite a bit of fun with my Blink(1) by ThingM for some time now, and whilst the command line tool is very good, it's somewhat fiddly to send patterns. As a result, I build my own PHP class to interact with the CLI tool.

The example below simply fades to #F68 for 400ms, then fades to #0F1 for 400ms, and then fades to #F68 for 400ms, and this loops 3 times:

Blink::send('#F68,400|#0F1,400|#F68,400',3);

You can even go a step further an introduce a flicker effect by adding a quick fade to #000 between each light like so:

Blink::send('#F68,400|#000,50|#ff8920,400|#000,50|#F00,400',3);

The video below demonstrates all the examples as per example.php in the Github Repo

You can watch the video on Vimeo or view the code on Github.

26-Jul-2013 at 12:46pm

Welcome to JamieBicknell.com

Today I'm pleased to announce the launch of JamieBicknell.com, which is a consolidation of my company site Rentedsmile Web Design (rentedsmile.com) and my Tuesday's Coming Blog (tuesdayscoming.com).

It's been a long time in the making, finding time away from client work has been tricky, but after several months I'm finally at a stage I'm happy with and I can launch.

I'll be continuing to trade under Rentedsmile Web Design, so nothing will change with regards to that, although now everything will be centrally located here on JamieBicknell.com

Expect much more frequent blog posts and some more little projects in the future.

23-Jul-2013 at 12:24pm

Thumbnail Creation via PHP

I got a bit tired of numerous security holes and sheer bulkiness of other thumbnail generation scripts, so decided to build my own from scratch, for local images only. Simply upload, create a writable cache directory and parse the image through the PHP script like so:

<img src='thumb.php?src=./images/photo.jpg&size=400x300' />

It's super simple and only 155 lines in total. You can specify the width and height, or just the width so the height will get calculated automatically and vice versa. It also allows you to set a maximum width/height, which is best suited for photo thumbnails.

Features:

  • File based cache
  • Automatic deletion of expired cache files
  • Optional browser based cache via the IF_MODIFIED_SINCE HTTP header
  • Multiple size types
  • Options whether to crop, trim, zoom and set alignment
  • Set sharpness based on a percentage midpoint between two values, so you can specify the strength of the sharpness rather than just turning it on or off

View the code and usage instructions on Github

18-Jul-2012 at 1:00pm

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.