Welcome to my Website! | Powered by Llamas 🦙

Hey there friend! Welcome to my first post on my brand spanking new website. In this article I'm hoping to introduce the themes I'm planning to discuss and why I chose the frameworks and technologies I did while implementing it. So without further adieu, lets dive into it.

How was this website built?

This website was built using Next.js. I was initially planning to build it as a vanilla React application, no redux pattern, no static site generation, no bells and no whistles. I'd been working with Angular for a few months during my internship and I could feel my skills with React starting to atrophy. (Although in many ways I found myself beginning to prefer Angular, but that's another topic for another blog post). When the probability of adding a CMS came around I decided to opt for Next.js instead.I also started to feel limited by the Create React App template I was using on Version 1 of this website. Having things like Typescript integration and a built in router made development a breeze.

Why Choose Next.js?

Next.js allows you to combine server and client side rendering to build dynamic but performant React applications. You have the option of shipping server components when you need to fetch from an external API and shipping client components when you need dynamic behaviour (like that nice ripple animation you see when you scroll through tabs on the side bar).

With Next.js you can even interleave client and server components together to get the benefits of of both. For instance, I can the data needed to render my blog server side so that the user doesn't have to wait, but I can also add dynamic components within that blog using Server Side hooks.

Why use TinaCMS?

The main benefits are that it's Headless, and it has fantastic contextual editing. You get live editing within the CMS and because it's MDX based it allows you to wire up your own React components as well. What this means is that I can define reusable parts of my UI within a component and then add that component to other parts of my site with a live preview of how it'll look. This allows you to do some complex stuff that I'm hoping to add to the website later.

An example of this might be if you had a component that displays all of your recent instagram posts in a list. Using TinaCMS you could re-use that component in multiple parts of your site, getting previews of how it'll look when you add it to each page. With some wiring up you could even add a customization option in Tina that lets you choose who's instagram posts will display, but I'd have to look at the docs for instagram's API to see how feesible that is.