HTML Editor: an online HTML editor with real-time preview

Note

Please review the new question and ignore the following.

Overview

HTML Editor is an online HTML editor with a minimalist approach. Edit your HTML, CSS, and JavaScript code and monitor the instant live preview. It can also create, open and edit other types of text files such as .txt, .css, .js, .svg, etc.

Please review the latest source code and provide feedback.
Original source code

```



HTML Editor



html,
body {
margin: 0;
padding: 0;
height: 100%;
}
body {
display: -webkit-flex;
/ WebKit prefixes are added to support Safari. /
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
}
header,
.shown {
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
padding: 5px;
}
header {
background: linear-gradient(#FFF, #CCC);
}
#fileSaver,
[type="button"],
#fileChooser,
label,
span {
font: bold 11px arial;
color: #333;
}
#selector,
#resizer,
#viewsToggle,
[title$="Twitter"] {
margin-right: 5px;
margin-left: 5px;
}
#fileSaver {
margin-right: 5px;
}
#fileChooser,
[title$="Facebook"] {
margin-right: auto;
}
#resizer {
margin-top: 0;
margin-bottom: 0;
padding: 0;
}
/ to remove the extra margins and padding in some browsers, e.g. IE11 /
span {
width: 35px;
}
#footerToggle {
margin-right: 0;
margin-left: 5px;
border: 0;
padding: 0;
background: transparent;
}
main {

-
Consider escaping the content of the textarea. Seeing the differently-indented ` made me stumble in my scan-through, whereas </html&gt would not have. It's also good practice... Incidentally, is there a reason why your code is indented with 4 spaces, but your default textarea value uses 2?

-
Some people like to indent with tabs. You need to capture the keypress.

-
Internet Explorer 9 and under does not have support for . Your panes will not be resizeable in that case, and the Text field size control will be confusing (though functional).



• Upon further review, this isn't very relevant because your site is completely broken in IE9. Blob is unavailable, and halts execution of the script. At the very least, you should display a message indicating that the browser is unsupported.




Aside from that, the code seems pretty good. However, from a user standpoint:

-
The Save as... control is a link, but all the others are buttons. This seems a bit inconsistent.

-
If I choose a file and then reset, I expect that it resets to the file I had selected. If this is not the case, then the form control should reset to no value, so I see "No file chosen" rather than my file name.

-
The footer shower/hider triangle doesn't make much sense to me. There's little reason to hide the footer, and even less so to show it if it's hidden by default. Even if there was, I'd prefer for the hide button to be on the footer itself.

-
It would be nice if the panes could be resized with the separator instead of the range input.

After your edit, I took another look and noticed a few more things:

-
Although your file input has accept="text/html", the user can still choose to upload any file. Consider validating file.type in fileChooser.onchange().

-
It would be nice if before choosing a file, if I have unsaved changes, I get a confirmation message.

-
In the same vein, if I have unsaved changes, maybe set an onbeforeunload?

The following would implement the last two points. Note that save detection is naive, since as far as I'm aware, there's no way to conclusively determine if a user has saved the file to disk. (You'd also have to set changed = false in reader.onload() and resetter.onclick()`.)

var changed = false;
editor.oninput = function() {
    changed = true;
    preview();
}
fileChooser.onclick = function() {
    return changed && confirm("Your changes will be lost if you select another file. Are you sure you want to continue?");
}
window.onbeforeunload = function() {
    return changed ? "You have unsaved changes. Are you sure you want to leave this page?" : undefined;
}
fileSaver.onclick = function() {
    changed = false;
}

StackExchange Code Review Q#56106, answer score: 16