Your First Steps in a Front-end Developer Career
A couple of weeks ago, I’ve been contacted by a friend of mine, who is just starting his career as a front-end developer.
It’s very typical when a start of the journey is frustrating, and there is nothing better than the advice from the people who already been there.
I never thought about that question carefully, but I formulated something quick for him. But later I decided to elaborate on it and share it with a bigger audience.
There Is No Recipe
The thing is – there is no just simple recipe. If there is, I guess it would sound like that – “practice, practice, practice”.
It’s not a secret that you have to dedicate much time to your craft. And I really mean a lot.
If you are starting your career and be lucky enough to have a job, you have to come back home and work on side projects. If you are a student, you come back after the school and work on side projects, watch courses and read good books.
Through my career, I realized, it were the side projects which contributed to my experience the most.
Here is the thing, at the workplace you have to perform. At the work, you have a lot of constraints – existing codebase, architecture, set of libraries and frameworks, the team rules, etc.
It’s not always an educational environment at the workplace. You have to solve business goals, not primarily to educate yourself. Rarely, both things are coming in parallel, but it’s rather an exceptional case.
So, prepare yourself mentally to work a lot and spend evenings with your IDE opened, instead of watching a favorite series on Netflix or going out (even thought, it’s also very important to do from time to time).
JavaScript Foundation
JavaScript is the assembly language of the web. Without a proper understanding of the language, you have nothing to do in the front-end world.
The good news is, you don’t have to be Douglas Crockford to be a successful developer. I’ll tell you what – I’ve spent quite sometime in the profession, but details of language opened up to me way later. It’s totally normal if you don’t understand the depths of language. It will come.
However, there a fundamental parts that you have to be very comfortable with:
- Data types
- Arithmetic operations
- Boolean and conditional operators
- Understanding of OOP paradigm (prototypical inheritance)
- Understanding of functional paradigm (functors, applicators, immutability)
I also recommend, to start learning Node.js directly.
All modern tools for front-end require Node.js. Developing simple applications and running than from command line is way more convenient comparing of dealing with the browser.
Browsers and DOM
Besides that, you should be able to understand how browsers work and in particular understand the concept of the DOM.
- How DOM functions and it’s basic components
- Events, events propagation, and handlers
- DOM API, window object
- DOM selectors
Here you should be able to write simple, pure JavaScript applications by listens to controls and perform simple DOM manipulations, as setting values, classes, properties.
UI Development
In my career, I came from backend and desktop applications UI and the first sight HTML, and CSS seems to be easy. It’s not even a real programming language, just a set of declarations, right? Not really.
Even if your goal is not to be a designer, you should develop useful skills and a taste for good design. So the best thing to do is to steal cool ideas.
No kidding, just pick up the site you like the most and try to copy it. Remember, the famous guy said – «Un artista copia, un gran artista roba» (Good artists copy, great artists steal).
Make your hands dirty with HTML & CSS.
Be fluent in creating, simple and good looking interfaces. Find a freelance job of turning PSD or Sketch into HTML / CSS. You will get exceptionally important skills.
Client / Server Communication
Browser applications don’t exist in isolation. They do talk to servers to get the data and push data back.
Without going too crazy, you will hugely benefit from understanding the following things:
- Basics of the HTTP protocol
- The concept of REST (HTTP verbs and resources)
fetch API- Optionally: the concept of GraphQL and how it differs from REST
There are tons of open API’s you can do cool stuff with. Pick one and build the simple application against it.
I remember one of the projects I did alexbeletsky/github-commits-widget. A simple app that connects to Github API and makes a widget of contributions to a project. I had a lot of fun with it.
Development Frameworks
And only after the first three parts, which on its own might take a year, or even more I would suggest you take a look at some UI development framework.
The JS ecosystem is famous to create “fatigue”. Tools are complex, configurations are confusing, don’t start with React or Angular, just because you heard that they are cool.
Maybe till the time you are comfortable with JS/HTML/CSS those things are dead already (front-end development framework has a tendency to survive for 3-5 years and then entirely overtaken by competitors.. don’t bother with that race).
However, if you are reading the article 2018, I would recommend you to focus on React.js. The ecosystem is stable, million of tutorials, open source projects, meetups. You won’t feel the lack of information, that’s for sure.
Having all three parts behind your shoulders will make you confident with any front-end frameworks because all of them are designed to simplify complicated things or making things more performant. The foundation of development, as DOM manipulations, HTML/CSS would remain the same.
Even if the framework could encapsulate any particular detail, you will be confident enough to understand, what’s actually going on there.
At the end I would just share the list of resources that helped or influenced me during my own journey:
- JavaScript Jabber Podcast
- Eloquent JavaScript Book
- JavaScript: The Good Parts
- React Podcast
- EggHead Video Courses
Hope you find that helpful and I wish you the best in this interesting and exciting journey!
Enjoy the ride.
Originally published on Medium in Product & Engineering blogfoster blog
A couple of weeks ago, I’ve been contacted by a friend of mine, who is just starting his career as a front-end developer.
It’s very typical when a start of the journey is frustrating, and there is nothing better than the advice from the people who already been there.
I never thought about that question carefully, but I formulated something quick for him. But later I decided to elaborate on it and share it with a bigger audience.
There Is No Recipe
The thing is – there is no just simple recipe. If there is, I guess it would sound like that – “practice, practice, practice”.
It’s not a secret that you have to dedicate much time to your craft. And I really mean a lot.
If you are starting your career and be lucky enough to have a job, you have to come back home and work on side projects. If you are a student, you come back after the school and work on side projects, watch courses and read good books.
Through my career, I realized, it were the side projects which contributed to my experience the most.
Here is the thing, at the workplace you have to perform. At the work, you have a lot of constraints – existing codebase, architecture, set of libraries and frameworks, the team rules, etc.
It’s not always an educational environment at the workplace. You have to solve business goals, not primarily to educate yourself. Rarely, both things are coming in parallel, but it’s rather an exceptional case.
So, prepare yourself mentally to work a lot and spend evenings with your IDE opened, instead of watching a favorite series on Netflix or going out (even thought, it’s also very important to do from time to time).
JavaScript Foundation
JavaScript is the assembly language of the web. Without a proper understanding of the language, you have nothing to do in the front-end world.
The good news is, you don’t have to be Douglas Crockford to be a successful developer. I’ll tell you what – I’ve spent quite sometime in the profession, but details of language opened up to me way later. It’s totally normal if you don’t understand the depths of language. It will come.
However, there a fundamental parts that you have to be very comfortable with:
- Data types
- Arithmetic operations
- Boolean and conditional operators
- Understanding of OOP paradigm (prototypical inheritance)
- Understanding of functional paradigm (functors, applicators, immutability)
I also recommend, to start learning Node.js directly.
All modern tools for front-end require Node.js. Developing simple applications and running than from command line is way more convenient comparing of dealing with the browser.
Browsers and DOM
Besides that, you should be able to understand how browsers work and in particular understand the concept of the DOM.
- How DOM functions and it’s basic components
- Events, events propagation, and handlers
- DOM API, window object
- DOM selectors
Here you should be able to write simple, pure JavaScript applications by listens to controls and perform simple DOM manipulations, as setting values, classes, properties.
UI Development
In my career, I came from backend and desktop applications UI and the first sight HTML, and CSS seems to be easy. It’s not even a real programming language, just a set of declarations, right? Not really.
Even if your goal is not to be a designer, you should develop useful skills and a taste for good design. So the best thing to do is to steal cool ideas.
No kidding, just pick up the site you like the most and try to copy it. Remember, the famous guy said – «Un artista copia, un gran artista roba» (Good artists copy, great artists steal).
Make your hands dirty with HTML & CSS.
Be fluent in creating, simple and good looking interfaces. Find a freelance job of turning PSD or Sketch into HTML / CSS. You will get exceptionally important skills.
Client / Server Communication
Browser applications don’t exist in isolation. They do talk to servers to get the data and push data back.
Without going too crazy, you will hugely benefit from understanding the following things:
- Basics of the HTTP protocol
- The concept of REST (HTTP verbs and resources)
fetchAPI- Optionally: the concept of GraphQL and how it differs from REST
There are tons of open API’s you can do cool stuff with. Pick one and build the simple application against it.
I remember one of the projects I did alexbeletsky/github-commits-widget. A simple app that connects to Github API and makes a widget of contributions to a project. I had a lot of fun with it.
Development Frameworks
And only after the first three parts, which on its own might take a year, or even more I would suggest you take a look at some UI development framework.
The JS ecosystem is famous to create “fatigue”. Tools are complex, configurations are confusing, don’t start with React or Angular, just because you heard that they are cool.
Maybe till the time you are comfortable with JS/HTML/CSS those things are dead already (front-end development framework has a tendency to survive for 3-5 years and then entirely overtaken by competitors.. don’t bother with that race).
However, if you are reading the article 2018, I would recommend you to focus on React.js. The ecosystem is stable, million of tutorials, open source projects, meetups. You won’t feel the lack of information, that’s for sure.
Having all three parts behind your shoulders will make you confident with any front-end frameworks because all of them are designed to simplify complicated things or making things more performant. The foundation of development, as DOM manipulations, HTML/CSS would remain the same.
Even if the framework could encapsulate any particular detail, you will be confident enough to understand, what’s actually going on there.
At the end I would just share the list of resources that helped or influenced me during my own journey:
- JavaScript Jabber Podcast
- Eloquent JavaScript Book
- JavaScript: The Good Parts
- React Podcast
- EggHead Video Courses
Hope you find that helpful and I wish you the best in this interesting and exciting journey!
Enjoy the ride.
Originally published on Medium in Product & Engineering blogfoster blog