View all panes at once and other updates
One of the most frequent requests I get for dabblet is being able to see CSS, HTML and Result all at once, similar to how JSBin and JSFiddle work. As you probably know if you’re following this blog, I was planning to allow full customization of the number and layout of the tabs, and I’ve already implemented this in the experimental branch (albeit a bit buggily).
However, something inside me was preventing me from polishing it and pushing it to the main branch. Sometimes, allowing full customization is not the best option. It’s usually just an excuse to help UX designers avoid hard dilemmas. Who can blame them, after all, there will always be users that will disagree with any possible decision and I can understand trying to avoid that by giving full power to the user.
However, one of the basic UX principles is that what users ask is not always what they want. Giving this kind of power to users adds clutter. Clutter that can be avoided with decisions that will please the vast majority of users, even if some of them will dislike them. The fewer settings an application has, the less users will feel utterly lost while trying to configure it. I strongly believe that a setting should be a last resort, only after there is sufficient evidence that there is no decision that will please most users.
So, I decided today to simply add an “All” tab, which would display all panes at once, and delay full customization (indefinitely? Honestly, I don’t know). It shows all three panes in every view (separate, vertical split, horizontal split) with a different layout in each. The following screenshot is from the “separate” view. Since there was nothing sensible to do for that tab in that view, I picked something that seemed useful:
While I was at it, I added transitions on the panes, so that they animate when switching views or tabs.
Another change I made is that the “Behind code” mode was removed from views and is now a checkbox that applies to every view:
I didn’t add code for backwards compatibility with existing dabblets that used the old “Behind code” view, as those are very few and it’s super easy to update them.
Another small change is that now, in large screens where the top bar doesn’t autohide, the tabs are now contained inside the top bar rather than being on top of the panes:
Important: To fully get the changes you may need to hard refresh (or delete cache) and perhaps even change the view mode at least once, to clear incompatible stored settings. Yes, I could spend some time to save you from that hassle, but I guess you prefer me to spend my time in making dabblet better, right? :)
Hope you like the changes. Please note that like every update, there might be bugs at first, so I’ll be waiting for your bug reports.
