GeoPortal v3
Behold! I bring you GeoPortal. Again. For the third time.
GeoPortal is my pet project. It gets a lot of traffic (for us), but unlike most of my projects, this one doesn’t have a client I’m working for. It’s one of those things I did because we needed one of those things. Every couple of years I renew it using whatever cool developer or design stuff I’ve learned since the last time, and those tools and techniques, having been tested on GeoPortal, work their way into our other projects.
This edition has a lot of big changes under and on the hood. Under the hood it’s:
Notice anything missing here? Zero jQuery. It’s straight-up JavaScript. No Underscore/Lodash either. I found filter and map covered my data wrangling needs and React is handling components/templating. No LESS/SASS/Stylus either. The features I was using from those CSS processors was handled by using next generation CSS now with PostCSS and CSSNext. Babel let me use ES6+ features. And Leaflet because Leaflet. Browserify handles dependencies.
On the hood:
Nothing against Bootstrap, which I like very much. MDL was just the new cool and I wanted to give it a swing. Truth be told I’m not using very many of MLD’s features. So few in fact that I can leave off MDL’s JS entirely and the only thing that breaks is some of the responsive bits. I made a custom build so I can cut out the fat. MDL is quite pretty, fast, and easy to work with, though the class names are harsh. Who thought mdl-navigation__link or mdl-color-text--blue-grey-400 was a good idea?
I should tip my hat at a few projects that gave me design ideas. The site layout was derived from MDL’s dashboard template, and the intro text/content and the way the search results look was inspired by Asheville’s SimpliCity, which, if you haven’t checked it out, is really awesome. They are Zen enough to not show you a map at all unless you specifically request it.
The new site has a much better mobile experience, particularly if your browser supports the Fullscreen API for the map. That was one of my big goals. The mobile experience on most of my sites can be charitably described as fair. For the new release mobile is a first class citizen.
In terms of performance, GeoPortal was already pretty tight. The new release is even more so, but not so much as you’d notice. The JS went from 126KB gzip’d to 123KB (although that includes all components/templates, which were extra for the old site), and the CSS went from 25.9KB to 18.2KB. It takes a little longer to load, but that’s the fault of the YouTube video.
Speaking of which, that’s my best YouTube video ever. It was made with Inkscape (intro/close graphic), SimpleScreenRecorder, Audacity (voice recording and compression/normalization), some Creative Commons audio clips, and OpenShot to put it all together on Manjaro Linux. The mic is a Blue Nessie. OpenShot is nice and noob friendly, but a word of advice for any video editor on Linux - save early, save often.
This release posts a banner of shame for IE9 users and directs them to both whatbrowser.org and the old version of the site. It’s time. IE9 is <5% of my users, Microsoft is dropping support for old browsers in January, and the amount of goodies you get dropping IE9 support is staggering (CSS Text Shadow, CSS 3D Transforms, CSS3 Transitions and Animations, CSS3 Gradient, SVG Filter Effects, CSS3 grid, flexbox, multi-column, positioned floats, regions, hyphenation, proper CORS support, HTML5 Forms, input controls, validation, ad nauseam). I did just point them to the upgrade page, but it turns out some IE9 users are within pitchfork throwing distance of my cube, so I posted the old site somewhere else and linked to it too until January.
One disappointment is test coverage. As in I have very little. Most of the code is in React components, and testing React components is tricky. In particular my components don’t do a whole lot on the first run, as they do AJAX fetches on load and then “paint” real stuff a little while later. I’m having trouble with React’s shallow renderer and “wait a sec yo”, so I don’t have any output worth testing. I’ll keep playing with it.
As always, the source code is on Github.