@ -41,8 +41,6 @@ Its time to get into the real business now. Open [Github](https://github.com) an
Link this repo and tell them you are learning and ask for feedback on your PR and how you can improve.
Link this repo and tell them you are learning and ask for feedback on your PR and how you can improve.
## Step 4 – Learn about Package Managers
## Step 4 – Learn about Package Managers
NPM and Yarn both are almost same in usage; you can learn one of them and you automatically learn the other.
NPM and Yarn both are almost same in usage; you can learn one of them and you automatically learn the other.
@ -52,8 +50,6 @@ NPM and Yarn both are almost same in usage; you can learn one of them and you au
- [ ] Understand Semantic Versioning
- [ ] Understand Semantic Versioning
- [ ] **Task** Install some external library using yarn or npm into the webpages that you made previously
- [ ] **Task** Install some external library using yarn or npm into the webpages that you made previously
## Step 5 – Learn CSS Preprocessors
## Step 5 – Learn CSS Preprocessors
Preprocessors enrich CSS with the functionality that it isn’t capable of by default. There are different many options Sass, Less, Stylus etc. If I were to pick one, I would go for Sass. However, PostCSS has been gaining a lot of traction lately, it is a nice-to-have and is sort of “Babel” for CSS. You can use it stand-alone or on top of Sass also. I would recommend you to learn Sass for now and revisit PostCSS later when you have time.
Preprocessors enrich CSS with the functionality that it isn’t capable of by default. There are different many options Sass, Less, Stylus etc. If I were to pick one, I would go for Sass. However, PostCSS has been gaining a lot of traction lately, it is a nice-to-have and is sort of “Babel” for CSS. You can use it stand-alone or on top of Sass also. I would recommend you to learn Sass for now and revisit PostCSS later when you have time.
@ -64,8 +60,6 @@ Preprocessors enrich CSS with the functionality that it isn’t capable of by de
- [ ] **PostCSS (do this later)**
- [ ] **PostCSS (do this later)**
- [ ] Stylus
- [ ] Stylus
## Step 6 – Learn the Build tools
## Step 6 – Learn the Build tools
These are the tools that help you in bundling, building and development of your frontend applications
These are the tools that help you in bundling, building and development of your frontend applications
@ -88,8 +82,6 @@ There are several linters, but I would go for ESLint. Feel free to have a look a
- [ ] Rollup
- [ ] Rollup
- [ ] Parcel
- [ ] Parcel
## Step 7 – Create something – Maybe a library
## Step 7 – Create something – Maybe a library
Go to Github and Have a look at the source code of libraries that people have made, pick an idea and make some library with the below listed requirements
Go to Github and Have a look at the source code of libraries that people have made, pick an idea and make some library with the below listed requirements
@ -99,8 +91,6 @@ Go to Github and Have a look at the source code of libraries that people have ma
- [ ] It should be a UMD library
- [ ] It should be a UMD library
- [ ] It should be using Babel to allow usage in older browsers
- [ ] It should be using Babel to allow usage in older browsers
## Step 8 – Learn any Framework
## Step 8 – Learn any Framework
There are several options, when it comes to frameworks. However, below listed frameworks are the ones that I would recommend. You can pick any of them, however if you ask me for the personal picks I would choose React or Angular. However, have a look at any of them and see what you like
There are several options, when it comes to frameworks. However, below listed frameworks are the ones that I would recommend. You can pick any of them, however if you ask me for the personal picks I would choose React or Angular. However, have a look at any of them and see what you like
@ -114,20 +104,14 @@ There are several options, when it comes to frameworks. However, below listed fr
- [ ] Vue.js
- [ ] Vue.js
- [ ] Vuex - Similar to redux but for Vue
- [ ] Vuex - Similar to redux but for Vue
## Step 9 – Practical Time
## Step 9 – Practical Time
Now you know *everything* that one might need to build a modern JavaScript application. Go ahead and make some application with whatever framework you picked. You can find some of the ideas in the `ideas` directory in the repository; pick anything and start!
Now you know *everything* that one might need to build a modern JavaScript application. Go ahead and make some application with whatever framework you picked. You can find some of the ideas in the `ideas` directory in the repository; pick anything and start!
## Step 10 – Learn about Performance
## Step 10 – Learn about Performance
Once you are done making the application from Step 9, read about how to **measure and improve performance**. For example look at **Interactivity Time**, **Page Speed Index**, and **Lighthouse Score** etc.
Once you are done making the application from Step 9, read about how to **measure and improve performance**. For example look at **Interactivity Time**, **Page Speed Index**, and **Lighthouse Score** etc.
## Step 11 – Testing your Apps
## Step 11 – Testing your Apps
There are lots and lots of different tools for different purposes. I mostly find myself using a combination of Jest, Mocha, Karma and Enzyme. However, before you jump and pick any, it would be better if you **first understand the different testing types**, look at all the options available and use the ones most suitable for your needs.
There are lots and lots of different tools for different purposes. I mostly find myself using a combination of Jest, Mocha, Karma and Enzyme. However, before you jump and pick any, it would be better if you **first understand the different testing types**, look at all the options available and use the ones most suitable for your needs.
@ -140,8 +124,6 @@ Here is a really nice summary to get you started – [An Overview of JavaScript
- [ ] **Karma**
- [ ] **Karma**
- [ ] **Enzyme**
- [ ] **Enzyme**
## Step 12 – Static Type Checkers
## Step 12 – Static Type Checkers
Static type checkers help you to add type checking to JavaScript. You don’t need to learn these but they really give you superpowers and can be learnt in a few hours and then you can keep . There is mainly TypeScript and Flow. I love TypeScript and would pick it but feel free to check both and pick one of your liking.
Static type checkers help you to add type checking to JavaScript. You don’t need to learn these but they really give you superpowers and can be learnt in a few hours and then you can keep . There is mainly TypeScript and Flow. I love TypeScript and would pick it but feel free to check both and pick one of your liking.
@ -149,8 +131,6 @@ Static type checkers help you to add type checking to JavaScript. You don’t ne
- [ ] **TypeScript (Recommended)**
- [ ] **TypeScript (Recommended)**
- [ ] Flow
- [ ] Flow
## Step 13 – Learn any CSS Framework
## Step 13 – Learn any CSS Framework
This used to be way up in the chart, but I moved it down below as they aren't really needed any more and can be mastered without much effort. If you would want to pick any, there is one under every rock. The ones that I liked the most among the ones that I tried are Bootstrap, Materialize and Bulma. But if you look at their demand in market I would pick Bootstrap if I was starting today.
This used to be way up in the chart, but I moved it down below as they aren't really needed any more and can be mastered without much effort. If you would want to pick any, there is one under every rock. The ones that I liked the most among the ones that I tried are Bootstrap, Materialize and Bulma. But if you look at their demand in market I would pick Bootstrap if I was starting today.
@ -159,8 +139,6 @@ This used to be way up in the chart, but I moved it down below as they aren't re
- [ ] Materialize CSS
- [ ] Materialize CSS
- [ ] Bulma
- [ ] Bulma
## Step 14 – Learn how to organize CSS
## Step 14 – Learn how to organize CSS
As your applications grow, CSS start to become messy and unmaintainable. There are multiple ways to structure your CSS better for scalability
As your applications grow, CSS start to become messy and unmaintainable. There are multiple ways to structure your CSS better for scalability
@ -171,8 +149,6 @@ As your applications grow, CSS start to become messy and unmaintainable. There a
- [ ] SUITCSS
- [ ] SUITCSS
- [ ] Atomic
- [ ] Atomic
## Step 15 – Learn about Server Side Rendering
## Step 15 – Learn about Server Side Rendering
There are different options, depending on what framework you are using
There are different options, depending on what framework you are using
@ -185,14 +161,10 @@ There are different options, depending on what framework you are using
- [ ] Vue.js
- [ ] Vue.js
- [ ] Nuxt.js
- [ ] Nuxt.js
## Step 16 – Progressive Webapps
## Step 16 – Progressive Webapps
Learn about Service Workers and how to make Progressive Webapps
Learn about Service Workers and how to make Progressive Webapps
## Journey Never Ends
## Journey Never Ends
And the journey doesn't end here. There is still a lot of stuff you can learn about, you just have to keep a healthy appetite for learning and not settling.
And the journey doesn't end here. There is still a lot of stuff you can learn about, you just have to keep a healthy appetite for learning and not settling.
Kamran Ahmed
7 years ago