Adventskalender Day 9 – Brackets – The better Code Editor

marketpress-adventskalender-09

To cut the matter short: I am not a programmer. I am a designer and front-end developer.
“Are you saying you can’t code, but you’re a front-end developer?”—Correct.

I’ve mastered XHTML and HTML5, acquired a solid knowledge in CSS2 ad CSS3 as well as an elementary vocabulary in PHP and JavaScript. That kind of knowledge enables me to build elegant, decent WordPress themes which is one of my assignments at MarketPress.

For quite a long time I’ve worked with the editor view in Dreamweaver CS3, and very happily so. It provided a nice view and comprehensive code highlighting.

Now, as you can imagine, the kind of looks our developers used to give me whenever I would open Dreamweaver would make me feel like I literally was catching fire in front of my screen. Perfect conditions to go looking for a new code editor! So I did and evaluated Coda 2, Sublime Text 2 and Dreamweaver CC.

Coda’s UI seemed way too cluttered, Sublime Text 2 I found way too nerdy and the difference between editor views in Dreamweaver CC and my own CS3 was marginal at best. It looked out-fashioned to me and didn’t promise any additional value. What I wanted was something fresh, clean and simple that would still provide some extra gears when I needed them.

brackets

Brackets—bam!

I don’t know how exactly it has happened, but at some time I stumbled upon Brackets.

Brackets is open source and developed by Adobe. It provides exactly what I’ve been looking for: a minimalistic interface with a lot of space for writing code, yet with a bunch of powerful stuff under the hood.

But why exactly Brackets?

As I said, I love design. UX matters a lot to me when I decide to use a software for my every-day work. Brackets manages to paint a smile into my face as soon as I start the application. It does a lot right anyway. The idea behind Adobe’s initiative is simple: Let the tool be developed by those who are going to work with it!
Brackets is written in HTML, CSS and JavaScript and has been published on GitHub under the MIT License. That means every users can look at the state of development at any time and easily even create their own plugins. Bugs can be tracked efficiently from everybody. A cool and appropriate approach, isn’t it?

Brackets runs on all common operating systems. A browser and tablet version are already on the roadmap.

Concentrate on the essentials—the code

Brackets’s UI is kept very plain. Simple and ingenious. You don’t need a lot of explanation, you open Brackets and get going. Typography and structure, everything looks very clean and comfortable.

A personal favourite of mine: with a couple of extensions you can create new themes for Brackets. Pick a light or dark background from the default options, or even create a theme that recreates the look of another code editor to feel at home immediately!

Quick Edit, and everyone’s like YEAHHHH!

There’s that one extra cool feature in Brackets: Quick Edit. If you’re like me, you struggle to stay on top of big CSS files sometimes. Looking up a certain selector might even take a minute or two.
However big your stylesheet grows, Brackets has you covered. With cmd+E (on a Mac) you conjure up the Quick Edit view. Quick Edit let’s you edit the styles of any previously marked HTML element on-the-fly, much like the developer tools in browsers like Chrome or Firefox, but nicer.

The Quick-Edit function on Brackets.
The Quick Edit feature in Brackets.

Of course you can create new CSS rules right where you are, speeding up your development workflow and eliminating the need to switch between files. Additionally to HTML files, you can also use the inline editor from within JavaScript or CSS files, i.e. evoking the colour picker.

The Color Picker in Quick Edit Mode on a CSS file.
Color picker with Quick Edit in a CSS file.
Let me see what my code does in real-time!

No worries, Brackets does that. The built-in live preview is another highlight of Brackets. Just open a browser window (currently Google Chrome only) next to the editor and watch what’s happening while you’re typing! No need to switch windows and reload that page in the browser. Real-time preview, although a larger screen definitely helps.

Live Preview from Brackets. On left side the Editor. In right side the live preview.
Live preview with Brackets (left) and Google Chrome (right)
What else is in store with Brackets?

A lot! There’s a JavaScript debugger for Chrome and NodeJS, the extension manager and even more. Yet, as I’ve mentioned at the top, I’m a designer, so the features I’ve described here sort of do it for me for the start.

What does the future look like with Brackets?

Right now we’re at version “Sprint 34”. There’s a new sprint with bugfixes and features every two weeks which I for one are very happy about, because I can use new functionalities within a short time. Eventually, the web evolves faster and faster, too.

Adobe is open for contributions and ideas from users, by the way, to develop the project steadily. Personally, I believe Brackets has got what it takes to become one of the code editors in the long run. I’m glad I’ve stumbled upon it and won’t let it go so soon!

There’s a Trello account where you can get information on future features and ideas. The rest is on the Brackets website or in the GitHub repository.

Your turn now!

Have you tried Brackets already? What are your experiences with the “junior” code editor? Your comments are much appreciated!

Post Sharing

Author Avatar

Nick Jantschke is the artdirector and proprietor of the MarketPress GmbH and Stil-Etage GmbH. He likes to drink Hot chocolate in his spare time, next to fixing bicycles and experiencing everything that has to do with music. Nick is excited and passionated about every Design themed topic.

Also Interesting

slack-blog

New Plugin: Slack Connector - Connect WordPress, WooCommerce and Slack

by Michael Firnkes

Initially we merely wanted to optimize our own Slack-processes. With automated notifications from our MarkettPress shop, the blog and our forums. The resul ...

Read more
vip

Inpsyde is the first WordPress.com VIP partner in Germany

by Michael Firnkes

Automattic has given us the title of WordPress.com VIP Service Partner, the first in Germany, Austria and Switzerland. Worldwide, there are only eleven com ...

Read more
wooexperts

Inpsyde is a WooExperts Gold Partner of WooCommerce

by Michael Firnkes

A few weeks ago, Inpsyde GmbH with MarketPress became a certified WooExperts Gold Partner. This is confirmation from WooThemes of our agency’s know-h ...

Read more
backwpup

BackWPup Pro: Secure WordPress Backup with Google Drive

by Michael Firnkes

The Pro version of our BackWPup plugin supports the backup of WordPress databases and files to Google Drive. But how do you set something like that up? And ...

Read more

Comments

1 Comment

  1. #1

    i m using it in my day to day workflow for mobile application development. it simply rocks.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">