According to many surveys, javascript is the most popular and used language in the software world. Javascript is ubiquitous, we can use javascript from front end development to machine learning, IOT and blockchain. In this post, I have added a list of topics in javascript/ web development that is important to cover while learning javascript. Feel free add the missed once in the list in the comment section 😀😀 for others to know.

1. Basics
   HTML - https://www.youtube.com/watch?v=kDyJN7qQETA
   CSS - https://www.youtube.com/watch?v=yfoY53QXEnI
   Javascript - https://www.youtube.com/watch?v=PkZNo7MFNFg
   JQuery (Optional)

2. Learn a CSS Preprocessors - This will make css development much simpler with features like variables, mixins, modules and functions.
   ex: sass, less, stylus (sass is the most popular - https://www.youtube.com/watch?v=roywYSEPSvc)

3. Learn to use a CSS Library
   ex - Bootstrap, MatrializeCSS, Foundation, Bulma are the most popular CSS Libraries.
   Bootstrap : https://www.youtube.com/watch?v=5GcQtLDGXy8
   Materialise : https://www.youtube.com/playlist?list=PL4cUxeGkcC9gGrbtvASEZSlFEYBnPkmff

4. Learn to work with a transpiler (new version of javascript contain lots of cool feature, but not every browser supports those features, so you need a transpiler to compile new js into old js)
   ex - typescript, babel

5. Learn a JS Framework
   ex - React/ Angular/ Vue are the most popular.
   Angular - https://www.youtube.com/playlist?list=PLYxzS__5yYQlqCmHqDyW3yo5V79C7eaTe
   React - https://www.youtube.com/playlist?list=PLYxzS__5yYQmD7FV1YYz9UxPyGTNsFObp

6. Learn to use a package manager
   ex - npm or yarn (npm - https://www.youtube.com/watch?v=jHDhaSSKmB0)

7. Learn to use a testing framework
   ex - mocha and chai, jest, jasmine and karma (jest - https://www.youtube.com/watch?v=7r4xVDI2vho)

8. Learn functional style of programming (javascript is a very good language for functional style of programming with native and library support)
   functionaljs - https://www.youtube.com/playlist?list=PL0zVEGEvSaeEd9hlmCXrk5yUyqUag-n84
   ex libraries - rambda.js or lodash (rambda - https://www.youtube.com/playlist?list=PLrhzvIcii6GMeyUfpn-o5xVCH3_UykrzI)

9. Learn to use node.js (node.js is an environment which will allow you to write js for the server site)
   ex - https://www.youtube.com/playlist?list=PL4cUxeGkcC9gcy9lrvMJ75z9maRw4byYp

10. Learn a node.js web framework (express, koa)
    ex - https://www.youtube.com/watch?v=gnsO8-xJ8rs

Optional things (Good to know)

11. Learn to use a module bundler (this will bundle your files into one file which will improve the performance of your site)
    ex - webpack, rollup or parcel. (webpack is the most popular - https://www.youtube.com/watch?v=lziuNMk_8eQ)

12. Learn to use a task runner
    ex - Gulp, Grunt or npm scripts (gulp - https://www.youtube.com/watch?v=1rw9MfIleEg)

13. Use a scalfolding tool or a project generator (this will allow you to create different types of projects and generate boilerplate code)
    ex - yoeman (https://www.youtube.com/playlist?list=PLpP9FLMkNf54AFwvRgYb8KMbKCaqqopsl)

14. Web Assembly (for compute intensive functions)

15. Progressive Web Apps or Hybrid Development (Ionic, Native Scripts, React Native)
    pwa - https://www.youtube.com/playlist?list=PLNYkxOF6rcIAdnzEsWkg0KpMn2WJwMBmN
    ionic - https://www.youtube.com/playlist?list=PLYxzS__5yYQljbuGjaeugpqs9U07gS5P5
    react native - https://www.youtube.com/playlist?list=PLYxzS__5yYQlHANFLwcsSzt3elIbYTG1h

16. Responsive Web Design
    https://www.youtube.com/playlist?list=PL4cUxeGkcC9g9Vh9MAA-XKnfJsWZnPZFw

17. web accessibility
    https://www.udacity.com/course/web-accessibility--ud891

18. Learn to debug js with debuggers such as chrome dev tool.

19. GraphQL
    https://www.youtube.com/playlist?list=PL4cUxeGkcC9iK6Qhn-QLcXCXPQUov1U7f

20. Serverless

21. Asynchronous Programming (promises, async and await),

22. Reactive programming (rxjs)

23. State management (redux)

24. Guess.js (machine learning to improve site performance)

25. Linting -
    ESlint is the best in the business and TSlint for typescript, this is useful when we want to work as a team and want to maintain some coding standard. ESlint supports some style guides to use as a template standard (airbnb/standardjs/google style guide), and also you can add your own rules as well.

I am damn sure most of you might find difficult to pronounce the word specificity, if you don't then congratulation you are someone special. Others don't get disappointed, the concept of specificity is not that hard to understand.

So what is specificity? In CSS, to style a DOM element we can use different CSS declarations, for example in the below image all four CSS declarations can affect the h1 element.

OK, now we know that we can style a DOM element with different CSS declarations, and then comes another question, among these declarations which declaration's styles will be applied to the element (this matters when we try to change the same style property value, in this case, we have color property in all the CSS declarations)?

To answer this question, I would say the declaration with the highest specificity will get the priority and its styles will be applied to the DOM element. Now let's come back to the first question, what is specificity? We can say specificity is the weight of a CSS declaration.

Then some of you might ask can we calculate the specificity for a CSS declaration? Yes, we can, but it's not a real calculation, still, it's enough to find which declaration has more priority (specificity) over other declaration.

Let's go through the specificity calculation technique, When it comes to calculating the specificity of a CSS declaration, we have to consider the four levels of priority.

level 1 (lowest priority) - Element styles (ex - h1, p, etc)
level 2 - Class styles
level 3 - Id styles
level 4 (highest priority) - Inline styles

Let's understand this with another example.

As you can see in the above image, we have three CSS declarations, first one is an id style declaration, the second one is a class style declaration and the final one is an element style declaration. If you take the first example (Hello World), it is an h1 element and it belongs to the spec class, but you could see the styles that got applied are class styles.

In the next example (Hello Home) Id styles got more priority over class and element styles.

OK, this is fine, then the next question comes, is specificity only depend on these levels or is there anything else that can change the specificity of a declaration? For example what if we have two element type CSS declarations?

In such scenario's it will count the number of elements in the declaration and give priority to the declaration with the most number of elements, to understand this concept let's take this example below.

Here we only have element type CSS declarations, and the first declaration has two elements, therefore it has applied the styles in the first declaration.

OK, that's all for the concept, Let's take one final example to understand the calculation,

If you run the above code, you could see the color of the text is blue, but how??? Let's go to the technique.

1. Take these values for different priority levels( Element - 1, Class - 10, Id - 100, Inline - 1000 )

2. Multiply the elements with the corresponding value, and sum those, highest sum will have more specificity and get the highest priority.

Take the above example and understand.

1. body h1.x.y = 1 + 1 + 10 + 10 = 22

2. .x.y.z = 10 + 10 + 10 = 30

3. h1 = 1

I hope now it makes sense why it showed blue color. That's it. I hope you understand what specificity is.

!important rule
Before finishing this article I like to point out another important concept on !important rule. If we use the !important phrase in our CSS style property, then the specificity concept will be invalid and the priority will be given to the declaration which has the !important phrase.

That's it. So from now on, if you want to override a specific style in a existing CSS file, you can use this knowledge and write a CSS declaration with more specificity and get your job done.

Right 😉.

I am damn sure most of you might find difficult to pronounce the word specificity, if you don't then congratulation you are someone special. Others don't get disappointed, the concept of specificity is not that hard to understand.

So what is specificity? In CSS, to style a DOM element we can use different CSS declarations, for example in the below image all four CSS declarations can affect the h1 element.

OK, now we know that we can style a DOM element with different CSS declarations, and then comes another question, among these declarations which declaration's styles will be applied to the element (this matters when we try to change the same style property value, in this case, we have color property in all the CSS declarations)?

To answer this question, I would say the declaration with the highest specificity will get the priority and its styles will be applied to the DOM element. Now let's come back to the first question, what is specificity? We can say specificity is the weight of a CSS declaration.

Then some of you might ask can we calculate the specificity for a CSS declaration? Yes, we can, but it's not a real calculation, still, it's enough to find which declaration has more priority (specificity) over other declaration.

Let's go through the specificity calculation technique, When it comes to calculating the specificity of a CSS declaration, we have to consider the four levels of priority.

level 1 (lowest priority) - Element styles (ex - h1, p, etc)
level 2 - Class styles
level 3 - Id styles
level 4 (highest priority) - Inline styles

Let's understand this with another example.

As you can see in the above image, we have three CSS declarations, first one is an id style declaration, the second one is a class style declaration and the final one is an element style declaration. If you take the first example (Hello World), it is an h1 element and it belongs to the spec class, but you could see the styles that got applied are class styles.

In the next example (Hello Home) Id styles got more priority over class and element styles.

OK, this is fine, then the next question comes, is specificity only depend on these levels or is there anything else that can change the specificity of a declaration? For example what if we have two element type CSS declarations?

In such scenario's it will count the number of elements in the declaration and give priority to the declaration with the most number of elements, to understand this concept let's take this example below.

Here we only have element type CSS declarations, and the first declaration has two elements, therefore it has applied the styles in the first declaration.

OK, that's all for the concept, Let's take one final example to understand the calculation,

If you run the above code, you could see the color of the text is blue, but how??? Let's go to the technique.

1. Take these values for different priority levels( Element - 1, Class - 10, Id - 100, Inline - 1000 )

2. Multiply the elements with the corresponding value, and sum those, highest sum will have more specificity and get the highest priority.

Take the above example and understand.

1. body h1.x.y = 1 + 1 + 10 + 10 = 22

2. .x.y.z = 10 + 10 + 10 = 30

3. h1 = 1

I hope now it makes sense why it showed blue color. That's it. I hope you understand what specificity is.

!important rule
Before finishing this article I like to point out another important concept on !important rule. If we use the !important phrase in our CSS style property, then the specificity concept will be invalid and the priority will be given to the declaration which has the !important phrase.

That's it. So from now on, if you want to override a specific style in a existing CSS file, you can use this knowledge and write a CSS declaration with more specificity and get your job done.

Right 😉.

Sure bro.

According to many surveys, javascript is the most popular and used language in the software world. Javascript is ubiquitous, we can use javascript from front end development to machine learning, IOT and blockchain. In this post, I have added a list of topics in javascript/ web development that is important to cover while learning javascript. Feel free add the missed once in the list in the comment section 😀😀 for others to know.

1. Basics
   HTML - https://www.youtube.com/watch?v=kDyJN7qQETA
   CSS - https://www.youtube.com/watch?v=yfoY53QXEnI
   Javascript - https://www.youtube.com/watch?v=PkZNo7MFNFg
   JQuery (Optional)

2. Learn a CSS Preprocessors - This will make css development much simpler with features like variables, mixins, modules and functions.
   ex: sass, less, stylus (sass is the most popular - https://www.youtube.com/watch?v=roywYSEPSvc)

3. Learn to use a CSS Library
   ex - Bootstrap, MatrializeCSS, Foundation, Bulma are the most popular CSS Libraries.
   Bootstrap : https://www.youtube.com/watch?v=5GcQtLDGXy8
   Materialise : https://www.youtube.com/playlist?list=PL4cUxeGkcC9gGrbtvASEZSlFEYBnPkmff

4. Learn to work with a transpiler (new version of javascript contain lots of cool feature, but not every browser supports those features, so you need a transpiler to compile new js into old js)
   ex - typescript, babel

5. Learn a JS Framework
   ex - React/ Angular/ Vue are the most popular.
   Angular - https://www.youtube.com/playlist?list=PLYxzS__5yYQlqCmHqDyW3yo5V79C7eaTe
   React - https://www.youtube.com/playlist?list=PLYxzS__5yYQmD7FV1YYz9UxPyGTNsFObp

6. Learn to use a package manager
   ex - npm or yarn (npm - https://www.youtube.com/watch?v=jHDhaSSKmB0)

7. Learn to use a testing framework
   ex - mocha and chai, jest, jasmine and karma (jest - https://www.youtube.com/watch?v=7r4xVDI2vho)

8. Learn functional style of programming (javascript is a very good language for functional style of programming with native and library support)
   functionaljs - https://www.youtube.com/playlist?list=PL0zVEGEvSaeEd9hlmCXrk5yUyqUag-n84
   ex libraries - rambda.js or lodash (rambda - https://www.youtube.com/playlist?list=PLrhzvIcii6GMeyUfpn-o5xVCH3_UykrzI)

9. Learn to use node.js (node.js is an environment which will allow you to write js for the server site)
   ex - https://www.youtube.com/playlist?list=PL4cUxeGkcC9gcy9lrvMJ75z9maRw4byYp

10. Learn a node.js web framework (express, koa)
    ex - https://www.youtube.com/watch?v=gnsO8-xJ8rs

Optional things (Good to know)

11. Learn to use a module bundler (this will bundle your files into one file which will improve the performance of your site)
    ex - webpack, rollup or parcel. (webpack is the most popular - https://www.youtube.com/watch?v=lziuNMk_8eQ)

12. Learn to use a task runner
    ex - Gulp, Grunt or npm scripts (gulp - https://www.youtube.com/watch?v=1rw9MfIleEg)

13. Use a scalfolding tool or a project generator (this will allow you to create different types of projects and generate boilerplate code)
    ex - yoeman (https://www.youtube.com/playlist?list=PLpP9FLMkNf54AFwvRgYb8KMbKCaqqopsl)

14. Web Assembly (for compute intensive functions)

15. Progressive Web Apps or Hybrid Development (Ionic, Native Scripts, React Native)
    pwa - https://www.youtube.com/playlist?list=PLNYkxOF6rcIAdnzEsWkg0KpMn2WJwMBmN
    ionic - https://www.youtube.com/playlist?list=PLYxzS__5yYQljbuGjaeugpqs9U07gS5P5
    react native - https://www.youtube.com/playlist?list=PLYxzS__5yYQlHANFLwcsSzt3elIbYTG1h

16. Responsive Web Design
    https://www.youtube.com/playlist?list=PL4cUxeGkcC9g9Vh9MAA-XKnfJsWZnPZFw

17. web accessibility
    https://www.udacity.com/course/web-accessibility--ud891

18. Learn to debug js with debuggers such as chrome dev tool.

19. GraphQL
    https://www.youtube.com/playlist?list=PL4cUxeGkcC9iK6Qhn-QLcXCXPQUov1U7f

20. Serverless

21. Asynchronous Programming (promises, async and await),

22. Reactive programming (rxjs)

23. State management (redux)

24. Guess.js (machine learning to improve site performance)

25. Linting -
    ESlint is the best in the business and TSlint for typescript, this is useful when we want to work as a team and want to maintain some coding standard. ESlint supports some style guides to use as a template standard (airbnb/standardjs/google style guide), and also you can add your own rules as well.