The surprising complexity of simple features

The idea to write this stream of consciousness came to me as Piotr and I were building the tab pinning feature in Zed. You know, I honestly thought about it as a relatively simple one to pull off. And in reality, it definitely wasn’t rocket science, but looking back, it’s surprising how many little decisions we had to make in order to feel like it was working nicely. It sparks the reflection about how complex and hard it is to make seemingly simple things—despite how paradoxical this can be.

Quick tab pinning walkthrough

So, this isn’t a revolutionary feature by any means—you can find it in most of the products you use daily, like VS Code, Figma, and Chrome.

In Zed, we needed to mostly just match expectations, so it works mostly the same way you’d hope. You can right-click on the tab, select the “Pin Tab” menu item, and boom—regardless of the position of the tab pre-pinning, the now pinned tab will be moved to the very beginning of the list with a little pin icon to indicate its new pinned state. Then, to undo it, you can either right-click on it again or just click on the pin icon.

The small but important decision points started to creep up once we went past these basic interactions.

Drag and drop

Like in most tab-based navigation products, you can rearrange the order of your tabs by dragging and dropping them in different spots. But what happens once you drag a non-pinned tab to the left of a pinned tab? In Zed, we made it so this move pinned the tab. This also works on the opposite direction: if you drag a pinned tab out of the “pinned area” (indicated by the thicker right border), you are essentially unpinning it.

The concept of the “pinned area” was essentially what made this feel right—something based on our collective reflection around this interaction.

Scroll

In most of the products mentioned above, the act of pinning doesn’t affect scroll at all. We honestly felt like this was weird because pinning is, essentially, an act of prioritization. You’re marking that item so that it stays more visible; because it is, presumably, more relevant. So then, in Zed, the pinned tab area becomes sticky-positioned, which allows you to always see it.

Title truncation

In Figma, Chrome, and Firefox, for example, pinning makes the title of the tab disappear. All of these products, including Zed, have icons that give away more information about the tab. However, we also felt like not having the title was a weird move because it essentially makes it harder to identify the tab. I get that not having them creates more space, but if you’re saying that 10 tabs are a priority, what’s really a priority? This was yet another call we had to make. In Zed, the title doesn’t go away. That also reduced complexity for us because users can choose not to have file-type icons at all. So, imagine what a pinned tab with no icons and no titles would look like? I have no idea.

Wrap up

In the end, it is still a simple feature. Of course, there were some tricky bits on the coding part, but that wasn’t incredibly challenging for the mastermind Piotr is. What was interesting for me to reflect on is all of these little decisions we had to make along the way to call the feature “done” (at least for now).

Sometimes, you can anticipate these decisions in prototyping. But most of the time, they creep up when you’re actually deep in the nitty gritty of building. And that’s what is most exciting to me about being able to code because there’s so much you can think of conceptually and statically.

A screenshot of the React prototype of Zed we use to test things out such as this feature.

Fundamentally, though, this speaks to something at the root of how Zed has been built. The more time I’m there, the more I learn about all the big and small decisions around how each and every single thing is designed. Even so, more particularly surprising are the things that we may take for granted these days on the web, like, say, drop shadows. I’d highly recommend listening to this podcast episode with Zed’s founder, Nathan, where he tells all of this story. It was also the first time ever my name was mentioned on a podcast that’s on Spotify—wild.