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 … Continued


-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 <video> 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.




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.