Topics:
apps
css
games
javascript
mobile
node
php
speaking
tehcl
textmate
tools
video
webgl

iOS 5 Safari Bugs: Trio of Test Cases

updated:
2011.12.04
published:
2011.12.04
topics:
mobile

I've run into two bugs and a third bit of tricky behavior with Mobile Safari on iOS 5. I thought I'd share what I found in order to hopefully save somebody from pulling out their hair.

1. Bug With CSS Translated Form Fields

In this bug, giving keyboard focus (such as via JavaScript) to a form input that is translated off screen with CSS transforms causes the page content to shift position and the text input caret to render in the wrong place.

Check out my test case.

2. Inconvenient Behavior with Fixed Positioned Header Bars and Form Fields

Many of you may begin using iOS 5's new CSS position: fixed; support to add fixed nav or header bars to the top of the screen. If you have any form fields in your content that are given fixed positioning (such as a search field in your header bar), you must anticipate that your fixed positioned content will come unglued when those form fields are given keyboard focus.

See my example, including a suggested design fix.

3. Fixed Position Content May Become Un-Clickable or Invisible

This is a particularly pernicious bug. If you add content to your mobile web site / app via AJAX, or reveal hidden content to the user, and this new content scrolls off screen -- if a user reloads your site while scrolled to the bottom of this content, it may make your fixed positioned content (such as a top nav bar) either disappear or become temporarily un-clickable upon reload.

Read my test case for more information, and for a bug fix.

That's it for now. I hope this is helpful to you.


Legend of Equip > Pants

published:
2011.11.01
topics:
games
javascript

Play the full Legend of Equip > Pants Game!

The Legend of Equip Pants: Adventure RPG

Original Post:

I'm very happy to announce my new short adventure/RPG game, The Legend of Equip > Pants: Chapter 1. It's got a spooky vibe. Hopefully you follow me on Twitter and you caught news of my game release on Halloween! I made my deadline goal. I didn't get every last detail in, but I did finish! Hooray!

Game screenshot.

This game is featuring music created by Christopher Winter. He really deserves a lot of major kudos, because he put together music for me in less than a day! (Totally my fault for ignoring music for my game until the last minute!) The game would not be the same without his efforts. Thank you, Chris! Thank you thank you thank you!

Well, this is it for now. I'm interested in doing a proper postmortem, because I learned a lot about my own personal game making process I'd like to share. I also have some thoughts on Akihabara vs. Impact.js. However, this will all have to wait for another blog post on another night, because I'm tired!


Pre-Halloween Spooky Web Demo

published:
2011.10.27
topics:
css
javascript

Boo! Halloween is my favorite holiday, and it is only just around the corner. Here's a spooky web demo I made earlier this month, and I wanted to share it with you. Write your own scary message in #b1000d!

CSS3 and Canvas Bleeding Text Screenshot.

The demo uses HTML5 Canvas to draw the falling streaks of #b1000d. In Safari/Chrome, I'm also able to fill the inside of the letters themselves with a shower of #b1000d. To accomplish this I use an off-screen canvas and the special CSS3 rule background: -webkit-canvas(mycanvas); to set the background behind the text to the canvas animation I'm doing in JavaScript. Then, I use another CSS3 rule -webkit-background-clip: text; to clip the canvas to only show the parts of the canvas that are underneath the text. Finally I make the text see-through with color: transparent; so we can see that clipped background. Go ahead and view source of the demo if you want to see more.

Before you go, I have another announcement, too. I'm working hard trying to complete my new game by Halloween. (I'm both making a game and keeping up with my client work, so wish me luck! heh) It will be a new chapter in the world of Equip > Pants. I hope that you'll like it.


Apestronauts: Node Knockout 2011

published:
2011.08.30
topics:
games
javascript
node

Apestronauts is a multiplayer game of banana warfare developed in 48 hours by Team Watermelon Sauce for the Node Knockout competition. You can play online with your friends at apestronauts.com.

The game was written in JavaScript with a Node.js server using Socket.IO for realtime WebSocket communication. I created some notes for the JavaScriptMN meetup if you'd like to learn more about the development of Apestronauts.


Curious First Look at Socket.IO and node.js

published:
2011.08.17
topics:
javascript
node

Being fairly new to node.js, and even newer to the use of Socket.IO, I had a very interesting morning exploring some of the behaviors of Socket.IO. I thought I'd share the things that raised my eyebrows. There were some good lessons hidden in a basic Hello World example. There was also a really interesting question posed by the feature of Socket.IO that allows for a callback to be executed as an acknowledgement that a sent socket message was received.

I don't want to spend a ton of time on getting started with node.js or learning Socket.IO. But you should know that I'm just talking about a default, easy to replicate install of node and io. All I basically did is brew install node, curl http://npmjs.org/install.sh | sh, npm install socket.io and I'm off writing realtime code.

Hello World Has Surprise Lessons

The first thing I noticed is that it is a bit surprising — even alarming — how little you need to get a hello world example working. Let me show you the example and then explain the alarming part.