4 ms·

I would just like to highlight how absolutely amazing "this page is editable" is here.

capableweb 5y ago
And it's super simple to implement! Just add `contenteditable=true` to your HTML elements and it's editable. Demo: https://jsbin.com/cuciwazofo/edit?html,output https://jsbin.com/cuciwazofo/edit?html,output
- chrismorgan 5y ago
  It can be shorter even than that: contenteditable is a boolean attribute, meaning that it’s its presence that matters, not its value. In fact, “true” is an invalid value for validation purposes: only the empty string and the attribute name (for stupid-from-the-very-start XHTML convention reasons, XML not allowing omitting attribute values and people probably not being quite comfortable with empty string values) are valid. In HTML syntax, you can (and generally should) just write `contenteditable`, and that’s equivalent to `contenteditable=""`. If you really want to confuse those unfamiliar with boolean attributes, `contenteditable="false"` is editable (or, for a more easily understood one, `disabled="false"` is equivalent to `disabled="true"` or `disabled`).
  - capableweb 5y ago
    Indeed, I know about this but generally people who are not familiar with HTML gets tripped up about this and the times I've had to explain it, it's been easier to just make it as explicit as possible. Although it's possible that `contenteditable="false"` would trip them up even more, so good point.
  - fikama 5y ago
    I try it in chromium and firefox. I found that in both contenteditable="false wasn't editable.
    - chrismorgan 5y ago
      My apologies: contenteditable isn’t a boolean attribute as I thought, but rather an enumerated attribute, with "", "true" and "false" being valid values. https://html.spec.whatwg.org/multipage/interaction.html#attr-contenteditable https://html.spec.whatwg.org/multipage/interaction.html#attr... has the details. It comes down to the ability to specify contenteditable="false" within a contenteditable area, with the absence of a contenteditable attribute corresponding to the inherit state. I had quite forgotten that it was possible to nest something non-editable within something editable. Fairly similar to user-select behaviour, really.
  - rasz 5y ago
    while this might be true from standard texts perspective, its not how it works in practice. >If you really want to confuse those unfamiliar with boolean attributes, `contenteditable="false"` is editable document.querySelector('.content > div').setAttribute('contenteditable',false) and editing no longer works.
    - chrismorgan 5y ago
      As observed already in another comment, I erred on the contenteditable attribute, that it’s not actually a boolean attribute like the best-known one disabled; rather, it’s one of the handful of tristate attributes. But take one that’s actually a boolean attribute, and my remarks are completely correct. As for contenteditable, I’d still recommend writing `contenteditable` rather than `contenteditable="true"` (which two are equivalent).
red_trumpet 5y ago
Tbh, I find it quite annoying to read on mobile, because clicking on the texts opens the keyboard. An apparently I do this a lot while reading :D

And it's super simple to implement! Just add `contenteditable=true` to your HTML elements and it's editable. Demo: https://jsbin.com/cuciwazofo/edit?html,output https://jsbin.com/cuciwazofo/edit?html,output

chrismorgan 5y ago
It can be shorter even than that: contenteditable is a boolean attribute, meaning that it’s its presence that matters, not its value. In fact, “true” is an invalid value for validation purposes: only the empty string and the attribute name (for stupid-from-the-very-start XHTML convention reasons, XML not allowing omitting attribute values and people probably not being quite comfortable with empty string values) are valid. In HTML syntax, you can (and generally should) just write `contenteditable`, and that’s equivalent to `contenteditable=""`. If you really want to confuse those unfamiliar with boolean attributes, `contenteditable="false"` is editable (or, for a more easily understood one, `disabled="false"` is equivalent to `disabled="true"` or `disabled`).
- capableweb 5y ago
  Indeed, I know about this but generally people who are not familiar with HTML gets tripped up about this and the times I've had to explain it, it's been easier to just make it as explicit as possible. Although it's possible that `contenteditable="false"` would trip them up even more, so good point.
- fikama 5y ago
  I try it in chromium and firefox. I found that in both contenteditable="false wasn't editable.
  - chrismorgan 5y ago
    My apologies: contenteditable isn’t a boolean attribute as I thought, but rather an enumerated attribute, with "", "true" and "false" being valid values. https://html.spec.whatwg.org/multipage/interaction.html#attr-contenteditable https://html.spec.whatwg.org/multipage/interaction.html#attr... has the details. It comes down to the ability to specify contenteditable="false" within a contenteditable area, with the absence of a contenteditable attribute corresponding to the inherit state. I had quite forgotten that it was possible to nest something non-editable within something editable. Fairly similar to user-select behaviour, really.
- rasz 5y ago
  while this might be true from standard texts perspective, its not how it works in practice. >If you really want to confuse those unfamiliar with boolean attributes, `contenteditable="false"` is editable document.querySelector('.content > div').setAttribute('contenteditable',false) and editing no longer works.
  - chrismorgan 5y ago
    As observed already in another comment, I erred on the contenteditable attribute, that it’s not actually a boolean attribute like the best-known one disabled; rather, it’s one of the handful of tristate attributes. But take one that’s actually a boolean attribute, and my remarks are completely correct. As for contenteditable, I’d still recommend writing `contenteditable` rather than `contenteditable="true"` (which two are equivalent).

red_trumpet 5y ago

Tbh, I find it quite annoying to read on mobile, because clicking on the texts opens the keyboard. An apparently I do this a lot while reading :D