Select Category

Posts

Please follow my journey by reading articles relating to steps along my learning process.

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.

Featured Drawing /drawings/portfolioupdate.svg

Techniquepagination

Implementing blog post pagination

2020-12-15Chris Tham

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.

TechniqueCategoryFilter

Implementing Post filtering by category

2020-12-14Chris Tham

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

Featured Drawing /drawings/addcontent.svg

TechniqueMDX

Enhancing Markdown with remark and rehype plugins

2020-12-13Chris Tham

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

Featured Drawing /drawings/codeinspection.svg

TechniqueMDXPrism

How to implement Syntax Highlighting in Code Blocks

2020-12-12Chris Tham

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.

UItailblocksTailwindCSS

Exploring Tailblocks

2020-12-11Chris Tham

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

UINotusTailwindCSS

Exploring Notus from Creative Tim

2020-12-10Chris Tham

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

Featured Drawing /drawings/tailwindcss.svg

UITailwindUITailwindCSS

Exploring TailwindUI

2020-12-09Chris Tham

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.

Featured Drawing /drawings/Responsive-bro.svg

UIMerakiUITailwindCSS

Exploring MerakiUI

2020-12-08Chris Tham

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

TechniqueSitemapRSSNextJS

Generating Sitemap and RSS feed for site

2020-12-07Chris Tham

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.

TechniqueNextJSnext-seo

Improving SEO on the website

2020-12-06Chris Tham

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

TechniqueMailchimpNextJS

Create a Call to Action to Subscribe using Mailchimp

2020-12-05Chris Tham

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.

Featured Drawing /drawings/devactivity.svg

TechniqueNextJS

Adding Website Deployment information

2020-12-04Chris Tham

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

TechniqueSendGridNextJS

Integrating a Contact Form to SendGrid

2020-12-03Chris Tham

How to create a contact form that sends email via SendGrid

Opinion

Object Oriented Considered Harmful

2020-12-02Chris Tham

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.

Featured Drawing /drawings/websitesetup.svg

News

Hello World

2020-12-01Chris Tham

Launching our website today!

TechniqueReact

Conditional JSX Elements in React

2020-11-30Chris Tham

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

Featured Drawing /drawings/buildingwebsites.svg

Opinion

Why this site is not using a CMS

2020-11-07Chris Tham

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

Featured Drawing /drawings/sitecontent.svg

TechniqueMarkdown

This site's Front Matter

2020-11-06Chris Tham

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

$Featured Drawing /drawings/math.svg$

TechniqueMarkdownKaTeXMathematics

Rendering Math in Markdown

2020-11-05Chris Tham

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.

TechniqueMarkdownMDXNextjs

Converting from Markdown to MDX in Nextjs

2020-11-04Chris Tham

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).