I keep getting a lot of inquiries from people who happen to have a lot of experience in learning Web development but are stuck developing UI templates and projects, which is really frustrating. More seriously, how do they get to the next level?
This article is more like a cheat sheet or checklist, which I think is similar to what we would do in a friendly conversation, where you would say my words, write down notes, and then search for the actual meaning of certain terms without knowing them.
Know your programming language
This section will be the longest, and it could have been written as a separate article, but is best used in conjunction with other sections.
Often, people confuse the programming language with their native language. Instead of solving a problem, use a programming language that doesn’t require common sense. It’s a set of rules written by someone to help you communicate with your computer. In the developer scenario, we used to use it to communicate with computer browsers, and today we use it everywhere.
JavaScript has conventions and rules to follow; don’t overdo it and expect it to be written the same way as another language.
Type 1.
Learn why JavaScript is a value typing language and lacks static type checking. See how TypeScript, Flow, and others address static type checking.
2. Scopes and closures
Learn the scope of variables and functions and how they communicate and interact.
3. OOP in JS
Learn how to implement object-oriented programming paradigms in JavaScript.
4. Asynchronous invocation in JS
Asynchronous calls are an important concept in JavaScript. First you’ll start with callback math, then you’ll learn Promise, and finally you’ll love the async/await syntax. You will also learn about Generator concepts and integrate this knowledge to understand sending requests through XHR, retrieving server data, parsing data and updating it to HTML pages.
5. Higher-order functions of arrays
You need to learn not only how to traverse arrays, but also how map, find, filter, and reduce functions can improve your programming skills.
6. Learn how JS interacts with browsers
Understand the built-in features of the browser, such as global variables such as Window and Document, and the storage capabilities such as cookies, localstorage, and indexDB, to understand the compatibility of different browsers.
7. Object deconstruction operations
A large number of object manipulation methods are available in ES6, with the DeStructure and Spread operations providing quick access to object properties.
Git code version management
In both large and small organizations, you need to use a code version management tool, and Git is the most widely used one. Git clone, Git merge, Git cherry-pick, Git Revert, etc. You need to understand how to manage branch management, such as Git flow. This allows for efficient management of different branches for multi-party collaboration, releases, hotfixes, and so on.
Don’t settle for a single framework and code base
A better trick than using one front-end JavaScript framework is to transition between multiple front-end frameworks, while gaining experience when you go to the second JS framework and ask it: “I was in the last method, which way would you provide this method?” .
In my opinion, this skill is by far the most important skill, and this skill of mobility helps you not be tied to a particular framework, and helps you move quickly to different front-end domains. Even if he uses a different technique or has not used it before, he can work with his teammates to solve the problem.
Don’t run away from technical problems on the back end
As a front end engineer, you’re often exposed to the API on the back end, which is a black box underneath. If you want to become an experienced engineer, you need to go further and understand the back-end domain models, such as the design of user, commodity, transaction models, and the corresponding database design behind them.
At the same time, you also need to be able to skillfully use SQL, database operations, find data and so on. Understanding the implementation details of the back end will also help in the design and implementation of the BFF layer in the future, how to integrate data models, crop fields, split and merge interfaces, and so on.
Understand how packaging tools work
Webpack, Parcel, and other tools that use Node and NPM ecosystems to host your development experience or empower your choice of frameworks, dig deep into documents and see how they work, how to track files and process them as internal import file trees, import files until main index.js is generated, Learn how to improve performance with code splitting and optimization options, and understand the implementation of the packaging tool and the corresponding plug-in system.
Customize your development tools
Your text editor, Terminal, should help you control your development process and monitor Git branches, for example: using the Gitlens extension in VS Code helps you understand who made what changes in your Code and when.
Your Terminal is useful not only for writing commands, but also for understanding branch states, what changes you have made, and what changes have taken place before and after your changes. Please use the editor to check for code changes before submitting your code to keep it as concise as possible.
I hope these suggestions can help you. If there is any supplement, please feel free to contact us.
Original text: dev. To/gurutobe/ke…
By Abdelrhman Yousry
