HTML5 native scrolling on iPhone iOS5

Lately I have been involved in creating an exciting new mobile application for MyTistics. We are working on a functional iPhone proof of concept using HTML5/CSS and JavaScript. During development we noticed some weird scrolling issues on our iPhone devices (running iOS5). I jumped in and found some interesting challenges along the way.

This post will show you some scrolling issues with mobile Safari and how to fix them using CSS only. Our aim is to create a main content div which will scroll vertically, two menu buttons which should remain fixed at the top of the page and an overlay div with internal overflowing content scrolling vertically as well. The result should look something like this:

iPhone HTML5 overlay example

TL;DR

We fix native scrolling HTML5 elements on iPhone using -webkit-overflow-scrolling: touch; and -webkit-transform: translateZ(0);. Download the result from my repository.

(Tell me more…)

Stop using $.bind, $.delegate and $.live, start using $.on!

Last week the jQuery team released version 1.7 of their awesome library. They’ve made a lot of improvements and minor fixes. However, the most important change (in my eyes) are the new $.on() and $.off() Event APIs. By introducing these two new calls, they’ve unified Event handling no matter what you want to do with them. Pretty sassy.

You can read all about jQuery 1.7 in the release notes. This tutorial, however, will only focus on $.on() and $.off(). I will show you how you can use the new APIs instead of the already existing $.bind(), $.delegate() and $.live() APIs.

This tutorial is structured as follows:

(Tell me more…)

RIP Steve Jobs

A true innovator has passed away. What would our world have looked like without Macs, iPhones and iPads?

Steve Jobs (24 February 1955 – 5 October 2011), may you rest in peace.

Steve Jobs

3D for flash

Flash 11 will include a brand new 3D API called Stage3D. Using this API developers can finally create hardware accelerated 3D graphics using Actionscript. Various flash game engines already added support based on the early betas and the results have been very impressive. However, none have been as impressive as the shadowgun demo I recently encountered.
(Tell me more…)

Creating a dynamic multisite using Django

Django is a great framework for rapid web development. Because it is chock-full of features, you can create great web applications using only a couple of lines of code. One thing I found out, though, is that it doesn’t support dynamic multisites out of the box.

Dynamic multisites are dynamically created sites, which are served from a single server instance. In Django terms: one project serves multiple dynamically created sites. Well known examples of dynamic multisites are blogspot and wordpress, where users receive their own subdomain for every account.

Fortunately, Django is very easily extensible and we are going to do just that to add dynamic multisite support. We’ll be using the sites framework and a custom middleware component to enable this feature.

This tutorial is structured as follows:

(Tell me more…)

The fotomoment art project

Two-Legs recently finished an art project called Fotomoment. This project was envisioned by Sanne Rovers and Two-Legs became the technical implementation partner for the project. Because the project was art related and our government is currently very heavily cutting back on art funding, a large Dutch newspaper (nrc.next) featured a 3 page article on the project. Mum was proud :).

Fotomoment article

(Tell me more…)