If you have done many animations using pure CSS you have probably noticed a small flicker that happens when an element is animated, you may even have used a hack to stop that from happening. Happily hacks are no longer needed, we a have a new CSS property to help us deal with heavy animations and transitions. Why does the flicker happen? ... When you execute an animation, the animation is performed using the browser's software rendering engine which is usually much slower than your computers GPU (Graphics...
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...
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...
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...
In the first part of this mini-series we requested an for an API key from Tumblr, then we used it to retrieve data and the avatar for a blog. In this concluding part, we’ll retrieve some posts that are a little more complex. Getting posts ... So far our calls have been simple, because there was no json to interate through. But now, because we’re looking for a single post from multiple posts, we need to do a little more to arrive at our data. Our first step is to determine our URL (replace your-api-key with...
Every well known service on the Web has an API we can play with to get its data feed and Tumblr is no exception; the popular blogging platform has a really intuitive API that we can use to get anything from avatars to posts with links and images. In this article I’ll give you a feel for this API and teach you how to make some simple requests. Getting an API key ... If you’re familiar with working with this kind of API, you’ll know that we usually need to create and application and request an API key in order...
In this post, we are going to explore open source fonts and CSS pre-processing. I am going to give you an easy way to add web fonts to any website in just a few lines of code. What are Google Fonts? ... Google Fonts makes it quick and easy for everyone to use web fonts. Google Fonts is a collection of open source fonts that are hosted on Google's servers and with their API, it is easy for anyone to integrate their fonts into any web project. Best of all, it's free. (To learn more and explore the hundreds of fonts available,...
Right now web applications are stronger than ever and even though some of them are simple to understand others are really complex applications that need some understanding before use.One approach these applications take is to give us a tour of the product, usually with little pop ups that we can skip or leave until the end.That is exactly what Bootstrap Tour does in a simple and clean way.Getting started ... This plugin was at first aimed at being a simple and easy to use Bootstrap tour plugin but now we...