Duplicate of mdn/interactive-examples#811 - work on this will happen here.

Original report from @chrisdavidmills

I just thought — when writing the interactive examples we always try to make both the example and the code lines narrow enough so they fit comfortably inside their respective panes.

But when you text it locally, the editor is shown at the full screen width, which is a lot wider than it'll actually be shown in the content column on MDN.

It would be great to have an option to set it to the typical MDN content column size instead. I could resize my browser, but I'm lazy ;-)

Latest comment by @stephanmax - mdn/interactive-examples#811 (comment)

Just realized that this is more complicated than I thought.

My initial plan was to bundle in some CSS with the editor styles that makes sure the code demos are embedded in a more realistic surrounding. But if I understand mdn-bob correctly, this bundled CSS would also end up in the production demos.

What do you think @schalkneethling, can we add an env variable to the npm scripts to only add the mdn mock CSS when building locally/testing code demos?

As with CodeMirror, our version of Prismjs is very much out of date. Let's go ahead and update that as well.

MDN URL: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/RegExp

What information was incorrect, unhelpful, or incomplete?

Appears to be incorrect

Specific section or headline?

In the top of the document where there's a little test coding area labeled "JavaScript Demo: RegExp Constructor", when I run the code as written, it does not give the expected results as shown in the comments. Instead, I get the following results:

Object { }
Object { }
false

What did you expect to see?

In the comments provided, I should see:
// expected output: /\w+/
// expected output: /\w+/
// expected output: false

Did you test this? If so, how?

I just clicked on 'run' without changing the code that came up when I loaded the page

🚨 The automated release from the master branch failed. 🚨

I recommend you give this issue a high priority, so other packages depending on you could benefit from your bug fixes and new features.

You can find below the list of errors reported by semantic-release. Each one of them has to be resolved in order to automatically publish your package. I’m sure you can resolve this 💪.

Errors are usually caused by a misconfiguration or an authentication problem. With each error reported below you will find explanation and guidance to help you to resolve it.

Once all the errors are resolved, semantic-release will release your package the next time you push a commit to the master branch. You can also manually restart the failed CI job that runs semantic-release.

If you are not sure how to resolve this, here is some links that can help you:

• Usage documentation
• Frequently Asked Questions
• Support channels

If those don’t help, or if this issue is reporting something you think isn’t right, you can always ask the humans behind semantic-release.

Invalid npm token.

The npm token configured in the NPM_TOKEN environment variable must be a valid token allowing to publish to the registry https://registry.npmjs.org/.

If you are using Two-Factor Authentication, make configure the auth-only level is supported. semantic-release cannot publish with the default auth-and-writes level.

Please make sure to set the NPM_TOKEN environment variable in your CI with the exact value of the npm token.

Good luck with your project ✨

Your semantic-release bot 📦🚀

As part of the latest fixes to Bob, Peter learned how we can easily run a locally built version of Bob inside a local instance if the interactive examples repo:

#403 (comment)

Add a blurb about this to README.md

See mdn/interactive-examples#349 and https://github.com/mdn/interactive-examples/pull/523/files

Currently, bob is published as mdn-bob on NPM. Change this to publish as follows:
@mdn/bob

We have switched to Dependabot but still have Renovate configured via renovate.json

The latest release of Bob is broken because while the bundle name changed, the link and script tags still reference the previous version of CodeMirror:

https://github.com/mdn/bob/blob/master/editor/tmpl/live-js-tmpl.html#L33

We did that back in the day so we could cache bust the bundle when we upgrade CodeMirror. We either need to document that or, find a more automated way to do that. For right now, seeing we have a bit of an issue with the interactive-examples on production, I will simply fix the references.

Definitely something to reconsider though.

When running Bob inside the interactive-examples project it fails to find the CodeMirror files inside the node_modules folder. This is because it looks for the files inside its own package and not the parent.

See Minimalist for reference https://github.com/googleapis/release-please

We have received a few reports that some media files are not loading for interactive examples, see mdn/interactive-examples#1667

It looks like the root cause is that the media folder inside the docs directory has the following structure:

media
-- examples
---- examples

This should simply be:

media
-- examples

There is an error with this repository's Renovate configuration that needs to be fixed. As a precaution, Renovate will stop PRs until it is resolved.

Error type: Preset name not found within published preset config (monorepo:angularmaterial). Note: this is a nested preset so please contact the preset author if you are unable to fix it yourself.

Work related to readying BoB to take over building duties in interactive examples.

Could we change how the clipboard extension works for the code examples? Right now, the clipboard is always visible on the focused code example.

If I want to copy an example that isn't focused, I would go to highlight the text, which also switches the focus in the example on mouse up. I think it would make more sense if the clipboard is only visible when hovering over an example so when users are going to select something to copy it, they'd see the clipboard instead. It also would cut down on the visual noise in the examples if the clipboard is only shown when the user would need it.

cc: @tannerdolby

🚨 The automated release from the master branch failed. 🚨

I recommend you give this issue a high priority, so other packages depending on you could benefit from your bug fixes and new features.

You can find below the list of errors reported by semantic-release. Each one of them has to be resolved in order to automatically publish your package. I’m sure you can resolve this 💪.

Errors are usually caused by a misconfiguration or an authentication problem. With each error reported below you will find explanation and guidance to help you to resolve it.

Once all the errors are resolved, semantic-release will release your package the next time you push a commit to the master branch. You can also manually restart the failed CI job that runs semantic-release.

If you are not sure how to resolve this, here is some links that can help you:

• Usage documentation
• Frequently Asked Questions
• Support channels

If those don’t help, or if this issue is reporting something you think isn’t right, you can always ask the humans behind semantic-release.

The push permission to the Git repository is required.

semantic-release cannot push the version tag to the branch master on remote Git repository with URL https://github.com/mdn/bob.git.

Please refer to the authentication configuration documentation to configure the Git credentials on your CI environment and make sure the repositoryUrl is configured with a valid Git URL.

Good luck with your project ✨

Your semantic-release bot 📦🚀

🚨 The automated release from the master branch failed. 🚨

I recommend you give this issue a high priority, so other packages depending on you could benefit from your bug fixes and new features.

You can find below the list of errors reported by semantic-release. Each one of them has to be resolved in order to automatically publish your package. I’m sure you can resolve this 💪.

Errors are usually caused by a misconfiguration or an authentication problem. With each error reported below you will find explanation and guidance to help you to resolve it.

Once all the errors are resolved, semantic-release will release your package the next time you push a commit to the master branch. You can also manually restart the failed CI job that runs semantic-release.

If you are not sure how to resolve this, here is some links that can help you:

• Usage documentation
• Frequently Asked Questions
• Support channels

If those don’t help, or if this issue is reporting something you think isn’t right, you can always ask the humans behind semantic-release.

The push permission to the Git repository is required.

semantic-release cannot push the version tag to the branch master on remote Git repository with URL https://github.com/mdn/bob.git.

Please refer to the authentication configuration documentation to configure the Git credentials on your CI environment and make sure the repositoryUrl is configured with a valid Git URL.

Good luck with your project ✨

Your semantic-release bot 📦🚀

🚨 The automated release from the master branch failed. 🚨

I recommend you give this issue a high priority, so other packages depending on you could benefit from your bug fixes and new features.

You can find below the list of errors reported by semantic-release. Each one of them has to be resolved in order to automatically publish your package. I’m sure you can resolve this 💪.

Errors are usually caused by a misconfiguration or an authentication problem. With each error reported below you will find explanation and guidance to help you to resolve it.

Once all the errors are resolved, semantic-release will release your package the next time you push a commit to the master branch. You can also manually restart the failed CI job that runs semantic-release.

If you are not sure how to resolve this, here is some links that can help you:

• Usage documentation
• Frequently Asked Questions
• Support channels

If those don’t help, or if this issue is reporting something you think isn’t right, you can always ask the humans behind semantic-release.

The push permission to the Git repository is required.

semantic-release cannot push the version tag to the branch master on remote Git repository.

Please refer to the authentication configuration documentation to configure the Git credentials on your CI environment.

Good luck with your project ✨

Your semantic-release bot 📦🚀

Currently the assumption is that all HTML examples will have some CSS. Therefore always having an HTML and CSS tab is baked in. There are instances though where CSS really is not needed for an example to make sense.

In future there might also be a need for some JS but, not always. The tabbed editor(future editor?) therefore needs to dynamically turn on, and off, these tabs based on the content of the example.

As of January 1 2019, Mozilla requires that all GitHub projects include this CODE_OF_CONDUCT.md file in the project root. The file has two parts:

1. Required Text - All text under the headings Community Participation Guidelines and How to Report, are required, and should not be altered.
2. Optional Text - The Project Specific Etiquette heading provides a space to speak more specifically about ways people can work effectively and inclusively together. Some examples of those can be found on the Firefox Debugger project, and Common Voice. (The optional part is commented out in the raw template file, and will not be visible until you modify and uncomment that part.)

If you have any questions about this file, or Code of Conduct policies and procedures, please see Mozilla-GitHub-Standards or email [email protected].

(Message COC001)

Our version of CodeMirror is pretty old and might be contributing to the following issue: mdn/kuma#6307

Time to upgrade.

We should already check in review that images are not too big, but it would be helpful to have a build step that automatically squashes images.

(Moved from mdn/interactive-examples#995)

On a fresh master checkout, running npm install causes this change to package-lock.json:

diff --git a/package-lock.json b/package-lock.json
index 23ef919..6eb9a7a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8252,6 +8252,7 @@
                 "find-node-modules": "2.0.0",
                 "find-root": "1.1.0",
                 "fs-extra": "8.1.0",
+                "glob": "7.1.4",
                 "inquirer": "6.5.0",
                 "is-utf8": "^0.2.1",
                 "lodash": "4.17.15",
@@ -8331,6 +8332,20 @@
                         "tmp": "^0.0.33"
                     }
                 },
+                "glob": {
+                    "version": "7.1.4",
+                    "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.4.tgz",
+                    "integrity": "sha512-hkLPepehmnKk41pUGm3sYxoFs/umurYfYJCerbXEyFIWcAzvpipAgVkBqqT9RBKMGjnq6kMuyYwha6csxbiM1A==",
+                    "dev": true,
+                    "requires": {
+                        "fs.realpath": "^1.0.0",
+                        "inflight": "^1.0.4",
+                        "inherits": "2",
+                        "minimatch": "^3.0.4",
+                        "once": "^1.3.0",
+                        "path-is-absolute": "^1.0.0"
+                    }
+                },
                 "iconv-lite": {
                     "version": "0.4.24",
                     "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
@@ -19087,8 +19102,7 @@
                     "version": "3.1.0",
                     "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
                     "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==",
-                    "dev": true,
-                    "optional": true
+                    "dev": true
                 }
             }
         },

Related to #1633 within mdn/interactive-examples.

https://developer.mozilla.org/en-US/docs/Web/CSS/flex

Specifically, L17 is what is failing first, since there isn't a parent element known/defined. I did a few console.log()'s and the <pre> gets selected then the <div class="example-choice"> and finally the DOMTokenList from parent.classList like expected when clicking on a example choice.

When we click in between example choices, there isn't a well defined element.parentElement. This ultimately stems from the callback in exampleChoiceList click event listener. The findParentElement method is invoked on the element like element.findParentElement(target) in events.js. When clicking in between a choice, the target becomes the <section class="example-choice-list">. I need to take a deeper look to see exactly how/where things are failing.

In order to ensure we can predictable releases of the package, we need to ensure that pull requests use https://github.com/commitizen/cz-cli

A security vulnerability has been identified that affects a large number of projects that depends on the event-stream npm package. While BoB does not directly depend on it, the package npm-run-all that we do depend on, does have it as a dependency.

Action required

• Open this issue to track the work required to ensure our contributors are notified
• Open an issue on forks of the repo and let the users know about the vulnerability and how to resolve the issue
• Send general notification on social media pointing to this issue

Community

If you have forked this repo, please update to the latest master branch. This will update the affected dependency to a version that is no longer affected, and remove the security concern.

Please prune all branches that are on your forked version of this repo. The simplest way to accomplish this from your command line is as follows:

git push origin :branch-name

# then also delete the branch locally
git branch -D :branch-name

We appreciate your assistance in this matter. Should you need any assistance, please feel free to reach out.

For a detailed rundown see mdn/kuma#7322

This is an attempt at a possible temporary solution until interactive examples are reimplemented in Yari.

I recently added docs for wasm control flow operators, and I hope to continue adding additional reference docs for other parts of wasm like memory and numerical operations.

I added examples to all pages, but those examples are not interactive. So here's my question, would you folks be open to me adding a new interactive example type for wasm? I think it would be most useful as tabbed where one tab is for the wasm and another one is for js, since wasm is basically useless without js.

I've already done the basic work for this, but before I'm putting in more work I'd like to make sure you folks are on board.

CC @schalkneethling, I was told that you're the one that I should talk to about this.

🚨 The automated release from the master branch failed. 🚨

I recommend you give this issue a high priority, so other packages depending on you could benefit from your bug fixes and new features.

You can find below the list of errors reported by semantic-release. Each one of them has to be resolved in order to automatically publish your package. I’m sure you can resolve this 💪.

Errors are usually caused by a misconfiguration or an authentication problem. With each error reported below you will find explanation and guidance to help you to resolve it.

Once all the errors are resolved, semantic-release will release your package the next time you push a commit the master branch. You can also manually restart the failed CI job that runs semantic-release.

If you are not sure how to resolve this, here is some links that can help you:

• Usage documentation
• Frequently Asked Questions
• Support channels

If those don’t help, or if this issue is reporting something you think isn’t right, you can always ask the humans behind semantic-release.

The push permission to the Git repository is required.

semantic-release cannot push the version tag to the branch master on remote Git repository.

Please refer to the authentication configuration documentation to configure the Git credentials on your CI environment.

Good luck with your project ✨

Your semantic-release bot 📦🚀

Releases of Bob are few and far between now and it does not really make sense to have all the machinery of semantic release. Switch to a simple Github action flow that just makes a release on each successful merge to master.

It looks like the manual refresh solves the problem we have been experiencing with the code gutter. 500ms does make the experience a little jarring. I tested using local overrides in the browser and it would seem that this will still work with a timeout of 200ms so, reducing it to that.

Summary
Opening a page with example shows broken output when Dark Reader is enabled.

Steps To Reproduce (STR)
How can we reproduce the problem?

1. Enable Dark Reader extension
2. Open https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input/color
3. See the example output exists

Actual behavior

Expected behavior
Output should appear

Additional context
Tossed from darkreader/darkreader#3918. I'm afraid that the MDN team also will just toss this issue back to them. Please do some co-work to solve this issue 🙏 (cc @Gusted)

🚨 The automated release from the master branch failed. 🚨

I recommend you give this issue a high priority, so other packages depending on you could benefit from your bug fixes and new features.

You can find below the list of errors reported by semantic-release. Each one of them has to be resolved in order to automatically publish your package. I’m sure you can resolve this 💪.

Errors are usually caused by a misconfiguration or an authentication problem. With each error reported below you will find explanation and guidance to help you to resolve it.

Once all the errors are resolved, semantic-release will release your package the next time you push a commit to the master branch. You can also manually restart the failed CI job that runs semantic-release.

If you are not sure how to resolve this, here is some links that can help you:

• Usage documentation
• Frequently Asked Questions
• Support channels

If those don’t help, or if this issue is reporting something you think isn’t right, you can always ask the humans behind semantic-release.

The push permission to the Git repository is required.

semantic-release cannot push the version tag to the branch master on remote Git repository.

Please refer to the authentication configuration documentation to configure the Git credentials on your CI environment.

Good luck with your project ✨

Your semantic-release bot 📦🚀

Encode HTML tags in the examples title

As @peterbe mentioned here:
#387 (review)

It does not make sense to have the version number here:
https://github.com/mdn/bob/blob/master/bundles.json#L36

Especially now that we have proper cache busting

Would you be willing to transfer the copyright of this project to Mozilla?

🚨 The automated release from the master branch failed. 🚨

I recommend you give this issue a high priority, so other packages depending on you could benefit from your bug fixes and new features.

You can find below the list of errors reported by semantic-release. Each one of them has to be resolved in order to automatically publish your package. I’m sure you can resolve this 💪.

Errors are usually caused by a misconfiguration or an authentication problem. With each error reported below you will find explanation and guidance to help you to resolve it.

Once all the errors are resolved, semantic-release will release your package the next time you push a commit to the master branch. You can also manually restart the failed CI job that runs semantic-release.

If you are not sure how to resolve this, here is some links that can help you:

• Usage documentation
• Frequently Asked Questions
• Support channels

If those don’t help, or if this issue is reporting something you think isn’t right, you can always ask the humans behind semantic-release.

The push permission to the Git repository is required.

semantic-release cannot push the version tag to the branch master on remote Git repository with URL https://github.com/mdn/bob.git.

Please refer to the authentication configuration documentation to configure the Git credentials on your CI environment and make sure the repositoryUrl is configured with a valid Git URL.

Good luck with your project ✨

Your semantic-release bot 📦🚀

First noticed as inability to move backwards/forwards in page history. Then realized that tab/shift-tab would not let me escape the initial example textbox. Only mouse interaction to focus outside the textbox would allow tabbing to other controls or using alt-leftarrow or alt-rightarrow to action page history.

Example page would be String.prototype.codePointAt()

• Why is there a forced focus on page load or refresh on any initial example textbox?

• Why is there no mechanism to escape once focused in the textbox?

This is beyond inconvenient but also quite against accessibility?

(this on Chrome 91, Edge 92, FF 90 and Win10)

There are some HTML examples (for example <header>) where the content overflows the line counter in chrome and looks bad.

Saw this while working on a different issue in interactive examples. Worth investigating whether this was just a hiccup or a real problem we have just not noticed before 😱

MDN-BOB: (mdn-bob.js/@init) Error during build: Error: ENOENT: no such file or directory, open '/Users/schalkneethling/repos/interactive-examples/node_modules/mdn-bob/editor/js/editable-css-bundle.js'
    at Object.openSync (fs.js:465:3)
    at Object.readFileSync (fs.js:368:35)
    at /Users/schalkneethling/repos/interactive-examples/node_modules/mdn-bob/lib/bundler.js:67:31
    at Array.map (<anonymous>)
    at concatSync (/Users/schalkneethling/repos/interactive-examples/node_modules/mdn-bob/lib/bundler.js:67:18)
    at buildBundle (/Users/schalkneethling/repos/interactive-examples/node_modules/mdn-bob/lib/bundler.js:84:18)
    at /Users/schalkneethling/repos/interactive-examples/node_modules/mdn-bob/lib/bundler.js:103:25 {
  errno: -2,
  syscall: 'open',
  code: 'ENOENT',
  path: '/Users/schalkneethling/repos/interactive-examples/node_modules/mdn-bob/editor/js/editable-css-bundle.js'
}
error Command failed with exit code 2.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

This came up in mdn/interactive-examples#1377.

If the output of the example is too long to fit the editor's div#console element, then the entire editor iframe gets a scrollbar.

Perhaps a simple fix would just be to change this: https://github.com/mdn/bob/blob/master/editor/css/editable-js.css#L27 to:

    white-space: pre-wrap;

?

🚨 The automated release from the master branch failed. 🚨

I recommend you give this issue a high priority, so other packages depending on you could benefit from your bug fixes and new features.

You can find below the list of errors reported by semantic-release. Each one of them has to be resolved in order to automatically publish your package. I’m sure you can resolve this 💪.

Errors are usually caused by a misconfiguration or an authentication problem. With each error reported below you will find explanation and guidance to help you to resolve it.

Once all the errors are resolved, semantic-release will release your package the next time you push a commit to the master branch. You can also manually restart the failed CI job that runs semantic-release.

If you are not sure how to resolve this, here is some links that can help you:

• Usage documentation
• Frequently Asked Questions
• Support channels

If those don’t help, or if this issue is reporting something you think isn’t right, you can always ask the humans behind semantic-release.

The push permission to the Git repository is required.

semantic-release cannot push the version tag to the branch master on remote Git repository.

Please refer to the authentication configuration documentation to configure the Git credentials on your CI environment.

Good luck with your project ✨

Your semantic-release bot 📦🚀

On registry https://registry.npmjs.org/, the "latest" version (v5.0.11) of dependency travis-deploy-once has the following deprecation notice:

We recommend to use Travis Build Stages instead

Marking the latest version of an npm package as deprecated results in the entire package being considered deprecated, so contact the package author you think this is a mistake.

Affected package file(s): package.json

If you don't care about this, you can close this issue and not be warned about travis-deploy-once's deprecation again. If you would like to completely disable all future deprecation warnings then add the following to your config:

"suppressNotifications": ["deprecationWarningIssues"]

Was reading about String.match() and testing the example code snippets. The code snippet for Using named capturing groups does not work (see screenshot below)

At the moment bob expects the source for JS examples to live inside an HTML file like:

<pre>
<code id="static-js">console.log('hello bob!');
</code>
</pre>

We'd like to be able to lint the JS source, and this would be easier if the JS source was supplied in standalone JS files, like:

console.log('hello bob!');

To enable this, bob needs to understand this way of supplying sources, and to wrap them in the necessary HTML for the editor.

There are some pointers in this comment: mdn/interactive-examples#250 (comment) to the places we'd need to change things.

One additional complexity is that writers can specify that the example is short or long by adding a data-height="taller" or data-height="shorter" attribute on the code block. For example:

• taller: source, result
• shorter: source, result

So we might need a way for the author to specify this in meta.json, and bob to understand it. Or perhaps better, bob could automatically set taller or shorter based on the actual length of the example?

The 5.0 release of cosmiconfig has changed the API significantly. Currently this is causing the build to fail, and also makes BoB useless ;p

The main problem seems to be around the load function.

We use Node 12 in both kuma and kumascript. Should probably do the same here in Bob.

🚨 The automated release from the master branch failed. 🚨

I recommend you give this issue a high priority, so other packages depending on you could benefit from your bug fixes and new features.

You can find below the list of errors reported by semantic-release. Each one of them has to be resolved in order to automatically publish your package. I’m sure you can resolve this 💪.

Errors are usually caused by a misconfiguration or an authentication problem. With each error reported below you will find explanation and guidance to help you to resolve it.

Once all the errors are resolved, semantic-release will release your package the next time you push a commit the master branch. You can also manually restart the failed CI job that runs semantic-release.

If you are not sure how to resolve this, here is some links that can help you:

• Usage documentation
• Frequently Asked Questions
• Support channels

If those don’t help, or if this issue is reporting something you think isn’t right, you can always ask the humans behind semantic-release.

The push permission to the Git repository is required.

semantic-release cannot push the version tag to the branch master on remote Git repository.

Please refer to the authentication configuration documentation to configure the Git credentials on your CI environment.

Good luck with your project ✨

Your semantic-release bot 📦🚀

What page(s) did you find the problem on?

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/button

Specific page section or heading?

HTML Button demo section

What is the problem?

The content is not adaptive to Mobile screen.

What did you expect to see?

Full view of button code and its preview

Did you test this? If so, how?

By using smartphone.

At some point, Bob stopped making automated releases to Github and NPM. We have some work that has been merged and needs to be done, merged and released so, this is blocking that work.

Perhaps something changed in semantic-release?