tl;dr: I made a Sublime plugin to show the corresponding CSS selector in the status bar when your cursor is next to a closing brace. Here’s why.
Staying in flow is one of the hardest and most important things you can do as a programmer. It’s why the smallest optimizations to your environment and workflow really matter. Whenever I’m not in flow, I think about how to get (and stay) in flow, a lot.
When Hakim el Hattab recently tweeted a cool idea for a Sublime plugin, it got my mind racing:
Someone please write a Sublime Text plugin that displays the CSS selector associated with any closing curly bracket.
— Hakim El Hattab (@hakimel) April 25, 2013
It piqued my interest partly because I’ve been hacking a lot of CSS lately, and partly because in a former life I wrote a tremendous amount of Java. Writing Java involves a lot of verbose code, so I was a big fan of IntelliJ IDEA for its innovative editor features, many of which were mind-blowingly awesome, especially at the time.
Whenever your cursor was over a closing brace, it would passively display a popup to show you the declaration from the corresponding opening brace, assuming that declaration wasn’t currently in the visible editor window:
Image may be NSFW.
Clik here to view.
The popup was easy to ignore if you didn’t need it, but incredibly useful when you did: it stopped you having to scroll back up your code, which might have meant a keyboard-mouse switch, or might have meant another part of the code distracted you, etc. Very useful for staying focused and in flow.
In Sublime, we can’t yet make anything quite that awesome: there’s no API for displaying rich annotations over the code. But we can do the next best thing: ensure the opening declaration/selector is visible somewhere that we can control — the statusbar.
I built Sublime-CSS-Selector-Reveal to do exactly that:
Image may be NSFW.
Clik here to view.
It’s most useful when editing SCSS files where you might have a lot of nesting. It’s a simple plugin but as I’ve written about before: a lot of simple improvements to a programmer workflow can provide big cumulative productivity benefits. Combine it with the official SCSS support for textmate/sublime and you’ve got yourself a step-change in Sass/CSS editing productivity.
I’m going to keep saying this until people start sending me their plugins: writing a plugin for Sublime is insanely easy compared to most editors. It gives you a better understanding of your editor, and it makes you a better programmer.
Let me know your great plugin ideas in the comments below, especially if you’ve started working on them!
Follow @LeeMallabone to see future workflow hacks, front-end dev tips, tricks and more.
Image may be NSFW.
Clik here to view.
Image may be NSFW.Clik here to view.
