My apartment building, like a lot of buildings in Seattle, has an intercom system for guests. When someone comes to visit, they punch in my apartment number, I get a phone call, and I can press “9” to have the door buzz open. This is super convenient for letting people up, or even letting people in to check on my plants while I’m traveling. However, it’s less convenient when I have a bunch of people over for drinks. I keep having to respond to phone calls from the door to let people in.

So, of course, I decided to automate it. I actually stole the idea from my friend Alex, who built a similar solution in python, but the project was simple enough that I used it to learn a couple new technologies. In fact, Doorman is in perhaps it’s fourth or fifth version, since it’s so useful for learning new Web frameworks — I originally wrote it in Node.js, then Rails, then AWS serverless, and now in Phoenix (Elixir). I also wrote a simple iOS app for it, but the app never felt as polished as I wanted — but I’m sure I’ll resurrect it someday.

(more…)

At Zillow, employees can earn badges on their profile for various accomplishments. Many of the badges look really nice, because they were created by our excellent design team. However, badges are pretty low priority, so often they don’t have time to create new ones, and many badges are designed by others without quite the same polish.

The inconsistency started to annoy me, so I decided to make this tool that would help anyone create a decent-looking (or at least consistent-looking) badge. Most of the badges follow a pretty standard template, so I distilled the controls down to only what varied between them.

The color picker users Vibrant.js to select a palette based on the image you upload, to make it even easier to match colors. The settings control an SVG image, which is downloaded as a PNG when the user is finished. They can then submit it to an admin to add to the system.

Brutalist web design has always been a favorite of mine. I love the clean lines, the lo-fi vibe, and the dark alternative proto-Internet that we all like to imagine used to exist. In some sense, it’s liberating to demand that the user bend to the idiosyncrasies of the design rather than cater to what users want or expect.

This specific project was greatly inspired by the chat mini-game thing in Super Hot. Basically, I stole the whole premise and turned it into a website. I loved the idea of real-time text, where you could see people make typos, and wouldn’t have to wait staring at a “John is typing…” status. The automatic pseudonyms were also a fun trick, which I imagined would give some illusion of privacy, when in reality you can learn to distinguish people pretty quickly based on their typing speed and accuracy.

The server is written with Express, a popular Node.js framework. It’s pretty simple — basically just rendering a React app and setting up Socket.io to relay messages. The socket file supports a few commands, as well as basic messaging, and is also relatively simple; in fact, I think a chat application is one of Socket.io’s example apps in their documentation. I use Redis to keep track of the number of users online in each room, and to record conversations (when that’s enabled). The client side is a pretty simple React app, with Redux to store the messages. As with most side projects, the code could be factored out a little better, but given the size of the project the organization doesn’t seem too hard to navigate.

Showing the app to some friends, we all got a kick out of playing around with it for a while, but understandably it never replaced our normal messaging platforms. Occasionally a few people will pop in from time to time, but it’s not as interesting if you’re the only one online. It was also included on brutalistwebsites.com, which is about all I was looking for anyway.