Re: [Wikitech-l] Syntax-highlighting JS CSS code editor gadget embedding Ace
Very cool. Especially given the development trajectory of Ace to become the eclipse of web IDEs there will be a lot of interesting possibilities as we could develop our own mediaWiki centric plugins for the platform. I can't help but think about where this is ideally headed ;) A gitorius type system for easy branching with mediaWiki.org code review style tools, with in browser editing. With seemless workflows for going from per user developing and testing on the live site, to commits to your personal repository, to being reviewed and tested by other developers, to being enabled by interested users, to being enabled by default if so desired. A lot of these workflows could be prototyped without many complicated infrastructure improvements. Since this basic process is already happening in a round about way ... ( sometimes in a round about broken way ) A developer gadget could include a simple system for switching between local checkout of the scripts and support pushing a particular local copy live or in the case of the online Ace editor, bootstrapping a particular page with the state of your script ( using the draft extension concept ) so we don't have to save every edit when you want to test your code. We could specify a path structure within our existing svn to keep in sync with all gadgets and site scripts, then have our 'developer gadget' understand that path structure so you could seamlessly switch between the local and live gadget. ( I was manually doing something similar in my gadget development ). This could also help encourage gadget centralisation. We could then also link into the code review system for every site script and gadget with one click import of a particular version of the script ( ideally once the script has been seen by other developers ). Svn commits would not nessisarally be automatically be pushed to the wiki but edits to the wiki page would always be pushed to the svn. Or maybe a sign off in code review results in the push from svn to wiki, but would not want to slow down fixes getting pushed out. We would have to see what workflows work best for the community. mmm ... this would would probably work better with git :P ... but certainly is not a show stopper to experimentation in improving these workflows. peace, --michael On 04/12/2011 07:40 PM, Brion Vibber wrote: While pondering some directions for rapid prototyping of new UI stuff, I found myself lamenting the difficulty of editing JS and CSS code for user/site scripts and gadgets: * lots of little things to separately click and edit for gadgets * no syntax highlighting in the edit box * no indication of obvious syntax errors, leading to frequent edit-preview cycles (especially if you have to turn the gadget back off to edit successfully!) * no automatic indentation! * can't use the tab key Naturally, I thought it might be wise to start doing something about it. I've made a small gadget script which hooks into editing of JS and CSS pages, and embeds the ACE code editor (http://ace.ajax.org -- a component of the Cloud9 IDE, formerly Skywriter formerly Mozilla Bespin). This doesn't fix the usability issues in Special:Gadgets, but it's a heck of a lot more pleasant to edit the gadget's JS and CSS once you get there. :) The gadget is available on www.mediawiki.org on the 'Gadgets' tab of preferences. Note that I'm currently loading the ACE JavaScript from toolserver.org, so you may see a mixed-mode content warning if you're editing via secure.wikimedia.org. (Probably an easy fix.) Go try it out! http://www.mediawiki.org/wiki/MediaWiki:Gadget-CodeEditor.js IE 8 kind of explodes and I haven't had a chance to test IE9 yet, but it seems pretty consistently nice on current Firefox and Chrome and (barring some cut-n-paste troubles) Opera. I'd really love to be able to use more content-specific editing tools like this, and using Gadgets is a good way to make this sort of tool available for testing in a real environment -- especially once we devise some ways to share gadgets across all sites more easily. I'll be similarly Gadget-izing the SVG-Edit widget that I've previously done as an extension so folks can play with it while it's still experimental, but we'll want to integrate them better as time goes on. -- brion ___ Wikitech-l mailing list Wikitech-l@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/wikitech-l ___ Wikitech-l mailing list Wikitech-l@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/wikitech-l
Re: [Wikitech-l] Syntax-highlighting JS CSS code editor gadget embedding Ace
On Wed, Apr 13, 2011 at 7:23 AM, Michael Dale md...@wikimedia.org wrote: Very cool. Especially given the development trajectory of Ace to become the eclipse of web IDEs there will be a lot of interesting possibilities as we could develop our own mediaWiki centric plugins for the platform. I can't help but think about where this is ideally headed ;) A gitorius type system for easy branching with mediaWiki.org code review style tools, with in browser editing. With seemless workflows for going from per user developing and testing on the live site, to commits to your personal repository, to being reviewed and tested by other developers, to being enabled by interested users, to being enabled by default if so desired. [snip lots of awesome sauce] I, for one, welcome our new integrated development overlords! :D I started up a page of notes and smaller steps on the road to awesomeness which we can start expanding on: http://www.mediawiki.org/wiki/Gadget_Studio The main things I want to hit in the immediate future are syntax highlighting (including clear detection of parse errors, which I don't think Ace does yet) for editing gadgets and site user scripts. For the upcoming parser stuff we'll want to do lots of experiments, and rapid prototyping the JavaScript-side implementations seems like a good way to get stuff into preliminary testing quickly, so being able to tweak code and immediately re-run it on something is going to be nice. I like the idea of being able to work on a core or extension JS module in-place too though, that could be interesting. :) Not everything will be amenable to being reloaded in the middle of a page view, but things that are could benefit from that kind of testing turnover. -- brion ___ Wikitech-l mailing list Wikitech-l@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/wikitech-l
Re: [Wikitech-l] Syntax-highlighting JS CSS code editor gadget embedding Ace
Just came across jsfiddle ( http://jsfiddle.net/ ) via d3 ( https://github.com/mbostock/d3 ) http://jsfiddle.net/mbostock/EVnvj/ Uses CodeMirror http://codemirror.net/ -J -Original Message- From: wikitech-l-boun...@lists.wikimedia.org [mailto:wikitech-l-boun...@lists.wikimedia.org] On Behalf Of Brion Vibber Sent: 13 April 2011 18:31 To: Wikimedia developers Subject: Re: [Wikitech-l] Syntax-highlighting JS CSS code editor gadget embedding Ace On Wed, Apr 13, 2011 at 7:23 AM, Michael Dale md...@wikimedia.org wrote: Very cool. Especially given the development trajectory of Ace to become the eclipse of web IDEs there will be a lot of interesting possibilities as we could develop our own mediaWiki centric plugins for the platform. I can't help but think about where this is ideally headed ;) A gitorius type system for easy branching with mediaWiki.org code review style tools, with in browser editing. With seemless workflows for going from per user developing and testing on the live site, to commits to your personal repository, to being reviewed and tested by other developers, to being enabled by interested users, to being enabled by default if so desired. [snip lots of awesome sauce] I, for one, welcome our new integrated development overlords! :D I started up a page of notes and smaller steps on the road to awesomeness which we can start expanding on: http://www.mediawiki.org/wiki/Gadget_Studio The main things I want to hit in the immediate future are syntax highlighting (including clear detection of parse errors, which I don't think Ace does yet) for editing gadgets and site user scripts. For the upcoming parser stuff we'll want to do lots of experiments, and rapid prototyping the JavaScript-side implementations seems like a good way to get stuff into preliminary testing quickly, so being able to tweak code and immediately re-run it on something is going to be nice. I like the idea of being able to work on a core or extension JS module in-place too though, that could be interesting. :) Not everything will be amenable to being reloaded in the middle of a page view, but things that are could benefit from that kind of testing turnover. -- brion ___ Wikitech-l mailing list Wikitech-l@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/wikitech-l ___ Wikitech-l mailing list Wikitech-l@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/wikitech-l
Re: [Wikitech-l] Syntax-highlighting JS CSS code editor gadget embedding Ace
How about disable the editable mode when user views source (if he/she can not edit the page)? 2011/4/13 Brion Vibber br...@pobox.com While pondering some directions for rapid prototyping of new UI stuff, I found myself lamenting the difficulty of editing JS and CSS code for user/site scripts and gadgets: * lots of little things to separately click and edit for gadgets * no syntax highlighting in the edit box * no indication of obvious syntax errors, leading to frequent edit-preview cycles (especially if you have to turn the gadget back off to edit successfully!) * no automatic indentation! * can't use the tab key Naturally, I thought it might be wise to start doing something about it. I've made a small gadget script which hooks into editing of JS and CSS pages, and embeds the ACE code editor (http://ace.ajax.org -- a component of the Cloud9 IDE, formerly Skywriter formerly Mozilla Bespin). This doesn't fix the usability issues in Special:Gadgets, but it's a heck of a lot more pleasant to edit the gadget's JS and CSS once you get there. :) The gadget is available on www.mediawiki.org on the 'Gadgets' tab of preferences. Note that I'm currently loading the ACE JavaScript from toolserver.org, so you may see a mixed-mode content warning if you're editing via secure.wikimedia.org. (Probably an easy fix.) Go try it out! http://www.mediawiki.org/wiki/MediaWiki:Gadget-CodeEditor.js IE 8 kind of explodes and I haven't had a chance to test IE9 yet, but it seems pretty consistently nice on current Firefox and Chrome and (barring some cut-n-paste troubles) Opera. I'd really love to be able to use more content-specific editing tools like this, and using Gadgets is a good way to make this sort of tool available for testing in a real environment -- especially once we devise some ways to share gadgets across all sites more easily. I'll be similarly Gadget-izing the SVG-Edit widget that I've previously done as an extension so folks can play with it while it's still experimental, but we'll want to integrate them better as time goes on. -- brion ___ Wikitech-l mailing list Wikitech-l@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/wikitech-l ___ Wikitech-l mailing list Wikitech-l@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/wikitech-l
Re: [Wikitech-l] Syntax-highlighting JS CSS code editor gadget embedding Ace
I never liked jsLint... tries to enforce some overzealous conventions. I've seen some comments on JSHint. Haven't tried it, but it looks nice, lets you decide your coding standard. ~Daniel Friesen (Dantman, Nadir-Seen-Fire) [http://daniel.friesen.name] On 11-04-12 08:50 PM, Ryan Kaldari wrote: Awesome. It seems to work well in FF4. Now we just need to tack on a jsLint button :) (Although we would have to get an exception to their good not evil licensing clause!) Ryan Kaldari On 4/12/11 5:40 PM, Brion Vibber wrote: While pondering some directions for rapid prototyping of new UI stuff, I found myself lamenting the difficulty of editing JS and CSS code for user/site scripts and gadgets: * lots of little things to separately click and edit for gadgets * no syntax highlighting in the edit box * no indication of obvious syntax errors, leading to frequent edit-preview cycles (especially if you have to turn the gadget back off to edit successfully!) * no automatic indentation! * can't use the tab key Naturally, I thought it might be wise to start doing something about it. I've made a small gadget script which hooks into editing of JS and CSS pages, and embeds the ACE code editor (http://ace.ajax.org -- a component of the Cloud9 IDE, formerly Skywriter formerly Mozilla Bespin). This doesn't fix the usability issues in Special:Gadgets, but it's a heck of a lot more pleasant to edit the gadget's JS and CSS once you get there. :) The gadget is available on www.mediawiki.org on the 'Gadgets' tab of preferences. Note that I'm currently loading the ACE JavaScript from toolserver.org, so you may see a mixed-mode content warning if you're editing via secure.wikimedia.org. (Probably an easy fix.) Go try it out! http://www.mediawiki.org/wiki/MediaWiki:Gadget-CodeEditor.js IE 8 kind of explodes and I haven't had a chance to test IE9 yet, but it seems pretty consistently nice on current Firefox and Chrome and (barring some cut-n-paste troubles) Opera. I'd really love to be able to use more content-specific editing tools like this, and using Gadgets is a good way to make this sort of tool available for testing in a real environment -- especially once we devise some ways to share gadgets across all sites more easily. I'll be similarly Gadget-izing the SVG-Edit widget that I've previously done as an extension so folks can play with it while it's still experimental, but we'll want to integrate them better as time goes on. -- brion -- ~Daniel Friesen (Dantman, Nadir-Seen-Fire) [http://daniel.friesen.name] ___ Wikitech-l mailing list Wikitech-l@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/wikitech-l
Re: [Wikitech-l] Syntax-highlighting JS CSS code editor gadget embedding Ace
Yes, JSHint looks more reasonable, although it inherits the same good not evil license-cruft. Sigh. Ryan Kaldari On 4/12/11 9:20 PM, Daniel Friesen wrote: I never liked jsLint... tries to enforce some overzealous conventions. I've seen some comments on JSHint. Haven't tried it, but it looks nice, lets you decide your coding standard. ~Daniel Friesen (Dantman, Nadir-Seen-Fire) [http://daniel.friesen.name] On 11-04-12 08:50 PM, Ryan Kaldari wrote: Awesome. It seems to work well in FF4. Now we just need to tack on a jsLint button :) (Although we would have to get an exception to their good not evil licensing clause!) Ryan Kaldari On 4/12/11 5:40 PM, Brion Vibber wrote: While pondering some directions for rapid prototyping of new UI stuff, I found myself lamenting the difficulty of editing JS and CSS code for user/site scripts and gadgets: * lots of little things to separately click and edit for gadgets * no syntax highlighting in the edit box * no indication of obvious syntax errors, leading to frequent edit-preview cycles (especially if you have to turn the gadget back off to edit successfully!) * no automatic indentation! * can't use the tab key Naturally, I thought it might be wise to start doing something about it. I've made a small gadget script which hooks into editing of JS and CSS pages, and embeds the ACE code editor (http://ace.ajax.org -- a component of the Cloud9 IDE, formerly Skywriter formerly Mozilla Bespin). This doesn't fix the usability issues in Special:Gadgets, but it's a heck of a lot more pleasant to edit the gadget's JS and CSS once you get there. :) The gadget is available on www.mediawiki.org on the 'Gadgets' tab of preferences. Note that I'm currently loading the ACE JavaScript from toolserver.org, so you may see a mixed-mode content warning if you're editing via secure.wikimedia.org. (Probably an easy fix.) Go try it out! http://www.mediawiki.org/wiki/MediaWiki:Gadget-CodeEditor.js IE 8 kind of explodes and I haven't had a chance to test IE9 yet, but it seems pretty consistently nice on current Firefox and Chrome and (barring some cut-n-paste troubles) Opera. I'd really love to be able to use more content-specific editing tools like this, and using Gadgets is a good way to make this sort of tool available for testing in a real environment -- especially once we devise some ways to share gadgets across all sites more easily. I'll be similarly Gadget-izing the SVG-Edit widget that I've previously done as an extension so folks can play with it while it's still experimental, but we'll want to integrate them better as time goes on. -- brion ___ Wikitech-l mailing list Wikitech-l@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/wikitech-l
Re: [Wikitech-l] Syntax-highlighting JS CSS code editor gadget embedding Ace
How about Google's Closure Compiler? Don't need the minification but it does seam to give errors and warnings for code. ~Daniel Friesen (Dantman, Nadir-Seen-Fire) [http://daniel.friesen.name] On 11-04-12 09:38 PM, Ryan Kaldari wrote: Yes, JSHint looks more reasonable, although it inherits the same good not evil license-cruft. Sigh. Ryan Kaldari On 4/12/11 9:20 PM, Daniel Friesen wrote: I never liked jsLint... tries to enforce some overzealous conventions. I've seen some comments on JSHint. Haven't tried it, but it looks nice, lets you decide your coding standard. ~Daniel Friesen (Dantman, Nadir-Seen-Fire) [http://daniel.friesen.name] On 11-04-12 08:50 PM, Ryan Kaldari wrote: Awesome. It seems to work well in FF4. Now we just need to tack on a jsLint button :) (Although we would have to get an exception to their good not evil licensing clause!) Ryan Kaldari On 4/12/11 5:40 PM, Brion Vibber wrote: While pondering some directions for rapid prototyping of new UI stuff, I found myself lamenting the difficulty of editing JS and CSS code for user/site scripts and gadgets: * lots of little things to separately click and edit for gadgets * no syntax highlighting in the edit box * no indication of obvious syntax errors, leading to frequent edit-preview cycles (especially if you have to turn the gadget back off to edit successfully!) * no automatic indentation! * can't use the tab key Naturally, I thought it might be wise to start doing something about it. I've made a small gadget script which hooks into editing of JS and CSS pages, and embeds the ACE code editor (http://ace.ajax.org -- a component of the Cloud9 IDE, formerly Skywriter formerly Mozilla Bespin). This doesn't fix the usability issues in Special:Gadgets, but it's a heck of a lot more pleasant to edit the gadget's JS and CSS once you get there. :) The gadget is available on www.mediawiki.org on the 'Gadgets' tab of preferences. Note that I'm currently loading the ACE JavaScript from toolserver.org, so you may see a mixed-mode content warning if you're editing via secure.wikimedia.org. (Probably an easy fix.) Go try it out! http://www.mediawiki.org/wiki/MediaWiki:Gadget-CodeEditor.js IE 8 kind of explodes and I haven't had a chance to test IE9 yet, but it seems pretty consistently nice on current Firefox and Chrome and (barring some cut-n-paste troubles) Opera. I'd really love to be able to use more content-specific editing tools like this, and using Gadgets is a good way to make this sort of tool available for testing in a real environment -- especially once we devise some ways to share gadgets across all sites more easily. I'll be similarly Gadget-izing the SVG-Edit widget that I've previously done as an extension so folks can play with it while it's still experimental, but we'll want to integrate them better as time goes on. -- brion -- ~Daniel Friesen (Dantman, Nadir-Seen-Fire) [http://daniel.friesen.name] ___ Wikitech-l mailing list Wikitech-l@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/wikitech-l
