WherePost: update with new features & data!

I spent some time over the past couple of days pushing out a few minor updates to http://wherepost.ca. Here’s the rundown:

  • I imported, and now scrape, the KML file from Matthew Hoy’s mailbox-mapping project. This doubled the size of Where Post, and merges work doing the same thing.
  • I finally got around to adding in a “name” field, per David Eaves’ request of oh-so-long-ago. When you add a mailbox, if you enter a name or twitter handle (neither is linked anywhere), it should set a cookie that’ll remember who you are for next time.
  • I added in some social-sharing buttons. But because I actually dislike the way these look in general, and like the minimal interface WherePost presents, particularly on mobile, these currently only show on the “About” pages. I was thinking I should add these to the “add mailbox” results, but am holding off for now. I would appreciate it if you went ahead and used these though!
  • Caching: Most result-sets are now cached for an hour, although adding a  new mailbox will reset that cache. This is to account for the odd times when it looks like a bot is scraping the site and causes actual load.
  • Post Offices: Because the GooglePlaces API returns Yellow-pages data, whom I don’t like, and in a way that was pretty broken (you’d always get duplicates, for english/french names of the same place, even if the data was identical, plus it’d overlay a link to the Yellow Pages), I’ve removed this, and added in the ability to specify you’re adding a Post Office OR a Mailbox when adding a new location.
  • Feeds! It felt wrong to be pulling in all this data, but not providing an easy way to get it all back out for you to remix however you wanted. So you can now get all the data WherePost has in 2 formats: JSON & KML. To do this, simply go to: http://wherepost.ca/load. This page has a few query-string params you can pass in:
    1)FORMAT: you can pass ?format=kml to get the feed in KML format – JSON is the default.
    2)RECORDS: you can pass ?records=X, where X is an integer to limit the resultset. By default, WherePost will return up to 10,000 records.
    3)SW & NE: to limit your results to a particular region, pass sw & ne coordinate bounds. So, for instance, ?NE=49.350405349378214,-122.72854022578122&SW=49.16644496927114,-123.2606904943359 will *roughly* return all the results in Vancouver

I think that’s all the updates. Let me know if you run into any difficulties!

Miscellany: what’s up lately

Peekaboo Daddy!
Peekaboo Daddy!

I’ve been quiet around here of late, for a few reasons, only some of which are because I started to dick around with the design of the site, then got busy and so stopped and so now it sits in limbo, not yet finished. But some fun things from home:

  • Liam, who is dreaming of being a grown up, while everyday become more grown in my eyes as he plays chess and researches strategies and helps out with Kellan and generally shows signs of being a very interesting, if damnably distractable boy.
  • Liam recently wanted to be a detective when he grew up, and so magnifying glasses and forensic kits and books about detecting were bought, karate was taken, and everything we encountered was a clue to solving something else. It was a wonderful time that leant well to our mutual tendency to be lost in our heads dreaming of alternate futures.
  • Currently, Liam wants to be a bicycle-accessory inventor. He has described in such detail that I could never capture it his future shop, on Broadway, wherein the front of the shop people will buy bicycles and the accessories that he has made, such as an automatic rain-cover that detects the rain and creates mudflaps and booties for your feet; while in the back he and his team will work, in the open, so that everyone can see the craft that goes into his work
  • Craft & artisanship are a common theme with Liam. He’s very interested in the methods by which things are made, and cared for, and the seemingly inherent artistic-ness of watching something be made. He loves YouTube how-to videos, and he’s dead into arts & crafts and crafting, and dreaming of how things are made: not at a large-scale industrial way that you see on DiscoveryTV, but Brooklyn-hipster style, small-scale, hand-crafted. It is unfortunate that neither Leah nor I are crafty, at all, and I wish I knew of ways to let him explore this more. I wonder if I could get him involved in VanHackSpace, or carpentry camps, or cooking, or gardening in a way that is beyond my ken.
  • Kellan, in the last few days, has started addressing me as ‘Dadda/Daddy’ to get my attention, not just as a sound in the middle of a river of sounds. He’ll say DaddaDaddaDaddaDadda in the car, and when I look back, he’ll grin and  squawk “hi!”. He’s been pretty sick lately, and I’m so happy to have my crazy-non-stop-on-the-go-little-guy back again.

 

Identity: Solve this

  • The computer I use to edit my photos & videos is the home iMac. It’s where my Drobo is, it’s where I’ve installed Lightroom, it’s where we keep our iPhoto library. For various reasons, this Mac is tied to Leah’s iCloud account. our Apple TV’s, my iPhone’s Photostream are tied to my iCloud account. There’s currently no way I’m aware of to get photos from Lightroom into my Photostream without linking this computer to my account. Solve this.
  • We currently have in our possession 3 iPhones & 2 iPads. The old iPad 1 is more or less Liam’s portable gaming device – Leah uses it for recipes, but I’ve more or less moved to using the office’s iPad 3 for all my browsing/email needs. Because we download all our iOS apps through 1 account, my account, as a family account, all 5 iOS devices are tied to it. This somehow or other lead to my Game Center account being on all devices. My Pocket Planes game, which I play on my iPhone, somehow overwrote Liam’s Pocket Planes game, which he plays on the iPad. There were tears. I’ve now created & installed Liam’s Game Center ID on the old iPad – but now I can’t play games with my account there. Solve this.
  • Liam is 7, highly literate, fairly computer savvy, and interested in gaming & creativity apps. He doesn’t understand passwords. He doesn’t really get working in a budget yet. I’d love to give him the ability to buy some apps regularly, without my intervention – or least my direct intervention. I’d love to have diurnal review of his app-store activity so I could, as a last resort, retroactively remove an app, but not have to provide up-front approval/password entry to our shared iOS account, thus removing any semblance of freedom. Solve this
  • I’m currently working on a web app/social tool that will be used by kids as young as kindergarten, all the way through high school seniors. This means that many of the users of the app are pre-literate. However, we have to maintain identity. How do I create a secure login system for users that might not know how to spell their name, let alone have an email address or be able to remember a password? How can this then scale, linguistically and visually, as these users grow and become high-school seniors themselves? Solve this.
  • I  try and use Stv as my online handle across all social networks. This means I often end up signing up for early access, alphas, betas, etc, just so that I have a chance to reserve this 3-letter handle. Many networks don’t let me have a handle that is only 3 letters. On some networks like Twitter, it can’t figure out when someone from Scotland is address their local TV network, known as STV), that they’re not addressing me. In the real world, I personally know 5 other people who go by the name of Steve. We are rarely confused for each other. Online identity & handles need to be as flexible. If I want people to address me as Stv online, that should be possible across all networks, regardless of how the network itself identifies me. Solve this.

Fixing “View All”

Lots of websites paginate their stories  - we all know the so-called justifications for why – so I won’t expand on that argument. However, many also helpfully include a “view all” link at the footer of each page so that if you want to view the whole story on one page you can (aside: with the various time-delay readers like Instapaper or Reader mode in Safari, this might be moot now, but I still use it a fair bit).

Unfortunately, these “View All” links are totally, and totally unnecessarily, broken. Have a look at this recent Wired article: “3-D for your ears”. It’s split into 3 pages, and at the bottom is one of those links. But when I click on it, it reloads the entire page, and leaves me at the top, not where I was.

I understand their desire to do a whole page refresh – in the game of page-view-counts, one more view is presumably a good thing. But their internal CMS must also know how/where a page splits – as it provides a split option. And we have the ability in HTML to link to any arbitrary point on a page via an Anchor Link. So why not tag the bottom of each page with an anchor – something as basic as “page1″. In the View All, you could then link me to the anchor link for the page , using the #page1 anchor link. You still get your extra page view, but you don’t annoy me in the process by making me find where I was in the now much larger content block.

I think the best solution of these “View All” links would be to simply load in the rest of the content in the current page via AJAX call – so the content simply stretches down – less bandwidth for everyone involved, and significantly more “refined” feeling in practice – but as I said, that doesn’t help the page-view-count game.

Because these view all solutions are currently such an annoyance, I find myself clicking the “Reader” button in Safari on almost every site I go to that paginates their stories. But for much the same reason I was never big on reading sites in RSS readers, I don’t particularly like this interface. I like the content to be snuggled in the chrome it was intended to be in.

File structure

Sign on an RE office
Old-Fashioned Service, New-fangled Tech

I have always been super-anal about file-structure & organization. I loathed big-bucket directories. I would carefully arrange applications into categorical subfolders, my documents were all organized by project in subfolders. My music has always been organized by letter->artist->album, with the large folders of letters being further sub organized. The idea was that I would never be looking at any folder list with more than around 30-40 items. Not sure how or why this happened. Likely years and years of working in DOS with tiny monitors and hating having to paginate listings.

But I realized lately that I essentially *never* browse my filesystems anymore. If I’m looking for something, I search. And I don’t care where it, because the spotlight search is so fast & efficient. We have historically had a pretty strict file-structure for web files too – for software packages, this is still useful. But we used to do it for assets as well – but now more and more we’re rsyncing uploaded files to big-bucket CDN/cloud servers anyway, so our precious file-system organization is not useful. And because there’s often a software layer between where files are stored and browsing them, we can use software to categorize the display in a vastly more useful manner than folders  - this is the glory of tagging & meta-data.

And so, after my external HDD died at home, along with it my home music library, when I started to rebuild my iTunes library, I did something that would be anathema to me just years ago – I’ve let iTunes organize the files internally, however you like. & have set up watch folders for it to auto-import as I download from eMusic and whatnot. And it is very liberating. I haven’t pulled the trigger on it yet, but I might just do that for photos too, getting away from the year/month/day/file structure I’ve been keeping since 1996.

The future is scary and cool.

 

I’m going to the XOXO Festival

I just backed the XOXO Festival on Kickstarter. It seems amazing, its local(-ish), and when I first read about it, it seemed like something I’d regret not going to, if I didn’t. I don’t actually know if I can go at this point – Leah’s work schedule will dictate that. But I’m going to try. & it’s in Portland, where I’ve never been, but keep meaning to get to. So. 3 things checked off my bucket list: 1) first time backing a project on kickstarter 2) first time going to Portland 3) attending a non-directly-work-related conference because the topic is cool.

To Kellan, On Occasion of your First Birthday

Dear Kellan,

Kellan, a few minutes old
When you were just a few minutes old

Shortly after your brother was born, I wrote his birth story - but I haven’t written much about yours. Your arrival was … unexpected: It was the day after your Mamma’s last day of work – she was taking the last month of her pregnancy off to enjoy herself  and prepare us for your arrival, a good five weeks before your supposed birthday. Your Mamma and I were out on a date to celebrate her last day. Liam was staying over at his friend Luke’s place. We had a really nice dinner at l’Abattoir, then came home. In the middle of the night, Your Mamma woke me  up because her water had broken – this was very unexpected because you weren’t due for another 5 weeks or so. On the flip-side, you couldn’t have picked a better night: Liam was taken care of so we didn’t have to wake him up to go to the hospital.

We went to St. Paul’s hospital, where your Mamma works, and then waited. And waited. The doctors decided to induce labour, as it wasn’t starting on its own. But the first time they hooked up the IV, it wasn’t working, so none of the drugs were actually being used, which caused some additional delay – by this time it was coming to be mid-day on May 14th, many, many hours after we first arrived. Finally, they fixed the IV, and labour began. It only took a couple of hours until you arrived:

We were very excited to meet you – but it was clear that you were having troubles breathing. Mamma, after a few quick cuddles with you, handed you to the nurses and you were whisked away to the NICU. You had it extra good because that’s where your Mamma works, so everyone knew her, and knew how to take really good care of you. The St. Paul’s NICU is a good place, but they didn’t have all the stuff you needed to help you breathe, and so after a few days, you were taken to the Children’s Hospital NICU.

Peeking out

There, you lived in an incubator for the next 12 days. Mamma spent virtually all day, every day with you. Your Nanna came out to meet you and help us get your brother to & from school. I came to visit after work every day. This was, I’m not kidding you, a really hard time. You seemed to be slowly getting better, but it was hard to tell and you were just so little, surrounded by such big, loud machines.

But your Mamma was a great advocate with you, and knew just what to ask for and when to push, so you got great care. And because your Mamma is literally a pro at taking care of little babies, you came home much earlier than you probably would have if you had different parents.

Much like when Liam was born, we weren’t fully prepared for your arrival – there was still lots of things to get and do and whatnot. But we were so happy you were home. You were so very, very tiny. And those first few months at home you were very very difficult. You weren’t a big fan of sleeping, and you were so tiny that you had trouble eating. I had taken to calling you some pretty unflattering nicknames in private because it was sometimes so hard. You would cry and cry and cry and we didn’t know why. We tried everything. I would hold you and rock you in my arms and sing every song I knew to get you to go to sleep. And your Mama, she deserves a medal because during the week, when I had to work, she tried so hard to let me sleep so that I could get up and go to work. Then on the weekends I’d try to let her sleep. But you know what Kellan? I think I failed more often than not at first. You were so different from your brother even then.

Then one day, things got a lot better. I’m not sure when, exactly, or how old you were – I think you were about 5 months (4 months, adjusted) when you started sleeping “through the night” (by which I mean you slept for more than 2-3 hours at a time). And napping. And generally being a much happier camper. And you started growing, and growing and growing. We went from being worried about how small you were to worried that you were too big! You had your first halloween. We dressed you as a little dragon, but you didn’t seem too impressed:

Our Sad Little Dragon
Our Sad Little Dragon

And then there was the helmet. Because you came so early, and spent so much time hooked up to machines, your head was a little misshapen. Not grotesque-gargoyle misshapen (although I did like to call you my little gargoyle), but enough that we decided to get you a helmet to help correct this. There was much deliberation about it, weighing the pros and cons. And then it came, and you wore it fore about 2 months until we couldn’t take it anymore: your head was so vastly better than before, it that short time; it made you so unhappy; and worse, there didn’t seem to be any real science backing the use of the helmet, or any long-term studies about potential side-effects.

Kellan in his helmet
You, wearing your head-shaping helmet

Since December, you’ve been growing like mad. Now at a year old, you’re happily crawling about in clothes labelled for 18months & 24-months: you’re big! And you’re happy. You love the cats, particularly Twitch, who is infinitely patient with you because you love to chase him and pet him and climb all over him:

Kellan Loves Twitch
You love the kitty so much!

What I think I love most about getting to know you is seeing just different you are from your older brother, and such a wonderful little boy all your own. Your eyes, which likely haven’t settled on a colour yet, seem to be headed into the hazel/green/grey palate, much like your Mamma’s, unlike Liam’s whose were as blue as the sky from day one. You’re not quick to smile or laugh, but when you do, they’re great big smiles and huge belly laughs. You are a baby on a mission! Sitting still and carefully examining things is for chumps! You learned to crawl for a reason and you like to crawl a lot. I suspect that one day, very soon, when you figure this whole walking thing out, it’ll be even more crazy trying to keep up with you. Your love your big brother and just want to follow him wherever he is. Fortunately, you have an amazing older brother who loves to play with you, and will look out for you. You are loud! You like to talk, a lot, and tell us in no uncertain terms when you’re unhappy. At home this is ok. But, little bear, you need to learn to travel better. See, we love to travel. And we got spoiled by Liam who was a great traveller from day one. But plane rides with you are much less fun so far. Because you can’t crawl wherever you like on a plane and darn it you just want to move! But we’ve still been places. You’ve been to LA already.

You, your big brother & your Dad in LA
You, your big brother & your Dad in LA

My first year with you has been so amazing, little bear! I can’t wait for us all to discover what comes next.

An Easter Vignette

The boy was tall for his age – he stood out more as the woman laid down the ground rules as dozens of younger, smaller children all milled around excitedly waiting for the whistle to be blown. And when it did the children surged forward, some led by parents, some tugging eagerly on their parents’ hands, some simply running full tilt to the furthest point. And there were eggs everywhere. On chairs, tables, bookshelves, keyboards, the floor, ledges, under hedges, in every nook and cranny. In many cases adults ran around picking up the eggs, dropping them into their child’s basket. And it started with such promise – almost immediately he found an egg, left alone after the crush had rushed through the opening.

But his luck turned. At every turn, he went to where the mob gathered, but he was a polite boy, and said “excuse me” and waited for his turn to look while the smaller children pushed him aside and pushed through and took the glory. The act was repeated over and over again – inside at the book shelves, outside in the hedgerow, on the playground, under the slide, amongst the rocks. At each instance, he came up empty-handed, while the smaller children filled their baskets.

But not all was lost, for he knew at home that he had his own basket, already full, awaiting him, that he did not have to compete for, that he had filled at his leisure that very morning. And the lone chocolate egg he had found was added to his bounty, then slowly, carefully savored over several minutes – letting it melt slowly in his mouth rather than simply chewing, reveling as the sun-softened chocolate melted in his hands, coating his lips and cheeks and chin.

 

An Adaptive Image Technique: Thinking out loud

I’ve been playing a lot with responsive layouts, and the inevitable bugbear of adaptive images for responsive designs. Ethan Marcotte’s Fluid Images is what I’ve been playing with most, particularly via Matt Wilcox’s Adaptive Images script, and dreaming of the <picture> solution proposed by Mat Marquis. But and so, I’ve been doodling and fooling around with some ways of doing this, and have now come up with something that I like. I’m worried it’s actually terrible, but I’ve played with it enough that I’d like some feedback now.

I’ve come up with a a CSS3-only solution to adaptive images. For those who just want to see the example, go ahead. You can view source for all the details. The 3-col/2-col content is purely presentational.

To do this technique, I have an image tag, like so:

<img id="image1" src="/transparent.png" data-src="/fishing.jpg" alt="Man fishing on a log" />

That displays a 1 x 1 px transparent image. The data-src attribute is there to show the “true” source. In the CSS, I make use of the background-image property to provide media-query-attentive backgrounds & sizing.

The default declaration is:

#image1 {
background: url('/images/responsive/fishing-small.jpg') top center no-repeat;
width:100%;
max-height:67px;}

This is the “small device” version of the image. using media queries, I can also load in an hd/retina version for those devices:

@media only screen and (-webkit-device-pixel-ratio:2) {
#image1 {
background-image: url('/images/responsive/fishing-small.jpg')
}
}

I also can provide a mid-size version, a mid-size hd/retina version and a desktop version (or an infinite number of variations based on media queries).

@media only screen and (-webkit-device-pixel-ratio:2) and (min-width: 600px) {
#image1 {
background-image: url('/images/responsive/fishing-mid-retina.jpg')
}
}

To provide some fallback for IE users, I’ve included an IE-specific style:

<!--[if lt IE 9]>
<style>
#image1 {background-image: url('/images/responsive/fishing');width:100%;}
</style>
endif]-->

I like to start “mobile first” and use media-queries to “grow out” from there, but I could just as easily start with the largest version and work in – in which case the IE workaround wouldn’t be necessary.

Some of my thoughts on this technique

  • I like that this technique is really easy, really light-weight and doesn’t require any javascript or php.
  • The fact that I’m using a 1×1 transparent png fills me with the howling fantods as I remember spacer gifs.
  • Reusing a single tiny image all over the place has negligible bandwidth effects, but to be fair, I am making an “unnecessary” request to get it each time.
  • The data-src attribute is there to help with this. By default, things like Pinterest and Google Images could no longer grab your images with this technique (Whether that’s a good or bad thing, I leave to you). By leveraging a .htaccess rule, you could load in the data-src attribute as src for the pinterest or various bot user-agents.
  • This system could work pretty easily with automated CMS systems: using regex to replace a src attribute with a data-src attribute and injecting the 1×1 & an id is trivial, as is auto-generating some CSS to handle the variations of the image for each media-query break-point – but that’s definitely more work than not doing anything on the CMS -side and doing all replacements in JS or PHP on the front-end.
  • I like that I can easily update/replace any 1 image in the set without updating html source anywhere.
  • This feels “too easy” to me. All the other solutions I’ve found use some sort of scripting, be it PHP or JavaScript. That fact that there’s nothing to post to github here makes me feel like I’m doing something wrong.
  • Using background-image on images means that users can’t as easily download your image – right-click on an image and most browsers don’t give the option to “download background image” like they do on other elements.
  • I worry that this is doing something unexpected for accessibility – but mostly it should be ok, I think, as there’s an alt attribute, and will still work fine with a longdesc attribute.

I’m hoping for feedback on this for the world at large – as I said, I’m thinking out loud about this – it seems like a workable solution, so your feedback, thoughts, critique would be very much appreciated before I go do anything silly like use this in a client’s project.

Eastside Mural Tour project: a critique

I want to preface this by saying I love the idea of the Eastside Mural Tour project, for so many reasons: I love Vancouver’s art, particularly the hidden, surprising art. I love graffiti art. I’m a fan of community projects, and projects that celebrate them. I’m also particularly interested in the idea of digitally curated physical objects, and finding new ways to help travel, explore, learn about communities online. That being said, I’m really disappointed with this project – they’ve missed some really simple points that I feel are critical. If you’re a developer on this project, please don’t think I’m shitting all over you for no reason: if you’ll let me, I would gladly pitch in to help.

All that out of the way, here’s the misses:

  1. The site doesn’t really work on Mobile. Load the front-page: the interactive map is done in flash. The site itself isn’t optimized in any way for a mobile experience: but this is a site destined to be used by someone on a device; most likely as their doing their tours.
  2. The most prominent links are to PDFs of the tours; the big, colourful buttons on the right side. However, hidden at top at HTML versions of the descriptions, which actually contain descriptions of the art!
  3. On these HTML pages, there’s no Map of the location. Nor is there any “next stop/previous stop” links to guide my usage of this. Nor do these HTML pages contain the dial-in directions that the PDFs do
  4. The PDFs are not styled in any way, nor do they contain any of the useful descriptions of the stops on the tour – instead, they simply contain titles of the art, in a format that appear to be links, but if they are, did not work for me in any way.
  5. This one strikes me as particularly egregious: The PDFs contain an image of a Google map that contains all the stops on the tour. So someone clearly spent some time building the geo-coded tour – why not embed that map?
  6. No social: Why not at least propose a couple of hashtags for the project, per tour, maybe per site. Pull in comments/photos from Instagram, Twitter, Foursquare to let the community participate in this beautiful project, in this art. Pinwheel is brand new, but given Caterina‘s local origins, they might be very interested in participating.
  7. Data: I couldn’t find these mural’s in Vancouver’s Data set (though maybe I just failed in my search), but why not, given you clearly have all the geo-data for these murals, release that data for others to remix?

There other, smaller quibbles, but those top 5 strike me as major faults that we should fix. The last simply betrays my personal bias towards open data, and in particular, location data.

There’s also some other ways this same sort of tour could be made. There’s a site, MapTales, that exists solely to create these sorts of self-guided tours. I don’t think it should replace the current site, but providing links to another interface would be a nice way to share these tours out in a well-designed, contemporary way. Bringing up Pinwheel again, all of these stops could exist in there. I don’t think they have the idea of “tours” currently, but by creating a hashtag, locating these places, this could open up the ability to extend & comment on by the pinwheel community. I’d also recommend creating “places” in Foursquare for each of the stops on the tours, let people check in there – or at least easily geolocate photos taken there in such a way that the project itself can re-use them.

This project is sub-titled “murals and the spirit of collaboration”, and yet feels so far from being a project that the digital community can collaborate in right now. Let’s fix it.

Editorial Aside

This brings up all sorts of thoughts around the ongoing failure to provide super-easy tools, widgets, add-ons, etc that projects like this could easily make use of. Even most plugins, themes & mapping tools still require programming knowledge to configure and drop into sites. This world of digitally-curated, real-world spaces is really just beginning. We need to find/build better tools for the average person to expose their localities, their stories in a way that works for all.

Looking for a place to happen