Xmas Hack – Auto Trader Covoider
For the 2020 Auto Trader Xmas Hack, a few of us decided to throw together a fun little HTML5 / WebGL game. The game is Covid-themed, and does the public service of reminding us all to keep a safe distance from co-workers while in the Auto Trader offices. It uses Phaser 3 (in TypeScript) as … Continued
The Case for CSS-in-JS
CSS-in-JS is the practice of utilising the power of JavaScript to dynamically generate and better organise your application’s CSS. The concept has gained traction over the years due to the popularity of UI frameworks / libraries such as React, Angular and Vue. What is it? Please use an analogy Once upon a time, there were … Continued
Fixing Google Crawl Errors with AWS S3 hosting with CloudFront CDN
Ugh. I truly hate Amazon Web Services. Sure, if you’ve got 20+ years of Network Admin experience, 9 Cloud Computing Master’s Degrees or just general good sense and an endless amount of patience, AWS will be a breeze. If you’re anything like me (impatient, easily-confused, and quick to anger) then AWS can be the stuff … Continued
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