Posted on 2024/11/14

3G font woes and why i built my own site generator

after reading Tom MacWritght's blog titled This page weighs 15kb, i decided to run tests on my own site. the results for people on 3g connection was not good. the problem was, i was loading fonts (inter for sans-serif & jetbrains mono for monospace) and those were causing layout shift. it is not a large enough of a problem but it is a issue nonetheless. but my reasoning is why even have an issue when it's solveable and also a problem created entirely by myself.

i have decided to not use custom fallback either. but rather use default values of sans-serif, serif, monospace for respective types of text because it respects user's font setting. for example if user has set fontA as their default font they will get fontA with this approach. alternatively, if i had used a custom font ordering of something like fontUnknown, ... then if the user's system has fontUnknown then it will be used instead of user's preferred font. and, that is not what i want because of two reasons.

  1. i like when my own setting is respected, so i would like to do so for others too.
  2. less of a headache for me as i do not have to think about font ordering.

also currently, i am using my own site generator to generate this site. it's extremely basic and just glue code for few dependencies but it's much less of a headache and i understand what exactly is happening. instead of having to deal with things i do not understand and having to deal with their quirks. i can now manage the quirks of a tool i built myself, where i know exactly why things work the way they do.

i currently still hand write the writing's index and few other page's HTML because they are a non-issue and i still like writing HTML just not for too long and too much. when it's too much i move to markdown which is a joy to write in. plus i didn't want to write code to deal with making indexes of page and stuff. for now, i am happy with where i am. my site generator just turns markdown to HTML and gives me syntax highlighted code blocks.