WingNews logo WingNews GitHub [2]
top | item 29351475

On yak shaving and <md-block>, a new HTML element for Markdown

121 points| feross | 4 years ago |lea.verou.me | reply

60 comments

order
[+] Devasta|4 years ago|reply
Finally, the web has a way of authoring and publishing documents.
[+] bruce343434|4 years ago|reply
What's wrong with converting markdown to html on the server side and caching that html? Why is so much stuff done on the front end these days? Makes my browser slow.
[+] thomascgalvin|4 years ago|reply
Because we're currently in the "do it all on the client side" phase of the eternal "do it on the front end" <-> "do it on the back end" ouroboros.
[+] ravenstine|4 years ago|reply
Just gonna say it as I always do; I love web components.

I'm curious how this would work with SSR. I noticed that nothing appears in the spaces where these elements are used when I have NoScript blocking scripts on the page. Obviously this would prevent execution of web components, but are these written in such a way that it would be practical to prerender the content and the client-side code to replace or rehydrate them?

[+] lenkite|4 years ago|reply
Web Components need JS - which makes them a no-go for many use-cases. There should have been a way to permit plain web-components with just CSS+HTML and no JS
[+] dmitriid|4 years ago|reply
> I'm curious how this would work with SSR.

Web Components can't be SSR'ed. (The libs that claim to do so, cheat).

[+] ghengeveld|4 years ago|reply
This just looks like applying the boy scouts rule to me. She had a reason to update an old library to modern standards, and she did it. That's great! Let's get rid of that tech debt.
[+] dmix|4 years ago|reply
The source of the documentation site is a good example of it being used:

view-source:https://md-block.verou.me/

Nice and clean.

That being said I've never used web components and haven't really planned on. Not sure what their status has been in terms of adoption.

[+] dmitriid|4 years ago|reply
> Not sure what their status has been in terms of adoption.

Chrome teams and WC proponents will have you believe the adoption is huge, in the tens of percents of webviews. Of which most are Google's Youtube...

There have also been high profile adoptions at GitHub and Salesforce.

Beyond that, they have an issue list as long as my hand (and busy adding new issues), and can't really be used without a library/framework. So...

[+] oefrha|4 years ago|reply
I wouldn't call flash-of-uncompiled-markup nice and clean. Please pre-render your markup.
[+] fouc|4 years ago|reply
I suppose some sort of element that supports various LMLs (Lightweight Markup Languages) could be useful. I don't think Markdown is all that great - there's still room for improvement.
[+] jagged-chisel|4 years ago|reply
Sounds like lots of self-imposed yak shaving. I really hate the kind that requires deep dives into discovering just the right combination of Linux distro version, std lib versions, python versions, node versions … just to see if the demo of this tool provides the functionality I need…
[+] sandGorgon|4 years ago|reply
What about MDX? https://mdxjs.com/

It's fairly well adopted in many tools

[+] ravenstine|4 years ago|reply
That's pretty neat! :D

Though I'm not sure exactly why you're comparing it to a custom element that renders Markdown.

[+] smitty1e|4 years ago|reply
Mixing older and newer slang in the context of a nasty process at the office, I derived:

"Shave enough yak to yeet a yurt".

[+] whatshisface|4 years ago|reply
I don't see how that works because while you may construct parts of a yurt out of yak hair, you wouldn't throw a yurt using yak hair, although maybe you could with the help of the yaks.
[+] andrew_|4 years ago|reply
This looks like a great little project, but fails the/my litmus test for use in a professional setting as it has zero tests. What protects this tiny component from regressions? `demo.js` doesn't seem to be sufficient.
[+] unbanned|4 years ago|reply
Oh dear. Markdown has no standard grammar or standard way of rendering.

This website lags while I scroll on mobile.

I remember when the internet used to be fast and responsive. Probably just getting old.

[+] wildrhythms|4 years ago|reply
Every time the user scrolls, this site updates a style attribute on the root <html> element with this a CSS variable: --scrolltop:700 (that appears to be first updating to the actual scrollTop value, THEN re-updating the value rounded to 100 increments). So TWO updates to this variable every scroll event.

There's a media query consuming this variable, and doing a calculation:

--logo-y: calc(3em - var(--scrolltop, 0) * 1px);

So every time the user scrolls, TWO variable updates take place, TWO redraws, and TWO of these calculations take place, TWO more redraws, just to center the sunburst background on the logo.

[+] cout|4 years ago|reply
I remember when 60 seconds was the target time to finish loading a web page with images over a 14.4.

I remember scrolling on an unaccelerated SVGA card and watching the screen repaint.

I remember being impressed at how gopher would only redraw the parts of the screen that changed, making browsing gopherspace bearable at 1200bps.

I remember queuing downloads of shareware games over zmodem and waiting an hour or more to find out whether they would even run on my hardware, and having to go do something else while I wait because my OS couldn't do multitasking and even if it could it would drop bits because the 8250 UART didn't have a buffer.

[+] somehnguy|4 years ago|reply
Website lags scrolling on my desktop too. How do website even manage to break scrolling..?
[+] blowski|4 years ago|reply
> I remember when the internet used to be fast and responsive. Probably just getting old.

This has got to be the most hackneyed comment on HN, and has been for the 10 years I’ve been on here.

[+] Gualdrapo|4 years ago|reply
Not sure if it's just me but with Firefox mobile nightly, sometimes when scrolling it instead randomly zooms in a bit.
[+] slaymaker1907|4 years ago|reply
Wow, I have a bad habit of reading the comments before reading the site, but you aren't kidding. My gaming PC is lagging on this site! It also doesn't help that reader mode (at least for Edge) doesn't seem to work for the site.
[+] coldtea|4 years ago|reply
>This website lags while I scroll on mobile. I remember when the internet used to be fast and responsive.

Do you remember it being that on mobile?

Because I remember when it used to be a tiny subset of HTML (remember WAP? or early "web" browsers for mobile?) that to add insult to injury still sucked donkeys' balls on mobile, being slow and unresponsive as hell.

[+] ViViDboarder|4 years ago|reply
Website scrolls just fine (quickly) on my iPhone. I do have ad blockers though.
[+] mastax|4 years ago|reply
Interestingly Chrome Mobile has issues with it while Firefox mobile does not.
[+] aliswe|4 years ago|reply
This website renders horribly slow for me on my mobile ... maybe its a SVG in the header, and its fixed to the screen? its still horribly slow when not visible, though.
[+] smoldesu|4 years ago|reply
I thought the point of Markdown was having a style-agnostic markup language that can easily be converted to HTML...?
[+] cunthorpe|4 years ago|reply
> be converted to HTML

That’s kinda what’s happening here, isn’t it? Document is shipped in markdown; Component renders it.

In a way I wish websites would ship raw Markdown without the ability to style much: Reader mode by default, that’s what the web should have been. But alas.

[+] axiomdata316|4 years ago|reply
Nuts... I thought this was going to be a fun article about people that actually shave yaks and, a little bit about "a New HTML Element for Markdown". :-p