Fix language on markdown

The current text says that ACID are the for properties of _any_ database system. This is only true for relational databases. NoSQL databases can possess _some_ of these properties, but are due to their nature not ACID compliant.

components/helmet.tsx

@@ -67,36 +67,19 @@ const Helmet = (props: HelmetProps) => {
       />
       {canonical && <link rel="canonical" href={canonical} />}
       <meta httpEquiv="Content-Language" content="en" />
-      <meta property="og:title" content={title || siteConfig.title} />
-      <meta
-        property="og:description"
-        content={description || siteConfig.description}
-      />
-      <meta
-        property="og:image"
-        content={`${siteConfig.url.web}${siteConfig.logoSquare}`}
-      />
-      <meta property="og:url" content={siteConfig.url.web} />
-      <meta property="og:type" content="website" />
-      <meta
-        property="article:publisher"
-        content={`https://facebook.com/${siteConfig.facebook}`}
-      />
-      <meta property="og:site_name" content={siteConfig.name} />
-      <meta property="article:author" content={siteConfig.author} />
 
-      <meta name="twitter:card" content="summary" />
-      <meta name="twitter:site" content={`@${siteConfig.twitter}`} />
-      <meta name="twitter:title" content={title || siteConfig.title} />
-      <meta
-        name="twitter:description"
-        content={description || siteConfig.description}
-      />
-      <meta
-        name="twitter:image"
-        content={`${siteConfig.url.web}${siteConfig.logoSquare}`}
-      />
-      <meta name="twitter:image:alt" content="roadmap.sh" />
+      <meta name="twitter:card" content="summary_large_image" />
+      <meta name="twitter:creator" content="@kamranahmedse" />
+
+      <meta property="og:image:width" content="1200" />
+      <meta property="og:image:height" content="630" />
+      <meta property="og:image" content="https://roadmap.sh/og-img.png" />
+      <meta property="og:image:alt" content="roadmap.sh" />
+      <meta property="og:site_name" content="roadmap.sh" />
+      <meta property="og:title" content={title || siteConfig.title} />
+      <meta property="og:description" content={description || siteConfig.description} />
+      <meta property="og:type" content="website" />
+      <meta property="og:url" content="https://roadmap.sh" />
 
       <meta name="mobile-web-app-capable" content="yes" />
       <meta name="apple-mobile-web-app-capable" content="yes" />

content/guides/http-basic-authentication.md

@@ -18,7 +18,7 @@ Now that we know what basic authentication is, the question is, how does it work
 ### Step 1
 When the browser first requests the server, the server tries to check the availability of the `Authorization` header in the request. Because it is the first request, no `Authorization` header is found in the request. So the server responds with the `401 Unauthorized` response code and also sends the `WWW-Authenticate` header with the value set to `Basic`, which tells the browser that it needs to trigger the basic authentication flow.
 
-```text
+```
 401 Unauthorized
 WWW-Authenticate: Basic realm='user_pages'
 ```

content/roadmaps.json

@@ -181,10 +181,10 @@
       "keywords": [
         "computer science roadmap",
         "computer science",
-        "computer science roadmap 2022",
+        "computer science roadmap 2023",
         "guide to computer science",
         "software engineer roadmap",
-        "software engineer roadmap 2022",
+        "software engineer roadmap 2023",
         "self-taught computer science roadmap",
         "computer science skills",
         "computer science skills test",
@@ -228,8 +228,8 @@
       "title": "React Developer Roadmap: Learn to become a React developer",
       "description": "Community driven, articles, resources, guides, interview questions, quizzes for react development. Learn to become a modern React developer by following the steps, skills, resources and guides listed in this roadmap.",
       "keywords": [
-        "react roadmap 2022",
-        "react developer roadmap 2022",
+        "react roadmap 2023",
+        "react developer roadmap 2023",
         "guide to becoming a react developer",
         "react developer roadmap",
         "react roadmap",
@@ -244,14 +244,13 @@
       ]
     },
     "title": "React Developer",
-    "description": "Everything that is there to learn about React and the ecosystem in 2022.",
+    "description": "Everything that is there to learn about React and the ecosystem in 2023.",
     "featuredTitle": "React",
     "type": "tool",
-    "featuredDescription": "Step by step guide to become a React Developer in 2022",
+    "featuredDescription": "Step by step guide to become a React Developer in 2023",
     "isTextHeavy": false,
     "isCommunity": false,
     "featured": true,
-    "resourcesPath": "/roadmaps/103-react/resources.md",
     "jsonUrl": "/project/react.json",
     "versions": [
       "latest",
@@ -295,10 +294,10 @@
       ]
     },
     "title": "Angular Developer",
-    "description": "Everything that is there to learn about Angular and the ecosystem in 2022.",
+    "description": "Everything that is there to learn about Angular and the ecosystem in 2023.",
     "featuredTitle": "Angular",
     "type": "tool",
-    "featuredDescription": "Step by step guide to become a Angular Developer in 2022",
+    "featuredDescription": "Step by step guide to become a Angular Developer in 2023",
     "isTextHeavy": false,
     "isCommunity": false,
     "featured": true,
@@ -355,10 +354,10 @@
       ]
     },
     "title": "Vue Developer",
-    "description": "Everything that is there to learn about Vue and the ecosystem in 2022.",
+    "description": "Everything that is there to learn about Vue and the ecosystem in 2023.",
     "featuredTitle": "Vue",
     "type": "tool",
-    "featuredDescription": "Step by step guide to become a Vue Developer in 2022",
+    "featuredDescription": "Step by step guide to become a Vue Developer in 2023",
     "isTextHeavy": false,
     "isCommunity": false,
     "isNew": true,
@@ -392,11 +391,11 @@
       "title": "JavaScript Developer Roadmap: Step by step guide to learn JavaScript",
       "description": "Community driven, articles, resources, guides, interview questions, quizzes for javascript development. Learn to become a modern JavaScript developer by following the steps, skills, resources and guides listed in this roadmap.",
       "keywords": [
-        "javascript guide 2022",
+        "javascript guide 2023",
         "learn javascript",
         "step by step javascript guide",
-        "javascript roadmap 2022",
-        "javascript developer roadmap 2022",
+        "javascript roadmap 2023",
+        "javascript developer roadmap 2023",
         "guide to becoming a javascript developer",
         "javascript developer roadmap",
         "javascript roadmap",
@@ -411,10 +410,10 @@
       ]
     },
     "title": "JavaScript Roadmap",
-    "description": "Step by step guide to learn JavaScript in 2022",
+    "description": "Step by step guide to learn JavaScript in 2023",
     "featuredTitle": "JavaScript",
     "type": "tool",
-    "featuredDescription": "Step by step guide to learn JavaScript in 2022",
+    "featuredDescription": "Step by step guide to learn JavaScript in 2023",
     "isTextHeavy": false,
     "isCommunity": false,
     "isNew": true,
@@ -463,10 +462,10 @@
       ]
     },
     "title": "Android Developer",
-    "description": "Step by step guide to becoming an Android developer in 2022",
+    "description": "Step by step guide to becoming an Android developer in 2023",
     "featuredTitle": "Android",
     "type": "role",
-    "featuredDescription": "Step by step guide to becoming an Android Developer in 2022",
+    "featuredDescription": "Step by step guide to becoming an Android Developer in 2023",
     "isTextHeavy": true,
     "isCommunity": false,
     "featured": true,
@@ -497,12 +496,12 @@
       "title": "Node.js Developer Roadmap: Learn to become a modern node.js developer",
       "description": "Learn to become a modern node.js developer using this roadmap. Community driven, articles, resources, guides, interview questions, quizzes for modern node.js development.",
       "keywords": [
-        "node.js roadmap 2022",
-        "nodejs roadmap 2022",
-        "node.js roadmap 2022",
-        "nodejs roadmap 2022",
-        "node.js developer roadmap 2022",
-        "nodejs developer roadmap 2022",
+        "node.js roadmap 2023",
+        "nodejs roadmap 2023",
+        "node.js roadmap 2023",
+        "nodejs roadmap 2023",
+        "node.js developer roadmap 2023",
+        "nodejs developer roadmap 2023",
         "guide to becoming a developer",
         "guide to becoming a node.js developer",
         "guid to becoming a node.js developer",
@@ -546,9 +545,9 @@
       ]
     },
     "title": "Node.js Developer",
-    "description": "Step by step guide to becoming a modern Node.js developer in 2022",
+    "description": "Step by step guide to becoming a modern Node.js developer in 2023",
     "featuredTitle": "Node.js",
-    "featuredDescription": "Step by step guide to becoming a Node.js developer in 2022",
+    "featuredDescription": "Step by step guide to becoming a Node.js developer in 2023",
     "type": "tool",
     "isNew": true,
     "author": {
@@ -591,10 +590,10 @@
       ]
     },
     "title": "Python Developer",
-    "description": "Step by step guide to becoming a Python developer in 2022",
+    "description": "Step by step guide to becoming a Python developer in 2023",
     "featuredTitle": "Python",
     "type": "tool",
-    "featuredDescription": "Step by step guide to becoming a Python Developer in 2022",
+    "featuredDescription": "Step by step guide to becoming a Python Developer in 2023",
     "isTextHeavy": true,
     "isCommunity": false,
     "featured": true,
@@ -650,10 +649,10 @@
       ]
     },
     "title": "Go Developer",
-    "description": "Step by step guide to becoming a Go developer in 2022",
+    "description": "Step by step guide to becoming a Go developer in 2023",
     "featuredTitle": "Go",
     "type": "tool",
-    "featuredDescription": "Step by step guide to becoming a Go developer in 2022",
+    "featuredDescription": "Step by step guide to becoming a Go developer in 2023",
     "isTextHeavy": false,
     "isCommunity": false,
     "isUpcoming": false,
@@ -710,10 +709,10 @@
       ]
     },
     "title": "Java Developer",
-    "description": "Step by step guide to becoming a Java developer in 2022",
+    "description": "Step by step guide to becoming a Java developer in 2023",
     "featuredTitle": "Java",
     "type": "tool",
-    "featuredDescription": "Step by step guide to becoming a Java Developer in 2022",
+    "featuredDescription": "Step by step guide to becoming a Java Developer in 2023",
     "isTextHeavy": false,
     "isCommunity": false,
     "isUpcoming": false,
@@ -822,10 +821,10 @@
       ]
     },
     "title": "PostgreSQL DBA",
-    "description": "Step by step guide to becoming a modern PostgreSQL DB Administrator in 2022",
+    "description": "Step by step guide to becoming a modern PostgreSQL DB Administrator in 2023",
     "featuredTitle": "DBA",
     "type": "role",
-    "featuredDescription": "Step by step guide to become a PostgreSQL DBA in 2022",
+    "featuredDescription": "Step by step guide to become a PostgreSQL DBA in 2023",
     "landingPath": "/roadmaps/111-postgresql-dba/landscape.md",
     "resourcesPath": "/roadmaps/111-postgresql-dba/resources.md",
     "author": {
@@ -850,11 +849,11 @@
       "title": "Blockchain Developer Roadmap: Learn to become a blockchain developer",
       "description": "Learn to become a blockchain developer using this roadmap. Community driven, articles, resources, guides, interview questions, quizzes for modern backend development.",
       "keywords": [
-        "blockchain roadmap 2022",
+        "blockchain roadmap 2023",
         "web3 developer roadmap",
-        "web3 developer roadmap 2022",
+        "web3 developer roadmap 2023",
         "web3 roadmap",
-        "blockchain developer roadmap 2022",
+        "blockchain developer roadmap 2023",
         "guide to becoming a blockchain developer",
         "guide to becoming a blockchain developer",
         "blockchain roadmap",
@@ -880,9 +879,9 @@
       ]
     },
     "title": "Blockchain Developer",
-    "description": "Step by step guide to becoming a blockchain developer in 2022.",
+    "description": "Step by step guide to becoming a blockchain developer in 2023.",
     "featuredTitle": "Blockchain",
-    "featuredDescription": "Step by step guide to becoming a blockchain developer in 2022",
+    "featuredDescription": "Step by step guide to becoming a blockchain developer in 2023",
     "featured": true,
     "type": "role",
     "isNew": true,
@@ -927,10 +926,10 @@
       ]
     },
     "title": "QA Engineer",
-    "description": "Steps to follow in order to become a modern QA Engineer in 2022",
+    "description": "Steps to follow in order to become a modern QA Engineer in 2023",
     "featuredTitle": "QA",
     "type": "role",
-    "featuredDescription": "Step by step guide to becoming a modern QA Engineer in 2022",
+    "featuredDescription": "Step by step guide to becoming a modern QA Engineer in 2023",
     "featured": true,
     "isNew": true,
     "resourcesPath": "/roadmaps/113-qa/resources.md",
@@ -979,12 +978,12 @@
       ]
     },
     "title": "Software Architect",
-    "description": "Step by step guide to becoming a Software Architect in 2022",
+    "description": "Step by step guide to becoming a Software Architect in 2023",
     "featuredTitle": "Software Architect",
     "isNew": true,
     "type": "role",
     "jsonUrl": "/project/software-architect.json",
-    "featuredDescription": "Step by step guide to become a Software Architect in 2022",
+    "featuredDescription": "Step by step guide to become a Software Architect in 2023",
     "isCommunity": false,
     "featured": true,
     "detailed": false,
@@ -1083,10 +1082,10 @@
       ]
     },
     "title": "ASP.NET Core Developer",
-    "description": "Step by step guide to becoming an ASP.NET core developer in 2022",
+    "description": "Step by step guide to becoming an ASP.NET core developer in 2023",
     "featuredTitle": "ASP.NET Core",
     "type": "role",
-    "featuredDescription": "Step by step guide to becoming an ASP.NET Core Developer in 2022",
+    "featuredDescription": "Step by step guide to becoming an ASP.NET Core Developer in 2023",
     "isTextHeavy": false,
     "isCommunity": false,
     "isUpcoming": false,
@@ -1132,10 +1131,10 @@
       ]
     },
     "title": "GraphQL",
-    "description": "Step by step guide to learn GraphQL in 2022",
+    "description": "Step by step guide to learn GraphQL in 2023",
     "featuredTitle": "GraphQL",
     "type": "tool",
-    "featuredDescription": "Step by Step guide to learn GraphQL in 2022",
+    "featuredDescription": "Step by Step guide to learn GraphQL in 2023",
     "isTextHeavy": false,
     "isCommunity": false,
     "isNew": true,
@@ -1187,10 +1186,10 @@
       ]
     },
     "title": "Flutter Developer",
-    "description": "Step by step guide to becoming a Flutter developer in 2022",
+    "description": "Step by step guide to becoming a Flutter developer in 2023",
     "featuredTitle": "Flutter",
     "type": "role",
-    "featuredDescription": "Step by step guide to becoming a Flutter Developer in 2022",
+    "featuredDescription": "Step by step guide to becoming a Flutter Developer in 2023",
     "isTextHeavy": false,
     "isCommunity": false,
     "isUpcoming": false,

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

@@ -5,6 +5,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://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started'>MDN Docs: Getting Started with HTML </BadgeLink>
+<BadgeLink badgeText='Read' colorScheme='yellow' href='https://web.dev/learn/html'>web.dev: Learn HTML</BadgeLink>
 <BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=pQN-pnXPaVg'>HTML Full Course - Build a Website Tutorial</BadgeLink>
 <BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=qz0aGYrrlhU'>HTML Tutorial for Beginners: HTML Crash Course</BadgeLink>
 <BadgeLink badgeText='Read' colorScheme='yellow' href='https://htmlcheatsheet.com'>HTML Cheatsheet</BadgeLink>

content/roadmaps/100-frontend/content/102-css/100-learn-the-basics.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 colorScheme='yellow' badgeText='Read' href='https://web.dev/learn/css/'>web.dev — Learn CSS</BadgeLink>
 <BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.freecodecamp.org/learn/responsive-web-design/'>freeCodeCamp — Responsive Web Design</BadgeLink>
 <BadgeLink colorScheme='yellow' badgeText='Read' href='https://learn.shayhowe.com/html-css/building-your-first-web-page/'>Learn to Code HTML & CSS</BadgeLink>
 <BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=yfoY53QXEnI'>CSS Crash Course For Absolute Beginners</BadgeLink>

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

@@ -3,7 +3,7 @@
 The Document Object Model (DOM) is a programming interface built for HTML and XML documents. It represents the page that allows programs and scripts to dynamically update the document structure, content, and style. With DOM, we can easily access and manipulate tags, IDs, classes, attributes, etc.  
 
 <ResourceGroupTitle>Free Content</ResourceGroupTitle>
-<BadgeLink badgeText='Read' colorScheme="yellow" href='https://javascript.info/dom-nodes'>DOM Treee</BadgeLink>
+<BadgeLink badgeText='Read' colorScheme="yellow" href='https://javascript.info/dom-nodes'>DOM Tree</BadgeLink>
 <BadgeLink badgeText='Read' colorScheme="yellow" href='https://www.geeksforgeeks.org/dom-document-object-model/'>GeeksForGeeks - DOM (Document Object Model)</BadgeLink>
 <BadgeLink badgeText='Read' colorScheme="yellow" href='https://www.freecodecamp.org/news/what-is-the-dom-document-object-model-meaning-in-javascript/'>What is the DOM?</BadgeLink>
 <BadgeLink badgeText='Read' colorScheme="yellow" href='https://eloquentjavascript.net/14_dom.html'>Eloquent JavaScript, 3rd Edition: The Document Object Model</BadgeLink>

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

@@ -5,7 +5,7 @@
 <ResourceGroupTitle>Free Content</ResourceGroupTitle>
 
 <BadgeLink badgeText='Read' colorScheme='yellow' href='https://docs.github.com/en/get-started/quickstart/hello-world'>GitHub: Quickstart</BadgeLink>
-<BadgeLink badgeText='Read' colorScheme='yellow' href='https://skills.github.com/'>Learn Github by doing</BadgeLink>
+<BadgeLink badgeText='Read' colorScheme='yellow' href='https://skills.github.com/'>Learn GitHub by doing</BadgeLink>
 <BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=w3jLJU7DT5E'>What is GitHub?</BadgeLink>
 <BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=wpISo9TNjfU'>Git vs. GitHub: What's the difference?</BadgeLink>
 <BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=RGOj5yH7evk'>Git and GitHub for Beginners</BadgeLink>

content/roadmaps/101-backend/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://howdns.works/'>How DNS works (comic)</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://developer.mozilla.org/en-US/docs/Glossary/DNS/'>Understanding Domain names</BadgeLink>
 <BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=Wj0od2ag5sk'>DNS and How does it Work?</BadgeLink>
 <BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=7lxgpKh_fRY'>DNS Records</BadgeLink>
 <BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=zEmUuNFBgN8&list=PLTk5ZYSbd9MhMmOiPhfRJNW7bhxHo4q-K'>Complete DNS mini-series</BadgeLink>

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

@@ -19,3 +19,4 @@ Python is a well known programming language which is both a strongly typed and a
 <BadgeLink badgeText='Course' colorScheme='green' href='https://www.codecademy.com/learn/learn-python'>Codecademy - Learn Python 2</BadgeLink>
 <BadgeLink colorScheme='yellow' badgeText='Read' href='https://thenewstack.io/an-introduction-to-python-for-non-programmers/'>An Introduction to Python for Non-Programmers</BadgeLink>
 <BadgeLink colorScheme='yellow' badgeText='Read' href='https://thenewstack.io/getting-started-with-python-and-influxdb/'>Getting Started with Python and InfluxDB</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=kqtD5dpn9C8&ab_channel=ProgrammingwithMosh'>Python for Beginners - Learn Python in 1 Hour</BadgeLink>

content/roadmaps/101-backend/content/108-more-about-databases/101-acid.md

@@ -1,6 +1,6 @@
 # ACID
 
-ACID are the four properties of any database system that help in making sure that we are able to perform the transactions in a reliable manner. It's an acronym which refers to the presence of four properties: atomicity, consistency, isolation and durability 
+ACID are the four properties of relational database systems that help in making sure that we are able to perform the transactions in a reliable manner. It's an acronym which refers to the presence of four properties: atomicity, consistency, isolation and durability 
 
 <ResourceGroupTitle>Free Content</ResourceGroupTitle>
 <BadgeLink badgeText='Read' colorScheme='yellow' href='https://retool.com/blog/whats-an-acid-compliant-database/'>What is ACID Compliant Database?</BadgeLink>

content/roadmaps/102-devops/content/100-language/104-rust.md

@@ -5,3 +5,7 @@ Rust is a modern systems programming language focusing on safety, speed, and con
 <ResourceGroupTitle>Free Content</ResourceGroupTitle>
 <BadgeLink badgeText='Read' colorScheme="yellow" href='https://doc.rust-lang.org/book/'>The Rust Programming Language - online book</BadgeLink>
 <BadgeLink badgeText='Read' colorScheme="yellow" href='https://doc.rust-lang.org/stable/rust-by-example/index.html'>Rust by Example - collection of runnable examples</BadgeLink>
+<BadgeLink badgeText='Course' colorScheme="green" href='https://youtube.com/playlist?list=PLai5B987bZ9CoVR-QEIN9foz4QCJ0H2Y8'>The Rust Programming Book - Video Version</BadgeLink>
+<BadgeLink badgeText='Course' colorScheme="green" href='https://google.github.io/comprehensive-rust/'>Comprehensive Rust by Google - Learn Rust in 4 Days</BadgeLink>
+<BadgeLink badgeText='Course' colorScheme="green" href='https://learn.microsoft.com/en-us/training/paths/rust-first-steps/'>Microsoft Learn Course</BadgeLink>
+<BadgeLink badgeText='Read' colorScheme="yellow" href='https://sivanaikk.github.io/rust/'>Quick Rust Guide</BadgeLink>

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

@@ -11,3 +11,4 @@ Ubuntu is a free and open-source Linux distribution based on Debian. Ubuntu is a
 <BadgeLink badgeText='Official Documentation' colorScheme='blue' href='https://help.ubuntu.com/'>Ubuntu Documentation</BadgeLink>
 <BadgeLink badgeText='Install Documentation' colorScheme='blue' href='https://ubuntu.com/tutorials/install-ubuntu-desktop#1-overview'>Install Ubuntu Desktop Documentation</BadgeLink>
 <BadgeLink badgeText='Tutorials' colorScheme='yellow' href='https://itsfoss.com/getting-started-with-ubuntu/'>Getting Started with Ubuntu Tutorials</BadgeLink>
+<BadgeLink badgeText='Tutorials' colorScheme='yellow' href='https://linuxcommand.org/tlcl.php'>The Linux Command Line by William Shotts</BadgeLink>

content/roadmaps/103-computer-science/content/117-databases/106-dcl.md

@@ -1,4 +1,4 @@
-DCL (Data Control Language):
+# DCL (Data Control Language):
 
 DCL includes commands such as GRANT and REVOKE which mainly deal with the rights, permissions, and other controls of the database system.
 

content/roadmaps/103-computer-science/meta.json

@@ -5,10 +5,10 @@
     "keywords": [
       "computer science roadmap",
       "computer science",
-      "computer science roadmap 2022",
+      "computer science roadmap 2023",
       "guide to computer science",
       "software engineer roadmap",
-      "software engineer roadmap 2022",
+      "software engineer roadmap 2023",
       "self-taught computer science roadmap",
       "computer science skills",
       "computer science skills test",

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

@@ -1,70 +1,72 @@
 {
   "home": "/roadmaps/103-react/content/readme.md",
-  "react-advanced-topics": "/roadmaps/103-react/content/101-react-advanced-topics/readme.md",
-  "react-advanced-topics:hooks": "/roadmaps/103-react/content/101-react-advanced-topics/100-hooks/readme.md",
-  "react-advanced-topics:hooks:common-hooks": "/roadmaps/103-react/content/101-react-advanced-topics/100-hooks/102-common-hooks.md",
-  "react-advanced-topics:hooks:writing-your-own-hooks": "/roadmaps/103-react/content/101-react-advanced-topics/100-hooks/101-writing-your-own-hooks.md",
-  "react-advanced-topics:context": "/roadmaps/103-react/content/101-react-advanced-topics/101-context.md",
-  "react-advanced-topics:refs": "/roadmaps/103-react/content/101-react-advanced-topics/102-refs.md",
-  "react-advanced-topics:render-props": "/roadmaps/103-react/content/101-react-advanced-topics/103-render-props.md",
-  "react-advanced-topics:high-order-components": "/roadmaps/103-react/content/101-react-advanced-topics/104-high-order-components.md",
-  "react-advanced-topics:portals": "/roadmaps/103-react/content/101-react-advanced-topics/105-portals.md",
-  "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",
-  "react-fundamental-topics:components:functional-components": "/roadmaps/103-react/content/100-react-fundamental-topics/102-components/100-functional-components.md",
-  "react-fundamental-topics:components:class-components": "/roadmaps/103-react/content/100-react-fundamental-topics/102-components/101-class-components.md",
-  "react-fundamental-topics:props-vs-state": "/roadmaps/103-react/content/100-react-fundamental-topics/103-props-vs-state.md",
-  "react-fundamental-topics:conditional-rendering": "/roadmaps/103-react/content/100-react-fundamental-topics/104-conditional-rendering.md",
-  "react-fundamental-topics:component-life-cycle": "/roadmaps/103-react/content/100-react-fundamental-topics/105-component-life-cycle.md",
-  "react-fundamental-topics:lists-and-keys": "/roadmaps/103-react/content/100-react-fundamental-topics/106-lists-and-keys.md",
-  "react-fundamental-topics:composition-vs-inheritance": "/roadmaps/103-react/content/100-react-fundamental-topics/107-composition-vs-inheritance.md",
-  "react-fundamental-topics:basic-hooks": "/roadmaps/103-react/content/100-react-fundamental-topics/108-basic-hooks/readme.md",
-  "react-fundamental-topics:basic-hooks:use-state": "/roadmaps/103-react/content/100-react-fundamental-topics/108-basic-hooks/100-use-state.md",
-  "react-fundamental-topics:basic-hooks:use-effect": "/roadmaps/103-react/content/100-react-fundamental-topics/108-basic-hooks/101-use-effect.md",
-  "react-fundamental-topics:events": "/roadmaps/103-react/content/100-react-fundamental-topics/109-events.md",
-  "react-ecosystem": "/roadmaps/103-react/content/102-react-ecosystem/readme.md",
-  "react-ecosystem:routers": "/roadmaps/103-react/content/102-react-ecosystem/100-routers/readme.md",
-  "react-ecosystem:routers:react-router": "/roadmaps/103-react/content/102-react-ecosystem/100-routers/100-react-router.md",
-  "react-ecosystem:routers:reach-router": "/roadmaps/103-react/content/102-react-ecosystem/100-routers/101-reach-router.md",
-  "react-ecosystem:ssr": "/roadmaps/103-react/content/102-react-ecosystem/101-ssr/readme.md",
-  "react-ecosystem:ssr:next-js": "/roadmaps/103-react/content/102-react-ecosystem/101-ssr/100-next-js.md",
-  "react-ecosystem:ssg": "/roadmaps/103-react/content/102-react-ecosystem/102-ssg/readme.md",
-  "react-ecosystem:ssg:gatsby": "/roadmaps/103-react/content/102-react-ecosystem/102-ssg/101-gatsby.md",
-  "react-ecosystem:api-calls": "/roadmaps/103-react/content/102-react-ecosystem/103-api-calls/readme.md",
-  "react-ecosystem:api-calls:react-query": "/roadmaps/103-react/content/102-react-ecosystem/103-api-calls/100-react-query.md",
-  "react-ecosystem:api-calls:use-http": "/roadmaps/103-react/content/102-react-ecosystem/103-api-calls/101-use-http.md",
-  "react-ecosystem:api-calls:apollo": "/roadmaps/103-react/content/102-react-ecosystem/103-api-calls/102-apollo.md",
-  "react-ecosystem:api-calls:relay-modern": "/roadmaps/103-react/content/102-react-ecosystem/103-api-calls/103-relay-modern.md",
-  "react-ecosystem:api-calls:axios": "/roadmaps/103-react/content/102-react-ecosystem/103-api-calls/104-axios.md",
-  "react-ecosystem:api-calls:unfetch": "/roadmaps/103-react/content/102-react-ecosystem/103-api-calls/105-unfetch.md",
-  "react-ecosystem:api-calls:superagent": "/roadmaps/103-react/content/102-react-ecosystem/103-api-calls/106-superagent.md",
-  "react-ecosystem:mobile": "/roadmaps/103-react/content/102-react-ecosystem/104-mobile/readme.md",
-  "react-ecosystem:mobile:react-native": "/roadmaps/103-react/content/102-react-ecosystem/104-mobile/100-react-native.md",
-  "react-ecosystem:forms": "/roadmaps/103-react/content/102-react-ecosystem/105-forms/readme.md",
-  "react-ecosystem:forms:react-hook-form": "/roadmaps/103-react/content/102-react-ecosystem/105-forms/100-react-hook-form.md",
-  "react-ecosystem:forms:formik": "/roadmaps/103-react/content/102-react-ecosystem/105-forms/101-formik.md",
-  "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",
-  "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",
-  "react-ecosystem:styling:chakra-ui": "/roadmaps/103-react/content/102-react-ecosystem/108-styling/100-chakra-ui.md",
-  "react-ecosystem:styling:material-ui": "/roadmaps/103-react/content/102-react-ecosystem/108-styling/101-material-ui.md",
-  "react-ecosystem:styling:ant-design": "/roadmaps/103-react/content/102-react-ecosystem/108-styling/102-ant-design.md",
-  "react-ecosystem:styling:styled-components": "/roadmaps/103-react/content/102-react-ecosystem/108-styling/103-styled-components.md",
-  "react-ecosystem:styling:emotion": "/roadmaps/103-react/content/102-react-ecosystem/108-styling/104-emotion.md"
+  "cli-tools": "/roadmaps/103-react/content/101-cli-tools/readme.md",
+  "cli-tools:create-react-app": "/roadmaps/103-react/content/101-cli-tools/101-create-react-app.md",
+  "cli-tools:vite": "/roadmaps/103-react/content/101-cli-tools/100-vite.md",
+  "components": "/roadmaps/103-react/content/102-components/readme.md",
+  "components:functional-components": "/roadmaps/103-react/content/102-components/101-functional-components.md",
+  "components:class-components": "/roadmaps/103-react/content/102-components/100-class-components.md",
+  "components:jsx": "/roadmaps/103-react/content/102-components/102-jsx.md",
+  "components:props-vs-state": "/roadmaps/103-react/content/102-components/103-props-vs-state.md",
+  "components:conditional-rendering": "/roadmaps/103-react/content/102-components/104-conditional-rendering.md",
+  "components:composition-vs-inheritance": "/roadmaps/103-react/content/102-components/105-composition-vs-inheritance.md",
+  "rendering": "/roadmaps/103-react/content/103-rendering/readme.md",
+  "rendering:lists-and-keys": "/roadmaps/103-react/content/103-rendering/101-lists-and-keys.md",
+  "rendering:component-life-cycle": "/roadmaps/103-react/content/103-rendering/100-component-life-cycle.md",
+  "rendering:render-props": "/roadmaps/103-react/content/103-rendering/102-render-props.md",
+  "rendering:refs": "/roadmaps/103-react/content/103-rendering/103-refs.md",
+  "rendering:events": "/roadmaps/103-react/content/103-rendering/104-events.md",
+  "rendering:high-order-components": "/roadmaps/103-react/content/103-rendering/105-high-order-components.md",
+  "hooks": "/roadmaps/103-react/content/104-hooks/readme.md",
+  "hooks:basic-hooks": "/roadmaps/103-react/content/104-hooks/100-basic-hooks/readme.md",
+  "hooks:basic-hooks:use-state": "/roadmaps/103-react/content/104-hooks/100-basic-hooks/100-use-state.md",
+  "hooks:basic-hooks:use-effect": "/roadmaps/103-react/content/104-hooks/100-basic-hooks/101-use-effect.md",
+  "hooks:writing-your-own-hooks": "/roadmaps/103-react/content/104-hooks/101-writing-your-own-hooks.md",
+  "hooks:common-hooks": "/roadmaps/103-react/content/104-hooks/102-common-hooks.md",
+  "routers": "/roadmaps/103-react/content/105-routers/readme.md",
+  "routers:react-router": "/roadmaps/103-react/content/105-routers/100-react-router.md",
+  "routers:reach-router": "/roadmaps/103-react/content/105-routers/101-reach-router.md",
+  "state-management": "/roadmaps/103-react/content/106-state-management/readme.md",
+  "state-management:context": "/roadmaps/103-react/content/106-state-management/100-context.md",
+  "state-management:zustand": "/roadmaps/103-react/content/106-state-management/101-zustand.md",
+  "state-management:redux-and-redux-toolkit": "/roadmaps/103-react/content/106-state-management/102-redux-and-redux-toolkit.md",
+  "state-management:mobx": "/roadmaps/103-react/content/106-state-management/103-mobx.md",
+  "state-management:recoil": "/roadmaps/103-react/content/106-state-management/104-recoil.md",
+  "styling": "/roadmaps/103-react/content/107-styling/readme.md",
+  "styling:chakra-ui": "/roadmaps/103-react/content/107-styling/105-chakra-ui.md",
+  "styling:material-ui": "/roadmaps/103-react/content/107-styling/104-material-ui.md",
+  "styling:mantine": "/roadmaps/103-react/content/107-styling/102-mantine.md",
+  "styling:tailwind": "/roadmaps/103-react/content/107-styling/103-tailwind.md",
+  "styling:styled-components": "/roadmaps/103-react/content/107-styling/100-styled-components.md",
+  "styling:css-modules": "/roadmaps/103-react/content/107-styling/106-css-modules.md",
+  "styling:emotion": "/roadmaps/103-react/content/107-styling/101-emotion.md",
+  "api-calls": "/roadmaps/103-react/content/108-api-calls/readme.md",
+  "api-calls:apollo": "/roadmaps/103-react/content/108-api-calls/100-apollo.md",
+  "api-calls:relay": "/roadmaps/103-react/content/108-api-calls/101-relay.md",
+  "api-calls:urql": "/roadmaps/103-react/content/108-api-calls/102-urql.md",
+  "api-calls:swr": "/roadmaps/103-react/content/108-api-calls/103-swr.md",
+  "api-calls:axios": "/roadmaps/103-react/content/108-api-calls/105-axios.md",
+  "api-calls:superagent": "/roadmaps/103-react/content/108-api-calls/106-superagent.md",
+  "api-calls:react-query": "/roadmaps/103-react/content/108-api-calls/104-react-query.md",
+  "api-calls:rtk-query": "/roadmaps/103-react/content/108-api-calls/107-rtk-query.md",
+  "testing": "/roadmaps/103-react/content/109-testing/readme.md",
+  "testing:jest": "/roadmaps/103-react/content/109-testing/100-jest.md",
+  "testing:vitest": "/roadmaps/103-react/content/109-testing/101-vitest.md",
+  "testing:react-testing-library": "/roadmaps/103-react/content/109-testing/102-react-testing-library.md",
+  "testing:cypress": "/roadmaps/103-react/content/109-testing/103-cypress.md",
+  "testing:playwright": "/roadmaps/103-react/content/109-testing/104-playwright.md",
+  "frameworks": "/roadmaps/103-react/content/110-frameworks/readme.md",
+  "frameworks:next-js": "/roadmaps/103-react/content/110-frameworks/101-next-js.md",
+  "frameworks:remix": "/roadmaps/103-react/content/110-frameworks/100-remix.md",
+  "forms": "/roadmaps/103-react/content/111-forms/readme.md",
+  "forms:react-hook-form": "/roadmaps/103-react/content/111-forms/100-react-hook-form.md",
+  "forms:formik": "/roadmaps/103-react/content/111-forms/101-formik.md",
+  "forms:final-form": "/roadmaps/103-react/content/111-forms/102-final-form.md",
+  "suspense": "/roadmaps/103-react/content/112-suspense.md",
+  "portals": "/roadmaps/103-react/content/113-portals.md",
+  "error-boundaries": "/roadmaps/103-react/content/114-error-boundaries.md",
+  "fiber-architecture": "/roadmaps/103-react/content/115-fiber-architecture.md",
+  "mobile": "/roadmaps/103-react/content/116-mobile/readme.md",
+  "mobile:react-native": "/roadmaps/103-react/content/116-mobile/100-react-native.md",
+  "react-roadmap-note": "/roadmaps/103-react/content/100-react-roadmap-note.md"
 }

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

@@ -1,9 +0,0 @@
-# Create React App
-
-Create React App is the CLI based tool and is the best way to start building a new single-page application in React.
-
-It sets up your development environment so that you can use the latest JavaScript features, provides a nice developer experience, and optimizes your app for production. You’ll need to have Node >= 14.0.0 and npm >= 5.6 on your machine.
-
-<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/108-basic-hooks/102-use-context.md

@@ -1,8 +0,0 @@
-# useContext Hook
-
-`useContext` hook is used to read and subscribe to context from your component. Context allows a parent component to pass data down the entire component tree below it.
-
-<ResourceGroupTitle>Free Content</ResourceGroupTitle>
-<BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://beta.reactjs.org/apis/react/useContext'>Using the Context Hook</BadgeLink>
-<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=5LrDIWkK_Bc'>Learn useContext in 13 Minutes</BadgeLink>
-<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.robinwieruch.de/react-usecontext-hook'>How to useContext in React</BadgeLink>

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

@@ -1,7 +0,0 @@
-# React
-
-React is a JavaScript library for building user interfaces. It is an open-source, component-based front end library responsible only for the view layer of the application.
-
-<ResourceGroupTitle>Free Content</ResourceGroupTitle>
-<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://reactjs.org/'>Official Website</BadgeLink>
-<BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://reactjs.org/docs/getting-started.html'>Official Documentation</BadgeLink>

content/roadmaps/103-react/content/100-react-roadmap-note.md

@@ -0,0 +1,3 @@
+# Note
+
+This roadmap specifically covers **React and the ecosystem** around it. You will notice that it is missing things like version control, package managers, build tools, linters, task runners and other things that are not directly related to React; this is intentional. Have a look at the [Frontend Roadmap](/roadmaps/frontend) for a more comprehensive overview of the frontend ecosystem.

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

@@ -1,9 +0,0 @@
-# Context
-
-Context provides a way to pass data through the component tree without having to pass props down manually at every level.
-
-In a typical React application, data is passed top-down (parent to child) via props, but such usage can be cumbersome for certain types of props (e.g. locale preference, UI theme) that are required by many components within an application. Context provides a way to share values like these between components without having to explicitly pass a prop through every level of the tree.
-
-<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/readme.md

@@ -1,3 +0,0 @@
-# Advanced Topics
-
-Now that you have covered the basics, next we have the advanced topics such as advanced hook topics, context, refs, portals, error boundaries and more.

content/roadmaps/103-react/content/102-components/102-jsx.md

@@ -5,4 +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>
-<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.w3schools.com/react/react_jsx.asp'>JSX in React on w3school</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.w3schools.com/react/react_jsx.asp'>JSX in React on w3school</BadgeLink>

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

@@ -1,11 +0,0 @@
-# Server-side rendering
-
-Server-side rendering refers to the process that the service side completes the HTML structure splicing of the page, sends it to the browser, and then binds the status and events for it to become a fully interactive page.
-
-<ResourceGroupTitle>Free Content</ResourceGroupTitle>
-
-<BadgeLink colorScheme='blue' badgeText='Read' href='https://www.educative.io/answers/what-is-server-side-rendering'>what is server side rendering</BadgeLink>
-<BadgeLink colorScheme='blue' badgeText='Read' href='https://medium.com/@mbleigh/when-should-i-server-side-render-c2a383ff2d0f'>When should I Server-Side Render?</BadgeLink>
-<BadgeLink colorScheme='blue' badgeText='Read' href='https://vuejs.org/guide/scaling-up/ssr.html'>Server-Side Rendering (SSR)</BadgeLink>
-<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=GQzn7XRdzxY'>what is server side rendering?</BadgeLink>
-<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=okvg3MRAPs0'>What is server-side rendering for web development?</BadgeLink>

content/roadmaps/103-react/content/102-react-ecosystem/102-ssg/101-gatsby.md

@@ -1,8 +0,0 @@
-# Gatsby
-
-Gatsby is a React-based open source framework with performance, scalability and security built-in.
-
-<ResourceGroupTitle>Free Resources</ResourceGroupTitle>
-<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://www.gatsbyjs.com/'>Gatsby Website</BadgeLink>
-<BadgeLink colorScheme='blue' badgeText='Docs' href='https://www.gatsbyjs.com/docs'>Gatsby Docs</BadgeLink>
-<BadgeLink badgeText='Watch' href='https://youtube.com/playlist?list=PL4cUxeGkcC9hw1g77I35ZivVLe8k2nvjB'>Gatsby Tutorial</BadgeLink>

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

@@ -1,9 +0,0 @@
-# Static Site Generators
-
-A static site generator is a tool that generates a full static HTML website based on raw data and a set of templates. Essentially, a static site generator automates the task of coding individual HTML pages and gets those pages ready to serve to users ahead of time. Because these HTML pages are pre-built, they can load very quickly in users' browsers.
-
-<ResourceGroupTitle>Free Content</ResourceGroupTitle>
-<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.cloudflare.com/learning/performance/static-site-generator/'>What is a static site generator?</BadgeLink>
-<BadgeLink colorScheme='yellow' badgeText='Read' href='https://nextjs.org/docs/advanced-features/static-html-export'>Next.js SSG</BadgeLink>
-<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.gatsbyjs.com/docs/glossary/static-site-generator/'>Gatsby SSG</BadgeLink>
-<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.smashingmagazine.com/2021/10/building-ssg-11ty-vite-jam-sandwich/'>SSG — An 11ty, Vite And JAM Sandwich</BadgeLink>

content/roadmaps/103-react/content/102-react-ecosystem/103-api-calls/101-use-http.md

@@ -1,9 +0,0 @@
-# use-http
-
-React hook for making isomorphic http requests.
-
-<ResourceGroupTitle>Free Content</ResourceGroupTitle>
-<BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://use-http.com/#/'>Official Website: use-http</BadgeLink>
-<BadgeLink colorScheme='blue' badgeText='GitHub Repository' href='https://github.com/ava/use-http'>ava / use-http</BadgeLink>
-
-

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

@@ -1,6 +0,0 @@
-# Unfetch
-
-Unfetch is the bare minimum 500b [fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) polyfill.
-
-<ResourceGroupTitle>Free Content</ResourceGroupTitle>
-<BadgeLink colorScheme='blue' badgeText='GitHub Repository' href='https://github.com/developit/unfetch'>Official GitHub Repository</BadgeLink>

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

@@ -1,9 +0,0 @@
-# Ant design
-
-An enterprise-class UI design language and React UI library with a set of high-quality React components, one of best React UI library for enterprises.
-
-<ResourceGroupTitle>Free Content</ResourceGroupTitle>
-<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://ant.design/'>Official Website: Ant Design</BadgeLink>
-<BadgeLink colorScheme='blue' badgeText='GitHub Repository' href='https://github.com/ant-design/ant-design'>ant-design / ant-design</BadgeLink>
-
-

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

@@ -1,8 +0,0 @@
-# Ecosystem
-
-Thanks to its popularity, React has been enriched by a vast ecosystem of plugins and tools. A (long) list is available here: [awesome-react](https://github.com/enaqx/awesome-react).
-
-<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/103-react/content/103-rendering/readme.md

@@ -0,0 +1,16 @@
+# Rendering
+
+React follows a declarative approach to rendering components, which means that developers specify what a component should look like, and React takes care of rendering the component to the screen. This is in contrast to an imperative approach, where developers would write code to manually manipulate the DOM (Document Object Model) to update the UI.
+
+The virtual DOM (VDOM) is an important aspect of how React works. It is a lightweight in-memory representation of the DOM (Document Object Model), and it is used to optimize the rendering of components in a React application.
+
+* Components are written as JavaScript classes or functions that define a render method. The render method returns a description of what the component should look like, using JSX syntax.
+* When a component is rendered, React creates a virtual DOM (VDOM) representation of the component. The VDOM is a lightweight in-memory representation of the DOM, and it is used to optimize the rendering of components.
+* React compares the VDOM representation of the component with the previous VDOM representation (if it exists). If there are differences between the two VDOMs, React calculates the minimum number of DOM updates needed to bring the actual DOM into line with the new VDOM.
+* React updates the actual DOM with the minimum number of DOM updates needed to reflect the changes in the VDOM.
+
+This process is known as reconciliation, and it is an important aspect of how React works. By using a declarative approach and a VDOM, React is able to optimize the rendering of components and improve the performance of web applications.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.freecodecamp.org/news/react-under-the-hood/'>React.js under the Hood</BadgeLink>
+

content/roadmaps/103-react/content/104-hooks/100-basic-hooks/readme.md

@@ -1,7 +1,6 @@
 # Hooks
 
 Hooks were introduced in React 16.8 and they let us use React's features-like managing your component's state and or performing an after effect when certain changes occur in state(s) without writing a class.
- 
 
 <ResourceGroupTitle>Free Content</ResourceGroupTitle>
 <BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://reactjs.org/docs/hooks-intro.html'>Introduction to Hooks</BadgeLink>

content/roadmaps/103-react/content/104-hooks/readme.md

@@ -1,8 +1,7 @@
-# React Hooks
+# Hooks
 
-Hooks were introduced in React 16.8 and they let us use state and other React features without writing a class
+Hooks were introduced in React 16.8 and they let us use React's features-like managing your component's state and or performing an after effect when certain changes occur in state(s) without writing a class.
 
 <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/105-routers/101-reach-router.md

@@ -5,4 +5,3 @@ Reach Router is a small, simple router for React that borrows from React Router,
 <ResourceGroupTitle>Free Content</ResourceGroupTitle>
 <BadgeLink colorScheme='blue' badgeText='Official Website' href='https://reach.tech/router/'>Reach Router — Official Website</BadgeLink>
 <BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://reach.tech/router/tutorial/01-intro'>Getting Started Guide</BadgeLink>
-

content/roadmaps/103-react/content/106-state-management/101-zustand.md

@@ -0,0 +1,8 @@
+# Zustand
+
+Zustand is a small, fast and scalable bearbones state-management solution using simplified flux principles. Has a comfy api based on hooks, isn't boilerplatey or opinionated.
+
+Zustand is often used as an alternative to other state management libraries, such as Redux and MobX, because of its simplicity and small size. It is particularly well-suited for small to medium-sized applications, where the complexity of larger state management libraries is not required.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://github.com/pmndrs/zustand'>Zustand - Official Website</BadgeLink>

content/roadmaps/103-react/content/106-state-management/102-redux-and-redux-toolkit.md

@@ -2,8 +2,12 @@
 
 Redux is a predictable state container for JavaScript apps. It helps you write applications that behave consistently, run in different environments (client, server, and native), and are easy to test. On top of that, it provides a great developer experience, such as [live code editing combined with a time traveling debugger](https://github.com/reduxjs/redux-devtools).
 
-<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+Redux Toolkit (RTK) is a library for managing state in JavaScript applications. It is an opinionated set of tools and utilities for building Redux applications, and it is designed to make it easier and faster to build Redux applications.
 
+RTK is often used as an alternative to writing Redux applications from scratch, as it provides a set of conventions and utilities that can make it easier and faster to build Redux applications.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://redux-toolkit.js.org/'>Redux Toolkit - ReduxJS</BadgeLink>
 <BadgeLink colorScheme='yellow' badgeText='Read' href='https://redux.js.org/'>Official Website</BadgeLink>
 <BadgeLink colorScheme='yellow' badgeText='Read' href='https://redux.js.org/introduction/getting-started'>Official Getting Started to Redux</BadgeLink>
 <BadgeLink colorScheme='blue' badgeText='Official Website' href='https://redux-toolkit.js.org'>Redux Toolkit Official Website</BadgeLink>

content/roadmaps/103-react/content/106-state-management/104-recoil.md

@@ -0,0 +1,17 @@
+# Recoil
+
+Recoil is a library for managing state in React applications.
+
+Recoil is designed to be easy to use and efficient, with a focus on improving the performance and scalability of large, complex React applications. It is based on the concept of atoms and selectors, which are used to manage the state of a component. Atoms represent the state of a component, and selectors are used to derive new state from atoms.
+
+Recoil provides a set of utilities and APIs for managing state, including:
+
+- atom: A utility for creating atoms, which represent the state of a component.
+- selector: A utility for creating selectors, which are used to derive new state from atoms.
+- useRecoilValue: A hook for accessing the value of an atom or selector in a component.
+- useSetRecoilState: A hook for updating the value of an atom in a component.
+
+Recoil is often used as an alternative to other state management libraries, such as Redux and MobX, because of its simplicity and performance. It is particularly well-suited for large, complex React applications where the overhead of other state management libraries may be too high.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://recoiljs.org/'>Recoil - Official Website</BadgeLink>

content/roadmaps/103-react/content/107-styling/102-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/103-react/content/107-styling/103-tailwind.md

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

content/roadmaps/103-react/content/107-styling/106-css-modules.md

@@ -0,0 +1,8 @@
+# CSS Modules
+
+CSS files in which all class names and animation names are scoped locally by default.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink badgeText='Official Website' colorScheme="blue" href='https://github.com/css-modules/css-modules'>Project GitHub Repository</BadgeLink>
+<BadgeLink badgeText='Read' colorScheme="yellow" href='https://medium.com/@ralph1786/using-css-modules-in-react-app-c2079eadbb87'>Using CSS Modules In React App</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=pKMWU9OrA2s'>CSS Modules: Why are they great?</BadgeLink>

content/roadmaps/103-react/content/108-api-calls/101-relay.md

@@ -1,4 +1,4 @@
-# Relay Modern
+# Relay
 
 Relay is a JavaScript client used in the browser to fetch GraphQL data. It's a JavaScript framework developed by Facebook for managing and fetching data in React applications. It is built with scalability in mind in order to power complex applications like Facebook. The ultimate goal of GraphQL and Relay is to deliver instant UI-response interactions.
 

content/roadmaps/103-react/content/108-api-calls/102-urql.md

@@ -0,0 +1,15 @@
+# urql
+
+urql (Universal React Query Library) is a library for managing GraphQL data in React applications. It is developed and maintained by Formidable Labs and is available as open-source software.
+
+urql is designed to be easy to use and flexible, with a simple API for performing GraphQL queries and mutations. It is based on the concept of a client, which is used to manage the GraphQL data for an application. The client provides a set of utilities and APIs for managing GraphQL data, including:
+
+- executeQuery: A utility for executing a GraphQL query.
+- executeMutation: A utility for executing a GraphQL mutation.
+- useQuery: A hook for executing a GraphQL query and accessing the result in a component.
+- useMutation: A hook for executing a GraphQL mutation and accessing the result in a component.
+
+urql is often used as an alternative to other GraphQL libraries, such as Apollo Client, because of its simplicity and lightweight size. It is particularly well-suited for small to medium-sized React applications where the complexity of other GraphQL libraries may not be required.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://formidable.com/open-source/urql/'>urql - Formidable Labs</BadgeLink>

content/roadmaps/103-react/content/108-api-calls/103-swr.md

@@ -0,0 +1,10 @@
+# SWR
+
+SWR is a React Hooks library for data fetching.
+
+The name “SWR” is derived from stale-while-revalidate, a cache invalidation strategy popularized by HTTP RFC 5861. SWR first returns the data from cache (stale), then sends the request (revalidate), and finally comes with the up-to-date data again.
+
+With just one hook, you can significantly simplify the data fetching logic in your project.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://swr.vercel.app/'>SWR: React Hooks for Data Fetching</BadgeLink>

content/roadmaps/103-react/content/108-api-calls/104-react-query.md

@@ -6,4 +6,3 @@ Powerful asynchronous state management, server-state utilities and data fetching
 <BadgeLink colorScheme='blue' badgeText='GitHub Repository' href='https://github.com/TanStack/query'>TanStack Query</BadgeLink>
 <BadgeLink colorScheme='red' badgeText='Watch' href='https://www.youtube.com/watch?v=novnyCaa7To'>React Query in 100 Seconds</BadgeLink>
 <BadgeLink colorScheme='green' badgeText='Course' href='https://www.youtube.com/playlist?list=PLC3y8-rFHvwjTELCrPrcZlo6blLBUspd2'>React Query Tutorial for Beginners - Complete Playlist</BadgeLink>
-

content/roadmaps/103-react/content/108-api-calls/107-rtk-query.md

@@ -0,0 +1,6 @@
+# rtk-query
+
+[RTK Query](https://redux-toolkit.js.org/rtk-query/overview) is a data fetching and caching tool that is included in the Redux Toolkit package. It is designed to simplify common use cases for fetching data, including caching, polling, and invalidation.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://redux-toolkit.js.org/rtk-query/overview'>RTK Query - Official Website</BadgeLink>

content/roadmaps/103-react/content/110-frameworks/100-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/103-react/content/110-frameworks/readme.md

@@ -0,0 +1,8 @@
+# SSR Frameworks
+
+Server-side rendering (SSR) is a technique for rendering a JavaScript application on the server, rather than in the browser. This can improve the performance and user experience of a web application, as the initial render of the application is done on the server and the content is sent to the browser as a fully-rendered HTML page.
+
+There are several frameworks and libraries available for server-side rendering React applications, most common being:
+
+- [Next.js](https://nextjs.org/)
+- [Remix](https://remix.run/)

content/roadmaps/103-react/content/111-forms/101-formik.md

@@ -6,7 +6,3 @@ Formik is another famous opensource form library that helps with getting values
 <BadgeLink colorScheme='blue' badgeText='Official Website' href='https://formik.org/'>Official Website — Formik</BadgeLink>
 <BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://formik.org/docs/overview'>Getting Started</BadgeLink>
 <BadgeLink colorScheme='blue' badgeText='GitHub Repository' href='https://github.com/formik/formik'>formik/formik</BadgeLink>
-
-
-
-

content/roadmaps/103-react/content/111-forms/102-final-form.md

@@ -5,4 +5,3 @@ High performance subscription-based form state management for React.
 <ResourceGroupTitle>Free Content</ResourceGroupTitle>
 <BadgeLink colorScheme='blue' badgeText='Official Website' href='https://final-form.org/react'>Final Form — Official Website</BadgeLink>
 <BadgeLink colorScheme='blue' badgeText='GitHub Repository' href='https://github.com/final-form/react-final-form'>final-form / react-final-form</BadgeLink>
-

content/roadmaps/103-react/content/112-suspense.md

@@ -0,0 +1,13 @@
+# Suspense
+
+React Suspense is a feature in React that allows components to "suspend" rendering while they are waiting for something to happen, such as data to be fetched from an API or an image to be loaded. Suspense allows developers to create a more seamless user experience by rendering a placeholder or fallback component while the component is waiting for the required data to be available.
+
+Here is a general overview of how React Suspense works:
+
+- A component that uses Suspense wraps a component that may need to "suspend" rendering in a `Suspense` component.
+- The wrapped component throws a promise when it needs to suspend rendering.
+- The `Suspense` component catches the promise and renders a fallback component while the promise is pending.
+- When the promise resolves, the wrapped component is rendered with the required data.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://reactjs.org/docs/react-api.html#suspense'>React Suspense - Official Docs</BadgeLink>

content/roadmaps/103-react/content/115-fiber-architecture.md

@@ -5,5 +5,3 @@ React 16.0 was released with an update to the React core algorithm. This new cor
 <ResourceGroupTitle>Free Content</ResourceGroupTitle>
 <BadgeLink colorScheme='yellow' badgeText='Read' href='https://github.com/acdlite/react-fiber-architecture'>React Fiber Architecture</BadgeLink>
 <BadgeLink colorScheme='yellow' badgeText='Read' href='https://dzone.com/articles/understanding-of-react-fiber-architecture'>Understanding React Fiber Architecture</BadgeLink>
-
-

content/roadmaps/103-react/content/116-mobile/100-react-native.md

@@ -5,5 +5,3 @@ React Native is an open-source UI software framework created by Meta Platforms,
 <ResourceGroupTitle>Free Content</ResourceGroupTitle>
 <BadgeLink colorScheme='blue' badgeText='Official Website' href='https://reactnative.dev/'>React Native: Official Website</BadgeLink>
 <BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://reactnative.dev/docs/getting-started'>Official Getting Started</BadgeLink>
-
-

content/roadmaps/103-react/meta.json

@@ -3,8 +3,8 @@
     "title": "React Developer Roadmap: Learn to become a React developer",
     "description": "Community driven, articles, resources, guides, interview questions, quizzes for react development. Learn to become a modern React developer by following the steps, skills, resources and guides listed in this roadmap.",
     "keywords": [
-      "react roadmap 2022",
-      "react developer roadmap 2022",
+      "react roadmap 2023",
+      "react developer roadmap 2023",
       "guide to becoming a react developer",
       "react developer roadmap",
       "react roadmap",
@@ -19,14 +19,13 @@
     ]
   },
   "title": "React Developer",
-  "description": "Everything that is there to learn about React and the ecosystem in 2022.",
+  "description": "Everything that is there to learn about React and the ecosystem in 2023.",
   "featuredTitle": "React",
   "type": "tool",
-  "featuredDescription": "Step by step guide to become a React Developer in 2022",
+  "featuredDescription": "Step by step guide to become a React Developer in 2023",
   "isTextHeavy": false,
   "isCommunity": false,
   "featured": true,
-  "resourcesPath": "./resources.md",
   "jsonUrl": "/project/react.json",
   "versions": [
     "latest",

content/roadmaps/103-react/resources.md

@@ -1,7 +0,0 @@
-> **We are still preparing the resources**. Please check back later or [subscribe to get notified](/signup).
-
-While we prepare the list, follow this simple advice to learn anything
- 
-> Just **pick a project and start working on it**, you will learn all that you need along the way.
-
-**→**   [All Roadmaps](/roadmaps)  •  [Programming guides](/guides)  •  [Subscribe](/signup)

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

@@ -1,8 +1,8 @@
-# Observable Pattern
+# Observer 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>
+<BadgeLink badgeText='Read' colorScheme='yellow' href='https://medium.com/fuzzycloud/angular-and-observable-4bf890b2a282'>Angular and Observable</BadgeLink>

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

@@ -3,4 +3,4 @@
 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>
+<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://angular.io/guide/interpolation'>Angular Official Website</BadgeLink>