Should learn React or Elixir

GERMAN When the word "Framework" causes panic - A method to learn step by step

Photo by Annie Spratt on Unsplash

The Internet, and especially the World Wide Web, is a vast landscape. InternetLiveStats says there are around 1,700,000,000 (one billion, 700 million) websites. That is a lot. In comparison, there are just under 1,024,470 (1 million) npm packets. While that's only a fraction of what websites are out there, it's still a very, very large amount.

Looking through this mass of packages, frameworks and design concepts is extremely overwhelming at the beginning and can cause a lot of frustration at a certain point.

That was also the case for me. The result was that I stayed with basic HTML, CSS and Javascript at most. The upper limit was jQuery and Bootstrap. Words like React, Redux, Vue, SCSS or Express were the horror for me.

You think to yourself: "I'll do it now!", Opens the documentation and only understands the train station. Googled for tutorials, put on a "Hello World" and still no longer understood.

But I managed to break out of this vicious circle and today I want to tell you how!

The learning method

Everyone learns differently. Some with a book, others with YouTube videos, examples or documentation. I can do anything with anything, but none of it really made me 100% satisfied. But it was seldom the material. More often how I dealt with it.

I learned this handling with FreeCodeCamp. #notSponsored

FreeCodeCamp is a non-profit offering free online web development courses. They use a mix between a practical and a theoretical approach that builds on itself.

Let's say I want to learn Javascript. So I start the course and first get told what Javascript is. But then it goes to the exercises very quickly. On the left side of the screen a concept is explained to me and on the right side there is a code editor. So you read the left side, with the concept and code examples. In the end there is a small task to turn this example into reality. For example, you get an explanation of what a variable is, what the syntax looks like and what you can do with it. After reading it, you should initialize a variable yourself in the connected editor, assign it or change it.

In this way you take the abstract concept directly in your hand, implement it and you can immediately understand whether you understood it or not. The second exercise is about loops. There you have to bring in your knowledge of the variables, but also apply the new knowledge of the loops.

What does that lead to now?

  1. You don't sit in front of a bunch of code examples where you have to understand several concepts and quirks at the same time.
  2. A transfer payment already takes place through the direct application of this. You have to deal directly with what a loop is and don't just skip it.
  3. If you have gone through this process 2-3, you get a good assessment of how to divide yourself into subtasks and concepts.

And with that we can go back to the top. Documentation and books. You can use the same method there too, you just don't get it chewed so nicely. Books and most documentation also go through section by section and concept by concept. But instead of just reading them stubbornly or jumping into code examples that are too large, we can write a short summary in the meantime. Nothing big, nothing wild. It is not meant to be a textbook. But the clue is: We don't just copy & paste the examples, we write our own. Be it that we simply change the variable names.

For example, it would be in the book. Building on this, we transfer it to a cheat sheet as

Basically, it says the same thing. But since we are concerned about whether it really makes sense now, we think about, and at the same time. After all, we want meaningful examples and not just stand for themselves.

The last step

Build things! The last exercises on a topic in the FreeCodeCamp always consist of building things independently. It doesn't have to be big or extraordinary. Maybe it makes sense to implement something whose algorithms and data stream you have already understood. So you can fully concentrate on the framework.

All in all

  1. Break down frameworks and languages ‚Äč‚Äčinto small pieces
  2. Go through one at a time.
  3. Write down even the most mundane code examples with your own thoughts
  4. Put your learned skills directly into practice

Thank you for reading, if you want to keep chatting about it, hit me on Mastodon, Twitter or via email!