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
- 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 my
<x-foo>component and be back to only one level of yak shaving!
- Wow, it’s already Friday afternoon?! 🤦🏽♀️😂
Hopefully you find <md-block> useful! Enjoy!