take-on.me

take-on.me

take-on.me is a simple fun site I threw together at a WebRTC meetup. It's mostly just the code from the JSFeat Sobel Derivatives demo mashed up with Soundcloud, but I think the result ended up being pretty cool.

Everyone I've shown it to has immediately started waving their arms around like an idiot, which I think is an important activity to encourage.

Keeping a NOTES file

Screenshot of a NOTES file

Sometimes on a project, it feels like everything just flows. The ideas turn into code, the code works properly, it solves your problems and then you hit commit and go to the beach. Unfortunately, especially for more interesting projects, you tend to spend a lot more time being stuck. The key observation to blow this whole thing wide open is just around the next corner, but until then you just bang your head against it and feel dumb.

The best solution I've found for getting over that wall is to talk to someone about it. Unfortunately, using a real person is fairly limiting. Firstly, they have to be familiar with the project, or you have to explain the project to them in enough detail that your problem will make sense. Secondly, in most cases the person you use won't get that much out of it. You're talking for your own sake, not theirs, and ultimately that makes it unsustainable.

The state of the art, then, is Rubber Ducking. That's when you explain your problems to an inanimate object (like a rubber duck) instead of a person. You can assume your rubber duck has good domain knowledge (rubber ducks are notorious generalists), explain the problem whatever way best helps you, and have your epiphany safe in the knowledge that the rubber duck is really chill about just being a means to an end.

But there are a few issues with talking out your problems that even the mighty duck can't solve. Some people think better in writing than speech. Some problems don't translate well verbally, especially very structural ones. And worst of all, talking doesn't persist anywhere. I find myself running over the same ideas again later on and questioning my reasoning, or coming back to a project after some time away from it and not remembering what I'd decided.

My attempt to solve this, in the great unix tradition of all-caps files like TODO and README, is the NOTES file. When I get stuck, I just open up a NOTES file in my editor and start free-form writing about what I'm stuck on. Sometimes that looks more structural (lists of ideas, example syntax, comparing various API designs) and sometimes it looks more like a self-directed Q&A: "what about X issue?" "how do you solve that while still keeping Y?"

I've found this uniquely helpful. If it doesn't outright solve my problem, it often clarifies it to the point where I know what I need to do to solve it. What's more, I find the NOTES file acts as a great starting point the next time I come back to the project. The latest text makes great background reading so I can get immersed in it again quickly.

If you're stuck on something, I highly recommend giving a NOTES file a try. Worst case scenario, you've accidentally written some documentation.

Caniuse for the command line

Screenshot of caniuse command line tool

Today I'm releasing a CLI I wrote for caniuse.com. Caniuse is a great site that acts as a beacon of hope for those trapped in web developer purgatory by showing which features are supported by which browser versions. With the post-HTML5 world being all about "living standards" and the rapid pace of browser development, it's pretty tricky to keep track of whether your favourite feature still doesn't work in Mobile Safari.

I spend a fair bit of time on the command line, so for me this was a natural choice. The caniuse website is nice, but nothing beats the convenience of having the results appear instantly in your terminal. Plus, writing actual UIs is hard.

It lets you filter for specific browsers with --browser, and narrow down the versions you care about with --current, --future and --era. You can also get multiple results at once, and display them compactly with --oneline and --oneline-browser, which is pretty fun if you're into that kind of thing. Screenshot of caniuse command line tool

The site's data ended up being really easy to access, because it's available as an npm module. That let me spend more time working on important things, like making pretty colours and finding the right unicode character for "partially supported".

If you have Node, you can install it by typing npm install -g caniuse-cmd.

Motion interpolation is (wonderful) voodoo

For a project I'm working on, I wanted to create a nice spinning Earth background video. After digging around for a while I discovered that NASA had exactly the sort of video I was looking for. Only problem is it's only 8 seconds long. In my ideal world, it would spin slower and last longer, but you can't just pull more frames out of the air... or can you?

A technique called motion interpolation is able to do exactly that, with certain limitations. Most of those limitations aren't a problem for something as simple as a spinning globe, so my issue was just finding some software to do it for me. Many modern TVs actually have interpolation built in with brand-appropriate names like SmoothTrueMotionFlow, there seemed to be a few Windows video player plugins, and it seems to be a popular feature in high-end video suites. Unfortunately for me, I didn't want to hack my TV, install Windows or pay thousands of dollars. My search seemed doomed.

In the end, my saviour was a Swiss student named Simon Eugster, whose slowmoVideo is an open-source was created as a thesis project. It works by splitting the video into individual frames, then comparing each frame to nearby frames to calculate the optical flow - basically a measurement of how much each part of the video is moving. It then uses that information to create aditional frames, sews the video back up and there you go.

It turned out that slowmoVideo was way more sophisticated than I needed. It doesn't just slow down video, it allows you to draw custom slow-down-speed-up curves so you can do the whole Hollywood fight scene thing. It can even add motion blur. I felt a bit lame just drawing one long straight line and turning off all the options, but, hey, it worked and I got my slow-mo Earth.

If I hadn't heard about motion interpolation, I'd still be thinking that slowing down a video without making it jerky or blurry was impossible. I guess this is just one more to add to the pile of impossible computer graphics tricks that also includes resizing by deleting boring parts of an image, removing motion blur, and doing all your image editing by just drawing a box and telling Photoshop to figure out the rest.

Whatever they're putting in the water at SIGGRAPH must be pretty strong.

Livewall

Screenshot of livewall

A while back I wrote a little Bash script called livewall to do live wallpaper on OS X. I'd heard that nature boosts productivity and I thought I'd see if I could add a little bit of earthy soul to my sterile aluminium-and-glass work environment. Given at least some of those results suggest that just seeing a green rectangle would be sufficient, I may have somewhat overcomplicated the task.

I looked at a few commercial solutions, but none of them seemed that amazing. Most were more expensive than what I wanted and didn't seem to do very much other than just play video. They also had in-app purchases, so you would have to pay more once you installed them to access the full library of wallpapers. More importantly, though, I'd recently resolved to get my hands dirty more. Although I could certainly pay someone for software to do what I need, there's a certain rugged outdoorsman-type satisfaction in solving your own problems by the sweat of your brow - for certain fairly low standards of ruggedness.

Two breakthroughs made it fairly easy. The first is that my beloved VLC actually has a wallpaper mode, though you have to do a bit of massaging in recent OS X versions to make it work. The second is that Youtube actually has quite a lot of suitable nature videos:

Armed with livewall and my library of nature videos, I had a quite relaxing couple of hours working with a more animated Yosemite background. Then I went outside and saw the sunset, and I realised how woefully inadequate even a high-res display is when compared with the beauty of the real world.

Oh well, I tried. Besides, you can't be outside all the time.