Architecture
This website practices Jamstack, "an architecture designed to make the web faster, more secure, and easier to scale".
Technology
- Framework: Preact
- Enhancements: Sass, Typescript
- Build and deploy: webpack, GitHub, Next.js and netlify.
With each website I do something new. For this website I experimented with dark mode. Evidence suggests the user should have the the option to switch to light mode.
I also documented how I set up the project. I chose to do this rather than creating a template because third party libraries and solutions change fast, and best practices change with them. These steps will guide future projects.
Documentation
- The conventions, good practices, and solutions used to develop and build the website. They influence how the the website is assembled. They are not essential, and could be replaced without affecting the appearance or performance of the website. They do not add to page weight.
- Typescript adds features to JavaScript which help to better structure and test code.
- Sass extends CSS to which it is converted when compiling the site ready for release.
- Pages are statically generated using next.js. Instead of serving dynamic pages based on variables, such as a specific product or blog, a static site generator (SSG), like Next.js, is used to create all of these pages - which could be many thousands - each time the site is updated. They are therefore immediately available to a browser request.
- Code developed by third-parties which affect both how the site is built and its performance in the browser.
- Preact is a light-weight alternative to React which models the state of a page and modifies it in response to user actions. Preact adds to the page weight. For this site I could have dispensed with a framework, it is sufficiently simple that I could have written it in Notepad, but this site is also intended to serve as a guide on more complex projects.
- Settings and tweaks that keep things running smoothly.
- PWA support.
- Configuration to enable Sass, Typescript, Jest, and Preact to be used together.
- Layout design pattern.
- Meta tags to provide links for LinkedIn.
For a complete picture of the web technologies I use, or have used, please see my curriculum vitae.