Update DevOps Roadmap spacing

Update tutorial video from youtube

.gitignore

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

components/custom-ad.tsx

@@ -9,13 +9,14 @@ function getPageSlug() {
 
 export const CustomAd = () => {
   const slug = getPageSlug();
+
   if (slug !== 'devops') {
     return null;
   }
 
   return (
     <Link
-      href='https://thenewstack.io/ebooks/devops/cloud-native-devops-2019/?utm_source=Roadmap.sh&utm_medium=Banner&utm_campaign=Roadmap+DevOps+Ebook'
+      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'
@@ -31,13 +32,13 @@ export const CustomAd = () => {
       onClick={() => {
         event({
           category: 'SponsorClick',
-          action: `TNS EBook Redirect`,
-          label: `Clicked TNS EBook Link`
+          action: `Ambassador EBook Redirect`,
+          label: `Clicked Ambassador EBook Link`
         });
       }}
     >
       <Image
-        src='https://i.imgur.com/fEKq19S.png'
+        src='https://i.imgur.com/0bH1Vl6.png'
         alt='Custom Logo'
         height={['100px', '100px', '100px', 'auto']}
         width='130'
@@ -45,9 +46,9 @@ export const CustomAd = () => {
       />
       <Flex as='span' flexDirection='column' justifyContent='space-between'>
         <Box as='span' p='10px'>
-          <Heading as='span' fontSize='14px' mb='5px' display='block'>Free DevOps eBook</Heading>
+          <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 all about doing DevOps the Cloud Native way with this free ebook from our partner, The New Stack
+            Learn about API Gateways, Microservices, Load Balancing, and more with this free eBook.
           </Box>
         </Box>
         <Box as='span'

components/footer.tsx

@@ -1,12 +1,14 @@
-import { Box, Container, Flex, Image, Link, Stack, Text } from '@chakra-ui/react';
+import { Box, Container, Flex, Image, Link, SimpleGrid, Stack, Text } from '@chakra-ui/react';
 import siteConfig from '../content/site.json';
 import { CustomAd } from './custom-ad';
 import React from 'react';
+import { event } from '../lib/gtag';
 
 function NavigationLinks() {
   return (
     <>
-      <Stack isInline d={['none', 'none', 'flex']} color='gray.400' fontWeight={600} spacing='30px'>
+      <Stack isInline display={['none', 'none', 'flex']} justifyContent='center' 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>
@@ -14,7 +16,7 @@ function NavigationLinks() {
         <Link _hover={{ color: 'white' }} href={siteConfig.url.youtube} target='_blank'>YouTube</Link>
       </Stack>
 
-      <Stack d={['flex', 'flex', 'none']} color='gray.400' fontWeight={600} spacing={0}>
+      <Stack display={['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' }}
@@ -36,32 +38,84 @@ export function Footer() {
       <Container maxW='container.md'>
         <NavigationLinks />
 
-        <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
+        <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' />
             </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 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 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>
+            <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' }}
+                onClick={() => {
+                  event({
+                    category: 'PartnerClick',
+                    action: `TNS Referral`,
+                    label: `TNS Referral - Footer`,
+                  });
+                }}
+                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' }}
+                onClick={() => {
+                  event({
+                    category: 'PartnerClick',
+                    action: `TNS Referral`,
+                    label: `TNS Referral - Footer`,
+                  });
+                }}
+                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' }}
+                onClick={() => {
+                  event({
+                    category: 'PartnerClick',
+                    action: `TNS Referral`,
+                    label: `TNS Referral - Footer`,
+                  });
+                }}
+                color='gray.400' mx='10px'>Cloud-Native</Link>
+            </Text>
+          </Box>
+        </SimpleGrid>
       </Container>
 
       <CustomAd />

components/global-header.tsx

@@ -1,16 +1,25 @@
 import { useState } from 'react';
 import { HamburgerIcon } from '@chakra-ui/icons';
-import { Box, CloseButton, Container, Flex, IconButton, Image, Link, Stack, Text } from '@chakra-ui/react';
+import { Box, CloseButton, Container, Flex, IconButton, 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 } = props;
+  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'
+    }
+  } : {};
 
   return <Link
     borderBottomWidth={0}
@@ -18,6 +27,8 @@ function MenuLink(props: MenuLinkProps) {
     _hover={{ textDecoration: 'none', borderBottomColor: 'white' }}
     fontWeight={500}
     href={link}
+    target={target}
+    {...gradientProp}
   >
     {text}
   </Link>;
@@ -29,7 +40,13 @@ function DesktopMenuLinks() {
            fontSize='15px'>
       <MenuLink text={'Roadmaps'} link={'/roadmaps'} />
       <MenuLink text={'Guides'} link={'/guides'} />
-      <MenuLink text={'Videos'} link={'/watch'} />
+
+      <MenuLink
+        target={'_blank'}
+        text={'Hiring a DevRel'}
+        isFancy
+        link={'https://docs.google.com/forms/d/e/1FAIpQLSesFpPxgKx_8-L5hm7fw6NQpgGixrMGC4Cg3M8NHPQhFfSajQ/viewform'}
+      />
 
       <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/home/featured-roadmaps-list.tsx

@@ -15,17 +15,23 @@ export const upcomingRoadmaps = [
     id: 'react-native'
   },
   {
-    type: 'Skill Based',
-    title: 'TypeScript',
-    description: 'Step by step guide to learn TypeScript in 2022',
-    id: 'typescript'
-  },
-  {
-    type: 'Skill Based',
-    title: 'Rust',
-    description: 'Step by step guide to learn Rust in 2022',
-    id: 'rust'
+    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) {

components/icons/facebook-square.svg

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

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

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

@@ -0,0 +1 @@
+<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/roadmap/content-drawer.tsx

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

components/roadmap/roadmap-page-header.tsx

@@ -23,6 +23,7 @@ import { AtSignIcon, ChatIcon, DownloadIcon } from '@chakra-ui/icons';
 import React from 'react';
 import { SIGNUP_EMAIL_INPUT_NAME, SIGNUP_FORM_ACTION } from '../../pages/signup';
 import { event } from '../../lib/gtag';
+import { TNSAlert } from './tns-alert';
 
 type RoadmapPageHeaderType = {
   roadmap: RoadmapType;
@@ -116,7 +117,7 @@ function RoadmapSubscriber({ roadmapTitle }: { roadmapTitle: string }) {
           <ModalCloseButton />
           <ModalBody p={6}>
             <Heading mb='5px' fontSize='2xl'>Subscribe</Heading>
-            <Text fontSize={'md'} color='gray.700'>Enter your below to receive updates to this roadmap.</Text>
+            <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',
@@ -139,12 +140,14 @@ function RoadmapSubscriber({ roadmapTitle }: { roadmapTitle: string }) {
 export function RoadmapPageHeader(props: RoadmapPageHeaderType) {
   const { roadmap } = props;
 
+  const hasTNSAlert = ['frontend', 'backend', 'devops'].includes(roadmap.id);
+
   return (
     <Box
       pt={['25px', '20px', '45px']}
       pb={['20px', '15px', '30px']}
       borderBottomWidth={1}
-      mb='30px'
+      mb='50px'
     >
       <Container maxW='container.md' position='relative'>
         <NewAlertBanner />
@@ -161,7 +164,7 @@ export function RoadmapPageHeader(props: RoadmapPageHeaderType) {
         <Flex justifyContent='space-between' alignItems={'center'} mt='20px'>
           <Stack isInline flex={1}>
             <Button
-              d={['flex', 'flex']}
+              display={['flex', 'flex']}
               as={Link}
               href={'/roadmaps'}
               size='xs'
@@ -172,7 +175,7 @@ export function RoadmapPageHeader(props: RoadmapPageHeaderType) {
               _hover={{ textDecoration: 'none' }}
             >
               &larr;
-              <Text as='span' d={['none', 'inline']} ml='5px'>
+              <Text as='span' display={['none', 'inline']} ml='5px'>
                 All Roadmaps
               </Text>
             </Button>
@@ -180,7 +183,7 @@ export function RoadmapPageHeader(props: RoadmapPageHeaderType) {
             <RoadmapDownloader roadmapTitle={roadmap.featuredTitle} />
             <RoadmapSubscriber roadmapTitle={roadmap.featuredTitle} />
 
-            <Box flex={1} justifyContent='flex-end' d='flex'>
+            <Box flex={1} justifyContent='flex-end' display='flex'>
               <Button
                 as={Link}
                 href={`${siteConfig.url.issue}?title=[Suggestion] ${roadmap.title}`}
@@ -198,21 +201,21 @@ export function RoadmapPageHeader(props: RoadmapPageHeaderType) {
           </Stack>
         </Flex>
         {isInteractiveRoadmap(roadmap.id) && (
-          <Text
-            mt='30px'
-            mb={['-37px', '-32px', '-47px']}
-            fontWeight={500}
-            fontSize='14px'
-            bg='white'
-            borderWidth={1}
-            p='5px 7px'
-            rounded='3px'
-          >
-            <Badge pos='relative' top={'-1px'} mr='6px' colorScheme='yellow'>
-              New
-            </Badge>
-            Resources are here, try clicking any nodes.
-          </Text>
+          <Box mt='30px' mb={hasTNSAlert ? ['-53px', '-48px', '-63px'] : ['-37px', '-32px', '-47px']} borderWidth={1} rounded='3px'>
+            { hasTNSAlert && <TNSAlert roadmapName={roadmap.featuredTitle} />}
+            <Text
+              fontWeight={500}
+              fontSize='14px'
+              bg='white'
+              p='5px 7px'
+              rounded='3px'
+            >
+              <Badge pos='relative' top={'-1px'} mr='6px' colorScheme='yellow'>
+                New
+              </Badge>
+              Resources are here, try clicking any nodes.
+            </Text>
+          </Box>
         )}
       </Container>
     </Box>

components/roadmap/tns-alert.tsx

@@ -0,0 +1,52 @@
+import { Box, Link, Text } from '@chakra-ui/react';
+import { ExternalLinkIcon } from '@chakra-ui/icons';
+import React from 'react';
+import { event } from '../../lib/gtag';
+
+type TNSAlertProps = {
+  roadmapName: string;
+};
+
+export function TNSAlert(props: TNSAlertProps) {
+  const { roadmapName } = props;
+
+  return (
+    <Text
+      fontWeight={500}
+      fontSize='14px'
+      bg='gray.100'
+      p='5px 7px'
+      rounded='2px 2px 0 0'
+      borderBottomWidth={1}
+    >
+      <Box as='span' display={['none', 'none', 'inline']}>Get the latest {roadmapName} news from our sister site&nbsp;
+        <Link
+          href={'https://thenewstack.io?utm_source=roadmap-sh&utm_medium=Referral&utm_campaign=Banner'}
+          target='_blank' textDecoration='underline'
+          onClick={() => {
+            event({
+              category: 'PartnerClick',
+              action: `TNS Referral`,
+              label: `TNS Referral - ${roadmapName}`,
+            });
+          }}
+          fontWeight={600}>TheNewStack.io <ExternalLinkIcon />
+        </Link>
+      </Box>
+      <Box as='span' display={['inline', 'inline', 'none']}>Get latest {roadmapName} news on &nbsp;
+        <Link
+          href={'https://thenewstack.io?utm_source=roadmap-sh&utm_medium=Referral&utm_campaign=Banner'}
+          target='_blank' textDecoration='underline'
+          onClick={() => {
+            event({
+              category: 'PartnerClick',
+              action: `TNS Referral`,
+              label: `TNS Referral - ${roadmapName}`,
+            });
+          }}
+          fontWeight={600}>TheNewStack.io <ExternalLinkIcon />
+        </Link>
+      </Box>
+    </Text>
+  );
+}

components/share-icons.tsx

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

@@ -2,6 +2,8 @@ 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'>

content/guides.json

@@ -1,4 +1,14 @@
 [
+  {
+    "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",
@@ -13,7 +23,7 @@
     "id": "basics-of-authentication",
     "title": "Basics of Authentication",
     "description": "Learn the basics of Authentication and Authorization",
-    "isNew": true,
+    "isNew": false,
     "type": "textual",
     "authorUsername": "kamranahmedse",
     "updatedAt": "2022-09-21T19:59:14.191Z",
@@ -132,7 +142,7 @@
   {
     "id": "unfamiliar-codebase",
     "title": "Unfamiliar Codebase",
-    "description": "Tips on getting getting familiar with an unfamiliar codebase",
+    "description": "Tips on getting familiar with an unfamiliar codebase",
     "isNew": false,
     "type":  "visual",
     "authorUsername": "kamranahmedse",

content/guides/asymptotic-notation.md

@@ -1,14 +1,3 @@
-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/http-basic-authentication.md

@@ -20,7 +20,7 @@ When the browser first requests the server, the server tries to check the availa
 
 ```text
 401 Unauthorized
-WWWW-Authenticate: Basic realm='user_pages'
+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.

content/guides/journey-to-http2.md

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

content/guides/proxy-servers.md

@@ -16,21 +16,21 @@ Proxy servers serve as a single point of control making it easier to enforce sec
      
 ## Forward Proxy Server    
 
-A forward proxy is generally implemented on the client side and **sits in front of multiple clients** or client sources. Forward proxy servers are mainly used by companies to **manage internet usage** of their employees and **restrict content**. It is also used as a **firewall** to secure the company's network by blocking any request which would pose threat to the companies's network. Proxy servers are also used to **bypass geo-restriction** and browse content that might be blocked in the user's country. It enables users to **browse anonymously**, as the proxy server masks their details from the website's servers. 
+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. 
 
 ![Forward Proxy Description](/guides/proxy/forward-proxy.png)    
 > NOTE: This is not an accurate description but rather just an illustration
 
 ## Reverse Proxy Server    
 
-Reverse proxy servers are implemented on the **server side** instead of the client side. It **sits in front of multiple webservers** and manages the incoming requests by forwarding them to the web servers. It provides anonymity for the **back-end web servers and not the client**. Reverse proxy servers are generally used to perform tasks such as **authentication, content caching, and encryption/decryption** on behalf of the web server. These tasks would **hog CPU cycles** on the web server and degrade 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 incoming requests by forwarding them to the web servers. It provides anonymity for the **back-end web servers and not the client**. Reverse proxy servers are generally used to perform tasks such as **authentication, content caching, and encryption/decryption** on behalf of the web server. These tasks would **hog CPU cycles** on the web server and degrade the performance of the website by introducing a high amount of delay in loading the webpage. Reverse proxies are also used as **load balancers** to distribute the incoming traffic efficiently among the web servers but it is **not optimized** for this task. In essence, a reverse proxy server is a gateway to a web-server or group of web-servers. 
 
 ![Reverse Proxy Description](/guides/proxy/reverse-proxy.png)    
-> NOTE: This is not an accurate description but rather just an illustration. Red lines represent server's response and black lines represent initial request from client(s).    
+> NOTE: This is not an accurate description but rather just an illustration. Red lines represent the server's response and black lines represent the 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 manages the incoming requests by forwarding them to the web servers. 
+A proxy server acts as a gateway between client *(you)* and the internet and separates end-users from the websites you browse. ***The position of the proxy server on the network determines whether it is a forward or a reverse proxy server***.    A Forward proxy is implemented on the client side and **sits in front of multiple clients** or client sources and forwards requests to the web server. Reverse proxy servers are implemented on the **server side** it **sits in front of multiple webservers** and manage 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.    
 

content/guides/session-based-authentication.md

@@ -0,0 +1,199 @@
+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 tank the performance of our download. Therefore, it's important to **pipeline** our requests such that we keep up a constant pressure of some number of unfulfilled requests. This can increase the throughput of our connection by an order of magnitude.
+Network round-trips are expensive, and requesting each block one by one will absolutely thank the performance of our download. Therefore, it's important to **pipeline** our requests such that we keep up a constant pressure of some number of unfulfilled requests. This can increase the throughput of our connection by an order of magnitude.
 
 ![Two email threads simulating peer connections. The thread on the left shows a request followed by a reply, repeated three times. The thread on the left sends three requests, and receives three replies in quick succession.](/guides/torrent-client/pipelining.png)
 

content/guides/what-is-internet.md

@@ -49,13 +49,13 @@ HTTP is the standard protocol by which webpages are transferred over the Interne
 
 ## Encryption and Public Keys
 
-Cryptography is what keeps our communication secure on the Internet. In this short video, you will learn the basics of cryptograpy, SSL/TLS, and how they help make the communication on the Internet secure.
+Cryptography is what keeps our communication secure on the Internet. In this short video, you will learn the basics of cryptography, SSL/TLS, and how they help make the communication on the Internet secure.
 
 <iframe width="100%" height="400" src="https://www.youtube.com/embed/ZghMPWGXexs" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
 
 ## Cybersecurity and Crime
 
-In this video, you will learn about the basics of cybersecurity and common cybercrimes
+Cybersecurity refers to the protective measures against criminal activity accomplished through using a network, technological devices, and the internet.In this video, you will learn about the basics of cybersecurity and common cybercrimes.
 
 <iframe width="100%" height="400" src="https://www.youtube.com/embed/AuYNXgO_f3Y" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
 

content/pages/about.md

@@ -51,7 +51,7 @@ be:
 * Becoming a sponsor
 
 Just make sure
-to [follow the contribution guidelines](https://github.com/kamranahmedse/developer-roadmap/tree/master/contributing) when you
+to [follow the contribution guidelines](https://github.com/kamranahmedse/developer-roadmap/tree/master/contributing.md) when you
 decide to contribute.
 
 ## Can I redistribute the content?

content/pages/pdfs.md

@@ -8,15 +8,20 @@ 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/go) / [PDF Link](https://roadmap.sh/pdfs/go.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

@@ -174,6 +174,55 @@
     "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",
@@ -575,7 +624,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 React 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 Go 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",
@@ -1002,5 +1051,168 @@
     ],
     "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"
   }
-]
+]

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

@@ -97,18 +97,30 @@
   "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: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",
+  "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",
   "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",
@@ -118,6 +130,8 @@
   "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",
@@ -129,7 +143,7 @@
   "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:gridsome": "/roadmaps/100-frontend/content/120-static-site-generators/106-gridsome.md",
+  "static-site-generators:astro": "/roadmaps/100-frontend/content/120-static-site-generators/106-astro.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",
@@ -139,6 +153,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:proton-native": "/roadmaps/100-frontend/content/122-desktop-applications/102-proton-native.md",
-  "web-assembly": "/roadmaps/100-frontend/content/123-web-assembly.md"
+  "desktop-applications:flutter": "/roadmaps/100-frontend/content/122-desktop-applications/102-flutter.md",
+  "bonus-content": "/roadmaps/100-frontend/content/123-bonus-content.md"
 }

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

@@ -8,4 +8,5 @@ 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

@@ -5,6 +5,7 @@ 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>

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 DNS system.
+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).
 
 <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/101-html/100-learn-the-basics.md

@@ -4,5 +4,8 @@ HTML stands for HyperText Markup Language. It is used on the frontend and gives
 
 <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>

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

@@ -1,9 +1,11 @@
 # Semantic HTML
 
-Semantic element clearly describes its meaning to both the browser and the developer.
+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.
 
 <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,3 +5,5 @@ 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,10 +1,13 @@
 # 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.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>

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

@@ -4,8 +4,11 @@ HTML stands for HyperText Markup Language. It is used on the frontend and gives
 
 <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='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/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,3 +10,8 @@ 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,4 +6,7 @@ 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,14 +3,20 @@
 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 badgeText='Watch' href='https://www.youtube.com/watch?v=yfoY53QXEnI'>CSS Crash Course For Absolute Beginners</BadgeLink>
-<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=D-h8L5hgW-w'>HTML and CSS Tutorial</BadgeLink>
-<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=FqmB-Zj2-PA'>CSS Masterclass - Tutorial & Course for Beginners</BadgeLink>
-<BadgeLink colorScheme='green' badgeText='Course' href='https://flexbox.io/'>What The Flexbox!</BadgeLink>
-<BadgeLink colorScheme='green' badgeText='Course' href='https://www.codecademy.com/learn/learn-css'>Learn CSS | Codecademy</BadgeLink>
-<BadgeLink colorScheme='green' badgeText='Course' href='https://www.codecademy.com/learn/learn-intermediate-css'>Learn Intermediate CSS | Codecademy</BadgeLink>
+<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>

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

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

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

@@ -11,3 +11,4 @@ Learn and understand the concepts such as Hoisting, Event Bubbling, Scope, Proto
 <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='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

@@ -11,7 +11,11 @@ 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,6 +3,9 @@
 [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,3 +6,5 @@ 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

@@ -5,6 +5,7 @@
 <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>

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

@@ -6,3 +6,4 @@
 
 <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/106-web-security-knowledge/100-https.md

@@ -2,11 +2,12 @@
 
 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,3 +7,4 @@ 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,3 +9,4 @@ 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/110-build-tools/101-module-bundlers/100-webpack.md

@@ -6,3 +6,4 @@ 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/102-linters-formatters/100-prettier.md

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

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

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

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

@@ -10,3 +10,4 @@ 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

@@ -13,3 +13,4 @@ Vue.js is an open-source JavaScript framework for building user interfaces and s
 <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>

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

@@ -6,3 +6,5 @@ Svelte is a javascript framework that unlike Vue and React does not use vertical
 <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 +1,6 @@
 # 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/113-web-components/readme.md

@@ -4,4 +4,5 @@ Web Components is a suite of different technologies allowing you to create reusa
 
 <ResourceGroupTitle>Free Content</ResourceGroupTitle>
 <BadgeLink badgeText='Read' colorScheme='yellow' href='https://developer.mozilla.org/en-US/docs/Web/Web_Components'>Web Components | MDN</BadgeLink>
+<BadgeLink badgeText='Read' colorScheme='yellow' href='https://webcomponents.github.io/'>WebComponents.org</BadgeLink>
 <BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=PCWaFLy3VUo'>Web Components Crash Course</BadgeLink>

content/roadmaps/100-frontend/content/115-testing-your-apps/103-enzyme.md

@@ -1,6 +0,0 @@
-# Enzyme
-
-Enzyme is a JavaScript Testing utility for React that makes it easier to test your React Components' output. You can also manipulate, traverse, and in some ways simulate runtime given the output.
-
-<ResourceGroupTitle>Free Content</ResourceGroupTitle>
-<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://enzymejs.github.io/enzyme/'>Enzyme Website</BadgeLink>

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

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

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

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

content/roadmaps/100-frontend/content/116-auth-strategies/readme.md

@@ -0,0 +1,22 @@
+# Authentication Strategies
+
+Authentication strategies are methods or techniques used to verify the identity of a user or system in order to grant access to a protected resource. There are several different authentication strategies that can be used, including:
+
+- Basic Authentication
+- Session Based Authentication
+- Token Based Authentication
+- JWT Authentication
+- OAuth
+- SSO
+
+You don't necessarily need to learn all of these, how to implement and the ins and outs from the get go. But it's important to know what they are and how they work. This will help you make better decisions when choosing an authentication strategy for your application.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://roadmap.sh/guides/basic-authentication'>Basic Authentication</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://roadmap.sh/guides/session-authentication'>Session Based Authentication</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://roadmap.sh/guides/token-authentication'>Token Based Authentication</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://roadmap.sh/guides/jwt-authentication'>JWT Authentication</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://roadmap.sh/guides/oauth'>OAuth</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://roadmap.sh/guides/sso'>SSO - Single Sign On</BadgeLink>
+
+

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

@@ -9,3 +9,6 @@ TypeScript is a strongly typed programming language that builds on JavaScript, g
 <BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.tutorialspoint.com/typescript/index.htm'>TypeScript Tutorial</BadgeLink>
 <BadgeLink colorScheme='green' badgeText='Course' href='https://scrimba.com/learn/typescript'>Scrimba — TypeScript Basics</BadgeLink>
 <BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=BwuLxPH8IDs'>TypeScript for Beginners</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://thenewstack.io/what-is-typescript/'>What Is TypeScript?</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://thenewstack.io/typescript-tutorial-go-beyond-hello-world/'>TypeScript Tutorial: Go beyond ‘Hello, World!’</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://thenewstack.io/typescript-tutorial-a-guide-to-using-the-programming-language/'>TypeScript Tutorial: A Guide to Using the Programming Language</BadgeLink>

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

@@ -1,8 +0,0 @@
-# PWA APIs
-
-One of the main purposes of PWAs is to provide a native-app-like experience. APIs like service workers, web sockets, and storage allow a PWA to fast load, access data offline, and other capabilities, similar to a native app.
-
-<ResourceGroupTitle>Free Content</ResourceGroupTitle>
-<BadgeLink colorScheme='yellow' badgeText='Read' href='https://web.dev/progressive-web-apps/'>Progressive Web Apps</BadgeLink>
-<BadgeLink colorScheme='yellow' badgeText='Read' href='https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps'>Progressive web apps (PWAs)</BadgeLink>
-<BadgeLink colorScheme='yellow' badgeText='Read' href='https://blog.logrocket.com/project-fugu-5-new-apis-to-try-out-in-your-pwa/'> 5 new APIs to try out in your PWA</BadgeLink>

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

@@ -0,0 +1,8 @@
+# Web Storage API
+
+The Web Storage API provides mechanisms for storing key-value pairs in a web browser. It includes two storage objects: localStorage and sessionStorage, which allow you to save data on the client side and persist it across multiple browser sessions, respectively.
+
+The Web Storage API is designed to be simple and easy to use, and it is widely supported across modern web browsers. It is often used as an alternative to cookies, as it allows for larger amounts of data to be stored and is more efficient in terms of performance.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API'>Web Storage API - MDN</BadgeLink>

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

@@ -1,12 +0,0 @@
-# Performance
-
-Performance plays a significant role in the success of any online venture, as high performing sites engage and retain users better than poorly performing ones. Tools like Lighthouse and Devtools highlight performance metrics and help improve performance of PWAs.
-
-<BadgeLink colorScheme='yellow' badgeText='Read' href='https://web.dev/fast/'> Fast load times: Techniques for improving site performance.</BadgeLink>
-<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.patterns.dev/posts/prpl/'>PRPL pattern</BadgeLink>
-<BadgeLink colorScheme='yellow' badgeText='Read' href='https://web.dev/apply-instant-loading-with-prpl/'>Apply instant loading with PRPL</BadgeLink>
-<BadgeLink colorScheme='yellow' badgeText='Read' href='https://web.dev/rail/'>Measure performance with the RAIL model</BadgeLink>
-<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.freecodecamp.org/news/introduction-to-chrome-lighthouse/'>Introduction to Chrome Lighthouse</BadgeLink>
-<BadgeLink colorScheme='yellow' badgeText='Read' href='https://developers.google.com/web/ilt/pwa/lighthouse-pwa-analysis-tool'>Lighthouse PWA Analysis Tool</BadgeLink>
-<BadgeLink colorScheme='yellow' badgeText='Read' href='https://developer.chrome.com/docs/devtools/speed/get-started/'>Lighthouse: Optimize website speed</BadgeLink>
-<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=egmwY9n6qWY'>PWA Tutorial: Lighthouse Audit</BadgeLink>

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

@@ -0,0 +1,10 @@
+# Web Sockets
+
+Web Sockets is a technology that allows for full-duplex communication over a single TCP connection. It enables real-time, bi-directional communication between a client and a server, and is typically used in applications that require high-speed, low-latency communication, such as online gaming and real-time data streaming.
+
+Web Sockets utilizes a persistent connection between a client and a server, allowing for continuous data exchange without the need for the client to send additional requests to the server. This makes it more efficient and faster than other technologies, such as HTTP, which require a new request to be sent for each piece of data.
+
+Web Sockets is supported by most modern web browsers and can be used with a variety of programming languages and frameworks.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API'>Web Sockets - MDN</BadgeLink>

content/roadmaps/100-frontend/content/117-progressive-web-apps/102-server-sent-events.md

@@ -0,0 +1,10 @@
+# Server Sent Events
+
+Server-Sent Events (SSE) is a technology that allows a web server to push data to a client in real-time. It uses an HTTP connection to send a stream of data from the server to the client, and the client can listen for these events and take action when they are received.
+
+SSE is useful for applications that require real-time updates, such as chat systems, stock tickers, and social media feeds. It is a simple and efficient way to establish a long-lived connection between a client and a server, and it is supported by most modern web browsers.
+
+To use SSE, the client must create an EventSource object and specify the URL of the server-side script that will send the events. The server can then send events by writing them to the response stream with the proper formatting.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://developer.mozilla.org/en-US/docs/Web/API/Server-sent_events'>Server-Sent Events - MDN</BadgeLink>

content/roadmaps/100-frontend/content/117-progressive-web-apps/103-service-workers.md

@@ -0,0 +1,10 @@
+# Service Workers
+
+Service Workers are a type of web worker that acts as a proxy between a web page and the network, allowing web developers to build offline-first and reliable applications. Service Workers can intercept network requests, access the cache, and make decisions on how to respond to a request based on the available resources.
+
+Service Workers are written in JavaScript and are registered by a web page. Once registered, they can control the page and all its requests, even when the page is not open in a browser. This allows Service Workers to enable features such as push notifications, background synchronization, and offline support.
+
+Service Workers are supported by most modern web browsers, and they are an essential component of progressive web applications (PWAs).
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API'>Service Workers - MDN</BadgeLink>

content/roadmaps/100-frontend/content/117-progressive-web-apps/104-location.md

@@ -0,0 +1,8 @@
+# Location API
+
+The Geolocation API is a web API that provides access to the device's location data, such as latitude and longitude. It allows web developers to build location-based applications, such as mapping and location sharing, by using the device's GPS, Wi-Fi, and other sensors to determine the user's location.
+
+To use the Geolocation API, a web page must first request permission from the user to access their location. If permission is granted, the page can then use the `navigator.geolocation` object to access the device's location data. The API provides several methods for getting the user's current location, watching for location changes, and calculating distances between two locations.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API'>Geolocation API - MDN</BadgeLink>

content/roadmaps/100-frontend/content/117-progressive-web-apps/105-notifications.md

@@ -0,0 +1,8 @@
+# Notifications API
+
+The Notifications API is a web API that allows web pages to display system-level notifications to the user. These notifications can be used to alert the user of important events, such as new messages or updates, even when the web page is not open in the browser.
+
+To use the Notifications API, a web page must first request permission from the user to display notifications. If permission is granted, the page can then use the `Notification` constructor to create a new notification and display it to the user. The notification can include a title, body text, and an icon, and it can be customized with options such as a timeout and a click action.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://developer.mozilla.org/en-US/docs/Web/API/Notifications_API'>Notifications API - MDN</BadgeLink>

content/roadmaps/100-frontend/content/117-progressive-web-apps/106-device-orientation.md

@@ -0,0 +1,10 @@
+# Device Orientation API
+
+The Device Orientation API is a web API that provides access to the device's orientation and motion data, such as its pitch, roll, and yaw. It allows web developers to build applications that can respond to the device's orientation and motion, such as augmented reality and motion-controlled games.
+
+To use the Device Orientation API, a web page must first request permission from the user to access the device's orientation data. If permission is granted, the page can then use the DeviceOrientationEvent object to access the device's orientation data and respond to changes in orientation. The API provides several properties for accessing the device's orientation and motion data, as well as events for detecting changes in orientation.
+
+The Device Orientation API is supported by most modern web browsers and is often used in conjunction with other APIs, such as the Geolocation API, to build location-based applications.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://developer.mozilla.org/en-US/docs/Web/API/Device_orientation_events'>Device Orientation API - MDN</BadgeLink>

content/roadmaps/100-frontend/content/117-progressive-web-apps/107-payments.md

@@ -0,0 +1,13 @@
+# Payments
+
+The Payment Request API is a web API that allows web developers to build checkout flows within their web applications. It provides a standardized, browser-based interface for collecting payment and shipping information from the user, and it supports a wide range of payment methods, including credit cards, debit cards, and digital wallets.
+
+To use the Payment Request API, a web page must first create a `PaymentRequest` object and specify the payment and shipping options that are available to the user. The page can then invoke the Payment Request UI by calling the `show()` method on the `PaymentRequest` object. The user can then select their preferred payment and shipping options and confirm the payment, at which point the Payment Request API will return a payment response object that can be used to complete the transaction.
+
+The Payment Request API is supported by most modern web browsers and is designed to be simple and efficient for both the developer and the user.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://developer.mozilla.org/en-US/docs/Web/API/Payment_Request_API'>Payment Request API - MDN</BadgeLink>
+
+
+

content/roadmaps/100-frontend/content/117-progressive-web-apps/108-credentials.md

@@ -0,0 +1,10 @@
+# Credentials API
+
+The Credential Management API is a web API that allows web developers to integrate password-based and federated login flows into their applications. It provides a standardized, browser-based interface for storing and retrieving user credentials, such as username and password combinations and OAuth tokens.
+
+To use the Credential Management API, a web page must first create a Credential object and specify the credentials that the user wishes to store. The page can then use the navigator.credentials object to store and retrieve the user's credentials. The API provides several methods for storing and retrieving credentials, as well as for prompting the user to sign in or sign up.
+
+The Credential Management API is supported by most modern web browsers and is designed to improve the security and usability of login flows by allowing the user to store and reuse their credentials across multiple sites and devices.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://developer.mozilla.org/en-US/docs/Web/API/Credential_Management_API'>Credential Management API - MDN</BadgeLink>

content/roadmaps/100-frontend/content/117-progressive-web-apps/109-prpl-pattern.md

@@ -0,0 +1,13 @@
+# PRPL Pattern
+
+The PRPL pattern is a performance optimization pattern for web applications that focuses on minimizing the time it takes for the initial rendering of a web page. It stands for Push, Render, Pre-cache, and Lazy-load, and it involves the following steps:
+
+* Push: Prioritize the delivery of critical resources, such as HTML, CSS, and JavaScript, to the client as early as possible.
+* Render: Start rendering the web page as soon as the critical resources are received, even if some non-critical resources are still being downloaded.
+* Pre-cache: Pre-cache non-critical resources in the background so that they are available when needed.
+* Lazy-load: Defer the loading of non-critical resources until they are needed, such as when the user scrolls to them or interacts with them.
+
+The PRPL pattern is designed to improve the perceived performance of a web page by reducing the time it takes for the page to become interactive. It is particularly useful for applications that are served over slow or unreliable networks, as it allows the page to render as quickly as possible and then gradually load the remaining resources.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://developers.google.com/web/fundamentals/performance/prpl-pattern'>PRPL Pattern - Google Developers</BadgeLink>

content/roadmaps/100-frontend/content/117-progressive-web-apps/110-rail-model.md

@@ -0,0 +1,13 @@
+# RAIL Model
+
+The RAIL model is a performance optimization model for web applications that focuses on improving the perceived performance of a web page. It stands for Response, Animation, Idle, and Load, and it involves the following four performance goals:
+
+* Response: The time it takes for the web page to respond to user input should be under 100 milliseconds.
+* Animation: The time it takes for an animation to run should be under 10 milliseconds.
+* Idle: The web page should take advantage of idle time to perform non-critical tasks.
+* Load: The time it takes for the web page to fully load should be under 1 second.
+
+The RAIL model is designed to provide a framework for optimizing the performance of a web page by focusing on the four key areas that impact the user's perception of performance. It is particularly useful for applications that require high levels of interactivity, such as games and social media applications.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://developers.google.com/web/fundamentals/performance/rail'>RAIL Model - Google Developers</BadgeLink>

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

@@ -0,0 +1,16 @@
+# Performance Metrics
+
+Web performance metrics are quantitative measures of the performance of a web page or application. They are used to assess the speed and efficiency of a web page, and they can help identify areas for improvement. Some common web performance metrics include:
+
+* Load time: The time it takes for a web page to fully load and become interactive.
+* First contentful paint (FCP): The time it takes for the first content to appear on the page.
+* Time to interactive (TTI): The time it takes for the page to become fully interactive.
+* First input delay (FID): The time it takes for the page to respond to the first user input.
+* Total blocking time (TBT): The time it takes for the page to become fully interactive, taking into account the time spent blocking the main thread.
+
+There are many tools and techniques available for measuring web performance metrics, including browser dev tools, performance monitoring tools, and web performance APIs. By tracking these metrics and analyzing the results, web developers can identify areas for improvement and optimize the performance of their web pages.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://developers.google.com/web/fundamentals/performance/user-centric-performance-metrics'>Web Performance Metrics - Google Developers</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://web.dev/metrics/'>Measuring performance and user experience - Google Developers</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://developer.mozilla.org/en-US/docs/Web/Guide/Performance'>Measuring performance and user experience - MDN</BadgeLink>

content/roadmaps/100-frontend/content/117-progressive-web-apps/112-lighthouse.md

@@ -0,0 +1,10 @@
+# Lighthouse
+
+Lighthouse is an open-source tool developed by Google that is used to audit the performance, accessibility, and SEO of web pages. It is available as a browser extension and as a command-line tool, and it can be run on any web page to generate a report with recommendations for improvement.
+
+Lighthouse works by simulating the load and interaction of a web page and measuring various performance metrics, such as load time, time to first paint, and time to interactive. It also checks for common issues such as incorrect image sizes, missing alt text, and broken links.
+
+Lighthouse provides a comprehensive and easy-to-use tool for identifying and fixing performance and accessibility issues on web pages. It is widely used by web developers and is integrated into many popular development tools.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://developers.google.com/web/tools/lighthouse'>Lighthouse - Google Developers</BadgeLink>

content/roadmaps/100-frontend/content/117-progressive-web-apps/113-browser-devtools.md

@@ -0,0 +1,18 @@
+# Browser DevTools
+
+Most of the browsers have built-in developer tools that help you perform web development specific tasks on a webpage. My personal recommendation would be to use Chrome DevTools as it is the most advanced and has the most features. However, if you are using a different browser, you can still use the DevTools to debug your web application. 
+
+Chrome DevTools is a set of web development tools built into the Google Chrome browser. It allows web developers to debug and optimize web pages by providing a range of features for inspecting and manipulating the page's HTML, CSS, and JavaScript.
+
+Some of the features provided by Chrome DevTools include:
+
+* **Elements panel**: Inspect and modify the page's HTML and CSS.
+* **Console panel**: View and debug JavaScript errors and log messages.
+* **Network panel**: Monitor network requests and responses, and analyze performance issues.
+* **Performance panel**: Analyze the performance of the page and identify bottlenecks.
+* **Application panel**: Inspect the page's resources, such as cookies and local storage.
+
+Chrome DevTools is a powerful and essential tool for web developers, and it is widely used to debug and optimize web pages. It is constantly updated with new features and improvements, and it is available on all modern web browsers.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://developers.google.com/web/tools/chrome-devtools'>Chrome DevTools - Google Developers</BadgeLink>

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

@@ -8,5 +8,5 @@ React is the most popular front-end JavaScript library for building user interfa
 <BadgeLink badgeText='Course' colorScheme='green' href='https://egghead.io/courses/the-beginner-s-guide-to-react'>The Beginner's Guide to React</BadgeLink>
 <BadgeLink badgeText='Course' colorScheme='green' href='https://www.youtube.com/watch?v=nTeuhbP7wdE'>React JS Course for Beginners</BadgeLink>
 <BadgeLink badgeText='Course' colorScheme='green' href='https://www.youtube.com/watch?v=bMknfKXIFA8'>React Course - Beginner's Tutorial for React JavaScript Library [2022]</BadgeLink>
-<BadgeLink badgeText='Roadmap' colorScheme='yellow' href='https://roadmap.sh/frontend'>React Roadmap</BadgeLink>
+<BadgeLink badgeText='Roadmap' colorScheme='yellow' href='https://roadmap.sh/react'>React Roadmap</BadgeLink>
 <BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=i793Qm6kv3U'>Understanding React's UI Rendering Process</BadgeLink>

content/roadmaps/100-frontend/content/118-server-side-rendering/102-vue-js/readme.md

@@ -7,3 +7,4 @@ Vue.js is an open-source JavaScript framework for building user interfaces and s
 <BadgeLink colorScheme='blue' badgeText='Official Docs' 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>

content/roadmaps/100-frontend/content/118-server-side-rendering/103-svelte/100-svelte-kit.md

@@ -0,0 +1,7 @@
+# Svelte Kit
+
+Svelte Kit is a framework for building web applications with the Svelte JavaScript framework. It is designed to be a complete solution for building web applications, with support for server-side rendering, automatic code splitting, and optimized performance.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://kit.svelte.dev/'>Svelte Kit Official Website</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://kit.svelte.dev/docs/introduction'>Official Svelte Kit Docs</BadgeLink>

content/roadmaps/100-frontend/content/118-server-side-rendering/103-svelte/readme.md

@@ -0,0 +1,10 @@
+# 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/119-graphql/readme.md

@@ -7,3 +7,5 @@ GraphQL is a query language for APIs and a runtime for fulfilling those queries
 <BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.howtographql.com/'>The Fullstack Tutorial for GraphQL</BadgeLink>
 <BadgeLink colorScheme='green' badgeText='Course' href='https://odyssey.apollographql.com/'>GraphQL Tutorials</BadgeLink>
 <BadgeLink  badgeText='Watch' href='https://www.youtube.com/watch?v=ed8SzALpx1Q'>GraphQL Course for Beginners</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://thenewstack.io/introduction-to-graphql/'>Introduction to GraphQL</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://thenewstack.io/how-to-execute-a-simple-graphql-query/'>How to Execute a Simple GraphQL Query</BadgeLink>

content/roadmaps/100-frontend/content/120-static-site-generators/101-gatsbyjs.md

@@ -6,3 +6,5 @@ Gatsby is a React-based open source framework with performance, scalability and
 <BadgeLink colorScheme='blue' badgeText='Official Website' href='https://www.gatsbyjs.com/'>Gatsby Website</BadgeLink>
 <BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://www.gatsbyjs.com/docs'>Gatsby Docs</BadgeLink>
 <BadgeLink badgeText='Watch' href='https://youtube.com/playlist?list=PL4cUxeGkcC9hw1g77I35ZivVLe8k2nvjB'>Gatsby Tutorial</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://thenewstack.io/getting-started-with-gatsby-the-cloud-native-static-site-generator/'>Getting Started with Gatsby, the Cloud Native Static Site Generator</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://thenewstack.io/static-site-revolution-top-websites-built-with-gatsby/'>Static Site Revolution: Top Websites Built with Gatsby</BadgeLink>

content/roadmaps/100-frontend/content/120-static-site-generators/105-hugo.md

@@ -6,3 +6,4 @@ Hugo is the world’s fastest static website engine. It’s written in Go (aka G
 <BadgeLink colorScheme='blue' badgeText='Official Website' href='https://gohugo.io/'>Official Website</BadgeLink>
 <BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://gohugo.io/documentation/'>Official Docs for Getting Started</BadgeLink>
 <BadgeLink colorScheme='purple' badgeText='Watch' href='https://www.youtube.com/watch?v=qtIqKaDlqXo&list=PLLAZ4kZ9dFpOnyRlyS-liKL5ReHDcj4G3'>Introduction to Hugo - Static Site Generator </BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://thenewstack.io/tutorial-use-hugo-to-generate-a-static-website/'>Tutorial: Use Hugo to Generate a Static Website</BadgeLink>

content/roadmaps/100-frontend/content/120-static-site-generators/106-astro.md

@@ -0,0 +1,14 @@
+# Astro
+
+Astro is an all-in-one web framework for building fast, content-focused websites. Astro combines the power of a modern component-based framework with the performance and flexibility of a static site generator.
+
+- Component Islands: A new web architecture for building faster websites.
+- Server-first API design: Move expensive hydration off of your users’ devices.
+- Zero JS, by default: No JavaScript runtime overhead to slow you down.
+- Edge-ready: Deploy anywhere, even a global edge runtime like Deno or Cloudflare.
+- Customizable: Tailwind, MDX, and 100+ other integrations to choose from.
+- UI-agnostic: Supports React, Preact, Svelte, Vue, Solid, Lit and more.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://astro.build/'>Official Astro Website</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://docs.astro.build/'>Official Astro Docs</BadgeLink>

content/roadmaps/100-frontend/content/120-static-site-generators/readme.md

@@ -6,5 +6,5 @@ A static site generator is a tool that generates a full static HTML website base
 <BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.cloudflare.com/learning/performance/static-site-generator/'>What is a static site generator?</BadgeLink>
 <BadgeLink colorScheme='yellow' badgeText='Read' href='https://nextjs.org/docs/advanced-features/static-html-export'>Next.js SSG</BadgeLink>
 <BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.gatsbyjs.com/docs/glossary/static-site-generator/'>Gatsby SSG</BadgeLink>
-<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.smashingmagazine.com/2021/10/building-ssg-11ty-vite-jam-sandwich/'>SSG — An 11ty, Vite And JAM Sandwich
-</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.smashingmagazine.com/2021/10/building-ssg-11ty-vite-jam-sandwich/'>SSG — An 11ty, Vite And JAM Sandwich</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://thenewstack.io/get-back-basics-static-website-generators/'>Get Back to Basics With Static Website Generators</BadgeLink>

content/roadmaps/100-frontend/content/121-mobile-applications/100-react-native.md

@@ -6,3 +6,5 @@ React Native is a popular JavaScript-based mobile app framework that allows you
 <BadgeLink colorScheme='blue' badgeText='Official Website' href='https://reactnative.dev/'>Official Website</BadgeLink>
 <BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://reactnative.dev/docs/getting-started'>Official Getting Started to React Native</BadgeLink>
 <BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=0-S5a0eXPoc'>Build a React Native App by Mosh</BadgeLink>
+<BadgeLink colorScheme='green' badgeText='Course' href='https://www.codecademy.com/learn/learn-react-native'>Learn React Native by CodeAcademy</BadgeLink>
+    

content/roadmaps/100-frontend/content/121-mobile-applications/102-flutter.md

@@ -1,3 +1,9 @@
+<DedicatedRoadmap 
+  href='/flutter'
+  title='Flutter Roadmap'
+  description='Click to check the detailed Flutter Roadmap.'
+/>
+
 # Flutter
 
 Flutter is a free and open-source mobile UI framework created by Google and released in May 2017. In a few words, it allows you to create a native mobile application with only one codebase. This means that you can use one programming language and one codebase to create two different apps (for iOS and Android).
@@ -18,3 +24,4 @@ If you know a bit of programming, Dart is a typed object programming language. Y
 <BadgeLink colorScheme='green' badgeText='Course' href='https://www.youtube.com/watch?v=1ukSR1GRtMU&list=PL4cUxeGkcC9jLYyp2Aoh6hcWuxFDX6PBJ'>Flutter Tutorial for Beginners</BadgeLink>
 <BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.w3adda.com/flutter-tutorial'>Flutter Tutorial</BadgeLink>
 <BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.tutorialspoint.com/dart_programming/index.htm'>Learn Dart Programming</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://thenewstack.io/12-ways-flutter-streamlines-app-development/'>12 Ways Flutter Streamlines App Development</BadgeLink>

content/roadmaps/100-frontend/content/121-mobile-applications/readme.md

@@ -1 +1,8 @@
-# Mobile applications
+# Mobile applications
+
+A while back, developing a mobile app using JavaScript was impossible. But now JavaScript developers can create mobile applications using their knowledge for web development. Here is the list of options to create mobile applications in JavaScript.
+
+* [React Native](https://reactnative.dev/)
+* [Flutter](https://flutter.dev)
+* [Ionic](https://ionicframework.com)
+* [NativeScript](https://nativescript.org/)

content/roadmaps/100-frontend/content/122-desktop-applications/101-tauri.md

@@ -5,3 +5,4 @@ Tauri is a toolkit that helps developers make applications for the major desktop
 <ResourceGroupTitle>Free Content</ResourceGroupTitle>
 <BadgeLink colorScheme='blue' badgeText='Official Website' href='https://tauri.app/'>Tauri Website</BadgeLink>
 <BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://tauri.app/v1/guides/'>Tauri Docs</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://thenewstack.io/how-tauri-turns-web-designs-into-compact-native-apps/'>How Tauri Turns Web Designs into Compact Native Apps</BadgeLink>

content/roadmaps/100-frontend/content/122-desktop-applications/102-flutter.md

@@ -0,0 +1,18 @@
+<DedicatedRoadmap
+href='/flutter'
+title='Flutter Roadmap'
+description='Click to check the detailed Flutter Roadmap.'
+/>
+
+# Flutter
+
+Flutter is a free and open-source multi-platform UI framework created by Google and released in May 2017. In a few words, it allows you to create a native mobile application with only one codebase. This means that you can use one programming language and one codebase to create three different apps (for iOS, Android and Desktop).
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://flutter.dev'>Flutter Website</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://flutter.dev/multi-platform/desktop'>Flutter for Desktop</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.w3adda.com/flutter-tutorial'>Flutter Tutorial</BadgeLink>
+<BadgeLink colorScheme='green' badgeText='Course' href='https://www.youtube.com/watch?v=1ukSR1GRtMU&list=PL4cUxeGkcC9jLYyp2Aoh6hcWuxFDX6PBJ'>Flutter Tutorial for Beginners</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.w3adda.com/flutter-tutorial'>Flutter Tutorial</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.tutorialspoint.com/dart_programming/index.htm'>Learn Dart Programming</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://thenewstack.io/12-ways-flutter-streamlines-app-development/'>12 Ways Flutter Streamlines App Development</BadgeLink>

content/roadmaps/100-frontend/content/122-desktop-applications/102-proton-native.md

@@ -1,7 +0,0 @@
-# Proton native
-
-Proton Native allows you to create desktop applications through a React syntax, on all platforms.
-
-<ResourceGroupTitle>Free Content</ResourceGroupTitle>
-<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://proton-native.js.org/'>Official Website and Docs</BadgeLink>
-<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=Hw6vPBfVVeo'>Getting Started With Proton Native</BadgeLink>

content/roadmaps/100-frontend/content/122-desktop-applications/readme.md

@@ -1 +1,8 @@
-# Desktop applications
+# Desktop Applications in JavaScript
+
+A while back, developing a desktop app using JavaScript was impossible. But now JavaScript developers can create desktop applications using their knowledge for web development. Here is the list of options to create desktop applications in JavaScript.
+
+* [Electron](https://www.electronjs.org/)
+* [NodeGUI](https://docs.nodegui.org/)
+* [NW.js](https://nwjs.io/)
+* [Meteor](https://www.meteor.com/)

content/roadmaps/100-frontend/content/123-bonus-content.md

@@ -0,0 +1,16 @@
+# Bonus Content
+
+It is not required to complete the bonus content, it just expands on the topics covered in the roadmap and has the items which were missed in the roadmap. Go through them if you want.
+
+* **UI / UX Knowledge** - Gaining UI/UX knowledge is not a must for a Frontend Developer but having an eye for design and a good understanding of UI/UX will help you in your career.
+* **[Design Systems](/design-system)** - Learn how to create and work with design systems.
+* **Visual Programming** — it is entirely possible to be a successful, competent frontend developer without it, but for many frontend developers this path represents a serious chunk of their workload, and represents a very in-demand option for frontend development – especially for developers who are have a visual aptitude.
+  * **For Animations**: [GSAP](https://greensock.com/gsap/), [Lottie](https://airbnb.design/lottie/), [Framer Motion](https://github.com/framer/motion) or [MoJs](https://mojs.github.io/)
+  * **Web Graphics Library (WebGL)**: [WebGL MDN](https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/Tutorial), [WebGL Fundamentals](https://webglfundamentals.org/webgl/lessons/webgl-fundamentals.html)
+  * **2D Graphics**: [Canvas](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API), [PixiJS](https://pixijs.com/), [PhaserJS](https://phaser.io/)
+  * **3D Graphics**: [ThreeJS](https://threejs.org/), [BabylonJS](https://www.babylonjs.com/)
+* Have a look at [Qwik](https://qwik.builder.io/) and **[Partytown](https://partytown.builder.io/)**.
+* [Houdini](https://developer.mozilla.org/en-US/docs/Web/Guide/Houdini) — Here is a good [introductory article to houdini](https://www.smashingmagazine.com/2020/03/practical-overview-css-houdini/).
+* **[WebRTC](https://developer.mozilla.org/en-US/docs/Web/API/WebRTC_API)** - WebRTC is a free, open project that provides browsers and mobile applications with Real-Time Communications (RTC) capabilities via simple APIs. The WebRTC components have been optimized to best serve this purpose.
+* **[IDLs](https://developer.mozilla.org/en-US/docs/Glossary/IDL)** - Not every developer will have a need for understanding [IDLs](https://developer.mozilla.org/en-US/docs/Glossary/IDL) but but there's a good argument for having more JavaScript developers aware of their existence and hopefully the ability for making use of them as well.
+* **[WebAssembly](https://developer.mozilla.org/en-US/docs/WebAssembly)** - WebAssembly is a comparatively new technology that allows you to run code written in languages other than JavaScript on the web. It's a low-level assembly-like language with a compact binary format that runs with near-native performance and provides languages such as C/C++ and Rust with a compilation target so that they can run on the web.

content/roadmaps/100-frontend/content/123-web-assembly.md

@@ -1,8 +0,0 @@
-# Web Assembly
-
-WebAssembly is a new type of code that can be run in modern web browsers — it is a low-level assembly-like language with a compact binary format that runs with near-native performance and provides languages such as C/C++, C# and Rust with a compilation target so that they can run on the web. It is also designed to run alongside JavaScript, allowing both to work together.
-
-<ResourceGroupTitle>Free Content</ResourceGroupTitle>
-<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://webassembly.org/'>Official Website</BadgeLink>
-<BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://webassembly.org/getting-started/developers-guide/'>Official Getting Started to Web Assembly</BadgeLink>
-<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=3sU557ZKjUs'>An introduction to WebAssembly</BadgeLink>

content/roadmaps/101-backend/content-paths.json

@@ -48,22 +48,27 @@
   "nosql-databases:column-databases": "/roadmaps/101-backend/content/107-nosql-databases/101-column-databases.md",
   "nosql-databases:timeseries-databases": "/roadmaps/101-backend/content/107-nosql-databases/102-timeseries-databases.md",
   "nosql-databases:realtime-databases": "/roadmaps/101-backend/content/107-nosql-databases/103-realtime-databases.md",
+  "nosql-databases:key-value-databases": "/roadmaps/101-backend/content/107-nosql-databases/104-key-value-databases.md",
   "more-about-databases": "/roadmaps/101-backend/content/108-more-about-databases/readme.md",
   "more-about-databases:orms": "/roadmaps/101-backend/content/108-more-about-databases/100-orms.md",
   "more-about-databases:acid": "/roadmaps/101-backend/content/108-more-about-databases/101-acid.md",
   "more-about-databases:transactions": "/roadmaps/101-backend/content/108-more-about-databases/102-transactions.md",
   "more-about-databases:n-plus-one-problem": "/roadmaps/101-backend/content/108-more-about-databases/103-n-plus-one-problem.md",
   "more-about-databases:database-normalization": "/roadmaps/101-backend/content/108-more-about-databases/104-database-normalization.md",
-  "more-about-databases:database-indexes": "/roadmaps/101-backend/content/108-more-about-databases/105-database-indexes.md",
-  "more-about-databases:data-replication": "/roadmaps/101-backend/content/108-more-about-databases/106-data-replication.md",
-  "more-about-databases:sharding-strategies": "/roadmaps/101-backend/content/108-more-about-databases/107-sharding-strategies.md",
-  "more-about-databases:cap-theorem": "/roadmaps/101-backend/content/108-more-about-databases/108-cap-theorem.md",
+  "more-about-databases:failure-modes": "/roadmaps/101-backend/content/108-more-about-databases/105-failure-modes.md",
+  "more-about-databases:profiling-performance": "/roadmaps/101-backend/content/108-more-about-databases/106-profiling-performance.md",
+  "scaling-databases": "/roadmaps/101-backend/content/109-scaling-databases/readme.md",
+  "scaling-databases:database-indexes": "/roadmaps/101-backend/content/109-scaling-databases/100-database-indexes.md",
+  "scaling-databases:data-replication": "/roadmaps/101-backend/content/109-scaling-databases/101-data-replication.md",
+  "scaling-databases:sharding-strategies": "/roadmaps/101-backend/content/109-scaling-databases/102-sharding-strategies.md",
+  "scaling-databases:cap-theorem": "/roadmaps/101-backend/content/109-scaling-databases/103-cap-theorem.md",
   "apis": "/roadmaps/101-backend/content/109-apis/readme.md",
   "apis:rest": "/roadmaps/101-backend/content/109-apis/100-rest.md",
   "apis:json-apis": "/roadmaps/101-backend/content/109-apis/101-json-apis.md",
   "apis:soap": "/roadmaps/101-backend/content/109-apis/102-soap.md",
   "apis:grpc": "/roadmaps/101-backend/content/109-apis/103-grpc.md",
   "apis:hateoas": "/roadmaps/101-backend/content/109-apis/104-hateoas.md",
+  "apis:graphql": "/roadmaps/101-backend/content/109-apis/106-graphql.md",
   "apis:open-api-spec": "/roadmaps/101-backend/content/109-apis/105-open-api-spec.md",
   "apis:authentication": "/roadmaps/101-backend/content/109-apis/106-authentication/readme.md",
   "apis:authentication:cookie-based": "/roadmaps/101-backend/content/109-apis/106-authentication/100-cookie-based.md",
@@ -86,6 +91,7 @@
   "web-security-knowledge:scrypt": "/roadmaps/101-backend/content/111-web-security-knowledge/104-scrypt.md",
   "web-security-knowledge:https": "/roadmaps/101-backend/content/111-web-security-knowledge/105-https.md",
   "web-security-knowledge:content-security-policy": "/roadmaps/101-backend/content/111-web-security-knowledge/105-content-security-policy.md",
+  "web-security-knowledge:server-security": "/roadmaps/101-backend/content/111-web-security-knowledge/106-server-security.md",
   "web-security-knowledge:cors": "/roadmaps/101-backend/content/111-web-security-knowledge/106-cors.md",
   "web-security-knowledge:ssl-tls": "/roadmaps/101-backend/content/111-web-security-knowledge/107-ssl-tls.md",
   "web-security-knowledge:owasp": "/roadmaps/101-backend/content/111-web-security-knowledge/108-owasp.md",
@@ -98,16 +104,15 @@
   "design-and-development-principles:gof-design-patterns": "/roadmaps/101-backend/content/114-design-and-development-principles/100-gof-design-patterns.md",
   "design-and-development-principles:domain-driven-design": "/roadmaps/101-backend/content/114-design-and-development-principles/101-domain-driven-design.md",
   "design-and-development-principles:test-driven-development": "/roadmaps/101-backend/content/114-design-and-development-principles/102-test-driven-development.md",
-  "design-and-development-principles:solid": "/roadmaps/101-backend/content/114-design-and-development-principles/103-solid.md",
-  "design-and-development-principles:kiss": "/roadmaps/101-backend/content/114-design-and-development-principles/104-kiss.md",
-  "design-and-development-principles:yagni": "/roadmaps/101-backend/content/114-design-and-development-principles/105-yagni.md",
-  "design-and-development-principles:dry": "/roadmaps/101-backend/content/114-design-and-development-principles/106-dry.md",
+  "design-and-development-principles:cqrs": "/roadmaps/101-backend/content/114-design-and-development-principles/103-cqrs.md",
+  "design-and-development-principles:event-sourcing": "/roadmaps/101-backend/content/114-design-and-development-principles/104-event-sourcing.md",
   "architectural-patterns": "/roadmaps/101-backend/content/115-architectural-patterns/readme.md",
   "architectural-patterns:monolithic-apps": "/roadmaps/101-backend/content/115-architectural-patterns/100-monolithic-apps.md",
   "architectural-patterns:microservices": "/roadmaps/101-backend/content/115-architectural-patterns/101-microservices.md",
   "architectural-patterns:soa": "/roadmaps/101-backend/content/115-architectural-patterns/102-soa.md",
-  "architectural-patterns:cqrs": "/roadmaps/101-backend/content/115-architectural-patterns/103-cqrs.md",
   "architectural-patterns:serverless": "/roadmaps/101-backend/content/115-architectural-patterns/104-serverless.md",
+  "architectural-patterns:service-mesh": "/roadmaps/101-backend/content/115-architectural-patterns/105-service-mesh.md",
+  "architectural-patterns:twelve-factor-apps": "/roadmaps/101-backend/content/115-architectural-patterns/106-twelve-factor-apps.md",
   "search-engines": "/roadmaps/101-backend/content/116-search-engines/readme.md",
   "search-engines:elasticsearch": "/roadmaps/101-backend/content/116-search-engines/100-elasticsearch.md",
   "search-engines:solr": "/roadmaps/101-backend/content/116-search-engines/101-solr.md",
@@ -116,7 +121,7 @@
   "message-brokers:kafka": "/roadmaps/101-backend/content/117-message-brokers/101-kafka.md",
   "containerization": "/roadmaps/101-backend/content/118-containerization/readme.md",
   "containerization:docker": "/roadmaps/101-backend/content/118-containerization/100-docker.md",
-  "containerization:rkt": "/roadmaps/101-backend/content/118-containerization/101-rkt.md",
+  "containerization:kubernetes": "/roadmaps/101-backend/content/118-containerization/103-kubernetes.md",
   "containerization:lxc": "/roadmaps/101-backend/content/118-containerization/102-lxc.md",
   "graphql": "/roadmaps/101-backend/content/119-graphql/readme.md",
   "graphql:apollo": "/roadmaps/101-backend/content/119-graphql/100-apollo.md",
@@ -124,13 +129,19 @@
   "graph-databases": "/roadmaps/101-backend/content/120-graph-databases/readme.md",
   "graph-databases:neo4j": "/roadmaps/101-backend/content/120-graph-databases/100-neo4j.md",
   "web-sockets": "/roadmaps/101-backend/content/121-web-sockets.md",
+  "server-sent-events": "/roadmaps/101-backend/content/122-server-sent-events.md",
   "web-servers": "/roadmaps/101-backend/content/122-web-servers/readme.md",
   "web-servers:nginx": "/roadmaps/101-backend/content/122-web-servers/100-nginx.md",
   "web-servers:apache": "/roadmaps/101-backend/content/122-web-servers/101-apache.md",
   "web-servers:caddy": "/roadmaps/101-backend/content/122-web-servers/102-caddy.md",
   "web-servers:ms-iis": "/roadmaps/101-backend/content/122-web-servers/103-ms-iis.md",
   "scalability": "/roadmaps/101-backend/content/123-scalability/readme.md",
-  "scalability:mitigation-strategies": "/roadmaps/101-backend/content/123-scalability/100-mitigation-strategies.md",
+  "scalability:mitigation-strategies": "/roadmaps/101-backend/content/123-scalability/100-mitigation-strategies/readme.md",
+  "scalability:mitigation-strategies:graceful-degradation": "/roadmaps/101-backend/content/123-scalability/100-mitigation-strategies/100-graceful-degradation.md",
+  "scalability:mitigation-strategies:throttling": "/roadmaps/101-backend/content/123-scalability/100-mitigation-strategies/101-throttling.md",
+  "scalability:mitigation-strategies:backpressure": "/roadmaps/101-backend/content/123-scalability/100-mitigation-strategies/102-backpressure.md",
+  "scalability:mitigation-strategies:loadshifting": "/roadmaps/101-backend/content/123-scalability/100-mitigation-strategies/103-loadshifting.md",
+  "scalability:mitigation-strategies:circuit-breaker": "/roadmaps/101-backend/content/123-scalability/100-mitigation-strategies/104-circuit-breaker.md",
   "scalability:instrumentation-monitoring-telemetry": "/roadmaps/101-backend/content/123-scalability/101-instrumentation-monitoring-telemetry.md",
   "scalability:migration-strategies": "/roadmaps/101-backend/content/123-scalability/102-migration-strategies.md",
   "scalability:horizontal-vertical-scaling": "/roadmaps/101-backend/content/123-scalability/103-horizontal-vertical-scaling.md",

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

@@ -8,4 +8,4 @@ The Internet is a global network of computers connected to each other which comm
 <BadgeLink colorScheme='yellow' badgeText='Read' 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>
-<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=zN8YNNHcaZc'>Internet for Dummies</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=zN8YNNHcaZc'>How does the internet work? (Full Course)</BadgeLink>

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

@@ -7,4 +7,5 @@ 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 badgeText='Watch' href='https://www.youtube.com/watch?v=a-sBfyiXysI'>HTTP/1 to HTTP/2 to HTTP/3</BadgeLink>
 <BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=iYM2zFP3Zn0'>HTTP Crash Course & Exploration</BadgeLink>

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

@@ -1,7 +1,10 @@
 # DNS
+
 The Domain Name System (DNS) is the phonebook of the Internet. Humans access information online through domain names, like nytimes.com or espn.com. Web browsers interact through Internet Protocol (IP) addresses. DNS translates domain names to IP addresses so browsers can load Internet resources.
 
 <ResourceGroupTitle>Free Content</ResourceGroupTitle>
 <BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.cloudflare.com/en-gb/learning/dns/what-is-dns/'>What is DNS?</BadgeLink>
+<BadgeLink 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=zEmUuNFBgN8&list=PLTk5ZYSbd9MhMmOiPhfRJNW7bhxHo4q-K'>Complete DNS mini-series</BadgeLink>

content/roadmaps/101-backend/content/101-basic-frontend/101-css.md

@@ -4,7 +4,7 @@ CSS or Cascading Style Sheets is the language used to style the frontend of any
 
 <ResourceGroupTitle>Free Content</ResourceGroupTitle>
 <BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.w3schools.com/css/'>W3Schools — Learn CSS</BadgeLink>
-<BadgeLink 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://www.freecodecamp.org/learn/2022/responsive-web-design'>freeCodeCamp — Responsive Web Design</BadgeLink>
 <BadgeLink colorScheme='yellow' badgeText='Read' href='https://learn.shayhowe.com/html-css/building-your-first-web-page/'>Learn to Code HTML & CSS</BadgeLink>
 <BadgeLink colorScheme='green' badgeText='Course' href='https://flexbox.io/'>What The Flexbox!</BadgeLink>
 <BadgeLink colorScheme='green' badgeText='Course' href='https://www.codecademy.com/learn/learn-css'>Learn CSS | Codecademy</BadgeLink>

content/roadmaps/101-backend/content/101-basic-frontend/readme.md

@@ -6,3 +6,4 @@ As a backend developer, you may not need to have proficient knowledge of the fro
 <BadgeLink badgeText='Read' colorScheme='yellow' href='https://www.w3schools.com/html/html_intro.asp'>W3Schools: Learn HTML</BadgeLink>
 <BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.w3schools.com/css/'>W3Schools: Learn CSS</BadgeLink>
 <BadgeLink badgeText='Read' colorScheme="yellow" href='https://www.w3schools.com/js/'>W3Schools: JavaScript Tutorial</BadgeLink>
+<BadgeLink badgeText='Read' colorScheme="yellow" href='https://thenewstack.io/category/frontend-dev/'>Articles about Frontend Development</BadgeLink>