Hawk's By Design

A hop and a skip ago, I read an article over on David Walsh’s blog about colorized brackets.

Honestly, this is something I’ve never even considered, let alone wanted. It’s funny, because it’s a simple concept. In certain coding languages, for me that’d be CSS, PHP, and JavaScript mostly, there can be a ton of brackets. Brackets, brackets, brackets everywhere!

So…why not color coordinate them?

The Pros

Bracket Colorizer – SCSS Example

Though I never really paid much mind to it, I really do spend a good amount of thinking on matching up brackets. This especially becomes apparent in larger files that have lots of, or complex, conditions.

I never noticed how much time went into matching up the brackets, until I downloaded this plugin and realized how helpful it is. It’s almost like a subconscious thing. I’m finding it easier to match up brackets without even thinking about finding them. It’s kind of weird.

Bracket Colorizer – JS Example

The way the colors match, and the varying degree of colors based on your level of depth, make it incredibly simple to match up. If I glance at a screen, it’s very easy for me to pick out colors, and once I identify the colors, I’ve already matched the brackets.

It’s a weird, simple thing that I didn’t expect to be as effective as it is.

The Cons

If you are a hardcore believer in a color theme, then this plugin may not be for you. It can be a lot. It totally breaks any theme that you may have going, or may have meticulously set up. For me, it’s not that big of a deal, since it helps for the brackets to stand out, but I could see how some would not like it.

Another small con is opening extremely large files can have some lag time. If I accidentally pop open my compiled CSS or JavaScript file, there is a noticeable lag from the opening of the document to when the brackets get colored.

Improvements

The only thing I can think of to improve upon this simple, yet amazing, idea would be to allow color customization. The plugin I’m using right now with Atom doesn’t allow you to customize the colors of the brackets. It would be cool to be able to change them based on their depth. This might also help with those that have a specific theme in their editor.

In The End

I feel like this is a super simple plugin that is available for a variety of text editors. This is a plugin that could help beginners as well as experts, as we all share the same struggle of trying to match up brackets.

Bracket colorizer packages for various text editors:

Thanks for reading

Some more articles for you

Coding

February 6, 2019

Dynamic Article Header Anchor Tags

I want my headers to have anchor tags, but I'm too lazy to do it manually. Solution? Create a javascript function that does it for me. Point, automation.

View post

Coding

July 10, 2020

Using SASS Lighten and Darken Functions

The lighten and darken functions in SASS have been super helpful to me recently. I wanted to talk about them and the positives and negatives.

View post