Skip to main content

Brackets: Open Source Code Editor With Quick Edit and Live Preview

Brackets is a relatively new open source code editor for web design and development, created and maintained by Adobe and built with web technologies such as HTML, CSS and JavaScript. This means that Brackets is built using the same technologies the software is meant to build, which implies that any developer qualified enough to develop web pages also have the skills necessary to customize, modify and extend the editor. The uniqueness of this fact is driven home through their catch phrase: “If you can code in Brackets, you can code on Brackets.”

“Another incredible benefit to developing with open web standards is Brackets has the potential to run nearly everywhere,” said Adobe. “While we’re focused on the desktop first, we hope to supplement that version with a version of Brackets that can run exclusively in your browser. We also have a few ideas about how Brackets might be able to turn your tablet into your development environment. Brackets could also be embedded in your existing web applications. With a little help, all these versions could be developed in parallel. The possibilities are wide open.”

Brackets uses a simple interface with a handy vertical sidebar navigation menu that can be used to navigate between previously opened files quickly. Using this menu, open up your project folder and it displays each and every file in that folder.

brackets-sidebars

Two incredible features that Brackets come with are Quick Edit and Live Preview.

Quick Edit: Generally, If you want to apply or tweak a style on an HTML element in any code editor, you have to locate the right stylesheet, scroll around or search for the class, edit and save, and then return back to your original file.

In Brackets you can edit your stylesheet from within your HTML documents. To do this right-click on an HTML element and choose the “Quick Edit” option from the context menu or use the keyboard shortcut Ctrl+E. Brackets automatically retrieves the CSS class that applies to that element from your external stylesheet file and displays it inline for you to edit. When you are done, just toggle out of the Quick Edit by hitting the Escape key.

brackets-quick-edit

The Quick Edit feature isn’t just limited to coding functions – it can also be used to display visual tools inline like a color picker and gradient designer.

brackets-quick-edit-2

Another interesting feature is the built in documentation. Not sure how to use the “shadow” property? Just right click on “shadow” and choose “Quick docs” to get a brief description about the property with a link to read more about it on the internet. And because neither Quick Edit nor Quick Docs is a floating panel, it never obscures your code.

brackets-quick-docs

Live Preview: This is another useful feature for web designers.

In a generic text editor, to see a preview of changes you made to the code, you need to save the file, switch to your web browser and refresh the page. And if you leverage the in-browser tools to debug the application or tweak the design, you have the epic chore of copying and pasting all those changes back to your editor.

Brackets hooks up directly to the browser offering you Live preview of the files you are editing. When Live File Preview is enabled your browser shows real-time changes to CSS classes and properties as you type. Because the code lives in your editor but runs in your browser there is no need to save, reload, copy or paste.

The current build of Brackets only supports Google Chrome for Live File Preview.

Extensions: Because Brackets is built using open technologies, its functionality can be extended using extensions developed and shared by the community. Over 100 extensions are available which can be browsed and installed via the extensions manager. You can also browse the Brackets Extension Registry on a web browser to see what type useful extensions are on offer.

brackets-extension

Brackets is an exciting project that is evolving at a rapid pace. First announced in June 2012, the software is already at its 29th version with new updates release every two-and-a-half weeks.

Brackets is available for Windows, Mac and Linux.

Comments

Popular posts from this blog

69 alternatives to the default Facebook profile picture

If you have changed the default Facebook profile picture and uploaded your own, it’s fine. But if not, then why not replace that boring picture of the guy with a wisp of hair sticking out of his head with something different and funny?

How to Record CPU and Memory Usage Over Time in Windows?

Whenever the computer is lagging or some application is taking too long to respond, we usually fire up task manager and look under the Performance tab or under Processes to check on processor utilization or the amount of free memory available. The task manager is ideal for real-time analysis of CPU and memory utilization. It even displays a short history of CPU utilization in the form of a graph. You get a small time-window, about 30 seconds or so, depending on how large the viewing area is.

How to Schedule Changes to Your Facebook Page Cover Photo

Facebook’s current layout, the so called Timeline, features a prominent, large cover photo that some people are using in a lot of different creative ways. Timeline is also available for Facebook Pages that people can use to promote their website or business or event. Although you can change the cover photo as often as you like, it’s meant to be static – something which you design and leave it for at least a few weeks or months like a redesigned website. However, there are times when you may want to change the cover photo frequently and periodically to match event dates or some special promotion that you are running or plan to run. So, here is how you can do that.