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.

Hero

Who | Why

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.

Chris Tham

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

Building Websites

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.

Featured Image
GatsbyTheme-UILearning Gatsby and Theme-UI

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

Avatar
Chris Tham2021-01-14
Featured Image
NewsMerry Christmas and the site has reached maturity!

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.

Avatar
Chris Tham2020-12-25
Featured Image
RoadmapRoadmap - Future features for this site

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

Avatar
Chris Tham2020-12-24
Featured Image
TechniquePerformanceHow to optimise a site for performance and accessibility

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

Avatar
Chris Tham2020-12-23
Featured Image
Techniquereact-bnb-galleryImplementing a Photo Gallery and Lightbox

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

Avatar
Chris Tham2020-12-17
Featured Image
Techniquereact-typedTyped text animation

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.

Avatar
Chris Tham2020-12-16
Featured Image
TechniquepaginationImplementing blog post pagination

Although this site does not have many posts, I have decided to try out pagination of posts on the home page. At most 6 posts are displayed but you can use page navigation to see other posts.

Avatar
Chris Tham2020-12-15
Featured Image
TechniqueCategoryFilterImplementing Post filtering by category

How to select posts belonging to a category on the Posts page

Avatar
Chris Tham2020-12-14
Featured Image
TechniqueMDXEnhancing Markdown with remark and rehype plugins

Why settle for generic Markdown? Additional functionality can be added to the markdown processing chain through remark and rehype plugins.

Avatar
Chris Tham2020-12-13
Featured Image
TechniqueMDXPrismHow to implement Syntax Highlighting in Code Blocks

Why have boring code blocks in Markdown when you can have them styled in accordance with your website and with syntax highlighting based on the code language.

Avatar
Chris Tham2020-12-12
Featured Image
UItailblocksTailwindCSSExploring Tailblocks

Tailblocks is a set of ready-to-use Tailwind CSS blocks with colour variations and dark/light mode designed by Mert Cukuren (@knyttneve).

Avatar
Chris Tham2020-12-11
Featured Image
UINotusTailwindCSSExploring Notus from Creative Tim

Notus is a free Tailwind CSS and NextJS UI Kit and Admin Dashboard made by popular UI developers Creative Tim.

Avatar
Chris Tham2020-12-10
Featured Image
UITailwindUITailwindCSSExploring TailwindUI

TailwindUI is a collection of professionally designed, pre-built, fully responsive HTML snippets you can drop into your Tailwind projects. Created by the designers of TailwindCSS.

Avatar
Chris Tham2020-12-09
Featured Image
UIMerakiUITailwindCSSExploring MerakiUI

MerakiUI is a set of TailwindCSS components that support RTL languages & fully responsive based on Flexbox & CSS Grid. Built by @khatabwedaa & @miaababikir

Avatar
Chris Tham2020-12-08
Featured Image
TechniqueSitemapRSSNextJSGenerating Sitemap and RSS feed for site

How to generate a sitemap and RSS feed for a site automatically. I have decided to use a method that is completely internal and does not rely on scripts or loaders.

Avatar
Chris Tham2020-12-07
Featured Image
TechniqueNextJSnext-seoImproving SEO on the website

Search Engine Optimisation (SEO) is a strategy for improving the ranking of websites in search results. This article focuses on incorporating social media and search engine tags into website pages using next-seo

Avatar
Chris Tham2020-12-06
Featured Image
TechniqueMailchimpNextJSCreate a Call to Action to Subscribe using Mailchimp

I have just implemented a call to action component on this site which allows a user to subscribe to a mailing list on Mailchimp. I encourage you to subscribe to get notifications via email of future posts.

Avatar
Chris Tham2020-12-05
Featured Image
TechniqueNextJSAdding Website Deployment information

Ever wanted to check your latest Git commit made it to production? Embed deployment information on a page on the website!

Avatar
Chris Tham2020-12-04
Featured Image
TechniqueSendGridNextJSIntegrating a Contact Form to SendGrid

How to create a contact form that sends email via SendGrid

Avatar
Chris Tham2020-12-03
Featured Image
OpinionObject Oriented Considered Harmful

My rant of the day. One of the reasons why I did not pursue software development as a career was that the computing industry in the 1990s and 2000s was a nightmare created by an obsession with object-orientation.

Avatar
Chris Tham2020-12-02
Featured Image
NewsHello World

Launching our website today!

Avatar
Chris Tham2020-12-01
Featured Image
TechniqueReactConditional JSX Elements in React

Ever wondered how to emit different JSX Elements depending on a condition? Well, so did I!

Avatar
Chris Tham2020-11-30
Featured Image
OpinionWhy this site is not using a CMS

Content Management Systems (CMS) are so hot right now, especially headless ones. So why doesn't this site use one?

Avatar
Chris Tham2020-11-07
Featured Image
TechniqueMarkdownThis site's Front Matter

What metadata am I currently using to describe blog posts on this site?

Avatar
Chris Tham2020-11-06
Featured Image
TechniqueMarkdownKaTeXMathematicsRendering Math in Markdown

If you are interested in publishing technical or scientific content, you may need to include math formulae in your blog posts. Here is the method I used for this site.

Avatar
Chris Tham2020-11-05
Featured Image
TechniqueMarkdownMDXNextjsConverting from Markdown to MDX in Nextjs

Many Jamstack blogs use Markdown as a format to create content. To enable advanced formatting, it is possible to an enhanced format known as MDX that combines Markdown and JSX elements (React components).

Avatar
Chris Tham2020-11-04
Featured Image
TechniqueAMPNextjsNextJS supports AMP natively

AMP (or Accelerated Mobile Pages) is a web framework optimised for responsive websites, ads and emails. Find out how to support it on NextJS!

Avatar
Chris Tham2020-11-03
Featured Image
ResourcesNextJSLearning NextJS

How I learnt NextJS, and some links to useful resources.

Avatar
Chris Tham2020-11-02
Featured Image
OpinionNextJSWhy Create a Blog in NextJS?

Why not WordPress? Or Ghost? Or even Hugo? This article explains my rationale.

Avatar
Chris Tham2020-11-01