Interactive frontend roadmap with contribution links
This commit is contained in:
Kamran Ahmed
@ -5,16 +5,18 @@ type BadgeLinkType = {
|
|||||||
target: string;
|
target: string;
|
||||||
badgeText: string;
|
badgeText: string;
|
||||||
href: string;
|
href: string;
|
||||||
|
colorScheme?: string;
|
||||||
children: React.ReactNode
|
children: React.ReactNode
|
||||||
};
|
};
|
||||||
|
|
||||||
export function BadgeLink(props: BadgeLinkType) {
|
export function BadgeLink(props: BadgeLinkType) {
|
||||||
const { target = '_blank', badgeText, href, children } = props;
|
const { target = '_blank', colorScheme='purple', badgeText, href, children } = props;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Text mb={0}>
|
<Text mb={0}>
|
||||||
<Link fontWeight={500} textDecoration='underline' href={href} target={target}>
|
<Link color='blue.700' fontWeight={500} textDecoration='none' href={href} target={target} _hover={{ textDecoration: 'none', color: 'purple.400' }}>
|
||||||
<Badge colorScheme={'purple'} style={{ position: 'relative', top: '-2px' }}>{badgeText}</Badge> {children}
|
<Badge mr='10px' colorScheme={colorScheme} pos='relative' top='-2px'>{badgeText}</Badge>
|
||||||
|
{children}
|
||||||
</Link>
|
</Link>
|
||||||
</Text>
|
</Text>
|
||||||
);
|
);
|
||||||
|
|||||||
39
components/roadmap/edit-content-page-link.tsx
Normal file
39
components/roadmap/edit-content-page-link.tsx
Normal file
@ -0,0 +1,39 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { Box, Button, Divider, Link, Text } from '@chakra-ui/react';
|
||||||
|
|
||||||
|
type EditContentPageLinkProps = {
|
||||||
|
href: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
export function EditContentPageLink(props: EditContentPageLinkProps) {
|
||||||
|
const { href } = props;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Box my='30px'>
|
||||||
|
<Divider mb="15px" orientation="horizontal" />
|
||||||
|
<Text
|
||||||
|
lineHeight="23px"
|
||||||
|
fontWeight={500}
|
||||||
|
fontSize="14px"
|
||||||
|
color="gray.500"
|
||||||
|
mb="10px"
|
||||||
|
>
|
||||||
|
This page is a work in progress. Help us by writing a small
|
||||||
|
introduction to the topic and suggesting a few links to read more
|
||||||
|
about this topic.
|
||||||
|
</Text>
|
||||||
|
<Button
|
||||||
|
size="sm"
|
||||||
|
py="20px"
|
||||||
|
as={Link}
|
||||||
|
href={href}
|
||||||
|
target="_blank"
|
||||||
|
isFullWidth
|
||||||
|
colorScheme={'purple'}
|
||||||
|
_hover={{ textDecoration: 'none' }}
|
||||||
|
>
|
||||||
|
Edit this Page
|
||||||
|
</Button>
|
||||||
|
</Box>
|
||||||
|
);
|
||||||
|
}
|
||||||
@ -1,6 +1,6 @@
|
|||||||
import { RoadmapType } from '../../lib/roadmap';
|
import { RoadmapType } from '../../lib/roadmap';
|
||||||
import { NewAlertBanner } from './new-alert-banner';
|
import { NewAlertBanner } from './new-alert-banner';
|
||||||
import { Button, Link, Stack, Text } from '@chakra-ui/react';
|
import { Button, Link, Stack, Tab, TabList, Tabs, Text } from '@chakra-ui/react';
|
||||||
import { AtSignIcon, DownloadIcon } from '@chakra-ui/icons';
|
import { AtSignIcon, DownloadIcon } from '@chakra-ui/icons';
|
||||||
import { PageHeader } from '../page-header';
|
import { PageHeader } from '../page-header';
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
|||||||
@ -1 +1 @@
|
|||||||
internet:how-does-the-internet-work
|
# Internet
|
||||||
|
|||||||
@ -1 +1 @@
|
|||||||
internet:what-is-http
|
# What is HTTP?
|
||||||
|
|||||||
@ -1,2 +1 @@
|
|||||||
## Browsers
|
# Browsers
|
||||||
Browsers let you open stuff and see stuff in the browser.
|
|
||||||
|
|||||||
@ -1 +1 @@
|
|||||||
internet:dns-and-how-it-works
|
# DNS
|
||||||
|
|||||||
@ -1 +1 @@
|
|||||||
internet:what-is-domain-name
|
# Domain Name
|
||||||
|
|||||||
@ -1 +1 @@
|
|||||||
internet:what-is-hosting
|
# Hosting
|
||||||
|
|||||||
@ -1,6 +1,8 @@
|
|||||||
# Internet
|
# Internet
|
||||||
|
|
||||||
Since the explosive growth of web-based applications, every developer could stand to benefit from understanding how the Internet works. In this article, accompanied with an introductory series of short videos about the Internet from code.org, you will learn the basics of the Internet and how it works. After going through this article, you will be able to answer the below questions:
|
The Internet is a global network of computers connected to each other which communicate through a standardized set of protocols.
|
||||||
|
|
||||||
- [Browsers](/frontend/internet:how-does-the-internet-work)
|
<BadgeLink badgeText='Watch' href='/guides/what-is-internet'>Introduction to Internet</BadgeLink>
|
||||||
- [DNS and how it Works?](/frontend/internet:how-does-the-internet-work)
|
<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=x3c1ih2NJEg'>How does the Internet work?</BadgeLink>
|
||||||
|
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.vox.com/2014/6/16/18076282/the-internet'>The Internet Explained</BadgeLink>
|
||||||
|
<BadgeLink colorScheme='yellow' badgeText='Read' href='http://web.stanford.edu/class/msande91si/www-spr04/readings/week1/InternetWhitepaper.htm'>How Does the Internet Work?</BadgeLink>
|
||||||
|
|||||||
@ -1 +1 @@
|
|||||||
html:learn-the-basics
|
# Learn the basics
|
||||||
@ -1 +1 @@
|
|||||||
html:writing-semantic-html
|
# Writing semantic html
|
||||||
@ -1 +1 @@
|
|||||||
html:forms-and-validations
|
# Forms and validations
|
||||||
@ -1 +1 @@
|
|||||||
html:conventions-and-best-practices
|
# Conventions and best practices
|
||||||
@ -1 +1 @@
|
|||||||
html:accessibility
|
# Accessibility
|
||||||
@ -1 +1 @@
|
|||||||
html:seo-basics
|
# Basics of SEO
|
||||||
|
|||||||
@ -1 +1 @@
|
|||||||
html
|
# HTML
|
||||||
|
|||||||
@ -1 +1 @@
|
|||||||
css:learn-the-basics
|
# Learn the basics
|
||||||
@ -1 +1 @@
|
|||||||
css:making-layouts
|
# Making layouts
|
||||||
@ -1 +1 @@
|
|||||||
css:responsive-design-and-media-queries
|
# Responsive Design
|
||||||
|
|||||||
@ -1 +1 @@
|
|||||||
css
|
# Css
|
||||||
@ -1 +1 @@
|
|||||||
javascript:syntax-and-basic-constructs
|
# Syntax and basic constructs
|
||||||
@ -1 +1 @@
|
|||||||
javascript:learn-dom-manipulation
|
# Learn dom manipulation
|
||||||
@ -1 +1 @@
|
|||||||
javascript:learn-fetch-api-ajax-xhr
|
# Learn fetch api ajax xhr
|
||||||
@ -1 +1 @@
|
|||||||
javascript:es6-and-modular-javascript
|
# Es6 and modular javascript
|
||||||
@ -1 +1 @@
|
|||||||
javascript:concepts
|
# Concepts
|
||||||
@ -1 +1 @@
|
|||||||
javascript
|
# Javascript
|
||||||
@ -1 +1 @@
|
|||||||
version-control-systems:basic-usage-of-git
|
# Basic usage of git
|
||||||
@ -1 +1 @@
|
|||||||
version-control-systems
|
# Version control systems
|
||||||
@ -1 +1 @@
|
|||||||
repo-hosting-services:github
|
# Github
|
||||||
@ -1 +1 @@
|
|||||||
repo-hosting-services:gitlab
|
# Gitlab
|
||||||
@ -1 +1 @@
|
|||||||
repo-hosting-services:bitbucket
|
# Bitbucket
|
||||||
@ -1 +1 @@
|
|||||||
repo-hosting-services
|
# Repo hosting services
|
||||||
@ -1 +1 @@
|
|||||||
web-security-knowledge:https
|
# Https
|
||||||
@ -1 +1 @@
|
|||||||
web-security-knowledge:content-security-policy
|
# Content security policy
|
||||||
@ -1 +1 @@
|
|||||||
web-security-knowledge:cors
|
# Cors
|
||||||
@ -1 +1 @@
|
|||||||
web-security-knowledge:owasp-security-risks
|
# Owasp security risks
|
||||||
@ -1 +1 @@
|
|||||||
web-security-knowledge
|
# Web security knowledge
|
||||||
@ -1 +1 @@
|
|||||||
package-managers:npm
|
# Npm
|
||||||
@ -1 +1 @@
|
|||||||
package-managers:yarn
|
# Yarn
|
||||||
@ -1 +1 @@
|
|||||||
package-managers
|
# Package managers
|
||||||
@ -1 +1 @@
|
|||||||
css-architecture:bem
|
# Bem
|
||||||
@ -1 +1 @@
|
|||||||
css-architecture:oocss
|
# Oocss
|
||||||
@ -1 +1 @@
|
|||||||
css-architecture:smacss
|
# Smacss
|
||||||
@ -1 +1 @@
|
|||||||
css-architecture
|
# Css architecture
|
||||||
@ -1 +1 @@
|
|||||||
css-preprocessors:sass
|
# Sass
|
||||||
@ -1 +1 @@
|
|||||||
css-preprocessors:postcss
|
# Postcss
|
||||||
@ -1 +1 @@
|
|||||||
css-preprocessors:less
|
# Less
|
||||||
@ -1 +1 @@
|
|||||||
css-preprocessors
|
# Css preprocessors
|
||||||
@ -1 +1 @@
|
|||||||
build-tools:task-runners:npm-scripts
|
# Npm scripts
|
||||||
@ -1 +1 @@
|
|||||||
build-tools:task-runners
|
# Task runners
|
||||||
@ -1 +1 @@
|
|||||||
build-tools:module-bundlers:webpack
|
# Webpack
|
||||||
@ -1 +1 @@
|
|||||||
build-tools:module-bundlers:esbuild
|
# Esbuild
|
||||||
@ -1 +1 @@
|
|||||||
build-tools:module-bundlers:rollup
|
# Rollup
|
||||||
@ -1 +1 @@
|
|||||||
build-tools:module-bundlers:parcel
|
# Parcel
|
||||||
@ -1 +1 @@
|
|||||||
build-tools:module-bundlers:vite
|
# Vite
|
||||||
@ -1 +1 @@
|
|||||||
build-tools:module-bundlers
|
# Module bundlers
|
||||||
@ -1 +1 @@
|
|||||||
build-tools:linters-formatters:prettier
|
# Prettier
|
||||||
@ -1 +1 @@
|
|||||||
build-tools:linters-formatters:eslint
|
# Eslint
|
||||||
@ -1 +1 @@
|
|||||||
build-tools:linters-formatters:standardjs
|
# Standardjs
|
||||||
@ -1 +1 @@
|
|||||||
build-tools:linters-formatters
|
# Linters formatters
|
||||||
@ -1 +1 @@
|
|||||||
build-tools
|
# Build tools
|
||||||
@ -1 +1 @@
|
|||||||
pick-a-framework:react-js:redux
|
# Redux
|
||||||
@ -1 +1 @@
|
|||||||
pick-a-framework:react-js:mobx
|
# Mobx
|
||||||
@ -1 +1 @@
|
|||||||
pick-a-framework:react-js:recoil
|
# Recoil
|
||||||
@ -1 +1 @@
|
|||||||
pick-a-framework:react-js
|
# React js
|
||||||
@ -1 +1 @@
|
|||||||
pick-a-framework:angular:rxjs
|
# Rxjs
|
||||||
@ -1 +1 @@
|
|||||||
pick-a-framework:angular:ngrx
|
# Ngrx
|
||||||
@ -1 +1 @@
|
|||||||
pick-a-framework:angular
|
# Angular
|
||||||
@ -1 +1 @@
|
|||||||
pick-a-framework:vue-js:vuex
|
# Vuex
|
||||||
@ -1 +1 @@
|
|||||||
pick-a-framework:vue-js
|
# Vue js
|
||||||
@ -1 +1 @@
|
|||||||
pick-a-framework
|
# Pick a framework
|
||||||
@ -1 +1 @@
|
|||||||
modern-css:styled-components
|
# Styled components
|
||||||
@ -1 +1 @@
|
|||||||
modern-css:css-modules
|
# Css modules
|
||||||
@ -1 +1 @@
|
|||||||
modern-css:styled-jsx
|
# Styled jsx
|
||||||
@ -1 +1 @@
|
|||||||
modern-css:emotion
|
# Emotion
|
||||||
@ -1 +1 @@
|
|||||||
modern-css
|
# Modern css
|
||||||
@ -1 +1 @@
|
|||||||
web-components:html-templates
|
# Html templates
|
||||||
@ -1 +1 @@
|
|||||||
web-components:custom-elements
|
# Custom elements
|
||||||
@ -1 +1 @@
|
|||||||
web-components:shadow-dom
|
# Shadow dom
|
||||||
@ -1 +1 @@
|
|||||||
web-components
|
# Web components
|
||||||
@ -1 +1 @@
|
|||||||
css-frameworks:css-first:bootstrap
|
# Bootstrap
|
||||||
@ -1 +1 @@
|
|||||||
css-frameworks:css-first:bulma
|
# Bulma
|
||||||
@ -1 +1 @@
|
|||||||
css-frameworks:css-first
|
# Css first
|
||||||
@ -1 +1 @@
|
|||||||
css-frameworks:js-first:tailwind-css
|
# Tailwind css
|
||||||
@ -1 +1 @@
|
|||||||
css-frameworks:js-first:chakra-ui
|
# Chakra ui
|
||||||
@ -1 +1 @@
|
|||||||
css-frameworks:js-first:material-ui
|
# Material ui
|
||||||
@ -1 +1 @@
|
|||||||
css-frameworks:js-first:radix-ui
|
# Radix ui
|
||||||
@ -1 +1 @@
|
|||||||
css-frameworks:js-first
|
# Js first
|
||||||
@ -1 +1 @@
|
|||||||
css-frameworks
|
# Css frameworks
|
||||||
@ -1 +1 @@
|
|||||||
testing-your-apps:jest
|
# Jest
|
||||||
@ -1 +1 @@
|
|||||||
testing-your-apps:react-testing-library
|
# React testing library
|
||||||
@ -1 +1 @@
|
|||||||
testing-your-apps:cypress
|
# Cypress
|
||||||
@ -1 +1 @@
|
|||||||
testing-your-apps:enzyme
|
# Enzyme
|
||||||
@ -1 +1 @@
|
|||||||
testing-your-apps:other-options
|
# Other options
|
||||||
@ -1 +1 @@
|
|||||||
testing-your-apps
|
# Testing your apps
|
||||||
@ -1 +1 @@
|
|||||||
type-checkers:typescript
|
# Typescript
|
||||||
@ -1 +1 @@
|
|||||||
type-checkers:flow
|
# Flow
|
||||||
@ -1 +1 @@
|
|||||||
type-checkers
|
# Type checkers
|
||||||
@ -1 +1 @@
|
|||||||
progressive-web-apps:apis
|
# Apis
|
||||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user