I just answered a question about a JavaScript issue, and wanted to provide a runnable snippet with a complete demo based on the asker's code.

The problem lies in the fact that the CSS is irrelevant to the answer, and the HTML is just copy-pasted from the question in order to get a runnable demo.
The HTML is much longer than the JS code I provided. In the end, it only clutters the answer.

I'd like to be able to selectively hide a part of a snippet in this situation, maybe using syntax like this:

<!-- language: lang-html hide: true -->

I know I could just hide the whole snippet and copy/paste the JS code above it in a separate block, but I believe in the DRY principle.

2 Answers
2

So... I'm a bit bummed that no one else has brought this up, considering it was discussed extensively here - but we'd want to be very careful about partial-hiding for the simple reason that we wouldn't want to hit readers with unpleasant surprises if they ran the snippet. I'm not even talking about potential security issues here; as soon as you can hide executable code while encouraging people to run it, you open the door to all sorts of griefing opportunities that are considerably less likely without it. At best, such behavior would break the assumption that snippets are self-contained solutions - if you think you're seeing everything needed to accomplish a task while in fact key elements are hidden, confusion will result.

At minimum, the option to run the snippet should not be made available unless the full code was made visible first.

Beyond that, I think the idea here is too limited to be of much value given you can already just copy the relevant code and hide the entire snippet (see my other answer for why you might want to do this anyway). The answer of yours that prompted this request is a perfect example - you've already posted two variations on the relevant code; what remains in the snippet is hardly more than this.

However, there are situations where this is not the case, where a fair bit of setup or tear-down code exists that is necessary for the example but irrelevant to the answer. What would be useful is the ability to mark specific lines or sections as visible, with the rest of the code collapsed by default. For example, one might use specially-formatted comments to selectively override the effects of hide: true:

This would allow exposing the most important changes by default, and once expanded the example could then be run as normal. Again, this is probably overkill for simple jQuery examples, but I imagine it would be really nice for, say, D3 examples.

Hiding boilerplate code was my primary motivation for this request actually, avoiding duplicate code was just a positive side effect this could achieve (maybe I overemphasized it in the OP). Anyway, I like your idea.
– Lucas TrzesniewskiSep 30 '14 at 16:08

5

unpleasant surprises - how many of the users will be able to figure out the surprising part, you think? not many i'd say. a show full code button which reveals the hidden parts of the code (for those who wants to see it, and are able to find the malicious stuff just by looking at it) will be way better than this in my opinion. multiple accordions inside a post..? meh.
– T JSep 30 '14 at 18:03

There's no need for selective expansion; merely an indicator of what is hidden. Expansion can then happen en masse.
– Shog9Sep 30 '14 at 18:06

4

@Shog9 BTW, showing a pile of code isn't going to help much with taking away the surprise element from normal users... the best option to prevent unpleasant surprises in my opinion is to rely upon the downvotes from experienced users - those who are able to find out such loopholes just by taking a glance at a pile of code (definitely not me), and the unfortunate surprised ones (like me), and lock the demo. i believe this is already in place...
– T JSep 30 '14 at 18:19

Frankly, I have zero sympathy for a programmer who doesn't like to read code... If you don't want to read the code before clicking "run", that's your choice, @TJ - but a UI that implies you are seeing the code and then runs hidden stuff is a whole 'nother matter, a dirty trick at best. Defense in depth: make it hard for trolls/griefers to fly below the radar and provide moderation tools for those that try anyway.
– Shog9Sep 30 '14 at 19:05

1

"UI that implies you are seeing the code and then runs hidden stuff" - that is a good point - that is why i suggested a Display Full Code button right aside display results button, which reveals the full code to let the users know that the result depends on hidden boilerplate code.. those who are interested, is capable of finding the surprises in a glance or has the time - can make use of it. those who wants to read the most important part and see the demo gets what they want. It is always better to provide users with options imho...
– T JSep 30 '14 at 20:29

The ones who are upvoting the original post are the ones belonging to the later category. Who are left with no choice but to see all the ugly boilerplate code in their post, and those who has to scroll through the pile just to see the demo... take this 80 checkboxes as an extremely short example of what's coming... What hidden surprises are those going to give me... idk.
– T JSep 30 '14 at 20:31

2

"we wouldn't want to hit readers with unpleasant surprises if they ran the snippet" But can't that already happen if they click a link to JSFiddle or another site?
– Ajedi32Sep 30 '14 at 20:33

Surely we should be trying to offer a better experience by building this functionality into the site, @Ajedi32?
– Shog9Sep 30 '14 at 22:14

That's a bad answer regardless of whether the code is displayed, @TJ. Not particularly swayed by "let's give folks more lipstick for their pigs" arguments. And no, more options != more better. Options that enable better answers are a great idea - but a good answer invariably contains at least some explanation before launching into a code dump.
– Shog9Sep 30 '14 at 22:17

3

@Shog9 I wasn't talking about the quality of that answer, it was just an example of a huge HTML pile which has nothing to do with the answer. in this case it might be unnecessary, but There are cases where we have to use such huge HTML structure` to reproduce a demo, particularly in CSS questions - currently there is no option to hide the huge pile of unwanted code alone - that was the point.
– T JOct 1 '14 at 6:18

DRY is pretty important in a big codebase you're gonna need to maintain for many years. But...

...it's not all that crucial in an answer.

Indeed, some of the best answers are full of repetition: they describe a solution in English, then elaborate on that description with additional details for those who might be interested, including portions of the implementation in code to further illustrate what they're describing, then write up the full solution in code to present the complete picture (perhaps even including comments in this code to tie it back to the descriptions above).

Repetition can be a maintenance nightmare, but it's a tried-and-true teaching technique.

The runnable snippet gives you an opportunity to present a full, tested solution. Everything you write up to that point need only illustrate key portions of the solution - so they can be as detailed or as brief as needed to communicate the important details of your answer without concern over omitting small, mostly-irrelevant details. Make the most of this!

Yes, I agree it's not crucial for a short answer, but it just seemed wasteful to me to copy/paste the exact same code twice in an answer. I figured adding hide: true to the comment could solve this nicely.
– Lucas TrzesniewskiSep 28 '14 at 17:44

20

While everything in the answer is true, I agree with @LucasTrzesniewski that an option to select certain frames from within the snippet to display by default (while still having a button to display everything) would be convenient. If you only wanted to discuss a couple lines of Javascript in detail, you would still probably hide the entire snippet and copy the relevant section into your discussion, but other times the entire script will be relevant, but the markup and styles less so.
– AmeliaBRSep 28 '14 at 18:26

4

So if you want to edit your solution, don't forget to update the code in both places or you're liable to cause confusion.
– ThisSuitIsBlackNotSep 29 '14 at 16:42

@ThisSuitIsBlackNot and which are those places..?
– T JSep 29 '14 at 16:53

@TJ The stack snippet and the section of code copied out of the snippet.
– ThisSuitIsBlackNotSep 29 '14 at 17:00

8

This answer completely misses the point. Repeating and explaining relevant and crucial parts of the code in your answer? Sure. Do that. I do. But, repeating irrelevant parts of code which are only needed to get a demo setup, with the end result of drowning out the actual solution with copy-pasted HTML and CSS setup from the question? Ridiculous.
– MattSep 30 '14 at 10:00

@Shog9: That seems to be what you're proposing here. Read what the OP said in the question; the problem lies in the fact that the CSS is irrelevant to the answer, and the HTML is just copy-pasted from the question in order to get a runnable demo. The HTML is much longer than the JS code I provided. In the end, it only clutters the answer.. This isn't about emphasizing a point through repetition, this is about drowning an answer in needless setup code.
– MattSep 30 '14 at 12:29

Read the rest of the question, Matt - he admits the feature already exists: "I know I could just hide the whole snippet and copy/paste the JS code above it in a separate block" - what he's reluctant to do is copy just the relevant portions of the code. Which is silly - the relevant portions are all that an answer needs to contain. If he wants to also include a full, runnable demo and hide that by default... Well, he can do so already.
– Shog9Sep 30 '14 at 14:58

2

@Shog9 Still, for improving the answer or correcting a mistake, we have to do it in both the snippet and the copy pasted parts, as someone already mentioned earlier. and you're saying it's a silly thing? No, not for those who iteratively improves their answer. Also, while using the hide snippet option, all the irrelevant parts of the code is expanded, the user has to scroll through the entire thing to see the result.
– T JSep 30 '14 at 17:33

1

We're talking HTML- JS-CSS, think about a drag and drop demo involving few huge tables (You can't reduce the number of columns in each row due to some logic) where the only important thing is few lines of js that sets up a plugin, and multiple users copy pasting the same thing over and over again.... Why the noise... Y U Make Me Scroll..? :)
– T JSep 30 '14 at 17:50

If the code is simple, then maintaining improvements is simple, @tj; if the code is complex, then duplicate just the portions you need to highlight. If the only important thing is a few lines of JS, then why would you want to show all the JS necessary for your demo? Copy the few lines that matter, write prose to explain them, then dump the boilerplate into the snippet to illustrate what you've explained.
– Shog9Sep 30 '14 at 18:03