Breaking Down Amazon's Mega Dropdown

Love it.

How to Redirect Tumblr Post URLs After Migrating a Blog

TL;DR: For the solution, click here.

Tumblr has a great feature that lets you create multiple blogs beneath a single umbrella account. However, your primary blog—i.e., the one you create first—is special.

How so?

  • When you <3 someone else’s Tumblr post, the action is associated with your primary blog
  • You can only follow other blogs with your primary blog

There are some other details, outlined here, but the above are the ones I care about most. I couldn’t display my “likes” in the sidebar if this were a secondary blog.

Critically, you cannot change which blog acts as your primary blog, so if you mess up (like I did) you’re kinda stuck. Kinda.

Tumbeasts

All of my Pulitzer-winning blog content was stuck in a puny secondary blog. Ideally I would have been able to delete my primary blog and promote my secondary blog. But since that isn’t possible, for what I assume are architectural reasons, I had to come up with a Plan B, otherwise:

Tumbeasts

Plan B: Move the posts (duh)

Here is the plan I drafted:

  1. Copy & paste the post titles and content from my secondary blog to my primary blog
  2. Publish the posts on the primary blog
  3. Edit the posts and change the publish dates to match when they were originally published
  4. Re-point my custom domain (accidentalhacker.com) to my primary blog
  5. Create Tumblr redirect pages for each of the old post URLs so that they redirect to the new post URLs

Solid plan. Everything worked smoothly…until step 5. When I tried to redirect my old post URLs like so:

Tumblr redirect page

I got the following error message:

No redirect for you!

Ack! Looks like Tumblr is being protective of their /post/1234 URL format. They don’t want you to define a static page (or redirect) whose URL could conflict with the URL of a regular Tumblr post. Understandable.

But now I have dilemma. All the inbound links (and Google SERPs) point to the old Tumblr post URLs, which I cannot redirect on the server. They generate 404s from the new blog now. Editing the old posts does no good because the accidentalhacker.com domain name no longer points there.

JavaScript, FTW

To solve the problem, I edited my primary blog’s theme HTML (via the Customize menu) and in the <head>...</head> put the following bit of code:

<script>
    // if the URL contains the ID of an old post, redirect to the corresponding new post URL
    if(window.location.href.indexOf("16116466587") != -1) {
        window.location.replace("http://accidentalhacker.com/post/37384370552/please-dont-learn-to-code");
    } else if(window.location.href.indexOf("15551408069") != -1) {
        window.location.replace("http://accidentalhacker.com/post/37385466610/using-mercurial-subrepositories");
    } else if(window.location.href.indexOf("15521210350") != -1) {
         window.location.replace("http://accidentalhacker.com/post/37385931471/sticky-notes-with-css3");
    }
</script>

Now, if my blog detects the ID of one of the old posts in the URL, it redirects the visitor transparently via JavaScript using window.location.replace. Done!

(Thankfully Tumblr leaves the URL in tact on 404s and doesn’t auto-redirect to something generic like accidentalhacker.com/404, otherwise this wouldn’t be possible.)

This method might not be scalable for people importing hundreds of posts, but I neither is copy/pasting all the content.

Hope this helps.

Please don’t learn to code

I remember stumbling upon tryruby.org a few years back. It was this neat little web-based shell that helped teach Ruby in a fun and interactive way.

The site lowered the barrier to entry for newcomers: you didn’t have to download anything; you didn’t need an editor or an interpreter; you didn’t even have to know what a shell was. You would simply read the instructions on the screen, type some commands, hit enter, and immediately see the results. In mere seconds, you were coding.

Try Ruby

This was just one of why the lucky stiff’s many whimsical creations aimed at spreading the joy of coding. Nowadays, there are dozens of interactive code tutorial sites trying to do the same thing, mostly for profit. Some have even raised millions in venture capital to fuel their efforts.

One site in particular, Codecademy, reportedly hauled in 1,000,000 users due largely to their well-timed Code Year initiative, which delivers weekly programming lessons to people who have resolved to learn to code in 2012. Last week, they announced a partnership with the White House.

The response has been overwhelmingly positive: writers, VCs, accountants, lawyers all learning to code! But someone has to be the bearer of bad news:

We’re not all going to be programmers.

Hipster Puppy

I promise I’m not trying to cut anyone down or dig a moat around my pristine programming castle. Those who know me know that I’ll happily teach programming to anyone who will give me the time of day. I’ve personally use sites like codeschool.com and udemy.com. I also don’t believe you have to switch professions in order to justify learning and enjoying the craft.

Confused yet? Let me try to explain where I’m coming from.

On a recent episode of my favorite podcast—Hypercritical—John Siracusa talks about the death of HyperCard. HyperCard was an application on early MacOS that let you make your own programs, or stacks, via Lego-block-style programming. HyperCard made it super-easy for normal people to build their very own programs.

HyperCard

The nerds thought: of course everyone wants to write their own computer programs! Why else would people want a computer in their house? We just have to make it easy enough for them.

John mentions other attempts at lowering the coding bar: AppleScript, Logo for kids, and Automator made programming more natural, fun, and easy. These platforms did, without question, make programming more accessible, but they never took off the way we geeks hoped and expected they would.

Siracusa explains (paraphrasing):

You could build up a pretty powerful system by composing all of these pieces that you didn’t write and you didn’t have to understand. But in all of these cases—HyperCard, AppleScript, Automator—the harsh reality is that anything that lowers the bar for people to do powerful things inevitably leads to Programming with a capital P.

These abstractions were leaky. The minute you try to do anything that is even slightly off the rails, you very quickly find yourself doing actual programming: conditionals, loops, composition, abstraction. These concepts aren’t natural to most people, so they stop right there. They won’t ever make the leap, no matter how easy or fun you make it.

If CPA firms had ping pong tables and Friday beer bashes, I might be tempted to learn accounting. And I would love it if there were a fun and easy way to go about it. But in the end, I could never be passionate about double-entry bookkeeping the way I’m passionate about JavaScript, because you can’t teach passion.

The percentage of the population that can engineer great software is so minuscule, and that number won’t change dramatically. HyperCard couldn’t change it; Visual Basic couldn’t change it; and no amount of instructional videos and interactive code challenges can change it. We might be able to nudge the number upward by making things easier, but there is a hard limit.

I would love to see more people from all walks of life learn to code, but I think we need to calibrate our expectations so we’re not shocked or disappointed when the dust settles and it’s just us nerds hunched over our laptops hacking away at 3am because we just can’t help ourselves.

Sticky notes with CSS3

I’ve been working on a pretty cool wall-mounted status board as one of my projects at Fog Creek. It’s a webapp that runs on a vertically mounted LCD screen in our office. It displays a bunch of interesting information like tech support calls, staff vacations, tweets about FogBugz, and more.

I’ve been incrementally adding features and improving the UI whenever I have spare cycles. The other night, I decided to redesign the Kanban board widget, which is a list of the top N things that the customer team needs from engineering. I decided to go with a sticky note UI that mimics a real-life Kanban board, which typically consists of a giant white board filled with a bunch of sticky notes.

My initial design used the classic yellow sticky notes, which I thought looked pretty neat. I showed my co-worker Rich who suggested that we make the notes look like the FogBugz and Kiln notepads that are laying around the office. Awesome idea! Way better.

Click here to play around with the code yourself on jsFiddle. As you can see, the implementation is pretty simple. CSS3 is really nifty. No images necessary (aside from the kiwi and dodo logos).

Here’s the markup:

<link href='http://fonts.googleapis.com/css?family=Reenie+Beanie&amp;subset=latin' rel='stylesheet' type='text/css'>

<ul id="notes">
    <li>
        <p>Push new feature to Kiln for code review</p>
    </li>
    <li class="kiln">
        <p>Browse hacker news for a bit</p>
    </li>
    <li>
        <p>Read JavaScript: The Good Parts by Douglas Crockford</p>
    </li>
</ul>

Notice that I’m pulling in the handwriting-style font right from the Google CDN.

Now for the CSS3 magic:

body {
    background: #B2CCCC;
}

#notes li {
    position: relative;
    width: 300px;
    min-height: 100px;
    margin: 25px auto;
    padding: 60px 15px 15px 15px;
    background: #fff url(http://our.fogbugz.com/images/tbKiwiLogo.gif) no-repeat 4px 8px;
    -webkit-box-shadow: 0 2px 12px rgba(0,0,0,.5);
    -moz-box-shadow: 0 2px 12px rgba(0,0,0,.5);
    box-shadow: 0 1px 2px #000;
    -webkit-transform: rotate(-.5deg);
    -moz-transform: rotate(-.5deg);
    -o-transform: rotate(-.5deg);
}

#notes li:nth-child(even) {
    -webkit-transform: rotate(.5deg);
    -moz-transform: rotate(.5deg);
    -o-transform: rotate(.5deg);
}

#notes li.kiln
{
    background-image: url(https://rob.kilnhg.com/Content/Images/kiln_focus.gif);
}

#notes li p {
    text-align: center;
    font: normal normal normal 40px/48px 'Reenie Beanie', Helvetica, Arial, sans-serif;
    color: #000;
    text-shadow: white 1px 1px 0px;
    overflow:hidden;
}

#notes li::before {
    content: ' ';
    display: block;
    position: absolute;
    left: 115px;
    top: -15px;
    width: 75px;
    height: 25px;
    z-index: 2;
    background-color: rgba(243,245,228,0.5);
    border: 2px solid rgba(255,255,255,0.5);
    -webkit-box-shadow: 0 0 5px #888;
    -moz-box-shadow: 0 0 5px #888;
    box-shadow: 2px 2px 2px #000;
    -webkit-transform: rotate(-6deg);
    -moz-transform: rotate(-6deg);
    -o-transform: rotate(-6deg);
}

#notes li:nth-child(even)::before {
    -webkit-transform: rotate(6deg);
    -moz-transform: rotate(6deg);
    -o-transform: rotate(6deg);
}

Each note has a background gradient to give it the sticky note color. The note is rotated ever-so-slightly with a transform and decorated with a little box shadow for a 3D effect.

The tape is inserted using ::before and is absolutely positioned with a box shadow, slight rotation, and a semi-transparent background color (using rgba notation to set alpha transparency).

I hope you found this little technique useful. I’m going to be posting more about the big board soon. Stay tuned.