Tutorials | Web Directions

Tutorials

Build a motion activated security camera, with WebRTC, canvas and Device Orientation

• In: Blog, developer, Tutorials
• By: John
• June 7, 2013

As a web developer, you’ve probably seen emerging HTML5 technologies and APIs like DeviceOrientation and WebRTC (Web Real Time Communications), and thought “wow they look cool, but they are only for hard core gaming, video conferencing, and other such stuff, not for my every day development”. I’m firmly … Read more »

webStorage: Persistent client side data storage

• In: Blog, developer, Tutorials
• By: John
• March 30, 2012

Until recently, the only ways to maintain a user’s data between visits to your site have been to store it on the server, or use cookies in the browser. Both present significant security challenges and quite a good deal of effort for us as developers.

Cookies are designed for communication between … Read more »

2D Transforms in CSS3

• In: Blog, developer, Tutorials
• By: John
• September 21, 2011

One of the most powerful features of CSS3 are transforms, which allow us to take any element in an HTML document, and while not changing its effect on the page layout, rotate it, translate it (move it left, right, up and down), skew it and scale it. CSS3 provides … Read more »

HTML5 selectors API — It’s like a Swiss Army Knife for the DOM

• In: Blog, developer, Tutorials
• By: John
• September 2, 2011

In the infancy of JavaScript, there was little if any concept of an HTML document object model (DOM). Even though JavaScript was invented to enable web developers to manipulate parts of a web page, and in the original implementation, in Netscape 2.0, developers could only access the form elements, links, … Read more »

Let the Web move you — CSS3 Animations and Transitions

• In: Blog, developer, Tutorials
• By: John
• August 5, 2011

A brief history on Animation of the Web

If you’ve been developing for, or even just using the web for more than about 15 years, you’ll likely remember a time when animated effects were the bomb. Animated GIFs adorned just about every page, spinning globes, little men with jack hammers, self-​​folding … Read more »

Getting Sourcey — native HTML5 Audio and video

• In: Blog, developer, Tutorials
• By: John
• July 26, 2011

Hard perhaps to believe, but the world wide web began without an image element. That’s right, there was no way to include images as part of the content of a web page before Mosaic implemented them (here’s Marc Andreesen proposing the img element at the beginning of 1993). The … Read more »

CSS3 Radial Gradients

• In: Blog, developer, Tutorials
• By: John
• July 19, 2011

Getting your head around CSS3 radial gradients

We recently took a detailed look at linear gradients in CSS3. If you’ve not read that, you might like to spend a few minutes doing so, as the concepts are very similar, and I don’t spend quite as much time in this article … Read more »

Get off(line)

• In: Blog, developer, Tutorials
• By: John
• July 11, 2011

Taking your web sites and apps offline with the HTML5 appcache

There’s a general (and understandable) belief by even many developers that web sites and web applications can only be used when the browser has a web connection. Indeed, this is routinely cited as one of the real advantages of “native” … Read more »

CSS3 Linear Gradients

• In: Blog, developer, Tutorials
• By: John
• July 1, 2011

It’s been a while since we posted anything particularly technical to the Web Directions blog, but that’s something we plan on changing. Here’s the first in a series of technical articles on CSS3 features (along with tools to help you lean and use them).

We’re starting with linear gradients. We’ll take … Read more »

Images:

The images are downsized due to limited space here. The original dimensions may differ.
Click on the image to open it on a new tab.