Stack Snippets Upgrade: new UI

Question

Good news for those who love Stack Snippets (and also for those who don't, but use it anyway).

We improved the user experience and UI to:

• Create visual hierarchy (AKA "easy to use") in the editor and in the snippet inside the post
• Improve the visual design
• Fix some design issues

enter image description here

Snippet

Snippet - expanded

Other changes done while we were at it:

• The snippets editor doesn't scroll with the page anymore
• CSS and HTML cleanup - we were creating two popups where only one was necessary
• Hitting the "close" button (or the ESC key) now asks for confirmation only if you actually have changed something

Remember that you can always experiment with Stack Snippets in the dedicated sandbox post. Enjoy!

• user152859: Kudos! I guess the purpose of this announcement is to get feedback about the change, collect related bug reports etc, so added the tag.
• Konamiman: @ShadowWizard Indeed, feedback is always welcome. Thanks!
• TylerH: Not sure it's great UX to have the run/insert buttons on the top left, where we begin/setup the snippet details... once I've moved on to the different boxes, I have to fight instinct in order to go back to the top-left of the screen to complete what I'm doing. Normally the 'complete' or 'submit' actions are at the end or bottom of a document. What's the reasoning behind creating a left sidebar and moving everything there?

Answer 1

bug

Once you click any button in the snippet editor, the page in the background jumps to the top. E.g., see me clicking "Run":

And when you click cancel, the page jumps back. But this doesn't happen if you hit "esc", and you end up being in the top of the page.

This is because of # links, could be fixed by replacing them with #! (or any unused id). Better yet, bind those actions to buttons, not links, as Oriol suggests.

• Oriol: Please don't use #! neither. It's a frickin' button, so use <button>Run</button> instead of <a href="#" class="button">Run</a>
• nicael -misses Sha-: @Oriol Yeah, nice idea.

Answer 2

feature-request

You should move the console out of the DOM, to avoid oddities like this:

$(document).ready(function() {
 console.log('something');
 $("div").click(function(){
 $("div").hide();
 alert('WTF, console gone?..');
 })
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>CLICK ME!</div>

• Oriol: Completely agree. But this is not related to the new UI.
• nicael -misses Sha-: @Oriol Hm, probably you're right, but it's still the problem with the new UI.

Answer 3

bug

I noticed this bug before, with the old Snippet editor. I was trying to put a lot of code onto one line since I was seeing if I could use a snippet to save space.

OH NO!

When I checked to see if it was fixed with the new UI, I found that it wasn't. I am actually using a different OS this time (as the Look and Feel of the scroll bar indicates), with a different version of Chrome:

Still broken

Chrome:

• Version 49.0.2623.112 (64-bit)
• Version 50.0.2661.102 m

Here is the snippet, that produces this bug. You'll need to try editing it, and scroll down to the second line, but it should be visible:

<ul><li><s><a href="http://stackoverflow.com/search?tab=votes&amp;q=url%3a%2f%2fzi.mu">zi.mu</a></s></li><li><s><a href="http://stackoverflow.com/search?tab=votes&amp;q=url%3a%2f%2fzi.ma">zi.ma</a></s></li><li><s><a href="http://stackoverflow.com/search?tab=votes&amp;q=url%3a%2f%2fyhoo.it">yhoo.it</a></s></li><li><a href="http://stackoverflow.com/search?tab=votes&amp;q=url%3a%2f%2fyfrog.com">yfrog.com</a> 139 posts <strong>Defunct</strong></li><li><s><a href="http://stackoverflow.com/search?tab=votes&amp;q=url%3a%2f%2fyep.it">yep.it</a></s></li><li><a href="http://stackoverflow.com/search?tab=votes&amp;q=url%3a%2f%2fy.ahoo.it">y.ahoo.it</a> 31 posts, all broken YQL fiddles</li><li><s><a href="http://stackoverflow.com/search?tab=votes&amp;q=url%3a%2f%2fxurl.es">xurl.es</a></s></li><li><s><a href="http://stackoverflow.com/search?tab=votes&amp;q=url%3a%2f%2fxrl.us">xrl.us</a></s></li><li><s><a href="http://stackoverflow.com/search?tab=votes&amp;q=url%3a%2f%2fxrl.in">xrl.in</a></s></li><li><a href="http://stackoverflow.com/search?tab=votes&amp;q=url%3a%2f%2fwp.me">wp.me</a></li><li><s><a href="http://stackoverflow.com/search?tab=votes&amp;q=url%3a%2f%2furl.ie">url.ie</a></s></li><li><a href="http://stackoverflow.com/search?tab=votes&amp;q=url%3a%2f%2furl.co.uk">url.co.uk</a></li><li><a href="http://stackoverflow.com/search?tab=votes&amp;q=url%3a%2f%2furl.az">url.az</a></li><li><a href="http://stackoverflow.com/search?tab=votes&amp;q=url%3a%2f%2fu.nu">u.nu</a></li><li><a href="http://stackoverflow.com/search?tab=votes&amp;q=url%3a%2f%2ftwurl.nl">twurl.nl</a></li><li><a href="http://stackoverflow.com/search?tab=votes&amp;q=url%3a%2f%2ftwurl.cc">twurl.cc</a></li><li><a href="http://stackoverflow.com/search?tab=votes&amp;q=url%3a%2f%2ftr.im">tr.im</a></li><li><a href="http://stackoverflow.com/search?tab=votes&amp;q=url%3a%2f%2fto.ly">to.ly</a></li><li><a href="http://stackoverflow.com/search?tab=votes&amp;q=url%3a%2f%2ftnij.org">tnij.org</a></li><li><a href="http://stackoverflow.com/search?tab=votes&amp;q=url%3a%2f%2ftinyurl.com">tinyurl.com</a></li><li><a href="http://stackoverflow.com/search?tab=votes&amp;q=url%3a%2f%2ftinylink.in">tinylink.in</a></li><li><a href="http://stackoverflow.com/search?tab=votes&amp;q=url%3a%2f%2ftiny.pl">tiny.pl</a></li><li><a href="http://stackoverflow.com/search?tab=votes&amp;q=url%3a%2f%2ftiny.ly">tiny.ly</a></li><li><a href="http://stackoverflow.com/search?tab=votes&amp;q=url%3a%2f%2ftiny.cc">tiny.cc</a></li><li><a href="http://stackoverflow.com/search?tab=votes&amp;q=url%3a%2f%2ftcrn.ch">tcrn.ch</a></li><li><a href="http://stackoverflow.com/search?tab=votes&amp;q=url%3a%2f%2fta.gd">ta.gd</a></li><li><a href="http://stackoverflow.com/search?tab=votes&amp;q=url%3a%2f%2ft.co">t.co</a></li><li><a href="http://stackoverflow.com/search?tab=votes&amp;q=url%3a%2f%2ft.cn">t.cn</a></li><li><s><a href="http://stackoverflow.com/search?tab=votes&amp;q=url%3a%2f%2fsu.pr">su.pr</a></s></li><li><s><a href="http://stackoverflow.com/search?tab=votes&amp;q=url%3a%2f%2fsp2.ro">sp2.ro</a></s></li><li><a href="http://stackoverflow.com/search?tab=votes&amp;q=url%3a%2f%2fsnurl.com">snurl.com</a></li><li><a href="http://stackoverflow.com/search?tab=votes&amp;q=url%3a%2f%2fsnipurl.com">snipurl.com</a></li><li><a href="http://stackoverflow.com/search?tab=votes&amp;q=url%3a%2f%2fsnipr.com">snipr.com</a></li><li><a href="http://stackoverflow.com/search?tab=votes&amp;q=url%3a%2f%2fshrt.st">shrt.st</a> 3 posts <strong>cannot reach server</strong></li><li><a href="http://stackoverflow.com/search?tab=votes&amp;q=url%3a%2f%2fshorturl.com">shorturl.com</a></li><li><a href="http://stackoverflow.com/search?tab=votes&amp;q=url%3a%2f%2fshort.ie">short.ie</a></li><li><a href="http://stackoverflow.com/search?tab=votes&amp;q=url%3a%2f%2fshorl.com">shorl.com</a></li><li><a href="http://stackoverflow.com/search?tab=votes&amp;q=url%3a%2f%2fshar.es">shar.es</a></li><li><a href="http://stackoverflow.com/search?tab=votes&amp;q=url%3a%2f%2fsameurl.com">sameurl.com</a></li><li><s><a href="http://stackoverflow.com/search?tab=votes&amp;q=url%3a%2f%2fsafe.mn">safe.mn</a></s></li><li><a href="http://stackoverflow.com/search?tab=votes&amp;q=url%3a%2f%2fpost.ly">post.ly</a></li><li><a href="http://stackoverflow.com/search?tab=votes&amp;q=url%3a%2f%2fping.fm">ping.fm</a></li><li><a href="http://stackoverflow.com/search?tab=votes&amp;q=url%3a%2f%2fow.ly">ow.ly</a> 55 results</li><li><a href="http://stackoverflow.com/search?tab=votes&amp;q=url%3a%2f%2fom.ly">om.ly</a> 1 result, cannot reach server</li><li><a href="http://stackoverflow.com/search?tab=votes&amp;q=url%3a%2f%2fnyti.ms">nyti.ms</a></li><li><a href="http://stackoverflow.com/search?tab=votes&amp;q=url%3a%2f%2fnsfw.in">nsfw.in</a></li><li><s><a href="http://stackoverflow.com/search?tab=votes&amp;q=url%3a%2f%2fmoby.to">moby.to</a></s></li>
<li><a href="http://stackoverflow.com/search?tab=votes&amp;q=url%3a%2f%2fmigre.me">migre.me</a></li>
<li><a href="http://stackoverflow.com/search?tab=votes&amp;q=url%3a%2f%2flnkd.in">lnkd.in</a></li>
<li><s><a href="http://stackoverflow.com/search?tab=votes&amp;q=url%3a%2f%2flinkbun.ch">linkbun.ch</a></s></li>
<li><s><a href="http://stackoverflow.com/search?tab=votes&amp;q=url%3a%2f%2flinkbee.com">linkbee.com</a></s></li>
<li><s><a href="http://stackoverflow.com/search?tab=votes&amp;q=url%3a%2f%2fliip.to">liip.to</a></s></li>
<li><s><a href="http://stackoverflow.com/search?tab=votes&amp;q=url%3a%2f%2fkrunchd.com">krunchd.com</a></s></li>
<li><s><a href="http://stackoverflow.com/search?tab=votes&amp;q=url%3a%2f%2fkorta.nu">korta.nu</a></s></li>
<li><a href="http://stackoverflow.com/search?tab=votes&amp;q=url%3a%2f%2fj.mp">j.mp</a> 381 results</li>
<li><a href="http://stackoverflow.com/search?tab=votes&amp;q=url%3a%2f%2fis.gd">is.gd</a> 519 results</li>
<li><a href="http://stackoverflow.com/search?tab=votes&amp;q=url%3a%2f%2fhurl.me">hurl.me</a></li>
<li><s><a href="http://stackoverflow.com/search?tab=votes&amp;q=url%3a%2f%2fhuff.to">huff.to</a></s></li>
<li><a href="http://stackoverflow.com/search?tab=votes&amp;q=url%3a%2f%2fgoo.gl">goo.gl</a> 5,257 results</li>
<li><s><a href="http://stackoverflow.com/search?tab=votes&amp;q=url%3a%2f%2ffwd4.me">fwd4.me</a></s></li>
<li><a href="http://stackoverflow.com/search?tab=votes&amp;q=url%3a%2f%2fflic.kr">flic.kr</a> 81 results</li>
<li><s><a href="http://stackoverflow.com/search?tab=votes&amp;q=url%3a%2f%2ffff.to">fff.to</a></s></li>
<li><s><a href="http://stackoverflow.com/search?tab=votes&amp;q=url%3a%2f%2fff.im">ff.im</a></s></li>
<li><a href="http://stackoverflow.com/search?tab=votes&amp;q=url%3a%2f%2ffb.me">fb.me</a></li>
<li><s><a href="http://stackoverflow.com/search?tab=votes&amp;q=url%3a%2f%2ffav.me">fav.me</a></s></li>
<li><a href="http://stackoverflow.com/search?tab=votes&amp;q=url%3a%2f%2feepurl.com">eepurl.com</a></li>
<li><s><a href="http://stackoverflow.com/search?tab=votes&amp;q=url%3a%2f%2fdoiop.com">doiop.com</a></s></li>
<li><a href="http://stackoverflow.com/search?tab=votes&amp;q=url%3a%2f%2fdlvr.it">dlvr.it</a></li>
<li><s><a href="http://stackoverflow.com/search?tab=votes&amp;q=url%3a%2f%2fdisq.us">disq.us</a></s></li>
<li><a href="http://stackoverflow.com/search?tab=votes&amp;q=url%3a%2f%2fdigg.com">digg.com</a></li>
<li><s><a href="http://stackoverflow.com/search?tab=votes&amp;q=url%3a%2f%2fdigbig.com">digbig.com</a></s></li>
<li><s><a href="http://stackoverflow.com/search?tab=votes&amp;q=url%3a%2f%2fdecenturl.com">decenturl.com</a></s></li>
<li><s><a href="http://stackoverflow.com/search?tab=votes&amp;q=url%3a%2f%2fcutt.us">cutt.us</a></s></li>
<li><s><a href="http://stackoverflow.com/search?tab=votes&amp;q=url%3a%2f%2fcot.ag">cot.ag</a></s></li>
<li><s><a href="http://stackoverflow.com/search?tab=votes&amp;q=url%3a%2f%2fcli.gs">cli.gs</a></s></li>
<li><s><a href="http://stackoverflow.com/search?tab=votes&amp;q=url%3a%2f%2fclck.ru">clck.ru</a></s></li>
<li><a href="http://stackoverflow.com/search?tab=votes&amp;q=url%3a%2f%2fcl.ly">cl.ly</a></li>
<li><a href="http://stackoverflow.com/search?tab=votes&amp;q=url%3a%2f%2fchilp.it">chilp.it</a></li>
<li><a href="http://stackoverflow.com/search?tab=votes&amp;q=url%3a%2f%2fbudurl.com">budurl.com</a></li>
<li><a href="http://stackoverflow.com/search?tab=votes&amp;q=url%3a%2f%2fbit.ly">bit.ly</a> 4,242 results</li>
<li><a href="http://stackoverflow.com/search?tab=votes&amp;q=url%3a%2f%2fbinged.it">binged.it</a></li>
<li><a href="http://stackoverflow.com/search?tab=votes&amp;q=url%3a%2f%2fbacn.me">bacn.me</a> 1 post, @pinged author</li>
<li><s><a href="http://stackoverflow.com/search?tab=votes&amp;q=url%3a%2f%2farst.ch">arst.ch</a></s></li>
<li><a href="http://stackoverflow.com/search?tab=votes&amp;q=url%3a%2f%2falturl.com">alturl.com</a></li>
<li><a href="http://stackoverflow.com/search?tab=votes&amp;q=url%3a%2f%2fafx.cc">afx.cc</a> 1 post, @pinged author</li>
<li><s><a href="http://stackoverflow.com/search?tab=votes&amp;q=url%3a%2f%2fadjix.com">adjix.com</a></s></li>
<li><a href="http://stackoverflow.com/search?tab=votes&amp;q=url%3a%2f%2fadf.ly">adf.ly</a></li>
<li><s><a href="http://stackoverflow.com/search?tab=votes&amp;q=url%3a%2f%2f4sq.com">4sq.com</a></s> (Note that search displays results due to <a href="https://meta.stackoverflow.com/questions/319466">a bug I already found</a>)</li>
<li><s><a href="http://stackoverflow.com/search?tab=votes&amp;q=url%3a%2f%2f3.ly">3.ly</a></s></li>
<li><s><a href="http://stackoverflow.com/search?tab=votes&amp;q=url%3a%2f%2f0rz.tw">0rz.tw</a></s></li>
</ul>

It's not a huge bug, but I'd still like for it to be resolved.

---

Another thing that's annoying is that whenever I click on a button in the preview, say to show/hide the code snippet, I am sent back up to the edit window, which is annoying.

• Konamiman: Sorry but status-declined

Answer 4

feature-request (or bug)

The reset button should ask for confirmation (as does the cancel button already), so as not to leave the user (削除) regretting about the vanished code (削除ここまで) having to click ctrl-z on each text box.

• nicael -misses Sha-: Or maybe cmd-z does work there? Should check with computer.

Answer 5

status-completed Fixed. That post just needed to be regenerated by using the latest version of our markdown processor.

---

bug

The buttons don't always seem equally sized. Also, sometimes a border is missing, which might be the root cause.

For example:

enter image description here

vs.

enter image description here

• Konamiman: Fixed. That post just needed to be regenerated by using the latest version of our markdown processor.

Answer 6

bug

This is an old problem, but it's annoying I get the popup saying the snippet editor isn't supported in mobiles, and this is happening only if I have the page zoomed in (i.e., simple pinching).

So to launch the editor, I actually have to zoom out completely, click the tiny icon, and then zoom in. It does work properly, why should I do excess action in order to gain access to it. Probably you should consider adding a notice in the editor itself (visible only on mobile), stating that there might be some problems using it (I have faced none so far).

Answer 7

bug

Loads of text bury "html" (or any other, depends on the box) label once you remove focus from the box.

The fix is to fix the z-index and add a semi-transperent background to the label. Or probably hide the label together, since it's probably not relevant if the user got that the box is for html.

Answer 8

feature-request

It would be probably a good idea to move [cancel] towards other action buttons, first time I tried the new design I was bugged for a while looking where was it hiding.

Or/and if the [cancel] isn't against, maybe color it with red?

Answer 9

feature-request

Provide an enlargeble box containing the question, so as I don't have to close the snippet editor, look at the question and open it again.

To clarify what I mean: such a box is already displayed in the non-inline answer editor:

• user152859: Would prefer to make the snippet editor draggable, or add minimize button.
• nicael -misses Sha-: @Sha or make it again possible to scroll it away.