Santa vs. Krampus – Deathmatch
For a fun Xmas task, the folks at Code Computerlove were challenged to make something fun using SVGs (and probably some JavaScript). My entry to the challenge was a simple fighting game in which Santa takes on his yuletide rival, Krampus in a winner-take-all-battle-royal. The site uses JavaScript (and specifically Web Animation API) to animate … Continued
Fun with Canvas – Creating James Bond Intro
Duh duh, duuuuuum, duh duh d-duh duh duh! …and so on. Recently I’ve been looking to try out a few things I haven’t had chance to before, and playing with Canvas seemed like a fun idea. There’s incredible stuff you can do with Canvas & JavaScript, and this probably isn’t it, but it does shows … Continued
Playing with CSS Drawing & Animations
I’ve been playing around on CodePen again recently, and decided to try my hand on some CSS drawing and animations. Actually, the first animation I did was some ants exploring a magical sugar cube, and rather than drawing the ants themselves I used an SVG (nature is tough to draw). Ants Animation You can see … Continued
100m Sprint (Sass / jQuery) Experiment
Inspired by the Rio 2016 Olympics I started playing around in CodePen and ended up creating this little 100m Sprint simulation. The experiment makes use of both Sass and jQuery random functions to generate a realist (kinda) run across the screen to the finish line – with each race ending in a different result. The … Continued
Super Simple Responsive Progress Bar
Recently for a project I threw together a quick animated and responsive Progress Bar making use of the HTML5 data-attribute. It’s a nice and simple snippet which is easy to implement, though you’ll need jQuery. Example: HTML: <div class=”progress-wrap progress” data-progress-percent=”25″> <div class=”progress-bar progress”></div> </div> CSS: .progress { width: 100%; height: 50px; } .progress-wrap { … Continued
Installing Grunt on OS X and Windows 7
Coming primarily from a PC-based development background, I thought it might be useful to provide a step by step guide to installing Grunt on a Mac as well as a Windows 7 PC. Firstly, Grunt (currently v0.4.0 at the time of writing) is a JavaScript-based task runner; it allows for the automation of repetitive coding … Continued
Happy 2013!
Today you may have dragged yourself back to your day job after living it up over Xmas and New Year (I hope you had a good’n). As many people do, I’ve set myself some goals to achieve in 2013 both in work-time and spare-time. Outside of work I’m hoping to complete my first (and possibly … Continued
Crumbs theme – ‘A placeholder for payment’
I recently realised that a worrying number of clients I’ve worked with this year have been tardy with their invoice payments. This is nothing new, all freelancers have to go through the stress and annoyance of having to chase up late or non-paying clients, politely emailing and patiently waiting until the client decides to kick … Continued
“We’ve Thought Up The Next Facebook.”
The below text is an example of an email I – and I’m sure many of other Freelance Designers / Developers – get all too often. It goes a little something like this: Dear Sir / Madaaaam, We’ve just come across your work and we think you would be a good match to work on … Continued
Adding cropping support for WordPress medium thumbs
If you’re making the most out of WordPress’s media gallery for adding images and auto-lovely thumbnails to your site, you may notice there’s no option for cropping your medium sized thumbs. As of WordPress 3.0.2 and earlier, only the WordPress Thumbnail image property includes the functionality to crop the image down to the exact dimensions … Continued
Auto update WordPress plugins on localhost XAMPP on Mac OSX
Coming from a mainly PC background I rarely had any problems setting up a local version of a WordPress install through XAMPP, however, doing the same on a Mac seems far more problematic. The problem comes when trying to auto-update my local WordPress install along with its plugins on my Macbook (OSX 10.7.3). WordPress would … Continued
Removing inline img dimensions for responsive WordPress websites
This handy code snippet hooks into WordPress’s image_downsize function and removes the hardcoded img attributes width & height, allowing images to scale with responsive websites: In your functions.php file… /** * This is a modification of image_downsize() function in wp-includes/media.php * we will remove all the width and height references, therefore the img tag * … Continued