Hacker News Reader

Comment by kirktrue | Hacker News Reader

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?

View on HN

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

How can you make text look editable?

Blink the cursor at the end or highlight the text area sound reasonable to me

Trying to get an input to autofocus with any reliability in browsers is the third hardest problem in computer science.

Fake the cursor if needed

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.

You can make an (obviously) fake blinking cursor at the end possibly with a label showing that it's editable.

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.

Put it inside a textarea, and don't break the textarea styling.

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

Reply on news.ycombinator.com