Cogteeth.com - personalized T-Shirts

Oct 6, 2006

Partly as an experiment with the new Zazzle API, I've created a new site Cogteeth.com.

At Cogteeth you can create customized T-Shirts by entering messages for the back and front of the shirt. The text of the messages is converted to UTF-8 and the resulting codes displayed in hex. The result is a T-Shirt with a coded mesage that only those with too much time on their hands can read.

Here's what I've learnt from this exercise:

  1. Passing an empty field to http://www.zazzle.com/api/create is the same as not including it in the request (i.e. the text in the template will be used). So If you want to leave a text field blank, you must pass in a SPACE (e.g. http://www.zazzle.com/api/create?frontText=%20&blah=...).

  2. The Zazzle API does not yet support non-ASCII characters. Passing a UTF-8 encoded character sequence (e.g. http://www.zazzle.com/api/create?frontText=%C2%B7) will NOT result in the UTF-8 C2:B7 character. Zazzle say this may be supported in future.

  3. Javascript uses UTF-16 strings, so if you want to use Javascript to convert form field values to UTF-8 (and ensure Unicode characters above 0x10000 are handled correctly) you must first decode from UTF-16. Javascript appears to have no built in support for this kind of thing so I ended up writing my own functions to decode from UTF-16 and encode to UTF-8.

  4. Although the HTML 4 spec suggests that only ASCII values can be used in HTTP GET form submissions, most browsers will sensibly encode non-ASCII characters in UTF-8 and then URL encode them before submission. (This assumes the page containing the form was sent as UTF-8 encoded).

  5. Why isn't there an "onFieldValueChange" event for form fields? I currently use the "keyup" event but I'm not interested whether the change was due to a keystroke, I just want to know if a change occured. The onChange event is no use here - it only fires when the field loses focus.

54:68:61:6E:6B:73
20:66:6F:72:20:72
65:61:64:69:6E:67
2C:20:6E:6F:77:20
67:6F:20:62:75:79
20:61:20:54:2D:53
68:69:72:74:21:00