Home > Categories > JavaScript
Page 1

How to create a jQuery file uploader

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 you...
Read more

Introducing Gulp.js

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 have...
Read more

How to employ test driven JavaScript using QUnit

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....
Read more

How to use Handlebars

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...
Read more

How to use the Instagram API

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;...
Read more

Introducing the Speech Synthesis API

In the last couple of months we’ve seen API after API being released, many of which make life easier. Today we’re going to focus on the Speech Synthesis API, which uses system libraries to speak, whatever you want, making the Web considerably more accessible. Browser support This API is fairly new, so not widely supported. Currently only Chrome Canary and Safari support it. (Safari supports it on desktop and mobile.) So, we can play with the API, but it’s not production ready unless we have a good...
Read more

How to use the Notification API

We’re all used to browser notifications; we get them all the time on sites like Facebook and now, using the Notification API, we can actually push notifications to the desktop. Imagine a site performing a task whilst the user checks her email, she would still receive our completion notification on her desktop. Browser support At present, the Notification API is a working draft, so it’s not universally supported. However, it is supported by Chrome, Mozilla and Safari. Even more helpfully, Chrome,...
Read more

Introducing Snap.svg

One of the best ways of presenting graphics online is as scaleable vector graphics. That’s because SVG can adapt to any screen size, without losing quality. The increased demand for the format has lead to the open source Snap.svg library. What is Snap.svg? Snap is a JavaScript library that aims to help web developers bring advanced SVG features to the Web. This library can load, animate or even create SVG graphics right in the browser. Snap was written by Dmitry Baranovskiy who was also the writer of...
Read more