I’m far more of a programmer than a designer. I can deal with hex and RGB color values all day and plug them into my CSS like a champ. I can poke around in Photoshop, take some color samples, tweak them in the palette tool, and come up with pretty colors. But how do I come up with real, usable color schemes? Thankfully, for both the color hack like me and the graphic artist with a more refined eye, we have a large array of color resources available online: tools to help create palettes from scratch or based on an...
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...
Git is a free open source distributed version control system. Which sounds incredibly dull, until you need to revert to a prior version of your code, when it's a godsend. It's software that manages your source code, by taking snap shots of it at particular points and stores them. You can view all these intervals as milestones in a timeline. This way it allows you to back track, restore code from particular points, and work in a team simultaneously. One of the biggest advantages of using Git, is that it is...
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...
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...
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...