# Yak Shaving

Published articles for Yak Shaving.

This is one page of public article previews, not the complete archive. Follow Next page to continue. Summaries are not the original full articles.

## On Yak Shaving and \`\`, a new HTML element for Markdown

DevFeed: [On Yak Shaving and \`\`, a new HTML element for Markdown](<https://devfeed.tech/articles/on-yak-shaving-and-a-new-html-element-for-markdown-52135.md>)

Original publisher: [Read original article](<https://lea.verou.me/2021/11/on-yak-shaving-and-md-block-an-html-element-for-markdown/>)

Author: Lea Verou

Published: 2021-11-26T00:00:00Z

Content type: article

Language: en

Sources: [Lea Verou's blog](<https://devfeed.tech/sources/lea-verou-s-blog.md>)

Topics: [Web Development](<https://devfeed.tech/topics/web-development.md>), [Front end](<https://devfeed.tech/topics/frontend.md>), [Markdown](<https://devfeed.tech/topics/markdown.md>), [markup](<https://devfeed.tech/topics/markup.md>)

Tags: [blog](<https://devfeed.tech/tags/blog.md>), [component](<https://devfeed.tech/tags/component.md>), [conic-gradient](<https://devfeed.tech/tags/conic-gradient.md>), [css](<https://devfeed.tech/tags/css.md>), [css-variables](<https://devfeed.tech/tags/css-variables.md>), [demo](<https://devfeed.tech/tags/demo.md>), [docs](<https://devfeed.tech/tags/docs.md>), [esm](<https://devfeed.tech/tags/esm.md>), [gulp](<https://devfeed.tech/tags/gulp.md>), [js](<https://devfeed.tech/tags/js.md>), [library](<https://devfeed.tech/tags/library.md>), [markdown](<https://devfeed.tech/tags/markdown.md>), [markup](<https://devfeed.tech/tags/markup.md>), [module](<https://devfeed.tech/tags/module.md>), [nesting](<https://devfeed.tech/tags/nesting.md>), [npm](<https://devfeed.tech/tags/npm.md>), [open-source](<https://devfeed.tech/tags/open-source.md>), [original](<https://devfeed.tech/tags/original.md>), [personal](<https://devfeed.tech/tags/personal.md>), [postcss](<https://devfeed.tech/tags/postcss.md>), [readme](<https://devfeed.tech/tags/readme.md>), [releases](<https://devfeed.tech/tags/releases.md>), [rendering](<https://devfeed.tech/tags/rendering.md>), [sass](<https://devfeed.tech/tags/sass.md>), [stretchy](<https://devfeed.tech/tags/stretchy.md>), [web-components](<https://devfeed.tech/tags/web-components.md>), [yak-shaving](<https://devfeed.tech/tags/yak-shaving.md>)

### AI overview

To avoid duplicating Stretchy's documentation between its page and README, the author finished an existing web component for rendering inline and remote Markdown, published as md-block. The excerpt presents it as one step in a chain: updating Stretchy for ESM and Shadow DOM led to a Rollup and npm scripts build, CSS changes, and new documentation, before the author could return to the original demo project. The excerpt gives no implementation details or comparison with other Markdown tools.

### Source excerpt

This week has been Yak Shaving Galore. It went a bit like this: I've been working on a web component that I need for the project I'm working on. More on that later, but let's call it <x-foo> for now. Of course that needs to be developed as a separate reusable library and released as a separate open source project. No, this is not the titular component, this was only level 1 of my multi-level yak shaving... 🤦🏽♀ I wanted to showcase various usage examples of that component in its page, so I made another component for these demos: <x-foo-live>. This demo component would have markup with editable parts on one side and the live rendering on the other side. I wanted the editable parts to autosize as you type. Hey, I've written a library for that in the past, it's called Stretchy! But Stretchy was not written in ESM, nor did it support Shadow DOM. I must rewrite Stretchy in ESM and support Shadow DOM first! Surely it won't take more than a half hour, it's a tiny library. (It took more than a half hour) Ok, now I have a nice lil' module, but I also need to export IIFE as well, so that it's compatible with Stretchy v1. Let's switch to Rollup and npm scripts and ditch Gulp. Oh look, Stretchy's CSS is still written in Sass, even though it doesn't really need it now. Let's rewrite it to use CSS variables, use PostCSS for nesting, and use conic-gradient() instead of inline SVG data URIs. Ok, Stretchy v2 is ready, now I need to update its docs. Oooh, it doesn't have a README? I should add one. But I don't want to duplicate content between the page and the README. Hmmm, if only... I know! I'll make a web component for rendering both inline and remote Markdown! I have an unfinished one lying around somewhere, surely it won't take more than a couple hours to finish it? (It took almost a day, two with docs, demos etc) Done! Here it is! https://md-block.verou.me Great! Now I can update Stretchy's docs and release its v2 Great! Now I can use Stretchy in my <x-foo-live> component demoing