I loved JSFiddle ever since I first used it. Being able to test something almost instantly and without littering my hard drive opened new possibilities for me. I use it daily for experiments, browser bug testcases, code snippet storage, code sharing and many other things. However, there were always a few things that bugged me:
- JSFiddle is very JS oriented, as you can tell even from the name itself
- JSFiddle is heavily server-side so there’s always at least the lag of an HTTP request every time you make an action. It makes sense not to run JS on every keystroke (JSBin does it and it’s super annoying, even caused me to fall in an infinite loop once) but CSS and HTML could be updated without any such problems.
- I’m a huge tabs fan, I hate spaces for indenting with a passion.
- Every time I want to test a considerable amount of CSS3, I need to include -prefix-free as a resource and I can’t save that preference or any other (like “No library”).
So what does dabblet have that similar apps don’t? Here’s a list:
- Realtime updates, no need to press a button or anything
- Saves everything to Github gists, so even if dabblet goes away (not that I plan to!) you won’t lose your data
- No page reloads even on saving, everything is XHR-ed
- Many familiar keyboard shortcuts
- Small inline previewers for many kinds of CSS values, in particular for: colors, absolute lengths, durations, angles, easing functions and gradients. Check them all in this dabblet.
- Automatically adds prefixes with -prefix-free, to speed up testing
- Use the Alt key and the up/down arrows to increment/decrement <length>, <time> and <angle> values.
- Dabblet is open source under a NPOSL 3.0 license
- You can save anonymously even when you are logged in
- Multiple view modes: Result behind code, Split views (horizontal or vertical), separate tabs. View modes can be saved as a personal preference or in the gists (as different demos may look better with different view modes)
- Editable even from an embedded iframe (to embed just use the same dabblet URL, it will be automatically adjusted through media queries)
- It’s currently not possible to see or link to older versions of a dabblet. You can of course use Github to view them.
- It currently only works in modern, CORS-enabled browsers. Essentially Chrome, Safari and Firefox. I intend to support Opera too, once Opera 12 comes out. As for IE, I’ll bother with it when a significant percentage of web developers start using it as their main browser. Currently, I don’t know anyone that does.
- It doesn’t yet work very well on mobile but I’m working on it and it’s a top priority
- You can’t yet add other scripts like LESS or remove -prefix-free.
- Hasn’t been tested in Windows very much, so not sure what issues it might have there.
Here are some dabblets that should get you started:
Roman Komarov helped tremendously by doing QA work on dabblet. Without his efforts, it would have been super buggy and much less polished.
I’d also like to thank David Storey for coming up with the name “dabblet” and for his support throughout these 3 weeks.
Update: Dabblet has its own twitter account now: Follow @dabblet