Twitter | Search | |
@rem
Do you think syntax highlighting (in blog posts, examples, etc) be in >(poll)< I've always err on the side of client as it's a progressive upgrade, not particularly costly on the client, and reduces markup downstream.
Reply Retweet Like More
Amelia Bellamy-Royds Apr 1
Replying to @rem @anatudor
I've been meaning to write up a proposal for native HTML syntax highlighting, if only because it would make it easier for people to be able to always see code in their favourite colour scheme!
Reply Retweet Like
@rem Apr 1
Replying to @AmeliasBrain @anatudor
There is language support (as little as that means) in the html spec around the PRE tag. It's odd, but it recommends using the class attribute
Reply Retweet Like
Charlie Don't Surf Apr 1
Replying to @rem
Server side. Quicker to render to client, no flash of unstyled code, robust.
Reply Retweet Like
@rem Apr 2
Replying to @sonniesedge
To nitpick, arguably there's a flash of unstlyed content either way. With server rendered, colours are loaded in the client. In client, text is swapped and coloured in the client. Visual content should remain exactly where it always was and always visible —
Reply Retweet Like
@rem Apr 2
Replying to @sonniesedge
The counter argument, obviously, faster and less to render in the client when the html is prepared in exactly the right format/structure for the styles to be applied.
Reply Retweet Like
Jake Archibald Apr 2
Replying to @rem
Client side: ➡️ Serve HTML. ➡️ Serve CSS. ➡️ Serve JS. ➡️ Execute JS. Server side: ➡️ Serve HTML (a tiny tiny bit more). ➡️ Serve CSS. The latter wins every time. Why make every user run code on every load when it has the same output?
Reply Retweet Like
@rem Apr 2
Replying to @jaffathecake
It's that "tiny tiny" bit more that I want to put under the microscope. But aye, I agree fully with you (and others giving their justification for server side). No one as yet has given a good reason to render client side (I can think of one, but it's not been suggested yet)
Reply Retweet Like
Phil Hawksworth @ SmashingConf Toronto Apr 2
Replying to @rem @jaffathecake
Interesting though, that the result of your poll leans so much towards doing this client-side. I'm assuming ( 👈 danger!) that's because it feels simpler and easier for developers to do it that way.
Reply Retweet Like
kentaromiura―クリスティアン Apr 2
Replying to @rem @jaffathecake
Most are repeated class and same markup, gzips very well.
Reply Retweet Like
@rem Apr 2
Indeed.
Reply Retweet Like
@rem Apr 2
So this is where I think the client side argument isn't being mentioned. SSR of syntax highlighting has always been a bit of a faff. I know a lot/most/all(?) SSG support highlighters these days, but look at highlight.js "get" instructions, all leans client side.
Reply Retweet Like
Phil Nash @ #SmashingConf 🇨🇦 Apr 2
SSR comes out the box with . No faff, no problem.
Reply Retweet Like
@rem Apr 2
If I had a £ for every time someone told me it just works, I'd be a rich man. It's the edge cases that failed, that cause us the next time to reach for the largest hammer for the job.
Reply Retweet Like
@rem Apr 2
Also, analogies I me not good at.
Reply Retweet Like
kentaromiura―クリスティアン Apr 2
I imagine that if you are on a limited resource server you might want to execute as much as possible on the client though (as long as the ux doesn't get significantly worse)
Reply Retweet Like
@rem Apr 2
I can't imagine any server having less resources than a mobile phone. Also, build process and storing static output is a single task, and isn't affected by increasing traffic.
Reply Retweet Like
Charlie Don't Surf Apr 2
Replying to @rem
PrismJS should be usable on a node server. I'm sure other servers and languages have their own solutions.
Reply Retweet Like
Charlie Don't Surf Apr 2
Replying to @jaffathecake @rem and 2 others
Cool. Same, in that I'm switching to a static build after putting all my data into my own server and exposing an API. Playing with and . ♥️
Reply Retweet Like
@rem Apr 2
Replying to @sonniesedge
They mostly do, but it's not quite as simple as dropping it in. Also, I seem to attract bugs!
Reply Retweet Like