Kamran Ahmed
5 years ago
parent
727e191767
commit
7eaa0b002e
48 changed files with 264 additions and 529 deletions
@ -0,0 +1,35 @@ |
||||
import { Summary, SummaryContainer, UpcomingContainer } from './style'; |
||||
import GuideBody from 'components/guide-body'; |
||||
import RoadmapHeader from 'components/roadmap-header'; |
||||
import SharePage from 'components/share-page'; |
||||
import MdRenderer from 'components/md-renderer'; |
||||
|
||||
const RoadmapResources = ({ roadmap }) => { |
||||
if (roadmap.upcoming) { |
||||
return ( |
||||
<> |
||||
<RoadmapHeader roadmap={ roadmap } /> |
||||
<UpcomingContainer> |
||||
<GuideBody guide={{ fileName: 'upcoming' }} /> |
||||
</UpcomingContainer> |
||||
</> |
||||
); |
||||
} |
||||
|
||||
const filePath = roadmap.resources.replace(/^\//, ''); |
||||
const ResourcesContent = require(`../../content/${filePath}`).default; |
||||
|
||||
return ( |
||||
<SummaryContainer> |
||||
<RoadmapHeader roadmap={ roadmap } page='resources' /> |
||||
<Summary className="container"> |
||||
<MdRenderer> |
||||
<ResourcesContent /> |
||||
</MdRenderer> |
||||
<SharePage title={ roadmap.description } url={ roadmap.url } /> |
||||
</Summary> |
||||
</SummaryContainer> |
||||
) |
||||
}; |
||||
|
||||
export default RoadmapResources; |
||||
@ -0,0 +1,21 @@ |
||||
import styled from 'styled-components'; |
||||
|
||||
export const SummaryContainer = styled.div``; |
||||
|
||||
export const UpcomingContainer = styled.div` |
||||
text-align: center; |
||||
padding: 40px 0 50px; |
||||
|
||||
.container { |
||||
position: relative; |
||||
} |
||||
`;
|
||||
|
||||
export const Summary = styled.div` |
||||
margin-top: 35px; |
||||
min-height: 400px; |
||||
max-width: 1000px; |
||||
display: block; |
||||
position: relative; |
||||
text-align: left; |
||||
`;
|
||||
@ -0,0 +1,62 @@ |
||||
Knowing the basics of internet and how it works is the key knowledge that every developer must have. In this article accompanied with an introductory series of short videos about internet from [code.org](https://code.org) you will learn the basics of internet and how everything works. After going through this article, you will be able to answer the below questions: |
||||
|
||||
* What is Internet? |
||||
* How does the information move on the internet? |
||||
* How do the networks talk to each other and the protocols involved? |
||||
* Packet, routers, and reliability |
||||
* HTTP and the HTML – How are you viewing this webpage in your browser? |
||||
* How is the information transfer on the internet made secure? |
||||
* What is cybersecurity and some common internet crimes? |
||||
|
||||
## What is internet? |
||||
|
||||
Internet, at its simplest, is a global network of computers connected to each other which communicate through a standardized set of protocols. |
||||
|
||||
In the video below Vint Cerf, one of the "fathers of the internet" explains the history of how the internet works and how no one person or organization is really in charge of it. |
||||
|
||||
<iframe width="100%" height="400" src="https://www.youtube.com/embed/Dxcc6ycZ73M" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> |
||||
|
||||
|
||||
## Wires, Cables & Wifi |
||||
|
||||
Information on the internet moves from computer to another in the form of bits. The medium for this transfer can be wires e.g. ethernet wires that you might have seen in your homes, it can be transferred in the form of light or fiber optic cables, also we can use wireless mediums. |
||||
|
||||
In the video linked below, you will learn about the different mediums for data transfer on the internet and the pros and cons for each. |
||||
|
||||
<iframe width="100%" height="400" src="https://www.youtube.com/embed/ZhEf7e4kopM" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> |
||||
|
||||
## IP Addresses and DNS |
||||
|
||||
Now that you know about the physical medium for the data transfer over the internet. It's time to learn about the protocols involved or how does the information reach from one computer to another in this massive global network of computers. |
||||
|
||||
In the video below, you will get a brief introduction to IP, DNS and how these protocols make the internet work. |
||||
|
||||
<iframe width="100%" height="400" src="https://www.youtube.com/embed/5o8CwafCxnU" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> |
||||
|
||||
## Packets, Routing and Reliability |
||||
|
||||
Information transfer on the internet from one computer to another does not need to follow a fixed path; infact, it may change paths during the transfer. This information transfer is done in the form of packets and these packets may follow different routes depending upon certain factors. |
||||
|
||||
In this video, you will learn about how the packets of information are routed from one computer to another to reach the destination. |
||||
|
||||
<iframe width="100%" height="400" src="https://www.youtube.com/embed/AYdF7b3nMto" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> |
||||
|
||||
## HTTP and HTML |
||||
|
||||
HTTP is the standard protocol using which the webpages are transferred over the internet. The video below is a brief introduction to HTTP and how the browsers load the websites for you. |
||||
|
||||
<iframe width="100%" height="400" src="https://www.youtube.com/embed/kBXQZMmiA4s" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> |
||||
|
||||
## Encryption and Public Keys |
||||
|
||||
Cryptography is what keeps our communication secure on the internet, in this short video you will learn the basics of cryptograpy, SSL and TLS and how they help make the communication on the internet secure. |
||||
|
||||
<iframe width="100%" height="400" src="https://www.youtube.com/embed/ZghMPWGXexs" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> |
||||
|
||||
## Cybersecurity and Crime |
||||
|
||||
In this video, you will learn about the basics of cybersecurity and common cybercrimes |
||||
|
||||
<iframe width="100%" height="400" src="https://www.youtube.com/embed/AuYNXgO_f3Y" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> |
||||
|
||||
And that wraps it up for this article. To learn more about the internet, [Kamran Ahmed](https://twitter.com/kamranahmedse) has a nice little guide on [DNS: How a website is found on the Internet](/guides/dns-in-one-picture). Also go through the episodes of [howdns.works](https://howdns.works/) and read this [cartoon intro to DNS over HTTPS](https://hacks.mozilla.org/2018/05/a-cartoon-intro-to-dns-over-https/). |
||||
@ -1,15 +0,0 @@ |
||||
## What is a Frontend Developer? |
||||
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. |
||||
@ -1,20 +0,0 @@ |
||||
## Soft Skills |
||||
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 |
||||
* **Teamwork** — Working with others, sharing responsibilities, apart from personal goals, achieving goals as a team |
||||
* **Adaptability** — Being able to adapt according to the situations, changes and pressure at the workplace |
||||
* **Emotional Intelligence** — Empathy, being able to understand the emotions of those around you. |
||||
* **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. |
||||
|
||||
## 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 |
||||
|
||||
* HTML |
||||
* CSS |
||||
* 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, have a look at the landscape to get an idea about everything that is there in Frontend Development. |
||||
@ -1,12 +0,0 @@ |
||||
## Common Job Titles |
||||
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 |
||||
|
||||
* Frontend Developer / Engineer |
||||
* JavaScript Developer |
||||
* JavaScript Engineer |
||||
* HTML / CSS Developer |
||||
* UI Developer |
||||
* Web Developer |
||||
* FullStack Developer |
||||
|
||||
Having Web Developer or FullStack developer in the title would normally mean that you need to have some backend skills as well. Most of the small or service based companies require you to have backend and some UI designing skills as well so it is better to look at the job description also once you have shortlisted the jobs to apply to. |
||||
@ -1,15 +0,0 @@ |
||||
## Technical Skills |
||||
The sections below describe different steps required to become a frontend developer |
||||
|
||||
## Learning How Things Work |
||||
As a web developer, frontend, backend or fullstack, you should have a good understanding of how the internet works |
||||
|
||||
 |
||||
|
||||
Learn the below listed in the order given below |
||||
* What is Internet and how does it work? |
||||
* What is HTTP, how it evolved and where is it now? |
||||
* How do the browsers work? Engines behind different browsers |
||||
* What is DNS? How a website is found on the internet? |
||||
* What's in a domain name? What is an IP Address? |
||||
* What is Web Hosting? |
||||
@ -0,0 +1,16 @@ |
||||
## Become a Frontend Developer |
||||
Before I go ahead and list down the resources, please know that the roadmap and the list below is exhaustive and you don't need to know it all from the get go. For frontend development, all you need to get started with is learn some basic HTML, CSS and JavaScript and start working on projects; everything else you will learn along the way. |
||||
|
||||
## Internet and how it works? |
||||
|
||||
Get the basic understanding of internet, browsers, networks and other relevant knowledge. |
||||
|
||||
* [How the internet works in 5 minutes](https://www.youtube.com/watch?v=7_LPdttKXPc) 👀 |
||||
* [What is the Internet](https://www.youtube.com/watch?v=Dxcc6ycZ73M) |
||||
* [The Internet: IP Addresses & DNS](https://www.youtube.com/watch?v=5o8CwafCxnU) |
||||
* [The Internet: Packets, Routing & Reliability](https://www.youtube.com/watch?v=AYdF7b3nMto) |
||||
* What is HTTP, how it evolved and where is it now? |
||||
* How do the browsers work? Engines behind different browsers |
||||
* What is DNS? How a website is found on the internet? |
||||
* What's in a domain name? What is an IP Address? |
||||
* What is Web Hosting? |
||||
@ -0,0 +1,7 @@ |
||||
> **We are still preparing the resources**. Please check back later or [subscribe to get notified](/signup). |
||||
|
||||
While we prepare the list, follow this simple advice to learn anything |
||||
|
||||
> Just **pick a project and start working on it**, you will learn all that you need along the way. |
||||
|
||||
**→** [All Roadmaps](/roadmaps) • [Programming guides](/guides) • [Subscribe](/signup) |
||||
@ -0,0 +1,7 @@ |
||||
> **We are still preparing the resources**. Please check back later or [subscribe to get notified](/signup). |
||||
|
||||
While we prepare the list, follow this simple advice to learn anything |
||||
|
||||
> Just **pick a project and start working on it**, you will learn all that you need along the way. |
||||
|
||||
**→** [All Roadmaps](/roadmaps) • [Programming guides](/guides) • [Subscribe](/signup) |
||||
@ -0,0 +1,7 @@ |
||||
> **We are still preparing the resources**. Please check back later or [subscribe to get notified](/signup). |
||||
|
||||
While we prepare the list, follow this simple advice to learn anything |
||||
|
||||
> Just **pick a project and start working on it**, you will learn all that you need along the way. |
||||
|
||||
**→** [All Roadmaps](/roadmaps) • [Programming guides](/guides) • [Subscribe](/signup) |
||||
@ -0,0 +1,7 @@ |
||||
> **We are still preparing the resources**. Please check back later or [subscribe to get notified](/signup). |
||||
|
||||
While we prepare the list, follow this simple advice to learn anything |
||||
|
||||
> Just **pick a project and start working on it**, you will learn all that you need along the way. |
||||
|
||||
**→** [All Roadmaps](/roadmaps) • [Programming guides](/guides) • [Subscribe](/signup) |
||||
@ -0,0 +1,38 @@ |
||||
import Error from 'next/error'; |
||||
import DefaultLayout from 'layouts/default'; |
||||
import SiteNav from 'components/site-nav'; |
||||
import PageFooter from 'components/page-footer'; |
||||
import { serverOnlyProps } from 'lib/server'; |
||||
import { getRequestedRoadmap } from 'lib/roadmap'; |
||||
import siteConfig from 'content/site'; |
||||
import Helmet from 'components/helmet'; |
||||
import RoadmapResources from '../../components/roadmap-resources'; |
||||
|
||||
const Resources = ({ roadmap, canonical }) => { |
||||
if (!roadmap) { |
||||
return <Error statusCode={404} />; |
||||
} |
||||
|
||||
return ( |
||||
<DefaultLayout> |
||||
<Helmet |
||||
canonical={canonical} |
||||
title={roadmap?.seo?.title || roadmap.title} |
||||
description={roadmap?.seo?.description || roadmap.description} |
||||
keywords={roadmap?.keywords || []} |
||||
/> |
||||
<SiteNav /> |
||||
<RoadmapResources roadmap={roadmap} /> |
||||
<PageFooter /> |
||||
</DefaultLayout> |
||||
); |
||||
}; |
||||
|
||||
Resources.getInitialProps = serverOnlyProps(({ req }) => { |
||||
return { |
||||
canonical: `${siteConfig.url.web}${req.url}`, |
||||
roadmap: getRequestedRoadmap(req) |
||||
}; |
||||
}); |
||||
|
||||
export default Resources; |
||||
|
After Width: | Height: | Size: 844 KiB |
|
Before Width: | Height: | Size: 28 KiB |
@ -1,59 +0,0 @@ |
||||
const path = require('path'); |
||||
const fs = require('fs'); |
||||
const guides = require('../content/guides'); |
||||
|
||||
const { |
||||
getPageRoutes, |
||||
getGuideRoutes, |
||||
} = require("../scripts/path-map"); |
||||
|
||||
describe("Build scripts tests", () => { |
||||
test('it should generate valid pathmap for pages', () => { |
||||
const pageRoutes = getPageRoutes(); |
||||
|
||||
expect(pageRoutes).toEqual({ |
||||
'/': { page: '/index' }, |
||||
'/about': { page: '/about' }, |
||||
'/privacy': { page: '/privacy' }, |
||||
'/terms': { page: '/terms' }, |
||||
'/guides': { page: '/guides/index' }, |
||||
'/roadmaps': { page: '/roadmaps' }, |
||||
'/signup': { page: '/signup' }, |
||||
}); |
||||
}); |
||||
|
||||
test('it should generate valid guides pathmap', () => { |
||||
const expectedGuideRoutes = guides.reduce((acc, guide) => { |
||||
const [,, slug] = guide.url.split('/'); |
||||
return { |
||||
...acc, |
||||
[guide.url]: { |
||||
page: '/guides/[guide]', |
||||
query: slug, |
||||
} |
||||
}; |
||||
}, {}); |
||||
|
||||
// Valid path map is generated
|
||||
expect(expectedGuideRoutes).toEqual(getGuideRoutes()); |
||||
|
||||
const pageFilePath = path.join(__dirname, '../pages/guides/[guide].js'); |
||||
const foundFilePath = fs.existsSync(pageFilePath) ? pageFilePath : ''; |
||||
|
||||
// Given page component exists
|
||||
expect(foundFilePath).toEqual(pageFilePath); |
||||
}); |
||||
|
||||
test('it should have markdown file for each guide', () => { |
||||
guides.forEach(guide => { |
||||
const [,, slug] = guide.url.split('/'); |
||||
|
||||
const expectedFile = path.join(__dirname, `../content/guides/${slug}.md`); |
||||
const foundFile = fs.existsSync(expectedFile) ? expectedFile : ''; |
||||
|
||||
expect(foundFile).toEqual(expectedFile); |
||||
}) |
||||
}); |
||||
|
||||
// @todo add tests for roadmap pathmap
|
||||
}); |
||||
Loading…
Reference in new issue