Here's an idea: this page will be my test content. I'll include one of everything in here and use it for a very quick smoke-test

Still life photography of a painted CD balanced on a potted cactus

I don't currently have any [many] automated checks on this website – not something I'm proud of but a reality I'm willing to accept. I want to get up and running quickly and I'm still experimenting with this technology (Gatsby primarily) so borrowing a little is acceptable. If I start incurring interest on the debt I'll consider paying it back.

So for now I perform an unscripted manual check quite naturally. I look at the live site after I've made changes to it or added new content.

This page is somewhere I can note the features I have used on the site – a single place to quickly review everything. If I automate the natural checks I'm making I can start by checking what's on this page.

Process

  1. Add a new feature to the site
  2. Include an example of it here
  3. Periodically check everything on this page is working

⚠️ Would I notice if I added new features and forgot to include them here?

⚠️ Would I notice if any of them broke?

🤖 And that's why we automate

Features of this site so far

JSX and Markdown

I'm not checking on this, it's a feature of gatsby-plugin-mdx

However, shortcodes are the JSX components that I pass in to MDXProvider and my automated checks wouldn't tell me if they were missing

Expected shortcodes

BlockQuote
Example of citation URL without a pathname

DC5B is going on behind the scenes

dc5b.com
WebGL model view projection

This article explores how to take data within a WebGL project, and project it into the proper spaces to display it on the screen. It assumes a knowledge of basic matrix math using translation, scale, and rotation matrices. It explains the three core matrices that are typically used when composing a 3D scene: the model, view and projection matrices.

developer.mozilla.org [...] WebGL_model_view_projection
Emoji
<Emoji label="positive checkmark"></Emoji>

My Emoji component adds accessibility attributes around an emoji

Link

Home

The Gatsby <Link> is available to all MDX layouts

Frontmatter

Optional data about a Note page.

KeyUse
afterthoughtsend of note page
datesort of notes index
descriptionmetadata descriptions
imagedisplayed at top of note page
imagereferenced in metadata image
imageAltalt text for image (above)
titlelisted in notes index
titlemetadata titles for note page
titletop of note page
titlewindow title for note page

Footnotes

I don't have "many" automated checks

Initially I wrote that I don't have "any" automated checks, then I started to notice automated checks that I had ignored:

  • Linting should happen whenever I save, assuming the format of the document is correct. If it fails I notice. This is a frequent, super cheap check that is very easy to keep green.

  • Deployment and build checks are another frequent, unobtrusive check that should not be underrated. When I push to my repo the automated pipeline runs build and deploy tasks. If there are errors then deployment fails and I notice.



Spotted a typo? Edit on Github


Unless otherwise stated I am the creator of all the text, images and code.

Generally I'm happy to share but let's talk first if you want to license or commercialise any of it

© 2021 Laurence Lord