4 ms·

> 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 example

> 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

Blahah 3y ago
Are you looking to avoid the js tooling ecosystem? As in, just an html file with script tags is fine?
- unshavedyak 3y ago
  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.
armchairhacker 3y ago
The easiest (but maybe not the best) way is make your entire site adopt a CSS-only framework like Bulma: https://bulma.io/documentation/form/textarea/ https://bulma.io/documentation/form/textarea/. Or you can use TailwindCSS or Uniform CSS and look for examples as a guide: https://tailwind-elements.com/docs/standard/forms/textarea/ https://tailwind-elements.com/docs/standard/forms/textarea/, https://tailwindcomponents.com/component/textarea https://tailwindcomponents.com/component/textarea, https://www.material-tailwind.com/docs/html/textarea https://www.material-tailwind.com/docs/html/textarea, https://www.creative-tim.com/learning-lab/tailwind/html/textarea/soft-ui-dashboard/ https://www.creative-tim.com/learning-lab/tailwind/html/text..., https://daisyui.com/components/textarea/ https://daisyui.com/components/textarea/ 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/textarea 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)

Blahah 3y ago

Are you looking to avoid the js tooling ecosystem? As in, just an html file with script tags is fine?

unshavedyak 3y ago
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.

armchairhacker 3y ago

The easiest (but maybe not the best) way is make your entire site adopt a CSS-only framework like Bulma: https://bulma.io/documentation/form/textarea/ https://bulma.io/documentation/form/textarea/. Or you can use TailwindCSS or Uniform CSS and look for examples as a guide: https://tailwind-elements.com/docs/standard/forms/textarea/ https://tailwind-elements.com/docs/standard/forms/textarea/, https://tailwindcomponents.com/component/textarea https://tailwindcomponents.com/component/textarea, https://www.material-tailwind.com/docs/html/textarea https://www.material-tailwind.com/docs/html/textarea, https://www.creative-tim.com/learning-lab/tailwind/html/textarea/soft-ui-dashboard/ https://www.creative-tim.com/learning-lab/tailwind/html/text..., https://daisyui.com/components/textarea/ https://daisyui.com/components/textarea/ 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/textarea 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)