Recently, I worked on a minimal website for my spouse to help her with building a professional online presence. When I first came to this task, the first tool I was going to reach for was, of course, Vue.js. Vue is great, and I'm already familiar with it--so why not? Or I can use this as an opportunity to practice React!1
Then I remembered the saying, "if all you have is a hammer, everything looks like a nail." Or some version of it.
Using the right tool for the given job is important, of course. But it seems to me that this is even more critical in software engineering today. I mean, it is so tempting to pick the most advanced or fashionable programming language/framework/library/programming style/design pattern regardless of what the task is.
It is also equally tempting to just pick what I'm already used to. It is a blessing and a curse that most existing tools in software engineering are so flexible that they can often do what they're not explicitly designed for.2
A quick note on the state of Web
In the world of Web, in particular, many have been writing and participating in discussions on bloated webpages. In 2011, the average website size less than 800KB was a concern. In 2019, it appears that we would be lucky to have a page less than a couple of megabytes. And the growing size of website may lead to more than suboptimal performance. It can be a matter of unequal access to information!
With all that in mind, I looked around for an alternative solution for my project, i.e. a static, one-page website to convey some information with a simple contact form. More specifically, I looked for solutions that meet the following requirements:
- Responsive design
- Minimal bundle size
Let me elaborate on each.
The volume of mobile web traffic has been at least comparable to that of desktop/laptop traffic since the beginning of 2017. In this day and age, adopting responsive design for a website, if not "mobile-first" design, is no longer an option and failing to do so can be costly. For one, Google Search prioritizes "mobile-friendly" contents for indexing and ranking.
Minimal bundle size
Obviously, for the kind of project I have here, there is no excuse for not keeping it minimal in size. Though I did not have an explicit budget for keeping the size in check, it would make no sense for my project to be a multi-MB monster.
After some research, I discovered Tailwind CSS, a "utility-first CSS framework for rapidly building custom designs." I was immediately sold to its idea of composable CSS classes, which not only offered a more flexible solution than the likes of Boostrap but also nicely fits the idea of components.
To further push the idea of using components, I relied on webpack's
html-loader and its convenient interpolation feature. This allowed me to split and organize the html into smaller pieces.
Mixing these two tools, I could create simple "components", each of which is a combination of a piece of HTML code ("partial") to define the structure and accompanying CSS classes to give it a nice responsive look.
Then, to meet the final requirement of a small bundle size, I resorted to using Purgecss as recommended in Tailwind CSS documentation so that the resulting CSS bundle would be kept to a minimum.
Though I cannot say that this is the best it could be, I am still very proud of how the website turned out. This project also gave me a chance to practice working with webpack directly instead of relying on, say, Vue CLI to set up the basics. I feel very empowered by this. 💪
Speaking of "a right tool for the job": I originally planned to use Google Sheets as a database alternative for the contact form submissions. Simply leaving an email address seemed inadequate and not sufficiently professional while getting a separate database for this kind of a project would be an absolute overkill. Unfortunately, working with Google Sheets API on the browser turned out to be rather complicated and I spent days trying to make it work.
Then I was reminded of Google Forms. 😂