The Best Tools for UI Hacking (not jsFiddle)

surreal 12 years 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 12 years 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.

filearts 12 years 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

2: http://embed.plnkr.co/TUbrV6UdmTgl61eAlRj4/preview

filearts 12 years ago | | |

  "Wow, plunker seems really nice. You really do make a strong case with the package catalogue."

Thanks!

Server-side processing:

If you make a style.less file and link to style.css from your markup, the less will be transpiled by the preview server. This applies to most compiled web languages (including ES6: script.es6.js -> script.js). If something is missing, I'll do my best to add it.

Collaborative editing:

Yes, this is true collaborative editing thanks to ShareJS [1]. However, at the moment, I have an issue hidden away somewhere whereby a streaming session may be corrupted when several users are concurrently editing. I have been unable to boil it down to a reproducible case though.

1: https://github.com/share/ShareJS

rm82 12 years ago | | |

Wow, plunker seems really nice. You really do make a strong case with the package catalogue.

Some questions though:

Would you consider adding automatic server-side proccessing in the future based on file-extension? For example, compiling .less to .css on the fly?

I think, one of the more interesting directions of a web-based IDE is that they can stop pretending to be a file-editor on a file-system.

I also notice streams. Is this true collaborative editing?

williamnewton 12 years ago | | |

+1 for plunker next, hell yeah. Thanks for sharing.

Uehreka 12 years 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 12 years 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.

Touche 12 years ago | |

Many of these are open source, which jsfiddle is not.

jnbiche 12 years 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 12 years 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

[2]: http://plnkr.co/edit/?p=options

jnbiche 12 years 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).

Xdes 12 years 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 12 years ago | |

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

grej 12 years ago |

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

chadscira 12 years ago |

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

williamnewton 12 years 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.

RazorX 12 years ago |

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

lnanek2 12 years ago | |

that's listed now anyway

lechevalierd3on 12 years ago |

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

IAMsterdam 12 years ago |

I use cactusformac.com and as a non- technical guy i was stil able to upload my project (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.

ryanatkn 12 years 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/

tikwidd 12 years 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 12 years ago | |

I believe Cloud9 (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 12 years 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 12 years ago | |

I wonder what sort of magic GitHUb integration http://atom.io has in store for us?

rimantas 12 years ago |

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

inanov 12 years 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.

iterable 12 years ago |

nice dude. you have an email list?

williamnewton 12 years ago | |

yep at the bottom of the post. thanks!