How To Use jQuery 3 with a Fallback to v1 (for IE8)

With the release of jQuery 3 (and recently 3.1) we as developers have been able to use many new features – as well as having performance increases (at least visually). So it’s a no brainer to use it over previous versions, or is it? With the release of the v2 branch the jQuery team announced that it wouldn’t be supporting IE6-8. And… if you’re working on commercial projects, this sucks. Luckily you can use the latest version and fallback to … Continued

Make Your Own Compass with the Device Orientation API

Recently, while exploring the world of modern web APIs, I stumbled on the DeviceOrientation API which allows you to determine the exact position and rotation of a device, providing it actually has these sensors. This is especially useful when building mobile apps with technologies like Cordova/Phonegap because they allow access to functionality which would otherwise only be accessible through native applications. But it’s also useful in websites on occasions. To explore this API further I decided to make a little … Continued

Direct Upload to S3 (with PHP & Composer)

This is a continuation in the ‘Direct Upload‘ series: First we began with a look at how you can directly upload a file to s3, talking it through in detail (13/10/2013). We later made another post, explaining how to handle multiple files and updating the code to use AWS’s signature V4 (7/3/2015). Now we’re back with another improvement! Instead of the copy and paste from a blog post solution we were advocating in past blog posts, we’ve now built a … Continued

Converting Google Maps Tile Coordinates to Boundary Box Coords

Usually working with the Google Maps API is a very simple and well documented experience. Saying this though, recently we wanted to overlay an image over the map. The overlay was relevant to the exact point which you were looking at, so the coordinates had to be exact. The images were also being retrieved from an external service, which we didn’t have access to change. The problem we were having stemmed from the fact that the Google Maps JavaScript library … Continued

Detecting if a User is on a Touch Screen Device in JS

Whilst recently working with native date pickers on mobile browsers, Chrome and Opera we came across an issue. The native datepicker wasn’t acting as we wanted – but we had no control over it (you can’t trigger a native datepicker to open in Chrome!). Because of this we wanted to fallback to a custom date picker (think jQuery UI) if a native date picker didn’t exist or if the browser is on a desktop. We’ll focus on the ‘is on … Continued

Direct Upload to S3 (using AWS Signature v4 & PHP)

The contents of this article has been replaced by a PHP Composer package, hope you find it useful.   View on Github This article is specifically about directly uploading files to S3 using the AWS Signature Version 4, which is mandatory for new S3 regions, like Frankfurt (EU). It will also become required on other regions at some point as Amazon migrate over, so it’s recommended to use this method where ever possible. For more info, you can read about … Continued

Load HTML once with AJAX

While working on a project recently, a dynamically loaded section was needed. It was used in a transition between step one and two in the user’s journey, after an API call had been made. The user was allowed to go back to step one at any time, resulting in a new API call – which was to be expected – but the call to get the HTML for step two was also made again. The same HTML which had just … Continued

How to: Create Panels with matching Heights

Flexbox & History One of the best ways to achieve a row of boxes which match in their heights is with an up-and-coming feature called flexbox. This is particularly important when presenting dynamic content, if you’re using pre-selected, static content then often the best approach to take is just to add a min-height within the CSS for the columns. As soon as the content extends a min-height however they will escape and have differing heights.

Smoother JS Animations with requestAnimationFrame

Within Javascript, if you ever worked on creating animations you’ve probably been dependent on the setTimeout() or setInterval() functions to do much of the work for you – incrementing a value at each execution and moving or changing an element. The situation in the code snippet below might look familiar, a function which contains a setTimeout() which changes a value, either continueously by calling itself or until a point by checking a condition with an if statement.

Kerning your Typography on the Web

Kerning is the process of adjusting the spacing between two specific letters or pairs within typography. It’s not to be confused with tracking which is the spacing between letters (letter-spacing) or leading which is the spacing between lines (line-height). The kerning process has been used throughout the history of printed text but is less commonly used on the web.

How to: Convert a String to Hex Colour (with JS)

For this site, when you hover over the Designed by a Turtle logo a colour is shown – which changes through out the site but isn’t random using JavaScript (I’ve updated the site since this post). On a previous theme for Designed by a Turtle, a colour was picked based on the document title. That meant you could refresh the page and the colour would stay the same – but each page had a unique random colour. This was done … Continued