Since the arrival of HTML5 and with it the increasing number of applications built for mobile, more and more JavaScript APIs have surfaced to meet the demand; one of these APIs is the Vibration API. As the name suggests, the Vibration API allows you to control the vibration of a device, by setting it to vibrate for a certain length of time, or within a pre-defined pattern. Browser support ... Firstly, this is a mobile technology. Don't try and make your iMac vibrate, it won't work. For mobile browsers, the...
Browser tabs have revolutionized the way we browse the Web, but they've given us an tricky problem: developers can't tell if the tab their site is displayed in is being viewed. To solve that problem we have the Visibility API, which allows us to test whether the browser content can be seen, and respond accordingly. It's ideal for sites that play music for example, to pause the playback whilst the user is away. The Page Visibility API comes with several properties: document.hidden: This property returns...
Color pickers are everywhere on the Web today, we see them in a lot in forms and in customization tools. Even though it’s possible to create this with HTML, JavaScript is a better solution because it provides greater support. Today, we’ll use picker.js to create a simple color picker that you can use in your applications. The first step towards creating this simple interface is to have our HTML ready, in this case I simply created a button and a span in which we will present the color to the user: <button...
File uploads are something that, as developers, we have had to do for years and getting an ajax file uploader is always a better choice than redirecting the user to an upload page or even just reloading the page; keeping the user on the same page will improve the usability of your application. Today we will be creating a simple ajax file uploader with drag and drop support. The plugin ... In this example I will be using the jQuery Upload File Plugin because it’s a simple to use and robust plugin that will get...
If you use a task runner in your workflow you’ll know why they are so useful in coding; they improve our workflow and allow us to focus on problem solving rather than repetitive data entry. Gulp is one such application and it has a lot of benefits to it. There’s a really simple syntax, no messy JavaScript files, a simple API and a wide variety of plugins. Installing Gulp ... As you’ll suspect if you’ve used a utility like this before, you need to have NodeJS and npm installed on your system, once you...
Test driven development is now widely accepted as a JavaScript workflow, and it’s something we should all embrace because it saves us a great deal of time when coding. In this article I’ll introduce you to QUnit, a testing framework that will help you spot errors and bugs in your code. Why use test driven development? ... At first, this process may seem complex and tedious. Creating a test for all of your functions does take some time, but it will save you hours of debugging at the end of the project cycle....
Nowadays websites rely more and more on JavaScript to create dynamic interfaces, for some sites you may only need something like jQuery that works wonders when it comes to DOM manipulation but other times a template system may be more suitable, especially if your page will be constantly updating its data. Handlebars helps you with that by dynamically generating your HTML. It helps you get into using the View/Controller pattern while keeping your code cleaner and more maintainable. Using Handlebars...
Instagram is widely used, with literally millions of people constantly uploading pictures. It makes sense, with such a large user base, to create an API. Today we’ll be looking into how to use it. Authentication ... The first thing you need to do is to register as a developer with Instagram. You’ll need to register your application name, a description, your website and a redirect URL. After you’ve done this you’ll receive your Client ID and Client Secret, but this is where it gets a little tricky;...