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 ...
For further actions, you may consider blocking this person and/or reporting abuse
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.
Your post it's one of the most valuable things (at work value level) I have read in the last months, keep up the good
Your words mean the world to me! Thank you!
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.
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..
This is absolutely what I needed to hear.
Amazing write-up
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!
I do appreciate bro
Great article. Thanks a lot
Great
Thank you, glad you liked it.
Thank u for give information
You're welcome, glad you liked it.
You just covered all the needed information thanks!
You're welcome!!
Wow nice information thanks
You're welcome.
This was a Great article. Thanks for the guide.
You're welcome.
Really helpful for my FE career. Thanks for the inspiration!
You're welcome, happy it helped!
Thank you!!
Awesome guide, mate! cheers!
Thank you, so happy you liked it!
Really amazing stuff. Thanks for sharing.
You're welcome, thanks for reading
Hey guys, i love designing and i'm expert somehow but i can't understand frontend at all. I tried a lot :(
Front end (Well, JavaScript) has a whole lot of additional tooling / frameworks / lingo that you have to deal with: Babel, TypeScript, Webpack, ES20XX, AMD vs ESM, Vue / React / Angular / Ember / whateverJS... the list goes on and on and on and it's all... so... exhausting...
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.
Nicely written, appreciate the thoughts sounds like what I need to hear in many ways. I think I would start with learning more on bundlers.
Oh my! This is a great article! Thank you so much!
You're welcome, glad you liked it!
This is a good article. You should do a similar one for backend devs, not to take anything away from this, it’s fantastic.
Thank you, I'm glad you liked it, will do my research and try to make a follow-up soon.
As a junior dev, this can serve as a tremendously useful checklist for leveling up. Thank you!
Thanks man, very good article.