Skip to content


Day 1 Keynote

I’m going to try moving my professional liveblogging from my personal site over here — which I’m a bit ambivalent about, since I’ve been liveblogging on my personal site since about 2003 or 2004. I may even cross-post, but we’ll see.

Running late – which seems to be the operating mode. Not sure how I feel about the combo badge/pamphlet.

Her story of how she decided to come to Portland sounds a lot like how I decided to go to UPS. :)

They’ve been paying $50k/yr for a trip planning – but only transit mode, get lots of requests for multimodal. GoRoo was the only multimodal they could find – cost excess of 1.?m/yr. TriMet has policy that when looking for new software always compare open source along w/commercial. Developer community is important criteria for open source options.

Got a grant, abt $68k. Brought in partners to develop project.

OpenTripPlanner.org – open process! designed to be easily customizable. used open data wherever possible, incl open street maps. GTFS for transit data. (is that the same as they use for OneTripAway?) Prototype up in about a year. To licence 3 counties for a year (telenav?) would have been $25k/year. Instead used interns to develop some of the data. OpenStreetMap for routing purposes. Interns have been adding data to OpenStreetMap, including better development of bicycle routes.

Even after they ran out of money, code development kept going! Volunteers added all sorts of improvements including multi-lingual support. Implementations in 10 different countries.

First US implementation of fully open-source/open-data trip planner.

From management perspective: both cheaper AND better.

Working on making it a large regional trip planner: Vancouver to Salem.

Multimodal planning has potential to save significant time. 5 minutes bike/transit vs 20 minutes transit only (old system or Google Transit)

Adding more information about vehicular routing, turn restrictions, speed limits, directionality. Working with police to get info into the system, since they write tickets for all that stuff!

Demo: can adjust for time, safety, or for FLATTEST option.

http://rtp.trimet.org/

45 apps by 3rd party developers, because they have open data.

running an app contest, aimed at creating best app for tourists. with prizes! civicapps dataset. want to encourage visitors to use transit.

It would be insane if something like this would be implemented by all the transit agencies from Everett to Eugene.

Safety is street facilities – bike paths, type of street, etc. Don’t (yet?) include volume info.

Question about whether they might use searches to improve their routes and schedules. They’d love to be able to, but

Automated setup for application for cities with GTFS data and (USGS?) data.

“Get it up and running in less than an hour” OMG.

Posted in pnwds2011.


SVG for a CSS background

I may have to turn this (tweaking tutorials) into a series or something. Today’s tutorial: Building a starburst with CSS.

I read through and thought that it seemed really inefficient, if kinda cool for learning pseudo-elements and CSS transformations. Then I remembered this tutorial I read a couple of weeks ago on using SVG gradients instead of CSS gradients. (FWIW, I didn’t reread the tutorial at that point; I just went on the vague “hey you can do that, can’t you?” memory.) So this is a remix of two tutorials!

I opened up the copy of  SVG Edit that I’d downloaded; I couldn’t figure out how to make a multipointed star, so I opened Illustrator and created one there, then exported to SVG and imported the meat of the code into SVG Edit, which I saved as a new SVG file. Important: the star has to fill the whole canvas, or weird things happen. My star isn’t identical to the one in the tutorial, but that’s just a matter of changing the Illustrator file.

Then, instead of looking up the tutorial I’d read (!) I just searched for “use svg as background image” — third result was an A List Apart article from last year. (By Shelley! Who is awesome!)

I had a hunch that more recent versions of Firefox would support SVG backgrounds, so I just snagged that bit of code, and dropped it into the CSS from the original tutorial. Yes, it works…except it looked a bit odd.

Time to prune the HTML and CSS, first. No need for a “price-container” div. No need for any of the content generation or transformations. No need for any of the positioning, although I did need to keep display:block for .price span. Moving the font declarations into the price div forced me to recalculate the height and width. Moving the padding there meant increasing the background-size to fit.

Up to this point, I hadn’t declared a background color, but when I went to see what happened in IE, I had a white box with white text. :( But when I declared the background color, I didn’t have the star anymore anywhere else. :( Back to SVG Edit! I created a white box, put it to the back, and added that code to my SVG file. While I was there I realized I could get that nice detail of the white inner border by cloning the star, adding a white stroke, and centering both stars, grabbing the code, etc.

Check out the final result!

BTW, to upload the SVG file through WordPress, I installed the PJW Mime Config plugin. Worked great!

Posted in Tutorials.

Tagged with , , .


Improving on a tutorial

I read this tutorial on designing pretty buttons for the web* and found myself somewhat disappointed. The “CSS” solution included creating a background gradient in Photoshop…at the same time that the author was using CSS rounded corners and text shadows. Plus the tutorial itself didn’t include any of the RGB color values, and I didn’t think the “button” needed to be a link inside of a paragraph; it could be just the link by itself.

So I made my own; the only change to the HTML was moving the button class from the P tag to the A tag. This way the button can be contained in any block-level element: a list, a form, a div, whatever makes sense for the page as a whole.

Then I went into the CSS. To get it to lay out properly, I set the display property to “inline-block” and set the width to auto. Having the padding directly on the link makes it easier to click. You can float the link or not, or set the width manually if that makes more sense in the overall design. I added a bit of margin to fit this particular setting.

The border remains the same, the color and font-styling also stay the same. I moved the font-family to be defined at the body level on the assumption that a typical design will do something similar. (BTW, I discovered that the font-weight had been set twice!)

I let the gradient generator create that bit of CSS, given the colors of the two states. I had to zoom way the heck in to get the colors, but after that it was pretty straightforward. I used the ColorZilla Ultimate CSS Gradient Generator; your generator (or hand-built CSS) may vary. I used the two buttons shown at the top of the tutorial for my regular and hover states, which meant I had to tweak the border, text-shadow, and color values to match.

Check it out! (I realized after I uploaded that it’s XHTML 1.0 transitional instead of the new hotness HTML5. I’d say it was an exercise for the reader, but really it’s because that’s my default new HTML template in Dreamweaver.)

* I saw it on Twitter; I can’t remember who posted it!

Posted in Tutorials.

Tagged with , , , .


Quick hit: book review

Finally read Responsive Web Design yesterday. You should too. (Slighly longer review.)

Posted in General.

Tagged with , , , .


Hat Brain: an occupational hazard

I get hat brain. It comes from having to change hats so often during the work day. Designer hat. Project manager hat. CEO hat. Coder hat. Community member hat. Marketer hat. So many hats! And I have to wear many of them each and every day.

Hat Brain, blog post by Laura Scott

I get this. Not just that this happens to me – holy cow, all the time – but that it resonates really deeply as a description for one of the occupational hazards of the Web Generalist. Everybody has problems when switching out of a flow state, but when you’re switching to something entirely different: designing to coding; coding to writing; writing to strategizing, etc., etc., it becomes even more difficult.

Posted in General.

Tagged with , .


Drupal 7 status

Went through my spreadsheet again after doing some module switching up on the test server. Now fully 90% of the modules in use are either “good to go” or “in progress” — which is fantastic. But…that last 10% is even more stubbornly not ready.

  • One module that will be obsolete, so I’ll need to rework how the associated content is set up (OpenLayers Geocoder)
  • Three modules with patches but no release (ecard, OpenLayers Proximity, Special menu items)
  • One module with a plan to upgrade, but no releases or patches (SWF Tools)
  • Two modules with issues posted, no patches, no releases, possibility of no upgrade at all (Ad Views, Node import)

I could probably switch from Node import to Feeds, but when I tried it, I found the setup incredibly daunting. I usually need it for one-off situations: new content type for which I have a spreadsheet, that sort of thing; so a cumbersome setup is a deal-breaker.

The Ad Views situation is the most problematic, because it’s fairly integral to the homepage, but it’s been abandoned almost entirely, and it would require upgrading to Views 3 if I wanted to adopt the module. Whew. So either I need to get cracking on learning how to write modules for Drupal 7 & Views 3 (gulp) or completely rework how that particular chunk of the homepage works (double gulp).

Instead, I’m just going to put off upgrading, because it’s not as though I don’t have a TON of stuff to do as it is.

Posted in General.

Tagged with .


Random Reference Hilarity

Yesterday I was looking up how to do something in MySQL from the command line and found a really nice page listing off pretty much everything I needed. So I decided to add it to my Pinboard…and discovered that I saved it already in March 2010. One of the minor hilarities of working with a less-used skillset, I suppose.

Posted in General.

Tagged with , .


Smashing Magazine article

Paul Boag: Defending The Generalists In The Web Design Industry

While my peers are becoming more specialized, I have stoically refused to do so, remaining a generalist. If anything, my interests have broadened, encompassing subjects such as marketing, psychology and business strategy.

What do you think?

(FWIW, I think he covers a lot of things that I’ve struggled to articulate. I appreciate that.)

Posted in General.

Tagged with .


Preparing for Drupal 7

I have two tools for monitoring whether the modules I’m using can be upgraded to Drupal 7:

I use the spreadsheet to make notes and to add details about the modules without releases recognized by Upgrade Status. I also use it to make a cool pie chart of Drupal 7 readiness.

I went through it again this morning to pin the latest pie chart up in my cubicle, and I noticed something. Because I have copies of all my previous pie charts, at least back to the end of March, I can see how things are progressing in general.

The “in progress” category (has a non-final release) has been pretty stable: mid-40s this whole time. The “good to go” category (in core or has a final release) has gone up steadily, starting around 1/3 of the total, now over 40%. Quite a few modules have gone from no release to in progress to final. To be honest, I’m not using final versions of some of those modules in Drupal 6 either, so I consider “in progress” likely to be “good enough.”

The various no release categories* have dropped from almost a quarter to 14% or so.  But looking at the particulars, that 14% with no release is very stable. In fact, some of the decline comes from me switching modules, where there are several similar options, and there’s another one further along in progress towards D7. There’s a couple more of those moribund modules that I’m looking into dropping…but there’s four modules** that are show-stoppers as far as I can figure out.

So I have to decide: do I change how things work on my site? Do I look harder for a replacement? Or do I step up to learn module-writing so I can take them on myself? It’s a tough question, which I have yet to answer.

* Issue with patch; issue with no patch; issue where alternatives are suggested.

** FWIW: Ad Views, ecard, Generate Password, Special menu items. I’m seriously considering adopting Ad Views and ecard.

Posted in General.

Tagged with .


Converting from GMap/Location to OpenLayers

This is a more coherent write-up of my last three days of troubleshooting and process notes.

I’ve been using the Location and GMap modules on my employer’s site since we went to Drupal a couple of years ago. We’ve had some issues with mixed content (SSL) errors, so I’ve been thinking about alternatives. For the maps themselves, it seems like Virtual Earth (Bing) maps will do SSL free of charge. There’s no module to just swap out Bing for Gmap, at least not for Drupal 6. I tried Mapstraction, but had a lot of trouble getting it to render properly.

Then I tried OpenLayers, and on first testing, that worked pretty well. But there were a lot of moving pieces, so for my own faulty memory and the edification of the internets, here’s how it works. This covers using Location as an aspect of the node (?) and not a Location CCK field.

IMPORTANT NOTE: so far, everything I’ve done has been on our staging server, not on the live site. I may update the article once I’ve changed the live site.

Step 0: BACK UP EVERYTHING. Database, views, theme files. I created a Views Data Export view to export the node data as an extra level of paranoia.

Set up OpenLayers

Install OpenLayers, OpenLayers Geocoder, and OpenLayers Proximity. To get some features working, the dev version of OpenLayers Geocoder is required!

Create a new OpenLayers map preset, starting by cloning the default preset.

  • adjust the size to match your site design
  • center the map and set the zoom to match if know your data falls into a specific area
  • enable Pop Up and Zoom to Layer
  • pick the specific maps to use; if necessary, add API keys under Layers/API Keys.

Go to Settings to set your new preset as the default, and if you’re keeping the OpenLayers JavaScript locally to update the location.

Update the Content Type

Go to Manage fields in the content type and add an OpenLayers WKT field, with the OpenLayers Geocoder as the input type. Then add text fields for any aspect of the address you might want to display on the page or use in a view. I used Address, City, State, County and Zip. Also, if you’re using the phone or fax fields in Location, create text fields for them as well.

Configure the OpenLayers WKT field:

  • Check Enabled under Zoom to Layer and change the default zoom; you may need to come back and tweak it later.
  • Under Autocompletion, check Enable next to your address text fields, and Override if you want to be able to edit the fields. Add the correct replacement pattern in the Content field. As far as I can tell, there’s no way to get just the number and street name: “101 Main Street”; [street_address] gives the whole thing, including country.
  • Uncheck Path and Polygon under Feature Types.
Autocompletion does not work with OpenLayers Geocoder alpha5. I used the dev version from April 28, 2011.

Add the addresses to your nodes. This can be very tedious, especially since both maps will try to load at once. Marvel at the autocompletion of your text fields. (Seriously, the “county” autocompletion about blew my mind.) Edit the text fields as desired; this doesn’t change the map!

It may be possible to modify the database directly, or to use some combination of Views Data Export/Node Import, to skip the tedious bit. I haven’t tried it.

If you have a custom template for this node type, update it to remove the Location and Gmap info and to add the new map and address info. (A tip for creating a link to directions at Bing Maps.) Check your CSS to see if it needs any updates.

Create a View

This tutorial is actually pretty good; the super-short version:

  • create a view
  • add an OpenLayers Data display
  • go out of Views and create a new OpenLayers preset that includes your view’s data as a layer
  • go back to Views and add a display with the OpenLayers Map style
  • set the Map preset to the one you just created

If you want the text of your popup to be more than a single field (etc), create a Custom text field where you can combine multiple node parts/fields. (Issue on OpenLayers queue.)

Take a look at the view and check your CSS for any class or id name changes.

This tutorial explains how to add a proximity filter, so people can search by zip code or city and state. Go down to “Add the Proximity Filter” — I’m not using the Proximity:Distance field, because I think it looks confusing when no location is set in the filter.

In my case, I added several more views: an attachment with the list of nodes, a table of node data, and two different lists of nodes filtered by specific qualities. I also had to update a template file for the attachment. YMMV.

Remove Location/Gmap

BACK UP EVERYTHING. Again.

Initially, I just changed the content type, setting the minimum and maximum number of locations to 0. That worked, but I think it would work just as well to disable the Location and Gmap modules without the intermediary step. Since I may have nodes with locations or GMap macros, I’m not (yet) uninstalling the modules, only disabling.

Remove the old views, theme files and CSS.

Posted in Tutorials.

Tagged with , .