Live data from Hacker News

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

ped.ro

41–50 of 68 posts

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

#41

This is pretty good! One thing I wasn't able to trigger (or understand) was the "hover me" part from the "Interact with the content" section.

There's not much to it. Ignore the "hover me" label, and just hover over the highlighted parts of the code. They change color on hover.

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

#42

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 happening in the code block styling that includes line numbers.

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

#43

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.

thank you! mobile is my biggest issue as well.

to add to what you wrote, mobile web has this nasty bug with code sections with a horizontal scrolling bar inside a page that already has a horizontal scrolling bar. these two don't play well.

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

#44
post #36

Earlier quoted context omitted.

Could be interesting to explore using media queries to change the code layout itself, like setting indent levels and line break placements (in listing method parameters, for example). Maybe even variable/class/method name collapsing.

If two people look at the same webpage with different size monitors, they see different code. Probably not the best solution.

Certainly getting out of the scope of the orignal discussion here, but you would think people should be able to have their code layout and style to their own preference suited for their device. There are problems with that to overcome certainly, for e.g. referring to line numbers, but they seem fairly solveable.

But commenters here suggesting the 80 char limit, inherited from IBM punchcards and typewriters before that, for diplaying code on smart phones half a century later is a little hilarious to me.

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

#45
post #36

Earlier quoted context omitted.

If two people look at the same webpage with different size monitors, they see different code. Probably not the best solution.

Certainly getting out of the scope of the orignal discussion here, but you would think people should be able to have their code layout and style to their own preference suited for their device. There are problems with that to overcome certainly, for e.g. referring to line numbers, but they seem fairly solveable. But commenters here suggesting the 80 char limit, inherited from IBM punchcards and typewriters before tha…

80 characters is a widely-agreed-upon standard, and standards with lots of buy-in are useful for a variety of reasons, regardless of origin.

Units of precisely 20 feet is also a standard, used mostly in countries that use SI. It doesn't diminish the value or utility of containerization.

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

#46

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 still use 80 character line limits. Thanks to a wide monitor, I can fit 4 windows side by side and still read them without eye strain.

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

#47
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

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

#48
post #45

Earlier quoted context omitted.

Certainly getting out of the scope of the orignal discussion here, but you would think people should be able to have their code layout and style to their own preference suited for their device. There are problems with that to overcome certainly, for e.g. referring to line numbers, but they seem fairly solveable. But commenters here suggesting the 80 char limit, inherited from IBM punchcards and typewriters before tha…

80 characters is a widely-agreed-upon standard, and standards with lots of buy-in are useful for a variety of reasons, regardless of origin. Units of precisely 20 feet is also a standard, used mostly in countries that use SI. It doesn't diminish the value or utility of containerization.

Yes standards useful and workplaces can easily enforce their own internal ones for things like line length limits. But they are useless if they do not work for everyone who they apply to and especially not if they don't adapt to world around them. Cubit used to be a standard, too! But then we developed better ways to measure things than our inconsistently sized forearms.

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

#49
post #18

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 use 80 character limits, and suggest corrections to that effect during code reviews. I feel it helps readability. Is it becoming a tend to have longer limits?

I feel like it hinders readability. Sometimes the end of a line isn't that important and can mostly be inferred from the start of the line or only occasionally needs to be inspected, meanwhile being able to see more of the whole file on screen at once can be really beneficial.

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

#50

Does anyone know if there's a trick to avoid the trailing newline when double-clicking a line to copy/paste it elsewhere? This always annoys me for single-line commands. I'd love a CSS solution but can only think of some ugly JS approaches.

I mean you can probably fix this with autohotkey.

Whether this is a good idea is a whole different matter.

Post reply on HN