Merge branch 'kamranahmedse:master' into master

components/teams-banner.tsx

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

content/guides.json

@@ -132,7 +132,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/history-of-javascript.md

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

content/guides/http-basic-authentication.md

@@ -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

@@ -71,7 +71,7 @@ Three-way handshake in its simplest form is that all the `TCP` connections begin
 - `SYN ACK` - Server acknowledges the request by sending an `ACK` packet back to the client which is made up of a random number, let's say `y` picked up by server and the number `x+1` where `x` is the number that was sent by the client
 - `ACK` - Client increments the number `y` received from the server and sends an `ACK` packet back with the number `y+1`
 
-Once the three-way handshake is completed, the data sharing between the client and server may begin. It should be noted that the client may start sending the application data as soon as it dispatches the last `ACK` packet but the server will still have to wait for the `ACK` packet to be recieved in order to fulfill the request.
+Once the three-way handshake is completed, the data sharing between the client and server may begin. It should be noted that the client may start sending the application data as soon as it dispatches the last `ACK` packet but the server will still have to wait for the `ACK` packet to be received in order to fulfill the request.
 
 ![](http://i.imgur.com/uERG2G2.png)
 
@@ -89,7 +89,7 @@ After merely 3 years of `HTTP/1.0`, the next version i.e. `HTTP/1.1` was release
 
 - **Hostname Identification** In `HTTP/1.0` `Host` header wasn't required but `HTTP/1.1` made it required.
 
-- **Persistent Connections** As discussed above, in `HTTP/1.0` there was only one request per connection and the connection was closed as soon as the request was fulfilled which resulted in accute performance hit and latency problems. `HTTP/1.1` introduced the persistent connections i.e. **connections weren't closed by default** and were kept open which allowed multiple sequential requests. To close the connections, the header `Connection: close` had to be available on the request. Clients usually send this header in the last request to safely close the connection.
+- **Persistent Connections** As discussed above, in `HTTP/1.0` there was only one request per connection and the connection was closed as soon as the request was fulfilled which resulted in acute performance hit and latency problems. `HTTP/1.1` introduced the persistent connections i.e. **connections weren't closed by default** and were kept open which allowed multiple sequential requests. To close the connections, the header `Connection: close` had to be available on the request. Clients usually send this header in the last request to safely close the connection.
 
 - **Pipelining** It also introduced the support for pipelining, where the client could send multiple requests to the server without waiting for the response from server on the same connection and server had to send the response in the same sequence in which requests were received. But how does the client know that this is the point where first response download completes and the content for next response starts, you may ask! Well, to solve this, there must be `Content-Length` header present which clients can use to identify where the response ends and it can start waiting for the next response.
 
@@ -111,7 +111,7 @@ After merely 3 years of `HTTP/1.0`, the next version i.e. `HTTP/1.1` was release
 
 I am not going to dwell about all the `HTTP/1.1` features in this post as it is a topic in itself and you can already find a lot about it. The one such document that I would recommend you to read is [Key differences between `HTTP/1.0` and HTTP/1.1](http://www.ra.ethz.ch/cdstore/www8/data/2136/pdf/pd1.pdf) and here is the link to [original RFC](https://tools.ietf.org/html/rfc2616) for the overachievers.
 
-`HTTP/1.1` was introduced in 1999 and it had been a standard for many years. Although, it improved alot over its predecessor; with the web changing everyday, it started to show its age. Loading a web page these days is more resource-intensive than it ever was. A simple webpage these days has to open more than 30 connections. Well `HTTP/1.1` has persistent connections, then why so many connections? you say! The reason is, in `HTTP/1.1` it can only have one outstanding connection at any moment of time. `HTTP/1.1` tried to fix this by introducing pipelining but it didn't completely address the issue because of the **head-of-line blocking** where a slow or heavy request may block the requests behind and once a request gets stuck in a pipeline, it will have to wait for the next requests to be fulfilled. To overcome these shortcomings of `HTTP/1.1`, the developers started implementing the workarounds, for example use of spritesheets, encoded images in CSS, single humungous CSS/Javascript files, [domain sharding](https://www.maxcdn.com/one/visual-glossary/domain-sharding-2/) etc.
+`HTTP/1.1` was introduced in 1999 and it had been a standard for many years. Although, it improved alot over its predecessor; with the web changing everyday, it started to show its age. Loading a web page these days is more resource-intensive than it ever was. A simple webpage these days has to open more than 30 connections. Well `HTTP/1.1` has persistent connections, then why so many connections? you say! The reason is, in `HTTP/1.1` it can only have one outstanding connection at any moment of time. `HTTP/1.1` tried to fix this by introducing pipelining but it didn't completely address the issue because of the **head-of-line blocking** where a slow or heavy request may block the requests behind and once a request gets stuck in a pipeline, it will have to wait for the next requests to be fulfilled. To overcome these shortcomings of `HTTP/1.1`, the developers started implementing the workarounds, for example use of spritesheets, encoded images in CSS, single humongous CSS/Javascript files, [domain sharding](https://www.maxcdn.com/one/visual-glossary/domain-sharding-2/) etc.
 
 ### SPDY - 2009
 
@@ -121,7 +121,7 @@ Google went ahead and started experimenting with alternative protocols to make t
 
 It was seen that if we keep increasing the bandwidth, the network performance increases in the beginning but a point comes when there is not much of a performance gain. But if you do the same with latency i.e. if we keep dropping the latency, there is a constant performance gain. This was the core idea for performance gain behind `SPDY`, decrease the latency to increase the network performance.
 
-> For those who don't know the difference, latency is the delay i.e. how long it takes for data to travel between the source and destination (measured in milliseconds) and bandwidth is the amount of data transfered per second (bits per second).
+> For those who don't know the difference, latency is the delay i.e. how long it takes for data to travel between the source and destination (measured in milliseconds) and bandwidth is the amount of data transferred per second (bits per second).
 
 The features of `SPDY` included, multiplexing, compression, prioritization, security etc. I am not going to get into the details of SPDY, as you will get the idea when we get into the nitty gritty of `HTTP/2` in the next section as I said `HTTP/2` is mostly inspired from SPDY.
 

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/roadmaps.json

@@ -125,7 +125,7 @@
         "devops roadmap 2022",
         "sre roadmap 2022",
         "operations roadmap 2022",
-        "guide to becoming a devops enginer",
+        "guide to becoming a devops engineer",
         "devops roadmap",
         "sre roadmap",
         "site reliability engineer roadmap",

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

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

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

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

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

@@ -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/101-html/100-learn-the-basics.md

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

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

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

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

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

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

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

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

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

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

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

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

@@ -11,7 +11,9 @@ JavaScript allows you to add interactivity to your pages. Common examples that y
 <ResourceGroupTitle>Free Content</ResourceGroupTitle>
 <BadgeLink badgeText='Read' colorScheme="yellow" href='https://www.w3schools.com/js/'>W3Schools – JavaScript Tutorial</BadgeLink>
 <BadgeLink badgeText='Read' colorScheme="yellow" href='https://javascript.info/'>The Modern JavaScript Tutorial</BadgeLink>
+<BadgeLink badgeText='Read' colorScheme="yellow" href='https://www.javascripttutorial.net/'>Learn JavaScript: Covered many topics</BadgeLink>
 <BadgeLink badgeText='Read' colorScheme="yellow" href='https://eloquentjavascript.net/'>Eloquent JavaScript textbook</BadgeLink>
+<BadgeLink badgeText='Read' colorScheme="yellow" href='https://github.com/getify/You-Dont-Know-JS'>You Don't Know JS Yet (book series) </BadgeLink>
 <BadgeLink badgeText='Watch' href='https://youtu.be/hdI2bqOjy3c?t=2'>JavaScript Crash Course for Beginners</BadgeLink>
 <BadgeLink badgeText='Watch' href='https://youtu.be/P7t13SGytRk?t=22'>Build a Netflix Landing Page Clone with HTML, CSS & JS</BadgeLink>
 <BadgeLink badgeText='Course' colorScheme='green' href='https://github.com/workshopper/javascripting'>Learn the basics of JavaScript</BadgeLink>

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

@@ -6,7 +6,6 @@ HTTPS is a secure way to send data between a web server and a browser.
 <BadgeLink badgeText='Read' colorScheme="yellow" href='https://www.cloudflare.com/en-gb/learning/ssl/what-is-https/'>What is HTTPS?</BadgeLink>
 <BadgeLink badgeText='Read' colorScheme="yellow" href='https://developers.google.com/web/fundamentals/security/encrypt-in-transit/why-https'>Why HTTPS Matters</BadgeLink>
 <BadgeLink badgeText='Read' colorScheme="yellow" href='https://developers.google.com/web/fundamentals/security/encrypt-in-transit/enable-https'>Enabling HTTPS on Your Servers</BadgeLink>
+<BadgeLink badgeText='Read' colorScheme="yellow" href='https://howhttps.works/'>How HTTPS works (comic)</BadgeLink>
 <BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=hExRDVZHhig'>SSL, TLS, HTTP, HTTPS Explained</BadgeLink>
 <BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=GoXgl9r0Kjk'>HTTPS — Stories from the field</BadgeLink>
-
-

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

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

content/roadmaps/100-frontend/content/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

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

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

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

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

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

content/roadmaps/100-frontend/content/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/114-css-frameworks/114-js-first/104-mantine.md

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

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

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

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

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

content/roadmaps/100-frontend/content/115-testing-your-apps/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/118-server-side-rendering/100-react-js/101-after-js.md

@@ -4,4 +4,4 @@ After.js is an open-source JavaScript framework for developing SSR (Server Side
 
 <ResourceGroupTitle>Free Resources</ResourceGroupTitle>
 <BadgeLink colorScheme='blue' badgeText='Official Repository' href='https://github.com/jaredpalmer/after.js'>Official GitHub repository</BadgeLink>
-<BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://www.npmjs.com/package/@jaredpalmer/after'>Documetation</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://www.npmjs.com/package/@jaredpalmer/after'>Documentation</BadgeLink>

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

@@ -0,0 +1,7 @@
+# Remix
+
+Remix is a full stack web framework that lets you focus on the user interface and work back through web standards to deliver a fast, slick, and resilient user experience. People are gonna love using your stuff.
+
+<ResourceGroupTitle>Free Resources</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://remix.run/'>Official Website</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://remix.run/docs/en/v1#getting-started'>Official Docs for Getting Started</BadgeLink>

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

@@ -0,0 +1,7 @@
+# Remix
+
+Remix is a full stack web framework that lets you focus on the user interface and work back through web standards to deliver a fast, slick, and resilient user experience. People are gonna love using your stuff.
+
+<ResourceGroupTitle>Free Resources</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://remix.run/'>Official Website</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://remix.run/docs/en/v1#getting-started'>Official Docs for Getting Started</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/101-backend/content-paths.json

@@ -133,6 +133,6 @@
   "scalability:mitigation-strategies": "/roadmaps/101-backend/content/123-scalability/100-mitigation-strategies.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-vertial-scaling": "/roadmaps/101-backend/content/123-scalability/103-horizontal-vertial-scaling.md",
+  "scalability:horizontal-vertical-scaling": "/roadmaps/101-backend/content/123-scalability/103-horizontal-vertical-scaling.md",
   "scalability:observability": "/roadmaps/101-backend/content/123-scalability/104-observability.md"
 }

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

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

content/roadmaps/101-backend/content/102-os-general-knowledge/104-basic-terminal-commands.md

@@ -10,6 +10,7 @@ After enough exposure and practice to these commands, it will become easier to u
 
 <ResourceGroupTitle>Free Content</ResourceGroupTitle>
 <BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.hostinger.com/tutorials/linux-commands'>34 Basic Linux Commands</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://github.com/ibraheemdev/modern-unix'>A collection of modern/faster/saner alternatives to common unix commands</BadgeLink>
 <BadgeLink badgeText='Course' colorScheme='green' href='https://www.learnenough.com/command-line-tutorial'>Command Line Tutorial</BadgeLink>
 <BadgeLink colorScheme='green' badgeText='Challenge' href='https://cmdchallenge.com/'>Commandline Challenge</BadgeLink>
 <BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=ZtqBQ68cfJc'>The 50 Most Popular Linux & Terminal Commands (with timestamps)</BadgeLink>

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

@@ -1,9 +1,10 @@
 # PHP
 
-PHP is a server scripting language and a powerful tool for making dynamic and interactive Web pages. It was originally created by Danish-Canadian programmer Rasmus Lerdorf in 1994. The PHP reference implementation is now produced by The PHP Group.
+PHP is a general purpose scripting language often used for making dynamic and interactive Web pages. It was originally created by Danish-Canadian programmer Rasmus Lerdorf in 1994. The PHP reference implementation is now produced by The PHP Group and supported by PHP Foundation. PHP supports procedural and object-oriented styles of programming with some elements of functional programming as well.
 
 <ResourceGroupTitle>Free Content</ResourceGroupTitle>
 <BadgeLink colorScheme='blue' badgeText='Official Website' href='https://php.org/'>PHP Website</BadgeLink>
 <BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.w3schools.com/php/'>Learn PHP - W3Schools</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://phptherightway.com/'>PHP - The Right Way</BadgeLink>
 <BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=2eebptXfEvw'>PHP For Absolute Beginners</BadgeLink>
 <BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=sVbEyFZKgqk&list=PLr3d3QYzkw2xabQRUpcZ_IBk9W50M9pe-'>Full PHP 8 Tutorial - Learn PHP The Right Way In 2022</BadgeLink>

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

@@ -14,6 +14,7 @@ JavaScript, often abbreviated JS, is a programming language that is one of the c
 <BadgeLink badgeText='Read' colorScheme="yellow" href='https://www.w3schools.com/js/'>W3Schools – JavaScript Tutorial</BadgeLink>
 <BadgeLink badgeText='Read' colorScheme="yellow" href='https://javascript.info/'>The Modern JavaScript Tutorial</BadgeLink>
 <BadgeLink badgeText='Read' colorScheme='yellow' href='https://eloquentjavascript.net/'>Eloquent Javascript - Book</BadgeLink>
+<BadgeLink badgeText='Read' colorScheme="yellow" href='https://github.com/getify/You-Dont-Know-JS'>You Don't Know JS Yet (book series) </BadgeLink>
 <BadgeLink badgeText='Course' colorScheme='green' href='https://www.codecademy.com/learn/introduction-to-javascript'>Codecademy - Learn JavaScript</BadgeLink>
 <BadgeLink badgeText='Watch' href='https://youtu.be/hdI2bqOjy3c'>JavaScript Crash Course for Beginners</BadgeLink>
 

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

@@ -6,12 +6,13 @@
 
 # Python
 
-Python is a well known programming language which is both a strongly typed and a dynamically typed language. Being an interpreted language, code is executed as soon as it is written and the Python syntax allows for writing code in functional, procedureal or object-oriented programmatic ways.
+Python is a well known programming language which is both a strongly typed and a dynamically typed language. Being an interpreted language, code is executed as soon as it is written and the Python syntax allows for writing code in functional, procedural or object-oriented programmatic ways.
 
 <ResourceGroupTitle>Free Content</ResourceGroupTitle>
 <BadgeLink colorScheme='blue' badgeText='Official Website' href='https://www.python.org/'>Python Website</BadgeLink>
 <BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.python.org/about/gettingstarted/'>Python Getting Started</BadgeLink>
 <BadgeLink colorScheme='yellow' badgeText='Read' href='https://automatetheboringstuff.com/'>Automate the Boring Stuff</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.freecodecamp.org/news/how-to-learn-python/'>FreeCodeCamp.org - How to Learn Python ? </BadgeLink>
 <BadgeLink badgeText='Course' colorScheme='green' href='https://pythonprinciples.com/'>Python principles - Python basics</BadgeLink>
 <BadgeLink badgeText='Course' colorScheme='green' href='https://www.w3schools.com/python/'>W3Schools - Python Tutorial </BadgeLink>
 <BadgeLink badgeText='Course' colorScheme='green' href='https://ehmatthes.github.io/pcc/'>Python Crash Course</BadgeLink>

content/roadmaps/101-backend/content/107-nosql-databases/101-column-databases.md

@@ -1,6 +1,6 @@
 # Column Databases
 
-A **<u>wide-column database</u>** (sometimes refered to as a column database) is similar to a relational database. It store data in tables, rows and columns. However in opposite to relational databases here each row can have its own format of the columns. Column databases can be seen as a two-dimensional key-value database. One of such database system is **Apache Cassandra**.
+A **<u>wide-column database</u>** (sometimes referred to as a column database) is similar to a relational database. It store data in tables, rows and columns. However in opposite to relational databases here each row can have its own format of the columns. Column databases can be seen as a two-dimensional key-value database. One of such database system is **Apache Cassandra**.
 
 **Warning:** <a href="https://en.wikipedia.org/wiki/Wide-column_store#Wide-column_stores_versus_columnar_databases">note that a "columnar database" and a "column database" are two different terms!</a>
 

content/roadmaps/101-backend/content/111-web-security-knowledge/105-https.md

@@ -6,5 +6,6 @@ HTTPS is a secure way to send data between a web server and a browser.
 <BadgeLink badgeText='Read' colorScheme="yellow" href='https://www.cloudflare.com/en-gb/learning/ssl/what-is-https/'>What is HTTPS?</BadgeLink>
 <BadgeLink badgeText='Read' colorScheme="yellow" href='https://developers.google.com/web/fundamentals/security/encrypt-in-transit/why-https'>Why HTTPS Matters</BadgeLink>
 <BadgeLink badgeText='Read' colorScheme="yellow" href='https://developers.google.com/web/fundamentals/security/encrypt-in-transit/enable-https'>Enabling HTTPS on Your Servers</BadgeLink>
+<BadgeLink badgeText='Read' colorScheme="yellow" href='https://howhttps.works/'>How HTTPS works (comic)</BadgeLink>
 <BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=hExRDVZHhig'>SSL, TLS, HTTP, HTTPS Explained</BadgeLink>
 <BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=GoXgl9r0Kjk'>HTTPS — Stories from the field</BadgeLink>

content/roadmaps/101-backend/content/112-testing/100-integration-testing.md

@@ -1,6 +1,6 @@
 # Integration Testing
 
-Integration testing a broad category of tests where multiple software modules are __integrated__ and tested as a group. It is meant to test the __interaction__ between multiple services, resources, or modules. For example, an API's interaction with a backend service, or a service with a database.
+Integration testing is a broad category of tests where multiple software modules are __integrated__ and tested as a group. It is meant to test the __interaction__ between multiple services, resources, or modules. For example, an API's interaction with a backend service, or a service with a database.
 
 <ResourceGroupTitle>Free Content</ResourceGroupTitle>
 <BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.guru99.com/integration-testing.html'>Integration Testing</BadgeLink>

content/roadmaps/101-backend/content/113-ci-cd.md

@@ -5,3 +5,4 @@ CI/CD (Continuous Integration/Continuous Deployment) is the practice of automati
 <ResourceGroupTitle>Free Content</ResourceGroupTitle>
 <BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=scEDHsr3APg'>DevOps CI/CD Explained in 100 Seconds by Fireship</BadgeLink>
 <BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=nyKZTKQS_EQ'>Automate your Workflows with GitHub Actions</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://about.gitlab.com/topics/ci-cd/'>What is CI/CD?</BadgeLink>

content/roadmaps/101-backend/content/123-scalability/102-migration-strategies.md

@@ -1 +1,6 @@
-# Migration strategies
+# Migration Strategies
+
+A migration strategy is a plan for moving data from one location to another, and it is an important step in any database migration. A data migration strategy should include a plan for how to move the data and what to do with it once it arrives at the new location.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink badgeText='Website' colorScheme="yellow" href='https://theecmconsultant.com/data-migration-strategy'>Migration strategies</BadgeLink>

content/roadmaps/101-backend/content/123-scalability/104-observability.md

@@ -1 +1,14 @@
 # Observability
+
+In sofware development, observability is the measure of how well we can understand a system from the work it does, and how to make it better.
+
+So what makes a system to be "observable"? It is its ability of producing and collecting metrics, logs and traces in order for us to understand what happens under the hood and identify issues and bottlenecks faster.
+
+You can of course implement all those features by yourself, but there are a lot of softwares out there that can help you with it like Datadog, Sentry and CloudWatch.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Official Documentation' href='https://docs.datadoghq.com/'>DataDog Docs</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Official Documentation' href='https://aws.amazon.com/cloudwatch/getting-started/'>AWS CloudWatch Docs</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Official Documentation' href='https://docs.sentry.io/'>Sentry Docs</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=Wx0SHRb2xcI'>AWS re:Invent 2017: Improving Microservice and Serverless Observability with Monitor</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://newrelic.com/blog/best-practices/observability-instrumentation'>Observability and Instrumentation: What They Are and Why They Matter</BadgeLink>

content/roadmaps/101-backend/content/123-scalability/readme.md

@@ -1 +1,19 @@
-# Scalability
+# Building for Scale
+
+Speaking in general terms, scalability is the ability of a system to handle a growing amount of work by adding resources to it.  
+
+A software that was conceived with a scalable architecture in mind, is a system that will support higher workloads without any fundamental changes to it, but don't be fooled, this isn't magic. You'll only get so far with smart thinking without adding more sources to it.  
+
+For a system to be scalable, there are certain things you must pay attention to, like:
+* Coupling
+* Observability
+* Evolvability
+* Infrastructure
+
+When you think about the infrastructure of a scalable system, you have two main ways of building it: using on-premises resources or leveraging all the tools a cloud provider can give you.  
+
+The main difference between on-premises and cloud resources will be FLEXIBILITY, on cloud providers you don't really need to plan ahead, you can upgrade your infrastructure with a couple of clicks, while with on-premises resources you will need a certain level of planning.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.sentinelone.com/blog/scalable-architecture/'>Scalable Architecture: A Definition and How-To Guide</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=gxfERVP18-g'>Scaling Distributed Systems - Software Architecture Introduction</BadgeLink>

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

@@ -14,3 +14,4 @@ Go is an open source programming language supported by Google. Go can be used to
 <BadgeLink badgeText='Read' colorScheme="yellow" href='https://gobyexample.com/'>Go by Example - annotated example programs</BadgeLink>
 <BadgeLink colorScheme='green' badgeText='Course' href='https://www.codecademy.com/learn/learn-go'>Learn Go | Codecademy</BadgeLink>
 <BadgeLink colorScheme='green' badgeText='Course' href='https://www.w3schools.com/go/'>W3Schools Go Tutorial </BadgeLink>
+<BadgeLink badgeText='Read' colorScheme="yellow" href='https://thenewstack.io/make-a-restful-json-api-go/'>Making a RESTful JSON API in Go</BadgeLink>

content/roadmaps/102-devops/content/100-language/105-c.md

@@ -1,6 +1,6 @@
 # C
 
-is a powerful general-purpose programming language. It can be used to develop software like operating systems, databases, compilers, and so on.
+C is a powerful general-purpose programming language. It can be used to develop software like operating systems, databases, compilers, and so on.
 
 <ResourceGroupTitle>Free Content</ResourceGroupTitle>
 <BadgeLink badgeText='Read' colorScheme="yellow" href='https://www.programiz.com/c-programming'>Learn C Language</BadgeLink>

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

@@ -1,3 +1,3 @@
 # Learn a Language
 
-It doesn't matter what language you pick, but it is important to learn at least one. You will be able to use that language write automation scripts. 
+It doesn't matter what language you pick, but it is important to learn at least one. You will be able to use that language to write automation scripts. 

content/roadmaps/102-devops/content/102-managing-servers/100-operating-system/100-windows.md

@@ -1 +1,6 @@
 # Windows
+
+Windows is a graphical user interface (GUI) based operating system developed by Microsoft. It is a hybrid kernel-based proprietary operating system. According to a survey, till April 2022, windows is the most popular operating system in the world with a 75% market share.
+
+<BadgeLink badgeText='Official Website' colorScheme='blue' href='http://microsoft.com/windows'>Windows Official Site</BadgeLink>
+<BadgeLink badgeText='Official Documentation' colorScheme='blue' href='https://learn.microsoft.com/en-us/windows/'>Windows Documentation for Developers</BadgeLink>

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

@@ -1 +1,8 @@
 # Terminal multiplexers
+
+Terminal multiplexers are programs that allow us to [multiplex](https://en.wikipedia.org/wiki/Multiplexing) a terminal into several sub-processes or terminals inside a single terminal session, this means that we can have multiple open sessions using a single login session to a local or remote machine.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://en.wikipedia.org/wiki/Terminal_multiplexer'>Terminal Multiplexer</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://linuxcommand.org/lc3_adv_termmux.php'>Terminal Multiplexers</BadgeLink>

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

@@ -6,3 +6,5 @@ See `man ps` further information
 
 <BadgeLink badgeText='Official Documentation' colorScheme='blue' href='https://man7.org/linux/man-pages/man1/ps.1.html'>ps Documentation</BadgeLink>
 <BadgeLink badgeText='Read' colorScheme='yellow' href='https://www.sysadmin.md/ps-cheatsheet.html'>ps Cheat Sheet</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=wYwGNgsfN3I'>Linux Crash Course - The ps Command</BadgeLink>
+

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

@@ -1 +1,10 @@
 # Sar
+
+Short for **S**ystem **A**ctivity **R**eport, it is a command line tool for Unix and Unix-like operating systems that shows a report of different information about the usage and activity of resorces in the operating system.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.geeksforgeeks.org/sar-command-linux-monitor-system-performance/'>SAR command in Linux to monitor system performance</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://man7.org/linux/man-pages/man1/sar.1.html'>SAR Man Page</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://linux.die.net/man/1/sar'>SAR Man Page 2</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Tutorial' href='https://linuxhint.com/sar_linux_tutorial/'>Sar tutorial for beginners</BadgeLink>

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

@@ -1 +1,10 @@
 # Vmstat
+
+Short for **V**irtual **m**emory **stat**istic reporter, it is a command line tool for Unix and Unix-like operating systems that reports various information about the operating system such as memory, paging, processes, I/O, CPU and disk usage.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.geeksforgeeks.org/vmstat-command-in-linux-with-examples/'>vmstat command in Linux with Examples</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.redhat.com/sysadmin/linux-commands-vmstat'>Linux commands: exploring virtual memory with vmstat</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://man7.org/linux/man-pages/man8/vmstat.8.html'>VMstat Man Page</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://phoenixnap.com/kb/vmstat-command'>vmstat tutorial</BadgeLink>

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

@@ -6,3 +6,5 @@ Netstat is a command line utility to display all the network connections on a sy
 <BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.tutorialspoint.com/unix_commands/netstat.htm'>netstat command in Linux with Examples</BadgeLink>
 <BadgeLink colorScheme='yellow' badgeText='Read' href='http://www.c-jump.com/CIS24/Slides/Networking/html_utils/netstat.html'>Netstat Tutorial</BadgeLink>
 <BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=bxFwpm4IobU'>Netstat Commands - Network Administration Tutorial</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=zGNcvBaN5wE'>Linux Command Line Tutorial For Beginners - netstat command</BadgeLink>
+

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

@@ -9,3 +9,4 @@ It has the below syntax:
 <ResourceGroupTitle>Free Content</ResourceGroupTitle>
 <BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.geeksforgeeks.org/awk-command-unixlinux-examples/'>What is AWK? How to use it?</BadgeLink>
 <BadgeLink colorScheme='yellow' badgeText='Read' href='https://linuxize.com/post/awk-command/'>How AWK works?</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=oPEnvuj9QrI'>Linux Crash Course - awk</BadgeLink>

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

@@ -1,6 +1,6 @@
 # strace
 
-`strac` is a useful diagnsotic, debugging tool for unix based operating systems. It traces the system calls and signals a processs uses during its lifetime. And usually returns the name of the each system calls , its arguments and what it returned.
+`strac` is a useful diagnsotic, debugging tool for unix based operating systems. It traces the system calls and signals a process uses during its lifetime. And usually returns the name of the each system calls , its arguments and what it returned.
 
 <ResourceGroupTitle>Free Content</ResourceGroupTitle>
 <BadgeLink colorScheme='blue' badgeText='Official Website' href='https://strace.io/'>Strace Official Website</BadgeLink>

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

@@ -1 +1,7 @@
-# Dtrace
+# DTrace
+
+DTrace is a comprehensive dynamic tracing framework ported from Solaris. DTrace provides a powerful infrastructure that permits administrators, developers, and service personnel to concisely answer arbitrary questions about the behavior of the operating system and user programs.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink badgeText='Read' colorScheme='yellow' href='https://man7.org/linux/man-pages/man1/dtrace.1.html'>df manual</BadgeLink>
+<BadgeLink badgeText='Read' colorScheme='yellow' href='https://en.wikipedia.org/wiki/DTrace'>Wikipedia - DTrace</BadgeLink>

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

@@ -1 +1,8 @@
-# Df
+# df
+
+`df` is a standard Unix command used to display the amount of available disk space for file systems on which the invoking user has appropriate read access. df is typically implemented using the statfs or statvfs system calls.
+
+<ResourceGroupTitle>Useful Links</ResourceGroupTitle>
+<BadgeLink badgeText='Read' colorScheme='yellow' href='https://man7.org/linux/man-pages/man1/df.1.html'>df manual</BadgeLink>
+<BadgeLink badgeText='Read' colorScheme='yellow' href='https://www.redhat.com/sysadmin/Linux-df-command'>Redhat - Check your disk space use with the Linux df command</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.geeksforgeeks.org/df-command-linux-examples/'>df command with examples</BadgeLink>

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

@@ -1 +1,8 @@
 # Du
+
+The `du` utility, short for disk usage, displays the file system block usage for each file argument and for each directory in the file hierarchy rooted in each directory argument. If no file is specified, the block usage of the hierarchy rooted in the current directory is displayed.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink badgeText='Read' colorScheme='yellow' href='https://man7.org/linux/man-pages/man1/du.1.html'>du manual</BadgeLink>
+<BadgeLink badgeText='Read' colorScheme='yellow' href='https://www.redhat.com/sysadmin/du-command-options'>Redhat - du and the options you should be using</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://linuxhint.com/linux-du-command-examples/'>Du command with examples</BadgeLink>

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

@@ -1 +1,9 @@
-# Scp
+# SCP
+
+`SCP` is an acronym for Secure Copy Protocol.It is a command line utility that allows the user to securely copy files and directories between two locations usually between unix or linux systems.The protocol ensures the transmission of files is encrypted to prevent anyone with suspicious intentions from getting sensitive information.`SCP` uses encryption over an `SSH` (Secure Shell) connection, this ensures that the data being transferred is protected from suspicious attacks.
+
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.freecodecamp.org/news/scp-linux-command-example-how-to-ssh-file-transfer-from-remote-to-local/'>SCP Linux Command</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.tecmint.com/scp-commands-examples/'>10 SCP command examples</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://phoenixnap.com/kb/linux-scp-command'>SCP command explained</BadgeLink>

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

@@ -4,5 +4,6 @@ DNS (**D**omain **N**ame **S**ystem) is the phonebook of the Internet. Humans ac
 
 <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>

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

@@ -8,3 +8,4 @@ HTTPS (**H**ypertext **T**ransfer **P**rotocol **S**ecure) is the secure version
 <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>

content/roadmaps/102-devops/content/103-networking-protocols/107-port-forwarding.md

@@ -4,4 +4,4 @@ Port forwarding, sometimes called **port mapping**, allows computers or services
 
 <ResourceGroupTitle>Free Content</ResourceGroupTitle>
 <BadgeLink badgeText='Read' colorScheme="yellow" href='https://learn.g2.com/port-forwarding'>What is Port Forwarding?</BadgeLink>
-<BadgeLink badgeText='Read' colorScheme="yellow" href='https://cybernews.com/what-is-vpn/port-forwarding/'>Types of Port Fowarding</BadgeLink>
+<BadgeLink badgeText='Read' colorScheme="yellow" href='https://cybernews.com/what-is-vpn/port-forwarding/'>Types of Port Forwarding</BadgeLink>

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

@@ -8,3 +8,5 @@ The popularity of Kubernetes has made it an increasingly important skill for the
 <BadgeLink colorScheme='blue' badgeText='Official Website' href='https://kubernetes.io/'>Kubernetes Website</BadgeLink>
 <BadgeLink colorScheme='blue' badgeText='Documentation' href='https://kubernetes.io/docs/home/'>Kubernetes Documentation</BadgeLink>
 <BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=s_o8dwzRlu4'>Kubernetes Crash Course for Absolute Beginners</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://thenewstack.io/primer-how-kubernetes-came-to-be-what-it-is-and-why-you-should-care/'>Primer: How Kubernetes Came to Be, What It Is, and Why You Should Care</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://thenewstack.io/kubernetes-an-overview/'>Kubernetes: An Overview</BadgeLink>

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

@@ -7,3 +7,4 @@ The term Infrastructure as Code encompasses everything from bootstrapping to con
 <ResourceGroupTitle>Free Content</ResourceGroupTitle>
 <BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=zWw2wuiKd5o'>What is Infrastructure as Code?</BadgeLink>
 <BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=POPP2WTJ8es'>What is Infrastructure as Code? Difference of Infrastructure as Code Tools</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://thenewstack.io/guis-cli-apis-learn-basic-terms-of-infrastructure-as-code/'>GUIs, CLI, APIs: Learn Basic Terms of Infrastructure-as-Code</BadgeLink>

content/roadmaps/102-devops/content/106-ci-cd/103-travis-ci.md

@@ -1,6 +1,6 @@
 # Travis CI
 
-Travis CI is a CI/CD service that is primarily used for building and testing projects that are hosted on BitBucket and GitHub. Open source projects can utilized Travis CI for free.
+Travis CI is a CI/CD service that is primarily used for building and testing projects that are hosted on BitBucket and GitHub. Open source projects can utilize Travis CI for free.
 
 <BadgeLink badgeText='Official Website' colorScheme='blue' href='https://www.travis-ci.com/'>Travis CI Website</BadgeLink>
 <BadgeLink badgeText='Official Documentation' colorScheme='blue' href='https://docs.travis-ci.com/'>Travis CI Documentation</BadgeLink>

content/roadmaps/102-devops/content/106-ci-cd/readme.md

@@ -1 +1,10 @@
-# Ci cd
+# CI/CD
+
+CI/CD is a method to frequently deliver apps to customers by introducing automation into the stages of app development. The main concepts attributed to CI/CD are continuous integration, continuous delivery, and continuous deployment. CI/CD is a solution to the problems integrating new code can cause for development and operations teams.
+
+Specifically, CI/CD introduces ongoing automation and continuous monitoring throughout the lifecycle of apps, from integration and testing phases to delivery and deployment. Taken together, these connected practices are often referred to as a "CI/CD pipeline" and are supported by development and operations teams working together in an agile way with either a DevOps or site reliability engineering (SRE) approach.
+
+<BadgeLink badgeText='Read' colorScheme='yellow' href='https://www.atlassian.com/continuous-delivery/principles/continuous-integration-vs-delivery-vs-deployment'>CI vs CD</BadgeLink>
+<BadgeLink badgeText='Read' colorScheme='yellow' href='https://www.redhat.com/en/topics/devops/what-is-ci-cd'>What is CI/CD?</BadgeLink>
+<BadgeLink badgeText='Read' colorScheme='yellow' href='https://semaphoreci.com/blog/cicd-pipeline'>CI/CD Pipeline: A Gentle Introduction</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=scEDHsr3APg'>DevOps CI/CD Explained in 100 Seconds</BadgeLink>

content/roadmaps/102-devops/content/112-management-and-monitoring.md

@@ -1 +1,5 @@
-# Management and monitoring
+# Management and Monitoring
+
+DevOps management and monitoring entails overseeing the entire development process from planning, development, integration and testing, deployment, and operations. It involves a complete and real-time view of the status of applications, services, and infrastructure in the production environment. Features such as real-time streaming, historical replay, and visualizations are critical components of application and service monitoring.
+
+<BadgeLink badgeText='Get Started Guide' colorScheme='blue' href='https://www.atlassian.com/devops/devops-tools/devops-monitoring'>Management and Monitoring Get Started Guide</BadgeLink>

content/roadmaps/102-devops/meta.json

@@ -6,7 +6,7 @@
       "devops roadmap 2022",
       "sre roadmap 2022",
       "operations roadmap 2022",
-      "guide to becoming a devops enginer",
+      "guide to becoming a devops engineer",
       "devops roadmap",
       "sre roadmap",
       "site reliability engineer roadmap",

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

@@ -52,7 +52,7 @@
   "react-ecosystem:testing:react-testing-library": "/roadmaps/103-react/content/102-react-ecosystem/106-testing/101-react-testing-library.md",
   "react-ecosystem:testing:cypress": "/roadmaps/103-react/content/102-react-ecosystem/106-testing/102-cypress.md",
   "react-ecosystem:state-management": "/roadmaps/103-react/content/102-react-ecosystem/107-state-management/readme.md",
-  "react-ecosystem:state-management:conext-state": "/roadmaps/103-react/content/102-react-ecosystem/107-state-management/100-conext-state.md",
+  "react-ecosystem:state-management:context-state": "/roadmaps/103-react/content/102-react-ecosystem/107-state-management/100-context-state.md",
   "react-ecosystem:state-management:redux": "/roadmaps/103-react/content/102-react-ecosystem/107-state-management/101-redux.md",
   "react-ecosystem:state-management:mobx": "/roadmaps/103-react/content/102-react-ecosystem/107-state-management/102-mobx.md",
   "react-ecosystem:styling": "/roadmaps/103-react/content/102-react-ecosystem/108-styling/readme.md",

content/roadmaps/104-angular/content/100-typescript-basics/readme.md

@@ -1,4 +1,6 @@
 # Typescript Basics
 
+In order to enter into the world of Angular application development, typescript is necessary and it is the primary language here. Typescript is a superset of JavaScript. It comes with design-time support which is useful for type safety and tooling. Since, browsers cannot execute the TypeScript directly, it will be 'Transpiled' into JavaScript using the tsc compiler.
+
 <BadgeLink colorScheme='yellow' badgeText='Read' href='https://medium.com/jspoint/typescript-a-beginners-guide-6956fe8bcf9e'>Typescript a Beginners Guide</BadgeLink>
-<BadgeLink colorScheme='green' badgeText='Compiler' href='https://www.typescriptlang.org/play'>Typescript Playground</BadgeLink>
+<BadgeLink colorScheme='green' badgeText='Visit' href='https://www.typescriptlang.org/play'>TypeScript Playground</BadgeLink>

content/roadmaps/104-angular/content/101-rxjs-basics/100-observable-pattern.md

@@ -1 +1,8 @@
-# Observable pattern
+# Observable Pattern
+
+The observer pattern is a software design pattern in which an object, named the subject, maintains a list of its dependents, called observers, and notifies them automatically of any state changes, usually by calling one of their methods.
+
+Angular uses the Observer pattern which simply means — Observable objects are registered, and other objects observe (in Angular using the subscribe method) them and take action when the observable object is acted on in some way.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink badgeText='Read' colorScheme='yellow' href='https://medium.com/fuzzycloud/angular-and-observable-4bf890b2a282'>Angular and Observable</BadgeLink>

content/roadmaps/104-angular/content/101-rxjs-basics/101-observable-lifecycle.md

@@ -1 +1,12 @@
 # Observable lifecycle
+
+An observable is a function that acts as a wrapper for a data stream. They support to pass messages inside your application. An observable is useless until an observer subscribes to it. An observer is an object which consumes the data emitted by the observable. An observer keeps receiving data values from the observable until the observable is completed, or the observer unsubscribes from the observable. Otherwise observers can receive data values from the observable continuously and asynchronously. So we can perform various operations such as updating the user interface, or passing the JSON response.
+
+There are 4 stages for a life cycle of an observable.
+ - Creation
+ - Subscription
+ - Execution
+ - Destruction
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://medium.com/analytics-vidhya/understanding-rxjs-observables-ad5b34d9607f'>Understanding Observable LifeCycle</BadgeLink>

content/roadmaps/104-angular/content/101-rxjs-basics/104-operators/readme.md

@@ -1 +1,42 @@
-# Operators
+# RxJS Operators 
+
+
+RxJS is mostly useful for its operators, even though the Observable is the foundation. Operators are the essential pieces that allow complex asynchronous code to be easily composed in a declarative manner.
+
+Operators are functions. There are two kinds of operators:
+
+**Pipeable Operators** are the kind that can be piped to Observables using the syntax observableInstance.pipe(operator()). These include, filter(...), and mergeMap(...). When called, they do not change the existing Observable instance. Instead, they return a new Observable, whose subscription logic is based on the first Observable.
+
+A Pipeable Operator is essentially a pure function which takes one Observable as input and generates another Observable as output. Subscribing to the output Observable will also subscribe to the input Observable.
+
+**Creation Operators** are the other kind of operator, which can be called as standalone functions to create a new Observable. For example: of(1, 2, 3) creates an observable that will emit 1, 2, and 3, one right after another. Creation operators will be discussed in more detail in a later section.
+
+## Piping
+
+Pipeable operators are functions, so they could be used like ordinary functions: op()(obs) — but in practice, there tend to be many of them convolved together, and quickly become unreadable: op4()(op3()(op2()(op1()(obs)))). For that reason, Observables have a method called .pipe() that accomplishes the same thing while being much easier to read:
+
+```bash
+ obs.pipe(op1(), op2(), op3(), op4());
+ ```
+
+ ## Creation Operators
+
+**What are creation operators?** Distinct from pipeable operators, creation operators are functions that can be used to create an Observable with some common predefined behavior or by joining other Observables.
+
+A typical example of a creation operator would be the interval function. It takes a number (not an Observable) as input argument, and produces an Observable as output:
+
+```bash
+import { interval } from 'rxjs';
+
+const observable = interval(1000 /* number of milliseconds */);
+```
+
+<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://rxjs.dev/guide/operators#creation-operators-list'>List of creation operators</BadgeLink>
+
+
+## Higher-order Observables
+
+Observables most commonly emit ordinary values like strings and numbers, but surprisingly often, it is necessary to handle Observables of Observables, so-called higher-order Observables.
+
+<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://rxjs.dev/guide/operators'>Full RxJS Operators Documentation</BadgeLink>
+

content/roadmaps/104-angular/content/101-rxjs-basics/readme.md

@@ -1 +1,5 @@
-# Rxjs basics
+# RxJS Basics
+
+Reactive Extensions for JavaScript, or RxJS, is a reactive library used to implement reactive programming to deal with async implementation, callbacks, and event-based programs.
+
+The reactive paradigm can be used in many different languages through the use of reactive libraries. These libraries are downloaded APIs that provide functionalities for reactive tools like observers and operators. It can be used in your browser or with Node.js.

content/roadmaps/104-angular/content/102-angular-basics/105-services.md

@@ -1 +1,6 @@
 # Services
+
+Services let you define code or functionalities that are then accessible and reusable in many other components in the Angular project. It also helps you with the abstraction of logic and data that is hosted independently but can be shared across other components.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://angular.io/tutorial/toh-pt4'>Services</BadgeLink>

content/roadmaps/104-angular/content/102-angular-basics/106-routing.md

@@ -1 +1,7 @@
 # Routing
+
+Routing in Angular allows the users to create a single-page application with multiple views and allows navigation between them.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://angular.io/guide/routing-overview'>Angular Routing</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://angular.io/guide/router'>Common Routing Tasks</BadgeLink>

content/roadmaps/104-angular/content/102-angular-basics/readme.md

@@ -1 +1,5 @@
-# Angular basics
+# Angular Basics
+
+Angular is an strong front-end JavaScript framework which means that it enforces a certain style of application development and project structure that developers need to follow to develop apps with Angular. However, it also offers enough flexibility to allow you to structure your project in an understandable and manageable manner.
+
+In this module, we will have a look at some of the most basic concepts that you need to understand before diving into the framework with more advanced concepts.

content/roadmaps/104-angular/content/103-angular-cli/106-schematics.md

@@ -1 +1,7 @@
 # Schematics
+
+A schematic is a template-based code generator that supports complex logic. It is a set of instructions for transforming a software project by generating or modifying code.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='yellow' badgeText='Official Website' href='https://angular.io/guide/schematics#:~:text=A%20schematic%20is%20a%20template,collections%20and%20installed%20with%20npm.'>Angular Website</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Official Website' href='https://blog.angular.io/schematics-an-introduction-dc1dfbc2a2b2?gi=ad9571373944'>Angular Blog</BadgeLink>

content/roadmaps/104-angular/content/104-templates/100-interpolation.md

@@ -1 +1,6 @@
 # Interpolation
+
+Interpolation refers to embedding expressions into marked up text. By default, interpolation uses the double curly braces {{ and }} as delimiters. Angular replaces currentCustomer with the string value of the corresponding component property.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Official Website' href='ttps://angular.io/guide/interpolation'>Angular Official Website</BadgeLink>

content/roadmaps/104-angular/content/104-templates/101-property-binding.md

@@ -1 +1,7 @@
 # Property binding
+
+Property binding helps you set values for properties of HTML elements or directives. To bind to an element's property, enclose it in square brackets `[]` which causes Angular to evaluate the right-hand side of the assignment as a dynamic expression.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+
+<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://angular.io/guide/property-binding'>Angular Official Website</BadgeLink>

content/roadmaps/104-angular/content/104-templates/102-template-statements.md

@@ -1 +1,7 @@
 # Template statements
+
+Template statements are methods or properties that you can use in your HTML to respond to user events. With template statements, your application can engage users through actions such as displaying dynamic content or submitting forms. Enclose the event in `()`  which causes Angular to evaluate the right hand side of the assignment as one or more template statements chained together using semicolon `;`.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+
+<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://angular.io/guide/template-statements'>Angular Official Website</BadgeLink>

content/roadmaps/104-angular/content/104-templates/103-binding-data-props-attrs-events.md

@@ -1 +1,12 @@
 # Binding data props attrs events
+
+In an Angular template, a binding creates a live connection between view and the model and keeps them both in sync.
+
+- **property**: helps you set values for properties of HTML elements or directives.
+- **attributes**: helps you set values for attributes of HTML elements directly.
+- **event**: lets you listen for and respond to user actions such as keystrokes, mouse movements, clicks, and touches.
+- **data**: It's a combination of property and event binding and helps you share data between components.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+
+<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://angular.io/guide/binding-overview'>Angular Official Website</BadgeLink>

content/roadmaps/104-angular/content/104-templates/104-reference-vars.md

@@ -1 +1,7 @@
 # Reference vars
+
+Template reference variables help you use data from one part of a template in another part of the template. A template variable can refer to a DOM element within a template, component or directive. In the template, use the hash symbol, `#`, to declare a template reference variable.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+
+<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://angular.io/guide/template-reference-variables'>Angular Official Website</BadgeLink>

content/roadmaps/104-angular/content/104-templates/105-input-output.md

@@ -1 +1,7 @@
 # Input output
+
+`@Input()` and `@Output()` give a child component a way to communicate with its parent component. `@Input()` lets a parent component update data in the child component. Conversely, `@Output()` lets the child send data to a parent component.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+
+<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://angular.io/guide/inputs-outputs'>Angular Official Website</BadgeLink>

content/roadmaps/104-angular/content/104-templates/readme.md

@@ -1 +1,5 @@
 # Templates
+
+A template is a form of HTML that tells Angular how to render the component.
+
+<BadgeLink href="https://angular.io/guide/architecture-components" colorScheme="yellow" badgeText="Read">Introduction to Components and Templates</BadgeLink>

content/roadmaps/104-angular/content/105-rendering-topics/100-builtin-directives.md

@@ -1 +1,10 @@
 # Builtin directives
+
+SKDirectives are classes that add additional behavior to elements in your Angular applications. Use Angular's built-in directives to manage forms, lists, styles, and what users see.
+
+`NgClass` Adds and removes a set of CSS classes. | `NgStyle` Adds and removes a set of HTML styles. | `NgModel` Adds two-way data binding to an HTML form element.
+
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://angular.io/guide/built-in-directives'>Understanding BuiltIn Directives</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Web' href='https://thinkster.io/tutorials/angular-2-directives'>BuiltIn Directives Types</BadgeLink>

content/roadmaps/104-angular/content/105-rendering-topics/101-builtin-pipes.md

@@ -1 +1,10 @@
 # Builtin pipes
+
+Use pipes to transform strings, currency amounts, dates, and other data for display. Pipes are simple functions to use in template expressions to accept an input value and return a transformed value. Pipes are useful because you can use them throughout your application , some common pipes are 
+
+`DatePipe` | `UpperCasePipe` | `LowerCasePipe` | `CurrencyPipe` | `DecimalPipe` | `PercentPipe`
+
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://angular.io/guide/pipes'>Understanding BuiltIn Pipes</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Web' href='https://codecraft.tv/courses/angular/pipes/built-in-pipes/'>BuiltIn Pipes - exampls</BadgeLink>

content/roadmaps/104-angular/content/105-rendering-topics/102-change-detection.md

@@ -1 +1,7 @@
 # Change detection
+
+Change detection is the process through which Angular checks to see whether your application state has changed, and if any DOM needs to be updated. At a high level, Angular walks your components from top to bottom, looking for changes. Angular runs its change detection mechanism periodically so that changes to the data model are reflected in an application’s view. Change detection can be triggered either manually or through an asynchronous event
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://angular.io/guide/change-detection'>Understanding Change detection</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=f8sA-i6gkGQ'>4 Runtime Performance Optimizations ( Change detection )</BadgeLink>

content/roadmaps/104-angular/content/107-routing/101-router-outlets.md

@@ -1 +1,8 @@
 # Router outlets
+
+The router-outlet is a directive that's available from the @angular/router package and is used by the router to mark where in a template, a matched component should be inserted.
+
+Thanks to the router outlet, your app will have multiple views/pages and the app template acts like a shell of your application. Any element, you add to the shell will be rendered in each view, only the part marked by the router outlet will be changed between views.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://angular.io/api/router/RouterOutle'>Understanding Router Outlets</BadgeLink>

content/roadmaps/104-angular/content/107-routing/104-guards.md

@@ -1 +1,12 @@
-# Guards
+# Route Guards
+
+Angular route guards are interfaces provided by Angular which, when implemented, allow us to control the accessibility of a route based on conditions provided in class implementation of that interface.
+
+Some types of angular guards are `CanActivate`, `CanActivateChild`, `CanLoad`, `CanDeactivate` and `Resolve`.
+
+<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://angular.io/api/router'>Angular Official Website</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://angular.io/api/router/CanActivate'>Can Activate Guard</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://angular.io/api/router/CanActivateChild'>Can Activate Child</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://angular.io/api/router/CanDeactivate'>Can Deactivate</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://angular.io/api/router/CanLoad'>Angular Can Load</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://angular.io/api/router/CanMatch'>Can Match</BadgeLink>

content/roadmaps/104-angular/content/112-creating-a-custom-x/102-library.md

@@ -1 +1,6 @@
 # Library
+
+Use the Angular CLI and the npm package manager to build and publish your library as an npm package.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='yellow' badgeText='Official Website' href='https://angular.io/guide/creating-libraries'>Angular Website</BadgeLink>

content/roadmaps/104-angular/content/112-creating-a-custom-x/readme.md

@@ -1 +1,3 @@
-# Creating a custom x
+# Creating a custom X
+
+Learn how to create custom pipes, libraries and directives in Angular.

content/roadmaps/104-angular/content/113-angular-ssr/100-angular-universal.md

@@ -1 +1,7 @@
 # Angular universal
+
+Angular Universal also known as server-side rendering is tool which allows server to pre-render Angular application while user hits your website for first time.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='yellow' badgeText='Official Website' href='https://angular.io/guide/universal'>Angular Website</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Github Repository' href='https://github.com/angular/universal'>Github Repository</BadgeLink>

content/roadmaps/104-angular/content/113-angular-ssr/readme.md

@@ -1 +1,6 @@
-# Angular ssr
+# SSR in Angular
+
+A normal Angular application executes in the browser, rendering pages in the DOM in response to user actions. Angular Universal executes on the server, generating static application pages that later get bootstrapped on the client. This means that the application generally renders more quickly, giving users a chance to view the application layout before it becomes fully interactive.
+
+<BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://angular.io/guide/universal'>Angular Universal</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://web.dev/rendering-on-the-web/'>Rendering on the Web</BadgeLink>

content/roadmaps/104-angular/content/114-angular-ssg/100-scully.md

@@ -1 +1,7 @@
 # Scully
+
+Scully is the best static site generator for Angular projects looking to embrace the Jamstack. It will use your application and will create a static index. html for each of your pages/routes.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='yellow' badgeText='Official Website' href='https://scully.io/'>Scully Website</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Github Repository' href='https://github.com/scullyio/scully'>Github Repository</BadgeLink>