- The most recent blog articles - mostly about PHP, Golang, databases or general website dev ops.
Lazy loading Disqus with IntersectionObserver
We’re all keenly aware of how important performance is in this day and age of web development. Whilst recently looking over a site and checking it with PageSpeed, it showed that a big impact for mobile was the loading of the disqus commenting system. Changing Disqus to lazy-load increased the mobile PageSpeed score from mid 50’s to 95 (which is a massive change). With all of this change due to cutting down the number and size of many http requests being downloaded on page load (rather than when you need it).Greasemonkey Script to Restore Mantis Ticket Colours
Mantis, the bug tracking software, changed the style of each ticket’s background during an update. This is a Greasemonkey script to re-introduce strong background colours so you can quickly see the status of a ticket. You probably don’t want to run this on every page you visit, so you can add a // @match http://www.example.com/* into the top comment.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.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 compass application.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 Composer package instead.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 would give us the coordinates of where the user was looking as a long lat, but only as the corners of the viewport (outer square) – it wouldn’t give any indication as to the long lat coordinates of each tile.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.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.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 been loaded the first time around.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.Using RequireJS to manage your JavaScript dependencies
If you’ve ever worked on a large web application before, you’ll no doubt already be familiar with the problem of managing a large number of JavaScript files, all being needed in different places and at different occassions. This is where RequireJS comes in.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 by taking a constant to that page and converting it into the 6 digit hexadecimal value and using that as a colour. In this instance the page title was used as the input as it changed from page to page by using the document.title variable.Direct Upload to S3 (with a little help from jQuery) [Updated]
The contents of this article has been replaced by a PHP Composer package, hope you find it useful. View on Github Whist working on a new web app recently, running on Heroku, we wanted users to be able to upload large files (I’m talking 50mb-150mb) onto our site. We started by having the standard html form post the data to our back-end code, which processed it, etc, etc. This was fine for small files, but large files would hit the maximum request time of 30 seconds for any request on heroku, which then in turn messed up the dyno it was running on.-0 === +0
I came across an interesting tweet from @getify the other day which mentioned the difference between -0 and +0 in JavaScript. This was news to me and it took a few moments to grasp the concept of both a positive and negative zero.Blur a Background Image (with help from blur.js)
Recently, in a very small project of mine, I wanted to create a full-size image as the background and to blur it a little to create an abstract but interesting backing image. Initially, webkit filters were looked at, which are admittedly limited in terms of browser support, but also gave a nasty looking white edge to the images. So a JavaScript option was considered instead.HTML5 Fullscreen API
Closely related to the tag, the fullscreen API is an incredibly simple and easy to use API for using with JavaScript to maximise the window fully, as you would do if you pressed F11. Contrary to just pressing F11 however, the fullscreen API allows people to go fullscreen from the website itself, by using a link or at any point necessary.Target Android Devices with JavaScript
Having recently created an Android app and an accompanying website to match, I wanted to know how to detect an android device through the site using JavaScript. On the site a download button was created and depending on the device would either say, ‘Download .APK’ or ‘Install App’. I thought this was a clever idea to adapt the site based on what would happen after you download the APK.How to: Speed up Your Website
Getting your website to load faster is not like running the 100m – or a marathon. It doesn’t need training or a team behind you to make noticeable improvements. All it takes is a little know-how (which I’ll help you with), an actual website and a few minutes of your time.An Introduction to Twitter’s @Anywhere
As part of Twitter’s initiative and for them to compete with Facebook’s Open Graph service for embeddable social networking, they released @Anywhere. This JavaScript file allows you to add the ‘Twitter communication platform to your site’.HTML5 WebKit Speech Input
With the addition and extension of input types with HTML5 forms, one newcomer to the scene is the microphone input. This allows you to fill inputs, like a search or name field, through the use of your microphone. It is closely connected with mobile use and is currently only available on Chrome 11+ but not to worry because it shouldn’t be relied upon anyway and should, currently, only be used to enhance your forms.Horizontal Scrolling with jQuery [Updated]
The large majority of websites on the internet prefer vertical, portrait pages and for a good reason. Vertical pages work well with the way we read and the hardware that we use. But sometimes, just sometimes, it is nice to be different and build a website around the horizontal axis. This, however, poses limitations because the computer mouse, and it’s mouse wheel, does not scroll sideways – but this can be rectified with good-ol’ jQuery.Feature Detection with Modernizr
Many of you, if you’re reasonably up-to-date with web design at the moment, will have heard of and used Modernizr but for everyone else out there, this article’s for you. Modernizr is an independent JavaScript micro-library to help you develop modern websites but with graceful degradation. It enables you to specify different CSS depending on if a feature is present in the browser or not (as shown in the example below).Load jQuery from Google CDN in WordPress
WordPress, by default, includes a local copy of jQuery which gets loaded up on your website and also used by the WordPress Admin Dashboard. This is great because it makes life easier but wouldn’t it be even greater if WordPress used a copy of jQuery which was stored on Google’s CDN (or jQuery’s CDN for that matter). Well, with a tiny bit of theme editing this is possible.Smooth Page Scroll with jQuery
Many popular websites have the ‘Back to Top’ same-page links, which allow you to get back to the top of the page quickly. Some websites even scroll upwards smoothly. This jQuery code, written by LearningjQuery, allows you to do just that. Just include this code in your $(document).ready() function and it enables itself on all same-page hash links.