The Lifting

Oskar Krawczyk
Dec 1, 2015 · 3 min read

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

Image for post
Image for post

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.

Image for post
Image for post

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.

Image for post
Image for post

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.

JSFiddle Updates

[Changelog moved to Headwayapp.co/jsfiddle-changelog]

Oskar Krawczyk

Written by

Creator of @jsfiddle and http://headwayapp.co. Freshly roasted coffee buff. Front-ender. Music addict. Single-speed cyclist. Longobarder. Photographer, at times

JSFiddle Updates

[Changelog moved to Headwayapp.co/jsfiddle-changelog]

Oskar Krawczyk

Written by

Creator of @jsfiddle and http://headwayapp.co. Freshly roasted coffee buff. Front-ender. Music addict. Single-speed cyclist. Longobarder. Photographer, at times

JSFiddle Updates

[Changelog moved to Headwayapp.co/jsfiddle-changelog]

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store