New playground on typescriptlang site: Windows 10 users cannot see DOM output values, other than alert about typescript-website HOT 11 CLOSED

No need @jimbuck - these examples should hopefully be fully replaced this/next week with about ~40 examples, which don't rely on that behavior: #43

Long term though, I plan on having a separate section for showing console.logs etc in the playground rather than relying on you having to open dev tools. Which is basically what you're talking about 👍 - I'm definitely open to that coming in early though!

from typescript-website.

In the v3 playground console logs are posted inside the playground, so I'm closing this but leaving #11 open in case someone wants to add a specific "eval in new tab" feature

from typescript-website.

The JS running in the same tab isn't a bug it's working as intended, if you'd like to support making the playground create a new tab then you're welcome to take a look at #11

from typescript-website.

Thanks for your reply. I think the bug is that the output is out of range.
It perhaps needs a CSS modification to be shown on screen when running on Windows.
The result is there, but it is not seen, which makes the playground useless for Windows users like me.

from typescript-website.

You're editing the DOM, so it will run whatever code you are running in the current DOM - this means you're working in the existing screen. You can use code that inserts at the top, or creates a modal

from typescript-website.

The playground on the Typescriptlang site was designed for demonstrating TypeScript syntax to newcomers.
As it stands right now, it is not doing its job for Windows users.
The simplicity of the original playground was its biggest strength.
That is all I wanted to report, and the rest is up to whomever makes these decisions.

from typescript-website.

This is also broken in Chrome on MacOS.
To reproduce:

1. Open playground
2. Examples > Using Classes
3. Click the Run button

You won't see a new tab. But if you open the developer console, at the bottom of the Elements tab, you'll see a new Say Hello element added every time you click Run.

Unfortunately, you can't navigate to the button, so you can't actually 'run' the function.

I understand that this might be "works as designed" but it seriously reduces the functionality of the PLAYground. In addition, the examples are now useless.

Also tried Safari, but I can't even get the Playground to load.

from typescript-website.

I can get the examples to work with an ugly hack:

For now, instead of document.body.appendChild(button), do:

document.body.insertBefore(button, document.getElementById("playground"));

where "playground" is the id of some element in the page - this gives you a fakey 'button' object right under the bar with the "run" link in it. It's enough to give you something to click on, and thus still learn some typescript in the playground.

from typescript-website.

5 of the 13 examples are broken due to hidden DOM outputs, including the ray tracer example (the best one 👍). If the main purpose is to see compiled code, then why have a "Run" button? A playground should be the easiest way to try something in TypeScript, including proper support for DOM manipulation.

I think there should be an Display section that exists below the compiled output section#output > .monaco-editor but with a zero height until elements exist within it. Then either re-write the examples to scope to that display section (append to a specific element) or use an iframe to execute the compiled code in a "sandbox" (so appending to document.body just works™).

In either case, if a script never renders any DOM, then the display section stays zero height. If a script does render DOM elements then its height would be greater than zero and would automatically display. (I tried to implement the Display section but the section#output > .monaco-editor height was constantly increasing (via JS) once I added a sibling element. Perhaps the 'section#output should display: flex; flex-direction: column;?).

I can put together a PR this weekend if this is something the team is interested in.

from typescript-website.

@orta That's fantastic! I love it when I can see console output without having to open devtools. Is there an issue for tracking that, or is that "further out"?

from typescript-website.

Further out realistically, I still need to get the designs through review inside MS. Though It passed a AX audit yesterday.

Could be towards the end of the year before I can get to work on this part of the site re-design, as I'll be focusing on the docs/site nav first.

from typescript-website.