le accidental occurrence

Awesome footage of appears to be Market St. going towards the clock tower, pre-Earthquake.  Love the nonchalant playfulness of the kids running in front of the camera.  Little did they figure their actions would delight some hapless net-passerby a hundred years later!

via Mises Economics Blog.

Update: Looks like there is 2005 response video.

Update: Try live working demo!

iPad will be a great device for casual reading and web surfing.   Not so for writing. The lack of tactile-feedback is one reason.  The form-factor is another.

The great thing about the iPad is being able to hold it in your hands. To use the default keyboard, you’d have to hold it in one hand while typing with the other — not so comfortable.  Or lay it on a flat surface, which takes away from the form-factor benefits.

Why not use your thumbs?  You can hold it with both hands and use both thumbs for typing.  Thumb-based keyboards are a plenty:

The default iPad keyboard (as gleamed from the photos), has 37 keys.

• 26 – A-Z
• 2 – right/left shift
• 2 – right/left numeric
• 2 – punctuation
• 2 – meta
• 1 – delete
• 1 – search/enter

With inside screen dimensions (sans bevel border) of roughly 5.82″ x 7.76″, I estimate key dimension to be about .4″ for the typical alphanumeric keys, plus the space around it.

The length of my thumb is about 2 ½” long. So, including intra-key spacing, roughly four keys should be easily within reach of a single thumb.

Read the rest of this entry »

Hot on the heels of sliderControl comes its close cousin, the spinControl.   Whereas in the sliderControl, the thumb widget is moved across a fixed set of values to select the desired input, in the spinControl the whole set is movable.  This allows for larger set of data that can fit on the visible screen.

All the features of sliderControl are supported (kinetics, bounce, snap, toggle, events handlers, etc.).  Additionally, a new alignToEdge option allows the scroll area to align to the left and right edge of the viewport instead of its center.

For gory details, demo and download, see spinControl page.

Bonus

Also included is a spinToggle class that mimic’s iPhone’s toggle switch, complete with slide action.

The touch-enabled sliderControl covered earlier is an easy UI widget to select a value from a set or a range of numbers.  It can be easily modified to function as a slide-to-unlock contorl that you see on the iPhone.  Enter the slideToAction control:

mySlider6 = new slideToAction('#slider6', ['slide to unlock'], {
	onchange: function(){
		alert('unlocked'); // some useful action!
	}
});

Markup:

<div id="slider6" class="slider"></div>

When the thumnail is moved all the way to the end, the onchange handler gets called.  Simple.  slideToAction inherits all of sliderControl’s kenetics and emulates the spotlight effect of iPhone’s control.

slideToAction is included as part of sliderControl.  See item #6 ‘single value slider’ on the demo page.

(The thumbnail looks better on the iPhone browser!)

The spotlight effect of the label text is achieved using -webkit-mask-* CSS attribute and animating the -webkit-mask-position property.  Here’s the CSS:

.sliderAction .sliderLabel {
	font-size:18px;
	font-weight:normal;
	text-shadow:none;
	color: #fff;
	-webkit-mask-image: -webkit-gradient(linear, 35% top, 65% top,
           from(rgba(0,0,0,.20)), color-stop(.5,rgba(0,0,0,1)), to(rgba(0,0,0,.20)));
	-webkit-mask-size: 50%;
	-webkit-mask-repeat: none;

	-webkit-animation-name: spotlight;
	-webkit-animation-timing-function: linear;
	-webkit-animation-duration: 1500ms;
	-webkit-animation-iteration-count: infinite;
}

using the animation keyframes:

@-webkit-keyframes spotlight {
    from {-webkit-mask-position: 0;}
    to {-webkit-mask-position: 100%;}
}

The  -webkit-mask-position property is animated on desktop Safari 4.x and Chrome 4.x.  It isn’t supported on iPhone OS 3.1.2 browser… but hopefully it will under 3.2.

Update: (11 March 2010)

New version 0.1a has an updated slideToAction() that looks more like the real thing.  Here’s a screenshot.

Seems like SDK developers have been trying to get this feature implemented as well.  See here and here.

I needed a touch-enabled slider input control for a project I was working on.  Unfortunately there was no good existing solution, so I rolled my own.

Features:

• kinetic snap to value
• optimized CSS animation
• full range of slider values supported
• customizable with extensive options
• fully programmable
• event callbacks
• adjusts on orientation change
• works on desktop webkit browsers (for testing)
• theme to taste!

See sliderControl page for details.

Casual Encounters–22 Flash Games Worth Getting Addicted To | Maximum PC.

Comparison of layout engines (HTML5) – Wikipedia, the free encyclopedia.

Great easy read-up on <canvas> support in HTML5.

HTML 5 defines the <canvas> element as “a resolution-dependent bitmap canvas which can be used for rendering graphs, game graphics, or other visual images on the fly.”

Let’s Call It a Draw(ing Surface) – Dive Into HTML5.

Also: Mozilla canvas tutorial and CanvasDemos.com.

Elegant Code

via God Mode Easter Egg.

The Endeavour

Programmers are most effective when they avoid writing code. They may realize the problem they’re being asked to solve doesn’t need to be solved, that the client doesn’t actually want what they’re asking for. They may know where to find reusable or re-editable code that solves their problem. They may cheat. But just when they are being their most productive, nobody says “Wow! You were just 100x more productive than if you’d done this the hard way.

via Why programmers are not paid in proportion to their productivity.