It isn’t just that they’re hard to code. And by hard to code, I mean really hard. They’re like ferreting a snowflake across the Sahara while trying to figure out what The Fountain was about hard. It’s more this: it’s almost impossible to create a data maintenance app that people want to use. Data maintenance isn’t fun. By the time people open your app they are already pissed off. To create a data maintenance app that people actually want to use is something I had written off years ago¹.

Which is why what MapBox has accomplished with iD is so damn amazing. It makes you want to use it. It’s that good.

This is going to be a huge boon for OSM. After using iD, if I were king I’d dump any number of our layers and vendor maintenance packages and have our staff just start editing OSM via iD and using it as our basemap. It’s that good.

The iD editor itself is open source software (WTFPL licensed), and it is going to change the way we build web sites.

No jQuery. No Bootstrap. No Backbone. No Leaflet or OpenLayers or other mapping libraries.

It’s D3.

When I can free up some time I’m going to dig into the code and try to ferret out the genius. Mad props to MapBox. iD is freaking awesome.

Resources

• Trello
• My Bootstrap/Leaflet template
• Sublime Text - Emmet
• Sublime Text - Fetch
• The best Sublime Text tutorial I’ve found is this one by Nettuts+.

The big 4 for web performance are (in this order):

1. gzip text before it leaves your server. All of that CSS, JavaScript, JSON, SVG, etc. should be squished before it travels across the wire.
2. Smart caching. The fastest resource request is the one that never happens.
3. Image optimization. Images are still the biggest pipe suck for the majority of sites.
4. Concatenate and compress. Fewer HTTP requests and smaller files sizes are better.

Chris Coyier gave one of his usual amazing talks on just this subject.

The first two problems are part of your server configuration. If you’re on Apache, grab the .htaccess file in html5boilerplate and put it in your httpd.conf file. It’ll fix the first two problems and a bunch of others. The last two, ye developer, are in your court.

Image Optimization

Image optimization can save a remarkable amount of bandwidth and cut down page load time significantly. The best tool I’ve used is Trimage (Linux), which is lossless, handles PNG and JPG, and can be automated via the command line as part of your build process. You only have to run it on an image once - running it successive times on the same image won’t do anything (hence lossless). As such I’ll usually comment it out of my build processes once the application is mature. Trimage was inspired by ImageOptim on OS X which you can use there; I haven’t found anything I like on Windows yet.

Concatenation and Minification

You’re doing two things here. The first is reducing the number of HTTP requests. The number of simultaneous requests to a server varies by the browser, and currently range from 2 to 8. Once you hit that number the requests have to get in the queue, which slows page load. The second thing you are doing is minifying the concatenated file, removing any unnecessary characters/white space from the code. That lowers the size of the file over the network.

A common misunderstanding is that you don’t have to minify code if it is getting gzip’d before it leaves the server, as that will smush it up for you anyway. That is not the case; you should do both.

Original: 28,781 bytes
Minified: 22,242 bytes
Gzipped: 6,969 bytes
Min+Gzip: 5,990 bytes

Side Note: Invalidating Cache on Individual Files

You have far-out expiry dates for your JavaScript. Congrats! You just changed your HTML and JavaScript and now the two are out of sync and your site is busted. Balls!

There are various ways to deal with this. My preferred method is adding a phony GET parameter to the request.

1
2

<link rel="stylesheet" href="css/main.css?foo=2735">
<script src="js/main.js?foo=2735"></script>

HTML isn’t cached, so the browser fetches it every time. When you change the GET argument on the URL, the browser will see a different URL from the one it got last time, invalidating the cache and fetching the file. This isn’t the only way to do it, and there is some controversy about this approach. It always seems to work though, and it is what Stack Overflow itself uses. Your CSS and JavaScript files of course completely ignore the argument. I usually use foo, short for foobar, which is generally synonymous with a placeholder or garbage.

How I Do It

I do this in two stages. I do concatenation as part of my iteration process so I can point the HTML links directly to what the final location will be. I use Guard for this, which also preprocesses my SASS into a single CSS file.

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

# sass to css
guard 'sass', :input => 'assets/sass', :output => 'public/css', :line_numbers => true, :all_on_start => true

# javascript concatenation to js/main.js
guard :concat, type: "js", files: %w(vendor/bootstrap/bootstrap-tooltip vendor/bootstrap/bootstrap-modal vendor/bootstrap/bootstrap-transition vendor/bootstrap/bootstrap-button vendor/bootstrap/bootstrap-popover vendor/bootstrap/bootstrap-alert vendor/jquery-ui-1.10.0.custom.min vendor/jquery.ui.slider.labels vendor/jquery.placeholder vendor/jquery.debounce plugins map page), input_dir: "assets/scripts", output: "public/js/main"

# live reload
guard 'livereload' do
  watch(%r{public/js/.+\.(js)$})
  watch(%r{public/css/.+\.(css)})
  watch(%r{public/.+\.(html)$})
end

I don’t minify at this stage. Debugging minified CSS and JavaScript during iteration is a pain in the ass. Instead my final build process including minification via YUI-Compressor, invalidating cache for CSS and JavaScript via text replacement, and image optimization. As I split time between Linux and Windows, I have separate build scripts for both. If you are using Sublime Text, you can differentiate your build process by platform like this (build files in your Packages/User folder with a .sublime-build extension):

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

{
    "shell": "true",
    "selector": [ "Guardfile" ],
    "linux":
    {
        "cmd": [ "./build.sh" ]
    },
    "windows":
    {
        "cmd": [ "./build.ps1" ]
    }
}

Windows gets a PowerShell Script and Linux gets a bash script.

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

#! /bin/bash

# Generate Random Number for Cache Busting
rand=$RANDOM

# Minify CSS and JavaScript
yui-compressor --type css -o public/css/main.css public/css/main.css
yui-compressor --type js -o public/js/main.js public/js/main.js

# Bust cache for anything with foo argument
sed -i "s/?foo=[0-9]*/?foo=$rand/g" public/index.html

# Optimize Images
trimage -q -d public/images

1
2
3
4
5
6
7
8
9

# Generate Random Number for Cache Busting
$rand = Get-Random

# Minify CSS and JavaScript
java -jar ../yuicompressor-2.4.7.jar --type css -o public/css/main.css public/css/main.css
java -jar ../yuicompressor-2.4.7.jar --type js -o public/js/main.js public/js/main.js

# Bust cache for anything with foo argument
(Get-Content public/index.html) | ForEach-Object { $_ -replace "^?foo=[0-9]*", "foo=$rand" } | Set-Content public/index.html

These scripts basically do the same thing. A random number is generated, the CSS and JavaScript files are minified, and some cache busting takes place in index.html via some regex text replacement. The only difference is the bash script also optimizes images. Once the build script is run, the application is ready for deployment on a web server.

Easier Than It Looks

This looks like a lot of work, and setting it up the first time can be. After that it’s a piece of cake. When I want to work on an app I fire up Guard, which does my livereload and preprocessing/concatenization. When I’m ready to deploy, I hit CTRL-B in Sublime Text and it minifies, does cache invalidation, and optimizes images. Getting the iteration and build processes set up for a new project takes minutes. And the most important thing: it’s automated. For a busy dev, no matter how compelling the benefits, if you can’t automate it, it probably isn’t going to happen.

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

# sass to css
guard 'sass', :input => 'assets/sass', :output => 'public/css', :line_numbers => true, :all_on_start => true

# This will concatenate the javascript files specified in :files to js/main.js
guard :concat, type: "js", files: %w(vendor/bootstrap/bootstrap-tooltip vendor/bootstrap/bootstrap-modal vendor/bootstrap/bootstrap-transition vendor/bootstrap/bootstrap-button vendor/bootstrap/bootstrap-popover vendor/bootstrap/bootstrap-alert vendor/jquery-ui-1.10.0.custom.min vendor/jquery.ui.slider.labels vendor/jquery.placeholder vendor/jquery.debounce plugins map page), input_dir: "assets/scripts", output: "public/js/main"

# live reload
guard 'livereload' do
  watch(%r{public/js/.+\.(js)$})
  watch(%r{public/css/.+\.(css)})
  watch(%r{public/.+\.(html)$})
end

Resources

• Guard is Your Best Friend
• Trimage
• Web App Development LifeCycle - Credit goes to Paul Irish
• Quality of Life Dashboard on Github

Idiot that I am, I had no idea these Free Friday Tech Talks were even happening. It’s a great venue with a lot of really smart attendees (best Q/A session ever). If you’re in the Charlotte area and you haven’t checked it out yet, I highly recommend it.

March 26th 8:30am - 3:30pm: Charlotte Data Day: Using Data for Community Development

You need to register for it, but it’s free. I’ll be there at the Mecklenburg County table talking about open data and tools and whatnot. It’ll be at UNC Charlotte Center City campus, 320 E. Ninth St., in uptown Charlotte

March 29th 12:00pm: Friday Tech Talk: Mecklenburg County GIS Programmer Tobin Bradley

I’m doing a tech talk at Skookum Digital Works about the Quality of Life Dashboard but also about development, GIS and government in general. No slides, just nerd talk. It’s free but you need to register.

April 18th All Day: DIGI 2020

The 4th annual regional technology summit. Registration required, but it’s free. I’ll be hanging out at Mecklenburg County’s table from time to time.

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

// Global variable - cringe
var visiblePopover;

// enable popovers - all of mine in this instance have a class of .hov
$(".hov").popover({ 'container': 'body' });

// only allow 1 popover at a time
// all my popovers hav
$('.hov').on('click', function(e) {
    // don't fall through
    e.stopPropagation();
    var $this = $(this);
    // check if the one clicked is now shown
    if ($this.data('popover').tip().hasClass('in')) {
        // if another was showing, hide it
        visiblePopover && visiblePopover.popover('hide');
        // then store the current popover
        visiblePopover = $this;
    } else {
        // if it was hidden, then nothing must be showing
        visiblePopover = '';
    }
});

// hide all popovers if any non-popover part of the body is clicked
$("body").on('click', function () {
    $(".hov").popover('hide');
    visiblePopover = '';
});

Check it out over here. Click on a bubble at the top, then click on a different bubble or somewhere else on the page.

Q: What’s the worst code you’ve seen recently?
A: My own.

A little while back I did a screencast on the Ubersearch autocomplete thing, and when I dug into my old code I did a lot of frowning. People describe bad code as having a smell, but 3 cats have burned out my olfactory sense. Bad code gives me visual hallucinations. When I see bad code, I see this.

My bad code totem animal is an anteater.

I think if you can always say the worst code you’ve ever seen is the code you wrote 6 months ago, you’re a good programmer. I wrote this code years ago. I saw a giant anteater when I looked at this code.

Part of me wanted to just point people to CartoDB, which is like the Cadillac of this kind of stuff, but people still seem to be interested in this project, and there is something to be said for a really simple solution like this (the dependencies for CartoDB would choke a pony). So, I scrubbed it and tossed the new release on GitHub. Among the changes are:

• I renamed it. The old title had REST in it, and REST it ain’t. At the time I kinda thought it was, at least in the common-language sense. Thanks to the many folks that helped educate me on this point.
• Much, much, much cleaner code. The code reduction I’d guess is ~40%.
• JSON or JSONP. That’s it. I can count the number of times I’ve used the myriad other return formats on no hands. You can still return JSON or GeoJSON as a field from a geometry column ala fields=st_asgeojson(the_geom) as geojson and then interpret that as JSON via jQuery.parseJSON(the_json_value) or something similar.
• It uses PHP’s json_encode rather than my fugly recordset-to-JSON loop. It’s faster and does a perfect job of escaping junk in the return. You can get a record count via the_json_return.length.
• Some sensible defaults so you don’t have to pass a bunch of empty arguments all the time. Curse my stupid brains.
• Put in ST_ for the geometry functions so you don’t have to do the legacy SQL thing in PostGIS 2.0.
• More friendly to different projections and geometry column names. I had 2264 and the_geom hard coded in a lot of places.
• Much, much, much better documentation. I wasn’t doing anybody any favors with my old documentation, which probably should have come with gratis Tequila. I’m doing MarkDown conversion in JavaScript, so all the service docs are in MarkDown and the initial index.html content area is actually just GitHub’s README.md. I thought this was clever. It also is using a much prettier Bootstrap layout.

Enjoy, and patches are always welcome.

The first step is locating TileMill’s index.js. On Ubuntu it is sitting at /usr/share/tilemill. On Windows it’ll depend on whether you’re 32bit or 64bit, but assuming you put it in the default place it’ll be something like C:\Program Files (x86)\TileMill-v0.10.1\tilemill. Because TileMill’s node isn’t in the system path on Windows, before you do anything you’ll need to be in that folder.

1

cd "C:\Program Files (x86)\TileMill-v0.10.1\tilemill"

Having node execute index.js by itself just launches TileMill, but there are other command options, including export. To see the full list of commands:

1

.\node.exe .\index.js --help

1

/usr/share/tilemill/index.js --help

That will give you:

1
2
3
4
5
6
7

Usage: /usr/share/tilemill/index.js [command] --help for a list of options.
Available commands are:
  start:   start application
  core:    start ui server
  export:  export project
  test:    test server process
  tile:    start tile server

export is what we’re interested in. Firing that command without any arguments will give you your options.

1

.\node.exe .\index.js export

1

/usr/share/tilemill/index.js export

You’ve got a lot of options.

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

Usage: /usr/share/tilemill/index.js <command> [options...]
Commands: export project
  export <project> <export>

Options:
    --format=[format]                 Export format (png|pdf|svg|mbtiles|upload|sync). (Default: undefined)
    --bbox=[xmin,ymin,xmax,ymax]      Comma separated coordinates of bounding box to export. (Default: undefined)
    --minzoom=[zoom]                  MBTiles: minimum zoom level to export. (Default: undefined)
    --maxzoom=[zoom]                  MBTiles: maximum zoom level to export. (Default: undefined)
    --width=[width]                   Image: image width in pixels. (Default: 400)
    --height=[height]                 Image: image height in pixels. (Default: 400)
    --url=[url]                       URL to PUT updates to. (Default: undefined)
    --log                             Write crash logs to destination directory. (Default: undefined)
    --quiet                           Suppresses progress output. (Default: undefined)
    --scheme=[scanline|pyramid|file]  Enumeration scheme that defines the order in which tiles will be rendered. (Default: "scanline")
    --job=[file]                      Store state in this file. If it exists, that job will be resumed. (Default: false)
    --list=[file]                     Provide a list file for filescheme render. (Default: false)
    --metatile=[num]                  Metatile size. (Default: undefined)
    --scale=[num]                     Scale factor (Default: undefined)
    --concurrency=[num]               Number of exports that can be run concurrently. (Default: 4)
    --files=[path]                    Path to files directory. (Default: "/home/gandalf/Documents/MapBox")
    --syncAPI=[URL]                   MapBox API URL. (Default: "http://api.tiles.mapbox.com")
    --syncURL=[URL]                   MapBox sync URL. (Default: "https://tiles.mapbox.com")
    --syncAccount=[account]           MapBox account name. (Default: "")
    --syncAccessToken=[token]         MapBox access token. (Default: "")
    --verbose=on|off                  verbose logging (Default: "on")
    --config=[path]                   Path to JSON configuration file.

Now you can automate tile generation. A batch file for Windows would look something like this.

1
2

cd "C:\Program Files (x86)\TileMill-v0.10.1\tilemill"
.\node.exe .\index.js export meckbase C:\tile-depot\meckbase.mbtiles --format=mbtiles --bbox="-81.8949,34.7032,-79.8075,35.8768" --minzoom=9 --maxzoom=11 --metatile=8

• For the project argument, you’re giving the name of the project folder in MapBox\project, which in this case is meckbase. Do not put project.mml here.
• metatile is optional, but if you have a healthy amount of RAM bumping it up from the default 2 will make things go faster. It will also reduce rendering problems around tile edges.
• It assumes MapBox\project is in the default install location. If you put it somewhere else, use the --files=c:\path_to_project option. If you get this wrong the command will give you a can’t find project message.

• They take an astounding amount of time. You tie up multiple people for man-years doing this stuff. You end up in the worst kind of meeting ever created - a bunch of tech-hipsters sitting around a table word-smithing a document - again and again and again. Because you are the only one that has heard about the Google Docs, 78 versions of the draft will be sitting in your inbox at any given time. You spend more time talking about doing things than it would take to actually do the things.
• They aren’t useful. Nobody is going to read it. You openly acknowledge as much when you slap an executive summary on the front. But you’re kidding yourself there too. The executives aren’t going to read the summary page. Nobody is going to read it. You could have dumped 40 pages from the Corporate Bullshit Generator in a text file for all the good it will do. About a week after it is done and the mock celebrations are over, you will send it to the place where documents (and innovation and collaboration and dreams) go to die - SharePoint. And that will be that.

So. Guess who got put in a group tasked with creating a new strategic plan?

But I’m in a group with some smart folks. And I have a plan. I haven’t told them the plan yet. But it goes something like this: chuck the 40+ page document. Just forget it. What you want to make is something like this:

My mock draft.

You don’t need a strategic plan. You need a dashboard. An interactive dashboard that you can see on your computer, you can print on a piece of paper, you can put on the giant TV you wish you had in your common area. It can go everywhere. It’s easy to understand. One page. Every quarter, take an hour and update the sucker. Everybody is on the same page. It shows where you are going. It shows what you are doing. A strategic plan than is actually useful. Booyah. Done. If you really want to make a 40+ page document in addition to this to stick on SharePont for historic or masochistic purposes, feel free. Just don’t tell me about it.

CAN I PULL OFF THIS MAD STROKE OF GENIUS?! Ah, no, probably not. But the idea that I could is going to get me through the next 6 months without clearing out my liquor cabinet.

^*Plus, I kinda wanted an excuse to fool around with D3. Alas, this ended up not being the project for it. I made the SVG in Inkscape and used a tiny bit of jQuery and Bootstrap to do popovers. Sigh.

Resources

• Slideshow

The 2013 NC GIS Conference on February 7-8 is coming up fast. This is one of the best conferences I go to, regularly drawing 900+ attendees with lots of great speakers from the region and around the country. This is going to be an especially big year for the conference. How big?

Douglas Effin’ Crockford

That’s right, the eminent JavaScript guru, developer of JSON and JSLint, author of the best programming book on any language ever - JavaScript: The Good Parts - is giving two talks at the conference. One is an hour long session titled Programming Style and Your Brain, and the other is during a regular 3-presenter session¹ titled JavaScript, JSON, and Other Good Parts.

Aside from being a great conference, this is also one of the most affordable conferences you’ll find. Registration before January 16th is only $125, and goes up to $165 after. That’s, like, 4 Starbucks visits and a movie popcorn. It is also in Raleigh NC, and there’s a really good chance you’ve never had a reason to go there before!²

See you there!

¹ That session also has a talk by me on HTML5. The idea that I’m giving a presentation in the same session as Crockford makes me simultaneously beam with pride and want to change my underwear, with the latter gaining the upper hand as the conference approaches.

² Particularly in February. Bring a coat.

…which isn’t terribly exciting, seeing how as it hasn’t changed a whole lot in months. But there data is there now and the beta label is off, so that’s something. Feel free to grab the code on GitHub.

Looking for a plain-old JavaScript way to do it, I stumbled onto how to do it in pure CSS.

As it turns out, a CSS pseudo-class is able to effect the styling of descendant (li a) and adjacent (li > a or li + a) selectors. That’s kind of awesome. The structure of the image header is:

1
2
3
4

<div class="logo-image">
       <img src="/images/logo.png" width="122" height="122">
       <img src="/images/quote.png" width="112" height="28" id="logo-quote">
</div>

I made the outer div :hover pseudo-class change the visibility of the quote, which is otherwise hidden.

1
2
3
4
5
6
7
8
9

.logo-image:hover #logo-quote {
    display: inline-block;
}
#logo-quote {
    position: absolute;
    top: 20px;
    left: 50%;
    display: none;
}

One downer here - there doesn’t appear to be a way to apply a CSS transition to the display property of an element. It just pops on, which is kinda ugly. To get it to fade in and out, you can modify the element’s opacity rather than its display property.

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

.logo-image:hover #logo-quote {
    opacity: 1;
}
#logo-quote {
    position: absolute;
    top: 20px;
    left: 50%;
    opacity: 0;
    -webkit-transition: opacity 0.30s ease-in-out;
    -moz-transition: opacity 0.30s ease-in-out;
    -ms-transition: opacity 0.30s ease-in-out;
    -o-transition: opacity 0.30s ease-in-out;
    transition: opacity 0.30s ease-in-out;
}

Now that I know how to do that, there are quite a few things I’ve built over the years that I could have done just with CSS rather than by leveraging JavaScript. The next time a similar problem approaches, I’ll be able to take a different approach.

It’s my usual minimal-style layout, with the header on the side (responsively moves to the top), and I got to fiddle about with an icon font for the first time, which was very nearly fun. Here are a couple more tips if you are considering moving to Octopress:

Get Rid of Paging/Previous/Next

One of the bummers with Jekyll/Octopress is that the default paging system you find on blogs - that previous/next post and paging stuff - means you have to essentially rsync your entire site every time you make a post. For me that’s ~600 files over a slow sftp connection.

Well…that’s bullshit. I took all of the paging links out. This blog isn’t a diary - one thing doesn’t naturally lead to the next. As a result, when I make a new post I only need to upload it and replace the main index.html, the archives index.html, the sitemap.xml and atom.xml. Much quicker.

Cleaning Up [code] Stuff from Legacy Wordpress Plugins

I had a lot of this crap floating around. I managed to automate cleaning most of this with my pal sed.

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

#!/bin/sh
sed -i 's/\[css\]/``` css/g' *.md;
sed -i 's/\[\/css\]/```/g' *.md;
sed -i 's/\[javascript\]/``` javascript/g' *.md;
sed -i 's/\[\/javascript\]/```/g' *.md;
sed -i 's/\[html\]/``` html/g' *.md;
sed -i 's/\[\/html\]/```/g' *.md;
sed -i 's/\[python\]/``` python/g' *.md;
sed -i 's/\[\/python\]/```/g' *.md;
sed -i 's/\[php\]/``` php/g' *.md;
sed -i 's/\[\/php\]/```/g' *.md;
sed -i 's/\[sql\]/``` sql/g' *.md;
sed -i 's/\[\/sql\]/```/g' *.md;
sed -i 's/\[sourcecode\]/```/g' *.md;
sed -i 's/\[\/sourcecode\]/```/g' *.md;
sed -i 's/\[crayon language="javascript"\]/``` javascript/g' *.md;
sed -i 's/\[\/crayon\]/```/g' *.md;
sed -i 's/\[bash\]/```/g' *.md;
sed -i 's/\[\/bash\]/```/g' *.md;

Eliminating a Bunch of 404’s

On my Wordpress blog I had posts going to /, like http://fuzzytolerance.info/post-1. Octopress wants to stick that in a /blog folder, and I tend to agree with it - I don’t want 500+ folders littering up root. But I don’t want all of the old links to 404, tossing my tiny bit of Google Juice into the wind. Here I had to dip deeper into mod_rewrite than I generally like, but it works.

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

RewriteEngine On
RewriteBase /

# do not do anything for already existing stuff
RewriteCond %{REQUEST_FILENAME} -f [OR]
RewriteCond %{REQUEST_FILENAME} -l [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule .+ - [L]

# check if the files exist in /blog, if so go there
RewriteCond %{DOCUMENT_ROOT}/blog/%{REQUEST_URI} -f [OR]
RewriteCond %{DOCUMENT_ROOT}/blog/%{REQUEST_URI} -l [OR]
RewriteCond %{DOCUMENT_ROOT}/blog/%{REQUEST_URI} -d
RewriteRule .+ blog%{REQUEST_URI} [L]

Basically:

1. Check to see if the file/directory exists. If it does, bugger off.
2. If it didn’t exist - like maybe it’s a link to the old wordpress http://fuzzytolerance.info/post-1, check and see if it exists at http://fuzzytolerance.info/blog/post-1. If it does, go there and bugger off.
3. If check 1 and 2 fail, it falls back to the default 404. And bugger off.

Jekyll is the engine behind Github Pages and is a static-site generator. That’s right - no PHP, .NET, Python, RoR, etc. - plain old HTML. You set up a HTML/CSS/JavaScript template, write your content in HTML or Markdown, and then generate your whole site. Rsync up to your server, Bob’s your uncle. No databases or server-side content required. Octopress is a blogging framework that sits on top of Jekyll and adds a lot of convenience.

I have been pondering moving this blog to Jekyll ever since I read this post from Development Seed. Right now it is using the default Octopress template, which is really nice and fully responsive, but it will soon be replaced with a (uglier) version of my own creation. There will probably be some bugs I need to smooth out here and there as well.

I really like Octopress so far. Writing posts in Sublime Text 2 in Markdown is kind of awesome, and being straight HTML it’s crazy quick. I thought I’d do a quick Wordpress to Octopress post to capture a few tricks before I forget them entirely.

Converting Wordpress Posts

There are a number of ways to get from Wordpress to Jekyll. I found a lot of posts that recommended Exitwp, but I found that method ate iframes to video content. I ended up going with Jekyll’s built-in Wordpress export file converter:

1

ruby -rubygems -e 'require "jekyll/migrators/wordpressdotcom"; Jekyll::WordpressDotCom.process("wordpress.xml")'

Fix Links

If you have to fix a bunch of links, let me introduce you to my friend sed. sed is one of those freaky commands that doesn’t appear to run in normal space-time. I had it process 500+ text files, and I swear it was done before I pressed the enter key.

1

sed -i 's/oldurl.com/newurl.com/g' *.md

Set comments: true

The conversion process left all of my posts with comments off (or more specifically no comment yaml). Say hi to sed again. This sticks comments: true on the second line of every markdown file.

1

sed -i '2icomments: true' *.md

ZSH Problems

As it turns on, zsh doesn’t like some rake commands. To fix that, drop this in ~/.zshrc:

1

alias rake="noglob rake"

Captions

This was the only real pain in the ass. Wordpress adds a funky [caption blah blah] thing to captioned images, and I couldn’t figure out a great way to filter those out and convert them. This is the only thing I had to edit by hand.