I finished my JavaScript class final project on December 17. Since design is a skill that I am working to improve, I decided to do something more front-end oriented. Due to the fact that the holidays were timely, as was enormous amounts of food, I decided to make a food holiday calendar. Essentially, a user can click on a month, and a modal window will pop up and display three related food holidays for that month.
My initial issue was formatting – how to make the months all look good. I opted to let the art drive my design. I found some wonderful images for the months that display the name of the month in a somewhat whimsical font, along with the birthstone for that month. Next, I needed a font to match the whimsy of the art. Thankfully Google fonts had a font that fill the bill and would not slow down the page-load speed in a noticable way – which is important since there are twelve images of various sizes that must load on the page.
I opted to use a W3 layout. I have used Bootstrap in the past, but I wanted to branch out. The W3 layouts are easy to use and customize. I changed the colors, sizes and more on the modals until they appeared exactly as I wanted. The project primarily uses HTML, a bit of JSS and only a few lines of jquery, so I opted to have only one file, rather than splitting it into separate files. I was pleased with the final product, and I cannot wait to build something more complex using JavaScript in the future.
Today, I deployed the project as a static website. Initially, I was going to use Heroku, since that only thing that I have built with it was a Facebook bot. After looking at the terms, I realized that having a static site would cost money, and this little project is not worth it. Since I have used AWS for other projects, and this is lightweight, I decided against it. Next, I looked at Google Cloud. I was all set to a Google Cloud Storage bucket, until I realized that it would be served using http, as static sites deploying from the buckets do not allow for https. I wanted to use https, so I decided to use Firebase for hosting. I have used Firebase for a database before, but never for hosting.
After I installed the Firebase CLI, and created the project on my Firebase dashboard, there was minimal configuration. I did have to configure the firebase.json file, in order to indicate which directory to use for deployment. Once I made that change and typed the magic words (‘Firebase deploy’) – it was done! Now my project is deployed on https, for free! Enjoy! https://js-final-9cfff.firebaseapp.com
michdcode 