I Used Vue.js and Vuetify to Create a Patreon Mockup (as an April Fools’ Joke)
Vue.js is an open source JavaScript framework that has been getting really popular since its first stable release in 2015. Lightweight, reactive, and easy to learn, this framework can essentially be thought of as a client-side tool that is naturally easy to host for free on Github pages. On April 1st, inspired by a Tumblr poetry blogger who asked people to donate for every blog post she created, I launched a fake Patreon mockup that I called Faketreon. With all due respect, I think that it is perfectly fine (and respectable) for artists to ask for donations on Patreon — I just found it unrealistic that she was asking for donations on a “per blog” basis.
If I had a dollar for every single Tumblr post I wrote, I would make $2600.
For this webpage I used Vue.js, Github Pages, and a Material Component Framework built on top of Vue called Vuetify. This tutorial was a huge help and a three-minute read, like a kind of quick-reference recipe guide. Github pages is already pretty impressive: Without paying a dime, I have used its free hosting to make a multi-page writing website (using Bootstrap), a silly RESTful app called CorgiPomodoro (using vanilla JavaScript and the open source Dog API), and a pretty outdated site to serve as a personal portfolio. I already knew from past experience that the Bootstrap framework can be used on Github pages, but now I know Vue can be hosted for free as well.
The limitation, as you may have guessed, is that I do believe there is any possible way to make custom server-side code work with Github pages.
Note: This post was not written as a tutorial, but rather as a quick taste of what a person can do with Vue and Vuetify
My (Brief) Background with Vue
I had been asking to do web development professionally for a while, but my company site did not have a whole lot in that area. During a lunch walk, I overheard our tech lead and an experienced developer having a conversation about Vue.js.
Wanting to impress them, but having only watched a 15-minute Academind video on Vue, I said, “Oh, I hear Vue is what you get when Angular and React have sex?”
The experienced developer looked at me, shrugged, and said “Yeah, that’s pretty accurate.”
I was in.
There are a million things you can do with Vue, and unfortunately this project only scratched the surface of the areas in which Vue really shines. As I wrote earlier, Vue is reactive: Changes/updates to a page will be reflected instantly. If you use the Vuex Store, which is not shown here, individual changes to a component’s state will instantly appear.
What this small project does demonstrate is the ease of use with both Vue.js and Vuetify. What you see above is contained in a single file called Faketreon.vue, which is separated into parts that contain standard HTML, JavaScript, and CSS (on a larger project, these would be broken into multiple files). An explanation of file layout can be found here, within the official Vue documentation.
The above is the result of the Vuetify grid system, which uses the Vuetify tags v-container, v-row, and v-col.
A Little More About Vuetify
Just look at those buttons. Aren’t those button icons gorgeous? It feels almost as if those buttons could jump out of the screen and say, “I care about you as a user, and I want to express that I love you so much more than Font Awesome icons ever could.”
In all seriousness, what Vuetify really brings to the table is Material Design. I always found the definition of Material Design (“Material Design is a visual language that synthesizes the classic principles of good design with the innovation of technology and science”) vague and confusing, but a picture is worth a thousand words. If you use Vuetify components in your website, then you are effectively using Material Design components. Material Design components look a certain way, and many users find the way they look appealing. Material Design was also developed by Google, so it has a certain brand recognition to it.
What I really love about Vuetify is the documentation. Effectively, if you want to use something, all you have to do is reach into the documentation source code and steal it. Want that little plus icon button? Steal it. Want to make it black? Steal it and modify the color value. This is not theft, this is the intended use case for an open source library with a good documentation source.
One of my past teams had (I hope they still have him, and he has not been stolen by another team) an excellent designer who, great as he was, did not think it would be a good idea to ask him to do any sort of coding work. If you want to get a non-coding designer into coding, though, this sort of transition seems perfect to me: Teach some HTML, transition to JavaScript, and take it from there.
Before I keep gushing about how great Vuetify is, though, I wanted to note that it does have some limitations
Vuetify, as well as Vue itself, are fairly new. Naturally, both of them are going to have certain missing features.
That being said, I think they highlight the benefits of open source really well. If there is anything a user does not like, he/she can simply open an issue or even implement a feature. Suddenly, the community accepts that person.
That person can be a professional software engineer, a hobbyist, a student, or even a dog. It does not matter. That person is a valued member of the open source ecosystem.
How this Project Could Have Been Better
What this project really was supposed to be was an experience learning more about UI/UX by mocking up a professional website. What I had originally envisioned was something that completely resembled Patreon without the server side.
What I had envisioned was something that so closely resembled Patreon that I would need a legal disclaimer at the bottom stating that this was just a joke, and not some sort of scam. The way it looks now, though, I think there is about a 0% chance anyone would look at it and think it was anything other than a joke.
Ultimately, though, that is what it was supposed to be…so I consider it a success in that regard.
Shortcomings:
- I do not know why, but I could not get v-layout to work without erroring out. This prevented me from having the “donate” buttons open an actual form, which is another place where Vue.js shines. You can validate text as the user types it in and red underline it if it is invalid. That is so cool
- This is just a single page, but there was no need for a lot of rigorous logic. It was essentially HTML wrapped in Vuetify
- Only after putting it up did someone point out the giant white space at the top. I am keeping it up for now because I honestly think it was kind of funny…how did I not catch that?!
- Obviously there are some other design improvements that could have been made, but April 1 was a sort of faux deadline
Why Vue.js is Exciting
Top comment: “Omg who is the director of the documentary? The quality is amaaazing!”
“I was thinking the same!! Who is he?! Whoever made this film is an undeniable creative genius! Probably popular and handsome too!”
— The director“Oh yes he is”
— Evan You, creator of Vue.js
The simple answer to “Why is Vue.js exciting?” is that it is easy to use. If you want, you can just end the conversation there.
A person could also elaborate and say that, by being easy to use and quickly deploy somewhere like Github pages, Vue.js is an excellent teaching tool for people who want to get into web development, or into programming as general. As a very new web developer (I am cringing a bit even calling myself a web developer, but I would at least say I can comfortably call myself a general developer), this is the angle I had want to take with this post. I frequently hear people ask me how to get started in programming, either as a hobby or as a career. It really depends on what it is you want to do (frontend? Backend? Full stack? Middleware? Gaming?), and I do not know how many times I have seen young, excited students try to become software engineers before quickly dropping out when they encounter the early frustrations of programming. You can keep trying to get them excited by starting them with C, like my college had, or Java and basic algorithms, like my high school had, but why not show something like this on the side?
Vue.js has a story a lot of people like: An open source story. Simply put, it’s the story of one young engineer who wanted to create a neat tool, so he did. It got lots of users. It got so many users that he quit his job and decided to work on it full-time.
React was invented by Facebook. Angular was invented by Google. Though the latter was originally a side project, these two “fly the flags” of their respective companies in the sense that these huge FAANG companies maintain them. The Vue team is smaller, but it is still able to compete with the giants.
In theory, any person who wants to build something can just go ahead and build it. In theory, any person who wants to help build something can find an open source project and contribute. This, as some have pointed out, is a great solution to the giant hiring debate. Instead of deciding to hire someone based on whether or not he/she can invert a binary tree, which some say is arbitrary, or spending a week actually working alongside the team, which is expensive, why not just hire someone who has already contributed? If that person has already created lots of useful features, what additional testing has to be done?
This is actually how Evan You originally got his job at Google. They sought out him because of an open source project he had worked on.
Closing Thoughts
This is Vue.js. Vue.js is one framework of many. Vue represents just one part of what may be your stack, giving you free reign to explore many interesting options for the server side.
And there are a million places you could take your learning from there. Programming is alive. You can attempt to get closer to the client with frontend work, or further away with backend or middleware work, or you can do something completely different from Vue and dedicate your life to a fundamentally new, game-changing library for network programming. Or maybe you decide you still love technology, but want to move away from coding. Technical writer. Test engineer. Product manager. The possibilities in the tech field are endless.
