DEV Community

Cover image for Keys for You to Become a Better Frontend Web Developer

Keys for You to Become a Better Frontend Web Developer

Abdelrhman Yousry on June 25, 2020

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 ...
Collapse
 
mr_zekel profile image
Andreas Szekely

Great article!
I really think my next frontend project is gonna be better than all my past ones!

Collapse
 
gurutobe profile image
Abdelrhman Yousry

That's awesome, good luck with that!

Collapse
 
mr_zekel profile image
Andreas Szekely

Thanks man!

Collapse
 
matta profile image
mohamed atta

very helpful thank you.

Collapse
 
gurutobe profile image
Abdelrhman Yousry

You are welcome, glad to hear that.

Collapse
 
etienneburdet profile image
Etienne Burdet • Edited

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!

Collapse
 
hikmatcnn profile image
hkmt hikayat

Great :D

Collapse
 
gurutobe profile image
Abdelrhman Yousry

Thanks!

Collapse
 
gurutobe profile image
Abdelrhman Yousry • Edited

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!

Collapse
 
happyboi93 profile image
happyboi93

I think this is what I just need to be doing
Because I always get Stucked

Collapse
 
prafulla-codes profile image
Prafulla Raichurkar

Great article, thank you.

Collapse
 
napoleon039 profile image
Nihar Raote

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.

Collapse
 
gurutobe profile image
Abdelrhman Yousry

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.

Collapse
 
aurelmegn profile image
Aurel

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

Collapse
 
kasra6 profile image
kasra6

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

Collapse
 
gurutobe profile image
Abdelrhman Yousry • Edited

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.

Collapse
 
kasra6 profile image
kasra6

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.

Collapse
 
e4emre profile image
Emre

"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.

Collapse
 
_robertovaldez profile image
Roberto Valdez

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

Collapse
 
gurutobe profile image
Abdelrhman Yousry

Your words mean the world to me! Thank you!

Collapse
 
fwd079 profile image
Fawad

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.

Collapse
 
ajinspiro profile image
Arun Kumar

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..

Collapse
 
temi0x profile image
Temiloluwa

This is absolutely what I needed to hear.

Amazing write-up

Collapse
 
danielebarell profile image
Daniele Barell

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

Collapse
 
gurutobe profile image
Abdelrhman Yousry

Thank you for such a warm comment!

Collapse
 
musamasaba98 profile image
Musamasaba98

I do appreciate bro

Collapse
 
jreegene profile image
Jeremiah

Great article. Thanks a lot

Collapse
 
saurabh37414118 profile image
Saurabh Kumar

Great

Collapse
 
gurutobe profile image
Abdelrhman Yousry

Thank you, glad you liked it.

Collapse
 
chandanpadhiwebdevloper profile image
Chandan Kumar Padhi

Thank u for give information

Collapse
 
gurutobe profile image
Abdelrhman Yousry

You're welcome, glad you liked it.

Collapse
 
bahachammakhi profile image
Baha chammakhi

You just covered all the needed information thanks!

Collapse
 
gurutobe profile image
Abdelrhman Yousry

You're welcome!!

Collapse
 
tifuseini profile image
F.I.T

Wow nice information thanks

Collapse
 
gurutobe profile image
Abdelrhman Yousry

You're welcome.

Collapse
 
rconr007 profile image
rconr007

This was a Great article. Thanks for the guide.

Collapse
 
gurutobe profile image
Abdelrhman Yousry

You're welcome.

Collapse
 
realbwoi profile image
Orlando Larks

Really helpful for my FE career. Thanks for the inspiration!

Collapse
 
gurutobe profile image
Abdelrhman Yousry

You're welcome, happy it helped!

Collapse
 
shahadh7 profile image
Shahadh

Thank you!!

Collapse
 
rodrigoyamamoto profile image
Rodrigo Yamamoto

Awesome guide, mate! cheers!

Collapse
 
gurutobe profile image
Abdelrhman Yousry

Thank you, so happy you liked it!

Collapse
 
jdsllk7 profile image
Kosamu

Really amazing stuff. Thanks for sharing.

Collapse
 
gurutobe profile image
Abdelrhman Yousry

You're welcome, thanks for reading

Collapse
 
farhangq profile image
Farhang Qahwe

Hey guys, i love designing and i'm expert somehow but i can't understand frontend at all. I tried a lot :(

Collapse
 
petedermott profile image
Pete Dermott

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...

Collapse
 
hqjs profile image
hq

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.

Collapse
 
swisskid95 profile image
Sanusi Babatunde

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.

Collapse
 
apsychox profile image
Alice 🧞‍♀️✨

Oh my! This is a great article! Thank you so much!

Collapse
 
gurutobe profile image
Abdelrhman Yousry

You're welcome, glad you liked it!

Collapse
 
mcdtbo profile image
Thabo Pali

This is a good article. You should do a similar one for backend devs, not to take anything away from this, it’s fantastic.

Collapse
 
gurutobe profile image
Abdelrhman Yousry

Thank you, I'm glad you liked it, will do my research and try to make a follow-up soon.

Collapse
 
misspran profile image
misspran

As a junior dev, this can serve as a tremendously useful checklist for leveling up. Thank you!

Collapse
 
ernestoleon87 profile image
Ernesto Leon

Thanks man, very good article.