{ Michael Gale } | Web Developer - Melbourne, Victoria

Lousy Smarch Weather

a new world Vue (sorry)

It’s been a whole month since my last post… and I’m okay with that! I’ve had a mental shift, and I’m now moving toward blogging for fun and less to meet some kind of predefined goal. That makes it much easier to get in here and start typing, without feeling the guilt of missing posts.

With that in mind, I’ve set a tiny-timer for 20 minutes and I’m just going to jot down some thoughts to get them off my mind!

Vue Mastery’s free weekend

I love arriving late to a party! As a new-comer, I’m afforded the gift of picking up at the best part; when all the kinks and major hurdles have already been worked out by the community (and to the Vue and React communities I’d like to offer a sincere thank you!)

In February, I enrolled in VueMastery.com’s free weekend, which let users try every course for free for 48 hours. Vue is a modern JavaScript framework for building reactive user interfaces, and is a close “competitor” to React and Angular. Whilst I have played around with Angular and React front-ends previously - I had never touched Vue before. Still, I was able to smash through Intro to Vue.js and Real World Vue.js, without struggling with many concepts, due to the similarity with React JS and the basic fundamentals which I’ve already picked up elsewhere.

Screen shot of the Vue Mastery dashboard The Vue Mastery course dashboard, shows your various levels of completion.

One thing I like about Vue, is the stupidly simple setup process using the Vue CLI in conjunction with the vue ui command, and the delightful proposition of being able to “sprinkle” it into an existing project to get a bit more reactivity happening quickly. It’s quick to start, has a strong sense of familiarity and seems like it would be of benefit to a lot of legacy projects to bring them in line with modern UI’s without major restructuring.

Moving onto Mastering Vuex, the state management system, I found this to be kinda complicated and unlike most things I’ve worked on. Vuex is (I think) an equivalent to Redux, however for me it seems more accessible to figure out, because of its similar syntax to Vue itself.

I am intrigued enough to want to learn more, despite not seeing an immediate use for Vuex in my current workflow / projects / work.

I guess a tool like Vuex would be more valuable on a large app to hoist “state” up high, so everything can have access it. I think some of this stuff, I would have to look up how to do again.

I got a lot out of the course, including a decent grasp of some fundamental principles I’ve been wanting to figure out for a while. Namely, a deeper understanding of the usefulness of basinf presentation on a state object, setting up and posting to custom api’s.

An interesting note on API’s… a great suggestion from the course was to install and use json-server (available on NPM). This way you can simply write some mock data to a file, and then run json-server db.json to instantly set up a localhost server that emulates a navigable API. Super valuable tool!

But why did I start learning Vue when I’ve already got a handle on reactivity, and don’t find it all that useful in my day-to-day? Well funny you should ask…

Side-project: fedmow

Several weeks ago, we brought home a rescue kitten. Her name is Mow-mow and she’s our entire world (obviously)

A sleepy kitty Our cat, Mow-mow

After bringing her home, I had this idea for a small side-project which I’m tentatively calling “fedmow” - a web application that allows my partner and I to keep track of who fed our kitten, what time and what sized portion.

I’d like to actually complete this side-project and have something to show off at the end. So I’ve adopted a workflow that is keeping me slowly and steadily adding to the project when I have time. I started by defining what I want to achieve and why. This keeps me grounded and gives me something to refer back to if I find myself straying too far of course.

I’m basing my tech-stack off the needs of the project. And I’ll be clear, I don’t need Vue to achieve what I’m trying to get to. It’s total overkill. I’ve chosen Vue for the project due to the timing of getting some free education on state-based UI, and the ease of set-up I mentioned earlier.

I had already written the markup, so I just moved that into the Home.vue file. I then mocked up some data and some routes and v-for looped through it. This took no time at all. After that, I moved my mock data to a db.json just as I had done in the Vue Mastery demo project. Next I downloaded the Insomnia REST client, and used it to emulate a POST to the API, and it worked! If given a starting ID of somekind, the JSON API will iterate and keep generating a new ID. Perfect. I spent a few hours fiddling with a form and I’m now at a point where I can post from the form straight to the view, with the updated data.

Again - I know the full Vue framework is overkill for this job, but I really like how easy it has been to build this way, and how I can maintain and build this out from here. I’m at the stage where I’m testing deploys - and I’m excited to figure out how I can rework my mock API into a real one, and to see how easy and pain-free (or messy and annoying) that becomes. Either way, it’s all learning! 👨‍🎓

Cool stuff at work

This positive attitude from the weekend prior was a great way to start a new work week. I started thinking about how I might be able to refactor different projects to work more effectively by moving state around. I rewrote some PHP functions to return more useful data - and got my projects finished quicker - ultimately feeling like I’m contributing more to the team.

There’s something to be said for identifying a point of weakness and not giving up until you can say you’re at least semi-confident that you would know how to adapt and work it out.

There’s an upcoming project at work that I’m excited to be working on, which I wouldn’t have had the confidence to say yes to, had it not been for the rolling-on effect of learning something new for myself on the weekend.

TL;DR: - everything is okay.

V for Vuexdetta (sorry again)