Learn Vue.JS With Me — Starting Off the Challenge

Enrico Gruner
Nov 20, 2020 · 4 min read

I always wanted to try out Vue. Now is the time!

Photo by Danka & Peter on Unsplash

I will try to create seven apps in 100 days using Vue.JS and write about it on Medium and Twitter. I dare you to take on the #100daysofcode challenge with me.

The challenge

  1. A simple todo app
  2. Voice recording app, to take notes
  3. A budgeting app to track spendings
  4. A running app
  5. A chess game
  6. A reverse recipe search — enter ingredients and find what you can cook with it
  7. A Pinterest clone

For the bigger projects, I aim to have a day for planning, 2 or 3 days for the actual implementation, and maybe a day for polishing.

I will not go into detail about the projects in this article. The reason is that I would like you to take on this challenge, too. You might come up with different ideas than I did. I do not want to influence you early on.

If you try to make the same projects, you can compare your results with mine, and I would also be delighted to see your outcomes. So don’t hesitate to share your projects with me on Twitter @devcreationsDE.

How to learn a new programming language, framework, or library?

These goals are not chosen randomly. To find good objectives, I am applying a simple method, which adheres to something that I call the CAB-Principle. This approach is considering three important things in learning: Consolidate, Amplify, Build (up). First, you choose something you don’t know anything about. Second, you choose something that you know, but you are lacking. Third, you choose something you already know very well.

The CAB learning strategy.

Here is a more detailed example:

  1. You want to learn Vue.JS
  2. You want to extend your knowledge in PWA
  3. You already know TypeScript very well

So you will create a Vue.JS app, which will be a PWA, and built using TypeScript.

Now you set your goals like this: You are most comfortable with TypeScript (3), but you might still lack something. E.g., Your goal might be not using any for your entire project. The motivation is to consolidate the things you already know but still getting out of your comfort zone. For the second point, you will set out more detailed goals. You can set detailed goals because you already know something about this technology. For instance, how does caching work? How to use native functionality like the camera? How can PWA help to boost performance? Try to go more in-depth here and take your time. Setting out detailed goals for the skill you want to build-up is virtually impossible. So this can be very vague, but you should still try it. Hint: Do not ask for differences between Vue.JS and React. Find them for yourself and then google them and see if you had the same impression. Instead, set out your goals like this: How does Vue.JS manage data-binding? How to create a good state management solution in Vue.JS? How to write Components in Vue.JS?

The questions you can ask are depending on your knowledge. If you have never used Angular, React, or Vue.JS before, then you might not be able to come up with the questions like I did. For the last point that you do not know anything about, you can also be much vaguer. Your questions could be: What is Vue? What can I do with Vue? How do I start using Vue?

Because there is also a small chance of you not knowing anything about JavaScript, you might ask how you would use this technique. Here’s another example:

  1. You want to learn JavaScript
    - What is JavaScript?
    - What can I do with JavaScript?
    - Where to start learning JavaScript?
  2. You want to extend your knowledge of the internet
    - What does HTTP mean?
    - What is a Server? What is a Client?
    - How does the Internet work?
  3. You know something about your Computer
    - Which program should I use on my operating system to write JavaScript?
    - How to use the terminal?
    - What are the most important terminal commands?

Hint: Try to have different kinds of questions (e.g., don't always use what).

Try to apply this technique for your next learning goal and tell me what you think about it.

Without further ado, let us jump into day one!

Thank you for joining in.

Go to the next article: Learn Vue.JS with me — Day 1: A simple Todo App in Vue.JS

The Startup

Get smarter at building your thing. Join The Startup’s +800K followers.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store