HTML5 Zone is brought to you in partnership with:
  • submit to reddit
Axel Rauschmayer04/17/12
2222 views
0 replies

Node.js: Expanding Shortened URLs

This blog post explains how one can use Node.js to expand a URL that has been shortened by a service such as t.co (built into Twitter) and bit.ly. We’ll look at a simple implementation and at an advanced implementation that uses promises.

Andrey Prikaznov04/17/12
3573 views
0 replies

Flying CSS3 Navigation Menu

Today, I would like to show you another pure css3 navigation menu featuring several nice, and one unique, animations. Our sub menus to fly in from nowhere and 'heart-beat' when you hover your mouse over elements.

Hirvesh Munogee04/16/12
3319 views
0 replies

Retina.js - Easily Serve High-Resolution Images To Devices With Retina Displays

Retina.js checks each image on the page to see if there is a high-resolution version of that image on your server when your users load a page. If a high-resolution variant exists, the script will swap in that image in-place.

Chris Smith04/16/12
2317 views
0 replies

CoffeeScript Gets Strict Mode

What's strict mode? And more importantly, how does it work in CoffeeScript 1.3.x? If you like CoffeeScript, you're probably not exactly a JavaScript addict -- so you'll probably be interested in what strict mode is, and how CoffeeScript supports it.

Raymond Camden04/16/12
4330 views
0 replies

Face Detection with getUserMedia

There are quite a few interesting APIs evolving in the "modern web", but not all of them are going to be things you would use in most projects. That's okay -- part of the point of HTML5 is that the browser will handle more and more semi-specialized functionality in a standardized way. One such feature is getUserMedia. This is a JavaScript API that gives you access to (with permission) the user's web cam and microphone. Learn today how it works.

Terrence Ryan04/15/12
2347 views
0 replies

Using CSS Regions as an Enhancement

If you didn't already know: CSS Regions are a CSS3 proposal that would allow for magazine-like layouts in HTML pages. Adobe has been leading the charge on getting them into WebKit. They are currently available in Chrome and WebKit Safari (5.2) -- and also IE10. Here's how they work.

Andrey Prikaznov04/14/12
2472 views
0 replies

CSS3 Animation Experiment – Virtual DJ

Not that CSS3 isn't already the hippest thing -- but check out this sweet DJ turntable in pure CSS3. Not very functional, perhaps, but the CSS grab-bags keyframes, animation, rotation transformations, and scale transformations, all in one pretty coherent image.

Phil Parsons04/13/12
2174 views
0 replies

CORS (Cross-Origin Resource Sharing) with Ajax

Earlier this month, the Cross-Origin Resource Sharing spec reached W3C Working Draft Last Call status. As you might expect (for both technical and security reasons), the spec is pretty elaborate. For a quicker treatment, try this this just-right-bite-sized intro, with demonstrative snippets.

Andrey Prikaznov04/12/12
4921 views
0 replies

HTML5 Game Development – Lesson 9

Andrei's exciting series on HTML5 game development gets real, with dragonfireballs, randomly generated enemies, and collision detection. The game is cool, but the code is cooler, replete with helpful sense-breaks and extensive commenting.

Hirvesh Munogee04/12/12
2296 views
0 replies

Webshims Lib - A Modular Capability-Based Polyfill-Loading Library

Worrying about HTML5 browser support? Check out Webshims Lib, a modular capability-based polyfill-loading library, which focuses on accurate implementations of stable HTML5 features. Stitches together a number of tools that let developers write modern, interoperable and robust code for all browsers.

Catalin Red04/12/12
3063 views
3 replies

CSS Variables: First Working Draft Released!

If you are a developer then you are very familiar with variables and they are probably your best friends. A variable is by definition a temporary storage which contains some known or unknown quantity or information, a value. But, what does this have to do with the CSS we all know? The latest news is that the first working draft of CSS Variables just got released.

Gil Fink04/11/12
3865 views
0 replies

Using HTML5 Server-Sent Events with JSON and ASP.NET MVC

I’m getting ready for a session that I’m delivering at the end of this month. I wanted to create a sample for using HTML5 Server-Sent Events and decided to share that sample with my Blog’s readers

Hirvesh Munogee04/10/12
1686 views
0 replies

Easy Migration to CoffeeScript with JS2Coffee

JS2Coffee helps you migrate projects to CoffeeScript by compiling your JavaScript code into CoffeeScript.

Angus Croll04/10/12
3358 views
0 replies

It's Official! Fat Arrows in JavaScript!

It’s official! We’re getting a new function syntax! The TC39 group (the panel charged with delivering ES 6) has reached consensus on an abbreviated syntax for JavaScript function expressions. It's popularly known as the fat arrow syntax, and is based on a similar construct found in CoffeeScript.

Andrey Prikaznov04/10/12
23031 views
0 replies

HTML5 Drag and Drop Multiple File Uploader

Yes, I explained basics of html5 file upload in the past (in one of our previous articles), but today I would like to give you another example, a better one. Now, you can just drag and drop your images (multiple images) in order to start uploading.

Kristof Degrave04/09/12
5820 views
0 replies

How To Configure Your Webserver for HTML5 Video

When you are using HTML 5.0 video on your website, you need to remember that your webserver is configured to send the correct MIME–type with your file. If you don’t the browsers won’t recognize it and the video won’t play. You will see an X appearing on your video, and the video will not start playing when you click on it.

Gil Fink04/09/12
5247 views
0 replies

Writing Your Own JavaScript Library – Enums

Continuing the post series about writing a JavaScript library, in this post I’m going to show how to create enums in JavaScript.

Nilanchala Panigrahy04/09/12
2091 views
0 replies

Creating a Sheet in Sencha Touch

Sheet is a floating model panel widget that animates on top of the view. The image below shows the class diagram of Ext.Sheet class. Sheet is subclass of Panel, which extends the functionality and provides flexibility to add a stack of other widgets to it. It is orientation-awareand it is a generic class for ActionSheet, Picker and MessageBox.

Raymond Camden04/09/12
14763 views
2 replies

Adding Database Synchronization to Your PhoneGap Project

For the past few days I've been working on a proof of concept PhoneGap application that demonstrates an example of database synchronization. This is a fairly complex topic and I'm only going to demonstrate one version of this, but I hope the concepts, code, and example application are useful to people hoping to tackle the same problem.

Terrence Ryan04/09/12
16711 views
0 replies

HTML Page Slide Without a Framework

I'm working on a little demo mobile application for an upcoming project, and I wanted to add sliding transitions between pages. Pretty simple, right? You just use jQuery, jQuery Mobile, zepto, or one of a bunch of other frameworks, and they handle this for you. I didn't want to.

Chris Smith04/07/12
4191 views
0 replies

Source Maps for CoffeeScript

One of the more serious concerns about CoffeeScript is that it lacks a first-class debugging environment. The code that you see in a browser debugger is the compiled JavaScript, not the CoffeeScript source. Thanks to JavaScript Source Maps, however, this long-running issue will likely be solved in the very near future.

Hirvesh Munogee04/06/12
5746 views
0 replies

Timeline: A JavaScript Library For Beautifully Crafted Timelines That Are Easy, And Intuitive To Use

Timeline is a JavaScript library for creating beautifully crafted timelines that are easy, and intuitive to use -- with built-in support for multiple media types, including YouTube, Twitter, Flickr, Google Maps, and more.

Andrey Prikaznov04/06/12
12361 views
0 replies

HTML5 Drag and Drop: Sorting Photos Into Albums

Building on his previous (pure CSS3 photo gallery) tutorial, in this post Andrei adds another level of HTML5 cool: drag-and-drop, natively implemented. Thanks to the draggable and droppable attributes, this task is almost ridiculously easy.

Sebastian Poręba04/06/12
3015 views
0 replies

3D Tetris with Three.js tutorial – part 4

The most excellent series on 3D browser-game programming continues. And this time the code gets hard-core: emulated enum, collision detection, 3D math... But don't worry: all the code is right here, pasteable as much or as little you prefer...

Niels Matthijs04/05/12
4918 views
0 replies

Object-Oriented CSS is Crap! Long Live Object-Oriented HTML

For the longest time I didn't mind all the oocss talk. When the term was first coined I quickly glanced over the basics and wrongly assumed it simply reiterated something I'd been doing for years. Lately the methodology has been gaining in popularity though (read Nicolas Gallagher's post for more information), which called for closer inspection of what was being suggested. Basically, I'm appalled by what I read and I hope I'm not the only one.