Articles
Please follow my journey by reading articles relating to steps along my learning process.
Happy 2021! This is my first post in the new year, and I am introducing another web site written in Gatsby and Theme-UI.
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.
This is a simple roadmap highlighting future changes under consideration for this website. It will be refreshed periodically.
This article is all about tuning a site for performance, accessibility and best practices using site auditing tools such as Lighthouse, Wave, and WebPageTest.
Display a group of photos is a masonry grid and browse photos using a lightbox.
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.
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.
How to select posts belonging to a category on the Posts page
Why settle for generic Markdown? Additional functionality can be added to the markdown processing chain through remark and rehype plugins.
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.
Tailblocks is a set of ready-to-use Tailwind CSS blocks with colour variations and dark/light mode designed by Mert Cukuren (@knyttneve).
Notus is a free Tailwind CSS and NextJS UI Kit and Admin Dashboard made by popular UI developers Creative Tim.
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.
MerakiUI is a set of TailwindCSS components that support RTL languages & fully responsive based on Flexbox & CSS Grid. Built by @khatabwedaa & @miaababikir
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.
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
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.
Ever wanted to check your latest Git commit made it to production? Embed deployment information on a page on the website!
How to create a contact form that sends email via SendGrid
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.
Ever wondered how to emit different JSX Elements depending on a condition? Well, so did I!
Content Management Systems (CMS) are so hot right now, especially headless ones. So why doesn't this site use one?
What metadata am I currently using to describe blog posts on this site?
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.
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).
AMP (or Accelerated Mobile Pages) is a web framework optimised for responsive websites, ads and emails. Find out how to support it on NextJS!
Why not WordPress? Or Ghost? Or even Hugo? This article explains my rationale.