Friday, October 25, 2013

quick and dirty javascript sounds

I've written about HTML5 audio before, but the quickest/dirtiest way is:

var fx = document.createElement('audio');
fx.setAttribute('src', 'soundfile.mp3');
fx.setAttribute('loop', 'loop'); //optional

//...
fx.play();
//... 
fx.pause();

non-looping and resetting variants are left as an exercise for the reader.

Thursday, October 10, 2013

the welcoming details of old macpaint

Making the rounds is CloudPaint, a fairly faithful reproduction of the old MacPaint that you can use in the browser!

MacPaint really set the model most paint programs would use, especially the toolboxes. "Zoom" was relegated to a "FatBits", an option under "Goodies", rather than the magnifying glass used today, and there is only a hand to move to different parts of the image rather than scrollbars, but overall everything is quite recognizable and usable.

Folklore.org has the history of Bill Atkinson's creation of the program, including the "marching ants" style of showing area selection. The Computer History Museum also has a page about its development including a shot of its predecessor (it was based on a Lisa program called LisaSketch or SketchPad) before the toolboxes were added.

One lovely detail of the program is starting off with the big wide paintbrush selected-- it is so much more engaging than skritching out individual pixels with the pencil tool. (It also probably influenced the choice to use "hello." written in cursive for early promotional shots.) That kind of consideration to first user experience goes along way (especially with something as innovative of the Macintosh, which for many people was the first time they would have tried a computer mouse.)

Another fun thing is Painting and Filling with patterns. Once color came on the scene, these patterns sort of fell by the wayside, but there is something satisfying about seeing the swatch of area filled with a pattern that is fixed independent of the line used to draw it, almost like one is brushing a path of snow from a windshield and then seeing what is underneath.

I still haven't found a modern-day paint program with powerful features and an easy interface for OSX... Paint.NET for Windows was excellent in this regard. "Pixelmator" comes close, though has several annoyances (some of which I just found out were configurable settings, but overall it aims too high, UI-wise, trying to be Photoshop-Lite rather than MacPaint-Pro)

Tuesday, October 1, 2013

calling Ajax-derived telephone numbers in iOS javascript

Previously I mentioned a little demo iOS app that just wrapped a web widget. Part of the demo was to pull down a phone # from the server via an Ajax call and let the user try to dial it. This seemed to run afoul of Apple's "user initiated action" type of rules... my code worked if I triggered it from a button directly, but if I tried to make the call as the result of an Ajax call, no dice. 

Problem was I was using 
window.open('tel:######'); 
-- turns out doing 
window.location = 'tel:######'; 
face no such restriction. 

Phew! I was worried I was going to have to build a button and have the user press that one, too.