

The Best Tools for UI Hacking (not jsFiddle) - williamnewton
http://williamnewton.co/blog/ui-hacking-in-the-browser/

======
surreal
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
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
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)

~~~
filearts

      "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](https://github.com/share/ShareJS)

------
jnbiche
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
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
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
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
It seems like it is geared towards building Ads instead of a generic design
tool.

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

------
chadscira
[http://dabblet.com](http://dabblet.com) is pretty cool too, it saves to gists

~~~
williamnewton
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
What about codepen, or is that just a jsfiddle alternative?

~~~
lnanek2
that's listed now anyway

------
lechevalierd3on
And what about MFiddle to have fun with MontageJS :)
[http://montagejs.github.io/mfiddle/](http://montagejs.github.io/mfiddle/)

------
IAMsterdam
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.

------
ryanatkn
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/)

------
tikwidd
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
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
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.

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

~~~
inanov
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
nice dude. you have an email list?

~~~
williamnewton
yep at the bottom of the post. thanks!

