JavaScript posts

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

How to use the Vibration API

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

How to use the Visibility API

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

How to create a color picker with picker.js

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...
read more
Load more