How to build Growl-style notifications with jQuery

Mac OSX is able to display message notifications — still referred to as Growl messages, despite the fact that the big cat moniker is no longer applied to versions. Many applications send Growl messages to the OS to let the user know that an action has just occurred. Wouldn’t it be nice to use messages like this on our websites? I think so. In this tutorial we’ll construct a notification like this with HTML, CSS3 and a little jQuery. Growl message functionality ... When more than one message is displayed,...
read more

How to enhance HTML5 gaming with the Gamepad API

One of the big obstacles in designing a game in HTML5 is that the popular gamepad hardware isn't available. Nobody wants to play a game with keyboard buttons, so the arrival of the Gamepad API brings us a lot closer to console-style gaming in the browser. Browser support ... At the time of writing, the only browsers that support the Gamepad API are Chrome and Firefox — the latest version of each working unprefixed. However, the more we use this API, the more browser manufacturers will support it, and as...
read more

Deal of the week: 100 professional fonts designed by Ingimage

We can never get enough fonts, so we’re always extra excited when our sister-site, MightyDeals.com, manages to pull together a super fonts deal. This week, MightyDeals are offering 100+ professional grade fonts, for just $19, that’s just $0.19 per font! Designed by Ingimage, this collection, which includes both display and body fonts, is bound to keep even the most hungry of typophile’s busy. There’s all kinds of font-goodness in here, from the hand-writtern delights of Vicentino,...
read more

How to edit text faster with Vim’s command mode

Stick around code nerds long enough, and we'll start talking about text editors. Eventually, one might (or, if you're discussing this on the Internet, one certainly will) bring up Vim. Ah, Vim: the text editor that many command-line users love. Here's what happened to me: I was looking into new software with which to write my articles and synchronize them to Evernote. Through a convoluted series of events which I shall not describe here, I ended up spending a couple of hours learning to use Vim. I'm...
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

Deal of the week: 11 professional email templates from ChocoTemplates

One of the toughest tests any web designer is asked to undertake — and we all get asked at sometime or other — is to design an email. Sure, we know what we want the email to look like, but how do you make it consistent across all the hundreds of email clients? And what’s this? Layouts built with tables?! Seriously, email design is a hugely difficult task for even the most seasoned of web designer. So we’re delighted to announce that our sister-site, MightyDeals.com, has arranged a jaw-dropping...
read more

How to use jQuery selectors

Whether you're new to jQuery or have been using it for a while, the chances are you might not be making full use of the selector syntax. Rather than simply listing the possible selectors, in this tutorial we will work through a practical example in which we create an interactive page component, introducing the basics if you're a beginner. After that we will run through some of the other selector options you can choose from. Create a page ... Create a new HTML5 page: <!DOCTYPE html> <html> <head>...
read more

How to optimize CSS animation with the will-change property

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