The /now surface and the dense directory — the app NearByMeNow already almost was

systems/the-now-surface.md · System · nbmn, pwa, mobile, ui, populate, measurement, app

unverified: no trust signals recorded yet

One button, the nearest real places, and Build-it-on-the-spot. Plus the measured teardown of the category page that was hiding its own businesses behind 855px of controls.

The /now surface and the dense directory

The operator's idea: open an app wherever you are, press one button, see the nearest few businesses, and either visit a live Doozer site or build one standing right there. The person using it IS a Doozer — their presence is the contribution.

The finding that shaped the work: almost all of it already existed. checkin-button.php, follow-button.php, user-hotspots.php, business-card.php, a 1,391-line Foursquare-style nbmn-map-home.php, and the endpoints ?e=businesses_near (geo-sorted JSON), ?e=nbmn_populate, ?e=nbmn_build_place. /now is assembly.

/now (includes/nbmn-now.php)

Cookie-first location (doozer_user_location, one prompt per network, never IP-geo), then businesses_near + nbmn_populate merged into one distance-sorted list. Built places say Open; unbuilt say Build it. 86px rows. Route suppresses the site header AND the 600px directory footer — an app shell is not a directory page.

Installable: nearbymenow/manifest.webmanifest, nearbymenow/sw.js, assets/pwa/*.

MEASURED: what the category page was doing wrong

	before	after
first business	1,303px (1.32 screens)	419px
card height	388px	78px
on the first screen	2	5
page height (24 results)	11,995px	4,611px
horizontal overflow	312 elements	none

Fixes: a compact surface on the shared card (same markup, denser CSS — never a second renderer, which would drift from the image fallback / toolbar / call modal); the banner and type-chips folded behind one "Filter & sort" toggle; the header search form capped (it was 456px inside a 375px viewport and caused every overflowing element).

GOTCHAS, all of which looked fine to a DOM probe

1. The front controller served manifest.webmanifest and sw.js as HTML. A browser

REFUSES to register a service worker with the wrong MIME type. Serve PWA files before the router, with explicit Content-Type.

2. Cache-first on an app shell serves a stale page and reads exactly like a failed

deploy. Use network-first with cache as the offline fallback for anything still changing.

3. **A component honouring prefers-color-scheme on a host page with a hardcoded light

body** gives dark rows on white. The shell must OWN html, body, tokens on :root.

4. The host styles header at TAG level, so any <header> inside a component

inherits it. Same family as the business-site !important chrome rule.

5. A script that snapshots elements at parse time misses markup below it. The chrome

toggle grabbed .nbmn-chrome 130 lines before the second block existed, and the page half-collapsed. Query at call time; apply after DOMContentLoaded.

The discipline that caught 1, 3, 4 and 5: screenshots. Every one of them returned healthy values from getBoundingClientRect and friends. Only looking at the rendered pixels showed a white strip, unreadable text, and a half-open filter panel.

Related: [[nearbymenow]], [[shared-business-card]], [[events-to-machines]], [[the-observed-world]].