8 ms·

The Best Tools for UI Hacking (not jsFiddle)

120 points by williamnewton 13y ago

iterable 13y ago
nice dude. you have an email list?
- williamnewton 13y ago
  yep at the bottom of the post. thanks!
surreal 13y ago
Some helpful tips, thanks William. It would be helpful if you explained WHY these are better than jsfiddle though - I'm not disputing that they may well be, but most of the points you list apply to jsfiddle too making your opening remarks a little confusing. What do these do better?
- rm82 13y ago
  Well, most of those use the ACE editor component, rather than the CodeMirror editor component. I don't know why and obviously, this isn't true for everybody, but i'm always at war with CodeMirror. It auto-outdents and reformats things exactly how i do not want them. Whenever i'm forced to use CodeMirror, i'm undo-ing more than i'm typing and swearing about once every 5 seconds. So, if you are one of those people, like me, that is always getting furious at jsFiddle, try an ACE based alternative. Interestingly, once you realize that these code-editor components are quite simple to implement on a web-site, you also understand why there are 100+ jsFiddles clones. Most, if not all web-devs should be able to create one in half a day. They may think it's harder before they begin, but they will be pleasantly suprised. This is likely also, why we're seeing a new "Online IDE" every week these days. GitHub's new Atom.io editor is the first one in a long time, to not use CodeMirror or ACE at its core.
  - Uehreka 13y ago
    I love that it's easy to implement an editor in the browser these days. It means that if you have an innovative IDE concept, you can push out a prototype in a day and not have to worry about all the yak-shaving that goes into making a basic editor.
    - rm82 13y ago
      I'm actually hoping for a transition to a situation where your favorite web framework, will come with its own web-based IDE. Esspecially at the web-development side of things, IDE integration isn't optimal. It's not so much that the languages themselves need better integration; it's the frameworks, and the abstractions and tooling they bring. When it gets this easy to create a web-based IDE, why even bother trying to develop a one-size-fits-all super IDE? Why not just have a simple IDE that targets one particular framework and its (likely opiniated) workflow? I mean, right now, most of that stuff, targets the command line as their primary UI.
  - filearts 13y ago
    Given how easy it is these days to re-implement jsFiddle, I agree that it is not surprising to see clones popping up all over the place. The fact that we have access to high-quality editor components with simple API's means that we can do this sort of thought exercise in a day. What becomes interesting, though, is taking these ready-built components and trying to improve on the paradigm and the user experience. With Plunker (which was originally inspired by jsFiddle and some of its short-comings) I've been trying to build tools around the core experience to make prototyping easier for the modern web developer. Something that you won't find anywhere else is Plunker's package catalogue [1]. What is particularly unique about this is that it allows you to quickly find and 'insert' package dependencies into your markup in a way that resolves dependencies and in a version-aware fashion. These packages can be combinations of js and css. The web-based-IDE lets me take an approach that isn't viable for offline alternatives like bower and component but that is much easier from the user's perspective. A side-benefit of this approach is that all templates on Plunker can be made to auto-update to the latest (matching semver) version when they are opened or on-demand. As I continue working on Plunker, this is the sort of feature that I hope will help it distinguish itself from the hordes of look-alike clones. Right now, I'm working on a new UI for the editor to allow a more flexible approach to editing files in a column/row grid [2]. 1: http://plnkr.co/edit/?p=catalogue http://plnkr.co/edit/?p=catalogue 2: http://embed.plnkr.co/TUbrV6UdmTgl61eAlRj4/preview http://embed.plnkr.co/TUbrV6UdmTgl61eAlRj4/preview
- Touche 13y ago
  Many of these are open source, which jsfiddle is not.
grej 13y ago
For those working on d3.js visualizations, tributary.io is a great site worth checking out.
RazorX 13y ago
What about codepen, or is that just a jsfiddle alternative?
- lnanek2 13y ago
  that's listed now anyway
RazorX 13y ago
What about codepen, or is that just a jsfiddle alternative?
ryanatkn 13y ago
Another interesting one is RequireBin[1]. It lets you require npm modules from the browser via browserify and browserify-cdn. [1] http://requirebin.com/ http://requirebin.com/
chadscira 13y ago
http://dabblet.com http://dabblet.com is pretty cool too, it saves to gists
- williamnewton 13y ago
  I deliberately left dabblet out because command + shift + left (the shortcut programmed into my brain for 'select this entire line') closes the editor. Annoying as hell.
tikwidd 13y ago
It would be great to have a web-based live js editor with github integration via the github api, so I could edit files in a repo and do commits without having to leave the editor.
- Davertron 13y ago
  I believe Cloud9 (https://c9.io/ https://c9.io/) is exactly what you're asking for. Unfortunately I haven't been able to get it to clone any of my repos recently to play around with it a lot but I did try it out awhile ago and it seemed pretty decent.
  - tikwidd 13y ago
    This is perfect, thanks for the tip! I'm learning to code JS in my free time at work and I'm limited to using Chrome, so this suits my needs very well indeed.
- mkelley82 13y ago
  I wonder what sort of magic GitHUb integration http://atom.io http://atom.io has in store for us?
lechevalierd3on 13y ago
And what about MFiddle to have fun with MontageJS :) http://montagejs.github.io/mfiddle/ http://montagejs.github.io/mfiddle/
deleted 13y ago
[deleted]
teemo_cute 13y ago
I use JSBin. "I'm commenting in Hacker News which means I have a minimum IQ of 120. But in no way my above statement proves my above average intellect which can be personified in this comment. But then some may say I'm arrogant or just trolling neither of which, this sentence is too long I'm gonna end it now."
deleted 13y ago
[deleted]
- oinksoft 13y ago
  I don't understand it either. JSFiddle is great for sharing examples, but who would choose to prototype there instead of using a browser and text editor? Not sure why you deleted your comment.
  - williamnewton 13y ago
    My main concern is immediacy. There's 0 setup time, and you can instantly share your work. Especially for (relatively) novice programmers, being able to immediately link to something someone more pro can see is invaluable.
rimantas 13y ago
codeMagic.gr looks really nice. Emmet? Ability to code in SCSS and CoffeeScript? Yes, please!
- inanov 13y ago
  the developer still works on it. it's an open source project as well, I hope this gets some attention to be a better tool.
IAMsterdam 13y ago
I use cactusformac.com and as a non- technical guy i was stil able to upload my project (http://kabaal.co http://kabaal.co) on the Amazon infrastructure. Cactus even connected the DNS from AWS with my hosting service. I see realtime changes in my browser when i code and i can deploy it with just one button.
Xdes 13y ago
A designer friend uses Google Web Designer. They've noted it's gotten a lot better since the release. It also doesn't generate garbage markup like Dreamweaver or similar tools.
- Edmond 13y ago
  It seems like it is geared towards building Ads instead of a generic design tool.
jnbiche 13y ago
Do any of these browser editor/online IDEs have any sort of Vim emulation? I'd be happy with just the basic keyboard shortcuts. I know there are browser extensions that allow Vim emulation, but those are generally more oriented toward controlling the browser, rather than using an editor.
- filearts 13y ago
  The editors based on ACE[1] have a vim keybinding mode. For example, you can toggle the keybinding environment in Plunker's settings pane[2]. The reason that you may not see this more often is that implementors of ACE may simply not expose the option. [1]: http://ace.c9.io http://ace.c9.io [2]: http://plnkr.co/edit/?p=options http://plnkr.co/edit/?p=options
  - jnbiche 13y ago
    Thanks! I'll have to look into it in the ACE-based editors. Since it's Javascript, I should be able to enable it even if the implementer didn't explicitly do so (unless they ripped it out).

120 points by williamnewton 13y ago

iterable 13y ago

nice dude. you have an email list?

williamnewton 13y ago
yep at the bottom of the post. thanks!

surreal 13y ago

Some helpful tips, thanks William. It would be helpful if you explained WHY these are better than jsfiddle though - I'm not disputing that they may well be, but most of the points you list apply to jsfiddle too making your opening remarks a little confusing. What do these do better?

rm82 13y ago
Well, most of those use the ACE editor component, rather than the CodeMirror editor component. I don't know why and obviously, this isn't true for everybody, but i'm always at war with CodeMirror. It auto-outdents and reformats things exactly how i do not want them. Whenever i'm forced to use CodeMirror, i'm undo-ing more than i'm typing and swearing about once every 5 seconds. So, if you are one of those people, like me, that is always getting furious at jsFiddle, try an ACE based alternative. Interestingly, once you realize that these code-editor components are quite simple to implement on a web-site, you also understand why there are 100+ jsFiddles clones. Most, if not all web-devs should be able to create one in half a day. They may think it's harder before they begin, but they will be pleasantly suprised. This is likely also, why we're seeing a new "Online IDE" every week these days. GitHub's new Atom.io editor is the first one in a long time, to not use CodeMirror or ACE at its core.
- Uehreka 13y ago
  I love that it's easy to implement an editor in the browser these days. It means that if you have an innovative IDE concept, you can push out a prototype in a day and not have to worry about all the yak-shaving that goes into making a basic editor.
  - rm82 13y ago
    I'm actually hoping for a transition to a situation where your favorite web framework, will come with its own web-based IDE. Esspecially at the web-development side of things, IDE integration isn't optimal. It's not so much that the languages themselves need better integration; it's the frameworks, and the abstractions and tooling they bring. When it gets this easy to create a web-based IDE, why even bother trying to develop a one-size-fits-all super IDE? Why not just have a simple IDE that targets one particular framework and its (likely opiniated) workflow? I mean, right now, most of that stuff, targets the command line as their primary UI.
- filearts 13y ago
  Given how easy it is these days to re-implement jsFiddle, I agree that it is not surprising to see clones popping up all over the place. The fact that we have access to high-quality editor components with simple API's means that we can do this sort of thought exercise in a day. What becomes interesting, though, is taking these ready-built components and trying to improve on the paradigm and the user experience. With Plunker (which was originally inspired by jsFiddle and some of its short-comings) I've been trying to build tools around the core experience to make prototyping easier for the modern web developer. Something that you won't find anywhere else is Plunker's package catalogue [1]. What is particularly unique about this is that it allows you to quickly find and 'insert' package dependencies into your markup in a way that resolves dependencies and in a version-aware fashion. These packages can be combinations of js and css. The web-based-IDE lets me take an approach that isn't viable for offline alternatives like bower and component but that is much easier from the user's perspective. A side-benefit of this approach is that all templates on Plunker can be made to auto-update to the latest (matching semver) version when they are opened or on-demand. As I continue working on Plunker, this is the sort of feature that I hope will help it distinguish itself from the hordes of look-alike clones. Right now, I'm working on a new UI for the editor to allow a more flexible approach to editing files in a column/row grid [2]. 1: http://plnkr.co/edit/?p=catalogue http://plnkr.co/edit/?p=catalogue 2: http://embed.plnkr.co/TUbrV6UdmTgl61eAlRj4/preview http://embed.plnkr.co/TUbrV6UdmTgl61eAlRj4/preview
Touche 13y ago
Many of these are open source, which jsfiddle is not.

grej 13y ago

For those working on d3.js visualizations, tributary.io is a great site worth checking out.

RazorX 13y ago

What about codepen, or is that just a jsfiddle alternative?

lnanek2 13y ago
that's listed now anyway

RazorX 13y ago

What about codepen, or is that just a jsfiddle alternative?

ryanatkn 13y ago

Another interesting one is RequireBin[1]. It lets you require npm modules from the browser via browserify and browserify-cdn. [1] http://requirebin.com/ http://requirebin.com/

chadscira 13y ago

http://dabblet.com http://dabblet.com is pretty cool too, it saves to gists

williamnewton 13y ago
I deliberately left dabblet out because command + shift + left (the shortcut programmed into my brain for 'select this entire line') closes the editor. Annoying as hell.

tikwidd 13y ago

It would be great to have a web-based live js editor with github integration via the github api, so I could edit files in a repo and do commits without having to leave the editor.

Davertron 13y ago
I believe Cloud9 (https://c9.io/ https://c9.io/) is exactly what you're asking for. Unfortunately I haven't been able to get it to clone any of my repos recently to play around with it a lot but I did try it out awhile ago and it seemed pretty decent.
- tikwidd 13y ago
  This is perfect, thanks for the tip! I'm learning to code JS in my free time at work and I'm limited to using Chrome, so this suits my needs very well indeed.
mkelley82 13y ago
I wonder what sort of magic GitHUb integration http://atom.io http://atom.io has in store for us?

lechevalierd3on 13y ago

And what about MFiddle to have fun with MontageJS :) http://montagejs.github.io/mfiddle/ http://montagejs.github.io/mfiddle/

deleted 13y ago

[deleted]

teemo_cute 13y ago

I use JSBin. "I'm commenting in Hacker News which means I have a minimum IQ of 120. But in no way my above statement proves my above average intellect which can be personified in this comment. But then some may say I'm arrogant or just trolling neither of which, this sentence is too long I'm gonna end it now."

deleted 13y ago

[deleted]

oinksoft 13y ago
I don't understand it either. JSFiddle is great for sharing examples, but who would choose to prototype there instead of using a browser and text editor? Not sure why you deleted your comment.
- williamnewton 13y ago
  My main concern is immediacy. There's 0 setup time, and you can instantly share your work. Especially for (relatively) novice programmers, being able to immediately link to something someone more pro can see is invaluable.

rimantas 13y ago

codeMagic.gr looks really nice. Emmet? Ability to code in SCSS and CoffeeScript? Yes, please!

inanov 13y ago
the developer still works on it. it's an open source project as well, I hope this gets some attention to be a better tool.

IAMsterdam 13y ago

I use cactusformac.com and as a non- technical guy i was stil able to upload my project (http://kabaal.co http://kabaal.co) on the Amazon infrastructure. Cactus even connected the DNS from AWS with my hosting service. I see realtime changes in my browser when i code and i can deploy it with just one button.

Xdes 13y ago

A designer friend uses Google Web Designer. They've noted it's gotten a lot better since the release. It also doesn't generate garbage markup like Dreamweaver or similar tools.

Edmond 13y ago
It seems like it is geared towards building Ads instead of a generic design tool.

jnbiche 13y ago

Do any of these browser editor/online IDEs have any sort of Vim emulation? I'd be happy with just the basic keyboard shortcuts. I know there are browser extensions that allow Vim emulation, but those are generally more oriented toward controlling the browser, rather than using an editor.

filearts 13y ago
The editors based on ACE[1] have a vim keybinding mode. For example, you can toggle the keybinding environment in Plunker's settings pane[2]. The reason that you may not see this more often is that implementors of ACE may simply not expose the option. [1]: http://ace.c9.io http://ace.c9.io [2]: http://plnkr.co/edit/?p=options http://plnkr.co/edit/?p=options
- jnbiche 13y ago
  Thanks! I'll have to look into it in the ACE-based editors. Since it's Javascript, I should be able to enable it even if the implementer didn't explicitly do so (unless they ripped it out).