The Lifting

So this just happened, a JSFiddle update. There’s no denying that this doesn’t happen very often, to be more precise visual changes aren’t happening that often.

I’m calling this a lifting for a reason, as opposed to many backend changes that happened over the years, this is a purely visual (or front-endish) one.

There were a few ideas we were working towards with this update:

1. Squeeze every inch out of the UI for more editing space
2. Make the interface super-light
3. Optimize loading and rendering speed

We’ve removed some whitespace that was useless in the previous interface, like the gap between editors that was there purely for the the drag handles, which are now there but visually take just a single pixel (not it really is a pixel wide — there’s a 10 pixel overlay so it’s easier to grab the handle).

A lot of effort was put into getting the ground for removing the sidebar altogether.

Yes, the sidebar is still there, but it’ll be gone in the future updates.

For now we’ve moved some sections of the sidebar into the appropriate editor panels — for example the JavaScript panel has all the JS related options.

As it was pointed over at our Github Issues, the front-end wasn’t as optimized as it might have been. Namely the amount of assets requests made to the server.

There were 49 requests made… Less than ideal. So one night I’ve end up putting together a Gulpfile to stitch and optimize some assets together. Result, ~9 requests, and around 3x less load time. Not bad.

We’ve also figured that it’s a bit lame not to use asynchronous calls where it’s possible in 2015, so now, saving/updating/forking works asynchronously.

Some other smaller updates:

• Bumped CodeMirror version to the newest one
• Activated a few CodeMirror add-ons: matchbrackets.js, closebrackets.js, matchtags.js and closetag.js
• Indent now defaults to 2 spaces
• New syntax coloring
• Internal styles have been rewritten into PostCSS
• Added Headway widget so everyone’s up to date will upcoming updates (notice the red badge over the logo)

So, what’s next?

Two things. Both very important to me and the future of JSFiddle.

1. Last month Michał joined the team, he and myself started working full-time on the next major version of JSFiddle, a complete rewrite, full of new, awesome stuff. If you’re interested in following the progress follow Building the new JSFiddle publication.
2. While we’re working on the new JSFiddle, the current version will get the same amount of support. It’s not going anywhere for now.