@ -1595,7 +1595,7 @@ $stationList->removeStation(new RadioStation(89)); // Will remove station 89
```
```
👽 Mediator
👽 Mediator
========
--------
Real world example
Real world example
> A general example would be when you talk to someone on your mobile phone, there is a network provider sitting between you and them and your conversation goes through it instead of being directly sent. In this case network provider is mediator.
> A general example would be when you talk to someone on your mobile phone, there is a network provider sitting between you and them and your conversation goes through it instead of being directly sent. In this case network provider is mediator.
@ -6,14 +6,14 @@ The protocol evolved organically over the past 20 years, and various people and
I'll be using a [Debian ISO](https://cdimage.debian.org/debian-cd/current/amd64/bt-cd/#indexlist) file as my guinea pig because it's big, but not huge, at 350MB. As a popular Linux distribution, there will be lots of fast and cooperative peers for us to connect to. And we'll avoid the legal and ethical issues related to downloading pirated content.
I'll be using a [Debian ISO](https://cdimage.debian.org/debian-cd/current/amd64/bt-cd/#indexlist) file as my guinea pig because it's big, but not huge, at 350MB. As a popular Linux distribution, there will be lots of fast and cooperative peers for us to connect to. And we'll avoid the legal and ethical issues related to downloading pirated content.
# Finding peers
## Finding peers
Here’s a problem: we want to download a file with BitTorrent, but it’s a peer-to-peer protocol and we have no idea where to find peers to download it from. This is a lot like moving to a new city and trying to make friends—maybe we’ll hit up a local pub or a meetup group! Centralized locations like these are the big idea behind trackers, which are central servers that introduce peers to each other. They’re just web servers running over HTTP, and you can find Debian’s at http://bttracker.debian.org:6969/
Here’s a problem: we want to download a file with BitTorrent, but it’s a peer-to-peer protocol and we have no idea where to find peers to download it from. This is a lot like moving to a new city and trying to make friends—maybe we’ll hit up a local pub or a meetup group! Centralized locations like these are the big idea behind trackers, which are central servers that introduce peers to each other. They’re just web servers running over HTTP, and you can find Debian’s at http://bttracker.debian.org:6969/
Of course, these central servers are liable to get raided by the feds if they facilitate peers exchanging illegal content. You may remember reading about trackers like TorrentSpy, Popcorn Time, and KickassTorrents getting seized and shut down. New methods cut out the middleman by making even **peer discovery** a distributed process. We won't be implementing them, but if you're interested, some terms you can research are **DHT**, **PEX**, and **magnet links**.
Of course, these central servers are liable to get raided by the feds if they facilitate peers exchanging illegal content. You may remember reading about trackers like TorrentSpy, Popcorn Time, and KickassTorrents getting seized and shut down. New methods cut out the middleman by making even **peer discovery** a distributed process. We won't be implementing them, but if you're interested, some terms you can research are **DHT**, **PEX**, and **magnet links**.
## Parsing a .torrent file
### Parsing a .torrent file
A .torrent file describes the contents of a torrentable file and information for connecting to a tracker. It's all we need in order to kickstart the process of downloading a torrent. Debian's .torrent file looks like this:
A .torrent file describes the contents of a torrentable file and information for connecting to a tracker. It's all we need in order to kickstart the process of downloading a torrent. Debian's .torrent file looks like this:
Now that we have information about the file and its tracker, let's talk to the tracker to **announce** our presence as a peer and to retrieve a list of other peers. We just need to make a GET request to the `announce` URL supplied in the .torrent file, with a few query parameters:
Now that we have information about the file and its tracker, let's talk to the tracker to **announce** our presence as a peer and to retrieve a list of other peers. We just need to make a GET request to the `announce` URL supplied in the .torrent file, with a few query parameters:
```go
```go
@ -136,7 +136,7 @@ The important ones:
Now that we have a list of peers, it's time to connect with them and start downloading pieces! We can break down the process into a few steps. For each peer, we want to:
Now that we have a list of peers, it's time to connect with them and start downloading pieces! We can break down the process into a few steps. For each peer, we want to:
1. Start a TCP connection with the peer. This is like starting a phone call.
1. Start a TCP connection with the peer. This is like starting a phone call.
@ -196,7 +196,7 @@ if err != nil {
I set a timeout so that I don't waste too much time on peers that aren't going to let me connect. For the most part, it's a pretty standard TCP connection.
I set a timeout so that I don't waste too much time on peers that aren't going to let me connect. For the most part, it's a pretty standard TCP connection.
## Complete the handshake
### Complete the handshake
We've just set up a connection with a peer, but we want do a handshake to validate our assumptions that the peer
We've just set up a connection with a peer, but we want do a handshake to validate our assumptions that the peer
Once we've completed the initial handshake, we can send and receive **messages**. Well, not quite—if the other peer isn't ready to accept messages, we can't send any until they tell us they're ready. In this state, we're considered **choked** by the other peer. They'll send us an **unchoke** message to let us know that we can begin asking them for data. By default, we assume that we're choked until proven otherwise.
Once we've completed the initial handshake, we can send and receive **messages**. Well, not quite—if the other peer isn't ready to accept messages, we can't send any until they tell us they're ready. In this state, we're considered **choked** by the other peer. They'll send us an **unchoke** message to let us know that we can begin asking them for data. By default, we assume that we're choked until proven otherwise.
Once we've been unchoked, we can then begin sending **requests** for pieces, and they can send us messages back containing pieces.
Once we've been unchoked, we can then begin sending **requests** for pieces, and they can send us messages back containing pieces.
### Interpreting messages
#### Interpreting messages
A message has a length, an **ID** and a **payload**. On the wire, it looks like:
A message has a length, an **ID** and a **payload**. On the wire, it looks like:
One of the most interesting types of message is the **bitfield**, which is a data structure that peers use to efficiently encode which pieces they are able to send us. A bitfield looks like a byte array, and to check which pieces they have, we just need to look at the positions of the *bits* set to 1. You can think of it like the digital equivalent of a coffee shop loyalty card. We start with a blank card of all `0`, and flip bits to `1` to mark their positions as "stamped."
One of the most interesting types of message is the **bitfield**, which is a data structure that peers use to efficiently encode which pieces they are able to send us. A bitfield looks like a byte array, and to check which pieces they have, we just need to look at the positions of the *bits* set to 1. You can think of it like the digital equivalent of a coffee shop loyalty card. We start with a blank card of all `0`, and flip bits to `1` to mark their positions as "stamped."
We now have all the tools we need to download a torrent: we have a list of peers obtained from the tracker, and we can communicate with them by dialing a TCP connection, initiating a handshake, and sending and receiving messages. Our last big problems are handling the **concurrency** involved in talking to multiple peers at once, and managing the **state** of our peers as we interact with them. These are both classically Hard problems.
We now have all the tools we need to download a torrent: we have a list of peers obtained from the tracker, and we can communicate with them by dialing a TCP connection, initiating a handshake, and sending and receiving messages. Our last big problems are handling the **concurrency** involved in talking to multiple peers at once, and managing the **state** of our peers as we interact with them. These are both classically Hard problems.
### Managing concurrency: channels as queues
#### Managing concurrency: channels as queues
In Go, we [share memory by communicating](https://blog.golang.org/share-memory-by-communicating), and we can think of a Go channel as a cheap thread-safe queue.
In Go, we [share memory by communicating](https://blog.golang.org/share-memory-by-communicating), and we can think of a Go channel as a cheap thread-safe queue.
We'll set up two channels to synchronize our concurrent workers: one for dishing out work (pieces to download) between peers, and another for collecting downloaded pieces. As downloaded pieces come in through the results channel, we can copy them into a buffer to start assembling our complete file.
We'll set up two channels to synchronize our concurrent workers: one for dishing out work (pieces to download) between peers, and another for collecting downloaded pieces. As downloaded pieces come in through the results channel, we can copy them into a buffer to start assembling our complete file.
We'll keep track of each peer in a struct, and modify that struct as we read messages. It'll include data like how much we've downloaded from the peer, how much we've requested from them, and whether we're choked. If we wanted to scale this further, we could formalize this as a finite state machine. But a struct and a switch are good enough for now.
We'll keep track of each peer in a struct, and modify that struct as we read messages. It'll include data like how much we've downloaded from the peer, how much we've requested from them, and whether we're choked. If we wanted to scale this further, we could formalize this as a finite state machine. But a struct and a switch are good enough for now.
Files, pieces, and piece hashes aren't the full story—we can go further by breaking down pieces into **blocks**. A block is a part of a piece, and we can fully define a block by the **index** of the piece it's part of, its byte **offset** within the piece, and its **length**. When we make requests for data from peers, we are actually requesting *blocks*. A block is usually 16KB large, meaning that a single 256 KB piece might actually require 16 requests.
Files, pieces, and piece hashes aren't the full story—we can go further by breaking down pieces into **blocks**. A block is a part of a piece, and we can fully define a block by the **index** of the piece it's part of, its byte **offset** within the piece, and its **length**. When we make requests for data from peers, we are actually requesting *blocks*. A block is usually 16KB large, meaning that a single 256 KB piece might actually require 16 requests.
A peer is supposed to sever the connection if they receive a request for a block larger than 16KB. However, based on my experience, they're often perfectly happy to satisfy requests up to 128KB. I only got moderate gains in overall speed with larger block sizes, so it's probably better to stick with the spec.
A peer is supposed to sever the connection if they receive a request for a block larger than 16KB. However, based on my experience, they're often perfectly happy to satisfy requests up to 128KB. I only got moderate gains in overall speed with larger block sizes, so it's probably better to stick with the spec.
### Pipelining
#### Pipelining
Network round-trips are expensive, and requesting each block one by one will absolutely tank the performance of our download. Therefore, it's important to **pipeline** our requests such that we keep up a constant pressure of some number of unfulfilled requests. This can increase the throughput of our connection by an order of magnitude.
Network round-trips are expensive, and requesting each block one by one will absolutely tank the performance of our download. Therefore, it's important to **pipeline** our requests such that we keep up a constant pressure of some number of unfulfilled requests. This can increase the throughput of our connection by an order of magnitude.
For brevity, I included only a few of the important snippets of code. Notably, I left out all the glue code, parsing, unit tests, and the boring parts that build character. View my [full implementation](https://github.com/veggiedefender/torrent-client) if you're interested.
For brevity, I included only a few of the important snippets of code. Notably, I left out all the glue code, parsing, unit tests, and the boring parts that build character. View my [full implementation](https://github.com/veggiedefender/torrent-client) if you're interested.
Roadmap.sh is the place containing community curated roadmaps, study plans, paths and resources for the budding developers. It started as a [set of charts to guide the developers](https://github.com/kamranahmedse/developer-roadmap) who are confused about what should they learn next but that alone wasn't enough so I expanded it into the website to get more contributors involved.
Roadmap.sh is the place containing community curated roadmaps, study plans, paths and resources for the budding developers. It started as a [set of charts to guide the developers](https://github.com/kamranahmedse/developer-roadmap) who are confused about what should they learn next but that alone wasn't enough so I expanded it into the website to get more contributors involved.
#### What are the plans for roadmap.sh?
## What are the plans for roadmap.sh?
The website started off as a [simple repository containing a few charts](https://github.com/kamranahmedse/developer-roadmap) for developers and based on my personal opinions but it could have been much more than that so I decided to expand it to a website where people can contribute to study plans with their areas of expertise as well, add more roadmaps, write guides etc.
The website started off as a [simple repository containing a few charts](https://github.com/kamranahmedse/developer-roadmap) for developers and based on my personal opinions but it could have been much more than that so I decided to expand it to a website where people can contribute to study plans with their areas of expertise as well, add more roadmaps, write guides etc.
We haven't opened up the sign ups for now but we will be doing. My long term plans for this website are to turn it into a goto place for the developers to seek guidance about their careers, help others, share their journeys, incentivize the learnings, get feedbacks on their projects etc.
We haven't opened up the sign ups for now but we will be doing. My long term plans for this website are to turn it into a goto place for the developers to seek guidance about their careers, help others, share their journeys, incentivize the learnings, get feedbacks on their projects etc.
#### How did you build roadmap.sh?
## How did you build roadmap.sh?
The basic version of the website has been built with [Next.js](https://github.com/zeit/next.js/), is opensource and can be found on [github](https://github.com/kamranahmedse/roadmap.sh). It was hastily done to get it out in front of the people and get people to start contributing so it might be rough on the edges, but that is where we need your help.
The basic version of the website has been built with [Next.js](https://github.com/zeit/next.js/), is opensource and can be found on [github](https://github.com/kamranahmedse/roadmap.sh). It was hastily done to get it out in front of the people and get people to start contributing so it might be rough on the edges, but that is where we need your help.
#### How does it make money?
## How does it make money?
It doesn't make any money. I have been using my personal time and budget to build it. I did not create this website with any intentions of monetization but as a good will, to help the people get out of the frustration that I was once in.
It doesn't make any money. I have been using my personal time and budget to build it. I did not create this website with any intentions of monetization but as a good will, to help the people get out of the frustration that I was once in.
Having said that, I love teaching and my future plans are to be able to work full-time on roadmap.sh for which it has to make enough money to pay for my rent, groceries, bills, travel expenses, etc but even if it doesn't it's likely I'll continue growing the site however I can. My focus at the moment is not making money from it and just add content that creates value for the people.
Having said that, I love teaching and my future plans are to be able to work full-time on roadmap.sh for which it has to make enough money to pay for my rent, groceries, bills, travel expenses, etc but even if it doesn't it's likely I'll continue growing the site however I can. My focus at the moment is not making money from it and just add content that creates value for the people.
> Sponsor the efforts by [paying as little as 3$ per month](http://gum.co/roadmap-sh) or with [one time payment via paypal](https://paypal.me/kamranahmedse). Alternatively, reach out to me at [kamran@roadmap.sh](mailto:kamran@roadmap.sh).
> Sponsor the efforts by [paying as little as 3$ per month](http://gum.co/roadmap-sh) or with [one time payment via paypal](https://paypal.me/kamranahmedse). Alternatively, reach out to me at [kamran@roadmap.sh](mailto:kamran@roadmap.sh).
#### Can I contribute?
## Can I contribute?
You definitely can, infact you are encouraged to do that. Even your minor contributions such as typo fixes count. The source code of the website can be [found on Github](https://github.com/kamranahmedse/roadmap.sh). Your contributions can be:
You definitely can, infact you are encouraged to do that. Even your minor contributions such as typo fixes count. The source code of the website can be [found on Github](https://github.com/kamranahmedse/roadmap.sh). Your contributions can be:
* Adding a new roadmap
* Adding a new roadmap
@ -31,9 +31,9 @@ You definitely can, infact you are encouraged to do that. Even your minor contri
Just make sure to [follow the contribution guidelines](https://github.com/kamranahmedse/roadmap.sh/tree/master/contributing) when you decide to contribute.
Just make sure to [follow the contribution guidelines](https://github.com/kamranahmedse/roadmap.sh/tree/master/contributing) when you decide to contribute.
#### Can I redistribute the content?
## Can I redistribute the content?
No, the license of the content on this website does not allow you to redistribute any of the content on this website anywhere. You can use it for personal use or share the link to the content if you have to but redistribution is not allowed.
No, the license of the content on this website does not allow you to redistribute any of the content on this website anywhere. You can use it for personal use or share the link to the content if you have to but redistribution is not allowed.
#### What is the best way to contact you?
## What is the best way to contact you?
Tweet or send me a message [@kamranahmedse](https://twitter.com/kamranahmedse) or email me at [kamran@roadmap.sh](kamran@roadmap.sh). I get lots of messages so apologies in advance if you don't hear back from me soon but I do reply to everyone.
Tweet or send me a message [@kamranahmedse](https://twitter.com/kamranahmedse) or email me at [kamran@roadmap.sh](kamran@roadmap.sh). I get lots of messages so apologies in advance if you don't hear back from me soon but I do reply to everyone.
"title":"Learn to become a modern frontend developer",
"description":"Community driven, articles, resources, guides, interview questions, quizzes for modern frontend development. Learn to become a modern frontend developer by following the steps, skills, resources and guides listed in this roadmap.",
"keywords":[
"guide to becoming a developer",
"guide to becoming a frontend developer",
"frontend developer",
"frontend engineer",
"frontend skills",
"frontend development",
"javascript developer",
"frontend development skills",
"frontend development skills test",
"frontend engineer roadmap",
"frontend developer roadmap",
"become a frontend developer",
"frontend developer career path",
"javascript developer",
"modern javascript developer",
"node developer",
"skills for frontend development",
"learn frontend development",
"what is frontend development",
"frontend developer quiz",
"frontend developer interview questions"
]
},
"title":"Frontend Developer",
"title":"Frontend Developer",
"description":"Step by step guide to becoming a modern frontend developer",
"description":"Step by step guide to becoming a modern frontend developer",
"featuredDescription":"Step by step guide to becoming a modern frontend developer in 2020",
"featuredDescription":"Step by step guide to becoming a modern frontend developer in 2020",
"title":"Learn to become a modern backend developer",
"description":"Community driven, articles, resources, guides, interview questions, quizzes for modern backend development. Learn to become a modern backend developer by following the steps, skills, resources and guides listed in this roadmap.",
"keywords":[
"guide to becoming a developer",
"guide to becoming a backend developer",
"backend developer",
"backend engineer",
"backend skills",
"backend development",
"javascript developer",
"backend development skills",
"backend development skills test",
"backend engineer roadmap",
"backend developer roadmap",
"become a backend developer",
"backend developer career path",
"javascript developer",
"modern javascript developer",
"node developer",
"skills for backend development",
"learn backend development",
"what is backend development",
"backend developer quiz",
"backend developer interview questions"
]
},
"title":"Backend Developer",
"title":"Backend Developer",
"description":"Step by step guide to becoming a modern backend developer",
"description":"Step by step guide to becoming a modern backend developer",
"featuredDescription":"Step by step guide to becoming a modern backend developer in 2020",
"featuredDescription":"Step by step guide to becoming a modern backend developer in 2020",
"title":"DevOps Roadmap: Learn to become a DevOps Engineer or SRE",
"description":"Community driven, articles, resources, guides, interview questions, quizzes for DevOps. Learn to become a modern DevOps engineer by following the steps, skills, resources and guides listed in this roadmap.",
"keywords":[
"guide to becoming a devops enginer",
"devops roadmap",
"sre roadmap",
"site reliability engineer roadmap",
"operations roles",
"become devops",
"devops skills",
"modern devops skills",
"devops skills test",
"skills for devops",
"learn devops",
"what is devops",
"what is sre",
"devops quiz",
"devops interview questions"
]
},
"title":"DevOps Roadmap",
"title":"DevOps Roadmap",
"description":"Step by step guide for DevOps or any other Operations Role",
"description":"Step by step guide for DevOps or any other Operations Role",
"featuredDescription":"Step by step guide to become an SRE or for any operations role in 2020",
"featuredDescription":"Step by step guide to become an SRE or for any operations role in 2020",
"featured":true,
"featured":true,
"path":"/roadmaps/3-devops/0-About/0-Summary.md",
"versions":[
"versions":[
"latest",
"latest",
"2018",
"2018",
@ -164,7 +223,6 @@
"contributorsCount":1,
"contributorsCount":1,
"contributorsUrl":"/devops/contributors",
"contributorsUrl":"/devops/contributors",
"url":"/devops",
"url":"/devops",
"path":"/roadmaps/3-devops/0-About/0-Summary.md",
"sidebar":{
"sidebar":{
"About":[
"About":[
{
{
@ -193,9 +251,37 @@
}
}
},
},
{
{
"seo":{
"title":"Fullstack Roadmap: Learn to become a fullstack developer",
"description":"Community driven, articles, resources, guides, interview questions, quizzes for modern fullstack development. Learn to become a modern fullstack developer by following the steps, skills, resources and guides listed in this roadmap.",
"keywords":[
"guide to becoming a developer",
"guide to becoming a fullstack developer",
"fullstack developer",
"fullstack engineer",
"fullstack skills",
"fullstack development",
"javascript developer",
"fullstack development skills",
"fullstack development skills test",
"fullstack engineer roadmap",
"fullstack developer roadmap",
"become a fullstack developer",
"fullstack developer career path",
"javascript developer",
"modern javascript developer",
"node developer",
"skills for fullstack development",
"learn fullstack development",
"what is fullstack development",
"fullstack developer quiz",
"fullstack developer interview questions"
]
},
"title":"Full Stack Developer",
"title":"Full Stack Developer",
"description":"Step by step guide to becoming a modern fullstack developer in 2020",
"description":"Step by step guide to becoming a modern fullstack developer in 2020",
"featuredDescription":"Step by step guide to becoming a modern fullstack developer in 2020",
"featuredDescription":"Step by step guide to becoming a modern fullstack developer in 2020",
"title":"QA Roadmap: Learn to become a modern QA engineer",
"description":"Community driven, articles, resources, guides, interview questions, quizzes for modern QA development. Learn to become a modern QA engineer by following the steps, skills, resources and guides listed in this roadmap.",
"keywords":[
"guide to becoming a QA engineer",
"QA engineer",
"QA skills",
"QA development skills",
"QA development skills test",
"QA engineer roadmap",
"become a QA engineer",
"QA engineer career path",
"skills for QA development",
"what is QA engineer",
"QA engineer quiz",
"QA engineer interview questions"
]
},
"title":"QA Engineer",
"title":"QA Engineer",
"description":"Steps to follow in order to become a modern QA Engineer in 2020",
"description":"Steps to follow in order to become a modern QA Engineer in 2020",
"featuredDescription":"Step by step guide to becoming a modern QA Engineer in 2020",
"featuredDescription":"Step by step guide to becoming a modern QA Engineer in 2020",
A frontend developer is someone who works on the side of the websites that the user interacts with i.e. front or the client side of the website. Whenever you visit a website, everything that you see is mainly developed by the frontend developers.
They work with designers or UX teams to convert their mockups or wireframes to the actual website that the users can interact with. Also they work with [backend developers](/backend) who work with database and servers to get the data from and to display on the website. Wikipedia describes frontend development as follows
> [According to Wikipedia](https://en.wikipedia.org/wiki/Front-end_web_development):
>
> Front-end web development is the practice of converting data to a graphical interface, through the use of HTML, CSS, and JavaScript, so that users can view and interact with that data.
#### Key Components of a Website
If we talk about the frontend, all the websites are mainly built with three key technologies – **HTML**, **CSS** and **JavaScript**. If you know just these three, you can start building websites and be employable.
Before we proceed, let me give you a brief overview of how **HTML**, **CSS** and **JavaScript** are used on the website. **HTML** provides the structure to a website i.e. all the text, headings, paragraphs, images etc that you see on the website, they have been created with HTML. HTML provides you just the structure, you need to put another layer on top of it to make the website pretty - this next layer is CSS. **CSS** helps make your websites pretty - the colors, backgrounds, font size, borders, shadows etc are controlled using CSS. And finally, the third layer is **JavaScript** which helps make the website interactive e.g. controlling the actions like showing a popup, switching slider images upon click etc is all controlled by JavaScript.
To understand it better, let me provide the analogy of a human body, the skeleton provides structure to our bodies so it can be equivalent to the HTML, the skin which hides the structure of our bodies and beautifies is like CSS and the muscles which help us perform different actions can be JavaScript.
A frontend developer is someone who works on the side of the websites that the user interacts with i.e. front or the client side of the website. Whenever you visit a website, everything that you see is mainly developed by the frontend developers.
They work with designers or UX teams to convert their mockups or wireframes to the actual website that the users can interact with. Also they work with [backend developers](/backend) who work with database and servers to get the data from and to display on the website. Wikipedia describes frontend development as follows
> [According to Wikipedia](https://en.wikipedia.org/wiki/Front-end_web_development):
>
> Front-end web development is the practice of converting data to a graphical interface, through the use of HTML, CSS, and JavaScript, so that users can view and interact with that data.
## Key Components of a Website
If we talk about the frontend, all the websites are mainly built with three key technologies – **HTML**, **CSS** and **JavaScript**. If you know just these three, you can start building websites and be employable.
Before we proceed, let me give you a brief overview of how **HTML**, **CSS** and **JavaScript** are used on the website. **HTML** provides the structure to a website i.e. all the text, headings, paragraphs, images etc that you see on the website, they have been created with HTML. HTML provides you just the structure, you need to put another layer on top of it to make the website pretty - this next layer is CSS. **CSS** helps make your websites pretty - the colors, backgrounds, font size, borders, shadows etc are controlled using CSS. And finally, the third layer is **JavaScript** which helps make the website interactive e.g. controlling the actions like showing a popup, switching slider images upon click etc is all controlled by JavaScript.
To understand it better, let me provide the analogy of a human body, the skeleton provides structure to our bodies so it can be equivalent to the HTML, the skin which hides the structure of our bodies and beautifies is like CSS and the muscles which help us perform different actions can be JavaScript.
Before we jump on to the technical skills there are few non-technical or soft skills that every employer is going to demand, so make sure to work on that side of the things as well when you are preparing yourself technically
Before we jump on to the technical skills there are few non-technical or soft skills that every employer is going to demand, so make sure to work on that side of the things as well when you are preparing yourself technically
* **Communication skills** — Talking to your colleagues, writing emails, use of language
* **Communication skills** — Talking to your colleagues, writing emails, use of language
@ -8,14 +8,13 @@ Before we jump on to the technical skills there are few non-technical or soft sk
* **Work Ethics and Integrity** — Being able to follow through on your duties in timely and quality manner.
* **Work Ethics and Integrity** — Being able to follow through on your duties in timely and quality manner.
* **Be Curious** — Your curiosity is going to help you a great deal in evolving yourself. Don't just take things as they are, look at the reasoning behind the things. Look at the things that others are building, learn from them. Look at what community is most excited about these days.
* **Be Curious** — Your curiosity is going to help you a great deal in evolving yourself. Don't just take things as they are, look at the reasoning behind the things. Look at the things that others are building, learn from them. Look at what community is most excited about these days.
#### Technical Skills
## Technical Skills
In order to be a frontend developer, all you need is to learn HTML, CSS and JavaScript. Just learn these and you should be employable. I know a lot of developers who just know these and are working as frontend developers and are making decent money
In order to be a frontend developer, all you need is to learn HTML, CSS and JavaScript. Just learn these and you should be employable. I know a lot of developers who just know these and are working as frontend developers and are making decent money
* HTML
* HTML
* CSS
* CSS
* JavaScript
* JavaScript
Frontend development is broad and there are further skills that are in play but those can be gained over time. All you need is to learn the above three and start making projects ...lots of them. This is how you will hone your skillset and continue to grow. Having said that, the skills and the relevant expertise in those skills varies from the job level, follow the links below to get an idea of the skills required for each of the role levels.
Frontend development is broad and there are further skills that are in play but those can be gained over time. All you need is to learn the above three and start making projects ..lots of them. This is how you will hone your skillset and continue to grow.
Having said that, the skills and the relevant expertise in those skills varies from the job level, have a look at the landscape to get an idea about everything that is there in Frontend Development.
If you know frontend development, there are jobs with different titles that you can apply to. Here is the list of different job titles with almost same responsibilities
If you know frontend development, there are jobs with different titles that you can apply to. Here is the list of different job titles with almost same responsibilities
"title":"Learn to become a modern frontend developer",
"description":"Community driven, articles, resources, guides, interview questions, quizzes for modern frontend development. Learn to become a modern frontend developer by following the steps, skills, resources and guides listed in this roadmap.",
"keywords":[
"guide to becoming a developer",
"guide to becoming a frontend developer",
"frontend developer",
"frontend engineer",
"frontend skills",
"frontend development",
"javascript developer",
"frontend development skills",
"frontend development skills test",
"frontend engineer roadmap",
"frontend developer roadmap",
"become a frontend developer",
"frontend developer career path",
"javascript developer",
"modern javascript developer",
"node developer",
"skills for frontend development",
"learn frontend development",
"what is frontend development",
"frontend developer quiz",
"frontend developer interview questions"
]
},
"title":"Frontend Developer",
"title":"Frontend Developer",
"description":"Step by step guide to becoming a modern frontend developer",
"description":"Step by step guide to becoming a modern frontend developer",
"featuredDescription":"Step by step guide to becoming a modern frontend developer in 2020",
"featuredDescription":"Step by step guide to becoming a modern frontend developer in 2020",
"title":"Learn to become a modern backend developer",
"description":"Community driven, articles, resources, guides, interview questions, quizzes for modern backend development. Learn to become a modern backend developer by following the steps, skills, resources and guides listed in this roadmap.",
"keywords":[
"guide to becoming a developer",
"guide to becoming a backend developer",
"backend developer",
"backend engineer",
"backend skills",
"backend development",
"javascript developer",
"backend development skills",
"backend development skills test",
"backend engineer roadmap",
"backend developer roadmap",
"become a backend developer",
"backend developer career path",
"javascript developer",
"modern javascript developer",
"node developer",
"skills for backend development",
"learn backend development",
"what is backend development",
"backend developer quiz",
"backend developer interview questions"
]
},
"title":"Backend Developer",
"title":"Backend Developer",
"description":"Step by step guide to becoming a modern backend developer",
"description":"Step by step guide to becoming a modern backend developer",
"featuredDescription":"Step by step guide to becoming a modern backend developer in 2020",
"featuredDescription":"Step by step guide to becoming a modern backend developer in 2020",
"title":"DevOps Roadmap: Learn to become a DevOps Engineer or SRE",
"description":"Community driven, articles, resources, guides, interview questions, quizzes for DevOps. Learn to become a modern DevOps engineer by following the steps, skills, resources and guides listed in this roadmap.",
"keywords":[
"guide to becoming a devops enginer",
"devops roadmap",
"sre roadmap",
"site reliability engineer roadmap",
"operations roles",
"become devops",
"devops skills",
"modern devops skills",
"devops skills test",
"skills for devops",
"learn devops",
"what is devops",
"what is sre",
"devops quiz",
"devops interview questions"
]
},
"title":"DevOps Roadmap",
"title":"DevOps Roadmap",
"description":"Step by step guide for DevOps or any other Operations Role",
"description":"Step by step guide for DevOps or any other Operations Role",
"featuredDescription":"Step by step guide to become an SRE or for any operations role in 2020",
"featuredDescription":"Step by step guide to become an SRE or for any operations role in 2020",
"title":"Fullstack Roadmap: Learn to become a fullstack developer",
"description":"Community driven, articles, resources, guides, interview questions, quizzes for modern fullstack development. Learn to become a modern fullstack developer by following the steps, skills, resources and guides listed in this roadmap.",
"keywords":[
"guide to becoming a developer",
"guide to becoming a fullstack developer",
"fullstack developer",
"fullstack engineer",
"fullstack skills",
"fullstack development",
"javascript developer",
"fullstack development skills",
"fullstack development skills test",
"fullstack engineer roadmap",
"fullstack developer roadmap",
"become a fullstack developer",
"fullstack developer career path",
"javascript developer",
"modern javascript developer",
"node developer",
"skills for fullstack development",
"learn fullstack development",
"what is fullstack development",
"fullstack developer quiz",
"fullstack developer interview questions"
]
},
"title":"Full Stack Developer",
"title":"Full Stack Developer",
"description":"Step by step guide to becoming a modern fullstack developer in 2020",
"description":"Step by step guide to becoming a modern fullstack developer in 2020",
"featuredDescription":"Step by step guide to becoming a modern fullstack developer in 2020",
"featuredDescription":"Step by step guide to becoming a modern fullstack developer in 2020",
"title":"QA Roadmap: Learn to become a modern QA engineer",
"description":"Community driven, articles, resources, guides, interview questions, quizzes for modern QA development. Learn to become a modern QA engineer by following the steps, skills, resources and guides listed in this roadmap.",
"keywords":[
"guide to becoming a QA engineer",
"QA engineer",
"QA skills",
"QA development skills",
"QA development skills test",
"QA engineer roadmap",
"become a QA engineer",
"QA engineer career path",
"skills for QA development",
"what is QA engineer",
"QA engineer quiz",
"QA engineer interview questions"
]
},
"title":"QA Engineer",
"title":"QA Engineer",
"description":"Steps to follow in order to become a modern QA Engineer in 2020",
"description":"Steps to follow in order to become a modern QA Engineer in 2020",
"featuredDescription":"Step by step guide to becoming a modern QA Engineer in 2020",
"featuredDescription":"Step by step guide to becoming a modern QA Engineer in 2020",
"title":"Roadmaps to becoming a modern developer",
"title":"Roadmaps to becoming a modern developer",
"name":"roadmap.sh",
"name":"roadmap.sh",
"description":"Roadmaps, articles and resources to help you choose your path, learn and improve.",
"description":"Community driven roadmaps, articles, guides, quizzes, tips and resources for developers to learn from, identify their career paths, know what they don't know, find out the knowledge gaps, learn and improve.",
Kamran Ahmed
5 years ago