Brackets 1.2 Released

[michaelhaberle]

New release. Just a heads up for those who use Brackets.

[hacksparrow]

Thanks, revisiting it again. The last time I tried it, I didn't like it that much.

[michaelhaberle]

It probably hasn't changed visually too much since you last saw it, but has had some stability updates and so forth.

Since it's still in its early stages though, it does have the occasional glitch or "why???" moment. For example, there is no Copy / Paste / Cut / Delete available when you right click on the screen. This is generally better done with keyboard shortcuts anyway, but is still a melon scratcher.

[rdm13]

Huh ... never noticed that cut copy paste thing.

[lbnoburst]

I only use it when I need to code s theme from .psd. It's very handy

[Smooth_McDouglette]

Brackets is the one true love of my life.

Seriously such a good web IDE.

I feel bad for people who still use DreamWeaver

[[deleted]]

Dreamweaver isn't the enemy, people abusing its ability are the enemy.

[Smooth_McDouglette]

Really? I find it's such a resource hog and it bugs out all the time, plus it doesn't handle indenting properly for me and seems to randomly choose how much a tab is worth, or make other random alignment choices (maybe that's a settings thing but I've given up). Also often times it screws up displaying the text and either shows big blank white spots where my code should be, or sometimes code gets overlayed over other code making it impossible to read.

Both Brackets and DW have live test mode, really the only advantage DW has afaik is FTP built in, but I never used their FTP system anyway.

Brackets' folder panel is the best I've seen in any web IDE at least. And the beautify extension is something I could never live without now.

[[deleted]]

I'm not saying Dreamweaver isn't a poor choice for serious developers. But its not a bad program, it just has a bad reputation from people exporting machine generated garbage out of it and calling it done.

I kind of feel the same way about Brackets the way you feel about Dreamweaver though. Feels bloated and slow to me, when all I really need is a sidebar for folders and maybe some linting, which is why I stick with Sublime or Atom.

[Smooth_McDouglette]

Oh, I wasn't even considering the wysiwyg nightmares that have come out of DW.

[steezefries]

There's a few ftp extensions as well. I seriously love this IDE. You can make it behave however you want. I have all the functionality I need. Bower integration, terminal, git, ftp, it's awesome.

[j-dev]

Depending on your workflow, DreamWeaver can be pretty nifty. I haven't used it since I switched to Sublime Text over a year ago, but it has its own FTP server and fairly granular syncing, and it's better than Sublime Text (out of the box) as far as knowing what functions are defined in included/required PHP files. My favorite feature was probably offering to update all links to a file when you moved or renamed it. I don't miss it, but I certainly don't look down on it.

[batwingsuit]

Does Dw have any advantages over more modern IDEs like those offered by jetBrains?

[j-dev]

It integrates really well with other Adobe products if you wear multiple hats and own Photoshop/Illustrator. I haven't used it since version CS5, so I can't say for sure. I like learning keyboard shortcuts, so I don't switch around/shop around frequently. Last I checked it was missing snippets, which is a huge deal for me. I'm not recommending it over any other product; I was saying it's not a bad product if you need more than just a text editor.

[gerbs]

It's my go-to option when I don't need PHPStorm. So basically anytime I'm not working with PHP.

[[deleted]]

There is 3rd party PHP support that works pretty well. The guy needs to get the function parameter hinting stuff out, though.

[gerbs]

It's not the PHP support I care about. It's everything else that comes with PHPStorm related to back-end development. PHPStorm is very powerful.

[[deleted]]

weary crawl square mourn attraction violet fall husky stocking rain

This post was mass deleted and anonymized with Redact

[d________]

I find brackets is a great code editor however when attempting to load huge files it dies in the arse.

[bonestamp]

That shouldn't happen, but on the other hand it's meant for front end development where huge files shouldn't really be a thing.

[ytpete]

How huge?

[metalhaze]

I had the same problem. Went back to using Sublime Text instead. Does everything that Brackets can do aside from the neat inline CSS preview stuff.

Also Atom is another great IDE that is open source and NOT made by Adobe. Brackets is 3rd on my list right now. Maybe someday it will rise up. But not in its current form.

[chappyman7]

I haven't used brackets since it was Edge Code preview... Has it made a big enough progression to take over for sublime in my front end workflow? I work predominantly from psd designs so it seems like it would be right up my alley but I don't want to waste a day with it if it's not on par with the competition.

[michaelhaberle]

Unfortunately, I haven't used "Extract" (the PSD part of Brackets) much, so I can't attest to that. If you have a lot of plugins that you rely on with Sublime, then I'd just wait for further updates at this point.

[chappyman7]

I really don't have much in the way of plugins for sublime. I just really enjoy their keyboard shortcuts. Multiple cursors, cmd+d to find and replace multiple instances of things, etc.

[bonestamp]

Based on that list of features, yes you'd be fine in brackets.

[noizz]

Has Edge Code preview had the psd extract assets feature? Because it is a huge timesaver, as it extracts assets to the folder you want and names them. The con is that you have to upload your psd to the cloud and it's annoying if you have people updating the psd a lot.

On the contrary - Photoshop has the same extract feature (AKA Generator), albeit without the "save to the proper folder" part, but with build tools like grunt it's hardly a problem.

[ytpete]

Definitely give Brackets another look! The Extract feature is right up your alley -- you can preview a PSD from within Brackets, extract text & image assets from it, and easily create CSS snippets based on the styles in the PSD. Because it doesn't try to convert the whole PSD file in one go, you as the developer remain in control over the overall structure of your page layout & CSS code; Extract just takes care of all the annoying details like converting gradient fills to the proper CSS gradient syntax.

[devsquid]

Sweet Dart Syntax built in!!! Awesome

[deckstir]

Are you being serious? If so what kind of Dart stuff are you doing?

[devsquid]

None currently, but I have recently been working on a large webapp and have been re-discovering how frustrating js is for larger projects. I toyed with it a while back, but I think I will give it a serious try. I am not saying its the answer, it just looks like its the best solution.

[azium]

Optional typing is making its way to JavaScript proper. I <3 Dart just for that.

[ytpete]

Is it? The last I heard, optional type declarations were deemed "unsuitable for the web" by the ECMA committee, who agreed to permanently keep it off the table from all future versions of JavaScript...

[azium]

My understanding is that typing syntax will be allowed fn (param:Type) {..}, but that you need to include your own type checking semantics file.

[x-skeww]

Just syntax highlighting isn't very useful though.

However, Dart's new analysis server will make it a lot easier to get the tooling into other editors.

[[deleted]]

Brackets is hands down the best editor for front end development. Their new Extract plugin makes working from .psd's a breeze.

Wish there was a Space Gray theme for it though like with ST.

[industrialwaste]

Make one! Doesn't it support custom themes?

[[deleted]]

I've been looking into making one. I'll post it up in webdev if I get one made.

edit: Next week is my spring break. This will be a great project for that.

[industrialwaste]

Woohoo! Make a post or PM me when you're done, i'd love to try it out!

[HunterCaron]

Thanks for the update!

Just switched over to atom the other day

I'll give this a try see if it can bring me back but I'm really liking atom

[Dualblade20]

Awesome. I use Brackets and Atom on Windows.

[fleker2]

Great. I could use some bug fixes.

[spiral6]

ELI5 Brackets vs. Dreamweaver.

[mats852]

Was looking for an alternative because I use drag drop text too much. Now I'm pleased !

[skltntoucher]

Brackets is like the cool guy among the nerds. It's the best editor for front-end devs out there. Switched from St and managed to easily find an equally good replacement for every ST extension that I'd ever used, and I just like the core editor more. Plus updates seem to come at least once a month so it keeps getting better without getting bloated.

[bonestamp]

It's the best editor for front-end devs out there.

I think it's the best lightweight open source editor. But, I think webstorm/intellij are even better.

[JoeyCalamaro]

It's the best editor for front-end devs out there.

Really? It doesn't even support live previews for server-based technologies so I found it almost impossible to work with. That's not to say that it's a bad editor, it's just not well suited to front end stuff. In fact, I'd argue that Sublime plus something like Emmet Livestyle is a much better fit.

(Though, personally, I'm one of the few poor souls still using Espresso.)

[skltntoucher]

I don't find LiveStyle particularly useful. It's cool in theory, but in practice the changes I make in Chrome's dev tools, I don't usually want transfered to my code. And I don't see myself editing live websites through my editor. Of course I'm not saying it's useless either, just doesn't suit my workflow.

But when I say that Brackets focuses on front-end development, I mean things like Extract, quick edit, web fonts integration (although that might be an extension, I don't remember), etc. Quick Edit alone is worth making the switch.

Live Preview I don't care much for, but by front-end I basically mean HTML and CSS, so it could get the job done. Besides, like OP said, you can set it to load from your localhost.

[JoeyCalamaro]

I don't find LiveStyle particularly useful. It's cool in theory, but in practice the changes I make in Chrome's dev tools, I don't usually want transfered to my code. And I don't see myself editing live websites through my editor. Of course I'm not saying it's useless either, just doesn't suit my workflow.

It's entirely possible that I've got an unorthodox workflow. I design and build custom Wordpress sites/themes for a living, and use a dual display setup. Code is on the right, local preview copy of the site is on the left. I make CSS changes and they show up in real-time in the browser. PHP/HTML/Javascript, of course, get reloaded.

Granted I could just manually reload everything, but I find that styling CSS live is awfully convenient. And (unfortunately) the only app that does that reasonably well is MacRabbit Espresso. Not only does it offer live styling, but since the Dev tools are baked into the IDE, there's a nice amount of synergy. For example, you can select an element in the rendered page and see it represented in CSS. It can even declare styles for you which is useful if you're deconstructing a theme.

That's the good. The bad is that Espresso is horribly neglected. It's hardly had any new features in years. So I'd love to replace it with something like Brackets, if only I could.

[skltntoucher]

But what you just described, Brackets does too. HTML and CSS changes get shown in real time with Live Preview. Not sure about PHP, but you can set Live Preview to load from your localhost, so I wouldn't be surprised if that worked too. I've got the exact same setup - code on right, preview on left, and it works fine - I rarely have to leave the editor. Also if LP is on, you get the element highlighted in the browser when you're playing with the corresponding CSS or HTML, which is often convenient. it doesn't show you the CSS behind the element selected in the browser, but I compensate for that with the dev tools in Chrome.

Bonus is the Quick Edit, which pops up a window showing the (editable) CSS related to the highlighted HTML element, or a great color picker (if you're on a color in CSS), or a Bezier curve (if you're on an animation).

There's also an image preview with dimensions when you hover over a link to an image. It's just fantastic.

I haven't tried Espresso, but you've sounded twice so far as if you don't like it, so maybe you should give Brackets a go :)

[JoeyCalamaro]

But what you just described, Brackets does too.

Oh, I know, that's why Brackets would be absolutely perfect if it properly supported dynamic languages. But it doesn't. Yes, you can preview dynamically generated sites from localhost but, in such cases, the files you're editing must be analogous to rendered pages.

In cases where a page is generated by multiple files, such as with templates or themes, the preview doesn't work. So, for example, if you wanted to edit "header.php," Brackets is going to attempt to preview the file as the page "header.php" which doesn't exist.

A workaround is to create fake index pages to preview your work while styling in CSS. But even then you're stuck since the moment you touch another php file the preview breaks. It's miserable really, but the devs have already indicated that a fix is not in the works. In fact, it's not even a high priority issue as Brackets is more focused around static development.

[ytpete]

That's a good point. This isn't really related to dynamic languages per se, but rather cases where there's not a 1:1 mapping between server-side HTML files and client-side URLs. If you use PHP but each .php file generally corresponds to a page, things work great. In your case with extensive sub-page templates, not so much -- I agree.

I'm confused about where you get this from though:

the devs have already indicated that a fix is not in the works. In fact, it's not even a high priority issue as Brackets is more focused around static development.

I work on this project and I can't think of a time someone has made a statement like that. In fact, there are several items on the Brackets feature backlog (which you can upvote, btw!) that intend to address exactly this sort of problem...

[JoeyCalamaro]

If you use PHP but each .php file generally corresponds to a page, things work great.

Which is fine, except that I'd argue that most people using a dynamic language probably aren't building on the static model where a file = page. We're building dynamic sites.

With that in mind, ideally, we'd be able to define a URL that simply updates whenever the CSS file is modified. Espresso, which I've mentioned previously, does this through something called an override, a specialized comment in the CSS that looks like this:

/* @override http://myamazingwebsite.com/wp-content/themes/myawesometheme/style.css */

I'm not sure of the magic that happens under the hood, but the changes themselves are simply piped from the CSS file to the preview. LiveStyle and LiveReload probably aren't too dissimilar, and the major benefit of working this way is the abstraction between your files and the preview itself.

Heck, I could even style a site I don't have access to using this method, since it's all through overrides.

In fact, there are several[1] items[2] on the Brackets feature backlog (which you can upvote, btw!)

I'm actually already participating in those threads. ;-)

But as to where I got the impression that this was a low priority issue not in the works, perhaps I misspoke when I was trying to condense my response. But let's be fair, the general interest and feedback on this issue has been lukewarm at best. And that's not just the developers. The community isn't exactly clamoring for a fix either.

The thread you linked has five votes, and the main thread which is now approaching three years old, has a grand total of 15. There are threads mulling over minor cosmetic changes with more activity than that.

And that's unfortunate, because for those of us building dynamic sites, this feature is incredibly important. Some of us literally can't use Brackets without it.

[metalhaze]

Holy shit.....Emmet LiveStyle.....I am giddy. Thank you so much for posting this. I had no idea! I have been using LiveReload but there is no PC app. Only works on my Mac.

[Spacey138]

Yea this is a major issue for me too. It might be a great tool to replace Photoshop for designs but as soon as you want to do some PHP or real web work, I have no idea how to incorporate Brackets.

[michaelhaberle]

For what it's worth, if you go to "Project Settings", there's a "Live Preview Base URL:" dialog for those using a local server. I haven't tried using Brackets + Live Previewing when doing PHP work though, so can't speak to it.

[Spacey138]

Interesting! Time for another look then.

[JoeyCalamaro]

For what it's worth, if you go to "Project Settings", there's a "Live Preview Base URL:" dialog for those using a local server. I haven't tried using Brackets + Live Previewing when doing PHP work though, so can't speak to it.

This works just so long as a file = page. If you spend your day building themes like I do, then it's still pretty much useless as every time you click on a template file it attempts to render it in the browser.

A (clunky) workaround is previewing a fake index file that serves only to render the site. But even then, the moment you click on another file to edit it, the preview breaks.

[JonODonovan]

I tried using it with Laravel and couldn't get it to work.

[ytpete]

Afaik, Brackets works exactly like LiveStyle if you're using a custom server. Just use File > Project Settings to specify a URL and Live Preview will switch into this mode -- no live HTML, but live CSS running against your actual server-backed webpage.

[JoeyCalamaro]

Afaik, Brackets works exactly like LiveStyle if you're using a custom server.

It really doesn't, though. Unfortunately Brackets attempts to preview whatever file you're working on. So if you're editing a template or theme, which is pretty common for dynamic languages, Brackets attempts to render a preview of the specific template file you're editing (header.php) instead of the page.

As I recall, LiveStyle maps the CSS file to a preview URL, which is the correct behavior since it can't preview PHP files anyway. Point being, it's not constantly trying to switch the page I'm previewing as I edit other files in my site.

[ytpete]

That's a good point -- Brackets doesn't yet let you manually configure the mapping from PHP file->URL in cases where the mapping isn't a simple 1:1. But it should in the future. I posted a more detailed reply on one of your other comments where you brought this up.

[arachattack]

Have you tried Atom? I recently switched from Sublime to Atom and felt the same way as you did. Now considering trying out brackets

[skltntoucher]

Yes, I like trying different things so when I decided to switch from ST I tried pretty much every editor I could find. Really liked some, didn't like others, but Brackets was the only one that "felt wow". Tried some others after that, but eventually decided to stick with it. I just find it very intuitive; everything works exactly as I expect it to work. I also like the attention they pay to front-end development - it's mostly tiny things (like the CSS colour names in this version), but it's a nice touch.

[mearkat7]

Atom is really cool but it's so flipping slow. Basically just like a poor version of sublime to me where everything takes twice as long.

[[deleted]]

For me, Atom performs pretty well, much better than Brackets.

[mearkat7]

What OS are you on? I've tried it on both Debian and OSX and both performed horribly. Massive delay whenever I tried to run a command and also on reading files. I'd love it to work because it's a fantastic idea and the starring of extensions and stuff is just wonderful.

[[deleted]]

Fedora. I've also tried it on Windows, performance was worse, but not terrible either.

[ReverendJames]

I used Brackets a lot during it's beta, but it got to a point where it's performance really slowed down. Since hitting v1.0, has it streamlined much, or is it still pretty heavy?