HTML5 Fullscreen API

Closely related to the <video> tag, the fullscreen API is an incredibly simple and easy to use API for using with JavaScript to maximise the window fully, as you would do if you pressed F11. Contrary to just pressing F11 however, the fullscreen API allows people to go fullscreen from the website itself, by using a link or at any point necessary.

Smart CSS layouts with Calc()

A few weeks ago I wrote about the Traditional Box Model and the ‘box-sizing’ CSS property, which, in essence, allowed you to easily create two adjacent boxes with a width of 50% and any amount of padding, because padding was included in the width. In this article I will talk about a different method of achieving this with the help of the ‘calc()’ expression.

HTML5 WebKit Speech Input

With the addition and extension of input types with HTML5 forms, one newcomer to the scene is the microphone input. This allows you to fill inputs, like a search or name field, through the use of your microphone. It is closely connected with mobile use and is currently only available on Chrome 11+ but not to worry because it shouldn’t be relied upon anyway and should, currently, only be used to enhance your forms.

18+ Web Resources & Tools

Here are a few web tools and resources which I use on a regular basis to help build reliable and fast websites. Most of them are online and well worth checking out (if you haven’t already). They are ruffly split into the categories, ‘Testing & Checking’, ‘Conversion & Compression’, ‘Frameworks & Libraries’ and ‘Text Editors’. Also, if you like this page, but sure to share it with your friends.

Feature Detection with Modernizr

Many of you, if you’re reasonably up-to-date with web design at the moment, will have heard of and used Modernizr but for everyone else out there, this article’s for you. Modernizr is an independent JavaScript micro-library to help you develop modern websites but with graceful degradation. It enables you to specify different CSS depending on if a feature is present in the browser or not (as shown in the example below).