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.

While poking around on Stack Overflow I found a post with a tiny JavaScript snippet that lets you inject elements into a page by loading external HTML files. Here's the snippet:

I used that little bit of code as the basis of this site. I have a pre-defined page template that pulls in the Nav, Header, and Footer elements from external files on page load. Performance is surprisingly good: I'm getting a 100 score from PageSpeed Insights.

I can also encapsulate my styles along with the HTML content on my snippets. When I need to update something, I update just the component file and all the pages pull in the new design on the next load. As long as my over-all page template doesn't change I can rollout some pretty major design changes without having to touch individual pages. It gives me the advantages of a static build system, without having to rely on a build process.

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