Add vite, vitest and playwright

* Add Video Session vs Token Authentication in 100 Seconds

* Fix JWT Title

.github/workflows/deploy.yml

@@ -5,6 +5,7 @@ on:
 env:
   ROADMAP_GA_SECRET: ${{ secrets.GA_SECRET }}
   GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+  PAT: ${{ secrets.PAT }}
   CI: true
   NEXT_TELEMETRY_DISABLED: 1
 jobs:
@@ -12,9 +13,11 @@ jobs:
     runs-on: ubuntu-latest
     steps:
     - uses: actions/checkout@v2
+      with:
+        persist-credentials: false
     - uses: actions/setup-node@v1
       with:
-        node-version: 14
+        node-version: 16
     - name: Setup Environment
       run: |
         npm install

components/custom-ad.tsx

@@ -1,37 +1,68 @@
+import { Box, Flex, Heading, Image, Link } from '@chakra-ui/react';
+import { event } from '../lib/gtag';
+
+function getPageSlug() {
+  const pathname = (typeof window !== 'undefined' ? window : {} as any)?.location?.pathname || '';
+
+  return pathname?.replace(/\//g, '');
+}
+
 export const CustomAd = () => {
+  const slug = getPageSlug();
+  if (slug !== 'devops') {
+    return null;
+  }
+
   return (
-    <div id='carbonads'>
-      <span>
-        <span className='carbon-wrap'>
-          <a
-            href='https://freemote.com/strategy?sl=roadmap'
-            className='carbon-img'
-            target='_blank'
-          >
-            <img
-              src='/fm-img.png'
-              alt='Custom Logo'
-              height='100'
-              width='130'
-              style={{ maxWidth: '130px', border: 'none' }}
-            />
-          </a>
-          <a
-            href='https://freemote.com/strategy?sl=roadmap'
-            className='carbon-text'
-            target='_blank'
-          >
-            He Went from ZERO TO $74,000 as a Full Time Developer in 7 Weeks
-          </a>
-        </span>
-        <a
-          href='https://github.com/sponsors/kamranahmedse'
-          className='carbon-poweredby'
-          target='_blank'
+    <Link
+      href='https://thenewstack.io/ebooks/devops/cloud-native-devops-2019/?utm_source=Roadmap.sh&utm_medium=Banner&utm_campaign=Roadmap+DevOps+Ebook'
+      id='custom-ad'
+      pos='fixed'
+      bottom='15px'
+      right='20px'
+      zIndex={999}
+      display='flex'
+      maxWidth='330px'
+      bg='white'
+      boxShadow='0 1px 4px 1px hsla(0, 0%, 0%, .1)'
+      _hover={{ textDecoration: 'none' }}
+      rel="noopener sponsored"
+      target={'_blank'}
+      onClick={() => {
+        event({
+          category: 'SponsorClick',
+          action: `TNS EBook Redirect`,
+          label: `Clicked TNS EBook Link`
+        });
+      }}
+    >
+      <Image
+        src='https://i.imgur.com/fEKq19S.png'
+        alt='Custom Logo'
+        height={['100px', '100px', '100px', 'auto']}
+        width='130'
+        style={{ maxWidth: '130px', border: 'none' }}
+      />
+      <Flex as='span' flexDirection='column' justifyContent='space-between'>
+        <Box as='span' p='10px'>
+          <Heading as='span' fontSize='14px' mb='5px' display='block'>Free DevOps eBook</Heading>
+          <Box display='block' as='span' fontSize='13px' lineHeight={1.5} fontWeight={500} color='gray.500'>
+            Learn all about doing DevOps the Cloud Native way with this free ebook from our partner, The New Stack
+          </Box>
+        </Box>
+        <Box as='span'
+             textAlign='center'
+             fontWeight={600}
+             fontSize='9px'
+             letterSpacing='0.5px'
+             textTransform='uppercase'
+             padding='5px 10px'
+             display={'block'}
+             background='repeating-linear-gradient(-45deg, transparent, transparent 5px, hsla(0, 0%, 0%, .025) 5px, hsla(0, 0%, 0%, .025) 10px) hsla(203, 11%, 95%, .4)'
         >
-          Sponsored by
-        </a>
-      </span>
-    </div>
+          Partner Content
+        </Box>
+      </Flex>
+    </Link>
   );
 };

components/footer.tsx

@@ -1,6 +1,7 @@
 import { Box, Container, Flex, Image, Link, Stack, Text } from '@chakra-ui/react';
 import siteConfig from '../content/site.json';
 import { CustomAd } from './custom-ad';
+import React from 'react';
 
 function NavigationLinks() {
   return (
@@ -62,6 +63,8 @@ export function Footer() {
           </Text>
         </Box>
       </Container>
+
+      <CustomAd />
     </Box>
   );
 }

components/guide/guide-grid-item.tsx

@@ -1,4 +1,5 @@
 import { Badge, Box, Heading, Link, Text } from '@chakra-ui/react';
+import { GuideType } from '../../lib/guide';
 
 type GuideGridItemProps = {
   title: string;
@@ -7,6 +8,7 @@ type GuideGridItemProps = {
   date: string;
   isNew?: boolean;
   colorIndex?: number;
+  type?: GuideType['type'];
 };
 
 const bgColorList = [
@@ -15,14 +17,14 @@ const bgColorList = [
 ];
 
 export function GuideGridItem(props: GuideGridItemProps) {
-  const { title, subtitle, date, isNew = false, colorIndex = 0, href } = props;
+  const { title, subtitle, date, isNew = false, colorIndex = 0, href, type } = props;
 
   return (
     <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>}
-        {date}
+      <Text mb='10px' fontSize='13px' color='gray.400' textTransform='capitalize'>
+        {isNew && <Badge colorScheme={'green'} mr='10px'>New</Badge>}
+        {type} Guide
       </Text>
       <Heading color='white' mb={'6px'} fontSize='20px'>{title}</Heading>
       <Text color='gray.300' fontSize='14px'>{subtitle}</Text>

components/helmet.tsx

@@ -1,13 +1,13 @@
 import NextHead from 'next/head';
 import siteConfig from '../content/site.json';
 import { RoadmapType } from '../lib/roadmap';
-import { roadmapTheme } from '../styles/theme';
 
 type HelmetProps = {
   title?: string;
   keywords?: string[];
   canonical?: string;
   description?: string;
+  noIndex?: boolean;
   roadmap?: RoadmapType;
 };
 
@@ -41,7 +41,7 @@ function getRichSnippetJson(roadmap: RoadmapType) {
 }
 
 const Helmet = (props: HelmetProps) => {
-  const { roadmap, title, canonical, description, keywords } = props;
+  const { roadmap, title, canonical, description, keywords, noIndex = false } = props;
 
   return (
     <NextHead>
@@ -59,6 +59,8 @@ const Helmet = (props: HelmetProps) => {
         content={keywords ? keywords.join(',') : siteConfig.keywords.join(',')}
       />
 
+      {noIndex && <meta name="robots" content="noindex" /> }
+
       <meta
         name="viewport"
         content="width=device-width, user-scalable=yes, initial-scale=1.0, maximum-scale=3.0, minimum-scale=1.0"

components/home/featured-roadmaps-list.tsx

@@ -0,0 +1,67 @@
+import { RoadmapType } from '../../lib/roadmap';
+import { SimpleGrid, Tag } from '@chakra-ui/react';
+import { HomeRoadmapItem } from '../roadmap/home-roadmap-item';
+
+type FeaturedRoadmapsListProps = {
+  roadmaps: RoadmapType[];
+  title: string;
+};
+
+export const upcomingRoadmaps = [
+  {
+    type: 'Role Based',
+    title: 'React Native',
+    description: 'Step by step guide to become a React Native Developer',
+    id: 'react-native'
+  },
+  {
+    type: 'Skill Based',
+    title: 'TypeScript',
+    description: 'Step by step guide to learn TypeScript in 2022',
+    id: 'typescript'
+  },
+  {
+    type: 'Skill Based',
+    title: 'Rust',
+    description: 'Step by step guide to learn Rust in 2022',
+    id: 'rust'
+  },
+];
+
+export function FeaturedRoadmapsList(props: FeaturedRoadmapsListProps) {
+  const { roadmaps, title } = props;
+
+  return (
+    <>
+      <Tag bg='gray.400' mb={4}>{title}</Tag>
+      <SimpleGrid columns={[1, 2, 3]} spacing={['10px', '10px', '15px']} mb='40px'>
+        <>
+          {roadmaps.map((roadmap: RoadmapType, counter: number) => (
+            <HomeRoadmapItem
+              isUpcoming={roadmap.isUpcoming}
+              url={`/${roadmap.id}`}
+              key={roadmap.id}
+              colorIndex={counter}
+              title={roadmap.featuredTitle === 'Software Design and Architecture' ? 'Software Design' : roadmap.featuredTitle}
+              isCommunity={roadmap.isCommunity}
+              isNew={roadmap.isNew}
+              subtitle={roadmap.featuredDescription}
+            />
+          ))}
+          {upcomingRoadmaps
+            .filter(roadmap => roadmap.type === title)
+            .map((roadmap, counter) => (
+              <HomeRoadmapItem
+                isUpcoming={true}
+                url={`/upcoming?id=${roadmap.id}`}
+                key={`upcoming-${roadmap.id}`}
+                colorIndex={9}
+                title={roadmap.title}
+                subtitle={roadmap.description}
+              />
+            ))}
+        </>
+      </SimpleGrid>
+    </>
+  );
+}

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/opensource-banner.tsx

@@ -2,8 +2,8 @@ import { Box, Container, Heading, Link, Text } from '@chakra-ui/react';
 
 export function OpensourceBanner() {
   return (
-    <Box bg='white' borderTopWidth={1} pt={['45px', '45px', '70px']} pb={['60px', '60px', '90px']} textAlign='center'>
-      <Container maxW='container.md'>
+    <Box bg='white' borderTopWidth={1} py={['45px', '45px', '70px']} textAlign='center'>
+      <Container maxW='container.sm'>
         <Heading fontSize={['25px', '25px', '35px']} mb={['10px', '10px', '20px']}>Open Source</Heading>
         <Text lineHeight='26px' fontSize={['15px', '15px', '16px']} mb='20px'>The project is OpenSource,&nbsp;
           <Link
@@ -20,26 +20,9 @@ export function OpensourceBanner() {
           scrolling='0'
           width='170'
           height='30'
-          style={{ margin: 'auto', marginBottom: '30px' }}
+          style={{ margin: 'auto' }}
           title='GitHub'
         />
-
-        <Text lineHeight={['25px', '25px', '26px']} fontSize={['15px', '15px', '16px']} mb='15px'>A considerable amount of my time is spent doing unpaid
-          community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to
-          produce more open-source and free educational material consumed by hundreds of thousands of developers every
-          month.</Text>
-
-        <Box>
-          <iframe
-            src='https://ghbtns.com/github-btn.html?user=kamranahmedse&type=sponsor&size=large'
-            frameBorder='0'
-            scrolling='0'
-            width='260'
-            height='30'
-            title='GitHub'
-            style={{ margin: 'auto' }}
-          />
-        </Box>
       </Container>
     </Box>
   );

components/page-header.tsx

@@ -1,6 +1,5 @@
-import { Badge, Box, Container, Heading, Link, Text } from '@chakra-ui/react';
+import { Box, Container, Heading, Text } from '@chakra-ui/react';
 import React from 'react';
-import siteConfig from '../content/site.json';
 
 type PageHeaderProps = {
   title: string;

components/related-roadmaps.tsx

@@ -0,0 +1,80 @@
+import { Badge, Box, Button, Container, Link, Stack, Text } from '@chakra-ui/react';
+import { RoadmapType } from '../lib/roadmap';
+
+type RelatedRoadmapsProps = {
+  roadmaps: RoadmapType[];
+};
+
+const colorsList = [
+  'gray.700',
+  'purple.700',
+  'blue.700',
+  'red.700',
+  'green.700',
+  'teal.700',
+  'yellow.700',
+  'cyan.700',
+  'pink.700'
+];
+
+const roadmapTitleMapping: Record<string, string> = {
+  "Software Design and Architecture": "Software Design",
+}
+
+export function RelatedRoadmaps(props: RelatedRoadmapsProps) {
+  const { roadmaps } = props;
+  if (!roadmaps.length) {
+    return null;
+  }
+
+  return (
+    <Box borderTopWidth={1} bgColor='gray.50' pb='35px' pt='5px'>
+      <Container maxW='container.md'>
+        <Box display='flex' position='relative' top='-23px' alignItems='center' justifyContent='space-between'>
+          <Text textAlign='center' borderWidth={1} bg='white' p='4px' fontWeight='bold' rounded='md' px={'15px'}>
+            Related Roadmaps
+          </Text>
+
+          <Button as={Link} variant='outline' bg='white' size='sm' _hover={{ textDecoration: 'none', bg: 'gray.100' }}
+                  href='/'>
+            <Text as='span' display={['inline', 'none', 'none']}>More &rarr;</Text>
+            <Text as='span' display={['none', 'inline', 'inline']}>All Roadmaps &rarr;</Text>
+          </Button>
+        </Box>
+
+        <Stack spacing='5px'>
+          {roadmaps.map((roadmap, counter) => (
+            <Link
+              href={`/${roadmap.id}`}
+              key={roadmap.id}
+              borderWidth={1}
+              borderColor='blue.100'
+              py='7px'
+              px='14px'
+              rounded='md'
+              bg='white'
+              textDecoration={'none'}
+              _hover={{ bg: 'gray.100', borderColor: 'blue.200' }}
+              bgGradient='linear(to-r, white, gray.50)'
+              display='flex'
+              alignItems='center'
+              flexDir={['column', 'row', 'row']}
+            >
+              <Text
+                color={colorsList[counter]}
+                as='span'
+                fontWeight='bold'
+                display={['inline-block']}
+                minWidth='150px'
+                mr='10px'
+              >
+                {roadmapTitleMapping[roadmap.featuredTitle] || roadmap.featuredTitle}
+              </Text>
+              <Text as='span' display={['block', 'inline']} isTruncated maxWidth='100%' fontSize={['sm', 'sm', 'md']} color='gray.700'>{roadmap.featuredDescription}</Text>
+            </Link>
+          ))}
+        </Stack>
+      </Container>
+    </Box>
+  );
+}

components/roadmap/content-drawer.tsx

@@ -3,7 +3,7 @@ import { RemoveScroll } from 'react-remove-scroll';
 import { RoadmapType } from '../../lib/roadmap';
 import RoadmapGroup from '../../pages/[roadmap]/[group]';
 import { CheckIcon, CloseIcon, RepeatIcon } from '@chakra-ui/icons';
-import { queryGroupElementsById } from '../../lib/renderer/utils';
+import { queryGroupElementsById } from '../../lib/renderer';
 
 type ContentDrawerProps = {
   roadmap: RoadmapType;
@@ -108,6 +108,7 @@ export function ContentDrawer(props: ContentDrawerProps) {
               </Text>
             </Button>
           </Flex>
+
           <RoadmapGroup isOutlet roadmap={roadmap} group={groupId} />
         </Box>
       </RemoveScroll>

components/roadmap/home-roadmap-item.tsx

@@ -1,4 +1,4 @@
-import { Box, Flex, Heading, Link, Text, Tooltip } from '@chakra-ui/react';
+import { Badge, Box, Flex, Heading, Link, Text, Tooltip } from '@chakra-ui/react';
 import { InfoIcon } from '@chakra-ui/icons';
 
 type RoadmapGridItemProps = {
@@ -7,6 +7,7 @@ type RoadmapGridItemProps = {
   isCommunity?: boolean;
   isUpcoming?: boolean;
   colorIndex?: number;
+  isNew?: boolean;
   url: string;
 };
 
@@ -21,7 +22,7 @@ const bgColorList = [
   'teal.200',
   'yellow.100',
   'green.200',
-  'red.200',
+  'red.200'
 ];
 
 export function HomeRoadmapItem(props: RoadmapGridItemProps) {
@@ -29,77 +30,83 @@ export function HomeRoadmapItem(props: RoadmapGridItemProps) {
     title,
     subtitle,
     isCommunity,
+    isNew,
     colorIndex = 0,
     url,
-    isUpcoming,
+    isUpcoming
   } = props;
 
   return (
     <Box
+      position='relative'
       as={Link}
       href={url}
       _hover={{
         textDecoration: 'none',
-        bg: 'rgba(255,255,255,.10)',
+        bg: 'rgba(255,255,255,.10)'
       }}
       sx={{
         // On mobile devices, don't change the scale
         '@media (hover: none)': {
           '&:hover': {
-            bg: 'rgba(255,255,255,.05)',
-          },
-        },
+            bg: 'rgba(255,255,255,.05)'
+          }
+        }
       }}
       flex={1}
-      shadow="2xl"
+      shadow='2xl'
       className={'home-roadmap-item'}
       bg={'rgba(255,255,255,.05)'}
-      color="white"
-      p="15px"
-      rounded="10px"
-      pos="relative"
+      color='white'
+      p='15px'
+      rounded='10px'
+      pos='relative'
     >
       {isCommunity && (
-        <Tooltip label={'Community contribution'} hasArrow placement="top">
-          <InfoIcon opacity={0.5} position="absolute" top="10px" right="10px" />
+        <Tooltip label={'Community contribution'} hasArrow placement='top'>
+          <InfoIcon opacity={0.5} position='absolute' top='10px' right='10px' />
         </Tooltip>
       )}
 
       <Heading
         fontSize={['17px', '17px', '22px']}
         color={bgColorList[colorIndex]}
-        mb="5px"
+        mb='5px'
+        d='flex'
+        alignItems='center'
       >
         {title}
+
+        { isNew && <Badge position='absolute' bottom={0} right={0} colorScheme='yellow' ml='10px'>New</Badge> }
       </Heading>
-      <Text color="gray.200" fontSize={['13px']}>
+      <Text color='gray.200' fontSize={['13px']}>
         {subtitle}
       </Text>
 
       {isUpcoming && (
         <Flex
-          alignItems="center"
-          justifyContent="center"
-          pos="absolute"
+          alignItems='center'
+          justifyContent='center'
+          pos='absolute'
           left={0}
           right={0}
           top={0}
           bottom={0}
-          rounded="10px"
+          rounded='10px'
         >
           <Text
-            color="white"
-            bg="gray.600"
+            color='white'
+            bg='gray.600'
             zIndex={1}
             fontWeight={600}
             p={'5px 10px'}
-            rounded="10px"
+            rounded='10px'
           >
             Upcoming
           </Text>
           <Box
             bg={'black'}
-            pos="absolute"
+            pos='absolute'
             top={0}
             left={0}
             right={0}

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 {
@@ -7,17 +8,134 @@ import {
   Container,
   Flex,
   Heading,
+  Input,
   Link,
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalOverlay,
   Stack,
   Text,
+  useDisclosure
 } from '@chakra-ui/react';
-import { AtSignIcon, DownloadIcon } from '@chakra-ui/icons';
+import { AtSignIcon, ChatIcon, DownloadIcon } from '@chakra-ui/icons';
 import React from 'react';
+import { SIGNUP_EMAIL_INPUT_NAME, SIGNUP_FORM_ACTION } from '../../pages/signup';
+import { event } from '../../lib/gtag';
 
 type RoadmapPageHeaderType = {
   roadmap: RoadmapType;
 };
 
+function RoadmapDownloader({ roadmapTitle }: { roadmapTitle: string }) {
+  const { isOpen, onOpen, onClose } = useDisclosure();
+  const initialRef = React.useRef(null);
+
+  return (
+    <>
+      <Button
+        onClick={(e) => {
+          event({
+            category: 'Subscription',
+            action: `Clicked Download ${roadmapTitle} Roadmap`,
+            label: `Download ${roadmapTitle} Roadmap Button`
+          });
+          onOpen();
+        }}
+        size='xs'
+        py='14px'
+        px='10px'
+        leftIcon={<DownloadIcon />}
+        display={['none', 'flex']}
+        colorScheme='yellow'
+        variant='solid'
+        _hover={{ textDecoration: 'none' }}
+        _focus={{ boxShadow: 'none' }}
+      >
+        Download
+      </Button>
+
+      <Modal initialFocusRef={initialRef} closeOnOverlayClick={true} isOpen={isOpen} onClose={onClose} isCentered motionPreset='none'>
+        <ModalOverlay />
+        <ModalContent>
+          <ModalCloseButton />
+          <ModalBody p={6}>
+            <Heading mb='5px' fontSize='2xl'>Download Roadmap</Heading>
+            <Text fontSize={'md'} color='gray.700'>Enter your email below to receive the download link.</Text>
+            <form action={SIGNUP_FORM_ACTION} method='post' target='_blank' onSubmit={() => {
+              event({
+                category: 'Subscription',
+                action: `Submitted Download ${roadmapTitle} Roadmap Email`,
+                label: `PDF / Subscribe ${roadmapTitle} Roadmap`
+              });
+
+              onClose();
+            }}>
+              <Input required ref={initialRef} size='md' my='10px' type='email' placeholder='Email address' name={SIGNUP_EMAIL_INPUT_NAME}  />
+              <Button type='submit' colorScheme='green' size='md' width={'full'}>Send Link</Button>
+            </form>
+          </ModalBody>
+        </ModalContent>
+      </Modal>
+    </>
+  );
+}
+
+function RoadmapSubscriber({ roadmapTitle }: { roadmapTitle: string }) {
+  const { isOpen, onOpen, onClose } = useDisclosure();
+  const initialRef = React.useRef(null);
+
+  return (
+    <>
+      <Button
+        onClick={(e) => {
+          event({
+            category: 'Subscription',
+            action: `Clicked Subscribe ${roadmapTitle} Roadmap`,
+            label: `Subscribe ${roadmapTitle} Roadmap Button`
+          });
+          onOpen();
+        }}
+        size='xs'
+        py='14px'
+        px='10px'
+        leftIcon={<AtSignIcon />}
+        display={'flex'}
+        colorScheme='yellow'
+        variant='solid'
+        _hover={{ textDecoration: 'none' }}
+        _focus={{ boxShadow: 'none' }}
+      >
+        Subscribe
+      </Button>
+
+      <Modal initialFocusRef={initialRef} closeOnOverlayClick={true} isOpen={isOpen} onClose={onClose} isCentered motionPreset='none'>
+        <ModalOverlay />
+        <ModalContent>
+          <ModalCloseButton />
+          <ModalBody p={6}>
+            <Heading mb='5px' fontSize='2xl'>Subscribe</Heading>
+            <Text fontSize={'md'} color='gray.700'>Enter your below to receive updates to this roadmap.</Text>
+            <form action={SIGNUP_FORM_ACTION} method='post' target='_blank' onSubmit={() => {
+              event({
+                category: 'Subscription',
+                action: `Submitted Subscribe ${roadmapTitle} Roadmap Email`,
+                label: `Email / Subscribe ${roadmapTitle} Roadmap`
+              });
+
+              onClose();
+            }}>
+              <Input required ref={initialRef} size='md' my='10px' type='email' placeholder='Email address' name={SIGNUP_EMAIL_INPUT_NAME}  />
+              <Button type='submit' colorScheme='green' size='md' width={'full'}>Subscribe</Button>
+            </form>
+          </ModalBody>
+        </ModalContent>
+      </Modal>
+    </>
+  );
+}
+
 export function RoadmapPageHeader(props: RoadmapPageHeaderType) {
   const { roadmap } = props;
 
@@ -26,13 +144,13 @@ export function RoadmapPageHeader(props: RoadmapPageHeaderType) {
       pt={['25px', '20px', '45px']}
       pb={['20px', '15px', '30px']}
       borderBottomWidth={1}
-      mb="30px"
+      mb='30px'
     >
-      <Container maxW="container.md" position="relative">
+      <Container maxW='container.md' position='relative'>
         <NewAlertBanner />
         <Heading
-          as="h1"
-          color="black"
+          as='h1'
+          color='black'
           fontSize={['28px', '33px', '40px']}
           fontWeight={700}
           mb={['2px', '2px', '5px']}
@@ -40,68 +158,57 @@ export function RoadmapPageHeader(props: RoadmapPageHeaderType) {
           {roadmap.title}
         </Heading>
         <Text fontSize={['13px', '14px', '15px']}>{roadmap.description}</Text>
-        <Flex justifyContent="space-between" alignItems={'center'} mt="20px">
-          <Stack isInline>
+        <Flex justifyContent='space-between' alignItems={'center'} mt='20px'>
+          <Stack isInline flex={1}>
             <Button
               d={['flex', 'flex']}
               as={Link}
               href={'/roadmaps'}
-              size="xs"
-              py="14px"
-              px="10px"
-              colorScheme="teal"
-              variant="solid"
+              size='xs'
+              py='14px'
+              px='10px'
+              colorScheme='teal'
+              variant='solid'
               _hover={{ textDecoration: 'none' }}
             >
               &larr;
-              <Text as="span" d={['none', 'inline']} ml="5px">
+              <Text as='span' d={['none', 'inline']} ml='5px'>
                 All Roadmaps
               </Text>
             </Button>
 
-            {roadmap.pdfUrl && (
+            <RoadmapDownloader roadmapTitle={roadmap.featuredTitle} />
+            <RoadmapSubscriber roadmapTitle={roadmap.featuredTitle} />
+
+            <Box flex={1} justifyContent='flex-end' d='flex'>
               <Button
                 as={Link}
-                href={roadmap.pdfUrl}
-                target="_blank"
-                size="xs"
-                py="14px"
-                px="10px"
-                leftIcon={<DownloadIcon />}
-                colorScheme="yellow"
-                variant="solid"
+                href={`${siteConfig.url.issue}?title=[Suggestion] ${roadmap.title}`}
+                target='_blank'
+                size='xs'
+                py='14px'
+                px='10px'
+                colorScheme='green'
+                leftIcon={<ChatIcon />}
                 _hover={{ textDecoration: 'none' }}
               >
-                Download
+                Suggest Changes
               </Button>
-            )}
-            <Button
-              as={Link}
-              href={'/signup'}
-              size="xs"
-              py="14px"
-              px="10px"
-              variant="solid"
-              colorScheme="yellow"
-              leftIcon={<AtSignIcon />}
-              _hover={{ textDecoration: 'none' }}
-            >
-              Subscribe
-            </Button>
+            </Box>
           </Stack>
         </Flex>
         {isInteractiveRoadmap(roadmap.id) && (
           <Text
-            mt="30px"
+            mt='30px'
             mb={['-37px', '-32px', '-47px']}
             fontWeight={500}
-            fontSize="14px"
-            bg="white"
+            fontSize='14px'
+            bg='white'
             borderWidth={1}
-            p="5px 7px"
-            rounded="3px"
+            p='5px 7px'
+            rounded='3px'
           >
-            <Badge pos="relative" top={'-1px'} mr="6px" colorScheme="yellow">
+            <Badge pos='relative' top={'-1px'} mr='6px' colorScheme='yellow'>
               New
             </Badge>
             Resources are here, try clicking any nodes.

components/teams-banner.tsx

@@ -0,0 +1,20 @@
+import { Box, Button, Container, Heading, Link, Text } from '@chakra-ui/react';
+import { event } from '../lib/gtag';
+
+export function TeamsBanner() {
+  return (
+    <Box bg='teal.500' borderTopWidth={1} py={['45px', '45px', '70px']} textAlign='center'>
+      <Container maxW='container.sm'>
+        <Heading as='h4' color={'white'} fontSize={['25px', '25px', '35px']} mb={['10px', '10px', '20px']}>Roadmaps for Teams</Heading>
+        <Text lineHeight='26px' color={'white'} fontSize={['15px', '15px', '18px']} mb='20px'>We are working on a solution for teams. Help us shape the platform!</Text>
+        <Button onClick={() => {
+          event({
+            category: 'UpcomingFeatureClick',
+            action: `Teams Form Redirect`,
+            label: `Click Teams Footer Link`
+          });
+        }} target={'_blank'} as={Link} href='https://forms.gle/6X2matbCmjmvYGGt6' _hover={{textDecoration: 'none', bg: 'gray.300'}}>Take a Survey</Button>
+      </Container>
+    </Box>
+  );
+}

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

@@ -1,9 +1,30 @@
 [
+  {
+    "id": "http-basic-authentication",
+    "title": "HTTP Basic Authentication",
+    "description": "Learn what is HTTP Basic Authentication and how to implement it in Node.js",
+    "isNew": true,
+    "type": "textual",
+    "authorUsername": "kamranahmedse",
+    "updatedAt": "2022-10-03T19:59:14.191Z",
+    "createdAt": "2022-10-03T19:59:14.191Z"
+  },
+  {
+    "id": "basics-of-authentication",
+    "title": "Basics of Authentication",
+    "description": "Learn the basics of Authentication and Authorization",
+    "isNew": true,
+    "type": "textual",
+    "authorUsername": "kamranahmedse",
+    "updatedAt": "2022-09-21T19:59:14.191Z",
+    "createdAt": "2022-09-21T19:59:14.191Z"
+  },
   {
     "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,
+    "type": "visual",
     "authorUsername": "kamranahmedse",
     "updatedAt": "2021-09-10T19:59:14.191Z",
     "createdAt": "2021-09-10T19:59:14.191Z"
@@ -12,7 +33,8 @@
     "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,
+    "type":  "visual",
     "authorUsername": "kamranahmedse",
     "updatedAt": "2021-09-05T19:59:14.191Z",
     "createdAt": "2021-09-05T19:59:14.191Z"
@@ -21,7 +43,8 @@
     "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,
+    "type":  "visual",
     "authorUsername": "kamranahmedse",
     "updatedAt": "2021-08-31T19:59:14.191Z",
     "createdAt": "2021-08-31T19:59:14.191Z"
@@ -30,7 +53,8 @@
     "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,
+    "type":  "visual",
     "authorUsername": "kamranahmedse",
     "updatedAt": "2021-07-09T19:59:14.191Z",
     "createdAt": "2021-07-09T19:59:14.191Z"
@@ -39,7 +63,8 @@
     "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,
+    "type":  "visual",
     "authorUsername": "kamranahmedse",
     "updatedAt": "2021-07-01T19:59:14.191Z",
     "createdAt": "2021-07-01T19:59:14.191Z"
@@ -48,7 +73,8 @@
     "id": "oauth",
     "title": "OAuth — Open Authorization",
     "description": "Learn and understand what is OAuth and how it works",
-    "isPro": false,
+    "isNew": false,
+    "type":  "visual",
     "authorUsername": "kamranahmedse",
     "updatedAt": "2021-06-28T19:59:14.191Z",
     "createdAt": "2021-06-28T19:59:14.191Z"
@@ -57,7 +83,8 @@
     "id": "jwt-authentication",
     "title": "JWT Authentication",
     "description": "Understand what is JWT authentication and how is it implemented",
-    "isPro": false,
+    "isNew": false,
+    "type":  "visual",
     "authorUsername": "kamranahmedse",
     "updatedAt": "2021-06-20T19:59:14.191Z",
     "createdAt": "2021-06-20T19:59:14.191Z"
@@ -66,7 +93,8 @@
     "id": "token-authentication",
     "title": "Token Based Authentication",
     "description": "Understand what is token based authentication and how it is implemented",
-    "isPro": false,
+    "isNew": false,
+    "type":  "visual",
     "authorUsername": "kamranahmedse",
     "updatedAt": "2021-06-02T20:59:14.191Z",
     "createdAt": "2021-06-02T20:59:14.191Z"
@@ -75,7 +103,8 @@
     "id": "session-authentication",
     "title": "Session Based Authentication",
     "description": "Understand what is session based authentication and how it is implemented",
-    "isPro": false,
+    "isNew": false,
+    "type":  "visual",
     "authorUsername": "kamranahmedse",
     "updatedAt": "2021-05-26T20:59:14.191Z",
     "createdAt": "2021-05-26T20:59:14.191Z"
@@ -84,7 +113,8 @@
     "id": "basic-authentication",
     "title": "Basic Authentication",
     "description": "Understand what is basic authentication and how it is implemented",
-    "isPro": false,
+    "isNew": false,
+    "type":  "visual",
     "authorUsername": "kamranahmedse",
     "updatedAt": "2021-05-19T20:59:14.191Z",
     "createdAt": "2021-05-19T20:59:14.191Z"
@@ -93,7 +123,8 @@
     "id": "character-encodings",
     "title": "Character Encodings",
     "description": "Covers the basics of character encodings and explains ASCII vs Unicode",
-    "isPro": false,
+    "isNew": false,
+    "type":  "visual",
     "authorUsername": "kamranahmedse",
     "updatedAt": "2021-05-14T20:59:14.191Z",
     "createdAt": "2021-05-14T20:59:14.191Z"
@@ -101,8 +132,9 @@
   {
     "id": "unfamiliar-codebase",
     "title": "Unfamiliar Codebase",
-    "description": "Tips on getting getting familiar with an unfamiliar codebase",
-    "isPro": false,
+    "description": "Tips on getting familiar with an unfamiliar codebase",
+    "isNew": false,
+    "type":  "visual",
     "authorUsername": "kamranahmedse",
     "updatedAt": "2021-05-04T20:59:14.191Z",
     "createdAt": "2021-05-04T20:59:14.191Z"
@@ -111,7 +143,8 @@
     "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,
+    "type":  "textual",
     "authorUsername": "spekulatius",
     "updatedAt": "2021-05-04T12:59:14.191Z",
     "createdAt": "2021-05-04T12:59:14.191Z"
@@ -120,7 +153,8 @@
     "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,
+    "type":  "visual",
     "authorUsername": "kamranahmedse",
     "updatedAt": "2021-04-28T15:48:21.191Z",
     "createdAt": "2021-04-28T15:48:21.191Z"
@@ -129,7 +163,8 @@
     "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,
+    "type":  "visual",
     "authorUsername": "kamranahmedse",
     "updatedAt": "2021-04-22T15:48:21.191Z",
     "createdAt": "2021-04-22T15:48:21.191Z"
@@ -138,7 +173,8 @@
     "id": "asymptotic-notation",
     "title": "Asymptotic Notation",
     "description": "Learn the basics of measuring the time and space complexity of algorithms",
-    "isPro": false,
+    "isNew": false,
+    "type":  "visual",
     "authorUsername": "kamranahmedse",
     "updatedAt": "2021-04-03T15:48:21.191Z",
     "createdAt": "2021-04-03T15:48:21.191Z"
@@ -147,7 +183,8 @@
     "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,
+    "type":  "visual",
     "authorUsername": "kamranahmedse",
     "updatedAt": "2021-03-15T15:48:21.191Z",
     "createdAt": "2021-03-15T15:48:21.191Z"
@@ -156,7 +193,8 @@
     "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,
+    "type":  "visual",
     "authorUsername": "kamranahmedse",
     "updatedAt": "2021-03-14T15:48:21.191Z",
     "createdAt": "2021-03-14T15:48:21.191Z"
@@ -165,7 +203,8 @@
     "id": "scaling-databases",
     "title": "Scaling Databases",
     "description": "Learn the ups and downs of different database scaling strategies",
-    "isPro": false,
+    "isNew": false,
+    "type":  "visual",
     "authorUsername": "kamranahmedse",
     "updatedAt": "2021-02-18T15:48:21.191Z",
     "createdAt": "2021-02-18T15:48:21.191Z"
@@ -174,8 +213,9 @@
     "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,
-    "authorUsername": "dmytrobol",
+    "isNew": false,
+    "type":  "textual",
+    "authorUsername": "kamranahmedse",
     "updatedAt": "2021-02-29T15:48:21.191Z",
     "createdAt": "2021-02-29T15:48:21.191Z"
   },
@@ -183,7 +223,8 @@
     "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,
+    "type":  "textual",
     "authorUsername": "jesse",
     "updatedAt": "2021-01-17T15:48:21.191Z",
     "createdAt": "2021-01-17T15:48:21.191Z",
@@ -193,7 +234,8 @@
     "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,
+    "type":  "textual",
     "authorUsername": "kamranahmedse",
     "updatedAt": "2020-12-03T12:13:00.860Z",
     "createdAt": "2020-12-03T12:13:00.860Z"
@@ -202,7 +244,8 @@
     "id": "design-patterns-for-humans",
     "title": "Design Patterns for Humans",
     "description": "A language agnostic, ultra-simplified explanation to design patterns",
-    "isPro": false,
+    "isNew": false,
+    "type":  "textual",
     "authorUsername": "kamranahmedse",
     "updatedAt": "2019-10-09T12:00:00.860Z",
     "createdAt": "2019-01-23T17:00:00.860Z"
@@ -211,7 +254,8 @@
     "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,
+    "type":  "textual",
     "authorUsername": "kamranahmedse",
     "createdAt": "2018-12-04T12:00:00.860Z",
     "updatedAt": "2018-12-04T12:00:00.860Z",
@@ -221,7 +265,8 @@
     "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,
+    "type":  "visual",
     "authorUsername": "kamranahmedse",
     "updatedAt": "2018-12-04T12:00:00.860Z",
     "createdAt": "2018-12-04T17:00:00.860Z"
@@ -230,7 +275,8 @@
     "id": "http-caching",
     "title": "HTTP Caching",
     "description": "Everything you need to know about web caching",
-    "isPro": false,
+    "isNew": false,
+    "type":  "textual",
     "authorUsername": "kamranahmedse",
     "createdAt": "2018-11-29T17:00:00.860Z",
     "updatedAt": "2018-11-29T17:00:00.860Z"
@@ -239,7 +285,8 @@
     "id": "history-of-javascript",
     "title": "Brief History of JavaScript",
     "description": "How JavaScript was introduced and evolved over the years",
-    "isPro": false,
+    "isNew": false,
+    "type":  "textual",
     "authorUsername": "kamranahmedse",
     "createdAt": "2017-10-28T17:00:00.860Z",
     "updatedAt": "2017-10-28T17:00:00.860Z"
@@ -248,7 +295,8 @@
     "id": "proxy-servers",
     "title": "Proxy Servers",
     "description": "How do proxy servers work and what are forward and reverse proxies?",
-    "isPro": false,
+    "isNew": false,
+    "type":  "textual",
     "authorUsername": "ebrahimbharmal007",
     "createdAt": "2017-10-24T17:00:00.860Z",
     "updatedAt": "2017-10-24T17:00:00.860Z"

content/guides/basics-of-authentication.md

@@ -0,0 +1,83 @@
+Our last video series was about data structures. We looked at the most common data structures, their use cases, pros and cons, and the different operations you could perform on each data structure.
+
+Today, we are kicking off a similar series for Authentication strategies where we will discuss everything you need to know about authentication and authentication strategies.
+
+In this guide today will be talking about what authentication is, and we will cover some terminology that will help us later in the series. You can watch the video below or continue reading this guide.
+
+<iframe src="https://www.youtube.com/embed/Mcyt9SrZT6g" title="Basics of Authentication" />
+
+## What is Authentication?
+
+Authentication is the process of verifying someone's identity. A real-world example of that would be when you board a plane, the airline worker checks your passport to verify your identity, so the airport worker authenticates you.
+
+If we talk about computers, when you log in to any website, you usually authenticate yourself by entering your username and password, which is then checked by the website to ensure that you are who you claim to be. There are two things you should keep in mind:
+
+- Authentication is not only for the persons
+- And username and password are not the only way to authenticate.
+
+Some other examples are:
+
+- When you open a website in the browser. If the website uses HTTP, TLS is used to authenticate the server and avoid the fake loading of websites.
+
+- There might be server-to-server communication on the website. The server may need to authenticate the incoming request to avoid malicious usage.
+
+## How does Authentication Work?
+
+On a high level, we have the following factors used for authentication.
+
+- **Username and Password**
+- **Security Codes, Pin Codes, or Security Questions** — An example would be the pin code you enter at an ATM to withdraw cash.
+- **Hard Tokens and Soft Tokens** — Hard tokens are the special hardware devices that you attach to your device to authenticate yourself. Soft tokens, unlike hard tokens, don't have any authentication-specific device; we must verify the possession of a device that was used to set up the identity. For example, you may receive an OTP to log in to your account on a website.
+- **Biometric Authentication** — In biometric authentication, we authenticate using biometrics such as iris, facial, or voice recognition.
+
+We can categorize the factors above into three different types.
+
+- Username / Password and Security codes rely on the person's knowledge: we can group them under the **Knowledge Factor**.
+
+- In hard and soft tokens, we authenticate by checking the possession of hardware, so this would be a **Possession Factor**.
+
+- And in biometrics, we test the person's inherent qualities, i.e., iris, face, or voice, so this would be a **Qualities** factor.
+
+This brings us to our next topic: Multi-factor Authentication and Two-Factor Authentication.
+
+## Multifactor Authentication
+
+Multifactor authentication is the type of authentication in which we rely on more than one factor to authenticate a user.
+
+For example, if we pick up username/password from the **knowledge factor**. And we pick soft tokens from the **possession factor**, and we say that for a user to authenticate, they must enter their credentials and an OTP, which will be sent to their mobile phone, so this would be an example of multifactor authentication.
+
+In multifactor authentication, since we rely on more than one factor, this way of authentication is much more secure than single-factor authentication.
+
+One important thing to note here is that the factors you pick for authentication, they must differ. So, for example, if we pick up a username/password and security question or security codes, it is still not true multifactor authentication because we still rely on the knowledge factor. The factors have to be different from each other.
+
+### Two-Factor Authentication
+
+Two-factor authentication is similar to multifactor authentication. The only difference is that there are precisely two factors in 2FA. In MFA, we can have 2, 3, 4, or any authentication factors; 2FA has exactly two factors. We can say that 2FA is always MFA, because there are more than one factors. MFA is not always 2FA because there may be more than two factors involved.
+
+Next we have the difference between authentication and authorization. This comes up a lot in the interviews, and beginners often confuse them.
+
+### What is Authentication
+Authentication is the process of verifying the identity. For example, when you enter your credentials at a login screen, the application here identifies you through your credentials. So this is what the authentication is, the process of verifying the identity.
+
+In case of an authentication failure, for example, if you enter an invalid username and password, the HTTP response code is "Unauthorized" 401.
+
+### What is Authorization
+
+Authorization is the process of checking permission. Once the user has logged in, i.e., the user has been authenticated, the process of reviewing the permission to see if the user can perform the relevant operation or not is called authorization.
+
+And in case of authorization failure, i.e., if the user tries to perform an operation they are not allowed to perform, the HTTP response code is forbidden 403.
+
+## Authentication Strategies
+
+Given below is the list of common authentication strategies:
+
+- Basics of Authentication
+- Session Based Authentication
+- Token-Based Authentication
+- JWT Authentication
+- OAuth - Open Authorization
+- Single Sign On (SSO)
+
+In this series of illustrated videos and textual guides, we will be going through each of the strategies discussing what they are, how they are implemented, the pros and cons and so on.
+
+So stay tuned, and I will see you in the next one.

content/guides/history-of-javascript.md

@@ -1,7 +1,7 @@
 Around 10 years ago, Jeff Atwood (the founder of stackoverflow) made a case that JavaScript is going to be the future and he coined the “Atwood Law” which states that *Any application that can be written in JavaScript will eventually be written in JavaScript*. Fast-forward to today, 10 years later, if you look at it it rings truer than ever. JavaScript is continuing to gain more and more adoption.
 
 ### JavaScript is announced
-JavaScript was initially created by [Brendan Eich](https://twitter.com/BrendanEich) of NetScape and was first announced in a press release by Netscape in 1995. It has a bizarre history of naming; initally it was named `Mocha` by the creator, which was later renamed to `LiveScript`.  In 1996, about a year later after the release, NetScape decided to rename it to be `JavaScript` with hopes of capitalizing on the Java community (although JavaScript did not have any relationship with Java) and released Netscape 2.0 with the official support of JavaScript.
+JavaScript was initially created by [Brendan Eich](https://twitter.com/BrendanEich) of NetScape and was first announced in a press release by Netscape in 1995. It has a bizarre history of naming; initially it was named `Mocha` by the creator, which was later renamed to `LiveScript`.  In 1996, about a year later after the release, NetScape decided to rename it to be `JavaScript` with hopes of capitalizing on the Java community (although JavaScript did not have any relationship with Java) and released Netscape 2.0 with the official support of JavaScript.
 
 ### ES1, ES2 and ES3
 In 1996, Netscape decided to submit it to [ECMA International](https://en.wikipedia.org/wiki/Ecma_International) with the hopes of getting it standardized. First edition of the standard specification was released in 1997 and the language was standardized. After the initial release, `ECMAScript` was continued to be worked upon and in no-time two more versions were released ECMAScript 2 in 1998 and ECMAScript 3 in 1999.

content/guides/http-basic-authentication.md

@@ -0,0 +1,93 @@
+Our last guide was about the [basics of authentication](/guides/basics-of-authentication), where we discussed authentication, authorization, types of authentication, authentication factors, authentication strategies, and so on.
+
+In this guide today, we will be learning about basic authentication, and we will see how we can implement Basic Authentication in Node.js. We have a [visual guide on the basic authentication](/guides/basic-authentication) and an illustrative video, watch the video below or continue reading:
+
+<iframe src="https://www.youtube.com/embed/mwccHwUn7Gc" title="HTTP Basic Authentication" />
+
+## What is Basic Authentication?
+Given the name "Basic Authentication", you should not confuse Basic Authentication with the standard username and password authentication. Basic authentication is a part of the HTTP specification, and the details can be [found in the RFC7617](https://www.rfc-editor.org/rfc/rfc7617.html).
+
+Because it is a part of the HTTP specifications, all the browsers have native support for "HTTP Basic Authentication". Given below is the screenshot from the implementation in Google Chrome.
+
+![](/guides/basic-authentication/chrome-basic-auth.png)
+
+
+## How does it Work?
+Now that we know what basic authentication is, the question is, how does it work? The answer is: it is controlled by the response of the server.
+
+### Step 1
+When the browser first requests the server, the server tries to check the availability of the `Authorization` header in the request. Because it is the first request, no `Authorization` header is found in the request. So the server responds with the `401 Unauthorized` response code and also sends the `WWW-Authenticate` header with the value set to `Basic`, which tells the browser that it needs to trigger the basic authentication flow.
+
+```text
+401 Unauthorized
+WWW-Authenticate: Basic realm='user_pages'
+```
+
+If you notice the response, we have an additional parameter called `realm`, which is just a value assigned to a group of pages that share the same credentials.
+
+The browser might use Realm to cache the credential. In the future, when there is an authentication failure browser will check if it has the credentials in the cache for the given realm of the domain, and it may use the same credentials.
+
+## Step 2
+Upon receiving the response from the server, the browser will notice the `WWW-Authenticate` header and will show the authentication popup.
+
+![](/guides/basic-authentication/chrome-basic-auth.png)
+
+## Step 3
+After the user submits the credentials through this authentication popup, the browser will automatically encode the credentials using the `base64` encoding and send them in the `Authorization` header of the same request.
+
+### Step 4
+Upon receiving the request, the server will decode and verify the credentials. If the credentials are valid, the server will send the response to the client.
+
+So that is how Basic Authentication works.
+
+## Basic Authentication in Node.js
+I have prepared the sample project in Node.js, which can be found on GitHub [kamranahmedse/node-basic-auth-example](https://github.com/kamranahmedse/node-basic-auth-example). If you look at the codebase of the project, we have two files `index.js` with the following content:
+
+```javascript
+// src/index.js
+
+const express = require('express');
+const authMiddleware = require('./auth');
+
+const app = express();
+const port = 3000;
+
+// This middleware is where we have the 
+// basic authentication implementation
+app.use(authMiddleware);
+
+app.get('/', (req, res) => {
+  res.send('Hello World!');
+});
+
+app.listen(port, () => {
+  console.log(`App running @ http://localhost:${port}`);
+})
+```
+
+As you can see, it's just a regular express server. `authMiddleware` registration is where we have all the code for "Basic Authentication". Here is the content of the middleware:
+
+```javascript
+// src/auth.js
+const base64 = require("base-64");
+
+function decodeCredentials(authHeader) {
+  // ...
+}
+
+module.exports = function(req, res, next) {
+  // Take the header and decode credentials 
+  const [username, password] = decodeCredentials(req.headers.authorization || '');
+
+  // Verify the credentials
+  if (username === 'admin' && password === 'admin') {
+    return next();
+  }
+
+  // Respond with authenticate header on auth failure.
+  res.set('WWW-Authenticate', 'Basic realm="user_pages"');
+  res.status(401).send('Authentication required.');
+}
+```
+
+And that is how the basic authentication is implemented in Node.js.

content/guides/http-caching.md

@@ -1,8 +1,8 @@
-As users, we easily get frustrated by the buffering videos, the images that take seconds to load, pages that got stuck because the content is being loaded. Loading the resources from some cache is much faster than fetching the same from the originating server. It reduces latency, speeds up the loading of resources, decreases the load on server, cuts down the bandwidth costs etc. 
+As users, we easily get frustrated by the buffering of videos, the images that take seconds to load, and pages that got stuck because the content is being loaded. Loading the resources from some cache is much faster than fetching the same from the originating server. It reduces latency, speeds up the loading of resources, decreases the load on the server, cuts down the bandwidth costs etc. 
 
 ### Introduction
 
-What is web cache? It is something that sits somewhere between the client and the server, continuously looking at the requests and their responses, looking for any responses that can be cached. So that there is less time consumed when the same request is made again. 
+What is a web cache? It is something that sits somewhere between the client and the server, continuously looking at the requests and their responses, looking for any responses that can be cached. So that there is less time consumed when the same request is made again. 
 
 ![Web Cache](https://i.imgur.com/mJYVvTh.png)
 
@@ -11,9 +11,9 @@ What is web cache? It is something that sits somewhere between the client and th
 Before we get into further details, let me give you an overview of the terms that will be used, further in the article
 
 - **Client** could be your browser or any application requesting the server for some resource
-- **Origin Server**, the source of truth, houses all the content required by the client and is responsible for fulfilling the client requests.
-- **Stale Content** is the cached but expired content
-- **Fresh Content** is the content available in cache that hasn't expired yet
+- **Origin Server**, the source of truth, houses all the content required by the client and is responsible for fulfilling the client's requests.
+- **Stale Content** is cached but expired content
+- **Fresh Content** is the content available in the cache that hasn't expired yet
 - **Cache Validation** is the process of contacting the server to check the validity of the cached content and get it updated for when it is going to expire
 - **Cache Invalidation** is the process of removing any stale content available in the cache
 
@@ -43,15 +43,15 @@ Unlike browser cache which serves a single user, proxy caches may serve hundreds
 
 #### Reverse Proxy Cache
 
-Reverse proxy cache or surrogate cache is implemented close to the origin servers in order to reduce the load on server. Unlike proxy caches which are implemented by ISPs etc to reduce the bandwidth usage in a network, surrogates or reverse proxy caches are implemented near to the origin servers by the server administrators to reduce the load on server.
+A Reverse proxy cache or surrogate cache is implemented close to the origin servers in order to reduce the load on the server. Unlike proxy caches which are implemented by ISPs etc to reduce the bandwidth usage in a network, surrogates or reverse proxy caches are implemented near the origin servers by the server administrators to reduce the load on the server.
 
 ![Reverse Proxy Cache](http://i.imgur.com/Eg4Cru3.png)
  
-Although you can control the reverse proxy caches (since it is implemented by you on your server) you can not avoid or control browser and proxy caches. And if your website is not configured to use these caches properly, it will still be cached using whatever the defaults are set on these caches.
+Although you can control the reverse proxy caches (since it is implemented by you on your server) you can not avoid or control browser and proxy caches. And if your website is not configured to use these caches properly, it will still be cached using whatever defaults are set on these caches.
 
 ### Caching Headers
 
-So, how do we control the web cache? Whenever the server emits some response, it is accompanied with some HTTP headers to guide the caches whether and how to cache this response. Content provider is the one that has to make sure to return proper HTTP headers to force the caches on how to cache the content.
+So, how do we control the web cache? Whenever the server emits some response, it is accompanied by some HTTP headers to guide the caches on whether and how to cache this response. The content provider is the one that has to make sure to return proper HTTP headers to force the caches on how to cache the content.
 
 - [Expires](#expires)
 - [Pragma](#pragma)
@@ -71,19 +71,19 @@ So, how do we control the web cache? Whenever the server emits some response, it
 
 #### Expires
 
-Before HTTP/1.1 and introduction of `Cache-Control`, there was `Expires` header which is simply a timestamp telling the caches how long should some content be considered fresh. Possible value to this header is absolute expiry date; where date has to be in GMT. Below is the sample header
+Before HTTP/1.1 and the introduction of `Cache-Control`, there was an `Expires` header which is simply a timestamp telling the caches how long should some content be considered fresh. A possible value to this header is the absolute expiry date; where a date has to be in GMT. Below is the sample header
 
 ```html
 Expires: Mon, 13 Mar 2017 12:22:00 GMT
 ```
 
-It should be noted that the date cannot be more than a year and if the date format is wrong, content will be considered stale. Also, the clock on cache has to be in sync with the clock on server, otherwise the desired results might not be achieved. 
+It should be noted that the date cannot be more than a year and if the date format is wrong, the content will be considered stale. Also, the clock on the cache has to be in sync with the clock on the server, otherwise, the desired results might not be achieved. 
 
-Although, `Expires` header is still valid and is supported widely by the caches, preference should be given to HTTP/1.1 successor of it i.e. `Cache-Control`.  
+Although the `Expires` header is still valid and is supported widely by the caches, preference should be given to HTTP/1.1 successor of it i.e. `Cache-Control`.  
 
 #### Pragma
 
-Another one from the old, pre HTTP/1.1 days, is `Pragma`. Everything that it could do is now possible using the cache-control header given below. However, one thing I would like to point out about it is, you might see `Pragma: no-cache` being used here and there in hopes of stopping the response from being cached. It might not necessarily work; as HTTP specification discusses it in the request headers and there is no mention of it in the response headers. Rather `Cache-Control` header should be used to control the caching.
+Another one from the old, pre HTTP/1.1 days, is `Pragma`. Everything that it could do is now possible using the cache-control header given below. However, one thing I would like to point out about it is, that you might see `Pragma: no-cache` being used here and there in hopes of stopping the response from being cached. It might not necessarily work; as HTTP specification discusses it in the request headers and there is no mention of it in the response headers. Rather `Cache-Control` header should be used to control the caching.
 
 #### Cache-Control
 
@@ -98,7 +98,7 @@ Setting the cache to `private` means that the content will not be cached in any
 Cache-Control: private
 ```
 
-Having said that, don't let it fool you in to thinking that setting this header will make your data any secure; you still have to use SSL for that purpose. 
+Having said that, don't let it fool you into thinking that setting this header will make your data any secure; you still have to use SSL for that purpose. 
 
 ##### public
 
@@ -138,7 +138,7 @@ Cache-Control: s-maxage=3600, public
 ```
 
 ##### must-revalidate
-**`must-revalidate`** it might happen sometimes that if you have network problems and the content cannot be retrieved from the server, browser may serve stale content without validation. `must-revalidate` avoids that. If this directive is present, it means that stale content cannot be served in any case and the data must be re-validated from the server before serving. 
+**`must-revalidate`** it might happen sometimes that if you have network problems and the content cannot be retrieved from the server, the browser may serve stale content without validation. `must-revalidate` avoids that. If this directive is present, it means that stale content cannot be served in any case and the data must be re-validated from the server before serving. 
 
 ```html
 Cache-Control: max-age=3600, public, must-revalidate
@@ -177,7 +177,7 @@ ETag: "j82j8232ha7sdh0q2882" - Strong Etag
 ETag: W/"j82j8232ha7sdh0q2882" - Weak Etag (prefixed with `W/`)
 ```
 
-A strong validating ETag means that two resources are **exactly** same and there is no difference between them at all. While a weak ETag means that two resources are although not strictly same but could be considered same. Weak etags might be useful for dynamic content, for example.
+A strong validating ETag means that two resources are **exactly** same and there is no difference between them at all. While a weak ETag means that two resources although not strictly the same but could be considered the same. Weak etags might be useful for dynamic content, for example.
 
 Now you know what etags are but how does the browser make this request? by making a request to server while sending the available Etag in `If-None-Match` header.
 

content/guides/journey-to-http2.md

@@ -71,7 +71,7 @@ Three-way handshake in its simplest form is that all the `TCP` connections begin
 - `SYN ACK` - Server acknowledges the request by sending an `ACK` packet back to the client which is made up of a random number, let's say `y` picked up by server and the number `x+1` where `x` is the number that was sent by the client
 - `ACK` - Client increments the number `y` received from the server and sends an `ACK` packet back with the number `y+1`
 
-Once the three-way handshake is completed, the data sharing between the client and server may begin. It should be noted that the client may start sending the application data as soon as it dispatches the last `ACK` packet but the server will still have to wait for the `ACK` packet to be recieved in order to fulfill the request.
+Once the three-way handshake is completed, the data sharing between the client and server may begin. It should be noted that the client may start sending the application data as soon as it dispatches the last `ACK` packet but the server will still have to wait for the `ACK` packet to be received in order to fulfill the request.
 
 ![](http://i.imgur.com/uERG2G2.png)
 
@@ -89,7 +89,7 @@ After merely 3 years of `HTTP/1.0`, the next version i.e. `HTTP/1.1` was release
 
 - **Hostname Identification** In `HTTP/1.0` `Host` header wasn't required but `HTTP/1.1` made it required.
 
-- **Persistent Connections** As discussed above, in `HTTP/1.0` there was only one request per connection and the connection was closed as soon as the request was fulfilled which resulted in accute performance hit and latency problems. `HTTP/1.1` introduced the persistent connections i.e. **connections weren't closed by default** and were kept open which allowed multiple sequential requests. To close the connections, the header `Connection: close` had to be available on the request. Clients usually send this header in the last request to safely close the connection.
+- **Persistent Connections** As discussed above, in `HTTP/1.0` there was only one request per connection and the connection was closed as soon as the request was fulfilled which resulted in acute performance hit and latency problems. `HTTP/1.1` introduced the persistent connections i.e. **connections weren't closed by default** and were kept open which allowed multiple sequential requests. To close the connections, the header `Connection: close` had to be available on the request. Clients usually send this header in the last request to safely close the connection.
 
 - **Pipelining** It also introduced the support for pipelining, where the client could send multiple requests to the server without waiting for the response from server on the same connection and server had to send the response in the same sequence in which requests were received. But how does the client know that this is the point where first response download completes and the content for next response starts, you may ask! Well, to solve this, there must be `Content-Length` header present which clients can use to identify where the response ends and it can start waiting for the next response.
 
@@ -111,7 +111,7 @@ After merely 3 years of `HTTP/1.0`, the next version i.e. `HTTP/1.1` was release
 
 I am not going to dwell about all the `HTTP/1.1` features in this post as it is a topic in itself and you can already find a lot about it. The one such document that I would recommend you to read is [Key differences between `HTTP/1.0` and HTTP/1.1](http://www.ra.ethz.ch/cdstore/www8/data/2136/pdf/pd1.pdf) and here is the link to [original RFC](https://tools.ietf.org/html/rfc2616) for the overachievers.
 
-`HTTP/1.1` was introduced in 1999 and it had been a standard for many years. Although, it improved alot over its predecessor; with the web changing everyday, it started to show its age. Loading a web page these days is more resource-intensive than it ever was. A simple webpage these days has to open more than 30 connections. Well `HTTP/1.1` has persistent connections, then why so many connections? you say! The reason is, in `HTTP/1.1` it can only have one outstanding connection at any moment of time. `HTTP/1.1` tried to fix this by introducing pipelining but it didn't completely address the issue because of the **head-of-line blocking** where a slow or heavy request may block the requests behind and once a request gets stuck in a pipeline, it will have to wait for the next requests to be fulfilled. To overcome these shortcomings of `HTTP/1.1`, the developers started implementing the workarounds, for example use of spritesheets, encoded images in CSS, single humungous CSS/Javascript files, [domain sharding](https://www.maxcdn.com/one/visual-glossary/domain-sharding-2/) etc.
+`HTTP/1.1` was introduced in 1999 and it had been a standard for many years. Although, it improved alot over its predecessor; with the web changing everyday, it started to show its age. Loading a web page these days is more resource-intensive than it ever was. A simple webpage these days has to open more than 30 connections. Well `HTTP/1.1` has persistent connections, then why so many connections? you say! The reason is, in `HTTP/1.1` it can only have one outstanding connection at any moment of time. `HTTP/1.1` tried to fix this by introducing pipelining but it didn't completely address the issue because of the **head-of-line blocking** where a slow or heavy request may block the requests behind and once a request gets stuck in a pipeline, it will have to wait for the next requests to be fulfilled. To overcome these shortcomings of `HTTP/1.1`, the developers started implementing the workarounds, for example use of spritesheets, encoded images in CSS, single humongous CSS/Javascript files, [domain sharding](https://www.maxcdn.com/one/visual-glossary/domain-sharding-2/) etc.
 
 ### SPDY - 2009
 
@@ -121,7 +121,7 @@ Google went ahead and started experimenting with alternative protocols to make t
 
 It was seen that if we keep increasing the bandwidth, the network performance increases in the beginning but a point comes when there is not much of a performance gain. But if you do the same with latency i.e. if we keep dropping the latency, there is a constant performance gain. This was the core idea for performance gain behind `SPDY`, decrease the latency to increase the network performance.
 
-> For those who don't know the difference, latency is the delay i.e. how long it takes for data to travel between the source and destination (measured in milliseconds) and bandwidth is the amount of data transfered per second (bits per second).
+> For those who don't know the difference, latency is the delay i.e. how long it takes for data to travel between the source and destination (measured in milliseconds) and bandwidth is the amount of data transferred per second (bits per second).
 
 The features of `SPDY` included, multiplexing, compression, prioritization, security etc. I am not going to get into the details of SPDY, as you will get the idea when we get into the nitty gritty of `HTTP/2` in the next section as I said `HTTP/2` is mostly inspired from SPDY.
 
@@ -176,7 +176,7 @@ While we are talking headers, let me add here that the headers are still the sam
 
 Server push is another tremendous feature of `HTTP/2` where the server, knowing that the client is going to ask for a certain resource, can push it to the client without even client asking for it. For example, let's say a browser loads a web page, it parses the whole page to find out the remote content that it has to load from the server and then sends consequent requests to the server to get that content.
 
-Server push allows the server to decrease the roundtrips by pushing the data that it knows that client is going to demand. How it is done is, server sends a special frame called `PUSH_PROMISE` notifying the client that, "Hey, I am about to send this resource to you! Do not ask me for it." The `PUSH_PROMISE` frame is associated with the stream that caused the push to happen and it contains the promised stream ID i.e. the stream on which the server will send the resource to be pushed.
+Server push allows the server to decrease the round trips by pushing the data that it knows that client is going to demand. How it is done is, server sends a special frame called `PUSH_PROMISE` notifying the client that, "Hey, I am about to send this resource to you! Do not ask me for it." The `PUSH_PROMISE` frame is associated with the stream that caused the push to happen and it contains the promised stream ID i.e. the stream on which the server will send the resource to be pushed.
 
 #### 5. Request Prioritization
 
@@ -186,7 +186,7 @@ Without any priority information, server processes the requests asynchronously i
 
 #### 6. Security
 
-There was extensive discussion on whether security (through `TLS`) should be made mandatory for `HTTP/2` or not. In the end, it was decided not to make it mandatory. However, most vendors stated that they will only support `HTTP/2` when it is used over `TLS`. So, although `HTTP/2` doesn't require encryption by specs but it has kind of become mandatory by default anyway. With that out of the way, `HTTP/2` when implemented over `TLS` does impose some requirementsi.e. `TLS` version `1.2` or higher must be used, there must be a certain level of minimum keysizes, ephemeral keys are required etc.
+There was extensive discussion on whether security (through `TLS`) should be made mandatory for `HTTP/2` or not. In the end, it was decided not to make it mandatory. However, most vendors stated that they will only support `HTTP/2` when it is used over `TLS`. So, although `HTTP/2` doesn't require encryption by specs but it has kind of become mandatory by default anyway. With that out of the way, `HTTP/2` when implemented over `TLS` does impose some requirements i.e. `TLS` version `1.2` or higher must be used, there must be a certain level of minimum key sizes, ephemeral keys are required etc.
 
 `HTTP/2` is here and it has already [surpassed SPDY in adaption](http://caniuse.com/#search=http2) which is gradually increasing. `HTTP/2` has alot to offer in terms of performance gain and it is about time we should start using it. 
 

content/guides/proxy-servers.md

@@ -1,4 +1,4 @@
-Internet has connected people across the world using social media and audio/video calling features along with providing an overabundance of knowledge and tools. All this comes with an inherent danger of security and privacy breaches. In this guide we will talk about **proxies** which play a vital role in mitigating these risks. We will cover the following topics in this guide:    
+The Internet has connected people across the world using social media and audio/video calling features along with providing an overabundance of knowledge and tools. All this comes with an inherent danger of security and privacy breaches. In this guide, we will talk about **proxies** that play a vital role in mitigating these risks. We will cover the following topics in this guide:    
 
 - [Proxy Server](#proxy-server)
 - [Forward Proxy Server](#forward-proxy-server)
@@ -7,34 +7,34 @@ Internet has connected people across the world using social media and audio/vide
 
 ## Proxy Server  
 
-***Every web request which is sent from the client to a web server goes through some type of proxy server.*** A proxy server acts as a gateway between client *(you)* and the internet and  separates end-users from the websites you browse. It replaces the source IP address of the web request with the proxy server's IP address and then forwards it to the web server. The web server is unaware of the client, it only sees the proxy server.    
+***Every web request which is sent from the client to a web server goes through some type of proxy server.*** A proxy server acts as a gateway between client *(you)* and the internet and separates end-users from the websites you browse. It replaces the source IP address of the web request with the proxy server's IP address and then forwards it to the web server. The web server is unaware of the client, it only sees the proxy server.    
 
 ![Proxy Server Description](/guides/proxy/proxy-example.png)    
-> NOTE: This is not an accurate description rather just an illustration.    
+> NOTE: This is not an accurate description but rather just an illustration.    
 
-Proxy servers serve as a single point of control making it easier to enforce security policies. It also provides caching mechanism which stores the requested web pages on the proxy server to improve performance. If the requested web-page is available in cache memory then instead of forwarding the request to the web-server it will send the cached webpage back to the client. This **saves big companies thousands of dollars** by reducing load on their servers as their website is visited by millions of users every day.
+Proxy servers serve as a single point of control making it easier to enforce security policies. It also provides caching mechanism which stores the requested web pages on the proxy server to improve performance. If the requested web-page is available in cache memory then instead of forwarding the request to the web-server it will send the cached webpage back to the client. This **saves big companies thousands of dollars** by reducing the load on their servers as their website is visited by millions of users every day.
      
 ## Forward Proxy Server    
 
-A forward proxy is generally implemented on the client side and **sits in front of multiple clients** or client sources. Forward proxy servers are mainly used by companies to **manage internet usage** of their employees and **restrict content**. It is also used as a **firewall** to secure company's network by blocking any request which would pose threat to the companies's network. Proxy servers are also used to **bypass geo-restriction** and browse content which might be blocked in user's country. It enables users to **browse anonymously**, as the proxy server masks their details from the website's servers. 
+A forward proxy is generally implemented on the client side and **sits in front of multiple clients** or client sources. Forward proxy servers are mainly used by companies to **manage internet usage** of their employees and **restrict content**. It is also used as a **firewall** to secure the company's network by blocking any request which would pose threat to the companies's network. Proxy servers are also used to **bypass geo-restriction** and browse content that might be blocked in the user's country. It enables users to **browse anonymously**, as the proxy server masks their details from the website's servers. 
 
 ![Forward Proxy Description](/guides/proxy/forward-proxy.png)    
-> NOTE: This is not an accurate description rather just an illustration
+> NOTE: This is not an accurate description but rather just an illustration
 
 ## Reverse Proxy Server    
 
-Reverse proxy servers are implemented on the **server side** instead of the client side. It **sits in front of multiple webservers** and manages the incoming requests by forwarding them to the web servers. It provides anonymity for the **back-end web servers and not the client**. Reverse proxy servers are generally used to perform tasks such as **authentication, content caching, and encryption/decryption** on behalf of the web server. These tasks would **hog CPU cycles** on the web server and degrade performance of the website by introducing high amount of delay in loading the webpage. Reverse proxies are also used as **load balancers** to distribute the incoming traffic efficiently among the web servers but it is **not optimized** for this task. In essence, reverse proxy server is a gateway to a web-server or group of web-servers. 
+Reverse proxy servers are implemented on the **server side** instead of the client side. It **sits in front of multiple webservers** and manages the incoming requests by forwarding them to the web servers. It provides anonymity for the **back-end web servers and not the client**. Reverse proxy servers are generally used to perform tasks such as **authentication, content caching, and encryption/decryption** on behalf of the web server. These tasks would **hog CPU cycles** on the web server and degrade the performance of the website by introducing a high amount of delay in loading the webpage. Reverse proxies are also used as **load balancers** to distribute the incoming traffic efficiently among the web servers but it is **not optimized** for this task. In essence, a reverse proxy server is a gateway to a web-server or group of web-servers. 
 
 ![Reverse Proxy Description](/guides/proxy/reverse-proxy.png)    
-> NOTE: This is not an accurate description rather just an illustration. Red lines represent server's response and black lines represent initial request from client(s).    
+> NOTE: This is not an accurate description but rather just an illustration. Red lines represent server's response and black lines represent initial request from client(s).    
 
 ## Summary   
 
-A proxy server acts as a gateway between client *(you)* and the internet and  separates end-users from the websites you browse. ***The position of the proxy server on the network determines whether it is a forward or a reverse proxy server***.    Forward proxy is implemented on the client side and **sits in front of multiple clients** or client sources and forwards requests to the web server. Reverse proxy servers are implemented on the **server side** it **sits in front of multiple webservers** and manages the incoming requests by forwarding them to the web servers. 
+A proxy server acts as a gateway between client *(you)* and the internet and separates end-users from the websites you browse. ***The position of the proxy server on the network determines whether it is a forward or a reverse proxy server***.    A Forward proxy is implemented on the client side and **sits in front of multiple clients** or client sources and forwards requests to the web server. Reverse proxy servers are implemented on the **server side** it **sits in front of multiple webservers** and manages the incoming requests by forwarding them to the web servers. 
 
 If all this was too much to take in, I have a simple analogy for you.    
 
-At a restaurant the waiter/waitress takes your order and gives it to the kitchen head chef. The head chef then calls out the order and assigns tasks to everyone in the kitchen.    
+At a restaurant, the waiter/waitress takes your order and gives it to the kitchen head chef. The head chef then calls out the order and assigns tasks to everyone in the kitchen.    
 
 In this analogy: 
 

content/guides/torrent-client.md

@@ -475,7 +475,7 @@ Files, pieces, and piece hashes aren't the full story—we can go further by bre
 A peer is supposed to sever the connection if they receive a request for a block larger than 16KB. However, based on my experience, they're often perfectly happy to satisfy requests up to 128KB. I only got moderate gains in overall speed with larger block sizes, so it's probably better to stick with the spec.
 
 #### Pipelining
-Network round-trips are expensive, and requesting each block one by one will absolutely tank the performance of our download. Therefore, it's important to **pipeline** our requests such that we keep up a constant pressure of some number of unfulfilled requests. This can increase the throughput of our connection by an order of magnitude.
+Network round-trips are expensive, and requesting each block one by one will absolutely thank the performance of our download. Therefore, it's important to **pipeline** our requests such that we keep up a constant pressure of some number of unfulfilled requests. This can increase the throughput of our connection by an order of magnitude.
 
 ![Two email threads simulating peer connections. The thread on the left shows a request followed by a reply, repeated three times. The thread on the left sends three requests, and receives three replies in quick succession.](/guides/torrent-client/pipelining.png)
 

content/guides/what-is-internet.md

@@ -1,4 +1,4 @@
-Since the explosive growth of web-based applications, every developer could stand to benefit from understanding how the Internet works. In this article, accompanied with an introductory series of short videos about the Internet from [code.org](https://code.org), you will learn the basics of the Internet and how it works. After going through this article, you will be able to answer the below questions:
+Since the explosive growth of web-based applications, every developer stands to benefit from understanding how the Internet works. Through this article and its accompanying introductory series of short videos about the Internet from [code.org](https://code.org), you will learn the basics of the Internet and how it works. After going through this article, you will be able to answer the following questions:
 
 * What is the Internet?
 * How does the information move on the internet?
@@ -19,7 +19,7 @@ In the video below, Vint Cerf, one of the "fathers of the internet," explains th
 
 ## Wires, Cables, and Wi-Fi
 
-Information on the Internet moves from computer to another in the form of bits over various mediums, including Ethernet cables, fiber optic cables, and wireless signals (i.e., radio waves).
+Information on the Internet moves from one computer to another in the form of bits over various mediums, including Ethernet cables, fiber optic cables, and wireless signals (i.e., radio waves).
 
 In the video linked below, you will learn about the different mediums for data transfer on the Internet and the pros and cons for each. 
 
@@ -49,13 +49,13 @@ HTTP is the standard protocol by which webpages are transferred over the Interne
 
 ## Encryption and Public Keys
 
-Cryptography is what keeps our communication secure on the Internet. In this short video, you will learn the basics of cryptograpy, SSL/TLS, and how they help make the communication on the Internet secure.
+Cryptography is what keeps our communication secure on the Internet. In this short video, you will learn the basics of cryptography, SSL/TLS, and how they help make the communication on the Internet secure.
 
 <iframe width="100%" height="400" src="https://www.youtube.com/embed/ZghMPWGXexs" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
 
 ## Cybersecurity and Crime
 
-In this video, you will learn about the basics of cybersecurity and common cybercrimes
+Cybersecurity refers to the protective measures against criminal activity accomplished through using a network, technological devices, and the internet.In this video, you will learn about the basics of cybersecurity and common cybercrimes.
 
 <iframe width="100%" height="400" src="https://www.youtube.com/embed/AuYNXgO_f3Y" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
 

content/guides/why-build-it-and-they-will-come-wont-work-anymore.md

@@ -1,30 +1,30 @@
 We all have heard the mantra *"build it and they will come"* many times. Stories of people building a startup or project and seemingly stumbling upon a goldmine aren't few, but they aren't the rule. These stories are still the exception in the mass of launched projects and startups.
 
-Before the [Wright brothers](https://en.wikipedia.org/wiki/Wright_brothers) built their Kitty Hawk, people generally believed heavy objects could not fly - physics simply forbade it. The idea to regularly board airplanes as we do it these days was unthinkable. It was considered an unrealistic daydream for humans to ever claim the sky. When the first airplanes took off, people were fascinated, of course. It was a topic people continued to talk about for ages. Technology had made something impossible possible. While the wording "build it and they will come" originated from the movie [Field of Dreams](https://en.wikipedia.org/wiki/Field_of_Dreams), this and similar historic events gave birth to the idea behind it.
+Before the [Wright brothers](https://en.wikipedia.org/wiki/Wright_brothers) built their Kitty Hawk, people generally believed heavy objects could not fly - physics simply forbade it. The idea of regularly boarding airplanes as we do it these days was unthinkable. It was considered an unrealistic daydream for humans to ever claim the sky. When the first airplanes took off, people were fascinated, of course. It was a topic people continued to talk about for ages. Technology had made something impossible possible. While the wording "build it and they will come" originated from the movie [Field of Dreams](https://en.wikipedia.org/wiki/Field_of_Dreams), this and similar historic events gave birth to the idea behind it.
 
-The engineers' and inventors' dreams came true: spend time doing what you love while the success follows magically. The internet and web-standards democratized access to this dream. But with it, the idea behind it faded and became less and less powerful. In 2020, there are very strong signs the popular saying isn't correct anymore.
+The engineers' and inventors' dreams came true: spend time doing what you love while success follows magically. The internet and web-standards democratized access to this dream. But with it, the idea behind it faded and became less and less powerful. In 2020, there are very strong signs the popular saying isn't correct anymore.
 
 
 Why doesn't "build it and they will come" work anymore?
 -------------------------------------------------------
 
-There are a few reasons working hard to make "build it and they will come" a thing of the past. This being said, it doesn't mean you can't succeed building a side-project anymore. You've just got to adjust the way you are building it.
+There are a few reasons for working hard to make "build it and they will come" a thing of the past. This being said, it doesn't mean you can't succeed in building a side-project anymore. You've just got to adjust the way you are building it.
 
 ### Building got much easier
 
 As a software engineer, some websites are a blessing. Most of us couldn't work without GitHub, Stackoverflow and of course Google, ahem, DuckDuckGo. These powerful sites help us to solve problems, learn new techniques and find the right libraries to make building projects easier. If any of these sites are down, most engineers take a break and go for a coffee instead of trying to continue working. Combine this with more sophisticated web-standards and easier access to tooling, and you arrive at a world where building projects isn't just a job for highly specialist developers anymore. Powerful frameworks such as [Laravel](https://laravel.com/) and [Quasar Framework](https://quasar.dev/) are available for anyone to build projects on - for free.
 
-In fact, building projects got to a point where some people simply build them as an exercise or hobby. If you spend some time browsing GitHub you will be surprised by the open source projects people built without any commercial goals. "Low code" and "No code" are the next wave of people building projects with less technological background.
+In fact, building projects got to a point where some people simply build them as an exercise or hobby. If you spend some time browsing GitHub you will be surprised by the open source projects people built without any commercial goals. "Low code" and "No code" are the next wave of people building projects with a less technological background.
 
 ### Too much going on: information overload
 
-We are living in a world with information overload. In the online sphere, you can find a lot of useful information. But there is also a lot of noise. For each piece of information or advice you can find a number of opposing statements. This is partly due to the fact that the internet made it much easier to publish and share information. Everyone has been given a voice - for good or bad. This makes it much harder to reach potential users. Your new project probably just drowns amongst kitten videos, opinions, and news. Never has the average lifetime of published content been so low. You've got to come up with a marketing plan before setting out on the journey.
+We are living in a world with information overload. In the online sphere, you can find a lot of useful information. But there is also a lot of noise. For each piece of information or advice, you can find a number of opposing statements. This is partly due to the fact that the internet made it much easier to publish and share information. Everyone has been given a voice - for good or bad. This makes it much harder to reach potential users. Your new project probably just drowns amongst kitten videos, opinions, and news. Never has the average lifetime of published content been so low. You've got to come up with a marketing plan before setting out on the journey.
 
 ### Smaller Problems
 
-Besides building being easier than ever before and attention being in short supply, there is another issue making the life of makers, inventors and engineers harder: today's problems are much smaller. Back when the previously mentioned Wright Brothers set out, they fascinated people with the problem they were aiming to address: flying. Unless your name is Elon, your problem is unlikely to attract many people naturally. As a solo developer or indie hacker, the chances are higher for having a much smaller problem in a niche (of a niche). With the information overload mentioned before, niches are pretty much the only way to build a side-project or startup and succeed.
+Besides building is easier than ever before and attention is in short supply, there is another issue making the life of makers, inventors, and engineers harder: today's problems are much smaller. Back when the previously mentioned Wright Brothers set out, they fascinated people with the problem they were aiming to address: flying. Unless your name is Elon, your problem is unlikely to attract many people naturally. As a solo developer or indie hacker, the chances are higher of having a much smaller problem in a niche (of a niche). With the information overload mentioned before, niches are pretty much the only way to build a side-project or startup and succeed.
 
-Does sound pretty grim for inventors, developers and engineers? Well, yes and no. We've got to tweak the approach to get in front of the eye of potential users and customers.
+Does sound pretty grim for inventors, developers, and engineers? Well, yes and no. We've got to tweak the approach to get in front of the eye of potential users and customers.
 
 
 How to market your project nowadays?
@@ -34,27 +34,27 @@ The very first step to improving the odds of success is [idea validation](https:
 
 ### Build your Audience first and the project after.
 
-Build your audience before you build your project. Spend your time connecting with potential users, learn from their needs and talk about their problems. This will help you market your project later on. Audience first, project second. There are numerous ways to build an audience. One of the simplest and easiest is to start with a personal or [project blog](https://startupnamecheck.com/blog/how-to-start-a-small-business-blog).
+Build your audience before you build your project. Spend your time connecting with potential users, learning from their needs, and talking about their problems. This will help you market your project later on. The audience first, projects second. There are numerous ways to build an audience. One of the simplest and easiest is to start with a personal or [project blog](https://startupnamecheck.com/blog/how-to-start-a-small-business-blog).
 
-Don't use Medium or a similar service - opt for a self-hosted blog as it allows you to build the blog freely to your needs and have decent links back to your project later on. Don't forget to add a newsletter. Newsletters are a key to reconnect in our world of short attention spans.
+Don't use Medium or a similar service - opt for a self-hosted blog as it allows you to build the blog freely to your needs and have decent links back to your project later on. Don't forget to add a newsletter. Newsletters are a key to reconnecting in our world of short attention spans.
 
 ### Tool by Tool
 
-Another approach is the "Tool by Tool" approach. I've first noticed this approach being used by Shopify. The team at Shopify are providing little tools such as a [logo generator](https://hatchful.shopify.com/) and release these tools free for anyone to use. This not just builds goodwill with people; it also allows Shopify to attract powerful backlinks to their projects. As developers we are in the perfect position to build such mini-tools. It boosts morale and drives attention at the same time.
+Another approach is the "Tool by Tool" approach. I first noticed this approach being used by Shopify. The team at Shopify is providing little tools such as a [logo generator](https://hatchful.shopify.com/) and releasing these tools free for anyone to use. This not just builds goodwill with people; it also allows Shopify to attract powerful backlinks to their projects. As developers, we are in the perfect position to build such mini-tools. It boosts morale and drives attention at the same time.
 
-Spend some time evaluating where your project or product will deliver value to the end-user. Look at options to split off small, independent tools. Build these and launch them before launching the whole product. This allows you to practice launching and promoting your part-projects at the same time. With each backlink to your part-projects you will enhance your ranking in Google. An example for a maker following this approach is [Kamban](https://kambanthemaker.com/) with [FlatGA](https://flatga.io/). He built FlatGA as phase one of a bigger project currently in development.
+Spend some time evaluating where your project or product will deliver value to the end-user. Look at options to split off small, independent tools. Build these and launch them before launching the whole product. This allows you to practice launching and promoting your part-projects at the same time. With each backlink to your part-projects, you will enhance your ranking in Google. An example of a maker following this approach is [Kamban](https://kambanthemaker.com/) with [FlatGA](https://flatga.io/). He built FlatGA as phase one of a bigger project currently in development.
 
 ### Join a Maker community
 
-While you are building your part-projects, don't forget to discuss the progress publicly. This helps to attract an audience around your work and makes the launches easier. You can use Twitter threads and Reddit posts to share updates. A maker community such as [makerlog](https://getmakerlog.com/) or [WIP.chat](https://wip.chat) can also extend your reach. These allow you to get instant feedback, keep yourself accountable and they will enhance your reach at the same time.
+While you are building your part-projects, don't forget to discuss the progress publicly. This helps to attract an audience around your work and makes the launches easier. You can use Twitter threads and Reddit posts to share updates. A maker community such as [makerlog](https://getmakerlog.com/) or [WIP.chat](https://wip.chat) can also extend your reach. These allow you to get instant feedback, and keep yourself accountable and they will enhance your reach at the same time.
 
 ### Getting ready to Launch
 
-Launching seems like this special moment when you release your project into the wide world. Often this moment is combined with high expectations and developers consider launching their project the key - if not only - part of their approach to marketing. While launching can help to attract some initial customers, it shouldn't be your only idea when it comes to marketing. You should also know that launching isn't a single event. You can (and should) launch again and again. Every time you launch you are increasing the chance to reach more and new customers. After the launch is before the launch.
+Launching seems like this special moment when you release your project into the wide world. Often this moment is combined with high expectations and developers consider launching their project the key - if not only - part of their approach to marketing. While launching can help to attract some initial customers, it shouldn't be your only idea when it comes to marketing. You should also know that launching isn't a single event. You can (and should) launch again and again. Every time you launch you are increasing the chance to reach more new customers. After the launch is before the launch.
 
 ### Marketing Is an On-going Fight
 
-Many developers plan to launch their product on a few sites and see where it takes their project from there on. This works well, if your product goes viral by luck. A much more sustainable approach is constantly working a little on it. Marketing is most effective, if done consistently. That holds true for blogging as well as most other forms of marketing. A simple approach to keep you on the path to market your project regularly is subscribing to a free [newsletter with small marketing opportunities](https://wheretopost.email). This way, you are regularly reminded and given bite-sized tasks to complete.
+Many developers plan to launch their product on a few sites and see where it takes their project from there on. This works well if your product goes viral by luck. A much more sustainable approach is constantly working a little on it. Marketing is most effective if done consistently. That holds true for blogging as well as most other forms of marketing. A simple approach to keep you on the path to marketing your project regularly is subscribing to a free [newsletter with small marketing opportunities](https://wheretopost.email). This way, you are regularly reminded and given bite-sized tasks to complete.
 
 
 Closing Words
@@ -66,4 +66,4 @@ I hope the article helped you to wrap your head around the idea that building si
 About the author
 ----------------
 
-[Peter Thaleikis](https://peterthaleikis.com/) a software engineer and business owner. He has been developing web applications since around 2000. Before he started his own software development company [Bring Your Own Ideas Ltd.](https://bringyourownideas.com/), he has been Lead Developer for multiple organisations.
+[Peter Thaleikis](https://peterthaleikis.com/) a software engineer and business owner. He has been developing web applications since around 2000. Before he started his own software development company [Bring Your Own Ideas Ltd.](https://bringyourownideas.com/), he has been a Lead Developer for multiple organizations.

content/pages/about.md

@@ -29,7 +29,7 @@ any intentions of monetization but as a good will, to help the people get out of
 
 Having said that, I love teaching and my future plans are to be able to work full-time on roadmap.sh for which it has to
 make enough money to pay for my rent, groceries, bills, travel expenses, etc but even if it doesn't it's likely I'll
-continue growing the site however I can. My focus at the moment is not making money from it and just add content that
+continue growing the site however I can. My focus at the moment is not making money from it and just adding content that
 creates value for the people.
 
 > Sponsor the efforts by [paying as little as 5$ per month](https://github.com/sponsors/kamranahmedse) or with [one time payment via paypal](https://paypal.me/kamranahmedse). Alternatively, reach out to me at [kamranahmed.se@gmail.com](mailto:kamranahmed.se@gmail.com).
@@ -51,7 +51,7 @@ be:
 * Becoming a sponsor
 
 Just make sure
-to [follow the contribution guidelines](https://github.com/kamranahmedse/developer-roadmap/tree/master/contributing) when you
+to [follow the contribution guidelines](https://github.com/kamranahmedse/developer-roadmap/tree/master/contributing.md) when you
 decide to contribute.
 
 ## Can I redistribute the content?

content/pages/pdfs.md

@@ -0,0 +1,22 @@
+<br />
+<br />
+
+# Download Roadmap PDFs
+
+Here is the list of PDF links for each of the roadmaps.
+
+* **Frontend Roadmap** - [Roadmap Link](https://roadmap.sh/frontend) / [PDF Link](https://roadmap.sh/pdfs/frontend.pdf)
+* **Backend Roadmap** - [Roadmap Link](https://roadmap.sh/backend) / [PDF Link](https://roadmap.sh/pdfs/backend.pdf)
+* **DevOps Roadmap** - [Roadmap Link](https://roadmap.sh/devops) / [PDF Link](https://roadmap.sh/pdfs/devops.pdf)
+* **QA Roadmap** - [Roadmap Link](https://roadmap.sh/qa) / [PDF Link](https://roadmap.sh/pdfs/qa.pdf)
+* **Software Architect Roadmap** - [Roadmap Link](https://roadmap.sh/software-architect) / [PDF Link](https://roadmap.sh/pdfs/software-architect.pdf)
+* **JavaScript Roadmap** - [Roadmap Link](https://roadmap.sh/javascript) / [PDF Link](https://roadmap.sh/pdfs/javascript.pdf)
+* **Node.js Roadmap** - [Roadmap Link](https://roadmap.sh/nodejs) / [PDF Link](https://roadmap.sh/pdfs/nodejs.pdf)
+* **Angular Roadmap** - [Roadmap Link](https://roadmap.sh/angular) / [PDF Link](https://roadmap.sh/pdfs/angular.pdf)
+* **React Roadmap** - [Roadmap Link](https://roadmap.sh/react) / [PDF Link](https://roadmap.sh/pdfs/react.pdf)
+* **Vue Roadmap** - [Roadmap Link](https://roadmap.sh/vue) / [PDF Link](https://roadmap.sh/pdfs/vue.pdf)
+* **Design System Roadmap** - [Roadmap Link](https://roadmap.sh/design-system) / [PDF Link](https://roadmap.sh/pdfs/design-system.pdf)
+* **Blockchain Roadmap** - [Roadmap Link](https://roadmap.sh/blockchain) / [PDF Link](https://roadmap.sh/pdfs/blockchain.pdf)
+* **Go Roadmap** - [Roadmap Link](https://roadmap.sh/go) / [PDF Link](https://roadmap.sh/pdfs/go.pdf)
+* **Java Roadmap** - [Roadmap Link](https://roadmap.sh/java) / [PDF Link](https://roadmap.sh/pdfs/java.pdf)
+* **Python Roadmap** - [Roadmap Link](https://roadmap.sh/python) / [PDF Link](https://roadmap.sh/pdfs/python.pdf)

content/roadmaps.json

@@ -46,6 +46,14 @@
     "resourcesPath": "/roadmaps/100-frontend/resources.md",
     "pdfUrl": "/pdfs/frontend.pdf",
     "contentPathsFilePath": "/roadmaps/100-frontend/content-paths.json",
+    "relatedRoadmaps": [
+      "javascript",
+      "nodejs",
+      "react",
+      "angular",
+      "vue",
+      "design-system"
+    ],
     "id": "frontend",
     "metaPath": "/roadmaps/100-frontend/meta.json",
     "isUpcoming": false
@@ -96,6 +104,15 @@
     },
     "pdfUrl": "/pdfs/backend.pdf",
     "contentPathsFilePath": "/roadmaps/101-backend/content-paths.json",
+    "relatedRoadmaps": [
+      "python",
+      "java",
+      "golang",
+      "devops",
+      "javascript",
+      "nodejs",
+      "postgresql-dba"
+    ],
     "id": "backend",
     "metaPath": "/roadmaps/101-backend/meta.json",
     "isUpcoming": false
@@ -108,7 +125,7 @@
         "devops roadmap 2022",
         "sre roadmap 2022",
         "operations roadmap 2022",
-        "guide to becoming a devops enginer",
+        "guide to becoming a devops engineer",
         "devops roadmap",
         "sre roadmap",
         "site reliability engineer roadmap",
@@ -145,6 +162,14 @@
     },
     "pdfUrl": "/pdfs/devops.pdf",
     "contentPathsFilePath": "/roadmaps/102-devops/content-paths.json",
+    "relatedRoadmaps": [
+      "backend",
+      "python",
+      "java",
+      "golang",
+      "javascript",
+      "nodejs"
+    ],
     "id": "devops",
     "metaPath": "/roadmaps/102-devops/meta.json",
     "isUpcoming": false
@@ -190,6 +215,14 @@
     },
     "pdfUrl": "/pdfs/react.pdf",
     "contentPathsFilePath": "/roadmaps/103-react/content-paths.json",
+    "relatedRoadmaps": [
+      "frontend",
+      "javascript",
+      "angular",
+      "vue",
+      "nodejs",
+      "design-system"
+    ],
     "id": "react",
     "metaPath": "/roadmaps/103-react/meta.json",
     "isUpcoming": false
@@ -221,8 +254,6 @@
     "isCommunity": false,
     "featured": true,
     "jsonUrl": "/project/angular.json",
-    "landingPath": "/roadmaps/104-angular/landscape.md",
-    "resourcesPath": "/roadmaps/104-angular/resources.md",
     "versions": [
       "latest",
       "2018",
@@ -233,6 +264,14 @@
       "url": "https://twitter.com/kamranahmedse"
     },
     "pdfUrl": "/pdfs/angular.pdf",
+    "relatedRoadmaps": [
+      "frontend",
+      "javascript",
+      "react",
+      "vue",
+      "nodejs"
+    ],
+    "contentPathsFilePath": "/roadmaps/104-angular/content-paths.json",
     "id": "angular",
     "metaPath": "/roadmaps/104-angular/meta.json",
     "isUpcoming": false
@@ -273,6 +312,7 @@
     "featuredDescription": "Step by step guide to become a Vue Developer in 2022",
     "isTextHeavy": false,
     "isCommunity": false,
+    "isNew": true,
     "featured": true,
     "jsonUrl": "/project/vue.json",
     "resourcesPath": "/roadmaps/105-vue/resources.md",
@@ -287,10 +327,74 @@
     },
     "pdfUrl": "/pdfs/vue.pdf",
     "contentPathsFilePath": "/roadmaps/105-vue/content-paths.json",
+    "relatedRoadmaps": [
+      "frontend",
+      "javascript",
+      "react",
+      "angular",
+      "nodejs"
+    ],
     "id": "vue",
     "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,
+    "isNew": true,
+    "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",
+    "relatedRoadmaps": [
+      "frontend",
+      "backend",
+      "javascript",
+      "react",
+      "angular",
+      "vue",
+      "nodejs"
+    ],
+    "id": "javascript",
+    "metaPath": "/roadmaps/106-javascript/meta.json",
+    "isUpcoming": false
+  },
   {
     "seo": {
       "title": "Android Developer Roadmap: Learn to become an Android developer",
@@ -318,8 +422,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",
@@ -329,8 +433,94 @@
       "name": "Kamran Ahmed",
       "url": "https://twitter.com/kamranahmedse"
     },
+    "relatedRoadmaps": [
+      "frontend",
+      "javascript",
+      "react",
+      "nodejs"
+    ],
     "id": "android",
-    "metaPath": "/roadmaps/106-android/meta.json",
+    "metaPath": "/roadmaps/107-android/meta.json",
+    "isUpcoming": false
+  },
+  {
+    "seo": {
+      "title": "Node.js Developer Roadmap: Learn to become a modern node.js developer",
+      "description": "Learn to become a modern node.js developer using this roadmap. Community driven, articles, resources, guides, interview questions, quizzes for modern node.js development.",
+      "keywords": [
+        "node.js roadmap 2022",
+        "nodejs roadmap 2022",
+        "node.js roadmap 2022",
+        "nodejs roadmap 2022",
+        "node.js developer roadmap 2022",
+        "nodejs developer roadmap 2022",
+        "guide to becoming a developer",
+        "guide to becoming a node.js developer",
+        "guid to becoming a node.js developer",
+        "node.js developer",
+        "nodejs developer",
+        "node.js engineer",
+        "nodejs engineer",
+        "node.js skills",
+        "nodejs skills",
+        "node.js development",
+        "nodejs development",
+        "node.js developer",
+        "nodejs developer",
+        "node.js development skills",
+        "nodejs development skills",
+        "node.js development skills test",
+        "nodejs development skills test",
+        "node.js roadmap",
+        "nodejs roadmap",
+        "node.js engineer roadmap",
+        "nodejs engineer roadmap",
+        "node.js developer roadmap",
+        "nodejs developer roadmap",
+        "become a node.js developer",
+        "become a node.js developer",
+        "node.js developer career path",
+        "nodejs developer career path",
+        "node.js developer",
+        "nodejs developer",
+        "modern node.js developer",
+        "modern node.js developer",
+        "node developer",
+        "skills for node.js development",
+        "skills for nodejs development",
+        "learn node.js development",
+        "lear node.js development",
+        "node.js developer quiz",
+        "nodejs developer quiz",
+        "node.js developer interview questions",
+        "nodejs developer interview questions"
+      ]
+    },
+    "title": "Node.js Developer",
+    "description": "Step by step guide to becoming a modern Node.js developer in 2022",
+    "featuredTitle": "Node.js",
+    "featuredDescription": "Step by step guide to becoming a Node.js developer in 2022",
+    "type": "tool",
+    "isNew": true,
+    "author": {
+      "name": "Kamran Ahmed",
+      "url": "https://twitter.com/kamranahmedse"
+    },
+    "featured": true,
+    "imageUrl": "/roadmaps/nodejs.png",
+    "jsonUrl": "/project/nodejs.json",
+    "pdfUrl": "/pdfs/nodejs.pdf",
+    "contentPathsFilePath": "/roadmaps/107-nodejs/content-paths.json",
+    "relatedRoadmaps": [
+      "frontend",
+      "backend",
+      "javascript",
+      "react",
+      "angular",
+      "vue"
+    ],
+    "id": "nodejs",
+    "metaPath": "/roadmaps/107-nodejs/meta.json",
     "isUpcoming": false
   },
   {
@@ -360,7 +550,7 @@
     "isCommunity": false,
     "featured": true,
     "jsonUrl": "/project/python.json",
-    "resourcesPath": "/roadmaps/107-python/resources.md",
+    "resourcesPath": "/roadmaps/108-python/resources.md",
     "pdfUrl": "/pdfs/python.pdf",
     "versions": [
       "latest"
@@ -369,9 +559,17 @@
       "name": "Kamran Ahmed",
       "url": "https://twitter.com/kamranahmedse"
     },
-    "contentPathsFilePath": "/roadmaps/107-python/content-paths.json",
+    "contentPathsFilePath": "/roadmaps/108-python/content-paths.json",
+    "relatedRoadmaps": [
+      "backend",
+      "devops",
+      "golang",
+      "java",
+      "javascript",
+      "nodejs"
+    ],
     "id": "python",
-    "metaPath": "/roadmaps/107-python/meta.json",
+    "metaPath": "/roadmaps/108-python/meta.json",
     "isUpcoming": false
   },
   {
@@ -412,8 +610,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 +621,17 @@
       "name": "Kamran Ahmed",
       "url": "https://twitter.com/kamranahmedse"
     },
+    "contentPathsFilePath": "/roadmaps/109-golang/content-paths.json",
+    "relatedRoadmaps": [
+      "backend",
+      "devops",
+      "python",
+      "java",
+      "javascript",
+      "nodejs"
+    ],
     "id": "golang",
-    "metaPath": "/roadmaps/108-golang/meta.json"
+    "metaPath": "/roadmaps/109-golang/meta.json"
   },
   {
     "seo": {
@@ -464,8 +670,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 +681,71 @@
       "url": "https://twitter.com/kamranahmedse"
     },
     "pdfUrl": "/pdfs/java.pdf",
+    "contentPathsFilePath": "/roadmaps/110-java/content-paths.json",
+    "relatedRoadmaps": [
+      "backend",
+      "devops",
+      "python",
+      "golang",
+      "javascript",
+      "nodejs"
+    ],
     "id": "java",
-    "metaPath": "/roadmaps/109-java/meta.json"
+    "metaPath": "/roadmaps/110-java/meta.json"
+  },
+  {
+    "seo": {
+      "title": "How to Create a Design System",
+      "description": "Learn how to create a design system or become a design system engineer with this step by step guide with resources.",
+      "keywords": [
+        "guide to create a design system",
+        "guide to becoming a design system engineer",
+        "design system engineer",
+        "design system engineer",
+        "design system skills",
+        "guide to design system",
+        "design system roadmap",
+        "design system skills",
+        "design system skills test",
+        "skills for design system",
+        "what is design system",
+        "design system quiz",
+        "design system interview questions",
+        "design system engineer roadmap",
+        "design system engineer roadmap",
+        "become a design system engineer",
+        "design system engineer career path",
+        "design system engineer",
+        "modern design system engineer"
+      ]
+    },
+    "title": "Design System",
+    "description": "Learn how to create a design system with this step by step guide",
+    "featuredTitle": "Design System",
+    "type": "tool",
+    "featuredDescription": "Step by step guide to building a modern Design System",
+    "isTextHeavy": false,
+    "isCommunity": false,
+    "isNew": true,
+    "isUpcoming": false,
+    "featured": true,
+    "jsonUrl": "/project/design-system.json",
+    "author": {
+      "name": "Kamran Ahmed",
+      "url": "https://twitter.com/kamranahmedse"
+    },
+    "pdfUrl": "/pdfs/design-system.pdf",
+    "contentPathsFilePath": "/roadmaps/111-design-system/content-paths.json",
+    "relatedRoadmaps": [
+      "frontend",
+      "javascript",
+      "react",
+      "vue",
+      "angular",
+      "nodejs"
+    ],
+    "id": "design-system",
+    "metaPath": "/roadmaps/111-design-system/meta.json"
   },
   {
     "seo": {
@@ -509,8 +777,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"
@@ -520,8 +788,74 @@
     "featured": true,
     "detailed": false,
     "versions": [],
+    "relatedRoadmaps": [
+      "backend",
+      "devops"
+    ],
     "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",
+    "isNew": true,
+    "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",
+    "relatedRoadmaps": [
+      "frontend",
+      "backend",
+      "javascript",
+      "nodejs",
+      "react",
+      "vue",
+      "angular"
+    ],
+    "id": "blockchain",
+    "metaPath": "/roadmaps/112-blockchain/meta.json",
     "isUpcoming": false
   },
   {
@@ -548,15 +882,125 @@
     "featuredTitle": "QA",
     "type": "role",
     "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",
+    "isNew": true,
+    "resourcesPath": "/roadmaps/113-qa/resources.md",
+    "imageUrl": "/roadmaps/qa.png",
+    "jsonUrl": "/project/qa.json",
+    "pdfUrl": "/pdfs/qa.pdf",
     "author": {
       "name": "Anas Fitiani",
       "url": "https://github.com/anas-qa"
     },
+    "contentPathsFilePath": "/roadmaps/113-qa/content-paths.json",
+    "relatedRoadmaps": [
+      "frontend",
+      "backend",
+      "devops",
+      "javascript",
+      "nodejs"
+    ],
     "id": "qa",
-    "metaPath": "/roadmaps/112-qa/meta.json"
+    "metaPath": "/roadmaps/113-qa/meta.json",
+    "isUpcoming": false
+  },
+  {
+    "seo": {
+      "title": "Software Architect Roadmap: Learn to become a modern Software Architect",
+      "description": "Community driven, articles, resources, guides, interview questions, quizzes for DevOps. Learn to become a modern DevOps engineer by following the steps, skills, resources and guides listed in this roadmap.",
+      "keywords": [
+        "solution architect roadmap",
+        "enterprise architect roadmap",
+        "guide to becoming a software architect",
+        "guide to becoming a Software Architect",
+        "software architect roadmap",
+        "db administrator roadmap",
+        "software architect roadmap",
+        "software architect skills",
+        "db administrator skills",
+        "become software architect",
+        "modern software architect skills",
+        "software architect skills test",
+        "skills for software architect",
+        "skills for software architect",
+        "learn software architect",
+        "what is software architect",
+        "software architect quiz",
+        "software architect interview questions"
+      ]
+    },
+    "title": "Software Architect",
+    "description": "Step by step guide to becoming a Software Architect in 2022",
+    "featuredTitle": "Software Architect",
+    "isNew": true,
+    "type": "role",
+    "jsonUrl": "/project/software-architect.json",
+    "featuredDescription": "Step by step guide to become a Software Architect in 2022",
+    "isCommunity": false,
+    "featured": true,
+    "detailed": false,
+    "versions": [],
+    "relatedRoadmaps": [
+      "backend",
+      "software-design-architecture",
+      "python",
+      "python",
+      "nodejs",
+      "golang",
+      "java",
+      "devops"
+    ],
+    "contentPathsFilePath": "/roadmaps/114-software-architect/content-paths.json",
+    "id": "software-architect",
+    "metaPath": "/roadmaps/114-software-architect/meta.json",
+    "isUpcoming": false
+  },
+  {
+    "seo": {
+      "title": "Software Design and Architecture Roadmap",
+      "description": "Learn software design and architecture with this step by step guide and resources.",
+      "keywords": [
+        "guide to learn software design and architecture",
+        "software design roadmap",
+        "software architecture roadmap",
+        "software design and architecture roadmap",
+        "modern software design and architecture roadmap",
+        "fullstack software design and architecture roadmap",
+        "design and architecture roadmap",
+        "scalable design roadmap",
+        "software design patterns roadmap",
+        "software architecture patterns roadmap",
+        "design architecture patterns roadmap",
+        "application architectures",
+        "software architecture guide"
+      ]
+    },
+    "title": "Software Design and Architecture",
+    "description": "Step by step guide to learn software design and architecture",
+    "featuredTitle": "Software Design and Architecture",
+    "type": "tool",
+    "featuredDescription": "Guide to learn software design and architecture",
+    "isTextHeavy": false,
+    "isCommunity": false,
+    "isNew": true,
+    "isUpcoming": false,
+    "featured": true,
+    "jsonUrl": "/project/software-design-architecture.json",
+    "author": {
+      "name": "Kamran Ahmed",
+      "url": "https://twitter.com/kamranahmedse"
+    },
+    "pdfUrl": "/pdfs/software-design-architecture.pdf",
+    "relatedRoadmaps": [
+      "backend",
+      "software-architect",
+      "devops",
+      "python",
+      "java",
+      "nodejs",
+      "golang"
+    ],
+    "id": "software-design-architecture",
+    "metaPath": "/roadmaps/115-software-design-architecture/meta.json"
   }
-]
+]

content/roadmaps/100-frontend/content-paths.json

@@ -38,6 +38,7 @@
   "package-managers": "/roadmaps/100-frontend/content/107-package-managers/readme.md",
   "package-managers:npm": "/roadmaps/100-frontend/content/107-package-managers/100-npm.md",
   "package-managers:yarn": "/roadmaps/100-frontend/content/107-package-managers/101-yarn.md",
+  "package-managers:pnpm": "/roadmaps/100-frontend/content/107-package-managers/102-pnpm.md",
   "css-architecture": "/roadmaps/100-frontend/content/108-css-architecture/readme.md",
   "css-architecture:bem": "/roadmaps/100-frontend/content/108-css-architecture/100-bem.md",
   "css-architecture:oocss": "/roadmaps/100-frontend/content/108-css-architecture/101-oocss.md",
@@ -61,6 +62,8 @@
   "build-tools:module-bundlers:vite": "/roadmaps/100-frontend/content/110-build-tools/101-module-bundlers/104-vite.md",
   "pick-a-framework": "/roadmaps/100-frontend/content/111-pick-a-framework/readme.md",
   "pick-a-framework:react-js": "/roadmaps/100-frontend/content/111-pick-a-framework/100-react-js/readme.md",
+  "pick-a-framework:svelte": "/roadmaps/100-frontend/content/111-pick-a-framework/103-svelte.md",
+  "pick-a-framework:solid-js": "/roadmaps/100-frontend/content/111-pick-a-framework/104-solid-js.md",
   "pick-a-framework:react-js:recoil": "/roadmaps/100-frontend/content/111-pick-a-framework/100-react-js/102-recoil.md",
   "pick-a-framework:react-js:redux": "/roadmaps/100-frontend/content/111-pick-a-framework/100-react-js/100-redux.md",
   "pick-a-framework:react-js:mobx": "/roadmaps/100-frontend/content/111-pick-a-framework/100-react-js/101-mobx.md",
@@ -81,14 +84,17 @@
   "css-frameworks": "/roadmaps/100-frontend/content/114-css-frameworks/readme.md",
   "css-frameworks:js-first": "/roadmaps/100-frontend/content/114-css-frameworks/114-js-first/readme.md",
   "css-frameworks:js-first:chakra-ui": "/roadmaps/100-frontend/content/114-css-frameworks/114-js-first/101-chakra-ui.md",
+  "css-frameworks:js-first:mantine": "/roadmaps/100-frontend/content/114-css-frameworks/114-js-first/104-mantine.md",
   "css-frameworks:js-first:material-ui": "/roadmaps/100-frontend/content/114-css-frameworks/114-js-first/102-material-ui.md",
   "css-frameworks:js-first:radix-ui": "/roadmaps/100-frontend/content/114-css-frameworks/114-js-first/103-radix-ui.md",
+  "css-frameworks:js-first:daisy-ui": "/roadmaps/100-frontend/content/114-css-frameworks/114-js-first/105-daisy-ui.md",
   "css-frameworks:js-first:tailwind-css": "/roadmaps/100-frontend/content/114-css-frameworks/114-js-first/100-tailwind-css.md",
   "css-frameworks:css-first": "/roadmaps/100-frontend/content/114-css-frameworks/114-css-first/readme.md",
   "css-frameworks:css-first:bootstrap": "/roadmaps/100-frontend/content/114-css-frameworks/114-css-first/100-bootstrap.md",
   "css-frameworks:css-first:bulma": "/roadmaps/100-frontend/content/114-css-frameworks/114-css-first/101-bulma.md",
   "testing-your-apps": "/roadmaps/100-frontend/content/115-testing-your-apps/readme.md",
   "testing-your-apps:jest": "/roadmaps/100-frontend/content/115-testing-your-apps/100-jest.md",
+  "testing-your-apps:playwright": "/roadmaps/100-frontend/content/115-testing-your-apps/104-playwright.md",
   "testing-your-apps:react-testing-library": "/roadmaps/100-frontend/content/115-testing-your-apps/101-react-testing-library.md",
   "testing-your-apps:cypress": "/roadmaps/100-frontend/content/115-testing-your-apps/102-cypress.md",
   "testing-your-apps:enzyme": "/roadmaps/100-frontend/content/115-testing-your-apps/103-enzyme.md",
@@ -106,6 +112,7 @@
   "server-side-rendering": "/roadmaps/100-frontend/content/118-server-side-rendering/readme.md",
   "server-side-rendering:react-js": "/roadmaps/100-frontend/content/118-server-side-rendering/100-react-js/readme.md",
   "server-side-rendering:react-js:next-js": "/roadmaps/100-frontend/content/118-server-side-rendering/100-react-js/100-next-js.md",
+  "server-side-rendering:react-js:remix": "/roadmaps/100-frontend/content/118-server-side-rendering/100-react-js/101-remix.md",
   "server-side-rendering:react-js:after-js": "/roadmaps/100-frontend/content/118-server-side-rendering/100-react-js/101-after-js.md",
   "server-side-rendering:angular": "/roadmaps/100-frontend/content/118-server-side-rendering/101-angular/readme.md",
   "server-side-rendering:angular:universal": "/roadmaps/100-frontend/content/118-server-side-rendering/101-angular/100-universal.md",
@@ -116,6 +123,7 @@
   "graphql:relay-modern": "/roadmaps/100-frontend/content/119-graphql/101-relay-modern.md",
   "static-site-generators": "/roadmaps/100-frontend/content/120-static-site-generators/readme.md",
   "static-site-generators:next-js": "/roadmaps/100-frontend/content/120-static-site-generators/100-next-js.md",
+  "static-site-generators:remix": "/roadmaps/100-frontend/content/120-static-site-generators/108-remix.md",
   "static-site-generators:gatsbyjs": "/roadmaps/100-frontend/content/120-static-site-generators/101-gatsbyjs.md",
   "static-site-generators:nuxt-js": "/roadmaps/100-frontend/content/120-static-site-generators/102-nuxt-js.md",
   "static-site-generators:vuepress": "/roadmaps/100-frontend/content/120-static-site-generators/103-vuepress.md",

content/roadmaps/100-frontend/content/100-internet/100-how-does-the-internet-work.md

@@ -6,6 +6,6 @@ The Internet is a global network of computers connected to each other which comm
 <BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.vox.com/2014/6/16/18076282/the-internet'>The Internet Explained</BadgeLink>
 <BadgeLink colorScheme='yellow' badgeText='Read' href='http://web.stanford.edu/class/msande91si/www-spr04/readings/week1/InternetWhitepaper.htm'>How Does the Internet Work?</BadgeLink>
 <BadgeLink colorScheme='yellow' badgeText='Read' href='https://developer.mozilla.org/en-US/docs/Learn/Common_questions/How_does_the_Internet_work'>How Does the Internet Work? MDN Docs</BadgeLink>
-<BadgeLink badgeText='Watch' href='/guides/what-is-internet'>Introduction to Internet</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='/guides/what-is-internet'>Introduction to Internet</BadgeLink>
 <BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=TNQsmPf24go'>How does the Internet work?</BadgeLink>
 <BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=7_LPdttKXPc'>How the Internet Works in 5 Minutes</BadgeLink>

content/roadmaps/100-frontend/content/100-internet/101-what-is-http.md

@@ -1,6 +1,6 @@
 # What is HTTP?
 
-HTTP is the `TCP/IP` based application layer communication protocol which standardizes how the client and server communicate with each other. It defines how the content is requested and transmitted across the internet.
+HTTP is the `TCP/IP` based application layer communication protocol which standardizes how the client and server communicate with each other. HTTP follows a classical "Client-Server model" with a client opening a connection request, then waiting until it receives a response. HTTP is a stateless protocol, that means that the server does not keep any data (state) between two requests.
 
 <ResourceGroupTitle>Free Content</ResourceGroupTitle>
 <BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.cloudflare.com/en-gb/learning/ddos/glossary/hypertext-transfer-protocol-http/'>What is HTTP?</BadgeLink>

content/roadmaps/100-frontend/content/100-internet/103-dns-and-how-it-works.md

@@ -4,8 +4,9 @@ The Domain Name System (DNS) is the phonebook of the Internet. Humans access inf
 
 <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 colorScheme='yellow' badgeText='Read' href='https://messwithdns.net/'>Mess with DNS - DNS Playground</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://howdns.works/'>How DNS works (comic)</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>
 <BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=e48AyJOA9W8'>When to add glue records to DNS settings</BadgeLink>
-<BadgeLink colorScheme='green' badgeText='Visit' href='https://messwithdns.net/'>Mess with DNS - DNS Playground</BadgeLink>
 <BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=YV5tkQYcvfg'>DNS Records for Newbies - How To Manage Website Records</BadgeLink>

content/roadmaps/100-frontend/content/100-internet/readme.md

@@ -5,6 +5,8 @@ The Internet is a global network of computers connected to each other which comm
 <ResourceGroupTitle>Free Content</ResourceGroupTitle>
 <BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.vox.com/2014/6/16/18076282/the-internet'>The Internet Explained</BadgeLink>
 <BadgeLink colorScheme='yellow' badgeText='Read' href='http://web.stanford.edu/class/msande91si/www-spr04/readings/week1/InternetWhitepaper.htm'>How Does the Internet Work?</BadgeLink>
-<BadgeLink badgeText='Watch' href='/guides/what-is-internet'>Introduction to Internet</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='/guides/what-is-internet'>Introduction to Internet</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://internetfundamentals.com'>Learn How the Web Works</BadgeLink>
 <BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=x3c1ih2NJEg'>How does the Internet work?</BadgeLink>
 <BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=7_LPdttKXPc'>How the Internet Works in 5 Minutes</BadgeLink>
+

content/roadmaps/100-frontend/content/101-html/100-learn-the-basics.md

@@ -3,6 +3,7 @@
 HTML stands for HyperText Markup Language. It is used on the frontend and gives the structure to the webpage which you can style using CSS and make interactive using JavaScript.
 
 <ResourceGroupTitle>Free Content</ResourceGroupTitle>
-<BadgeLink badgeText='Read' href='https://www.w3schools.com/html/html_intro.asp'>W3Schools: Learn HTML</BadgeLink>
-<BadgeLink badgeText='Course' colorScheme='green' href='https://www.youtube.com/watch?v=pQN-pnXPaVg'>HTML Full Course - Build a Website Tutorial</BadgeLink>
-<BadgeLink badgeText='Course' colorScheme='green' href='https://www.youtube.com/watch?v=qz0aGYrrlhU'>HTML Tutorial for Beginners: HTML Crash Course</BadgeLink>
+<BadgeLink badgeText='Read' colorScheme='yellow' href='https://www.w3schools.com/html/html_intro.asp'>W3Schools: Learn HTML</BadgeLink>
+<BadgeLink badgeText='Read' colorScheme='yellow' href='https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started'>MDN Docs: Getting Started with HTML </BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=pQN-pnXPaVg'>HTML Full Course - Build a Website Tutorial</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=qz0aGYrrlhU'>HTML Tutorial for Beginners: HTML Crash Course</BadgeLink>

content/roadmaps/100-frontend/content/101-html/101-writing-semantic-html.md

@@ -3,7 +3,6 @@
 Semantic element clearly describes its meaning to both the browser and the developer.
 
 <ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink badgeText='Read' colorScheme='yellow' href='https://developer.mozilla.org/en-US/docs/Glossary/Semantics'>Semantics - MDN Web Docs Glossary: Definitions of Web-related terms | MDN</BadgeLink>
 <BadgeLink badgeText='Read' colorScheme='yellow' href='https://www.w3schools.com/html/html5_semantic_elements.asp'>W3Schools: Semantic HTML</BadgeLink>
 <BadgeLink badgeText='Read' colorScheme='yellow' href='https://hackernoon.com/how-to-write-semantic-html-dkq3ulo'>How To Write Semantic HTML</BadgeLink>
-
-

content/roadmaps/100-frontend/content/101-html/104-accessibility.md

@@ -2,7 +2,9 @@
 Web accessibility means that websites, tools, and technologies are designed and developed in such a way that people with disabilities can use them easily.
 
 <ResourceGroupTitle>Free Content</ResourceGroupTitle>
-<BadgeLink badgeText='Watch' href='https://youtube.com/playlist?list=PLNYkxOF6rcICWx0C9LVWWVqvHlYJyqw7g'>Complete Playlist on Accessibility</BadgeLink>
+<BadgeLink badgeText='Read' colorScheme='yellow' href='https://www.w3.org/WAI/tips/developing/'>Developing for Web Accessibility by W3C WAI
+</BadgeLink>
 <BadgeLink badgeText='Read' colorScheme='yellow' href='https://www.w3schools.com/accessibility/index.php'>Accessibility Tutorial
 </BadgeLink>
 <BadgeLink badgeText='Read' colorScheme='yellow' href='https://www.smashingmagazine.com/2021/03/complete-guide-accessible-front-end-components/'>A Complete Guide To Accessible Front-End Components</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://youtube.com/playlist?list=PLNYkxOF6rcICWx0C9LVWWVqvHlYJyqw7g'>Complete Playlist on Accessibility</BadgeLink>

content/roadmaps/100-frontend/content/101-html/readme.md

@@ -3,8 +3,10 @@
 HTML stands for HyperText Markup Language. It is used on the frontend and gives the structure to the webpage which you can style using CSS and make interactive using JavaScript.
 
 <ResourceGroupTitle>Free Content</ResourceGroupTitle>
-<BadgeLink badgeText='Read' href='https://www.w3schools.com/html/html_intro.asp'>W3Schools: Learn HTML</BadgeLink>
-<BadgeLink badgeText='Course' colorScheme='green' href='https://www.youtube.com/watch?v=pQN-pnXPaVg'>HTML Full Course - Build a Website Tutorial</BadgeLink>
-<BadgeLink badgeText='Course' colorScheme='green' href='https://www.youtube.com/watch?v=qz0aGYrrlhU'>HTML Tutorial for Beginners: HTML Crash Course</BadgeLink>
+<BadgeLink badgeText='Read' colorScheme='yellow' href='https://www.w3schools.com/html/html_intro.asp'>W3Schools: Learn HTML</BadgeLink>
+<BadgeLink badgeText='Read' colorScheme='yellow' href='https://htmlreference.io/'>htmlreference.io: All HTML elements at a glance</BadgeLink>
+<BadgeLink badgeText='Course' colorScheme='green' href='https://www.internetingishard.com/html-and-css/'>Web Development Basics</BadgeLink>
 <BadgeLink badgeText='Course' colorScheme='green' href='https://www.codecademy.com/learn/learn-html'>Codecademy - Learn HTML</BadgeLink>
 <BadgeLink badgeText='Course' colorScheme='green' href='https://github.com/denysdovhan/learnyouhtml'>Interactive HTML Course</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=pQN-pnXPaVg'>HTML Full Course - Build a Website Tutorial</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=qz0aGYrrlhU'>HTML Tutorial for Beginners: HTML Crash Course</BadgeLink>

content/roadmaps/100-frontend/content/102-css/100-learn-the-basics.md

@@ -6,6 +6,6 @@ CSS or Cascading Style Sheets is the language used to style the frontend of any
 <BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.w3schools.com/css/'>W3Schools — Learn CSS</BadgeLink>
 <BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.freecodecamp.org/learn/responsive-web-design/'>freeCodeCamp — Responsive Web Design</BadgeLink>
 <BadgeLink colorScheme='yellow' badgeText='Read' href='https://learn.shayhowe.com/html-css/building-your-first-web-page/'>Learn to Code HTML & CSS</BadgeLink>
-<BadgeLink colorScheme='green' badgeText='Course' href='https://www.youtube.com/watch?v=yfoY53QXEnI'>CSS Crash Course For Absolute Beginners</BadgeLink>
-<BadgeLink colorScheme='green' badgeText='Course' href='https://www.youtube.com/watch?v=D-h8L5hgW-w'>HTML and CSS Tutorial</BadgeLink>
-<BadgeLink colorScheme='green' badgeText='Course' href='https://www.youtube.com/watch?v=FqmB-Zj2-PA'>CSS Masterclass - Tutorial & Course for Beginners</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=yfoY53QXEnI'>CSS Crash Course For Absolute Beginners</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=D-h8L5hgW-w'>HTML and CSS Tutorial</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=FqmB-Zj2-PA'>CSS Masterclass - Tutorial & Course for Beginners</BadgeLink>

content/roadmaps/100-frontend/content/102-css/readme.md

@@ -4,12 +4,14 @@ CSS or Cascading Style Sheets is the language used to style the frontend of any
 
 <ResourceGroupTitle>Free Content</ResourceGroupTitle>
 <BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.w3schools.com/css/'>W3Schools — Learn CSS</BadgeLink>
+<BadgeLink badgeText='Read' colorScheme='yellow' href='https://cssreference.io/'>cssreference.io: All CSS properties at a glance</BadgeLink>
 <BadgeLink colorScheme='yellow' badgeText='Read' href='https://web.dev/learn/css/'>Web.dev by Google — Learn CSS</BadgeLink>
 <BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.freecodecamp.org/learn/responsive-web-design/'>freeCodeCamp — Responsive Web Design</BadgeLink>
 <BadgeLink colorScheme='yellow' badgeText='Read' href='https://learn.shayhowe.com/html-css/building-your-first-web-page/'>Learn to Code HTML & CSS</BadgeLink>
-<BadgeLink colorScheme='green' badgeText='Course' href='https://www.youtube.com/watch?v=yfoY53QXEnI'>CSS Crash Course For Absolute Beginners</BadgeLink>
-<BadgeLink colorScheme='green' badgeText='Course' href='https://www.youtube.com/watch?v=D-h8L5hgW-w'>HTML and CSS Tutorial</BadgeLink>
-<BadgeLink colorScheme='green' badgeText='Course' href='https://www.youtube.com/watch?v=FqmB-Zj2-PA'>CSS Masterclass - Tutorial & Course for Beginners</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.joshwcomeau.com/'>Joshw Comeau's CSS Hack Blog Posts</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=yfoY53QXEnI'>CSS Crash Course For Absolute Beginners</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=D-h8L5hgW-w'>HTML and CSS Tutorial</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=FqmB-Zj2-PA'>CSS Masterclass - Tutorial & Course for Beginners</BadgeLink>
 <BadgeLink colorScheme='green' badgeText='Course' href='https://flexbox.io/'>What The Flexbox!</BadgeLink>
 <BadgeLink colorScheme='green' badgeText='Course' href='https://www.codecademy.com/learn/learn-css'>Learn CSS | Codecademy</BadgeLink>
 <BadgeLink colorScheme='green' badgeText='Course' href='https://www.codecademy.com/learn/learn-intermediate-css'>Learn Intermediate CSS | Codecademy</BadgeLink>

content/roadmaps/100-frontend/content/103-javascript/101-learn-dom-manipulation.md

@@ -1,12 +1,15 @@
 # DOM Manipulation
 
-The Document Object Model (DOM) connects web pages to scripts or programming languages by representing the structure of a document—such as the HTML representing a web page—in memory.
+The Document Object Model (DOM) is a programming interface built for HTML and XML documents. It represents the page that allows programs and scripts to dynamically update the document structure, content, and style. With DOM, we can easily access and manipulate tags, IDs, classes, attributes, etc.  
 
 <ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink badgeText='Read' colorScheme="yellow" href='https://javascript.info/dom-nodes'>DOM Treee</BadgeLink>
+<BadgeLink badgeText='Read' colorScheme="yellow" href='https://www.geeksforgeeks.org/dom-document-object-model/'>GeeksForGeeks - DOM (Document Object Model)</BadgeLink>
 <BadgeLink badgeText='Read' colorScheme="yellow" href='https://www.freecodecamp.org/news/what-is-the-dom-document-object-model-meaning-in-javascript/'>What is the DOM?</BadgeLink>
 <BadgeLink badgeText='Read' colorScheme="yellow" href='https://eloquentjavascript.net/14_dom.html'>Eloquent JavaScript, 3rd Edition: The Document Object Model</BadgeLink>
 <BadgeLink badgeText='Read' colorScheme="yellow" href='https://www.w3schools.com/js/js_htmldom.asp'>JavaScript HTML DOM</BadgeLink>
 <BadgeLink badgeText='Read' colorScheme="yellow" href='https://www.javascripttutorial.net/javascript-dom/'>JavaScript DOM</BadgeLink>
+<BadgeLink badgeText='Read' colorScheme="yellow" href='https://www.codeguage.com/courses/js/html-dom-introduction'>Learn the HTML DOM with Exercises - CodeGuage</BadgeLink>
 <BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=7Tok22qxPzQ'>What is DOM, Shadow DOM and Virtual DOM?</BadgeLink>
 <BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=0ik6X4DJKCc'>JavaScript DOM Crash Course</BadgeLink>
 

content/roadmaps/100-frontend/content/103-javascript/103-es6-and-modular-javascript.md

@@ -4,6 +4,7 @@ ECMAScript 2015 or ES2015 is a significant update to the JavaScript programming
 
 <ResourceGroupTitle>Free Content</ResourceGroupTitle>
 <BadgeLink badgeText='Read' colorScheme="yellow" href='https://www.javascripttutorial.net/es6/'>ES6 Tutorial</BadgeLink>
+<BadgeLink badgeText='Read' colorScheme="yellow" href='https://www.w3schools.com/js/js_es6.asp'>W3Schools: Javascript ES6</BadgeLink>
 <BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=NCwa_xi0Uuc'>Learn Modern JavaScript in 1 Hour</BadgeLink>
 <BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=nZ1DMMsyVyI'>JavaScript ES6, ES7, ES8</BadgeLink>
-<BadgeLink badgeText='Course' colorScheme='green' href='https://www.youtube.com/watch?v=3PHXvlpOkf4'>Build 15 JavaScript Projects - Vanilla JavaScript</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=3PHXvlpOkf4'>Build 15 JavaScript Projects - Vanilla JavaScript</BadgeLink>

content/roadmaps/100-frontend/content/103-javascript/104-concepts.md

@@ -9,5 +9,5 @@ Learn and understand the concepts such as Hoisting, Event Bubbling, Scope, Proto
 <BadgeLink badgeText='Read' colorScheme="yellow" href='https://www.freecodecamp.org/news/var-let-and-const-whats-the-difference/'>Var, Let and Const — What's the difference?</BadgeLink>
 <BadgeLink badgeText='Read' colorScheme="yellow" href='https://developer.mozilla.org/en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain'>Inheritance and Prototype Chain</BadgeLink>
 <BadgeLink badgeText='Read' colorScheme="yellow" href='https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode'>JavaScript Strict Mode</BadgeLink>
-<BadgeLink badgeText='Read' href='https://dev.to/lydiahallie/javascript-visualized-event-loop-3dif'>JavaScript Visualized (7 Part Series)</BadgeLink>
+<BadgeLink badgeText='Read' colorScheme="yellow" href='https://dev.to/lydiahallie/javascript-visualized-event-loop-3dif'>JavaScript Visualized (7 Part Series)</BadgeLink>
 <BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=7Tok22qxPzQ'>DOM vs Shadow DOM vs Virtual DOM</BadgeLink>

content/roadmaps/100-frontend/content/103-javascript/readme.md

@@ -1,3 +1,9 @@
+<DedicatedRoadmap
+  href='/javascript'
+  title='JavaScript Roadmap'
+  description='Click to check the detailed JavaScript Roadmap.'
+/>
+
 # JavaScript
 
 JavaScript allows you to add interactivity to your pages. Common examples that you may have seen on the websites are sliders, click interactions, popups and so on.
@@ -5,6 +11,9 @@ JavaScript allows you to add interactivity to your pages. Common examples that y
 <ResourceGroupTitle>Free Content</ResourceGroupTitle>
 <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://www.javascripttutorial.net/'>Learn JavaScript: Covered many topics</BadgeLink>
+<BadgeLink badgeText='Read' colorScheme="yellow" href='https://eloquentjavascript.net/'>Eloquent JavaScript textbook</BadgeLink>
+<BadgeLink badgeText='Read' colorScheme="yellow" href='https://github.com/getify/You-Dont-Know-JS'>You Don't Know JS Yet (book series) </BadgeLink>
 <BadgeLink badgeText='Watch' href='https://youtu.be/hdI2bqOjy3c?t=2'>JavaScript Crash Course for Beginners</BadgeLink>
 <BadgeLink badgeText='Watch' href='https://youtu.be/P7t13SGytRk?t=22'>Build a Netflix Landing Page Clone with HTML, CSS & JS</BadgeLink>
 <BadgeLink badgeText='Course' colorScheme='green' href='https://github.com/workshopper/javascripting'>Learn the basics of JavaScript</BadgeLink>

content/roadmaps/100-frontend/content/105-repo-hosting-services/100-github.md

@@ -4,8 +4,8 @@
 
 <ResourceGroupTitle>Free Content</ResourceGroupTitle>
 
-<BadgeLink badgeText='Read' href='https://docs.github.com/en/get-started/quickstart/hello-world'>GitHub: Quickstart</BadgeLink>
-<BadgeLink badgeText='Watch' colorScheme='yellow' href='https://www.youtube.com/watch?v=w3jLJU7DT5E'>What is GitHub?</BadgeLink>
-<BadgeLink badgeText='Watch' colorScheme='yellow' href='https://www.youtube.com/watch?v=wpISo9TNjfU'>Git vs. GitHub: What's the difference?</BadgeLink>
-<BadgeLink badgeText='Watch' colorScheme='yellow' href='https://www.youtube.com/watch?v=RGOj5yH7evk'>Git and GitHub for Beginners</BadgeLink>
-<BadgeLink badgeText='Watch' colorScheme='yellow' href='https://www.youtube.com/watch?v=eulnSXkhE7I'>Git and GitHub - CS50 Beyond 2019</BadgeLink>
+<BadgeLink badgeText='Read' colorScheme='yellow' href='https://docs.github.com/en/get-started/quickstart/hello-world'>GitHub: Quickstart</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=w3jLJU7DT5E'>What is GitHub?</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=wpISo9TNjfU'>Git vs. GitHub: What's the difference?</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=RGOj5yH7evk'>Git and GitHub for Beginners</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=eulnSXkhE7I'>Git and GitHub - CS50 Beyond 2019</BadgeLink>

content/roadmaps/100-frontend/content/105-repo-hosting-services/101-gitlab.md

@@ -4,5 +4,5 @@
 
 <ResourceGroupTitle>Free Content</ResourceGroupTitle>
 
-<BadgeLink badgeText='Visit' colorScheme="green" href='https://gitlab.com/'>GitLab Website</BadgeLink>
 <BadgeLink badgeText='Read' href='https://docs.gitlab.com/'>GitLab Documentation</BadgeLink>
+<BadgeLink badgeText='Course' colorScheme="green" href='https://gitlab.com/'>GitLab Website</BadgeLink>

content/roadmaps/100-frontend/content/105-repo-hosting-services/102-bitbucket.md

@@ -4,5 +4,5 @@
 
 <ResourceGroupTitle>Free Content</ResourceGroupTitle>
 
-<BadgeLink badgeText='Visit' colorScheme="green" href='https://bitbucket.com/'>BitBucket Website</BadgeLink>
-<BadgeLink badgeText='Read' href='https://bitbucket.org/product/guides'>How to use BitBucket?</BadgeLink>
+<BadgeLink badgeText='Read' colorScheme="yellow" href='https://bitbucket.org/product/guides'>How to use BitBucket?</BadgeLink>
+<BadgeLink badgeText='Course' colorScheme="green" href='https://bitbucket.com/'>BitBucket Website</BadgeLink>

content/roadmaps/100-frontend/content/105-repo-hosting-services/readme.md

@@ -3,6 +3,6 @@
 There are different repository hosting services with the most famous one being GitHub, GitLab and BitBucket. I would recommend creating an account on GitHub because that is where most of the OpenSource work is done and most of the developers are.
 
 <ResourceGroupTitle>Services Links</ResourceGroupTitle>
-<BadgeLink badgeText='Visit' colorScheme="green" href='https://github.com'>GitHub: Where the world builds software</BadgeLink>
-<BadgeLink badgeText='Visit' href='https://gitlab.com'>GitLab: Iterate faster, innovate together</BadgeLink>
-<BadgeLink badgeText='Visit' href='https://bitbucket.com'>BitBucket: The Git solution for professional teams</BadgeLink>
+<BadgeLink badgeText='Read' colorScheme="yellow" href='https://github.com'>GitHub: Where the world builds software</BadgeLink>
+<BadgeLink badgeText='Read' colorScheme="yellow" href='https://gitlab.com'>GitLab: Iterate faster, innovate together</BadgeLink>
+<BadgeLink badgeText='Read' colorScheme="yellow" href='https://bitbucket.com'>BitBucket: The Git solution for professional teams</BadgeLink>

content/roadmaps/100-frontend/content/106-web-security-knowledge/100-https.md

@@ -6,7 +6,6 @@ HTTPS is a secure way to send data between a web server and a browser.
 <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>
+<BadgeLink badgeText='Read' colorScheme="yellow" href='https://howhttps.works/'>How HTTPS works (comic)</BadgeLink>
 <BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=hExRDVZHhig'>SSL, TLS, HTTP, HTTPS Explained</BadgeLink>
 <BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=GoXgl9r0Kjk'>HTTPS — Stories from the field</BadgeLink>
-
-

content/roadmaps/100-frontend/content/107-package-managers/100-npm.md

@@ -5,6 +5,6 @@ npm is a package manager for the JavaScript programming language maintained by n
 <ResourceGroupTitle>Free Content</ResourceGroupTitle>
 <BadgeLink badgeText='Read' colorScheme="yellow" href='https://peterxjang.com/blog/modern-javascript-explained-for-dinosaurs.html'>Modern JavaScript for Dinosaurs</BadgeLink>
 <BadgeLink badgeText='Read' colorScheme="yellow" href='https://nodesource.com/blog/an-absolute-beginners-guide-to-using-npm/'>An Absolute Beginner's Guide to Using npm</BadgeLink>
+<BadgeLink badgeText='Course' colorScheme='green' href='https://github.com/workshopper/how-to-npm'>How to NPM</BadgeLink>
 <BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=2V1UUhBJ62Y'>NPM tutorial for Beginners</BadgeLink>
 <BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=jHDhaSSKmB0'>NPM Crash Course</BadgeLink>
-<BadgeLink badgeText='Course' colorScheme='green' href='https://github.com/workshopper/how-to-npm'>How to NPM</BadgeLink>

content/roadmaps/100-frontend/content/107-package-managers/102-pnpm.md

@@ -0,0 +1,7 @@
+# pnpm
+
+PNPM is an alternative package manager for Node. js which stands for “Performant NPM”. The main purpose of PNPM is to hold all the packages at a global (centralized) store and use them if needed by other projects too by creating hard links to it.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://pnpm.io'>Official Website</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://blog.bitsrc.io/pnpm-javascript-package-manager-4b5abd59dc9'>Meet PNPM: The Faster, More Performant NPM</BadgeLink>

content/roadmaps/100-frontend/content/107-package-managers/readme.md

@@ -5,9 +5,9 @@ Package managers allow you to manage the dependencies (external code written by
 <ResourceGroupTitle>Free Content</ResourceGroupTitle>
 <BadgeLink badgeText='Read' colorScheme="yellow" href='https://peterxjang.com/blog/modern-javascript-explained-for-dinosaurs.html'>Modern JavaScript for Dinosaurs</BadgeLink>
 <BadgeLink badgeText='Read' colorScheme="yellow" href='https://nodesource.com/blog/an-absolute-beginners-guide-to-using-npm/'>An Absolute Beginner's Guide to Using npm</BadgeLink>
+<BadgeLink badgeText='Read' colorScheme="yellow" href='https://yarnpkg.com/en/docs/getting-started'>Yarn - Getting Started</BadgeLink>
 <BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=2V1UUhBJ62Y'>NPM tutorial for Beginners</BadgeLink>
 <BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=jHDhaSSKmB0'>NPM Crash Course</BadgeLink>
-<BadgeLink badgeText='Read' colorScheme="yellow" href='https://yarnpkg.com/en/docs/getting-started'>Yarn - Getting Started</BadgeLink>
 <BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=g9_6KmiBISk'>Yarn Crash Course</BadgeLink>
 
 

content/roadmaps/100-frontend/content/109-css-preprocessors/100-sass.md

@@ -4,6 +4,6 @@ Sass is a preprocessor scripting language that is interpreted or compiled into C
 
 <ResourceGroupTitle>Free Content</ResourceGroupTitle>
 <BadgeLink colorScheme='blue' badgeText='Official Website' href='https://sass-lang.com/'>Sass Website</BadgeLink>
-<BadgeLink colorScheme='blue' badgeText='Documentation' href='https://sass-lang.com/documentation'>Official Documentation</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Official Documentation' href='https://sass-lang.com/documentation'>Official Documentation</BadgeLink>
 <BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=_a5j7KoflTs'> Sass Tutorial for Beginners</BadgeLink>
 <BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=jfMHA8SqUL4'> Sass, BEM, & Responsive Design</BadgeLink>

content/roadmaps/100-frontend/content/109-css-preprocessors/101-postcss.md

@@ -3,4 +3,4 @@
 PostCSS is a tool for transforming styles with JS plugins. These plugins can lint your CSS, support variables and mixins, transpile future CSS syntax, inline images, and more.
 
 <ResourceGroupTitle>Free Resources</ResourceGroupTitle>
-<BadgeLink colorScheme='blue' badgeText='Website' href='https://postcss.org/'>Official Website</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://postcss.org/'>Official Website</BadgeLink>

content/roadmaps/100-frontend/content/109-css-preprocessors/102-less.md

@@ -3,6 +3,6 @@
 Less extends CSS with dynamic behavior such as variables, mixins, operations and functions. Less runs on both the server-side (with Node.js and Rhino) or client-side (modern browsers only).
 
 <ResourceGroupTitle>Free Content</ResourceGroupTitle>
-<BadgeLink colorScheme='blue' badgeText='Read' href='https://lesscss.org/'>Official Website</BadgeLink>
-<BadgeLink colorScheme='blue' badgeText='Read' href='https://lesscss.org/usage/'>Official Documentation</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://lesscss.org/'>Official Website</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Official Documentation' href='https://lesscss.org/usage/'>Official Documentation</BadgeLink>
 <BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=YD91G8DdUsw'> Less CSS Pre-Processor Tutorial</BadgeLink>

content/roadmaps/100-frontend/content/110-build-tools/100-task-runners/readme.md

@@ -1 +1,7 @@
-# Task runners
+# Task Runners
+
+Task Runner are tools to simplify certain tedious tasks of development, like automating sass/scss compilation, bundling assets, linting source code, and hot reloading local server.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink badgeText='Read' colorScheme='yellow' href='https://docs.npmjs.com/cli/v8/using-npm/scripts'>npm script</BadgeLink>
+<BadgeLink badgeText='Read' colorScheme="yellow" href='https://classic.yarnpkg.com/lang/en/docs/cli/run/#toc-yarn-run-script'>yarn script</BadgeLink>

content/roadmaps/100-frontend/content/110-build-tools/101-module-bundlers/102-rollup.md

@@ -4,5 +4,5 @@ Rollup is a module bundler for JavaScript which compiles small pieces of code in
 
 <ResourceGroupTitle>Free Content</ResourceGroupTitle>
 
-<BadgeLink colorScheme='blue' badgeText='Read' href='https://rollupjs.org/'>Official Website and Docs</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://rollupjs.org/'>Official Website and Docs</BadgeLink>
 <BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=ICYLOZuFMz8'>How to Set Up JavaScript Bundling Using Rollup</BadgeLink>

content/roadmaps/100-frontend/content/110-build-tools/101-module-bundlers/104-vite.md

@@ -4,5 +4,5 @@ Vite is a build tool that aims to provide a faster and leaner development experi
 
 <ResourceGroupTitle>Free Content</ResourceGroupTitle>
 <BadgeLink colorScheme='blue' badgeText='Official Website' href='https://vitejs.dev'>Vite Website</BadgeLink>
-<BadgeLink colorScheme='blue' badgeText='Documentation' href='https://vitejs.dev/guide'>Vite Documentation</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Official Documentation' href='https://vitejs.dev/guide'>Vite Documentation</BadgeLink>
 <BadgeLink colorScheme='green' badgeText='Course' href='https://youtu.be/LQQ3CR2JTX8'>Vite Crash Course</BadgeLink>

content/roadmaps/100-frontend/content/110-build-tools/101-module-bundlers/readme.md

@@ -6,6 +6,6 @@ It usually starts with an entry file, and from there it bundles up all of the co
 
 <ResourceGroupTitle>Free Content</ResourceGroupTitle>
 
-<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=5IG4UmULyoA'>Module Bundlers Explained</BadgeLink>
 <BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.freecodecamp.org/news/lets-learn-how-module-bundlers-work-and-then-write-one-ourselves-b2e3fe6c88ae/'>Let’s learn how module bundlers work</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=5IG4UmULyoA'>Module Bundlers Explained</BadgeLink>
 

content/roadmaps/100-frontend/content/110-build-tools/102-linters-formatters/100-prettier.md

@@ -1,6 +1,7 @@
 # Prettier
 
-Prettier is an opinionated code formatter with support for JavaScript, HTML, CSS, and more.
+Prettier is an opinionated code formatter with support for JavaScript, HTML, CSS, YAML, Markdown, GraphQL Schemas. By far the biggest reason for adopting Prettier is to stop all the on-going debates over styles.
 
 <ResourceGroupTitle>Free Content</ResourceGroupTitle>
-<BadgeLink colorScheme='blue' badgeText='Website' href='https://prettier.io'>Prettier Website</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://prettier.io'>Prettier Website</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://prettier.io/docs/en/why-prettier.html'>Why Prettier</BadgeLink>

content/roadmaps/100-frontend/content/110-build-tools/102-linters-formatters/101-eslint.md

@@ -5,4 +5,4 @@ With ESLint you can impose the coding standard using a certain set of standalone
 <ResourceGroupTitle>Free Content</ResourceGroupTitle>
 <BadgeLink badgeText='Official Website' colorScheme="blue" href='https://eslint.org/'>ESLint Official Website</BadgeLink>
 <BadgeLink badgeText='Read' colorScheme="yellow" href='https://dev.to/shivambmgupta/eslint-what-why-when-how-5f1d'>Introduction to ESLint</BadgeLink>
-<BadgeLink badgeText='Watch' colorScheme="red" href='https://www.youtube.com/watch?v=qhuFviJn-es'>ESLint Quickstart - find errors automatically</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=qhuFviJn-es'>ESLint Quickstart - find errors automatically</BadgeLink>

content/roadmaps/100-frontend/content/110-build-tools/102-linters-formatters/102-standardjs.md

@@ -4,6 +4,6 @@ Standardjs is a Style guide, with linter & automatic code fixer. It is a way to
 Standard JS is a tool in the Code Review category of a tech stack.
 
 <ResourceGroupTitle>Free Content</ResourceGroupTitle>
-<BadgeLink badgeText='Read' colorScheme="blue" href='https://standardjs.com/'>Official Website</BadgeLink>
+<BadgeLink badgeText='Official Website' colorScheme="blue" href='https://standardjs.com/'>Official Website</BadgeLink>
 <BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=bqho-uAnNJk'>Standard JS Tutorial with React, Prettier
 </BadgeLink>

content/roadmaps/100-frontend/content/110-build-tools/102-linters-formatters/readme.md

@@ -2,4 +2,4 @@
 
 A linter is a tool used to analyze code and discover bugs, syntax errors, stylistic inconsistencies, and suspicious constructs. Popular linters for JavaScript include ESLint, JSLint, and JSHint.
 
-<BadgeLink colorScheme='blue' badgeText='Read' href='https://www.testim.io/blog/what-is-a-linter-heres-a-definition-and-quick-start-guide/'>What Is a Linter?</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.testim.io/blog/what-is-a-linter-heres-a-definition-and-quick-start-guide/'>What Is a Linter?</BadgeLink>

content/roadmaps/100-frontend/content/110-build-tools/readme.md

@@ -2,4 +2,9 @@
 
 Task runners automatically execute commands and carry out processes behind the scenes. This helps automate your workflow by performing mundane, repetitive tasks that you would otherwise waste an egregious amount of time repeating yourself.
 
-Common usages of task runners include numerous development tasks such as: spinning up development servers, compiling code (ex. SCSS to CSS), running linters, serving files up from a local port on your computer, and many more! 
+Common usages of task runners include numerous development tasks such as: spinning up development servers, compiling code (ex. SCSS to CSS), running linters, serving files up from a local port on your computer, and many more!
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink badgeText='Read' colorScheme="yellow" href='https://webpack.js.org/'>webpack is a static module bundler for modern JavaScript applications</BadgeLink>
+<BadgeLink badgeText='Read' colorScheme="yellow" href='https://vitejs.dev'>Vite Next Generation Frontend Tooling</BadgeLink>
+<BadgeLink badgeText='Read' colorScheme="yellow" href='https://parceljs.org/'>Parcel is a zero configuration build tool for the web</BadgeLink>

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

@@ -1,11 +1,18 @@
+<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.
 
 <ResourceGroupTitle>Free Content</ResourceGroupTitle>
-<BadgeLink colorScheme='blue' badgeText='Framework Website' href='https://reactjs.org/'>React Website</BadgeLink>
-<BadgeLink colorScheme='blue' badgeText='Read' href='https://reactjs.org/tutorial/tutorial.html'>Official Getting Started</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://reactjs.org/'>React Website</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://reactjs.org/tutorial/tutorial.html'>Official Getting Started</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://beta.reactjs.org/'>Beta React Docs</BadgeLink>
 <BadgeLink badgeText='Course' colorScheme='green' href='https://egghead.io/courses/the-beginner-s-guide-to-react'>The Beginner's Guide to React</BadgeLink>
-<BadgeLink badgeText='Course' colorScheme='green' href='https://www.youtube.com/watch?v=nTeuhbP7wdE'>React JS Course for Beginners</BadgeLink>
-<BadgeLink badgeText='Course' colorScheme='green' href='https://www.youtube.com/watch?v=bMknfKXIFA8'>React Course - Beginner's Tutorial for React JavaScript Library [2022]</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=nTeuhbP7wdE'>React JS Course for Beginners</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=bMknfKXIFA8'>React Course - Beginner's Tutorial for React JavaScript Library [2022]</BadgeLink>
 <BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=i793Qm6kv3U'>Understanding React's UI Rendering Process</BadgeLink>

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

@@ -5,6 +5,6 @@ RxJS (Reactive Extensions for JavaScript) is a library for reactive programming
 <ResourceGroupTitle>Free Content</ResourceGroupTitle>
 
 <BadgeLink colorScheme='blue' badgeText='Official Website' href='https://rxjs.dev/guide/overview'>RxJS Official Website</BadgeLink>
-<BadgeLink colorScheme='blue' badgeText='Read' href='https://angular.io/guide/rx-library'>RxJS Angular Docs</BadgeLink>
-<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=2LCo926NFLI'>RxJS Quick Start</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://angular.io/guide/rx-library'>RxJS Angular Docs</BadgeLink>
 <BadgeLink colorScheme='green' badgeText='Course' href='https://www.youtube.com/watch?v=PhggNGsSQyg'>RxJS Crash Course</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=2LCo926NFLI'>RxJS Quick Start</BadgeLink>

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

@@ -4,6 +4,6 @@ NgRx is an open source library that provides reactive state management for your
 
 <ResourceGroupTitle>Free Content</ResourceGroupTitle>
 
-<BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://ngrx.io/docs'>Official Documentation</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://ngrx.io/docs'>Official Documentation</BadgeLink>
 <BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=2LCo926NFLI'>Angular NgRx Redux Quick Start Tutorial</BadgeLink>
-<BadgeLink colorScheme='green' badgeText='Course' href='https://www.youtube.com/watch?v=nuHBHD32iw8'>NgRx Course</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=nuHBHD32iw8'>NgRx Course</BadgeLink>

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,9 +1,15 @@
+<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.
 
 <ResourceGroupTitle>Free Content</ResourceGroupTitle>
-<BadgeLink colorScheme='blue' badgeText='Framework Website' href='https://vuejs.org/'>Vue.js Website</BadgeLink>
-<BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://vuejs.org/v2/guide/'>Official Getting Started</BadgeLink>
-<BadgeLink badgeText='Course' colorScheme='green' href='https://www.youtube.com/watch?v=FXpIoQ_rT_c'>Vue.js Course for Beginners</BadgeLink>
-<BadgeLink badgeText='Course' colorScheme='green' href='https://www.youtube.com/watch?v=qZXt1Aom3Cs'>Vue.js Crash Course</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://vuejs.org/'>Vue.js Website</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Official Guide' href='https://vuejs.org/v2/guide/'>Official Getting Started</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=FXpIoQ_rT_c'>Vue.js Course for Beginners</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=qZXt1Aom3Cs'>Vue.js Crash Course</BadgeLink>

content/roadmaps/100-frontend/content/111-pick-a-framework/103-svelte.md

@@ -0,0 +1,8 @@
+# Svelte
+
+Svelte is a javascript framework that unlike Vue and React does not use vertical DOM diffing but instead knows exactly what and where to update when the state changes. It's mainly focused on frontend and building user interfaces.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://svelte.dev/'>Svelte Website</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Official Guide' href='https://svelte.dev/docs'>Svelte Documentation</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/playlist?list=PL4cUxeGkcC9hlbrVO_2QFVqVPhlZmz7tO'>Svelte Course Playlist for beginners</BadgeLink>

content/roadmaps/100-frontend/content/111-pick-a-framework/104-solid-js.md

@@ -0,0 +1 @@
+# SolidJS

content/roadmaps/100-frontend/content/112-modern-css/100-styled-components.md

@@ -4,6 +4,6 @@ Styled-components is a CSS-in-JS library that enables you to write regular CSS a
 
 <ResourceGroupTitle>Free Content</ResourceGroupTitle>
 
-<BadgeLink colorScheme='blue' badgeText='Read' href='https://styled-components.com/'>Official Website</BadgeLink>
-<BadgeLink colorScheme='blue' badgeText='Read' href='https://styled-components.com/docs'>Official Docs</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://styled-components.com/'>Official Website</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://styled-components.com/docs'>Official Docs</BadgeLink>
 <BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=02zO0hZmwnw'>Styled Components Crash Course & Project</BadgeLink>

content/roadmaps/100-frontend/content/112-modern-css/103-emotion.md

@@ -4,5 +4,5 @@ Emotion is a library designed for writing css styles with JavaScript. It provide
 
 <ResourceGroupTitle>Free Content</ResourceGroupTitle>
 
-<BadgeLink colorScheme='blue' badgeText='Read' href='https://emotion.sh/docs/introduction'>Official Website and Docs</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://emotion.sh/docs/introduction'>Official Website and Docs</BadgeLink>
 <BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=yO3JU2bMLGA'>Styled components using emotion in React</BadgeLink>

content/roadmaps/100-frontend/content/112-modern-css/readme.md

@@ -1 +1,3 @@
-# Modern css
+# Modern CSS
+
+The way we write CSS in our modern front-end applications is completely different from how we used to write CSS before. There are methods such as Styled Components, CSS Modules, Styled JSX,  Emotion, etc

content/roadmaps/100-frontend/content/113-web-components/readme.md

@@ -1 +1,8 @@
-# Web components
+# Web Components
+
+Web Components is a suite of different technologies allowing you to create reusable custom elements — with their functionality encapsulated away from the rest of your code — and utilize them in your web apps.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink badgeText='Read' colorScheme='yellow' href='https://developer.mozilla.org/en-US/docs/Web/Web_Components'>Web Components | MDN</BadgeLink>
+<BadgeLink badgeText='Read' colorScheme='yellow' href='https://webcomponents.github.io/'>WebComponents.org</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=PCWaFLy3VUo'>Web Components Crash Course</BadgeLink>

content/roadmaps/100-frontend/content/114-css-frameworks/114-css-first/100-bootstrap.md

@@ -3,6 +3,6 @@
 Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.
 
 <ResourceGroupTitle>Free Content</ResourceGroupTitle>
-<BadgeLink colorScheme='blue' badgeText='Framework Website' href='https://getbootstrap.com'>Bootstrap Website</BadgeLink>
-<BadgeLink colorScheme='blue' badgeText='Docs' href='https://getbootstrap.com/docs/5.2/getting-started/introduction/'>Bootstrap Official Documentation</BadgeLink>
-<BadgeLink colorScheme='green' badgeText='Course' href='https://www.youtube.com/watch?v=-qfEOE4vtxE'>Bootstrap CSS Framework - Full Course for Beginners</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://getbootstrap.com'>Bootstrap Website</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Official Blog' href='https://blog.getbootstrap.com/2022/07/19/bootstrap-5-2-0/'>Bootstrap Official Blog</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=-qfEOE4vtxE'>Bootstrap CSS Framework - Full Course for Beginners</BadgeLink>

content/roadmaps/100-frontend/content/114-css-frameworks/114-css-first/101-bulma.md

@@ -3,7 +3,7 @@
 Bulma is a free, open source framework that provides ready-to-use frontend components that you can easily combine to build responsive web interfaces.
 
 <ResourceGroupTitle>Free Content</ResourceGroupTitle>
-<BadgeLink colorScheme='blue' badgeText='Framework Website' href='https://bulma.io/'>Bulma Website</BadgeLink>
-<BadgeLink colorScheme='green' badgeText='Course' href='https://youtube.com/playlist?list=PL4cUxeGkcC9iXItWKbaQxcyDT1u6E7a8a'>Bulma CSS Tutorial</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://bulma.io/'>Bulma Website</BadgeLink>
 <BadgeLink colorScheme='green' badgeText='Course' href='https://scrimba.com/learn/bulma'>Learn Bulma CSS</BadgeLink>
-<BadgeLink badgeText='Read' href='https://www.freecodecamp.org/news/how-to-build-a-responsive-blog-design-with-bulma-css-c2257a17c16b'>How To Build A ? Responsive Blog Design With Bulma CSS</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.freecodecamp.org/news/how-to-build-a-responsive-blog-design-with-bulma-css-c2257a17c16b'>How To Build A ? Responsive Blog Design With Bulma CSS</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://youtube.com/playlist?list=PL4cUxeGkcC9iXItWKbaQxcyDT1u6E7a8a'>Bulma CSS Tutorial</BadgeLink>

content/roadmaps/100-frontend/content/114-css-frameworks/114-js-first/100-tailwind-css.md

@@ -3,8 +3,8 @@
 CSS Framework that provides atomic CSS classes to help you style components e.g. `flex`, `pt-4`, `text-center` and `rotate-90` that can be composed to build any design, directly in your markup.
 
 <ResourceGroupTitle>Free Content</ResourceGroupTitle>
-<BadgeLink colorScheme='blue' badgeText='Framework Website' href='https://tailwindcss.com'>Tailwind Website</BadgeLink>
-<BadgeLink colorScheme='blue' badgeText='YouTube Channel' href='https://www.youtube.com/c/TailwindLabs/videos'>Official Screencasts</BadgeLink>
-<BadgeLink colorScheme='yellow' badgeText='Watch' href='https://www.youtube.com/watch?v=hdGsFpZ0J2E'>Should You Use Tailwind CSS?</BadgeLink>
-<BadgeLink badgeText='Read' href='https://www.codemag.com/Article/2105091/Tailwind-CSS-An-Introduction'>Tailwind CSS: An Introduction</BadgeLink>
-<BadgeLink colorScheme='green' badgeText='Course' href='https://www.youtube.com/watch?v=UBOj6rqRUME'>Tailwind CSS Crash Course</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://tailwindcss.com'>Tailwind Website</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.codemag.com/Article/2105091/Tailwind-CSS-An-Introduction'>Tailwind CSS: An Introduction</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/c/TailwindLabs/videos'>Official Screencasts</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=hdGsFpZ0J2E'>Should You Use Tailwind CSS?</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=UBOj6rqRUME'>Tailwind CSS Crash Course</BadgeLink>

content/roadmaps/100-frontend/content/114-css-frameworks/114-js-first/101-chakra-ui.md

@@ -5,7 +5,7 @@ Chakra UI is a simple, modular and accessible component library that gives you t
 <ResourceGroupTitle>Free Content</ResourceGroupTitle>
 <BadgeLink colorScheme='blue' badgeText='Official Website' href='https://chakra-ui.com/'>Chakra UI Website</BadgeLink>
 <BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://chakra-ui.com/docs/getting-started'>Chakra UI Official Getting Started</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.freecodecamp.org/news/why-should-you-start-using-chakraui/'>Why You Should Start Using Chakra UI</BadgeLink>
 <BadgeLink badgeText='Course' colorScheme='green' href='https://egghead.io/courses/build-a-modern-user-interface-with-chakra-ui-fac68106'>Build a Modern User Interface with Chakra UI</BadgeLink>
 <BadgeLink badgeText='Watch' href='https://youtu.be/wI2vqXsjsIo'>Official Getting Started Video</BadgeLink>
 <BadgeLink badgeText='Watch' href='https://youtu.be/s-bIsz-NR3c'>Chakra UI Crash Course</BadgeLink>
-<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.freecodecamp.org/news/why-should-you-start-using-chakraui/'>Why You Should Start Using Chakra UI</BadgeLink>

content/roadmaps/100-frontend/content/114-css-frameworks/114-js-first/102-material-ui.md

@@ -3,6 +3,6 @@
 Material-UI is an open-source framework that features React components that implement Google’s Material Design.
 
 <ResourceGroupTitle>Free Content</ResourceGroupTitle>
-<BadgeLink colorScheme='blue' badgeText='Framework Website' href='https://mui.com/'>Official Website</BadgeLink>
-<BadgeLink colorScheme='blue' badgeText='Docs' href='https://mui.com/getting-started/installation/'>Official Documentation</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://mui.com/'>Official Website</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://mui.com/getting-started/installation/'>Official Documentation</BadgeLink>
 <BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=vyJU9efvUtQ'>Material UI React Tutorial</BadgeLink>

content/roadmaps/100-frontend/content/114-css-frameworks/114-js-first/103-radix-ui.md

@@ -3,5 +3,5 @@
 An open-source UI component library for building high-quality, accessible design systems and web apps.
 
 <ResourceGroupTitle>Free Content</ResourceGroupTitle>
-<BadgeLink colorScheme='blue' badgeText='Framework Website' href='https://www.radix-ui.com/'>Official Website</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://www.radix-ui.com/'>Official Website</BadgeLink>
 <BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://www.radix-ui.com/docs/primitives/overview/introduction'>Official Documentation</BadgeLink>

content/roadmaps/100-frontend/content/114-css-frameworks/114-js-first/104-mantine.md

@@ -0,0 +1,8 @@
+# Mantine
+
+Mantine is a React components library with more than 100 customizable components and 40 hooks to cover you in any situation.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://mantine.dev/'>Mantine Website</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://mantine.dev/guides/cra/'>Usage with Create React App</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://blog.logrocket.com/5-mantine-hooks-simplifying-ui-management-react/'>5 Mantine Hooks for UI management</BadgeLink>

content/roadmaps/100-frontend/content/114-css-frameworks/114-js-first/105-daisy-ui.md

@@ -0,0 +1,7 @@
+# Daisy UI
+
+Component library around Tailwind CSS that comes with several built-in components.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://daisyui.com/'>DaisyUI Website</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://daisyui.com/docs/install/'>DaisyUI Documentation</BadgeLink>

content/roadmaps/100-frontend/content/114-css-frameworks/readme.md

@@ -3,5 +3,5 @@
 A CSS framework provides the user with a fully functional CSS stylesheet, allowing them to create a web page by simply coding the HTML with appropriate classes, structure, and IDs. Classes for popular website features like as the footer, slider, navigation bar, hamburger menu, column-based layouts, and so on are already included in the framework.
 
 <ResourceGroupTitle>Free Content</ResourceGroupTitle>
-<BadgeLink colorScheme='blue' badgeText='Docs' href='https://en.wikipedia.org/wiki/CSS_framework'>CSS Frameworks Introduction</BadgeLink>
-<BadgeLink colorScheme='blue' badgeText='Benefits' href='https://css-tricks.com/what-are-the-benefits-of-using-a-css-framework/'>What are the benefits of using a css framework</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://en.wikipedia.org/wiki/CSS_framework'>CSS Frameworks Introduction</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://css-tricks.com/what-are-the-benefits-of-using-a-css-framework/'>What are the benefits of using a css framework</BadgeLink>

content/roadmaps/100-frontend/content/115-testing-your-apps/101-react-testing-library.md

@@ -3,4 +3,4 @@
 The React Testing Library is a very lightweight solution for testing React components. It provides light utility functions on top of react-dom and react-dom/test-utils, in a way that encourages better testing practices. Its primary guiding principle is: The more your tests resemble the way your software is used, the more confidence they can give you.
 
 <ResourceGroupTitle>Free Content</ResourceGroupTitle>
-<BadgeLink colorScheme='blue' badgeText='Official Getting Started' href='https://testing-library.com/docs/react-testing-library/intro/'>React Testing Library</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://testing-library.com/docs/react-testing-library/intro/'>React Testing Library</BadgeLink>

content/roadmaps/100-frontend/content/115-testing-your-apps/102-cypress.md

@@ -3,6 +3,6 @@
 Cypress framework is a JavaScript-based end-to-end testing framework built on top of Mocha – a feature-rich JavaScript test framework running on and in the browser, making asynchronous testing simple and convenient. It also uses a BDD/TDD assertion library and a browser to pair with any JavaScript testing framework.
 
 <ResourceGroupTitle>Free Resources</ResourceGroupTitle>
-<BadgeLink colorScheme='blue' badgeText='Website' href='https://www.cypress.io/'>Official Website</BadgeLink>
-<BadgeLink colorScheme='blue' badgeText='Docs' href='https://docs.cypress.io/guides/overview/why-cypress#Other'>Official Documentation</BadgeLink>
-<BadgeLink colorScheme='purple' badgeText='Watch' href='https://www.youtube.com/watch?v=7N63cMKosIE'>Cypress End-to-End Testing</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://www.cypress.io/'>Official Website</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://docs.cypress.io/guides/overview/why-cypress#Other'>Official Documentation</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=7N63cMKosIE'>Cypress End-to-End Testing</BadgeLink>

content/roadmaps/100-frontend/content/115-testing-your-apps/104-playwright.md

@@ -0,0 +1,7 @@
+# Playwright
+
+Playwright is an open-source test automation library initially developed by Microsoft contributors. It supports programming languages such as Java, Python, C#, and NodeJS. Playwright comes with Apache 2.0 License and is most popular with NodeJS with Javascript/Typescript.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://playwright.dev/'>Playwright Website</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.browserstack.com/guide/playwright-tutorial'>Playwright Tutorial: Learn Basics and Setup</BadgeLink>

content/roadmaps/100-frontend/content/115-testing-your-apps/105-mocha.md

@@ -4,4 +4,4 @@ Mocha is a feature-rich JavaScript test framework running on Node.js and in the
 
 <ResourceGroupTitle>Free Resources</ResourceGroupTitle>
 <BadgeLink colorScheme='blue' badgeText='Official Website' href='https://mochajs.org/'>Official Website and Docs</BadgeLink>
-<BadgeLink colorScheme='purple' badgeText='Watch' href='https://www.youtube.com/watch?v=Bs68k6xfR3E'>Testing Node.js with Mocha</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=Bs68k6xfR3E'>Testing Node.js with Mocha</BadgeLink>

content/roadmaps/100-frontend/content/115-testing-your-apps/106-chai.md

@@ -5,4 +5,4 @@ Chai is a BDD / TDD assertion library for node and the browser that can be delig
 <ResourceGroupTitle>Free Resources</ResourceGroupTitle>
 <BadgeLink colorScheme='blue' badgeText='Official Website' href='https://www.chaijs.com/'>Official Website and Docs</BadgeLink>
 <BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://www.chaijs.com/guide/'>Official Docs</BadgeLink>
-<BadgeLink colorScheme='purple' badgeText='Watch' href='https://www.youtube.com/watch?v=MLTRHc5dk6s'>Intro To JavaScript Unit Testing With Mocha JS & Chai</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=MLTRHc5dk6s'>Intro To JavaScript Unit Testing With Mocha JS & Chai</BadgeLink>

content/roadmaps/100-frontend/content/115-testing-your-apps/107-ava.md

@@ -3,6 +3,6 @@
 Ava is a JavaScript test runner. It utilizes the async I/O nature of Node and runs concurrent tests, thereby vastly decreasing your test times.
 
 <ResourceGroupTitle>Free Resources</ResourceGroupTitle>
-<BadgeLink colorScheme='blue' badgeText='Official Rep' href='https://github.com/avajs/ava'>Official Repository</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Official Repository' href='https://github.com/avajs/ava'>Official Repository</BadgeLink>
 <BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.freecodecamp.org/news/testing-your-nodejs-applications-with-ava-js-99e806a226a7/'>Testing your Node.js applications with Ava.js</BadgeLink>
-<BadgeLink colorScheme='purple' badgeText='Watch' href='https://www.youtube.com/watch?v=RxLW6-3dk5A'>AVA Tutorial</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=RxLW6-3dk5A'>AVA Tutorial</BadgeLink>

content/roadmaps/100-frontend/content/115-testing-your-apps/108-jasmine.md

@@ -3,7 +3,7 @@
 Jasmine is a behavior-driven development framework for testing JavaScript code. It does not depend on any other JavaScript frameworks. It does not require a DOM. And it has a clean, obvious syntax so that you can easily write tests. It provides utilities that can be used to run automated tests for both synchronous and asynchronous code.
 
 <ResourceGroupTitle>Free Resources</ResourceGroupTitle>
-<BadgeLink colorScheme='blue' badgeText='Website' href='https://jasmine.github.io/'>Official Website</BadgeLink>
-<BadgeLink colorScheme='blue' badgeText='Docs' href='https://jasmine.github.io/pages/docs_home.html'>Official Docs</BadgeLink>
-<BadgeLink colorScheme='blue' badgeText='Official Rep' href='https://github.com/jasmine/jasmine'>Official Repository</BadgeLink>
-<BadgeLink colorScheme='purple' badgeText='Watch' href='https://www.youtube.com/watch?v=rw4KlxKEENQ'>Javascript Unit Testing with Jasmine</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://jasmine.github.io/'>Official Website</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://jasmine.github.io/pages/docs_home.html'>Official Docs</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Official Repository' href='https://github.com/jasmine/jasmine'>Official Repository</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=rw4KlxKEENQ'>Javascript Unit Testing with Jasmine</BadgeLink>

content/roadmaps/100-frontend/content/115-testing-your-apps/109-vitest.md

@@ -0,0 +1,7 @@
+# Vitest
+
+Vitest is a fast Vite-native unit test framework with out-of-box ESM, TypeScript and JSX support.
+Works on React, Vue, Svelte and more projects created with Vite
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://vitest.dev/'>Vitest Website</BadgeLink>

content/roadmaps/100-frontend/content/116-type-checkers/100-typescript.md

@@ -3,8 +3,9 @@
 TypeScript is a strongly typed programming language that builds on JavaScript, giving you better tooling at any scale.
 
 <ResourceGroupTitle>Free Resources</ResourceGroupTitle>
-<BadgeLink colorScheme='blue' badgeText='Website' href='https://www.typescriptlang.org/'>Official Website</BadgeLink>
-<BadgeLink colorScheme='blue' badgeText='Docs' href='https://www.typescriptlang.org/docs/'>Official Docs for Deep Dives</BadgeLink>
-<BadgeLink colorScheme='blue' badgeText='Handbook' href='https://www.typescriptlang.org/docs/handbook/intro.html'>The TypeScript Handbook</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://www.typescriptlang.org/'>Official Website</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://www.typescriptlang.org/docs/'>Official Docs for Deep Dives</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Official Handbook' href='https://www.typescriptlang.org/docs/handbook/intro.html'>The TypeScript Handbook</BadgeLink>
 <BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.tutorialspoint.com/typescript/index.htm'>TypeScript Tutorial</BadgeLink>
-<BadgeLink colorScheme='purple' badgeText='Watch' href='https://www.youtube.com/watch?v=BwuLxPH8IDs'>TypeScript for Beginners</BadgeLink>
+<BadgeLink colorScheme='green' badgeText='Course' href='https://scrimba.com/learn/typescript'>Scrimba — TypeScript Basics</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=BwuLxPH8IDs'>TypeScript for Beginners</BadgeLink>

content/roadmaps/100-frontend/content/116-type-checkers/101-flow.md

@@ -3,6 +3,6 @@
 Flow is a static type checker, designed to find type errors in JavaScript programs.
 
 <ResourceGroupTitle>Free Resources</ResourceGroupTitle>
-<BadgeLink colorScheme='blue' badgeText='Website' href='https://flow.org/'>Official Website</BadgeLink>
-<BadgeLink colorScheme='blue' badgeText='Docs' href='https://flow.org/en/docs/'>Official Documentation</BadgeLink>
-<BadgeLink colorScheme='purple' badgeText='Watch' href='https://www.youtube.com/watch?v=0HlqX4lQZas'>Flow for Beginners</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://flow.org/'>Official Website</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://flow.org/en/docs/'>Official Documentation</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=0HlqX4lQZas'>Flow for Beginners</BadgeLink>

content/roadmaps/100-frontend/content/117-progressive-web-apps/101-performance.md

@@ -8,5 +8,5 @@ Performance plays a significant role in the success of any online venture, as hi
 <BadgeLink colorScheme='yellow' badgeText='Read' href='https://web.dev/rail/'>Measure performance with the RAIL model</BadgeLink>
 <BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.freecodecamp.org/news/introduction-to-chrome-lighthouse/'>Introduction to Chrome Lighthouse</BadgeLink>
 <BadgeLink colorScheme='yellow' badgeText='Read' href='https://developers.google.com/web/ilt/pwa/lighthouse-pwa-analysis-tool'>Lighthouse PWA Analysis Tool</BadgeLink>
-<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=egmwY9n6qWY'>PWA Tutorial: Lighthouse Audit</BadgeLink>
 <BadgeLink colorScheme='yellow' badgeText='Read' href='https://developer.chrome.com/docs/devtools/speed/get-started/'>Lighthouse: Optimize website speed</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=egmwY9n6qWY'>PWA Tutorial: Lighthouse Audit</BadgeLink>

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

@@ -3,8 +3,8 @@
 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>
-<BadgeLink colorScheme='blue' badgeText='Docs' href='https://nextjs.org/docs/getting-started'>Official Docs for Getting Started</BadgeLink>
-<BadgeLink colorScheme='purple' badgeText='Watch' href='https://masteringnextjs.com/'>Mastering Next.js</BadgeLink>
-<BadgeLink colorScheme='purple' badgeText='Watch' href='https://youtu.be/1WmNXEVia8I'>Next.js for Beginners - freeCodeCamp</BadgeLink>
-<BadgeLink colorScheme='yellow' badgeText='Handbook' href='https://www.freecodecamp.org/news/the-next-js-handbook/'>The Next.js Handbook — freeCodeCamp</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://nextjs.org/'>Official Website</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://nextjs.org/docs/getting-started'>Official Docs for Getting Started</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://masteringnextjs.com/'>Mastering Next.js</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.freecodecamp.org/news/the-next-js-handbook/'>The Next.js Handbook — freeCodeCamp</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://youtu.be/1WmNXEVia8I'>Next.js for Beginners - freeCodeCamp</BadgeLink>

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

@@ -3,5 +3,5 @@
 After.js is an open-source JavaScript framework for developing SSR (Server Side Rendering) based applications. It is similar to the Next.js framework for server-rendered React apps but uses React Router instead of a folder structure based router like Next.js
 
 <ResourceGroupTitle>Free Resources</ResourceGroupTitle>
-<BadgeLink colorScheme='blue' badgeText='GitHub' href='https://github.com/jaredpalmer/after.js'>Official GitHub repository</BadgeLink>
-<BadgeLink colorScheme='blue' badgeText='Docs' href='https://www.npmjs.com/package/@jaredpalmer/after'>Documetation</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Official Repository' href='https://github.com/jaredpalmer/after.js'>Official GitHub repository</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://www.npmjs.com/package/@jaredpalmer/after'>Documentation</BadgeLink>