How to use the Notification API

We’re all used to browser notifications; we get them all the time on sites like Facebook and now, using the Notification API, we can actually push notifications to the desktop. Imagine a site performing a task whilst the user checks her email, she would still receive our completion notification on her desktop. Browser support ... At present, the Notification API is a working draft, so it’s not universally supported. However, it is supported by Chrome, Mozilla and Safari. Even more helpfully,...

How to add autocompletion to forms with typeahead.js

We all know what auto complete looks like in input fields, and when we’re asking a user to enter dozens of answers, autocompleting is always a good idea. Even better than creating an autocomplete system is creating an auto-complete system that’s compatible everywhere, and that’s what lead me to stumble upon typeahead.js by Twitter. This is a fast and fully featured autocomplete library. It allows you to prefetch json files from your server, it then saves them in localStorage and when necessary...

Deal of the week: 21 premium, responsive, one-page HTML5 templates

One of the most appealing kinds of sites, for all types of businesses is the one-page parallax scroll. There's a spacial delight in simply scrolling through content, and of course, on a mobile device, swiping through content is more appealing than struggling to tap a minute link. If you're looking to get a professional, responsive, one-page site online in the shortest space of time possible, then look no further than this tremendous deal from our sister-site, MightyDeals.com: You can get not 1, but...

Introducing CSS variables

If there is one thing a language needs to qualify as a programming language, it’s variables; they’re incredibly useful, save us a bunch of work and typing, and improve coding all-round. This is exactly what CSS didn’t have. Pre-processors like Sass and Less used them, but vanilla CSS never had variables. Until now. They’ve been on the horizon for a while, but only recently have variables started to be implemented in CSS, let’s take a look at how they work. Browser support ... Currently CSS...

Deal of the week: Lunchbox Slab Serif

One of our very favourite deals of 2013 was for the lovingly crafted Lunchbox font, from Kimmy Design. So we were delighted when we found out that our sister-site, MightyDeals.com, had managed to arrange an equally awesome deal on the companion typeface, Lunchbox Slab Serif. The hand-drawn quality of Lunchbox Slab Serif gives it a real, honest feel. You can almost imagine a waiter chalking it up on a board.   Just like its sibling, Lunchbox Slab Serif is ideal for any project that you want to introduce...

Introducing the calc function

Math is a necessary (if not always welcome) tool in our programming languages. We use it constantly to make all kinds of dynamic decisions. Until recently, it wasn’t available in CSS without a pre-processor; however the introduction of the calc function to CSS3 provides a way of running Math calculations natively which increases performance and even enables mixed units. Browser support ... Unusually, in the case of the calc function browser support is actually pretty good: on the desktop it’s...

Deal of the week: Responsive Multipurpose HTML5 Template

The new year brings new opportunities, and if you’re looking to improve your site in 2014 then the first thing you need to ensure is that it’s responsive. Unfortunately responsive sites can be hard to build from scratch, which is why we’re delighted our sister-site, MightyDeals.com, has been able to arrange a huge discount on this professional HTML5 responsive template. Arctic is a massive template, with more than 20 custom pages, numerous sliders, and tons of cool tools and widgets. What’s...

Introducing Snap.svg

One of the best ways of presenting graphics online is as scaleable vector graphics. That’s because SVG can adapt to any screen size, without losing quality. The increased demand for the format has lead to the open source Snap.svg library. What is Snap.svg? ... Snap is a JavaScript library that aims to help web developers bring advanced SVG features to the Web. This library can load, animate or even create SVG graphics right in the browser. Snap was written by Dmitry Baranovskiy who was also the writer...

How to create a flip effect with CSS3 transforms

Over the last couple of years CSS has evolved more than we could ever imagined. Styling and layout are now entirely in our hands, although the best thing about CSS3 in my eyes are the Transforms, particularly the 3D ones. With transforms we can move elements through a 3D world, and today I’ll demonstrate this by creating a flip effect. Browser support ... The browser support for 3D transforms is a little lacking, but on the whole not too bad. It’s supported by all webkit browsers using the webkit prefix,...
Home XML WordPress Web Services Web Development Web Design Underscore Uncategorized Tutorial Tools SQL Server Social Apps Snippet SEO Security RoR Responsive Design Resources Python PHP News MySQL Mobile Miscellaneous jQuery JavaScript Java J2EE HTML5 HTML Design Patterns