190

You probably all know about Stack Snippets (a.k.a. "JavaScript/HTML/CSS Snippets"), which we introduced almost a year ago.

You probably also know that Stack Snippets are routinely misused for questions that have nothing to do with HTML, CSS, or JS:

So far, renaming the button has proven somewhat effective at getting more users to not use Stack Snippets when they’re not supposed to, but we’re hesitant to continue in that direction.

Why? Mainly because Stack Snippets have proven to be a fairly bulletproof way of getting new users that aren’t familiar with markdown to properly input code in their questions, which is a good thing.

Why Are You Telling Us This?

Good question!

We are considering changes to the way you include code on SO, and we need your input. Here’s what we currently have in mind (subject to change based on your feedback).

We’d merge the Stack Snippets and Code buttons into a single one. When clicked (or triggered with CtrlK), the button’s behavior would be as follows:

  • If anything is currently selected, the option would behave like the code option currently does (either indenting / dedenting, or quoting / unquoting, depending on what is currently selected).

  • If nothing is currently selected, the button will bring a modal window that would look roughly like this:

Add Code Menu

The option on the right opens a Stack Snippet. The option on the left will bring up a code editor and properly indent the code that it inserts.

We Need Your Help!

We want to make sure this change doesn’t break the existing workflows of veteran users, so we’d appreciate your feedback on whether this might break how you currently input code in your questions and answers.

If you feel your workflow might be affected, here’s what you should do: post an answer including how you currently input code, and explain why the current proposal will break your workflow (include as much detail as possible, post images or links to videos if you'd like!).

If you have more general feedback regarding Stack Snippets, or suggestions, please consider making it a separate question and linking to it in a comment here.


Once we’re confident that this change won't break the workflows of veteran users, we’ll prepare a prototype for you to test, and we’ll also test it on new users.

37
  • 115
    Will this code editor be an actual code editor (complete with real tab insertion!) or just a glorified text box? I might actually use it if I can hit tab without it going to the submit button! Commented Jul 13, 2015 at 21:40
  • 11
    SO is the big one but will this be rolled out on all sites that support snippets? I can imagine it being confusing for new users that a button works one way on SO and differently everywhere else on the network.
    – Ben
    Commented Jul 13, 2015 at 21:42
  • 5
    SO is the primary user of this feature, but we would strive to make it behave consistently across all sites @Ben.
    – Shog9
    Commented Jul 13, 2015 at 21:48
  • 1
    Can you roll some improved interface for separating individual classes / files and making it easier to export them to an external IDE? Separate MSO question as requested
    – durron597
    Commented Jul 13, 2015 at 21:50
  • 7
    @BradleyDotNET: that's a good question! To be honest, we're not there yet. Intuitively, I'm leaning towards it behaving the same way the editors work in the snippet editor (i.e. tabs usable).
    – Thomas Orozco Staff
    Commented Jul 13, 2015 at 22:04
  • 9
    I'm not entirely sure Code Edition is a valid phrase here, or at least in normal US english. I was expecting to find a new magazine or something :) Code Editors perhaps.
    – Joe
    Commented Jul 13, 2015 at 22:25
  • 2
    @Joe Huh! I blame this on my being French. Thanks!
    – Thomas Orozco Staff
    Commented Jul 13, 2015 at 22:27
  • 4
    I don't love that it feels like it's adding an extra step, but I'm not immediately coming up with a better solution. Maybe a code editor that starts as just plain code but can be "upgraded" to runnable by clicking a button? That way it starts in the common use case but can be toggled into the less common?
    – David Fullerton Mod
    Commented Jul 13, 2015 at 22:28
  • 3
    @DavidFullerton: That would take away one of the advantage though, forcing the choice. Whatever is taken as the default will be misused much. Maybe for higher-rep users... or after opt-in (though adding options is always to be avoided). Commented Jul 13, 2015 at 22:30
  • 3
    @Deduplicator hm, maybe force it the first time, remember the pref, and make it easy to toggle between?
    – David Fullerton Mod
    Commented Jul 13, 2015 at 22:40
  • 4
    Please elaborate on "properly indent".
    – PM 77-1
    Commented Jul 14, 2015 at 2:21
  • 4
    "we introduced almost a year ago." Time flies away...
    – Mr. Alien
    Commented Jul 14, 2015 at 3:31
  • 2
    So we will still have to reformat OP's badly indented source code, right? I hoped for some automatic beautifying.
    – PM 77-1
    Commented Jul 14, 2015 at 4:51
  • 17
    One thing that I'm missing for quite a long time is a way to pick a highlighter. Now, if I want to explicitly specify one, I go to advanced help, type lang, copy/paste the comment into the post, then click the example comment, go to one of the supported codes link (which is broken) and finally copy/paste an available language code. That's what might have been controlled with a combo box over the selected text. Are you considering some highlighter selection in this new UI?
    – TLama
    Commented Jul 14, 2015 at 5:44
  • 2
    @onebree You can use magic HTML comments to choose the highlight, but this does lack discoverability.
    – Thomas Orozco Staff
    Commented Jul 14, 2015 at 13:09

18 Answers 18

143

Usually I paste the code from my IDE where it's already correctly indented and formatted :).

In the rare cases where there aren't four leading spaces on the code lines (e.g. I've copied the code from the question to mess about with correct it) I'll highlight it and hit the code button (or Cntl+K if I remember).

If I'm writing code directly into the answer I'll just enter the four spaces manually.

I very rarely, if ever, hit the code button then start writing code - though if I were to be put into a code editor I might just start.

9
  • 1
    I like the code editor, but felt it was really clunky when it wasn't strictly HTML / CSS / JS (and if you were missing one it sometimes still feels incomplete..)
    – Cayce K
    Commented Jul 14, 2015 at 3:19
  • 29
    Maybe I'm just that guy, but I've been here for over 3 years and I was not aware of the code button's ability to indent already-entered content...! My poor space bar can finally get some rest. Commented Jul 14, 2015 at 9:42
  • @JamesDonnelly Do you manually indent each line using space then? (just making sure I properly understand how you use the editor). Thanks!
    – Thomas Orozco Staff
    Commented Jul 14, 2015 at 13:06
  • 5
    @ThomasOrozco if it's not a lot of code yes, that's exactly what I've been doing. Otherwise I'll write the code in a text editor (Sublime), indent it there then paste it in. Commented Jul 14, 2015 at 13:13
  • 15
    @JamesDonnelly An extra FYI, if you're just writing a few lines of code, after you've done the first line you can shift + enter to get straight to a new code line ;) Commented Jul 14, 2015 at 13:17
  • 1
    For properly indenting code blocks in numbered lists, I have developed the habit of adding a left-justified single character above the block, selecting it + the block, hitting ctrl-K to push everything 4 more spaces right, then delete the single character line. I would LOVE IT if the editor would either give me the option to indent/outdent a level, or figure it out itself.
    – Mogsdad
    Commented Jul 14, 2015 at 13:32
  • 6
    What we really need is meta.stackexchange.com/questions/125148/…
    – BoltClock Mod
    Commented Jul 14, 2015 at 15:50
  • You could still copy and paste into an in-browser editor though. Commented Jul 17, 2015 at 15:35
  • For manual indenting this userscript is a must-have: stackapps.com/questions/3247/…
    – SeinopSys
    Commented Aug 6, 2015 at 19:56
58

As ChrisF♦ answered, as long as nothing changes when code is selected and I then press the button, I doubt there's anyone whose current workflow is interrupted by your change.
At least I doubt there's anyone seriously using the site and depending on it inserting two backticks with a selected placeholder in-between.

Just a few things for the new code-editor:

  1. Allow using tab (resp. shift+tab) for indenting/unindenting all selected lines resp. simply getting to the next/previous tab-stop if nothing selected (I'll probably use it mostly without having anything selected for anything but fixing bad formatting, where it's the other way around).
    Otherwise, it just does not help that much. Tabstop should be consistent with the sites markdown, thus 4.
  2. Give a selector for the highlighter at the top, with default "auto (whatever that actually means considering the questions current tags, please show here)".
  3. Consider allowing multiple files, which means they also need names. While most MCVEs should belong in a single file, there are rare circumstances multiple languages / headers / whatever cause problems. Thus, highlighting for them should be independent of each other.
    If you add this feature, make it warn the first few times that the OP is probably failing the "minimal" part of MCVE, probably on all sites but codereview.
4
  • 9
    Point #3 concerns me. You already highlight it but I think you underestimate the problems we'd see with an explicit feature for entering multiple files. Let it be difficult: let it require multiple trips through the entire workflow. We want to promote single-file MCVEs as much as possible, surely? Commented Jul 14, 2015 at 9:50
  • Hey there. I'm not entirely sure I understood point #1 — would you mind clarifying this a bit for me? Regarding #2: makes sense, and we're thinking about it. Regarding #3: this might be more complex, and I don't think we'll want to include this as part of our first iteration on this. As a next step? Possibly.
    – Thomas Orozco Staff
    Commented Jul 14, 2015 at 13:09
  • @ThomasOrozco: Elaborated a bit. Commented Jul 14, 2015 at 13:26
  • 4
    Point #1 is something I've personally wanted for years. I always find myself typing in code into the text box and hitting tab with the intent to indent code but it skips to the next control. Usually the Save Edits or Post Answer Button
    – gideon
    Commented Jul 15, 2015 at 7:22
34

If the most common use case is not a runnable snippet (since it's only JavaScript, HTML, and CSS right now), what about an interface that goes immediately to a plain code editor, but has a big callout to toggle it to the snippet interface? That way it'll go to the right thing 80% of the time, and the other 20% it's only one more click away.

Terribad mockup (please design something better):

A user interface mockup

15
  • 11
    The most common use case is not a runnable snippet.... unless you are a JS dev. I would at least think that the tags could guide this a bit. I prefer the originally proposed choice though (stickiness wouldn't be too bad). Commented Jul 13, 2015 at 23:13
  • I don't think that "Convert to runnable snippet" button is going to work, since you could need 3 separate inputs for it. Also, on javascript / html questions, this will show the incorrect editor 80% of the times.
    – Cerbrus
    Commented Jul 14, 2015 at 7:43
  • 1
    Could it be context sensitive, i.e. respond to tags being used in the question being answered?
    – Troyseph
    Commented Jul 14, 2015 at 8:46
  • 4
    @SebastianTroy: What tags should it show the snippet one for, then? JS, HTML, CSS seem clear choices, but what about jQuery, Angular, or even node? What if the question's improperly tagged? You generally don't want a single button to show different things depending on something that's not immediately clear.
    – Cerbrus
    Commented Jul 14, 2015 at 9:15
  • @Cerbrus Good points, I was merely suggesting that the default starting editor was based on flags and that the "Convert to..." button allowed switching, maintaining the ~80% correct editor first click proposition above.
    – Troyseph
    Commented Jul 14, 2015 at 9:24
  • 2
    Could you add a Language popup and bring up the Convert ... only under the relevant languages? Commented Jul 14, 2015 at 9:48
  • 2
    This is a fair idea in principle but your notion that runnable snippets are not "the most common use case" is just plain wrong in certain tags, and making the interface change based on a tag guess is going to go wrong. I suspect this is precisely why they took the "flat" approach shown in the question's screenshot. Commented Jul 14, 2015 at 9:51
  • 1
    @BradleyDotNET While that’s true, I think even most web dev questions/answers still don’t need a runnable snippet. I would go as far to say that for most questions, having a snippet would be additional overhead that a lot people won’t go for (since you need to make sure that you can actually run it, e.g. provide the necessary HTML structure or make the output accessible). Usually, it’s just fine with one normal code block, making the snippet the rarer use case.
    – poke
    Commented Jul 14, 2015 at 16:13
  • 1
    HTML/CSS/JS, not JS/CSS/HTML.
    – bjb568
    Commented Jul 14, 2015 at 20:40
  • FWIW, I've occasionally seen code blocks posted by newbies that literally contain "enter code here". If nothing else, this proposed feature will eliminate such embarrassing gaffs.
    – PM 2Ring
    Commented Jul 15, 2015 at 10:30
  • @BradleyDotNET Here's an idea. What if converting to code snippet had a shortcut, say Ctrl+K (we could write it on the button to make it clear). This way, if you want to include a snippet, you just press Ctrl+K twice. Would you use this as a power user? (we're looking at beginners separately)
    – Thomas Orozco Staff
    Commented Jul 20, 2015 at 15:11
  • @OldCurmudgeon Gave this some thought, but this forces users to select a language first even if they know they're including a snippet, which is one more step. This might not be desirable.
    – Thomas Orozco Staff
    Commented Jul 20, 2015 at 15:17
  • @ThomasOrozco So pressing once formats as code, the second turns it into a snippet? The only potential issue I see is if I want a "quick undo" I would accidentally create a snippet. Commented Jul 21, 2015 at 14:19
  • @BradleyDotNET No, we wouldn't change what happen if anything is selected. If nothing is selected, pressing once opens the code editor (just one field), pressing twice opens the snippets editor (html + js + css). Does this make sense?
    – Thomas Orozco Staff
    Commented Jul 21, 2015 at 16:24
  • @ThomasOrozco Understood. I see it as a (potentially?) useful shortcut with no real side-effects then. Commented Jul 21, 2015 at 16:30
23

What about adding a dropdown to select the language too? While many questions can have it inferred from the tags, there are enough where it isn't that it would be useful to avoid having to hunt down the rarely-used force-language syntax ...

Then, if the chosen language is snippetable, add the additional prompt.

7
  • 8
    HTML/JS/CSS are three languages... Commented Jul 14, 2015 at 9:54
  • @LightnessRacesinOrbit I think the idea here is to have a dropdown for the other portion. The more broad range of coding languages. This way if you want to code for python you have the syntax read for it or Ruby or etc.. Just a thought on the idea. (also could be reading this very wrong and in that case.. what you said)
    – Cayce K
    Commented Jul 14, 2015 at 12:07
  • 2
    A dropdown could be difficult, as the library of supported languages grows. Do you really want to scroll through a list of 50+ languages?
    – user3373470
    Commented Jul 14, 2015 at 12:36
  • 1
    A selector similar to e.g. GitHub's gist to select the language highlight would make sense, but we'd probably want to keep it optional, and therefore I don't know about only showing the prompt if the language is snippetable. It's definitely an interesting idea, though — we'll keep that in mind.
    – Thomas Orozco Staff
    Commented Jul 14, 2015 at 14:02
  • @onebree: everybody routinely deals with "select your country" dropdowns and they have 50+ entries. Could even pre-select if a tag is a language name, even though that's not very discoverable since the tag input field is after the question box. Commented Jul 14, 2015 at 18:38
  • @onebree if you don't want to scroll through a long one-dimensional list, make it a two-dimensional list.
    – o11c
    Commented Jul 14, 2015 at 18:55
  • @onebree Alternatively, a combobox / an input with a datalist would work.
    – Schism
    Commented Jul 15, 2015 at 15:35
12

I have a userscript installed that allows Tab inline within the standard editor window, so I usually rely on that.

Ctrl-K is rarely used, and only on existing code blocks that must be formatted with an extra initial line break.

The only toolbar button I ever use is for Snippets, in the rare event I run across a question that needs it added. A memorable hotkey, as suggested, would not go amiss there.

13
  • How do you make a script for a third party website? This is something I am now interested in. I only know of scripts where you deployed the app.
    – user3373470
    Commented Jul 14, 2015 at 1:22
  • 4
    @onebree: Most browsers have built-in or plugin support for userscripts that can be configured to run on pages matched by regexes or wildcards. Instructions at the link I just added for that script. Commented Jul 14, 2015 at 2:16
  • This is awesome. Thank you. Commented Jul 14, 2015 at 8:57
  • 2
    Same here, but I use the other script for this... I'll give this one a try for sure, it looks good. Commented Jul 14, 2015 at 9:32
  • 1
    Oooh *installs* Commented Jul 14, 2015 at 9:52
  • 2
    Tabs why? Just stick to using space, tab screws up more code layouts then it solves.
    – user692942
    Commented Jul 14, 2015 at 12:07
  • 1
    @Lankymart not unless the tab key is formatted for 4 spaces. But I agree. I hate seeing code on Github where the author used tabs, because for some strange reason Github defaults to 1 tab = 8 spaces.
    – user3373470
    Commented Jul 14, 2015 at 12:35
  • @NathanTuggy Thank you for adding the link. I will try it at home, as my work computer can't handle a heavier Firefox. (Please, no Chrome conversion.)
    – user3373470
    Commented Jul 14, 2015 at 12:35
  • 1
    You never use the image-button for uploading to imgur? Because that's more complex done manually... Commented Jul 14, 2015 at 13:23
  • 1
    @LucasTrzesniewski That script is much better. Spaces, an auto update feature and a couple of extra hotkeys.
    – DanielST
    Commented Jul 14, 2015 at 13:26
  • 1
    @slicedtoad I'm not so sure... so far I love the smart enter key (autoindent on newline), which the previous script lacks. Commented Jul 14, 2015 at 13:56
  • 1
    @Deduplicator: For whatever reason, I just about never have to upload images. Fix images someone else linked, yes, but otherwise no. Commented Jul 14, 2015 at 14:02
  • 1
    By the way, here's the feature request for proper tab support, in case anyone would like to see it officially supported. Commented Jul 15, 2015 at 20:18
9

When answering to a question, the choice should not pop up if there isn't any tag in the question that is related to CSS, JavaScript, and HTML.

Maybe it would be good to use a preference option on the code editor question. I don't need it at all. So I don't want to be bothered.

EDIT:
I think the first point doesn't apply to asking question, because at least I and probably many others always fill out the tags at last.

2
  • 2
    This is a good idea, though it might make the feature more unpredictable and (therefore) more confusing. We'll keep this in mind, though!
    – Thomas Orozco Staff
    Commented Jul 14, 2015 at 14:57
  • 1
    alternatively, always display the choices but depending on tags you could give visual weight (size, color) to the likely-correct choice Commented Jul 14, 2015 at 15:32
5

I answer a lot of JavaScript questions, so I use the Stack Snippet tool often. I have grown accustomed to integrating it into my answer but it is basically just a supplement.

I always include an off site tool for executing the code in my answers where there is a decent amount of code. Now, with Stack Snippets I am not only preparing an off site demo, but an on site demo, as well as including the code in my answer.

What I would really like to see is a way to integrate these snippets as partial code blocks. As in here is part of the code, let me explain what it does. Here is the next part, you have to foo the bar here. And finally, waffles!

But as long as you do not touch the auto detect language feature of manual code formatting (as in prefixing with 4 spaces) then I don't think this change will negatively affect the way that I interact with answering.

4
  • "I always include an off site tool for executing the code in my answers where there is a decent amount of code" Sounds like there may be too much code going into your answers. Am I wrong? Commented Jul 14, 2015 at 9:54
  • @LightnessRacesinOrbit Some boilerplate code is often necessary to make a runnable JS snippet. Ideally, you've extracted the relevant bit and stuck it in a code sample. Or highlighted it in the snippet.
    – DanielST
    Commented Jul 14, 2015 at 13:36
  • "What I would really like to see is a way to integrate these snippets as partial code blocks." You can already do that. Make the stack snippet like you normally would, and choose "hide code". What you'll be left with is a button to show the snippet and run the code. Then, above that section, you insert another code section with just the code you want to show in the question. Here's an example: stackoverflow.com/questions/31343833/…
    – Kevin B
    Commented Jul 14, 2015 at 14:43
  • I can't think of another way of implementing that feature without inserting extra markup within the code itself, which in my opinion would be a bad idea, possibly causing copy/paste issues down the line.
    – Kevin B
    Commented Jul 14, 2015 at 14:48
5

I didn't even know the Code Snippets functionality existed! (I'd mostly forgotten about the Code Sample button as well)

But then my main language of choice is C, and I use tabs not spaces in my IDE so I usually mock up a MRE in my head and type it directly in the question box, adding in 4-space indents as I go.

I imagine anyone else that either already knows SO well or uses it for specific language domains, such as C/C++ only already knows the best formatting to use to produce questions and answers that don't get shouted at/flagged. For that reason I think the choice screen presented in the OP is a good idea as it will be mostly used by newer users or users that regularly switch language domains and may not want to have to remember how to format stuff for each domain on all the different sites they may use.

Certainly, if I was to decide it might be fun to start using the code tools but didn't see something very obvious showing information along these lines, I would just click the first appropriate looking button my eyes scanned to and then start typing.

In conclusion, I think the proposed change would be good. But also, while on the matter of the editor in general, add my vote for having tab add four spaces when in the editing box instead of having it make the page jump down to the submit button.

0
5

Adding a code editor for any language is a great improvement. The ability to tab and indent is long overdue.

Not all JavaScript/HTML/CSS code samples need be runnable as a snippet.

So, ctrl+K and snippet button should just open the code editor. No modal is necessary. The code editor should have:

  • A language selector, defaulting to "auto-detect language".
  • A text box for entering code that allows inserting 4 spaces via tab, indenting selected blocks, de-indenting lines via shift+tab, and maintaining indentation on enter.
  • A button for inserting code to the post.
  • A button for adding another code block (of a separate language).
  • A button for adding a web output. This button would only be visible if a JavaScript or HTML code block exists (and maybe even for CSS).
  • A button for adding console output. This button would only be visible if a JavaScript code block exists. This could be extended in the future to other languages!

This model is very extensible and has great potential. It works today by just adding a <!-- language: lang-foo --> comment based on the selected language. But, can be extended beyond that. If the language is JavaScript, additional dropdown lists can be added to include external libraries. You could add support for showing console output for other languages, a la rextester.com/runcode or ideone.com.

5

This change would not break anything of what I do.

However, I was hoping that SO would move more aggressively on allowing runnable code in other languages. It would be great to unify creation of examples and the code shown on the SO page.

I would love to see a way to build answers like this:

  1. Post an initial answer with a code snippet that is not "live"
  2. Choose the language of the code snippet to insert "boilerplate" code around the snippet, which makes it compilable. For example, in Java that would add a class and a main method around the snippet, along with some imports
  3. Edit boilerplate code to add more details, such as new classes, data members, and so on
  4. Compile and test the code snippet
  5. Choose parts of the snippet that should be shown/hidden
  6. Choose whether or not to show the output of the snippet
  7. Save edits to take your example "live".

Currently, I do steps 2 through 4 on ideone.com. Steps 5 and 6 are copy/paste, and step 7 is editing the answer with a link to my running demo on ideone.

5

I'm with Chris in that I rarely use the code button but would possibly start if I had this. However, I hope to rarely, if ever, use the code snippet button (at least for a long time).

Similar to David's answer but instead could we choose a default then have the option to go to the other one for specific posts?

It seems kind of silly for me to click a button to choose my editor type if it may never change. Likewise, I imagine that those devs who use the stack snippet would use it more often than the other option.

1
  • 1
    hackysneakyhacky
    – Blackbelt
    Commented Jul 15, 2015 at 14:27
4

As encouraged by Nathan I will also put my proposal here.

It was already mentioned in the comments but finally an option to auto-indent/beautify code would be more than welcome outside the snippet editor. I am going to copy-and-paste some text from my other post:

Many of my edits on SO are merely formatting improvements. Adding newlines and indents is what I do at night. However, I wonder if it's possible to automate the process. Especially people who are new to SO and/or the language at hand seem to not bother about a readable code block. However, for us - the people trying to help - it is quite the effort to first make the code readable and then trying to answer the question.

As I see it there are two options, either immediately beautify code as soon as some one uses the Code Sample button in the toolbar, or add a Beautify Code to the toolbar. Beautifying should only be allowed on code snippets.

I understand that an implementation might take some weeks or months to roll out, but there are many tools available exactly for this.

For some people this might seem as a silly problem, but users who are active in the webdev department should have encountered this problem many times before. Personally I especially notice this in the sass, css, html, xml, js, php, json categories.

4

I answer lots of pure JS questions, and because of the lack of proper output solutions (with console.log nothing shows up in the result, alert is horrible, document.write doesn't format, custom solutions like https://meta.stackexchange.com/a/242144/134069 are cumbersome) I hardly use stack snippets at all.

My current common workflow is therefore:

  1. Read question
  2. Copy parts of the question (that I want to cite, using [blockquote] button) and parts of the code (that I want to edit) to the answer using Ctrl+C / Ctrl+V, often jumping back and forth if I haven't copied the whole text
  3. point out mistakes, reply on questions, comment on statements, explain problems, suggest solutions; using the markdown editor and not much else (sometimes dragging the editor area higher).
  4. select the code parts and use the [code sample] button, if I had not already entered the indentation manually
  5. Hit tab and enter to submit
  6. Re-read the post for spelling, grammar and formatting mistakes, click the [edit] button to correct them.

So if text is selected, the [code] button should indent it (or wrap in backticks if inline) as previously. Everything else would break my workflow.

Popping up a real editor* when the button is pressed otherwise sounds great. I would want no huge modal popup though, please make an educated guess instead and let the user select afterwards whether the entered code should be plain code, an interactive stack snippet, or whatever that might come in the future.

* auto-indent, sane tab/shift+tab behaviour, all those things

2

As a front-end web developer, I use the code snippet function all the time. I often find myself editing questions and answers to put other peoples code into it too.

When I'm creating answers with code in, I actually create the code in JSFiddle and then port it over into a code snippet afterwards. I tend to make sure I put the JSFiddle link on too, just in case the OP has the same firewall issue that I do, and because it's much easier to see the code running on there. I just find JSFiddle much easier to write and test the code on, but perhaps that's just me. I realise the benefits for putting the code directly onto SO though.

I can't see why we don't just have two similar but separate buttons in the task bar. One for "Web Code" snippets which works as it does now but perhaps with a different icon to indicate "Web" such as a globe or something, and another "Non-web Code" snippet button to replace "Code Sample" button, which is similar but just has one text box to enter code (also uses the tidy, reset, etcetera like the current one does). In the non-web code snippet creator, it might also be good to have a drop-down to select the language, and then it can apply the relevant colour coding to that language. I just can't see the point of making everyone make two clicks to get to the section they want, when they are able to do it in one.

As an aside, what would benefit me most is if the code snippet tool didn't use cross-site scripting, which stops any code snippets with plugins like jQuery in from working in Chrome or IE at work (because of the firewall, thankfully Firefox is blissfully ignorant). JSFiddle seems to manage this so I don't see why SO can't?

16
  • 2
    I agree. Only thing, if someone is new to development, they may think Ruby/Rails is web code, since Rails is a web framework
    – user3373470
    Commented Jul 14, 2015 at 12:38
  • @onebree I'm unfamiliar with Ruby on Rails, however it's a server-side language AFAIK? I think you would have to be a very big novice to think you could enter Ruby on the web code snippets. Commented Jul 14, 2015 at 12:47
  • You are right. I am just saying though, given the average new user posting a question that is easily found elsewhere, they may think "I am working with a web framework, so therefore..." Also, what about derivatives like ERB and HAML? SCSS? I think cases like these, JSFiddle is best (or something similar)
    – user3373470
    Commented Jul 14, 2015 at 12:52
  • 1
    @onebree Perhaps, but you have to be careful about over-thinking these things. You're never going to get a solution that fits every single visitor to this website, there are too many stupid people in the world for that to happen. ERB, SCSS, they basically generate HTML/CSS files. ERB seems similar to ASP syntax, which works also similarly to PHP. If you have a bug with your front end-stuff that's generated with ASP/PHP/ERB/SCSS etcetera, then you need to post the code that it's generated (i.e grab it from the web browser). Commented Jul 14, 2015 at 13:05
  • 5
    @onebree I actually see that on quite a lot of questions on here: "Why is this front-end (HTML/CSS/JS) code not working?" - (posts their PHP code) Commented Jul 14, 2015 at 13:08
  • 4
    ^ That is exactly what I was trying to get at. :-)
    – user3373470
    Commented Jul 14, 2015 at 13:09
  • @onebree Well, unfortunately you can't prevent stupidity. I've seen a lot of posts on stack overflow, and I've perhaps seen one person post PHP in an actual code snippet. They generally tend to use the normal code format feature. Then again I seem to remember I recently saw someone post .NET code in a JSFiddle. Different people have steeper learning curves ;). Commented Jul 14, 2015 at 13:14
  • 1
    @JamieBarker that's just it, stupidity (or lack of patience) is the problem we're trying to solve with the suggested change (by the OP). ignoring it defeats the purpose of this post. Separating it into two buttons (which is what we currently have, just with different wording) isn't working very well, people are incorrectly using stack snippets for code that can't be ran by a stack snippet.
    – Kevin B
    Commented Jul 14, 2015 at 15:15
  • @KevinB I'm talking about changing the current "Code Sample" button though to work similar to the code snippet does now, with a few changes. Indicate that they are both the same except one is for the web and the other for non-web. Commented Jul 14, 2015 at 15:17
  • @KevinB There will be one of two reasons people currently use it. 1) They don't know any better because they are new or and/or they don't understand there is the "Code Sample" button. 2) Because it's a lot easier and they're lazy. Changing the icons to be more intuitive and making them both work similarly would help solve those issues, and makes UX sense IMO. Commented Jul 14, 2015 at 15:22
  • 2
    I don't see how it will solve it at all. If people are already inserting php into a box clearly labeled "HTML", how will making the other editor easier to use change that?
    – Kevin B
    Commented Jul 14, 2015 at 15:23
  • @KevinB They're not literally inserting a whole PHP script in. I'm talking about those that have PHP/ASP embedded in their .php or .aspx page and they post that looking for help with front-end problems, for example <a href="?<%=Request.Querystring%>"><img src="<%=MyLogo.src%>" alt="<%=MyLogo.alt%>" /></a> with a question of Why does my image not load? - how the !#£$ do we know without knowing what MyLogo.src is spitting out? Commented Jul 14, 2015 at 15:28
  • @KevinB So technically they are posting HTML in the HTML box, just the pre-rendered version of it, which is about as helpful as a chocolate teapot. Commented Jul 14, 2015 at 15:32
  • Right, which is why we need to clearly present to them that there are two separate editors with two separate purposes. Doing this with a single button in the editor rather than two (which is the feature we're discussing) forces the user to pick one. At least then if one has an asp.net logo they might pick it instead.
    – Kevin B
    Commented Jul 14, 2015 at 15:33
  • @KevinB They might, but they won't. It doesn't solve the problem. To them it's still HTML/CSS, they're still posting a question to a HTML/CSS problem, they're still going to select the box that takes them to that area, because that's technically where it does need to be, they just need to post the post-rendered HTML/CSS to help identify the problem. Commented Jul 14, 2015 at 15:36
0

I don't usually use the Stack Snippet option, I often use jsfiddle (I know! not recommended) to present a working snippet.

Why jsfiddle?

  • You can use provided code libraries such as jQuery.
  • You can format the code better with the help of Tab and its built-in color hint and jslint. (Though I have to say, color hint and lint are not too helpful on StackOverflow)
  • The insertion of a jsfiddle link is more comfortable than figuring out how to add a Stack Snippet without showing all your code at first.
  • The person who asked can utilize a tab page on StackOverflow and a full-screen page on jsfiddle, and they can experiment with it.

I personally don't support the additional click to insert code. But I would like to request some feature:

  • When user is typing a code block and pastes a block of code, the editor shall auto-indent 4 spaces on each line.
  • Let users use Tab to indent. I hate copying 4 spaces and pasting them in front on each line.

StackOverflow should consider:

  • Re-design the settings for the snippet so it doesn't show the code by default. I had problem first using the Stack Snippet and didn't know how to hide the unnecessary HTML script.
  • StackOverflow should imitate already existing snippet styles like embedded Codepens because it minimizes the "learning curve" so most users are comfortable using it and understand the mechanism faster, a situation like why GUI most look similar. It can be like:
Blah, blah, blah. Blah, blah, blah. Blah, 
blah, blah.

So, here's a snippet for the solution:
|------------------------------------------|
| HTML | CSS | Result |--------------------|
|------------------------------------------|
|                                          |
|                                          |
|                                          |
|                                          |
|                                          |
|----------    ----------------------------|
|Run|Reset|    | see snippet in full-screen|
|------------------------------------------|

It could add a "see snippet in full-screen" for a style like jsfiddle so people can see everything in their whole screen.

-2

This should stem the flow of code that gets incorrectly added to a snippet to a degree, but could the snippet option only be available if the question is tagged correctly or at least provide a warning if not?

In this related post I queried the usage of snippets with:

WHERE tags like('%javascript%') or 
      tags like('%html%') or 
      tags like('%css%') or
      tags like('%js%') or <!-- cover things like angularjs, knockout.js etc -->
      tags like('%jquery%')

This was aimed (at a basic level) to identify posts that used the snippets incorrectly.

Could some similar logic be used to either prevent or warn the users about using the snippet feature?

If no related tags are detected, then perhaps they could see the message that says:

If you are using one of these technologies (HTML, CSS, JavaScript) and your code runs in isolation, please consider tagging the question correctly otherwise use the Raw Code option instead.

4
  • 2
    I'm not sure if you are saying this already, but it has to be a non-blocking warning or only come when the user tries to submit the question. Because most people stick tags in at the end.
    – DanielST
    Commented Jul 14, 2015 at 13:41
  • A concern with this might be that tags are actually below the question, so hiding the option unless web tags are added might result in Stack Snippets not being visible at all. Warnings would probably reduce mis-use, but I'm slightly concerned they might not be obvious to new users (this is just my intuition, though, maybe we should do some user testing around this).
    – Thomas Orozco Staff
    Commented Jul 14, 2015 at 15:18
  • 2
    @ThomasOrozco: Well, if there are no tags entered yet, defer the warning until it's clear whether it's neccessary, and make it a choice: Submit as-is or auto-convert? There might be some subtleties to that though... Commented Jul 14, 2015 at 15:57
  • @ThomasOrozco It shouldn't be a blocking mechanism or hidden. I guess if it was displayed at the end, when the user submits, it would have the tags in place at that stage.
    – Tanner
    Commented Jul 15, 2015 at 7:48
-2

From a UX perspective, putting a modal dialog like this is a pretty heavy solution.

It has the added affect of punishing people who learn what the button affordance does but have to pass the modal every time.

I would suggest changing it to a system that rewards people who use it correctly, or is non-blocking, or learns so you don't keep re-showing the modal to people who have already figured out how it works.

Aside from the UX issues, I also wish there would be more languages the code snippets tool supports.

3
  • JavaScript runs in the browser, every other language would require resources on Stack Overflows end, and that isn't feasible.
    – user4639281
    Commented May 5, 2018 at 17:38
  • @TinyGiant When it comes to feasibility, other websites (e.g. repl.it) do it - why is it out of scope for SO and not them? Commented May 5, 2018 at 17:44
  • Because that is outside of the scope of Stack Overflow. Other websites specialize in doing that. HTML, CSS, and JavaScript don't require anything at all to run other than a web browser. There is very little invested in that, and it solves the problem of linking to jsfiddle or the like instead of including the code in the question (which was an extremely bad problem in the web tags prior to the introduction of Stack Snippets. It just isn't in the cards.
    – user4639281
    Commented May 5, 2018 at 18:24
-3

Let's look at this from a different perspective, why just two choices? Let's put all code in as snippets, but ask the language of the code being inserted, so we can run it if we know how, and the cool thing about this is as the number of languages that we can run grows, there is no needed change to the post, it just works. This also gives syntax highlighting a boost as well.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .