iOS8 simulator – keyboard drawer behavior

Beware: As of iOS8, the on-screen keyboard doesn’t slide out when there’s a hardware keyboard connected.

The iOS Simulator simulates a hardware keyboard by default, so unless you turn off “Connect Hardware Keyboard” you’ll see very different behavior than the majority of your users.

iOS Simulator keyboard settings

Hardware keyboard enabled:

iOS Simulator hardware keyboard enabled

Hardware keyboard disabled:

iOS Simulator hardware keyboard disabled

 

Marching ants animated selection rectangle in CSS

Marching Ants is a common technique for showing a selection area in an image. The selection border has animated dashes to help distinguish between the selection and the image contents.

Marching ants in Photoshop

Marching ants in Photoshop

This is a CSS technique for a rectangular marching ants that has advantages over other common techniques:

  • The contents of the selected area don’t need to be opaque
  • Doesn’t require divs several divs for each edge of the animation

The CSS property border-image will do the heavy-lifting for us. Border-image is a strange beast because the name makes it sounds like an alternative to border-style (e.g. solid, dashed, dotted), but it’s really a 9-slice technique that even can fill the padding and content area with an image.

We’ll start with a 10px x 10px animated gif that is composed of nine tiles: 1×1 in the corners, 1×8 or 8×1 on the edges, and 8×8 in the center. The center tile is transparent so that we can let the area behind out element show through.

ants

Download

Our CSS will set border-image and specify that the slice is 1px from the edge and that the image should repeat instead of being stretched.

.selectionIndicator {
    border-image: image-url('ants.gif') 8 repeat repeat;
    -moz-border-image: image-url('ants.gif') 1 repeat repeat;
    -webkit-border-image: image-url('ants.gif') 1 repeat repeat;
}

The result is very close to what you see in Photoshop or other programs. It’s great for creating a cropping UI.

marching ants

Major caveat: border-image isn’t supported in IE <= 10.

in Web | 268 Words

How setTimeout’s timer clamping works

This is a fantastic post on the blink-dev discussion list by Chrome dev James Robinson describing how setTimeout’s timer clamping works. James argues that setTimeout(fn, 0) behaves exactly as setImmediate(fn) would except in excessively-nested timers.

Nearly everything I’ve read starts off with an incorrect idea about how timer clamping works or why it’s in place.  The way timer clamping works [1] is every task has an associated timer nesting level.  If the task originates from a setTimeout() or setInterval() call, the nesting level is one greater than the nesting level of the task that invoked setTimeout() or the task of the most recent iteration of that setInterval(), otherwise it’s zero.  The 4ms clamp only applies once the nesting level is 4 or higher.  Timers set within the context of an event handler, animation callback, or a timer that isn’t deeply nested are not subject to the clamping.  This detail hasn’t been reflected in the HTML spec until recently (and there’s an off-by-one error in it right now), but has been true in WebKit/Blink since 2006 [2] and in Gecko since 2009 [3].  The practical effect of this is that setTimeout(…, x) means exactly what you think it would even for x in [0, 4) so long as the nesting level isn’t too high.

With a better understanding of timer clamping, let’s consider the possible use cases for scheduling asynchronous work.  One is to time work relative to display updates.  Obviously requestAnimationFrame() is the right API to use for animations, but it’s also the right choice for one-off uses.  To perform work immediately before the next display – for example to batch up graphical updates as data is streamed in off the network – just make a one-off requestAnimationFrame() call.  To perform work immediately -after- a display, just call setTimeout() from inside the requestAnimationFrame() handler.  The nesting level is zero within a rAF() callback so the timeout parameter will not be clamped to 4.

in Web | 316 Words

Essential JavaScript links

This is a continuously updated list of JavaScript articles and resources that I recommend to other Amazon developers.

in Web | 113 Words

Essential CSS links

This is a continuously updated list of CSS articles that I recommend to other Amazon developers.

in Web | 115 Words

Getting started with Ruby on Rails

These are some of the tutorials and guides I’ve found most helpful while picking up Ruby on Rails 3.

Ruby language:

Installing Rails on Windows:

Best “my first app” walk-through:

Using “remote” to ajaxify links and forms:

“Unobtrusive JS” library that ships with Rails 3:

Use Twitter Bootstrap with Rails:

Get Chrome “Side Tabs” back (kind of)

Thousands of people, including myself, cried out in terror when Google removed the “Side Tabs” from Chrome. I tried for one month to settle into Firefox + Firebug + Tree Style Tabs as my main browser, but that combination is nowhere near is snappy as Chrome for my workload.

My workaround has been to use the most recent build of Chromium (Chrome’s open-source alter ego) that still contained the Side Tabs feature. Because there are no security updates available for this version, I use NoScript and whitelist scripting on sites as needed.

Chromium 15.0.862.0 – Windows: chrome-win32.zip, Mac: chrome-mac.zip

A major advantage of using Chromium instead of an old version of Chrome that has Side Tabs is that Chromium can be run side-by-side with the latest version of Chrome.

Understanding WebKit composite layers and iOS Safari performance

I’ve made a video showing how Webkit handles animating of CSS3 transforms very differently from animating of CSS position (left, top) or margin. The are several different conditions that will trigger the browser to use a “composite layer” which minimizes repaints and allows for hardware-accelerated composting. The benefits are especially dramatic in iOS Safari.


This Chromium document explaining composite layers says that the following conditions all trigger a separate composite layer:

  • Layer has 3D or perspective transform CSS properties
  • Layer is used by video element using accelerated video decoding
  • Layer is used by a canvas element with a 3D context
  • Layer uses a CSS animation for its opacity or uses an animated webkit transform
  • Layer has a descendant that has a compositing layer
  • Layer has a sibling with a lower z-index which has a compositing layer (in other words the layer is rendered on top of a composited layer)

See Rich Bradshaw’s awesome CSS3/Transforms page for some great examples.

HTML5 DOM and CSS3 performance

I ran across an awesome presentation by Paul Irish discussing DOM and CSS3 performance issues:

The video: http://www.youtube.com/watch?v=q_O9_C2ZjoA
The slides: http://dl.dropbox.com/u/39519/talks/gperf/index.html
The blog post: http://paulirish.com/2011/dom-html5-css3-performance/

The top tips that were new to me:

in Web | 86 Words

New Firebug feature: console.timeStamp

Firebug recently added an awesome new API; console.timeStamp lets you to create named “events” in the Net panel:

This technique requires manual instrumentation and isn’t as detailed as the Timeline panel in Chrome/Safari or a heavy-weight tool like dynaTrace, but it’s a nice, simple, uncluttered view compared to those other tools.

I used it today on a machine where I couldn’t install dynaTrace, I’ll surely be using it again. Unfortunately it isn’t supported in Firefox 3.6 and older.

in Web | 84 Words