So I’ve made a few more strides in my spring cleaning adventures this week. I finally managed to get all my cURL test scripts to passed, which was a boost of confidence for me. Also, any other things that I had conveniently hardcoded back then were at least moved to the server’s configuration file, or like for the project file extension (which is “.zip” for a Zip archive), since I was using it everywhere, I put that in a getter method of a class that handles extraction of files from a particular file archive. With that now out of the way, I could now be involved with cleaning up the front end.
Vuetiful Tales And Adventures Chapter 6 (about time…)
The front end was a bit more of a mess. Firstly, when I was getting started on it, the way I imported the JavaScript libraries was through CDN. This is totally fine for quickly playing around, experimenting with a library and getting familiar with it, but there is a much better way of managing them. Now, I’ve installed the necessary libraries/dependencies as Node modules through NPM. Since I was already using Webpack to bundle up the Vue Single File Components, importing the libraries was easy like:
import Vue from "vue"
import Vuetify from "vuetify"
import "vuetify/dist/vuetify.min.css"
. . .
Vue.use(Vuetify);
And that’s it! The disadvantage of doing this however is that our static JS bundle file would be considerably bigger, since Webpack bundles all our source files as well as the libraries’ bundled JS files into that single bundle file.
Other than that, the HTML markup for my Vue components were not the best. I spent an ample amount of time trying to change the layout of the UI using as few markups as possible, such that there is clarity and good structure. A common question I asked myself during this time: Is it really necessary for let’s say a <v-container> to be nested within other Vuetify div components like <v-layout> and <v-flex>, and if I were to remove it, will it have some undesired side effects? Looking back at my old code, sometimes I’m really curious as to what I was thinking back then, like why didn’t I think of a more simple solution at that point of time? Now what I get is just convoluted, messy code. This should be a guiding principle for all aspects of life:
“Simplicity is the best policy”
– Anonymous
Anyways, I made some changes to the looks of the UI and throw in a color:
This is not final of course. Some things I still need to figure out how to tweak. Other terrible things I did was the fact that I hardcoded the path to the project’s image snapshot. I probably would need to create a simple REST API endpoint to get a project snapshot, since it is stored within the project’s file archive.
I guess that is it for this blog. Stay tuned for the next episode.
0 Comments