Building my Site my (performant) way

Picture taken from my new Chrome tab that runs the Momentum extension

Note: This is under the series of “My Opinionated Way of building Performant Websites”

Confession time!

I still don’t have a site of my own.

And I blame it on my own laziness of building it.

So, for this series, I am going to build my site because it is high time I do it.

I am the Client.

So given that I am the Client, I want my site to be the following:

• I want to show who am I and what I do (something of a branding)
• I want to show case my latest work on the first page that you visit
• I want to show a summary of my latest blog post (to entice them to read more…)
• I want to show a list of my past research publications (because I am an academician and researcher by profession)
• and I want them to be editable on my own dashboard.

I am the Developer

And because this will be a journey on building a performant website, and understanding the bits and pieces of it along the way (from planning, setting up, implementing, to deploying), I will be making my own content-management system (CMS) from scratch.

Why not use an existing CMS?

Because…

1. I can :P and…
2. because I want to let you see how it works and also be open on improving that practice.

So How will I build it?

My methodology for this project is categorized into parts: Planning, Implementation, and Deployment, with the usual iterative process.

Planning

1. Designing the purpose and user flow of the website via Core Model
   - See my motivations on using Core Model.
2. Designing the database structure and content structure with a modified version of OOUX (by adding how data should be queried)
3. Auditing UI components using Atomic Design (I used a modified version of it)
4. Infrastructure design (picking my tools for infrastructure — I will be using Firebase and GCP for this one)

Implementation

1. Setting up repository with templates and necessary files for good project management (I’m going to use gitlab for this)
2. Putting the plans into issues and setting up the project management tracking system
3. Setting up Vagrant file for development
4. Setting up the branches and CI on gitlab with deployment
5. Doing some proper git commit for clean changelog (with linting and test)
6. First set of deep dives in preparation for #6:
   - Proper usage of HTML
   - CSS tricks on layout
   - Web components
   - Introduction to using element-lite — my own library for using web components
7. Creating a simple server using fastify
8. Generating a single page application using webpack
9. Using webpack to compile the server (and why we need it for our setup)
10. Creating a general HTML template to be served on the server
11. Writing my first component with testing
12. Setting up performance budgets and end-to-end testing
13. Creating a single-page-application (SPA): Creating a capture-location to capture change in URL
14. Creating SPA: Creating a capture-query to capture change in query
15. Creating SPA: Changing <main> content using lit-html given routes captured in capture-location
16. Creating a simple state machine for the site
17. Doing the architecture of the site
18. Creating our first authentication with Firebase
19. Handling your secrets with Vault
20. Structuring your Firestore and Firebase
21. Updating Firebase and Firestore with Firebase functions
22. Using fetch with Firebase for performance (and why using fetch is better than loading another JS library)
23. Using web workers to handle all data (and why redundancy is ok — I think)
24. Making it offline capable — Service workers using Workbox
25. Debugging, Testing and bundling your service workers
26. Making it offline capable — Using localforage
27. Creating the manifest.json for making it app-install-able
28. Adding additional essential parts and deep dives (series)

Deployment

1. Setting up deployment configurations
2. Setting up CI for deployment
3. Setting up error tracking with Sentry.io for production
4. Setting up google analytics for both the site and service worker
5. Other deployment practices and gotchas

Take note that this is my current plan and along the way, the planning, implementing, and deploying parts of the plan will be intertwined. So in essence, you will see how things will work out and how they affect each other. I will add additional things here whenever I see fit.

This blog series will be short snippets though and hopefully will only take up about 5–10 minutes of read time (with steps), so that it will be easy to consume. I’ll set up a gitlab repository for this one and will share it to you along the way.