Mr Speaker

mrspeaker's head in a monitor You find yourself at the entrance to the Hompage of Mr Speaker. In a darkened corner sits a trunk containing HTML5 games and some JavaScript tidbits. Next to it you spy a mastodon account. Exits are North, East, and .

Canvas and Inputs aren’t friends

Here are some cursory notes on a peculiar issue involving plummeting frame-rates when drawing input elements in DIVs that overlap canvas elements in fullscreen web apps. That's the kind of market I'm targeting these days.

tl:dr; Please test your canvas-capable device with this test case in normal and full screen modes, and report back the results!

Read on for more »

iOS 4.3 Geolocation in web apps

Update: problem solved(ish)! See below...

Not again you Apple monsters! Last time it was multi touch that you decided to take from us, this time it's geolocation. Upgrading my iPhone 3GS to iOS4.3 caused a mobile web app I'm working on to start throwing errors. Danged if I can figure out why. Here's what I know so far...

Calling navigator.geolocation.getCurrentPosition in mobile safari works fine - returning a normal position object. However, when added to the home screen and run as fullscreen app (using the apple-mobile-web-app-capable meta tag) it would not ask for permission to access geo features, but immediately fail returning the error:

Permission error; The operation couldn't be completed. (kCLErrorDomain error 1.)

Looks like a permission error to my professional eye. But why? Dunno. I made this test app, called "Geoful". If you could have a go and report back I'd be most grateful.
Read on for more »

UX with EXIF FTW!

While I'm on the subject of noticing nice UX touches, here's a nice UX touch I noticed in Gmail. Well, first I noticed a really really really weird advertisement in a chemist in Paris, and took a photo of it on my phone. This was the image:

There are a couple of things to note: firstly, there appears to be laser beams shooting into or out of that small child's forehead. Secondly, the image is incorrectly rotated - as I snapped it in landscape mode.
Read on for more »

“Elastic social graph”

www.color.com was released yesterday to great fan-fare: primarily thanks to the news they had secured 41 million dollars in funding (not a typo) for an app that let's you take and share photos with other poeple (a typo) in the nearby area.

The idea is, you're at a party and take a photo - and everyone there "gets it" - so it's like a photo album of the event without having to do any manual sharing or organising.

I like the concept, but mostly because I thought of it. Ok, no, I didn't think of it: but some time ago I spent a bit of effort trying to convince some fellow nerds to implement something similar. Sure, it was focused on chat instead of photos - but had a photo-sharing aspect. Like a geo-located chat room: a real life Habbo where you could extend or shrink the circle you were interested in, "elastically".
Read on for more »

Swipe to delete

Here's one from the "hey-how-did-I-do-that?"department. I'm not sure what version of iOS this feature was introduced, but I accidentally discovered that on standard apps you can swipe left or right on a list item to reveal a "delete" button.

This is a far more satisfying interaction than the old way, which bombarded the page with a phalanx of red "arm-for-deletion" buttons (that still remains on the standard weather app). The new design is a lot more gentle - and show that someone is still thinkin' hard about how to make a good experience better.

The only downside is I now have to revisit a bunch of old HTML5 mobile web apps and update them.

Long jQuery fades eats CPU

While doing a little refreshing around these parts I noticed that the "fading bubbles" that I have were chewing up a ridiculous amount of CPU when the page loaded. I had 15 or so bubbles rigged to fade in verrrrrry slowly - over 20 seconds - after window.onload fired. I thought I must have had some crazy infinite loop or some such, but no... after whittling things down I ended up creating this test page:

jQuery long fade test

If you open up Activity Monitor and click the "big fade" button, the screen will slowly fade in (to background colour #bada55, naturally) and your CPU will say bye-bye. Similarly, if you fade in a bunch of items over a long time you'll see a pretty serious drain too.

I haven't gone looking over on the mailing lists to see if this is a "known issue", or started digging into the source, 'cause I'm a lil' pressed for time at the moment - but if you found this page while googlin' to fix your fading woes, I feel your pain and will tell you to do what I shoulda done: use CSS transitions!

Finally, while checking I used the correct spelling of "whittling" I found this statement on the official whittling website:

Welcome to the world of whittling, a hobby for some, an obsession for others, a joy for all.

I'm a fan of whittling and all, but that just seems like a logical fallacy to me.

Tumblr proves emacs superior

Well, the case is closed: Emacs is better than vi. Today Tumblr decided to release their database username and password along with other oauth-y credentials to the world. How did they manage such an impressive feat? Examining the code that was exposed shows:

i?php require_once('chorus/Utils.php'); 

i?php? Yes, that's supposed to be <?php. Here's how the scenario went:

  1. Manger: "You can't go home for the weekend until that patch is pushed all the way to production."
  2. Coder: "But... but... It's 6PM on a friday and I've already had 2 beers! It'll take hours to go through Q&A and staging!"
  3. Manager: "Ok cool... see you on Monday!"
  4. Coder: "Hmmm, bugger this... I'll just pop this fix straight up on live!"
  5. Coder runs command vi index.php and presses i to paste in the patch... accidentally hitting i once for each beer consumed, followed by :wq.
  6. Coder goes to the pub

Pffft... Insert mode. Yet another reason to switch to Emacs.

Choose your own cache.manifest

I love the HTML5 cache manifest functionality more than the internet itself. It lets me carry my crazy proof-of-concepts around in my pocket - offline - to test out on the train to-and-fro the way-to-work.

The way it works is you add a link to a "manifest" file in the HTML tag. The browser sees the link, reads the file, and uses the information in it to know what to cache. The actual manifest is just a plain text file containing the relative path to every file in the project.

You usually only have a handful of files and so you kid yourself that you can flawlessly create your CACHE.MANIFEST manually. The problem is - the tiniest of typos and it fails. And it always fails. Because of your chronic poor spelling.
Read on for more »

Google says Bing is tracking you

Here is a fantastic piece of copywriting misdirection from the Logging policies for Chrome Instant:

Because your default search engine requests results as you’re typing in the address bar, it may be logging your text as search terms. The specifics of the logging behavior depend on your default search engine. For example, if you use Bing as your default search engine, the text you type in the address bar is sent to Bing (just as it is when you search on www.bing.com), and Bing's logging policies will apply.

At Google, we keep search logs to improve our services, strengthen security, and help prevent fraud and abuse.

Lucky you're not using that evil Bing search engine then, isn't it? Of course, if you don't actually want your searching to be logged, sold, and etched into your Google DNA database table then you should probably mosey-on-over to DuckDuckGo...