March 30, 2018 at 14:18How to become a front-end developer in 2018
- Transfer
Kamran Ahmed , the author of the material, which we publish today’s translation, says that he has been engaged in full-stack development for 5 years and currently works as a senior engineer at tajawal. There he has to do many things. He, on duty, must be aware of what is happening in the world of web development, in addition, one of his tasks is to maintain the knowledge and skills of other developers in good condition. According to him, overseeing the development of technology is not only his job, but also a hobby. He had to see the difficulties faced by novice programmers (and experienced ones too) when it comes to the rapid development of innovations. Last year, Kamran often had to answer questions about what to navigate in order to remain a modern and sought-after programmer. As a result, he, in order to help himself and others, decided to prepare schemeslinks to which would answer most of the questions that he is usually asked.
Initially, these schemes were a bit of a list of recommendations on tools, but recently, Kamran decided to put them in order: to structure, add details, and arrange them as a step-by-step action plan, which would give everyone an opportunity to understand what and in what order you need to do in order to become a modern and sought-after web programmer. Work on backend development schemes and DevOps is still ongoing, but a step-by-step action plan for front-end developers is already ready. Kamran will talk about him in this article.
Before I talk about the various parts of the action plan proposed here, I would like to make a reservation. The purpose of this plan is to give you a general idea of what is happening in the modern world of front-end development, and talk about the procedure for mastering technology in case you need it. The purpose of my scheme is not to urge you to study something that is currently experiencing a peak of popularity, perhaps not for long. You need to develop an understanding of why, in some cases, a particular tool is preferable to all others, and remember that if they say something at literally every corner, this is not necessarily the best way to solve a problem.
Now let's get down to business. Actually, here is a development plan for the front-end developer, which I spoke about above.
Development plan for the front-end developer
Now we will talk about this scheme, consider the main steps that a programmer who wants to develop a front-end in modern conditions needs to take. The first thing such a programmer should learn is the basics of HTML, CSS, and JavaScript.
HTML is what structured web pages. It is a kind of human skeleton that forms the base of our body. The first step that should be taken to anyone who wants to become a front-end programmer is to study the HTML syntax and its capabilities. During study, special attention should be paid to the following:
Once you have mastered the basics of HTML, create at least 5 HTML pages. I would recommend choosing any website - for example, a profile page on GitHub, or a Twitter login page, and recreate it, paying particular attention to the structure of the page elements. What happens will not be so beautiful, but you should not worry about it yet. The most important thing now is structure.
Now, after you have learned the rules for creating page skeletons, it's time to skin these skeletons and decorate them. CSS technology, or cascading style sheets, is used to make pages look appealing. Here's what you should pay attention to when familiarizing yourself with CSS:
Once you have mastered the basics of CSS, do the styling of your previously created pages. For example, if you wrote HTML code that recreates the structure of a profile page on GitHub, use CSS to make your development look exactly like a real profile page. Stylize all five pages created in the previous step.
JavaScript is a technology that makes HTML pages interactive. For example, using JavaScript, they create all those sliders, pop-ups, and notifications that you see on websites. JS makes it possible to reload portions of pages without having to reload the entire page. At this step, you need to master the basics of JavaScript and get ready for the fun part. When studying JS, pay attention to the following:
At this stage in the development of web technologies, you should already feel that you know something and begin to feel the taste of the modern frontend. In addition, here you can congratulate yourself, since HTML, CSS and JavaScript are very important, this is the base on which everything else is built, and you have mastered this base and are ready to move on.
In the old days, the word "jQuery" was on everyone’s lips, and this state of affairs had good reasons. This is a powerful library that is based on JavaScript and allows you to solve many problems without worrying about the features of various browsers. All these features were taken into account when developing the library. But now the days of jQuery's wild popularity have passed, this library is not so actively used for new projects, however, some still use it. Learning jQuery is not necessary, but mastering this library is not difficult, and by doing this you will acquire skills that may well be useful to you.
I often said this and will say it again: you cannot learn anything without practice. Without practice, you may think that you know something that you understood something, but such sensations do not last long, “understanding” and “knowledge” quickly disappear without practice. Try, in the course of mastering everything that we are talking about here, practice as much as possible.
For example, you can create a responsive website and equip it with interactive features using JavaScript. Say, copy any page you like and try to use all that you’ve already learned.
After you practice enough, it's time to do real things. Check out github.com, find a suitable open source project and try to make a feasible contribution to it by creating several pull requests. Here are some ideas for contributing to open source:
Having done something useful and sending a request to include changes in the project, add a link to this repository there, let us know that you are studying, ask for feedback on your work and recommendations on how to make it better.
Although I recommend novice developers to try their hand at GitHub, all this requires, in addition to knowledge of web technologies, the ability to work with git. In addition, this step is optional, although if you decide to perform it, you will understand that it will bring you a lot of useful things, and yet you will be surprised at how many people are ready to help you if you ask them about it. There are many git tutorials, for example, you can take a look at this one .
After you master everything that was discussed above, you have every right to celebrate it. If you responsibly approached the study of HTML, CSS and JavaScript, you can already find some kind of work for yourself, maybe it will be freelance, and maybe it will be a real job. However, if you want professional growth, you should not stop there. Ahead is a great and interesting way.
Up to this point, if you used any external libraries, for example, plugins or widgets, you had to download JS and CSS files yourself and add them to the project. When a new version was released for what you used, again, on your own, you had to download this new version. This is a rather boring and tedious task. Package managers can save you this. They help to include external libraries and plugins in projects, making it so that the developer does not have to worry about manually copying the necessary files into the project and monitoring the release of their new versions. In particular, we are talking about package managers yarn and npm. Both of them, in general, are practically the same thing, the differences between them are not so great, and you can study any of them,
Now that you have mastered the basics of working with package managers, connect some external libraries to the pages that you developed when you mastered HTML, CSS, and JavaScript. For example, it may be some kind of plug-in for pop-up notifications when a button is clicked. You can use the library to check the data entered in the form. Experiment with the settings, figure out how to install different versions of libraries. While doing this, read about semantic versioning .
Preprocessors extend the possibilities of CSS, giving the styles functionality that is not available with their standard use. There are many preprocessors: Sass, Less, Stylus, PostCSS, and others. If I had to choose one of them, I would stop at Sass. However, recently the PostCSS preprocessor looks very interesting, the ability to handle it will definitely not hurt you, it's something like Babel for CSS. It can be used standalone or on top of Sass. At this stage of your training, I would recommend mastering Sass, and later, when you have time, deal with PostCSS.
In principle, you don’t need to learn CSS frameworks, however, if you decide to master one of them, know that there are a lot of them. From what I tried, I liked Bootstrap, Materialize and Bulma the most. If you choose a framework taking into account its market demand, pay attention to Bootstrap. I would definitely choose it if I were now thinking about mastering the CSS framework.
As your web application grows, so does the volume of CSS; the style descriptions become messy and hard to manage. There are many ways to structure your CSS based on scaling needs. Here it can be noted OOCSS, SMACSS, SUITCSS, Atomic, BEM. You should get an idea of them, understand the differences between them. I would have chosen BEM in a similar situation, for a deeper study .
Tools for building projects help during the development of JS-applications, in particular, allowing you to pack application resources into packages. This category includes linters, tools for completing tasks, and tools for creating packages.
In the area of tasks, there are many options, including npm scripts, gulp, grunt, and others. But nowadays, when most of the tasks that were usually solved with gulp can be solved with Webpack, in this category, perhaps, you should pay attention only to npm scripts, using them to automate tasks that Webpack cannot perform. You don't have to learn gulp, however, if you find the time, take a look at it — it may be useful in your project.
In the field of linter, again, there are many options: ESLint, JSLint, JSHint, JSCS. However, ESLint is the most popular now, so you can very well stay on it.
In the issue of tools for creating packages, one can observe the same situation. There are Parcel, Webpack, Rollup, Browserify, and so on. If you want to choose one, you can stop by Webpack without any hesitation. Rollup is also very common, but it is recommended to use it mainly for libraries. If we are talking about web applications - then you need Webpack. Therefore, master Webpack, and later, if you want, deal with Rollup.
After you master everything that was discussed above, you will have another reason for the holiday. In fact, you have now become a modern JS developer by about 75%. Remember that practice is very important, so create some kind of project using everything that you have already learned. Maybe - it will be a kind of library in which the capabilities of Sass and JavaScript will be applied. When finished, use Webpack to convert Sass to CSS, use babel to transpile ES6 code. And when everything is ready, publish your development on GitHub and put it in npm.
In the old version of the scheme that we are considering, the step of choosing a framework immediately followed the development of the basics, but now I placed it after Sass, tools for building projects and package managers, since you will use all this when working with frameworks.
Regarding the choice of framework, several options can be noted, however, the most common are React, Vue, and Angular. And nowadays the market demand for React.js is growing and growing. However, you can choose any of the listed frameworks. I would, for example, choose React or Angular. It is worth noting that, as a beginner developer, Angular may seem easier in comparison with React, possibly because Angular supports almost everything you need to work, as they say, out of the box. This is a powerful router with support for lazy loading, an HTTP client that supports interceptors, tools for dependency injection, encapsulation of CSS components, and so on. Using Angular, you will be relieved of worries about selection of external libraries. However, React is more popular, A wonderful community has formed around him, Facebook is actively engaged in its development. Here I want to note that choosing a framework based only on its “popularity” is not worth it. The best thing is to evaluate alternative options, compare them, “try on” them to the needs of your project and make a choice.
Here I will not talk about how I worked with Angular and React, I will not compare them. Perhaps this is a topic for a separate article. However, since we are talking about technology development, we will consider learning curves for Angular and React.
The learning curves presented below are based on the fact that the developer is already familiar with TypeScript and RxJS. The description of the features of these curves is worthy of independent material, here I only note that they look just like that thanks to the standardization and features that are present in Angular by default. This does not mean that React is in any way bad. Each of these frameworks has its own field of application. So, these are the curves.
Learning Curves for React and Angular
After choosing a framework for development, you have to choose one more thing. For example, if your choice fell on React, you may need to study Redux or Mobx for the purpose of managing the state of the application. What exactly to choose depends on the size of the application on which you will work. Mobx is suitable for small to medium sized applications. Redux is better suited for large projects. In addition, it is possible that you may not need either Redux or Mobx, and your application will be able to do without the standard state management tools that are present in React.
If you chose Angular, you will need to learn TypeScript. You can develop Angular projects without TypeScript, but, nevertheless, it is recommended to use this language. In addition, you will need to master RxJS - this will be very useful for you when developing Angular applications. This is a truly powerful library that is also suitable for functional programming.
If you choose Vue.js, then you may need to learn Vuex. This library is very similar to Redux, but designed for Vue.
It should be understood that Redux, Mobx and Rx.js are not tied to the corresponding frameworks. These libraries can also be used in applications written in pure JavaScript. And, if you chose Angular - pay attention to the fact that it should be Angular 2+, and not Angular 1+.
Now you know almost everything that may be needed to develop modern web applications. Do not forget about the practice, create something based on the chosen framework. If you need ideas - look for folders in the GitHub repositories
After you do what you decide to do, read the materials on measuring and improving performance. For example, pay attention to things like Interactivity Time, Page Speed Index, Lighthouse Score, and so on.
Having mastered everything that we have talked about so far, deal with service workers and how to create progressive web applications.
In the field of testing, there are many tools focused on various goals. I mainly use a combination of Jest, Mocha, Karma and Enzyme. However, before you choose your library for testing, it will be useful to understand the various types of tests, analyze the available tools and choose the ones that are best for you. Here is some good material on advanced JS testing tools.
Static type checking tools help control data types in JavaScript applications. It cannot be said that it is necessary to study them, but they can certainly be of great benefit, and they can be mastered, brought to the level of practical use, literally in a few hours. I basically mean TypeScript and Flow. Personally, I prefer TypeScript, but I advise you to try both, and then decide what you like best.
If you studied everything that we talked about, your knowledge will be enough to get the position of front-end developer. However, this is not a reason to stop.
Explore server-side rendering in your chosen framework. How exactly this will look depends on the framework. For example, in the field of React, special attention should be paid to Next.js and After.js . In the case of Angular, this is Universal . If we are talking about the Vue, it's - Nuxt.js .
I can’t pretend to say that absolutely everything is provided for in the scheme presented here. However, it contains everything that anyone who claims to be a front-end developer needs. The main thing - do not forget that the success of your training is based on practice. More practice is better. At first, the amount of information that needs to be mastered may frighten, it may seem to you that you don’t understand something, don’t grasp the essence, but this is normal, and over time you will notice that you are getting better and better in the business you are mastering.
Dear readers! If you work in the field of front-end development, we ask you to talk about how you learned what you can and how to maintain your knowledge and skills up to date.
Initially, these schemes were a bit of a list of recommendations on tools, but recently, Kamran decided to put them in order: to structure, add details, and arrange them as a step-by-step action plan, which would give everyone an opportunity to understand what and in what order you need to do in order to become a modern and sought-after web programmer. Work on backend development schemes and DevOps is still ongoing, but a step-by-step action plan for front-end developers is already ready. Kamran will talk about him in this article.
Overview
Before I talk about the various parts of the action plan proposed here, I would like to make a reservation. The purpose of this plan is to give you a general idea of what is happening in the modern world of front-end development, and talk about the procedure for mastering technology in case you need it. The purpose of my scheme is not to urge you to study something that is currently experiencing a peak of popularity, perhaps not for long. You need to develop an understanding of why, in some cases, a particular tool is preferable to all others, and remember that if they say something at literally every corner, this is not necessarily the best way to solve a problem.
Now let's get down to business. Actually, here is a development plan for the front-end developer, which I spoke about above.
Development plan for the front-end developer
Now we will talk about this scheme, consider the main steps that a programmer who wants to develop a front-end in modern conditions needs to take. The first thing such a programmer should learn is the basics of HTML, CSS, and JavaScript.
Learning the basics of HTML
HTML is what structured web pages. It is a kind of human skeleton that forms the base of our body. The first step that should be taken to anyone who wants to become a front-end programmer is to study the HTML syntax and its capabilities. During study, special attention should be paid to the following:
- HTML basics and rules for writing HTML code.
- Ways to split pages into parts and properly structure the DOM.
▍Job
Once you have mastered the basics of HTML, create at least 5 HTML pages. I would recommend choosing any website - for example, a profile page on GitHub, or a Twitter login page, and recreate it, paying particular attention to the structure of the page elements. What happens will not be so beautiful, but you should not worry about it yet. The most important thing now is structure.
Learning CSS Basics
Now, after you have learned the rules for creating page skeletons, it's time to skin these skeletons and decorate them. CSS technology, or cascading style sheets, is used to make pages look appealing. Here's what you should pay attention to when familiarizing yourself with CSS:
- CSS syntax and properties.
- Block model, development of layouts using Grid and Flexbox technologies.
- Responsive website development using media queries.
▍Job
Once you have mastered the basics of CSS, do the styling of your previously created pages. For example, if you wrote HTML code that recreates the structure of a profile page on GitHub, use CSS to make your development look exactly like a real profile page. Stylize all five pages created in the previous step.
Learning JavaScript Basics
JavaScript is a technology that makes HTML pages interactive. For example, using JavaScript, they create all those sliders, pop-ups, and notifications that you see on websites. JS makes it possible to reload portions of pages without having to reload the entire page. At this step, you need to master the basics of JavaScript and get ready for the fun part. When studying JS, pay attention to the following:
- Learn the syntax and basic language constructs.
- Master the methods of working with the DOM using JS tools, that is, for example, figure out how to add elements to the page and remove them from it, how to work with element classes, how to apply CSS styles.
- After mastering the basics, deal with more advanced things, such as scopes, short circuits, raising functions, surfacing events, and so on.
- Understand how to make HTTP requests from JS code using XHR or Ajax technology. It is Ajax that allows you to perform any actions that usually require reloading the pages without reloading them entirely.
- Next - take the time to explore the new features of the language, what has appeared in ES6 +. ES6 is a version of JavaScript that has many interesting updates, such as classes, various ways of declaring variables. There appeared new methods of arrays, means for concatenating strings, and so on. Most of the ES6 material you come across will use Babel in explaining the new features of the language. Babel is a transpiler; it converts, relatively speaking, the “new” JavaScript code into the “old” one. This is necessary in order for the new code to work in older browsers. For now, however, ignore Babel. Your task is to understand the basics of JS and learn how to use this language in modern browsers. Below we will talk more about ES6.
At this stage in the development of web technologies, you should already feel that you know something and begin to feel the taste of the modern frontend. In addition, here you can congratulate yourself, since HTML, CSS and JavaScript are very important, this is the base on which everything else is built, and you have mastered this base and are ready to move on.
Is it worth learning jQuery?
In the old days, the word "jQuery" was on everyone’s lips, and this state of affairs had good reasons. This is a powerful library that is based on JavaScript and allows you to solve many problems without worrying about the features of various browsers. All these features were taken into account when developing the library. But now the days of jQuery's wild popularity have passed, this library is not so actively used for new projects, however, some still use it. Learning jQuery is not necessary, but mastering this library is not difficult, and by doing this you will acquire skills that may well be useful to you.
Practice
I often said this and will say it again: you cannot learn anything without practice. Without practice, you may think that you know something that you understood something, but such sensations do not last long, “understanding” and “knowledge” quickly disappear without practice. Try, in the course of mastering everything that we are talking about here, practice as much as possible.
For example, you can create a responsive website and equip it with interactive features using JavaScript. Say, copy any page you like and try to use all that you’ve already learned.
After you practice enough, it's time to do real things. Check out github.com, find a suitable open source project and try to make a feasible contribution to it by creating several pull requests. Here are some ideas for contributing to open source:
- Improve the interface, design, add some interactivity page.
- Take a look at the lists of errors and problems, and think about whether you can help with their correction and solution.
- Find code that can be improved and refactor it.
Having done something useful and sending a request to include changes in the project, add a link to this repository there, let us know that you are studying, ask for feedback on your work and recommendations on how to make it better.
Although I recommend novice developers to try their hand at GitHub, all this requires, in addition to knowledge of web technologies, the ability to work with git. In addition, this step is optional, although if you decide to perform it, you will understand that it will bring you a lot of useful things, and yet you will be surprised at how many people are ready to help you if you ask them about it. There are many git tutorials, for example, you can take a look at this one .
After you master everything that was discussed above, you have every right to celebrate it. If you responsibly approached the study of HTML, CSS and JavaScript, you can already find some kind of work for yourself, maybe it will be freelance, and maybe it will be a real job. However, if you want professional growth, you should not stop there. Ahead is a great and interesting way.
Package managers
Up to this point, if you used any external libraries, for example, plugins or widgets, you had to download JS and CSS files yourself and add them to the project. When a new version was released for what you used, again, on your own, you had to download this new version. This is a rather boring and tedious task. Package managers can save you this. They help to include external libraries and plugins in projects, making it so that the developer does not have to worry about manually copying the necessary files into the project and monitoring the release of their new versions. In particular, we are talking about package managers yarn and npm. Both of them, in general, are practically the same thing, the differences between them are not so great, and you can study any of them,
Practice
Now that you have mastered the basics of working with package managers, connect some external libraries to the pages that you developed when you mastered HTML, CSS, and JavaScript. For example, it may be some kind of plug-in for pop-up notifications when a button is clicked. You can use the library to check the data entered in the form. Experiment with the settings, figure out how to install different versions of libraries. While doing this, read about semantic versioning .
CSS preprocessors
Preprocessors extend the possibilities of CSS, giving the styles functionality that is not available with their standard use. There are many preprocessors: Sass, Less, Stylus, PostCSS, and others. If I had to choose one of them, I would stop at Sass. However, recently the PostCSS preprocessor looks very interesting, the ability to handle it will definitely not hurt you, it's something like Babel for CSS. It can be used standalone or on top of Sass. At this stage of your training, I would recommend mastering Sass, and later, when you have time, deal with PostCSS.
CSS frameworks
In principle, you don’t need to learn CSS frameworks, however, if you decide to master one of them, know that there are a lot of them. From what I tried, I liked Bootstrap, Materialize and Bulma the most. If you choose a framework taking into account its market demand, pay attention to Bootstrap. I would definitely choose it if I were now thinking about mastering the CSS framework.
CSS organization
As your web application grows, so does the volume of CSS; the style descriptions become messy and hard to manage. There are many ways to structure your CSS based on scaling needs. Here it can be noted OOCSS, SMACSS, SUITCSS, Atomic, BEM. You should get an idea of them, understand the differences between them. I would have chosen BEM in a similar situation, for a deeper study .
Tools for building projects
Tools for building projects help during the development of JS-applications, in particular, allowing you to pack application resources into packages. This category includes linters, tools for completing tasks, and tools for creating packages.
In the area of tasks, there are many options, including npm scripts, gulp, grunt, and others. But nowadays, when most of the tasks that were usually solved with gulp can be solved with Webpack, in this category, perhaps, you should pay attention only to npm scripts, using them to automate tasks that Webpack cannot perform. You don't have to learn gulp, however, if you find the time, take a look at it — it may be useful in your project.
In the field of linter, again, there are many options: ESLint, JSLint, JSHint, JSCS. However, ESLint is the most popular now, so you can very well stay on it.
In the issue of tools for creating packages, one can observe the same situation. There are Parcel, Webpack, Rollup, Browserify, and so on. If you want to choose one, you can stop by Webpack without any hesitation. Rollup is also very common, but it is recommended to use it mainly for libraries. If we are talking about web applications - then you need Webpack. Therefore, master Webpack, and later, if you want, deal with Rollup.
Practice
After you master everything that was discussed above, you will have another reason for the holiday. In fact, you have now become a modern JS developer by about 75%. Remember that practice is very important, so create some kind of project using everything that you have already learned. Maybe - it will be a kind of library in which the capabilities of Sass and JavaScript will be applied. When finished, use Webpack to convert Sass to CSS, use babel to transpile ES6 code. And when everything is ready, publish your development on GitHub and put it in npm.
Framework selection
In the old version of the scheme that we are considering, the step of choosing a framework immediately followed the development of the basics, but now I placed it after Sass, tools for building projects and package managers, since you will use all this when working with frameworks.
Regarding the choice of framework, several options can be noted, however, the most common are React, Vue, and Angular. And nowadays the market demand for React.js is growing and growing. However, you can choose any of the listed frameworks. I would, for example, choose React or Angular. It is worth noting that, as a beginner developer, Angular may seem easier in comparison with React, possibly because Angular supports almost everything you need to work, as they say, out of the box. This is a powerful router with support for lazy loading, an HTTP client that supports interceptors, tools for dependency injection, encapsulation of CSS components, and so on. Using Angular, you will be relieved of worries about selection of external libraries. However, React is more popular, A wonderful community has formed around him, Facebook is actively engaged in its development. Here I want to note that choosing a framework based only on its “popularity” is not worth it. The best thing is to evaluate alternative options, compare them, “try on” them to the needs of your project and make a choice.
Here I will not talk about how I worked with Angular and React, I will not compare them. Perhaps this is a topic for a separate article. However, since we are talking about technology development, we will consider learning curves for Angular and React.
The learning curves presented below are based on the fact that the developer is already familiar with TypeScript and RxJS. The description of the features of these curves is worthy of independent material, here I only note that they look just like that thanks to the standardization and features that are present in Angular by default. This does not mean that React is in any way bad. Each of these frameworks has its own field of application. So, these are the curves.
Learning Curves for React and Angular
After choosing a framework for development, you have to choose one more thing. For example, if your choice fell on React, you may need to study Redux or Mobx for the purpose of managing the state of the application. What exactly to choose depends on the size of the application on which you will work. Mobx is suitable for small to medium sized applications. Redux is better suited for large projects. In addition, it is possible that you may not need either Redux or Mobx, and your application will be able to do without the standard state management tools that are present in React.
If you chose Angular, you will need to learn TypeScript. You can develop Angular projects without TypeScript, but, nevertheless, it is recommended to use this language. In addition, you will need to master RxJS - this will be very useful for you when developing Angular applications. This is a truly powerful library that is also suitable for functional programming.
If you choose Vue.js, then you may need to learn Vuex. This library is very similar to Redux, but designed for Vue.
It should be understood that Redux, Mobx and Rx.js are not tied to the corresponding frameworks. These libraries can also be used in applications written in pure JavaScript. And, if you chose Angular - pay attention to the fact that it should be Angular 2+, and not Angular 1+.
Practice
Now you know almost everything that may be needed to develop modern web applications. Do not forget about the practice, create something based on the chosen framework. If you need ideas - look for folders in the GitHub repositories
ideasthat interest you , select what you like and get started. After you do what you decide to do, read the materials on measuring and improving performance. For example, pay attention to things like Interactivity Time, Page Speed Index, Lighthouse Score, and so on.
Progressive Web Applications
Having mastered everything that we have talked about so far, deal with service workers and how to create progressive web applications.
Application testing
In the field of testing, there are many tools focused on various goals. I mainly use a combination of Jest, Mocha, Karma and Enzyme. However, before you choose your library for testing, it will be useful to understand the various types of tests, analyze the available tools and choose the ones that are best for you. Here is some good material on advanced JS testing tools.
Static Type Check
Static type checking tools help control data types in JavaScript applications. It cannot be said that it is necessary to study them, but they can certainly be of great benefit, and they can be mastered, brought to the level of practical use, literally in a few hours. I basically mean TypeScript and Flow. Personally, I prefer TypeScript, but I advise you to try both, and then decide what you like best.
Server rendering
If you studied everything that we talked about, your knowledge will be enough to get the position of front-end developer. However, this is not a reason to stop.
Explore server-side rendering in your chosen framework. How exactly this will look depends on the framework. For example, in the field of React, special attention should be paid to Next.js and After.js . In the case of Angular, this is Universal . If we are talking about the Vue, it's - Nuxt.js .
Summary
I can’t pretend to say that absolutely everything is provided for in the scheme presented here. However, it contains everything that anyone who claims to be a front-end developer needs. The main thing - do not forget that the success of your training is based on practice. More practice is better. At first, the amount of information that needs to be mastered may frighten, it may seem to you that you don’t understand something, don’t grasp the essence, but this is normal, and over time you will notice that you are getting better and better in the business you are mastering.
Dear readers! If you work in the field of front-end development, we ask you to talk about how you learned what you can and how to maintain your knowledge and skills up to date.