Tangent: On the note of web based text field for "normal users", what's the best UX you can get while also trying to be as no-JS-friendly as possible? Are there CSS-only tricks to make editing in an input field nice?
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?
I would like to add: If the GP goes for any JS based solution, they should make sure to serve the JS themselves, and not outsource it to 3 CDNs. For us not liking JS too much people, the next best thing to no JS is little JS server by the website's server itself. Best with most of the website already rendering without JS, so that we see things when hitting the website and may consider it worth allowing its first party JS. Being able to see the website and get what it will use JS for goes a long way building trust.
I do plan on self-hosting all (the very select few i use) JS and CSS. It's part of the binary for dead simple self-hosting. I'm going to attempt to be very privacy friendly, as much as possible, which will be an interesting adventure because it's ActivityPub related.
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.
Here’s a comparison for you because I just did the same.
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.
content-editable is a crap shoot without some JS layer on top of it normalized the output. Otherwise you end up with the same visual output being able to defined as 50 different inputs.
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.
Rich text editing is probably not possible or not worth it.
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.
> 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
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)
As much as possible, the specifics matter i think, so i'll weigh what script(s) offer in terms of UX compared to load time/bandwidth/etc. In general i'm just trying to stay super lightweight, only giving in when necessary.
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.
> 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.
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.
This. I wish websites had this as a fallback mode, when I do not allow their 5 third party script sources. I also wish this was done in products like Jira (basically anything out of Atlassian), which have very bad WYSIWYG kind of editors.
Not quite sure what you mean by normal. But if you want a nice input field - as in it allows you to input text and does what you expect with plain text, something like water.css maybe. If you want rich text, the Web was designed to offload this to js. Markdown and other similar systems were created to provide an alternative to this, but there's a barrier to entry because you want more than text. Text plus markup requires interpretation and either a ux that adds tooling or the user to do some learning.
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.
No real issues i think, but take this HN input box i'm typing in now. It's .. okay, like.. it's about as barebones as you can get. CSS has seen a ton of advancements in just about every area (it feels like atleast. As a backend dev), but yet this HN box still feels them same as it did in 1995 heh.
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.
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?