Amber West Digital

Amber West Digital is an imaginary tech business for me to explore and practice Bootstrap 5. The whole branding of Amber West Digital was made in Figma, as well as the web design and layout.

Learning == output

When I want to do something, I strive to make it something that can exist and stand by itself in a way that the world can see. For instance, when I tried to learn Blender, I forced myself to make several outputs, and even animated some. One can say that I learn by doing, but what I strive for is cohesiveness and quality of the output, not just to do and learn something.

As for learning Bootstrap 5, reading documents wasn't enough for me. I wanted to build something that would showcase my learnings. In a way, the output serves as a trophy or a reward that staples what I've been striving to learn.

Idea and Branding

With the help of Gemini, Google's LLM, we idealized an imaginary tech company. This will be the basis of my output while learning Bootstrap 5, and frameworks that I might study in the future. Specifically, I will use Bootstrap 5 for the website of this company, and if I wanted to learn other frameworks, this will be "projects" of this mother company. I named this whole context as Project Playground.

We settled on something simple first- it will be a web design and development company, which also offers consultation for design and development (if clients want to build websites on their own), as well as specialization in SEO.

The company needs a name, and while Gemini suggested me the name 'Webify' for the main company, it sounds too generic and plain. I used some anagram generator and played with some words related to web development. At the end, I used the anagram for 'web master'. Welcome, Amber West Digital.

Since I'm exploring a new framework, I don't want to add a lot of workloads, and so I opted for a simple and flat design. When I realized that the design was too flat, I used some gradient.

Blue was the color I chose because it's the most widely used color to convey trust. It is also familiar, in that it is used by Facebook, Paypal, Twitter, etc. I did not take a lot of time with the brand design, because it is not the focus of this project.

Development

The design was implemented using the following tech stack:

1. Vite
2. Bootstrap + Sass
3. Handlebars
4. npm
5. HTML, CSS
6. PurgeCSS

Originally, the stack only uses Bootstrap + Sass, and of course the holy trinity that is HTML, CSS, and JS. I wanted hot reload so I decided to use Vite, which was also something I wanted to learn and explore. This also allows me to install plugins if I ever need one, which I did eventually.

Components Issue

When I realized I was and will be repeating the same elements, I looked for a way to reuse them. I have used the jquery method of converting elements into components, but it was tedious since it requires several imports for each components.

The jquery method goes like this- we move the contents of the element into its separate html file, say, a navbar. In a js file (preferably the same name as the html file), we use the following jquery code:

$.get("components/navbar.html", function(data){ // Get the data from components/navbar.html

$("nav").replaceWith(data); //Find the nav element and replace it with the data

});

Lastly, in the main file, we add the element where we want the component to replace with. In this case, the <nav> element will be replaced with whatever the content of the components/navbar.html is, once we import the js file.

This is where the problem starts. With one component, we already have two files, the .html and the .js file. As we require more components, we get more files to manage. And another problem is that we need to import each .js file on each pages where we want the component to be.

Sure we can put the jquery codes of each component into a single .js file, in that way we could just use one import on each page. But what if we don't want the component to replace what's in the page? We could make do with using element ids instead of element tag names, but again that becomes very hard to manage.

Handlebars

Handlebars is a javascript library that allows for the creation of reusable html templates called partials. Vite has a dedicated plugin for Handlebars. This plugin allowed me to ditch all the .js files for each components, as well as the import scripts on the head tags of all pages.

Using handlebars is easy- we put the elements we want in a separate .html file under the /partials folder. To use it, we simply say:

`{{> componentName }}`

where `componentName` is the name of the html file. No need for .js files and imports and all that.

PurgeCSS

As I proceed to creating the build of the website, I noticed that Lighthouse recognizes a large portion of the CSS is unused, specifically around 90% based on the Coverage tab. For this, I used PurgeCSS to minify the css file and ensure that only the used classes from Bootstrap are used, which I believe was the main culprit. PurgeCSS reduced the dist folder at that time from around 8-9mb to around 2-3mb. Very big difference. I also converted the images used from .jpg and .jpeg to .webp, which further reduced the size of the build. Note that the size of the build might have changed as I introduce new assets and pages.