Building my Site my (performant) way

Image for post
Image for post
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?


  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.

  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)
  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)
  1. Setting up deployment configurations
  2. Setting up CI for deployment
  3. Setting up error tracking with 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.

Written by

Google Developer Expert on Web Performance, Web Components & Firebase, Husband to a Painter/Artist/Chef, Father to two princesses, HCI Researcher, and Gamer.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store