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

31–40 of 68 posts

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

#31

Post by lecarore »

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.

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

#32

Post by inbx0 »

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.

That's... actually a brilliant idea, in my opinion. Overengineered? Idk, seems like something you'd have to implement once with like 100 lines of glue code for different libraries and then it could just work. And it could seriously benefit mobile viewers. Personally I read a lot of programming blogposts on my phone while commuting etc.

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

#33

Post by throwaway3699 »

Tronno wrote: post #18
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 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?

My workplace has a C++ character limit of 80. A lot of people complain but I can have three code windows side-by-side plus a source tree so I think it's great.

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

#34

Post by eyelidlessness »

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.

It may be possible to use `` in a single representation, assuming the indentation is solvable.

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

#35

Post by eyelidlessness »

zalo wrote: post #21

Would be nice to see Intellisense-style hover tooltips on code-blocks someday (via referencing a `.d.ts` or `.ts` file). There might be some minimalist way to get Monaco into read-only mode for it...

This exists! But with a slightly different set of libraries than the highlighter used by the post author: remark-shiki-twoslash[1]. Shiki tokenizes using the same language definitions as VSCode, Twoslash uses the same language service.

1: https://www.npmjs.com/package/remark-shiki-twoslash

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

#36

Post by sneak »

lamp_book wrote: post #29
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.

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.

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

#38

Post by extra88 »

Silhouette wrote: post #19
lovelydrop wrote: post #7

Earlier quoted context omitted.

great idea! implemented, and updated the article. thank you.

It might also be worth having those links opening in new tabs as an option. Right now, at least on iOS, following a link and then going back leaves you at the top of the original page again, not where you were up to before you clicked the link.

In general, it's better for sites to not take away from the user the choice of opening a link in a new tab or not. When I follow a link on my iPhone, when I use the Back button, the page is still scrolled to where it was before, which is my typical experience in mobile Safari.

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

#39

Post by Someone »

alpaca128 wrote: post #13
randomfool wrote: post #6

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 hate that too, and it seems to be a very common default behaviour of text selection. Even Vim does it when you copy a whole line. It's one of those little UI annoyances that refuse to disappear. Just like blinking cursors in unfocused input fields & windows.

I think that’s because, if you follow selection of a full line by a backspace/delete/cut, you expect the new line to disappear.

Apart from undo state, you also want cut to be equivalent to copy; backspace.

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

#40

Post by extra88 »

carlosperate wrote: post #11
lovelydrop wrote: post #7

Earlier quoted context omitted.

great idea! implemented, and updated the article. thank you.

It's also not easy to quickly identify it's a link, as the word highlight is the same as the previous examples. Maybe adding an underlines or something to make it slightly different might help with that.

Yes, don't disable link underlines within the code blocks, let the default be. It's not like there's a competing convention for underlining within code blocks.
Post reply on HN