3 ms·

Looks great! I know it should have been more obvious, but I didn't realize the text was editable. I was looking for an 'upload your code' button. Maybe put one

Looks great! I know it should have been more obvious, but I didn't realize the text was editable. I was looking for an 'upload your code' button. Maybe put one of those "Try Me!" badges with an arrow pointing to the code like on toy boxes?

umvi 6y ago
It's par for the course with Apple-esque UIs. Like the classic "invisible scrollbar"[0] that prevents you from knowing you can scroll something down and see more. Form > Function [0] https://svenkadak.com/blog/scrollbar-blindness https://svenkadak.com/blog/scrollbar-blindness
- chrisseaton 6y ago
  How can you make text look editable?
  - zardinality 6y ago
    Blink the cursor at the end or highlight the text area sound reasonable to me
    - bikeshaving 6y ago
      Trying to get an input to autofocus with any reliability in browsers is the third hardest problem in computer science.
      - airstrike 6y ago
        Fake the cursor if needed
        galaxyLogic 6y ago
        How do you make a fake cursor that works? When you click anywhere within the text, how do you know where to position the fake-cursor then? If you use arrow-keys it should move the cursor left and right and up and down respecting the line- and character boundaries. One of the shortcomings of HTML/CSS seems to be that you can not style the cursor a.k.a caret.
      - lights0123 6y ago
        You can make an (obviously) fake blinking cursor at the end possibly with a label showing that it's editable.
  - umvi 6y ago
    My point is that when you focus too much on beauty, you tend to sacrifice some functionality. There are tons of ways to signal that text is editable, but most of them are "ugly" or not elegant. To go to the opposite extreme, you could build a functionally equivalent website that is super basic and has no CSS - literally just a textarea to edit the code, checkboxes for the options, and buttons to generate the image. You get the same output, but it's not as pleasing to look at - but hey, it's highly functional and you know everything you are allowed to do at a glance. The goal for most people is to strike a balance between form and function. In my opinion, I personally think you should always err on more function than form, but the Apple-esque UI design philosophy tends to favor form over function - you know, getting rid of "ugly" UI elements that traditionally telegraphed functionality.
  - jstanley 6y ago
    Put it inside a textarea, and don't break the textarea styling.
thomaspaulmann 6y ago
Good feedback! We got a similar request for the title. Gonna look into how we can improve it

umvi 6y ago

It's par for the course with Apple-esque UIs. Like the classic "invisible scrollbar"[0] that prevents you from knowing you can scroll something down and see more. Form > Function [0] https://svenkadak.com/blog/scrollbar-blindness https://svenkadak.com/blog/scrollbar-blindness

chrisseaton 6y ago
How can you make text look editable?
- zardinality 6y ago
  Blink the cursor at the end or highlight the text area sound reasonable to me
  - bikeshaving 6y ago
    Trying to get an input to autofocus with any reliability in browsers is the third hardest problem in computer science.
    - airstrike 6y ago
      Fake the cursor if needed
      - galaxyLogic 6y ago
        How do you make a fake cursor that works? When you click anywhere within the text, how do you know where to position the fake-cursor then? If you use arrow-keys it should move the cursor left and right and up and down respecting the line- and character boundaries. One of the shortcomings of HTML/CSS seems to be that you can not style the cursor a.k.a caret.
    - lights0123 6y ago
      You can make an (obviously) fake blinking cursor at the end possibly with a label showing that it's editable.
- umvi 6y ago
  My point is that when you focus too much on beauty, you tend to sacrifice some functionality. There are tons of ways to signal that text is editable, but most of them are "ugly" or not elegant. To go to the opposite extreme, you could build a functionally equivalent website that is super basic and has no CSS - literally just a textarea to edit the code, checkboxes for the options, and buttons to generate the image. You get the same output, but it's not as pleasing to look at - but hey, it's highly functional and you know everything you are allowed to do at a glance. The goal for most people is to strike a balance between form and function. In my opinion, I personally think you should always err on more function than form, but the Apple-esque UI design philosophy tends to favor form over function - you know, getting rid of "ugly" UI elements that traditionally telegraphed functionality.
- jstanley 6y ago
  Put it inside a textarea, and don't break the textarea styling.

thomaspaulmann 6y ago

Good feedback! We got a similar request for the title. Gonna look into how we can improve it