East Harlem and the Museum of the City of New York

Subway Status

Once you’ve lived in New York for a while, you don’t necessarily need a specific route to get between two points. You know roughly which subway lines will you get from point A to point B. The important thing becomes knowing which trains are operating normally and which are delayed or rerouted (which seems pretty common these days). To that end, the MTA site provides a status widget providing an overview, but I’d like it to be a single click (or two-finger swipe) away in the Today view of the Notifications Center. A similar display would also be useful on phones.

Subway status widget prototype screenshot

Interactive subway widget prototype (requires a browser that supports CSS Grid)

The brief SVG morph from the 7 local circle to express diamond is done using anime.js.

Flooded Boroughs

Using computer projections to simulate thousands of storms in potential future climates, researchers found that storms would be more likely to swerve away from the city. The trouble is the storms that do approach will, on average, be more powerful. And all storms that hit New York, regardless of their power, will start at a higher baseline, as they’ll be traveling on seas that have risen due to climate change.

Specifically, the work found that the one-in-500-years flood height at the Battery, a park in southern Manhattan fronting the harbor, could range from 13.1 to 16.7 feet by the year 2100, and 16.4 to 50.5 feet by the year 2300.

New York City’s fate is closely tied to Antarctic ice, climate scientists warn

This reminded me of a still from The Expanse…

A still from The Expanse showing seawalls around New York City

Safari Responsive Design Mode Polish

Here's the UI as seen in Safari Technical Preview 41, released October 4, 2017.

Safari Technical Preview 41 Responsive Design Mode

Revised Responsive Design Mode

Revised Safari Responsive Design Mode
Safari Responsive Design Mode - device icon hover showing rotate icon
  • Add a bandwidth throttling menu:
    1. Default Network
    2. High-Speed Cellular
    3. Low-Speed Cellular
    4. Offline
  • Improve the contrast of the selected viewport setting in a style consistent with the Web Inspector
  • Show a rotate icon when hovering on a device icon
  • Align label baselines
  • Add a screen mode menu for iPads that would allow selection from:
    1. Full Screen
    2. Primary
    3. Secondary
    4. Split View

    This provides an explicit UI for using the iPad multi-tasking modes and would allow users to switch between portrait and landscape orientations of different iPad models while staying in a multi-tasking view. In STP 41, you can skip cycling through the iPad multi-tasking modes by Option-clicking the iPad icon.