8 ms·

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

121 points by feross 5y ago

aliswe 5y ago
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.
axiomdata316 5y ago
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
jagged-chisel 5y ago
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 5y ago
What about MDX? https://mdxjs.com/ https://mdxjs.com/ It's fairly well adopted in many tools
- ravenstine 5y ago
  That's pretty neat! :D Though I'm not sure exactly why you're comparing it to a custom element that renders Markdown.
smitty1e 5y ago
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 5y ago
  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.
  - smitty1e 5y ago
    Obviously, one would felt[1] the yak hair into a yurt-shape prior to launch. It's either a nice alliterative run, or pedantic completeness, boss. [1] https://en.wikipedia.org/wiki/Felt https://en.wikipedia.org/wiki/Felt
  - codetrotter 5y ago
    If you shave sufficiently many yaks you will eventually come across a yak that is ill tempered. Place the yurt behind the angry yak and watch the yurt get yeeted when the yak kicks with its hind legs. Snappy yaks yeet yurts yonder.
ravenstine 5y ago
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?
- dmitriid 5y ago
  > I'm curious how this would work with SSR. Web Components can't be SSR'ed. (The libs that claim to do so, cheat).
- lenkite 5y ago
  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
unbanned 5y ago
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.
- somehnguy 5y ago
  Website lags scrolling on my desktop too. How do website even manage to break scrolling..?
  - kevin_thibedeau 5y ago
    By being accidentally quadratic or, more likely, naively.
    - Klonoar 5y ago
      Seems a bit odd to kick down like that - I'd be more inclined to assume it's accidental rather than naive, given the experience level of the author.
      - kevin_thibedeau 5y ago
        They accidentally didn't notice that scrolling is broken enough to bring a supercomputer to its knees?
        Klonoar 5y ago
        ...it doesn't bring my laptop to its knees, so no, I would wager accidental.
  - c0balt 5y ago
    Centering the background....
  - alpaca128 5y ago
    Sometimes I don't even want to know. I once found a website which messed with the scrolling to make it "smoother" - but it did that only when I scrolled with the keyboard (using a Vim plugin). I have no idea how they managed to do that, but at least it got fixed a couple months later.
ghengeveld 5y ago
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.
deleted 5y ago
[deleted]
fouc 5y ago
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.
dmix 5y ago
The source of the documentation site is a good example of it being used: view-source:https://md-block.verou.me/ 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 5y ago
  > 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 5y ago
  I wouldn't call flash-of-uncompiled-markup nice and clean. Please pre-render your markup.
  - tkzed49 5y ago
    While I think you can compile your markdown in most cases, this is a two line fix: set the style to display: none and remove it after compiling.
Devasta 5y ago
Finally, the web has a way of authoring and publishing documents.
- deleted 5y ago
  [deleted]
smoldesu 5y ago
I thought the point of Markdown was having a style-agnostic markup language that can easily be converted to HTML...?
- cunthorpe 5y ago
  > 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.
  - throwawayboise 5y ago
    This is gemini/gemtext.
    - cunthorpe 5y ago
      The problem is that until that's part of Chrome and offered by Wikipedia, it's niche at best. You know Google is not interested because they can't place flashy ads in it.
andrew_ 5y ago
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.
bruce343434 5y ago
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 5y ago
  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.
  - tomByrer 5y ago
    Or people want to edit MD in the browser?
- deleted 5y ago
  [deleted]
PostThisTooFast 5y ago
Markdown: Rampant in software doc and elsewhere, but there are no viewers for it. Goddamned stupid.
deleted 5y ago
[deleted]

121 points by feross 5y ago

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.

axiomdata316 5y ago

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

jagged-chisel 5y ago

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 5y ago

What about MDX? https://mdxjs.com/ https://mdxjs.com/ It's fairly well adopted in many tools

ravenstine 5y ago
That's pretty neat! :D Though I'm not sure exactly why you're comparing it to a custom element that renders Markdown.

smitty1e 5y ago

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 5y ago
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.
- smitty1e 5y ago
  Obviously, one would felt[1] the yak hair into a yurt-shape prior to launch. It's either a nice alliterative run, or pedantic completeness, boss. [1] https://en.wikipedia.org/wiki/Felt https://en.wikipedia.org/wiki/Felt
- codetrotter 5y ago
  If you shave sufficiently many yaks you will eventually come across a yak that is ill tempered. Place the yurt behind the angry yak and watch the yurt get yeeted when the yak kicks with its hind legs. Snappy yaks yeet yurts yonder.

ravenstine 5y ago

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?

dmitriid 5y ago
> I'm curious how this would work with SSR. Web Components can't be SSR'ed. (The libs that claim to do so, cheat).
lenkite 5y ago
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

unbanned 5y ago

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.

somehnguy 5y ago
Website lags scrolling on my desktop too. How do website even manage to break scrolling..?
- kevin_thibedeau 5y ago
  By being accidentally quadratic or, more likely, naively.
  - Klonoar 5y ago
    Seems a bit odd to kick down like that - I'd be more inclined to assume it's accidental rather than naive, given the experience level of the author.
    - kevin_thibedeau 5y ago
      They accidentally didn't notice that scrolling is broken enough to bring a supercomputer to its knees?
      - Klonoar 5y ago
        ...it doesn't bring my laptop to its knees, so no, I would wager accidental.
- c0balt 5y ago
  Centering the background....
- alpaca128 5y ago
  Sometimes I don't even want to know. I once found a website which messed with the scrolling to make it "smoother" - but it did that only when I scrolled with the keyboard (using a Vim plugin). I have no idea how they managed to do that, but at least it got fixed a couple months later.

ghengeveld 5y ago

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.

deleted 5y ago

[deleted]

fouc 5y ago

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.

dmix 5y ago

The source of the documentation site is a good example of it being used: view-source:https://md-block.verou.me/ 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 5y ago
> 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 5y ago
I wouldn't call flash-of-uncompiled-markup nice and clean. Please pre-render your markup.
- tkzed49 5y ago
  While I think you can compile your markdown in most cases, this is a two line fix: set the style to display: none and remove it after compiling.

Devasta 5y ago

Finally, the web has a way of authoring and publishing documents.

deleted 5y ago
[deleted]

smoldesu 5y ago

I thought the point of Markdown was having a style-agnostic markup language that can easily be converted to HTML...?

cunthorpe 5y ago
> 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.
- throwawayboise 5y ago
  This is gemini/gemtext.
  - cunthorpe 5y ago
    The problem is that until that's part of Chrome and offered by Wikipedia, it's niche at best. You know Google is not interested because they can't place flashy ads in it.

andrew_ 5y ago

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.

bruce343434 5y ago

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 5y ago
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.
- tomByrer 5y ago
  Or people want to edit MD in the browser?
deleted 5y ago
[deleted]

PostThisTooFast 5y ago

Markdown: Rampant in software doc and elsewhere, but there are no viewers for it. Goddamned stupid.

deleted 5y ago

[deleted]