1312117 - When assembling live samples, ensure there's a newline between chunks of code concatenated together

Status: RESOLVED WONTFIX

(developer.mozilla.org Graveyard :: Wiki pages, defect, P5)

Description

[Eric Shepherd [:sheppy]]

What did you do?
================
1. Created a page with a live sample where the JavaScript section had multiple <pre brush:js>...</pre> blocks, each with part of the code, separated by sections of text explaining how it works.
2. The sample also included HTML and CSS.
3. Used <div class="hidden"> to hide the HTML and CSS content (including headers) as well as the JS header and the last chunk of the JS code, leaving only the parts of the JavaScript relevant to the article's topic.

What happened?
==============
The assembled live sample has places where the junctions between the chunks of code don't have line breaks between them, resulting in lines like:

} let foo = bar;

These lines generate syntax errors and break the code.

What should have happened?
==========================
A newline (or even two, actually) should be inserted between these concatenated blocks, to ensure that things will work as expected when the sample is engaged.

Is there anything else we should know?
======================================
I (and I think others) do this sort of thing a lot to provide detailed examples with explanations of the code immediately adjacent to each method or eveh piece of larger methods, while hiding the parts that aren't relevant to the topic being discussed (such as utility functions, CSS styling, and so forth).

Comment 1

[Florian Scholz (Open Web Docs)]

Sheppy, can you provide a link here?

Comment 2

[Eric Shepherd [:sheppy]]

Here's an example of a page where this happens: https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#Clipping_and_the_intersection_rectangle

The code is working because it's been set up in a way to be sure it does. The code tends to break if you split code up inside blocks, like:

function someFunction(foo, bar) {
  if (doStuff()) {
    foo.x = bar.x*2;
    foo.y = bar.y*2;
    foo.z = bar.z;
  }
  doMoreStuff(foo);
  bar.result = foo.result/2;
  // Add code to do something magical here

Blah blah here's text talking about that chunk of code...

   doEvenMoreStuff(bar, foo);
   return bar.x * bar.y;
}

With the current code, the problem here happens when the concatenation results in this line of code occurring where the two blocks are tacked together:

  // Add code to do something magical here  doEvenMoreStuff(bar, foo);

As a result, doEvenMoreStuff(bar, foo) is never called and Bad Things happen. This is a bit of a contrived and lame example but I run into weird issues with this pretty regularly as I write old-style live samples.

Comment 3

[BMO Automation]

MDN Web Docs' bug reporting has now moved to GitHub. From now on, please file content bugs at https://github.com/mdn/sprints/issues/ and platform bugs at https://github.com/mdn/kuma/issues/.