Vue Speed Run — Second Entry

A little chunk of projects done

After all the set-up work from last weekend, I was able to sit down on Saturday and start getting some work done on projects. I was sadly not able to get as much done as I had hoped due to an unexpected visitor on Sunday, but I’m still pretty happy.

I made the decision to use a Vue.js Material Design framework, and after looking at a few it came down to Vuetify vs. Vue Material. I settled on Vuetify, and I’m not sure yet whether that was an entirely good thing. It was a great help in some ways, but a great hindrance in others.

Tribute Page

This was certainly the easiest thing I did. I was just hoping to get familiar with Vuetify and how to set up the layout of the components. I made an extremely simple little tribute to Twin Peaks. I could have spent more time on it, but I just wanted to get some practice before I got into the more complicated projects.

Random Quote Generator

Again, I just did a very simple implementation of this project. This is where I really started running into some issues with Vuetify. It might be just me, but I was finding the documentation to be not that clear when it came to setting up the layout of the page using the included elements. The consequence is that I was having a very difficult time figuring out how to get the main content of the page situated where I wanted it. This was by far the hardest part of this project for me.

As far as the JavaScript stuff and actually getting the quote, that was the easy part of this. I used an async function for the first time, and it turned out to be not a big deal at all. When I read about them at first, I thought it was going to be super confusing, but in practice it really does make it very clear what you’re doing when you read the code. All in all, this part took me considerably less time than the styling.

Local Weather

Just like the quote project, I had a tough time with the layout. Vuetify makes it very easy to add things like buttons and such, but the layout thing was really throwing me off. I tried fiddling around with the offsets that Vuetify provides to help organize the page, but it was slow going.

Also like the quote project, the functions to do the actual work of getting the weather were not difficult. Again, async functions came to the rescue! The major question here was which weather API to use, and whether to use navigator.geolocation or find another API to get the location. I eventually found a weather API created for FCC to help people with this project and used that, just because it seemed nice and simple. I also settled on just using the built in geolocation.

It looks OK, and it works as it’s supposed to, but I need to add in some kind of error message for when geolocation is blocked. Currently, it just silently fails when the browser can’t get the location.

Wikipedia Viewer

Same story as the previous projects: the API stuff was easy, actually rendering it was difficult. The challenge here was figuring out how to get the results to show with Vue and Vuetify. I was really hoping to be able to set a watcher to display search results as things were typed into the box, but I had to settle on a search button that called the function. I was able to get a watcher set up that erased the list when the search bar is empty, so that was a consolation prize.

Pomodoro Clock

This is marked as one of the advanced front-end projects, but this was actually one of the easiest of the weekend. The layout was super basic, and the JavaScript parts were straightforward. Since the last time I did this project, I’ve spent some time learning Java and getting a little deeper into object-oriented programming. That learning was a huge help to my understanding of applying OO principles to JavaScript. This feels like the first time I’ve really used the class mechanic in JS correctly.

For this project, I made a Timer class that had all the functionality you’d expect from a timer: start, stop, reset, etc. I imported that class into my Vue component and created two instances of that class: one for the work timer and one for the break timer. I then made Vue methods to interact with the class to create the Pomodoro clock. In retrospect, I probably should have just made a Pomodoro class with all of the functionality included, and then let the Vue component interact with that, but the way I did it worked out pretty well.

Twitch.tv

This was the nightmare of the weekend. I had no issue with the project the last time I did it, but for some reason it did not work well for me this time. Getting the data was no issue; I was able to render on the screen all of the information about each streamer. However, when I tried to filter by online status, it showed everyone as offline (even those who were definitely online!). My hypothesis was that somehow the component was trying to access the data before it existed and showing null for the v-if condition in the table. I tried multiple different ways for getting the data, even going back to the return new Promise strategy I used last time.

This was at least two hours of frustration. I even had to put it away for the night and come back to it on Sunday morning. As it turns out, fresh eyes make a big difference. The syntax for the if statement in Vue, as I mentioned above, is v-if. Obviously, v:if is not going to work, and that is how I had it written for the entire time. This is a lesson I’ve learned before, but apparently I needed to learn it again: when debugging, check everything, even the simple things! After this, it was all great. Except the layout and style of the site, which is garbage for now.

Final Thoughts

I’m pretty happy with this weekend, but I actually was hoping for more. I was planning on finishing the whole front-end section during the weekend. However, I need to remember the context: the last time I did a speed-run of the FCC content, I completed 4 projects in 4 weeks. This time I did 5 projects over the weekend. Feels like progress to me!

Things to improve:

• The style of this site is terrible. I’ve just been focusing on getting the basic look down and making it functional. I need to come back later and make it look nicer.
• My CSS and HTML is a bit of a mess still. I love writing the JavaScript sections, but HTML/CSS is something I don’t enjoy. I may take a trip back to look at Shay Howe’s courses again to refresh myself.
• The choice to use a Material Design framework may have been a mistake. It has made certain things easier, but it’s been a pain figuring out this framework on top of Vue, which I already don’t know that well. For the next projects, I may just make sparing use of Vuetify (or ignore it entirely). I should probably learn Vue a little better first. I like the way Material Design looks, but I don’t want to cheat myself by not learning Vue well first.
• I need to find another quote API! The FCC one I found isn’t working anymore, so it looks like the site doesn’t work. It really does! It’s just that the link to the quotes isn’t allowing access.

This coming week, I’ll probably bang out the remaining front-end projects and then try to get a start on the full-stack stuff. That will kill two birds with one stone, as the next step in my path is finishing the FCC back-end projects.

The code can be found in this repository.

And a live version of the site is running here.