Learn Vue.JS: Starting-off the challenge
By: Enrico Gruner
Tags: JavaScript, Vuejs, Javascript Tutorial, Javascript Challenge, Typescript

The challenge

Since I am already proficient with JavaScript and TypeScript, I will be using a TypeScript setup to build all of them. Furthermore, I will publish the codebases on GitHub.

A simple todo app Voice recording app, to take notes A budgeting app to track spendings A running app A chess game A reverse recipe search — enter ingredients and find what you can cook with it 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?

Whenever I am learning a new language or library, I will set out some goals. This technique can even make something like a todo app fun and challenging. I know that some people start by reading the documentation right away. This is also a valid thing to do. However, I find this approach one-sided. Instead, I use my former experience working with React and Angular to set goals I would like to achieve.

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:

You want to learn Vue.JS You want to extend your knowledge in PWA 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:

You want to learn JavaScript

- What is JavaScript?

- What can I do with JavaScript?

- Where to start learning JavaScript? 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? 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.