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

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

.github/workflows/deploy.yml

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

.gitignore

@@ -5,7 +5,6 @@ out
 /node_modules
 /.pnp
 .pnp.js
-yarn.lock
 
 # testing
 /coverage

components/custom-ad.tsx

@@ -1,69 +1,37 @@
-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 (
-    <Link
-      href='https://www.getambassador.io/edge-stack-guide-v4?utm_source=roadmap.sh&utm_medium=ebook&utm_campaign=edgestack-guide'
-      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: `Ambassador EBook Redirect`,
-          label: `Clicked Ambassador EBook Link`
-        });
-      }}
-    >
-      <Image
-        src='https://i.imgur.com/0bH1Vl6.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 eBook</Heading>
-          <Box display='block' as='span' fontSize='13px' lineHeight={1.5} fontWeight={500} color='gray.500'>
-            Learn about API Gateways, Microservices, Load Balancing, and more with this free eBook.
-          </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)'
+    <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'
         >
-          Partner Content
-        </Box>
-      </Flex>
-    </Link>
+          Sponsored by
+        </a>
+      </span>
+    </div>
   );
 };

components/footer.tsx

@@ -1,13 +1,11 @@
-import { Box, Container, Flex, Image, Link, SimpleGrid, Stack, Text } from '@chakra-ui/react';
+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 (
     <>
-      <Stack isInline display={['none', 'none', 'flex']} justifyContent='center' color='gray.400' fontWeight={600}
-             spacing='30px'>
+      <Stack isInline d={['none', 'none', 'flex']} color='gray.400' fontWeight={600} spacing='30px'>
         <Link _hover={{ color: 'white' }} href='/roadmaps'>Roadmaps</Link>
         <Link _hover={{ color: 'white' }} href='/guides'>Guides</Link>
         <Link _hover={{ color: 'white' }} href='/watch'>Videos</Link>
@@ -15,7 +13,7 @@ function NavigationLinks() {
         <Link _hover={{ color: 'white' }} href={siteConfig.url.youtube} target='_blank'>YouTube</Link>
       </Stack>
 
-      <Stack display={['flex', 'flex', 'none']} color='gray.400' fontWeight={600} spacing={0}>
+      <Stack d={['flex', 'flex', 'none']} color='gray.400' fontWeight={600} spacing={0}>
         <Link py='7px' borderBottomWidth={1} borderBottomColor='gray.800' _hover={{ color: 'white' }}
               href='/roadmaps'>Roadmaps</Link>
         <Link py='7px' borderBottomWidth={1} borderBottomColor='gray.800' _hover={{ color: 'white' }}
@@ -37,53 +35,33 @@ export function Footer() {
       <Container maxW='container.md'>
         <NavigationLinks />
 
-        <SimpleGrid mt={['40px', '40px', '50px']} mb='40px' gap={['40px', '40px', '75px']} columns={[1, 1, 2, 2]} justifyContent='space-between'>
-          <Box maxWidth={'550px'}>
-            <Flex gap={0} alignItems='center' color='gray.400'>
-              <Link d='flex' alignItems='center' fontWeight={600} _hover={{ textDecoration: 'none', color: 'white' }}
-                    href='/'>
-                <Image alt='' h='25px' w='25px' src='/logo.svg' mr='6px' />
-                roadmap.sh
-              </Link>
-              <Text as='span' mx='7px'>by</Text>
-              <Link bg='blue.500' px='6px' py='2px' rounded='4px' color='white' fontWeight={600} fontSize='13px'
-                    _hover={{ textDecoration: 'none', bg: 'blue.600' }} href={siteConfig.url.twitter}
-                    target='_blank'>@kamranahmedse</Link>
-            </Flex>
-
-            <Text my='15px' fontSize='14px' color='gray.500'>Community created roadmaps, articles, resources and
-              journeys to help you choose your path and grow in your career.</Text>
-
-            <Text fontSize='14px' color='gray.500'>
-              <Text as='span' mr='10px'>&copy; roadmap.sh</Text>&middot;
-              <Link href='/about' _hover={{ textDecoration: 'none', color: 'white' }} color='gray.400'
-                    mx='10px'>FAQs</Link>&middot;
-              <Link href='/terms' _hover={{ textDecoration: 'none', color: 'white' }} color='gray.400'
-                    mx='10px'>Terms</Link>&middot;
-              <Link href='/privacy' _hover={{ textDecoration: 'none', color: 'white' }} color='gray.400'
-                    mx='10px'>Privacy</Link>
-            </Text>
-          </Box>
-
-          <Box maxWidth={'550px'} textAlign={['left', 'left', 'right']}>
-            <Link display='flex' justifyContent={['flex-start', 'flex-start', 'flex-end']} fontWeight={600}
-                  _hover={{ textDecoration: 'none', color: 'white' }} href='https://thenewstack.io?utm_source=roadmap-sh&utm_medium=Referral&utm_campaign=Footer' target='_blank'>
-              <Image alt='' w='195px' src='/tns.png' />
+        <Box mt={['40px', '40px', '50px']} mb='40px' maxW='500px'>
+          <Flex spacing={0} alignItems='center' color='gray.400'>
+            <Link d='flex' alignItems='center' fontWeight={600} _hover={{ textDecoration: 'none', color: 'white' }}
+                  href='/'>
+              <Image alt='' h='25px' w='25px' src='/logo.svg' mr='6px' />
+              roadmap.sh
             </Link>
+            <Text as='span' mx='7px'>by</Text>
+            <Link bg='blue.500' px='6px' py='2px' rounded='4px' color='white' fontWeight={600} fontSize='13px'
+                  _hover={{ textDecoration: 'none', bg: 'blue.600' }} href={siteConfig.url.twitter}
+                  target='_blank'>@kamranahmedse</Link>
+          </Flex>
 
-            <Text my='15px' fontSize='14px' color='gray.500'>The leading DevOps resource for Kubernetes, cloud-native
-              computing, and the latest in at-scale development, deployment, and management.</Text>
+          <Text my='15px' fontSize='14px' color='gray.500'>Community created roadmaps, articles, resources and
+            journeys to help you choose your path and grow in your career.</Text>
 
-            <Text fontSize='14px' color='gray.500'>
-              <Link href='https://thenewstack.io/category/devops/?utm_source=roadmap-sh&utm_medium=Referral&utm_campaign=Footer' target='_blank' _hover={{ textDecoration: 'none', color: 'white' }} color='gray.400' mx='10px' ml={['0', '0', '10px']}>DevOps</Link>&middot;
-              <Link href='https://thenewstack.io/category/kubernetes/?utm_source=roadmap-sh&utm_medium=Referral&utm_campaign=Footer' target='_blank' _hover={{ textDecoration: 'none', color: 'white' }} color='gray.400' mx='10px'>Kubernetes</Link>&middot;
-              <Link href='https://thenewstack.io/category/cloud-native/?utm_source=roadmap-sh&utm_medium=Referral&utm_campaign=Footer' target='_blank' _hover={{ textDecoration: 'none', color: 'white' }} color='gray.400' mx='10px'>Cloud-Native</Link>
-            </Text>
-          </Box>
-        </SimpleGrid>
+          <Text fontSize='14px' color='gray.500'>
+            <Text as='span' mr='10px'>&copy; roadmap.sh</Text>&middot;
+            <Link href='/about' _hover={{ textDecoration: 'none', color: 'white' }} color='gray.400'
+                  mx='10px'>FAQs</Link>&middot;
+            <Link href='/terms' _hover={{ textDecoration: 'none', color: 'white' }} color='gray.400'
+                  mx='10px'>Terms</Link>&middot;
+            <Link href='/privacy' _hover={{ textDecoration: 'none', color: 'white' }} color='gray.400'
+                  mx='10px'>Privacy</Link>
+          </Text>
+        </Box>
       </Container>
-
-      <CustomAd />
     </Box>
   );
 }

components/global-header.tsx

@@ -1,25 +1,16 @@
 import { useState } from 'react';
 import { HamburgerIcon } from '@chakra-ui/icons';
-import { Box, CloseButton, Container, Flex, IconButton, Link, Stack, Text } from '@chakra-ui/react';
+import { Box, CloseButton, Container, Flex, IconButton, Image, Link, Stack, Text } from '@chakra-ui/react';
 import RoadmapLogo from '../components/icons/roadmap.svg';
+import siteConfig from '../content/site.json';
 
 type MenuLinkProps = {
   text: string;
   link: string;
-  target?: '_blank' | '_self' | '_parent' | '_top';
-  isFancy?: boolean;
 };
 
 function MenuLink(props: MenuLinkProps) {
-  const { text, link, target = '_self', isFancy = false } = props;
-
-  const gradientProp = isFancy ? {
-    bgGradient: 'linear(to-r, yellow.100, teal.100)',
-    bgClip: 'text',
-    _hover: {
-      color: 'yellow.100'
-    }
-  } : {};
+  const { text, link } = props;
 
   return <Link
     borderBottomWidth={0}
@@ -27,8 +18,6 @@ function MenuLink(props: MenuLinkProps) {
     _hover={{ textDecoration: 'none', borderBottomColor: 'white' }}
     fontWeight={500}
     href={link}
-    target={target}
-    {...gradientProp}
   >
     {text}
   </Link>;
@@ -40,13 +29,7 @@ function DesktopMenuLinks() {
            fontSize='15px'>
       <MenuLink text={'Roadmaps'} link={'/roadmaps'} />
       <MenuLink text={'Guides'} link={'/guides'} />
-
-      <MenuLink
-        target={'_blank'}
-        text={'Hiring a DevRel'}
-        isFancy
-        link={'https://docs.google.com/forms/d/e/1FAIpQLSesFpPxgKx_8-L5hm7fw6NQpgGixrMGC4Cg3M8NHPQhFfSajQ/viewform'}
-      />
+      <MenuLink text={'Videos'} link={'/watch'} />
 
       <Link ml='10px' bgGradient='linear(to-l, yellow.700, red.600)' p='7px 10px' rounded='4px'
             _hover={{ textDecoration: 'none', bgGradient: 'linear(to-l, red.800, yellow.700)' }}

components/guide/guide-grid-item.tsx

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

@@ -1,73 +0,0 @@
-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: 'Role Based',
-    title: 'Cyber Security',
-    description: 'Step by step guide to become a Cyber Security Expert',
-    id: 'cyber-security'
-  },
-  // {
-  //   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/facebook-square.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M400 32H48A48 48 0 0 0 0 80v352a48 48 0 0 0 48 48h137.25V327.69h-63V256h63v-54.64c0-62.15 37-96.48 93.67-96.48 27.14 0 55.52 4.84 55.52 4.84v61h-31.27c-30.81 0-40.42 19.12-40.42 38.73V256h68.78l-11 71.69h-57.78V480H400a48 48 0 0 0 48-48V80a48 48 0 0 0-48-48z"/></svg>

components/icons/hackernews-square.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zM21.2 229.2H21c.1-.1.2-.3.3-.4 0 .1 0 .3-.1.4zm218 53.9V384h-31.4V281.3L128 128h37.3c52.5 98.3 49.2 101.2 59.3 125.6 12.3-27 5.8-24.4 60.6-125.6H320l-80.8 155.1z"/></svg>

components/icons/reddit-square.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M283.2 345.5c2.7 2.7 2.7 6.8 0 9.2-24.5 24.5-93.8 24.6-118.4 0-2.7-2.4-2.7-6.5 0-9.2 2.4-2.4 6.5-2.4 8.9 0 18.7 19.2 81 19.6 100.5 0 2.4-2.3 6.6-2.3 9 0zm-91.3-53.8c0-14.9-11.9-26.8-26.5-26.8-14.9 0-26.8 11.9-26.8 26.8 0 14.6 11.9 26.5 26.8 26.5 14.6 0 26.5-11.9 26.5-26.5zm90.7-26.8c-14.6 0-26.5 11.9-26.5 26.8 0 14.6 11.9 26.5 26.5 26.5 14.9 0 26.8-11.9 26.8-26.5 0-14.9-11.9-26.8-26.8-26.8zM448 80v352c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V80c0-26.5 21.5-48 48-48h352c26.5 0 48 21.5 48 48zm-99.7 140.6c-10.1 0-19 4.2-25.6 10.7-24.1-16.7-56.5-27.4-92.5-28.6l18.7-84.2 59.5 13.4c0 14.6 11.9 26.5 26.5 26.5 14.9 0 26.8-12.2 26.8-26.8 0-14.6-11.9-26.8-26.8-26.8-10.4 0-19.3 6.2-23.8 14.9l-65.7-14.6c-3.3-.9-6.5 1.5-7.4 4.8l-20.5 92.8c-35.7 1.5-67.8 12.2-91.9 28.9-6.5-6.8-15.8-11-25.9-11-37.5 0-49.8 50.4-15.5 67.5-1.2 5.4-1.8 11-1.8 16.7 0 56.5 63.7 102.3 141.9 102.3 78.5 0 142.2-45.8 142.2-102.3 0-5.7-.6-11.6-2.1-17 33.6-17.2 21.2-67.2-16.1-67.2z"/></svg>

components/icons/twitter-square.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zm-48.9 158.8c.2 2.8.2 5.7.2 8.5 0 86.7-66 186.6-186.6 186.6-37.2 0-71.7-10.8-100.7-29.4 5.3.6 10.4.8 15.8.8 30.7 0 58.9-10.4 81.4-28-28.8-.6-53-19.5-61.3-45.5 10.1 1.5 19.2 1.5 29.6-1.2-30-6.1-52.5-32.5-52.5-64.4v-.8c8.7 4.9 18.9 7.9 29.6 8.3a65.447 65.447 0 0 1-29.2-54.6c0-12.2 3.2-23.4 8.9-33.1 32.3 39.8 80.8 65.8 135.2 68.6-9.3-44.5 24-80.6 64-80.6 18.9 0 35.9 7.9 47.9 20.7 14.8-2.8 29-8.3 41.6-15.8-4.9 15.2-15.2 28-28.8 36.1 13.2-1.4 26-5.1 37.8-10.2-8.9 13.1-20.1 24.7-32.9 34z"/></svg>

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} py={['45px', '45px', '70px']} textAlign='center'>
-      <Container maxW='container.sm'>
+    <Box bg='white' borderTopWidth={1} pt={['45px', '45px', '70px']} pb={['60px', '60px', '90px']} textAlign='center'>
+      <Container maxW='container.md'>
         <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,9 +20,26 @@ export function OpensourceBanner() {
           scrolling='0'
           width='170'
           height='30'
-          style={{ margin: 'auto' }}
+          style={{ margin: 'auto', marginBottom: '30px' }}
           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,5 +1,6 @@
-import { Box, Container, Heading, Text } from '@chakra-ui/react';
+import { Badge, Box, Container, Heading, Link, Text } from '@chakra-ui/react';
 import React from 'react';
+import siteConfig from '../content/site.json';
 
 type PageHeaderProps = {
   title: string;

components/related-roadmaps.tsx

@@ -1,80 +0,0 @@
-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';
+import { queryGroupElementsById } from '../../lib/renderer/utils';
 
 type ContentDrawerProps = {
   roadmap: RoadmapType;
@@ -11,33 +11,13 @@ type ContentDrawerProps = {
   onClose?: () => void;
 };
 
-export function markTopicDone(groupId: string) {
-  localStorage.setItem(groupId, 'done');
-
-  queryGroupElementsById(groupId).forEach((item) =>
-    item?.classList?.add('done')
-  );
-}
-
-export function markTopicPending(groupId: string) {
-  localStorage.removeItem(groupId);
-
-  queryGroupElementsById(groupId).forEach((item) =>
-    item?.classList?.remove('done')
-  );
-}
-
-export function isTopicDone(groupId: string) {
-  return localStorage.getItem(groupId) === 'done';
-}
-
 export function ContentDrawer(props: ContentDrawerProps) {
   const { roadmap, groupId, onClose = () => null } = props;
   if (!groupId) {
     return null;
   }
 
-  const isDone = isTopicDone(groupId);
+  const isDone = localStorage.getItem(groupId) === 'done';
 
   return (
     <Box zIndex={99999} pos="relative">
@@ -72,7 +52,10 @@ export function ContentDrawer(props: ContentDrawerProps) {
             {!isDone && (
               <Button
                 onClick={() => {
-                  markTopicDone(groupId);
+                  localStorage.setItem(groupId, 'done');
+                  queryGroupElementsById(groupId).forEach((item) =>
+                    item?.classList?.add('done')
+                  );
                   onClose();
                 }}
                 colorScheme="green"
@@ -92,7 +75,10 @@ export function ContentDrawer(props: ContentDrawerProps) {
             {isDone && (
               <Button
                 onClick={() => {
-                  markTopicPending(groupId);
+                  localStorage.removeItem(groupId);
+                  queryGroupElementsById(groupId).forEach((item) =>
+                    item?.classList?.remove('done')
+                  );
                   onClose();
                 }}
                 colorScheme="red"

components/roadmap/home-roadmap-item.tsx

@@ -1,4 +1,4 @@
-import { Badge, Box, Flex, Heading, Link, Text, Tooltip } from '@chakra-ui/react';
+import { Box, Flex, Heading, Link, Text, Tooltip } from '@chakra-ui/react';
 import { InfoIcon } from '@chakra-ui/icons';
 
 type RoadmapGridItemProps = {
@@ -7,7 +7,6 @@ type RoadmapGridItemProps = {
   isCommunity?: boolean;
   isUpcoming?: boolean;
   colorIndex?: number;
-  isNew?: boolean;
   url: string;
 };
 
@@ -22,7 +21,7 @@ const bgColorList = [
   'teal.200',
   'yellow.100',
   'green.200',
-  'red.200'
+  'red.200',
 ];
 
 export function HomeRoadmapItem(props: RoadmapGridItemProps) {
@@ -30,83 +29,77 @@ 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'
-        d='flex'
-        alignItems='center'
+        mb="5px"
       >
         {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

@@ -8,134 +8,17 @@ import {
   Container,
   Flex,
   Heading,
-  Input,
   Link,
-  Modal,
-  ModalBody,
-  ModalCloseButton,
-  ModalContent,
-  ModalOverlay,
   Stack,
   Text,
-  useDisclosure
 } from '@chakra-ui/react';
-import { AtSignIcon, ChatIcon, DownloadIcon } from '@chakra-ui/icons';
+import { ChatIcon, AtSignIcon, 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 email 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;
 
@@ -144,13 +27,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']}
@@ -158,37 +41,64 @@ export function RoadmapPageHeader(props: RoadmapPageHeaderType) {
           {roadmap.title}
         </Heading>
         <Text fontSize={['13px', '14px', '15px']}>{roadmap.description}</Text>
-        <Flex justifyContent='space-between' alignItems={'center'} mt='20px'>
+        <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>
 
-            <RoadmapDownloader roadmapTitle={roadmap.featuredTitle} />
-            <RoadmapSubscriber roadmapTitle={roadmap.featuredTitle} />
-
+            {roadmap.pdfUrl && (
+              <Button
+                as={Link}
+                href={roadmap.pdfUrl}
+                target="_blank"
+                size="xs"
+                py="14px"
+                px="10px"
+                leftIcon={<DownloadIcon />}
+                d={['none', 'flex']}
+                colorScheme="yellow"
+                variant="solid"
+                _hover={{ textDecoration: 'none' }}
+              >
+                Download
+              </Button>
+            )}
+            <Button
+              as={Link}
+              href={'/signup'}
+              size="xs"
+              py="14px"
+              px="10px"
+              variant="solid"
+              colorScheme="yellow"
+              leftIcon={<AtSignIcon />}
+              _hover={{ textDecoration: 'none' }}
+            >
+              Subscribe
+            </Button>
             <Box flex={1} justifyContent='flex-end' d='flex'>
               <Button
                 as={Link}
                 href={`${siteConfig.url.issue}?title=[Suggestion] ${roadmap.title}`}
                 target='_blank'
-                size='xs'
-                py='14px'
-                px='10px'
-                colorScheme='green'
+                size="xs"
+                py="14px"
+                px="10px"
+                colorScheme="green"
                 leftIcon={<ChatIcon />}
                 _hover={{ textDecoration: 'none' }}
               >
@@ -199,16 +109,16 @@ export function RoadmapPageHeader(props: RoadmapPageHeaderType) {
         </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/share-icons.tsx

@@ -1,43 +0,0 @@
-import { Box, Flex, Link } from '@chakra-ui/react';
-import HackerNewsIcon from 'components/icons/hackernews-square.svg';
-import FacebookIcon from 'components/icons/facebook-square.svg';
-import TwitterIcon from 'components/icons/twitter-square.svg';
-import RedditIcon from 'components/icons/reddit-square.svg';
-import { Icon } from '@chakra-ui/icons';
-import { getFacebookShareUrl, getHnShareUrl, getRedditShareUrl, getTwitterShareUrl } from '../lib/url';
-import { useEffect, useState } from 'react';
-
-type ShareIconProps = {
-  text: string;
-  url: string;
-}
-
-export function ShareIcons(props: ShareIconProps) {
-  const { text, url } = props;
-
-  const [offset, setOffset] = useState(0);
-
-  useEffect(() => {
-    const onScroll = () => setOffset(window.scrollY);
-
-    window.removeEventListener('scroll', onScroll);
-    window.addEventListener('scroll', onScroll, { passive: true });
-
-    return () => window.removeEventListener('scroll', onScroll);
-  }, []);
-
-  if (offset <= 100) {
-    return null;
-  }
-
-  return (
-    <Box pos='absolute' left={'-15px'} top={'190px'} height='100%' display={['none', 'none', 'none', 'block']}>
-      <Flex pos='sticky' top='100px' flexDir='column'>
-        <Link target='_blank' color='gray.500' href={getTwitterShareUrl({ url, text })} _hover={{ color: "gray.700" }}><Icon fill='currentColor' height='24px' width='24px' as={TwitterIcon} /></Link>
-        <Link target='_blank' color='gray.500' href={getFacebookShareUrl({ url, text })} _hover={{ color: "gray.700" }}><Icon fill='currentColor' height='24px' width='24px' as={FacebookIcon} /></Link>
-        <Link target='_blank' color='gray.500' href={getHnShareUrl({ url, text })} _hover={{ color: "gray.700" }}><Icon fill='currentColor' height='24px' width='24px' as={HackerNewsIcon} /></Link>
-        <Link target='_blank' color='gray.500' href={getRedditShareUrl({ text, url })} _hover={{ color: "gray.700" }}><Icon fill='currentColor' height='24px' width='24px' as={RedditIcon} /></Link>
-      </Flex>
-    </Box>
-  );
-}

components/teams-banner.tsx

@@ -1,22 +0,0 @@
-import { Box, Button, Container, Heading, Link, Text } from '@chakra-ui/react';
-import { event } from '../lib/gtag';
-
-export function TeamsBanner() {
-  return null;
-
-  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>
-  );
-}

content/guides.json

@@ -1,40 +1,9 @@
 [
-  {
-    "id": "session-based-authentication",
-    "title": "Session Based Authentication",
-    "description": "Learn what is Session Based Authentication and how to implement it in Node.js",
-    "isNew": true,
-    "type": "textual",
-    "authorUsername": "kamranahmedse",
-    "updatedAt": "2022-11-01T19:59:14.191Z",
-    "createdAt": "2022-11-01T19:59:14.191Z"
-  },
-  {
-    "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": false,
-    "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.",
     "isNew": false,
-    "type": "visual",
     "authorUsername": "kamranahmedse",
     "updatedAt": "2021-09-10T19:59:14.191Z",
     "createdAt": "2021-09-10T19:59:14.191Z"
@@ -44,7 +13,6 @@
     "title": "What are Web Vitals?",
     "description": "Learn what are the core web vitals and how to measure them.",
     "isNew": false,
-    "type":  "visual",
     "authorUsername": "kamranahmedse",
     "updatedAt": "2021-09-05T19:59:14.191Z",
     "createdAt": "2021-09-05T19:59:14.191Z"
@@ -54,7 +22,6 @@
     "title": "SLIs, SLOs and SLAs",
     "description": "Learn what are different indicators for performance identification of any service.",
     "isNew": false,
-    "type":  "visual",
     "authorUsername": "kamranahmedse",
     "updatedAt": "2021-08-31T19:59:14.191Z",
     "createdAt": "2021-08-31T19:59:14.191Z"
@@ -64,7 +31,6 @@
     "title": "What is CI and CD?",
     "description": "Learn the basics of CI/CD and how to implement that with GitHub Actions.",
     "isNew": false,
-    "type":  "visual",
     "authorUsername": "kamranahmedse",
     "updatedAt": "2021-07-09T19:59:14.191Z",
     "createdAt": "2021-07-09T19:59:14.191Z"
@@ -74,7 +40,6 @@
     "title": "SSO — Single Sign On",
     "description": "Learn the basics of SAML and understand how does Single Sign On work.",
     "isNew": false,
-    "type":  "visual",
     "authorUsername": "kamranahmedse",
     "updatedAt": "2021-07-01T19:59:14.191Z",
     "createdAt": "2021-07-01T19:59:14.191Z"
@@ -84,7 +49,6 @@
     "title": "OAuth — Open Authorization",
     "description": "Learn and understand what is OAuth and how it works",
     "isNew": false,
-    "type":  "visual",
     "authorUsername": "kamranahmedse",
     "updatedAt": "2021-06-28T19:59:14.191Z",
     "createdAt": "2021-06-28T19:59:14.191Z"
@@ -94,7 +58,6 @@
     "title": "JWT Authentication",
     "description": "Understand what is JWT authentication and how is it implemented",
     "isNew": false,
-    "type":  "visual",
     "authorUsername": "kamranahmedse",
     "updatedAt": "2021-06-20T19:59:14.191Z",
     "createdAt": "2021-06-20T19:59:14.191Z"
@@ -104,7 +67,6 @@
     "title": "Token Based Authentication",
     "description": "Understand what is token based authentication and how it is implemented",
     "isNew": false,
-    "type":  "visual",
     "authorUsername": "kamranahmedse",
     "updatedAt": "2021-06-02T20:59:14.191Z",
     "createdAt": "2021-06-02T20:59:14.191Z"
@@ -114,7 +76,6 @@
     "title": "Session Based Authentication",
     "description": "Understand what is session based authentication and how it is implemented",
     "isNew": false,
-    "type":  "visual",
     "authorUsername": "kamranahmedse",
     "updatedAt": "2021-05-26T20:59:14.191Z",
     "createdAt": "2021-05-26T20:59:14.191Z"
@@ -124,7 +85,6 @@
     "title": "Basic Authentication",
     "description": "Understand what is basic authentication and how it is implemented",
     "isNew": false,
-    "type":  "visual",
     "authorUsername": "kamranahmedse",
     "updatedAt": "2021-05-19T20:59:14.191Z",
     "createdAt": "2021-05-19T20:59:14.191Z"
@@ -134,7 +94,6 @@
     "title": "Character Encodings",
     "description": "Covers the basics of character encodings and explains ASCII vs Unicode",
     "isNew": false,
-    "type":  "visual",
     "authorUsername": "kamranahmedse",
     "updatedAt": "2021-05-14T20:59:14.191Z",
     "createdAt": "2021-05-14T20:59:14.191Z"
@@ -142,9 +101,8 @@
   {
     "id": "unfamiliar-codebase",
     "title": "Unfamiliar Codebase",
-    "description": "Tips on getting familiar with an unfamiliar codebase",
+    "description": "Tips on getting 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"
@@ -154,7 +112,6 @@
     "title": "Build it and they will come?",
     "description": "Why “build it and they will come” alone won’t work anymore",
     "isNew": false,
-    "type":  "textual",
     "authorUsername": "spekulatius",
     "updatedAt": "2021-05-04T12:59:14.191Z",
     "createdAt": "2021-05-04T12:59:14.191Z"
@@ -164,7 +121,6 @@
     "title": "DHCP in One Picture",
     "description": "Here is what happens when a new device joins the network.",
     "isNew": false,
-    "type":  "visual",
     "authorUsername": "kamranahmedse",
     "updatedAt": "2021-04-28T15:48:21.191Z",
     "createdAt": "2021-04-28T15:48:21.191Z"
@@ -174,7 +130,6 @@
     "title": "SSL vs TLS vs SSH",
     "description": "Quick tidbit on the differences between SSL, TLS, HTTPS and SSH",
     "isNew": false,
-    "type":  "visual",
     "authorUsername": "kamranahmedse",
     "updatedAt": "2021-04-22T15:48:21.191Z",
     "createdAt": "2021-04-22T15:48:21.191Z"
@@ -184,7 +139,6 @@
     "title": "Asymptotic Notation",
     "description": "Learn the basics of measuring the time and space complexity of algorithms",
     "isNew": false,
-    "type":  "visual",
     "authorUsername": "kamranahmedse",
     "updatedAt": "2021-04-03T15:48:21.191Z",
     "createdAt": "2021-04-03T15:48:21.191Z"
@@ -194,7 +148,6 @@
     "title": "Big-O Notation",
     "description": "Easy to understand explanation of Big-O notation without any fancy terms",
     "isNew": false,
-    "type":  "visual",
     "authorUsername": "kamranahmedse",
     "updatedAt": "2021-03-15T15:48:21.191Z",
     "createdAt": "2021-03-15T15:48:21.191Z"
@@ -204,7 +157,6 @@
     "title": "Random Numbers: Are they?",
     "description": "Learn how they are generated and why they may not be truly random.",
     "isNew": false,
-    "type":  "visual",
     "authorUsername": "kamranahmedse",
     "updatedAt": "2021-03-14T15:48:21.191Z",
     "createdAt": "2021-03-14T15:48:21.191Z"
@@ -214,7 +166,6 @@
     "title": "Scaling Databases",
     "description": "Learn the ups and downs of different database scaling strategies",
     "isNew": false,
-    "type":  "visual",
     "authorUsername": "kamranahmedse",
     "updatedAt": "2021-02-18T15:48:21.191Z",
     "createdAt": "2021-02-18T15:48:21.191Z"
@@ -224,8 +175,7 @@
     "title": "How does the internet work?",
     "description": "Learn the basics of internet and everything involved with this short video series",
     "isNew": false,
-    "type":  "textual",
-    "authorUsername": "kamranahmedse",
+    "authorUsername": "dmytrobol",
     "updatedAt": "2021-02-29T15:48:21.191Z",
     "createdAt": "2021-02-29T15:48:21.191Z"
   },
@@ -234,7 +184,6 @@
     "title": "Building a BitTorrent Client",
     "description": "Learn everything you need to know about BitTorrent by writing a client in Go",
     "isNew": false,
-    "type":  "textual",
     "authorUsername": "jesse",
     "updatedAt": "2021-01-17T15:48:21.191Z",
     "createdAt": "2021-01-17T15:48:21.191Z",
@@ -245,7 +194,6 @@
     "title": "Levels of Seniority",
     "description": "How to Step Up as a Junior, Mid Level or a Senior Developer?",
     "isNew": false,
-    "type":  "textual",
     "authorUsername": "kamranahmedse",
     "updatedAt": "2020-12-03T12:13:00.860Z",
     "createdAt": "2020-12-03T12:13:00.860Z"
@@ -255,7 +203,6 @@
     "title": "Design Patterns for Humans",
     "description": "A language agnostic, ultra-simplified explanation to design patterns",
     "isNew": false,
-    "type":  "textual",
     "authorUsername": "kamranahmedse",
     "updatedAt": "2019-10-09T12:00:00.860Z",
     "createdAt": "2019-01-23T17:00:00.860Z"
@@ -265,7 +212,6 @@
     "title": "Journey to HTTP/2",
     "description": "The evolution of HTTP. How it all started and where we stand today",
     "isNew": false,
-    "type":  "textual",
     "authorUsername": "kamranahmedse",
     "createdAt": "2018-12-04T12:00:00.860Z",
     "updatedAt": "2018-12-04T12:00:00.860Z",
@@ -276,7 +222,6 @@
     "title": "DNS in One Picture",
     "description": "Quick illustrative guide on how a website is found on the internet.",
     "isNew": false,
-    "type":  "visual",
     "authorUsername": "kamranahmedse",
     "updatedAt": "2018-12-04T12:00:00.860Z",
     "createdAt": "2018-12-04T17:00:00.860Z"
@@ -286,7 +231,6 @@
     "title": "HTTP Caching",
     "description": "Everything you need to know about web caching",
     "isNew": false,
-    "type":  "textual",
     "authorUsername": "kamranahmedse",
     "createdAt": "2018-11-29T17:00:00.860Z",
     "updatedAt": "2018-11-29T17:00:00.860Z"
@@ -296,7 +240,6 @@
     "title": "Brief History of JavaScript",
     "description": "How JavaScript was introduced and evolved over the years",
     "isNew": false,
-    "type":  "textual",
     "authorUsername": "kamranahmedse",
     "createdAt": "2017-10-28T17:00:00.860Z",
     "updatedAt": "2017-10-28T17:00:00.860Z"
@@ -306,7 +249,6 @@
     "title": "Proxy Servers",
     "description": "How do proxy servers work and what are forward and reverse proxies?",
     "isNew": false,
-    "type":  "textual",
     "authorUsername": "ebrahimbharmal007",
     "createdAt": "2017-10-24T17:00:00.860Z",
     "updatedAt": "2017-10-24T17:00:00.860Z"

content/guides/asymptotic-notation.md

@@ -1,3 +1,14 @@
+export const guideMeta = {
+    "title": "WebStorm — Project History",
+    "description": "Learn how to peek through the history of any git repository to learn how it grew.",
+    "url": "/guides/project-history",
+    "fileName": "project-history",
+    "featured": true,
+    "author": "kamranahmedse",
+    "updatedAt": "2020-07-16T19:59:14.191Z",
+    "createdAt": "2020-07-16T19:59:14.191Z"
+};
+
 Asymptotic notation is the standard way of measuring the time and space that an algorithm will consume as the input grows. In one of my last guides, I covered "Big-O notation" and a lot of you asked for a similar one for Asymptotic notation. You can find the [previous guide here](/guides/big-o-notation).
 
 [![](/guides/asymptotic-notation.png)](/guides/asymptotic-notation.png)

content/guides/basics-of-authentication.md

@@ -1,83 +0,0 @@
-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; 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.
+JavaScript was initially created by [Brendan Eich](https://twitter.com/BrendanEich) of NetScape and was first announced in a press release by Netscape in 1995. It has a bizarre history of naming; initally it was named `Mocha` by the creator, which was later renamed to `LiveScript`.  In 1996, about a year later after the release, NetScape decided to rename it to be `JavaScript` with hopes of capitalizing on the Java community (although JavaScript did not have any relationship with Java) and released Netscape 2.0 with the official support of JavaScript.
 
 ### ES1, ES2 and ES3
 In 1996, Netscape decided to submit it to [ECMA International](https://en.wikipedia.org/wiki/Ecma_International) with the hopes of getting it standardized. First edition of the standard specification was released in 1997 and the language was standardized. After the initial release, `ECMAScript` was continued to be worked upon and in no-time two more versions were released ECMAScript 2 in 1998 and ECMAScript 3 in 1999.

content/guides/http-basic-authentication.md

@@ -1,93 +0,0 @@
-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 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. 
+As users, we easily get frustrated by the buffering videos, the images that take seconds to load, pages that got stuck because the content is being loaded. Loading the resources from some cache is much faster than fetching the same from the originating server. It reduces latency, speeds up the loading of resources, decreases the load on server, cuts down the bandwidth costs etc. 
 
 ### Introduction
 
-What is 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. 
+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. 
 
 ![Web Cache](https://i.imgur.com/mJYVvTh.png)
 
@@ -11,9 +11,9 @@ What is a web cache? It is something that sits somewhere between the client and
 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's requests.
-- **Stale Content** is cached but expired content
-- **Fresh Content** is the content available in the 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 requests.
+- **Stale Content** is the cached but expired content
+- **Fresh Content** is the content available in cache that hasn't expired yet
 - **Cache Validation** is the process of contacting the server to check the validity of the cached content and get it updated for when it is going to expire
 - **Cache Invalidation** is the process of removing any stale content available in the cache
 
@@ -43,15 +43,15 @@ Unlike browser cache which serves a single user, proxy caches may serve hundreds
 
 #### Reverse Proxy Cache
 
-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 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.
 
 ![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 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 the defaults are set on these caches.
 
 ### Caching Headers
 
-So, how do we control the web cache? Whenever the server emits some response, it is accompanied 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.
+So, how do we control the web cache? Whenever the server emits some response, it is accompanied with some HTTP headers to guide the caches whether and how to cache this response. Content provider is the one that has to make sure to return proper HTTP headers to force the caches on how to cache the content.
 
 - [Expires](#expires)
 - [Pragma](#pragma)
@@ -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 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
+Before HTTP/1.1 and introduction of `Cache-Control`, there was `Expires` header which is simply a timestamp telling the caches how long should some content be considered fresh. Possible value to this header is absolute expiry date; where date has to be in GMT. Below is the sample header
 
 ```html
 Expires: Mon, 13 Mar 2017 12:22:00 GMT
 ```
 
-It should be noted that the date cannot be more than a year and if the date format is wrong, 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. 
+It should be noted that the date cannot be more than a year and if the date format is wrong, content will be considered stale. Also, the clock on cache has to be in sync with the clock on server, otherwise the desired results might not be achieved. 
 
-Although 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`.  
+Although, `Expires` header is still valid and is supported widely by the caches, preference should be given to HTTP/1.1 successor of it i.e. `Cache-Control`.  
 
 #### Pragma
 
-Another one from the old, pre HTTP/1.1 days, is `Pragma`. Everything that it could do is now possible using the cache-control header given below. However, one thing I would like to point out about it is, 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.
+Another one from the old, pre HTTP/1.1 days, is `Pragma`. Everything that it could do is now possible using the cache-control header given below. However, one thing I would like to point out about it is, you might see `Pragma: no-cache` being used here and there in hopes of stopping the response from being cached. It might not necessarily work; as HTTP specification discusses it in the request headers and there is no mention of it in the response headers. Rather `Cache-Control` header should be used to control the caching.
 
 #### Cache-Control
 
@@ -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 into 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 in to 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, 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. 
+**`must-revalidate`** it might happen sometimes that if you have network problems and the content cannot be retrieved from the server, browser may serve stale content without validation. `must-revalidate` avoids that. If this directive is present, it means that stale content cannot be served in any case and the data must be re-validated from the server before serving. 
 
 ```html
 Cache-Control: max-age=3600, public, must-revalidate
@@ -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 although not strictly the same but could be considered the 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 are although not strictly same but could be considered same. Weak etags might be useful for dynamic content, for example.
 
 Now you know what etags are but how does the browser make this request? by making a request to server while sending the available Etag in `If-None-Match` header.
 

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 received 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 recieved 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 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.
+- **Persistent Connections** As discussed above, in `HTTP/1.0` there was only one request per connection and the connection was closed as soon as the request was fulfilled which resulted in accute performance hit and latency problems. `HTTP/1.1` introduced the persistent connections i.e. **connections weren't closed by default** and were kept open which allowed multiple sequential requests. To close the connections, the header `Connection: close` had to be available on the request. Clients usually send this header in the last request to safely close the connection.
 
 - **Pipelining** It also introduced the support for pipelining, where the client could send multiple requests to the server without waiting for the response from server on the same connection and server had to send the response in the same sequence in which requests were received. But how does the client know that this is the point where first response download completes and the content for next response starts, you may ask! Well, to solve this, there must be `Content-Length` header present which clients can use to identify where the response ends and it can start waiting for the next response.
 
@@ -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 humongous 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 humungous 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 transferred 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 transfered per second (bits per second).
 
 The features of `SPDY` included, multiplexing, compression, prioritization, security etc. I am not going to get into the details of SPDY, as you will get the idea when we get into the nitty gritty of `HTTP/2` in the next section as I said `HTTP/2` is mostly inspired from SPDY.
 
@@ -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 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.
+Server push allows the server to decrease the roundtrips by pushing the data that it knows that client is going to demand. How it is done is, server sends a special frame called `PUSH_PROMISE` notifying the client that, "Hey, I am about to send this resource to you! Do not ask me for it." The `PUSH_PROMISE` frame is associated with the stream that caused the push to happen and it contains the promised stream ID i.e. the stream on which the server will send the resource to be pushed.
 
 #### 5. Request Prioritization
 
@@ -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 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.
+There was extensive discussion on whether security (through `TLS`) should be made mandatory for `HTTP/2` or not. In the end, it was decided not to make it mandatory. However, most vendors stated that they will only support `HTTP/2` when it is used over `TLS`. So, although `HTTP/2` doesn't require encryption by specs but it has kind of become mandatory by default anyway. With that out of the way, `HTTP/2` when implemented over `TLS` does impose some requirementsi.e. `TLS` version `1.2` or higher must be used, there must be a certain level of minimum keysizes, ephemeral keys are required etc.
 
 `HTTP/2` is here and it has already [surpassed SPDY in adaption](http://caniuse.com/#search=http2) which is gradually increasing. `HTTP/2` has alot to offer in terms of performance gain and it is about time we should start using it. 
 

content/guides/proxy-servers.md

@@ -1,4 +1,4 @@
-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:    
+Internet has connected people across the world using social media and audio/video calling features along with providing an overabundance of knowledge and tools. All this comes with an inherent danger of security and privacy breaches. In this guide we will talk about **proxies** which play a vital role in mitigating these risks. We will cover the following topics in this guide:    
 
 - [Proxy Server](#proxy-server)
 - [Forward Proxy Server](#forward-proxy-server)
@@ -7,34 +7,34 @@ The Internet has connected people across the world using social media and audio/
 
 ## 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 but rather just an illustration.    
+> NOTE: This is not an accurate description rather just an illustration.    
 
-Proxy servers serve as a single point of control making it easier to enforce security policies. It also provides caching mechanism which stores the requested web pages on the proxy server to improve performance. If the requested web-page is available in cache memory then instead of forwarding the request to the web-server it will send the cached webpage back to the client. This **saves big companies thousands of dollars** by reducing the 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 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 the 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 company'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. 
+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. 
 
 ![Forward Proxy Description](/guides/proxy/forward-proxy.png)    
-> NOTE: This is not an accurate description but rather just an illustration
+> NOTE: This is not an accurate description rather just an illustration
 
 ## Reverse Proxy Server    
 
-Reverse proxy servers are implemented on the **server side** instead of the client side. It **sits in front of multiple webservers** and manages 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 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 Description](/guides/proxy/reverse-proxy.png)    
-> NOTE: This is not an accurate description but rather just an illustration. Red lines represent the server's response and black lines represent the initial request from client(s).    
+> NOTE: This is not an accurate description rather just an illustration. Red lines represent server's response and black lines represent initial request from client(s).    
 
 ## Summary   
 
-A proxy server acts as a gateway between client *(you)* and the internet and separates end-users from the websites you browse. ***The position of the proxy server on the network determines whether it is a forward or a reverse proxy server***.    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 manage 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***.    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/session-based-authentication.md

@@ -1,199 +0,0 @@
-HTTP is the internet protocol that standardizes how clients and servers interact with each other. When you open a website, among other things, HTTP is the protocol that helps load the website in the browser.
-
-## HTTP is Stateless
-HTTP is a stateless protocol which means that each request made from the client to the server is treated as a standalone request; neither the client nor the server keeps track of the subsequent requests. Sessions allow you to change that; with sessions, the server has a way to associate some information with the client so that when the same client requests the server, it can retrieve that information.
-
-In this guide, we will learn what is Session-Based Authentication and how to implement it in Node.js. We also have a separate [visual guide on Session-Based Authentication](/guides/session-authentication) as well that explains the topic visually.
-
-## What is Session-Based Authentication?
-Session-based authentication is a stateful authentication technique where we use sessions to keep track of the authenticated user. Here is how Session Based Authentication works:
-
-* User submits the login request for authentication.
-* Server validates the credentials. If the credentials are valid, the server initiates a session and stores some information about the client. This information can be stored in memory, file system, or database. The server also generates a unique identifier that it can later use to retrieve this session information from the storage. Server sends this unique session identifier to the client.
-* Client saves the session id in a cookie and this cookie is sent to the server in each request made after the authentication.
-* Server, upon receiving a request, checks if the session id is present in the request and uses this session id to get information about the client.
-
-And that is how session-based authentication works.
-
-## Session-Based Authentication in Node.js
-Now that we know what session-based authentication is, let's see how we can implement session-based authentication in Node.js.
-
-Please note that, for the sake of simplicity, I have intentionally kept the project strictly relevant to the Session Based Authentication and have left out a lot of details that a production-ready application may require. Also, if you don't want to follow along, project [codebase can be found on GitHub](https://github.com/kamranahmedse/node-session-auth-example).
-
-First things first, create an empty directory that will be holding our application.
-
-```shell
-mkdir session-auth-example
-```
-Now run the following command to setup a sample `package.json` file:
-```shell
-npm init -y
-```
-Next, we need to install the dependencies:
-```shell
-npm install express express-session
-```
-`Express` is the application framework, and `express-session` is the package that helps work with sessions easily.
-
-### Setting up the server
-Now create an `index.js` file at the root of the project with the following content:
-
-```javascript
-const express = require('express');
-const sessions = require('express-session');
-
-const app = express();
-
-app.use(sessions({
-  secret: "some secret",
-  cookie: {
-    maxAge: 1000 * 60 * 60 * 24 // 24 hours
-  },
-  resave: true,
-  saveUninitialized: false,
-}));
-
-app.use(express.json());
-app.use(express.urlencoded({extended: true}));
-
-// @todo register routes
-
-app.listen(3000, () => {
-  console.log(`Server Running at port 3000`);
-});
-```
-The important piece to note here is the `express-session` middleware registration which automatically handles the session initialization, cooking parsing and session data retrieval, and so on. In our example here, we are passing the following configuration options:
-* `secret`: This is used to sign the session ID cookie. Using a secret that cannot be guessed will reduce the ability to hijack a session.
-* `cookie`: Object containing the configuration for session id cookie.
-* `resave`: Forces the session to be saved back to the session store, even if the session data was never modified during the request.
-* `saveUninitialized`: Forces an "uninitialized" session to be saved to the store, i.e., saves a session to the store even if the session was not initiated.
-
-Another important option is `store` which we can configure to change how/where the session data is stored on the server. By default, this data is stored in the memory, i.e., `MemoryStore`.
-
-Look at the [express-session documentation](https://github.com/expressjs/session) to learn more about the available options.
-
-### Creating Handlers
-Create a directory called the `handlers` at the project's root. This is the directory where we will be placing all the route-handling functions.
-
-Now let's create the homepage route, which will show the welcome message and a link to log out for the logged-in users and redirect to the login screen for the logged-out users. Create a file at `handlers/home.js` with the following content.
-
-```javascript
-module.exports = function HomeHandler(req, res) {
-  if (!req.session.userid) {
-    return res.redirect('/login');
-  }
-
-  res.setHeader('Content-Type', 'text/HTML')
-  res.write(`
-    <h1>Welcome back ${req.session.userid}</h1>
-    <a href="/logout">Logout</a>
-  `);
-
-  res.end()
-}
-```
-
-At the top of this function, you will notice the check `req.session.userid`. `req.session` is automatically populated using the session cookie by the `express-session` middleware that we registered earlier. `req.session.userid` is one of the data fields that we will set to store the `userid` of the logged in user.
-
-Next, we need to register this handler with a route. Open the `index.js` file at the root of the project and register the following route:
-
-```javascript
-const HomeHandler = require('./handlers/home.js');
-
-app.get('/', HomeHandler);
-```
-
-Next, we have the login page, redirecting the user to the home screen if the user is logged in or showing the login form. Create a file at `handlers/login.js` with the following content:
-
-```javascript
-module.exports = function LoginHandler(req, res) {
-  if (req.session.userid) {
-    return res.redirect('/');
-  }
-
-  res.setHeader('Content-Type', 'text/HTML')
-  res.write(`
-    <h1>Login</h1>
-    <form method="post" action="/process-login">
-      <input type="text" name="username" placeholder="Username" /> <br>
-      <input type="password" name="password" placeholder="Password" /> <br>
-      <button type="submit">Login</button>
-    </form>
-  `);
-
-  res.end();
-}
-```
-Again, at the top of the function, we are simply checking if we have `userid` in the session (which means the user is logged in). If the user is logged in, we redirect them to the homepage; if not, we show the login screen. In the login form, we have the method of `post`, and we submit the form to `/process-login`. Please note that, for the sake of simplicity, we have a simple HTML string returned in the response, but in a real-world application, you will probably have a separate view file.
-
-Let's first register this page and then implement `/process-login` endpoint. Open the `index.js` file from the root of the project and register the following route:
-
-```javascript
-const LoginHandler = require('./handlers/login.js');
-
-app.get('/login', LoginHandler);
-```
-
-Next, we have to implement the functionality to process the login form submissions. Create a file at `handlers/process-login.js` with the following content:
-
-```javascript
-module.exports = function processLogin(req, res) {
-  if (req.body.username !== 'admin' || req.body.password !== 'admin') {
-    return res.send('Invalid username or password);
-  }
-
-  req.session.userid = req.body.username;
-
-  res.redirect('/');
-}
-```
-
-As you can see, we are simply checking that the username and password should both be `admin` and `admin` for a user to authenticate successfully. Upon finding valid credentials, we set the `userid` in the session by updating `req.session.userid`. Similarly, you can set any data in the session. For example, if we wanted to store the user role, we would do the following:
-
-```javascript
-req.session.role = 'admin'
-```
-
-And later access this value out of the session anywhere in the subsequent requests.
-
-Register this route in the `index.js` file at the root of the project:
-
-```javascript
-const ProcessLoginHandler = require('./handlers/process-login.js');
-
-app.post('/process-login', ProcessLoginHandler);
-```
-
-Finally, we have the logout functionality. Create a file at `handlers/logout.js` with the following content:
-
-```javascript
-module.exports = function Logout(req, res)  {
-  req.session.destroy();
-  res.redirect('/');
-}
-```
-
-We reset the session by calling `req.session.destroy()` and then redirecting the user to the homepage. Register the logout handler in the `index.js` file using the following:
-
-```javascript
-const LogoutHandler = require('./handlers/logout.js');
-
-app.get('/logout', LogoutHandler);
-```
-
-## Running the Application
-Open the `package.json` file and register the `start` script as follows:
-
-```javascript
-"scripts": {
-  "start": "node index.js"
-},
-``` 
-
-Now you can start the application by running the following command:
-
-```shell
-npm run start
-```
-
-Now, if you open up your browser and visit the project at `http://localhost:3000` you will be able to see the Session-Based Authentication in action.

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 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.
+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.
 
 ![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 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:
+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:
 
 * 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 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).
+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).
 
 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 cryptography, 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 cryptograpy, 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
 
-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.
+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 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.
+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.
 
-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.
+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.
 
 
 Why doesn't "build it and they will come" work anymore?
 -------------------------------------------------------
 
-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.
+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.
 
 ### 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 a 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 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 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.
+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.
 
-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, 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).
+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).
 
-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.
+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.
 
 ### Tool by Tool
 
-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.
+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.
 
-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.
+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.
 
 ### 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, and 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, 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 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 and 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 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.
+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.
 
 
 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 a Lead Developer for multiple organizations.
+[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.

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 adding content that
+continue growing the site however I can. My focus at the moment is not making money from it and just add 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.md) when you
+to [follow the contribution guidelines](https://github.com/kamranahmedse/developer-roadmap/tree/master/contributing) when you
 decide to contribute.
 
 ## Can I redistribute the content?

content/pages/pdfs.md

@@ -1,27 +0,0 @@
-<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)
-* **Computer Science Roadmap** - [Roadmap Link](https://roadmap.sh/computer-science) / [PDF Link](https://roadmap.sh/pdfs/computer-science.pdf)
-* **QA Roadmap** - [Roadmap Link](https://roadmap.sh/qa) / [PDF Link](https://roadmap.sh/pdfs/qa.pdf)
-* **ASP.NET Core Roadmap** - [Roadmap Link](https://roadmap.sh/aspnet-core) / [PDF Link](https://roadmap.sh/pdfs/aspnet-core.pdf)
-* **Flutter Roadmap** - [Roadmap Link](https://roadmap.sh/flutter) / [PDF Link](https://roadmap.sh/pdfs/flutter.pdf)
-* **Software Architect Roadmap** - [Roadmap Link](https://roadmap.sh/software-architect) / [PDF Link](https://roadmap.sh/pdfs/software-architect.pdf)
-* **Software Design and Architecture Roadmap** - [Roadmap Link](https://roadmap.sh/software-design-architecture) / [PDF Link](https://roadmap.sh/pdfs/software-design-architecture.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)
-* **GraphQL Roadmap** - [Roadmap Link](https://roadmap.sh/graphql) / [PDF Link](https://roadmap.sh/pdfs/graphql.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/golang) / [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,14 +46,6 @@
     "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
@@ -104,15 +96,6 @@
     },
     "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
@@ -125,7 +108,7 @@
         "devops roadmap 2022",
         "sre roadmap 2022",
         "operations roadmap 2022",
-        "guide to becoming a devops engineer",
+        "guide to becoming a devops enginer",
         "devops roadmap",
         "sre roadmap",
         "site reliability engineer roadmap",
@@ -162,67 +145,10 @@
     },
     "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
   },
-  {
-    "seo": {
-      "title": "Computer Science Roadmap: Curriculum for the self taught developer",
-      "description": "Computer Science study plan with free resources for the self-taught and bootcamp grads wanting to learn Computer Science.",
-      "keywords": [
-        "computer science roadmap",
-        "computer science",
-        "computer science roadmap 2022",
-        "guide to computer science",
-        "software engineer roadmap",
-        "software engineer roadmap 2022",
-        "self-taught computer science roadmap",
-        "computer science skills",
-        "computer science skills test",
-        "cs roadmap",
-        "computer science curriculum",
-        "cs curriculum",
-        "skills for computer science",
-        "what is computer science",
-        "computer science quiz",
-        "computer science interview questions"
-      ]
-    },
-    "title": "Computer Science",
-    "description": "Computer Science curriculum with free resources for a self-taught developer.",
-    "featuredTitle": "Computer Science",
-    "type": "tool",
-    "featuredDescription": "Curriculum with free resources for a self-taught developer.",
-    "isTextHeavy": false,
-    "isNew": true,
-    "isCommunity": false,
-    "featured": true,
-    "jsonUrl": "/project/computer-science.json",
-    "author": {
-      "name": "Kamran Ahmed",
-      "url": "https://twitter.com/kamranahmedse"
-    },
-    "pdfUrl": "/pdfs/computer-science.pdf",
-    "relatedRoadmaps": [
-      "frontend",
-      "backend",
-      "devops",
-      "software-design-architecture"
-    ],
-    "contentPathsFilePath": "/roadmaps/103-computer-science/content-paths.json",
-    "id": "computer-science",
-    "metaPath": "/roadmaps/103-computer-science/meta.json",
-    "isUpcoming": false
-  },
   {
     "seo": {
       "title": "React Developer Roadmap: Learn to become a React developer",
@@ -264,14 +190,6 @@
     },
     "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
@@ -303,6 +221,8 @@
     "isCommunity": false,
     "featured": true,
     "jsonUrl": "/project/angular.json",
+    "landingPath": "/roadmaps/104-angular/landscape.md",
+    "resourcesPath": "/roadmaps/104-angular/resources.md",
     "versions": [
       "latest",
       "2018",
@@ -313,14 +233,6 @@
       "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
@@ -361,7 +273,6 @@
     "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",
@@ -376,13 +287,6 @@
     },
     "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
@@ -417,7 +321,6 @@
     "featuredDescription": "Step by step guide to learn JavaScript in 2022",
     "isTextHeavy": false,
     "isCommunity": false,
-    "isNew": true,
     "featured": true,
     "jsonUrl": "/project/javascript.json",
     "versions": [
@@ -431,15 +334,6 @@
     },
     "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
@@ -482,96 +376,10 @@
       "name": "Kamran Ahmed",
       "url": "https://twitter.com/kamranahmedse"
     },
-    "relatedRoadmaps": [
-      "frontend",
-      "javascript",
-      "react",
-      "nodejs"
-    ],
     "id": "android",
     "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
-  },
   {
     "seo": {
       "title": "Learn to become a modern Python developer",
@@ -609,14 +417,6 @@
       "url": "https://twitter.com/kamranahmedse"
     },
     "contentPathsFilePath": "/roadmaps/108-python/content-paths.json",
-    "relatedRoadmaps": [
-      "backend",
-      "devops",
-      "golang",
-      "java",
-      "javascript",
-      "nodejs"
-    ],
     "id": "python",
     "metaPath": "/roadmaps/108-python/meta.json",
     "isUpcoming": false
@@ -624,7 +424,7 @@
   {
     "seo": {
       "title": "Learn to become a Go developer",
-      "description": "Community driven, articles, resources, guides, interview questions, quizzes for Go development. Learn to become a modern Go developer by following the steps, skills, resources and guides listed in this roadmap.",
+      "description": "Community driven, articles, resources, guides, interview questions, quizzes for Go development. Learn to become a modern React developer by following the steps, skills, resources and guides listed in this roadmap.",
       "keywords": [
         "guide to becoming a golang developer",
         "guide to becoming a go developer",
@@ -671,14 +471,6 @@
       "url": "https://twitter.com/kamranahmedse"
     },
     "contentPathsFilePath": "/roadmaps/109-golang/content-paths.json",
-    "relatedRoadmaps": [
-      "backend",
-      "devops",
-      "python",
-      "java",
-      "javascript",
-      "nodejs"
-    ],
     "id": "golang",
     "metaPath": "/roadmaps/109-golang/meta.json"
   },
@@ -731,71 +523,9 @@
     },
     "pdfUrl": "/pdfs/java.pdf",
     "contentPathsFilePath": "/roadmaps/110-java/content-paths.json",
-    "relatedRoadmaps": [
-      "backend",
-      "devops",
-      "python",
-      "golang",
-      "javascript",
-      "nodejs"
-    ],
     "id": "java",
     "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": {
       "title": "DBA Roadmap: Learn to become a database administrator with PostgreSQL",
@@ -837,10 +567,6 @@
     "featured": true,
     "detailed": false,
     "versions": [],
-    "relatedRoadmaps": [
-      "backend",
-      "devops"
-    ],
     "id": "postgresql-dba",
     "metaPath": "/roadmaps/111-postgresql-dba/meta.json",
     "isUpcoming": false
@@ -885,7 +611,6 @@
     "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": {
@@ -894,15 +619,6 @@
     },
     "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
@@ -931,288 +647,14 @@
     "featuredTitle": "QA",
     "type": "role",
     "featuredDescription": "Step by step guide to becoming a modern QA Engineer in 2022",
+    "isUpcoming": true,
     "featured": true,
-    "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/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"
-  },
-  {
-    "seo": {
-      "title": "Learn to become a modern ASP.NET core developer",
-      "description": "Community driven, articles, resources, guides, interview questions, quizzes for asp.net core development. Learn to become a modern ASP.NET core developer by following the steps, skills, resources and guides listed in this roadmap.",
-      "keywords": [
-        "guide to becoming a developer",
-        "guide to becoming an asp.net core developer",
-        "asp.net core developer",
-        "asp.net core engineer",
-        "asp.net core skills",
-        "guide to asp.net core",
-        "asp.net developer roadmap",
-        "asp net developer roadmap",
-        "asp developer roadmap",
-        "asp.net core roadmap",
-        "asp.net core skills",
-        "asp.net core skills test",
-        "skills for asp.net core",
-        "cloud development",
-        "what is asp.net core",
-        "asp.net core quiz",
-        "asp.net core interview questions",
-        "asp.net core engineer roadmap",
-        "asp.net core developer roadmap",
-        "become an asp.net core developer",
-        "asp.net core developer career path",
-        "asp.net core developer",
-        "modern asp.net core developer"
-      ]
-    },
-    "title": "ASP.NET Core Developer",
-    "description": "Step by step guide to becoming an ASP.NET core developer in 2022",
-    "featuredTitle": "ASP.NET Core",
-    "type": "role",
-    "featuredDescription": "Step by step guide to becoming an ASP.NET Core Developer in 2022",
-    "isTextHeavy": false,
-    "isCommunity": false,
-    "isUpcoming": false,
-    "featured": true,
-    "isNew": true,
-    "jsonUrl": "/project/aspnet-core.json",
-    "versions": [
-      "latest",
-      "2018",
-      "2017"
-    ],
-    "author": {
-      "name": "Moien Tajik",
-      "url": "https://twitter.com/MoienTajik"
-    },
-    "pdfUrl": "/pdfs/aspnet-core.pdf",
-    "relatedRoadmaps": [
-      "backend",
-      "devops",
-      "python",
-      "golang",
-      "java",
-      "nodejs"
-    ],
-    "contentPathsFilePath": "/roadmaps/116-aspnet-core/content-paths.json",
-    "id": "aspnet-core",
-    "metaPath": "/roadmaps/116-aspnet-core/meta.json"
-  },
-  {
-    "seo": {
-      "title": "GraphQL Roadmap",
-      "description": "Learn GraphQL with this step by step guide and resources.",
-      "keywords": [
-        "guide to learn graphql",
-        "graphql roadmap",
-        "graphql roadmap",
-        "modern graphql roadmap",
-        "fullstack graphql roadmap",
-        "design and architecture roadmap",
-        "scalable design roadmap",
-        "design architecture patterns roadmap",
-        "application architectures"
-      ]
-    },
-    "title": "GraphQL",
-    "description": "Step by step guide to learn GraphQL in 2022",
-    "featuredTitle": "GraphQL",
-    "type": "tool",
-    "featuredDescription": "Step by Step guide to learn GraphQL in 2022",
-    "isTextHeavy": false,
-    "isCommunity": false,
-    "isNew": true,
-    "isUpcoming": false,
-    "featured": true,
-    "jsonUrl": "/project/graphql.json",
-    "author": {
-      "name": "Denis Badurina",
-      "url": "https://twitter.com/enisdenjo"
-    },
-    "pdfUrl": "/pdfs/graphql.pdf",
-    "relatedRoadmaps": [
-      "frontend",
-      "backend",
-      "nodejs",
-      "javascript",
-      "react",
-      "vue",
-      "angular"
-    ],
-    "contentPathsFilePath": "/roadmaps/116-graphql/content-paths.json",
-    "id": "graphql",
-    "metaPath": "/roadmaps/116-graphql/meta.json"
-  },
-  {
-    "seo": {
-      "title": "Learn to become a modern Flutter developer",
-      "description": "Community driven, articles, resources, guides, interview questions, quizzes for flutter development. Learn to become a modern Flutter developer by following the steps, skills, resources and guides listed in this roadmap.",
-      "keywords": [
-        "guide to becoming a flutter developer",
-        "guide to becoming a flutter developer",
-        "flutter developer",
-        "flutter engineer",
-        "flutter skills",
-        "guide to flutter",
-        "flutter roadmap",
-        "flutter skills",
-        "flutter skills test",
-        "skills for flutter",
-        "what is flutter",
-        "flutter quiz",
-        "flutter interview questions",
-        "flutter engineer roadmap",
-        "flutter developer roadmap",
-        "become a flutter developer",
-        "flutter developer career path",
-        "flutter developer",
-        "modern flutter developer"
-      ]
-    },
-    "title": "Flutter Developer",
-    "description": "Step by step guide to becoming a Flutter developer in 2022",
-    "featuredTitle": "Flutter",
-    "type": "role",
-    "featuredDescription": "Step by step guide to becoming a Flutter Developer in 2022",
-    "isTextHeavy": false,
-    "isCommunity": false,
-    "isUpcoming": false,
-    "featured": true,
-    "isNew": true,
-    "jsonUrl": "/project/flutter.json",
-    "versions": [
-      "latest",
-      "2018",
-      "2017"
-    ],
-    "pdfUrl": "/pdfs/flutter.pdf",
-    "relatedRoadmaps": [
-      "backend",
-      "devops",
-      "python",
-      "golang",
-      "java",
-      "nodejs"
-    ],
-    "contentPathsFilePath": "/roadmaps/117-flutter/content-paths.json",
-    "id": "flutter",
-    "metaPath": "/roadmaps/117-flutter/meta.json"
+    "metaPath": "/roadmaps/113-qa/meta.json"
   }
 ]

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

@@ -38,7 +38,6 @@
   "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",
@@ -62,8 +61,6 @@
   "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",
@@ -84,66 +81,47 @@
   "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",
   "testing-your-apps:other-options": "/roadmaps/100-frontend/content/115-testing-your-apps/104-other-options.md",
   "testing-your-apps:mocha": "/roadmaps/100-frontend/content/115-testing-your-apps/105-mocha.md",
   "testing-your-apps:chai": "/roadmaps/100-frontend/content/115-testing-your-apps/106-chai.md",
   "testing-your-apps:ava": "/roadmaps/100-frontend/content/115-testing-your-apps/107-ava.md",
   "testing-your-apps:jasmine": "/roadmaps/100-frontend/content/115-testing-your-apps/108-jasmine.md",
-  "auth-strategies": "/roadmaps/100-frontend/content/116-auth-strategies/readme.md",
   "type-checkers": "/roadmaps/100-frontend/content/116-type-checkers/readme.md",
   "type-checkers:typescript": "/roadmaps/100-frontend/content/116-type-checkers/100-typescript.md",
   "type-checkers:flow": "/roadmaps/100-frontend/content/116-type-checkers/101-flow.md",
   "progressive-web-apps": "/roadmaps/100-frontend/content/117-progressive-web-apps/readme.md",
-  "progressive-web-apps:storage": "/roadmaps/100-frontend/content/117-progressive-web-apps/100-storage.md",
-  "progressive-web-apps:web-sockets": "/roadmaps/100-frontend/content/117-progressive-web-apps/101-web-sockets.md",
-  "progressive-web-apps:server-sent-events": "/roadmaps/100-frontend/content/117-progressive-web-apps/102-server-sent-events.md",
-  "progressive-web-apps:service-workers": "/roadmaps/100-frontend/content/117-progressive-web-apps/103-service-workers.md",
-  "progressive-web-apps:location": "/roadmaps/100-frontend/content/117-progressive-web-apps/104-location.md",
-  "progressive-web-apps:notifications": "/roadmaps/100-frontend/content/117-progressive-web-apps/105-notifications.md",
-  "progressive-web-apps:device-orientation": "/roadmaps/100-frontend/content/117-progressive-web-apps/106-device-orientation.md",
-  "progressive-web-apps:payments": "/roadmaps/100-frontend/content/117-progressive-web-apps/107-payments.md",
-  "progressive-web-apps:credentials": "/roadmaps/100-frontend/content/117-progressive-web-apps/108-credentials.md",
-  "progressive-web-apps:prpl-pattern": "/roadmaps/100-frontend/content/117-progressive-web-apps/109-prpl-pattern.md",
-  "progressive-web-apps:rail-model": "/roadmaps/100-frontend/content/117-progressive-web-apps/110-rail-model.md",
-  "progressive-web-apps:performance-metrics": "/roadmaps/100-frontend/content/117-progressive-web-apps/111-performance-metrics.md",
-  "progressive-web-apps:lighthouse": "/roadmaps/100-frontend/content/117-progressive-web-apps/112-lighthouse.md",
-  "progressive-web-apps:browser-devtools": "/roadmaps/100-frontend/content/117-progressive-web-apps/113-browser-devtools.md",
+  "progressive-web-apps:performance": "/roadmaps/100-frontend/content/117-progressive-web-apps/101-performance.md",
+  "progressive-web-apps:apis": "/roadmaps/100-frontend/content/117-progressive-web-apps/100-apis.md",
   "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",
   "server-side-rendering:vue-js": "/roadmaps/100-frontend/content/118-server-side-rendering/102-vue-js/readme.md",
   "server-side-rendering:vue-js:nuxt-js": "/roadmaps/100-frontend/content/118-server-side-rendering/102-vue-js/100-nuxt-js.md",
-  "server-side-rendering:svelte": "/roadmaps/100-frontend/content/118-server-side-rendering/103-svelte/readme.md",
-  "server-side-rendering:svelte:svelte-kit": "/roadmaps/100-frontend/content/118-server-side-rendering/103-svelte/100-svelte-kit.md",
   "graphql": "/roadmaps/100-frontend/content/119-graphql/readme.md",
   "graphql:apollo": "/roadmaps/100-frontend/content/119-graphql/100-apollo.md",
   "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",
   "static-site-generators:jekyll": "/roadmaps/100-frontend/content/120-static-site-generators/104-jekyll.md",
   "static-site-generators:hugo": "/roadmaps/100-frontend/content/120-static-site-generators/105-hugo.md",
-  "static-site-generators:astro": "/roadmaps/100-frontend/content/120-static-site-generators/106-astro.md",
+  "static-site-generators:gridsome": "/roadmaps/100-frontend/content/120-static-site-generators/106-gridsome.md",
   "static-site-generators:eleventy": "/roadmaps/100-frontend/content/120-static-site-generators/107-eleventy.md",
   "mobile-applications": "/roadmaps/100-frontend/content/121-mobile-applications/readme.md",
   "mobile-applications:react-native": "/roadmaps/100-frontend/content/121-mobile-applications/100-react-native.md",
@@ -153,6 +131,6 @@
   "desktop-applications": "/roadmaps/100-frontend/content/122-desktop-applications/readme.md",
   "desktop-applications:electron": "/roadmaps/100-frontend/content/122-desktop-applications/100-electron.md",
   "desktop-applications:tauri": "/roadmaps/100-frontend/content/122-desktop-applications/101-tauri.md",
-  "desktop-applications:flutter": "/roadmaps/100-frontend/content/122-desktop-applications/102-flutter.md",
-  "bonus-content": "/roadmaps/100-frontend/content/123-bonus-content.md"
+  "desktop-applications:proton-native": "/roadmaps/100-frontend/content/122-desktop-applications/102-proton-native.md",
+  "web-assembly": "/roadmaps/100-frontend/content/123-web-assembly.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 colorScheme='yellow' badgeText='Read' href='/guides/what-is-internet'>Introduction to Internet</BadgeLink>
+<BadgeLink badgeText='Watch' 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. 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.
+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.
 
 <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>
@@ -8,5 +8,4 @@ HTTP is the `TCP/IP` based application layer communication protocol which standa
 <BadgeLink colorScheme='yellow' badgeText='Read' href='https://developer.mozilla.org/en-US/docs/Web/HTTP/Overview'>An overview of HTTP</BadgeLink>
 <BadgeLink colorScheme='yellow' badgeText='Read' href='https://kamranahmed.info/blog/2016/08/13/http-in-depth'>Journey to HTTP/2</BadgeLink>
 <BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.smashingmagazine.com/2021/08/http3-core-concepts-part1/'>HTTP/3 From A To Z: Core Concepts</BadgeLink>
-<BadgeLink colorScheme='yellow' badgeText='Read' href='https://thenewstack.io/http-3-is-now-a-standard-why-use-it-and-how-to-get-started/'>HTTP/3 Is Now a Standard: Why Use It and How to Get Started</BadgeLink>
 <BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=iYM2zFP3Zn0'>HTTP Crash Course & Exploration</BadgeLink>

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

@@ -4,9 +4,8 @@ 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/104-what-is-domain-name.md

@@ -1,6 +1,6 @@
 # Domain Name
 
-A domain name is a unique, easy-to-remember address used to access websites, such as ‘google.com’, and ‘facebook.com’. Users can connect to websites using domain names thanks to the Domain Name System (DNS).
+A domain name is a unique, easy-to-remember address used to access websites, such as ‘google.com’, and ‘facebook.com’. Users can connect to websites using domain names thanks to the DNS system.
 
 <ResourceGroupTitle>Free Content</ResourceGroupTitle>
 <BadgeLink colorScheme='yellow' badgeText='Read' href='https://developer.mozilla.org/en-US/docs/Learn/Common_questions/What_is_a_domain_name'>What is a Domain Name?</BadgeLink>

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

@@ -5,8 +5,6 @@ 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 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='/guides/what-is-internet'>Introduction to Internet</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,9 +3,6 @@
 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' 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>
-<BadgeLink badgeText='Read' colorScheme='yellow' href='https://htmlcheatsheet.com'>HTML Cheatsheet</BadgeLink>
-<BadgeLink badgeText='Course' colorScheme='green' href='https://www.scaler.com/topics/html'>Scaler: HTML</BadgeLink>
+<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>

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

@@ -1,11 +1,9 @@
 # Semantic HTML
 
-Semantic element clearly describes its meaning to both the browser and the developer. In HTML, semantic element are the type of elements that can be used to define different parts of a web page such as `<form>`, `<table>`, `<article>`, `<header>`, `<footer>`, etc.
+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>
-<BadgeLink badgeText='Read' colorScheme='yellow' href='https://www.freecodecamp.org/news/html-best-practices/'>HTML Best Practices – How to Build a Better HTML-Based Website</BadgeLink>
-<BadgeLink badgeText='Read' colorScheme='yellow' href='https://blog.hubspot.com/website/semantic-html'>Semantic HTML: What It Is and How It Improves Your Site</BadgeLink>
-<BadgeLink badgeText='Read' colorScheme='yellow' href='https://html.com/semantic-markup'>Semantic Markup</BadgeLink>
+
+

content/roadmaps/100-frontend/content/101-html/102-forms-and-validations.md

@@ -5,5 +5,3 @@ Before submitting data to the server, it is important to ensure all required for
 <ResourceGroupTitle>Free Content</ResourceGroupTitle>
 <BadgeLink badgeText='Read' colorScheme='yellow' href='https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation'>MDN Web Docs: Client-side form validation</BadgeLink>
 <BadgeLink badgeText='Read' colorScheme='yellow' href='https://web.dev/learn/forms/'>Learn Forms by web.dev</BadgeLink>
-<BadgeLink badgeText='Read' colorScheme='yellow' href='https://www.w3schools.com/js/js_validation.asp'>W3Schools: JavaScript Form Validation</BadgeLink>
-

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

@@ -1,13 +1,8 @@
 # Accessibility
-
 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='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>
-<BadgeLink badgeText='Read' colorScheme='yellow' href='https://developer.mozilla.org/en-US/docs/Web/Accessibility'>MDN Accessibility</BadgeLink>
-<BadgeLink badgeText='Read' colorScheme='yellow' href='https://web.dev/accessibility'>Accessibility for Developers by Google</BadgeLink>
-<BadgeLink badgeText='Course' colorScheme='green' href='https://www.udacity.com/course/web-accessibility--ud891'>Web Accessibility by Udacity</BadgeLink>
-<BadgeLink badgeText='Read' colorScheme='yellow' href='https://thenewstack.io/accessibility-as-an-essential-part-of-the-inclusive-developer-experience/'>Accessibility as an Essential Part of the Inclusive Developer Experience</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>

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

@@ -3,12 +3,8 @@
 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' 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='Read' colorScheme='yellow' href='https://html.com'>HTML For Beginners The Easy Way</BadgeLink>
-<BadgeLink badgeText='Course' colorScheme='green' href='https://www.internetingishard.com/html-and-css/'>Web Development Basics</BadgeLink>
+<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='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://youtu.be/mJgBOIoGihA'>HTML Full Course for Beginners | Complete All-in-One Tutorial </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 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://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>

content/roadmaps/100-frontend/content/102-css/101-making-layouts.md

@@ -1,6 +1,6 @@
 # Making layouts
 
-Float, grid, flexbox, positioning, display and box model are some of the key topics that are used for making layouts. Use the resources below to learn about these topics:
+Float, grid, flexbox, positioning, display and box model are some of the key topics that are used for making layouts. Use the resources below to learn about these topics: 
 
 <ResourceGroupTitle>Free Content</ResourceGroupTitle>
 
@@ -10,8 +10,3 @@ Float, grid, flexbox, positioning, display and box model are some of the key top
 <BadgeLink colorScheme='yellow' badgeText='Read' href='https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/'>Positioning Types: How Do They Differ?</BadgeLink>
 <BadgeLink colorScheme='yellow' badgeText='Read' href='https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model'>The Box Model</BadgeLink>
 <BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.freecodecamp.org/news/the-css-display-property-display-none-display-table-inline-block-and-more/'>The CSS Display Property</BadgeLink>
-<BadgeLink colorScheme='yellow' badgeText='Read' href='https://css-tricks.com/snippets/css/a-guide-to-flexbox'>A Complete Guide to Flexbox</BadgeLink>
-<BadgeLink colorScheme='yellow' badgeText='Read' href='https://css-tricks.com/snippets/css/complete-guide-grid'>A Complete Guide to Grid</BadgeLink>
-<BadgeLink badgeText='Watch' href='https://cssgrid.io/'>Learn CSS Grid - Course</BadgeLink>
-<BadgeLink badgeText='Watch' href='https://scrimba.com/learn/cssgrid'>Learn CSS Grid for free</BadgeLink>
-<BadgeLink colorScheme='yellow' badgeText='Read' href='https://thenewstack.io/get-grid-last-css-grid-template-markup/'>Get on the Grid at Last with the CSS Grid Layout Module</BadgeLink>

content/roadmaps/100-frontend/content/102-css/102-responsive-design-and-media-queries.md

@@ -6,7 +6,4 @@ Responsive Web Designing is the technique to make your webpages look good on all
 
 <BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.w3schools.com/css/css_rwd_intro.asp'>Responsive Web Design</BadgeLink>
 <BadgeLink colorScheme='yellow' badgeText='Read' href='https://web.dev/learn/design/'>Learn Responsive Design</BadgeLink>
-<BadgeLink colorScheme='yellow' badgeText='Read' href='https://kinsta.com/blog/responsive-web-design/'>The Beginner’s Guide to Responsive Web Design</BadgeLink>
-<BadgeLink colorScheme='yellow' badgeText='Read' href='https://webflow.com/blog/responsive-web-design'>The guide to responsive web design in 2022</BadgeLink>
-<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=VQraviuwbzU'>5 simple tips to making responsive layouts the easy way</BadgeLink>
 <BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=srvUrASNj0s'>Introduction To Responsive Web Design</BadgeLink>

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

@@ -3,20 +3,13 @@
 CSS or Cascading Style Sheets is the language used to style the frontend of any website. CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.
 
 <ResourceGroupTitle>Free Content</ResourceGroupTitle>
-
-<BadgeLink colorScheme='green' badgeText='Course' href='https://www.theodinproject.com//'>The Odin Project</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>
-<BadgeLink badgeText='Watch' href='https://youtu.be/n4R2E7O-Ngo'>CSS Complete Course</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='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='yellow' badgeText='Read' href='https://www.joshwcomeau.com/'>Joshw Comeau's CSS Hack Blog Posts</BadgeLink>
-<BadgeLink colorScheme='yellow' badgeText='Read' href='https://100dayscss.com'>100 Days CSS Challenge</BadgeLink>
-<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.scaler.com/topics/css'>CSS Tutorial | Scaler</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='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,15 +1,12 @@
 # DOM Manipulation
 
-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.  
+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.
 
 <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,9 +4,6 @@ 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='Watch' href='https://www.youtube.com/watch?v=3PHXvlpOkf4'>Build 15 JavaScript Projects - Vanilla JavaScript</BadgeLink>
-<BadgeLink badgeText='Read' colorScheme="yellow" href='https://codeloop.org/learn-modern-javascript-es6-es7-es8'>Modern JavaScript ES6, ES7 & ES8</BadgeLink>
-<BadgeLink badgeText='Read' colorScheme="yellow" href='https://thenewstack.io/fat-arrow-points-way-easy-es6-goodies-busy-js-devs/'>Easy ES6 Goodies for Busy JavaScript Developers</BadgeLink>
+<BadgeLink badgeText='Course' colorScheme='green' 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,6 +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' colorScheme="yellow" href='https://dev.to/lydiahallie/javascript-visualized-event-loop-3dif'>JavaScript Visualized (7 Part Series)</BadgeLink>
+<BadgeLink badgeText='Read' 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>
-<BadgeLink badgeText='Read' colorScheme="yellow" href='https://blog.greenroots.info/series/javascript-promises'>Demystifying JavaScript Promises</BadgeLink>

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

@@ -1,9 +1,3 @@
-<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.
@@ -11,11 +5,6 @@ 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='Watch' href='https://javascript30.com/'>Build 30 Javascript projects in 30 days</BadgeLink>
 <BadgeLink badgeText='Course' colorScheme='green' href='https://github.com/workshopper/javascripting'>Learn the basics of JavaScript</BadgeLink>
-<BadgeLink badgeText='Course' colorScheme="green" href='https://www.scaler.com/topics/course/javascript-beginners'>JavaScript for Beginners </BadgeLink>

content/roadmaps/100-frontend/content/104-version-control-systems/100-basic-usage-of-git.md

@@ -3,9 +3,6 @@
 [Git](https://git-scm.com/) is a free and open source distributed version control system designed to handle everything from small to very large projects with speed and efficiency.
 
 <ResourceGroupTitle>Free Content</ResourceGroupTitle>
-<BadgeLink badgeText='Read' colorScheme='yellow' href='https://marklodato.github.io/visual-git-guide/index-en.html'>Visual Git Guide</BadgeLink>
-<BadgeLink badgeText='Watch' href='https://youtu.be/apGV9Kg7ics'>Git and Github full course</BadgeLink>
 <BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=zbKdDsNNOhg'>Version Control System Introduction</BadgeLink>
 <BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=SWYqp7iY_Tc'>Git & GitHub Crash Course For Beginners</BadgeLink>
 <BadgeLink badgeText='Watch' href='https://youtu.be/Y9XZQO1n_7c?t=21'>Learn Git in 20 Minutes</BadgeLink>
-<BadgeLink badgeText='Read' colorScheme='yellow' href='https://thenewstack.io/tutorial-git-for-absolutely-everyone/'>Tutorial: Git for Absolutely Everyone</BadgeLink>

content/roadmaps/100-frontend/content/104-version-control-systems/readme.md

@@ -6,5 +6,3 @@ Version control systems allow you to track changes to your codebase/files over t
 <BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=zbKdDsNNOhg'>Version Control System Introduction</BadgeLink>
 <BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=SWYqp7iY_Tc'>Git & GitHub Crash Course For Beginners</BadgeLink>
 <BadgeLink badgeText='Watch' href='https://youtu.be/Y9XZQO1n_7c?t=21'>Learn Git in 20 Minutes</BadgeLink>
-<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://git-scm.com/docs'>Git Documentation</BadgeLink>
-<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.atlassian.com/git'>Learn Git by Atlassian</BadgeLink>

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

@@ -4,9 +4,8 @@
 
 <ResourceGroupTitle>Free Content</ResourceGroupTitle>
 
-<BadgeLink badgeText='Read' colorScheme='yellow' href='https://docs.github.com/en/get-started/quickstart/hello-world'>GitHub: Quickstart</BadgeLink>
-<BadgeLink badgeText='Read' colorScheme='yellow' href='https://skills.github.com/'>Learn Github by doing</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>
+<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>

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

@@ -4,6 +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>
-<BadgeLink badgeText='Read' href='https://thenewstack.io/development-connect-git-to-gitlab-for-small-projects/'>Development: Connect git to GitLab for Small Projects</BadgeLink>

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

@@ -4,5 +4,5 @@
 
 <ResourceGroupTitle>Free Content</ResourceGroupTitle>
 
-<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>
+<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>

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='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>
+<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>

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

@@ -2,12 +2,11 @@
 
 HTTPS is a secure way to send data between a web server and a browser.
 
-Hypertext transfer protocol secure (HTTPS) is the secure version of HTTP, which is the primary protocol used to send data between a web browser and a website. HTTPS is encrypted in order to increase security of data transfer. This is particularly important when users transmit sensitive data, such as by logging into a bank account, email service, or health insurance provider
-
 <ResourceGroupTitle>Free Content</ResourceGroupTitle>
 <BadgeLink badgeText='Read' colorScheme="yellow" href='https://www.cloudflare.com/en-gb/learning/ssl/what-is-https/'>What is HTTPS?</BadgeLink>
 <BadgeLink badgeText='Read' colorScheme="yellow" href='https://developers.google.com/web/fundamentals/security/encrypt-in-transit/why-https'>Why HTTPS Matters</BadgeLink>
 <BadgeLink badgeText='Read' colorScheme="yellow" href='https://developers.google.com/web/fundamentals/security/encrypt-in-transit/enable-https'>Enabling HTTPS on Your Servers</BadgeLink>
-<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/106-web-security-knowledge/103-owasp-security-risks.md

@@ -7,4 +7,3 @@ OWASP or Open Web Application Security Project is an online community that produ
 <BadgeLink badgeText='Read' colorScheme="yellow" href='https://github.com/0xRadi/OWASP-Web-Checklist'>OWASP Web Application Security Testing Checklist</BadgeLink>
 <BadgeLink badgeText='Read' colorScheme="yellow" href='https://sucuri.net/guides/owasp-top-10-security-vulnerabilities-2021/'>OWASP Top 10 Security Risks</BadgeLink>
 <BadgeLink badgeText='Read' colorScheme="yellow" href='https://cheatsheetseries.owasp.org/cheatsheets/AJAX_Security_Cheat_Sheet.html'>OWASP Cheatsheets</BadgeLink>
-<BadgeLink badgeText='Read' colorScheme="yellow" href='https://thenewstack.io/owasp-top-10-a-guide-to-the-worst-software-vulnerabilities/'>OWASP Top 10: A Guide to the Worst Software Vulnerabilities</BadgeLink>

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

@@ -9,4 +9,3 @@ Web security refers to the protective measures taken by the developers to protec
 <BadgeLink badgeText='Read' colorScheme="yellow" href='https://sucuri.net/guides/owasp-top-10-security-vulnerabilities-2021/'>OWASP Top 10 Security Risks</BadgeLink>
 <BadgeLink badgeText='Read' colorScheme="yellow" href='https://cheatsheetseries.owasp.org/cheatsheets/AJAX_Security_Cheat_Sheet.html'>OWASP Cheatsheets</BadgeLink>
 <BadgeLink badgeText='Read' colorScheme="yellow" href='https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP'>Content Security Policy (CSP)</BadgeLink>
-<BadgeLink badgeText='Read' colorScheme="yellow" href='https://www.youtube.com/playlist?list=PLH8n_ayg-60J9i3nsLybper-DR3zJw6Z5'>OWASP ZAP Step-by-Step Tutorial</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

@@ -1,7 +0,0 @@
-# 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='Official Documentation' href='https://sass-lang.com/documentation'>Official Documentation</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='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='Official Website' href='https://postcss.org/'>Official Website</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='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='Official Website' href='https://lesscss.org/'>Official Website</BadgeLink>
-<BadgeLink colorScheme='blue' badgeText='Official Documentation' href='https://lesscss.org/usage/'>Official Documentation</BadgeLink>
+<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 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,7 +1 @@
-# 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>
+# Task runners

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

@@ -6,4 +6,3 @@ Webpack is a module bundler. Its main purpose is to bundle JavaScript files for
 
 <BadgeLink colorScheme='blue' badgeText='Official Website' href='https://webpack.js.org/'>Webpack Official Website</BadgeLink>
 <BadgeLink colorScheme='blue' badgeText='Official Documentation' href='https://webpack.js.org/concepts/'>Webpack Documentation</BadgeLink>
-<BadgeLink colorScheme='blue' badgeText='Official Documentation' href='https://www.valentinog.com/blog/webpack'>A Complete Guide to Webpack 5</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='Official Website' href='https://rollupjs.org/'>Official Website and Docs</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Read' 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='Official Documentation' href='https://vitejs.dev/guide'>Vite Documentation</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='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 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>
+<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>
 

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

@@ -1,7 +1,6 @@
 # Prettier
 
-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.
+Prettier is an opinionated code formatter with support for JavaScript, HTML, CSS, and more.
 
 <ResourceGroupTitle>Free Content</ResourceGroupTitle>
-<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>
+<BadgeLink colorScheme='blue' badgeText='Website' href='https://prettier.io'>Prettier Website</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' href='https://www.youtube.com/watch?v=qhuFviJn-es'>ESLint Quickstart - find errors automatically</BadgeLink>
+<BadgeLink badgeText='Watch' colorScheme="red" 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='Official Website' colorScheme="blue" href='https://standardjs.com/'>Official Website</BadgeLink>
+<BadgeLink badgeText='Read' 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='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>
+<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>

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

@@ -2,9 +2,4 @@
 
 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!
-
-<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>
+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! 

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

@@ -9,10 +9,9 @@
 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='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 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 badgeText='Course' colorScheme='green' href='https://egghead.io/courses/the-beginner-s-guide-to-react'>The Beginner's Guide to React</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='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=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='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 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='green' badgeText='Course' href='https://www.youtube.com/watch?v=PhggNGsSQyg'>RxJS Crash Course</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 Website' href='https://ngrx.io/docs'>Official Documentation</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Official Docs' 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 badgeText='Watch' href='https://www.youtube.com/watch?v=nuHBHD32iw8'>NgRx Course</BadgeLink>
+<BadgeLink colorScheme='green' badgeText='Course' href='https://www.youtube.com/watch?v=nuHBHD32iw8'>NgRx Course</BadgeLink>

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

@@ -10,4 +10,3 @@ Angular is a component based front-end development framework built on TypeScript
 
 <ResourceGroupTitle>Free Content</ResourceGroupTitle>
 <BadgeLink badgeText='Read' colorScheme="yellow" href='https://angular.io/start'>Official - Getting started with Angular</BadgeLink>
-<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=3qBXWUpoPHo'>Angular for Beginners Course [Full Front End Tutorial with TypeScript]</BadgeLink>

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

@@ -9,8 +9,7 @@
 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='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>
-<BadgeLink colorScheme='yellow' badgeText='Read' href='https://thenewstack.io/meet-vue-js-flexible-javascript-framework/'>Meet Vue.js, the Flexible JavaScript Framework</BadgeLink>
+<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>

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

@@ -1,10 +0,0 @@
-# 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>
-<BadgeLink colorScheme='yellow' badgeText='Read' href='https://thenewstack.io/all-about-svelte-the-much-loved-state-driven-web-framework/'>All About Svelte, the Much-Loved, State-Driven Web Framework</BadgeLink>
-<BadgeLink colorScheme='purple' badgeText='Watch' href='https://thenewstack.io/svelte-and-the-future-of-front-end-development/'>Svelte and the Future of Frontend Development</BadgeLink>

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

@@ -1,6 +0,0 @@
-# SolidJS
-
-Solid is a reactive JavaScript toolkit for building user interfaces without a virtual DOM. To ensure that only the relevant code is executed when a state update occurs, it compiles templates down to real DOM nodes once and wraps modifications into fine-grained reactions.
-
-<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://www.solidjs.com/'>Official Website - SolidJS</BadgeLink>
-<BadgeLink colorScheme='blue' badgeText='Official Tutorial' href='https://www.solidjs.com/tutorial/introduction_basics'>SolidJS Tutorial</BadgeLink>

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='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 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 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='yellow' badgeText='Read' href='https://emotion.sh/docs/introduction'>Official Website and Docs</BadgeLink>
+<BadgeLink colorScheme='blue' 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,3 +1 @@
-# 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
+# Modern css

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

@@ -1,8 +1 @@
-# 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>
+# Web components

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='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>
+<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>

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='Official Website' href='https://bulma.io/'>Bulma Website</BadgeLink>
+<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='green' badgeText='Course' href='https://scrimba.com/learn/bulma'>Learn 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>
+<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>

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='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>
+<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>

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='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 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 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='Official Website' href='https://www.radix-ui.com/'>Official Website</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Framework 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

@@ -1,8 +0,0 @@
-# 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

@@ -1,7 +0,0 @@
-# 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='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>
+<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>

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 Website' href='https://testing-library.com/docs/react-testing-library/intro/'>React Testing Library</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Official Getting Started' href='https://testing-library.com/docs/react-testing-library/intro/'>React Testing Library</BadgeLink>