Merge branch 'master' of github.com:kamranahmedse/developer-roadmap into javascript-roadmap

Co-authored-by: sk8higher <sk8higher@iballwasrawt.ru>

components/guide/guide-grid-item.tsx

@@ -21,7 +21,7 @@ export function GuideGridItem(props: GuideGridItemProps) {
     <Box _hover={{ textDecoration: 'none', transform: 'scale(1.02)' }} as={Link} href={href} shadow='xl' p='20px'
          rounded='10px' bg={bgColorList[colorIndex] ?? bgColorList[0]} flex={1}>
       <Text mb='10px' fontSize='13px' color='gray.400'>
-        {isNew && <Badge colorScheme={'yellow'} mr='10px'>New</Badge>}
+        {isNew && <Badge colorScheme={'green'} mr='10px'>New</Badge>}
         {date}
       </Text>
       <Heading color='white' mb={'6px'} fontSize='20px'>{title}</Heading>

components/icons/tree.svg

@@ -0,0 +1 @@
+<svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M22 18v-7h-9v-5h3v-6h-8v6h3v5h-9v7h-2v6h6v-6h-2v-5h7v5h-2v6h6v-6h-2v-5h7v5h-2v6h6v-6z"/></svg>

components/links-list-item.tsx

@@ -49,7 +49,7 @@ export function LinksListItem(props: LinksListItemProps) {
         {icon}
         <Text maxWidth={'345px'} isTruncated as='span'>{title}</Text>
         {badgeText &&
-        <Badge pos='relative' top='1px' variant='subtle' colorScheme='purple' ml='10px'>{badgeText}</Badge>}
+        <Badge pos='relative' top='1px' variant='subtle' colorScheme='green' ml='10px'>{badgeText}</Badge>}
       </Flex>
       <Text d={[hideSubtitleOnMobile ? 'none' : 'inline', 'inline']} mt={['3px', 0]} as='span'
             fontSize={['11px', '11px', '12px']} color='gray.500'>{subtitle}</Text>

components/md-renderer/mdx-components/dedicated-roadmap.tsx

@@ -0,0 +1,22 @@
+import { Box, Flex, Heading, Text } from '@chakra-ui/react';
+import TreeIcon from '../../icons/tree.svg';
+
+type DedicatedRoadmapProps = {
+  href: string;
+  title: string;
+  description: string;
+};
+
+export function DedicatedRoadmap(props: DedicatedRoadmapProps) {
+  const { href, title, description } = props;
+
+  return (
+    <Flex as={'a'} target='_blank' href={ href } p={5} px={5} mt={6} rounded='md' alignItems='center'  _hover={{ bg: 'yellow.400'}} bg='yellow.300'>
+      <Box d={['none', 'none', 'none', 'block', 'block']} mr={4} height='32px' w='32px' as={TreeIcon} color='gray.900' />
+      <Box as='span'>
+        <Heading fontSize='lg' as={'h4'} mb='2px' color='gray.900'>{ title }</Heading>
+        <Text color='gray.700' as='span' fontSize='md'>{ description }</Text>
+      </Box>
+    </Flex>
+  );
+}

components/md-renderer/mdx-components/index.tsx

@@ -11,6 +11,7 @@ import { BadgeLink } from './badge-link';
 import { Li, Ul } from './ul';
 import PremiumBlock from './premium-block';
 import { ResourceGroupTitle } from './resource-group-title';
+import { DedicatedRoadmap } from './dedicated-roadmap';
 
 const MdxComponents = {
   p: P,
@@ -18,6 +19,7 @@ const MdxComponents = {
   pre: Pre,
   blockquote: BlockQuote,
   a: EnrichedLink,
+  DedicatedRoadmap,
   table: Table,
   iframe: IFrame,
   img: Img,

components/roadmap/content-drawer.tsx

@@ -108,6 +108,7 @@ export function ContentDrawer(props: ContentDrawerProps) {
               </Text>
             </Button>
           </Flex>
+
           <RoadmapGroup isOutlet roadmap={roadmap} group={groupId} />
         </Box>
       </RemoveScroll>

components/roadmap/roadmap-page-header.tsx

@@ -1,3 +1,4 @@
+import siteConfig from '../../content/site.json';
 import { isInteractiveRoadmap, RoadmapType } from '../../lib/roadmap';
 import { NewAlertBanner } from './new-alert-banner';
 import {
@@ -11,7 +12,7 @@ import {
   Stack,
   Text,
 } from '@chakra-ui/react';
-import { AtSignIcon, DownloadIcon } from '@chakra-ui/icons';
+import { ChatIcon, AtSignIcon, DownloadIcon } from '@chakra-ui/icons';
 import React from 'react';
 
 type RoadmapPageHeaderType = {
@@ -41,7 +42,7 @@ export function RoadmapPageHeader(props: RoadmapPageHeaderType) {
         </Heading>
         <Text fontSize={['13px', '14px', '15px']}>{roadmap.description}</Text>
         <Flex justifyContent="space-between" alignItems={'center'} mt="20px">
-          <Stack isInline>
+          <Stack isInline flex={1}>
             <Button
               d={['flex', 'flex']}
               as={Link}
@@ -68,6 +69,7 @@ export function RoadmapPageHeader(props: RoadmapPageHeaderType) {
                 py="14px"
                 px="10px"
                 leftIcon={<DownloadIcon />}
+                d={['none', 'flex']}
                 colorScheme="yellow"
                 variant="solid"
                 _hover={{ textDecoration: 'none' }}
@@ -88,6 +90,21 @@ export function RoadmapPageHeader(props: RoadmapPageHeaderType) {
             >
               Subscribe
             </Button>
+            <Box flex={1} justifyContent='flex-end' d='flex'>
+              <Button
+                as={Link}
+                href={`${siteConfig.url.issue}?title=[Suggestion] ${roadmap.title}`}
+                target='_blank'
+                size="xs"
+                py="14px"
+                px="10px"
+                colorScheme="green"
+                leftIcon={<ChatIcon />}
+                _hover={{ textDecoration: 'none' }}
+              >
+                Suggest Changes
+              </Button>
+            </Box>
           </Stack>
         </Flex>
         {isInteractiveRoadmap(roadmap.id) && (

components/watch/video-grid-item.tsx

@@ -7,7 +7,6 @@ type VideoGridItemProps = {
   date: string;
   target?: string;
   isNew?: boolean;
-  isPro?: boolean;
   colorIndex?: number;
 };
 
@@ -54,14 +53,13 @@ const bgColorList = [
 ];
 
 export function VideoGridItem(props: VideoGridItemProps) {
-  const { title, subtitle, date, isNew = false, isPro = false, colorIndex = 0, href, target } = props;
+  const { title, subtitle, date, isNew = false, colorIndex = 0, href, target } = props;
 
   return (
     <Box _hover={{ textDecoration: 'none', transform: 'scale(1.02)' }} as={Link} href={ href } target={target || '_self'} shadow='xl' p='20px'
           rounded='10px' bg={bgColorList[colorIndex] ?? bgColorList[0]} flex={1}>
       <Text mb='7px' fontSize='12px' color='gray.400'>
-        {isNew && <Badge colorScheme={'yellow'} mr='10px'>New</Badge>}
-        {isPro && <Badge colorScheme={'blue'} mr='10px'>PRO</Badge>}
+        {isNew && <Badge colorScheme={'green'} mr='10px'>New</Badge>}
         {date}
       </Text>
       <Heading color='white' mb={'6px'} fontSize='20px' lineHeight={'28px'}>{title}</Heading>

content/authors.json

@@ -39,5 +39,11 @@
     "name": "Alexey Lesovsky",
     "bio": "Linux system administrator and PostgreSQL DBA at DataEgret.",
     "picture": "/authors/lesovsky.jpeg"
+  },
+  {
+    "username": "danielgruesso",
+    "name": "Daniel Gruesso",
+    "bio": "Product manager working on blockchain and smart contracts developer tools",
+    "picture": "/authors/danielgruesso.jpg"
   }
 ]

content/guides.json

@@ -3,7 +3,7 @@
     "id": "avoid-render-blocking-javascript-with-async-defer",
     "title": "Async and Defer Script Loading",
     "description": "Learn how to avoid render blocking JavaScript using async and defer scripts.",
-    "isPro": false,
+    "isNew": false,
     "authorUsername": "kamranahmedse",
     "updatedAt": "2021-09-10T19:59:14.191Z",
     "createdAt": "2021-09-10T19:59:14.191Z"
@@ -12,7 +12,7 @@
     "id": "what-are-web-vitals",
     "title": "What are Web Vitals?",
     "description": "Learn what are the core web vitals and how to measure them.",
-    "isPro": false,
+    "isNew": false,
     "authorUsername": "kamranahmedse",
     "updatedAt": "2021-09-05T19:59:14.191Z",
     "createdAt": "2021-09-05T19:59:14.191Z"
@@ -21,7 +21,7 @@
     "id": "what-is-sli-slo-sla",
     "title": "SLIs, SLOs and SLAs",
     "description": "Learn what are different indicators for performance identification of any service.",
-    "isPro": false,
+    "isNew": false,
     "authorUsername": "kamranahmedse",
     "updatedAt": "2021-08-31T19:59:14.191Z",
     "createdAt": "2021-08-31T19:59:14.191Z"
@@ -30,7 +30,7 @@
     "id": "ci-cd",
     "title": "What is CI and CD?",
     "description": "Learn the basics of CI/CD and how to implement that with GitHub Actions.",
-    "isPro": false,
+    "isNew": false,
     "authorUsername": "kamranahmedse",
     "updatedAt": "2021-07-09T19:59:14.191Z",
     "createdAt": "2021-07-09T19:59:14.191Z"
@@ -39,7 +39,7 @@
     "id": "sso",
     "title": "SSO — Single Sign On",
     "description": "Learn the basics of SAML and understand how does Single Sign On work.",
-    "isPro": false,
+    "isNew": false,
     "authorUsername": "kamranahmedse",
     "updatedAt": "2021-07-01T19:59:14.191Z",
     "createdAt": "2021-07-01T19:59:14.191Z"
@@ -48,7 +48,7 @@
     "id": "oauth",
     "title": "OAuth — Open Authorization",
     "description": "Learn and understand what is OAuth and how it works",
-    "isPro": false,
+    "isNew": false,
     "authorUsername": "kamranahmedse",
     "updatedAt": "2021-06-28T19:59:14.191Z",
     "createdAt": "2021-06-28T19:59:14.191Z"
@@ -57,7 +57,7 @@
     "id": "jwt-authentication",
     "title": "JWT Authentication",
     "description": "Understand what is JWT authentication and how is it implemented",
-    "isPro": false,
+    "isNew": false,
     "authorUsername": "kamranahmedse",
     "updatedAt": "2021-06-20T19:59:14.191Z",
     "createdAt": "2021-06-20T19:59:14.191Z"
@@ -66,7 +66,7 @@
     "id": "token-authentication",
     "title": "Token Based Authentication",
     "description": "Understand what is token based authentication and how it is implemented",
-    "isPro": false,
+    "isNew": false,
     "authorUsername": "kamranahmedse",
     "updatedAt": "2021-06-02T20:59:14.191Z",
     "createdAt": "2021-06-02T20:59:14.191Z"
@@ -75,7 +75,7 @@
     "id": "session-authentication",
     "title": "Session Based Authentication",
     "description": "Understand what is session based authentication and how it is implemented",
-    "isPro": false,
+    "isNew": false,
     "authorUsername": "kamranahmedse",
     "updatedAt": "2021-05-26T20:59:14.191Z",
     "createdAt": "2021-05-26T20:59:14.191Z"
@@ -84,7 +84,7 @@
     "id": "basic-authentication",
     "title": "Basic Authentication",
     "description": "Understand what is basic authentication and how it is implemented",
-    "isPro": false,
+    "isNew": false,
     "authorUsername": "kamranahmedse",
     "updatedAt": "2021-05-19T20:59:14.191Z",
     "createdAt": "2021-05-19T20:59:14.191Z"
@@ -93,7 +93,7 @@
     "id": "character-encodings",
     "title": "Character Encodings",
     "description": "Covers the basics of character encodings and explains ASCII vs Unicode",
-    "isPro": false,
+    "isNew": false,
     "authorUsername": "kamranahmedse",
     "updatedAt": "2021-05-14T20:59:14.191Z",
     "createdAt": "2021-05-14T20:59:14.191Z"
@@ -102,7 +102,7 @@
     "id": "unfamiliar-codebase",
     "title": "Unfamiliar Codebase",
     "description": "Tips on getting getting familiar with an unfamiliar codebase",
-    "isPro": false,
+    "isNew": false,
     "authorUsername": "kamranahmedse",
     "updatedAt": "2021-05-04T20:59:14.191Z",
     "createdAt": "2021-05-04T20:59:14.191Z"
@@ -111,7 +111,7 @@
     "id": "why-build-it-and-they-will-come-wont-work-anymore",
     "title": "Build it and they will come?",
     "description": "Why “build it and they will come” alone won’t work anymore",
-    "isPro": false,
+    "isNew": false,
     "authorUsername": "spekulatius",
     "updatedAt": "2021-05-04T12:59:14.191Z",
     "createdAt": "2021-05-04T12:59:14.191Z"
@@ -120,7 +120,7 @@
     "id": "dhcp-in-one-picture",
     "title": "DHCP in One Picture",
     "description": "Here is what happens when a new device joins the network.",
-    "isPro": false,
+    "isNew": false,
     "authorUsername": "kamranahmedse",
     "updatedAt": "2021-04-28T15:48:21.191Z",
     "createdAt": "2021-04-28T15:48:21.191Z"
@@ -129,7 +129,7 @@
     "id": "ssl-tls-https-ssh",
     "title": "SSL vs TLS vs SSH",
     "description": "Quick tidbit on the differences between SSL, TLS, HTTPS and SSH",
-    "isPro": false,
+    "isNew": false,
     "authorUsername": "kamranahmedse",
     "updatedAt": "2021-04-22T15:48:21.191Z",
     "createdAt": "2021-04-22T15:48:21.191Z"
@@ -138,7 +138,7 @@
     "id": "asymptotic-notation",
     "title": "Asymptotic Notation",
     "description": "Learn the basics of measuring the time and space complexity of algorithms",
-    "isPro": false,
+    "isNew": false,
     "authorUsername": "kamranahmedse",
     "updatedAt": "2021-04-03T15:48:21.191Z",
     "createdAt": "2021-04-03T15:48:21.191Z"
@@ -147,7 +147,7 @@
     "id": "big-o-notation",
     "title": "Big-O Notation",
     "description": "Easy to understand explanation of Big-O notation without any fancy terms",
-    "isPro": false,
+    "isNew": false,
     "authorUsername": "kamranahmedse",
     "updatedAt": "2021-03-15T15:48:21.191Z",
     "createdAt": "2021-03-15T15:48:21.191Z"
@@ -156,7 +156,7 @@
     "id": "random-numbers",
     "title": "Random Numbers: Are they?",
     "description": "Learn how they are generated and why they may not be truly random.",
-    "isPro": false,
+    "isNew": false,
     "authorUsername": "kamranahmedse",
     "updatedAt": "2021-03-14T15:48:21.191Z",
     "createdAt": "2021-03-14T15:48:21.191Z"
@@ -165,7 +165,7 @@
     "id": "scaling-databases",
     "title": "Scaling Databases",
     "description": "Learn the ups and downs of different database scaling strategies",
-    "isPro": false,
+    "isNew": false,
     "authorUsername": "kamranahmedse",
     "updatedAt": "2021-02-18T15:48:21.191Z",
     "createdAt": "2021-02-18T15:48:21.191Z"
@@ -174,7 +174,7 @@
     "id": "what-is-internet",
     "title": "How does the internet work?",
     "description": "Learn the basics of internet and everything involved with this short video series",
-    "isPro": false,
+    "isNew": false,
     "authorUsername": "dmytrobol",
     "updatedAt": "2021-02-29T15:48:21.191Z",
     "createdAt": "2021-02-29T15:48:21.191Z"
@@ -183,7 +183,7 @@
     "id": "torrent-client",
     "title": "Building a BitTorrent Client",
     "description": "Learn everything you need to know about BitTorrent by writing a client in Go",
-    "isPro": false,
+    "isNew": false,
     "authorUsername": "jesse",
     "updatedAt": "2021-01-17T15:48:21.191Z",
     "createdAt": "2021-01-17T15:48:21.191Z",
@@ -193,7 +193,7 @@
     "id": "levels-of-seniority",
     "title": "Levels of Seniority",
     "description": "How to Step Up as a Junior, Mid Level or a Senior Developer?",
-    "isPro": false,
+    "isNew": false,
     "authorUsername": "kamranahmedse",
     "updatedAt": "2020-12-03T12:13:00.860Z",
     "createdAt": "2020-12-03T12:13:00.860Z"
@@ -202,7 +202,7 @@
     "id": "design-patterns-for-humans",
     "title": "Design Patterns for Humans",
     "description": "A language agnostic, ultra-simplified explanation to design patterns",
-    "isPro": false,
+    "isNew": false,
     "authorUsername": "kamranahmedse",
     "updatedAt": "2019-10-09T12:00:00.860Z",
     "createdAt": "2019-01-23T17:00:00.860Z"
@@ -211,7 +211,7 @@
     "id": "journey-to-http2",
     "title": "Journey to HTTP/2",
     "description": "The evolution of HTTP. How it all started and where we stand today",
-    "isPro": false,
+    "isNew": false,
     "authorUsername": "kamranahmedse",
     "createdAt": "2018-12-04T12:00:00.860Z",
     "updatedAt": "2018-12-04T12:00:00.860Z",
@@ -221,7 +221,7 @@
     "id": "dns-in-one-picture",
     "title": "DNS in One Picture",
     "description": "Quick illustrative guide on how a website is found on the internet.",
-    "isPro": false,
+    "isNew": false,
     "authorUsername": "kamranahmedse",
     "updatedAt": "2018-12-04T12:00:00.860Z",
     "createdAt": "2018-12-04T17:00:00.860Z"
@@ -230,7 +230,7 @@
     "id": "http-caching",
     "title": "HTTP Caching",
     "description": "Everything you need to know about web caching",
-    "isPro": false,
+    "isNew": false,
     "authorUsername": "kamranahmedse",
     "createdAt": "2018-11-29T17:00:00.860Z",
     "updatedAt": "2018-11-29T17:00:00.860Z"
@@ -239,7 +239,7 @@
     "id": "history-of-javascript",
     "title": "Brief History of JavaScript",
     "description": "How JavaScript was introduced and evolved over the years",
-    "isPro": false,
+    "isNew": false,
     "authorUsername": "kamranahmedse",
     "createdAt": "2017-10-28T17:00:00.860Z",
     "updatedAt": "2017-10-28T17:00:00.860Z"
@@ -248,7 +248,7 @@
     "id": "proxy-servers",
     "title": "Proxy Servers",
     "description": "How do proxy servers work and what are forward and reverse proxies?",
-    "isPro": false,
+    "isNew": false,
     "authorUsername": "ebrahimbharmal007",
     "createdAt": "2017-10-24T17:00:00.860Z",
     "updatedAt": "2017-10-24T17:00:00.860Z"

content/roadmaps.json

@@ -177,7 +177,6 @@
     "isTextHeavy": false,
     "isCommunity": false,
     "featured": true,
-    "landingPath": "/roadmaps/103-react/landscape.md",
     "resourcesPath": "/roadmaps/103-react/resources.md",
     "jsonUrl": "/project/react.json",
     "versions": [
@@ -190,6 +189,7 @@
       "url": "https://twitter.com/kamranahmedse"
     },
     "pdfUrl": "/pdfs/react.pdf",
+    "contentPathsFilePath": "/roadmaps/103-react/content-paths.json",
     "id": "react",
     "metaPath": "/roadmaps/103-react/meta.json",
     "isUpcoming": false
@@ -291,6 +291,53 @@
     "metaPath": "/roadmaps/105-vue/meta.json",
     "isUpcoming": false
   },
+  {
+    "seo": {
+      "title": "JavaScript Developer Roadmap: Step by step guide to learn JavaScript",
+      "description": "Community driven, articles, resources, guides, interview questions, quizzes for javascript development. Learn to become a modern JavaScript developer by following the steps, skills, resources and guides listed in this roadmap.",
+      "keywords": [
+        "javascript guide 2022",
+        "learn javascript",
+        "step by step javascript guide",
+        "javascript roadmap 2022",
+        "javascript developer roadmap 2022",
+        "guide to becoming a javascript developer",
+        "javascript developer roadmap",
+        "javascript roadmap",
+        "become javascript developer",
+        "javascript developer skills",
+        "javascript skills test",
+        "skills for javascript development",
+        "learn javascript development",
+        "what is javascript",
+        "javascript quiz",
+        "javascript interview questions"
+      ]
+    },
+    "title": "JavaScript Roadmap",
+    "description": "Step by step guide to learn JavaScript in 2022",
+    "featuredTitle": "JavaScript",
+    "type": "tool",
+    "featuredDescription": "Step by step guide to learn JavaScript in 2022",
+    "isTextHeavy": false,
+    "isCommunity": false,
+    "featured": true,
+    "jsonUrl": "/project/javascript.json",
+    "versions": [
+      "latest",
+      "2018",
+      "2017"
+    ],
+    "author": {
+      "name": "Kamran Ahmed",
+      "url": "https://twitter.com/kamranahmedse"
+    },
+    "pdfUrl": "/pdfs/javascript.pdf",
+    "contentPathsFilePath": "/roadmaps/106-javascript/content-paths.json",
+    "id": "javascript",
+    "metaPath": "/roadmaps/106-javascript/meta.json",
+    "isUpcoming": false
+  },
   {
     "seo": {
       "title": "Android Developer Roadmap: Learn to become an Android developer",
@@ -318,8 +365,8 @@
     "isCommunity": false,
     "featured": true,
     "jsonUrl": "/project/android.json",
-    "landingPath": "/roadmaps/106-android/landscape.md",
-    "resourcesPath": "/roadmaps/106-android/resources.md",
+    "landingPath": "/roadmaps/107-android/landscape.md",
+    "resourcesPath": "/roadmaps/107-android/resources.md",
     "versions": [
       "latest",
       "2018",
@@ -330,7 +377,7 @@
       "url": "https://twitter.com/kamranahmedse"
     },
     "id": "android",
-    "metaPath": "/roadmaps/106-android/meta.json",
+    "metaPath": "/roadmaps/107-android/meta.json",
     "isUpcoming": false
   },
   {
@@ -360,8 +407,7 @@
     "isCommunity": false,
     "featured": true,
     "jsonUrl": "/project/python.json",
-    "resourcesPath": "/roadmaps/107-python/resources.md",
-    "landingPath": "/roadmaps/107-python/landscape.md",
+    "resourcesPath": "/roadmaps/108-python/resources.md",
     "pdfUrl": "/pdfs/python.pdf",
     "versions": [
       "latest"
@@ -370,8 +416,9 @@
       "name": "Kamran Ahmed",
       "url": "https://twitter.com/kamranahmedse"
     },
+    "contentPathsFilePath": "/roadmaps/108-python/content-paths.json",
     "id": "python",
-    "metaPath": "/roadmaps/107-python/meta.json",
+    "metaPath": "/roadmaps/108-python/meta.json",
     "isUpcoming": false
   },
   {
@@ -412,8 +459,7 @@
     "isUpcoming": false,
     "featured": true,
     "jsonUrl": "/project/golang.json",
-    "landingPath": "/roadmaps/108-golang/landscape.md",
-    "resourcesPath": "/roadmaps/108-golang/resources.md",
+    "resourcesPath": "/roadmaps/109-golang/resources.md",
     "pdfUrl": "/pdfs/go.pdf",
     "versions": [
       "latest",
@@ -424,8 +470,9 @@
       "name": "Kamran Ahmed",
       "url": "https://twitter.com/kamranahmedse"
     },
+    "contentPathsFilePath": "/roadmaps/109-golang/content-paths.json",
     "id": "golang",
-    "metaPath": "/roadmaps/108-golang/meta.json"
+    "metaPath": "/roadmaps/109-golang/meta.json"
   },
   {
     "seo": {
@@ -464,8 +511,7 @@
     "isUpcoming": false,
     "featured": true,
     "jsonUrl": "/project/java.json",
-    "landingPath": "/roadmaps/109-java/landscape.md",
-    "resourcesPath": "/roadmaps/109-java/resources.md",
+    "resourcesPath": "/roadmaps/110-java/resources.md",
     "versions": [
       "latest",
       "2018",
@@ -476,8 +522,9 @@
       "url": "https://twitter.com/kamranahmedse"
     },
     "pdfUrl": "/pdfs/java.pdf",
+    "contentPathsFilePath": "/roadmaps/110-java/content-paths.json",
     "id": "java",
-    "metaPath": "/roadmaps/109-java/meta.json"
+    "metaPath": "/roadmaps/110-java/meta.json"
   },
   {
     "seo": {
@@ -509,8 +556,8 @@
     "featuredTitle": "DBA",
     "type": "role",
     "featuredDescription": "Step by step guide to become a PostgreSQL DBA in 2022",
-    "landingPath": "/roadmaps/110-postgresql-dba/landscape.md",
-    "resourcesPath": "/roadmaps/110-postgresql-dba/resources.md",
+    "landingPath": "/roadmaps/111-postgresql-dba/landscape.md",
+    "resourcesPath": "/roadmaps/111-postgresql-dba/resources.md",
     "author": {
       "name": "Alexey Lesovsky",
       "url": "https://github.com/lesovsky"
@@ -521,7 +568,59 @@
     "detailed": false,
     "versions": [],
     "id": "postgresql-dba",
-    "metaPath": "/roadmaps/110-postgresql-dba/meta.json",
+    "metaPath": "/roadmaps/111-postgresql-dba/meta.json",
+    "isUpcoming": false
+  },
+  {
+    "seo": {
+      "title": "Blockchain Developer Roadmap: Learn to become a blockchain developer",
+      "description": "Learn to become a blockchain developer using this roadmap. Community driven, articles, resources, guides, interview questions, quizzes for modern backend development.",
+      "keywords": [
+        "blockchain roadmap 2022",
+        "web3 developer roadmap",
+        "web3 developer roadmap 2022",
+        "web3 roadmap",
+        "blockchain developer roadmap 2022",
+        "guide to becoming a blockchain developer",
+        "guide to becoming a blockchain developer",
+        "blockchain roadmap",
+        "blockchain developer",
+        "blockchain engineer",
+        "blockchain skills",
+        "blockchain development",
+        "javascript developer",
+        "blockchain development skills",
+        "blockchain development skills test",
+        "blockchain engineer roadmap",
+        "blockchain developer roadmap",
+        "become a blockchain developer",
+        "blockchain developer career path",
+        "javascript developer",
+        "modern javascript developer",
+        "node developer",
+        "skills for blockchain development",
+        "learn blockchain development",
+        "what is blockchain development",
+        "blockchain developer quiz",
+        "blockchain developer interview questions"
+      ]
+    },
+    "title": "Blockchain Developer",
+    "description": "Step by step guide to becoming a blockchain developer in 2022.",
+    "featuredTitle": "Blockchain",
+    "featuredDescription": "Step by step guide to becoming a blockchain developer in 2022",
+    "featured": true,
+    "type": "role",
+    "imageUrl": "/roadmaps/blockchain.png",
+    "jsonUrl": "/project/blockchain.json",
+    "author": {
+      "name": "Daniel Gruesso",
+      "url": "https://twitter.com/danielgruesso"
+    },
+    "pdfUrl": "/pdfs/blockchain.pdf",
+    "contentPathsFilePath": "/roadmaps/112-blockchain/content-paths.json",
+    "id": "blockchain",
+    "metaPath": "/roadmaps/112-blockchain/meta.json",
     "isUpcoming": false
   },
   {
@@ -550,13 +649,12 @@
     "featuredDescription": "Step by step guide to becoming a modern QA Engineer in 2022",
     "isUpcoming": true,
     "featured": true,
-    "landingPath": "/roadmaps/112-qa/landscape.md",
-    "resourcesPath": "/roadmaps/112-qa/resources.md",
+    "resourcesPath": "/roadmaps/113-qa/resources.md",
     "author": {
       "name": "Anas Fitiani",
       "url": "https://github.com/anas-qa"
     },
     "id": "qa",
-    "metaPath": "/roadmaps/112-qa/meta.json"
+    "metaPath": "/roadmaps/113-qa/meta.json"
   }
 ]

content/roadmaps/100-frontend/content/111-pick-a-framework/100-react-js/readme.md

@@ -1,3 +1,9 @@
+<DedicatedRoadmap
+  href='/react'
+  title='React Roadmap'
+  description='Click to check the detailed React Roadmap.'
+/>
+
 # React
 
 React is the most popular front-end JavaScript library for building user interfaces. React can also render on the server using Node and power mobile apps using React Native.

content/roadmaps/100-frontend/content/111-pick-a-framework/101-angular/readme.md

@@ -1,3 +1,9 @@
+<DedicatedRoadmap
+  href='/angular'
+  title='Angular Roadmap'
+  description='Click to check the detailed Angular Roadmap.'
+/>
+
 # Angular
 
 Angular is a component based front-end development framework built on TypeScript which includes a collection of well-integrated libraries that include features like routing, forms management, client-server communication, and more.

content/roadmaps/100-frontend/content/111-pick-a-framework/102-vue-js/readme.md

@@ -1,3 +1,9 @@
+<DedicatedRoadmap 
+  href='/vue'
+  title='Vue Roadmap'
+  description='Click to check the detailed Vue Roadmap.'
+/>
+
 # Vue.js
 
 Vue.js is an open-source JavaScript framework for building user interfaces and single-page applications. It is mainly focused on front end development.

content/roadmaps/100-frontend/content/118-server-side-rendering/100-react-js/100-next-js.md

@@ -1,8 +1,6 @@
 # Next.js
 
-Next.js is an open-source development framework built on top of Node.js
-enabling React based web applications functionalities such as server-side
-rendering and generating static websites.
+Next.js is an open-source development framework built on top of Node.js enabling React based web applications functionalities such as server-side rendering and generating static websites.
 
 <ResourceGroupTitle>Free Resources</ResourceGroupTitle>
 <BadgeLink colorScheme='blue' badgeText='Website' href='https://nextjs.org/'>Official Website</BadgeLink>

content/roadmaps/101-backend/content/103-learn-a-language/100-go.md

@@ -1,3 +1,10 @@
+<DedicatedRoadmap
+  href='/golang'
+  title='Go Roadmap'
+  description='Click to check the detailed Go Roadmap.'
+/>
+
+
 # Go
 
 Go is an open source programming language supported by Google. Go can be used to write cloud services, CLI tools, used for API development, and much more.

content/roadmaps/101-backend/content/103-learn-a-language/102-java.md

@@ -1,3 +1,9 @@
+<DedicatedRoadmap
+  href='/java'
+  title='Java Roadmap'
+  description='Click to check the detailed Java Roadmap.'
+/>
+
 # Java
 
 Java is general-purpose language, primarily used for Internet-based applications.

content/roadmaps/101-backend/content/103-learn-a-language/105-javascript.md

@@ -6,6 +6,7 @@ JavaScript allows you to add interactivity to your pages. Common examples that y
 
 <BadgeLink badgeText='Read' colorScheme="yellow" href='https://www.w3schools.com/js/'>W3Schools – JavaScript Tutorial</BadgeLink>
 <BadgeLink badgeText='Read' colorScheme="yellow" href='https://javascript.info/'>The Modern JavaScript Tutorial</BadgeLink>
+<BadgeLink badgeText='Read' colorScheme='yellow' href='https://eloquentjavascript.net/'>Eloquent Javascript - Book</BadgeLink>
 <BadgeLink badgeText='Watch' href='https://youtu.be/hdI2bqOjy3c'>JavaScript Crash Course for Beginners</BadgeLink>
 
 <BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=fBNz5xF-Kx4'>Node.js Crash Course</BadgeLink>

content/roadmaps/101-backend/content/103-learn-a-language/106-python.md

@@ -1,3 +1,9 @@
+<DedicatedRoadmap
+  href='/python'
+  title='Python Roadmap'
+  description='Click to check the detailed Python Roadmap.'
+/>
+
 # Python
 
 Python is a well known programming language which is both a strongly typed and a dynamically typed language. Being an interpreted language, code is executed as soon as it is written and the Python syntax allows for writing code in functional, procedureal or object-oriented programmatic ways.

content/roadmaps/101-backend/content/106-relational-databases/100-postgresql.md

@@ -1,3 +1,9 @@
+<DedicatedRoadmap
+  href='/postgresql-dba'
+  title='PostgreSQL DBA Roadmap'
+  description='Click to check the detailed PostgreSQL DBA Roadmap.'
+/>
+
 # PostgreSQL
 
 PostgreSQL, also known as Postgres, is a free and open-source relational database management system emphasizing extensibility and SQL compliance.

content/roadmaps/102-devops/content-paths.json

@@ -113,6 +113,7 @@
   "managing-servers:live-in-terminal:df": "/roadmaps/102-devops/content/102-managing-servers/101-live-in-terminal/138-df.md",
   "managing-servers:live-in-terminal:history": "/roadmaps/102-devops/content/102-managing-servers/101-live-in-terminal/139-history.md",
   "managing-servers:live-in-terminal:du": "/roadmaps/102-devops/content/102-managing-servers/101-live-in-terminal/140-du.md",
+  "managing-servers:live-in-terminal:scp": "/roadmaps/102-devops/content/102-managing-servers/101-live-in-terminal/141-scp.md",
   "networking-protocols": "/roadmaps/102-devops/content/103-networking-protocols/readme.md",
   "networking-protocols:dns": "/roadmaps/102-devops/content/103-networking-protocols/101-dns.md",
   "networking-protocols:osi-model": "/roadmaps/102-devops/content/103-networking-protocols/100-osi-model.md",
@@ -153,7 +154,7 @@
   "monitoring:application-monitoring:new-relic": "/roadmaps/102-devops/content/107-monitoring/101-application-monitoring/101-new-relic.md",
   "monitoring:application-monitoring:app-dynamics": "/roadmaps/102-devops/content/107-monitoring/101-application-monitoring/102-app-dynamics.md",
   "monitoring:application-monitoring:instana": "/roadmaps/102-devops/content/107-monitoring/101-application-monitoring/103-instana.md",
-  "monitoring:application-monitoring:open-tracing": "/roadmaps/102-devops/content/107-monitoring/101-application-monitoring/104-open-tracing.md",
+  "monitoring:application-monitoring:open-telemetry": "/roadmaps/102-devops/content/107-monitoring/101-application-monitoring/104-open-telemetry.md",
   "monitoring:logs-management": "/roadmaps/102-devops/content/107-monitoring/102-logs-management/readme.md",
   "monitoring:logs-management:elastic-stack": "/roadmaps/102-devops/content/107-monitoring/102-logs-management/100-elastic-stack.md",
   "monitoring:logs-management:graylog": "/roadmaps/102-devops/content/107-monitoring/102-logs-management/101-graylog.md",
@@ -172,4 +173,4 @@
   "data-management": "/roadmaps/102-devops/content/110-data-management.md",
   "design-and-implementation": "/roadmaps/102-devops/content/111-design-and-implementation.md",
   "management-and-monitoring": "/roadmaps/102-devops/content/112-management-and-monitoring.md"
-}
+}

content/roadmaps/102-devops/content/100-language/100-python.md

@@ -1,3 +1,9 @@
+<DedicatedRoadmap
+  href='/python'
+  title='Python Roadmap'
+  description='Click to check the detailed Python Roadmap.'
+/>
+
 # Python
 
 Python is a multi-paradigm language. Being an interpreted language, code is executed as soon as it is written and the Python syntax allows for writing code in functional, procedural or object-oriented programmatic ways.  Python is frequently recommended as the first language new coders should learn, because of its focus on readability, consistency, and ease of use.  This comes with some downsides, as the language is not especially performant in most production tasks.

content/roadmaps/102-devops/content/100-language/103-go.md

@@ -1,3 +1,9 @@
+<DedicatedRoadmap
+  href='/golang'
+  title='Go Roadmap'
+  description='Click to check the detailed Go Roadmap.'
+/>
+
 # Go
 
 Go is an open source programming language supported by Google. Go can be used to write cloud services, CLI tools, used for API development, and much more.

content/roadmaps/102-devops/content/102-managing-servers/101-live-in-terminal/100-screen-multiplexer.md

@@ -1 +1,8 @@
-# Screen Multiplexer
+# Screen
+
+Screen  is  a  full-screen  window manager that multiplexes a physical terminal between several processes (typically interactive shells). Each virtual terminal provides the functions of a DEC VT100 terminal and, in addition, several control functions from the ISO 6429 (ECMA 48, ANSI X3.64) and ISO 2022 standards (e.g. insert/delete line and support for multiple character sets). There is  a  scrollback  history buffer for each virtual terminal and a copy-and-paste mechanism that allows moving text regions between windows.
+
+See `man screen` or `screen -h` for further information
+
+<BadgeLink badgeText='Cheat Sheet' colorScheme='blue' href='https://kapeli.com/cheat_sheets/screen.docset/Contents/Resources/Documents/index'>Screen Cheat Sheet</BadgeLink>
+<BadgeLink badgeText='User Manual' colorScheme='blue' href='https://www.gnu.org/software/screen/manual/screen.html'>Screen User's Manual</BadgeLink>

content/roadmaps/102-devops/content/102-managing-servers/101-live-in-terminal/101-tmux-multiplexer.md

@@ -1 +1,10 @@
-# Tmux multiplexer
+# Tmux
+
+Tmux is a terminal multiplexer: it enables a number of terminals to be created, accessed, and controlled from a single screen. Tmux may be detached from a screen and continue running in the background, then later reattached.
+
+When tmux is started it creates a new session with a single window and displays it on screen. A status line at the bottom of the screen shows information on the current session and is used to enter interactive commands.
+
+See `man tmux` further information
+
+<BadgeLink badgeText='Cheat Sheet' colorScheme='blue' href='https://tmuxcheatsheet.com/'>Tux Cheat Sheet</BadgeLink>
+<BadgeLink badgeText='Documentation' colorScheme='blue' href='https://tmuxguide.readthedocs.io/en/latest/tmux/tmux.html'>Tmux Documentation</BadgeLink>

content/roadmaps/102-devops/content/102-managing-servers/101-live-in-terminal/102-ps.md

@@ -1 +1,8 @@
-# Ps
+# ps - process status
+
+The ps utility displays a header line, followed by lines containing information about all of your processes that have controlling terminals.
+
+See `man ps` further information
+
+<BadgeLink badgeText='Cheat Sheet' colorScheme='blue' href='https://www.sysadmin.md/ps-cheatsheet.html'>ps Cheat Sheet</BadgeLink>
+<BadgeLink badgeText='Documentation' colorScheme='blue' href='https://man7.org/linux/man-pages/man1/ps.1.html'>ps Documentation</BadgeLink>

content/roadmaps/102-devops/content/102-managing-servers/101-live-in-terminal/102-top.md

@@ -1 +1,8 @@
-# Top
+# top
+
+The top program periodically displays a sorted list of system processes.  The default sorting key is pid, but other keys can be used instead.  Various output options are available.
+
+See `man top` further information.
+
+<BadgeLink badgeText='Cheat Sheet' colorScheme='blue' href='https://gist.github.com/ericandrewlewis/4983670c508b2f6b181703df43438c37'>top Cheat Sheet</BadgeLink>
+<BadgeLink badgeText='Documentation' colorScheme='blue' href='https://man7.org/linux/man-pages/man1/top.1.html'>top Documentation</BadgeLink>

content/roadmaps/102-devops/content/102-managing-servers/101-live-in-terminal/103-htop.md

@@ -1 +1,6 @@
-# Htop
+# htop
+
+htop is a cross-platform ncurses-based process. It is similar to top, but allows you to scroll vertically and horizontally, and interact using a pointing device (mouse). You can observe all processes running on the system, along with their command line arguments, as well as view them in a tree format, select multiple processes and act on them all at once.
+
+<BadgeLink badgeText='Cheat Sheet' colorScheme='blue' href='https://www.maketecheasier.com/power-user-guide-htop/'>htop Cheat Sheet</BadgeLink>
+<BadgeLink badgeText='Documentation' colorScheme='blue' href='https://www.man7.org/linux/man-pages/man1/htop.1.html'>htop Documentation</BadgeLink>

content/roadmaps/102-devops/content/102-managing-servers/101-live-in-terminal/104-atop.md

@@ -1 +1,6 @@
-# Atop
+# atop
+
+The program atop is an interactive monitor to view the load on a Linux system. It shows the occupation of the most critical hardware resources (from a performance point of view) on system level, i.e. cpu, memory, disk and network.
+
+<BadgeLink badgeText='Command Guide' colorScheme='blue' href='https://www.digitalocean.com/community/tutorials/atop-command-in-linux'>atop Command Guide</BadgeLink>
+<BadgeLink badgeText='Documentation' colorScheme='blue' href='https://linux.die.net/man/1/atop'>atop Documentation</BadgeLink>

content/roadmaps/102-devops/content/102-managing-servers/101-live-in-terminal/104-bash-scripting.md

@@ -9,5 +9,8 @@ You actually use GUI shells all the time. For example, Windows 10 is based on th
 With a CLI shell like Bash, you type commands into the program to directly control your computer's OS. Opening up the terminal on your Mac or command line in Linux will look similar to consoles and integrated development environments (IDEs) for other programming languages such as R, Ruby, or Python. You can type commands directly in the command line or run Bash scripts to perform longer and more complex tasks.
 
 <ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.shellscript.sh/'>The Shell Scripting Tutorial</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://linuxcommand.org/lc3_writing_shell_scripts.php'>Writing Shell Scripts</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.freecodecamp.org/news/shell-scripting-crash-course-how-to-write-bash-scripts-in-linux/'>Shell Scripting for Beginners</BadgeLink>
 <BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.gnu.org/savannah-checkouts/gnu/bash/manual/bash.html'>A guide to Bash</BadgeLink>
 <BadgeLink badgeText='Course' colorScheme='green' href='https://www.codecademy.com/learn/bash-scripting'>Codecademy - Learn Bash Scripting</BadgeLink>

content/roadmaps/102-devops/content/102-managing-servers/101-live-in-terminal/105-lsof.md

@@ -1 +1,8 @@
-# Lsof
+# lsof
+
+Lsof lists on its standard output file information about files opened by processes.
+
+See `man lsof` or `lsof --help` for further information.
+
+<BadgeLink badgeText='Cheat Sheet' colorScheme='blue' href='https://neverendingsecurity.wordpress.com/2015/04/13/lsof-commands-cheatsheet/'>lsof Cheat Sheet</BadgeLink>
+<BadgeLink badgeText='Documentation' colorScheme='blue' href='https://man7.org/linux/man-pages/man8/lsof.8.html'>lsof Documentation</BadgeLink>

content/roadmaps/102-devops/content/102-managing-servers/101-live-in-terminal/106-nmon.md

@@ -1 +1,7 @@
-# Nmon
+# Nmon
+
+Nmon is a fully interactive performance monitoring command-line utility tool for Linux. It is a benchmark tool that displays performance about the cpu, memory, network, disks, file system, nfs, top processes, resources, and power micro-partition.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Command Guide' href='https://www.geeksforgeeks.org/linux-nmon/'>nmon Command Guide</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Documentation' href='https://www.ibm.com/docs/en/aix/7.2?topic=n-nmon-command'>nmon Documentation</BadgeLink>

content/roadmaps/102-devops/content/102-managing-servers/101-live-in-terminal/107-iostat.md

@@ -1 +1,7 @@
-# Iostat
+# Iostat
+
+The iostat command in Linux is used for monitoring system input/output statistics for devices and partitions. It monitors system input/output by observing the time the devices are active in relation to their average transfer rates. The iostat produce reports may be used to change the system configuration to raised balance the input/output between the physical disks.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Command Guide' href='https://www.geeksforgeeks.org/iostat-command-in-linux-with-examples/'>iostat Command Guide</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Documentation' href='https://man7.org/linux/man-pages/man1/iostat.1.html'>iostat Documentation</BadgeLink>

content/roadmaps/102-devops/content/102-managing-servers/101-live-in-terminal/119-dig.md

@@ -1 +1,12 @@
-# Dig
+# dig
+
+`dig` command stands for **D**omain **I**nformation **G**roper. It is used for retrieving information about DNS name servers. It is mostly used by network administrators for verifying and troubleshooting DNS problems and to perform DNS lookups. It replaces older tools such as `nslookup` and the `host`.
+
+It has the following syntax: `$ dig [server] [name] [type]` e.g. `$ dig roadmap.sh`
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.geeksforgeeks.org/dig-command-in-linux-with-examples/'>What is dig command?</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://linuxize.com/post/how-to-use-dig-command-to-query-dns-in-linux/'>More on dig</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.geeksforgeeks.org/host-command-in-linux-with-examples/'>What is host command?</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.geeksforgeeks.org/nslookup-command-in-linux-with-examples/'>What is nslookup command?</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.cloudflare.com/en-gb/learning/dns/what-is-dns/'>What is DNS?</BadgeLink>

content/roadmaps/102-devops/content/102-managing-servers/101-live-in-terminal/124-cut.md

@@ -1 +1,8 @@
-# Cut
+# cut
+
+The cut utility cuts out selected portions of each line (as specified by list) from each file and writes them to the standard output.
+
+See `man cut` for further information.
+
+<BadgeLink badgeText='Cheat Sheet' colorScheme='blue' href='https://bencane.com/2012/10/22/cheat-sheet-cutting-text-with-cut/'>cut Cheat Sheet</BadgeLink>
+<BadgeLink badgeText='Documentation' colorScheme='blue' href='https://man7.org/linux/man-pages/man1/cut.1.html'>cut Documentation</BadgeLink>

content/roadmaps/102-devops/content/102-managing-servers/101-live-in-terminal/125-uniq.md

@@ -1 +1,8 @@
-# Uniq
+# uniq
+
+The uniq utility reads the specified input_file comparing adjacent lines, and writes a copy of each unique input line to the output_file.
+
+See `man uniq` for further information.
+
+<BadgeLink badgeText='Cheat Sheet' colorScheme='blue' href='https://www.geeksforgeeks.org/uniq-command-in-linux-with-examples/'>uniq Cheat Sheet</BadgeLink>
+<BadgeLink badgeText='Documentation' colorScheme='blue' href='https://man7.org/linux/man-pages/man1/uniq.1.html'>uniq Documentation</BadgeLink>

content/roadmaps/102-devops/content/102-managing-servers/101-live-in-terminal/127-echo.md

@@ -1 +1,8 @@
-# Echo
+# echo
+
+`echo` is a built-in command in Linux used to display lines of text/string that are passed as an argument. It is mostly used in shell scripts and batch files to output status text or `ENV` variables to the screen or a file. 
+
+It has the following syntax: `$ echo [options] [string]` e.g. `$ echo "Hello World!"`
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.tecmint.com/echo-command-in-linux/'>Echo command with Examples</BadgeLink>

content/roadmaps/102-devops/content/102-managing-servers/101-live-in-terminal/128-fmt.md

@@ -1 +1,8 @@
-# Fmt
+# fmt
+
+`fmt` command is for formatting and optimizing contents in text files. It will be really usefull when it comes to beautify large text files by setting uniform column width and spaces.
+
+It has the following syntax: `$ fmt [-width] [option] [file]` e.g. `$ fmt file.txt`
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.devopsroles.com/fmt-command-in-linux-with-example/'>Fmt command with Examples</BadgeLink>

content/roadmaps/102-devops/content/102-managing-servers/101-live-in-terminal/129-tr.md

@@ -1 +1,8 @@
-# Tr
+# tr
+
+The tr utility copies the standard input to the standard output with substitution or deletion of selected characters.
+
+See `man tr` for further information.
+
+<BadgeLink badgeText='Cheat Sheet' colorScheme='blue' href='https://linuxopsys.com/topics/tr-command-in-linux'>tr Cheat Sheet</BadgeLink>
+<BadgeLink badgeText='Documentation' colorScheme='blue' href='https://linuxcommand.org/lc3_man_pages/tr1.html'>tr Documentation</BadgeLink>

content/roadmaps/102-devops/content/102-managing-servers/101-live-in-terminal/130-nl.md

@@ -1 +1,8 @@
-# Nl
+# nl
+
+The nl utility reads lines from the named file or the standard input if the file argument is omitted, applies a configurable line numbering filter operation and writes the result to the standard output.
+
+See `man nl` for further information.
+
+<BadgeLink badgeText='Cheat Sheet' colorScheme='blue' href='https://www.geeksforgeeks.org/nl-command-in-linux-with-examples/'>nl Cheat Sheet</BadgeLink>
+<BadgeLink badgeText='Documentation' colorScheme='blue' href='https://man7.org/linux/man-pages/man1/nl.1.html'>nl Documentation</BadgeLink>

content/roadmaps/102-devops/content/102-managing-servers/101-live-in-terminal/131-wc.md

@@ -1 +1,8 @@
-# Wc
+# wc
+
+The wc utility displays the number of lines, words, and bytes contained in each input file, or standard input (if no file is specified) to the standard output.
+
+See `man wc` for further information.
+
+<BadgeLink badgeText='Cheat Sheet' colorScheme='blue' href='https://onecompiler.com/cheatsheets/wc'>wc Cheat Sheet</BadgeLink>
+<BadgeLink badgeText='Documentation' colorScheme='blue' href='https://linux.die.net/man/1/wc'>wc Documentation</BadgeLink>

content/roadmaps/102-devops/content/102-managing-servers/101-live-in-terminal/132-egrep.md

@@ -1 +1,12 @@
-# Egrep
+# egrep
+
+`egrep` (**E**xtended **Grep**) is a pattern searching command which belongs to the family of grep functions. It treats the pattern as an extended **regular expression** and prints out the lines that match the pattern.
+It works the same way as `$ grep -E` command
+
+It has the following syntax:
+
+`$  egrep [options] pattern [files]` e.g. `$ egrep "search-regex" *.txt`
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://linuxhint.com/linux_egrep_command_examples/'>Egrep command with examples</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.thegeekdiary.com/fgrep-command-examples-in-linux'>options</BadgeLink>

content/roadmaps/102-devops/content/102-managing-servers/101-live-in-terminal/133-fgrep.md

@@ -1 +1,13 @@
-# Fgrep
+# fgrep
+
+`fgrep` (**F**ixed **Grep**) command is used for searching fixed-character strings in a file.
+It treats meta-characters or regular expressions in the search field as strings. For searching any **direct string** or files having meta-characters, this is the version of grep which should be selected. It works the same way as `$ grep -F` command.
+
+It has the following syntax:
+
+`$  fgrep [options] [string] [files]` e.g. `$ fgrep "search-string" file.txt`
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.geeksforgeeks.org/fgrep-command-in-linux-with-examples/'>Fgrep command with examples</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.thegeekdiary.com/fgrep-command-examples-in-linux/'>options</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.tecmint.com/difference-between-grep-egrep-and-fgrep-in-linux/'>Grep vs Egrep vs Fgrep</BadgeLink>

content/roadmaps/102-devops/content/102-managing-servers/101-live-in-terminal/139-history.md

@@ -1 +1,8 @@
-# History
+# history
+
+`history` command is used to view the **previously executed command**. Every command executed is treated as the event and is associated with an event number using which they can be recalled and changed if required. These commands are saved in a history file.
+
+It has the below syntax: `$ history`
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.geeksforgeeks.org/history-command-in-linux-with-examples/'>What is history command? How to recall previous commands?</BadgeLink>

content/roadmaps/102-devops/content/102-managing-servers/101-live-in-terminal/141-scp.md

@@ -0,0 +1 @@
+# Scp

content/roadmaps/102-devops/content/103-networking-protocols/100-osi-model.md

@@ -1 +1,15 @@
-# Osi model
+# OSI Model
+
+Open Systems Interconnection (OSI) model is a **conceptual** model consists of 7 layers, that was proposed to standardize the communication between devices over the network. It was the first standard model for network communications, adopted by all major computer and telecommunication companies in the early 1980s.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.cloudflare.com/en-gb/learning/ddos/glossary/open-systems-interconnection-model-osi/'>What is OSI Model?</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=dV8mjZd1OtU'>OSI Model</BadgeLink>
+
+# TCP/IP Model
+
+TCP/IP model is a **practical** model consists of 4 layers. The modern Internet is based on this model.
+
+
+<BadgeLink  colorScheme='yellow' badgeText='Read' href='https://www.geeksforgeeks.org/tcp-ip-model/'>What is TCP/IP Model?</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=F5rni9fr1yE'>OSI vs TCP/IP Model</BadgeLink>

content/roadmaps/102-devops/content/103-networking-protocols/101-dns.md

@@ -1 +1,8 @@
-# Dns
+# DNS
+
+DNS (**D**omain **N**ame **S**ystem) is the phonebook of the Internet. Humans access information online through domain names, like nytimes.com or espn.com. Web browsers interact through Internet Protocol (IP) addresses. DNS translates domain names to IP addresses so browsers can load Internet resources.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.cloudflare.com/en-gb/learning/dns/what-is-dns/'>What is DNS?</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=Wj0od2ag5sk'>DNS and How does it Work?</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=7lxgpKh_fRY'>DNS Records</BadgeLink>

content/roadmaps/102-devops/content/103-networking-protocols/103-emails/101-smtp.md

@@ -1 +1,8 @@
-# Smtp
+# SMTP
+
+Email is emerging as one of the most valuable services on the internet today. Most internet systems use SMTP as a method to transfer mail from one user to another. SMTP is a push protocol and is used to send the mail whereas POP (post office protocol) or IMAP (internet message access protocol) are used to retrieve those emails at the receiver’s side.
+
+SMTP is an application layer protocol. The client who wants to send the mail opens a TCP connection to the SMTP server and then sends the mail across the connection. The SMTP server is an always-on listening mode. As soon as it listens for a TCP connection from any client, the SMTP process initiates a connection through port 25. After successfully establishing a TCP connection the client process sends the mail instantly.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.geeksforgeeks.org/simple-mail-transfer-protocol-smtp/'>What is Simple Mail Transfer Protocol (SMTP)?</BadgeLink>

content/roadmaps/102-devops/content/103-networking-protocols/103-https.md

@@ -1 +1,10 @@
-# Https
+# HTTPS
+
+HTTPS (**H**ypertext **T**ransfer **P**rotocol **S**ecure) is the secure version of HTTP, which is the primary protocol used to send data between a web browser and a website.
+
+`HTTPS = HTTP + SSL/TLS`
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink badgeText='Read' colorScheme="yellow" href='https://www.cloudflare.com/en-gb/learning/ssl/what-is-https/'>What is HTTPS?</BadgeLink>
+<BadgeLink badgeText='Read' colorScheme="yellow" href='https://developers.google.com/web/fundamentals/security/encrypt-in-transit/why-https'>Why HTTPS Matters</BadgeLink>
+<BadgeLink badgeText='Read' colorScheme="yellow" href='https://developers.google.com/web/fundamentals/security/encrypt-in-transit/enable-https'>Enabling HTTPS on Your Servers</BadgeLink>

content/roadmaps/102-devops/content/103-networking-protocols/104-ftp.md

@@ -1 +1,7 @@
-# Ftp
+# FTP
+
+File Transfer Protocol(FTP) is `TCP/IP` based application layer communication protocol that helps transferring files between local and remote file systems over the network. To transfer a file, 2 TCP connections(control connection and data connection) are used in parallel.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink badgeText='Read' colorScheme="yellow" href='https://www.geeksforgeeks.org/file-transfer-protocol-ftp-in-application-layer/'>What is FTP?</BadgeLink>
+<BadgeLink badgeText='Read' colorScheme="yellow" href='https://www.fortinet.com/resources/cyberglossary/file-transfer-protocol-ftp-meaning'>FTP vs SFTP vs FTPS</BadgeLink>

content/roadmaps/102-devops/content/103-networking-protocols/105-ssl-tls.md

@@ -1 +1,9 @@
-# Ssl tls
+# SSL/TLS
+
+Secure Sockets Layer (SSL) and Transport Layer Security (TLS) are cryptographic protocols used to provide security in internet communications. These protocols encrypt the data that is transmitted over the web, so anyone who tries to intercept packets will not be able to interpret the data. One difference that is important to know is that SSL is now deprecated due to security flaws, and most modern web browsers no longer support it. But TLS is still secure and widely supported, so preferably use TLS.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.cloudflare.com/learning/ssl/what-is-ssl/'>Cloudflare - What is SSL?</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.cloudflare.com/en-gb/learning/ssl/transport-layer-security-tls/'>Cloudflare - What is TLS?</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://en.wikipedia.org/wiki/Transport_Layer_Security'>Wikipedia - SSL/TLS</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Watch' href='https://www.youtube.com/watch?v=k3rFFLmQCuY'>SSH vs SSL vs TLS</BadgeLink>

content/roadmaps/102-devops/content/103-networking-protocols/106-ssh.md

@@ -1 +1,10 @@
-# Ssh
+# SSH
+
+The SSH (**S**ecure **Sh**ell) is a network communication protocol that enables two computers to communicate over an insecure network. It is a secure alternative to the non-protected login protocols (such as telnet, rlogin) and insecure file transfer methods (such as FTP). It is mostly used for secure Remote Login and File Transfer.
+
+`SFTP = FTP + SSH`
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink badgeText='Read' colorScheme="yellow" href='https://www.baeldung.com/cs/ssh-intro'>SSH Intro</BadgeLink>
+<BadgeLink badgeText='Official Website' colorScheme="blue" href='https://www.ssh.com/academy/ssh/protocol'>What is SSH?</BadgeLink>
+<BadgeLink badgeText='Read' colorScheme="yellow" href='https://www.goanywhere.com/blog/how-sftp-works'>SFTP using SSH</BadgeLink>

content/roadmaps/102-devops/content/103-networking-protocols/readme.md

@@ -1 +1,6 @@
-# Networking protocols
+# Networking Protocols
+
+A network protocol is an established set of rules that determine how data is transmitted between different devices in the same network. Essentially, it allows connected devices to communicate with each other, regardless of any differences in their internal processes, structure or design. Network protocols are the reason you can easily communicate with people all over the world, and thus play a critical role in modern digital communications.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.comptia.org/content/guides/what-is-a-network-protocol'>What Is a Network Protocol, and How Does It Work?</BadgeLink>

content/roadmaps/102-devops/content/104-setting-up-x/100-reverse-proxy.md

@@ -1 +1,13 @@
-# Reverse proxy
+# Reverse Proxy
+
+A Reverse Proxy server is a type of proxy server that typically sits behind the firewall in a private network and directs client requests to the appropriate backend server. It provides an additional level of security by hiding the server related details like `IP Address` to clients. It is also known as **server side proxy**.
+
+**Common Uses:**
+
+* Load balancing
+* Web acceleration
+* Security and anonymity
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.cloudflare.com/en-gb/learning/cdn/glossary/reverse-proxy/'>What is Reverse Proxy?</BadgeLink>
+<BadgeLink badgeText='Read' href='https://www.nginx.com/resources/glossary/reverse-proxy-server/'>NGINX documentation</BadgeLink>

content/roadmaps/102-devops/content/104-setting-up-x/101-caching-server.md

@@ -1 +1,8 @@
-# Caching server
+# Caching server
+
+A cache server is a **dedicated network server** or service acting as a server that saves Web pages or other Internet content locally. By placing previously requested information in temporary storage, or cache, a cache server both speeds up access to data and reduces demand on an enterprise's bandwidth.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.cloudflare.com/en-gb/learning/cdn/what-is-caching/'>What is Caching?</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://networkencyclopedia.com/cache-server/'>What is Cache Server?</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://wp-rocket.me/blog/different-types-of-caching/'>Site Cache vs Browser Cache vs Server Cache</BadgeLink>

content/roadmaps/102-devops/content/104-setting-up-x/102-forward-proxy.md

@@ -1 +1,13 @@
-# Forward proxy
+# Forward Proxy
+
+Forward Proxy, often called proxy server is a server that sits in front of a group of **client machines**. When those computers make requests to sites and services on the Internet, the proxy server intercepts those requests and then communicates with web servers on behalf of those clients, like a middleman.
+
+**Common Uses:**
+
+* To block access to certain content
+* To protect client identity online
+* To provide restricted internet to organizations
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.fortinet.com/resources/cyberglossary/proxy-server'>What is Forward Proxy?</BadgeLink>
+<BadgeLink badgeText='Read' href='https://oxylabs.io/blog/reverse-proxy-vs-forward-proxy'>Forward vs Reverse Proxy</BadgeLink>

content/roadmaps/102-devops/content/104-setting-up-x/103-load-balancer.md

@@ -1 +1,7 @@
-# Load balancer
+# Load Balancer
+
+Load Balancer acts as the **traffic cop** sitting in front of your servers and routing client requests across all servers capable of fulfilling those requests in a manner that maximizes speed and capacity utilization and ensures that no one server is overworked. If a one of the servers goes down, the load balancer redirects traffic to the remaining online servers.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.nginx.com/resources/glossary/load-balancing/'>What is Load Balancing?</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.cloudflare.com/en-gb/learning/performance/what-is-load-balancing/'>Load Balancing concepts and algorithms</BadgeLink>

content/roadmaps/102-devops/content/104-setting-up-x/104-firewall.md

@@ -1 +1,7 @@
-# Firewall
+# Firewall
+
+Firewall is a **network security device** that monitors and filters incoming and outgoing network traffic based on an organization’s previously established security policies. It is a barrier that sits between a private internal network and the public Internet. A firewall’s main purpose is to allow non-threatening traffic in and to keep dangerous traffic out.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.checkpoint.com/cyber-hub/network-security/what-is-firewall/'>What is Firewall?</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.cisco.com/c/en_in/products/security/firewalls/what-is-a-firewall.html'>Types of Firewall</BadgeLink>

content/roadmaps/102-devops/content/104-setting-up-x/107-tomcat.md

@@ -1 +1,8 @@
-# Tomcat
+# Tomcat
+
+Tomcat is an open source implementation of the Jakarta Servlet, Jakarta Server Pages, Jakarta Expression Language, Jakarta WebSocket, Jakarta Annotations and Jakarta Authentication specifications. These specifications are part of the Jakarta EE platform.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Software Website' href='https://tomcat.apache.org/'>Tomcat Website</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Read' href='https://tomcat.apache.org/tomcat-10.0-doc/index.html'>Official Documentation(Tomcat 10.0)</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/c/ApacheTomcatOfficial'>Apache Tomcat</BadgeLink>

content/roadmaps/102-devops/content/105-infrastructure-as-code/100-service-mesh/100-consul.md

@@ -1 +1,6 @@
-# Consul
+# Consul
+
+Consul is a service mesh solution providing a full featured control plane with service discovery, configuration, and segmentation functionality. Each of these features can be used individually as needed, or they can be used together to build a full service mesh. Consul requires a data plane and supports both a proxy and native integration model. Consul ships with a simple built-in proxy so that everything works out of the box, but also supports 3rd party proxy integrations such as Envoy.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Read' href='https://www.consul.io/docs/intro'>What is Consul?</BadgeLink>

content/roadmaps/102-devops/content/105-infrastructure-as-code/100-service-mesh/101-istio.md

@@ -1 +1,6 @@
-# Istio
+# Istio
+
+Istio is an open source service mesh platform that provides a way to control how microservices share data with one another. It includes APIs that let Istio integrate into any logging platform, telemetry, or policy system. Istio is designed to run in a variety of environments: on-premise, cloud-hosted, in Kubernetes containers, in services running on virtual machines, and more.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='red' badgeText='Read' href='https://www.redhat.com/en/topics/microservices/what-is-istio'>What is Istio?</BadgeLink>

content/roadmaps/102-devops/content/105-infrastructure-as-code/100-service-mesh/102-envoy.md

@@ -1 +1,8 @@
-# Envoy
+# Envoy
+
+Originally created at Lyft, Envoy is a high-performance data plane designed for service mesh architectures. Lyft open sourced it and donated it to the CNCF, where it is now one of the CNCF’s graduated open source projects. Envoy is a self contained process that is designed to run alongside every application server. All of the Envoys form a transparent communication mesh in which each application sends and receives messages to and from localhost and is unaware of the network topology.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://www.envoyproxy.io/'>Envoy Website</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://www.envoyproxy.io/docs/envoy/latest/start/start'>Envoy Documentation</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Read' href='https://www.envoyproxy.io/docs/envoy/latest/intro/what_is_envoy'>What is Envoy?</BadgeLink>

content/roadmaps/102-devops/content/105-infrastructure-as-code/100-service-mesh/103-linkerd.md

@@ -1 +1,8 @@
-# Linkerd
+# Linkerd
+
+Linkerd is an open source service mesh designed to be deployed into a variety of container schedulers and frameworks such as Kubernetes. It became the original “service mesh” when its creator Buoyant first coined the term in 2016. Like Twitter’s Finagle, on which it was based, Linkerd was first written in Scala and designed to be deployed on a per-host basis. Linkerd is one of the first products to be associated with the term service mesh and supports platforms such as Docker and Kubernetes.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://linkerd.io/'>Linkerd Website</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Documentation' href='https://linkerd.io/2.11/overview/'>Linkerd Documentation</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Read' href='https://www.techtarget.com/searchitoperations/definition/Linkerd'>What is Linkerd?</BadgeLink>

content/roadmaps/102-devops/content/105-infrastructure-as-code/100-service-mesh/readme.md

@@ -1 +1,6 @@
-# Service mesh
+# Service Mesh
+
+A service mesh, like the open source project Istio, is a way to control how different parts of an application share data with one another. Unlike other systems for managing this communication, a service mesh is a dedicated infrastructure layer built right into an app. This visible infrastructure layer can document how well (or not) different parts of an app interact, so it becomes easier to optimize communication and avoid downtime as an app grows.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.redhat.com/en/topics/microservices/what-is-a-service-mesh'>What's a service mesh?</BadgeLink>

content/roadmaps/102-devops/content/105-infrastructure-as-code/102-configuration-management/readme.md

@@ -1 +1,8 @@
-# Configuration management
+# Configuration Management
+
+Configuration management is a systems engineering process for establishing consistency of a product’s attributes throughout its life. In the technology world, configuration management is an IT management process that tracks individual configuration items of an IT system. IT systems are composed of IT assets that vary in granularity. An IT asset may represent a piece of software, or a server, or a cluster of servers. The following focuses on configuration management as it directly applies to IT software assets and software asset CI/CD.
+
+Software configuration management is a systems engineering process that tracks and monitors changes to a software systems configuration metadata. In software development, configuration management is commonly used alongside version control and CI/CD infrastructure. This post focuses on its modern application and use in agile CI/CD software environments.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Read' href='https://www.atlassian.com/microservices/microservices-architecture/configuration-management'>What is configuration management?</BadgeLink>

content/roadmaps/102-devops/content/105-infrastructure-as-code/104-docker-swarm.md

@@ -1 +1,8 @@
-# Docker swarm
+# Docker Swarm
+
+A Docker Swarm is a group of either physical or virtual machines that are running the Docker application and that have been configured to join together in a cluster. Once a group of machines have been clustered together, you can still run the Docker commands that you're used to, but they will now be carried out by the machines in your cluster. The activities of the cluster are controlled by a swarm manager, and machines that have joined the cluster are referred to as nodes.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://www.docker.com/'>Official Website</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Documentation' href='https://docs.docker.com/engine/swarm/'>Docker Swarm Documentation</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=Tm0Q5zr3FL4'>Docker Swarm Tutorial for Beginners</BadgeLink>

content/roadmaps/102-devops/content/105-infrastructure-as-code/104-mesos.md

@@ -1 +1,8 @@
-# Mesos
+# Mesos
+
+Apache Mesos is an open-source project to manage computer clusters. It was developed at the University of California, Berkeley.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://mesos.apache.org/'>Official Website</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Documentation' href='https://mesos.apache.org/documentation/latest/'>Apache Mesos Documentation</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=ugmfP-QtgTA'>Getting Started with Apache Mesos</BadgeLink>

content/roadmaps/102-devops/content/106-ci-cd/102-github-actions.md

@@ -5,3 +5,5 @@ Automate, customize, and execute your software development workflows right in yo
 <ResourceGroupTitle>Free Content</ResourceGroupTitle>
 <BadgeLink badgeText='Docs' colorScheme='blue' href='https://docs.github.com/en/actions'>GitHub Actions Documentation</BadgeLink>
 <BadgeLink badgeText='Read' colorScheme='yellow' href='https://docs.github.com/en/actions/learn-github-actions'>Learn GitHub Actions</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://youtu.be/cP0I9w2coGU'>GitHub Actions - Supercharge your GitHub Flow</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=nyKZTKQS_EQ'>Automate your Workflow with GitHub Actions</BadgeLink>

content/roadmaps/102-devops/content/107-monitoring/100-infrastructure-monitoring/102-datadog.md

@@ -1 +1,6 @@
-# Datadog
+# Datadog
+
+Datadog is a monitoring and analytics platform for large-scale applications. It encompasses infrastructure monitoring, application performance monitoring, log management, and user-experience monitoring. Datadog aggregates data across your entire stack with 400+ integrations for troubleshooting, alerting, and graphing. 
+
+<BadgeLink badgeText='Official Website' colorScheme='blue' href='https://www.datadoghq.com/'>Datadog Website</BadgeLink>
+<BadgeLink badgeText='Official Documentation' colorScheme='blue' href='https://docs.datadoghq.com/'>Official Documentation</BadgeLink>

content/roadmaps/102-devops/content/107-monitoring/100-infrastructure-monitoring/102-zabbix.md

@@ -1 +1,8 @@
-# Zabbix
+# Zabbix
+
+Zabbix is an enterprise-class open source monitoring solution for network monitoring and application monitoring of millions of metrics.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://www.zabbix.com/'>Zabbix Website</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Read' href='https://www.zabbix.com/manuals'>Official Documentation</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.zabbix.com/roadmap'>Zabbix Roadmap</BadgeLink>

content/roadmaps/102-devops/content/107-monitoring/101-application-monitoring/100-jaeger.md

@@ -1 +1,7 @@
-# Jaeger
+# Jaeger
+
+Jaeger is an open source, end-to-end distributed tracing system that enables us to monitor and troubleshoot transactions in complex distributed systems.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='System Website' href='https://www.jaegertracing.io/'>Jaeger Website</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Read' href='https://www.jaegertracing.io/docs/1.37/'>Official Documentation</BadgeLink>

content/roadmaps/102-devops/content/107-monitoring/101-application-monitoring/101-new-relic.md

@@ -1 +1,8 @@
-# New relic
+# New Relic
+
+New Relic is where dev, ops, security and business teams solve software–performance problems with data. 
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='System Website' href='https://newrelic.com/'>New Relic Website</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Read' href='https://docs.newrelic.com/'>Official Documentation</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Read' href='https://developer.newrelic.com/'>New Relic Developer Hub</BadgeLink>

content/roadmaps/102-devops/content/107-monitoring/101-application-monitoring/102-app-dynamics.md

@@ -1 +1,7 @@
-# App dynamics
+# AppDynamics
+
+AppDynamics is a full-stack application performance management (APM) and IT operations analytics (ITOA) company based in San Francisco. The company focuses on managing the performance and availability of applications across cloud computing environments, IT infrastructure, network architecture, digital user experience design, application security threat detection, observability, and data centers.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Framework Website' href='https://www.appdynamics.com/'>AppDynamics Website</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Read' href='https://www.appdynamics.com/resources'>Official Resources</BadgeLink>

content/roadmaps/102-devops/content/107-monitoring/101-application-monitoring/103-instana.md

@@ -1 +1,7 @@
-# Instana
+# Instana
+
+Instana is particularly used in monitoring and managing the performance of software used in microservice architectures, and permits 3D visualisation of performance through graphs generated using machine learning algorithms, with notifications regarding performance also generated automatically. Instana's Application Performance Monitoring (APM) tool of the same name is especially purposed for monitoring software used in so-called "container orchestration" (a modular method of providing a software service).
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='System Website' href='https://www.instana.com/'>Instana Website</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Read' href='https://www.instana.com/resources/'>Official Resources(White Papers and Ebooks) </BadgeLink>

content/roadmaps/102-devops/content/107-monitoring/101-application-monitoring/104-open-telemetry.md

@@ -0,0 +1,7 @@
+# OpenTelemetry
+
+OpenTelemetry is a collection of tools, APIs, and SDKs. Use it to instrument, generate, collect, and export telemetry data (metrics, logs, and traces) to help you analyze your software’s performance and behavior.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Website' href='https://opentelemetry.io/'>OpenTelemetry Website</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Read' href='https://opentelemetry.io/docs/'>Official Documentation</BadgeLink>

content/roadmaps/102-devops/content/107-monitoring/101-application-monitoring/104-open-tracing.md

@@ -1 +0,0 @@
-# Open tracing

content/roadmaps/102-devops/content/107-monitoring/102-logs-management/100-elastic-stack.md

@@ -1 +1,8 @@
-# Elastic stack
+# Elastic Stack
+
+Elastic Stack is a group of open source products comprised of Elasticsearch, Kibana, Beats, and Logstash and more that help store, search, analyze, and visualize data from various source, in different format, in real-time.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://www.elastic.co/elastic-stack/'>Elastic Stack Website</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://www.elastic.co/guide/index.html'>Official Docs</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Features List' href='https://www.elastic.co/elastic-stack/features'>Elastic Stack features</BadgeLink>

content/roadmaps/102-devops/content/107-monitoring/102-logs-management/101-graylog.md

@@ -1 +1,8 @@
-# Graylog
+# Graylog
+
+Graylog is a leading centralized log management solution for capturing, storing, and enabling real-time analysis of terabytes of machine data.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://www.graylog.org/'>Graylog Website</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Read' href='https://docs.graylog.org/'>Official Documentation</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.graylog.org/resources-videos'>Product Videos</BadgeLink>

content/roadmaps/102-devops/content/107-monitoring/102-logs-management/102-papertrail.md

@@ -1 +1,8 @@
-# Papertrail
+# Papertrail
+
+Papertrail is a leading centralized log management solution for capturing, storing, and enabling real-time analysis of terabytes of machine data.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://www.papertrail.com/'>Papertrail Website</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Read' href='https://www.papertrail.com/solution/guides/'>Official Guides</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Read' href='https://www.papertrail.com/blog/'>Official Blog</BadgeLink>

content/roadmaps/102-devops/content/107-monitoring/102-logs-management/102-splunk.md

@@ -1 +1,8 @@
-# Splunk
+# Splunk
+
+The Splunk platform removes the barriers between data and action, empowering observability, IT and security teams to ensure their organizations are secure, resilient and innovative.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Splunk Website' href='https://www.splunk.com/'>Splunk Website</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Read' href='https://docs.splunk.com/Documentation'>Official Documentation</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.splunk.com/en_us/resources/videos.html'>Splunk Videos</BadgeLink>

content/roadmaps/102-devops/content/108-cloud-providers/104-albaba-cloud.md

@@ -1 +1,7 @@
-# Albaba cloud
+# Alibaba Cloud
+
+Alibaba Cloud is a cloud computing service, offering over 100 products and services with data centers in 24 regions and 74 availability zones around the world.
+
+<BadgeLink badgeText='Official Website' colorScheme='blue' href='https://www.alibabacloud.com/'>Alibaba Cloud Website</BadgeLink>
+<BadgeLink badgeText='Official Documentation' colorScheme='blue' href='https://www.alibabacloud.com/help/en/'>Official Documentation</BadgeLink>
+<BadgeLink badgeText='Get Started Guide' colorScheme='blue' href='https://www.alibabacloud.com/getting-started'>Alibaba Cloud Getting Started Guide</BadgeLink>

content/roadmaps/102-devops/content/108-cloud-providers/105-linode.md

@@ -1 +1,7 @@
-# Linode
+# Linode
+
+Linode is a cloud computing service owned by Akamai Technologies. Linode positions itself as an alternative to AWS, GCP and Azure by offering core services without complexity for most workloads.
+
+<BadgeLink badgeText='Official Website' colorScheme='blue' href='https://www.linode.com/'>Linode Website</BadgeLink>
+<BadgeLink badgeText='Official Documentation' colorScheme='blue' href='https://www.linode.com/docs/'>Official Documentation</BadgeLink>
+<BadgeLink badgeText='Get Started Guide' colorScheme='blue' href='https://www.linode.com/docs/guides/getting-started/'>Linode Getting Started Guide</BadgeLink>

content/roadmaps/102-devops/content/108-cloud-providers/106-vultr.md

@@ -1 +1,6 @@
-# Vultr
+# Vultr
+
+Vultr is an infrastructure focussed cloud computing service, available in 25 locations worldwide. Vultur compute offers 100% SSD and high performance Intel vCPUs.
+
+<BadgeLink badgeText='Official Website' colorScheme='blue' href='https://www.vultr.com/'>Vultr Website</BadgeLink>
+<BadgeLink badgeText='Official Documentation' colorScheme='blue' href='https://www.vultr.com/docs/'>Official Documentation</BadgeLink>

content/roadmaps/102-devops/content/110-data-management.md

@@ -1 +1,8 @@
-# Data management
+# Data Management
+
+Data management is the key element of cloud applications, and influences most of the quality attributes. Data is typically hosted in different locations and across multiple servers for reasons such as performance, scalability or availability, and this can present a range of challenges. For example, data consistency must be maintained, and data will typically need to be synchronized across different locations.
+
+Additionally data should be protected at rest, in transit, and via authorized access mechanisms to maintain security assurances of confidentiality, integrity, and availability. Refer to the Azure Security Benchmark Data Protection Control for more information.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink badgeText='Read' colorScheme='blue' href='https://docs.microsoft.com/en-us/azure/architecture/patterns/category/data-management'>Data management patterns</BadgeLink>

content/roadmaps/102-devops/content/111-design-and-implementation.md

@@ -1 +1,6 @@
-# Design and implementation
+# Design and implementation
+
+Good design encompasses factors such as consistency and coherence in component design and deployment, maintainability to simplify administration and development, and reusability to allow components and subsystems to be used in other applications and in other scenarios. Decisions made during the design and implementation phase have a huge impact on the quality and the total cost of ownership of cloud hosted applications and services.
+
+
+<BadgeLink colorScheme='blue' badgeText='Read' href='https://docs.microsoft.com/en-us/azure/architecture/patterns/category/design-implementation'>Design and implementation patterns</BadgeLink>

content/roadmaps/103-react/content-paths.json

@@ -0,0 +1,64 @@
+{
+  "home": "/roadmaps/103-react/content/readme.md",
+  "react-advanced-topics": "/roadmaps/103-react/content/101-react-advanced-topics/readme.md",
+  "react-advanced-topics:hooks": "/roadmaps/103-react/content/101-react-advanced-topics/100-hooks/readme.md",
+  "react-advanced-topics:hooks:common-hooks": "/roadmaps/103-react/content/101-react-advanced-topics/100-hooks/102-common-hooks.md",
+  "react-advanced-topics:hooks:writing-your-own-hooks": "/roadmaps/103-react/content/101-react-advanced-topics/100-hooks/101-writing-your-own-hooks.md",
+  "react-advanced-topics:context": "/roadmaps/103-react/content/101-react-advanced-topics/101-context.md",
+  "react-advanced-topics:refs": "/roadmaps/103-react/content/101-react-advanced-topics/102-refs.md",
+  "react-advanced-topics:render-props": "/roadmaps/103-react/content/101-react-advanced-topics/103-render-props.md",
+  "react-advanced-topics:high-order-components": "/roadmaps/103-react/content/101-react-advanced-topics/104-high-order-components.md",
+  "react-advanced-topics:portals": "/roadmaps/103-react/content/101-react-advanced-topics/105-portals.md",
+  "react-advanced-topics:error-boundaries": "/roadmaps/103-react/content/101-react-advanced-topics/106-error-boundaries.md",
+  "react-advanced-topics:fiber-architecture": "/roadmaps/103-react/content/101-react-advanced-topics/107-fiber-architecture.md",
+  "react-fundamental-topics": "/roadmaps/103-react/content/100-react-fundamental-topics/readme.md",
+  "react-fundamental-topics:create-react-app": "/roadmaps/103-react/content/100-react-fundamental-topics/100-create-react-app.md",
+  "react-fundamental-topics:jsx": "/roadmaps/103-react/content/100-react-fundamental-topics/101-jsx.md",
+  "react-fundamental-topics:components": "/roadmaps/103-react/content/100-react-fundamental-topics/102-components/readme.md",
+  "react-fundamental-topics:components:functional-components": "/roadmaps/103-react/content/100-react-fundamental-topics/102-components/100-functional-components.md",
+  "react-fundamental-topics:components:class-components": "/roadmaps/103-react/content/100-react-fundamental-topics/102-components/101-class-components.md",
+  "react-fundamental-topics:props-vs-state": "/roadmaps/103-react/content/100-react-fundamental-topics/103-props-vs-state.md",
+  "react-fundamental-topics:conditional-rendering": "/roadmaps/103-react/content/100-react-fundamental-topics/104-conditional-rendering.md",
+  "react-fundamental-topics:component-life-cycle": "/roadmaps/103-react/content/100-react-fundamental-topics/105-component-life-cycle.md",
+  "react-fundamental-topics:lists-and-keys": "/roadmaps/103-react/content/100-react-fundamental-topics/106-lists-and-keys.md",
+  "react-fundamental-topics:composition-vs-inheritance": "/roadmaps/103-react/content/100-react-fundamental-topics/107-composition-vs-inheritance.md",
+  "react-fundamental-topics:basic-hooks": "/roadmaps/103-react/content/100-react-fundamental-topics/108-basic-hooks/readme.md",
+  "react-fundamental-topics:basic-hooks:use-state": "/roadmaps/103-react/content/100-react-fundamental-topics/108-basic-hooks/100-use-state.md",
+  "react-fundamental-topics:basic-hooks:use-effect": "/roadmaps/103-react/content/100-react-fundamental-topics/108-basic-hooks/101-use-effect.md",
+  "react-ecosystem": "/roadmaps/103-react/content/102-react-ecosystem/readme.md",
+  "react-ecosystem:routers": "/roadmaps/103-react/content/102-react-ecosystem/100-routers/readme.md",
+  "react-ecosystem:routers:react-router": "/roadmaps/103-react/content/102-react-ecosystem/100-routers/100-react-router.md",
+  "react-ecosystem:routers:reach-router": "/roadmaps/103-react/content/102-react-ecosystem/100-routers/101-reach-router.md",
+  "react-ecosystem:ssr": "/roadmaps/103-react/content/102-react-ecosystem/101-ssr/readme.md",
+  "react-ecosystem:ssr:next-js": "/roadmaps/103-react/content/102-react-ecosystem/101-ssr/100-next-js.md",
+  "react-ecosystem:ssg": "/roadmaps/103-react/content/102-react-ecosystem/102-ssg/readme.md",
+  "react-ecosystem:ssg:gatsby": "/roadmaps/103-react/content/102-react-ecosystem/102-ssg/101-gatsby.md",
+  "react-ecosystem:api-calls": "/roadmaps/103-react/content/102-react-ecosystem/103-api-calls/readme.md",
+  "react-ecosystem:api-calls:react-query": "/roadmaps/103-react/content/102-react-ecosystem/103-api-calls/100-react-query.md",
+  "react-ecosystem:api-calls:use-http": "/roadmaps/103-react/content/102-react-ecosystem/103-api-calls/101-use-http.md",
+  "react-ecosystem:api-calls:apollo": "/roadmaps/103-react/content/102-react-ecosystem/103-api-calls/102-apollo.md",
+  "react-ecosystem:api-calls:relay-modern": "/roadmaps/103-react/content/102-react-ecosystem/103-api-calls/103-relay-modern.md",
+  "react-ecosystem:api-calls:axios": "/roadmaps/103-react/content/102-react-ecosystem/103-api-calls/104-axios.md",
+  "react-ecosystem:api-calls:unfetch": "/roadmaps/103-react/content/102-react-ecosystem/103-api-calls/105-unfetch.md",
+  "react-ecosystem:api-calls:superagent": "/roadmaps/103-react/content/102-react-ecosystem/103-api-calls/106-superagent.md",
+  "react-ecosystem:mobile": "/roadmaps/103-react/content/102-react-ecosystem/104-mobile/readme.md",
+  "react-ecosystem:mobile:react-native": "/roadmaps/103-react/content/102-react-ecosystem/104-mobile/100-react-native.md",
+  "react-ecosystem:forms": "/roadmaps/103-react/content/102-react-ecosystem/105-forms/readme.md",
+  "react-ecosystem:forms:react-hook-form": "/roadmaps/103-react/content/102-react-ecosystem/105-forms/100-react-hook-form.md",
+  "react-ecosystem:forms:formik": "/roadmaps/103-react/content/102-react-ecosystem/105-forms/101-formik.md",
+  "react-ecosystem:forms:final-form": "/roadmaps/103-react/content/102-react-ecosystem/105-forms/102-final-form.md",
+  "react-ecosystem:testing": "/roadmaps/103-react/content/102-react-ecosystem/106-testing/readme.md",
+  "react-ecosystem:testing:jest": "/roadmaps/103-react/content/102-react-ecosystem/106-testing/100-jest.md",
+  "react-ecosystem:testing:react-testing-library": "/roadmaps/103-react/content/102-react-ecosystem/106-testing/101-react-testing-library.md",
+  "react-ecosystem:testing:cypress": "/roadmaps/103-react/content/102-react-ecosystem/106-testing/102-cypress.md",
+  "react-ecosystem:state-management": "/roadmaps/103-react/content/102-react-ecosystem/107-state-management/readme.md",
+  "react-ecosystem:state-management:conext-state": "/roadmaps/103-react/content/102-react-ecosystem/107-state-management/100-conext-state.md",
+  "react-ecosystem:state-management:redux": "/roadmaps/103-react/content/102-react-ecosystem/107-state-management/101-redux.md",
+  "react-ecosystem:state-management:mobx": "/roadmaps/103-react/content/102-react-ecosystem/107-state-management/102-mobx.md",
+  "react-ecosystem:styling": "/roadmaps/103-react/content/102-react-ecosystem/108-styling/readme.md",
+  "react-ecosystem:styling:chakra-ui": "/roadmaps/103-react/content/102-react-ecosystem/108-styling/100-chakra-ui.md",
+  "react-ecosystem:styling:material-ui": "/roadmaps/103-react/content/102-react-ecosystem/108-styling/101-material-ui.md",
+  "react-ecosystem:styling:ant-design": "/roadmaps/103-react/content/102-react-ecosystem/108-styling/102-ant-design.md",
+  "react-ecosystem:styling:styled-components": "/roadmaps/103-react/content/102-react-ecosystem/108-styling/103-styled-components.md",
+  "react-ecosystem:styling:emotion": "/roadmaps/103-react/content/102-react-ecosystem/108-styling/104-emotion.md"
+}

content/roadmaps/103-react/content/100-react-fundamental-topics/100-create-react-app.md

@@ -0,0 +1,8 @@
+# Create React App
+
+Create React App is the CLI based tool and is the best way to start building a new single-page application in React.
+
+It sets up your development environment so that you can use the latest JavaScript features, provides a nice developer experience, and optimizes your app for production. You’ll need to have Node >= 14.0.0 and npm >= 5.6 on your machine.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://create-react-app.dev/docs/getting-started'>Official Website</BadgeLink>

content/roadmaps/103-react/content/100-react-fundamental-topics/101-jsx.md

@@ -0,0 +1,8 @@
+# JSX
+
+JSX stands for JavaScript XML. It allows writing HTML in JavaScript and converts the HTML tags into React elements.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Official Introduction' href='https://reactjs.org/docs/introducing-jsx.html'>Introduction to JSX</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.freecodecamp.org/news/jsx-in-react-introduction/'>JSX in React – Explained with Examples</BadgeLink>
+

content/roadmaps/103-react/content/100-react-fundamental-topics/102-components/100-functional-components.md

@@ -0,0 +1,7 @@
+# Functional Components
+
+Functional components are some of the more common components that will come across while working in React. These are simply JavaScript functions. We can create a functional component to React by writing a JavaScript function. These functions may or may not receive data as parameters. In the functional Components, the return value is the JSX code to render to the DOM tree. Functional components can also have state which is managed using React hooks.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://reactjs.org/docs/components-and-props.html#function-and-class-components'>Components and Props</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.geeksforgeeks.org/reactjs-functional-components/'>ReactJS Functional Components</BadgeLink>

content/roadmaps/103-react/content/100-react-fundamental-topics/102-components/101-class-components.md

@@ -0,0 +1,10 @@
+# Class Components
+
+Components can either be created using the class based approach or a functional approach. These components are simple classes (made up of multiple functions that add functionality to the application). All class based components are child classes for the Component class of ReactJS.
+
+Although the class components are supported in React, it is encouraged to write functional components and make use of hooks in modern React applications.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://reactjs.org/docs/components-and-props.html#function-and-class-components'>Components and Props</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://medium.com/geekculture/is-there-any-reason-to-still-use-react-class-components-9b6a1e6aa9ef'>Is There Any Reason to Still Use React Class Components?</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.freecodecamp.org/news/functional-components-vs-class-components-in-react'>Functional Components vs Class Components in React</BadgeLink>

content/roadmaps/103-react/content/100-react-fundamental-topics/102-components/readme.md

@@ -0,0 +1,9 @@
+# Components
+
+Components are the building blocks of React applications. They let us split the UI into independent, reusable pieces, and think about each piece in isolation.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://reactjs.org/docs/components-and-props.html'>Components and Props</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://reactjs.org/docs/react-component.html'>Components in Depth</BadgeLink>
+
+

content/roadmaps/103-react/content/100-react-fundamental-topics/103-props-vs-state.md

@@ -0,0 +1,8 @@
+# Props vs State
+
+Props (short for “properties”) and state are both plain JavaScript objects. While both hold information that influences the output of component render, they are different in one important way: props get passed to the component (similar to function parameters) whereas state is managed within the component (similar to variables declared within a function).
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://reactjs.org/docs/faq-state.html'>Component State</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://stackoverflow.com/questions/27991366/what-is-the-difference-between-state-and-props-in-react'>What is the difference between state and props in React?</BadgeLink>
+

content/roadmaps/103-react/content/100-react-fundamental-topics/104-conditional-rendering.md

@@ -0,0 +1,11 @@
+# Conditional Rendering
+
+In React, you can create distinct components that encapsulate behavior you need. Then, you can render only some of them, depending on the state of your application.
+
+Conditional rendering in React works the same way conditions work in JavaScript. Use JavaScript operators like [if](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if...else) or the [conditional operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator) to create elements representing the current state, and let React update the UI to match them.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://reactjs.org/docs/conditional-rendering.html'>Conditional Rendering</BadgeLink>
+
+
+

content/roadmaps/103-react/content/100-react-fundamental-topics/105-component-life-cycle.md

@@ -0,0 +1,9 @@
+# Component Life Cycle
+
+Each component has several “lifecycle methods” that you can override to run code at particular times in the process. You can use this [lifecycle diagram](https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/) as a cheat sheet. In the list below, commonly used lifecycle methods are marked as bold. The rest of them exist for relatively rare use cases.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://reactjs.org/docs/react-component.html#the-component-lifecycle'>The Component Lifecycle</BadgeLink>
+
+
+

content/roadmaps/103-react/content/100-react-fundamental-topics/106-lists-and-keys.md

@@ -0,0 +1,6 @@
+# Lists and Keys
+
+When you render lists in React, you can use the `key` prop to specify a unique key for each item. This key is used to identify which item to update when you want to update a specific item.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://reactjs.org/docs/lists-and-keys.html'>Lists and Keys</BadgeLink>

content/roadmaps/103-react/content/100-react-fundamental-topics/107-composition-vs-inheritance.md

@@ -0,0 +1,7 @@
+# Composition vs Inheritance
+
+React has a powerful composition model, and it is recommended to use composition instead of inheritance to reuse code between components.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://reactjs.org/docs/composition-vs-inheritance.html'>Composition vs Inheritance</BadgeLink>
+

content/roadmaps/103-react/content/100-react-fundamental-topics/108-basic-hooks/100-use-state.md

@@ -0,0 +1,7 @@
+# useState Hook
+
+`useState` hook is used to manage the state of a component in functional components. Calling `useState` returns an array with two elements: the current state value and a function to update the state.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://reactjs.org/docs/hooks-state.html'>Using the State Hook</BadgeLink>
+

content/roadmaps/103-react/content/100-react-fundamental-topics/108-basic-hooks/101-use-effect.md

@@ -0,0 +1,6 @@
+# useEffect Hook
+
+`useEffect` is a special hook that lets you run side effects in React. It is similar to componentDidMount and componentDidUpdate, but it only runs when the component (or some of its props) changes.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://reactjs.org/docs/hooks-effect.html'>Using the Effect Hook</BadgeLink>

content/roadmaps/103-react/content/100-react-fundamental-topics/108-basic-hooks/readme.md

@@ -0,0 +1,7 @@
+# Hooks
+
+Hooks were introduced in React 16.8 and they let us use state and other React features without writing a class
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://reactjs.org/docs/hooks-intro.html'>Introduction to Hooks</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://reactjs.org/docs/hooks-reference.html'>Hooks Reference</BadgeLink>

content/roadmaps/103-react/content/100-react-fundamental-topics/readme.md

@@ -0,0 +1,7 @@
+# React
+
+React is a JavaScript library for building user interfaces. It is an open-source, component-based front end library responsible only for the view layer of the application.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://reactjs.org/'>Official Website</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://reactjs.org/docs/getting-started.html'>Official Documentation</BadgeLink>