Hacker News new | past | comments | ask | show | jobs | submit login
Brackets, a code editor (brackets.io)
253 points by ttty on Feb 6, 2014 | hide | past | favorite | 124 comments




The moment I saw brackets, I fell in love with it. I really saw it as an opportunity to replace SublimeText, so I went with it. I tried the Sprint 35 version on Ubuntu 12.04 x64, and my PCs performances are well over the minimum requirements.

Unfortunately it turned out to be very slow, I opened an existing project I am working on, where my JS files were not larger than 500 lines / file. The cursor is lagging, literally, when I press the "down arrow" for instance, the cursor disappears, then I stop pressing it and it reappears somewhere below. Scrolling had the same effect, just as well as changing the currently opened document, it all takes time, the amount of when you feel that something is not right. At first I had a couple of extensions installed, so I threw them all out, but it didn't change a thing.

I would really like to use brackets, it's concept/idea really works for me, but until it gets faster I simply can't . Looking forward to the next sprint, I hope things will change.


Can you file a bug? https://github.com/adobe/brackets/issues/new

That level of performance degradation is definitely not normal.


The deal-breaking problem I have under Linux with editors based on node-webkit like Brackets and Light Table -- for some reason they don't use subpixel rendering, making all text extremely blurry. Maybe it's that issue https://github.com/rogerwang/node-webkit/issues/734, but I'm not sure. Anyway, I am not aware about any workaround, and just can't use them in their current state.


Brackets is not based on node-webkit. Brackets is based on CEF3 which is a API exposing library that uses Chromium. Node-webkit uses Chromium as well. So it's most likely chromium that is the issue.


That looks like a hinting problem rather than a lack of subpixel rendering.

EDIT: Or rather, it's both, but if you can't fix one you might want to try the other. Personally I've always preferred strong hinting and greyscale anti-aliasing to soft subpixel rendering.


>> Live HTML Development >> As you code, HTML changes are instantly pushed to browser without having to save or reload the page.

Who actually writes non-templated HTML any more?


Frontend developers? Isn't a very weird workflow, you first design your page in Photoshop or whatever, then you build out the page in css and html, then you break the page up into templates to be integrated in your app.

If you're a full stack dev, then it might happen that you do all these steps at the same time, so you never work on pure html, but if you're not I imagine this is how you work.


We use bog standard HTML with custom data- attributes (whose intention is pretty much obvious) and our binding library automagically populates it. So the learning-curve for people joining the project is basically... "do you know HTML?"

Want a span to show the live content of foo.bar.baz? <span data-source="foo.bar.baz"></span>.


great idea here. love it. is there an example out there of these 'bindings' that somebody with strong html / css but weak javascript skills would be able to grasp and implement into a site?



Our system is intentionally much simpler than this -- the idea being that if it becomes like a "language" people will do stupid things in it that need to be debugged.


We're supposedly open-sourcing our codebase (it's for a Federal government project) but the process of deciding the licensing seems to be interminable (yes, shocking I know).


I've gotta agree with you here. If you are a professional developer and are still writing non-templated html, I'd be surprised. I think it's crazy that all these tools keep coming out for handling vanilla html and css, while the development community is busy shooting miles ahead with far more powerful preprocessing. I'm working very heavily on convenience tools for advanced dev workflows, hopefully these will bring a similar level of excitement for devs who preprocess.


Who would think it? That someone would do something differently to us? That some people out there, on the internet, have different workflows than us.


On big projects I work on, front-end developers start from the PSD and do the HTML first (they just do some templates, not the whole site obviously).

Then the JS is either made by them (depending if they know JS) or by a JS specialist.

Then the programmers integrate the HTML in the "code/templates" (CMS, whatever).

We develop in different web technologies and front-end developers don't learn how to code server side code (either they don't want to, don't have time, whatever).

Depending on the templating engine and programming language and final product (CMS, etc), they can or cannot edit or fix their CSS right in the final code.

Sometimes they need the programmers to tell them where the templates that they want to change are, etc. Imagine a big projects with hundreds of different templates made by a programmer, the front-end dev doesn't necessarily know where to change his stuff and if he's going to cause a problem elsewhere.


Front-end developer here. Yes, that is what I do. We have some really talented developers who design some awesome images of what the websites should like. (Hopefully as a photoshop file. Or at least, something that let me get exact measures and layers.)

If it's a small project, made to be beautiful, they will do the whole design of all the pages. If it's a huge Agile project, they would instead give me a style guide.

Then, I quickly turn everything into reusable HTML blocks and do the CSS (using LESS). If needed, I'll make custom jQuery (or pure Javascript, but that never happens, really) modules for the template. It's very quick. A full page templates takes me about 1 to 2 hours, if it's very, very complex I may take up to 4 hours.

While I'm working on those, the back-end guys are working of making the CMS work correctly. Sometimes, I give them the templates before they program the page, but most of the time I end up attacking the page after them. I then simply use the building blocks they gave me (and turn all the divs they made into the right HTML5 tags).

We use a lot of different CMS and some of the websites have custom backend (no CMS). We develop in both PHP and .Net.

I know PHP, and I'm comfortable developing Drupal websites. However, I don't get a lot of fun making the backend. The only time I would do it if we are working on a one pager or something like that, since it's faster if I do both back and front for project that are not complex.

I prefer working on the front-end. And I do mean front-end development. Not simply mindlessly slicing a PSD into an HTML page or adding content from a Word document.


I'm sure it wouldn't be a stretch to write an extension for Brackets that allows you to handle templates more effectively.

On another note, you'd be surprised how many people are still doing pure vanilla. Preprocessing isn't usually part of a beginners toolchain, you gotta learn the underlying part first before you start grafting on the preprocessors used in larger projects.


We've actually stopped using all pre-processor for everything we do for Segment.io[1] as well, and we're not beginners.

One of the biggest problems with them is that you immediately eliminate a huge portion of the people who are willing to contribute to your code if you select a pre-processor they aren't fond of. It's fine for app internals, but for sharing small[2] open-source[3] components[4] it's not a good idea—whether it's Sass or CoffeeScript or Jade or whatever.

The other problem with CSS pre-processors specifically is that they only work well with the monolithic app mindset. All of your CSS files inside the same `styles` folder, and all of them required by the "top of the monolith" `main.sass` file. Instead, using something like component[5] you get true dependency trees, so you don't have to go monolithic anymore. And trying to get Sass to work across a component-ized codebase is a real pain. Instead we use Myth[6] to "post-process" the built CSS.

Pre-processors are a leaky abstraction that comes back to bite you at random points the way all leaky abstractions do, and the ways are usually hard to foresee and thus hard to argue against when the benefits seems so clear.

[1]: https://segment.io

[2]: https://github.com/segmentio/toggle

[3]: https://github.com/segmentio/sheet

[4]: https://github.com/component/tip

[5]: https://github.com/component/component

[6]: http://myth.io


Preprocessors aren't incompatible with components. I usually structure my frontend code like

    components/
        widget-one/
            template.html
            script.js
            style.css
        widget-two/
            template.dust
            script.coffee
            style.styl
And then the style file for a component is completely scoped to that component's main class:

    .widget-two {
        .widget-two-control { color: blue; }
    }
The build script can handle each component separately and stitch the results together. Just because SASS/compass encourages a monolithic style doesn't mean it's necessary.


Yeah, the problem comes in when you want to share pre-processor variables between your components.


Front-end-wise, if you are jumping between projects, it's often easier to just build a static 1page of what you are trying to build instead of having it run through some kind of framework.

If you have an established project, then sure, you probably already have your views setup.

It would be really cool if Brackets could detect that you are working on a partial and inject that back into the page somehow


There's still a lot (a lot) of folks (non-startups) who don't do everything soup to nuts so they outsource things like the design and development of the front-end to outside shops. These folks tend to build out the HTML without any CMS integration then delivery the full HTML for the client to integrate into their CMS/tools/templates.


Template writers? Proof of concept websites? Quick-and-dirty one-offs?


"Who actually writes non-templated HTML any more?"

Me.

My martini untemplate engine is a code generator that inputs HTML and outputs Java.

This creates a one-way flow of work. Designer creates the HTML, I create the backend. When the design changes, the backend (e.g. data binding) breaks during the generation and compile steps. Not in the browser.

Martini isn't ready to demo yet. It will be open source. But documentation and examples take more time that I have right now. Sorry.


Me, and all my coworkers.


Maybe desktop developers that want to learn web development from the ground up ? (my case ;-)

After a really bad encounter with Javascript 7 years ago I chose to forego web development completely.

Now I have a web-app project and I discovered with horror that not only Javascript is not dead, but it's even more prevalent than before !

I'm gonna have to suck it up and start learning it, but maybe not to the point of choosing Node.js as my server side technology :-)


I find it much easier to pixel-hawk and correct layout issues when I save an offensive generated page and then edit it in an HTML editing environment (Lighttable is good for this with JS/CSS weirdness as well).

I can do the same with the various web dev plugins, but I rather like being able to save the intermediate result and not have to worry about a refresh changing the underlying state of my view.


What kind of templates do you mean? e.g. Wordpress? Underscore? Bootstrap?


Jinja2, ERB, Haml, Jade, etc. Any system where the thing you're editing could not be immediately served as an HTML file.


Any time I've ever written HTML (which hasn't happened often) it's always been in a text editor, raw. Then again, I'm clearly not exactly a web developer.


That's a different thing.

Templated, as in "this html isn't coming from a rails partial" etc.


I think I'm in over my head now. I've never even used Rails and know almost nothing about it.


Templated, I think, as in a page is not using PHP or some other language to pull content from several files or a database.


OK, that makes sense to me. Thank you.


>Who actually writes non-templated HTML any more?

For one, everybody who designs the original HTML to be templated. Some start with a PSD and then do a full HTML page, others start directly by doing a full HTML page. Only AFTERWARDS its made into a template.

Second, ever since Enhydra (Java) and TAL (Zope) at least, there have been template engines that use full, plain, HTML code, marked with special attributes (repeat, inject value here etc).


Brackets is actually a very good code editor. I never use live preview.

I do, however, do rails with it. This includes everything: ruby, erb, CSS, sass, JavaScript/coffeescript, and even handlebars.

Live development is it's least useful feature (for me), and Brackets should get more credit for the rest of it.


I do code in an separate enviroment. Only HTML/CSS and LESS. No assets compilations, no rails requests, just heel in all his power. It's confortable and faster than anything and it's a good way to develop in an abstract way.


Why experiment when frameworks make hard-coding so sexy?


I downloaded the editor about two weeks ago. It's fun and easy to use. My only criticism is of the live editing feature.

That's what drew me to the editor in the first place, but it seems to be very buggy. It stops updating the preview sporadically — and predictably, each time I open the JS Console.

As a front-end dev, I can't really count on a preview that doesn't function with developer tools open.

Having said all that, I understand that Brackets is relatively new, and it takes time to iron things out. I will keep up-to-date with their progress and consider using the service in the future.


It's a bug (design decision) of Chrome. Only 1 debugger can be attached to Chrome at any given time. So if you have Brackets live preview enabled, you cannot use the developer tools within chrome.

This is an issue with other tools that try to attach to Chrome to do this type of work. Sadly, Chrome doesn't see it as a big enough issue to fix.


Couldn't you set up a proxy that handles the multiple connections and keeps the clients in sync?


The problem is that one of the clients to be kept in sync is the dev tools itself. Currently the dev tools assume no one else is using the API, so there's significant work on the Chromium side to make them able sync up with changes caused by other API usage.


Is there a bug on crbug.com?




Glad to hear you found Brackets fun and easy to use.

As mentioned by kyrra, this is an issue with Chromium. We do have plans to change our communication with the browser to fix this (and other problems... like being Chrome-only!), but that's one of many things on the list.


Speaking of developer tools, Chrome isn't far from becoming a full-on live-editing solution: https://developers.google.com/chrome-developer-tools/docs/au...


I've been using Brackets to prototype things for al out a year and love it. I design in code much more often than in Photoshop or InDesign or whatever, and Brackets is super useful for that.

I tried to get Sublime Text to do the same thing, live updating, and even found a plugin that mostly does the trick. But it required a lot of setup each time I used it, and still wasn't as good as Brackets.

Brackets has issues, it's slower than a "text editor" ought to be, and the general editing tools aren't nearly as developed as Sublime, but for rapidly producing visuals and designing in real-time, it's stellar.


What setup did you use for live updating in Sublime Text?


I use LiveReload (in conjunction with nodemon if it's a Node project).


If any of the Brackets team is reading this .. THANK YOU ! For one of the most ergonomic editors I've ever used. I really can't explain it any other way, but everything just is where I expect it to be. And I was really surprised at the JavaScript auto-completing !

My plugin setup is only to add jsbeautify and JSONLint.


Thanks! We love to see feedback like this!


If I may ask the author(s): what was the motivation of writing this app for native platforms but making use of webkit-node or similar technologies and tools? This to me seems like it has become a popular technique for writing cross-platform applications, but it also seems like it has many drawbacks which make it an unattractive option, with the only advantage being that the authors already know CSS/JS/HTML and can leverage that knowledge to make a protoduction-quality application. Can you confirm that this is the case, or was there some other reasons and/or factors that led to such a decision? Thank you for your time, and have a relaxing evening.


I wasn't there at the beginning, but I've been working on Brackets for a year.

We want Brackets to be awesome for web developers and designers specifically. So, how cool is it to be able to extend the editor you use every day using the exact same tech you're already used to? (And, of course, you can edit Brackets extensions in Brackets...)

This is likely part of the reason there are more than 200 extensions available for Brackets today.


That's a pretty cool idea actually.


IMHO The title should be a little bit more humble.


This comment was more entertaining before I realized the title was changed.


Sarcasm is always entertaining, sadly there wasn't any in my previous comment :(.


It is still to ambitious. Should be called an HTML&JS editor.


What's with all of this nonsense about 'humility' lately? It's almost as obnoxious as 'entitled'.

If the person who posted this link believes that it is Beautiful, then it is. You may agree or disagree but humility has nothing to do with it.


The title deviates from the Hacker News Guidelines: http://ycombinator.com/newsguidelines.html

> Please don't do things to make titles stand out, like using uppercase or exclamation points, or adding a parenthetical remark saying how great an article is. It's implicit in submitting something that you think it's important.

> Otherwise please use the original title, unless it is misleading or linkbait.


ok, sorry then. I've changed.


It even includes the domain, which I think is redundant.


It is redundant, and goes against the HN guidelines:

> If the original title includes the name of the site,

> please take it out, because the site name will be

> displayed after the link anyway.


updated


Which title?


The original title was: "What a beautiful code editor (brackets.io)"


Don't you think is beautiful? (:


That is not the point.



Just providing .debs is a dealbreaker. Yeah, packaging for everything is a lot of effort, just provide a tarball. Everyone can work with a tarball.



Fyi, that's not a stable build. See the notes that come with it: https://github.com/adobe/brackets/releases/tag/v0.36.0-10998


What an incredibly strange trend that I keep seeing lately of externally using sprint numbers as version numbers. Actually labeling them as Sprint numbers prominently, I mean, instead of just v35 or v.35 or something.


Funny you should mention that, because we're actually changing from Scrum to Kanban so we do not have sprints in the same sense that we had them before.

I think this numbering was started because Brackets is "pre-1.0". We'll see how our version numbering changes after we release 1.0 :)


With so many transpiled JS languages, this seems like a tough space to be in. I wouldn't use this until it works with CoffeeScript. My friend won't until it works with ClojureScript, etc. Maybe there's a simple solution I haven't thought of? But it seems like the inline editors would be modifying the generated source instead of the actual source.


As a dirty prototyping pseudo-dev, the one thing that keeps me using Coda is its native ftp/scp capabilities. I can open files on a remote server as if they were local and command-s saves them back there.

Right now it seems that none of these other editors support that function. I know I can run ssh-fs or similar, but that requires much more setup.


I mount drives and use them with whatever IDE. The big problem for me is that if someone else changes a file, then often the text editor doesn't notice... but that's pretty much the case with text editors+ftp. But most ftp programs let you open files in whatever program and save them back.


Why don't you mount SFTP as a drive? That way you can use any app with remote files. I don't use mac but a quick search shows there are tools for that just like on Windows: https://www.google.com/search?q=mac+mounting+sftp

(ExpanDrive, WebDrive, MacFusion, Transmit, sshfs)


I used to like Coda, but version 2 lost me. And when I'm working right off the server, I prefer Transmit + a real editor.


Sublime Text + SFTP plugin will let you do this.


I've tried it. Requires a local copy of the files - I found it messy.


If by local you mean temp working file, that's a given isn't it? 'Save' still saves it remotely.

However, if the (S)FTP connection is broken and reconnected you can't continue in the same editor, you need to re-open it again which frustrates me.


If I recall it required a full local cache of the remote folder.


It technically only needs a local cache of the files you intend to edit. I work from a very large remote checkout on a development server, and only have a local cache of the directories and files that matter to me.


try cyberduck. you can set the default editor for remote files.


Still not as friendly as a single app.


I've used Tailor, the Chrome port of Brackets, and it's a beautiful editor. I would love to use it full time on my Chromebook, however the Live Editing feature is broken and the Git integration is lacking. It also lacks some other standard things, like Find/Replace.

I recently found another Chrome editor, Caret, that feels a little more powerful (and more in line with how I use Sublime.) It's quite a big uglier though, unfortunately.

Caret: https://chrome.google.com/webstore/detail/caret/fljalecfjcio...

Tailor: https://chrome.google.com/webstore/detail/tailor/mfakmoghean...


Sorry, I prefer vim. "Refresh Browser on save with inotify and xdotool" http://peter-hoffmann.com/2010/refresh-browser-on-save-with-...


Just to clarify - Live Preview in Brackets is significantly fancier than plain 'live reload on save.' As you edit HTML or CSS the browser preview updates continuously: on every keystroke, even while dragging a colorpicker slider. And it does it without a full-page refresh, so if you have any state on the page it doesn't get reset.


Brackets is cool. definitely great to have it as an option. Most important for me for new additions is the multi-line / cursor editing. I use Notepad++ for that but brackets could replace notepad++ if it had it for me.

That and the other day I had this xml file I needed to look at and brackets didn't open it on Mac. Right-click open with, Brackets. It failed. Not sure why it wasn't a bad or large file at all. Text-wrangler opened it fine.


Multiple cursors are coming in CodeMirror 4 and there is already a branch[1] of Brackets that implements the next version of CodeMirror.

The problem with the XML file might be encoding, because Brackets supports only UTF-8 encoded files at the moment.

[1] https://github.com/adobe/brackets/tree/cmv4


This is amazing. I was sad that no good WYSIWYG editor existed. I was sad that Sulbime Text had no color picker. Well this is gonna be a game changer.

There is always a first phase in a project where I only code HTML and CSS. I create the layout, the scaffoldings, the different pages, etc...

And as amazing as emacs and ST3 are, it's a pain in the ass to do that part with them.

I feel like I'm gonna use Brackets a lot.


So far so good. Eager to try a couple projects on it and see if it fits.


I really like Brackets. And it's got some great plugins already. I've set mine up with a visual git sidebar, markdown preview, themes and a mini-map like Sublime Text has.


Brackets is wonderful, but it's Brackets JS Completion vs Sublime Text multi-cursor behavior for me and the latter is too useful to give up.


Interesting! Multi-cursor is one of those things that I personally tended to use only from time-to-time when Sublime was my primary editor (I'm on the Brackets team, so you can guess what I use now).

Regarding multi-cursor in Brackets:

https://groups.google.com/forum/#!topic/brackets-dev/FLMlU3P...


The most typical use is for me to abuse the heck out of command-d. This will select the current word (if none selected) and then each subsequent press of this command adds the next occurrence of the selected text to the selection. I also like the ability to use option-drag down a column for block selection when I have text from some source that needs a bit of munging on each line.

Thanks much for that link. I'll check it out.


The thing I don't get about Cmd+D is, what do you do when you get to an occurrence you don't want to include in your selection? There doesn't appear to be any "skip" shortcut -- is there?

I always prefer nice Replace All commands where you can see a condensed overview of all occurrences and then uncheck things you want to exclude. When Brackets added that it made me very happy :-)


The "skip" shortcut is Cmd+K, Cmd+D. You can also undo selection with Cmd+U to step backwards.


i prefer gruntjs with coffee, jade and sass/stylus compilers + live reload. i barely work on vanilla html/css/js


Brackets is extensible. As a result, it fully supports everything you mention.


Cool. This is like Macromedia Dreamweaver except you don't have to switch in-between tabs or open a browser and refresh!


Anyone else surprised they aren't using Adobe AIR for this project?

Are they just abandoning it or is CEF3 the new AIR?


I'm not surprised. Adobe have been pushing Air for years, nobody really likes it, I hate installing it, and the App performance is often sub-par.

By contrast Brackets feels very native. For once corporate policy didn't get in the way of building something cool!


>App performance is often sub-par

This is typically down to web developers building desktop apps without the same level of experience. There is nothing baked into AIR to make it perform poorly.


Air is slower than chrome or firefox


If you are talking about AIR as a web browser, then it runs webkit, so actually it was the same speed as Chrome when they both used the same runtime.

Now it's outdated, so I imagine Chrome is faster.


This I'd like to know. Honest question, does it use flash in any form? What language is it coded in? I see JS everywhere but how is it run?


No Flash. It's HTML, JavaScript and LESS for the stylesheets, plus Chromium and native code for things like file access and the native menus.

The "how is it run?" question is answered here, where the native code lives:

https://github.com/adobe/brackets-shell/

We do as little as possible in the native code.


I would love for it to have jinja2 syntax highlighting support as well :)


Jinja2 should be the standard template syntax in all languages.


Will this be part of Creative Cloud eventually?


There's Adobe Edge Code CC - I thought that these were pretty much off the same code base?


They are. Brackets was presented at a local js meetup a little more than a year ago; Edge code is one of the primary reasons why adobe is running this project.


So I don't understand, Brackets is their open source branch but Edge Code will be their officially supported release?


Brackets, the open source project, supplies the core of Edge Code which has added features that tie into Adobe services.

We want Brackets to be awesome and useful by itself, and to also provide the foundation for people who use the Creative Cloud.


Does it have code collapse yet?


Brackets doesn't ship with code folding, but there's an extension that adds code folding. (I haven't the extension personally, so I can't comment on how well it works...)


Any particular reason for that? It seems like it should come standard, and it's what initially made me switch back to Sublime.


I would expect us to ship code folding, but we just haven't gotten to it yet. Same for themes (for which there are also extensions that fill in the gaps).

It would be a great contribution to the project for people to pick up a feature like folding that ideally belongs in core and helps get it to "core quality" (unit tests, comments, etc.) It's possible that some extensions are already that good and we just don't know it.


I do believe that sometimes an existing extension is rolled into the core, or at least made a default extension that comes in the download.


We all know Brackets aka Bones. We all love it. Sublime sucks and Bones rocks. This isn't news.




Join us for AI Startup School this June 16-17 in San Francisco!

Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: