I keep getting asked from a fair amount of people who happen to have a good experience in learning Web Development but got stuck in making tens of UI templates and dummy projects, this is really frustrating, seriously, how could they move to the next level?
This one will be more like a cheat sheet or a checklist than an article.
I assume that it's like if we were talking in a friendly chat, and you'll take my words, write notes, then go search for what these terms actually mean if you don't know some of them.
Let's dive in, we have no time to waste!
1. Know your Programming Language:
This part will be the longest, it could've taken a separate article by itself, but it's good to have it with the other parts.
Mostly, people have mistaken programming languages with their native-spoken languages.
In contrary to problem-solving, in order to use a programming language you don't need common sense, it's a set of rules written by someone to help you communicate with your machine, in our case, we used to use it to communicate with our browser, and nowadays, we use it everywhere.
JavaScript has specs and rules that should be respected, not to go out of it, and expect it to be written the same way as another language.
These are my notes:
1. Types:
Learn how JS is value-typed and know the different types the language offers to access and use memory, store data, not to mention defining your code parts.
2. Scopes & Closures:
How variables and pieces of code you have in a function will communicate with other pieces in the outer scope or another scope.
3. Hoisting:
The language offers solutions to read and execute your code, in a very unique way and order, you should know about that.
4. OOP in JS:
How JS was developed over the years to provide solutions and empower engineers to use well-known programming paradigms.
5. Async JS:
You're a developer that targets to build dynamic, single-page apps, real-time apps, you should gradually learn how to write code that waits for something then does something else.
Cover Callback Functions first, then move to Promises, have fun with async-await solutions, and maybe get to know Generator Functions, blend all of these topics into fetching data with XHR Requests, wait for the data and use it to update your HTML content and make operations on it.
6. Array's Higher-Order Functions:
Instead of making for loops and using conditionals inside of it to target or restructure array elements, why not introduce yourself to "map, find, filter, reduce", these are all handy functions that you won't pass a day as a skilled JS developer without using them.
7. How JS interacts with the browser:
Using global objects like window, document, and how JS accesses HTML elements and subscribes to events and actions happening to it.
8. Object Destructuring and Spread Operator:
Very handy especially when you need to access a part in your data structure or state, or changing it without losing immutability approaches.
2. Git Version Control:
Hopefully, you'll be working in a big company, even if it's a small one, we all aim for using good Code Delivery Systems and well-established ones, you'll handle multiple environments: production, staging, etc.
So, you really need to have confidence in Git branching commands, git checkout, checkout -b, git merge and its different types "what does it mean fast-forward vs no-ff vs squash", you'll need to cherry-pick a feature in order to release it, there's a command for that, you may need to revert something you did, reset another thing, not to mention pushing, pulling and other basic ways to interact with your colleagues to add awesome features to your codebase.
Be bold, don't be shy to ask, seek reviews, and get into experience-sharing conversations.
3. Don't get satisfied with one Framework or Library:
Better than the skill of acing one frontend JS framework, is to have transitioned between two of them, not to get lost or confused, but gaining the experience when you go to the second one and ask it: "I used to do this thing in that way in the previous one, in what way do you offer to do it?", this skill, in my opinion, is by far the most important skill and what separates a person who's shy and can't move from being a junior to a person with high potential to deal with senior level problems, who don't have a problem to hop in with one of his teammates and solve a problem, even if he's working with different technology and/or didn't use this technology before.
4. Don't be stingy with yourself in Backend Topics:
As the consumer of BE produced APIs and the one responsible for showing it to the user, also responsible for collecting data from user and delivering it to BE, you'll need to have some knowledge about how they design the system you're presenting, not in a complicated or a detailed way, of course, just have a fair knowledge about ERD "Relational Diagrams" and how Entities and Models "Ex: In a social network app: Posts, Comments, Users" are talking and related to each other in databases, especially relational database, Learn basic SQL "Structured Query Language", just try CRUD operations "Create a model we mention in a Table, create a record, read from it, updated it, delete it", maybe create another table and apply relations and joins to it "use foreign keys", go search for all of these terms!
5. Get your hands dirty with Module Bundlers:
Webpack, Parcel, and other tools that use node and npm's ecosystem to host your development experience or empower your framework of choice, dig deep into documentation and know how it works, how it tracks your files and deals with them as trees of imported files inside of imported files until you get to your main index.js, knowing how using code-splitting and optimization options can boost your performance, how does a bundler build your code into just a classic set of files needed for your server to respond with just an HTML file, a CSS file, and a JS chunk, just that simple.
6. Have your working tools personalized for you:
Your text editor, your terminal, should help you to be in control of the development process, monitor your Git branches,
Ex: using Gitlens extension in VSCode helps you to know who made which change in the code, and when.
Your terminal can be helpful, not just for writing commands but for knowing about your branch status, what changes did you do, are you ahead or behind, use your text editor before you push to compare changed files and to make changes as less as possible.
I really hope this was helpful, you'll find previous articles I wrote that'll help a lot with the first part of this one, also, if you have any question, please don't hesitate to reach out.
Latest comments (54)
i cannot stress enough the importance of 6th point - personalizing your tools. some stuff i have setup-
created a folder commandline_shortcuts, put it into PATH env variable... all the batch files I put in that folder can be run from any directory. one such script i have made: mdcd.bat inside which i have written
md %1
cd %1
so instead of typing cd test, and md test, i can just type mdcd test and this will create a folder named test and change into it.
there are other such batch files inside.
-autohotkey
it lets you automate keystrokes. (its capable of doing so more too, like running processes and stuff) it doesnt matter who you are and what your job is... autohotkey will be a very valuable skill if you practice.. my project has like 5 testing environments and its hard to switch domains. i have setup autohotkey script to spit out urls that saves me a ton of mental frustration if i were to find it from browser history
-rest client (vs code extension)
this is just awesome.. i recently found out that latest version of postman supports almost all features if not all like setting variables etc.
-a programmable keyboard and an ultrawide monitor
best purchase i have made in 10 years! i bought a 34" ultra wide and k55 keyboard. corsair's software is so powerful i feel like my mind is the thing that is limiting how i use this keyboard for better productivity..
Good article/chat and would like to add one note:
As a backend-first developer, TypeScript has been the lifesaver. It brought me closer to JS than anything else. So yes, choosing one framework (in this case, TypeScript) to learn things before fully diving into the world of JS, is also a useful thing to do.
Regards.
Nice article ! Can't agree more on scoping and hoisting !
I would definitely add: learn dev functionnality of your browser. Writing multi line CSS or JS in browser, save modifications, define breakpoints etc. console.log() and f5 are not the only tools!
I agree with you for the configuration part,
That's why I use tools like npmjs.com/package/@symfony/webpack... that I highly recommend to you.
It's a kind of wrapper around webpack and made it easy to configure
Printed to keep over my desk near PC.
I really like designers world struggling with colors fonts and brief animations, so I will have to balance some of your wise tips :)
dan
Thank you for such a warm comment!
Great article! I learned a lot from this, especially the second and fifth points about version control and module bundlers. Most articles with a topic similar to this article don't mention anything about module bundlers. I think learning how they work and learning how to use concepts like code-splitting is pretty useful.
The version control section also points out some good topics to search like no -ff and checkout -b which I don't know how to use.
That's exactly the purpose of this article, to throw definitions and you get into searching about them, thank you for doing that, Good luck.
As a junior dev, this can serve as a tremendously useful checklist for leveling up. Thank you!
I would recommend to try hqjs.org this smart server and build tool require no configuration, yet support all kind of frameworks and metalanguages. It will boost you in your Frontend career.
Great article, thank you.
This is absolutely what I needed to hear.
Amazing write-up