By josh / May 23, 2014

This one weird trick will make your stylesheets easy to navigate

A couple of months ago, a image exploded on Twitter.

Hundreds of retweets. Actually made it hard to find new content for the @SublimeTxtTips feed for a couple of days …

The image was a screenshot of a long code file, open in Sublime.

The web dev who took the screenshot had an interesting approach to making it easy to navigate his file: He included block comments with HUGE ASCII art headers for different sections.

Seems weird, right?

Until you see the file in Sublime’s minimap. The ASCII art comments are immediately visable.

And if you use a preprocessor, you can strip them out, meaning no stylesheet bloat.

The developer who came up with this was inserting the artwork by hand, but the SublimeFiglet plugin by Adam Johnson automates the process using the Figlet command line tool.

I interviewed Adam about the process of creating this plugin, and here’s what he had to say.

(BTW, Adam’s SublimeFiglet plugin is only available for Sublime Text 2 at the moment, but it’s pretty simple. If you’d like to see a version available for ST3, grab a copy of Writing Sublime Plugins to see what might be involved with updating it, then send Adam a pull request! )

#

Tell me a bit about yourself (name, current job, blog, Twitter, etc.).

Hi, I’m Adam. I work as a web developer at YPlan, and my blog is at http://adamj.eu.

What’s the name of your plugin? What does it do? (If you have written several, pick your favorite.)

I’ve developed several little plugins, but I’ll talk about SublimeFiglet. It lets you create enlarged ascii-art text, as output by the classic ‘figlet’ commandline program, inline in Sublime.

How did you get the idea for your plugin?

I was working on some incredibly long source code files and wanted to leave large headers that were easy to find, especially with Sublime’s mini-map. Creating them manually with ‘figlet’ on the command prompt worked, but it was a slow process, so I decided it would be a good time to try my hand at creating a plugin.

How much time did you spend writing the first version?

An hour or so. The first version simply ran ‘figlet’ on the string you provided, captured the output, and pasted it back into Sublime where your cursor was – dead simple.

Did you think building a plugin would be difficult? Was it easier or harder than you thought it would be?

I didn’t expect it to be too hard, as I had already looked around in the documentation and the source code of a couple of my favourite plugins. But truth told, version one was done quicker than I expected still!

What was the most challenging part of building your plugin?

The biggest challenge here has been keeping up with pull requests on Github! A user in the community pointed out that ‘figlet’ is also available as a python library and submitted a pull request with it added in to the plugin, which cut out the need to install ‘figlet’ separate. I’ve also had people submitting fixes for particular scenarios where it didn’t work. The challenges have been both making sure that pull requests were merged in correctly, and didn’t break any feature, but also to do any merging in a timely fashion so people are friendly 🙂

What was your favorite part of creating your plugin?

Although I made it sound like a lot of work, my favourite part has definitely been keeping up with the community response for maintenance/improvements. It’s very fun to be contacted by random programmers across the globe submitting improvements to your plugin.

Did you learn anything along the way that you wish you’d know when you were starting out?

That ‘figlet’ was available as a python library, and that integrating it wouldn’t be hard – although it did need to be copy-pasted into the plugin.

Did your plugin grow or change as you built it? Did you have to modify your plans based on what the Sublime plugin APIs could do?

The first version only allowed you to ‘figletize’ text that you input into a prompt; however, I soon realized that this was a slow way of working, and so I extended it to support ‘figletizing’ your current selection. This was also a result of some further reading of the Sublime plugin API.

#

P.S. Yes, the post title is tongue-in-cheek. I sometimes get complaints on Twitter (from people who aren’t subscribers) about being a “spammer.” Might as well lean into it, right? 🙂

P.P.S. Want me to “spam” you with more great Sublime tips? Go here: http://sublimetexttips.com/newsletter

About the author

josh

Click here to add a comment

Leave a comment: