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 get started with the Tumblr API, part 2

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

Deal of the week: 8 fontastic fonts from TypeFaith Fonts

99% of the Web is text, and most designers agree that your choice of typeface communicates your brand more then any other single element. So when it comes to fonts, you can never have too many high-quality options at your fingertips. To help you fill your font toolbox, our sister-site MightyDeals.com, has arranged an awesome deal on 8 fonts from the TypeFaith studio. Included in the deal are 3 versions of Lev Serif, two versions of Moonface Script, two weights of Ponsi Rounded Slab, and the beautiful...
read more

How to get started with the Tumblr API, part 1

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

How to easily use Google Fonts with Sass

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

Deal of the week: The ultimate logo mock up and design kit

Stuck on ideas for a client’s logo? Need to inject some vintage-cool into your branding? Our sister-site, MightyDeals.com, is here to help you out with an amazing discount on this awesome collection of logo assets. The Ultimate Logo Mock Up and Design Kit from Cruizine Design features 70 retro logo templates and more than 50 realistic logo mockups—whether you’re looking for logo inspiration, a few embellishments, or just a smart way to present your work to clients, this set has it all. Creating...
read more

How to get started with Bower

One of the things we struggle everyday as programmers is productivity; we want to do things better and at the same time faster, everyday. This is something we can’t control, we now have more to do: more scripts to download, to install, and even more frameworks to work with. In every project we end up downloading at least one jQuery plugin and even jQuery itself; every time this happens we need to go the plugin’s website, download it, or link to it. Even though we’re used to this, and it doesn’t even...
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