Hacker News Reader

Comment by mg | Hacker News Reader

I made this html editor with instant preview and it turned out useful when I show friends how make their very first html page:

https://no-gravity.github.io/html_editor/

Originally, I made it for myself. To quickly do HTML/CSS/JS experiments. And I still use it for that use case.

Often when I show it to non-developer friends, I can see how they light up to coding for the first time. I think it is because it is so accessible. No signup, no setup, no long page load. Everything is instant, and they see each change the moment they type it.

View on HN

This is great, but maybe you can add a sandbox to that iframe you use for displaying? Nothing to do with security, just that people copy pasting snippets can actually lock the page up with broken scripts. I speak from experience :)

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

A sandbox could be an interesting idea. Especially as a dropdown with options what should be blocked.

I am not sure if anything should be blocked by default, because that could always end in frustration when something that should work does not for mysterious reasons.

But it might make a good default to block all external requests when the editor gets a feature to link to code directly. Like ...html_editor/?code=<!doctype html><html>...

Then it could display an info box like "Initial code was loaded from your link and the sandbox was activated. Use the Sandbox menu to enable more features the code can use"

There was a bit of a discussion about this on HN two months ago here:

https://news.ycombinator.com/item?id=42448964

The editor is open source, so if you like, you can add the features you have in mind:

https://github.com/no-gravity/html_editor

i use this:

data:text/html,<body oninput="i.srcdoc=h.value+'<style>'+c.value+'</style><script>'+j.value+'</script>'"><style>textarea,iframe{width:100%;height:50%}body{margin:0}textarea{width:33.33%;font-size:18}</style><textarea placeholder=HTML id=h></textarea><textarea placeholder=CSS id=c></textarea><textarea placeholder=JS id=j></textarea><iframe id=i>

That is pretty nifty!

My problem with 'data:' urls is that I have never found a way to add them to the homescreen on Android.

It's the same reason I always recommend people to start with CodeAcademy if they want to start learning web dev. The interactive, live preview is perfect and the UI is nice enough to outsiders. There are other sites with preview boxes but they look very code-y. Once they can see how setting a background colour or adding a new <p> works in real time it helps the beginning of understanding.

Pretty cool, nice job!

And wouldn't it be semantically more correct to put the <style> tag into the <head> and turning the <span> into a <p>aragraph? Since this is targeting beginners I'd think it's important to convey such fundamentals. But it might as well be that the HTML rules have changed since I left the game. It has been many years for me!

I would say <style> in the body is so widely used that one can call it "generally accepted". Google, Amazon, Wikipedia ... look at the source of any website, and you will see a lot of <style> elements in the body.

The reason is that it often makes the structure of websites much more logical. Often you want to define a piece of content, its layout and behavior in one specific place, not spread out across multiple places. Then the best solution is to have a <style> element right before the other DOM elements for that piece of content.

And for the html editor, it saves the user from thinking about one more element (<head>) which does not do anything that is visible to the user.

Oh, this thing is perfect. Thank you.

Elegantly cool. Good job.

Reply on news.ycombinator.com