6 ms·

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

by 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)
- AndroidKitKat 3y ago
  This is very nice, and I can see myself using this in the future. However, I have one slight piece of feedback; is there any chance you can make the delay on the menus flying out and tooltips just appearing all over the place when I move my cursor just a little bit longer? I felt like I was getting bombarded with information by just wanting to move my cursor to the other pane. Besides that, I like it. Thanks for the links.
  - cetinsert 3y ago
    We will increase the delay. Thank you for the feedback! You can reach us anytime at support@rtcode.io
gpmcadam 3y ago
One of the strangest things to infect the web development community was that separation of concerns somehow meant separation of HTML/JS/CSS, which to me always felt like the opposite since very often the HTML, the JS and the CSS were all very much concerned with one another e.g. a React component where the rendered HTML, the logic behind it and how it's styled make sense to live next to one another. I think it's for this reason you often see those languages split out in code playgrounds. And I also think it's a big part of the initial pushback against css-in-JS libraries such as styled-components or Emotion.
- toyg 3y ago
  It makes more sense if you think that an HTML is a static document, which then gets decorated by CSS, and lightly animated by JS. That is what the web was built as. We were supposed to browse documents like we browsed magazines. Your React monstrosities were hacked on top of that model, turning the browser into an application runtime - which it wasn't meant to be.
  - doctor_eval 3y ago
    That’s a misreading of history. Here’s the announcement for JavaScript, which was posted here just yesterday[0]: It says, > MOUNTAIN VIEW, Calif. (December 4, 1995) -- Netscape Communications Corporation (NASDAQ: NSCP) and Sun Microsystems, Inc. (NASDAQ:SUNW), today announced JavaScript, an open, cross-platform object scripting language for the creation and customization of applications on enterprise networks and the Internet. (Emphasis mine) JavaScript was always meant for building applications. [0] https://news.ycombinator.com/item?id=36782761 https://news.ycombinator.com/item?id=36782761
    - moritzwarhier 3y ago
      Even assuming JS that was originally meant for hover effects (or "rollover") and other "light animation", complex web applications predate React by a lot. Think Outlook Web, Google Maps, and all the smaller apps built with frameworks of their time such as Dojo, YUI etc There also are monstrosities with the server at the center... applications with hundreds of hidden form fields per page, required server sessions for anonymous users, DSLs in half-baked server-side templating languages, server code generating and injecting opaque JS to sync state with the client, the list goes on. And these things all have ups and downs themselves I guess, just like React has. In fact animation is one of my least favorite uses of JS, the more I can do in CSS, the better. As a user sometimes I enjoy complex animations but only when it serves a purpose.
lelanthran 3y ago
> or 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? Tbh I also never liked it, for all those reasons you listed. Ideally it would be a left panel with a treeview list of files with the selected file displayed on the right panel in an editable element. Output should be a different window which updates on every change.
tomcam 3y ago
Yes cubed! Thank you.
viraptor 3y ago
> Does the CSS and JS get injected into the HTML? Is it loaded via injected <script> and <link> tags? Does it matter? (Serious question) Not for a full website where it matters for duplication / caching / performance, but in this context - for the playground.
- 8n4vidtmkvmk 3y ago
  Yes, the placement of the script tag very much matters, but it's most likely after your html or deferred to run after your html, in which case... Not really. There is one little quirky js thing you can do to get the script element from inside the script but I doubt many people are doing that.
  - chrismorgan 3y ago
    I do stuff like this regularly: <div>…</div><script>document.currentScript.previousSibling.…</script> Provided you care even vaguely about code size (and are ending up with handfuls of kilobytes at most, not multiple megabytes), inlining everything is excellent for performance (seriously, unreasonably effective, way more than most expect), and if it’s stuff that must be done before the document is fully interactive, then doing it immediately like this rather than messing around with DOMContentLoaded event handlers and querying and such is likewise excellent for performance.
    - 8n4vidtmkvmk 3y ago
      Yeah I think I was doing something similar. The scripts can safely be executed as soon as the HTML/DOM is in there, no need to defer to the end.
  - Eduard 3y ago
    > There is one little quirky js thing you can do to get the script element from inside the script. Now you *have* to elaborate. And what's the problem it solves?
    - 3y ago

by mg 3y ago

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)
AndroidKitKat 3y ago
This is very nice, and I can see myself using this in the future. However, I have one slight piece of feedback; is there any chance you can make the delay on the menus flying out and tooltips just appearing all over the place when I move my cursor just a little bit longer? I felt like I was getting bombarded with information by just wanting to move my cursor to the other pane. Besides that, I like it. Thanks for the links.
- cetinsert 3y ago
  We will increase the delay. Thank you for the feedback! You can reach us anytime at support@rtcode.io

gpmcadam 3y ago

One of the strangest things to infect the web development community was that separation of concerns somehow meant separation of HTML/JS/CSS, which to me always felt like the opposite since very often the HTML, the JS and the CSS were all very much concerned with one another e.g. a React component where the rendered HTML, the logic behind it and how it's styled make sense to live next to one another. I think it's for this reason you often see those languages split out in code playgrounds. And I also think it's a big part of the initial pushback against css-in-JS libraries such as styled-components or Emotion.

toyg 3y ago
It makes more sense if you think that an HTML is a static document, which then gets decorated by CSS, and lightly animated by JS. That is what the web was built as. We were supposed to browse documents like we browsed magazines. Your React monstrosities were hacked on top of that model, turning the browser into an application runtime - which it wasn't meant to be.
- doctor_eval 3y ago
  That’s a misreading of history. Here’s the announcement for JavaScript, which was posted here just yesterday[0]: It says, > MOUNTAIN VIEW, Calif. (December 4, 1995) -- Netscape Communications Corporation (NASDAQ: NSCP) and Sun Microsystems, Inc. (NASDAQ:SUNW), today announced JavaScript, an open, cross-platform object scripting language for the creation and customization of applications on enterprise networks and the Internet. (Emphasis mine) JavaScript was always meant for building applications. [0] https://news.ycombinator.com/item?id=36782761 https://news.ycombinator.com/item?id=36782761
  - moritzwarhier 3y ago
    Even assuming JS that was originally meant for hover effects (or "rollover") and other "light animation", complex web applications predate React by a lot. Think Outlook Web, Google Maps, and all the smaller apps built with frameworks of their time such as Dojo, YUI etc There also are monstrosities with the server at the center... applications with hundreds of hidden form fields per page, required server sessions for anonymous users, DSLs in half-baked server-side templating languages, server code generating and injecting opaque JS to sync state with the client, the list goes on. And these things all have ups and downs themselves I guess, just like React has. In fact animation is one of my least favorite uses of JS, the more I can do in CSS, the better. As a user sometimes I enjoy complex animations but only when it serves a purpose.

lelanthran 3y ago

> or 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? Tbh I also never liked it, for all those reasons you listed. Ideally it would be a left panel with a treeview list of files with the selected file displayed on the right panel in an editable element. Output should be a different window which updates on every change.

tomcam 3y ago

Yes cubed! Thank you.

viraptor 3y ago

> Does the CSS and JS get injected into the HTML? Is it loaded via injected <script> and <link> tags? Does it matter? (Serious question) Not for a full website where it matters for duplication / caching / performance, but in this context - for the playground.

8n4vidtmkvmk 3y ago
Yes, the placement of the script tag very much matters, but it's most likely after your html or deferred to run after your html, in which case... Not really. There is one little quirky js thing you can do to get the script element from inside the script but I doubt many people are doing that.
- chrismorgan 3y ago
  I do stuff like this regularly: <div>…</div><script>document.currentScript.previousSibling.…</script> Provided you care even vaguely about code size (and are ending up with handfuls of kilobytes at most, not multiple megabytes), inlining everything is excellent for performance (seriously, unreasonably effective, way more than most expect), and if it’s stuff that must be done before the document is fully interactive, then doing it immediately like this rather than messing around with DOMContentLoaded event handlers and querying and such is likewise excellent for performance.
  - 8n4vidtmkvmk 3y ago
    Yeah I think I was doing something similar. The scripts can safely be executed as soon as the HTML/DOM is in there, no need to defer to the end.
- Eduard 3y ago
  > There is one little quirky js thing you can do to get the script element from inside the script. Now you *have* to elaborate. And what's the problem it solves?
  - 3y ago