JsFiddle: a REPL for web development | Hacker News Reader

JsFiddle: a REPL for web development

jsfiddle.net

116 pointsmustpax24 comments

Yep, JsFiddle is brilliant.

There are a few others too.

http://jsbin.com - Not as many features as JsFiddle and the preview is on a separate page. The HTML/CSS/JS isn't kept completely apart either.

http://cssdesk.com - Primarily for CSS/HTML. Preview is automatically updated.

http://mootools.net/shell/ - Similar but more Mootools-centric; fewer features etc than JsFiddle.

You can see your results on their own page by appending /show to a saved fiddle, see:

http://jsfiddle.net/amadeus/5y5nE/show/

Also, it's recommended to use jsFiddle over Mootools Shell, since MooShell is essentially a really old version of jsFiddle, and will eventually be removed from mootools.net

I was aware that you can see the results on their own page. What I meant was that not having to switch between views is one of jsfiddle's strengths over jsbin. Edited my earlier reply to remove the misleading 'but'.

Thanks for the info about MooShell. I don't use it but wasn't aware it was to be killed off.

I also wrote one like 3/4 years ago, I primarily wanted to make it easy to just paste an existing html page into it

http://pastebin.me/

(a random recent paste) http://pastebin.me/23aaa0774910cc347fc9c7c300bda31d

It really is great for fiddling with html,css,and javascript all on the same screen without having to deal with a complicated development environment or separate files.

It would be a nice platform for teaching basics, or even introducing something new.

Some Stackoverflow members use it to paste solution and prove that it works :)

How amazingly cool is this!

http://jsfiddle.net/michaelsbradleyjr/sZUtU/

I had not really tinkered with flapjax on the client-side until tonight, but jsfiddle sparked my instincts to really fiddle with something I had been delaying fiddling (or "tinkering") with.

So, thank you, jsfiddle! I think you're going to make for a powerful creativity enhancer. :-D

Would be nice to have a preloaded example - i had to look at the screen for half a minute just to sort out all the elements that don't make immediate sense if there's not context that you're accustomed to..

Here you go: http://jsfiddle.net/derek/Vjxt2/

I know that they are there - as I figured out when visiting it the first time. Just takes a bit to find it ;-)

Cool! Showing a twitter feed using YQL is a great example. Is there a gallery somewhere of cool javascript widgets?

Very nice. There was a different tool I used for prototyping html, but it wasn't as nice and intuitive as this. For now it's bookmarked so I can look at it in more depth later.

I think Panic should update Coda to allow a similar 4-square split of the window. Currently you can split the window as many times as you want, but they all have to be the same orientation (ie. You could have 4 rows or 4 columns.

But yes jsfiddle is great. Note that you can load more resources into it, like KnockoutJS, and use them to. It also does automatic version control (well, the version number increments when you press save, but the old URL still works). I first discovered it in the Stackoverflow JS chartroom, where everyone was using it. I showed a lecturer at university, and now lots of people there are 'fiddling.'

I recently wrote a little throwaway blogpost that used the embed ability of jsFiddle (http://breakfastdinnertea.co.uk/blog/keep-those-rows-line-li... - excuse the pig ugly design et al). I found it an absolute joy to work with. It also provides nice fork abilities for any ensuing discussion / counter arguments on Twitter or wherever.

JSFiddle is great for embedding code examples in a library's docs too. Highcharts uses them in the API reference, and it's outstandingly useful.

jsfiddle is really good. I like the auto indenting feature it is doing pretty well. One small feature request :) it would be better if it shows error some box or some thing. So it would be easy to quickly rectify instead of going through the syntax check somewhere else.

nice! .. one weird UI effect though - when you mouse-over one of the three HTML/CSS/Javascript boxes, the box label disappears!

on the contrary, surely a feature.

hiding the label makes it easier to edit the boxes.

A wonderful project written in MooTools- IMHO, a civilized and superior JS toolkit if your JS environment is homogenous/sane.

surely the stability of your architecture is not dependent on the library you use?

unless of course your library defines your architecture- but i wouldn't consider a library of that nature a "toolkit".

It is, to some degree. For one, you buy into certain module management systems when you choose a library like jQuery, Dojo, MooTools. Another example: you buy into unique implementations of promises which are used throughout the library. If you used jQuery before 1.5, you didn't even have them and had to use callbacks -- that definitely impacts your architecture.

MDC, use this!

The developer, Piotr Zalewa, currently works at Mozilla.

Reply on news.ycombinator.com