About this Site

For my day job, I work almost exclusively in React. I'm mostly building projects using Microsoft's spfx template to create SharePoint Web Parts. I like React so much, I used Gatsby to migrate my blog from WordPress. These days I don't update the blog much, but still wanted to have a place to post.

For this site I decided to get back to basics. I wanted something that I could hand-code using just HTML and CSS. I thought about using or creating a static site builder, but decided that was overkill.

The site started with a tiny custom element that injected HTML via innerHTML. I've since upgraded to purpose-built Web Components using Shadow DOM for style encapsulation. Each shared layout piece — header, nav, and footer — is its own component that fetches its HTML fragment and renders it inside a shadow root.

Each component loads its fragment from an external file, so I can update any shared element in one place and have my changes reflect on every page. Shadow DOM keeps each component's styles scoped — no more worrying about CSS leaking between fragments and the main page.

Here's what my standard page template looks like:

I was originally planning on pulling in the article content the same way, via snippets, but decided to just hand-code that section for each page instead. I may revisit that in the future.

Since I'm just building plain old HTML pages, so I can add anything I want:

Use your arrow keys to move. Code borrowed from KT_Zheng