6 ms·

Edit like an Ace

415 points by sant0sk1 15y ago

mbrzuzy 15y ago
Finally there is support for this! I'm excited.
simonsarris 15y ago
For those following Canvas projects it is worth noting the history here, that Mozilla Bespin became Mozilla Skywriter and then ditched HTML5 Canvas altogether for divs only, finally merging with Ace.
- forgotusername 15y ago
  Have you got any links/pointers as to why they switched? I remember their use of canvas being a strategic design choice early on (with IIRC, a list of reasons why just using the DOM wouldn't work so well)
  - vmind 15y ago
    I think the main issues were accessibility, IE support without a canvas stand-in which could be very slow, and accessibility. Also, general rendering is pretty speedy on all browsers, whereas canvas rendering was pretty variable until recently (and still is for fast redraws). Also makes theming changes quite a lot easier using css. (http://groups.google.com/group/ace-internals/browse_thread/thread/fee04dd53c77c402?hl=en http://groups.google.com/group/ace-internals/browse_thread/t..., http://groups.google.com/group/ace-internals/browse_thread/thread/22ded2d4eadbff7/a4f6853c783e1279?hl=en&lnk=gst&q=canvas#a4f6853c783e1279 http://groups.google.com/group/ace-internals/browse_thread/t...)
  - simonsarris 15y ago
    Implementing good text controls in Canvas is a fool's errand. The spec itself warns against it: http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#best-practices http://www.whatwg.org/specs/web-apps/current-work/multipage/... They wanted to be ambitious and to their credit they got very far. They gave a few talks on the hurdles they had to overcome. Measuring the height of text, making their own custom scrollbars, resizing woes, etc. They did a good job with a lot of it. They admitted it was fun but too hard to get everything right. They ran into most of the problems in the spec: "Unlike Skywriter, Ace uses the DOM to render instead of the <canvas> element making it compatible with a wider range of browsers and potentially giving it a leg up in accessibility." http://mozillalabs.com/skywriter/2011/01/18/mozilla-skywriter-has-been-merged-into-ace/ http://mozillalabs.com/skywriter/2011/01/18/mozilla-skywrite... The code for Skywriter was actually really good. I used a lot of it to make my in-canvas scrollbars before moving on to my own code.
  - starwed 15y ago
    They would have preferred to go this route in the beginning. I think the main reason at the time for avoiding DOM was actually performance -- probably all the various improvements in browsers since then have changed the situation.
  - dangoor 15y ago
    I happen to know the story, since I was there for much of it. IIRC, Ben and Dion originally went the canvas route for: 1. fun 2. performance 3. total control over rendering I was never personally involved in the rendering part of Bespin. I do remember talking with Dion one day and he was telling me that he thought it would be possible to make a DOM-based renderer that performed well. We had lots of other stuff to do, though. Time passed... We rejiggered Bespin a good deal before it became Skywriter. Then, last September, I was in Berlin with Joe Walker and Patrick Walton. We were walking from the hotel to JSConf.eu and talking about accessibility and DOM-based rendering. Coincidentally, that very day Fabian Jakobs of Ajax.org showed off Cloud9 and Ace (which used DOM-based rendering and was, indeed, quite fast). I'll just note that accessibility and full internationalization are *hard, if not actually impossible, to do with pure JS in the browser alone. I recently started a feature page to start gathering information about exposing more APIs to browser content to enable the creation of fully a10y- and i18n-ready editors: https://wiki.mozilla.org/Features/Desktop/EditorAPI https://wiki.mozilla.org/Features/Desktop/EditorAPI
  - deleted 15y ago
    [deleted]
- eddieplan9 15y ago
  Anybody can shed some light on how Ace works?
compay 15y ago
I'm really happy to see this feature. Sometimes I see a small problem in somebody else's code or documentation and out of sheer laziness I don't go though the trouble of forking, cloning, editing, pushing and sending a pull request. I think this will be wonderful for exactly those situations and should help encourage more people to participate in open source.
- niels 15y ago
  The edit feature has been there for a long time. They have added an improved editor.
  - compay 15y ago
    Ha, can't believe I completely missed that.
  - bryanlarsen 15y ago
    Is github is speeding up even internet time? The edit button was only added to unowned repositories at the end of April. https://github.com/blog/844-forking-with-the-edit-button https://github.com/blog/844-forking-with-the-edit-button
    - technoweenie 15y ago
      That blog post is about automatically forking with edit. The edit button was discovered by our users nearly 3 years ago: https://github.com/blog/143-inline-file-editing https://github.com/blog/143-inline-file-editing
      - bryanlarsen 15y ago
        forking with edit is what the parent comment was talking about.
vmind 15y ago
I've contributed some changes and documentation to Ace, really awesome project, great to see it hitting Github! Support for IE<9 older browsers is a little sketchy at the moment, but hopefully greater exposure through github will see more fixes and features contributed. (Fabian Jakobs seems quite open to new features as long as they fit in with the projects goals)
dotBen 15y ago
By having this tied into github I'm beginning to see how use Ace (or similar) instead of vim/emacs as a day-to-day code edit workflow... Just fork a project to your account on github, edit in Ace, and then make a pull request when you are done. Would people do this? If not, is Ace just going to be for minor edits, etc? I'm curious how other people will use this. EDIT: people the child comments are telling me the fork is done automatically for you - cool. I need to play around with this on other projects!
- mtogo 15y ago
  Imho, if i'm going to download the code to run and test it anyway, i might as well use an editor on my computer (vim/e/sublime) and skip Ace.
- vmind 15y ago
  Ace is gradually gaining full IDE features like syntax checking, split views, and responsive behaviours such as auto-brace/bracket/parens insertion. If you want an online-only workflow, Cloud9 already offers github as a backend for an Ace powered IDE. I think Ajax.org have hired someone to work on IntelliSense style auto-complete for Cloud9, not sure if those will be suitable to be put into Ace itself.
  - rat 15y ago
    how is split views an ide feature?
- deleted 15y ago
  [deleted]
- nknight 15y ago
  Well, I just did a fork -> edit with Ace -> pull request for two little documentation fixes in a library I use. It was quite convenient. But I don't see using it for a project I frequently contribute to, unless I'm stuck away from my usual dev environment (which would be strange, since it's my laptop).
- rtomayko 15y ago
DanielRibeiro 15y ago
It would be great if it gets collaborative real time editting.
- oscilloscope 15y ago
  Check out ShareJS: https://github.com/josephg/ShareJS https://github.com/josephg/ShareJS
reustle 15y ago
I was already a huge fan of the Bespin / Cloud9ide / ace projects so this is great news!
tedjdziuba 15y ago
No. C-x k
xyzzyz 15y ago
I've checked Ace live demo[1], turned on "Emacs" keybindings and failed to see what do they have in common with Emacs, apart from the old, carpal-tunnel-syndrome-powered C-p/n/b/f movement keys. They could use an Emacs hacker to fix it up, but Emacs hackers already have perfectly fine editor, so I do not predict any great success in this field. [1] - http://ajaxorg.github.com/ace/build/kitchen-sink.html http://ajaxorg.github.com/ace/build/kitchen-sink.html
- lightcatcher 15y ago
  Agreed. If it just implemented killing and yanking (and selecting regions, which goes along with these), it would be semi-viable.
  - ajross 15y ago
    Also missing C-a/C-e. All the meta bindings are noops as far as I can tell. C-<space> doesn't work to anchor the selection. Just generally worthless.
- kemayo 15y ago
  The Vim bindings have the same issue. Sure, it's modal, and you have to hit `i` before you can insert text... but there's nearly no features when you're not in insert mode. The only one I was able to trigger off the top of my head was using `dd` to delete a line... and it didn't even yank it, so p wouldn't paste it back in. No searching, no undoing, no applying commands to multiple lines, no `.` to repeat the last action... Like the emacs mode, it feels like it was implemented to check a feature off on a list, not because someone wanted to take advantage of the things that vi/emacs do well.
  - kemayo 15y ago
    Well, I went in and submitted a pull request that'll at least give it undo as a binding and [count] args on the existing commands that it's appropriate for. https://github.com/ajaxorg/ace/pull/381 https://github.com/ajaxorg/ace/pull/381
- 15y ago
pepijndevos 15y ago
I can see how this might silently make Github into one of the best blogging platform on the planet. I run my blog (pepijndevos.nl) on Github, using its Jekyll feature, so my blog just got a much better online editor with preview functionality.
Skywing 15y ago
This is neat editor and it's cool to see how Github could eventually bill itself as your one stop shop for code editing and collaboration. My only concern is that of feature creep hurting the user experience by creating a cluttered and confusing UI. I personally feel that Github's web UI is very cluttered as it is. They possibly have one of the best user experiences that I have seen, given the large amount of data and information that they have to present and I do not think that this feature necessarily hurts it at all, but it's getting close, in my opinion. Just my two cents.
Newky 15y ago
This is a brilliant feature, and as close an example of cloud editing that I would consider using as any on the internet. Does anyone know is there anything to give this a modular editor feel like vim? If someone can deliver me an online experience with a fully functioning vim, I would be browser bound almost exclusively.
AshleysBrain 15y ago
From TFA: "If you're using a recent version of Safari, Chrome, or Firefox here's how it works.." Is there a reason they miss out Internet Explorer? Makes it sound like it's not supported or something. Is it?
- kiiski 15y ago
  Apparently IE and Opera use the old editor.
deleted 15y ago
[deleted]
sry_not4sale 15y ago
Wow, I'm in love with the idea of a "preview" tab showing you a git diff! Would love to see this feature given 1st class attention in other editors!
- josephcooney 15y ago
  Agree. Why in this day and age I need to fire up an external tool to look at diffs is beyond me. I appreciate the external tool exists (for times when I'm NOT in my editor/IDE to begin with) but I'd rather it was all baked in.
  - sry_not4sale 15y ago
    Even if it git or another scm wasn't available - just a diff of changes since the file was opened in the editor...
  - pjscott 15y ago
    If you use emacs, this is a good reason to use Magit. Your diff is just a "C-x g" away. http://www.emacswiki.org/emacs/Magit http://www.emacswiki.org/emacs/Magit
NHQ 15y ago
I use cloud9, and love it.
keyle 15y ago
This is great! I'm currently working on a small web editor called anyfnwhere. In development at the moment. check https://github.com/keyle/anyfnwhere https://github.com/keyle/anyfnwhere
enherit 15y ago
Just learn vim.
jarek-foksa 15y ago
I wonder why they have chosen Ace over CodeMirror. CodeMirror has very similar set of features, is less bloated and works on more browsers.

415 points by sant0sk1 15y ago

Finally there is support for this! I'm excited.

For those following Canvas projects it is worth noting the history here, that Mozilla Bespin became Mozilla Skywriter and then ditched HTML5 Canvas altogether for divs only, finally merging with Ace.

forgotusername 15y ago
Have you got any links/pointers as to why they switched? I remember their use of canvas being a strategic design choice early on (with IIRC, a list of reasons why just using the DOM wouldn't work so well)
- vmind 15y ago
  I think the main issues were accessibility, IE support without a canvas stand-in which could be very slow, and accessibility. Also, general rendering is pretty speedy on all browsers, whereas canvas rendering was pretty variable until recently (and still is for fast redraws). Also makes theming changes quite a lot easier using css. (http://groups.google.com/group/ace-internals/browse_thread/thread/fee04dd53c77c402?hl=en http://groups.google.com/group/ace-internals/browse_thread/t..., http://groups.google.com/group/ace-internals/browse_thread/thread/22ded2d4eadbff7/a4f6853c783e1279?hl=en&lnk=gst&q=canvas#a4f6853c783e1279 http://groups.google.com/group/ace-internals/browse_thread/t...)
- simonsarris 15y ago
  Implementing good text controls in Canvas is a fool's errand. The spec itself warns against it: http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#best-practices http://www.whatwg.org/specs/web-apps/current-work/multipage/... They wanted to be ambitious and to their credit they got very far. They gave a few talks on the hurdles they had to overcome. Measuring the height of text, making their own custom scrollbars, resizing woes, etc. They did a good job with a lot of it. They admitted it was fun but too hard to get everything right. They ran into most of the problems in the spec: "Unlike Skywriter, Ace uses the DOM to render instead of the <canvas> element making it compatible with a wider range of browsers and potentially giving it a leg up in accessibility." http://mozillalabs.com/skywriter/2011/01/18/mozilla-skywriter-has-been-merged-into-ace/ http://mozillalabs.com/skywriter/2011/01/18/mozilla-skywrite... The code for Skywriter was actually really good. I used a lot of it to make my in-canvas scrollbars before moving on to my own code.
- starwed 15y ago
  They would have preferred to go this route in the beginning. I think the main reason at the time for avoiding DOM was actually performance -- probably all the various improvements in browsers since then have changed the situation.
- dangoor 15y ago
  I happen to know the story, since I was there for much of it. IIRC, Ben and Dion originally went the canvas route for: 1. fun 2. performance 3. total control over rendering I was never personally involved in the rendering part of Bespin. I do remember talking with Dion one day and he was telling me that he thought it would be possible to make a DOM-based renderer that performed well. We had lots of other stuff to do, though. Time passed... We rejiggered Bespin a good deal before it became Skywriter. Then, last September, I was in Berlin with Joe Walker and Patrick Walton. We were walking from the hotel to JSConf.eu and talking about accessibility and DOM-based rendering. Coincidentally, that very day Fabian Jakobs of Ajax.org showed off Cloud9 and Ace (which used DOM-based rendering and was, indeed, quite fast). I'll just note that accessibility and full internationalization are *hard, if not actually impossible, to do with pure JS in the browser alone. I recently started a feature page to start gathering information about exposing more APIs to browser content to enable the creation of fully a10y- and i18n-ready editors: https://wiki.mozilla.org/Features/Desktop/EditorAPI https://wiki.mozilla.org/Features/Desktop/EditorAPI
- deleted 15y ago
  [deleted]
eddieplan9 15y ago
Anybody can shed some light on how Ace works?

compay 15y ago

I'm really happy to see this feature. Sometimes I see a small problem in somebody else's code or documentation and out of sheer laziness I don't go though the trouble of forking, cloning, editing, pushing and sending a pull request. I think this will be wonderful for exactly those situations and should help encourage more people to participate in open source.

niels 15y ago
The edit feature has been there for a long time. They have added an improved editor.
- compay 15y ago
  Ha, can't believe I completely missed that.
- bryanlarsen 15y ago
  Is github is speeding up even internet time? The edit button was only added to unowned repositories at the end of April. https://github.com/blog/844-forking-with-the-edit-button https://github.com/blog/844-forking-with-the-edit-button
  - technoweenie 15y ago
    That blog post is about automatically forking with edit. The edit button was discovered by our users nearly 3 years ago: https://github.com/blog/143-inline-file-editing https://github.com/blog/143-inline-file-editing
    - bryanlarsen 15y ago
      forking with edit is what the parent comment was talking about.

vmind 15y ago

I've contributed some changes and documentation to Ace, really awesome project, great to see it hitting Github! Support for IE<9 older browsers is a little sketchy at the moment, but hopefully greater exposure through github will see more fixes and features contributed. (Fabian Jakobs seems quite open to new features as long as they fit in with the projects goals)

dotBen 15y ago

By having this tied into github I'm beginning to see how use Ace (or similar) instead of vim/emacs as a day-to-day code edit workflow... Just fork a project to your account on github, edit in Ace, and then make a pull request when you are done. Would people do this? If not, is Ace just going to be for minor edits, etc? I'm curious how other people will use this. EDIT: people the child comments are telling me the fork is done automatically for you - cool. I need to play around with this on other projects!

mtogo 15y ago
Imho, if i'm going to download the code to run and test it anyway, i might as well use an editor on my computer (vim/e/sublime) and skip Ace.
vmind 15y ago
Ace is gradually gaining full IDE features like syntax checking, split views, and responsive behaviours such as auto-brace/bracket/parens insertion. If you want an online-only workflow, Cloud9 already offers github as a backend for an Ace powered IDE. I think Ajax.org have hired someone to work on IntelliSense style auto-complete for Cloud9, not sure if those will be suitable to be put into Ace itself.
- rat 15y ago
  how is split views an ide feature?
deleted 15y ago
[deleted]
nknight 15y ago
Well, I just did a fork -> edit with Ace -> pull request for two little documentation fixes in a library I use. It was quite convenient. But I don't see using it for a project I frequently contribute to, unless I'm stuck away from my usual dev environment (which would be strange, since it's my laptop).
rtomayko 15y ago

DanielRibeiro 15y ago

It would be great if it gets collaborative real time editting.

oscilloscope 15y ago
Check out ShareJS: https://github.com/josephg/ShareJS https://github.com/josephg/ShareJS

reustle 15y ago

I was already a huge fan of the Bespin / Cloud9ide / ace projects so this is great news!

tedjdziuba 15y ago

No. C-x k

xyzzyz 15y ago

I've checked Ace live demo[1], turned on "Emacs" keybindings and failed to see what do they have in common with Emacs, apart from the old, carpal-tunnel-syndrome-powered C-p/n/b/f movement keys. They could use an Emacs hacker to fix it up, but Emacs hackers already have perfectly fine editor, so I do not predict any great success in this field. [1] - http://ajaxorg.github.com/ace/build/kitchen-sink.html http://ajaxorg.github.com/ace/build/kitchen-sink.html

lightcatcher 15y ago
Agreed. If it just implemented killing and yanking (and selecting regions, which goes along with these), it would be semi-viable.
- ajross 15y ago
  Also missing C-a/C-e. All the meta bindings are noops as far as I can tell. C-<space> doesn't work to anchor the selection. Just generally worthless.
kemayo 15y ago
The Vim bindings have the same issue. Sure, it's modal, and you have to hit `i` before you can insert text... but there's nearly no features when you're not in insert mode. The only one I was able to trigger off the top of my head was using `dd` to delete a line... and it didn't even yank it, so p wouldn't paste it back in. No searching, no undoing, no applying commands to multiple lines, no `.` to repeat the last action... Like the emacs mode, it feels like it was implemented to check a feature off on a list, not because someone wanted to take advantage of the things that vi/emacs do well.
- kemayo 15y ago
  Well, I went in and submitted a pull request that'll at least give it undo as a binding and [count] args on the existing commands that it's appropriate for. https://github.com/ajaxorg/ace/pull/381 https://github.com/ajaxorg/ace/pull/381
15y ago

pepijndevos 15y ago

I can see how this might silently make Github into one of the best blogging platform on the planet. I run my blog (pepijndevos.nl) on Github, using its Jekyll feature, so my blog just got a much better online editor with preview functionality.

Skywing 15y ago

This is neat editor and it's cool to see how Github could eventually bill itself as your one stop shop for code editing and collaboration. My only concern is that of feature creep hurting the user experience by creating a cluttered and confusing UI. I personally feel that Github's web UI is very cluttered as it is. They possibly have one of the best user experiences that I have seen, given the large amount of data and information that they have to present and I do not think that this feature necessarily hurts it at all, but it's getting close, in my opinion. Just my two cents.

Newky 15y ago

This is a brilliant feature, and as close an example of cloud editing that I would consider using as any on the internet. Does anyone know is there anything to give this a modular editor feel like vim? If someone can deliver me an online experience with a fully functioning vim, I would be browser bound almost exclusively.

AshleysBrain 15y ago

From TFA: "If you're using a recent version of Safari, Chrome, or Firefox here's how it works.." Is there a reason they miss out Internet Explorer? Makes it sound like it's not supported or something. Is it?

kiiski 15y ago
Apparently IE and Opera use the old editor.

deleted 15y ago

[deleted]

sry_not4sale 15y ago

Wow, I'm in love with the idea of a "preview" tab showing you a git diff! Would love to see this feature given 1st class attention in other editors!

josephcooney 15y ago
Agree. Why in this day and age I need to fire up an external tool to look at diffs is beyond me. I appreciate the external tool exists (for times when I'm NOT in my editor/IDE to begin with) but I'd rather it was all baked in.
- sry_not4sale 15y ago
  Even if it git or another scm wasn't available - just a diff of changes since the file was opened in the editor...
- pjscott 15y ago
  If you use emacs, this is a good reason to use Magit. Your diff is just a "C-x g" away. http://www.emacswiki.org/emacs/Magit http://www.emacswiki.org/emacs/Magit

NHQ 15y ago

I use cloud9, and love it.

keyle 15y ago

This is great! I'm currently working on a small web editor called anyfnwhere. In development at the moment. check https://github.com/keyle/anyfnwhere https://github.com/keyle/anyfnwhere

enherit 15y ago

Just learn vim.

jarek-foksa 15y ago

I wonder why they have chosen Ace over CodeMirror. CodeMirror has very similar set of features, is less bloated and works on more browsers.