I'm making a low-JS site, but it also has a lot of input fields, user content generation, etc. In "modern CSS" i feel like Input boxes should be better than they are. Is JS the only way?
To appreciate the difficulty and nuances with building a text editor on contenteditable, I would read through the commit history on ProseMirror https://github.com/ProseMirror/prosemirror-view/commits/mast...
I feel like if you’re targeting a no-JS crowd, that’s a very specific crowd, i.e. this one.
Regardless this is all just an exercise for me because, frankly, i hate most websites lol. The ones that look good also tend to be slow. The ones that are fast look like they're from 1990. There has to be a middleground, right?
I love that feeling of visiting some (very few) sites and they load so fast you have to double-take. I want to be that site. I want accessibility to be forefront. etc
We'll see how far i can get. I'm just a humble backend dev hah. But the site being 95% plain HTML is a good start, at the very least.
Old site.
- Built with Gatsby, hosted on Netlify.
- Lots of client-side JS, but page loads are instantaneous because everything is prefetched and a page load is a client-side JS event not a server request.
- https://v4-johnnydecimal.netlify.app/
New site.
- Built with Astro, hosted on Netlify.
- Zero client-side JS, but each page load is a good ol’ fashioned HTTP request to the server.
- Pages are small. After caching my web fonts, each page is single-digit kilobytes. This is deliberate, I worked hard to achieve this.
- It doesn’t feel as fast. Because it isn’t. Because it can’t possibly be.
The other thing is content editable allows all kinds of garbage to be pasted into it included any kind of inline style.
Now I maintain a fork of Htmlawed which can do a pretty decent job of filtering down arbitrary HTML into a safe and restricted subset but with no JS there can be a huge disconnect between what the user sees in their editor and what appears as the sanitized output.
As a result I’m currently using SlateJS as a rich text editor foundation. I’ve used others in the past but this is the nicest so far.
However, most people who disable JS are probably fine with not using rich text and definitely shouldn’t expect it. Just add a CSS stylesheet which turns <textarea> into something half-decent, put a note that markdown is supported, and make a plain text editor.
Any examples that you can think of which make a plain text area half-decent? So many sites go with heavy-JS options that i'm not sure what is possible for a good (half decent) visual editing experience in just CSS
Also, focusing on CSS first means - hopefully - that the UX is "as good as it gets" for JS-less individuals. If i add a small JS framework on-top of that it's likely fine.
edit: I'm sort of experimenting with how good i can make modern websites. Both on UX, accessibility, low bandwidth (folks on satellite connections appreciate this), etc. I'd like the site to "look like any modern site" (minus obtrusive crap), but suffer as few flaws as possible.
It's bit harder to do correctly manually just because of cross-platform browser quirks, you'll probably at least want normalize.css or CSS Reset. Even MDN docs has a half-decent textarea in 20 lines of CSS: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/te... (it looks ugly with monospace but change the font and I think it looks great)
If you're not going with prosemirror or similar off-the-shelf component, then this is the only way to not annoy your users. Augment it with a side-b-y-side RO view of the rendered markdown.
I mean, even the linked page is a confusing UI: you enter `**` for a bold sentence, and then when you arrow-left to the beginning of the sentence you cannot delete just the `*` you typed in.[1]
[1] I feel a better way to do this would be to not allow markdown to actually be typed in, so that the user never sees it. This sidesteps the confusion when trying to remove just the markdown. Let the user use shortcut keys and/or buttons on selections, because to remove a formatting rule they simply repeat what they did to create that rule.
I just mean .. average users. Where a text box has some very limited features that may be thought of as the baseline, the standard, etc. Not even sure what qualifies as that, but i imagine a lot of users expect to be able to highlight text and make it bold, italics, etc.
I love markdown and want to support it as the primary interface.. but i don't want to solely force it. I'd love a really, really thin layer of JS which just gives in-line highlighting for markdown, for example.
I might try to make it honestly, if i can't find it. But that's a long ways down the road.
In general, :has and :user-invalid are new and can be useful styling forms.
I see so many huge JS beasts with WYSIWYG features that i'm unsure what advancements, if any, have been made for CSS to provide something nice. Something that a user would feel it's more than nothing done at all.
The HN box feels like nothing at all. Just a plain HTML input text area.