Revert "Removed Nodejs Error (#2341)"

This reverts commit e020389df9.

content/guides.json

@@ -132,7 +132,7 @@
   {
     "id": "unfamiliar-codebase",
     "title": "Unfamiliar Codebase",
-    "description": "Tips on getting familiar with an unfamiliar codebase",
+    "description": "Tips on getting getting familiar with an unfamiliar codebase",
     "isNew": false,
     "type":  "visual",
     "authorUsername": "kamranahmedse",

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
-WWW-Authenticate: Basic realm='user_pages'
+WWWW-Authenticate: Basic realm='user_pages'
 ```
 
 If you notice the response, we have an additional parameter called `realm`, which is just a value assigned to a group of pages that share the same credentials.

content/guides/journey-to-http2.md

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

content/guides/torrent-client.md

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

content/guides/what-is-internet.md

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

content/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.md) when you
+to [follow the contribution guidelines](https://github.com/kamranahmedse/developer-roadmap/tree/master/contributing) when you
 decide to contribute.
 
 ## Can I redistribute the content?

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

@@ -5,7 +5,6 @@ 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,6 +4,5 @@ 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,6 +3,7 @@
 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/readme.md

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

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

@@ -11,9 +11,7 @@ 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,6 +6,7 @@ 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/110-build-tools/102-linters-formatters/100-prettier.md

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

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

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

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

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

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

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

@@ -1,7 +0,0 @@
-# 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/122-desktop-applications/readme.md

@@ -1,8 +1 @@
-# 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/)
+# Desktop applications

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

@@ -1,9 +1,7 @@
 # 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,7 +10,6 @@ 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,10 +1,9 @@
 # PHP
 
-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.
+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.
 
 <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,7 +14,6 @@ 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

@@ -12,7 +12,6 @@ Python is a well known programming language which is both a strongly typed and a
 <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/111-web-security-knowledge/105-https.md

@@ -6,6 +6,5 @@ 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 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.
+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.
 
 <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,4 +5,3 @@ 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/104-observability.md

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

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

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

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

@@ -1,6 +1,6 @@
 # C
 
-C is a powerful general-purpose programming language. It can be used to develop software like operating systems, databases, compilers, and so on.
+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/102-managing-servers/101-live-in-terminal/100-terminal-multiplexers.md

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

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

@@ -6,5 +6,3 @@ 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,10 +1,17 @@
 # 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.
+`Sar` (**S**ystem **A**activity **R**eport) is a system utility command that is a part of `sysstat` package. It provides details on all aspects of system performance including system load, CPU usage, memory usage, paging, swapping, disk usage, device load, network activity, etc. Sar can display current performance, provide reports that are based on log files stored in your system's `/var/log/sa` or `/var/log/sysstat` folder, or be set up to automatically produce daily reports.
 
-<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+Usually, sar's service process (sysstat) runs in the background as a daemon, gathering a set of data every ten minutes. The data for the current day is written in a text file. It is converted to a binary file as each day passes. The files are overwritten each month so they don’t eat up all of your hard drive’s capacity.
 
-<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>
+The basic syntax of the sar command is the following:
+
+`sar [OPTIONS]`
+
+For example: `sar -r 1 3`
+
+To get more information about how to use sar, you can use man command: `man sar`
+
+<ResourceGroupTitle>Useful Links</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Man page' href='https://linux.die.net/man/1/sar'>Sar man page</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,10 +1,7 @@
 # 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.
+`vmstat` (**V**irtual **M**emory **Stat**istics) is a performance monitoring command. It is used to obtain information about memory, system processes, paging, interrupts, block I/O, disk, and CPU scheduling. Users can observe system activity virtually in real time by specifying a sampling period.
 
-<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>
+<ResourceGroupTitle>Useful Links</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Man page' href='https://man7.org/linux/man-pages/man8/vmstat.8.html'>vmstat man page</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Tutorial' 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,5 +6,3 @@ 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

@@ -8,5 +8,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>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://linuxize.com/post/awk-command/'>How AWK works?</BadgeLink>

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

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

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

@@ -3,6 +3,5 @@
 `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>
+<BadgeLink colorScheme='blue' badgeText='Man page' href='https://linux.die.net/man/1/df'>df man page</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Tutorial' 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,8 +1,15 @@
 # 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.
+The du (**D**isk **U**sage) command is used to retrieve information about disk space usage information in a specified directory.
 
-<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>
+the basic syntax of the command is the following:
+`du <directory name>` or `du`
+
+Usage Example:
+`du /home/nirzak`
+
+It can be used with various flags to customize the outputs. See the man page of this command for more options `man du`
+
+<ResourceGroupTitle>Useful Links</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Man page' href='https://man7.org/linux/man-pages/man1/du.1.html'>du man page</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Tutorial' href='https://linuxhint.com/linux-du-command-examples/'>Du command with examples</BadgeLink>

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

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

@@ -7,5 +7,4 @@ HTTPS (**H**ypertext **T**ransfer **P**rotocol **S**ecure) is the secure version
 <ResourceGroupTitle>Free Content</ResourceGroupTitle>
 <BadgeLink badgeText='Read' colorScheme="yellow" href='https://www.cloudflare.com/en-gb/learning/ssl/what-is-https/'>What is HTTPS?</BadgeLink>
 <BadgeLink badgeText='Read' colorScheme="yellow" href='https://developers.google.com/web/fundamentals/security/encrypt-in-transit/why-https'>Why HTTPS Matters</BadgeLink>
-<BadgeLink badgeText='Read' colorScheme="yellow" href='https://developers.google.com/web/fundamentals/security/encrypt-in-transit/enable-https'>Enabling HTTPS on Your Servers</BadgeLink>
-<BadgeLink badgeText='Read' colorScheme="yellow" href='https://howhttps.works/'>How HTTPS works (comic)</BadgeLink>
+<BadgeLink badgeText='Read' colorScheme="yellow" href='https://developers.google.com/web/fundamentals/security/encrypt-in-transit/enable-https'>Enabling HTTPS on Your Servers</BadgeLink>

content/roadmaps/102-devops/content/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 utilize 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 utilized 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,10 +1 @@
-# 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>
+# Ci cd

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

@@ -12,9 +12,6 @@
   "react-advanced-topics:error-boundaries": "/roadmaps/103-react/content/101-react-advanced-topics/106-error-boundaries.md",
   "react-advanced-topics:fiber-architecture": "/roadmaps/103-react/content/101-react-advanced-topics/107-fiber-architecture.md",
   "react-fundamental-topics": "/roadmaps/103-react/content/100-react-fundamental-topics/readme.md",
-  "react-fundamental-topics:cli-tools": "/roadmaps/103-react/content/100-react-fundamental-topics/100-cli-tools/readme.md",
-  "react-fundamental-topics:cli-tools:create-react-app": "/roadmaps/103-react/content/100-react-fundamental-topics/100-cli-tools/100-create-react-app.md",
-  "react-fundamental-topics:cli-tools:vite": "/roadmaps/103-react/content/100-react-fundamental-topics/100-cli-tools/101-vite.md",
   "react-fundamental-topics:create-react-app": "/roadmaps/103-react/content/100-react-fundamental-topics/100-create-react-app.md",
   "react-fundamental-topics:jsx": "/roadmaps/103-react/content/100-react-fundamental-topics/101-jsx.md",
   "react-fundamental-topics:components": "/roadmaps/103-react/content/100-react-fundamental-topics/102-components/readme.md",
@@ -52,8 +49,6 @@
   "react-ecosystem:forms:final-form": "/roadmaps/103-react/content/102-react-ecosystem/105-forms/102-final-form.md",
   "react-ecosystem:testing": "/roadmaps/103-react/content/102-react-ecosystem/106-testing/readme.md",
   "react-ecosystem:testing:jest": "/roadmaps/103-react/content/102-react-ecosystem/106-testing/100-jest.md",
-  "react-ecosystem:testing:vitest": "/roadmaps/103-react/content/102-react-ecosystem/106-testing/103-vitest.md",
-  "react-ecosystem:testing:playwright": "/roadmaps/103-react/content/102-react-ecosystem/106-testing/104-playwright.md",
   "react-ecosystem:testing:react-testing-library": "/roadmaps/103-react/content/102-react-ecosystem/106-testing/101-react-testing-library.md",
   "react-ecosystem:testing:cypress": "/roadmaps/103-react/content/102-react-ecosystem/106-testing/102-cypress.md",
   "react-ecosystem:state-management": "/roadmaps/103-react/content/102-react-ecosystem/107-state-management/readme.md",

content/roadmaps/103-react/content/100-react-fundamental-topics/100-cli-tools/101-vite.md

@@ -1,8 +0,0 @@
-# Vite
-
-Vite is a build tool that aims to provide a faster and leaner development experience for modern web projects.
-
-<ResourceGroupTitle>Free Content</ResourceGroupTitle>
-<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://vitejs.dev'>Vite Website</BadgeLink>
-<BadgeLink colorScheme='blue' badgeText='Official Documentation' href='https://vitejs.dev/guide'>Vite Documentation</BadgeLink>
-<BadgeLink colorScheme='green' badgeText='Course' href='https://youtu.be/LQQ3CR2JTX8'>Vite Crash Course</BadgeLink>

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

@@ -1,3 +0,0 @@
-## CLI Tools
-
-The most famous options while working with react are `create-react-app` and `vite`.

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

@@ -6,4 +6,3 @@ It sets up your development environment so that you can use the latest JavaScrip
 
 <ResourceGroupTitle>Free Content</ResourceGroupTitle>
 <BadgeLink colorScheme='blue' badgeText='Official Website' href='https://create-react-app.dev/docs/getting-started'>Official Website</BadgeLink>
-<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.robinwieruch.de/minimal-react-webpack-babel-setup/'>Advanced: Custom Setup with Webpack</BadgeLink>

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

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

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

@@ -4,5 +4,4 @@ Functional components are some of the more common components that will come acro
 
 <ResourceGroupTitle>Free Content</ResourceGroupTitle>
 <BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://reactjs.org/docs/components-and-props.html#function-and-class-components'>Components and Props</BadgeLink>
-<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.geeksforgeeks.org/reactjs-functional-components/'>Functional Components in React (1)</BadgeLink>
-<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.robinwieruch.de/react-function-component/'>Functional Components in React (2)</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.geeksforgeeks.org/reactjs-functional-components/'>ReactJS Functional Components</BadgeLink>

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

@@ -8,4 +8,3 @@ Although the class components are supported in React, it is encouraged to write
 <BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://reactjs.org/docs/components-and-props.html#function-and-class-components'>Components and Props</BadgeLink>
 <BadgeLink colorScheme='yellow' badgeText='Read' href='https://medium.com/geekculture/is-there-any-reason-to-still-use-react-class-components-9b6a1e6aa9ef'>Is There Any Reason to Still Use React Class Components?</BadgeLink>
 <BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.freecodecamp.org/news/functional-components-vs-class-components-in-react'>Functional Components vs Class Components in React</BadgeLink>
-<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.robinwieruch.de/react-hooks-migration/'>Migrate Class Components to Functional Components with Hooks in React</BadgeLink>

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

@@ -5,5 +5,5 @@ Components are the building blocks of React applications. They let us split the
 <ResourceGroupTitle>Free Content</ResourceGroupTitle>
 <BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://reactjs.org/docs/components-and-props.html'>Components and Props</BadgeLink>
 <BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://reactjs.org/docs/react-component.html'>Components in Depth</BadgeLink>
-<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.robinwieruch.de/react-component-types/'>Explore the different types of components in React</BadgeLink>
-<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.robinwieruch.de/react-element-component/'>What is the difference between components, elements, and instances?</BadgeLink>
+
+

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

@@ -4,5 +4,5 @@ Props (short for “properties”) and state are both plain JavaScript objects.
 
 <ResourceGroupTitle>Free Content</ResourceGroupTitle>
 <BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://reactjs.org/docs/faq-state.html'>Component State</BadgeLink>
-<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.robinwieruch.de/react-pass-props-to-component/'>How to use Props in React</BadgeLink>
 <BadgeLink colorScheme='yellow' badgeText='Read' href='https://stackoverflow.com/questions/27991366/what-is-the-difference-between-state-and-props-in-react'>What is the difference between state and props in React?</BadgeLink>
+

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

@@ -6,4 +6,6 @@ Conditional rendering in React works the same way conditions work in JavaScript.
 
 <ResourceGroupTitle>Free Content</ResourceGroupTitle>
 <BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://reactjs.org/docs/conditional-rendering.html'>Conditional Rendering</BadgeLink>
-<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.robinwieruch.de/conditional-rendering-react/'>Different techniques for conditional rendering in React</BadgeLink>
+
+
+

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

@@ -4,5 +4,3 @@ When you render lists in React, you can use the `key` prop to specify a unique k
 
 <ResourceGroupTitle>Free Content</ResourceGroupTitle>
 <BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://reactjs.org/docs/lists-and-keys.html'>Lists and Keys</BadgeLink>
-<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.robinwieruch.de/react-list-component/'>List components in React by Example</BadgeLink>
-<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.robinwieruch.de/react-list-key/'>Why do we need the key prop in React?</BadgeLink>

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

@@ -4,4 +4,4 @@ React has a powerful composition model, and it is recommended to use composition
 
 <ResourceGroupTitle>Free Content</ResourceGroupTitle>
 <BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://reactjs.org/docs/composition-vs-inheritance.html'>Composition vs Inheritance</BadgeLink>
-<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.robinwieruch.de/react-component-composition/'>How to perform component composition in React</BadgeLink>
+

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

@@ -4,4 +4,4 @@
 
 <ResourceGroupTitle>Free Content</ResourceGroupTitle>
 <BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://reactjs.org/docs/hooks-state.html'>Using the State Hook</BadgeLink>
-<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.robinwieruch.de/react-usestate-hook/'>React useState Hook by Example</BadgeLink>
+

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

@@ -4,4 +4,3 @@
 
 <ResourceGroupTitle>Free Content</ResourceGroupTitle>
 <BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://reactjs.org/docs/hooks-effect.html'>Using the Effect Hook</BadgeLink>
-<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.robinwieruch.de/react-useeffect-hook/'>React useEffect Hook by Example</BadgeLink>

content/roadmaps/103-react/content/101-react-advanced-topics/100-hooks/101-writing-your-own-hooks.md

@@ -4,5 +4,5 @@ Building your own Hooks lets you extract component logic into reusable functions
 
 <ResourceGroupTitle>Free Content</ResourceGroupTitle>
 <BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://reactjs.org/docs/hooks-custom.html'>Creating Custom Hooks</BadgeLink>
-<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.freecodecamp.org/news/how-to-create-react-hooks/'>How to create a custom Hook (1)</BadgeLink>
-<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.robinwieruch.de/react-custom-hook/'>How to create a custom Hook (2) followed by Examples</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.freecodecamp.org/news/how-to-create-react-hooks/'>How to Build Your Own React Hooks</BadgeLink>
+

content/roadmaps/103-react/content/101-react-advanced-topics/100-hooks/102-common-hooks.md

@@ -4,8 +4,3 @@ React also has a lot of hooks that allow you to write more efficient React code.
 
 <ResourceGroupTitle>Free Content</ResourceGroupTitle>
 <BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://reactjs.org/docs/hooks-reference.html#usereducer'>React Hooks Reference</BadgeLink>
-<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.robinwieruch.de/react-usecallback-hook/'>useCallback Hook by Example</BadgeLink>
-<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.robinwieruch.de/react-usememo-hook/'>useMemo Hook by Example</BadgeLink>
-<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.robinwieruch.de/react-usecontext-hook/'>useContext Hook by Example</BadgeLink>
-<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.robinwieruch.de/react-usereducer-hook/'>useReducer Hook by Example</BadgeLink>
-<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.robinwieruch.de/react-usereducer-vs-usestate/'>useReducer vs useState Hook</BadgeLink>

content/roadmaps/103-react/content/101-react-advanced-topics/100-hooks/readme.md

@@ -5,4 +5,4 @@ Hooks were introduced in React 16.8 and they let us use state and other React fe
 <ResourceGroupTitle>Free Content</ResourceGroupTitle>
 <BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://reactjs.org/docs/hooks-intro.html'>Introduction to Hooks</BadgeLink>
 <BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://reactjs.org/docs/hooks-reference.html'>Hooks Reference</BadgeLink>
-<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.robinwieruch.de/react-hooks/'>Hooks by Example</BadgeLink>
+

content/roadmaps/103-react/content/101-react-advanced-topics/101-context.md

@@ -6,4 +6,3 @@ In a typical React application, data is passed top-down (parent to child) via pr
 
 <ResourceGroupTitle>Free Content</ResourceGroupTitle>
 <BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://reactjs.org/docs/context.html'>Official React Context Docs</BadgeLink>
-<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.robinwieruch.de/react-context/'>React Context: Why, How, and When</BadgeLink>

content/roadmaps/103-react/content/101-react-advanced-topics/102-refs.md

@@ -6,4 +6,3 @@ In the typical React dataflow, props are the only way that parent components int
 
 <ResourceGroupTitle>Free Content</ResourceGroupTitle>
 <BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://reactjs.org/docs/refs-and-the-dom.html'>Refs and DOM</BadgeLink>
-<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.robinwieruch.de/react-ref/'>Examples of using refs in React</BadgeLink>

content/roadmaps/103-react/content/101-react-advanced-topics/103-render-props.md

@@ -6,4 +6,3 @@ A component with a render prop takes a function that returns a React element and
 
 <ResourceGroupTitle>Free Content</ResourceGroupTitle>
 <BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://reactjs.org/docs/render-props.html'>Render Props in React</BadgeLink>
-<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.robinwieruch.de/react-render-props/'>How to create a Render Prop Component</BadgeLink>

content/roadmaps/103-react/content/101-react-advanced-topics/104-high-order-components.md

@@ -6,4 +6,3 @@ Concretely, a higher-order component is a function that takes a component and re
 
 <ResourceGroupTitle>Free Content</ResourceGroupTitle>
 <BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://reactjs.org/docs/higher-order-components.html'>High-Order Components</BadgeLink>
-<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.robinwieruch.de/react-higher-order-components/'>How to create a Higher-Order Component</BadgeLink>

content/roadmaps/103-react/content/102-react-ecosystem/100-routers/100-react-router.md

@@ -6,4 +6,3 @@ React router is the most famous library when it comes to implementing routing in
 <BadgeLink colorScheme='blue' badgeText='Official Website' href='https://reactrouter.com/'>React Router — Official Website</BadgeLink>
 <BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://reactrouter.com/docs/en/v6/getting-started/tutorial'>Getting Started Guide</BadgeLink>
 <BadgeLink badgeText='Watch' href='https://youtu.be/0cSVuySEB0A'>React Router v6 in 1 hour</BadgeLink>
-<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.robinwieruch.de/react-router/'>How to use React Router v6</BadgeLink>

content/roadmaps/103-react/content/102-react-ecosystem/103-api-calls/readme.md

@@ -4,4 +4,5 @@ There are several options available to make API calls from your React.js applica
 
 <ResourceGroupTitle>Free Content</ResourceGroupTitle>
 <BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://reactjs.org/docs/faq-ajax.html'>AJAX and APIs</BadgeLink>
-<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.robinwieruch.de/react-hooks-fetch-data/'>How to fetch data in React</BadgeLink>
+
+

content/roadmaps/103-react/content/102-react-ecosystem/105-forms/readme.md

@@ -1,5 +1,3 @@
 # Forms
 
 Although you can build forms using vanilla React, it normally requires a lot of boilerplate code. This is because the form is built using a combination of state and props. To make it easier to manage forms, we use some sort of library.
-
-<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.robinwieruch.de/react-form/'>How to use Forms in React</BadgeLink>

content/roadmaps/103-react/content/102-react-ecosystem/106-testing/101-react-testing-library.md

@@ -4,4 +4,3 @@ The React Testing Library is a very lightweight solution for testing React compo
 
 <ResourceGroupTitle>Free Content</ResourceGroupTitle>
 <BadgeLink colorScheme='blue' badgeText='Official Getting Started' href='https://testing-library.com/docs/react-testing-library/intro/'>React Testing Library</BadgeLink>
-<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.robinwieruch.de/react-testing-library/'>How to use React Testing Library</BadgeLink>

content/roadmaps/103-react/content/102-react-ecosystem/106-testing/103-vitest.md

@@ -1,7 +0,0 @@
-# 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/103-react/content/102-react-ecosystem/106-testing/104-playwright.md

@@ -1,7 +0,0 @@
-# Playwright
-
-Playwright Test was created specifically to accommodate the needs of end-to-end testing. Playwright supports all modern rendering engines including Chromium, WebKit, and Firefox. Test on Windows, Linux, and macOS, locally or on CI, headless or headed with native mobile emulation of Google Chrome for Android and Mobile Safari.Playwright leverages the DevTools protocol to write powerful, stable automated tests.Playwright can actually see into and control the browser rather than relying on a middle translation layer, it allows for the simulation of more insightful and relevant user scenarios.
-
-<ResourceGroupTitle>Free Content</ResourceGroupTitle>
-<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://playwright.dev/'>Official Website: Playwright</BadgeLink>
-<BadgeLink colorScheme='yellow' badgeText='Tutorial' href='https://www.browserstack.com/guide/playwright-tutorial'>Playwright Tuotorial</BadgeLink>

content/roadmaps/103-react/content/102-react-ecosystem/107-state-management/100-context-state.md

@@ -6,4 +6,3 @@ In a typical React application, data is passed top-down (parent to child) via pr
 
 <ResourceGroupTitle>Free Content</ResourceGroupTitle>
 <BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://reactjs.org/docs/context.html'>Official React Context Docs</BadgeLink>
-<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.robinwieruch.de/react-state-usereducer-usestate-usecontext/'>State with useContext and useState/useReducer</BadgeLink>

content/roadmaps/103-react/content/102-react-ecosystem/107-state-management/readme.md

@@ -4,4 +4,3 @@ Application state management is the process of maintaining knowledge of an appli
 
 <ResourceGroupTitle>Free Content</ResourceGroupTitle>
 <BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.techtarget.com/searchapparchitecture/definition/state-management'>What is State Management?</BadgeLink>
-<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.robinwieruch.de/react-state/'>Overview of State in React</BadgeLink>

content/roadmaps/103-react/content/102-react-ecosystem/108-styling/103-styled-components.md

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

content/roadmaps/103-react/content/102-react-ecosystem/108-styling/readme.md

@@ -1,5 +1,3 @@
 # Styling
 
 While "CSS in JS" is the most predominant way of styling modern frontend applications, there are several different ways to style your React applications whether it is vanilla CSS, [CSS Modules](https://github.com/css-modules/css-modules), or [CSS in JS](https://css-tricks.com/a-thorough-analysis-of-css-in-js/) etc and each has several frameworks available.
-
-<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.robinwieruch.de/react-css-styling/'>Ways to CSS style a React application</BadgeLink>

content/roadmaps/103-react/content/102-react-ecosystem/readme.md

@@ -5,4 +5,3 @@ Thanks to its popularity, React has been enriched by a vast ecosystem of plugins
 <ResourceGroupTitle>Free Content</ResourceGroupTitle>
 <BadgeLink colorScheme='blue' badgeText='Awesome React' href='https://github.com/enaqx/awesome-react'>Awesome React</BadgeLink>
 <BadgeLink colorScheme='blue' badgeText='Awesome React Components' href='https://github.com/brillout/awesome-react-components'>Awesome React Components</BadgeLink>
-<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.robinwieruch.de/react-libraries/'>Popular React Libraries</BadgeLink>

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

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

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

@@ -1,5 +1 @@
-# 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.
+# Angular basics

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

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

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

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

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

@@ -1,12 +1 @@
-# 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>
+# Binding data props attrs events

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

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

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

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

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

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

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

@@ -1,6 +1 @@
-# 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>
+# Angular ssr

content/roadmaps/104-angular/content/114-angular-ssg/readme.md

@@ -1,3 +1 @@
-# Angular SSG
-
-SSG (Static Site Generator), helps in building the HTML full website, during the process of building and serving that HTML Page. This method helps to generate the HTML website on the client side before its being served on the server side. Therefore, whenever a user requests a HTML Page, firstly HTML page will be rendered and secondly, the angular app will be rendered. The SSG can be used only if your website is static (or) it's content doesn't changes frequently.
+# Angular ssg

content/roadmaps/106-javascript/content-paths.json

@@ -114,8 +114,5 @@
   "javascript-chrome-dev-tools": "/roadmaps/106-javascript/content/117-javascript-chrome-dev-tools/readme.md",
   "javascript-chrome-dev-tools:debugging-issues": "/roadmaps/106-javascript/content/117-javascript-chrome-dev-tools/100-debugging-issues.md",
   "javascript-chrome-dev-tools:debugging-memory-leaks": "/roadmaps/106-javascript/content/117-javascript-chrome-dev-tools/101-debugging-memory-leaks.md",
-  "javascript-chrome-dev-tools:debugging-performance": "/roadmaps/106-javascript/content/117-javascript-chrome-dev-tools/102-debugging-performance.md",
-  "working-with-apis": "/roadmaps/106-javascript/content/118-working-with-apis/readme.md",
-  "working-with-apis:xml-http-request": "/roadmaps/106-javascript/content/118-working-with-apis/100-xml-http-request.md",
-  "working-with-apis:fetch": "/roadmaps/106-javascript/content/118-working-with-apis/101-fetch.md"
-}
+  "javascript-chrome-dev-tools:debugging-performance": "/roadmaps/106-javascript/content/117-javascript-chrome-dev-tools/102-debugging-performance.md"
+}

content/roadmaps/106-javascript/content/100-javascript-introduction/readme.md

@@ -8,6 +8,5 @@ JavaScript, often abbreviated JS, is a programming language that is one of the c
 <BadgeLink badgeText='Read' colorScheme="yellow" href='https://javascript.info/'>The Modern JavaScript Tutorial</BadgeLink>
 <BadgeLink badgeText='Read' colorScheme="yellow" href='https://exploringjs.com/'>Exploring JS: JavaScript books for programmers</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>

content/roadmaps/106-javascript/content/102-javascript-datatypes/102-typeof-operator.md

@@ -1,6 +1,6 @@
-# TypeOf Operator
+# Typeof Operator
 
-You can use the typeOf operator to find the data type of a JavaScript variable.
+You can use the typeof operator to find the data type of a JavaScript variable.
 
 <BadgeLink colorScheme='yellow' badgeText='Read' href='https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/typeof'>Typeof Reference</BadgeLink>
 <BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.w3schools.com/js/tryit.asp?filename=tryjs_typeof_all'>Typeof Live Examples</BadgeLink>

content/roadmaps/106-javascript/content/103-javascript-type-casting/101-explicit-type-casting.md

@@ -3,8 +3,8 @@
 Type casting means transferring data from one data type to another by explicitly specifying the type to convert the given data to. Explicit type casting is normally done to make data compatible with other variables. Examples of typecasting methods are `parseInt()`, `parseFloat()`, `toString()`.
 
 <ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://developer.mozilla.org/en-US/docs/Glossary/Type_Conversion'>Type conversion</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.tutorialspoint.com/explain-typecasting-in-javascript'>What is typecasting in JavaScript</BadgeLink>
 <BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.c-sharpcorner.com/article/type-conversions-in-javascript/'>Type Conversion</BadgeLink>
 <BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.scaler.com/topics/javascript/type-conversion-in-javascript/'>Type casting</BadgeLink>
 <BadgeLink badgeText='Watch' href='https://youtu.be/VQLYiFqetZM'>Data Type Conversion</BadgeLink>
-<BadgeLink colorScheme='yellow' badgeText='Read' href='https://developer.mozilla.org/en-US/docs/Glossary/Type_Conversion'>Type conversion</BadgeLink>
-<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.tutorialspoint.com/explain-typecasting-in-javascript'>What is typecasting in JavaScript</BadgeLink>

content/roadmaps/106-javascript/content/104-javascript-data-structures/readme.md

@@ -1,6 +1 @@
-# Data Structures
-
-A Data structure is a format to organize, manage and store data in a way that allows efficient access and modification. JavaScript has primitive (built-in) and non-primitive (not built-in) data structures. Primitive data structures come by default with the programming language and you can implement them out of the box (like arrays and objects). Non-primitive data structures don't come by default and you have to code them up if you want to use them.
-
-<ResourceGroupTitle>Free Content</ResourceGroupTitle>
-<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.freecodecamp.org/news/data-structures-in-javascript-with-examples/#what-is-a-data-structure'> Data structures</BadgeLink>
+# Javascript data structures

content/roadmaps/106-javascript/content/107-javascript-control-flow/101-conditional-statements/100-if-else.md

@@ -2,8 +2,7 @@
 
 The `if` statement executes a statement if a specified condition is `truthy`. If the condition is `falsy`, another statement in the optional `else` clause will be executed.
 
-## Example
-```js
+```
 if (condition) {
   statement1
 } else {
@@ -12,5 +11,5 @@ if (condition) {
 ```
 
 <ResourceGroupTitle>Free Content</ResourceGroupTitle>
-<BadgeLink colorScheme='yellow' badgeText='Read' href='https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if...else'>if...else - MDN docs</BadgeLink>
-<BadgeLink colorScheme='yellow' badgeText='Read' href='https://javascript.info/ifelse'>Conditional branching: if, '?' - javascript.info</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if...else'>if...else</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://javascript.info/ifelse'>Conditional branching: if, '?'</BadgeLink>

content/roadmaps/106-javascript/content/107-javascript-control-flow/101-conditional-statements/101-switch.md

@@ -1,9 +1,8 @@
-# Switch Case
+# Switch
 
 The `switch` statement evaluates an expression, matching the expression's value against a series of `case` clauses, and executes statements after the first `case` clause with a matching value, until a `break` statement is encountered. The `default` clause of a `switch` statement will be jumped to if no `case` matches the expression's value.
 
-## Example
-```js
+```
 switch (expression) {
   case value1:
     //Statements executed when the result of expression matches value1
@@ -23,4 +22,4 @@ switch (expression) {
 
 <ResourceGroupTitle>Free Content</ResourceGroupTitle>
 <BadgeLink colorScheme='blue' badgeText='Read' href='https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/switch'>switch - MDN</BadgeLink>
-<BadgeLink colorScheme='blue' badgeText='Read' href='https://javascript.info/switch'>The switch statement - javascript.info</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Read' href='https://javascript.info/switch'>The switch statement</BadgeLink>

content/roadmaps/106-javascript/content/108-javascript-expressions-and-operators/102-arithmetic-operators.md

@@ -1,17 +1,14 @@
 # Arithmetic operators
 
-The Arithmetic operators perform addition, subtraction, multiplication, division, exponentiation, and remainder operations.
+The Arithmetic operators perform addition, subtraction, multiplication, division, exponentiation, and remainder perations.
 
 Arithmetic operators in JavaScript are as follows:
 - `+` (Addition)
 - `-` (Subtraction)
 - `*` (Multiplication)
-- `**` (Exponentiation)
 - `/` (Division)
-- `%` (Modulus i.e. Remainder)
-- `++` (Increment)
-- `++` (Decrement)
+- `%` (Remainder)
+- `**` (Exponentiation)
 
 <BadgeLink colorScheme='yellow' badgeText='Read' href='https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators#arithmetic_operators'>Arithmetic Operators - MDN</BadgeLink>
 <BadgeLink colorScheme='yellow' badgeText='Read' href='https://javascript.info/operators#maths'>Arithmetic Operators - JavaScript.info</BadgeLink>
-<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.w3schools.com/js/js_arithmetic.asp'>JavaScript Arithmetic Operators</BadgeLink>

content/roadmaps/106-javascript/content/109-javascript-functions/102-arrow-functions.md

@@ -3,4 +3,3 @@
 Arrow Function is a new way of creating functions with the '=>' operator with a shorter syntax.
 
 <BadgeLink colorScheme="yellow" badgeText="Read" href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions">Arrow function expressions</BadgeLink>
-<BadgeLink colorScheme="yellow" badgeText="Read" href="https://www.w3schools.com/js/js_arrow_function.asp">JavaScript Arrow Function</BadgeLink>

content/roadmaps/106-javascript/content/112-javascript-asynchronous-javascript/100-event-loop.md

@@ -4,4 +4,3 @@ The Event Loop is one of the most important aspects to understand about Node.js.
 
 <BadgeLink colorScheme="yellow" badgeText="Read" href="https://nodejs.dev/en/learn/the-nodejs-event-loop/">The Node.Js Event Loop</BadgeLink>
 <BadgeLink colorScheme="yellow" badgeText="Read" href="https://dev.to/lydiahallie/javascript-visualized-event-loop-3dif">JavaScript Visualized: Event Loop</BadgeLink>
-<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=8aGhZQkoFbQ'>What the heck is the event loop anyway?</BadgeLink>

content/roadmaps/106-javascript/content/116-javascript-memory-management/100-memory-lifecycle.md

@@ -7,7 +7,3 @@ Regardless of the programming language, the memory life cycle is pretty much alw
  - Release the allocated memory when it is not needed anymore
 
 The second part is explicit in all languages. The first and last parts are explicit in low-level languages but are mostly implicit in high-level languages like JavaScript.
-
-<ResourceGroupTitle>Free Content</ResourceGroupTitle>
-<BadgeLink colorScheme='yellow' badgeText='Read' href='https://developer.mozilla.org/en-US/docs/Web/JavaScript/Memory_Management'>MDN docs - Memory Management</BadgeLink>
-<BadgeLink colorScheme='yellow' badgeText='Read' href='https://medium.com/swlh/the-lifecycle-of-memory-in-javascript-5b5bffc5ff4c'>Lifecycle in Memory Management</BadgeLink>

content/roadmaps/106-javascript/content/117-javascript-chrome-dev-tools/readme.md

@@ -2,7 +2,7 @@
 
 These are a set of tools built into the browser to aid frontend developers diagnose and solve various issues in their applications — such as JavaScript and logical bugs, CSS styling issues or even just making quick temporary alterations to the DOM.
 
-To enter the dev tools, right click and click **Inspect** (or press `ctrl+shift+c`/`cmd+opt+c`) to enter the Elements panel. Here you can debug CSS and HTML issues. If you want to see logged messages or interact with javascript, enter the **Console** tab from the tabs above (or press `ctrl+shift+j` or `F12` /`cmd+opt+j` to enter it directly). Another very useful feature in the Chrome dev tools is the Lighthouse (for checking performance).
+To enter the dev tools, right click and click **Inspect** (or press `ctrl+shift+c`/`cmd+opt+c`) to enter the Elements panel. Here you can debug CSS and HTML issues. If you want to see logged messages or interact with javascript, enter the **Console** tab from the tabs above (or press `ctrl+shift+j`/`cmd+opt+j` to enter it directly). Another very useful feature in the Chrome dev tools is the Lighthouse (for checking performance) — more on this later.
 
 NOTE: This isn't a chrome-specific feature, and most browsers (Chromium based or otherwise) will have their own, largely-similar set of devtools.
 

content/roadmaps/106-javascript/content/118-working-with-apis/100-xml-http-request.md

@@ -1 +0,0 @@
-# XMLHttpRequest

content/roadmaps/106-javascript/content/118-working-with-apis/101-fetch.md

@@ -1 +0,0 @@
-# Fetch