Kamran Ahmed
3 years ago
parent
7c5d28b68b
commit
e7c32958c9
241 changed files with 0 additions and 59747 deletions
@ -1,13 +0,0 @@ |
||||
{ |
||||
"presets": [ |
||||
"next/babel" |
||||
], |
||||
"plugins": [ |
||||
[ |
||||
"styled-components", |
||||
{ |
||||
"ssr": true |
||||
} |
||||
] |
||||
] |
||||
} |
||||
@ -1,23 +0,0 @@ |
||||
# EditorConfig for the node-soap library - head over to editorconfig.org to see if you editor supports this file. |
||||
|
||||
# this is the topmost .editorconfig file |
||||
root = true |
||||
|
||||
[*] |
||||
end_of_line = lf |
||||
insert_final_newline = true |
||||
|
||||
[*.xml] |
||||
insert_final_newline = false |
||||
|
||||
[*.js] |
||||
indent_style = space |
||||
indent_size = 2 |
||||
|
||||
[*.json] |
||||
indent_style = space |
||||
indent_size = 2 |
||||
|
||||
[{package.json, .travis.yml}] |
||||
indent_style = space |
||||
indent_size = 2 |
||||
@ -1,3 +0,0 @@ |
||||
# These are supported funding model platforms |
||||
|
||||
github: kamranahmedse |
||||
@ -1,36 +0,0 @@ |
||||
<!-- |
||||
Please do not remove anything written below. |
||||
|
||||
Fill the details and open the issue. Any issue that |
||||
doesn't have all of these filled in will be closed, |
||||
if yours is closed reopen with everything filled in. |
||||
--> |
||||
|
||||
#### What roadmap is this issue about? |
||||
|
||||
- [ ] Frontend Roadmap |
||||
- [ ] Backend Roadmap |
||||
- [ ] DevOps Roadmap |
||||
- [ ] All Roadmaps |
||||
|
||||
#### What is this issue about? |
||||
|
||||
- [ ] Functionality of the website |
||||
- [ ] Discussion for a pull request I would want to open. |
||||
- [ ] Addition of a new item |
||||
- [ ] Removal of some existing item |
||||
- [ ] Changing in arrangement |
||||
- [ ] General suggestion |
||||
- [ ] Sharing an Idea |
||||
- [ ] Something else |
||||
|
||||
#### Please acknowledge the below listed |
||||
|
||||
- [ ] This is not a duplicate issue. I have searched and there is no existing issue for this. |
||||
- [ ] I understand that these roadmaps are highly opinionated. The purpose is to not to include everything out there in these roadmaps but to have everything that is most relevant today comparing to the other options listed. |
||||
- [ ] I have read the [contribution docs](../contributing) before opening this issue. |
||||
|
||||
|
||||
#### Enter the details about the issue here |
||||
|
||||
<!-- Please enter the issue details here --> |
||||
@ -1,19 +0,0 @@ |
||||
#### What roadmap does this PR target? |
||||
|
||||
- [ ] Code Change |
||||
- [ ] Frontend Roadmap |
||||
- [ ] Backend Roadmap |
||||
- [ ] DevOps Roadmap |
||||
- [ ] All Roadmaps |
||||
- [ ] Guides |
||||
|
||||
#### Please acknowledge the items listed below |
||||
|
||||
- [ ] I have discussed this contribution and got a go-ahead in an issue before opening this pull request. |
||||
- [ ] This is not a duplicate issue. I have searched and there is no existing issue for this. |
||||
- [ ] I understand that these roadmaps are highly opinionated. The purpose is to not to include everything out there in these roadmaps but to have everything that is most relevant today comparing to the other options listed. |
||||
- [ ] I have read the [contribution docs](../contributing) before opening this PR. |
||||
|
||||
#### Enter the details about the contribution |
||||
|
||||
<!-- Enter the details here --> |
||||
@ -1,31 +0,0 @@ |
||||
name: Deployment to GitHub Pages |
||||
on: |
||||
push: |
||||
branches: [ master ] |
||||
env: |
||||
ROADMAP_GA_SECRET: ${{ secrets.GA_SECRET }} |
||||
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} |
||||
CI: true |
||||
NEXT_TELEMETRY_DISABLED: 1 |
||||
jobs: |
||||
build: |
||||
runs-on: ubuntu-latest |
||||
steps: |
||||
- uses: actions/checkout@v2 |
||||
- uses: actions/setup-node@v1 |
||||
with: |
||||
node-version: 12 |
||||
- name: Setup Environment |
||||
run: | |
||||
npm install -g yarn |
||||
yarn install |
||||
- name: Generate meta and builld |
||||
run: | |
||||
yarn meta |
||||
yarn build |
||||
- name: Deploy to GitHub Pages |
||||
run: | |
||||
git config user.email "kamranahmed.se@gmail.com" |
||||
git config user.name "Kamran Ahmed" |
||||
git remote set-url origin https://x-access-token:${GITHUB_TOKEN}@github.com/${GITHUB_REPOSITORY}.git |
||||
npm run deploy |
||||
@ -1,14 +0,0 @@ |
||||
_* |
||||
Thumbs.db |
||||
.DS_Store |
||||
.idea |
||||
.next |
||||
out |
||||
.env |
||||
build |
||||
node_modules |
||||
yarn-error.log |
||||
*.sublime-project |
||||
*.sublime-workspace |
||||
config/*.json |
||||
!config/dev.json |
||||
@ -1,76 +0,0 @@ |
||||
# Code of Conduct |
||||
|
||||
## Our Pledge |
||||
|
||||
In the interest of fostering an open and welcoming environment, we as |
||||
contributors and maintainers pledge to make participation in our project and |
||||
our community a harassment-free experience for everyone, regardless of age, body |
||||
size, disability, ethnicity, sex characteristics, gender identity and expression, |
||||
level of experience, education, socio-economic status, nationality, personal |
||||
appearance, race, religion, or sexual identity and orientation. |
||||
|
||||
## Our Standards |
||||
|
||||
Examples of behavior that contributes to creating a positive environment |
||||
include: |
||||
|
||||
* Using welcoming and inclusive language |
||||
* Being respectful of differing viewpoints and experiences |
||||
* Gracefully accepting constructive criticism |
||||
* Focusing on what is best for the community |
||||
* Showing empathy towards other community members |
||||
|
||||
Examples of unacceptable behavior by participants include: |
||||
|
||||
* The use of sexualized language or imagery and unwelcome sexual attention or |
||||
advances |
||||
* Trolling, insulting/derogatory comments, and personal or political attacks |
||||
* Public or private harassment |
||||
* Publishing others' private information, such as a physical or electronic |
||||
address, without explicit permission |
||||
* Other conduct which could reasonably be considered inappropriate in a |
||||
professional setting |
||||
|
||||
## Our Responsibilities |
||||
|
||||
Project maintainers are responsible for clarifying the standards of acceptable |
||||
behavior and are expected to take appropriate and fair corrective action in |
||||
response to any instances of unacceptable behavior. |
||||
|
||||
Project maintainers have the right and responsibility to remove, edit, or |
||||
reject comments, commits, code, wiki edits, issues, and other contributions |
||||
that are not aligned to this Code of Conduct, or to ban temporarily or |
||||
permanently any contributor for other behaviors that they deem inappropriate, |
||||
threatening, offensive, or harmful. |
||||
|
||||
## Scope |
||||
|
||||
This Code of Conduct applies within all project spaces, and it also applies when |
||||
an individual is representing the project or its community in public spaces. |
||||
Examples of representing a project or community include using an official |
||||
project e-mail address, posting via an official social media account, or acting |
||||
as an appointed representative at an online or offline event. Representation of |
||||
a project may be further defined and clarified by project maintainers. |
||||
|
||||
## Enforcement |
||||
|
||||
Instances of abusive, harassing, or otherwise unacceptable behavior may be |
||||
reported by contacting the project team at <kamranahmed.se@gmail.com>. All |
||||
complaints will be reviewed and investigated and will result in a response that |
||||
is deemed necessary and appropriate to the circumstances. The project team is |
||||
obligated to maintain confidentiality with regard to the reporter of an incident. |
||||
Further details of specific enforcement policies may be posted separately. |
||||
|
||||
Project maintainers who do not follow or enforce the Code of Conduct in good |
||||
faith may face temporary or permanent repercussions as determined by other |
||||
members of the project's leadership. |
||||
|
||||
## Attribution |
||||
|
||||
This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, |
||||
available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html |
||||
|
||||
[homepage]: https://www.contributor-covenant.org |
||||
|
||||
For answers to common questions about this code of conduct, see |
||||
https://www.contributor-covenant.org/faq |
||||
@ -1,20 +0,0 @@ |
||||
The codebase in this repository is covered under BSD 4-Clause license and |
||||
the content with CC BY-NC-ND 3.0 with additional clauses |
||||
|
||||
Everything including text and images in this project are protected by the copyright laws. |
||||
You are allowed to use this material for personal use but are not allowed to use it for |
||||
any other purpose including publishing the images, the project files or the content in the |
||||
images in any form either digital, non-digital, textual, graphical or written formats. |
||||
You are allowed to share the links to the repository or the website roadmap.sh but not |
||||
the content for any sort of usage that involves the content of this repository taken out |
||||
of the repository and be shared from any other medium including but not limited to blog |
||||
posts, articles, newsletters, you must get prior consent from the understated. |
||||
|
||||
Copyright © 2021 Kamran Ahmed <kamranahmed.se@gmail.com> |
||||
|
||||
Please note that I am really flexible with allowing the usage of the content in this |
||||
repository. If you reach out to me with a brief detail of why and how you would like |
||||
to use this content, there is a good chance that I will allow you to use it. The reason |
||||
behind this strictness in the license is to stop the people who have been using these |
||||
roadmaps in ill manners e.g. ripping people off with suggesting random affiliate links, |
||||
redistributing these roadmaps just for the sake of monetizing the traffic. |
||||
@ -1,22 +0,0 @@ |
||||
import { AboutHeaderWrap } from './style'; |
||||
import siteConfig from "content/site"; |
||||
|
||||
const AboutHeader = () => ( |
||||
<AboutHeaderWrap> |
||||
<div className="container container-small"> |
||||
<div className="author-info"> |
||||
<img className='author-img d-none d-sm-none d-md-block d-lg-block d-xl-block' src="/kamran.jpeg" /> |
||||
<div className="author-msg"> |
||||
<h1>Hello, I'm Kamran Ahmed.</h1> |
||||
<p>I created <span className='flow-black'>roadmap.sh</span> to help developers find their path if they are confused and help them grow in their career.</p> |
||||
<div className="author-links"> |
||||
<a href={`https://twitter.com/${siteConfig.twitter}`} target="_blank">@kamranahmedse</a> |
||||
<a href="mailto:kamran@roadmap.sh">kamran@roadmap.sh</a> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</AboutHeaderWrap> |
||||
); |
||||
|
||||
export default AboutHeader; |
||||
@ -1,49 +0,0 @@ |
||||
import styled from 'styled-components'; |
||||
|
||||
export const AboutHeaderWrap = styled.div` |
||||
text-align: left; |
||||
padding: 70px 0; |
||||
margin: 0 auto; |
||||
|
||||
.author-info { |
||||
display: flex; |
||||
align-items: center; |
||||
flex-direction: row; |
||||
} |
||||
|
||||
h1 { |
||||
font-weight: 700; |
||||
} |
||||
|
||||
p { |
||||
font-size: 20px; |
||||
color: #333; |
||||
font-weight: 400; |
||||
margin-bottom: 0; |
||||
line-height: 35px; |
||||
} |
||||
|
||||
a { |
||||
font-weight: 700; |
||||
color: #000; |
||||
} |
||||
|
||||
.author-img { |
||||
height: 160px; |
||||
margin-right: 25px; |
||||
margin-top: 8px; |
||||
border-radius: 9px; |
||||
} |
||||
|
||||
.author-links a { |
||||
display: inline-block; |
||||
margin-right: 5px; |
||||
background: #2d2d2d; |
||||
color: white; |
||||
padding: 5px 10px; |
||||
font-weight: 500; |
||||
margin-top: 12px; |
||||
border-radius: 5px; |
||||
text-decoration: none; |
||||
} |
||||
`;
|
||||
@ -1,54 +0,0 @@ |
||||
import styled from 'styled-components'; |
||||
|
||||
export const BadgesList = styled.p` |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
margin-bottom: 0; |
||||
`;
|
||||
|
||||
export const PrimaryBadge = styled.span` |
||||
font-size: 11px; |
||||
font-weight: 600; |
||||
background: #2929ff; |
||||
color: white; |
||||
padding: 2px 8px; |
||||
border-radius: 4px; |
||||
text-transform: uppercase; |
||||
display: inline-flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
margin-left: 10px; |
||||
|
||||
svg { |
||||
height: 11px !important; |
||||
margin-right: 5px; |
||||
|
||||
&.fa-clock { |
||||
height: 10px !important; |
||||
} |
||||
} |
||||
`;
|
||||
|
||||
export const SecondaryBadge = styled(PrimaryBadge)` |
||||
background: #696969; |
||||
color: white; |
||||
`;
|
||||
|
||||
export const InfoBadge = styled(PrimaryBadge)` |
||||
background: #039640; |
||||
color: white; |
||||
`;
|
||||
|
||||
export const DarkBadge = styled(PrimaryBadge)` |
||||
background: #101010; |
||||
color: white; |
||||
`;
|
||||
|
||||
export const BadgeLink = styled.a` |
||||
text-decoration: none; |
||||
|
||||
&:hover { |
||||
text-decoration:none; |
||||
} |
||||
`;
|
||||
@ -1,133 +0,0 @@ |
||||
import { useState } from 'react'; |
||||
import classNames from 'classnames'; |
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; |
||||
import { faFacebookSquare, faTwitterSquare, faRedditSquare, faGithubSquare } from '@fortawesome/free-brands-svg-icons' |
||||
import { |
||||
PageHeader, |
||||
RoadmapMeta, |
||||
ShareRoadmap, |
||||
Sidebar, |
||||
Summary, |
||||
SummaryContainer, |
||||
MobileNavHeader, |
||||
SidebarButton, |
||||
MobileSidebar, |
||||
MobileSidebarWrap, |
||||
DesktopSidebarWrap, |
||||
PageTitle, |
||||
PageDetail |
||||
} from './style'; |
||||
import { faBars } from '@fortawesome/free-solid-svg-icons' |
||||
import { getFacebookShareUrl } from 'lib/url'; |
||||
import { ShareIcon } from 'components/share-icon'; |
||||
import { getRedditShareUrl, getTwitterShareUrl } from 'lib/url'; |
||||
import siteConfig from "content/site"; |
||||
import MdRenderer from 'components/md-renderer'; |
||||
|
||||
const DetailedRoadmap = ({ roadmap }) => { |
||||
const [menuActive, setMenuState] = useState(false); |
||||
const { |
||||
sidebar = {}, |
||||
page: currentPage = {}, |
||||
author = {} |
||||
} = roadmap; |
||||
|
||||
const roadmapPages = Object.keys(sidebar || {}).map((groupTitle, groupCounter) => { |
||||
if (groupTitle.startsWith('_')) { |
||||
return; |
||||
} |
||||
|
||||
// @todo remove it after completing the frontend roadmap
|
||||
const isInProgress = groupCounter !== 0; |
||||
|
||||
return ( |
||||
<div className={`links-group ${isInProgress ? 'in-progress' : ''}`} key={groupTitle}> |
||||
<h3> |
||||
{ groupTitle } |
||||
{ isInProgress && <span className='badge badge-warning progress-badge'>In Progress</span> } |
||||
</h3> |
||||
<ul> |
||||
{ sidebar[groupTitle].map(page => { |
||||
const isActivePage = page.url === currentPage.url; |
||||
// e.g. /frontend should mark `/frontend/landscape` as active
|
||||
const isSummaryPage = page.url === `${currentPage.url}/summary`; |
||||
|
||||
return ( |
||||
<li className={classNames({ active: isActivePage || isSummaryPage })} key={page.url}> |
||||
<a href={ page.url }> |
||||
<span className="bullet"></span> |
||||
{ page.title } |
||||
</a> |
||||
</li> |
||||
); |
||||
}) } |
||||
</ul> |
||||
</div> |
||||
); |
||||
}); |
||||
|
||||
const filePath = currentPage.path.replace(/^\//, ''); |
||||
const RoadmapContent = require(`../../content/${filePath}`).default; |
||||
|
||||
return ( |
||||
<SummaryContainer> |
||||
<PageHeader className="border-top border-bottom text-center text-md-left"> |
||||
<div className="container d-flex align-items-center flex-column flex-md-row"> |
||||
<RoadmapMeta> |
||||
<h3>{ roadmap.title }</h3> |
||||
<p> |
||||
Roadmap contributed by <a href={ author.url } target="_blank">{ author.name }</a> |
||||
{ roadmap.contributorsCount > 1 && ` and <a href="${roadmap.contributorsUrl}">${roadmap.contributorsCount} others</a>`} |
||||
</p> |
||||
</RoadmapMeta> |
||||
<ShareRoadmap className="mt-2 mt-md-0"> |
||||
<ShareIcon href={ siteConfig.url.repo } target="_blank"> |
||||
<FontAwesomeIcon icon={ faGithubSquare } /> |
||||
</ShareIcon> |
||||
<ShareIcon href={ getFacebookShareUrl({ text: roadmap.title, url: roadmap.url }) } target="_blank"> |
||||
<FontAwesomeIcon icon={ faFacebookSquare } /> |
||||
</ShareIcon> |
||||
<ShareIcon href={ getTwitterShareUrl({ text: roadmap.title, url: roadmap.url }) } target="_blank"> |
||||
<FontAwesomeIcon icon={ faTwitterSquare } /> |
||||
</ShareIcon> |
||||
<ShareIcon href={ getRedditShareUrl({ text: roadmap.title, url: roadmap.url }) } target="_blank"> |
||||
<FontAwesomeIcon icon={ faRedditSquare } /> |
||||
</ShareIcon> |
||||
</ShareRoadmap> |
||||
</div> |
||||
</PageHeader> |
||||
|
||||
<MobileNavHeader className="border-bottom d-block d-md-none"> |
||||
<div className="container"> |
||||
<SidebarButton onClick={() => setMenuState((prevMenuActive) => !prevMenuActive)}> |
||||
<FontAwesomeIcon icon={ faBars } /> |
||||
{ currentPage.title } |
||||
</SidebarButton> |
||||
</div> |
||||
<MobileSidebarWrap className={classNames({ visible: menuActive })}> |
||||
<div className="container"> |
||||
<MobileSidebar> |
||||
{ roadmapPages } |
||||
</MobileSidebar> |
||||
</div> |
||||
</MobileSidebarWrap> |
||||
</MobileNavHeader> |
||||
|
||||
<Summary className="container"> |
||||
<DesktopSidebarWrap className="d-none d-md-block"> |
||||
<Sidebar> |
||||
{ roadmapPages } |
||||
</Sidebar> |
||||
</DesktopSidebarWrap> |
||||
<PageDetail> |
||||
<PageTitle>{ currentPage.title }</PageTitle> |
||||
<MdRenderer> |
||||
<RoadmapContent /> |
||||
</MdRenderer> |
||||
</PageDetail> |
||||
</Summary> |
||||
</SummaryContainer> |
||||
) |
||||
}; |
||||
|
||||
export default DetailedRoadmap; |
||||
@ -1,199 +0,0 @@ |
||||
import styled from 'styled-components'; |
||||
|
||||
export const SummaryContainer = styled.div``; |
||||
|
||||
export const Summary = styled.div` |
||||
text-align: left; |
||||
min-height: 400px; |
||||
display: flex; |
||||
|
||||
.container { |
||||
position: relative; |
||||
} |
||||
`;
|
||||
|
||||
export const PageHeader = styled.div` |
||||
padding-top: 20px; |
||||
padding-bottom: 20px; |
||||
|
||||
h3 { |
||||
margin-bottom: 4px; |
||||
font-weight: 600; |
||||
font-size: 21px; |
||||
} |
||||
|
||||
p { |
||||
margin-bottom: 0; |
||||
font-size: 14px; |
||||
color: #696969; |
||||
|
||||
a { |
||||
color: #101010; |
||||
} |
||||
} |
||||
`;
|
||||
|
||||
export const RoadmapMeta = styled.div` |
||||
flex: 1; |
||||
`;
|
||||
|
||||
export const ShareRoadmap = styled.div` |
||||
display: flex; |
||||
align-items: center; |
||||
|
||||
a { |
||||
margin-bottom: 0; |
||||
& + a { |
||||
margin-left: 5px; |
||||
} |
||||
} |
||||
`;
|
||||
|
||||
export const MobileNavHeader = styled.div` |
||||
padding: 10px 0; |
||||
display: flex; |
||||
align-items: center; |
||||
position: relative; |
||||
`;
|
||||
|
||||
export const SidebarButton = styled.button` |
||||
background: transparent; |
||||
border: none !important; |
||||
box-shadow: none !important; |
||||
outline: none !important; |
||||
-webkit-appearance: none; |
||||
display: flex; |
||||
align-items: center; |
||||
|
||||
svg { |
||||
margin-right: 10px; |
||||
} |
||||
`;
|
||||
|
||||
export const PageDetail = styled.div` |
||||
padding: 25px 0 100px; |
||||
`;
|
||||
|
||||
export const PageTitle = styled.h1` |
||||
font-size: 40px; |
||||
font-weight: 700; |
||||
`;
|
||||
|
||||
export const Sidebar = styled.div` |
||||
padding-bottom: 150px; |
||||
|
||||
ul { |
||||
list-style: none; |
||||
margin: 0; |
||||
padding: 0; |
||||
} |
||||
|
||||
.bullet { |
||||
display: inline-block; |
||||
margin-right: 7px; |
||||
width: 7px; |
||||
height: 7px; |
||||
min-width: 7px; |
||||
border-radius: 100%; |
||||
background: #efefef; |
||||
transform: translateX(-4px); |
||||
transition: background 0.5s ease; |
||||
} |
||||
|
||||
|
||||
.links-group { |
||||
padding: 30px 0 10px; |
||||
width: 260px; |
||||
|
||||
h3 { |
||||
font-size: 12px; |
||||
font-weight: 600; |
||||
text-transform: uppercase; |
||||
padding-left: 20px; |
||||
} |
||||
} |
||||
|
||||
.progress-badge { |
||||
position: relative; |
||||
top: -2px; |
||||
margin-left: 5px; |
||||
} |
||||
|
||||
.links-group.in-progress { |
||||
opacity: 0.3;
|
||||
} |
||||
|
||||
.links-group li { |
||||
list-style: none; |
||||
margin: 7px 0; |
||||
|
||||
a { |
||||
font-size: 14px; |
||||
font-weight: normal; |
||||
color: #696969; |
||||
} |
||||
|
||||
.bullet { |
||||
display: inline-block; |
||||
margin-right: 12px; |
||||
width: 7px; |
||||
height: 7px; |
||||
min-width: 7px; |
||||
border-radius: 100%; |
||||
background: #efefef; |
||||
transform: translateX(-4px); |
||||
transition: background 0.5s ease; |
||||
} |
||||
|
||||
&.active a { |
||||
color: #101010; |
||||
} |
||||
|
||||
&.active .bullet { |
||||
background: #101010; |
||||
} |
||||
} |
||||
`;
|
||||
|
||||
export const DesktopSidebarWrap = styled.div` |
||||
border-left: 1px solid #efefef; |
||||
|
||||
${Sidebar} { |
||||
position: sticky; |
||||
top: 0; |
||||
background: white; |
||||
} |
||||
`;
|
||||
|
||||
export const MobileSidebarWrap = styled.div` |
||||
position: absolute; |
||||
z-index: 999; |
||||
background: white; |
||||
width: 100%; |
||||
left: 0; |
||||
bottom: 100%; |
||||
overflow-y: scroll; |
||||
box-shadow: rgba(0, 0, 0, 0.1) 0 10px 20px; |
||||
top: calc(100% + 1px); |
||||
transition: bottom 0.5s ease 0s; |
||||
|
||||
&.visible { |
||||
bottom: -50vh; |
||||
} |
||||
`;
|
||||
|
||||
export const MobileSidebar = styled(Sidebar)` |
||||
border-left: 1px solid #efefef; |
||||
margin-left: 12px; |
||||
padding-bottom: 20px; |
||||
|
||||
.links-group { |
||||
width: auto;
|
||||
} |
||||
|
||||
.progress-badge { |
||||
position: relative; |
||||
top: -2px; |
||||
margin-left: 5px; |
||||
} |
||||
`;
|
||||
@ -1,16 +0,0 @@ |
||||
import { FaqContainer } from './style'; |
||||
import MdRenderer from 'components/md-renderer'; |
||||
|
||||
const AboutPage = require(`../../content/pages/about.md`).default; |
||||
|
||||
const FaqList = () => ( |
||||
<FaqContainer className='border-top bg-light'> |
||||
<div className="container container-small"> |
||||
<MdRenderer> |
||||
<AboutPage /> |
||||
</MdRenderer> |
||||
</div> |
||||
</FaqContainer> |
||||
); |
||||
|
||||
export default FaqList; |
||||
@ -1,25 +0,0 @@ |
||||
import styled from 'styled-components'; |
||||
|
||||
export const FaqContainer = styled.div` |
||||
padding: 40px 0; |
||||
|
||||
h4 { |
||||
margin-top: 30px; |
||||
font-weight: 700; |
||||
} |
||||
|
||||
h4:first-child { |
||||
margin-top: 0;
|
||||
} |
||||
|
||||
p { |
||||
color: #333; |
||||
} |
||||
|
||||
p:last-child { |
||||
margin-bottom: 0; |
||||
} |
||||
|
||||
.container { |
||||
} |
||||
`;
|
||||
@ -1,25 +0,0 @@ |
||||
import Link from 'next/link'; |
||||
import { FeaturedContentWrap } from './style'; |
||||
import FeaturedGuide from 'components/featured-guide'; |
||||
import { getFeaturedGuides } from 'lib/guide'; |
||||
|
||||
const FeaturedGuides = () => ( |
||||
<FeaturedContentWrap className="featured-content-wrap"> |
||||
<div className="container"> |
||||
<p className='border-through featured-separator'> |
||||
<span> |
||||
Guides mostly visited by the community |
||||
<a href="/guides" className="dark-link d-none d-sm-none d-md-inline d-xl-inline">View all Guides →</a> |
||||
</span> |
||||
</p> |
||||
<div className="swim-lane row"> |
||||
{ getFeaturedGuides() |
||||
.map(guide => ( |
||||
<FeaturedGuide guide={ guide } key={ guide.url } /> |
||||
)) } |
||||
</div> |
||||
</div> |
||||
</FeaturedContentWrap> |
||||
); |
||||
|
||||
export default FeaturedGuides; |
||||
@ -1,16 +0,0 @@ |
||||
import { FeaturedWrap } from './style'; |
||||
import FeaturedGuides from './guides'; |
||||
import FeaturedRoadmaps from './roadmaps'; |
||||
|
||||
const FeaturedContent = (props) => ( |
||||
<FeaturedWrap className="border-top bg-light"> |
||||
<FeaturedRoadmaps /> |
||||
<FeaturedGuides /> |
||||
</FeaturedWrap> |
||||
); |
||||
|
||||
FeaturedContent.defaultProps = { |
||||
className: '', |
||||
}; |
||||
|
||||
export default FeaturedContent; |
||||
@ -1,27 +0,0 @@ |
||||
import { FeaturedContentWrap } from './style'; |
||||
import roadmaps from 'content/roadmaps'; |
||||
import FeaturedRoadmap from 'components/featured-roadmap'; |
||||
|
||||
const FeaturedRoadmaps = () => ( |
||||
<FeaturedContentWrap className="featured-content-wrap"> |
||||
<div className="container"> |
||||
<div className="featured-head"> |
||||
<p className="border-through featured-separator"> |
||||
<span> |
||||
Roadmaps mostly visited by the community |
||||
<a href='/roadmaps' className="dark-link d-none d-sm-none d-md-inline d-xl-inline">View all Roadmaps →</a> |
||||
</span> |
||||
</p> |
||||
</div> |
||||
<div className="swim-lane row"> |
||||
{ roadmaps |
||||
.filter(({ featured }) => featured) |
||||
.map(roadmap => ( |
||||
<FeaturedRoadmap roadmap={ roadmap } key={ roadmap.url } /> |
||||
)) } |
||||
</div> |
||||
</div> |
||||
</FeaturedContentWrap> |
||||
); |
||||
|
||||
export default FeaturedRoadmaps; |
||||
@ -1,110 +0,0 @@ |
||||
import styled from 'styled-components'; |
||||
|
||||
export const FeaturedWrap = styled.div` |
||||
padding: 30px 0 50px; |
||||
`;
|
||||
|
||||
export const FeaturedContentWrap = styled.div` |
||||
.featured-head { |
||||
text-align: center; |
||||
display: block; |
||||
|
||||
h3 { |
||||
font-weight: 700; |
||||
font-size: 35px; |
||||
margin-bottom: 30px; |
||||
} |
||||
} |
||||
|
||||
.featured-separator { |
||||
font-size: 16px; |
||||
margin-bottom: 40px; |
||||
margin-top: 25px; |
||||
color: #999; |
||||
|
||||
span { |
||||
background: #f8f9fa; |
||||
} |
||||
|
||||
a { |
||||
background: black; |
||||
color: white; |
||||
padding: 3px 8px; |
||||
border-radius: 6px; |
||||
font-size: 14px; |
||||
text-decoration: none; |
||||
margin-left: 5px; |
||||
} |
||||
} |
||||
|
||||
.swim-lane { |
||||
.featured-block { |
||||
} |
||||
} |
||||
|
||||
.guide-item { |
||||
border-bottom: 1px solid #dee2e6; |
||||
padding: 15px 10px; |
||||
|
||||
p { |
||||
margin-bottom: 0; |
||||
font-size: 15px; |
||||
color: #999; |
||||
} |
||||
|
||||
&:last-child { |
||||
border-bottom: none; |
||||
} |
||||
} |
||||
|
||||
.journey-block { |
||||
a { |
||||
border: 1px solid #f7f7f7; |
||||
display: block; |
||||
text-decoration: none; |
||||
color: #000000; |
||||
background: #ffffff; |
||||
box-shadow: rgba(0, 0, 0, 0.12) 0 5px 10px; |
||||
transition: box-shadow 0.2s ease 0s; |
||||
cursor: pointer; |
||||
margin-bottom: 32px; |
||||
border-radius: 0 0 10px 10px; |
||||
|
||||
&:hover { |
||||
box-shadow: rgba(0, 0, 0, 0.12) 0 30px 60px; |
||||
|
||||
img { |
||||
filter: grayscale(0); |
||||
} |
||||
} |
||||
} |
||||
|
||||
.journey-meta { |
||||
padding: 18px 25px 20px; |
||||
|
||||
h4 { |
||||
line-height: 27px; |
||||
font-weight: 600; |
||||
margin-bottom: 0; |
||||
font-size: 18px; |
||||
white-space: nowrap; |
||||
text-overflow: ellipsis; |
||||
flex: 0 0 auto; |
||||
overflow: hidden; |
||||
} |
||||
|
||||
p { |
||||
font-size: 15px; |
||||
line-height: 25px; |
||||
color: #999999; |
||||
margin-bottom: 0; |
||||
} |
||||
} |
||||
|
||||
img { |
||||
width: 100%; |
||||
filter: grayscale(1); |
||||
border-radius: 10px 10px 0 0; |
||||
} |
||||
} |
||||
`;
|
||||
@ -1,25 +0,0 @@ |
||||
import formatDate from 'date-fns/format'; |
||||
|
||||
import { Author, AuthorImage, AuthorName, BlockLink, BlockMeta, BlockSubtitle, BlockTitle, PublishDate } from './style'; |
||||
import { findByUsername } from 'lib/author'; |
||||
|
||||
const FeaturedGuide = ({ guide }) => { |
||||
const author = findByUsername(guide.author) || {}; |
||||
return ( |
||||
<div className='col-xl-4 col-lg-6 col-md-6 col-sm-12 col-12 grid-item-container'> |
||||
<BlockLink href={guide.url}> |
||||
<BlockTitle>{guide.title}</BlockTitle> |
||||
<BlockSubtitle>{guide.featuredDescription || guide.description}</BlockSubtitle> |
||||
<BlockMeta> |
||||
<Author> |
||||
<AuthorImage src={author.picture} /> |
||||
<AuthorName>{author.name}</AuthorName> |
||||
</Author> |
||||
<PublishDate>{formatDate(new Date(guide.createdAt), 'MMMM d, yyyy')}</PublishDate> |
||||
</BlockMeta> |
||||
</BlockLink> |
||||
</div> |
||||
); |
||||
}; |
||||
|
||||
export default FeaturedGuide; |
||||
@ -1,65 +0,0 @@ |
||||
import styled from 'styled-components'; |
||||
|
||||
export const BlockLink = styled.a` |
||||
border: 1px solid #f7f7f7; |
||||
display: block; |
||||
text-decoration: none; |
||||
color: #000000; |
||||
background: #ffffff; |
||||
padding: 25px 25px 22px; |
||||
border-radius: 10px; |
||||
box-shadow: rgba(0, 0, 0, 0.12) 0 5px 10px; |
||||
transition: box-shadow 0.2s ease 0s; |
||||
cursor: pointer; |
||||
margin-bottom: 32px; |
||||
|
||||
&:hover { |
||||
text-decoration: none; |
||||
color: #000000; |
||||
box-shadow: rgba(0, 0, 0, 0.12) 0 30px 60px; |
||||
} |
||||
`;
|
||||
|
||||
export const BlockTitle = styled.h4` |
||||
line-height: 27px; |
||||
font-weight: 600; |
||||
font-size: 22px; |
||||
white-space: nowrap; |
||||
text-overflow: ellipsis; |
||||
flex: 0 0 auto; |
||||
overflow: hidden; |
||||
`;
|
||||
|
||||
export const BlockSubtitle = styled.p` |
||||
font-size: 15px; |
||||
line-height: 25px; |
||||
color: #999999; |
||||
margin-bottom: 0; |
||||
`;
|
||||
|
||||
export const BlockMeta = styled.div` |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: space-between; |
||||
margin-top: 19px; |
||||
`;
|
||||
|
||||
export const PublishDate = styled.time` |
||||
font-size: 13px; |
||||
color: #999; |
||||
`;
|
||||
|
||||
export const Author = styled.div` |
||||
display: flex; |
||||
align-items: center; |
||||
font-size: 15px; |
||||
color: #999; |
||||
`;
|
||||
|
||||
export const AuthorImage = styled.img` |
||||
height: 22px; |
||||
width: 22px; |
||||
border-radius: 100%; |
||||
margin-right: 10px; |
||||
`;
|
||||
export const AuthorName = styled.div``; |
||||
@ -1,12 +0,0 @@ |
||||
import { BlockLink, BlockSubtitle, BlockTitle } from './style'; |
||||
|
||||
const FeaturedRoadmap = ({ roadmap }) => ( |
||||
<div className='col-xl-4 col-lg-4 col-md-6 col-sm-12 col-12 grid-item-container'> |
||||
<BlockLink href={roadmap.url}> |
||||
<BlockTitle>{roadmap.title}</BlockTitle> |
||||
<BlockSubtitle>{roadmap.featuredDescription || roadmap.description}</BlockSubtitle> |
||||
</BlockLink> |
||||
</div> |
||||
); |
||||
|
||||
export default FeaturedRoadmap; |
||||
@ -1,38 +0,0 @@ |
||||
import styled from 'styled-components'; |
||||
|
||||
export const BlockLink = styled.a` |
||||
border: 1px solid #f7f7f7; |
||||
display: block; |
||||
text-decoration: none; |
||||
color: #000000; |
||||
background: #ffffff; |
||||
padding: 26px 25px 25px; |
||||
border-radius: 10px; |
||||
box-shadow: rgba(0, 0, 0, 0.12) 0 5px 10px; |
||||
transition: box-shadow 0.2s ease 0s; |
||||
cursor: pointer; |
||||
margin-bottom: 32px; |
||||
|
||||
&:hover { |
||||
text-decoration: none; |
||||
color: #000000; |
||||
box-shadow: rgba(0, 0, 0, 0.12) 0 30px 60px; |
||||
} |
||||
`;
|
||||
|
||||
export const BlockTitle = styled.h4` |
||||
line-height: 27px; |
||||
font-weight: 600; |
||||
font-size: 22px; |
||||
white-space: nowrap; |
||||
text-overflow: ellipsis; |
||||
flex: 0 0 auto; |
||||
overflow: hidden; |
||||
`;
|
||||
|
||||
export const BlockSubtitle = styled.p` |
||||
font-size: 15px; |
||||
line-height: 25px; |
||||
color: #999999; |
||||
margin-bottom: 0; |
||||
`;
|
||||
@ -1,23 +0,0 @@ |
||||
import MdRenderer from 'components/md-renderer' |
||||
import SharePage from 'components/share-page'; |
||||
import { GuideBodyWrap } from './style'; |
||||
|
||||
const GuideBody = ({ guide }) => { |
||||
const GuideContent = require(`../../content/guides/${guide.fileName}.md`).default; |
||||
return ( |
||||
<GuideBodyWrap> |
||||
<MdRenderer> |
||||
<GuideContent /> |
||||
{ |
||||
guide.author && <SharePage |
||||
title={ guide.title } |
||||
url={ guide.url } |
||||
twitterUsername={ guide.author.twitter } |
||||
/> |
||||
} |
||||
</MdRenderer> |
||||
</GuideBodyWrap> |
||||
); |
||||
}; |
||||
|
||||
export default GuideBody; |
||||
@ -1,13 +0,0 @@ |
||||
import styled from 'styled-components'; |
||||
|
||||
export const GuideBodyWrap = styled.div` |
||||
position: relative; |
||||
max-width: 750px; |
||||
margin: 0 auto; |
||||
padding: 0 20px; |
||||
min-height: 300px; |
||||
|
||||
p:first-child, h1, h2, h3, h4, h5, h6, img, blockquote { |
||||
margin-top: 0; |
||||
} |
||||
`;
|
||||
@ -1,83 +0,0 @@ |
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; |
||||
import { faFacebookSquare, faGithub, faHackerNewsSquare, faRedditSquare, faTwitter, faTwitterSquare } from '@fortawesome/free-brands-svg-icons' |
||||
import { getContributionUrl } from "lib/guide"; |
||||
import { |
||||
getTwitterUrl, |
||||
getTwitterShareUrl, |
||||
getFacebookShareUrl, |
||||
getRedditShareUrl, |
||||
getHnShareUrl |
||||
} from "lib/url"; |
||||
import { |
||||
AuthorBio, |
||||
AuthorImg, |
||||
AuthorInfoWrap, |
||||
AuthorMeta, |
||||
ContributeIcon, |
||||
FooterBg, |
||||
FooterContainer, |
||||
FooterWrap, |
||||
ShareIcons, |
||||
ShareWrap |
||||
} from './style'; |
||||
|
||||
|
||||
const GuideFooter = ({ |
||||
guide, |
||||
guide: { |
||||
author = {} |
||||
} = {} |
||||
}) => ( |
||||
<FooterWrap> |
||||
<FooterBg className="border-top"> |
||||
<FooterContainer> |
||||
<ShareWrap> |
||||
<ContributeIcon> |
||||
<a href={ getContributionUrl(guide) } target="_blank"> |
||||
<span className="d-none d-sm-none d-md-inline d-lg-inline d-xl-inline">Improve this Guide </span> |
||||
<span className="d-inline d-sm-inline d-md-none d-lg-none d-xl-none">Contribute </span> |
||||
<FontAwesomeIcon icon={faGithub}/> |
||||
</a> |
||||
</ContributeIcon> |
||||
<ContributeIcon hasMargins> |
||||
<a href={ getTwitterUrl(author.twitter) } target="_blank"> |
||||
<span className="d-none d-sm-none d-md-inline d-lg-inline d-xl-inline">Follow the author </span> |
||||
<span className="d-inline d-sm-inline d-md-none d-lg-none d-xl-none">Author </span> |
||||
<FontAwesomeIcon icon={faTwitter}/> |
||||
</a> |
||||
</ContributeIcon> |
||||
<ShareIcons> |
||||
<span className="d-none d-sm-none d-md-none d-lg-inline d-xl-inline">Help spread the word</span> |
||||
<span className="d-inline d-sm-inline d-md-inline d-lg-none d-xl-none">Share</span> |
||||
<a href={ getTwitterShareUrl({ text: `${guide.title} by @${author.twitter}`, url: guide.url })} target="_blank"> |
||||
<FontAwesomeIcon icon={faTwitterSquare}/> |
||||
</a> |
||||
<a href={ getFacebookShareUrl({ text: guide.title, url: guide.url }) } target="_blank"> |
||||
<FontAwesomeIcon icon={faFacebookSquare}/> |
||||
</a> |
||||
<a href={ getRedditShareUrl({ text: guide.title, url: guide.url })} target="_blank"> |
||||
<FontAwesomeIcon icon={faRedditSquare}/> |
||||
</a> |
||||
<a href={ getHnShareUrl({ text: guide.title, url: guide.url })} target="_blank"> |
||||
<FontAwesomeIcon icon={faHackerNewsSquare}/> |
||||
</a> |
||||
</ShareIcons> |
||||
</ShareWrap> |
||||
</FooterContainer> |
||||
</FooterBg> |
||||
|
||||
<FooterBg className="border-top"> |
||||
<FooterContainer> |
||||
<AuthorInfoWrap> |
||||
<AuthorImg src={ author.picture } alt={ author.name }/> |
||||
<AuthorMeta> |
||||
<h4><a href={ getTwitterUrl(author.twitter) } target="_blank">{ author.name }</a></h4> |
||||
<AuthorBio>{ author.bio }</AuthorBio> |
||||
</AuthorMeta> |
||||
</AuthorInfoWrap> |
||||
</FooterContainer> |
||||
</FooterBg> |
||||
</FooterWrap> |
||||
); |
||||
|
||||
export default GuideFooter; |
||||
@ -1,123 +0,0 @@ |
||||
import styled from 'styled-components'; |
||||
|
||||
export const FooterWrap = styled.div` |
||||
display: block; |
||||
margin-top: 50px; |
||||
`;
|
||||
|
||||
export const FooterContainer = styled.div` |
||||
max-width: 750px; |
||||
margin: 0 auto; |
||||
padding: 0 20px; |
||||
`;
|
||||
|
||||
export const FooterBg = styled.div` |
||||
`;
|
||||
|
||||
export const ShareWrap = styled.div` |
||||
padding: 17px 0px; |
||||
align-items: center; |
||||
justify-content: center; |
||||
display: flex; |
||||
|
||||
a { |
||||
display: flex;
|
||||
align-items: center; |
||||
color: #101010; |
||||
|
||||
svg { |
||||
height: 18px !important; |
||||
width: 18px !important; |
||||
color: #757575; |
||||
margin-left: 7px; |
||||
transition: all 0.2s ease; |
||||
} |
||||
|
||||
&:hover { |
||||
svg { |
||||
color: #101010; |
||||
} |
||||
} |
||||
} |
||||
`;
|
||||
|
||||
|
||||
export const ContributeIcon = styled.div` |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
margin: ${props => props.hasMargins ? '0 30px' : '0'}; |
||||
|
||||
span { |
||||
margin-right: 4px; |
||||
} |
||||
|
||||
a { |
||||
color: #757575; |
||||
font-size: 14px; |
||||
transition: all 0.2s ease; |
||||
|
||||
&:hover { |
||||
color: #101010; |
||||
} |
||||
} |
||||
`;
|
||||
|
||||
export const ShareIcons = styled.div` |
||||
display: flex; |
||||
align-items: center; |
||||
color: #757575; |
||||
font-size: 14px; |
||||
|
||||
span { |
||||
margin-right: 4px; |
||||
} |
||||
`;
|
||||
|
||||
export const AuthorInfoWrap = styled.div` |
||||
display: flex; |
||||
align-items: center; |
||||
padding: 40px 0; |
||||
|
||||
h4 { |
||||
position: relative; |
||||
font-size: 22px; |
||||
margin: 10px 0; |
||||
line-height: 17px; |
||||
|
||||
a { |
||||
font-weight: 700; |
||||
color: #101010; |
||||
} |
||||
} |
||||
|
||||
.author-description { |
||||
margin-bottom: 14px; |
||||
} |
||||
`;
|
||||
|
||||
export const AuthorBio = styled.p` |
||||
font-size: 15px; |
||||
line-height: 24px; |
||||
color: #757575; |
||||
margin-bottom: 0; |
||||
|
||||
a { |
||||
font-weight: 500; |
||||
} |
||||
`;
|
||||
|
||||
export const AuthorImg = styled.img` |
||||
border-radius: 100%; |
||||
height: 100px !important; |
||||
width: 100px !important; |
||||
margin-right: 22px; |
||||
display: block; |
||||
`;
|
||||
|
||||
export const AuthorMeta = styled.div` |
||||
display: flex; |
||||
justify-content: center; |
||||
flex-direction: column; |
||||
flex: 1; |
||||
`;
|
||||
@ -1,57 +0,0 @@ |
||||
import formatDate from 'date-fns/format' |
||||
import { |
||||
ActionItems, |
||||
AuthorImage, |
||||
EditGuide, |
||||
GuideAuthor, |
||||
GuideDate, |
||||
GuideMeta, |
||||
GuideSubtitle, |
||||
GuideTitle, |
||||
HeaderWrap, |
||||
} from './style'; |
||||
import { getContributionUrl } from "lib/guide"; |
||||
import { getTwitterUrl } from "lib/url"; |
||||
import { faClock, faEnvelope, faArrowLeft } from '@fortawesome/free-solid-svg-icons'; |
||||
import { BadgeLink, BadgesList, PrimaryBadge, SecondaryBadge, DarkBadge } from 'components/badges'; |
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; |
||||
|
||||
const GuideHeader = ({ |
||||
guide, |
||||
guide: { |
||||
author = {} |
||||
} = {} |
||||
}) => ( |
||||
<HeaderWrap className="border-bottom"> |
||||
<GuideMeta> |
||||
<GuideAuthor href={ getTwitterUrl(author.twitter) } target="_blank"> |
||||
<AuthorImage src={ author.picture } /> |
||||
{ author.name } |
||||
</GuideAuthor> |
||||
· |
||||
<GuideDate>{ formatDate(new Date(guide.createdAt), 'EEEE, MMMM d yyyy') }</GuideDate> |
||||
· |
||||
<EditGuide href={ getContributionUrl(guide) } target="_blank">Improve this Guide</EditGuide> |
||||
</GuideMeta> |
||||
<GuideTitle>{ guide.title }</GuideTitle> |
||||
<GuideSubtitle>{ guide.description }</GuideSubtitle> |
||||
<ActionItems> |
||||
<BadgesList className="mt-4"> |
||||
<BadgeLink href="/guides"> |
||||
<SecondaryBadge> |
||||
<FontAwesomeIcon icon={faArrowLeft}/> |
||||
Other Guides |
||||
</SecondaryBadge> |
||||
</BadgeLink> |
||||
<BadgeLink href="/signup"> |
||||
<PrimaryBadge> |
||||
<FontAwesomeIcon icon={faEnvelope}/> |
||||
Send me Updates |
||||
</PrimaryBadge> |
||||
</BadgeLink> |
||||
</BadgesList> |
||||
</ActionItems> |
||||
</HeaderWrap> |
||||
); |
||||
|
||||
export default GuideHeader; |
||||
@ -1,54 +0,0 @@ |
||||
import styled from 'styled-components'; |
||||
|
||||
export const HeaderWrap = styled.div` |
||||
padding: 80px 15px 45px; |
||||
text-align: center; |
||||
margin-bottom: 35px; |
||||
`;
|
||||
|
||||
export const GuideTitle = styled.h1` |
||||
font-weight: 700; |
||||
font-size: 46px; |
||||
margin: 12px 0; |
||||
`;
|
||||
|
||||
export const GuideSubtitle = styled.p` |
||||
margin-bottom: 0; |
||||
font-size: 16px; |
||||
color: #444; |
||||
`;
|
||||
|
||||
export const GuideMeta = styled.p` |
||||
margin-bottom: 0; |
||||
color: #757575; |
||||
font-size: 13px; |
||||
font-weight: 400; |
||||
`;
|
||||
|
||||
export const GuideDate = styled.span` |
||||
margin-left: 7px; |
||||
margin-right: 7px; |
||||
`;
|
||||
|
||||
export const GuideAuthor = styled.a` |
||||
margin-right: 7px; |
||||
font-weight: 500; |
||||
color: #101010; |
||||
|
||||
&:hover { |
||||
color: #101010; |
||||
} |
||||
`;
|
||||
|
||||
export const AuthorImage = styled.img` |
||||
width: 22px; |
||||
height: 22px; |
||||
border-radius: 100%; |
||||
margin-right: 10px; |
||||
`;
|
||||
|
||||
export const EditGuide = styled.a` |
||||
margin-left: 7px; |
||||
`;
|
||||
|
||||
export const ActionItems = styled.div``; |
||||
@ -1,74 +0,0 @@ |
||||
import NextHead from 'next/head'; |
||||
import siteConfig from 'content/site'; |
||||
|
||||
const prepareTitle = (givenTitle) => { |
||||
return givenTitle || siteConfig.title; |
||||
}; |
||||
|
||||
const prepareDescription = (givenDescription) => { |
||||
return givenDescription || siteConfig.description; |
||||
}; |
||||
|
||||
// noinspection JSUnresolvedLibraryURL
|
||||
const Helmet = (props) => ( |
||||
<NextHead> |
||||
<meta charSet='UTF-8' /> |
||||
|
||||
<title>{ prepareTitle(props.title) }</title> |
||||
<meta name='description' content={ prepareDescription(props.description) } /> |
||||
|
||||
<meta name="author" content={ siteConfig.author } /> |
||||
<meta name="keywords" content={ props.keywords ? props.keywords.join(',') : siteConfig.keywords.join(',') } /> |
||||
|
||||
<meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1.0, maximum-scale=3.0, minimum-scale=1.0" /> |
||||
{ props.canonical && <link rel="canonical" href={ props.canonical } /> } |
||||
<meta httpEquiv="Content-Language" content="en" /> |
||||
|
||||
<meta property="og:title" content={ prepareTitle(props.title) } /> |
||||
<meta property="og:description" content={ prepareDescription(props.description) } /> |
||||
<meta property="og:image" content={ `${siteConfig.url.web}${siteConfig.logoSquare}` } /> |
||||
<meta property="og:url" content={ siteConfig.url.web } /> |
||||
<meta property="og:type" content="website" /> |
||||
<meta property="article:publisher" content={ `https://facebook.com/${siteConfig.facebook}` } /> |
||||
<meta property="og:site_name" content={ siteConfig.name } /> |
||||
<meta property="article:author" content={ siteConfig.author } /> |
||||
|
||||
<meta name="twitter:card" content="summary" /> |
||||
<meta name="twitter:site" content={ `@${siteConfig.twitter}` } /> |
||||
<meta name="twitter:title" content={ prepareTitle(props.title) } /> |
||||
<meta name="twitter:description" content={ prepareDescription(props.description) } /> |
||||
<meta name="twitter:image" content={ `${siteConfig.url.web}${siteConfig.logoSquare}` } /> |
||||
<meta name="twitter:image:alt" content="roadmap.sh" /> |
||||
|
||||
<meta name="mobile-web-app-capable" content="yes" /> |
||||
<meta name="apple-mobile-web-app-capable" content="yes" /> |
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" /> |
||||
<link rel="apple-touch-icon" sizes="180x180" href="/manifest/apple-touch-icon.png" /> |
||||
<meta name="msapplication-TileColor" content="#101010" /> |
||||
<meta name="theme-color" content="#848a9a" /> |
||||
|
||||
<link rel="manifest" href="/manifest/manifest.json" /> |
||||
<link rel="icon" type="image/png" sizes="32x32" href="/manifest/icon32.png" /> |
||||
<link rel="icon" type="image/png" sizes="16x16" href="/manifest/icon16.png" /> |
||||
<link rel="shortcut icon" href="/manifest/favicon.ico" type="image/x-icon" /> |
||||
<link rel="icon" href="/manifest/favicon.ico" type="image/x-icon" /> |
||||
|
||||
{ /* Global Site Tag (gtag.js) - Google Analytics */ } |
||||
{ process.env.GA_SECRET && ( |
||||
<> |
||||
<script async src={ `https://www.googletagmanager.com/gtag/js?id=${process.env.GA_SECRET}` } /> |
||||
<script dangerouslySetInnerHTML={{ |
||||
__html: ` |
||||
window.dataLayer = window.dataLayer || []; |
||||
function gtag(){dataLayer.push(arguments);} |
||||
gtag('js', new Date()); |
||||
gtag('config', '${process.env.GA_SECRET}'); |
||||
`,
|
||||
}} /> |
||||
</> |
||||
)} |
||||
|
||||
</NextHead> |
||||
); |
||||
|
||||
export default Helmet; |
||||
@ -1,13 +0,0 @@ |
||||
import Link from 'next/link'; |
||||
import { HeroSectionWrap } from './style'; |
||||
|
||||
const HeroSection = () => ( |
||||
<HeroSectionWrap> |
||||
<div className="container"> |
||||
<h1>Developer Roadmaps</h1> |
||||
<p>Community driven roadmaps, articles and resources for developers. <Link href="/signup"><a>Sign up</a></Link> for occasional updates on new roadmaps, updates and guides</p> |
||||
</div> |
||||
</HeroSectionWrap> |
||||
); |
||||
|
||||
export default HeroSection; |
||||
@ -1,30 +0,0 @@ |
||||
import styled from 'styled-components'; |
||||
|
||||
export const HeroSectionWrap = styled.div` |
||||
text-align: center; |
||||
padding: 70px 20px; |
||||
margin: 0 auto; |
||||
|
||||
.container { |
||||
max-width: 800px; |
||||
} |
||||
|
||||
h1 { |
||||
font-size: 70px; |
||||
font-weight: 700; |
||||
margin-bottom: 25px; |
||||
} |
||||
|
||||
p { |
||||
font-size: 20px; |
||||
color: #333; |
||||
font-weight: 400; |
||||
margin-bottom: 0; |
||||
line-height: 35px; |
||||
} |
||||
|
||||
a { |
||||
font-weight: 700; |
||||
color: #000; |
||||
} |
||||
`;
|
||||
@ -1,15 +0,0 @@ |
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; |
||||
|
||||
import RowBlock from 'components/row-block'; |
||||
import { SubmitText, SubmitWrap } from './style'; |
||||
|
||||
const IconRowBlock = ({ url, icon, text, openExternal=false }) => ( |
||||
<RowBlock url={ url } openExternal={openExternal}> |
||||
<SubmitWrap> |
||||
<FontAwesomeIcon icon={ icon } /> |
||||
<SubmitText>{ text }</SubmitText> |
||||
</SubmitWrap> |
||||
</RowBlock> |
||||
); |
||||
|
||||
export default IconRowBlock; |
||||
@ -1,20 +0,0 @@ |
||||
import styled from 'styled-components'; |
||||
|
||||
export const SubmitWrap = styled.div` |
||||
display: flex; |
||||
flex-direction: column; |
||||
height: 100%; |
||||
align-items: center; |
||||
justify-content: center; |
||||
|
||||
svg { |
||||
height: 25px; |
||||
color: #d6d6d6; |
||||
} |
||||
`;
|
||||
|
||||
export const SubmitText = styled.p` |
||||
margin-bottom: 0; |
||||
color: dimgrey; |
||||
margin-top: 8px; |
||||
`;
|
||||
|
Before Width: | Height: | Size: 298 B |
|
Before Width: | Height: | Size: 565 B |
|
Before Width: | Height: | Size: 474 B |
|
Before Width: | Height: | Size: 529 B |
@ -1,9 +0,0 @@ |
||||
export function BadgeLink({ target='_blank', variant ='success', badgeText, href, children }) { |
||||
return ( |
||||
<p className='mb-0'> |
||||
<a href={href} target={ target }> |
||||
<span style={{ position: 'relative', top: '-2px'}} className={`badge badge-${variant}`}>{badgeText}</span> { children } |
||||
</a> |
||||
</p> |
||||
); |
||||
} |
||||
@ -1,13 +0,0 @@ |
||||
import styled from 'styled-components'; |
||||
|
||||
export const StrongLink = styled.a` |
||||
border-bottom: 2px solid currentColor; |
||||
position: relative; |
||||
transition: background-color 120ms; |
||||
text-decoration: none; |
||||
font-weight: 600; |
||||
|
||||
&:hover { |
||||
text-decoration: none; |
||||
} |
||||
`;
|
||||
@ -1,11 +0,0 @@ |
||||
import styled from 'styled-components'; |
||||
|
||||
export const Mark = styled.span` |
||||
background: #1b1e21; |
||||
color: #fff; |
||||
display: inline-block; |
||||
font-size: 18px; |
||||
font-weight: 600; |
||||
margin: 0 4px; |
||||
padding: 0 6px 0 7px; |
||||
`;
|
||||
@ -1,10 +0,0 @@ |
||||
import { MDXProvider } from '@mdx-js/react'; |
||||
import MdxComponents from './mdx-components'; |
||||
|
||||
const MdRenderer = (props) => ( |
||||
<MDXProvider components={ MdxComponents }> |
||||
{ props.children } |
||||
</MDXProvider> |
||||
); |
||||
|
||||
export default MdRenderer; |
||||
@ -1,18 +0,0 @@ |
||||
import styled from 'styled-components'; |
||||
|
||||
const Link = styled.a` |
||||
font-weight: 600; |
||||
`;
|
||||
|
||||
const EnrichedLink = props => { |
||||
// Is external URL or is a media URL
|
||||
const isExternalUrl = /(^http(s)?:\/\/)|(\.(png|svg|jpeg|jpg)$)/.test(props.href); |
||||
|
||||
return ( |
||||
<Link href={ props.href } target={ isExternalUrl ? '_blank' : '_self' }> |
||||
{ props.children } |
||||
</Link> |
||||
); |
||||
}; |
||||
|
||||
export default EnrichedLink; |
||||
@ -1,26 +0,0 @@ |
||||
import styled from 'styled-components'; |
||||
|
||||
const BlockQuote = styled.blockquote` |
||||
padding: 16px 20px; |
||||
position: relative; |
||||
background: #e8e8e8; |
||||
border-radius: 5px; |
||||
|
||||
h1, h2, h3, h4, h5, h6 { |
||||
margin-top: 0; |
||||
} |
||||
|
||||
p + h4 { |
||||
margin-top: 15px; |
||||
} |
||||
|
||||
p { |
||||
margin: 0; |
||||
|
||||
& + p { |
||||
margin-top: 10px; |
||||
} |
||||
} |
||||
`;
|
||||
|
||||
export default BlockQuote; |
||||
@ -1,77 +0,0 @@ |
||||
import styled from 'styled-components'; |
||||
import Link from 'components/icons/link.svg'; |
||||
|
||||
const linkify = (Component) => { |
||||
return (props) => { |
||||
const text = props.children; |
||||
const id = text.toLowerCase && text |
||||
.toLowerCase() |
||||
.replace(/[^\x00-\x7F]/g, '') |
||||
.replace(/\s+/g, '-') |
||||
.replace(/[?!]/g, ''); |
||||
|
||||
return ( |
||||
<Component id={ id }> |
||||
<HeaderLink href={ `#${id}` }> |
||||
<Link /> |
||||
</HeaderLink> |
||||
{ props.children } |
||||
</Component> |
||||
); |
||||
}; |
||||
}; |
||||
|
||||
const HeaderLink = styled.a` |
||||
position: absolute; |
||||
top: 0; |
||||
left: -25px; |
||||
width: 25px; |
||||
display: none; |
||||
height: 100%; |
||||
align-items: center; |
||||
justify-content: flex-start; |
||||
`;
|
||||
|
||||
const H1 = styled.h1` |
||||
position: relative; |
||||
font-size: 42px; |
||||
font-weight: 700; |
||||
margin: 32px 0 10px !important; |
||||
|
||||
&:hover ${HeaderLink} { |
||||
display: flex; |
||||
} |
||||
`;
|
||||
|
||||
const H2 = styled(H1).attrs({ as: 'h2' })` |
||||
font-size: 32px; |
||||
`;
|
||||
|
||||
const H3 = styled(H1).attrs({ as: 'h3' })` |
||||
margin: 22px 0 8px; |
||||
font-size: 30px; |
||||
`;
|
||||
|
||||
const H4 = styled(H1).attrs({ as: 'h4' })` |
||||
margin: 18px 0 8px; |
||||
font-size: 24px; |
||||
`;
|
||||
|
||||
const H5 = styled(H1).attrs({ as: 'h5' })` |
||||
margin: 14px 0 8px; |
||||
font-size: 18px; |
||||
`;
|
||||
|
||||
const H6 = styled(H1).attrs({ as: 'h6' })` |
||||
margin: 12px 0 8px; |
||||
font-size: 18px; |
||||
`;
|
||||
|
||||
export const Headings = { |
||||
h1: linkify(H1), |
||||
h2: linkify(H2), |
||||
h3: linkify(H3), |
||||
h4: linkify(H4), |
||||
h5: linkify(H5), |
||||
h6: linkify(H6), |
||||
}; |
||||
@ -1,8 +0,0 @@ |
||||
import styled from 'styled-components'; |
||||
|
||||
export const IFrame = styled.iframe` |
||||
display: block; |
||||
width: 100%; |
||||
border: none; |
||||
margin: 30px auto; |
||||
`;
|
||||
@ -1,7 +0,0 @@ |
||||
import styled from 'styled-components'; |
||||
|
||||
export const Img = styled.img` |
||||
max-width: 100%; |
||||
margin: 25px auto; |
||||
display: block; |
||||
`;
|
||||
@ -1,23 +0,0 @@ |
||||
import P from './p'; |
||||
import { Headings } from './heading'; |
||||
import { Pre } from './pre'; |
||||
import BlockQuote from './blockquote'; |
||||
import { Table } from './table'; |
||||
import { IFrame } from './iframe'; |
||||
import { Img } from './img'; |
||||
import EnrichedLink from './a'; |
||||
import { BadgeLink } from '../../link/badge-link'; |
||||
|
||||
const MdxComponents = { |
||||
p: P, |
||||
...Headings, |
||||
pre: Pre, |
||||
blockquote: BlockQuote, |
||||
a: EnrichedLink, |
||||
table: Table, |
||||
iframe: IFrame, |
||||
img: Img, |
||||
BadgeLink: BadgeLink |
||||
}; |
||||
|
||||
export default MdxComponents; |
||||
@ -1,20 +0,0 @@ |
||||
import styled from 'styled-components'; |
||||
|
||||
const P = styled.p` |
||||
color: inherit; |
||||
font-size: 16px; |
||||
font-weight: 400; |
||||
line-height: 26px; |
||||
margin: 0 0 12px; |
||||
|
||||
img + em {
|
||||
text-align: center; |
||||
color: #666666; |
||||
font-style: normal; |
||||
font-size: 14px; |
||||
margin: 5px 0 10px; |
||||
display: block; |
||||
}
|
||||
`;
|
||||
|
||||
export default P; |
||||
@ -1,12 +0,0 @@ |
||||
import styled from 'styled-components'; |
||||
|
||||
export const Pre = styled.pre` |
||||
margin: 25px -25px 25px -25px !important; |
||||
padding: 20px 25px !important; |
||||
border-radius: 10px; |
||||
line-height: 1.5 !important; |
||||
|
||||
code { |
||||
background: transparent; |
||||
} |
||||
`;
|
||||
@ -1,25 +0,0 @@ |
||||
import styled from 'styled-components'; |
||||
|
||||
export const Table = styled.table` |
||||
border-collapse: separate; |
||||
width: 100%; |
||||
border-spacing: 0; |
||||
margin: 20px 0; |
||||
|
||||
th { |
||||
color: #666; |
||||
font-size: 12px; |
||||
font-weight: 400; |
||||
background: #FAFAFA; |
||||
text-transform: uppercase; |
||||
height: 40px; |
||||
vertical-align: middle; |
||||
padding: 5px 10px; |
||||
} |
||||
|
||||
td { |
||||
font-size: 14px; |
||||
padding: 10px; |
||||
border-bottom: 1px solid #EAEAEA; |
||||
} |
||||
`;
|
||||
@ -1,62 +0,0 @@ |
||||
#carbonads { |
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, |
||||
Cantarell, "Helvetica Neue", Helvetica, Arial, sans-serif; |
||||
position: fixed; |
||||
bottom: 15px; |
||||
right: 20px; |
||||
} |
||||
|
||||
#carbonads { |
||||
display: flex; |
||||
max-width: 330px; |
||||
background-color: hsl(0, 0%, 98%); |
||||
box-shadow: 0 1px 4px 1px hsla(0, 0%, 0%, .1); |
||||
} |
||||
|
||||
#carbonads a { |
||||
color: inherit; |
||||
text-decoration: none; |
||||
} |
||||
|
||||
#carbonads a:hover { |
||||
color: inherit; |
||||
} |
||||
|
||||
#carbonads span { |
||||
position: relative; |
||||
display: block; |
||||
overflow: hidden; |
||||
} |
||||
|
||||
#carbonads .carbon-wrap { |
||||
display: flex; |
||||
} |
||||
|
||||
.carbon-img { |
||||
display: block; |
||||
margin: 0; |
||||
line-height: 1; |
||||
} |
||||
|
||||
.carbon-img img { |
||||
display: block; |
||||
} |
||||
|
||||
.carbon-text { |
||||
font-size: 13px; |
||||
padding: 10px; |
||||
line-height: 1.5; |
||||
text-align: left; |
||||
} |
||||
|
||||
.carbon-poweredby { |
||||
display: block; |
||||
padding: 8px 10px; |
||||
background: repeating-linear-gradient(-45deg, transparent, transparent 5px, hsla(0, 0%, 0%, .025) 5px, hsla(0, 0%, 0%, .025) 10px) hsla(203, 11%, 95%, .4); |
||||
text-align: center; |
||||
text-transform: uppercase; |
||||
letter-spacing: .5px; |
||||
font-weight: 600; |
||||
font-size: 9px; |
||||
line-height: 1; |
||||
} |
||||
@ -1,41 +0,0 @@ |
||||
export const CustomAd = () => { |
||||
return ( |
||||
<div id="carbonads"> |
||||
<span> |
||||
<span className="carbon-wrap"> |
||||
<a |
||||
href="https://freemote.com/strategy?sl=roadmap" |
||||
className="carbon-img" |
||||
target="_blank" |
||||
rel="noopener sponsored" |
||||
> |
||||
<img |
||||
src="/fm-img.png" |
||||
alt="FM Logo" |
||||
border="0" |
||||
height="100" |
||||
width="130" |
||||
style={{ maxWidth: "130px" }} |
||||
/> |
||||
</a> |
||||
<a |
||||
href="https://freemote.com/strategy?sl=roadmap" |
||||
className="carbon-text" |
||||
target="_blank" |
||||
rel="noopener sponsored" |
||||
> |
||||
He Went from ZERO TO $74,000 as a Full Time Developer in 7 Weeks |
||||
</a> |
||||
</span> |
||||
<a |
||||
href="https://github.com/sponsors/kamranahmedse" |
||||
className="carbon-poweredby" |
||||
target="_blank" |
||||
rel="noopener sponsored" |
||||
> |
||||
Sponsored by |
||||
</a> |
||||
</span> |
||||
</div> |
||||
); |
||||
}; |
||||
@ -1,71 +0,0 @@ |
||||
import siteConfig from 'content/site'; |
||||
import { FooterWrap } from './style.js'; |
||||
import './carbon.scss'; |
||||
import { CustomAd } from "./custom-ad"; |
||||
|
||||
const PageFooter = () => ( |
||||
<FooterWrap className="border-top"> |
||||
<div className="container"> |
||||
<div className="foot-cols-wrap row"> |
||||
<div className="site-meta-wrap col-12 col-sm-12 col-lg col-xl col-md-12"> |
||||
<div className="site-meta"> |
||||
<div className="brand-detail"> |
||||
<a href="/" className='brand'><img src="/brand.png" alt="" /> roadmap.sh</a> |
||||
<span className="preposition">by</span> |
||||
<a href="https://twitter.com/kamranahmedse" target="_blank" className='follow-author'>@kamranahmedse</a> |
||||
</div> |
||||
<div className="brand-explanation"> |
||||
<p>Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.</p> |
||||
</div> |
||||
<p className='meta-links'> |
||||
© roadmap.sh · |
||||
<a href="/about">FAQ</a> · |
||||
<a href="/terms">Terms</a> · |
||||
<a href="/privacy">Privacy</a> |
||||
</p> |
||||
</div> |
||||
</div> |
||||
<div className="site-contribute foot-col col-12 col-sm-4 col-lg-2"> |
||||
<ul> |
||||
<li className='foot-header'>Contribute</li> |
||||
<li><a href='https://gum.co/roadmap-sh' target="_blank">Sponsor us</a></li> |
||||
<li><a href={ siteConfig.url.addGuide } target="_blank">Write a Guide</a></li> |
||||
<li><a href={ siteConfig.url.addRoadmap } target="_blank">Submit a Roadmap</a></li> |
||||
<li><a href='/about'>About this Site</a></li> |
||||
</ul> |
||||
</div> |
||||
<div className="site-learn foot-col col-12 col-sm-4 col-lg-2"> |
||||
<ul> |
||||
<li className="foot-header">Learn</li> |
||||
<li><a href="/guides">Read Guides</a></li> |
||||
<li><a href="/watch">Watch Videos</a></li> |
||||
<li><a href="/podcasts">Podcasts</a></li> |
||||
<li><a href="https://www.youtube.com/channel/UCA0H2KIWgWTwpTFjSxp0now?sub_confirmation=1" target="_blank">YouTube</a></li> |
||||
</ul> |
||||
</div> |
||||
<div className="site-learn foot-col col-12 col-sm-4 col-lg-2"> |
||||
<ul> |
||||
<li className="foot-header">Most Visited</li> |
||||
<li><a href="/frontend">Frontend Roadmap</a></li> |
||||
<li><a href="/backend">Backend Roadmap</a></li> |
||||
<li><a href="/devops">DevOps Roadmap</a></li> |
||||
<li><a href="/roadmaps">Upcoming</a></li> |
||||
</ul> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<CustomAd /> |
||||
|
||||
{/* Do not show on local */} |
||||
{ process.env.GA_SECRET && false && ( |
||||
<> |
||||
<script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?serve=CE7DLK3Y&placement=roadmapsh" id="_carbonads_js"></script> |
||||
{/*<div id="codefund"></div>*/} |
||||
{/*<script src="https://app.codefund.io/properties/681/funder.js" async></script>*/} |
||||
</> |
||||
) } |
||||
</FooterWrap> |
||||
); |
||||
|
||||
export default PageFooter; |
||||
@ -1,94 +0,0 @@ |
||||
import styled from 'styled-components'; |
||||
|
||||
export const FooterWrap = styled.div` |
||||
padding: 65px 0; |
||||
|
||||
.site-meta { |
||||
margin-bottom: 30px; |
||||
width: 350px; |
||||
|
||||
.brand-detail { |
||||
display: flex; |
||||
align-items: center; |
||||
} |
||||
|
||||
.brand { |
||||
display: flex; |
||||
align-items: center; |
||||
font-weight: 600; |
||||
color: #000; |
||||
text-decoration: none; |
||||
|
||||
img { |
||||
height: 25px; |
||||
width: 25px; |
||||
margin-right: 8px; |
||||
} |
||||
} |
||||
|
||||
.preposition { |
||||
margin: 0 7px; |
||||
} |
||||
|
||||
.follow-author { |
||||
background-color: #1e99e6; |
||||
border-radius: 3px; |
||||
color: #fff; |
||||
cursor: pointer; |
||||
font-size: 12px; |
||||
font-weight: 600; |
||||
line-height: 20px; |
||||
padding: 0 6px; |
||||
white-space: nowrap; |
||||
text-decoration: none; |
||||
|
||||
&:hover { |
||||
background: #43aaea; |
||||
} |
||||
} |
||||
|
||||
.brand-explanation { |
||||
color: #999; |
||||
|
||||
p { |
||||
font-size: 15px; |
||||
line-height: 24px; |
||||
margin: 15px 0; |
||||
} |
||||
} |
||||
|
||||
.meta-links { |
||||
color: #a3a3a3; |
||||
font-size: 15px; |
||||
|
||||
a { |
||||
color: #000; |
||||
text-decoration: none; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.foot-col { |
||||
margin-bottom: 20px; |
||||
a { |
||||
color: #999; |
||||
} |
||||
|
||||
.foot-header { |
||||
font-weight: 500; |
||||
margin-bottom: 7px; |
||||
} |
||||
|
||||
ul { |
||||
margin: 0; |
||||
padding: 0; |
||||
|
||||
li { |
||||
margin-bottom: 2px; |
||||
font-size: 15px; |
||||
list-style: none; |
||||
margin-left: 0; |
||||
} |
||||
} |
||||
} |
||||
`;
|
||||
@ -1,16 +0,0 @@ |
||||
import { HeaderWrap, Subtitle, Title } from './style'; |
||||
|
||||
const PageHeader = ({ |
||||
title, |
||||
subtitle, |
||||
children, |
||||
}) => ( |
||||
<HeaderWrap> |
||||
<Title>{ title }</Title> |
||||
<Subtitle dangerouslySetInnerHTML={{ __html: subtitle }} /> |
||||
|
||||
{ children } |
||||
</HeaderWrap> |
||||
); |
||||
|
||||
export default PageHeader; |
||||
@ -1,22 +0,0 @@ |
||||
import styled from 'styled-components'; |
||||
|
||||
export const HeaderWrap = styled.div` |
||||
text-align: center; |
||||
padding: 45px 30px; |
||||
`;
|
||||
|
||||
export const Title = styled.h1` |
||||
font-size: 48px; |
||||
font-weight: 700; |
||||
margin-bottom: 12px; |
||||
`;
|
||||
|
||||
export const Subtitle = styled.p` |
||||
font-size: 16px; |
||||
color: #444; |
||||
|
||||
a { |
||||
color: inherit; |
||||
font-weight: 700; |
||||
} |
||||
`;
|
||||
@ -1,13 +0,0 @@ |
||||
import { HeaderWrap, Subtitle, Title, Logo } from './style'; |
||||
|
||||
const PageLogoHeader = ({ title, subtitle, children, }) => ( |
||||
<HeaderWrap> |
||||
<Logo src='/brand.png' alt='' /> |
||||
<Title>{ title }</Title> |
||||
<Subtitle dangerouslySetInnerHTML={{ __html: subtitle }} /> |
||||
|
||||
{ children } |
||||
</HeaderWrap> |
||||
); |
||||
|
||||
export default PageLogoHeader; |
||||
@ -1,30 +0,0 @@ |
||||
import styled from 'styled-components'; |
||||
|
||||
export const HeaderWrap = styled.div` |
||||
text-align: center; |
||||
padding: 45px 30px; |
||||
`;
|
||||
|
||||
export const Title = styled.h1` |
||||
font-size: 40px; |
||||
font-weight: 700; |
||||
margin-bottom: 12px; |
||||
`;
|
||||
|
||||
export const Subtitle = styled.p` |
||||
font-size: 16px; |
||||
color: #444; |
||||
margin-bottom: 0; |
||||
|
||||
a { |
||||
color: inherit; |
||||
font-weight: 700; |
||||
} |
||||
`;
|
||||
|
||||
|
||||
export const Logo = styled.img` |
||||
width: 75px; |
||||
height: 75px; |
||||
margin-bottom: 26px; |
||||
`;
|
||||
@ -1,62 +0,0 @@ |
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; |
||||
import { faArrowLeft, faClock, faEnvelope, faHandshake } from '@fortawesome/free-solid-svg-icons'; |
||||
import { BadgeLink, BadgesList, DarkBadge, PrimaryBadge, SecondaryBadge } from 'components/badges'; |
||||
import siteConfig from "content/site"; |
||||
import { Description, Header, Title, MenuItemLink, MenuItems } from './style'; |
||||
import Link from 'next/link'; |
||||
import classNames from 'classnames'; |
||||
|
||||
const RoadmapHeader = ({ roadmap, page = 'landscape' }) => ( |
||||
<Header> |
||||
<Title>{ roadmap.title }</Title> |
||||
<Description>{ roadmap.description }</Description> |
||||
<BadgesList className="mt-4"> |
||||
<BadgeLink href="/roadmaps"> |
||||
<DarkBadge> |
||||
<FontAwesomeIcon className='d-none d-md-block' icon={ faArrowLeft } /> |
||||
Other Roadmaps |
||||
</DarkBadge> |
||||
</BadgeLink> |
||||
{ roadmap.upcoming && ( |
||||
<BadgeLink href="/signup"> |
||||
<SecondaryBadge> |
||||
<FontAwesomeIcon className='d-none d-md-block' icon={ faClock } /> |
||||
Upcoming Roadmap |
||||
</SecondaryBadge> |
||||
</BadgeLink> |
||||
) } |
||||
{ !roadmap.upcoming && ( |
||||
<BadgeLink href={ `${siteConfig.url.issue}?title=[${roadmap.title}] - Title Here` } target="_blank" className='d-none d-md-block' > |
||||
<SecondaryBadge> |
||||
<FontAwesomeIcon icon={ faHandshake } /> |
||||
Suggest Changes |
||||
</SecondaryBadge> |
||||
</BadgeLink> |
||||
) } |
||||
|
||||
<BadgeLink href="/signup"> |
||||
<PrimaryBadge> |
||||
<FontAwesomeIcon className='d-none d-md-block' icon={ faEnvelope } /> |
||||
Send me Updates |
||||
</PrimaryBadge> |
||||
</BadgeLink> |
||||
</BadgesList> |
||||
|
||||
<MenuItems className="border-bottom"> |
||||
<div className={ classNames({ 'd-none': roadmap.title.toLowerCase() !== 'frontend developer' })}> |
||||
<Link href={ `${roadmap.url}` } passHref> |
||||
<MenuItemLink className={ classNames({ active: page === 'landscape', }) }>Landscape</MenuItemLink> |
||||
</Link> |
||||
<Link href={ `${roadmap.url}/resources` } passHref> |
||||
<MenuItemLink className={ classNames({ active: page === 'resources', }) }>Resources</MenuItemLink> |
||||
</Link> |
||||
{/*<Link href={ `${roadmap.url}/resources` } passHref>*/} |
||||
{/* <MenuItemLink className={ classNames({ active: false, }) }>Project Ideas</MenuItemLink>*/} |
||||
{/*</Link>*/} |
||||
</div> |
||||
</MenuItems> |
||||
|
||||
</Header> |
||||
); |
||||
|
||||
export default RoadmapHeader; |
||||
@ -1,50 +0,0 @@ |
||||
import styled from 'styled-components'; |
||||
|
||||
export const Header = styled.div` |
||||
text-align: center; |
||||
padding: 45px 30px 10px; |
||||
`;
|
||||
|
||||
export const Title = styled.h1` |
||||
font-weight: 700; |
||||
margin-bottom: 12px; |
||||
font-size: 48px; |
||||
`;
|
||||
|
||||
export const Description = styled.p` |
||||
font-size: 16px; |
||||
color: #444444; |
||||
`;
|
||||
|
||||
export const MenuItems = styled.div` |
||||
margin: 35px 0 15px; |
||||
`;
|
||||
|
||||
export const MenuItemLink = styled.a` |
||||
display: inline-block; |
||||
position: relative; |
||||
padding: 5px 10px 8px; |
||||
text-decoration: none; |
||||
color: rgb(102, 102, 102); |
||||
font-size: 14px; |
||||
font-weight: 400; |
||||
&.active, &.active:hover { |
||||
color: #2d2d2d; |
||||
|
||||
&:after { |
||||
position: absolute; |
||||
content: ""; |
||||
display: block; |
||||
height: 0; |
||||
left: 9px; |
||||
right: 9px; |
||||
bottom: -1px; |
||||
border-bottom: 2px solid currentColor; |
||||
} |
||||
} |
||||
|
||||
&:hover { |
||||
text-decoration: none; |
||||
color: #111111; |
||||
} |
||||
`;
|
||||
@ -1,35 +0,0 @@ |
||||
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; |
||||
@ -1,21 +0,0 @@ |
||||
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; |
||||
`;
|
||||
@ -1,36 +0,0 @@ |
||||
import { Summary, SummaryContainer, UpcomingContainer } from './style'; |
||||
import classNames from 'classnames'; |
||||
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 RoadmapSummary = ({ roadmap }) => { |
||||
if (roadmap.upcoming) { |
||||
return ( |
||||
<> |
||||
<RoadmapHeader roadmap={ roadmap } /> |
||||
<UpcomingContainer> |
||||
<GuideBody guide={{ fileName: 'upcoming' }} /> |
||||
</UpcomingContainer> |
||||
</> |
||||
); |
||||
} |
||||
|
||||
const filePath = roadmap.path.replace(/^\//, ''); |
||||
const RoadmapContent = require(`../../content/${filePath}`).default; |
||||
|
||||
return ( |
||||
<SummaryContainer> |
||||
<RoadmapHeader roadmap={ roadmap } /> |
||||
<Summary className={classNames("container", { "container-small": roadmap.isTextHeavy })}> |
||||
<MdRenderer> |
||||
<RoadmapContent /> |
||||
</MdRenderer> |
||||
<SharePage title={ roadmap.description } url={ roadmap.url } /> |
||||
</Summary> |
||||
</SummaryContainer> |
||||
) |
||||
}; |
||||
|
||||
export default RoadmapSummary; |
||||
@ -1,21 +0,0 @@ |
||||
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; |
||||
`;
|
||||
@ -1,28 +0,0 @@ |
||||
import { Badge, BlockItem, ItemSubtitle, ItemTitle, ItemWrap } from './style'; |
||||
|
||||
const RowBlock = ({ |
||||
title, |
||||
subtitle, |
||||
url, |
||||
badge, |
||||
openExternal = false, |
||||
disabled = false, |
||||
children = null |
||||
}) => ( |
||||
<ItemWrap className="col-md-6 col-lg-4 col-xl-4"> |
||||
<BlockItem href={ url } disabled={ disabled } target={openExternal ? '_blank' : '_self'}> |
||||
{ !children && ( |
||||
<> |
||||
<ItemTitle> |
||||
{ title } |
||||
{ badge && <Badge>{ badge }</Badge>} |
||||
</ItemTitle> |
||||
<ItemSubtitle>{ subtitle }</ItemSubtitle> |
||||
</> |
||||
) } |
||||
{ children } |
||||
</BlockItem> |
||||
</ItemWrap> |
||||
); |
||||
|
||||
export default RowBlock; |
||||
@ -1,62 +0,0 @@ |
||||
import styled from 'styled-components'; |
||||
|
||||
export const ItemWrap = styled.div` |
||||
padding: 0 10px 20px; |
||||
`;
|
||||
|
||||
export const BlockItem = styled.a` |
||||
min-height: 114px; |
||||
box-shadow: rgba(0, 0, 0, 0.12) 0 5px 10px; |
||||
transition: box-shadow 0.2s ease 0s; |
||||
align-items: stretch; |
||||
flex: 1; |
||||
display: flex; |
||||
flex-direction: column; |
||||
min-width: 1px; |
||||
max-width: 100%; |
||||
background: white; |
||||
padding: 20px; |
||||
border-radius: 10px; |
||||
justify-content: center; |
||||
text-decoration:none; |
||||
opacity: ${ props => props.disabled ? 0.5 : 1 }; |
||||
|
||||
&:hover { |
||||
text-decoration:none; |
||||
box-shadow: rgba(0, 0, 0, 0.12) 0 30px 60px; |
||||
z-index: 1; |
||||
} |
||||
`;
|
||||
|
||||
export const ItemTitle = styled.h3` |
||||
font-weight: 600; |
||||
font-size: 18px; |
||||
line-height: 24px; |
||||
color: #101010; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: flex-start; |
||||
`;
|
||||
|
||||
export const Badge = styled.span` |
||||
font-size: 10px; |
||||
font-weight: 600; |
||||
background: #8a8a8a; |
||||
color: white; |
||||
padding: 0 8px; |
||||
border-radius: 4px; |
||||
text-transform: uppercase; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
margin-left: 10px; |
||||
height: 18px; |
||||
`;
|
||||
|
||||
export const ItemSubtitle = styled.p` |
||||
font-size: 14px; |
||||
color: rgb(102, 102, 102); |
||||
white-space: normal; |
||||
line-height: 1.5; |
||||
margin: 0; |
||||
`;
|
||||
@ -1,21 +0,0 @@ |
||||
import styled from 'styled-components'; |
||||
|
||||
export const ShareIcon = styled.a` |
||||
display: block; |
||||
width: 22px; |
||||
height: 22px; |
||||
margin-bottom: 8px; |
||||
text-align: center; |
||||
|
||||
svg { |
||||
height: 22px !important; |
||||
width: 22px !important; |
||||
color: #757575; |
||||
transition: all 0.2s; |
||||
vertical-align: top; |
||||
} |
||||
|
||||
&:hover svg { |
||||
color: #000000 |
||||
} |
||||
`;
|
||||
@ -1,37 +0,0 @@ |
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; |
||||
import { faFacebookSquare, faHackerNewsSquare, faRedditSquare, faTwitterSquare } from '@fortawesome/free-brands-svg-icons'; |
||||
|
||||
import { getFacebookShareUrl, getHnShareUrl, getRedditShareUrl, getTwitterShareUrl } from 'lib/url'; |
||||
import { ShareIconsList, ShareWrap } from './style'; |
||||
import { ShareIcon } from 'components/share-icon'; |
||||
|
||||
const SharePage = ({ |
||||
url, |
||||
title, |
||||
twitterUsername, |
||||
}) => ( |
||||
<ShareWrap> |
||||
<ShareIconsList className="d-none d-sm-flex"> |
||||
<ShareIcon |
||||
href={ getTwitterShareUrl({ |
||||
text: `${title} ${twitterUsername ? `by @${twitterUsername}` : ''}`, |
||||
url: url |
||||
})} |
||||
target="_blank" |
||||
> |
||||
<FontAwesomeIcon icon={ faTwitterSquare } /> |
||||
</ShareIcon> |
||||
<ShareIcon href={ getFacebookShareUrl({ text: title, url: url }) } target="_blank"> |
||||
<FontAwesomeIcon icon={ faFacebookSquare } /> |
||||
</ShareIcon> |
||||
<ShareIcon href={ getHnShareUrl({ text: title, url: url })} target="_blank"> |
||||
<FontAwesomeIcon icon={faHackerNewsSquare}/> |
||||
</ShareIcon> |
||||
<ShareIcon href={ getRedditShareUrl({ text: title, url: url })} target="_blank"> |
||||
<FontAwesomeIcon icon={ faRedditSquare } /> |
||||
</ShareIcon> |
||||
</ShareIconsList> |
||||
</ShareWrap> |
||||
); |
||||
|
||||
export default SharePage; |
||||
@ -1,21 +0,0 @@ |
||||
import styled from 'styled-components'; |
||||
|
||||
export const ShareIconsList = styled.div` |
||||
display: flex; |
||||
flex-direction: column; |
||||
align-items: center; |
||||
justify-content: center; |
||||
position: sticky; |
||||
top: 65px; |
||||
`;
|
||||
|
||||
export const ShareWrap = styled.div` |
||||
display: flex; |
||||
align-items: center; |
||||
flex-direction: column; |
||||
position: absolute; |
||||
padding: 0 0; |
||||
top: 0; |
||||
left: -40px; |
||||
min-height: 100%; |
||||
`;
|
||||
@ -1,17 +0,0 @@ |
||||
import { SignUpWrap, Title, Subtitle, Textbox, Button } from './style'; |
||||
|
||||
const SignUpForm = () => ( |
||||
<SignUpWrap> |
||||
<Title>Subscribe</Title> |
||||
<Subtitle>Enter your email below to get notified about the new roadmaps, guides and updates</Subtitle> |
||||
<form action="https://kamranahmed.us9.list-manage.com/subscribe/post?u=6f57b741a6a939744f1f203a0&id=f9ca4d6aee" target="_blank" method="post"> |
||||
<Textbox type="email" name="EMAIL" required placeholder="Your email" /> |
||||
<div style={{position: 'absolute', left: '-5000px'}}> |
||||
<input type="text" name="b_6f57b741a6a939744f1f203a0_f9ca4d6aee" tabIndex="-1" /> |
||||
</div> |
||||
<Button type="submit">Subscribe</Button> |
||||
</form> |
||||
</SignUpWrap> |
||||
); |
||||
|
||||
export default SignUpForm; |
||||
@ -1,57 +0,0 @@ |
||||
import styled from 'styled-components'; |
||||
|
||||
export const SignUpWrap = styled.div` |
||||
max-width: 400px; |
||||
margin: 200px auto; |
||||
text-align: center; |
||||
`;
|
||||
|
||||
export const Title = styled.h1` |
||||
font-size: 48px; |
||||
font-weight: 700; |
||||
margin-bottom: 17px; |
||||
`;
|
||||
|
||||
export const Subtitle = styled.p` |
||||
font-size: 16px; |
||||
`;
|
||||
|
||||
export const Textbox = styled.input` |
||||
display: block; |
||||
width: 100%; |
||||
padding: 10px 15px; |
||||
font-size: 16px; |
||||
font-weight: 400; |
||||
line-height: 1.5; |
||||
color: #495057; |
||||
height: auto; |
||||
outline: none; |
||||
background-color: #fff; |
||||
border: 1px solid #ced4da; |
||||
border-radius: 5px; |
||||
|
||||
&:focus { |
||||
border: 1px solid #101010; |
||||
} |
||||
`;
|
||||
|
||||
export const Button = styled.button` |
||||
-webkit-appearance: none; |
||||
border: none; |
||||
outline: none; |
||||
box-shadow: none; |
||||
display: block; |
||||
text-align: center; |
||||
width: 100%; |
||||
padding: 10px 15px; |
||||
margin-top: 10px; |
||||
background: #333; |
||||
color: white; |
||||
border-radius: 5px; |
||||
|
||||
&:hover, &:active, &:focus { |
||||
background: #000000; |
||||
box-shadow: none; |
||||
outline: none; |
||||
} |
||||
`;
|
||||
@ -1,26 +0,0 @@ |
||||
import { HeaderWrap } from './style'; |
||||
|
||||
const SiteNav = () => ( |
||||
<HeaderWrap> |
||||
<div className='top-row container'> |
||||
<div className='flex-grow-1 brand'> |
||||
<a href='/'> |
||||
<img src='/brand.png' alt='' /> |
||||
</a> |
||||
</div> |
||||
<div className='nav-links'> |
||||
<a href='/guides'>Read</a> |
||||
<a href='/watch'> |
||||
Watch |
||||
<span className='new-item' /> |
||||
</a> |
||||
</div> |
||||
|
||||
<div className='ml-3 align-items-center d-none d-md-flex'> |
||||
<iframe src="https://ghbtns.com/github-btn.html?user=kamranahmedse&repo=developer-roadmap&type=star&count=true&size=large" frameBorder="0" scrolling="0" width="190px" height="30px"></iframe> |
||||
</div> |
||||
</div> |
||||
</HeaderWrap> |
||||
); |
||||
|
||||
export default SiteNav; |
||||
@ -1,61 +0,0 @@ |
||||
import styled from 'styled-components'; |
||||
|
||||
export const HeaderWrap = styled.div` |
||||
padding: 15px 0; |
||||
font-size: 18px; |
||||
|
||||
.top-row { |
||||
display: flex; |
||||
align-items: center; |
||||
|
||||
> span { |
||||
display: flex; |
||||
margin-left: 12px; |
||||
} |
||||
|
||||
.github-button { |
||||
font-size: 16px; |
||||
color: #666; |
||||
padding-left: 10px; |
||||
} |
||||
} |
||||
|
||||
.brand img { |
||||
padding: 5px 0; |
||||
height: 50px; |
||||
text-decoration: none; |
||||
border-radius: 2px; |
||||
} |
||||
|
||||
.nav-links { |
||||
a { |
||||
position: relative; |
||||
padding: 0 10px; |
||||
text-decoration: none; |
||||
font-size: 16px; |
||||
color: #666; |
||||
} |
||||
|
||||
.signup { |
||||
background: #101010; |
||||
border-radius: 5px; |
||||
color: #ffffff; |
||||
padding: 7px 10px; |
||||
margin-left: 15px; |
||||
|
||||
&:hover { |
||||
background: #2d2d2d; |
||||
} |
||||
} |
||||
|
||||
.new-item { |
||||
position: absolute; |
||||
top: 0; |
||||
right: 0; |
||||
display: inline-block; |
||||
padding: 3px; |
||||
background: #e25712; |
||||
border-radius: 100%; |
||||
} |
||||
} |
||||
`;
|
||||
@ -1,26 +0,0 @@ |
||||
import React from 'react'; |
||||
import { BannerWrap, CloseSponsor, SponsorLogo } from './style'; |
||||
|
||||
export function SponsorBanner({ onCloseBanner = () => null }) { |
||||
return ( |
||||
<div className='row'> |
||||
<div className='col p-0'> |
||||
<BannerWrap |
||||
href={`https://www.youtube.com/channel/UCA0H2KIWgWTwpTFjSxp0now?sub_confirmation=1`} |
||||
target='_blank' |
||||
className='alert alert-info' |
||||
> |
||||
<SponsorLogo src='/sponsors/youtube.svg' /> |
||||
We now have a youtube channel. <span className='d-none d-sm-inline-block'>Subscribe for the video content.</span> |
||||
|
||||
<CloseSponsor |
||||
onClick={(e) => { |
||||
e.preventDefault(); |
||||
onCloseBanner(); |
||||
}} |
||||
className='close'>×</CloseSponsor> |
||||
</BannerWrap> |
||||
</div> |
||||
</div> |
||||
); |
||||
} |
||||
@ -1,49 +0,0 @@ |
||||
import styled from 'styled-components'; |
||||
|
||||
export const BannerWrap = styled.a` |
||||
margin-bottom: 0; |
||||
//background: #101010;
|
||||
//color: white;
|
||||
background: #ffe0b2; |
||||
color: #d8362a; |
||||
font-weight: 600; |
||||
border: 0; |
||||
border-radius: 0; |
||||
padding: 10px 15px; |
||||
display: block; |
||||
text-align: center; |
||||
transition: all 200ms; |
||||
|
||||
&:hover { |
||||
background: #ffd698; |
||||
color: #bd2015; |
||||
text-decoration: none; |
||||
} |
||||
`;
|
||||
|
||||
export const SponsorLogo = styled.img` |
||||
height: 20px; |
||||
margin-right: 10px; |
||||
position: relative; |
||||
top: -2px; |
||||
`;
|
||||
|
||||
export const EmojiWrap = styled.img` |
||||
height: 18px; |
||||
position: relative; |
||||
top: -1px; |
||||
margin: 0 6px 0 6px; |
||||
`;
|
||||
|
||||
export const CloseSponsor = styled.span` |
||||
text-shadow: none; |
||||
margin-right: 15px; |
||||
position: relative; |
||||
top: -2px; |
||||
color: #101010; |
||||
|
||||
&:hover { |
||||
opacity: 1; |
||||
color: #101010; |
||||
} |
||||
`;
|
||||
@ -1,22 +0,0 @@ |
||||
import styled from 'styled-components'; |
||||
|
||||
export const TosPage = styled.div` |
||||
h2 { |
||||
font-weight: 700; |
||||
margin-bottom: 16px; |
||||
} |
||||
|
||||
h4 { |
||||
margin-top: 25px; |
||||
margin-bottom: 10px; |
||||
font-weight: 600; |
||||
} |
||||
|
||||
p { |
||||
color: #999; |
||||
} |
||||
|
||||
a { |
||||
color: #333; |
||||
} |
||||
`;
|
||||
@ -1,42 +0,0 @@ |
||||
[ |
||||
{ |
||||
"username": "kamranahmedse", |
||||
"name": "Kamran Ahmed", |
||||
"twitter": "kamranahmedse", |
||||
"picture": "/authors/kamranahmedse.jpeg", |
||||
"bio": "Lead engineer at Tajawal. Lover of all things web and opensource. Created roadmap.sh to help the confused ones." |
||||
}, |
||||
{ |
||||
"username": "jesse", |
||||
"name": "Jesse Li", |
||||
"twitter": "__jesse_li", |
||||
"picture": "/authors/jesse.png", |
||||
"bio": "Software engineer." |
||||
}, |
||||
{ |
||||
"username": "dmytrobol", |
||||
"name": "Dmytro Bolkachov", |
||||
"twitter": "dmytrobol", |
||||
"picture": "/authors/dmytrobol.png", |
||||
"bio": "JavaScript Lad, Movie buff and coder interested in everything web related" |
||||
}, |
||||
{ |
||||
"username": "spekulatius", |
||||
"name": "Peter Thaleikis", |
||||
"twitter": "spekulatius1984", |
||||
"picture": "/authors/spekulatius.jpg", |
||||
"bio": "Developer building side-projects for fun, lover of the web and open source" |
||||
}, |
||||
{ |
||||
"username": "ebrahimbharmal007", |
||||
"name": "Ebrahim Bharmal", |
||||
"twitter": "BharmalEbrahim", |
||||
"picture": "/authors/ebrahimbharmal007.png", |
||||
"bio": "Love building projects using tools completely new to me. Python forever. Senior at University of Texas at Arlington (2021)" |
||||
}, |
||||
{ |
||||
"username": "lesovsky", |
||||
"name": "Alexey Lesovsky", |
||||
"bio": "Linux system administrator and PostgreSQL DBA at DataEgret." |
||||
} |
||||
] |
||||
@ -1,5 +0,0 @@ |
||||
Asymptotic notation is the standard way of measuring the time and space that an algorithm will consume as the input grows. In one of my last guides, I covered "Big-O notation" and a lot of you asked for a similar one for Asymptotic notation. You can find the [previous guide here](/guides/big-o-notation). |
||||
|
||||
[](/guides/asymptotic-notation.png) |
||||
|
||||
Here is the [original tweet](https://twitter.com/kamranahmedse/status/1243861514907418624) where this image was posted. |
||||
@ -1,3 +0,0 @@ |
||||
[](/guides/basic-authentication.png) |
||||
|
||||
Here is the [original tweet](https://twitter.com/kamranahmedse/status/1261783266044063748) where this image was posted. |
||||
@ -1,5 +0,0 @@ |
||||
Big-O notation is the mathematical notation that helps analyse the algorithms to get an idea about how they might perform as the input grows. The image below explains Big-O in a simple way without using any fancy terminology. |
||||
|
||||
[](/guides/big-o-notation.png) |
||||
|
||||
Here is the [original tweet](https://twitter.com/kamranahmedse/status/1235708842610212864) where this image was posted. |
||||
@ -1,3 +0,0 @@ |
||||
[](/guides/character-encodings.png) |
||||
|
||||
Here is the [original tweet](https://twitter.com/kamranahmedse/status/1259631582362689537) where this image was posted. |
||||
@ -1,5 +0,0 @@ |
||||
The image below details the differences between the continuous integration and continuous delivery. Also, here is the [accompanying video on implementing that with GitHub actions](https://www.youtube.com/watch?v=nyKZTKQS_EQ). |
||||
|
||||
[](/guides/ci-cd.png) |
||||
|
||||
Here is the [original tweet](https://twitter.com/kamranahmedse/status/1282806173939511298) where this image was posted. |
||||
File diff suppressed because it is too large
Load Diff
@ -1,3 +0,0 @@ |
||||
[](/guides/dhcp.png) |
||||
|
||||
Here is the [original tweet](https://twitter.com/kamranahmedse/status/1254142557417857025) where this image was posted. |
||||
@ -1,5 +0,0 @@ |
||||
DNS or Domain Name System is one of the fundamental blocks of the internet. As a developer, you should have at-least the basic understanding of how it works. This article is a brief introduction to what is DNS and how it works. |
||||
|
||||
DNS at its simplest is like a phonebook on your mobile phone. Whenever you have to call one of your contacts, you can either dial their number from your memory or use their name which will then be used by your mobile phone to search their number in your phone book to call them. Every time you make a new friend, or your existing friend gets a mobile phone, you have to memorize their phone number or save it in your phonebook to be able to call them later on. DNS or Domain Name System, in a similar fashion, is a mechanism that allows you to browse websites on the internet. Just like your mobile phone does not know how to call without knowing the phone number, your browser does not know how to open a website just by the domain name; it needs to know the IP Address for the website to open. You can either type the IP Address to open, or provide the domain name and press enter which will then be used by your browser to find the IP address by going through several hoops. The picture below is the illustration of how your browser finds a website on the internet. |
||||
|
||||
[](https://i.imgur.com/z9rwm5A.png) |
||||
@ -1,41 +0,0 @@ |
||||
Around 10 years ago, Jeff Atwood (the founder of stackoverflow) made a case that JavaScript is going to be the future and he coined the “Atwood Law” which states that *Any application that can be written in JavaScript will eventually be written in JavaScript*. Fast-forward to today, 10 years later, if you look at it it rings truer than ever. JavaScript is continuing to gain more and more adoption. |
||||
|
||||
### JavaScript is announced |
||||
JavaScript was initially created by [Brendan Eich](https://twitter.com/BrendanEich) of NetScape and was first announced in a press release by Netscape in 1995. It has a bizarre history of naming; initally it was named `Mocha` by the creator, which was later renamed to `LiveScript`. In 1996, about a year later after the release, NetScape decided to rename it to be `JavaScript` with hopes of capitalizing on the Java community (although JavaScript did not have any relationship with Java) and released Netscape 2.0 with the official support of JavaScript. |
||||
|
||||
### ES1, ES2 and ES3 |
||||
In 1996, Netscape decided to submit it to [ECMA International](https://en.wikipedia.org/wiki/Ecma_International) with the hopes of getting it standardized. First edition of the standard specification was released in 1997 and the language was standardized. After the initial release, `ECMAScript` was continued to be worked upon and in no-time two more versions were released ECMAScript 2 in 1998 and ECMAScript 3 in 1999. |
||||
|
||||
### Decade of Silence and ES4 |
||||
After the release of ES3 in 1999, there was a complete silence for a decade and no changes were made to the official standard. There was some work on the fourth edition in the initial days; some of the features that were being discussed included classes, modules, static typings, destructuring etc. It was being targeted to be released by 2008 but was abandoned due to political differences concerning language complexity. However, the vendors kept introducing the extensions to the language and the developers were left scratching their heads — adding polyfills to battle compatibility issues between different browsers. |
||||
|
||||
### From silence to ES5 |
||||
Google, Microsoft, Yahoo and other disputers of ES4 came together and decided to work on a less ambitious update to ES3 tentatively named ES3.1. But the teams were still fighting about what to include from ES4 and what not. Finally, in 2009 ES5 was released mainly focusing on fixing the compatibility and security issues etc. But there wasn’t much of a splash in the water — it took ages for the vendors to incorporate the standards and many developers were still using ES3 without being aware of the “modern” standards. |
||||
|
||||
### Release of ES6 — ECMAScript 2015 |
||||
After a few years of the release of ES5, things started to change, TC39 (the committee under ECMA international responsible for ECMAScript standardization) kept working on the next version of ECMAScript (ES6) which was originally named ES Harmony, before being eventually released with the name ES2015. ES2015 adds significant features and syntactic sugar to allow writing complex applications. Some of the features that ES6 has to offer, include Classes, Modules, Arrows, Enhanced object literals, Template strings, Destructuring, Default param values + rest + spread, Let and Const, Iterators + for..of, Generators, Maps + Sets, Proxies, Symbols, Promises, math + number + string + array + object APIs [etc](http://es6-features.org/#Constants) |
||||
|
||||
Browser support for ES6 is still scarce but everything that ES6 has to offer is still available to developers by transpiling the ES6 code to ES5. With the release of 6th version of ECMAScript, TC39 decided to move to yearly model of releasing updates to ECMAScript so to make sure that the new features are added as soon as they are approved and we don’t have to wait for the full specification to be drafted and approved — thus 6th version of ECMAScript was renamed as ECMAScript 2015 or ES2015 before the release in June 2015. And the next versions of ECMAScript were decided to published in June of every year. |
||||
|
||||
### Release of ES7 — ECMAScript 2016 |
||||
In June 2016, seventh version of ECMAScript was released. As ECMAScript has been moved to an yearly release model, ECMAScript 2016 (ES2016) comparatively did not have much to offer. ES2016 includes just two new features |
||||
|
||||
* Exponentiation operator `**` |
||||
* `Array.prototype.includes` |
||||
|
||||
### Release of ES8 — ECMAScript 2017 |
||||
The eighth version of ECMAScript was released in June 2017. The key highlight of ES8 was the addition of async functions. Here is the list of new features in ES8 |
||||
|
||||
* `Object.values()` and `Object.entries()` |
||||
* String padding i.e. `String.prototype.padEnd()` and `String.prototype.padStart()` |
||||
* `Object.getOwnPropertyDescriptors` |
||||
* Trailing commas in function parameter lists and calls |
||||
* Async functions |
||||
|
||||
### What is ESNext then? |
||||
ESNext is a dynamic name that refers to whatever the current version of ECMAScript is at the given time. For example, at the time of this writing `ES2017` or `ES8` is `ESNext`. |
||||
|
||||
### What does the future hold? |
||||
Since the release of ES6, [TC39](https://github.com/tc39) has quite streamlined their process. TC39 operates through a Github organization now and there are [several proposals](https://github.com/tc39/proposals) for new features or syntax to be added to the next versions of ECMAScript. Any one can go ahead and [submit a proposal](https://github.com/tc39/proposals) thus resulting in increasing the participation from the community. Every proposal goes through [four stages of maturity](https://tc39.github.io/process-document/) before it makes it into the specification. |
||||
|
||||
And that about wraps it up. Feel free to leave your feedback in the comments section below. Also here are the links to original language specifications [ES6](https://www.ecma-international.org/ecma-262/6.0/), [ES7](https://www.ecma-international.org/ecma-262/7.0/) and [ES8](https://www.ecma-international.org/ecma-262/8.0/). |
||||
@ -1,251 +0,0 @@ |
||||
As users, we easily get frustrated by the buffering videos, the images that take seconds to load, pages that got stuck because the content is being loaded. Loading the resources from some cache is much faster than fetching the same from the originating server. It reduces latency, speeds up the loading of resources, decreases the load on server, cuts down the bandwidth costs etc. |
||||
|
||||
### Introduction |
||||
|
||||
What is web cache? It is something that sits somewhere between the client and the server, continuously looking at the requests and their responses, looking for any responses that can be cached. So that there is less time consumed when the same request is made again. |
||||
|
||||
 |
||||
|
||||
> Note that this image is just to give you an idea. Depending upon the type of cache, the place where it is implemented could vary. More on this later. |
||||
|
||||
Before we get into further details, let me give you an overview of the terms that will be used, further in the article |
||||
|
||||
- **Client** could be your browser or any application requesting the server for some resource |
||||
- **Origin Server**, the source of truth, houses all the content required by the client and is responsible for fulfilling the client requests. |
||||
- **Stale Content** is the cached but expired content |
||||
- **Fresh Content** is the content available in cache that hasn't expired yet |
||||
- **Cache Validation** is the process of contacting the server to check the validity of the cached content and get it updated for when it is going to expire |
||||
- **Cache Invalidation** is the process of removing any stale content available in the cache |
||||
|
||||
 |
||||
|
||||
### Caching Locations |
||||
|
||||
Web cache can be shared or private depending upon the location where it exists. Here is the list of different caching locations |
||||
|
||||
- [Browser Cache](#browser-cache) |
||||
- [Proxy Cache](#proxy-cache) |
||||
- [Reverse Proxy Cache](#reverse-proxy-cache) |
||||
|
||||
#### Browser Cache |
||||
|
||||
You might have noticed that when you click the back button in your browser it takes less time to load the page than the time that it took during the first load; this is the browser cache in play. Browser cache is the most common location for caching and browsers usually reserve some space for it. |
||||
|
||||
 |
||||
|
||||
A browser cache is limited to just one user and unlike other caches, it can store the "private" responses. More on it later. |
||||
|
||||
#### Proxy Cache |
||||
|
||||
Unlike browser cache which serves a single user, proxy caches may serve hundreds of different users accessing the same content. They are usually implemented on a broader level by ISPs or any other independent entities for example. |
||||
|
||||
 |
||||
|
||||
#### Reverse Proxy Cache |
||||
|
||||
Reverse proxy cache or surrogate cache is implemented close to the origin servers in order to reduce the load on server. Unlike proxy caches which are implemented by ISPs etc to reduce the bandwidth usage in a network, surrogates or reverse proxy caches are implemented near to the origin servers by the server administrators to reduce the load on server. |
||||
|
||||
 |
||||
|
||||
Although you can control the reverse proxy caches (since it is implemented by you on your server) you can not avoid or control browser and proxy caches. And if your website is not configured to use these caches properly, it will still be cached using whatever the defaults are set on these caches. |
||||
|
||||
### Caching Headers |
||||
|
||||
So, how do we control the web cache? Whenever the server emits some response, it is accompanied with some HTTP headers to guide the caches whether and how to cache this response. Content provider is the one that has to make sure to return proper HTTP headers to force the caches on how to cache the content. |
||||
|
||||
- [Expires](#expires) |
||||
- [Pragma](#pragma) |
||||
- [Cache-Control](#cache-control) |
||||
- [private](#private) |
||||
- [public](#public) |
||||
- [no-store](#no-store) |
||||
- [no-cache](#no-cache) |
||||
- [max-age: seconds](#max-age) |
||||
- [s-maxage: seconds](#s-maxage) |
||||
- [must-revalidate](#must-revalidate) |
||||
- [proxy-revalidate](#proxy-revalidate) |
||||
- [Mixing Values](#mixing-values) |
||||
- [Validators](#validators) |
||||
- [ETag](#etag) |
||||
- [Last-Modified](#last-modified) |
||||
|
||||
#### Expires |
||||
|
||||
Before HTTP/1.1 and introduction of `Cache-Control`, there was `Expires` header which is simply a timestamp telling the caches how long should some content be considered fresh. Possible value to this header is absolute expiry date; where date has to be in GMT. Below is the sample header |
||||
|
||||
```html |
||||
Expires: Mon, 13 Mar 2017 12:22:00 GMT |
||||
``` |
||||
|
||||
It should be noted that the date cannot be more than a year and if the date format is wrong, content will be considered stale. Also, the clock on cache has to be in sync with the clock on server, otherwise the desired results might not be achieved. |
||||
|
||||
Although, `Expires` header is still valid and is supported widely by the caches, preference should be given to HTTP/1.1 successor of it i.e. `Cache-Control`. |
||||
|
||||
#### Pragma |
||||
|
||||
Another one from the old, pre HTTP/1.1 days, is `Pragma`. Everything that it could do is now possible using the cache-control header given below. However, one thing I would like to point out about it is, you might see `Pragma: no-cache` being used here and there in hopes of stopping the response from being cached. It might not necessarily work; as HTTP specification discusses it in the request headers and there is no mention of it in the response headers. Rather `Cache-Control` header should be used to control the caching. |
||||
|
||||
#### Cache-Control |
||||
|
||||
Cache-Control specifies how long and in what manner should the content be cached. This family of headers was introduced in HTTP/1.1 to overcome the limitations of the `Expires` header. |
||||
|
||||
Value for the `Cache-Control` header is composite i.e. it can have multiple directive/values. Let's look at the possible values that this header may contain. |
||||
|
||||
##### private |
||||
Setting the cache to `private` means that the content will not be cached in any of the proxies and it will only be cached by the client (i.e. browser) |
||||
|
||||
```html |
||||
Cache-Control: private |
||||
``` |
||||
|
||||
Having said that, don't let it fool you in to thinking that setting this header will make your data any secure; you still have to use SSL for that purpose. |
||||
|
||||
##### public |
||||
|
||||
If set to `public`, apart from being cached by the client, it can also be cached by the proxies; serving many other users |
||||
|
||||
```html |
||||
Cache-Control: public |
||||
``` |
||||
|
||||
##### no-store |
||||
**`no-store`** specifies that the content is not to be cached by any of the caches |
||||
|
||||
```html |
||||
Cache-Control: no-store |
||||
``` |
||||
|
||||
##### no-cache |
||||
**`no-cache`** indicates that the cache can be maintained but the cached content is to be re-validated (using `ETag` for example) from the server before being served. That is, there is still a request to server but for validation and not to download the cached content. |
||||
|
||||
```html |
||||
Cache-Control: max-age=3600, no-cache, public |
||||
``` |
||||
|
||||
##### max-age: seconds |
||||
**`max-age`** specifies the number of seconds for which the content will be cached. For example, if the `cache-control` looks like below: |
||||
|
||||
```html |
||||
Cache-Control: max-age=3600, public |
||||
``` |
||||
it would mean that the content is publicly cacheable and will be considered stale after 60 minutes |
||||
|
||||
##### s-maxage: seconds |
||||
**`s-maxage`** here `s-` prefix stands for shared. This directive specifically targets the shared caches. Like `max-age` it also gets the number of seconds for which something is to be cached. If present, it will override `max-age` and `expires` headers for shared caching. |
||||
|
||||
```html |
||||
Cache-Control: s-maxage=3600, public |
||||
``` |
||||
|
||||
##### must-revalidate |
||||
**`must-revalidate`** it might happen sometimes that if you have network problems and the content cannot be retrieved from the server, browser may serve stale content without validation. `must-revalidate` avoids that. If this directive is present, it means that stale content cannot be served in any case and the data must be re-validated from the server before serving. |
||||
|
||||
```html |
||||
Cache-Control: max-age=3600, public, must-revalidate |
||||
``` |
||||
|
||||
##### proxy-revalidate |
||||
**`proxy-revalidate`** is similar to `must-revalidate` but it specifies the same for shared or proxy caches. In other words `proxy-revalidate` is to `must-revalidate` as `s-maxage` is to `max-age`. But why did they not call it `s-revalidate`?. I have no idea why, if you have any clue please leave a comment below. |
||||
|
||||
##### Mixing Values |
||||
You can combine these directives in different ways to achieve different caching behaviors, however `no-cache/no-store` and `public/private` are mutually exclusive. |
||||
|
||||
If you specify both `no-store` and `no-cache`, `no-store` will be given precedence over `no-cache`. |
||||
|
||||
```html |
||||
; If specified both |
||||
Cache-Control: no-store, no-cache |
||||
|
||||
; Below will be considered |
||||
Cache-Control: no-store |
||||
``` |
||||
|
||||
For `private/public`, for any unauthenticated requests cache is considered `public` and for any authenticated ones cache is considered `private`. |
||||
|
||||
### Validators |
||||
|
||||
Up until now we only discussed how the content is cached and how long the cached content is to be considered fresh but we did not discuss how the client does the validation from the server. Below we discuss the headers used for this purpose. |
||||
|
||||
#### ETag |
||||
|
||||
Etag or "entity tag" was introduced in HTTP/1.1 specs. Etag is just a unique identifier that the server attaches with some resource. This ETag is later on used by the client to make conditional HTTP requests stating `"give me this resource if ETag is not same as the ETag that I have"` and the content is downloaded only if the etags do not match. |
||||
|
||||
Method by which ETag is generated is not specified in the HTTP docs and usually some collision-resistant hash function is used to assign etags to each version of a resource. There could be two types of etags i.e. strong and weak |
||||
|
||||
```html |
||||
ETag: "j82j8232ha7sdh0q2882" - Strong Etag |
||||
ETag: W/"j82j8232ha7sdh0q2882" - Weak Etag (prefixed with `W/`) |
||||
``` |
||||
|
||||
A strong validating ETag means that two resources are **exactly** same and there is no difference between them at all. While a weak ETag means that two resources are although not strictly same but could be considered same. Weak etags might be useful for dynamic content, for example. |
||||
|
||||
Now you know what etags are but how does the browser make this request? by making a request to server while sending the available Etag in `If-None-Match` header. |
||||
|
||||
Consider the scenario, you opened a web page which loaded a logo image with caching period of 60 seconds and ETag of `abc123xyz`. After about 30 minutes you reload the page, browser will notice that the logo which was fresh for 60 seconds is now stale; it will trigger a request to server, sending the ETag of the stale logo image in `if-none-match` header |
||||
|
||||
```html |
||||
If-None-Match: "abc123xyz" |
||||
``` |
||||
|
||||
Server will then compare this ETag with the ETag of the current version of resource. If both etags are matched, server will send back the response of `304 Not Modified` which will tell the client that the copy that it has is still good and it will be considered fresh for another 60 seconds. If both the etags do not match i.e. the logo has likely changed and client will be sent the new logo which it will use to replace the stale logo that it has. |
||||
|
||||
#### Last-Modified |
||||
|
||||
Server might include the `Last-Modified` header indicating the date and time at which some content was last modified on. |
||||
|
||||
```html |
||||
Last-Modified: Wed, 15 Mar 2017 12:30:26 GMT |
||||
``` |
||||
|
||||
When the content gets stale, client will make a conditional request including the last modified date that it has inside the header called `If-Modified-Since` to server to get the updated `Last-Modified` date; if it matches the date that the client has, `Last-Modified` date for the content is updated to be considered fresh for another `n` seconds. If the received `Last-Modified` date does not match the one that the client has, content is reloaded from the server and replaced with the content that client has. |
||||
|
||||
```html |
||||
If-Modified-Since: Wed, 15 Mar 2017 12:30:26 GMT |
||||
``` |
||||
|
||||
You might be questioning now, what if the cached content has both the `Last-Modified` and `ETag` assigned to it? Well, in that case both are to be used i.e. there will not be any re-downloading of the resource if and only if `ETag` matches the newly retrieved one and so does the `Last-Modified` date. If either the `ETag` does not match or the `Last-Modified` is greater than the one from the server, content has to be downloaded again. |
||||
|
||||
### Where do I start? |
||||
|
||||
Now that we have got *everything* covered, let us put everything in perspective and see how you can use this information. |
||||
|
||||
#### Utilizing Server |
||||
|
||||
Before we get into the possible caching strategies , let me add the fact that most of the servers including Apache and Nginx allow you to implement your caching policy through the server so that you don't have to juggle with headers in your code. |
||||
|
||||
**For example**, if you are using Apache and you have your static content placed at `/static`, you can put below `.htaccess` file in the directory to make all the content in it be cached for an year using below |
||||
|
||||
```html |
||||
# Cache everything for an year |
||||
Header set Cache-Control "max-age=31536000, public" |
||||
``` |
||||
|
||||
You can further use `filesMatch` directive to add conditionals and use different caching strategy for different kinds of files e.g. |
||||
|
||||
```html |
||||
# Cache any images for one year |
||||
<filesMatch ".(png|jpg|jpeg|gif)$"> |
||||
Header set Cache-Control "max-age=31536000, public" |
||||
</filesMatch> |
||||
|
||||
# Cache any CSS and JS files for a month |
||||
<filesMatch ".(css|js)$"> |
||||
Header set Cache-Control "max-age=2628000, public" |
||||
</filesMatch> |
||||
``` |
||||
|
||||
Or if you don't want to use the `.htaccess` file you can modify Apache's configuration file `http.conf`. Same goes for Nginx, you can add the caching information in the location or server block. |
||||
|
||||
#### Caching Recommendations |
||||
|
||||
There is no golden rule or set standards about how your caching policy should look like, each of the application is different and you have to look and find what suits your application the best. However, just to give you a rough idea |
||||
|
||||
- You can have aggressive caching (e.g. cache for an year) on any static content and use fingerprinted filenames (e.g. `style.ju2i90.css`) so that the cache is automatically rejected whenever the files are updated. |
||||
Also it should be noted that you should not cross the upper limit of one year as it [might not be honored](https://www.w3.org/Protocols/rfc2616/rfc2616-sec14.html#sec14.9) |
||||
- Look and decide do you even need caching for any dynamic content, if yes how long it should be. For example, in case of some RSS feed of a blog there could be the caching of a few hours but there couldn't be any caching for inventory items in an ERP. |
||||
- Always add the validators (preferably ETags) in your response. |
||||
- Pay attention while choosing the visibility (private or public) of the cached content. Make sure that you do not accidentally cache any user-specific or sensitive content in any public proxies. When in doubt, do not use cache at all. |
||||
- Separate the content that changes often from the content that doesn't change that often (e.g. in javascript bundles) so that when it is updated it doesn't need to make the whole cached content stale. |
||||
- Test and monitor the caching headers being served by your site. You can use the browser console or `curl -I http://some-url.com` for that purpose. |
||||
|
||||
And that about wraps it up. Stay tuned for more! |
||||
@ -1,195 +0,0 @@ |
||||
HTTP is the protocol that every web developer should know as it powers the whole web and knowing it is definitely going to help you develop better applications. In this guide, I am going to be discussing what HTTP is, how it came to be, where it is today and how did we get here. |
||||
|
||||
### What is HTTP? |
||||
|
||||
First things first, what is HTTP? HTTP is the `TCP/IP` based application layer communication protocol which standardizes how the client and server communicate with each other. It defines how the content is requested and transmitted across the internet. By application layer protocol, I mean it's just an abstraction layer that standardizes how the hosts (clients and servers) communicate and itself it depends upon `TCP/IP` to get request and response between the client and server. By default TCP port `80` is used but other ports can be used as well. HTTPS, however, uses port `443`. |
||||
|
||||
### HTTP/0.9 – The One Liner (1991) |
||||
|
||||
The first documented version of HTTP was [`HTTP/0.9`](https://www.w3.org/Protocols/HTTP/AsImplemented.html) which was put forward in 1991. It was the simplest protocol ever; having a single method called `GET`. If a client had to access some webpage on the server, it would have made the simple request like below |
||||
|
||||
```html |
||||
GET /index.html |
||||
``` |
||||
And the response from server would have looked as follows |
||||
|
||||
```html |
||||
(response body) |
||||
(connection closed) |
||||
``` |
||||
|
||||
That is, the server would get the request, reply with the HTML in response and as soon as the content has been transferred, the connection will be closed. There were |
||||
|
||||
- No headers |
||||
- `GET` was the only allowed method |
||||
- Response had to be HTML |
||||
|
||||
As you can see, the protocol really had nothing more than being a stepping stone for what was to come. |
||||
|
||||
### HTTP/1.0 - 1996 |
||||
|
||||
In 1996, the next version of HTTP i.e. `HTTP/1.0` evolved that vastly improved over the original version. |
||||
|
||||
Unlike `HTTP/0.9` which was only designed for HTML response, `HTTP/1.0` could now deal with other response formats i.e. images, video files, plain text or any other content type as well. It added more methods (i.e. `POST` and `HEAD`), request/response formats got changed, HTTP headers got added to both the request and responses, status codes were added to identify the response, character set support was introduced, multi-part types, authorization, caching, content encoding and more was included. |
||||
|
||||
Here is how a sample `HTTP/1.0` request and response might have looked like: |
||||
|
||||
```html |
||||
GET / HTTP/1.0 |
||||
Host: kamranahmed.info |
||||
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_5) |
||||
Accept: */* |
||||
``` |
||||
|
||||
As you can see, alongside the request, client has also sent its personal information, required response type etc. While in `HTTP/0.9` client could never send such information because there were no headers. |
||||
|
||||
Example response to the request above may have looked like below |
||||
|
||||
```html |
||||
HTTP/1.0 200 OK |
||||
Content-Type: text/plain |
||||
Content-Length: 137582 |
||||
Expires: Thu, 05 Dec 1997 16:00:00 GMT |
||||
Last-Modified: Wed, 5 August 1996 15:55:28 GMT |
||||
Server: Apache 0.84 |
||||
|
||||
(response body) |
||||
(connection closed) |
||||
``` |
||||
|
||||
In the very beginning of the response there is `HTTP/1.0` (HTTP followed by the version number), then there is the status code `200` followed by the reason phrase (or description of the status code, if you will). |
||||
|
||||
In this newer version, request and response headers were still kept as `ASCII` encoded, but the response body could have been of any type i.e. image, video, HTML, plain text or any other content type. So, now that server could send any content type to the client; not so long after the introduction, the term "Hyper Text" in `HTTP` became misnomer. `HMTP` or Hypermedia transfer protocol might have made more sense but, I guess, we are stuck with the name for life. |
||||
|
||||
One of the major drawbacks of `HTTP/1.0` were you couldn't have multiple requests per connection. That is, whenever a client will need something from the server, it will have to open a new TCP connection and after that single request has been fulfilled, connection will be closed. And for any next requirement, it will have to be on a new connection. Why is it bad? Well, let's assume that you visit a webpage having `10` images, `5` stylesheets and `5` javascript files, totalling to `20` items that needs to fetched when request to that webpage is made. Since the server closes the connection as soon as the request has been fulfilled, there will be a series of `20` separate connections where each of the items will be served one by one on their separate connections. This large number of connections results in a serious performance hit as requiring a new `TCP` connection imposes a significant performance penalty because of three-way handshake followed by slow-start. |
||||
|
||||
#### Three-way Handshake |
||||
|
||||
Three-way handshake in its simplest form is that all the `TCP` connections begin with a three-way handshake in which the client and the server share a series of packets before starting to share the application data. |
||||
|
||||
- `SYN` - Client picks up a random number, let's say `x`, and sends it to the server. |
||||
- `SYN ACK` - Server acknowledges the request by sending an `ACK` packet back to the client which is made up of a random number, let's say `y` picked up by server and the number `x+1` where `x` is the number that was sent by the client |
||||
- `ACK` - Client increments the number `y` received from the server and sends an `ACK` packet back with the number `y+1` |
||||
|
||||
Once the three-way handshake is completed, the data sharing between the client and server may begin. It should be noted that the client may start sending the application data as soon as it dispatches the last `ACK` packet but the server will still have to wait for the `ACK` packet to be recieved in order to fulfill the request. |
||||
|
||||
 |
||||
|
||||
> Please note that there is a minor issue with the image, the last `ACK` packet sent by the client to end the handshake contains only `y+1` i.e. it should have been `ACK:y+1` instead of `ACK: x+1, y+1` |
||||
|
||||
However, some implementations of `HTTP/1.0` tried to overcome this issue by introducing a new header called `Connection: keep-alive` which was meant to tell the server "Hey server, do not close this connection, I need it again". But still, it wasn't that widely supported and the problem still persisted. |
||||
|
||||
Apart from being connectionless, `HTTP` also is a stateless protocol i.e. server doesn't maintain the information about the client and so each of the requests has to have the information necessary for the server to fulfill the request on its own without any association with any old requests. And so this adds fuel to the fire i.e. apart from the large number of connections that the client has to open, it also has to send some redundant data on the wire causing increased bandwidth usage. |
||||
|
||||
### HTTP/1.1 - 1999 |
||||
|
||||
After merely 3 years of `HTTP/1.0`, the next version i.e. `HTTP/1.1` was released in 1999; which made alot of improvements over its predecessor. The major improvements over `HTTP/1.0` included |
||||
|
||||
- **New HTTP methods** were added, which introduced `PUT`, `PATCH`, `OPTIONS`, `DELETE` |
||||
|
||||
- **Hostname Identification** In `HTTP/1.0` `Host` header wasn't required but `HTTP/1.1` made it required. |
||||
|
||||
- **Persistent Connections** As discussed above, in `HTTP/1.0` there was only one request per connection and the connection was closed as soon as the request was fulfilled which resulted in accute performance hit and latency problems. `HTTP/1.1` introduced the persistent connections i.e. **connections weren't closed by default** and were kept open which allowed multiple sequential requests. To close the connections, the header `Connection: close` had to be available on the request. Clients usually send this header in the last request to safely close the connection. |
||||
|
||||
- **Pipelining** It also introduced the support for pipelining, where the client could send multiple requests to the server without waiting for the response from server on the same connection and server had to send the response in the same sequence in which requests were received. But how does the client know that this is the point where first response download completes and the content for next response starts, you may ask! Well, to solve this, there must be `Content-Length` header present which clients can use to identify where the response ends and it can start waiting for the next response. |
||||
|
||||
> It should be noted that in order to benefit from persistent connections or pipelining, `Content-Length` header must be available on the response, because this would let the client know when the transmission completes and it can send the next request (in normal sequential way of sending requests) or start waiting for the the next response (when pipelining is enabled). |
||||
|
||||
> But there was still an issue with this approach. And that is, what if the data is dynamic and server cannot find the content length before hand? Well in that case, you really can't benefit from persistent connections, could you?! In order to solve this `HTTP/1.1` introduced chunked encoding. In such cases server may omit content-Length in favor of chunked encoding (more to it in a moment). However, if none of them are available, then the connection must be closed at the end of request. |
||||
|
||||
- **Chunked Transfers** In case of dynamic content, when the server cannot really find out the `Content-Length` when the transmission starts, it may start sending the content in pieces (chunk by chunk) and add the `Content-Length` for each chunk when it is sent. And when all of the chunks are sent i.e. whole transmission has completed, it sends an empty chunk i.e. the one with `Content-Length` set to zero in order to identify the client that transmission has completed. In order to notify the client about the chunked transfer, server includes the header `Transfer-Encoding: chunked` |
||||
|
||||
- Unlike `HTTP/1.0` which had Basic authentication only, `HTTP/1.1` included digest and proxy authentication |
||||
- Caching |
||||
- Byte Ranges |
||||
- Character sets |
||||
- Language negotiation |
||||
- Client cookies |
||||
- Enhanced compression support |
||||
- New status codes |
||||
- ..and more |
||||
|
||||
I am not going to dwell about all the `HTTP/1.1` features in this post as it is a topic in itself and you can already find a lot about it. The one such document that I would recommend you to read is [Key differences between `HTTP/1.0` and HTTP/1.1](http://www.ra.ethz.ch/cdstore/www8/data/2136/pdf/pd1.pdf) and here is the link to [original RFC](https://tools.ietf.org/html/rfc2616) for the overachievers. |
||||
|
||||
`HTTP/1.1` was introduced in 1999 and it had been a standard for many years. Although, it improved alot over its predecessor; with the web changing everyday, it started to show its age. Loading a web page these days is more resource-intensive than it ever was. A simple webpage these days has to open more than 30 connections. Well `HTTP/1.1` has persistent connections, then why so many connections? you say! The reason is, in `HTTP/1.1` it can only have one outstanding connection at any moment of time. `HTTP/1.1` tried to fix this by introducing pipelining but it didn't completely address the issue because of the **head-of-line blocking** where a slow or heavy request may block the requests behind and once a request gets stuck in a pipeline, it will have to wait for the next requests to be fulfilled. To overcome these shortcomings of `HTTP/1.1`, the developers started implementing the workarounds, for example use of spritesheets, encoded images in CSS, single humungous CSS/Javascript files, [domain sharding](https://www.maxcdn.com/one/visual-glossary/domain-sharding-2/) etc. |
||||
|
||||
### SPDY - 2009 |
||||
|
||||
Google went ahead and started experimenting with alternative protocols to make the web faster and improving web security while reducing the latency of web pages. In 2009, they announced `SPDY`. |
||||
|
||||
> `SPDY` is a trademark of Google and isn't an acronym. |
||||
|
||||
It was seen that if we keep increasing the bandwidth, the network performance increases in the beginning but a point comes when there is not much of a performance gain. But if you do the same with latency i.e. if we keep dropping the latency, there is a constant performance gain. This was the core idea for performance gain behind `SPDY`, decrease the latency to increase the network performance. |
||||
|
||||
> For those who don't know the difference, latency is the delay i.e. how long it takes for data to travel between the source and destination (measured in milliseconds) and bandwidth is the amount of data transfered per second (bits per second). |
||||
|
||||
The features of `SPDY` included, multiplexing, compression, prioritization, security etc. I am not going to get into the details of SPDY, as you will get the idea when we get into the nitty gritty of `HTTP/2` in the next section as I said `HTTP/2` is mostly inspired from SPDY. |
||||
|
||||
`SPDY` didn't really try to replace HTTP; it was a translation layer over HTTP which existed at the application layer and modified the request before sending it over to the wire. It started to become a defacto standards and majority of browsers started implementing it. |
||||
|
||||
In 2015, at Google, they didn't want to have two competing standards and so they decided to merge it into HTTP while giving birth to `HTTP/2` and deprecating SPDY. |
||||
|
||||
### HTTP/2 - 2015 |
||||
|
||||
By now, you must be convinced that why we needed another revision of the HTTP protocol. `HTTP/2` was designed for low latency transport of content. The key features or differences from the old version of `HTTP/1.1` include |
||||
|
||||
- Binary instead of Textual |
||||
- Multiplexing - Multiple asynchronous HTTP requests over a single connection |
||||
- Header compression using HPACK |
||||
- Server Push - Multiple responses for single request |
||||
- Request Prioritization |
||||
- Security |
||||
|
||||
 |
||||
|
||||
|
||||
#### 1. Binary Protocol |
||||
|
||||
`HTTP/2` tends to address the issue of increased latency that existed in HTTP/1.x by making it a binary protocol. Being a binary protocol, it easier to parse but unlike `HTTP/1.x` it is no longer readable by the human eye. The major building blocks of `HTTP/2` are Frames and Streams |
||||
|
||||
##### Frames and Streams |
||||
|
||||
HTTP messages are now composed of one or more frames. There is a `HEADERS` frame for the meta data and `DATA` frame for the payload and there exist several other types of frames (`HEADERS`, `DATA`, `RST_STREAM`, `SETTINGS`, `PRIORITY` etc) that you can check through [the `HTTP/2` specs](https://http2.github.io/http2-spec/#FrameTypes). |
||||
|
||||
Every `HTTP/2` request and response is given a unique stream ID and it is divided into frames. Frames are nothing but binary pieces of data. A collection of frames is called a Stream. Each frame has a stream id that identifies the stream to which it belongs and each frame has a common header. Also, apart from stream ID being unique, it is worth mentioning that, any request initiated by client uses odd numbers and the response from server has even numbers stream IDs. |
||||
|
||||
Apart from the `HEADERS` and `DATA`, another frame type that I think worth mentioning here is `RST_STREAM` which is a special frame type that is used to abort some stream i.e. client may send this frame to let the server know that I don't need this stream anymore. In `HTTP/1.1` the only way to make the server stop sending the response to client was closing the connection which resulted in increased latency because a new connection had to be opened for any consecutive requests. While in HTTP/2, client can use `RST_STREAM` and stop receiving a specific stream while the connection will still be open and the other streams will still be in play. |
||||
|
||||
|
||||
#### 2. Multiplexing |
||||
|
||||
Since `HTTP/2` is now a binary protocol and as I said above that it uses frames and streams for requests and responses, once a TCP connection is opened, all the streams are sent asynchronously through the same connection without opening any additional connections. And in turn, the server responds in the same asynchronous way i.e. the response has no order and the client uses the assigned stream id to identify the stream to which a specific packet belongs. This also solves the **head-of-line blocking** issue that existed in HTTP/1.x i.e. the client will not have to wait for the request that is taking time and other requests will still be getting processed. |
||||
|
||||
|
||||
#### 3. HPACK Header Compression |
||||
|
||||
It was part of a separate RFC which was specifically aimed at optimizing the sent headers. The essence of it is that when we are constantly accessing the server from a same client there is alot of redundant data that we are sending in the headers over and over, and sometimes there might be cookies increasing the headers size which results in bandwidth usage and increased latency. To overcome this, `HTTP/2` introduced header compression. |
||||
|
||||
 |
||||
|
||||
Unlike request and response, headers are not compressed in `gzip` or `compress` etc formats but there is a different mechanism in place for header compression which is literal values are encoded using Huffman code and a headers table is maintained by the client and server and both the client and server omit any repetitive headers (e.g. user agent etc) in the subsequent requests and reference them using the headers table maintained by both. |
||||
|
||||
While we are talking headers, let me add here that the headers are still the same as in HTTP/1.1, except for the addition of some pseudo headers i.e. `:method`, `:scheme`, `:host` and `:path` |
||||
|
||||
|
||||
#### 4. Server Push |
||||
|
||||
Server push is another tremendous feature of `HTTP/2` where the server, knowing that the client is going to ask for a certain resource, can push it to the client without even client asking for it. For example, let's say a browser loads a web page, it parses the whole page to find out the remote content that it has to load from the server and then sends consequent requests to the server to get that content. |
||||
|
||||
Server push allows the server to decrease the roundtrips by pushing the data that it knows that client is going to demand. How it is done is, server sends a special frame called `PUSH_PROMISE` notifying the client that, "Hey, I am about to send this resource to you! Do not ask me for it." The `PUSH_PROMISE` frame is associated with the stream that caused the push to happen and it contains the promised stream ID i.e. the stream on which the server will send the resource to be pushed. |
||||
|
||||
#### 5. Request Prioritization |
||||
|
||||
A client can assign a priority to a stream by including the prioritization information in the `HEADERS` frame by which a stream is opened. At any other time, client can send a `PRIORITY` frame to change the priority of a stream. |
||||
|
||||
Without any priority information, server processes the requests asynchronously i.e. without any order. If there is priority assigned to a stream, then based on this prioritization information, server decides how much of the resources need to be given to process which request. |
||||
|
||||
#### 6. Security |
||||
|
||||
There was extensive discussion on whether security (through `TLS`) should be made mandatory for `HTTP/2` or not. In the end, it was decided not to make it mandatory. However, most vendors stated that they will only support `HTTP/2` when it is used over `TLS`. So, although `HTTP/2` doesn't require encryption by specs but it has kind of become mandatory by default anyway. With that out of the way, `HTTP/2` when implemented over `TLS` does impose some requirementsi.e. `TLS` version `1.2` or higher must be used, there must be a certain level of minimum keysizes, ephemeral keys are required etc. |
||||
|
||||
`HTTP/2` is here and it has already [surpassed SPDY in adaption](http://caniuse.com/#search=http2) which is gradually increasing. `HTTP/2` has alot to offer in terms of performance gain and it is about time we should start using it. |
||||
|
||||
For anyone interested in further details here is the [link to specs](https://http2.github.io/http2-spec) and a link [demonstrating the performance benefits of `HTTP/2`](http://www.http2demo.io/). |
||||
|
||||
And that about wraps it up. Until next time! stay tuned. |
||||
@ -1,3 +0,0 @@ |
||||
[](/guides/jwt-authentication.png) |
||||
|
||||
Here is the [original tweet](https://twitter.com/kamranahmedse/status/1273375903511465990) where this image was posted. |
||||
@ -1,72 +0,0 @@ |
||||
I have been working on redoing the [roadmaps](https://roadmap.sh) – splitting the skillset based on the seniority levels to make them easier to follow and not scare the new developers away. Since the roadmaps are going to be just about the technical knowledge, I thought it would be a good idea to reiterate and have an article on what I think of different seniority roles. |
||||
|
||||
I have seen many organizations decide the seniority of developers by giving more significance to the years of experience than they should. I have seen developers labeled "Junior" doing the work of Senior Developers and I have seen "Lead" developers who weren't even qualified to be called "Senior". The seniority of a developer cannot just be decided by their age, years of experience or technical knowledge that they have got. There are other factors in play here -- their perception of work, how they interact with their peers and how they approach problems. We discuss these three key factors in detail for each of the seniority levels below. |
||||
|
||||
### Different Seniority Titles |
||||
Different organizations might have different seniority titles but they mainly fall into three categories: |
||||
|
||||
* Junior Developer |
||||
* Mid Level Developer |
||||
* Senior Developer |
||||
|
||||
### Junior Developer |
||||
Junior developers are normally fresh graduates and it's either they don't have or they have minimal industry experience. Not only they have weak coding skills but there are also a few other things that give Junior developers away: |
||||
|
||||
* Their main mantra is "making it work" without giving much attention to how the solution is achieved. To them, a working software and good software are equivalent. |
||||
* They usually require very specific and structured directions to achieve something. They suffer from tunnel vision, need supervision and continuous guidance to be effective team members. |
||||
* Most of the Junior developers just try to live up to the role and, when stuck, they might leave work for a senior developer instead of at least trying to take a stab at something. |
||||
* They don't know about the business side of the company and don't realize how management/sales/marketing/etc think and they don't realize how much rework, wasted effort, and end-user aggravation could be saved by getting to know the business domain. |
||||
* Over-engineering is a major problem, often leading to fragility and bugs. |
||||
* When given a problem, they often try to fix just the current problem a.k.a. fixing the symptoms instead of fixing the root problem. |
||||
* You might notice the "[Somebody Else's Problem](https://en.wikipedia.org/wiki/Somebody_else%27s_problem)" behavior from them. |
||||
* They don't know what or how much they don't know, thanks to the [Dunning–Kruger effect](https://en.wikipedia.org/wiki/Dunning%E2%80%93Kruger_effect). |
||||
* They don't take initiatives and they might be afraid to work on an unfamiliar codebase. |
||||
* They don't participate in team discussions. |
||||
|
||||
Being a Junior developer in the team is not necessarily a bad thing; since you are just starting out, you are not expected to be a know-it-all person. However, it is your responsibility to learn, gain experience, not get stuck with the "Junior" title and improve yourself. Here are a few tips for Junior developers to help move up the ladder of seniority: |
||||
|
||||
* All sorts of problems can be solved if you work on them long enough. Do not give up if Stack Overflow or an issue on GitHub doesn't have an answer. Saying "I am stuck, but I have tried X, Y, and Z. Do you have any pointers?" to your lead is much better than saying "This is beyond me." |
||||
* Read a lot of code, not just code in the projects that you are working on, but reference/framework source code, open-source. Ask your fellow developers, perhaps on Reddit too, about the good open-source examples for the language/tools of your choice. |
||||
* Do personal side-projects, share them with people, contribute to the open-source community. Reach out to people for help. You will be surprised how much support you can get from the community. I still remember my first open-source project on GitHub from around 6 years ago which was a small PHP script (a library) that fetched details for a given address from Google's Geocoding API. The codebase was super messy, it did not have any tests, did not have any linters or sniffers, and it did not have any CI because I didn't know about any of this at that time. I am not sure how but one kind soul somehow found the project, forked it, refactored it, "modernized" it, added linting, code sniffing, added CI and opened the pull request. This one pull request taught me so many things that I might have never learned that fast on my own because I was still in college, working for a small service-based company and doing just small websites all on my own without knowing what is right and what is not. This one PR on GitHub was my introduction to open-source and I owe everything to that. |
||||
* Avoid what is known as ["Somebody Else's Problem Field"](https://en.wikipedia.org/wiki/Somebody_else%27s_problem) behavior. |
||||
* When given a problem to solve, try to identify the root cause and fix that instead of fixing the symptoms. And remember, not being able to reproduce means not solved. It is solved when you understand why it occurred and why it no longer does. |
||||
* Have respect for the code that was written before you. Be generous when passing judgment on the architecture or the design decisions made in the codebase. Understand that code is often ugly and weird for a reason other than incompetence. Learning to live with and thrive with legacy code is a great skill. Never assume anybody is stupid. Instead, figure out how these intelligent, well-intentioned and experienced people have come to a decision that is stupid now. Approach inheriting legacy code with an "opportunity mindset" rather than a complaining one. |
||||
* It's okay to not know things. You don't need to be ashamed of not knowing things already. There are no stupid questions, ask however many questions that would allow you to work effectively. |
||||
* Don't let yourself be limited by the job title that you have. Keep working on your self-improvement. |
||||
* Do your homework. Predict what’s coming down the pipe. Be involved in the team discussions. Even if you are wrong, you will learn something. |
||||
* Learn about the domain that you are working with. Understand the product end-to-end as an end-user. Do not assume things, ask questions and get things cleared when in doubt. |
||||
* Learn to communicate effectively - soft skills matter. Learn how to write good emails, how to present your work, how to phrase your questions in a thoughtful manner. |
||||
* Sit with the senior developers, watch them work, find a mentor. No one likes a know-it-all. Get hold of your ego and be humble enough to take lessons from experienced people. |
||||
* Don't just blindly follow the advice of "experts", take it with a grain of salt. |
||||
* If you are asked to provide an estimate for some work, do not give an answer unless you have all the details to make a reasonable estimate. If you are forced to do that, pad it 2x or more depending on how much you don't know about what needs to be done for the task to be marked 'done'. |
||||
* Take some time to learn how to use a debugger. Debuggers are quite beneficial when navigating new, undocumented or poorly documented codebase, or to debug weird issues. |
||||
* Avoid saying "it works on my machine" -- yes, I have heard that a lot. |
||||
* Try to turn any feelings of inadequacy or imposter syndrome into energy to push yourself forward and increase your skills and knowledge. |
||||
|
||||
### Mid Level Developers |
||||
The next level after the Junior developers is Mid Level developers. They are technically stronger than the Junior developers and can work with minimal supervision. They still have some issues to address in order to jump to Senior level. |
||||
|
||||
Intermediate developers are more competent than the Junior developer. They start to see the flaws in their old codebase. They gain the knowledge but they get trapped into the next chain i.e. messing things up while trying to do them "the right way" e.g. hasty abstractions, overuse or unnecessary usage of Design Patterns -- they may be able to provide solution faster than the Junior developers but the solution might put you into another rabbit-hole in the long run. Without supervision, they might delay the execution while trying to "do things properly". They don't know when to make tradeoffs and they still don't know when to be dogmatic and when to be pragmatic. They can easily become attached to their solution, become myopic, and be unable to take feedback. |
||||
|
||||
Mid-level developers are quite common. Most of the organizations wrongly label them as "Senior Developers". However, they need further mentoring in order to become Senior Developers. The next section describes the responsibilities of a senior developer and how you can become one. |
||||
|
||||
### Senior Developers |
||||
Senior developers are the next level after the Mid-level developers. They are the people who can get things done on their own without any supervision and without creating any issues down the road. They are more mature, have gained experience by delivering both good and bad software in the past and have learned from it — they know how to be pragmatic. Here is the list of things that are normally expected of a Senior Developer: |
||||
|
||||
* With their past experiences, mistakes made, issues faced by over-designed or under-designed software, they can foresee the problems and persuade the direction of the codebase or the architecture. |
||||
* They don't have a "Shiny-Toy" syndrome. They are pragmatic in the execution. They can make the tradeoffs when required, and they know why. They know where to be dogmatic and where to be pragmatic. |
||||
* They have a good picture of the field, know what the best tool for the job is in most cases (even if they don't know the tool). They have the innate ability to pick up a new tool/language/paradigm/etc in order to solve a problem that requires it. |
||||
* They are aware they're on a team. They view it as a part of their responsibility to mentor others. This can range from pair programming with junior devs to taking un-glorious tasks of writing docs or tests or whatever else needs to be done. |
||||
* They have a deep understanding of the domain - they know about the business side of the company and realize how management/sales/marketing/etc think and benefit from their knowledge of the business domain during the development. |
||||
* They don't make empty complaints, they make judgments based on the empirical evidence and they have suggestions for solutions. |
||||
* They think much more than just code - they know that their job is to provide solutions to the problems and not just to write code. |
||||
* They have the ability to take on large ill-defined problems, define them, break them up, and execute the pieces. A senior developer can take something big and abstract, and run with it. They will come up with a few options, discuss them with the team and implement them. |
||||
* They have respect for the code that was written before them. They are generous when passing judgment on the architecture or the design decisions made in the codebase. They approach inheriting legacy code with an "opportunity mindset" rather than a complaining one. |
||||
* They know how to give feedback without hurting anyone. |
||||
|
||||
### Conclusion |
||||
All teams are made up of a mix of all these seniority roles. Being content with your role is a bad thing and you should always strive to improve yourself for the next step. This article is based on my beliefs and observations in the industry. Lots of companies care more for the years of experience to decide the seniority which is a crappy metric -- you don't gain experience just by spending years. You gain it by continuously solving different sorts of problems, irrespective of the number of years you spend in the industry. I have seen fresh graduates having no industry experience get up to speed quickly and producing work of a Senior Engineer and I have seen Senior developers labeled "senior" merely because of their age and "years of experience". |
||||
|
||||
The most important traits that you need to have in order to step up in your career are: not settling with mediocrity, having an open mindset, being humble, learning from your mistakes, working on the challenging problems and having an opportunity mindset rather than a complaining one. |
||||
|
||||
With that said, this post comes to an end. What are your thoughts on the levels of seniority of developers? Feel free to send improvements to this guide. Until next time, stay tuned! |
||||
@ -1,3 +0,0 @@ |
||||
[](/guides/oauth.png) |
||||
|
||||
Here is the [original tweet](https://twitter.com/kamranahmedse/status/1276994010423361540) where this image was posted. |
||||
@ -1,5 +0,0 @@ |
||||
One of my favorite pastimes is going through the history of my favorite projects to learn how they grew over time or how certain features were implemented. |
||||
|
||||
The image below describes how I do that in WebStorm. |
||||
|
||||
[](/guides/project-history.png) |
||||
@ -1,47 +0,0 @@ |
||||
Internet has connected people across the world using social media and audio/video calling features along with providing an overabundance of knowledge and tools. All this comes with an inherent danger of security and privacy breaches. In this guide we will talk about **proxies** which play a vital role in mitigating these risks. We will cover the following topics in this guide: |
||||
|
||||
- [Proxy Server](#proxy-server) |
||||
- [Forward Proxy Server](#forward-proxy-server) |
||||
- [Reverse Proxy Server](#reverse-proxy-server) |
||||
- [Summary](#summary) |
||||
|
||||
## Proxy Server |
||||
|
||||
***Every web request which is sent from the client to a web server goes through some type of proxy server.*** A proxy server acts as a gateway between client *(you)* and the internet and separates end-users from the websites you browse. It replaces the source IP address of the web request with the proxy server's IP address and then forwards it to the web server. The web server is unaware of the client, it only sees the proxy server. |
||||
|
||||
 |
||||
> NOTE: This is not an accurate description rather just an illustration. |
||||
|
||||
Proxy servers serve as a single point of control making it easier to enforce security policies. It also provides caching mechanism which stores the requested web pages on the proxy server to improve performance. If the requested web-page is available in cache memory then instead of forwarding the request to the web-server it will send the cached webpage back to the client. This **saves big companies thousands of dollars** by reducing load on their servers as their website is visited by millions of users every day. |
||||
|
||||
## Forward Proxy Server |
||||
|
||||
A forward proxy is generally implemented on the client side and **sits in front of multiple clients** or client sources. Forward proxy servers are mainly used by companies to **manage internet usage** of their employees and **restrict content**. It is also used as a **firewall** to secure company's network by blocking any request which would pose threat to the companies's network. Proxy servers are also used to **bypass geo-restriction** and browse content which might be blocked in user's country. It enables users to **browse anonymously**, as the proxy server masks their details from the website's servers. |
||||
|
||||
 |
||||
> NOTE: This is not an accurate description rather just an illustration |
||||
|
||||
## Reverse Proxy Server |
||||
|
||||
Reverse proxy servers are implemented on the **server side** instead of the client side. It **sits in front of multiple webservers** and manages the incoming requests by forwarding them to the web servers. It provides anonymity for the **back-end web servers and not the client**. Reverse proxy servers are generally used to perform tasks such as **authentication, content caching, and encryption/decryption** on behalf of the web server. These tasks would **hog CPU cycles** on the web server and degrade performance of the website by introducing high amount of delay in loading the webpage. Reverse proxies are also used as **load balancers** to distribute the incoming traffic efficiently among the web servers but it is **not optimized** for this task. In essence, reverse proxy server is a gateway to a web-server or group of web-servers. |
||||
|
||||
 |
||||
> NOTE: This is not an accurate description rather just an illustration. Red lines represent server's response and black lines represent initial request from client(s). |
||||
|
||||
## Summary |
||||
|
||||
A proxy server acts as a gateway between client *(you)* and the internet and separates end-users from the websites you browse. ***The position of the proxy server on the network determines whether it is a forward or a reverse proxy server***. Forward proxy is implemented on the client side and **sits in front of multiple clients** or client sources and forwards requests to the web server. Reverse proxy servers are implemented on the **server side** it **sits in front of multiple webservers** and manages the incoming requests by forwarding them to the web servers. |
||||
|
||||
If all this was too much to take in, I have a simple analogy for you. |
||||
|
||||
At a restaurant the waiter/waitress takes your order and gives it to the kitchen head chef. The head chef then calls out the order and assigns tasks to everyone in the kitchen. |
||||
|
||||
In this analogy: |
||||
|
||||
* You are the client |
||||
* Your order is the web request |
||||
* Waiter/Waitress is your forward proxy server |
||||
* Kitchen head chef is the reverse proxy server |
||||
* Other chefs working in the kitchen are the web servers |
||||
|
||||
With that said our guide comes to an end. Thank you for reading and feel free to submit any updates to the guide using the links below. |
||||
@ -1,5 +0,0 @@ |
||||
Random numbers are everywhere from computer games to lottery systems, graphics software, statistical sampling, computer simulation and cryptography. Graphic below is a quick explanation to how the random numbers are generated and why they may not be truly random. |
||||
|
||||
[](/guides/random-numbers.png) |
||||
|
||||
Here is the [original tweet](https://twitter.com/kamranahmedse/status/1237851549302312962) where this image was posted. |
||||
@ -1,5 +0,0 @@ |
||||
The chart below aims to give you a really basic understanding of how the capability of a DBMS is increased to handle a growing amount of load. |
||||
|
||||
[](/guides/scaling-databases.svg) |
||||
|
||||
Here is the [original tweet](https://twitter.com/kamranahmedse/status/1234209674003611650) where this image was posted. |
||||
@ -1,3 +0,0 @@ |
||||
[](/guides/session-authentication.png) |
||||
|
||||
Here is the [original tweet](https://twitter.com/kamranahmedse/status/1264113498520465410) where this image was posted. |
||||
@ -1,3 +0,0 @@ |
||||
[](/guides/ssl-tls-https-ssh.png) |
||||
|
||||
Here is the [original tweet](https://twitter.com/kamranahmedse/status/1252717722724642822) where this image was posted. |
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in new issue