Brace yourself 🤓

This one’s going to be nerdy.

Yesterday I wrote about the last seven days of development and my process of tackling a small feature on this blog every day - as and when I need it, "just in time".

I struggled with the word to title this article:

rundown noun
run·​down | ˈrən-ˌdau̇n
1: an item-by-item report or review: summary.
—Merriam Webster

That’ll do.

Today’s article is a technology-driven, more nerdy, in-depth look at the software packages I use to build this website and what I‘m using to drive the blog. There might even be a diagram. If I have time.

Standing on the shoulders of Gatsby

“If I have seen further, it is by standing on the shoulders of giants.” —Newton, I. (1675).

This quote, often attributed to Sir Isaac Newton, is a metaphor for building on the work of others, leveraging existing research and tools to learn and develop.

In the software engineering/web development world, we stand on the shoulders of giants every day by utilising off-the-shelf, open-source software and services. There is a huge community of developers worldwide building software that’s free for personal and commercial use.

We have a culture of reuse and contribution, so as not to re-invent the wheel and to leverage the power of thousands of minds instead of each developer or company solving the same problem in a unique (but somewhat similar) way.

I use no proprietary software packages to build this website and blog. I use it as a pet project to try out new packages, shiny new tools and toys.

Tech rundown

Software used

• React / Gatsby for generating the static site
• GraphQL for data fetching and manipulation
• Netlify for deployment and hosting

The bulk of this website is built on the shoulders of Gatsby - a free, open-source framework for building websites and applications. Gatsby uses Facebook’s React framework to generate a static website. This means that I can write pages, components, and functions with React, using JavaScript, and it will compile down to static HTML pages that are hosted without the need for a back-end database and are served to the user blazing-fast™️.

Alongside Gatsby, I use GraphQL, a querying language for retrieving and manipulating the data for the pages and articles. I’m starting to 💜 GraphQL. It’s so powerful for declaring exactly what data you need, defining a schema and so fast at fetching and orchestrating the data. We’re talking about introducing GraphQL at work so it’s good to try it out on personal projects and get to grips with the concepts and the language itself on my own.

To deploy and host my website I use Netlify. This is a very generous limited free service that lets me automatically build my website in the cloud and launch it to Netlify’s server when I make a code change. Netlify also has a variety of plugins to help with website deployment, maintenance and optimisation such as A/B split testing, code validation, worldwide content delivery and caching, SEO, and quality testing, amongst many more.

Languages used

• HTML
  • Markdown
• CSS
  • PostCSS
• JavaScript
  • TypeScript
  • React

I’m a front-end developer by trade so I work with the core web languages of HTML, CSS, and Javascript. Within this, I use Markdown to help me quickly write formatted blog articles, PostCSS to help me write modern CSS compatible with older browsers, React, and TypeScript to supplement JavaScript’s features.

What’s next?

Content management

Next, I want to integrate a headless CMS, filling the final piece of the JAMstack puzzle (JavaScript, APIs, Markup). This will let me create articles and edit content from the browser so I can write from my phone, laptop, wherever I am without needing to directly code.

I’m fine hand-coding articles in markdown but it’d be good to have a bit more structure and consistency - a CMS with defined article templates will help with this. As I write more articles it’ll get disorganised and unwieldy to be writing them in code every time.

I’m investigating Netlify CMS as it looks like it’ll integrate easily with Gatsby via its plugin ecosystem, and as I’m already using Netlify for deployment and hosting it should be easy to create a content deployment workflow.

Email/newsletter sign up

As I write so regularly (for now), I likely won’t be sending out notifications when I write a new article. Perhaps a weekly or monthly round-up of my favourite musings will do.

I’m not expecting many - if any - sign-ups, so I want to build this feature as a learning piece.

I’ll use Firebase for registering and authenticating users as well as sending emails. I recently started using it for database and authentication on a side project but haven’t utilised it for sending emails or SMS notifications yet. It’ll be a fun piece to do.

I know I promised a diagram…maybe next time.