The Best Tools for UI Hacking (not jsFiddle)

http://williamnewton.co/blog/ui-hacking-in-the-browser/

by williamnewton • 12 years ago

120 30 12 years ago

williamnewton.co

iterable• 12 years ago

nice dude. you have an email list?

williamnewton3• 12 years ago

yep at the bottom of the post. thanks!

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?

rm823• 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.

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.

filearts3• 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

Touche• 12 years ago

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

grej• 12 years ago

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

RazorX• 12 years ago

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

lnanek2• 12 years ago

that's listed now anyway

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/

chadscira• 12 years ago

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

williamnewton3• 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.

tikwidd2• 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.

tikwidd2• 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?

lechevalierd3on• 12 years ago

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

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.

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.

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.

jnbiche2• 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.

filearts3• 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

jnbiche2• 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).

The Best Tools for UI Hacking (not jsFiddle)

Related Stories