A Planner’s Personal Statement

I believe every planner needs to periodically do self-assessments in regards to their approach and reasons for pursuing the profession.  As a “non-traditional” planner myself in the tech field, I find it ever important to ground and focus oneself in the tech industry’s sharknado of change.  I recently found my graduate school application essay buried in my document folders.

My pursuit (of planning)… critically addresses livability issues in the present and future and brings opportunities for creative solutions to society’s needs. Geography and civic-service have been essential qualities of mine since childhood.

– An idealistic me.

Pretty standard mission statement for a 20-something.  I’ve actually come to dislike the term “livability” because it has been rather abused by community development departments across the country.  Everything relates to making things livable–no need to point to it. Many livability issues are merely conflicts between opposing parties.  And with greater emphasis on climate change, the term now seems more equated with survivability than mere inconvenience.

I grew up on roads that were faux-rural but actually serving a suburban region of 350,000 people.

I grew up on roads that were faux-rural but actually serving a suburban region of 350,000 people.

I can’t put my finger on what I’d replace it with, maybe a general term like “urban issues.” What is still emphasized for me, is the who and when of planning.  Make it better for people now and for tomorrow.  How can I use my hands to fix those wicked problems.  The way I’ll go about it is to seek creative solutions.   Young planners constantly complain that the current bureaucracy of planning is not serving the people effectively nor timely.  We have to work around this, and be persistent about the changes we want to see.

The rest of my essay is pretty basic, but I noticed an interesting sentence that related to my high school years:

Concepts of human relationships with nature entered my ethos and the desire to address these relationships grew stronger.

I attended an environmental studies magnet school which drilled on the relationship between humans and their environment.  To me, the term nature relates to more than birds and bees, but to complicated ecosystems on our planet, which include our human inventions.   Our technology is creating new layers of movement and interaction in cities.  There’s hybridization, friction, and sometimes new seamlessness.  I think I can affirm that my personal statement is to continue helping humans cope and better utilize their surroundings.

From San Francisco to Washington D.C.

Shrink-wrapped Capitol

Shrink-wrapped Capitol

It’s been a week here in the beautiful, sunny, and humid District of Columbia (slash Arlington, Virginia). In all my years I have never been to the nation’s capital and it’s odd to finally see it all in real life. Washington D.C. is often cited in foundational urban planning and geography courses given that it was one of the earliest grand endeavors to fully plan an American city. L’Enfant’s plan introduced French sensibilities and diagonal avenues into our austere grid system.

The internet is full of delicious historical tales on the controversy of D.C.’s city plan so I won’t try to pretend I’m an expert on this.  For the most part, the city still maintains the Baroque underpinnings of ornate architecture, spacious gaudy plazas, and grand wide avenues punctuated by scenic vistas. (“Dresden: Making of a Baroque City” by @ralphharrington). Turning a corner, I’m awestruck by the rising Capitol (covered in scaffolding), neatly centered on spacious Pennsylvania Ave. Even small statues like Dupont Circle bring about a sense of wonder and folly. I thought I’d be giddy about the traffic circles (roundabouts in MN lingo), but they’re very wide and thus well integrated so they don’t seem so unusual or revolutionary anymore.

McPherson Square and Mr. McPherson himself. The square is a transit hub terminus for buses.

McPherson Square and Mr. McPherson himself. The square is a transit hub terminus for buses.

I can understand why the West Coast’s Pan-Pacific heritage draw upon Baroque styles and philosophy. The Hogwarts-esque Old Post Office with its Romanesque Revival entryway and clock tower is like many early 20th century towers in San Francisco or Berkeley. The Capitol vista especially reminds me of the Ferry Building. However, as appropriate a design for a federal city, it certainly does not do well for street life.  The streets are perhaps too grand and wide for the pedestrian, and the revival architecture has a foreboding fortress feel.  The closer you move to the National Mall, the more the rising building scale seems to isolate a person.

So I split my days between these granite symbols of our country’s permanence, for the green, tight-knit neighborhoods of D.C.  Interestingly, the row houses here are about as wide (or shall I say squished) as those in San Francisco. A single-family walk-up is a door and four windows.  What’s interestingly absent in D.C.  are vernacular architectural styles that yielded colorful Alamo Square Victorians and Italianate apartment buildings.  Perhaps the 1906 Earthquake had something to do with it, a need for San Francisco to prove itself after literally being leveled. D.C.’s housing on the other hand reflects its relatively early working class upbringing, with the good stuff focused in only particular neighborhoods that served the powerful (“Struggling over history in a gentrifying D.C.”).

Adams Morgan. A Haight Ashbury with actually interesting businesses and unique food. Also the freshest empanadas I've ever had.

Adams Morgan. A Haight Ashbury with actually interesting businesses and unique food. Also the freshest empanadas I’ve ever had.

The neighborhoods have impressed me. They’re sort of a goldylocks between Portlandish and Los Angeles attitudes. The affordable streetcar-era retail spaces allow for gentrifying small bites, coffee, and dessert shops.  Plentiful trees and parks highlight well done streetscapes and sidewalk designs.   There’s also plenty of mid to high-end restaurants with well-crafted concepts situated amongst all this.   And not so surprisingly, these neighborhood centers completely ignore L’Enfant’s plan, situating themselves arms reach out of main drags and transit hubs.  I don’t really see a San Francisco effect in the near future, so hopefully there will remain something refreshing here for everyone.

The glowing red orbs of the Eye of Transit keep those government workers complacent.

The glowing red orbs of the Eye of Transit keep those government workers complacent.


As for transit, I was very impressed. Everyone likes to talk sh*t about their own transit system. I’m amused by unsuckdcmetro because compared to BART, their system is light-years ahead in terms of capacity and service.  DC Metro is ridiculously convenient (stations every 2-3 blocks) and goes about just everywhere relevant.  It’s stations are immaculately clean and people orderly move about.  BART may win the award for frequency and on-time service, but after riding Metro for the first day, I realized I’d rather have a built-out subway system over a single packed line.

On Being a Transit User

Interior of a Muni Orion VII, the workhorse for lower density routes. Not particularly powerful.

Interior of a Muni Orion VII, the workhorse for lower density routes. Spartan, austere, practical.

During my Masters program, I pondered the life of a transit user, specifically someone who uses transit as an exclusive mode of transportation. If cities are on this push to reimagine themselves as transit-oriented communities, then why is it so much of its eventual design and implementation never concerns people.

We know the demographics of the current transit “community” has users that are mostly poor, below median earnings. (see Governing’s Public Transportation’s Demographic Divide by @mmaciag). A point missed is that transit users are actually working, they’re employed, and so it seems under-emphasized that transit users use transit to get somewhere.

Transit as Utility

Transit design is typically utilitarian and lowest-bidder, yet the systems themselves lack utilitas or expediency, and add unnecessary costs. A great example is Metro Transit METRO Green Line. The current running time between Downtown Minneapolis and Saint Paul is 46 minutes, but typically more, given badly timed stop lights. The concept of the line succeeding the former streetcar line was bizarre, because the streetcar’s actual successor is the 16 bus. Streetcars are meant to stop frequently, maneuver with traffic, and are subject to obstacles. Light rail, the low-cost subway alternative for underfunded metropolitan transit agencies, is better categorized as “medium” rail for its ability to provide capacity movement on long distances. It shouldn’t be running with traffic and yet Green Line not only constantly pits it against traffic for most of its travel length, but succumbed to community (lawsuit) pressure to add unnecessary stations (cost in time and money).

On the other hand, the route 94 bus (named for I-94) brings one from 6th and Hennepin to Union Station in less than 30 minutes. My colleagues who (force themselves) to ride Green Line love it but hate it. It’s still very eerily empty all hours, when in the past, the 16 bus was known to be full throughout the day. Mode shift has shifted people away.

To consider the life of a transit user then is to imagine someone who is subjected to constant struggle to move about in a timely and efficient manner. And at times, to have one’s needs ignored by policymakers.

Transit as Hauler

Another element of using transit is the ability to carry possessions around. I imagine backpack and bag makers crunch each day how to design bags to be sturdy yet light weight, and what environmental issues will luggers encounter. So when one is faced with filthy transit stations and vehicles, one wonders what risk to health if they place their bag on the ground. The alternative is to place the bag upon one’s lap, sometimes taking up maneuverable space for others. And standing in a packed car with a hefty load, it’s only polite to place it on the ground. In some cities with “dirty” climates, this is unavoidable like in Chicago (Gripes about dirty rail cars rise as mercury drops by @jhilkevitch).

Transit as Your Home

A colleague of mine who works transit operations indicates most agencies, at minimum, do one cleaning a day with only emergency mid-day cleanups. The quality of this clean is most definitely not sufficient — to save costs, it was one mop bucket for the entire bus. This is even if they mop at all, the FTA has a report Transit Bus Service Line and Cleaning Functions that indicates 64 percent of responding agencies still use hand sweeping to clean buses for dust. Light rail systems tend to fare better, being given larger operational budgets since stations must also be maintained. But with old school light rail agencies like Muni, its almost impossible to keep up with the grime embedded into its 1997 Breda LRV floors.

Yet we see systems like New York’s subway, Hong Kong’s MTR, and London’s underground which carry substantially more passengers, able to keep up. People often say underfunded agencies simply cannot fund cleaning budgets, but cleanliness didn’t happen with a mop, it happens on a multi-level organizational level which builds these costs into the lifetime of the cars.

Still the lonely transit user doesn’t have much a say, other than some days to think if they had a mop or spray bottle, they’d simply wipe up that bit of grime missed by the cleaners.

The feeling is, if we are to embark on this transit first initiative, we have to consider riders as ordinary people who have needs. We also have to consider that current paradigms failing transit planning and operation are still there and will be there in the future. Now’s the time to break them to make people first.

Full Stack Analogy for Dummies

I was discussing web programming with a bunch of urban planners only to find blank stares. To laypersons, the web is like a magical television feed that pipes into their computer screens from far away.  In reality, a web is a simple set of instructions telling your computer to create something fun and interesting.  In explaining the process of how entire technology departments create effective and maintainable websites, I had to describe the “stack” which like a layered cake allowed multiple people to seamlessly develop a website.  I stumbled in connecting each role to more relatable jobs, until recently I realized a fun analogy could be a restaurant.

The Ingredients – Code

All life began with the computer and a plethora of languages available to create the web with.  HTML is just the seasoning and plate presentation of a server-side steak dinner, which could be built of Python and php.  Sometimes these languages come pre-packaged into libraries, like pre-made sauces that help speed up the process.   Or if it’s good and you can’t tell the difference, we’ll serve you a WordPress frozen soup we’ve heated up (a content management system with our own spices). 

The Back Kitchen – Dev-Ops

Those who play with Linux servers sit in the dark back room making sure we can keep up with the booming web traffic of our hardcore ninja app.  Servers are the stoves that keep things cooking and feeding the masses.  Someone in the back has to know how to fix the deployment blender.  Purging logs like washing dishes.

The Cooks – Back-End Programmers

These people are wizards with server-side code.  They know exactly how long to prep and cook the steak.  They’ll slice zucchini the way you need it.  Server-side languages manipulate and produce the expected data, like measuring the ingredients exactly for a perfect souffle.  They execute recipes with precision so they’re not always concerned with how pretty things look once on the plate.

The Sous Chef – Front-End Programmers

In past days there were webmasters who tinkered with plain text.  Today front-end web languages like HTML, CSS, and JavaScript support the ability to have fully interactive and visually pleasurable websites.  They turn that raw server information into beautiful plate presentations that excite and challenge the eye and palate.  The back-end hands over the useful data, the grilled steak, and the front-end positions the steak on the plate, assembles the side dishes, and puts finishing touches.

The Head Chef – User Experience Designers

The head chef creates the plates and recipes everyone is busily cooking and perfecting. They set the look, the standard, the expectation.  A web designer today is designing user experience and providing visual guides to websites in addition to pixel perfect templates. Granted, a designer doesn’t necessarily drive the show come table service, they certainly set the way things will be done when they’re not there.

The House Manager and Host – CTO & Support

The chef doesn’t call all the shots, the ultimate decisions end up with the restaurant owner.  A development team is guided by a Chief Technology Officer who permeates all processes and layers.  Along with support people, they also solve client-facing problems and emergencies — the confused or disgruntled patrons.  Their steak is undercooked, there’s a hair in the soup, the waiter is rude, the web can “break” at many points in the process and so they come in to address these administrative issues.

The Wait Staff – Sales and Marketing

The business development and “growth” people will jab me in the side for calling them the wait staff.  In reality their role is very similar, they are selling the product and standing by it.  They’re delivering a promise to patrons that the menu is going to give them that great experience, for a price.  And any good salesperson will keep the client or diner happy.   These people also in turn inform and drive the development of new features or changes to the code base, like a waitress sharing dining feedback, and so are important parts in a successful code base.

So there you go, that’s a restaurant version of the web “stack.”  Each person and layer is integral to the process that creates a good website that evolves to meet its market and demand.  Now, I’m starving for food, there’s an app for that right.

jQuery Handling of CSS Classes

Though CSS3 transition animation support is still a little wonky, it’s getting better every day.  I’ve decided to pass all animation handling to CSS versus previously using jQuery’s fade functions.   jQuery is now simply the trigger, adding and removing classes.

Example: Fading Modal Box

A “modal window” is the technical term given to those annoying pop-ups in Windows.  It’s synonymous with dialog or alert.   In websites, the same concept is typically used to pop-up a larger version of a smaller image, as in a blog post.  For me, they’re useful as “page” content displays for websites which need to remain static, like in use of maps or dashboards.

jQuery

In the example below, a click listener handles the entire operation:

  • .modal-toggle is assigned to the button calling the action. ie: <a href=”#about” class=”.modal-toggle”>Click for About</a>
  • Of course, prevent default link action.
  • variable target references the href URL of the button or link. #about
  • This URL points to a div ID acting as my .modal. ie: <div id=”about”></div>
  • Next I add my “master” css class called .transitional to the .modal div.  I use a master class for applying CSS transition animations because obviously I don’t want to be adding this CSS to every single class that needs it — which increases browser load.
  • Now I’m using the link itself to judge if we’ve clicked on this before.
    • If the link has class active, then do the opposite first.  I don’t like testing negatives for if/else.
      • Remove class active, and remove class active on the modal.  Note we have to queue a delay to hide() a.k.a display: none because otherwise it won’t wait for the transition to finish. I set it to 500 ms ahead of my 400 ms.  See that hide() has a numeral hide(0) because this notifies jQuery to queue that operation; you could conceivably add more queued operations 1, 2, 3, etc.  This is required or delay does nothing.
    • If the link does not have it, let’s do our magic.
      • Add class active, then on the modal add class active.   Note we have to queue a delay on the addClass because otherwise the div will show() a.k.a. display: block immediately without waiting for the addClass.  The fancier queue function is used here because addClass cannot be queued itself.  So we have to nest it inside the available jQuery queue function.  dequeue() is required to again notify jQuery that addClass is a queued operation.   The delay is shorter, I’m just giving the browser time to separate the actions between show() and the addClass.
      • The animation is triggered by addClass(“active”) for the .modal div.
$(".modal-toggle").on("click", function(e) { 
        e.preventDefault();
	var target = $(this).attr("href");
	$(target).addClass("transitional");
	if ($(this).hasClass("active")) { 
		$(this).removeClass("active");
		$(target).removeClass("active").delay(500).hide(0);
	} else { 
		$(this).addClass("active");
		$(target).show().delay(10).queue(function(){
		    $(this).addClass("active").dequeue();
		});
	}
});

CSS

Simple enough!  The CSS is organized as follows:

  •  .modal creates our main control “layer”.  I’ve offset it from the top, assuming that’s where our main navigation link for .modal-toggle exists.  We don’t want to cover that up or we can’t close it.
  • .modal.active triggers our CSS animation to fade opacity to 100%.  That’s all it needs.
  • .content is an additional div layer nested under .modal because in general you should separate information out.  Also this lets you style the actual visible window as if it was centered on the page.
  • .transitional is my master CSS class.
.modal { 
	position: fixed;
	top: 5%;
	left: 0px;
	z-index: 1000;
	display: none;
	opacity: 0;
	width: 100%;
	height: 95%;
	}

.modal.active { 
	opacity: 1;
	}

.modal .content {
	position: relative;
	z-index: 200; 
	width: 80%; 
	height: 80%;
	margin: 0 auto 0 auto;
	background: #fff;
	padding: 20px;
	}

.transitional { 
    -webkit-transition: all 400ms ease-in;
    -moz-transition: all 400ms ease-in;
    -ms-transition: all 400ms ease-in;
    -o-transition: all 400ms ease-in;
    transition: all 400ms ease-in;
}

Overheard in Minneapolis: Hard Times

I usually mind my own business at a coffee shop but these people were having the most outrageous and amazing conversation at Hard Times that I just had to record it.

“So we went to our guy that was there, I met before, and he let us stay with MTV and the playboy bunnies in a suite that night. We partied with these playboy bunnies and MTV crew and everything. There was a hot tub and everything. That was just one night, he thought that story was awesome. He said no I could swing a deal with a crackhole hotel down the street in the middle of nowhere for $900 for all of us to stay the whole week. So we paid them $900 and we all got to go. We made him pay for all our booze and party passes. And he sold his computer for this.

So we ended up having a way better time because there were no rules and no security guards. To even get past the first security guard this one had no security and nothing.  Our pictures our parties and our stories. The playboy girls liked us we partied with them VIP. Trish came up and visited, she was on the Real World Cancun. She wasn’t on it exactly, she was one of the ones that the guys tried to hookup with her. Luke hooked up with her. She brought all her friends over and we got all VIP for all this. We had so much more fun getting kicked out of the all exclusive vacation.

We all got bed bugs and bites all over.”

“Screw Cancun I’ve never been to Mexico.”

“I never want to go back to Cancun ever again.”

“It’s just overpriced.”

And then they headed out onto a snowy Riverside Ave.

The Fifth Era of Transportation

A Minneapolis-St. Paul Twin City Lines historic streetcar on Market Street.  This era is often fondly recalled by planners and policymakers.

A Minneapolis-St. Paul Twin City Lines historic streetcar on Market Street. This era is often fondly recalled by planners and policymakers.

I had the distinct pleasure of taking one of John S. Adams final course on American Cities in 2002.  He is one of the pioneer urban planners in academia who in 1970 proposed four distinct eras of transportation which shaped and defined American housing, infrastructure, and life. His energetic and sometimes enigmatic lessons left me empowered on understanding and perhaps influencing the course of American cities.

  • First Era: Walking-Horsecar Era 1800-1890 – When cities established on railways and river landings, people only moved as far as they could walk.  The horsecar, a re-appropriation of a typical horse buggy was the most the commoner could dream of for public transit.
  • Second Era: Recreational Automobile Era 1925-1950 – Cars were just coming into fashion but like Lord Grantham remarked, soon every Tom, Dick, and Harry would soon have one.  Any freeway that seems especially beautiful, windy, or picturesque in your city came from this era.  It probably took an hour to go a few miles due to congestion on city/county roads.
  • Third Era: Electric Streetcar Era 1890-1920 – This was the golden age of public transit, when those tracks started moving people at fast and efficient clip.  Planners and officials today who yearn for a transit-orientated culture typically are referencing this period.
  • Fourth and Present Era: Freeway Era 1950-present – Urban renewal criss-crossed our cities and created the suburban development patterns we see today. This era marked a major expanse into the “hinterlands” around formerly dense built cities.

The four eras remind me of other scales like the human civilization type that astronomer’s use.  It’s an exponential curve and we barely rate a Type I because we have absolutely no harnessing technological power when it comes to the galaxy.   In a way I feel the same could be said of the Freeway Era which he lamented we are sadly still stuck in.  Even the advent of the jet airplane has exacerbated reliance on freeways, forcing us to build out and around servicing airports.   It was originally thought that airplanes would allow us to be globe trotters, less reliant on home bases.  The opposite is true, airplanes deliver thousands of people to settle in attractive cities.

ARTIC - Anaheim Regional Transportation Intermodal Center - Designed by HOK, this is a sports stadium for transit centers, serving Amtrak and regional buses. The interior resembles an airport in delivering information seamlessly to users.

ARTIC – Anaheim Regional Transportation Intermodal Center – Designed by HOK, this is a sports stadium for transit centers, serving Amtrak and regional buses. The interior resembles an airport in delivering information seamlessly to users.

If we are to look into the future, it’s my hope the Freeway Era can give way to a fifth era.  Perhaps this new era is the Technological Transportation Era.   Adams’ uses housing development patterns as evidence for his eras.  For this new era, we see early evidence that suburban housing demand has slowed and urban redevelopment has increased.   I say these are attributed to technological improvements, hence the name.

  • Changing Land Use Patterns. Technology is continuing to blur the need for location-based live, work, and play.  In turn cultural preferences are being influenced by lifting of this picket-fence illusion.  It’s clear the next generation of Americans will halt sprawl.
  • New Infrastructure. Technology in regards to transit infrastructure is also accelerating, with offering of multiple attractive transit modes and methods not present before.  Modern streetcar, light rail, and bus rapid transit make fixed transit seamless to implement and use.   Bicycling facilities are also evolving with protected bikeways, regional bike freeways, and bike sharing systems.
  • Improved Access to Information. Technology on the user side enables all information all the time.  In addition to a plethora of public transit apps, users can now instantly hail for private taxis (“rideshare”), find private transit, rent hourly cars, rent scooters, and arrange for carpools.

The soon to be reality driverless cars may likely represent the final and lasting impact of this Technological Transportation Era.  In a way I feel the driverless car could not have happened without the prior advents above, because for example without ubiquitous smartphones providing us hand-held information, it would be difficult to access such services.

However I will say knowing Adams and his current work on regional governance and policy, this fifth era cannot happen in a void.  It requires cooperation both on public and private interests to further infrastructure and policy that allows for these new technologies to flourish and adapt.  I’m sure he wouldn’t throw in the towel yet over the current era.

Overheard in Minneapolis

One might think that the Midwest is full of white, blond, Scandinavian and Germanic people who talk funny.  That is mostly true, but also you’ll find the most peculiar and distinct perspectives and backgrounds, shaped by their homogeneity.  This is a snippet of the many overheards I’ve encountered while simply being out and about in Minneapolis.

Judgmental girlfriends.

“The way he talks, it’s like he has some kind of speech impediment. He doesn’t talk like he’s from North Carolina.”

Regrets over missing the sermon.

“I didn’t go to church yesterday but I went on the internet and so there was a page that was sort of written out.”
“Oh, I love that prayer Pastor Dave did, that analogy of a candle, that’s great you know. ”

Devil in the details, when it comes to bridal dresses.

“It was somewhere up north… Coon Rapids… or something, whatever, it was a house attached to the shop or something… It was really weird. Anyway my cousin works there she can help you. Well it’s really my husband’s cousin. Y’know it’s a run your own show kind of thing.  They have a lot of dresses under a $1,000. My sister in laws best friends is getting married and they got their private dresses.”

Friend time is the best time.

“It’s really close to Fargo and my brother lives there. That’s nice. Well y’know we use to be coordinator for the friends and have the weekly happy hour. There’s this place where you can enter a tournament where whoever brings the most people after a month will get free drinks.”

The food is too good.

“It’s too rich, I just think it’s too rich for me and I just can’t take it… Here you try it.”

Judgmental eaters.

“Did you get apple cider?”
“I had pumpkin pie earlier its awesome.”
“Yes very Autumnish of you to do.”
“We didn’t have any pumpkin pie earlier we had this apple crisp that was really runny.”

World travelers.

“When I was in Panama, there was this party called Sauce that was hot and spicy.”

Get to know your higher ups.

“I just can’t believe after 2 hours meeting my boss we’ve found common ground in Prozac.”
“Do know him on Facebook?”
“He’s like I dunno… (describes man)”
“He’s a rising star in the company.”

More to come!

San Francisco’s Terrible Bicycle Lanes

A short lived failed attempt to do off-set parking as a faux bike lane barrier.  Via Richard Masoner

A short lived failed attempt to do off-set parking as a faux bike lane barrier. Via Richard Masoner

Coming from Minneapolis, once crowned by Bicycle magazine as America’s forward-thinking bicycle city, I am a little bit biased when it comes to bicycling infrastructure.   In fact my Master’s capstone team thesis (co-wrote with some lovely planners including @AmbroseManor) was critical on Minneapolis’ testing of bicycle turning boxes–at the time some of the nations’ first federal funding pilot efforts with Portland.  So when I do my typical rounds of the San Francisco bike lanes to see how they progress over time, I continually come to one conclusion:

It’s whack.

In high school we’d use whack to describe people, things, and situations.  I think this describes everything about the current system.  It’s badly designed for people, it has bizarre patterns, and it constantly places you in dangerous situations with other traffic.   The problem is, the issues are not isolated, rather they are systemic to the design as a whole.

Here are my critical points in regards to the bicycle system as designed for Market Street to FiDi and then throughout SOMA:

  • Constant shuffling of bike lane to accommodate vehicle turn lanes creates unpredictable behavior, and transition choke points.
  • Unpredictable lane shifting also makes faster one-way roads more dangerous by forcing user to continually shift left and right to follow the lane while car traffic is all in a straight line.
  • Inconsistent spacing of road marking to facilitate bike lanes across long intersections.  One intersection may get a very regular pattern while others one must strain to look for where the bike lane re-enters.
  • Constantly changing and inconsistent lane widths, creates chaos during bicycle rush hour.
  • All these road marking pattern problems make passing fellow bicyclists dangerous.
  • Lack of clear, consistent, and readable signage.  Currently only features AASHTO’s old white bike lane sign (not helpful) and a green navigation bike highway sign with the smallest font size imaginable.
  • Difficult to ascertain if a cross intersection also contains a bike lane — an issue for novice users.

So this is just a general start to formalize what I’ve been telling people.  Even taking 1-2 hours out of your day to riding the system in and out will reveal all these shortcomings.   Of course I haven’t even touched on all the double parked vehicles or confused drivers, but in my opinion all of those issues are just parts of eventual adaptation of all road users to the new system.

My beef with the bike lanes is that the entire system is setup badly.  If you start with a bicycle system foundation like this and tell all the public works engineers, police enforcers, infrastructure contractors, concrete pavers, government officials, non-profit advocates, and regular Joe users, that this is what we got.  Well then it’ll be hard down the road to say, actually, we need to tear it all up and redo it.   Minneapolis went the route of piloting all projects, calling them tests, that was smart, so that they could eventually adapt the best uses at the best locations.  And then duplicate them elsewhere in similar situations so that we’d end up with a very consistent system.

Of course I’ve seen San Francisco prior to bike lanes, I didn’t ride it, but it was certainly car dominated.  In fact San Francisco use to have a campaign of signs to tell people to stop running red lights (which they did in the multiples).   This is still reflected in the recent campaign “What’s the Rush?”  So perhaps waving my arms around about a rather scary bike lane system is not productive since sans any kind of bike lane, San Francisco streets would just be downright dangerous for everyone.   Still I was taught to be critical about the investments we make since the Public pays for it in the end, and we should be even holding the “nice things” accountable.

Interactions: The Northwesterman

Today is the first in an ongoing series in which I will post little snippets of my actual life which by its unique, bizarre or darkly humorous quality deserves some mention for posterity (or a novel).


On a small flight from Seattle to Portland, a man in his early 30s across the aisle shared that he had just returned from a three-month fishing trip at the Port of Homer in Alaska.  Of course “trip” translates to arctic expedition to feed humanity with sea life.   He then remarked about my turquoise embedded ring.  He presented an ornate cross with the same turquoise rock pattern.  He said he’d carried this cross for many years wherever he went, probably both as good luck and reminder in faith.  For some reason it resonated with him and was very profound.   I regret telling him I bought it off Etsy.


This guy said he came to America seven years ago. Well, in seven years my dear, with all your degrees, professional jobs, and your fancy Toyota, you haven’t learned a lick of conversational English to make this night any better.


For a hot moment I considered joining the Navy as an officer. Then so coincidentally while latte-ing it up at Castro’s Reveille outpost, I overheard two young men talking about their military service.  I took a chance to talk to one of them who revealed he was training into the Coast Guard at Petaluma.  The conversation wasn’t that revealing but when I suggested how exciting and wonderful his new future would be, he remarked that joining was “his last option.”  And I surely left it at that.


I suspected this woman running a Scandinavian food cart on Portland’s Division Street was from Minnesota. The fact she was making lefse burritos (a take on a Norwegian street food of lefse wrapped hot dogs) was the ringer since Minnesotan Norwegians eat and promote it so much.  She said her family was from Western MN, which usually means either Willmar, Montevideo or Mankato. There’s no need to further ask which city since they all share a common fate — their children leave for higher pastures.


While walking along Market Street, I was caught in awe at the sight of three beautiful new Muni buses stopped in a row across from the Twitter building.  These are the New Flyer Xcelsior buses with crisp automotive design and LED lights, and are made in St. Cloud.  I thought, how interesting that buses manufactured in a small backwater Minnesota city now powers the transportation future of the nation’s brightest hub of technology.  Ya betcha!

Get template name in WordPress

Generating the template name isn’t really a big deal, globally it’s available via echo get_option('current_page_template'). But in this case, when I was generating a slideshow of multiple pages, I needed to pass the slideshow query to it. So I had to write up my own for functions.php.


function get_template_name($query1) { 
	$template_name = get_post_meta( $query1->post->ID, '_wp_page_template', true ); 
	$length = strlen($template_name) - 4;
	if (strpos($template_name, '.php')) { 
		$template_name = substr($template_name, 0, $length);
		return $template_name;
	} else { 
		return $template_name;
	}
};

Call it after the while condition and it will generate the template name for each post (ie: echo get_template_name($query1)) The template name is stored like a simple meta value and includes the .php extension. So this will check for that to strip it out, otherwise will return ‘default.’

Why is this necessary for my slideshow? Well, some pages are to be laid out differently, this allows the CSS to make multiple slides of differing layouts.

Toggle Map Style and the Polygons Shown

In my previous Google Maps examples, I store all objects such as polygons and markers in an overlayArray.  Having a “global” theme change that doesn’t just alter the mapStyle, but also polygons is as simple as looping through your Array and setting options.   Here I’m using variable t1 to control the true/false variable, on a live site you should probably do something local such as adding a Class name to the button.

 

  var t1 = true;
    $("#toggle-theme").click(function(e) {
        e.preventDefault();
        if (t1) {
            t1 = false;
            map.setOptions({
                styles: mapstyleDefault
            });
            for (var i in overlayArray) {
                overlayArray[i].setOptions({
                    strokeColor: '#ff0000',
                    fillColor: '#ff0000',
                })
            }
        } else {
            t1 = true;
            map.setOptions({
                styles: mapstyleAlternate
            });
            for (var i in overlayArray) {
                overlayArray[i].setOptions({
                    strokeColor: '#29800b',
                    fillColor: '#29800b',
                })
            }
        }
    
    });

Nicollet Mall is Not the Destination

The announcement of architect James Corner to work on the Nicollet Mall redesign finally signals the city’s movement on upgrading the aging city centerpiece.  Minneapolis has discussed replacing Nicollet Mall for quite some time mostly due to its crumbling condition.  The rectangular fountains which I once enjoyed as a child are no longer.  The colorful sidewalk pavers are coming apart, and it’s configuration is generally outdated, outmoded given the changes in many of the storefronts which now focus on bar patios than affordable interesting retail.  The Mall isn’t really a mall anymore, it’s a fancy zone of transition, to get from the bus to the office, the train to the hotel, or a bar hopping corridor.

Once upon a time: Nicollet Ave after the Norse-American Centennial Parade in 1925

Once upon a time: Nicollet Ave after the Norse-American Centennial Parade in 1925

Corner has thankfully listened to the actual needs of how people actually use the Mall, as a pathway to the river and importantly as access to the skyway.  Nicollet Mall is really just Nicollet Avenue, a central thoroughfare that serves critical commerce and business in the State, if not region.  However, the vision presented by the final design candidates overall is not exactly fitting with Minneapolis, let alone the Twin Cities or Minnesota.  There will never be hordes of people congregating in a square block, lest the government has been overthrown. Street events are few and far between, and preferred in neighborhood settings anyway.  It’s not even really wide enough to put a full parade down it (Holidazzle doesn’t count).  The fact is, Nicollet Mall has never been the destination, it’s the uses around it that are the penultimate arrival.

In cities like New York, you can build an urban public space anywhere and people will flock en masse because there is such a craving and need for it.  Corner’s Highline is simple and unobtrusive, it needed no special flair.  On the other hand the context of the Twin Cities is that it was planned with leisurely standards of wide public roads, lush tree canopy, and plentiful parkland.  Fly overhead during warm months and all you see is a sea of green with skyscrapers mulling about. So for Nicollet Mall, there is really no reason to overemphasize nature or congregating, Minneapolitans are adept at finding green places to loiter in the City and need no special proof of it.  Take a failing example of the Minneapolis Federal Courthouse plaza where grassy nature mounds are ridiculous and unused.  It hasn’t made that public space any more appealing or grand.

The direction of Corner to move with thematic areas of “live, work and play” is a right direction, as homages to Portland’s transit mall “rooms.”  The difference is, Tri-Met built those public spaces, not the City of Portland, and so their purpose is ultimately movement and flow.  Simply creating arbitrary urban spaces on Nicollet Mall after some kind of theoretical theme, does not create a good design.  The heyday of the Mall as a retail cathedral reflects the shopper’s feeling of being there for what is around there, what abuts it.  The street emphasizes the buildings, not the other way around.  To focus on revitalizing Nicollet Mall, is inherently to revitalize the business and activity that relates to it.  Bricks and mortar are stepping stones, those post-modern art sculptures and curved architectural seats simply serve to move you to the next stop.  Misunderstanding Nicollet Mall’s redesign as purely civic destination will ultimately destine it to a future redesign and not effectively serve Minneapolitans now.

Corner should focus on connectivity as an overarching theme because that is what has made the Mall ignored and confusing today. Even long-time Twin Citians strolling along will invariably become annoyed at how the street “gives up” at either ends. The Washington Ave terminus is a sea of empty lots, as if it were a wasteland of Greek ruins punctuated by Minoru Yamasaki’s ING temple. The southern transition to Steven’s Square and Loring Park is tepidly marked with faceless modernist fortresses, as if one were not meant to step beyond Grant Street. The many numbered Streets of Minneapolis sharply cut into Nicollet Mall without looking back. It is a pity city planners never enforced building corner setbacks. Improving these interfaces to the great Main Street will ensure in the long-term whatever Corner produces for the next generation will continue to be admired and used.

Remove Overlays

I find the most elegant way to deal with Google Maps objects from markers to polygons is to push them to a global array.  The simplest popular method is merely to use this array for clearing all objects.  The example below does that and references a separate InfoWindow array.  Simply setMap null, close the windows, and if needed reset all the arrays to 0.

function clearOverlays() {
    for (var i in overlayArray ) {
      overlayArray[i].setMap(null);
    }
    for (var i in infowinArray ) {
        infowinArray[i].close();
    }
    overlayArray.length = 0;
    infowinArray.length = 0;
};

Though this will suffice for simple loop operations where you basically call back and forth a few items, I found that for more complex objects and maps, a fancier robust function is needed to manage. In my case, I am storing a “complex” polyline, that is many polyline path segments which must be individually rendered.  For example if your path loops around a city, it’s clear you won’t be able to accomplish rendering that in one path.  KML notation already recognizes this and so groups many LineSegments into a MultiGeometry structure.  Manipulation of a KML layer’s stroke, color, etc is easy.  Unfortunately Google Maps does not have a multigeo, and using a Polygon object will not suffice as it automatically draws in the end points.  As well, your polylines may not necessarily connect but are associated with each other.

Here is my revised kitchen sink clear overlay function that offers a target and exclusion option.

  • clearOverlays(“all”) will simply result in everything being removed.
  • clearOverlays(20) or clearOverlays([20, 22, 25]) results in clearing only the targeted numbers being removed.
  • clearOverlays(“all”, 20) or clearOverlays(“all”, [20, 22, 25]) results in everything except the number or array being targeted.
  • Note you can’t do both such as clearOverlays(22, [80]), it will simply ignore the exclusion and go with the targeted item.  Of course this is also illogical.
  • The function takes into account, as in my case, whether you have an array within an array (“embedded”) as is required for grouping polylines or markers.
function clearOverlays(target, exclusion) { 

    // this function to go a level down into the array of objects (polylines, etc)
    function removeObj(a) { 
        if (typeof a[i].setMap == "function") { 
            for (var i in a) { 
                a[i].setMap(null);
            }
        }
    }

    if (target !== "all") { // just targeting something for removal

        if (typeof target == "number" || typeof target == "string") { 
            for (var i in overlayArray) { 
                if (overlayArray[i][0] == target) { removeObj(overlayArray[i][1]); }
            }
        } else { // if array

            for (var i in overlayArray) { 
                if (inArray(overlayArray[i][0], target)) { 

                    if (typeof overlayArray[i][1].setMap == "function") { 
                        overlayArray[i][1].setMap(null); 
                    } else { 
                        removeObj(overlayArray[i][1]);
                        }
                };
            };

        }

    } else { 

        if (exclusion == "") {  // target all, remove everything
            for (var i in overlayArray) { 
                if (typeof overlayArray[i][1].setMap == "function") { 
                    overlayArray[i][1].setMap(null); 
                    } 
                removeObj(overlayArray[i][1]);
                }
            } else { // target all but exclusions
            for (var i in overlayArray) { 
                if (inArray(overlayArray[i][0], exclusion)) { //ignore 
                } else {
                    removeObj(overlayArray[i][1]);
                    }
                }
            }
    };    

    function inArray(needle, haystack) { // needle being a string
        for (var i = 0; i < haystack.length; i++) {
            if (haystack[i] == needle) return true;
        }
        return false;
    }
};

 

Google Maps KML Toggle

My new KML toggle method is as follows which more logically lays out the variables and functions involved. The true improvement is that in order to add new KML files to the map, you simply add a new row to array kml. The code generates the rest. This code is literal easily adaptable to more asynchronous applications.

Code below or view it on Github.

<html>
<head>
<title>KML Toggle Example</title>

 <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>

 <script type="text/javascript">

    // define some variables to be used later
    var map;
    var overlays = [];
    var kml = {
        a: {
            name: "MPLS/STPL",
            url: "https://maps.google.com/maps/ms?authuser=0&vps=5&ie=UTF8&msa=0&output=kml&msid=212971981154994583939.0004b06640255267e038c"
        },
        b: {
            name: "Bicycling Tour Routes",
            url: "https://maps.google.com/maps/ms?authuser=0&vps=4&ie=UTF8&msa=0&output=kml&msid=212971981154994583939.0004902a1824bbc8c0fe9"
        }, 
    // keep adding more, the url can be any kml file
    };

    // initialize our goo
    function initializeMap() {
        var options = {
            center: new google.maps.LatLng(44.9812, -93.2687),
            zoom: 13,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        map = new google.maps.Map(document.getElementById("map_canvas"), options);

        createTogglers(); // in this example I dynamically create togglers, you can otherwise use jQuery
    };

    google.maps.event.addDomListener(window, 'load', initializeMap);

    // this does all the toggling work, id references the a b names I gave the kml array items

    function toggleKML(checked, id) {

        if (checked) {

            var layer = new google.maps.KmlLayer(kml[id].url, {
                preserveViewport: true,
                suppressInfoWindows: true 
            });

            kml[id].obj = layer; // turns the layer into an object for reference later
            kml[id].obj.setMap(map); // alternative to simply layer.setMap(map)
        }
        else {
            kml[id].obj.setMap(null);
            delete kml[id].obj;
        }

    };

    // in this example create the controls dynamically, prop is the id name 
    function createTogglers() {

        var html = "<form><ul>";
        for (var prop in kml) {
            html += "<li id=\"selector-" + prop + "\"><input type='checkbox' id='" + prop + "'" +
            " onclick='highlight(this, \"selector-" + prop + "\"); toggleKML(this.checked, this.id)' \/>" +
            kml[prop].name + "<\/li>";
        }
        html += "<li class='control'><a href='#' onclick='removeAll();return false;'>" +
        "Remove all layers<\/a><\/li>" + 
        "<\/ul><\/form>";

        document.getElementById("toggle_box").innerHTML = html;
    };

    // easy way to remove all objects, cycle through the kml array and delete items that exist
    function removeAll() {
        for (var prop in kml) {
            if (kml[prop].obj) {
                document.getElementById("selector-" + prop).className = 'normal'; // in normal js, this replaces any existing classname
                   document.getElementById(prop).checked = false;
                kml[prop].obj.setMap(null);
                delete kml[prop].obj;
            }
        }
    };

    // append class on select, again old school way 
    function highlight(box, listitem) {
        var selected = 'selected';
        var unselected = 'normal';
        document.getElementById(listitem).className = (box.checked ? selected : unselected);
    };

 </script>

<style type="text/css">
#toggle_box { position: absolute; top: 100px; right: 30px; padding: 10px; background: #fff; z-index: 5; box-shadow: 0 5px 10px #777 }
ul { margin: 0; padding: 0; font: 100 1em/1em Helvetica; }
ul li { display: block; padding: 10px; margin: 2px 0 0 0; transition: all 100ms ease-in-out 600ms; }
ul li a:link { border: 1px solid #ccc; border-radius: 4px; box-shadow: inset 0 5px 20px #ddd; padding: 10px; font-size: 0.8em; display: block; text-align: center; }
.selected { font-weight: bold; background: #ddd; }
</style>

</head>
<body>
<div id="map_canvas" style="width: 100%; height: 600px;"></div>
<div id="toggle_box"></div>
</body>
</html>

Convert KML to PolyLine

To convert a KML file to a native Google Maps rendered polyline is essentially the process of parsing the KML, which is XML syntax, into its constituent parts, that being coordinates within a object.

I found the conversion necessary in the process of pulling stored KML data from a Google Fusion Table. If the KML data is stored as Location type, then it will return a MVCArray which can easily be picked apart with for loops to extract the coordinates. However, I have discovered that Fusion Tables has some issues or limitations with very complex KML objects that are not yielding all coordinate arrays, resulting in a half-rendered line. As such I’ve “manually” parsed the KML as a string. The two methods are presented.

success: function(data) {

var rows = data['rows'][0];

for (var i in rows) { 

var geo = rows[i]['geometries'];

	for (var j in geo) { 
	var linesegment = geo[j]['coordinates'];
	drawLine(linesegment);
	};

}


function drawLine(linesegment) { 
	var coordArray = [];
	console.log("rows");
	for (var i in linesegment) {
		var lat = linesegment[i][1];
		var lng = linesegment[i][0];
		var lineCoord = new google.maps.LatLng(lat, lng);
		coordArray.push(lineCoord);
	}

	var randomnumber = Math.floor(Math.random()*7);

	var colors = ["#FF0000", "#00ffff", "#FF00ff", "#Ffff00", "#555555", "#222222"];

  var routeLine = new google.maps.Polyline({
    path: coordArray,
    strokeColor: colors[randomnumber],
    strokeOpacity: 1.0,
    strokeWeight: 4,
  });

  routeLine.setMap(map);
  
}

Header Image via Featured Thumbnail

A lot of sites employ a header splash, notably photographer websites.  It is a highly requested feature of clients.  Fortunately WordPress has an easy hook with its featured image (thumbnail) setting that will allow an admin to set whatever image they wish for each post or page.  First, in functions.php, activate thumbnail support.

add_theme_support( ‘post-thumbnails’ );

Then in your theme file, such as header.php, call it forth.

<?php if (has_post_thumbnail( $post->ID ) ) : // is thumbnail set?
$image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), ‘single-post-thumbnail’ ); // grab image attr array ?>
<header class=”main-header” style=”background-image: url(‘<?php echo $image[0]; // the first array item is the src ?>’)”>
<?php else : ?>
<header class=”main-header” style=”background-image: url(‘<?php bloginfo(‘template_url’); // define a default in your theme folder ?>/images/defaultbg.jpg’)”>
<?php endif; ?>

Then CSS3’s background-size will do you well.   Alternatively you could have it echo into an img tag and set width, height 100% auto.

 

Thought Process of Working in Google Maps

Sometimes as a front-end you think by taking the “back-end” methodology route, you can accomplish great feats. In the end, the answer is often much simpler than you think. Such as in this example.

I need to find the coordinates of the center of a polygon.

Easy right?

First problem, the polygon is stored in KML format in a Fusion Table. Let’s use my awesome getJSON call from last year to retrieve the data, oh wait, the API has changed, okay let’s go to their ajax example even though it’s technically equivalent. Now the data is an object, oh I can’t work with an object.

Google, google, google…

Let’s try Google visualization since they enjoy offering different ways to find the same carrot. Oh okay I have to load Goog JS. More resources, the better! A dozen for loop iterations later, I still have an object.

Okay let’s try stringifying by manually pulling out the coordinate information from the KML object with js splits, parseFloats and jQ text() conversions. Great now I have 20 lines of coordinate data because it’s a complex polygon.

Except to retrieve the bounds of the polygon, I need a RECTANGLE. Argh! Perhaps if I become a zen master of algorithms, I can determine which four lines of coordinates are the approximate four corners of an averaged rectangle. Easy!

Google, google, google…

Try getCenter, getBounds and anything that gets something out of nothing. Thinking I need to extract the raw KML formatted data as is and then use to to call forth KmlLayer inline. Half an hour later, I realize I’m trying to thrust a packet of data into what is only a URL call.

Maybe I should extract the first coordinate point of each polygon via strlens and use that as an approximated marker location with some math adjustments. Oh wait, every polygon’s first coordinate point is all over the place. Banish the thought.

Google, google, google…

Answering some random questions on StackOverflow that do not relate but came up anyway.

Upon consulting every inch of Google Maps V3 developer guide, I come to realize I just need to zero in on the infoWindow’s self-centered latLng itself.

Several hours and dozens of lines of test code later, I actually needed just one line of code.

Yes sir, you can have labels in the middle of each polygon now.

/die.

Does Lean UX Replace Style Guides

Two years ago I read a great article by Smashing Magazine on “Style Guidelines for Brands and Websites” which suggests designers offer style guides to clients post-project. Often in the rush to the deadline, we forget that a website is never completely done and will continue to live on, organically changing and adapting itself. Having a style guide certainly gives the client evidence that actual strategic thought went into development of their brand. At the University of Minnesota, I became very familiar with their style guides during HTML 4.01’s reign. From a systematic organizational perspective, style guides were a doctrine that constrained specific uses but also allowed room for creativity in the spirit of the guide.

When I think about traditional style guides in the context of Lean UX, in reducing waste from iterative processes, I realize they are paradoxically outmoded and transgressed. Style guides can take many forms and for web often manifest in layout standards (wireframes) and graphic standards (color, shape, size, position). In essence a web style guide creates a prototype’s framework for you, and it’s up to you to fill in the pieces. In an ever evolving start-up environment, the visual standards are constantly changing, being thrown away or restructured into new forms. Why bother creating a guide when you know tomorrow even the very fundamental aspects of your product will change.

Now, at the same time, a style guide can act as a fundamental bedrock because it infuses the overall process with a sense of purpose and unity. Style guides come from the print environment where seemingly minor factors like line-height and line thickness can make or break. As we know from conceptual design or product design in general, that form is sometimes eminently more important than function (assuming the function is worthy). Twitter and Facebook are essentially communication mediums but their forms, in 140 characters or in dynamic multi-level posts, change the user experience. Mac OS X is a system that clearly has a style guide, that very specifically dictates every visual graphic to the point where outside developers and their designers must follow the edict. Ironically it is Windows that has shown a penchant for anything goes, and we know how that’s turned out.

Style guides are different from documentation. Jeff Gothelf writes in “Lean UX Is Not Anti-deliverable” (5/23/2012):

The focus should still be to design the best experience while minimizing the amount of time designing the wrong ones — not to design documentation that describes these design hypotheses.

Lean UX is about a specific design solution as a scientific question. Does my new app interface do what it intends without any instruction? The documentation outlining wireframes and hierarchy are what needs to go. On the other hand I see style guides as addressing a higher level question, whether the design communicates not just purpose but cohesion with the message, brand and experience. If anything, style guides answer questions of the strategic plan. The new Digg is perhaps the best example of a redesign that, one can argue, does exactly the same thing, but in form answers such a different mission statement.

Media Queries: Navigation Bar Transformations

I recently reviewed Brad Frost’s thoughts on responsive navigation patterns. In terms of mobile widths, I personally have been using the select menu option, utilizing a jQuery script to change out a nav’s unordered list UL for select option tags. I had found it to be a perfect way to utilize a phone’s native function — the act of pulling up the navigation menu a seemingly seamless experience. After reading his cons in that use, I’ve changed my mind.

In a mobile setting, select menu “rolodexes” like in iOS are not a sensible way to display navigation menus because users generally do not know what navigation options there are to begin with. Hence, I agree with him that they are potentially confusing. One must consider the normal, intended use of multiple select menus as a form element that combines many related items. For example in a shopping cart, I want to show color options for a t-shirt. When a user clicks on “select a color”, they expect to find only names of colors like red or blue. In the case of “navigation”, the user might be fairly daunted when presented with many unrelated links in a website. Similarly in my example, someone looking to chose a product color is going to be confused when options like blue hoodies and red jackets appear.

My alternative has usually been the do-nothing approach, essentially restructuring the top nav into a mobile-friendly element. My personal default has usually been a full or half width button with soft gradient, to mimic iOS general styling. The one concern that I have encountered by many clients is that they do prefer the nav to fall at the bottom of each subpage. A jQuery detach/append can certainly do this, but that function is processor intensive and rather clunky with click-happy users. One client was so perturbed that I created an entire mobile version of the site with this layout.

My solution for Urban Bean presents the homepage with just nav and on each page, the nav appears at the bottom.

At the end of the article, Brad linked to an interesting pull down nav solution by Inspect Element which essentially takes a cue from the pull-down-to-update effect by Twitter. I’d call it more of a pull-down-to-reveal since the nav height doesn’t stay anchored atop, rather the page itself pulls down to reveal nav from top to bottom. While the solution is very compelling and presents room for creativity, unfortunately I don’t find the pull down nav to be terribly intuitive. Subducted information from the top of a page tends to imply related content to that page, not to the entire website. Also from a UI perspective, we’re taxing the brain to orient two up-and-down motions. The other motion is iOS Safari’s native inclination to snap the entire browser window when you exceed a page’s maximum scroll.

Facebook introduced the left reveal and it works because natively, iOS apps like to slide progressively right to left. Sliding the current page left to right implies we’ve moved back a step. The home menu is further implied to be a master screen by several important details. First, the menu is generally a dark color and color grades downward, second the current page’s subtle box-shadow floats it atop, and thirdly, the page hasn’t quite moved all the over, implying we’re taking a peek into the master Facebook brain behind everything. A left reveal also lets the thumb do its job of scrolling, only this time for navigation. You could do this with the pull down nav but then you’d be asking the user to track three vertically changing elements all at once. Vertigo would ensue (unless that’s what you want!).

My last observation is that I’ve noticed some designers pushing ridiculously small text scaling for their navigation bars as you move toward smaller screen widths. To keep the horizontal element, they’ll squeeze nav buttons, proportionally might I add, into that 20 to 50 pixel height.

Hong Kong’s Hyperdensity

Dizzying heights of density in Hong Kong's prestigious mid-levels.

Dizzying heights of density in Hong Kong’s prestigious mid-levels.

Having returned from a month-long stay with family in Hong Kong, I was intrigued to find Proto City writing about the city. Writer Adam Nowek praises Hong Kong’s dense urban infrastructure in Hyperdense: High-Density Architecture in Hong Kong. From a Western outsider view, Hong Kong seems to be the pinnacle of urbanist pursuits of lively, dense development, fully utilized efficient transit, pedestrian-orientated streets, and more dessert shops than one could hope for. Owing to the plexus of Asia’s finances, trade, logistics, and tourism, the city-state has for a long time been an international player of Western capitalist growth. It dares steal many world livability rankings.

There was a commenter in Nowek’s article who wondered why “China” is pursuing modernist development well-knowing it has failed in the United States, Europe, and even South America. Certainly modernism failed in terms of it’s implementation, with design sharing only some of the blame. No one expected crack cocaine to destroy Le Cobusier’s dreams overnight. I felt compelled to address this question because it touches to the heart of what makes urban form possible. Hong Kong certainly lives out Western modernism ideals with helipads and all, but underneath, its current state is uniquely Asian. There are two quite important differences that come to my mind between the redevelopment environment of U.S. city-regions and this particular city-state.

1) A homogenous population in many ways.

About 95% of Hong Kong identifies as ethnically Cantonese (of the Han Chinese which makeup China). Culturally, nearly the same amount have grown up in a completely urban environment and in about the same school systems. There exists the typical class divisions of wealth and prestige, but otherwise, all inhabitants co-exist physically on the same level in terms of interactions. All must live in residential towers because there is no land for single-family housing. White-collar workers and their custodians ride the same transit lines. Elite bankers patron karaoke clubs as much as the next 20-something barista. In a way, Hong Kong reflects early industrial cities where laborers brushed shoulders with the well to do, and all were governed by a societal structure of conformity, hierarchy and order. The pursuit of wealth and fun could be the people’s motto.

Planners will agree, a homogenous population allows easy policy and planning. It doesn’t necessarily mean planners can pursue any agenda for passage, but it means they can reasonably know what to expect in response from civic engagement. The transformation of Hong Kong colony into world class city was a vision that could be sold, because the benefit applied to all people. New MTR rail lines can focus on spatial density problems with less influence from minority voices. New rail planning in U.S. cities are fraught with dissident alternatives because the routes contend with racial tensions and business interests. As such final routings might not even serve particularly needy areas in favor of wealthier less dense areas, or be contorted to serve outside business districts.

2) Strong central government, no civic engagement.

The city also has the distinguished irony of having a homogenous population but with little to no input on policy decisions. Though it is correct that Hong Kong is more democratic with a parliamentary legislature given its British colonial past, the same colonial powers also left behind a legacy of top-down 1950s style planning. Private developers have always been an influence in the government, resulting in the push for the many towers that dot the skyline regardless of any local citizen or environmental consideration. Land reclamation has been so rampant, citizens have held massive protests to the harbor damage.

However, this very strong and influenced government is the very reason for the capitalistic urbanism which exists in Hong Kong. Many beautiful colonial era buildings and natural creeks were obliterated for the concrete fortress that Hong Kong has literally become. Such change is unprecedented in the U.S. and was just briefly seen in the urban renewal era where hundreds of city blocks were obliterated overnight. The history of that era and its civic activism legacy show us such drastic urbanism will forever be impossible here. Hong Kong’s hyperdense towers exist in an environment where there is no zoning, no limits to where and what you can build. Glass office towers live wall to wall with apartments. This has created the “messy vitality” that is adored.

Suburban Transit Orientated Development in Hong Kong's Shatin District

Suburban Transit Orientated Development in Hong Kong’s Shatin District

These two points, of a unified citizenry and a powerful government, essentially say to me that the relationship between the state and its people are pivotal to the future of urbanism in the U.S. What is happening today in China is that they are building hyperdensity for the people who live there now, not for projected figures of influx. They are changing the landscape because it is changing for them. There is an appropriate policy to the current housing crisis. For American urbanists, I think we erroneously assume this policy is universally applicable. Even if regional plans warn of a handful millions entering a city region within 20 some years, this does not necessarily dictate the dire housing requirements of regional governments. Additionally, Hong Kong plans for not just residential expansion for the broad range of services, retail, and transit required to support that expansion. These considerations are oft ignored by regional projections. As such Hong Kong livability lessons should not be seen in the physical structures, but in the policies, conditions and responses of government.

Lastly, Hong Kong’s powerful transformation results from being a city that controls all of its 426 square miles with little national intervention. If it wants to build a new airport, it will negotiate with itself and acquire right of ways accordingly. If it wants to equitably distribute population growth, it can at will. European cities like Sweden understand the relationship between land use and transportation and so accordingly annex any land in which a rail line extension is serving. That way the municipality captures economic development at large (property tax) rather than depend on recouping its investment via users. Discussions of VMT tax would be unnecessary if municipalities had more annexation powers.

CSS Image Swap from Image Crop

I’m often asked by clients and coding learners how to conceptualize the output of HTML/CSS to front-end. Basically these are first steps to fully understanding what the DOM hierarchy is — or in other words, how the browser interprets the document flow and order.

A client was keen to create a CSS class that would produce a image swap with an image tag in a blog post. He would create two images and insert them into a DIV that would “hide” one. On hover, the other half of the image would appear. He knew such a thing could happen and that two divs would possibly be involved but could not determine how the CSS would do this.

The solution is to put both images into a div, we’ll call swapimage, and assign the second image class swap-target.  Here the HTML5 figure tag can be used in place of the div as it works semantically.

<figure class="swapimage">
<img src="image1.png" alt="First Image." />
<img src="image2.png" class="swap-target" alt="Second Image." />
</figure>

And the CSS:

<style type="text/css">
.swapimage {
 display: block;
 position: relative;
 margin: 0;
 padding: 0;
}
.swap-target {
 position: absolute;
 top: 0;
 left: 0;
 display: none;
z-index: 2;
 }
.swapimage:hover .swap-target {
 display: block; }
</style>

Here swapimage acts as a “container” for the image swap.  Relative position allows the second image to absolutely align “over” the other one (set by z-index).  On swapimage:hover, the target image is set to block.   CSS visibility can be used, but I prefer display in most cases, as the difference being it actually removes the element from the page.

Safari File Upload Hang Up

The HTML Form file input tag has been around for ages but for some reason Safari has had native issues with it since the dawn of the Mac era. I always expect there to be issues that arise in every project but this was certainly was a surprise that put me through the early hours of the night before final client testing.

An Ajax hack is required to force Safari to close the keep alive requests which is better explained by techies at Webkit Bugzilla. The hang effect is basically Safari continuing to show it’s uploading a file and never going anywhere. Sometimes the file will work and go through, especially smaller sizes.

Solutions varied on closing keepalive, telling Safari to move it. Airblade Software offers a good solution which is expanded by this freelancer forum I visited. The script requires Ajax and the forum suggested using the Prototype framework’s Ajax support but that would create conflicts with my existing jQuery code so I grabbed the simple Ajax Request Library by Matt Kruse.  As well, a forum user notes you should call the script before the form, thus document ready is added.

In your body’s form, include onsubmit to the kill function.

<form action="upload.php" enctype="multipart/form-data" method="post" onsubmit="closeKeepAlive();">
<input type="file" name="image" />
<input type="submit" id="upload" name="upload" value="Send " />
</form>

In the head:

<script type="text/javascript" src="js/ajaxrequest.js"></script>
<script type="text/javascript">
/* die safari! */
$(document).ready(function () { 
function closeKeepAlive() {
  if (/AppleWebKit|MSIE/.test(navigator.userAgent)) {
    new Ajax.Request("safari-die.php", { asynchronous:false });	
  }
return true;
}
});
</script>

In the php file

<?php header("connection: close"); ?>

Google Maps Toggle Mashup (outdated)

Update 12/30/12: This method is outdated and I have revised it.

Even I sometimes panic at the thought of acronyms but once you get past the technobabble, they’re just fancy names for simple concepts. “Keyhole Mashup Language” is the open source standard of mapping coordinates that Google adopted after it acquired the former Keyhole geo-mapping company. Like HTML, it involves semantic tags wrapping information. I was recently asked to fix a Google “mash-up” that involved multiple maps (KML layers) that would turn on and off a Google Map via Javascript. The fix solution was, as usual, to rebuild the whole thing using Google’s latest API standards (see samples here).

The basic application of this mash-up is to toggle multiple maps, hence the name. For my fellow urban planners, this allows the public to contrast and compare different layers like bike lanes, parks, and farmer markets without them needing to have any special ArcGIS viewer. Google also allows you to pull a KML layer directly off the Maps website, meaning you can pull live maps that anyone can update. For larger and more complex layers though you might want to have the KML layer on your server to reduce loading time.

The operating map is called the Big Box Tool Kit and features layers of points in the country where communities have opposed various big box corporations. Immediately one can toggle on maps to see how active certain parts of the country are compared to others.

Call the API.

<script type="text/javascript"
    src="http://maps.google.com/maps/api/js?sensor=false">
</script>

Now in global.js or the header…

function initialize() {
 displayMaps();
}

Define attributes of the map (Google’s API controls and style guide is handy) and tell it where to show the Google map, in this case map_canvas.

  function displayMaps() {
	var myLatlng = new google.maps.LatLng(40,-93.8);
	var myOptions = {
	  zoom: 4,
	  center: (myLatlng),
	  mapTypeId: google.maps.MapTypeId.ROADMAP
	}

  	var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

In general the above should just generate the desired Google maps without anything on it. Now we finagle Javascript to output a layer if a form’s checkbox gets checked. There is an if statement for each layer you want. For example the first statement below: if checkbox fruit in formMapControl gets checked, layer1 will show a new Google map using apples.kml. Using form may not be terribly best practices, but the client wanted to use the browser’s native display of checkboxes.

  	if (document.formMapControl.fruit.checked) {

	        var layer1 = new google.maps.KmlLayer('apples.kml');
  		layer1.setMap(map);

  		/* Ensure the new layer does not change the map center or zoom */
  		layer1.set('preserveViewport', true);
	}

  	if (document.formMapControl.dairy.checked) {

  		var layer2 = new google.maps.KmlLayer('cheese.kml');
  		layer2.setMap(map);

  		layer2.set('preserveViewport', true);
	}

}/*this concludes function displayMaps*/
</script>

In the body the map “toggle control box” is the form and the Google map appears in a div called #map_canvas. Use CSS to style as appropriate. If you add checked to one or multiple inputs, it will default display that map layer when the page loads. In the client example link, the form is arranged in a list and position absolute next to the map_canvas, which is styled to be a box with display block. Options of course are endless, you could get fancier by giving the toggle box a transparent background and box-shadow, positioning it over the map. The bare basics follow.

<form name="formMapControl">
   
   <input type="checkbox" name="fruit" value="fruit" onclick="displayMaps();" checked />
      <label class="mapoption">Show Me Fruit!<label></li>
      <input type="checkbox" name="dairy" value="dairy" onclick="displayMaps();" />
      <label class="mapoption">Show Me Dairy!<label></li>

</form>

<div id="map_canvas"></div>