Testing on Mobile devices

A while back Brad Frost posted a very useful breakdown on testing mobile devices and how to do it without breaking the bank. This post is kind of an extension to it but pointing to other useful resources that I have come across and used.

Frost went down the route of physical devices, what you should test and their breakdown in prices. This post will be a list of services I have come across for testing on a vast array mobile devices without having to purchase said devices. Continue reading “Testing on Mobile devices”

addEventListener, handleEvent and passing objects

Here’s a super awesome trick I had no idea about until someone pointed out you could do this. addEventListener can take an object as a second argument that will look for a method called handleEvent and call it! No need for binding “this” so it will pass around the context correctly, the context is the object you’ve just set as the event listener callback. Continue reading “addEventListener, handleEvent and passing objects”

Fullscreen HTML5 video

In preparation for a talk I’m doing at Web Directions South I needed to be able to put video into fullscreen mode from within my HTML based slides. In order to do this I imagined I would of needed to use flash but thankfully Webkit nightly, Chrome dev and Firefox nightly have added the ability to put HTML5 videos, and other elements, into fullscreen mode using javascript. The FullScreen API now updated to point to official editor draft, thanks Hans!.
Continue reading “Fullscreen HTML5 video”

Handling high resolution sprite images with CSS3

The iPhone 4 has introduced a new challenge to web developers due to its retina display using a higher dpi than most devices. What looked sharp in desktop browsers and other lower dpi devices appears blurry and pixelated on the iPhone 4 and potentially other devices which will have higher dpi screens. The current solution is to have two sets of images one for general and one for high dpi screens. You then switch it up using media queries depending on the screens dpi, this has been documented and discussed many times. Let’s try a different approach. Continue reading “Handling high resolution sprite images with CSS3”

I scope, you scope, we all scope for NoScope! JS style element injection quirks in IE

The other day I was writing some updates and improvements for Modernizr, one to detect for generated content support and two to improve stylesheet and element injection. Modernizr already in a few places inserts a stylesheet and a corresponding element to do some tests e.g. generatedcontent, touch, css3transforms and a few others. All this happened multiple times; each test would inject an element and an inline style element, do its test then remove both elements. All this happens while the page is loading and as you can see the more tests that involve these steps exponentially grow the number of times it needs to touch the DOM. Continue reading “I scope, you scope, we all scope for NoScope! JS style element injection quirks in IE”

Remote debugging with jsconsole, a different take

Ever wanted to remotely access the DOM of a mobile device so you could make changes, test ideas and generally just have a bit of fun. I know I have and I’ve been hacking to create a proof of concept piggy backed on the development of two great projects. The first is Remy Sharps awesome little jsconsole web app that lets you do a bunch of cool stuff using a simple yet elegant interface. The second is a Firefox plugin that allows Firefox to act as a WebSocket server and receive and delegate messages sent from a client. Continue reading “Remote debugging with jsconsole, a different take”