JavaScript posts

10 essential JavaScript resources for HTML5

You have to love the developer network. Whilst HTML5 remains a relatively new standard, there are plenty of open source and paid for resources available to help you work with HTML5 using JavaScript. JavaScript is necessary for many HTML5 elements such as <canvas>, <audio> and WebGL. However, as I said, there are tools, libraries and framework resources to help you, so let’s get started looking at some of them. 1) HTML5 Boilerplate ... It’s likely that if you’re already working...
read more

How to use the Network Information API

All the websites we build should be responsive; not just to browser speed, but to network condition. In this article I'll introduce the Network Information API, that helps us detect a device’s current bandwidth and allows us to modify our site if the speed is slower than we need. Browser support ... We usually can’t expect support for experimental APIs and in this case, the only two browsers that support it are Firefox and Chrome. In both cases, you need browser prefixes. How to use the Network Information...
read more

How to use the Device Orientation API

Today we have mobile devices that come equipped with everything from cameras to geolocation, and we have little computers in our hands that can do pretty much anything we do with our desktop. One of the key APIs that functions with mobile devices is the Device Orientation API. The Device Orientation API helps us as developers detect the orientation of the user's screen and make the necessary changes to our layout. For example, on YouTube, if you are watching a video and you tilt your phone, the video goes...
read more

How to use the Battery API

The more demanding our web apps become, the more power we draw from devices. On desktop, where we can be sure that the device is plugged into the mains, that's not a problem, but on a mobile device we need to know what the battery is doing and respond accordingly. Browser support ... At the time of writing the Battery API is only supported by Firefox (mobile and desktop). However, it doesn't require a vendor prefix to be supported. The reason I mention desktop is because this API can also be used with any laptop...
read more

How to get started with Snap.svg

Animating and transversing SVG files with Javascript is actually not such an easy task and plugins like Snap.svg make our lives much easier when it comes to animating our SVG files. This library is one that aims to help Web Developers easily bring advanced SVG features to the Web, with it we can load, animate and even create SVG graphics right in the browser. The creator of this plugin is also the creator or Raphael, also an SVG plugin. The main difference between these two resources is that Snap aims...
read more

How to use the MediaRecorder API

We we first discovered that we could access a user's camera using Navigator.getUserMedia, we were all pretty amazed; but there's more… With the MediaRecorder API (MediaStream Recording) that's a construct inside Navigator.getUserMedia we can record media streams for the user's device and instantly use them in our app. Using the MediaRecorder API ... To use this API we need to have some recorded media to work with and for that we will use getUserMedia to get some. We simply create an if statement...
read more

How to create a rich text editor with Quill

At one time or another we've all used a rich text editor on the Web; if you've ever used WordPress, you've used one. These types of editor are great for projects where you want to give the user the ability to edit something—such as a comment, or formatted message—but don't want to ask them to use markup. Today we're going to look at doing this, using Quill, a JavaScript plugin built for the purpose. Getting started ... If you visit the Quill homepage and scroll a little you'll see the download button. Click...
read more

How to create a 3D Scene using Seen.js

Just a few years ago we needed high-end 3D software to create any kind of 3D scene. Now, we have plenty of ways of creating even complex 3D scenes and render them directly in the browser. But if we want to take a really easy route, we can use a library, like the awesome Seen.js that makes life a little easier by creating 3D scenes with just a few lines of code. CoffeeScript ... SeenJS is built using CoffeeScript, and all of the examples that they provide are written in CoffeeScript. Although you can use vanilla...
read more
Load more