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.
Top comments (54)
Great article!
I really think my next frontend project is gonna be better than all my past ones!
That's awesome, good luck with that!
Thanks man!
very helpful thank you.
You are welcome, glad to hear that.
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!
Great :D
Thanks!
Thank your for liking the post and reading it to the end it means a lot to me.
SQL is really vital and mind-opener for Developers to have a sense of how the data is stored there and related to each other, and not to get satisfied with json objects and API that are back to them.
Getting to know Module bundlers and read their documentations is similar to that, and a real eye-opener too, we as developers we don't stop with knowing that something is hosting our framework whether vue-cli or create-react-app, or template engines, or any way of making FE projects, and we don't try to know how it works, even just a shallow knowledge about that really helps completing the big picture.
And for the difficulty thing, always try to visit the topic multiple times, you will be amazed how every time will be easer than the last one.
Good luck, and have a good day!
I think this is what I just need to be doing
Because I always get Stucked
Great article, thank you.
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.
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
Thank you dear Abdelrhman,
It is useful, but Front end skills on its own it huge and takes a lot of time to be master in Vanilla js, Css and HTML. so next we move to concepts and the best practices. next tools. next frameworks and ...
With all this effort I think there is not much time left for us to learn SQL, wordpress and these stuff.
Also technology is moving forward rapidly and in my learning period JS 2020 and bootstrap 5 was released and you should also put some time for these essential new versions.
not to mention some employers ask us to have some knowledge in graphic side of the development like Photoshop, sketch and...
And if you want to done projects in between that gets overwhelmed, at least for me.
I'll be glad to hear your opinions and advice on it and how we can solve this problem in shortest time
First of all, thank you for your comment, FE is a huge topic for sure but I'm here addressing that layer of Software Engineers that are working on the FE web side and create Dynamic Web Apps, the ones that transfer data and come with login and signup, Apps like Facebook, Twitter, etc.
I didn't mention WordPress and I don't use it personally, I believe it's for projects that marketers and designers want quick deliverables for clients with control of content and some builtin functionality, so actually it's not in our stack.
Bootstrap too is not mandatory itself, CSS is, you need to know how Bootstrap works and what it offers like grid system and stuff like that, but not to save its class names by heart.
I don't either believe that Developers that focus on functionality and making Dynamic Apps should know the design aspect, just how to use photoshop, and know colors and how to get measures, in some companies, styling the Web App is a different job and another person's responsibility other than the FE Engineer, they may be called UI Engineers.
So you can decide and focus on what part you actually like and you're good at, and having an idea of how everything else works is a great advantage.
Thank you so much dear Abdelrhman,
Yeah I'm also not into learning all these stuff, but If I want to work on freelance route I have to learn WP, and you can achieve bootstrap effects just with pure CSS and Js and for sure there's no need for a front end developer to know about Sketch or Photoshop becuz that's UI designer's task.
But the problem is that employers demand it, and if we look at some frontend job listings, almost all of them listed bootstrap and some mentioned Photoshop/sketch
The other day I had a customer in freelancing market and he didn't have a design but wanted design and code altogether. So I told him it's two different tasks and areas done with two different people and he replied that every other developer in the industry that he had talked with would do the design task too!
Not surprisingly, I couldn't get the job :D
I mean that although you and I have same meaning for someone as a front end developer, the market demands more of us and that takes huge time and making it harder to move forward.
"Hoisting: The language offers solutions to read and execute your code, in a very unique way and order" - There's nothing unique about it. Almost every programming language parses the code and initializes the declarations first.
"map, find, filter, reduce ... you won't pass a day as a skilled JS developer without using them." - Using them the wrong way is worse than not them.
front-end, back-end... these are all just meaningless separations. A true programmer knows how to program.