Quick Review of Brackets for macOS

For a front-end web development tool that is free and open-source, Brackets has a lot going for it! Not only is it a very powerful tool to help with your web development endeavor, but the fact that Brackets is open-source makes it a very powerful community as well with the addition of add-ons.

Screen Shot 2017-12-05 at 9.01.51 PM

Brackets and Espresso for macOS both are pretty similar in terms of features. Let me explain how Bracket work with my workflow.

Live Preview!

Though Bracket’s Live Preview and Espresso’s X-Ray are both very similar in terms of what they do, each has their strong points. With Brackets, the kicker is with the live clicking on the elements in Live Preview.

What I’m trying to say is that instead of opening X-Ray in Espresso, you click on Live Preview, Chrome opens up, then you can click on an element straightaway on Chrome and it’ll show the corresponding line of text in your HTML.

The only fault I see with it is that it only works with Chrome completely. You can copy the URL into Safari, but the live updates you do with your HTML code will not automatically and instantly reflect in the Safari Live Preview window. So unless you’re a hardcore Safari user like I am, you’re stuck with Chrome with Brackets.

Screen Shot 2017-12-05 at 9.37.58 PM

The unfortunate part of Live Preview, even when using Google Chrome, is that yes, your changes to your HTML code automatically and quickly reflects into Live Preview. HOWEVER, CSS code will not automatically reflect into Live Preview. You’d have to save the CSS, then close Live Preview, then reopen. Quite the hassle, indeed.

Then again, with Chrome as your Live Preview window, you can open ‘Inspect’ and it’ll pull up the HTML, CSS and a nice cool visual cue on the amount of padding and margins that you have instilled into your CSS based on the element you clicked to ‘Inspect’ with. That’s pretty nice, but for my workflow, it’s quite cumbersome.

Down To The Nitty Gritty.

In terms of cold-cut code, Bracket’s code editor is quite nice. The layout is quite similar to Espresso in terms of navigation, but the thing that Brackets has over Espresso is the ability to open two different pages of separate code in the same window. Let me show you:

Screen Shot 2017-12-05 at 9.41.50 PM

The multi-page code window is quite useful when editing both CSS and HTML in tandem. Like I stated before, it’s unfortunate that the CSS changes you make don’t automatically reflect into the Live Preview like Espresso does.

However, if you’re a visual programmer, this will work perfectly. You can instantly visualize what you’re coding in. That takes a lot of skill, but it’s definitely possible. Then again; if you’re not that talented like I am, you’ll rely on saving your CSS file, then closing and reopening Live Preview or to make those changes in Chrome’s Inspect element where it does automatically reflect your changes, then make those changes into Brackets.

However You Slice The Pie…

The thing is that Brackets is an amazing tool that is very cost-effective for those who are pinching pennies (like I am). Definitely worth a look and try if you’re in the market for a powerful, feature-packed front-end web development tool.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: