Migrating interactive examples inline

[LeoMcA]

Hey folks, recently we've been working on a new architecture for interactive examples. We're nearly ready to migrate the JavaScript examples, and we wanted to share what's changing:

Architecturally, we're doing away with bob and the interactive-examples repo, replacing them with a new {{InteractiveExamples}} macro which, behind the scenes, uses a web component to take inline code and run it in the MDN Playground, displaying the result in the same way the current interactive examples do.

What that means from an authoring perspective is that you’ll be able to write interactive examples inline, like so:

{{InteractiveExample("JavaScript Demo: Array.from()", "shorter")}}

```js interactive-example
console.log(Array.from('foo'));
// Expected output: Array ["f", "o", "o"]

console.log(Array.from([1, 2, 3], (x) => x + x));
// Expected output: Array [2, 4, 6]

```

What’s next

Phase one of this project is focused on the JavaScript examples. This will allow us to refine the migration process moving forward.

We have automatically migrated them in content and translated-content: you can see the result on our testing environment. We'll open PRs when we're finished with our snapshot testing of the console output, which should be in the next few days: we don't expect a manual review of the thousands of lines changed, but apologies if this causes some merge conflicts.

Support for (and migration of the) HTML, CSS, and WAT examples will come next and we will update you when we’re ready with those changes. We plan to use the same syntax for HTML and WAT and a similar one for CSS:

{{InteractiveExample("CSS Demo:")}}

```css interactive-example-choice
color: red;
```

```css interactive-example-choice
color: blue;
```

For now, the focus of this effort is migrating the examples, rather than perfecting the syntax: please do still let us know if you have any feedback on that, but we'll leave any changes regarding the syntax until after the initial migration work.

[LeoMcA]

A brief status update: JavaScript examples have been migrated across all locales, HTML examples have been migrated in en-US and PRs are open for the other locales.

We've got yari PRs open to add support for tabbed CSS examples, choice CSS examples and WAT examples, and testing of those is underway: so we expect to open content PRs for these before the end of the week - translated-content PRs will follow once the respective content PR is merged.

[leon-win]

Hello @LeoMcA !
Am I right in understanding that in the future we will localize the texts in the examples?
Technically, this is now possible, I mean the recommended approach.

[LeoMcA]

We discussed this quite a lot internally, with varying opinions, but ended up settling on the existing guidelines for code blocks of:

• Translate comments, strings and output representations
  • Translating variable and function names is not recommended, except in learn/
• Do not translate syntax (await, console, etc.) which would break the code
• Ensure that the code example is not completely rewritten, unless it is absolutely essential
  • If a code block must be rewritten to meet a locale's requirements, add a comment explaining why

[leon-win]

Thanks for the answer!
The approach is logical, I like it 👍