You can get the current beta release on Github.

I don’t know what happened. I was once an idiot savant at desktop GIS. I wrote data maintenance and analysis apps in AML (painful), ODE (excruciating), Avenue (we don’t talk about Avenue), and ArcObjects (once, on a dare), and a number of them worked some of the time. I could tell you how long I could spend at the gym while a geoprocessing task ran with ±5 minute accuracy. I could make a map that wouldn’t make Gretchen stick pencils through her retinas. Probably.

Not anymore. Most of my time is making web toys, and my analysis needs are usually covered by some SQL/PostGIS machinations. When I do have pull up a desktop GIS, I suck pretty hard.

Being garbage at desktop GIS isn’t a normal thing for a GIS person. For 99% of GIS people, desktop GIS is GIS. Combining that secret shame with a long-standing desire to dig into QGIS, I picked up Anita Graser’s Learning QGIS 2.0.

If you have any interest in QGIS, you should get this book. It sits in that sweet spot between a voluminous tomb that gives you too much and a tiny pamphlet that gives you too little. You will get everything you need to get proficient and ready to do real work with QGIS in a few hours. Just 15 minutes into the Data Creation and Editing chapter I totally groked the interface for the first time and my editing experience improved 100% from my usual sporadic fumblings. Learning the inns and outs of spatial analysis and map creation after that was gravy.

All of which is a long way of saying (1) QGIS is a legitimate ArcGIS Desktop replacement and (2) Learning QGIS 2.0 is a great way to get started. Big thanks to Anita Graser for helping me not suck at desktop GIS.

I ran some benchmarks via Apache ab on the local network of both our local physical tile server (8 core 4GB Windows) and the Digital Ocean cloud server (1 core 512MB). The $5/month cloud host was faster, though it isn’t a night-and-day difference. Microsoft has worked pretty hard to make Nodejs performant on Windows. Still, it says a lot that a $5/month host can tell a beefy physical box to bang off.

1
2
3
4
5
6
7
8
9
10

Requests per second:    270.71 [#/sec] (mean)
Time per request:       14.776 [ms] (mean)
Time per request:       3.694 [ms] (mean, across all concurrent requests)
Transfer rate:          8181.02 [Kbytes/sec] received

Connection Times (ms)
              min  mean[+/-sd] median   max
Connect:        0    0   0.4      0       2
Processing:    10   14   8.2     13     110
Waiting:        6   11   7.9      9     103

1
2
3
4
5
6
7
8
9
10

Requests per second:    283.02 [#/sec] (mean)
Time per request:       14.133 [ms] (mean)
Time per request:       3.533 [ms] (mean, across all concurrent requests)
Transfer rate:          8540.27 [Kbytes/sec] received

Connection Times (ms)
              min  mean[+/-sd] median   max
Connect:        0    2   2.1      1      21
Processing:     4   12   7.7     10      73
Waiting:        0    9   7.3      8      69

1
2
3
4
5
6
7
8
9
10

# install software
apt-get install nodejs nodejs-legacy npm git
npm install -g forever

# pull in git repo
git clone https://github.com/tobinbradley/mbtiles-server.git tiles

# from tiles folder to start server
chmod +x starter.sh
./starter.sh

Resources

• Digital Ocean
• Coder Radio
• MBTiles-Server
• Putty (Windows SSH)
• WinSCP (Windows SSH file copy)

The Google Civic Information API is a handy way to grab voting and elected official information. The current way I do that on GeoPortal is to enter some representative information locally and update it when somebody emails me in ALL CAPS. That is not a good way.

But the Google Civics API’s representative service (oddly) only does POST, and POST doesn’t do JSONP, necessitating a proxy. And to further complicate things, it isn’t a straight-forward cURL operation - you have to send the POST argument as JSON and not the default x-form or you’ll get an error message. So, do this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

// The only arguments are "address" and "callback" (the latter optional for JSONP)

$url = "https://www.googleapis.com/civicinfo/us_v1/representatives/lookup?key=_your_api_key_here_";

$ch = curl_init();

curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_POST, 1);

// I swore a lot over these next two lines
curl_setopt($ch, CURLOPT_HTTPHEADER, array("Content-type: application/json"));
curl_setopt($ch, CURLOPT_POSTFIELDS, '{"address":"' . $_GET["address"] . '"}');

curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);

$json = curl_exec($ch);

curl_close($ch);

// if a callback is set send back jsonp
echo isset($_GET['callback']) ? "{$_GET['callback']}($json)" : $json;

And then a little jQuery to eat it.

1
2
3
4
5
6
7
8
9
10
11

$.ajax({
    url: 'civicproxy.php',
    type: 'GET',
    dataType: 'json',
    data: {
        'address': activeRecord.address
    },
    success: function (data) {
        // do magical things
    }
});

1
2

npm install gulp -g
npm install gulp gulp-less gulp-minify-css gulp-autoprefixer gulp-uglify gulp-imagemin gulp-concat gulp-replace gulp-livereload tiny-lr

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115

// Load plugins
var gulp = require('gulp'),
    less = require('gulp-less'),
    autoprefixer = require('gulp-autoprefixer'),
    minifycss = require('gulp-minify-css'),
    uglify = require('gulp-uglify'),
    imagemin = require('gulp-imagemin'),
    concat = require('gulp-concat'),
    replace = require('gulp-replace'),
    refresh = require('gulp-livereload'),
    lr = require('tiny-lr'),
    server = lr();

var jsFiles = [
    'assets/scripts/vendor/jquery-2.0.3.min.js',
    'assets/scripts/vendor/bootstrap/modal.js',
    'assets/scripts/vendor/bootstrap/transition.js',
    'assets/scripts/vendor/bootstrap/button.js',
    'assets/scripts/vendor/bootstrap/collapse.js',
    'assets/scripts/vendor/bootstrap/dropdown.js',
    'assets/scripts/vendor/bootstrap/tooltip.js',
    'assets/scripts/vendor/leaflet/leaflet.js',
    'assets/scripts/vendor/leaflet/leaflet.d3.js',
    'assets/scripts/vendor/jquery-ui-1.10.3.custom.min.js',
    'assets/scripts/vendor/chosen.jquery.js',
    'assets/scripts/vendor/d3.v3.js',
    'assets/scripts/vendor/pagedown.js',
    'assets/scripts/vendor/pubsub.js',
    'assets/scripts/vendor/queue.v1.min.js',
    'assets/scripts/vendor/topojson.v0.js',
    'assets/scripts/vendor/d3.tip.v0.6.3.js',
    'assets/scripts/vendor/typeahead.js',
    'assets/scripts/vendor/underscore-min.js',
    'assets/scripts/vis/*.js',
    'assets/scripts/datameta.js',
    'assets/scripts/page.js'
];

// Less preprocessing with autoprefixer and minify
gulp.task('styles', function() {
    return gulp.src('assets/less/main.less')
        .pipe(less())
        .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
        .pipe(minifycss())
        .pipe(gulp.dest('public/css'))
        .pipe(refresh(server));
});

// Script concatenation
gulp.task('scripts', function() {
    return gulp.src(jsFiles)
        .pipe(concat('main.js'))
        .pipe(gulp.dest('public/js'))
        .pipe(refresh(server));
});

// Script uglify
gulp.task('uglify', function() {
    return gulp.src('public/js/main.js')
        .pipe(uglify())
        .pipe(gulp.dest('public/js'));
});

// Image Minification
gulp.task('imagemin', function() {
    return gulp.src('assets/images/build/*')
        .pipe(imagemin({
            optimizationLevel: 3,
            progressive: true,
            interlaced: true
        }))
        .pipe(gulp.dest('public/images'));
});

// HTML refresh
gulp.task('html', function() {
    return gulp.src(['public/**/*.html'])
        .pipe(refresh(server));
});

// Image refresh
gulp.task('images', function() {
    return gulp.src(['public/**/*.png', 'public/**/*.gif', 'public/**/*.jpg', 'public/**/*.svg'])
        .pipe(refresh(server));
});

// Cache busting
gulp.task('replace', function() {
    return gulp.src('public/index.html')
        .pipe(replace(/foo=[0-9]*/g, 'foo=' + Math.floor((Math.random() * 100000) + 1)))
        .pipe(gulp.dest('public/'));
});

// live reload
gulp.task('livereload', function() {
    server.listen(35729, function(err) {
        if (err) {
            return console.log(err);
        }
    });
});

// dev task
gulp.task('dev', function() {
    gulp.run('livereload');
    gulp.watch('assets/less/**/*.less', ['styles']);
    gulp.watch('assets/scripts/**/*.js', ['scripts']);
    gulp.watch(['public/**/*.html'], ['html']);
    gulp.watch(['public/**/*.png', 'public/**/*.gif', 'public/**/*.jpg', 'public/**/*.svg'], ['images']);
});

// build task
gulp.task('build', function() {
    gulp.run('styles', 'replace', 'imagemin', 'scripts', 'uglify');
});

Resources

• Node
• Gulp

Gulp is the new hot stuff for task running. I hadn’t heard of it until a few weeks ago, but after having a play with it it might replace Grunt in my stack. The configuration is easier to set up and read, and because it uses node streams it can net you a decent performance boost.

Here’s a config file I just made for one of my projects.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113

// Load plugins
var gulp = require('gulp'),
    less = require('gulp-less'),
    autoprefixer = require('gulp-autoprefixer'),
    minifycss = require('gulp-minify-css'),
    uglify = require('gulp-uglify'),
    imagemin = require('gulp-imagemin'),
    concat = require('gulp-concat'),
    replace = require('gulp-replace'),
    refresh = require('gulp-livereload'),
    lr = require('tiny-lr'),
    server = lr();

var jsFiles = [
    'assets/scripts/vendor/jquery-2.0.3.min.js',
    'assets/scripts/vendor/bootstrap/transition.js',
    'assets/scripts/vendor/bootstrap/button.js',
    'assets/scripts/vendor/bootstrap/collapse.js',
    'assets/scripts/vendor/bootstrap/dropdown.js',
    'assets/scripts/vendor/leaflet/leaflet.js',
    'assets/scripts/vendor/leaflet/leaflet.d3.js',
    'assets/scripts/vendor/jquery-ui-1.10.3.custom.min.js',
    'assets/scripts/vendor/chosen.jquery.js',
    'assets/scripts/vendor/d3.v3.js',
    'assets/scripts/vendor/pagedown.js',
    'assets/scripts/vendor/pubsub.js',
    'assets/scripts/vendor/queue.v1.min.js',
    'assets/scripts/vendor/topojson.v0.js',
    'assets/scripts/vendor/d3.tip.v0.6.3.js',
    'assets/scripts/vendor/typeahead.js',
    'assets/scripts/vendor/underscore-min.js',
    'assets/scripts/vis/*.js',
    'assets/scripts/datameta.js',
    'assets/scripts/page.js'
];

// Less preprocessing with autoprefixer and minify
gulp.task('styles', function() {
    return gulp.src('assets/less/main.less')
        .pipe(less())
        .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
        .pipe(minifycss())
        .pipe(gulp.dest('public/css'))
        .pipe(refresh(server));
});

// Script concatenation
gulp.task('scripts', function() {
    return gulp.src(jsFiles)
        .pipe(concat('main.js'))
        .pipe(gulp.dest('public/js'))
        .pipe(refresh(server));
});

// Script uglify
gulp.task('uglify', function() {
    return gulp.src('public/js/main.js')
        .pipe(uglify())
        .pipe(gulp.dest('public/js'));
});

// Image Minification
gulp.task('imagemin', function() {
    return gulp.src('assets/images/build/*')
        .pipe(imagemin({
            optimizationLevel: 3,
            progressive: true,
            interlaced: true
        }))
        .pipe(gulp.dest('public/images'));
});

// HTML refresh
gulp.task('html', function() {
    return gulp.src(['public/**/*.html'])
        .pipe(refresh(server));
});

// Image refresh
gulp.task('images', function() {
    return gulp.src(['public/**/*.png', 'public/**/*.gif', 'public/**/*.jpg', 'public/**/*.svg'])
        .pipe(refresh(server));
});

// Cache busting
gulp.task('replace', function() {
    return gulp.src('public/index.html')
        .pipe(replace(/foo=[0-9]*/g, 'foo=' + Math.floor((Math.random() * 100000) + 1)))
        .pipe(gulp.dest('public/'));
});

// live reload
gulp.task('livereload', function() {
    server.listen(35729, function(err) {
        if (err) {
            return console.log(err);
        }
    });
});

// dev task
gulp.task('dev', function() {
    gulp.run('livereload');
    gulp.watch('assets/less/**/*.less', ['styles']);
    gulp.watch('assets/scripts/**/*.js', ['scripts']);
    gulp.watch(['public/**/*.html'], ['html']);
    gulp.watch(['public/**/*.png', 'public/**/*.gif', 'public/**/*.jpg', 'public/**/*.svg'], ['images']);
});

// build task
gulp.task('build', function() {
    gulp.run('replace', 'imagemin', 'uglify');
});

For my web projects, I generally have two workflows. During dev, I watch JavaScript source files and concatenate them, watch less files and preprocess and minify them, and watch HTML and image files for changes, using livereload to refresh the browser as necessary. Then for build I minify images, uglify the JavaScript, and do some cache busting. To keep my HTML, JS, and CSS in sync, I load JS and CSS with a foo=XXXXXX argument. When I push a new build I replace the XXXXXX number with a random number, invalidating the browser’s cache. I was able to replicate all of this with Gulp in under an hour of Googling.

It’s a little faster and easier to configure than Grunt, but not so much so that you should drop whatever you’re doing and replace your Grunt workflow immediately. Still, for new projects or if you’re just getting into task runners, make Gulp your first stop.

There are many reasons to look at cloud hosting, but my top 3 are:

• Cost: Like most government organizations, we pay insane amounts for hardware. Replacing our current box would probably run us ~$10k (our tiniest server size), and we’ll have to replace it in 3-4 years. Not to mention storage costs on “your dad’s SAN”. Not to mention all the human support time. Not to mention the Windows license. Not to mention the freaking power costs.
• Convenience: Try firing up a new server 60 seconds after you thought of it with your IT shop.
• Control: I want to be fast and innovate and try new things. Or at least run Linux on a server like a normal person.

I’ve been hearing great things about Digital Ocean. For $5/month you get 1 core, 512MB, 20GB SSD storage, 1TB of transfer (upload doesn’t count toward that). The thing that really separates them is the SSD. Our IT shop doesn’t believe in SSD’s, but since the first time I dropped an Intel 40GB SSD into a machine at home I refuse to use anything else. The speed difference is jaw-dropping.

I decided to run a little benchmark. I dropped a simple HTML file on Digital Ocean, our old/dying physical web server, and a new local VM that might replace that physical server.

1
2
3
4
5
6
7
8
9

<!DOCTYPE html>
<html>
<head>
<title>Webserver test</title>
</head>
<body>
This is a webserver test page.
</body>
</html>

The three web servers are like so:

• Current Physical Server: 4GB RAM, 2 CPU (4 cores each), Windows Server 2003 32bit, Apache (this is an old box)
• VMWare Instance: 6GB RAM, 2 CPU, Windows Server 2012 64bit, Apache
• Digital Ocean: 512MB RAM, 1 CPU, Ubuntu 13.10, nginx

It isn’t exactly a fair comparison - Apache vs nginx, physical vs virtual, single core vs multicore, SSD vs your dad’s SAN. But that’s kind of the point. I don’t care what the backend is as much as comparing the performance of the backends available to me. Plus, I can’t exactly run nginx on Windows².

I used Apache ab to do a simple benchmark on the test file. It was run on the local network (but not the same machine) of the test boxes so we’re not seeing web latency issues in the test. 10,000 requests were made, 20 concurrently.

1

ab -n 10000 -c 20 http://thehost/ab.html

Here are the result for our old physical server.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

Concurrency Level:      20
Time taken for tests:   16.393 seconds
Complete requests:      10000
Failed requests:        0
Write errors:           0
Total transferred:      4710000 bytes
HTML transferred:       1290000 bytes
Requests per second:    610.01 [#/sec] (mean)
Time per request:       32.786 [ms] (mean)
Time per request:       1.639 [ms] (mean, across all concurrent requests)
Transfer rate:          280.58 [Kbytes/sec] received

Connection Times (ms)
              min  mean[+/-sd] median   max
Connect:        1   14   7.0     14      60
Processing:     4   19   9.9     18     193
Waiting:        2   17   9.9     16     193
Total:          6   33  12.8     34     208

Percentage of the requests served within a certain time (ms)
  50%     34
  66%     37
  75%     38
  80%     39
  90%     43
  95%     49
  98%     57
  99%     68
 100%    208 (longest request)

Not bad. The requests were handled in 16.393 seconds, averaging 610 requests per second and 33ms per request.

Now for the VMWare server.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

Concurrency Level:      20
Time taken for tests:   16.896 seconds
Complete requests:      10000
Failed requests:        0
Write errors:           0
Total transferred:      3740000 bytes
HTML transferred:       1290000 bytes
Requests per second:    591.85 [#/sec] (mean)
Time per request:       33.793 [ms] (mean)
Time per request:       1.690 [ms] (mean, across all concurrent requests)
Transfer rate:          216.16 [Kbytes/sec] received

Connection Times (ms)
              min  mean[+/-sd] median   max
Connect:        1   14   5.2     14      38
Processing:     4   20   7.7     19     158
Waiting:        3   18   7.6     18     155
Total:          8   34  10.3     35     164

Percentage of the requests served within a certain time (ms)
  50%     35
  66%     37
  75%     38
  80%     39
  90%     42
  95%     49
  98%     56
  99%     62
 100%    164 (longest request)

Again, not bad. It’s a tiny bit slower - the requests were handled in 16.896 seconds, averaging 591 requests per second and 34ms* per request. I had hoped to be the same or a little better than the physical box (the physical box is old), but it’s pretty close. There was some weirdness however. The test would only complete 1 of every 3 tries, timing out on the others. This might be an ab bug and not a server issue.

Now for the eye opener.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

Concurrency Level:      20
Time taken for tests:   1.974 seconds
Complete requests:      10000
Failed requests:        0
Write errors:           0
Total transferred:      3620000 bytes
HTML transferred:       1220000 bytes
Requests per second:    5065.36 [#/sec] (mean)
Time per request:       3.948 [ms] (mean)
Time per request:       0.197 [ms] (mean, across all concurrent requests)
Transfer rate:          1790.68 [Kbytes/sec] received

Connection Times (ms)
              min  mean[+/-sd] median   max
Connect:        0    0   0.2      0       5
Processing:     0    4   1.3      3      16
Waiting:        0    4   1.3      3      15
Total:          1    4   1.3      4      16

Percentage of the requests served within a certain time (ms)
  50%      4
  66%      4
  75%      4
  80%      4
  90%      5
  95%      7
  98%      8
  99%      9
 100%     16 (longest request)

I was hoping for similar speeds or maybe a slight improvement with nginx and a SSD. I didn’t think my eyes would pop out. The requests were handled in 1.974 seconds, averaging 5065.36* requests per second and 4ms* per request.

For $5/month I can replace a $10k+ server with all of the associated costs and headaches, be able to do whatever I want with it, and increase performance by ~900%. And how did that test bump the CPU at Digital Ocean?

Hells yeah I want some of that. So much so I’m willing to jump through potentially soul-crushing procurement hoops to get it³.

Nothing sets my propeller-hat spinning faster than nerdgear. When people talk about how they work I decouple with my headphones and listen. Because, somewhere deep down, I’m pretty sure I’m doing it wrong.

Without further lolcats, here’s my toolbox at the start of 2014. Note I’m detailing my home kit, as I work there most of the time and talking about my County working conditions would needlessly depress you.

Hardware

• Lenovo z510 dual-core i5 Haswell laptop, 8GB RAM, SSD for OS
• Dual 22” 1080P monitors
• CM Storm QuickFire mechanical keyboard
• Logitech M570 marble mouse
• Blue Microphones NESSIE microphone
• Logitech C920 HD webcam
• M-Audio AV30 powered monitors
• AKG M80 MkII earcans (big meh - won’t last the year)
• Samsung Chromebook
• Nexus 7 2013 model
• Samsung Galaxy Nexus (which will be crushed under heel when my Verizon contract is up)

We live in an age of insane personal computing power. So insane I downgraded my home rig. I went from a home-built quad-core i5 with discreet graphics and 16GB of RAM to a Lenovo z510 i5 laptop with a dual-core i5, integrated graphics and 8GB of RAM. It isn’t an even swap - Lenny has Haswell i5 with hyperthreading - but it’s a downgrade.

Other than the fact that it sips power, is nearly silent and doesn’t double as a space heater, I never notice the difference. OK, I rarely notice the difference (hi HandBrake!). But overall I’m very happy with this laptop. It stays chained to my desk, lid closed, powering my external monitors. It has a nice 1080p screen, so if I ever unshackled it from my desk I could do serious work at Starbucks. And here’s a free {“ PSA: if you’re on Linux and you’re not a gamer, always get Intel graphics. “}

I’m rocking my usual dual-monitor setup with a mechanical keyboard. One new toy is my Blue Microphones Nessie, which includes some auto-processing onboard (compression etc.). Beyond that not much has changed.

I use my Chromebook about as much as I use anything else. I love that plastic piece of shit. I almost bought a new Acer model with a Haswell processor, but then I caught a rumor of a $250 Samsung coming out with retina-esque resolution later this year.

For tablets I like my Nexus 7. My iPad rarely gets touched. It’s a tad big and heavy for reading, and the screen on my Nexus 7 is crazy good. That’s mostly a reading/entertainment device - people that say they do real work on tablets are probably crazy.

OS

• Kubuntu 13.10 64bit

I’m still rocking along with KDE and Kubuntu. I keep threatening to go to Arch. I installed it on a VM and a netbook just to prove to myself that I could. I like new stuff - I don’t want to have to wait 6 months for a new Kernel or software package and dealing with PPA’s can get old. The idea of a rolling release is very appealing. Maybe I’ll jump when I hit the 4-months-of-13.10 blues.

Dev Stack

• Sublime Text 3 (beta)
• Sublime extensions: Package Control, AdvancedNewFilename, AutoFileName, ColorPicker, DocBlockr, EditorConfig, Emmet, HTML-CSS-JS Prettify, LESS, Markdown Preview, Markdown Editing, Nettuts+ Fetch, Sidebar Enhancements, Sublime Linter
• Kate, Notepad++ (Windows) and nano for quick edits
• Grunt
• Grunt extensions: grunt-contrib-watch, grunt-contrib-uglify, grunt-contrib-concat, grunt-contrib-less, grunt-autoprefixer, grunt-text-replace, grunt-contrib-imagemin
• Git
• Inkscape and GIMP for graphics
• Google Chrome
• Chrome extensions: LiveReload, PageSpeed Insights, REST Console, Screen Capture, Secure Shell, Web Developer

Yep, I’m a web dev. I do some shell scripting in Python and JavaScript (Nodejs), maybe even some bash to fling stuff around sometimes. When I do server side web stuff it’s often PHP, though I’m getting into Nodejs. I also do some DB and server admin, and I do “strategic planning”, which can appear indistinguishable from constipation. But I’m mostly a web dev.

I don’t think there’s a lot here that needs further explanation - if you’re a dev you know most/all of this stuff, if you’re not a dev you don’t care. Sublime Text is still the best editor I’ve run across, and I’m too old to learn Vim + a tiled window manager, though damn if that doesn’t look awesome.

I would like to point a finger and jump up and down about Autoprefixer if you haven’t heard of it. How would you like to never worry about browser prefixes again? Autoprefixer gives you that in a way you can control very precisely. By setting browsers: ['last 2 version', "> 5%", 'ie 8'] I’m prefixing for the last 2 versions of every browser, any browser with above 5% market share, and >= IE 8 specifically.

Everyday stuff I can’t live without

In no particular order:

• Dropbox
• TileMill
• QGIS
• GeoServer
• Postgres
• PostGIS
• PGAdmin III (because psql is bullshit)
• Octopress
• Dolphin, the greatest file manager ever
• SQLiteman
• Bootstrap
• Leaflet
• jQuery
• D3, even though it hurts my brain sometimes
• Lots of Google services (Gmail, Docs, Keep, to name a few)
• Feedly, so I can keep up with you people
• Twitter, so I can mimic a social person

Stuff I want to like in 2014

• A client-side MVC framework. I’ve played with Backbone, Backbone + helpers (because Backbone by itself is a bitch), Angular, Ember, and did the ubiquitous ToDo list app with some others. I’ve tried to like it. I just don’t. I end up with 3x the code and I’ll never be able to share it with co-workers because there’s too much magic overhead. Lots of people like this stuff, so it could just be me. Maybe in 2014 I’ll get it.
• I want to do something with QT. I don’t do desktop apps or C++, so the odds of this happening are not great.
• A serious Nodejs app, complete with a magical framework like Meteor. I’ve been waiting patiently for Python to eat my PHP addiction, but Nodejs gave it a beating for server-side web stuff. Actually ~10,000 beatings, all running concurrently. Maybe this year I’ll finally get off of PHP. I love PHP, but every time I tell somebody I did something in PHP I feel a little dirty afterwards.

Resources

• QOL Dashboard (demo, source)

GIS Day 2013 has arrived!

We’ll be flaunting our geowares on Wednesday, November 20th from 8:30-3:30 at Spirit Square, 345 N. College St., Charlotte NC. There will be fun for all ages and talks and demos going on most of the day. It’s open to the public, so if you’re in the area feel free to swing by any time. I’ll be there doing a few demos and hanging out most of the day. Look for the toe shoes and come say hi.

Sometimes the border around an interactive map on a web page feels a little harsh. If you’re making an infographic or something similar, you might want the map to appear to be “in” the page rather than “on” it, and that’s hard to do with a chopped-off tile ending in a x-pixel border. Maybe you want to fade the map into the background, or maybe do some sort of torn-page effect. Here’s how you could do that.

First you’ll need a

1
2

1
2

Then we'll set up the map sizing and position the overlay in CSS.

map {

height: 100%;
width: 100%;

}
.map-blend {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}

1
2

So far no surprises. Depending on your mapping library of choice, you might need to tack on a

1
2

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

Now your map borders blend with your page background.

<iframe width="100%" height="550" src="http://jsfiddle.net/94aB7/embedded/result,html,css,js/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>

Now for some fun. Let's make a torn-page kind of effect. First we'll need to make an image like that. I did it with [Inkscape](http://inkscape.org/). To paraphrase the process:

+ Make a rectangle the size of your map.
+ Make a smaller rectangle.
+ Convert the smaller rectangle to a path (Path->Object to Path).
+ Go into node editing, select all the nodes, and hit the Node + button a few times until you have a fair amount.
+ Go to Extensions->Modify Path->Jitter Nodes and play with the settings until you get something you like. We're aiming for random-ish.
+ Convert the first rectangle into a path, line up the second over the first, and do a Path->Difference to chop out the middle.

Now set the image to the background of the overlay, using background-size to make it fill the whole

1
2

1
2
3
4
5
6
7
8

Now we have a fun map border.

<iframe width="100%" height="550" src="http://jsfiddle.net/Y4tR6/1/embedded/result,html,css,js/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>

Now for the problems.

First, if you followed the directions exactly you'll quickly notice that the map won't react to the mouse. That's because we stuck a

1
2

1
2

But our good friend Internet Explorer is about to screw us. Only IE11 supports pointer-events on HTML elements. Furthermore, it will kind of lie about it. If you try to test for it via

1
2

Resources

• Github (dev branch)
• D3
• Crosslet

One of several unfortunate parts of North Carolina’s public records law is that it allows government to charge for GIS data, and many local governments do, including us up until a few weeks ago. I’ve heard a number of arguments for this practice, with the common thread between them being they’re all terrible. I’ve been hammering away at this for years, opening up some data here and there as I could. I managed to get it to a that’s something we should look at down the road state, which in government is marginally better than no. But the County decided to change payment processors and the vendor of our online sales app wanted ~$10k to migrate it. At our profit levels that would have taken approximately infinity years to recover that cost. Hence we went from down the road to do it before the old site breaks in October in short order. Victory? I don’t know, but I’ll take it.

And here’s the next cool thing - we’re having a Hackathon! Sorta!

The sorta part is that it isn’t really a thon, just a hacka. You don’t have to camp in a room for 24-48 hours alternately pounding a keyboard and Red Bull. Just sign up by the end of October and be done by November 15th. Teams from 1 to 5 members can participate. You’ll have a chance to display your wares to an audience and a panel of judges at GIS Day in Charlotte on November 20th. There are prizes and the winning apps will be prominently displayed on as many web sites as I can prominently display them on (the Open Mapping page for one). If you are a student, that would look really good on a resume. Hint.

If you are in the area, enter our Hackathon, be awesome, win prizes and get recognized!

I have a ~2,000 line JSON file for some variable meta that looks like this x 82:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

"p1": {
    "db": "population",
    "field": "p1",
    "category": "character",
    "title": "Population",
    "description": "Total Neighborhood Profile Area (NPA) population.",
    "importance": "Total population is a baseline measure that indicates the number of people living in an NPA.   It is used to calculate density, and other per capita data.Trends in population show where the community is growing and where it is decreasing, which can help the City, County and Towns as well as other services providers know where infrastructure and other services may be needed.The 2010 Census reported 308.7 million people in the United States, a 9.7 percent increase from the Census 2000 population of 281.4 million.",
    "tech_notes": "Provides the population based on the 2010 Census for each NPA using Block Group geography. Census block groups are the second smallest unit of measure used in the decennial Census. Only the census block is smaller. A block group is a cluster of census blocks within the same census tract. The average block group contains 39 blocks comprising between 600 and 3,000 people, with an optimum size of 1,500 people.",
    "source": "U.S. Census, 2010",
    "links": "<a href='http://www.census.gov/2010census/data/'>2010 U.S. Census</a><br><a href='http://charmeck.org/city/charlotte/growthstrategy/Pages/default.aspx'>Charlotte-Mecklenburg's growth strategy</a>",
    "style": {
        "breaks": [
            0,
            1500,
            2500
        ],
        "colors": [
            "#D8F2ED",
            "#2ca79e",
            "#154F4A"
        ]
    }
}

This seemed like a powerful-smart idea at the time. How often do you need to edit that kind of stuff?

If you’re on the Quality of Life project, it turns out the answer is every day for a year. And the people doing the editing aren’t developers. Suddenly putting the meta in JSON is a terrible idea. I didn’t have time to fix it back then, but for the next go-round most of this stuff is getting crammed into 82 markdown files. Now a little one-off script to do that is in order.

Normally I reach for Python for this kind of stuff, and that’s fine -

1
2

.each(meta, function(item, i) {
out = “## “ + item.title + “\n”;
out += item.description + “\n\n”;
out += “### Why is this important?\n”;
out += item.importance + “\n\n”;
out += “### About the Data\n”;
out += item.tech_notes + “\n\n”;
out += “_Source: “ + item.source + “\n\n”;
out += “### Additional Resources\n”;
_.each(item.links.split(“
“), function(item){
out += “+ “ + toMarkdown(item) + “\n”;
});
fs.writeFile(“./meta/“ + item.field + “.md”, out, function(err) {
if(err) {
console.log(err);
}
});
});

console.log(“done in “ + Math.abs(start - new Date().getTime()) / 1000 + “ seconds”);

1
2
3
4

I know, I didn't need to use [Underscore](http://underscorejs.org/) just for this, plain old JavaScript would have been fine. Shut up.

One of the great things about Node is you can usually use the same libraries you use in client-side browser scripting. Aside from Underscore (shut up) I'm grabbing a [nifty HTML to Markdown converter](https://github.com/domchristie/to-markdown) for the links. I iterate through the JSON, build a markdown string, and write it to a file named after the variable. It outputs files like this:

Population

Total Neighborhood Profile Area (NPA) population.

Why is this important?

Total population is a baseline measure that indicates the number of people living in an NPA. It is used to calculate density, and other per capita data.Trends in population show where the community is growing and where it is decreasing, which can help the City, County and Towns as well as other services providers know where infrastructure and other services may be needed.The 2010 Census reported 308.7 million people in the United States, a 9.7 percent increase from the Census 2000 population of 281.4 million.

About the Data

Provides the population based on the 2010 Census for each NPA using Block Group geography. Census block groups are the second smallest unit of measure used in the decennial Census. Only the census block is smaller. A block group is a cluster of census blocks within the same census tract. The average block group contains 39 blocks comprising between 600 and 3,000 people, with an optimum size of 1,500 people.

Source: U.S. Census, 2010

Additional Resources

• 2010 U.S. Census
• Charlotte-Mecklenburg’s growth strategy
  ```

That I can give to a non-programmer to edit. And they will. Every day. For a year.

Node reads ~2,000 lines of JSON, loops 164 times (82 times + an internal loop in each), and outputs 82 markdown files, in ~0.05 seconds. Yes, that’s 5 hundredths of a second. I wasn’t exactly in a hurry for this, but daaaaaaaaaammmn.

For general automation/ETL type stuff and one-off scripts like this, I’m adding Node to my arsenal.

Let’s take your basic header->content->footer structure inside of a wrapper.

1
2
3
4
5
6
7
8
9
10
11
12
13

<div class="wrapper-parallax">
    <header>
        <h1>Header</h1>
    </header>

    <div class="content">
        <h1>Content</h1>
    </div>

    <footer>
        <h1>Footer</h1>
    </footer>
</div>

The first thing you’ll need to do is set the position of the header and footer fixed to the top and bottom respectively with a

1
2

1
2

Next we'll give the content a minimum height to avoid having the footer lost in space in our example, a solid background color so it can eat stuff, and a

1
2

1
2

Now we set the wrapper margin off the top and bottom the same size as the header and footer.

And that’s it - simple header and footer parallax effect without JavaScript.

Always remember, you’re special. Just like everybody else.

We GIS professionals are an insular group. That isn’t entirely our fault. When a lot of us started we were the only people in the organization working on Unix workstations. We programmed in bizarre languages like AML and Avenue. We had an enormous rack of books we referenced to make a map, and we thought that was OK. Spatial wasn’t special, but it was other, because it sucked really bad.

But it is mostly our fault. We don’t use weird hardware or odd programming languages any more, and if I’m presented with a solution that involves a bookshelf I immediately start looking for a different solution. But that sense of other still exists in the GIS community. Not only that, we tend to revel in it, like a dog rolling around on a dead thing. We have even invented certifications to separate ourselves from others via placard. When we were pounding away on Sun workstations and were generally a wart on IT’s ass, when we really were other, nobody saw a need for GIS certifications. Now that we are no longer so different, certs are a big deal (or at least a vocal minority wants them to be).

This kind of insular thinking in GIS is starting to harm our profession. When GIS people say “spatial is special”, they are picturing something like this:

The reality is more like this:

Which brings me to my point: My GIS brothers and sisters, we need to get out more.

Last week I attended Blendconf, “A generalist conference featuring 50 diverse speakers sharing ideas and conversations about user experience, design, and web development”. Three days filled with designers, UI/UX professionals, and developers. I didn’t meet a GIS professional or see a single map. And never, ever, have I learned so much in such a short period of time.

The Blendconf organizers get a lot of credit for that - it was a superbly organized and run conference - but the bigger benefit for me was listening and talking to so many people that are not GIS professionals and discovering (a) they are not so different and (b) they have a lot of ideas that can directly impact the challenges GIS professions tackle every day. It’s pretty rare that I attend a GIS conference and see things that blow my mind (FOSS4G being a notable exception), because I live in that world. It has been a couple of days since Blendconf and my mind is so blown I’m still trying to gather the pieces and process it all.

Training budgets are tight, and it might be hard to sell a non-GIS conference to your boss, but make the effort. If you are a cartographer, guess what: you’re really a designer. Learn about design. If you make web sites with maps on them, guess what: you just make websites. Go learn about UI/UX. If you are a GIS programmer, guess what: no such thing. You’re a programmer. Go to programmer meetups in your area and hone your craft. Spatial isn’t special, and that is a great thing.

Get out more, my GIS brothers and sisters. You’ll be better GIS professionals for it.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182

<#
.SYNOPSIS
    Simple HTML report generator for server status, free RAM, and Disk capacity.
    The report info is injected into a web page. If anything is in the red it'll yell
    at you via email.
.NOTES
    Original script from Martin Pugh (@TheSurlyAdm1n), greatly hacked/rewritten/made worse
    by Tobin Bradley (@fuzzytolerance).
#>

[CmdletBinding()]
Param (
    [Parameter(ValueFromPipeline=$true,
        ValueFromPipelinebyPropertyName=$true)]
    [Alias("Servers")]
    [string[]]$Name = (Get-Content ".\servers.txt"),
    [int]$DriveAlertThreshold = 10,
    [int]$RAMAlertThreshold = 512,
    [string]$Credential = "domain\username",
    [string]$PathToCred = ".\",
    [string]$smtpServer = "servername",
    [string]$publishPath = "\\where\to\put\it\index.html",
    [string]$toMail = "hottub@fun.com"
)

Begin {
    $path = split-path -parent $MyInvocation.MyCommand.Definition
    Set-Location -Path $Path

    Function Get-Credentials {
        Param (
            [String]$AuthUser = $env:USERNAME
        )
        $Key = [byte]29,36,18,74,72,75,85,52,73,44,0,21,98,76,99,27

        #Build the path to the credential file
        $CredFile = $AuthUser.Replace("\","~")
        $File = $PathToCred + "\Credentials-$CredFile.crd"
        #And find out if it's there, if not create it
        If (-not (Test-Path $File)) {
            (Get-Credential $AuthUser).Password | ConvertFrom-SecureString -Key $Key | Set-Content $File
        }
        #Load the credential file
        $Password = Get-Content $File | ConvertTo-SecureString -Key $Key
        $AuthUser = (Split-Path $File -Leaf).Substring(12).Replace("~","\")
        $AuthUser = $AuthUser.Substring(0,$AuthUser.Length - 4)
        $Credential = New-Object System.Management.Automation.PsCredential($AuthUser,$Password)
        Return $Credential
    }

    Function Send-Mail {
        param($To, $From, $Subject, $Body, $mailServer)
        $msg = new-object Net.Mail.MailMessage
        $smtp = new-object Net.Mail.SmtpClient($mailServer)
        $msg.From = $From
        $msg.To.Add($To)
        $msg.Subject = $Subject
        $msg.IsBodyHtml = 1
        $msg.Body = $Body
        $smtp.Send($msg)
    }

    Write-Verbose "$(Get-Date): Script begins!"
    $AllComputers = @()
}

Process {
    #Gather all computer names before processing
    $Name = $Name | Sort
    ForEach ($Computer in $Name) {
        $AllComputers += $Computer
    }
}

End {
    #Sort the servers by name, then start getting information
    Write-Verbose "Sort server names and gather Credential information"

    $DiskData = @()
    $date = Get-Date
    $thedate = "<p>Last Ran " + $date + "</p>"
    $errors = $null

    If ($Credential) {
        $Cred = Get-Credentials $Credential
    }

    ForEach ($Computer in $AllComputers) {
        Write-Verbose "Testing $Computer..."
        $ErrorReport = $null
        $DriveReport = $null
        If (Test-Connection $Computer -Quiet) {
            #Set parameters for splat, determine if checking local
            $CredParameter = @{
                ComputerName = $Computer
                ErrorAction = "Stop"
            }
            If ($Computer.ToUpper() -notlike "*$($env:COMPUTERNAME.ToUpper())*" -and $Cred) {
                $CredParameter.Add("Credential",$Cred)
            }

            #Get uptime and memory information
            Try {
                $WMI = Get-WmiObject Win32_OperatingSystem @CredParameter
                If ($WMI) {
                    $Uptime = New-TimeSpan -Start $($WMI.ConvertToDateTime($WMI.LastBootUpTime)) -End (Get-Date)
                    $UpText = "<td>Up for $($Uptime.Days)d, $($Uptime.Hours)h, $($Uptime.Minutes)m</td>"
                }
                Else {
                    $UpText = "<td class=""up"">Up</td>"
                }
                #Get disk information and pretty up the data
                $Disks = Get-WmiObject Win32_LogicalDisk -Filter "DriveType=3" @CredParameter | Select `
                    @{LABEL="Server";EXPRESSION={$Computer}},
                    @{LABEL="DriveLetter";EXPRESSION={$_.DeviceID}},
                    @{LABEL="Size";EXPRESSION={[int]("{0:N0}" -f ($_.Size/1gb))}},
                    @{LABEL="FreeSize";EXPRESSION={[int]("{0:N0}" -f ($_.FreeSpace/1gb))}},
                    @{LABEL="perUsed";EXPRESSION={[int]("{0:N0}" -f ((($_.Size - $_.FreeSpace)/$_.Size)*100))}},
                    @{LABEL="perFree";EXPRESSION={[int]("{0:N0}" -f (100-(($_.Size - $_.FreeSpace)/$_.Size)*100))}},
                    VolumeName
                $DiskData += $Disks

                # check the ram
                $theram = ([math]::round($WMI.FreePhysicalMemory / 1024))
                if ($theram -ge $RAMAlertThreshold) {
                    $FreeRAM = "<td class=""text-right"">$theram MB</td>"
                }
                else {
                    $FreeRAM = "<td class=""down text-right"">$theram MB</td>"
                    $errors += "Low free RAM on $Computer.<br>"
                }
            }
            Catch {
                Write-Verbose "Error encountered gathering information for $Computer"
                $ErrorReport = $Error[0]
                $Error.Clear | Out-Null
            }

            #Create the simple Status table
            If ($ErrorReport) {
                $UpText = "<td class=""down"">WMI Error</td>"
                $DiskHTML = "<div class=""red"">$($Error[0])</div>"
            }
            ElseIf ($Disks) {
                $DiskHTML = $null
                ForEach ($Disk in $Disks) {
                    If ($Disk.perFree -le $DriveAlertThreshold) {
                        $FreeClass = "red"
                        $errors += "$Computer has less than 10% free space on drive $($Disk.DriveLetter) <br>"
                    }
                    Else {
                        $FreeClass = "free"
                    }
                    $DiskHTML += "<div class=""green"" style=""width:$($Disk.perUsed)%"">$($Disk.DriveLetter) $($Disk.Size)gb</div><div class=""$FreeClass"" style=""width:$($Disk.perFree)%"">$($Disk.FreeSize)gb ($($Disk.perFree)%)</div>`n<div style=""clear:both""></div>"
                }
            }
            Else {
                $DiskHTML = ""
            }
            $DetailHTML += "<tr><td>$Computer</td>$UpText $FreeRAM<td>$DiskHTML</td></tr>`n"
        }
        Else {
            $DetailHTML += "<tr><td>$Computer</td><td class=""down"">DOWN</td><td class=""down""></td><td class=""down""></td></tr>`n"
            $errors += "$Computer is down.<br>"
        }
    }

    # Insert Stuff into index.html
    (Get-Content .\index.html) -join "" | foreach{$_ -replace "<!-- Server Report -->(.*?)<!-- End Server Report -->","<!-- Server Report -->$DetailHTML<!-- End Server Report -->"} | Set-Content ./index.html
    (Get-Content .\index.html) -join "" | foreach{$_ -replace "<!-- Updated -->(.*?)<!-- End Updated -->","<!-- Updated -->$date<!-- End Updated -->"} | Set-Content ./index.html

    # Copy index.html to web server
    Copy-Item -Path .\index.html -Destination $publishPath

    #Send email if shit went bad
    if ($errors) {
        Send-Mail -To $toMail -From "noreply@noreply.com"  -Subject "He's dead Jim!" -Body "<h1>Oh shit.</h1> <p> $errors </p> <p>Head to http://maps.co.mecklenburg.nc.us/bones for more information.</p>" -mailServer $smtpServer
    }

    Write-Verbose "$(Get-Date): Script completed!"
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
    <style>
        img {
            max-width: 100%;
        }
        header {
            margin: 75px 0 40px;
        }
        footer {
            background: #d42127;
            margin-top: 20px;
            box-shadow: 0 -2px 10px #666;
        }
        nav {
            box-shadow: 0 2px 10px #666;
        }
        td, td.div { white-space: nowrap; }
        td.div { overflow: hidden; }
        td.up { background-color:#32CD32; }
        td.down { background-color:#B22222; }
        div.red { background-color:#B22222;
          float:left;
          text-align:right;
        }
        div.green {
            background-color:#32CD32;
            float:left;
        }
        div.free {
          background-color:#7FFF00;
          float:left;
          text-align:right;
        }
        span.green {
            background: #32CD32;
        }
        span.free {
            background: #7FFF00;
        }
        .up, .down, .red, .green, .free {
            padding: 5px;
        }

    </style>
</head>

<body>
    <div class="container">
        <header class="text-center">
            Updated <!-- Updated --><!-- End Updated -->
        </header>
        <div>
            <h2>Server Report</h2>
            <table class="table">
                <thead>
                    <tr>
                        <th>Server</th>
                        <th>Status</th>
                        <th class="text-right">Free Ram</th>
                        <th style="width: 60%">Disk Status (
                            <span class="green">Capacity</span>/
                            <span class="free">Free</span>)</th>
                    </tr>
                </thead>
                <tbody>
                    <!-- Server Report --><!-- End Server Report -->
                </tbody>
            </table>
        </div>
    </div>
</body>

</html>

Resources

• Martin Pugh’s Original Script

There was some grumbling from the locals (read: GIS people that like their websites to look like ArcMap), but I got positive feedback from non-GIS junkies. Which is all fine and good, but for public facing websites anecdotes are no substitute for analytics.

• Last full month with the old site: 12,072 visitors
• Last 30 days with the new site: 16,088 visitors

+33% Visitors!

All of the other stats you care about - page views (virtual ones via pushstate - it’s a SPA), return visitors, etc. - are all trending up. There was no advertising push other than a tweet or two on our corporate twitter account and a post on this blog, neither one of which is exactly making it rain, and those events occurred before the last 30 days of stats. I did some checking with different time periods for the old GeoPortal and the stats are honest. And the new version has only been out ~45 days!

Simple works.

In other news, I just updated it to Bootstrap 3RC2 and switched to typeahead.js for the autocomplete (mad props to @brymcbride for some code I lifted for that). The source code is up on Github.

<sup>1</sup> At least I think so. I don’t wear skinny jeans, carry a MacBook Air, or have a reserved seat at a local Starbucks, so take my UI advice with a grain of mocha. But I did read some shit.

Whoa. Browser support for this is crap right now (current Firefox and IE releases are out), but…whoa. This could be incredibly handy down the road.

1

-webkit-filter: none

1

-webkit-filter: hue-rotate(180deg) invert(100%) saturate(30%)

1

-webkit-filter: hue-rotate(50deg);

1

-webkit-filter: grayscale(100%);

1

-webkit-filter: sepia(100%);

1

-webkit-filter: blur(2px);

1

-webkit-filter: brightness(115%);

1

-webkit-filter: invert(100%);

1

-webkit-filter: saturate(3);