Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

I spent some time exploring how to improve the UX of code blocks on the web

ped.ro

Post reply on HN
Print view View original

61–68 of 68 posts

Re: I spent some time exploring how to improve the UX of code blocks on the web

#61

Post by manigandham »

metalrain wrote: post #17

It's looks great. I think for me biggest problem with code snippets is that I encounter them with mobile device. Lines are quite long, like who uses 80 character line limits these days, more like 160. This combined with reality that most websites don't allow mobile device to zoom out. I wish I could read full lines of code instead of trying to scroll back and forth.

Character limits are obsolete.

Enter a line break if you need one. No need to force. We have high-res widescreen monitors now and it results in much more productive viewing. And editors can automatically wrap text if you need a narrower window.

Re: I spent some time exploring how to improve the UX of code blocks on the web

#62

Post by manigandham »

sneak wrote: post #26
metalrain wrote: post #17

It's looks great. I think for me biggest problem with code snippets is that I encounter them with mobile device. Lines are quite long, like who uses 80 character line limits these days, more like 160. This combined with reality that most websites don't allow mobile device to zoom out. I wish I could read full lines of code instead of trying to scroll back and forth.

I hard wrap at I have three huge monitors, but long lines just makes most of the right-hand side of an editor window wasted. Text files (source) are documents, and documents are much taller than they are wide: portrait orientation, like letter or A4. My two side monitors and oriented in portrait mode for this reason, and their quadrants (also portrait) are where I put editors. I made this comment not to show my age,…

The new way is to make the lines as long as a human needs it to be, and use the computer to automatically wrap them when you need a narrower view.

Re: I spent some time exploring how to improve the UX of code blocks on the web

#63

Post by cerved »

manigandham wrote: post #61
metalrain wrote: post #17

It's looks great. I think for me biggest problem with code snippets is that I encounter them with mobile device. Lines are quite long, like who uses 80 character line limits these days, more like 160. This combined with reality that most websites don't allow mobile device to zoom out. I wish I could read full lines of code instead of trying to scroll back and forth.

Character limits are obsolete. Enter a line break if you need one. No need to force. We have high-res widescreen monitors now and it results in much more productive viewing. And editors can automatically wrap text if you need a narrower window.

That's the point. The renderer doesn't word wrap

Re: I spent some time exploring how to improve the UX of code blocks on the web

#64

Post by cerved »

userbinator wrote: post #58
metalrain wrote: post #17

It's looks great. I think for me biggest problem with code snippets is that I encounter them with mobile device. Lines are quite long, like who uses 80 character line limits these days, more like 160. This combined with reality that most websites don't allow mobile device to zoom out. I wish I could read full lines of code instead of trying to scroll back and forth.

I consider 80 a soft limit, and 128 (nice round number) a hard limit. I find that even 80 is seldom reached, since I tend to use sane identifier lengths and small indents. The longest lines in my code are usually comments.

Depends a lot on the language. I've also seen people write lines of code that don't fit on my 4k TV

Re: I spent some time exploring how to improve the UX of code blocks on the web

#65

Post by cerved »

lecarore wrote: post #31
metalrain wrote: post #17

It's looks great. I think for me biggest problem with code snippets is that I encounter them with mobile device. Lines are quite long, like who uses 80 character line limits these days, more like 160. This combined with reality that most websites don't allow mobile device to zoom out. I wish I could read full lines of code instead of trying to scroll back and forth.

I guess one could use prettier with different max line lengths on the same code, then hide irrelevant versions with a media query. Feels a bit overengineered TBH Alternatively, on a mobile device, you could try to display the "desktop view" and put your phone in landscape mode.

ideally, there should be one content and exclusively handled with styling.

maybe using some combination of pre tags and white-space pre-wrap

Re: I spent some time exploring how to improve the UX of code blocks on the web

#66

Post by cerved »

extra88 wrote: post #42
metalrain wrote: post #17

It's looks great. I think for me biggest problem with code snippets is that I encounter them with mobile device. Lines are quite long, like who uses 80 character line limits these days, more like 160. This combined with reality that most websites don't allow mobile device to zoom out. I wish I could read full lines of code instead of trying to scroll back and forth.

In mobile Safari, you can reduce the text size to 75% to fit more in the viewport but on the posted page, there's a max-width set that still makes horizontal scrolling necessary. What you'd probably rather have is for the ` ` element's default styling of `white-space: pre` to be changed to `white-space: normal`, that would make the text wrap as it does in paragraphs and such. It's easy to tell when such wrapping is h…

or possibly pre-wrap

Re: I spent some time exploring how to improve the UX of code blocks on the web

#67

Post by sneak »

manigandham wrote: post #62
sneak wrote: post #26

Earlier quoted context omitted.

I hard wrap at I have three huge monitors, but long lines just makes most of the right-hand side of an editor window wasted. Text files (source) are documents, and documents are much taller than they are wide: portrait orientation, like letter or A4. My two side monitors and oriented in portrait mode for this reason, and their quadrants (also portrait) are where I put editors. I made this comment not to show my age,…

The new way is to make the lines as long as a human needs it to be, and use the computer to automatically wrap them when you need a narrower view.

The Linux kernel style guide expresses a different rationale.

Re: I spent some time exploring how to improve the UX of code blocks on the web

#68

Post by ______- »

deadbyte wrote: post #47
jraph wrote: post #28

The best feature for me is that it works well without JavaScript. The document is still a document. Except for collapsed code blocks. I would suggest collapsing them using JavaScript, so they are fully readable without. They are currently unavailable to someone who does not run JavaScript.

is a native HTML accordion

You can also add an open attribute to specify that you want the element opened by default
Post reply on HN