Learning

an ongoing series of articles

My adventures learning how to build websites and apps in 2020 using the Jamstack architecture, auto workflows and modern build tools. Content is pre-rendered and served to a CDN and made dynamic through APIs and serverless functions.

Who | Why

Chris Tham

artist, consultant, cyclist, designer, musician, photographer, world traveller.

Personal website

In 2020 I decided to learn how to create modern web sites and apps, for fun (and maybe profit?). I started by learning Javascript (ES6) and Typescript, followed by React and Gatsby. I converted my company website Hello Tham from Wordpress to Gatsby, Bulma and Netlify CMS hosted on Netlify.

I am currently learning Hugo, Next.js, MDX/Markdown, Tailwind and exploring various headless CMS. This website is written in Next.js, Tailwind, tailblocks and hosted on Vercel.

I may explore GraphQL, REST APIs and serverless functions in the near future. I am also creating a design system that I hope to publish in the short term.

For more information

What

Jamstack is a modern way to build Websites and Apps that delivers better performance. Technologies in the stack include JavaScript frameworks, Static Site Generators, Headless CMSs, and CDNs.

Security

No servers to hack into.

Scalability

No infrastructure to upgrade.

Performance

Prerendered content delivered on a CDN.

Maintainability

Automatic build, test and deploy.

Portability

Usable on any device.

Open

Open source development.

How

Latest articles relating to steps along my learning process. Please visit the Posts page to view all posts and filter by category.

GatsbyTheme-UI

Learning Gatsby and Theme-UI

2021-01-14Chris Tham

Happy 2021! This is my first post in the new year, and I am introducing another web site written in Gatsby and Theme-UI.

Featured Drawing /drawings/christmas.svg

News

Merry Christmas and the site has reached maturity!

2020-12-25Chris Tham

I started evolving this site from a vanilla NextJS tutorial and bare bones blog project into what you see today over a period of two months. It's been an amazing journey, and I am proud that the site has grown so much.

Roadmap

Roadmap - Future features for this site

2020-12-24Chris Tham

This is a simple roadmap highlighting future changes under consideration for this website. It will be refreshed periodically.

Featured Drawing /drawings/performance.svg

TechniquePerformance

How to optimise a site for performance and accessibility

2020-12-23Chris Tham

This article is all about tuning a site for performance, accessibility and best practices using site auditing tools such as Lighthouse, Wave, and WebPageTest.

Featured Drawing /drawings/imageviewer.svg

Techniquereact-bnb-gallery

Implementing a Photo Gallery and Lightbox

2020-12-17Chris Tham

Display a group of photos is a masonry grid and browse photos using a lightbox.

Featured Drawing /drawings/typewriter.svg

Techniquereact-typed

Typed text animation

2020-12-16Chris Tham

This post is all about enabling a common animation to be found on websites, having letters appear on the page as it they are typed by a human on a keyboard.

Subscribe to get updates to this site!

Like my articles? Enter your details and I will send you an email whenever the site has new content. I will not use your email for any other purpose.