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


Japan travel tips from a first-time gaijin


Shibuya Crossing at night

Shibuya Crossing at night

I’m back from 2 weeks in Japan.  Here are some tips that I wish I had known at the beginning of my trip.


  • Free WiFi is rare. Airports will have free WiFi. Large train stations will have free WiFi in the hub area but not from the platforms.  I had problems getting paid WiFi to work from the platforms a few times.
  • Less than half of the hotels we stayed at had free WiFi in the room.  Some had free WiFi in the lobby though.  It’s very difficult to tell when booking a hotel whether “free WiFi” is in the room or just in the lobby.
  • More than half of hotels had free wired ethernet available in the room.  Highly recommended that you bring a compact wireless router.

Mobile data

  • We rented a Japanese SIM from Advanced Global Communications. Despite inquiring several weeks before our trip, they were sold out of WiFi hotspot devices, so we rented a SIM card and tethered.  You reserve your SIM or device online and either pick it up at the airport or have it shipped to your hotel.  The package includes a return mail envelope, and you drop it in the mail before you leave the country.
  • Had we known that public WiFi is so rare, we’d have rented one SIM card for each person.  Several times our group wanted to split up, but it was too painful to find each other later, so we stuck together.
  • Mobile providers advertise “unlimited” data, but you will be massively throttled if you go over 1GB in a 3 day period.  We were throttled on the 2nd day, and for the remainder of the trip we had 6Mb upstream and 0.01Mb downstream (literally).  Only Google Maps and Gmail worked at all on that slow of downstream.  Strangely, because upstream wasn’t throttled, uploading images and even movies to Facebook and Instagram worked well.  Facebook home feeds or web browsing were unusable though – just timed out after a couple minutes 80% of the time.


  • Vending machines, subway tickets, and ramen ticket dispensers take only cash.  Save your cash for these things, and pay using a credit card at convenience stores and hotels.
  • Every 7-Eleven location has an ATM where you can withdraw money.  The fees for me (Bank of America) were approximately $5 per transaction + 3% currency conversion fee.

Japan Rail Pass

  • A JR Rail Pass costs $445 for 2 weeks.  It *must* be purchased outside of Japan from a Japanese travel agent.  They give you a voucher, then you exchange the voucher inside of Japan at the airport train station for your pass.
  • The pass is good for the “JR” lines (trains).  If you’re bouncing around the huge Tokyo area you’ll more often be taking subways, which aren’t JR.
  • We traveled around Tokyo and from Tokyo to Kyoto via Shinkansen (bullet train, ~$150 each way).  The pass was slightly worse than break-even.  If you’re going to stick around Tokyo for your trip, the rail pass is likely not worth it.  If you’ll be traveling to Kyoto or farther, it’s probably worth it.

Hostels, Hotels, and reservations

  • Even the cheapest hostels and hotels are safe and clean.  Every part of Japan we saw was safe and clean.
  • If traveling in a group of 3 or more, a cheap hotel will be roughly the same price as a hostel, and you’ll likely sleep better than in a large room with strangers.
  • For a country obsessed with convenience, booking hostels/hotels/services in Japan is a pain.  Many places don’t have online reservation systems, instead you fill out a web request form and wait for someone to manually email you with an answer for whether they can accommodate you. After a few days of being frustrated by these email reservations, we started using HostelWorld and to book.
  • Hotels and hostels will fill up on Friday nights and weekends.  Book a couple days in advance for those nights.
  • Many special services like bath houses and river rafting won’t let you book less than 24 hours in advance, so plan your activities 2 days ahead.

Important phrases

  • arigatō – thank you
  • sumimasen – excuse me / pardon me
  • konichiwa – hello
  • sayonara – goodbye
  • daijoubu – I’m OK (if someone bumps you)
  • oishī des – it’s delicious (thank the ramen cook after finishing your bowl)

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.



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.

Cross-editor coding style with EditorConfig

EditorConfig is a standard that helps developers define consistent coding styles between different editors and IDEs. Put a file in the root of your project called .editorconfig, and when someone opens a file in a supported text editor, the editor will adhere to the project’s style rules. There are EditorConfig plugins for pretty much every text editor. I use this plugin for SublimeText.

Drop an .editorconfig file in the root of your project:

root = true

indent_style = space
indent_size = 4
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

trim_trailing_whitespace = false

You can install EditorConfig for Sublime with Package Control in just a few seconds.

editorconfig - SublimeText

Netflix’s “Freedom and Responsibility Culture”

Netflix’s culture fascinates me.  Their “Freedom and Responsibility Culture” have some overlap with Amazon’s “leadership principles” but these are publicly shared and, in my opinion, better codified.

9 Core Values from the Netflix presentation

  • Judgment
    • You think strategically, and can articulate what you are, and are not, trying to do.
    • You smartly separate what must be done well now, and what can be improved later.
  • Communication
    • You listen well, instead of reacting fast, so you can better understand
    • You treat people with respect independent of their status or disagreement with you
  • Impact
    • You accomplish amazing amounts of important work
    • You focus on great results rather than on process
  • Curiosity
    • You learn rapidly and eagerly
    • You seek to understand our strategy, market, customers, and suppliers
  • Innovation
    • You re-conceptualize issues to discover practical solutions to hard problems
    • You challenge prevailing assumptions when warranted, and suggest better approaches
  • Courage
    • You take smart risks
    • You question actions inconsistent with our values
  • Passion
    • You inspire others with your thirst for excellence
    • You care intensely about Netflix‘s success
    • You celebrate wins
  • Honesty
    • You are known for candor and directness
    • You are quick to admit mistakes
  • Selflessness
    • You make time to help colleagues
    • You share information openly and proactively

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.

The difference between smart quote and apostrophe

Improper use of “smart quotes” (aka “slanty quotes”, “curly quotes”) came up in a code review. Get Smart with Smart Quotes was a great resource.  Here are some quick take-aways:

  • Smart quotes consist of an open and a closed version (also referred to as left and right quotes).
  • Don’t confuse apostrophe () with a single quotation mark ().
  • Contractions should use the apostrophe character.
  • There are named HTML entities for smart quotes: &lsquo; (‘) &rsquo; (’) &ldquo; (“) &rdquo; (”)



Of small fonts, blink rates, and eye strain

eye strain
A low blink rate can cause irritated eyes (“eye strain”). Small fonts, poor type contrast, and poor typography all contribute to low blink rates. Eye strain is not permanent.

Several people, after seeing the small fonts on my laptop (2560 x 1600 on a 13″ screen), have told me that I’m “hurting” or “damaging” my eyes my using such small type. I haven’t ever had eye strain symptoms and wasn’t sure whether to be worried.

First, and most importantly, eye strain doesn’t appear to be permanent.

“Despite popular belief, sitting too close to the television, or in this case the computer, won’t cause blindness or other permanent damage,” said Dr. Kimberly Yen, assistant professor of ophthalmology at BCM. “What it can do is cause eye strain symptoms.”

When eyes are focused on one item for a long period of time, whether it’s a computer screen, television or even a book, the blink rate slows. That could lead to eyes feeling dry or uncomfortable. Vision could even begin to blur or double. One common side effect of eye strain is headache.

source: Baylor College of Medicine

A great article at Eye Magazine (a graphic design magazine) breaks down specific stressful conditions:

  • reading small text sizes
  • reading low-contrast gray text
  • reading with a light source behind the reading material to cause glare
  • reading from too close a distance, which causes the eyes to point inward towards each other (convergence stress)
  • reading from variable focal distances (accommodative stress)
  • reading while wearing glasses that simulate an astigmatism (refractive stress)

Small text sizes, low contrast, glare and refractive stress all resulted in increased activity in the orbicularis oculi, while convergence stress and accommodative stress did not, though after reading in these two conditions, readers are more likely to report headaches and pain coming from behind the eye. Stressors such as small text size and glare are reported as irritation on the front of the eye.

Blink rate is a key factor in eye stress. Difficult-to-read text (e.g. small text) causes a lower blink rate.

Light grey text on a white background and small text size both lead to an increased orbicularis oculi activity and decreased blinking. These two conditions are related to text quality, and we would expect to find similar indicators of eye fatigue with poor font quality or condensed letter spacing. To reduce this type of eye strain, we need text of the highest possible quality.

…other studies found that we blink far more often under relaxed conditions than while reading: 22 blinks per minute while relaxed, versus ten blinks per minute while reading a book. A recent study at Pacific University illuminated why blinking is suppressed during reading. Tai and Sheedy found that the eye movement following a blink was far more likely to be a regressive or backward corrective eye movement than one that did not follow a blink.

I’ll be sticking with small fonts for now.  If I experience eye strain though, it’s good to know that cranking up the font size can offer some relief.

Essential JavaScript links

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

Essential CSS links

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