7 ms·

MDN Playground

232 points by weinzierl 3y ago

mintaka5 3y ago
just for the record MDN's site, hands down, has the best documentation ever made by any agent of the programming industry
- raincole 3y ago
  Especially considering they are facing an unusual hassle: browsers' compatibility (which is completely out of their control).
- bsmth 3y ago
  Thank you for sharing, feedback like this is a great to see :)
- dgb23 3y ago
  It's not only a great reference documentation, it also has comprehensive guides for both beginners and advanced developers. Including niche/complex features like canvas, webrtc, service workers etc. In a web programming course I created I often referred to and leaned on MDN. Aside: DDG lets you search in MDN directly if you prefix a search with !mdn. It's one of the few sites that has a very much usable search feature.
  - edlucas 3y ago
    Kagi search also supports this bang shortcut, which I find very handy.
  - mintaka5 3y ago
    such a great resource and i have much respect for the devs of this site, to go to such a level quality, that it makes it easier for all of us to accomplish great things =)
- krono 3y ago
  The site is an absolute godsend, but it's also quite sad that the various standards specifications MDN covers have such terrible documentation websites of their own, that something like what MDN offers is even needed at all! Just look at the official HTML and JavaSc.. nay, ECMAScript specification docs[0][1]. You'd sooner end up with a headache than a functional website if you had no other choice but to use those ;) [0]: https://html.spec.whatwg.org/ https://html.spec.whatwg.org/ [1]: https://262.ecma-international.org/14.0/ https://262.ecma-international.org/14.0/
  - bazoom42 3y ago
    Those specs need to be extremely detailed to ensure interoperability. Earlier versions of the HTML specs were much more readable, but unfortunately lead to interoparability issues.
    - bsmth 3y ago
      Someone put it like this recently: the audience for specs is browser vendors, and the audience for MDN is web developers; ideally, you shouldn't have to go to the specs if MDN describes the features well enough to get your application running or your problem solved. MDN docs consider the practical aspect of how application developers will use features or why they should care, so there is a need to keep the content accessible in as many ways as possible.
    - krono 3y ago
      With full appreciation of all the complexities and intricacies involved here, the state of these official documentation resources as they exist today isn't great. Additionally, most initiatives aimed at improving the situation have only resulted in yet more overhead in the form of additional committees with each their own agendas and procedures, or the creation of another new deeply interconnected but otherwise completely separate sibling standard[0][1][3][4], fragmenting things even further. I used to be quite heavily involved with some of the more meritful of those initiatives, but at some point realised that despite all the time and effort I was putting in, nothing really meaningful/impactful had been achieved or was even anywhere in sight, and it was also becoming too costly on a personal level. Guess that's my justification for having the right to post this rant :) [0] https://infra.spec.whatwg.org/ https://infra.spec.whatwg.org/ [1] https://webidl.spec.whatwg.org/ https://webidl.spec.whatwg.org/ [2] https://w3c.github.io/html-aam/ https://w3c.github.io/html-aam/ [4] https://w3c.github.io/html-aria/ https://w3c.github.io/html-aria/
- thrdbndndn 3y ago
  I do found more minor errors in MDN compared to other official documentation (like Python), but it's kinda understandable. And it sometimes takes months to get things fixed (after reporting or providing PR at https://github.com/mdn/content https://github.com/mdn/content). I've learned to always test myself when it comes to pesky/obscure behavior(s) of JS.
- Xenoamorphous 3y ago
  Yet for some reason w3schools ranks higher in Google for many queries.
  - Phemist 3y ago
    The exact reason why you need some control over your search engine results. For me, I have blackholed w3schools and boosted MDN in my search engine of choice. It is quite nice to always get the MDN page on a web-dev related query as the top result. Even searching for "w3schools" directly results in the wikipedia as the top result (which is.. fair enough). The same search on DDG results is a page full of w3schools & subdomains.
    - hju22_-3 3y ago
      Any reason not to mention which search engine you use?
      - leadingthenet 3y ago
        I'm not him but Kagi supports this functionality, and I make heavy use of it. Incredibly useful.
      - Phemist 3y ago
        To put the focus on the principle of controlling your search engine results, rather than the specific tool (which is Kagi btw)
    - endemic 3y ago
      Can also use a DDG bang: https://duckduckgo.com/bangs?q=mdn https://duckduckgo.com/bangs?q=mdn
      - Phemist 3y ago
        Not the same, as I would then _only_ search MDN. MDN does not know anything about the battle of waterloo: https://developer.mozilla.org/en-US/search?q=battle+of+waterloo https://developer.mozilla.org/en-US/search?q=battle+of+water... And Wikipedia does not have any real API documentation of `requestAnimationFrame` https://en.wikipedia.org/wiki/Special:Search?go=Go&search=requestAnimationFrame&ns0=1 https://en.wikipedia.org/wiki/Special:Search?go=Go&search=re... I want both of these to return sensible results for the bang-less search. This is the easiest for me and as a user of the search engine product, should also be what the search engine delivers me.
- timvisee 3y ago
  Then you haven't seen Rust's documentation yet. https://doc.rust-lang.org/std/index.html https://doc.rust-lang.org/std/index.html
  - lytedev 3y ago
    I'm partial to Elixir's documentation myself: https://hexdocs.pm/ecto/Ecto.html https://hexdocs.pm/ecto/Ecto.html
  - sjsanc 3y ago
    Compare MDN's entry for the `map` method https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map https://developer.mozilla.org/en-US/docs/Web/JavaScript/Refe... With Rust's https://doc.rust-lang.org/std/iter/struct.Map.html https://doc.rust-lang.org/std/iter/struct.Map.html I find MDN to be a bit clearer, and they benefit from the in-browser runtime. All the extra detail in the Rust docs (blanket traits etc) were quite intimidating and distracting when I first started learning it.
    - timvisee 3y ago
      That MDN page has a lot of noise and is not straight to the point. I guess that may be a side effect of JS though.
      - lucideer 3y ago
        While both of these docs are pretty good, as someone who normally much prefers API references to "how to" formats, the MDN's "how to" approach here is succinct & just enough to cover reasonable bases, while the Rust API ref list is a bit too terse by comparison (& the Read More click out is a bit annoying).
      - recursive 3y ago
        Where's the noise? I'm not seeing any.
    - ndriscoll 3y ago
- bob1029 3y ago
  The quality of MDN gave me enough confidence to move away from frameworks and take matters into my own hands.
- IshKebab 3y ago
  I disagree. It's very good. Far above average. But there's still a decent number of times I find missing details. If we're talking the best then it has to compete with Qt, Rust, MSDN, cppreference, all of which I would say are better. Definitely in the top 10 though.
catsarebetter 3y ago
The AI Help feature looks super interesting, any plans to integrate it into the playground?
- jai_ 3y ago
  I sincerly hope that they remove this feature and apologise for its integration in the first place. I don't think a reference website should include any sort of feature that can hallucinate incorrect documentation for you on demand. It's bad enough that they have to include a disclaimer[1] on their upsell page, which states that the "AI Help" may occassionally return incorrect results. [1]: https://developer.mozilla.org/en-US/plus/ai-help https://developer.mozilla.org/en-US/plus/ai-help
  - hagreet 3y ago
    Please no. The site is an important resource for people learning JS and other web technologies and AI is great at explaining code snippets which would otherwise be follow-up look-ups and at explaining what the often very dense MDN content means. And AI is actually really good at generating code as well, you just have to review it like it was written by a junior dev. I think most of the hate for current AI tools comes from the fact that people expect the computer from Star Trek which always provides perfect answers. Edit: So yes, it needs to be made super obvious to users that it might give you wrong answers.
    - sensanaty 3y ago
      Except it gets mostly everything wrong, even very simple things that are on the page itself. https://github.com/mdn/yari/issues/9208 https://github.com/mdn/yari/issues/9208
    - jai_ 3y ago
      I'm really not sure how you can argue that "AI is great at explaining code snippets" while also acknowledging that it will just give you flat out wrong answers some times. Either it's good at explaining and is right, or is bad at explaining and is wrong. Applying the logic of it being "right most of the time" seems really bad for a tool applied to a reference documentation website.
capableweb 3y ago
Not sure if it's a bug or not, but the JavaScript editor seems to only try to autocomplete reserved keywords and not much more, unlike the HTML and CSS editor. I'd expect it to show me at least functions available at window., document. and console. , as an example.
Pixie_Dust 3y ago
[flagged]
jerrygoyal 3y ago
I liked that it is lightweight than codesandbox, stackblitz etc.Also, surprised that it has intellisense but it doesn't work for `console.log`.
- qsort 3y ago
  It's something more like jsfiddle than a full-blown dev environment like codesandbox or stackblitz.
mg 3y ago
For some reason, I never liked that all the code playgrounds have separate windows for HTML, CSS and Javascript. It makes it hard to grok what is going on. Does the CSS and JS get injected into the HTML? Is it loaded via injected <script> and <link> tags? I'm also never sure what magic gets wrapped around the html I type. Does this thing add a DOCTYPE? A header? Or can I define my own header? Etc. So I made this one, where you edit just a raw html page and see the output right away: https://no-gravity.github.io/html_editor/ https://no-gravity.github.io/html_editor/ The code is here: https://github.com/no-gravity/html_editor https://github.com/no-gravity/html_editor One way I often use it is that I copy the whole source (via view source) of a page, paste it into the html_editor, add a <base href="url_of_the_page"> to it and then I can try realtime changes with all the external CSS and JS being loaded just as it is on the original page.
- sintaxi 3y ago
  Agreed. Great job.
- cetinsert 3y ago
  https://RTCode.io https://RTCode.io is our single-pane, reload-free, HTML/CSS/JS playground! Video: https://rt.ht/yt https://rt.ht/yt (multi-device, live sync without reloads) Home: https://elefunc.com/#rtcode_io https://elefunc.com/#rtcode_io Playground: https://rtcode.io https://rtcode.io Network: https://rtedge.net https://rtedge.net --- To import from CodePen: • https://codepen.io/jkantner/pen/NWEgzoK https://codepen.io/jkantner/pen/NWEgzoK (original) • https://rt.ht/codepen.io/jkantner/pen/NWEgzoK https://rt.ht/codepen.io/jkantner/pen/NWEgzoK (import) • https://rtcode.io/jkantner/pen/NWEgzoK https://rtcode.io/jkantner/pen/NWEgzoK (import)
  - xyby 3y ago
    Does not work at all for me. Is this a commercial product?
    - cetinsert 3y ago
      What is it that does not work? You can also email us at support@rtcode.io • https://new.rt.ht https://new.rt.ht (try starting fresh here) If you cannot save your code, just save the URL which encodes the complete state down to the selected text ranges. Saving/deployed to 275+ Cloudflare locations may not be available globally yet. It is will be a free playground with commercial features, such as edge-deployed workers which can be developed in-editor: • https://sw.rt.ht/ https://sw.rt.ht/? (in-editor) • https://sw.rt.ht https://sw.rt.ht (edge-deployed)
Etheryte 3y ago
Small bug report: 1) Clear the site data so you don't have a saved playground preloaded. 2) Focus the Javascript text area and type a singular "f", nothing more, nothing less, no other interactions. 3) The playground compiles, the cursor position in the Javascript text area is reset incorrectly.
- fiji-flo 3y ago
  Great catch, should be fixed with our nightly (UTC) deployment.
anon35 3y ago
Great to see. More generally: I feel like playgrounds are grossly underused in our industry. It's possible the issue is in the name -- it immediately connotes that whatever you're doing isn't real work, it's just a place to, well, "play". But really these kind of playgrounds are at least a cousin, if not a direct descendant, of the immediate feedback principle that underlies everything from a REPL to the kind of systems (Symbolics, etc) that allow you to edit running code. Their potential is beautifully illustrated in Brett Victor's famous 'Inventing on Principle' talk: https://www.youtube.com/watch?v=PUv66718DII https://www.youtube.com/watch?v=PUv66718DII Three areas that I'd love to see playgrounds mature beyond teaching beginners CSS: 1) Integrated directly into developer documentation. You can see some of that in systems that are documenting services -- for example, the Google Sheets API documentation has a 'Try this Method' box that lets you post a request to the service on the same page that describes it, but what I really want is something like that when I'm reading the man page of a destructive disk command, or a complex database query, or a low-level C graphics library. That'll require a playground wired to something as big as a VM, maybe. 2) Integrated into textbooks: for the last couple years the astonishing posts from Bartosz Ciechanowski ([Sound](https://ciechanow.ski/sound/ https://ciechanow.ski/sound/), [Bicyle](https://ciechanow.ski/bicycle/ https://ciechanow.ski/bicycle/)) have demonstrated just how much better a textbook could be if you could interactively play with the concepts you're reading about. Unlike dev docs, the thing you're interacting with doesn't even have to be "real". 3) Most ambitiously: integrated into the input form of bug/issue tracking tools. This is the opposite of play: it means a running system would need to be in cahoots with a playground, so that mature apps could let you record and playback what you saw as a user, allow you to edit irrelevant parts of input and output out and submit a complete here-look-see-it-is-busted asset for analysis. A Stackoverflow of the future would be orders of magnitude more interesting if each question was posed as a broken playground.
- chrisweekly 3y ago
  Great comment. Related thoughts: "design systems" / UI component libraries often have interactive documentation sites (e.g. built with Storybook), showcasing variants and providing "knobs" / controls to edit props and see the results in realtime, so lib consumers can see a component working (in isolation) and generate a code fragment copy/pasteable into their own downstream app. Also, extending your item (3), project maintainers often ask people reporting bugs to provide an MRE (Minimum Reproducable Example) in a standalone repo. I've noticed a few such cases where the maintainers make this much easier by sharing a link to a basic preconfigured codesandbox or stackblitz for exactly this MRE purpose. I think this idea will catch on and become much more common.
cassepipe 3y ago
My problems with all those playgrounds is that I don't know where shortcuts are and when there are shortcuts, it's full of Ctrl combination that may clash with the browser... Can I has a vim mode please ? I am not returning back to using arrows to move around text
- 8n4vidtmkvmk 3y ago
  "install" the web page. That opens up more keyboard shortcuts.
toinewx 3y ago
so basically codepen
- deleted 3y ago
  [deleted]
pdmccormick 3y ago
Last week I signed up for an annual subscription to MDN. I didn’t realize it at the time, but paying subscribers get the option to enable offline mode (it currently downloads about 630 MiB of content). I generally have fast connections wherever I’m working, but the difference between “fast” and “instant” when loading new pages is really making the experience feel special for me. I would heartily suggest you support MDN and try it out!
msoad 3y ago
They have to solve the problems JSBin and like solved years ago all over again. Starting with infinite loops ;)
- ogaistan 3y ago
  Funny that you mentioned this as I added some heuristics to my playground [1] yesterday for this use case. It relies on Babel [2] which looks for `for`, `while` and `do-while` loops and injects a counter that throws an 'infinite loop detected' error to prevent the browser freezing. You can opt out if you know what you are doing. It's not perfect, but it covers this base cases. [1] https://www.jsplayground.dev https://www.jsplayground.dev [2] https://babeljs.io https://babeljs.io
fiji-flo 3y ago
Here's the announcement blog post for some context: https://developer.mozilla.org/en-US/blog/introducing-the-mdn-playground/ https://developer.mozilla.org/en-US/blog/introducing-the-mdn...
spread_love 3y ago
Freemium teaser? I'd monetize this by adding features and hiding them behind MDN Pro+ (or w/e the subscription is called) in the future. Ala Codepen.
ogaistan 3y ago
I really spend more time than I thought I would be (in this age of JS frameworks) using dead simple HTML, CSS, JS playgrounds for quick prototyping and iteration. I did eventually end up building one for myself and made it available [1] that the goal was a clean UI/UX, minimal and instant live feedback loop with no extra calls to the server - just a simple static website. It defaults to a JS playground since it's what I use the most but HTML and CSS can be toggled. [1] https://www.jsplayground.dev https://www.jsplayground.dev
max23_ 3y ago
Nice to see this from MDN. My go to playground has been jsfiddle, will start using this.
KRAKRISMOTT 3y ago
Any chance emmet and autocompletion can be added for the editor?
mkhizar53 3y ago
shows why simple works
spankalee 3y ago
If you ever want to add a client-side-only playground to your own site, have a look at the Playground Elements project: https://github.com/google/playground-elements https://github.com/google/playground-elements It's a set of custom elements and a service worker that populate an iframe with the contents of the code editor with no server, but in a way that looks like real network requests to the iframe. This means you get a root HTML page and all the right loading behavior and ordering as a real hosted web page. Inspect the iframe with devtools and you see exactly what you wrote, nothing added by the playground. The elements also support Node-style import specifier resolution, pulling npm dependencies automatically from unpkg.com, TypeScript, and JSX. And the elements are very configurable. You have drop in a tabbed-editor and preview combo element, or you can separate the preview and editors for each file - which lets you write prose around each.

232 points by weinzierl 3y ago

just for the record MDN's site, hands down, has the best documentation ever made by any agent of the programming industry

raincole 3y ago
Especially considering they are facing an unusual hassle: browsers' compatibility (which is completely out of their control).
bsmth 3y ago
Thank you for sharing, feedback like this is a great to see :)
dgb23 3y ago
It's not only a great reference documentation, it also has comprehensive guides for both beginners and advanced developers. Including niche/complex features like canvas, webrtc, service workers etc. In a web programming course I created I often referred to and leaned on MDN. Aside: DDG lets you search in MDN directly if you prefix a search with !mdn. It's one of the few sites that has a very much usable search feature.
- edlucas 3y ago
  Kagi search also supports this bang shortcut, which I find very handy.
- mintaka5 3y ago
  such a great resource and i have much respect for the devs of this site, to go to such a level quality, that it makes it easier for all of us to accomplish great things =)
krono 3y ago
The site is an absolute godsend, but it's also quite sad that the various standards specifications MDN covers have such terrible documentation websites of their own, that something like what MDN offers is even needed at all! Just look at the official HTML and JavaSc.. nay, ECMAScript specification docs[0][1]. You'd sooner end up with a headache than a functional website if you had no other choice but to use those ;) [0]: https://html.spec.whatwg.org/ https://html.spec.whatwg.org/ [1]: https://262.ecma-international.org/14.0/ https://262.ecma-international.org/14.0/
- bazoom42 3y ago
  Those specs need to be extremely detailed to ensure interoperability. Earlier versions of the HTML specs were much more readable, but unfortunately lead to interoparability issues.
  - bsmth 3y ago
    Someone put it like this recently: the audience for specs is browser vendors, and the audience for MDN is web developers; ideally, you shouldn't have to go to the specs if MDN describes the features well enough to get your application running or your problem solved. MDN docs consider the practical aspect of how application developers will use features or why they should care, so there is a need to keep the content accessible in as many ways as possible.
  - krono 3y ago
    With full appreciation of all the complexities and intricacies involved here, the state of these official documentation resources as they exist today isn't great. Additionally, most initiatives aimed at improving the situation have only resulted in yet more overhead in the form of additional committees with each their own agendas and procedures, or the creation of another new deeply interconnected but otherwise completely separate sibling standard[0][1][3][4], fragmenting things even further. I used to be quite heavily involved with some of the more meritful of those initiatives, but at some point realised that despite all the time and effort I was putting in, nothing really meaningful/impactful had been achieved or was even anywhere in sight, and it was also becoming too costly on a personal level. Guess that's my justification for having the right to post this rant :) [0] https://infra.spec.whatwg.org/ https://infra.spec.whatwg.org/ [1] https://webidl.spec.whatwg.org/ https://webidl.spec.whatwg.org/ [2] https://w3c.github.io/html-aam/ https://w3c.github.io/html-aam/ [4] https://w3c.github.io/html-aria/ https://w3c.github.io/html-aria/
thrdbndndn 3y ago
I do found more minor errors in MDN compared to other official documentation (like Python), but it's kinda understandable. And it sometimes takes months to get things fixed (after reporting or providing PR at https://github.com/mdn/content https://github.com/mdn/content). I've learned to always test myself when it comes to pesky/obscure behavior(s) of JS.
Xenoamorphous 3y ago
Yet for some reason w3schools ranks higher in Google for many queries.
- Phemist 3y ago
  The exact reason why you need some control over your search engine results. For me, I have blackholed w3schools and boosted MDN in my search engine of choice. It is quite nice to always get the MDN page on a web-dev related query as the top result. Even searching for "w3schools" directly results in the wikipedia as the top result (which is.. fair enough). The same search on DDG results is a page full of w3schools & subdomains.
  - hju22_-3 3y ago
    Any reason not to mention which search engine you use?
    - leadingthenet 3y ago
      I'm not him but Kagi supports this functionality, and I make heavy use of it. Incredibly useful.
    - Phemist 3y ago
      To put the focus on the principle of controlling your search engine results, rather than the specific tool (which is Kagi btw)
  - endemic 3y ago
    Can also use a DDG bang: https://duckduckgo.com/bangs?q=mdn https://duckduckgo.com/bangs?q=mdn
    - Phemist 3y ago
      Not the same, as I would then _only_ search MDN. MDN does not know anything about the battle of waterloo: https://developer.mozilla.org/en-US/search?q=battle+of+waterloo https://developer.mozilla.org/en-US/search?q=battle+of+water... And Wikipedia does not have any real API documentation of `requestAnimationFrame` https://en.wikipedia.org/wiki/Special:Search?go=Go&search=requestAnimationFrame&ns0=1 https://en.wikipedia.org/wiki/Special:Search?go=Go&search=re... I want both of these to return sensible results for the bang-less search. This is the easiest for me and as a user of the search engine product, should also be what the search engine delivers me.
timvisee 3y ago
Then you haven't seen Rust's documentation yet. https://doc.rust-lang.org/std/index.html https://doc.rust-lang.org/std/index.html
- lytedev 3y ago
  I'm partial to Elixir's documentation myself: https://hexdocs.pm/ecto/Ecto.html https://hexdocs.pm/ecto/Ecto.html
- sjsanc 3y ago
  Compare MDN's entry for the `map` method https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map https://developer.mozilla.org/en-US/docs/Web/JavaScript/Refe... With Rust's https://doc.rust-lang.org/std/iter/struct.Map.html https://doc.rust-lang.org/std/iter/struct.Map.html I find MDN to be a bit clearer, and they benefit from the in-browser runtime. All the extra detail in the Rust docs (blanket traits etc) were quite intimidating and distracting when I first started learning it.
  - timvisee 3y ago
    That MDN page has a lot of noise and is not straight to the point. I guess that may be a side effect of JS though.
    - lucideer 3y ago
      While both of these docs are pretty good, as someone who normally much prefers API references to "how to" formats, the MDN's "how to" approach here is succinct & just enough to cover reasonable bases, while the Rust API ref list is a bit too terse by comparison (& the Read More click out is a bit annoying).
    - recursive 3y ago
      Where's the noise? I'm not seeing any.
  - ndriscoll 3y ago
bob1029 3y ago
The quality of MDN gave me enough confidence to move away from frameworks and take matters into my own hands.
IshKebab 3y ago
I disagree. It's very good. Far above average. But there's still a decent number of times I find missing details. If we're talking the best then it has to compete with Qt, Rust, MSDN, cppreference, all of which I would say are better. Definitely in the top 10 though.

catsarebetter 3y ago

The AI Help feature looks super interesting, any plans to integrate it into the playground?

jai_ 3y ago
I sincerly hope that they remove this feature and apologise for its integration in the first place. I don't think a reference website should include any sort of feature that can hallucinate incorrect documentation for you on demand. It's bad enough that they have to include a disclaimer[1] on their upsell page, which states that the "AI Help" may occassionally return incorrect results. [1]: https://developer.mozilla.org/en-US/plus/ai-help https://developer.mozilla.org/en-US/plus/ai-help
- hagreet 3y ago
  Please no. The site is an important resource for people learning JS and other web technologies and AI is great at explaining code snippets which would otherwise be follow-up look-ups and at explaining what the often very dense MDN content means. And AI is actually really good at generating code as well, you just have to review it like it was written by a junior dev. I think most of the hate for current AI tools comes from the fact that people expect the computer from Star Trek which always provides perfect answers. Edit: So yes, it needs to be made super obvious to users that it might give you wrong answers.
  - sensanaty 3y ago
    Except it gets mostly everything wrong, even very simple things that are on the page itself. https://github.com/mdn/yari/issues/9208 https://github.com/mdn/yari/issues/9208
  - jai_ 3y ago
    I'm really not sure how you can argue that "AI is great at explaining code snippets" while also acknowledging that it will just give you flat out wrong answers some times. Either it's good at explaining and is right, or is bad at explaining and is wrong. Applying the logic of it being "right most of the time" seems really bad for a tool applied to a reference documentation website.

capableweb 3y ago

Not sure if it's a bug or not, but the JavaScript editor seems to only try to autocomplete reserved keywords and not much more, unlike the HTML and CSS editor. I'd expect it to show me at least functions available at window., document. and console. , as an example.

Pixie_Dust 3y ago

[flagged]

jerrygoyal 3y ago

I liked that it is lightweight than codesandbox, stackblitz etc.Also, surprised that it has intellisense but it doesn't work for `console.log`.

qsort 3y ago
It's something more like jsfiddle than a full-blown dev environment like codesandbox or stackblitz.

mg 3y ago

For some reason, I never liked that all the code playgrounds have separate windows for HTML, CSS and Javascript. It makes it hard to grok what is going on. Does the CSS and JS get injected into the HTML? Is it loaded via injected <script> and <link> tags? I'm also never sure what magic gets wrapped around the html I type. Does this thing add a DOCTYPE? A header? Or can I define my own header? Etc. So I made this one, where you edit just a raw html page and see the output right away: https://no-gravity.github.io/html_editor/ https://no-gravity.github.io/html_editor/ The code is here: https://github.com/no-gravity/html_editor https://github.com/no-gravity/html_editor One way I often use it is that I copy the whole source (via view source) of a page, paste it into the html_editor, add a <base href="url_of_the_page"> to it and then I can try realtime changes with all the external CSS and JS being loaded just as it is on the original page.

sintaxi 3y ago
Agreed. Great job.
cetinsert 3y ago
https://RTCode.io https://RTCode.io is our single-pane, reload-free, HTML/CSS/JS playground! Video: https://rt.ht/yt https://rt.ht/yt (multi-device, live sync without reloads) Home: https://elefunc.com/#rtcode_io https://elefunc.com/#rtcode_io Playground: https://rtcode.io https://rtcode.io Network: https://rtedge.net https://rtedge.net --- To import from CodePen: • https://codepen.io/jkantner/pen/NWEgzoK https://codepen.io/jkantner/pen/NWEgzoK (original) • https://rt.ht/codepen.io/jkantner/pen/NWEgzoK https://rt.ht/codepen.io/jkantner/pen/NWEgzoK (import) • https://rtcode.io/jkantner/pen/NWEgzoK https://rtcode.io/jkantner/pen/NWEgzoK (import)
- xyby 3y ago
  Does not work at all for me. Is this a commercial product?
  - cetinsert 3y ago
    What is it that does not work? You can also email us at support@rtcode.io • https://new.rt.ht https://new.rt.ht (try starting fresh here) If you cannot save your code, just save the URL which encodes the complete state down to the selected text ranges. Saving/deployed to 275+ Cloudflare locations may not be available globally yet. It is will be a free playground with commercial features, such as edge-deployed workers which can be developed in-editor: • https://sw.rt.ht/ https://sw.rt.ht/? (in-editor) • https://sw.rt.ht https://sw.rt.ht (edge-deployed)

Etheryte 3y ago

Small bug report: 1) Clear the site data so you don't have a saved playground preloaded. 2) Focus the Javascript text area and type a singular "f", nothing more, nothing less, no other interactions. 3) The playground compiles, the cursor position in the Javascript text area is reset incorrectly.

fiji-flo 3y ago
Great catch, should be fixed with our nightly (UTC) deployment.

anon35 3y ago

Great to see. More generally: I feel like playgrounds are grossly underused in our industry. It's possible the issue is in the name -- it immediately connotes that whatever you're doing isn't real work, it's just a place to, well, "play". But really these kind of playgrounds are at least a cousin, if not a direct descendant, of the immediate feedback principle that underlies everything from a REPL to the kind of systems (Symbolics, etc) that allow you to edit running code. Their potential is beautifully illustrated in Brett Victor's famous 'Inventing on Principle' talk: https://www.youtube.com/watch?v=PUv66718DII https://www.youtube.com/watch?v=PUv66718DII Three areas that I'd love to see playgrounds mature beyond teaching beginners CSS: 1) Integrated directly into developer documentation. You can see some of that in systems that are documenting services -- for example, the Google Sheets API documentation has a 'Try this Method' box that lets you post a request to the service on the same page that describes it, but what I really want is something like that when I'm reading the man page of a destructive disk command, or a complex database query, or a low-level C graphics library. That'll require a playground wired to something as big as a VM, maybe. 2) Integrated into textbooks: for the last couple years the astonishing posts from Bartosz Ciechanowski ([Sound](https://ciechanow.ski/sound/ https://ciechanow.ski/sound/), [Bicyle](https://ciechanow.ski/bicycle/ https://ciechanow.ski/bicycle/)) have demonstrated just how much better a textbook could be if you could interactively play with the concepts you're reading about. Unlike dev docs, the thing you're interacting with doesn't even have to be "real". 3) Most ambitiously: integrated into the input form of bug/issue tracking tools. This is the opposite of play: it means a running system would need to be in cahoots with a playground, so that mature apps could let you record and playback what you saw as a user, allow you to edit irrelevant parts of input and output out and submit a complete here-look-see-it-is-busted asset for analysis. A Stackoverflow of the future would be orders of magnitude more interesting if each question was posed as a broken playground.

chrisweekly 3y ago
Great comment. Related thoughts: "design systems" / UI component libraries often have interactive documentation sites (e.g. built with Storybook), showcasing variants and providing "knobs" / controls to edit props and see the results in realtime, so lib consumers can see a component working (in isolation) and generate a code fragment copy/pasteable into their own downstream app. Also, extending your item (3), project maintainers often ask people reporting bugs to provide an MRE (Minimum Reproducable Example) in a standalone repo. I've noticed a few such cases where the maintainers make this much easier by sharing a link to a basic preconfigured codesandbox or stackblitz for exactly this MRE purpose. I think this idea will catch on and become much more common.

cassepipe 3y ago

My problems with all those playgrounds is that I don't know where shortcuts are and when there are shortcuts, it's full of Ctrl combination that may clash with the browser... Can I has a vim mode please ? I am not returning back to using arrows to move around text

8n4vidtmkvmk 3y ago
"install" the web page. That opens up more keyboard shortcuts.

toinewx 3y ago

so basically codepen

deleted 3y ago
[deleted]

pdmccormick 3y ago

Last week I signed up for an annual subscription to MDN. I didn’t realize it at the time, but paying subscribers get the option to enable offline mode (it currently downloads about 630 MiB of content). I generally have fast connections wherever I’m working, but the difference between “fast” and “instant” when loading new pages is really making the experience feel special for me. I would heartily suggest you support MDN and try it out!

msoad 3y ago

They have to solve the problems JSBin and like solved years ago all over again. Starting with infinite loops ;)

ogaistan 3y ago
Funny that you mentioned this as I added some heuristics to my playground [1] yesterday for this use case. It relies on Babel [2] which looks for `for`, `while` and `do-while` loops and injects a counter that throws an 'infinite loop detected' error to prevent the browser freezing. You can opt out if you know what you are doing. It's not perfect, but it covers this base cases. [1] https://www.jsplayground.dev https://www.jsplayground.dev [2] https://babeljs.io https://babeljs.io

fiji-flo 3y ago

Here's the announcement blog post for some context: https://developer.mozilla.org/en-US/blog/introducing-the-mdn-playground/ https://developer.mozilla.org/en-US/blog/introducing-the-mdn...

spread_love 3y ago

Freemium teaser? I'd monetize this by adding features and hiding them behind MDN Pro+ (or w/e the subscription is called) in the future. Ala Codepen.

ogaistan 3y ago

I really spend more time than I thought I would be (in this age of JS frameworks) using dead simple HTML, CSS, JS playgrounds for quick prototyping and iteration. I did eventually end up building one for myself and made it available [1] that the goal was a clean UI/UX, minimal and instant live feedback loop with no extra calls to the server - just a simple static website. It defaults to a JS playground since it's what I use the most but HTML and CSS can be toggled. [1] https://www.jsplayground.dev https://www.jsplayground.dev

max23_ 3y ago

Nice to see this from MDN. My go to playground has been jsfiddle, will start using this.

KRAKRISMOTT 3y ago

Any chance emmet and autocompletion can be added for the editor?

mkhizar53 3y ago

shows why simple works

spankalee 3y ago

If you ever want to add a client-side-only playground to your own site, have a look at the Playground Elements project: https://github.com/google/playground-elements https://github.com/google/playground-elements It's a set of custom elements and a service worker that populate an iframe with the contents of the code editor with no server, but in a way that looks like real network requests to the iframe. This means you get a root HTML page and all the right loading behavior and ordering as a real hosted web page. Inspect the iframe with devtools and you see exactly what you wrote, nothing added by the playground. The elements also support Node-style import specifier resolution, pulling npm dependencies automatically from unpkg.com, TypeScript, and JSX. And the elements are very configurable. You have drop in a tabbed-editor and preview combo element, or you can separate the preview and editors for each file - which lets you write prose around each.