UI Changes for calendar scheduling

* Phase - 1 (Common Fixes)

* Phase - 2 (Majors)

* Phase - 3 (Special Content)

* Phase - 4

* Phase - 5 (Final)

* Apply Suggested Changes from Dan.

.astro/settings.json

@@ -3,6 +3,6 @@
 		"enabled": false
 	},
 	"_variables": {
-		"lastUpdateCheck": 1728296475293
+		"lastUpdateCheck": 1731065649795
 	}
 }

contributing.md

@@ -1,4 +1,4 @@
-# Contribution
+# ✨ Contribution Guidelines ✨
 
 First of all, thank you for considering to contribute. Please look at the details below:
 
@@ -8,6 +8,7 @@ First of all, thank you for considering to contribute. Please look at the detail
 - [Adding Projects](#adding-projects)
 - [Adding Content](#adding-content)
 - [Guidelines](#guidelines)
+- [Good vs. Not So Good Contributions](#good-vs-not-so-good-contributions)
 
 ## Hacktoberfest Contributions
 
@@ -15,10 +16,10 @@ We are taking part in [Hacktoberfest 11](https://hacktoberfest.com/)!
 
 Before you start to contribute to our project in order to satisfy [Hacktoberfest requirements](https://hacktoberfest.com/participation/#contributors), please bare in mind the following:
 
-* There is not a Hacktoberfest t-shirt this year [(see their FAQ)](https://hacktoberfest.com/participation/#faq).
-* There is not an infinite opportunity to contribute to the roadmap.sh project.
+- There is *not* a Hacktoberfest t-shirt this year [(see their FAQ)](https://hacktoberfest.com/participation/#faq)
+- There is *not* an infinite opportunity to contribute to the roadmap.sh project.
 
-### Hacktoberfest Specific Contribution rules
+### Hacktoberfest Specific Contribution Rules
 
 As Hacktoberfest attracts a lot of contributors (which is awesome), it does require a more rigid and strictly enforced set of guidelines than the average contribution.
 
@@ -61,11 +62,12 @@ Learn more from the following resources:
 
 Contributions to the project that meet these requirements will be given the label `hacktoberfest-accepted` and merged, contributions that do not meet the requirements will simply be closed.
 
-Any attempts at spam PRs will be given the `spam` tag. If you recieve 2 `spam` tags against you, you will be [disqualified from Hacktoberfest](https://hacktoberfest.com/participation/#spam).
+Any attempts at spam PRs will be given the `spam` tag. If you receive 2 `spam` tags against you, you will be [disqualified from Hacktoberfest](https://hacktoberfest.com/participation/#spam).
 
 ## New Roadmaps
 
 For new roadmaps, you can either:
+
 - Submit a roadmap by providing [a textual roadmap similar to this roadmap](https://gist.github.com/kamranahmedse/98758d2c73799b3a6ce17385e4c548a5) in an [issue](https://github.com/kamranahmedse/developer-roadmap/issues).
 - Create an interactive roadmap yourself using [our roadmap editor](https://draw.roadmap.sh/) & submit the link to that roadmap in an [issue](https://github.com/kamranahmedse/developer-roadmap/issues).
 
@@ -73,10 +75,10 @@ For new roadmaps, you can either:
 
 For the existing roadmaps, please follow the details listed for the nature of contribution:
 
-- **Fixing Typos** — Make your changes in the [roadmap Markdown file](https://github.com/kamranahmedse/developer-roadmap/tree/master/src/data/roadmaps) and submit a [PR](https://github.com/kamranahmedse/developer-roadmap/pulls).
+- **Fixing Typos** — Make your changes in the [roadmap markdown file](https://github.com/kamranahmedse/developer-roadmap/tree/master/src/data/roadmaps) and submit a [PR](https://github.com/kamranahmedse/developer-roadmap/pulls).
 - **Adding or Removing Nodes** — Please open an [issue](https://github.com/kamranahmedse/developer-roadmap/issues) with your suggestion.
 
-**Note:** Please note that our goal is <strong>not to have the biggest list of items</strong>. Our goal is to list items or skills most relevant today.
+**Note:** Please note that our goal is **not to have the biggest list of items**. Our goal is to list items or skills most relevant today.
 
 ## Adding Projects
 
@@ -84,7 +86,7 @@ If you have a project idea that you think we should add to the roadmap, feel fre
 
 The detailed format for the issue should be as follows:
 
-```
+```md
 ## What is this project about?
 
 (Add an introduction to the project.)
@@ -112,14 +114,14 @@ Find [the content directory inside the relevant roadmap](https://github.com/kamr
 
 Please adhere to the following style when adding content to a topic:
 
-```
+```md
 # Topic Title
 
 (Content)
 
 Visit the following resources to learn more:
 
-- [@type@Description of link](Link)
+- [@type@Title/Description of Link](Link)
 ```
 
 `@type@` must be one of the following and describe the type of content you are adding:
@@ -131,19 +133,19 @@ Visit the following resources to learn more:
 - `@podcast@`
 - `@video@`
 
-It's important to add a valid type, this will help us categorize the content and display it properly on the roadmap.
+It's important to add a valid type, this will help us categorize the content and display it properly on the roadmap. The order of the links based on type is same as above.
 
 ## Guidelines
 
-- <p><strong>Please don't use the project for self-promotion!</strong><br />
+- <p><strong>Please don't use the project for self-promotion!</strong><br/>
 
   We believe this project is a valuable asset to the developer community, and it includes numerous helpful resources. We kindly ask you to avoid submitting pull requests for the sole purpose of self-promotion. We appreciate contributions that genuinely add value, such as guides from maintainers of well-known frameworks, and will consider accepting these even if they're self authored. Thank you for your understanding and cooperation!
 
-- <p><strong>Adding everything available out there is not the goal!</strong><br />
+- <p><strong>Adding everything available out there is not the goal!</strong><br/>
 
   The roadmaps represent the skillset most valuable today, i.e., if you were to enter any of the listed fields today, what would you learn? There might be things that are of-course being used today, but prioritize the things that are most in demand today, e.g., agree that lots of people are using angular.js today, but you wouldn't want to learn that instead of React, Angular, or Vue. Use your critical thinking to filter out non-essential stuff. Give honest arguments for why the resource should be included.</p>
 
-- <p><strong>Do not add things you have not evaluated personally!</strong><br />
+- <p><strong>Do not add things you have not evaluated personally!</strong><br/>
 
   Use your critical thinking to filter out non-essential stuff. Give honest arguments for why the resource should be included. Have you read this book? Can you give a short article?</p>
 
@@ -151,26 +153,31 @@ It's important to add a valid type, this will help us categorize the content and
 
   If you are planning to contribute by adding content to the roadmaps, I recommend you to clone the repository, add content to the [content directory of the roadmap](./src/data/roadmaps/) and create a single PR to make it easier for me to review and merge the PR.
 
-- <p><strong>Write meaningful commit messages</strong><br >
+- <p><strong>Write meaningful commit messages</strong><br/>
 
   Meaningful commit messages help speed up the review process as well as help other contributors gain a good overview of the repositories commit history without having to dive into every commit.
 
   </p>
 - <p><strong>Look at the existing issues/pull requests before opening new ones</strong></p>
 
-### Good vs. Not So Good Contributions
+## Good vs. Not So Good Contributions
 
 <strong>Good</strong>
 
-  - New Roadmaps.
-  - Engaging, fresh content links.
-  - Typos and grammatical fixes.
-  - Content copy in topics that do not have any (or minimal copy exists).
+- New Roadmaps.
+- Engaging and fresh content links.
+- Typos and grammatical fixes.
+- Enhanced Existing Content.
+- Content copy in topics that do not have any (or minimal copy exists).
 
 <strong>Not So Good</strong>
 
-  - Adding whitespace that doesn't add to the readability of the content.
-  - Rewriting content in a way that doesn't add any value.
-  - Non-English content.
-  - PR's that don't follow our style guide, have no description, and a default title.
-  - Links to your own blog articles.
+- Adding whitespace that doesn't add to the readability of the content.
+- Rewriting content in a way that doesn't add any value.
+- Non-English content.
+- PR's that don't follow our style guide, have no description, and a default title.
+- Links to your own blog articles.
+
+***
+
+Have a look at the [License](./license) file.

license

@@ -1,7 +1,6 @@
 Everything including text and images in this project are protected by the copyright laws.
 You are allowed to use this material for personal use but are not allowed to use it for
-any other purpose including publishing the images, the project files or the content in the
-images in any form either digital, non-digital, textual, graphical or written formats.
+any other purpose including publishing the images, the project files or the content in the images in any form either digital, non-digital, textual, graphical or written formats.
 You are allowed to share the links to the repository or the website roadmap.sh but not
 the content for any sort of usage that involves the content of this repository taken out
 of the repository and be shared from any other medium including but not limited to blog
@@ -9,7 +8,7 @@ posts, articles, newsletters, you must get prior consent from the understated. T
 conditions do not apply to the readonly GitHub forks created using the Fork button on
 GitHub with the whole purpose of contributing to the project.
 
-Copyright © 2023 Kamran Ahmed <kamranahmed.se@gmail.com>
+Copyright © 2017 - Present. Kamran Ahmed <kamranahmed.se@gmail.com>
 
 Please note that I am really flexible with allowing the usage of the content in this
 repository. If you reach out to me with a brief detail of why and how you would like

package.json

@@ -37,6 +37,7 @@
     "@nanostores/react": "^0.8.0",
     "@napi-rs/image": "^1.9.2",
     "@resvg/resvg-js": "^2.6.2",
+    "@tanstack/react-query": "^5.59.16",
     "@types/react": "^18.3.11",
     "@types/react-dom": "^18.3.1",
     "astro": "^4.16.1",

pnpm-lock.yaml

@@ -32,6 +32,9 @@ importers:
       '@resvg/resvg-js':
         specifier: ^2.6.2
         version: 2.6.2
+      '@tanstack/react-query':
+        specifier: ^5.59.16
+        version: 5.59.16(react@18.3.1)
       '@types/react':
         specifier: ^18.3.11
         version: 18.3.11
@@ -1198,6 +1201,14 @@ packages:
     peerDependencies:
       tailwindcss: '>=3.0.0 || insiders || >=4.0.0-alpha.20'
 
+  '@tanstack/query-core@5.59.16':
+    resolution: {integrity: sha512-crHn+G3ltqb5JG0oUv6q+PMz1m1YkjpASrXTU+sYWW9pLk0t2GybUHNRqYPZWhxgjPaVGC4yp92gSFEJgYEsPw==}
+
+  '@tanstack/react-query@5.59.16':
+    resolution: {integrity: sha512-MuyWheG47h6ERd4PKQ6V8gDyBu3ThNG22e1fRVwvq6ap3EqsFhyuxCAwhNP/03m/mLg+DAb0upgbPaX6VB+CkQ==}
+    peerDependencies:
+      react: ^18 || ^19
+
   '@tybys/wasm-util@0.9.0':
     resolution: {integrity: sha512-6+7nlbMVX/PVDCwaIQ8nTOPveOcFLSt8GcXdx8hD0bt39uWxYT88uXzqTd4fTvqta7oeUJqudepapKNt2DYJFw==}
 
@@ -4278,6 +4289,13 @@ snapshots:
       postcss-selector-parser: 6.0.10
       tailwindcss: 3.4.13
 
+  '@tanstack/query-core@5.59.16': {}
+
+  '@tanstack/react-query@5.59.16(react@18.3.1)':
+    dependencies:
+      '@tanstack/query-core': 5.59.16
+      react: 18.3.1
+
   '@tybys/wasm-util@0.9.0':
     dependencies:
       tslib: 2.7.0

public/roadmap-content/api-design.json

@@ -320,33 +320,18 @@
     ]
   },
   "Wwd-0PjrtViMFWxRGaQey": {
-    "title": "gRPC APIs",
-    "description": "gRPC is a platform agnostic serialization protocol that is used to communicate between services. Designed by Google in 2015, it is a modern alternative to REST APIs. It is a binary protocol that uses HTTP/2 as a transport layer. It is a high performance, open source, general-purpose RPC framework that puts mobile and HTTP/2 first. It's main use case is for communication between two different languages within the same application. You can use Python to communicate with Go, or Java to communicate with C#.\n\nVisit the following resources to learn more:",
+    "title": "SOAP APIs",
+    "description": "SOAP (Simple Object Access Protocol) APIs are a standard communication protocol system that permits programs that run on different operating systems (like Linux and Windows) to communicate using Hypertext Transfer Protocol (HTTP) and its Extensible Markup Language (XML). In the context of API Design, SOAP APIs offer a robust and well-defined process for interaction between various software applications, mostly over a network. They are highly extensible, versatile and support a wide range of communications protocols. Despite being more complex compared to other API types like REST, SOAP APIs ensure high reliability and security, making them the choice for certain business-focused, high-transaction applications.\n\nLearn more from the following resources:",
     "links": [
       {
-        "title": "gRPC Website",
-        "url": "https://grpc.io/",
+        "title": "What are SOAP APIs?",
+        "url": "https://www.indeed.com/career-advice/career-development/what-is-soap-api",
         "type": "article"
       },
       {
-        "title": "gRPC Introduction",
-        "url": "https://grpc.io/docs/what-is-grpc/introduction/",
+        "title": "SOAP vs REST 101: Understand The Differences",
+        "url": "https://www.soapui.org/learn/api/soap-vs-rest-api/",
         "type": "article"
-      },
-      {
-        "title": "gRPC Core Concepts",
-        "url": "https://grpc.io/docs/what-is-grpc/core-concepts/",
-        "type": "article"
-      },
-      {
-        "title": "Explore top posts about gRPC",
-        "url": "https://app.daily.dev/tags/grpc?ref=roadmapsh",
-        "type": "article"
-      },
-      {
-        "title": "Stephane Maarek - gRPC Introduction",
-        "url": "https://youtu.be/XRXTsQwyZSU",
-        "type": "video"
       }
     ]
   },
@@ -1554,5 +1539,10 @@
         "type": "article"
       }
     ]
+  },
+  "grpc-apis@1DrqtOwxCuFtWQXQ6ZALp.md": {
+    "title": "gRPC APIs",
+    "description": "",
+    "links": []
   }
 }

public/roadmap-content/blockchain.json

@@ -467,7 +467,7 @@
     "links": [
       {
         "title": "What is Ethereum Virtual Machine?",
-        "url": "https://moralis.io/evm-explained-what-is-ethereum-virtual-machine/",
+        "url": "https://astrodev.hashnode.dev/blockchain-ethereum-evm",
         "type": "article"
       },
       {

public/roadmap-content/computer-science.json

@@ -3966,6 +3966,11 @@
         "title": "Operating Systems and System Programming",
         "url": "https://archive.org/details/ucberkeley-webcast-PL-XXv-cvA_iBDyz-ba4yDskqMDY6A1w_c",
         "type": "article"
+      },
+      {
+        "title": "25 hour Operating Systems Course - freecodecamp",
+        "url": "https://youtu.be/yK1uBHPdp30?si=gGPdK7cM4KlP6Qq0",
+        "type": "video"
       }
     ]
   },
@@ -4040,8 +4045,29 @@
   },
   "Ge2nagN86ofa2y-yYR1lv": {
     "title": "Scheduling Algorithms",
-    "description": "CPU Scheduling is the process of selecting a process from the ready queue and allocating the CPU to it. The selection of a process is based on a particular scheduling algorithm. The scheduling algorithm is chosen depending on the type of system and the requirements of the processes.\n\nHere is the list of some of the most commonly used scheduling algorithms:\n\n*   **First Come First Serve (FCFS):** The process that arrives first is allocated the CPU first. It is a non-preemptive algorithm.\n*   **Shortest Job First (SJF):** The process with the smallest execution time is allocated the CPU first. It is a non-preemptive algorithm.\n*   **Shortest Remaining Time First (SRTF):** The process with the smallest remaining execution time is allocated the CPU first. It is a preemptive algorithm.\n*   **Round Robin (RR):** The process is allocated the CPU for a fixed time slice. The time slice is usually 10 milliseconds. It is a preemptive algorithm.\n*   **Priority Scheduling:** The process with the highest priority is allocated the CPU first. It is a preemptive algorithm.\n*   **Multi-level Queue Scheduling:** The processes are divided into different queues based on their priority. The process with the highest priority is allocated the CPU first. It is a preemptive algorithm.\n*   **Multi-level Feedback Queue Scheduling:** The processes are divided into different queues based on their priority. The process with the highest priority is allocated the CPU first. If a process is preempted, it is moved to the next queue. It is a preemptive algorithm.\n*   **Lottery Scheduling:** The process is allocated the CPU based on a lottery system. It is a preemptive algorithm.\n*   **Multilevel Feedback Queue Scheduling:** The processes are divided into different queues based on their priority. The process with the highest priority is allocated the CPU first. If a process is preempted, it is moved to the next queue. It is a preemptive algorithm.",
-    "links": []
+    "description": "CPU Scheduling is the process of selecting a process from the ready queue and allocating the CPU to it. The selection of a process is based on a particular scheduling algorithm. The scheduling algorithm is chosen depending on the type of system and the requirements of the processes.\n\nHere is the list of some of the most commonly used scheduling algorithms:\n\n*   **First Come First Serve (FCFS):** The process that arrives first is allocated the CPU first. It is a non-preemptive algorithm.\n*   **Shortest Job First (SJF):** The process with the smallest execution time is allocated the CPU first. It is a non-preemptive algorithm.\n*   **Shortest Remaining Time First (SRTF):** The process with the smallest remaining execution time is allocated the CPU first. It is a preemptive algorithm.\n*   **Round Robin (RR):** The process is allocated the CPU for a fixed time slice. The time slice is usually 10 milliseconds. It is a preemptive algorithm.\n*   **Priority Scheduling:** The process with the highest priority is allocated the CPU first. It is a preemptive algorithm.\n*   **Multi-level Queue Scheduling:** The processes are divided into different queues based on their priority. The process with the highest priority is allocated the CPU first. It is a preemptive algorithm.\n*   **Multi-level Feedback Queue Scheduling:** The processes are divided into different queues based on their priority. The process with the highest priority is allocated the CPU first. If a process is preempted, it is moved to the next queue. It is a preemptive algorithm.\n*   **Highest Response Ratio Next(HRRN):** CPU is allotted to the next process which has the highest response ratio and not to the process having less burst time. It is a Non-Preemptive algorithm.\n*   **Lottery Scheduling:** The process is allocated the CPU based on a lottery system. It is a preemptive algorithm.\n\nVisit the following resources to learn more :",
+    "links": [
+      {
+        "title": "CPU Scheduling in Operating Systems - geeksforgeeks",
+        "url": "https://www.geeksforgeeks.org/cpu-scheduling-in-operating-systems/",
+        "type": "article"
+      },
+      {
+        "title": "Lottery Scheduling for Operating Systems - geeksforgeeks",
+        "url": "https://www.geeksforgeeks.org/lottery-process-scheduling-in-operating-system/",
+        "type": "article"
+      },
+      {
+        "title": "Program for Round Robin Scheduling for the same Arrival time - geeksforgeeks",
+        "url": "https://www.geeksforgeeks.org/program-for-round-robin-scheduling-for-the-same-arrival-time/",
+        "type": "article"
+      },
+      {
+        "title": "Introduction to CPU Scheduling",
+        "url": "https://youtu.be/EWkQl0n0w5M?si=Lb-PxN_t-rDfn4JL",
+        "type": "video"
+      }
+    ]
   },
   "cpQvB0qMDL3-NWret7oeA": {
     "title": "CPU Interrupts",

public/roadmap-content/cyber-security.json

@@ -78,7 +78,7 @@
         "type": "article"
       },
       {
-        "title": "Libra Office",
+        "title": "LibreOffice",
         "url": "https://www.libreoffice.org/",
         "type": "article"
       }

public/roadmap-content/game-developer.json

@@ -100,8 +100,19 @@
   },
   "YTkOF_33oL1ZkA-loc_DP": {
     "title": "Curve",
-    "description": "Curve\n-----",
-    "links": []
+    "description": "Curve\n-----\n\nA `curve` in game development is a mathematical tool for creating smooth lines or paths, used in areas like animation, 3D modeling, UI design, and level layouts. Curves simplify complex shapes and movements, enabling more natural results compared to linear approaches. They're key for `lifelike animations`, organic shapes, `realistic physics`, and smooth camera movements, essential for polished, fluid game design.\n\nLearn more from the following resources:",
+    "links": [
+      {
+        "title": "Curves wikipedia",
+        "url": "https://en.wikipedia.org/wiki/Curve",
+        "type": "article"
+      },
+      {
+        "title": "Curves basics",
+        "url": "https://byjus.com/maths/curve/",
+        "type": "article"
+      }
+    ]
   },
   "nTiHZXRh2j3_FsBotmlGf": {
     "title": "Spline",
@@ -121,8 +132,14 @@
   },
   "DUEEm9sAaZqSI-W-PFZ8f": {
     "title": "Bezier",
-    "description": "`Bezier curves` are named after Pierre Bezier, a French engineer working at Renault, who used them in the 1960s for designing car bodies. A Bezier curve is defined by a set of control points with a minimum of two but no upper limit. The curve is calculated between the first and the last control point and does not pass through the controlling points, which only influence the direction of the curve. There are linear, quadratic, and cubic Bezier curves, but curves with more control points are also possible. They are widely used in computer graphics, animations, and are extensively used in vector images and tools to create shapes, texts, and objects.",
-    "links": []
+    "description": "`Bezier curves` are named after Pierre Bezier, a French engineer working at Renault, who used them in the 1960s for designing car bodies. A Bezier curve is defined by a set of control points with a minimum of two but no upper limit. The curve is calculated between the first and the last control point and does not pass through the controlling points, which only influence the direction of the curve. There are linear, quadratic, and cubic Bezier curves, but curves with more control points are also possible. They are widely used in computer graphics, animations, and are extensively used in vector images and tools to create shapes, texts, and objects.\n\nLearn more from the following resources:",
+    "links": [
+      {
+        "title": "Bezier Curves Explained",
+        "url": "https://www.youtube.com/watch?v=pnYccz1Ha34",
+        "type": "video"
+      }
+    ]
   },
   "N9GoA3YvOaKwYjljj6NZv": {
     "title": "Catmull-Rom",

public/roadmap-content/git-github.json

@@ -810,7 +810,7 @@
     "links": [
       {
         "title": "Rebasing",
-        "url": "https://git-scm.com/book/en/Git-Branching-Rebasing",
+        "url": "https://git-scm.com/book/en/v2/Git-Branching-Rebasing",
         "type": "article"
       }
     ]

public/roadmap-content/nodejs.json

@@ -448,6 +448,11 @@
         "url": "https://blog.bitsrc.io/types-of-native-errors-in-javascript-you-must-know-b8238d40e492",
         "type": "article"
       },
+      {
+        "title": "JavaScript error reference - MDN",
+        "url": "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors",
+        "type": "article"
+      },
       {
         "title": "Explore top posts about JavaScript",
         "url": "https://app.daily.dev/tags/javascript?ref=roadmapsh",
@@ -463,6 +468,11 @@
         "title": "Node.js Errors - Official Docs",
         "url": "https://nodejs.org/api/errors.html#errors_class_systemerror",
         "type": "article"
+      },
+      {
+        "title": "@Article@16 Common Errors in Node.js and How to Fix Them",
+        "url": "https://betterstack.com/community/guides/scaling-nodejs/nodejs-errors/",
+        "type": "article"
       }
     ]
   },
@@ -522,6 +532,11 @@
         "title": "Async Errors",
         "url": "https://www.mariokandut.com/handling-errors-in-asynchronous-functions-node-js/",
         "type": "article"
+      },
+      {
+        "title": "The best way to handle errors in asynchronous javascript",
+        "url": "https://dev.to/m__mdy__m/the-best-way-to-handle-errors-in-asynchronous-javascript-16bb",
+        "type": "article"
       }
     ]
   },
@@ -1030,6 +1045,11 @@
         "title": "Official Documentation",
         "url": "https://nodejs.org/api/process.html#processstdin",
         "type": "article"
+      },
+      {
+        "title": "Node.js Process stdin & stdout",
+        "url": "https://nodecli.com/node-stdin-stdout",
+        "type": "article"
       }
     ]
   },
@@ -1169,6 +1189,11 @@
         "title": "Explore top posts about Node.js",
         "url": "https://app.daily.dev/tags/nodejs?ref=roadmapsh",
         "type": "article"
+      },
+      {
+        "title": "What is an API (in 5 minutes)",
+        "url": "https://youtu.be/ByGJQzlzxQg?si=9EB9lgRvEOgt3xPJ",
+        "type": "video"
       }
     ]
   },

public/roadmap-content/postgresql-dba.json

@@ -1514,12 +1514,12 @@
     "description": "PgBouncer is a lightweight connection pooler for PostgreSQL, designed to reduce the overhead associated with establishing new database connections. It sits between the client and the PostgreSQL server, maintaining a pool of active connections that clients can reuse, thus improving performance and resource utilization. PgBouncer supports multiple pooling modes, including session pooling, transaction pooling, and statement pooling, catering to different use cases and workloads. It is highly configurable, allowing for fine-tuning of connection limits, authentication methods, and other parameters to optimize database access and performance.",
     "links": [
       {
-        "title": "pgbounder/pgbouncer",
+        "title": "pgbouncer/pgbouncer",
         "url": "https://github.com/pgbouncer/pgbouncer",
         "type": "opensource"
       },
       {
-        "title": "PgBounder Website",
+        "title": "PgBouncer Website",
         "url": "https://www.pgbouncer.org/",
         "type": "article"
       }

public/roadmap-content/python.json

@@ -319,6 +319,11 @@
         "title": "Explore top posts about Python",
         "url": "https://app.daily.dev/tags/python?ref=roadmapsh",
         "type": "article"
+      },
+      {
+        "title": "Learn Python - Full Course",
+        "url": "https://www.youtube.com/watch?v=4M87qBgpafk",
+        "type": "video"
       }
     ]
   },

public/roadmap-content/react.json

@@ -1675,6 +1675,11 @@
         "title": "React Suspense",
         "url": "https://react.dev/reference/react/Suspense",
         "type": "article"
+      },
+      {
+        "title": "React Suspense - A complete guide",
+        "url": "https://hygraph.com/blog/react-suspense",
+        "type": "article"
       }
     ]
   },

public/roadmap-content/technical-writer.json

@@ -27,8 +27,29 @@
   },
   "jl1FsQ5-WGKeFyaILNt_p": {
     "title": "What is Technical Writing?",
-    "description": "Technical writing involves explaining complex concepts in a simple, easy-to-understand language to a specific audience. This form of writing is commonly utilized in fields such as engineering, computer hardware and software, finance, consumer electronics, and biotechnology.\n\nThe primary objective of a technical writer is to simplify complicated information and present it in a clear and concise manner. The duties of a technical writer may include creating how-to guides, instruction manuals, FAQ pages, journal articles, and other technical content that can aid the user's understanding.\n\nTechnical writing prioritizes clear and consistent communication, using straightforward language and maintaining a uniform writing style to prevent confusion. Technical writers often integrate visual aids and leverage documentation tools to achieve these objectives.\n\nThe ultimate goal is to enable the user to understand and navigate a new product or concept without difficulty.",
-    "links": []
+    "description": "Technical writing involves explaining complex concepts in a simple, easy-to-understand language to a specific audience. This form of writing is commonly utilized in fields such as engineering, computer hardware and software, finance, consumer electronics, and biotechnology.\n\nThe primary objective of a technical writer is to simplify complicated information and present it in a clear and concise manner. The duties of a technical writer may include creating how-to guides, instruction manuals, FAQ pages, journal articles, and other technical content that can aid the user's understanding.\n\nTechnical writing prioritizes clear and consistent communication, using straightforward language and maintaining a uniform writing style to prevent confusion. Technical writers often integrate visual aids and leverage documentation tools to achieve these objectives.\n\nThe ultimate goal is to enable the user to understand and navigate a new product or concept without difficulty.\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "Indeed: What Is Technical Writing?",
+        "url": "https://www.indeed.com/career-advice/career-development/technical-writing",
+        "type": "article"
+      },
+      {
+        "title": "TechWhirl: What Is Technical Writing?",
+        "url": "https://techwhirl.com/what-is-technical-writing/",
+        "type": "article"
+      },
+      {
+        "title": "Amruta Ranade: What do Technical Writers do?",
+        "url": "https://www.youtube.com/watch?v=biocrCx5T_k",
+        "type": "video"
+      },
+      {
+        "title": "Technical Writer HQ: What is Technical Writing?",
+        "url": "https://www.youtube.com/watch?v=KEI5JzBp2Io",
+        "type": "video"
+      }
+    ]
   },
   "j69erqfosSZMDlmKcnnn0": {
     "title": "Role of Technical Writers inOrganizations",

public/roadmap-content/typescript.json

@@ -685,7 +685,7 @@
   },
   "oxzcYXxy2I7GI7nbvFYVa": {
     "title": "Constructor Overloading",
-    "description": "In TypeScript, you can achieve constructor overloading by using multiple constructor definitions with different parameter lists in a single class. Given below is the example where we have multiple definitions for the constructor:\n\n    class Point {\n      // Overloads\n      constructor(x: number, y: string);\n      constructor(s: string);\n      constructor(xs: any, y?: any) {\n        // TBD\n      }\n    }\n    \n\nNote that, similar to function overloading, we only have one implementation of the consructor and it's the only the signature that is overloaded.\n\nLearn more from the following resources:",
+    "description": "In TypeScript, you can achieve constructor overloading by using multiple constructor definitions with different parameter lists in a single class. Given below is the example where we have multiple definitions for the constructor:\n\n    class Point {\n      // Overloads\n      constructor(x: number, y: string);\n      constructor(s: string);\n      constructor(xs: any, y?: any) {\n        // TBD\n      }\n    }\n    \n\nNote that, similar to function overloading, we only have one implementation of the constructor and it's the only the signature that is overloaded.\n\nLearn more from the following resources:",
     "links": [
       {
         "title": "Constructors - TypeScript",

public/roadmap-content/vue.json

@@ -17,8 +17,13 @@
   },
   "y9ToYDix-koRbR6FLydFw": {
     "title": "create-vue",
-    "description": "[create-vue](https://github.com/vuejs/create-vue) is a CLI tool that helps you create a new Vue project with a single command. It is a simple and easy-to-use tool that saves you time and effort when setting up a new Vue project.\n\nLearn more using the following resources:",
+    "description": "create-vue is a CLI tool that helps you create a new Vue project with a single command. It is a simple and easy-to-use tool that saves you time and effort when setting up a new Vue project.\n\nLearn more using the following resources:",
     "links": [
+      {
+        "title": "vuejs/create-vue",
+        "url": "https://github.com/vuejs/create-vue",
+        "type": "opensource"
+      },
       {
         "title": "Creating a Vue Project",
         "url": "https://cli.vuejs.org/guide/creating-a-project.html",
@@ -120,12 +125,17 @@
   },
   "CGdw3PqLRb9OqFU5SqmE1": {
     "title": "Directives",
-    "description": "Directives are special attributes with the `v-` prefix. Vue provides a number of [built-in directives](https://vuejs.org/api/built-in-directives.html).\n\nVisit the following resources to learn more:",
+    "description": "Directives are special attributes with the `v-` prefix. Vue provides a number of built-in directives.\n\nVisit the following resources to learn more:",
     "links": [
       {
         "title": "Directives Documentation",
         "url": "https://vuejs.org/guide/essentials/template-syntax.html#directives",
         "type": "article"
+      },
+      {
+        "title": "Built-in Directives",
+        "url": "https://vuejs.org/api/built-in-directives.html",
+        "type": "article"
       }
     ]
   },
@@ -142,7 +152,7 @@
   },
   "PPUU3Rb73aCpT4zcyvlJE": {
     "title": "Options API",
-    "description": "We use Options API in a Vue application to write and define different components. With this API, we can use options such as data, methods, and mounted.\n\nTo state it simply, Options API is an old way to structure a Vue.JS application. Due to some limitations in this API, Composition API was introduced in Vue 3.\n\nVisit the following resources to learn more:",
+    "description": "We use Options API in a Vue application to write and define different components. With this API, we can use options such as data, methods, and mounted. To state it simply, Options API is an old way to structure a Vue.JS application. Due to some limitations in this API, Composition API was introduced in Vue 3.\n\nVisit the following resources to learn more:",
     "links": [
       {
         "title": "TypeScript with Options API",
@@ -192,14 +202,9 @@
     "description": "Every application instance exposes a `config` object that contains the configuration settings for that application. You can modify its properties before mounting your application.\n\nVisit the following resources to learn more:",
     "links": [
       {
-        "title": "Official Documentation",
+        "title": "Vue.js Documentation",
         "url": "https://vuejs.org/api/application.html#app-config",
         "type": "article"
-      },
-      {
-        "title": "official API Documentation",
-        "url": "https://vuejs.org/api/application.html",
-        "type": "article"
       }
     ]
   },
@@ -216,13 +221,25 @@
   },
   "1oIt_5OK-t2WaCgaYt9A8": {
     "title": "Error / Warn Handler",
-    "description": "",
-    "links": []
+    "description": "Debugging in Vue.js involves identifying and fixing issues in your Vue applications. It’s an essential part of the development process, and there are several tools and techniques you can use to effectively debug your Vue code.\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "Debugging Documentation",
+        "url": "https://vuejs.org/v2/cookbook/debugging-in-vscode.html",
+        "type": "article"
+      }
+    ]
   },
   "gihxGgt177BK_EYsAfpx9": {
     "title": "Global Properties",
-    "description": "",
-    "links": []
+    "description": "Global properties allows you to add properties or methods that can be accessed throughout your application. This is particularly useful for sharing functionality or data across components without the need to pass props explicitly.\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "Vue.js Global Properties",
+        "url": "https://blog.logrocket.com/vue-js-globalproperties/",
+        "type": "article"
+      }
+    ]
   },
   "f7N4pAp_jBlT8_8owAcbG": {
     "title": "Performance",
@@ -242,10 +259,10 @@
   },
   "NCIzs3jbQTv1xXhAaGfZN": {
     "title": "v-text",
-    "description": "The `v-text` directive is used to set the textContent property of an element. It's important to note that when using this directive it will overwrite the HTML content inside the element. The expected input is a string, so it's important to wrap any text in single quotes.\n\nExample:\n\n    <template>\n      <p v-text=\"'I am some text'\"></p>\n    </template>\n    \n\nVisit the following resources to learn more:",
+    "description": "The `v-text` directive is used to set the textContent property of an element. It's important to note that when using this directive it will overwrite the HTML content inside the element. The expected input is a string, so it's important to wrap any text in single quotes.\n\nExample\n-------\n\n    <template>\n      <p v-text=\"'I am some text'\"></p>\n    </template>\n    \n\nVisit the following resources to learn more:",
     "links": [
       {
-        "title": "v-text documentation",
+        "title": "v-text Documentation",
         "url": "https://vuejs.org/api/built-in-directives.html#v-text",
         "type": "article"
       }
@@ -253,10 +270,10 @@
   },
   "bZxtIBeIfeUcR32LZWrPW": {
     "title": "v-html",
-    "description": "The `v-html` directive is similar to the `v-text` directive, but the difference is that `v-html` renders its content as HTML. This means that if you pass an HTML element it will be rendered as an element and not plain text. Since the content is render as HTML, it can pose a security risk if the content contains malicius JavaScript code. For this reason you should never use this directive in combination with user input, unless the input is first properly sanitized.\n\nExample:\n\n    <template>\n      <p v-html=\"'<h1>Text</h1>'\"></p>\n    </template>\n    \n\nVisit the following resources to learn more:",
+    "description": "The `v-html` directive is similar to the `v-text` directive, but the difference is that `v-html` renders its content as HTML. This means that if you pass an HTML element it will be rendered as an element and not plain text. Since the content is render as HTML, it can pose a security risk if the content contains malicious JavaScript code. For this reason you should never use this directive in combination with user input, unless the input is first properly sanitized.\n\nExample\n-------\n\n    <template>\n      <p v-html=\"'<h1>Text</h1>'\"></p>\n    </template>\n    \n\nVisit the following resources to learn more:",
     "links": [
       {
-        "title": "v-html documentation",
+        "title": "v-html Documentation",
         "url": "https://vuejs.org/api/built-in-directives.html#v-html",
         "type": "article"
       }
@@ -264,10 +281,10 @@
   },
   "_TlbGTKFCMO0wdLbC6xHX": {
     "title": "v-show",
-    "description": "`v-show` is similar to `v-if` in that it allows you to conditionally render components. However, it does not remove the component from the DOM and merely toggles its `display` CSS property to be `hidden`. It also does not work with `v-else-if` oe `v-else`.\n\nPrefer `v-show` over `v-if` if the component's visibility needs to change often, and `v-if` if not.\n\nVisit the following resources to learn more:",
+    "description": "`v-show` is similar to `v-if` in that it allows you to conditionally render components. However, it does not remove the component from the DOM and merely toggles its `display` CSS property to be `hidden`. It also does not work with `v-else-if` oe `v-else`. Prefer `v-show` over `v-if` if the component's visibility needs to change often, and `v-if` if not.\n\nVisit the following resources to learn more:",
     "links": [
       {
-        "title": "Vue Conditional Rendering Docs",
+        "title": "Vue Conditional Rendering",
         "url": "https://vuejs.org/guide/essentials/conditional.html#v-show",
         "type": "article"
       }
@@ -275,7 +292,7 @@
   },
   "xHj3W9Ig3MVuVlGyXchaP": {
     "title": "v-if",
-    "description": "Conditionally render an element or a template fragment based on the truthy-ness of the expression value.\n\nWhen a `v-if` element is toggled, the element and its contained directives / components are destroyed and re-constructed. If the initial condition is falsy, then the inner content won't be rendered at all.\n\nVisit the following resources to learn more:",
+    "description": "Conditionally render an element or a template fragment based on the truthy-ness of the expression value. When a `v-if` element is toggled, the element and its contained directives / components are destroyed and re-constructed. If the initial condition is falsy, then the inner content won't be rendered at all.\n\nExample\n-------\n\n    <h1 v-if=\"awesome\">Vue is awesome!</h1>\n    \n\nVisit the following resources to learn more:",
     "links": [
       {
         "title": "v-if Documentation",
@@ -289,7 +306,7 @@
     "description": "The `v-else` conditionally renders an element or a template fragment as a function in case the `v-if` does not fulfil the condition.\n\nVisit the following resources for more information:",
     "links": [
       {
-        "title": "v-else documentation",
+        "title": "v-else Documentation",
         "url": "https://vuejs.org/api/built-in-directives.html#v-else",
         "type": "article"
       }
@@ -308,10 +325,10 @@
   },
   "3ftwRjQ9e1-qDT9BV53zr": {
     "title": "v-for",
-    "description": "The `v-for` directive is used to render an HTML element, a block of elements, or even a component based on an array, an object, or a set number of times. When using this directive it is important to assign a unique key to each item to avoid issues and improve perfomance. This directive follows the `item in items` syntax.\n\nExample:\n\n    <script setup>\n      import { ref } from 'vue';\n      const foods = ref([\n        {id: 1, name: \"apple\"},\n        {id: 2, name: \"pear\"},\n        {id: 3, name: \"pizza\"}\n      ]);\n    </script>\n    \n    <template>\n      <p v-for=\"food in foods\" :key=\"food.id\">{{ food.name }}</p>\n    </template>\n    \n\nVisit the following resources to learn more:",
+    "description": "The `v-for` directive is used to render an HTML element, a block of elements, or even a component based on an array, an object, or a set number of times. When using this directive it is important to assign a unique key to each item to avoid issues and improve performance. This directive follows the `item in items` syntax.\n\nExample\n-------\n\n    <script setup>\n      import { ref } from 'vue';\n      const foods = ref([\n        {id: 1, name: \"apple\"},\n        {id: 2, name: \"pear\"},\n        {id: 3, name: \"pizza\"}\n      ]);\n    </script>\n    \n    <template>\n      <p v-for=\"food in foods\" :key=\"food.id\">{{ food.name }}</p>\n    </template>\n    \n\nVisit the following resources to learn more:",
     "links": [
       {
-        "title": "v-for documentation",
+        "title": "v-for Documentation",
         "url": "https://vuejs.org/guide/essentials/list#v-for",
         "type": "article"
       }
@@ -319,15 +336,21 @@
   },
   "hVuRmhXVP65IPtuHTORjJ": {
     "title": "v-on",
-    "description": "",
-    "links": []
+    "description": "The v-on directive is placed on an element to attach an event listener. To attach an event listener with v-on we need to provide the event type, and any modifier, and a method or expression that should run when that event occurs.\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "v-on Directive",
+        "url": "https://www.w3schools.com/vue/ref_v-on.php",
+        "type": "article"
+      }
+    ]
   },
   "cuM9q9vYy8JpZPGeBffd1": {
     "title": "v-bind",
-    "description": "The `v-bind` directive dynamically binds an HTML attribute to data.\n\nThe shorthand for this directive is `:`\n\nExample:\n\n    <script setup>\n      import { ref } from 'vue';\n      const image_url = ref(\"path/to/image.png\")\n    </script>\n    \n    <template>\n      <img :src=\"image_url\" />\n    </template>\n    \n\nVisit the following resources for more information:",
+    "description": "The `v-bind` directive dynamically binds an HTML attribute to data. The shorthand for this directive is `:`\n\nExample\n-------\n\n    <script setup>\n      import { ref } from 'vue';\n      const image_url = ref(\"path/to/image.png\")\n    </script>\n    \n    <template>\n      <img :src=\"image_url\" />\n    </template>\n    \n\nVisit the following resources for more information:",
     "links": [
       {
-        "title": "v-bind documentation",
+        "title": "v-bind Documentation",
         "url": "https://vuejs.org/api/built-in-directives.html#v-bind",
         "type": "article"
       }
@@ -357,10 +380,10 @@
   },
   "5k9CrbzhNy9iiS6ez2UE6": {
     "title": "v-once",
-    "description": "The `v-once` directive makes an HTML element render only once, skipping every future update.\n\nExample:\n\n    <script setup>\n      import { ref } from 'vue';\n      const input = ref(\"Some Text\");\n    </script>\n    \n    <template>\n      <input v-model=\"input\">\n      <p v-once>{{ input }}</p>\n    </template>\n    \n\nIn this example the **p** element will not change its text even if the input variable is changed through the **input** element.\n\nVisit the following resources to learn more:",
+    "description": "The `v-once` directive makes an HTML element render only once, skipping every future update.\n\nExample\n-------\n\n    <script setup>\n      import { ref } from 'vue';\n      const input = ref(\"Some Text\");\n    </script>\n    \n    <template>\n      <input v-model=\"input\">\n      <p v-once>{{ input }}</p>\n    </template>\n    \n\nIn this example the **p** element will not change its text even if the input variable is changed through the **input** element.\n\nVisit the following resources to learn more:",
     "links": [
       {
-        "title": "v-once documentation",
+        "title": "v-once Documentation",
         "url": "https://vuejs.org/api/built-in-directives.html#v-once",
         "type": "article"
       }
@@ -368,7 +391,7 @@
   },
   "mlsrhioiEkqnRIL6O3hNa": {
     "title": "v-pre",
-    "description": "The `v-pre` directive makes an element render its content as-is, skipping its compilation. The most common use case is when displaying raw mustache syntax.\n\nExample:\n\n    <script setup>\n      import { ref } from 'vue';\n      const text = ref(\"Some Text\")\n    </script>\n    \n    <template>\n      <p v-pre >{{ text }}</p>\n    </template>\n    \n\nThe **p** element will display: `{{ text }}` and not `Some Text` because the compilation is skipped.\n\nVisit the following resources to learn more:",
+    "description": "The `v-pre` directive makes an element render its content as-is, skipping its compilation. The most common use case is when displaying raw mustache syntax.\n\nExample\n-------\n\n    <script setup>\n      import { ref } from 'vue';\n      const text = ref(\"Some Text\")\n    </script>\n    \n    <template>\n      <p v-pre >{{ text }}</p>\n    </template>\n    \n\nThe **p** element will display: `{{ text }}` and not `Some Text` because the compilation is skipped.\n\nVisit the following resources to learn more:",
     "links": [
       {
         "title": "v-pre Documentation",
@@ -379,10 +402,10 @@
   },
   "RrSekP8Ub01coegMwLP6a": {
     "title": "v-cloak",
-    "description": "The v-cloak directive is used to prevent the uncompiled Vue template from being visible while the Vue instance is still loading. It temporarily hides the content until Vue has finished compiling the template\n\nThe v-cloak directive remains until the component instance is mounted.\n\n    <div v-cloak>\n      {{ message }}\n    </div>\n    \n\nCombined with CSS, you can hide elements with v-cloak until they are ready.\n\n    [v-cloak] {\n      display: none;\n    }\n    \n\nThe `<div>` will not be visible until the compilation is done.\n\nVisit the following resources to learn more:",
+    "description": "The v-cloak directive is used to prevent the uncompiled Vue template from being visible while the Vue instance is still loading. It temporarily hides the content until Vue has finished compiling the template. The v-cloak directive remains until the component instance is mounted.\n\n    <div v-cloak>\n      {{ message }}\n    </div>\n    \n\nCombined with CSS, you can hide elements with v-cloak until they are ready.\n\n    [v-cloak] {\n      display: none;\n    }\n    \n\nThe `<div>` will not be visible until the compilation is done.\n\nVisit the following resources to learn more:",
     "links": [
       {
-        "title": "v-cloak documentation",
+        "title": "v-cloak Documentation",
         "url": "https://vuejs.org/api/built-in-directives.html#v-cloak",
         "type": "article"
       }
@@ -393,7 +416,7 @@
     "description": "Optimizing rendering is crucial for ensuring a smooth and efficient user experience across all your frontend projects. Sluggish webpages can lead to frustration for users, and potentially cause them to entirely abandon your web application. This issue comes up most often in single-page applications (SPAs), where the entirety of your application is loaded within a single webpage, and updates to it are handled dynamically without needing a full reload of the webpage.\n\nLearn more from the following resources:",
     "links": [
       {
-        "title": "Optimizing rendering in Vue",
+        "title": "Optimizing Rendering in Vue",
         "url": "https://blog.logrocket.com/optimizing-rendering-vue/",
         "type": "article"
       }
@@ -401,8 +424,14 @@
   },
   "dxwKfBxd5KYVkfEPMdHp-": {
     "title": "Debugging",
-    "description": "",
-    "links": []
+    "description": "Debugging in Vue.js involves identifying and fixing issues in your Vue applications. It’s an essential part of the development process, and there are several tools and techniques you can use to effectively debug your Vue code.\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "Debugging Documentation",
+        "url": "https://vuejs.org/v2/cookbook/debugging-in-vscode.html",
+        "type": "article"
+      }
+    ]
   },
   "WiGG9_4G5y-AVA9byw6_g": {
     "title": "Lifecycle Hooks",
@@ -448,12 +477,18 @@
   },
   "NfB3HlZ3uwYK5xszvV50b": {
     "title": "Input Bindings",
-    "description": "",
-    "links": []
+    "description": "Input bindings are a way to bind user input to a component's data. This allows the component to react to user input and update its state accordingly. Input bindings are typically used with form elements such as text inputs, checkboxes, and select dropdowns.\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "Input Bindings",
+        "url": "https://vuejs.org/guide/essentials/forms",
+        "type": "article"
+      }
+    ]
   },
   "gMFndBcrTC6FtGryqN6dX": {
     "title": "v-model",
-    "description": "The v-model directive in Vue.js is used for creating two-way data bindings on form input elements, such as , , and . This means that the data can be updated in the component when the user inputs something, and the UI will update if the data in the component changes.",
+    "description": "The v-model directive in Vue.js is used for creating two-way data bindings on form input elements, such as `<input>`, `<textarea>`, and `<select>`. This means that the data can be updated in the component when the user inputs something, and the UI will update if the data in the component changes.",
     "links": [
       {
         "title": "Form Input Bindings",
@@ -464,8 +499,14 @@
   },
   "dSfrFLr8wKkLAOMJwtCTr": {
     "title": "Modifiers",
-    "description": "",
-    "links": []
+    "description": "Modifiers are special suffixes that can be added to directives (such as v-model and v-bind) to alter their behavior. Modifiers allow you to specify additional functionality or constraints to the binding, making it more flexible and powerful.\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "Modifiers",
+        "url": "https://v2.vuejs.org/v2/guide/components-custom-events.html",
+        "type": "article"
+      }
+    ]
   },
   "4p6Gh2fMPA8hls_mWa5HR": {
     "title": "Event Handling",
@@ -480,28 +521,63 @@
   },
   "b7iXwtUnELg_ShbCyTrNA": {
     "title": "Binding Events",
-    "description": "",
-    "links": []
+    "description": "Vue.js is an open-source Model–View–ViewModel front-end JavaScript framework for building user interfaces and single-page applications. Vue.js has many own directives for DOM manipulation such as v-bind, v-on, v-model, etc. Binding events is an essential part of creating interactive applications. You can bind events using the v-on directive or its shorthand, the @ symbol.\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "Binding Events",
+        "url": "https://vuejs.org/guide/essentials/event-handling",
+        "type": "article"
+      },
+      {
+        "title": "Vue.js Event Handling",
+        "url": "https://www.geeksforgeeks.org/vue-js-event-handling/",
+        "type": "article"
+      }
+    ]
   },
   "gVahaZNPktQuqdukFEbQH": {
     "title": "Inline / Method Handlers",
-    "description": "",
-    "links": []
+    "description": "In Vue.js, **inline handlers** are defined directly in the template using expressions, making them suitable for simple tasks. For example, you might use an inline handler to increment a counter. **Method handlers**, on the other hand, are defined in the `methods` option and are better for more complex logic or when reusing functionality across multiple components. They improve code readability and maintainability.\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "Method Handlers",
+        "url": "https://v1.vuejs.org/guide/events.html",
+        "type": "article"
+      }
+    ]
   },
   "Aaf7eA-5sbAD5Cs1MbdTQ": {
     "title": "Event Modifiers",
-    "description": "",
-    "links": []
+    "description": "In Vue.js, event modifiers are special postfixes that you can add to event handlers to control the behavior of events more easily. They help simplify common tasks such as stopping propagation, preventing default actions, and ensuring that the event is triggered only under certain conditions.\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "Event Modifiers in Vue.js",
+        "url": "https://www.freecodecamp.org/news/how-event-handling-works-in-vue-3-guide-for-devs/",
+        "type": "article"
+      }
+    ]
   },
   "BXw36wqhmi3gExXwFCIBd": {
     "title": "Key Modifiers",
-    "description": "",
-    "links": []
+    "description": "Input bindings are a way to bind user input to a component's data. This allows the component to react to user input and update its state accordingly. Input bindings are typically used with form elements such as text inputs, checkboxes, and select dropdowns.\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "Input Bindings",
+        "url": "https://vuejs.org/guide/essentials/forms",
+        "type": "article"
+      }
+    ]
   },
   "x0wl2Qz2LTP4Q2tThKAt3": {
     "title": "Mouse Button Modifiers",
-    "description": "",
-    "links": []
+    "description": "Mouse button modifiers are a type of modifier that can be used with event handlers to specify which mouse button or buttons should trigger the event. These modifiers allow you to customize the behavior of event handlers, such as v-on:click, to respond to specific mouse button clicks.\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "Button Modifiers",
+        "url": "https://medium.com/evolve-you/vue-3-keyboard-and-mouse-a4866d7d0e8",
+        "type": "article"
+      }
+    ]
   },
   "Bx1Atxcf15AEaA1BiSIc6": {
     "title": "Computed Properties",
@@ -549,12 +625,22 @@
   },
   "br1r8KIf5KInY5mk2xhA6": {
     "title": "Custom Directives",
-    "description": "So far you may have covered two forms of code reuse in Vue: [components](https://vuejs.org/guide/essentials/component-basics.html) and [composables](https://vuejs.org/guide/reusability/composables.html). Components are the main building blocks, while composables are focused on reusing stateful logic. Custom directives, on the other hand, are mainly intended for reusing logic that involves low-level DOM access on plain elements.\n\nVisit the following resources to learn more:",
+    "description": "So far you may have covered two forms of code reuse in Vue: components and composables. Components are the main building blocks, while composables are focused on reusing stateful logic. Custom directives, on the other hand, are mainly intended for reusing logic that involves low-level DOM access on plain elements.\n\nVisit the following resources to learn more:",
     "links": [
       {
         "title": "Custom Directives",
         "url": "https://vuejs.org/guide/reusability/custom-directives.html",
         "type": "article"
+      },
+      {
+        "title": "Composables",
+        "url": "https://vuejs.org/guide/reusability/composables.html",
+        "type": "article"
+      },
+      {
+        "title": "Components",
+        "url": "https://vuejs.org/guide/essentials/component-basics.html",
+        "type": "article"
       }
     ]
   },
@@ -576,7 +662,7 @@
   },
   "kdlXhbw_a81xdZtyK-pVa": {
     "title": "Watchers",
-    "description": "Computed properties allow us to declaratively compute derived values. However, there are cases where we need to perform \"side effects\" in reaction to state changes - for example, mutating the DOM, or changing another piece of state based on the result of an async operation.\n\nWith Composition API, we can use the watch function to trigger a callback whenever a piece of reactive state changes.\n\nVisit the following resources to learn more:",
+    "description": "Computed properties allow us to declaratively compute derived values. However, there are cases where we need to perform \"side effects\" in reaction to state changes - for example, mutating the DOM, or changing another piece of state based on the result of an async operation. With Composition API, we can use the watch function to trigger a callback whenever a piece of reactive state changes.\n\nVisit the following resources to learn more:",
     "links": [
       {
         "title": "Watchers in Vue.js",
@@ -623,7 +709,7 @@
     "description": "VueUse is a collection of utility functions based on Composition API. It has over 200+ functions, is tree-shakable, has first-class TypeScript support, and has a small bundle size. VueUse is a great choice for adding common utilities to your Vue 3 projects.\n\nVisit the following resources to learn more:",
     "links": [
       {
-        "title": "Official Website - VueUse",
+        "title": "VueUse",
         "url": "https://vueuse.org/",
         "type": "article"
       }
@@ -631,15 +717,26 @@
   },
   "ixRG0xfEp4BmyvCR0mtoR": {
     "title": "Routing",
-    "description": "Routing is an essential concept in Single Page Applications (SPA). When your application is divided into separated logical sections, and all of them are under their own URL, your users can easily share links among each other.",
-    "links": []
+    "description": "Routing is an essential concept in Single Page Applications (SPA). When your application is divided into separated logical sections, and all of them are under their own URL, your users can easily share links among each other.\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "Routing in Vue.js",
+        "url": "https://vuejs.org/guide/scaling-up/routing.html",
+        "type": "article"
+      },
+      {
+        "title": "The Vue Router",
+        "url": "https://router.vuejs.org/",
+        "type": "article"
+      }
+    ]
   },
   "COxkmvqe9jFtV9WtGjfbh": {
     "title": "Vue Router",
     "description": "Vue Router is the official router for Vue.js which allows creating static/dynamic routes, has support for navigation interception, allows for component based configuration and much more.\n\nVisit the following resources to learn more:",
     "links": [
       {
-        "title": "Vue Router",
+        "title": "The Vue Router",
         "url": "https://router.vuejs.org/",
         "type": "article"
       },
@@ -692,7 +789,7 @@
         "type": "opensource"
       },
       {
-        "title": "Official Website: Vee Validate",
+        "title": "Vee Website: Vee Validate",
         "url": "https://vee-validate.logaretm.com/v4/",
         "type": "article"
       }
@@ -708,7 +805,7 @@
         "type": "opensource"
       },
       {
-        "title": "Official Website: Vuelidate",
+        "title": "Vuelidate Website",
         "url": "https://vuelidate.js.org/",
         "type": "article"
       }
@@ -719,7 +816,7 @@
     "description": "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.\n\nVisit the following resources to learn more:",
     "links": [
       {
-        "title": "what is server side rendering",
+        "title": "What is Server Side Rendering (SSR)?",
         "url": "https://www.educative.io/answers/what-is-server-side-rendering",
         "type": "article"
       },
@@ -739,12 +836,7 @@
         "type": "article"
       },
       {
-        "title": "what is server side rendering?",
-        "url": "https://www.youtube.com/watch?v=GQzn7XRdzxY",
-        "type": "video"
-      },
-      {
-        "title": "What is server-side rendering for web development?",
+        "title": "What is Server Side Rendering (SSR) for Web Development?",
         "url": "https://www.youtube.com/watch?v=okvg3MRAPs0",
         "type": "video"
       }
@@ -755,7 +847,7 @@
     "description": "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.\n\nVisit the following resources to learn more:",
     "links": [
       {
-        "title": "What is a static site generator?",
+        "title": "What is a Static Site Generator?",
         "url": "https://www.cloudflare.com/learning/performance/static-site-generator/",
         "type": "article"
       },
@@ -786,7 +878,7 @@
     "description": "Quasar Framework is an open-source Vue.js based framework for building apps, with a single codebase, and deploy it on the Web as a SPA, PWA, SSR, to a Mobile App, using Cordova for iOS & Android, and to a Desktop App, using Electron for Mac, Windows, and Linux.\n\nVisit the following resources to learn more:",
     "links": [
       {
-        "title": "Official Website: Quasar",
+        "title": "Quasar",
         "url": "https://quasar.dev/",
         "type": "article"
       },
@@ -816,6 +908,11 @@
         "url": "https://nuxt.com/docs/getting-started/introduction",
         "type": "article"
       },
+      {
+        "title": "Nuxt Examples",
+        "url": "https://nuxt.com/docs/examples/essentials/hello-world",
+        "type": "article"
+      },
       {
         "title": "Get Started with Nuxt",
         "url": "https://explorers.netlify.com/learn/get-started-with-nuxt",
@@ -826,11 +923,6 @@
         "url": "https://vueschool.io/courses/nuxtjs-fundamentals",
         "type": "article"
       },
-      {
-        "title": "Nuxt Examples",
-        "url": "https://nuxt.com/docs/examples/essentials/hello-world",
-        "type": "article"
-      },
       {
         "title": "Explore top posts about JavaScript",
         "url": "https://app.daily.dev/tags/javascript?ref=roadmapsh",
@@ -843,7 +935,7 @@
     "description": "Vitepress is a static site generator that is built on top of Vite. It is a lightweight and fast static site generator that is designed to work with Vue 3. Vitepress is a great choice for building documentation sites, blogs, and other static sites.\n\nVisit the following resources to learn more:",
     "links": [
       {
-        "title": "Official Website",
+        "title": "Vitepress Website",
         "url": "https://vitepress.dev/",
         "type": "article"
       }
@@ -851,7 +943,7 @@
   },
   "LjEAviRMtPLwUUlfcof1h": {
     "title": "Vitest",
-    "description": "Vitest is a fast Vite-native unit test framework with out-of-box ESM and TypeScript support. Works on React, Vue, Svelte and more projects created with Vite\n\nVisit the following resources to learn more:",
+    "description": "Vitest is a fast Vite-native unit test framework with out-of-box ESM and TypeScript support. It Works on React, Vue, Svelte and more projects created with Vite.\n\nVisit the following resources to learn more:",
     "links": [
       {
         "title": "Vitest Website",
@@ -886,12 +978,12 @@
     "description": "Cypress framework is a JavaScript-based end-to-end testing framework built on top of Mocha – a feature-rich JavaScript test framework running on and in the browser, making asynchronous testing simple and convenient. It also uses a BDD/TDD assertion library and a browser to pair with any JavaScript testing framework.\n\nVisit the following resources to learn more:",
     "links": [
       {
-        "title": "Official Website",
+        "title": "Cypress Website",
         "url": "https://www.cypress.io/",
         "type": "article"
       },
       {
-        "title": "Official Documentation",
+        "title": "Cypress Documentation",
         "url": "https://docs.cypress.io/guides/overview/why-cypress#Other",
         "type": "article"
       },
@@ -912,7 +1004,7 @@
     "description": "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.\n\nVisit the following resources to learn more:",
     "links": [
       {
-        "title": "Official Website: Playwright",
+        "title": "Playwright Website",
         "url": "https://playwright.dev/",
         "type": "article"
       },
@@ -964,12 +1056,12 @@
     "description": "Vuetify is a Vue UI Library with beautifully handcrafted Material Components. No design skills required — everything you need to create amazing applications is at your fingertips.\n\nVisit the following resources to learn more:",
     "links": [
       {
-        "title": "Official Website",
+        "title": "Vuetify Website",
         "url": "https://vuetifyjs.com/en/",
         "type": "article"
       },
       {
-        "title": "Getting started with Vuetify",
+        "title": "Getting Started with Vuetify",
         "url": "https://vuetifyjs.com/en/getting-started/installation/",
         "type": "article"
       },
@@ -990,12 +1082,12 @@
     "description": "Element UI is another Vue.js component library with several built-in components to style your Vue.js applications.\n\nVisit the following resources to learn more:",
     "links": [
       {
-        "title": "Official Website",
+        "title": "Element UI Website",
         "url": "https://element-plus.org/en-US/",
         "type": "article"
       },
       {
-        "title": "Official Getting Started",
+        "title": "Getting Started - Element UI",
         "url": "https://element-plus.org/en-US/guide/design.html",
         "type": "article"
       }
@@ -1005,6 +1097,11 @@
     "title": "State Management",
     "description": "Application state management is the process of maintaining knowledge of an application's inputs across multiple related data flows that form a complete business transaction -- or a session -- to understand the condition of the app at any given moment. In computer science, an input is information put into the program by the user and state refers to the condition of an application according to its stored inputs -- saved as variables or constants. State can also be described as the collection of preserved information that forms a complete session.\n\nVisit the following resources to learn more:",
     "links": [
+      {
+        "title": "State Management",
+        "url": "https://vuejs.org/guide/scaling-up/state-management.html",
+        "type": "article"
+      },
       {
         "title": "What is State Management?",
         "url": "https://www.techtarget.com/searchapparchitecture/definition/state-management",
@@ -1017,7 +1114,7 @@
     "description": "Pinia is a store library for Vue.js, and can be used in Vue 2 and Vue 3, with the same API, except in SSR and its installation. It allows state sharing between pages and components around the application. As the documentation says, it is extensible, intuitive (by organization), has devtools support (in Vue.js devtools), inferred typed state even in javascript and more. In Pinia you can access, mutate, replace, use getters that works like computed, use actions, etc. The library is recommended by the official Vue.js documentation.\n\nVisit the following resources to learn more:",
     "links": [
       {
-        "title": "Official Documentation",
+        "title": "Pinia Documentation",
         "url": "https://pinia.vuejs.org/",
         "type": "article"
       },
@@ -1036,6 +1133,11 @@
         "title": "How To Make API calls in Vue.JS Applications",
         "url": "https://medium.com/bb-tutorials-and-thoughts/how-to-make-api-calls-in-vue-js-applications-43e017d4dc86",
         "type": "article"
+      },
+      {
+        "title": "How to Use RapidAPI Client with Vue.js",
+        "url": "https://rapidapi.com/guides/fetch-api-with-vue",
+        "type": "article"
       }
     ]
   },
@@ -1049,7 +1151,7 @@
         "type": "article"
       },
       {
-        "title": "Official Docs",
+        "title": "Apollo Docs",
         "url": "https://www.apollographql.com/docs/",
         "type": "article"
       },
@@ -1059,7 +1161,7 @@
         "type": "article"
       },
       {
-        "title": "Official YouTube Channel",
+        "title": "Apollo's YouTube Channel",
         "url": "https://www.youtube.com/c/ApolloGraphQL/",
         "type": "video"
       },
@@ -1072,10 +1174,10 @@
   },
   "n5IlN-wv4k0r16CvhoSpD": {
     "title": "Axios",
-    "description": "The most common way for frontend programs to communicate with servers is through the HTTP protocol. You are probably familiar with the Fetch API and the XMLHttpRequest interface, which allows you to fetch resources and make HTTP requests.\n\nAxios is a client HTTP API based on the XMLHttpRequest interface provided by browsers.\n\nVisit the following resources to learn more:",
+    "description": "Axios is a client HTTP API based on the XMLHttpRequest interface provided by browsers. The most common way for frontend programs to communicate with servers is through the HTTP protocol. You are probably familiar with the Fetch API and the XMLHttpRequest interface, which allows you to fetch resources and make HTTP requests.\n\nVisit the following resources to learn more:",
     "links": [
       {
-        "title": "Axios Getting Started",
+        "title": "Getting Started with Axios",
         "url": "https://axios-http.com/docs/intro",
         "type": "article"
       },
@@ -1093,10 +1195,10 @@
   },
   "ufnt87swK61kxShLuVc1-": {
     "title": "fetch",
-    "description": "The fetch() method in JavaScript is used to request to the server and load the information on the webpages. The request can be of any APIs that return the data of the format JSON or XML. This method returns a promise.\n\nVisit the following resources to learn more:",
+    "description": "The `fetch()` method in JavaScript is used to request to the server and load the information on the webpages. The request can be of any APIs that return the data of the format JSON or XML. This method returns a promise.\n\nVisit the following resources to learn more:",
     "links": [
       {
-        "title": "Fetch MDN Docs",
+        "title": "Fetch - MDN",
         "url": "https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch",
         "type": "article"
       },
@@ -1106,7 +1208,7 @@
         "type": "article"
       },
       {
-        "title": "Network request - Fetch",
+        "title": "Network Request - Fetch",
         "url": "https://javascript.info/fetch",
         "type": "article"
       }
@@ -1117,7 +1219,7 @@
     "description": "TanStack Query is a data fetching and caching library for Vue.js and React. It is a part of the TanStack ecosystem.\n\nVisit the following resources to learn more:",
     "links": [
       {
-        "title": "Official Website",
+        "title": "Tanstack Query Website",
         "url": "https://tanstack.com/query",
         "type": "article"
       }
@@ -1149,7 +1251,7 @@
     "description": "Since Vue.js is a web framework, it does not natively support mobile app development. So how do we get access to native mobile features such as the camera and geolocation? Ionic has an official native runtime called Capacitor. With Capacitor’s plugin, you can access the native API of the device your app is running on and build truly native mobile application with Ionic Vue.\n\nVisit the following resources to learn more:",
     "links": [
       {
-        "title": "Building cross-platform apps with Capacitor and Vue.js",
+        "title": "Building Cross-Platform Apps with Capacitor and Vue.js",
         "url": "https://blog.logrocket.com/building-cross-platform-apps-with-capacitor-and-vue-js/",
         "type": "article"
       },

src/components/AuthenticationFlow/GitHubButton.tsx

@@ -4,6 +4,7 @@ import Cookies from 'js-cookie';
 import { TOKEN_COOKIE_NAME, setAuthToken } from '../../lib/jwt';
 import { httpGet } from '../../lib/http';
 import { Spinner } from '../ReactIcons/Spinner.tsx';
+import { triggerUtmRegistration } from '../../lib/browser.ts';
 
 type GitHubButtonProps = {
   isDisabled?: boolean;
@@ -46,6 +47,8 @@ export function GitHubButton(props: GitHubButtonProps) {
           return;
         }
 
+        triggerUtmRegistration();
+
         let redirectUrl = '/';
         const gitHubRedirectAt = localStorage.getItem(GITHUB_REDIRECT_AT);
         const lastPageBeforeGithub = localStorage.getItem(GITHUB_LAST_PAGE);

src/components/AuthenticationFlow/GoogleButton.tsx

@@ -4,6 +4,10 @@ import { TOKEN_COOKIE_NAME, setAuthToken } from '../../lib/jwt';
 import { httpGet } from '../../lib/http';
 import { Spinner } from '../ReactIcons/Spinner.tsx';
 import { GoogleIcon } from '../ReactIcons/GoogleIcon.tsx';
+import {
+  getStoredUtmParams,
+  triggerUtmRegistration,
+} from '../../lib/browser.ts';
 
 type GoogleButtonProps = {
   isDisabled?: boolean;
@@ -37,6 +41,8 @@ export function GoogleButton(props: GoogleButtonProps) {
       }`,
     )
       .then(({ response, error }) => {
+        const utmParams = getStoredUtmParams();
+
         if (!response?.token) {
           setError(error?.message || 'Something went wrong.');
           setIsLoading(false);
@@ -45,6 +51,8 @@ export function GoogleButton(props: GoogleButtonProps) {
           return;
         }
 
+        triggerUtmRegistration();
+
         let redirectUrl = '/';
         const googleRedirectAt = localStorage.getItem(GOOGLE_REDIRECT_AT);
         const lastPageBeforeGoogle = localStorage.getItem(GOOGLE_LAST_PAGE);
@@ -97,9 +105,12 @@ export function GoogleButton(props: GoogleButtonProps) {
         // For non authentication pages, we want to redirect back to the page
         // the user was on before they clicked the social login button
         if (!['/login', '/signup'].includes(window.location.pathname)) {
-          const pagePath = ['/respond-invite', '/befriend', '/r', '/ai'].includes(
-            window.location.pathname,
-          )
+          const pagePath = [
+            '/respond-invite',
+            '/befriend',
+            '/r',
+            '/ai',
+          ].includes(window.location.pathname)
             ? window.location.pathname + window.location.search
             : window.location.pathname;
 

src/components/AuthenticationFlow/LinkedInButton.tsx

@@ -4,6 +4,7 @@ import { TOKEN_COOKIE_NAME, setAuthToken } from '../../lib/jwt';
 import { httpGet } from '../../lib/http';
 import { Spinner } from '../ReactIcons/Spinner.tsx';
 import { LinkedInIcon } from '../ReactIcons/LinkedInIcon.tsx';
+import { triggerUtmRegistration } from '../../lib/browser.ts';
 
 type LinkedInButtonProps = {
   isDisabled?: boolean;
@@ -45,6 +46,8 @@ export function LinkedInButton(props: LinkedInButtonProps) {
           return;
         }
 
+        triggerUtmRegistration();
+
         let redirectUrl = '/';
         const linkedInRedirectAt = localStorage.getItem(LINKEDIN_REDIRECT_AT);
         const lastPageBeforeLinkedIn = localStorage.getItem(LINKEDIN_LAST_PAGE);
@@ -97,9 +100,12 @@ export function LinkedInButton(props: LinkedInButtonProps) {
         // For non authentication pages, we want to redirect back to the page
         // the user was on before they clicked the social login button
         if (!['/login', '/signup'].includes(window.location.pathname)) {
-          const pagePath = ['/respond-invite', '/befriend', '/r', '/ai'].includes(
-            window.location.pathname,
-          )
+          const pagePath = [
+            '/respond-invite',
+            '/befriend',
+            '/r',
+            '/ai',
+          ].includes(window.location.pathname)
             ? window.location.pathname + window.location.search
             : window.location.pathname;
 

src/components/AuthenticationFlow/TriggerVerifyAccount.tsx

@@ -4,6 +4,7 @@ import { httpPost } from '../../lib/http';
 import { TOKEN_COOKIE_NAME, setAuthToken } from '../../lib/jwt';
 import { Spinner } from '../ReactIcons/Spinner';
 import { ErrorIcon2 } from '../ReactIcons/ErrorIcon2';
+import { triggerUtmRegistration } from '../../lib/browser.ts';
 
 export function TriggerVerifyAccount() {
   const [isLoading, setIsLoading] = useState(true);
@@ -26,6 +27,8 @@ export function TriggerVerifyAccount() {
           return;
         }
 
+        triggerUtmRegistration();
+
         setAuthToken(response.token);
         window.location.href = '/';
       })

src/components/FrameRenderer/ProgressNudge.tsx

@@ -1,6 +1,10 @@
 import { cn } from '../../lib/classname.ts';
 import { roadmapProgress, totalRoadmapNodes } from '../../stores/roadmap.ts';
 import { useStore } from '@nanostores/react';
+import { Calendar, Info, X } from 'lucide-react';
+import { Tooltip } from '../Tooltip.tsx';
+import { useState } from 'react';
+import { ScheduleEventModal } from '../Schedule/ScheduleEventModal.tsx';
 
 type ProgressNudgeProps = {
   resourceType: 'roadmap' | 'best-practice';
@@ -8,6 +12,11 @@ type ProgressNudgeProps = {
 };
 
 export function ProgressNudge(props: ProgressNudgeProps) {
+  const { resourceId, resourceType } = props;
+
+  const [isNudgeHidden, setIsNudgeHidden] = useState(false);
+  const [isScheduleModalOpen, setIsScheduleModalOpen] = useState(false);
+
   const $totalRoadmapNodes = useStore(totalRoadmapNodes);
   const $roadmapProgress = useStore(roadmapProgress);
 
@@ -17,52 +26,80 @@ export function ProgressNudge(props: ProgressNudgeProps) {
 
   const hasProgress = done > 0;
 
-  if (!$totalRoadmapNodes) {
+  if (!$totalRoadmapNodes || isNudgeHidden) {
     return null;
   }
 
   return (
-    <div
-      className={
-        'fixed bottom-5 left-1/2 z-30 hidden -translate-x-1/2 transform animate-fade-slide-up overflow-hidden rounded-full bg-stone-900 px-4 py-2 text-center text-white shadow-2xl transition-all duration-300 sm:block'
-      }
-    >
-      <span
-        className={cn('block', {
-          hidden: hasProgress,
-        })}
+    <>
+      {isScheduleModalOpen && (
+        <ScheduleEventModal
+          onClose={() => {
+            setIsScheduleModalOpen(false);
+          }}
+          roadmapId={resourceId}
+        />
+      )}
+      <div
+        className={
+          'fixed bottom-5 left-1/2 z-30 hidden -translate-x-1/2 transform animate-fade-slide-up flex-row gap-1.5 transition-all duration-300 lg:flex'
+        }
       >
-        <span className="mr-2 text-sm font-semibold uppercase text-yellow-400">
-          Tip
-        </span>
-        <span className="text-sm text-gray-200">
-          Right-click on a topic to mark it as done.{' '}
-          <button
-            data-popup="progress-help"
-            className="cursor-pointer font-semibold text-yellow-500 underline"
+        <div
+          className={
+            'relative overflow-hidden rounded-full bg-stone-900 px-4 py-2 text-center text-white shadow-2xl'
+          }
+        >
+          <span
+            className={cn('flex items-center', {
+              hidden: hasProgress,
+            })}
           >
-            Learn more.
-          </button>
-        </span>
-      </span>
-      <span
-        className={cn('relative z-20 block text-sm', {
-          hidden: !hasProgress,
-        })}
-      >
-        <span className="relative -top-[0.45px] mr-2 text-xs font-medium uppercase text-yellow-400">
-          Progress
-        </span>
-        <span>{done > $totalRoadmapNodes ? $totalRoadmapNodes : done}</span> of{' '}
-        <span>{$totalRoadmapNodes}</span> Done
-      </span>
+            <span className="mr-2 text-sm font-semibold uppercase text-yellow-400">
+              Tip
+            </span>
+            <span className="text-sm text-gray-200">
+              Right-click a topic to mark it as done &nbsp;
+            </span>
+          </span>
+          <span
+            className={cn('relative z-20 block text-sm', {
+              hidden: !hasProgress,
+            })}
+          >
+            <span className="relative -top-[0.45px] mr-2 text-xs font-medium uppercase text-yellow-400">
+              Progress
+            </span>
+            <span>{done > $totalRoadmapNodes ? $totalRoadmapNodes : done}</span>{' '}
+            of <span>{$totalRoadmapNodes}</span> Done
+          </span>
 
-      <span
-        className="absolute bottom-0 left-0 top-0 z-10 bg-stone-700"
-        style={{
-          width: `${(done / $totalRoadmapNodes) * 100}%`,
-        }}
-      ></span>
-    </div>
+          <span
+            className="absolute bottom-0 left-0 top-0 z-10 bg-stone-700"
+            style={{
+              width: `${(done / $totalRoadmapNodes) * 100}%`,
+            }}
+          ></span>
+        </div>
+        {resourceType === 'roadmap' && (
+          <button
+            onClick={() => {
+              setIsScheduleModalOpen(true);
+            }}
+            className="group relative flex items-center gap-2 rounded-full bg-stone-900 px-3 text-sm text-yellow-400"
+          >
+            <Calendar className="h-4 w-4 flex-shrink-0" strokeWidth={2.5} />
+          </button>
+        )}
+        <button
+          onClick={() => {
+            setIsNudgeHidden(true);
+          }}
+          className="group relative flex items-center gap-2 rounded-full bg-stone-900 px-3 text-sm text-yellow-400"
+        >
+          <X className="h-4 w-4 flex-shrink-0" strokeWidth={2.5} />
+        </button>
+      </div>
+    </>
   );
 }

src/components/PageSponsor.tsx

@@ -6,6 +6,7 @@ import { X } from 'lucide-react';
 import { setViewSponsorCookie } from '../lib/jwt';
 import { isMobile } from '../lib/is-mobile';
 import Cookies from 'js-cookie';
+import { getUrlUtmParams } from '../lib/browser.ts';
 
 export type PageSponsorType = {
   company: string;
@@ -50,6 +51,16 @@ export function PageSponsor(props: PageSponsorProps) {
   const [sponsorId, setSponsorId] = useState<string | null>(null);
   const [sponsor, setSponsor] = useState<PageSponsorType>();
 
+  useEffect(() => {
+    const foundUtmParams = getUrlUtmParams();
+
+    if (!foundUtmParams.utmSource) {
+      return;
+    }
+
+    localStorage.setItem('utm_params', JSON.stringify(foundUtmParams));
+  }, []);
+
   const loadSponsor = async () => {
     const currentPath = window.location.pathname;
     if (

src/components/ReactIcons/AppleCalendarIcon.tsx

@@ -0,0 +1,37 @@
+import type { SVGProps } from 'react';
+
+export function AppleCalendarIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      width="1736"
+      height="1693"
+      viewBox="0 0 1736 1693"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <rect width="1736" height="1693" fill="#ECEFF1" />
+      <rect x="1" width="1734" height="526" fill="#FF3D00" />
+      <path
+        d="M724.689 300.13L750.665 128H805.4L756.691 401.947H701.224L669.269 240.501L637.587 401.947H581.892L533 128H588.101L613.894 299.947L646.032 128H692.505L724.689 300.13Z"
+        fill="white"
+      />
+      <path
+        d="M976.776 283.419H890.632V356.061H992.617V401.947H835.303V128H992.206V174.069H890.632V238.812H976.776V283.419Z"
+        fill="white"
+      />
+      <path
+        d="M1024.39 401.947V128H1096.84C1128.79 128 1154.31 138.182 1173.3 158.454C1192.29 178.771 1201.97 206.623 1202.34 242.008V286.433C1202.34 322.411 1192.84 350.673 1173.8 371.219C1154.86 391.674 1128.66 401.947 1095.28 401.947H1024.39ZM1079.72 174.069V356.015H1096.29C1114.73 356.015 1127.7 351.175 1135.23 341.45C1142.76 331.725 1146.73 314.969 1147.1 291.135V243.514C1147.1 217.946 1143.49 200.094 1136.37 189.958C1129.2 179.867 1117.06 174.571 1099.85 174.069H1079.72Z"
+        fill="white"
+      />
+      <path
+        d="M831.353 1451.15H380.138V1345.95L587.348 1082.46C613.643 1045.98 632.999 1013.97 645.462 986.442C657.925 958.91 664.133 932.52 664.133 907.271C664.133 873.256 658.29 846.592 646.512 827.324C634.78 808.056 617.843 798.423 595.748 798.423C571.553 798.423 552.379 809.654 538.182 832.072C523.984 854.536 516.863 886.086 516.863 926.767H367.492C367.492 879.785 377.216 836.821 396.663 797.875C416.111 758.929 443.456 728.703 478.698 707.153C513.941 685.556 553.84 674.781 598.35 674.781C666.735 674.781 719.736 693.638 757.444 731.351C795.152 769.065 814.006 822.621 814.006 892.067C814.006 935.168 803.552 978.954 782.735 1023.29C761.872 1067.67 724.073 1122.27 669.383 1187.11L571.051 1327.55H831.353V1451.15Z"
+        fill="#424242"
+      />
+      <path
+        d="M1354.1 888.871C1354.1 926.036 1346.21 959.001 1330.41 987.766C1314.62 1016.53 1292.89 1039.5 1265.22 1056.66C1296.77 1074.56 1321.69 1099.17 1339.91 1130.58C1358.12 1161.95 1367.25 1198.89 1367.25 1241.3C1367.25 1309.33 1347.62 1363.07 1308.36 1402.52C1269.1 1441.97 1215.6 1461.69 1147.94 1461.69C1080.29 1461.69 1026.47 1441.97 986.475 1402.52C946.53 1363.07 926.535 1309.33 926.535 1241.3C926.535 1198.89 935.62 1161.9 953.88 1130.35C972.095 1098.81 997.203 1074.24 1029.11 1056.71C1001.04 1039.54 979.171 1016.58 963.376 987.811C947.58 959.047 939.683 926.128 939.683 888.916C939.683 821.936 958.445 769.521 995.971 731.625C1033.45 693.729 1083.8 674.781 1146.89 674.781C1210.71 674.781 1261.2 693.912 1298.36 732.127C1335.52 770.343 1354.1 822.576 1354.1 888.871ZM1147.94 1338.05C1170.36 1338.05 1187.66 1328.46 1199.76 1309.38C1211.85 1290.29 1217.88 1263.72 1217.88 1229.71C1217.88 1195.69 1211.58 1169.07 1198.94 1149.76C1186.29 1130.45 1168.94 1120.81 1146.89 1120.81C1124.8 1120.81 1107.36 1130.45 1094.58 1149.76C1081.79 1169.07 1075.36 1195.69 1075.36 1229.71C1075.36 1263.72 1081.75 1290.29 1094.58 1309.38C1107.36 1328.51 1125.16 1338.05 1147.94 1338.05ZM1205.78 896.724C1205.78 866.909 1200.94 843.076 1191.31 825.224C1181.68 807.326 1166.89 798.377 1146.89 798.377C1127.95 798.377 1113.57 807.052 1103.8 824.402C1093.98 841.752 1089.05 865.859 1089.05 896.724C1089.05 926.904 1093.98 951.148 1103.8 969.594C1113.61 987.994 1128.31 997.217 1147.94 997.217C1167.57 997.217 1182.14 987.994 1191.59 969.594C1201.04 951.194 1205.78 926.904 1205.78 896.724Z"
+        fill="#424242"
+      />
+    </svg>
+  );
+}

src/components/ReactIcons/FileIcon.tsx

@@ -0,0 +1,22 @@
+import type { SVGProps } from 'react';
+
+export function FileIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      x="0px"
+      y="0px"
+      width={100}
+      height={100}
+      viewBox="0 0 48 48"
+      {...props}
+    >
+      <path fill="#90CAF9" d="M40 45L8 45 8 3 30 3 40 13z" />
+      <path fill="#E1F5FE" d="M38.5 14L29 14 29 4.5z" />
+      <path
+        fill="#1976D2"
+        d="M16 21H33V23H16zM16 25H29V27H16zM16 29H33V31H16zM16 33H29V35H16z"
+      />
+    </svg>
+  );
+}

src/components/ReactIcons/GoogleCalendarIcon.tsx

@@ -0,0 +1,40 @@
+import type { SVGProps } from 'react';
+
+export function GoogleCalendarIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      x="0px"
+      y="0px"
+      width="100"
+      height="100"
+      viewBox="0 0 48 48"
+      {...props}
+    >
+      <rect width="22" height="22" x="13" y="13" fill="#fff"></rect>
+      <polygon
+        fill="#1e88e5"
+        points="25.68,20.92 26.688,22.36 28.272,21.208 28.272,29.56 30,29.56 30,18.616 28.56,18.616"
+      ></polygon>
+      <path
+        fill="#1e88e5"
+        d="M22.943,23.745c0.625-0.574,1.013-1.37,1.013-2.249c0-1.747-1.533-3.168-3.417-3.168 c-1.602,0-2.972,1.009-3.33,2.453l1.657,0.421c0.165-0.664,0.868-1.146,1.673-1.146c0.942,0,1.709,0.646,1.709,1.44 c0,0.794-0.767,1.44-1.709,1.44h-0.997v1.728h0.997c1.081,0,1.993,0.751,1.993,1.64c0,0.904-0.866,1.64-1.931,1.64 c-0.962,0-1.784-0.61-1.914-1.418L17,26.802c0.262,1.636,1.81,2.87,3.6,2.87c2.007,0,3.64-1.511,3.64-3.368 C24.24,25.281,23.736,24.363,22.943,23.745z"
+      ></path>
+      <polygon
+        fill="#fbc02d"
+        points="34,42 14,42 13,38 14,34 34,34 35,38"
+      ></polygon>
+      <polygon
+        fill="#4caf50"
+        points="38,35 42,34 42,14 38,13 34,14 34,34"
+      ></polygon>
+      <path
+        fill="#1e88e5"
+        d="M34,14l1-4l-1-4H9C7.343,6,6,7.343,6,9v25l4,1l4-1V14H34z"
+      ></path>
+      <polygon fill="#e53935" points="34,34 34,42 42,34"></polygon>
+      <path fill="#1565c0" d="M39,6h-5v8h8V9C42,7.343,40.657,6,39,6z"></path>
+      <path fill="#1565c0" d="M9,42h5v-8H6v5C6,40.657,7.343,42,9,42z"></path>
+    </svg>
+  );
+}

src/components/ReactIcons/OutlookCalendarIcon.tsx

@@ -0,0 +1,40 @@
+import type { SVGProps } from 'react';
+
+export function OutlookCalendarIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      x="0px"
+      y="0px"
+      width={100}
+      height={100}
+      viewBox="0 0 48 48"
+      {...props}
+    >
+      <path
+        fill="#1976d2"
+        d="M28,13h14.533C43.343,13,44,13.657,44,14.467v19.066C44,34.343,43.343,35,42.533,35H28V13z"
+      />
+      <rect width={14} height="15.542" x={28} y="17.958" fill="#fff" />
+      <polygon fill="#1976d2" points="27,44 4,39.5 4,8.5 27,4" />
+      <path
+        fill="#fff"
+        d="M15.25,16.5c-3.176,0-5.75,3.358-5.75,7.5s2.574,7.5,5.75,7.5S21,28.142,21,24	S18.426,16.5,15.25,16.5z M15,28.5c-1.657,0-3-2.015-3-4.5s1.343-4.5,3-4.5s3,2.015,3,4.5S16.657,28.5,15,28.5z"
+      />
+      <rect width="2.7" height="2.9" x="28.047" y="29.737" fill="#1976d2" />
+      <rect width="2.7" height="2.9" x="31.448" y="29.737" fill="#1976d2" />
+      <rect width="2.7" height="2.9" x="34.849" y="29.737" fill="#1976d2" />
+      <rect width="2.7" height="2.9" x="28.047" y="26.159" fill="#1976d2" />
+      <rect width="2.7" height="2.9" x="31.448" y="26.159" fill="#1976d2" />
+      <rect width="2.7" height="2.9" x="34.849" y="26.159" fill="#1976d2" />
+      <rect width="2.7" height="2.9" x="38.25" y="26.159" fill="#1976d2" />
+      <rect width="2.7" height="2.9" x="28.047" y="22.706" fill="#1976d2" />
+      <rect width="2.7" height="2.9" x="31.448" y="22.706" fill="#1976d2" />
+      <rect width="2.7" height="2.9" x="34.849" y="22.706" fill="#1976d2" />
+      <rect width="2.7" height="2.9" x="38.25" y="22.706" fill="#1976d2" />
+      <rect width="2.7" height="2.9" x="31.448" y="19.112" fill="#1976d2" />
+      <rect width="2.7" height="2.9" x="34.849" y="19.112" fill="#1976d2" />
+      <rect width="2.7" height="2.9" x="38.25" y="19.112" fill="#1976d2" />
+    </svg>
+  );
+}

src/components/RoadmapHeader.astro

@@ -7,6 +7,7 @@ import {
 } from 'lucide-react';
 import { TabLink } from './TabLink';
 import LoginPopup from './AuthenticationFlow/LoginPopup.astro';
+import { ScheduleButton } from './Schedule/ScheduleButton';
 import ProgressHelpPopup from './ProgressHelpPopup.astro';
 import { MarkFavorite } from './FeaturedItems/MarkFavorite';
 import { type RoadmapFrontmatter } from '../lib/roadmap';
@@ -45,8 +46,6 @@ const roadmapTitle =
   roadmapId === 'devops'
     ? 'DevOps'
     : `${roadmapId.charAt(0).toUpperCase()}${roadmapId.slice(1)}`;
-
-const hasTnsBanner = !!tnsBannerLink;
 ---
 
 <LoginPopup />
@@ -95,6 +94,12 @@ const hasTnsBanner = !!tnsBannerLink;
           className='relative top-px mr-2 text-gray-500 !opacity-100 hover:text-gray-600 focus:outline-0 [&>svg]:h-4 [&>svg]:w-4 [&>svg]:stroke-gray-400 [&>svg]:stroke-[0.4] hover:[&>svg]:stroke-gray-600 sm:[&>svg]:h-4 sm:[&>svg]:w-4'
           client:only='react'
         />
+        <ScheduleButton
+          resourceId={roadmapId}
+          resourceType='roadmap'
+          resourceTitle={title}
+          client:load
+        />
         <DownloadRoadmapButton roadmapId={roadmapId} client:idle />
         <ShareRoadmapButton
           description={description}
@@ -103,11 +108,11 @@ const hasTnsBanner = !!tnsBannerLink;
         />
       </div>
     </div>
-    <div class='mb-5 mt-5 sm:mb-8 sm:mt-5'>
-      <h1 class='mb-0.5 text-2xl font-bold sm:mb-2 sm:text-3xl'>
+    <div class='mb-5 mt-5 sm:mb-12 sm:mt-12'>
+      <h1 class='mb-0.5 text-2xl font-bold sm:mb-3.5 sm:text-5xl'>
         {title}
       </h1>
-      <p class='text-balance text-sm text-gray-500 sm:text-base'>
+      <p class='text-balance text-sm text-gray-500 sm:text-lg'>
         {description}
       </p>
     </div>
@@ -135,6 +140,7 @@ const hasTnsBanner = !!tnsBannerLink;
         text='Suggest Changes'
         isExternal={true}
         hideTextOnMobile={true}
+        isActive={false}
       />
     </div>
   </div>

src/components/Schedule/ScheduleButton.tsx

@@ -0,0 +1,40 @@
+import { Calendar } from 'lucide-react';
+import { cn } from '../../lib/classname';
+import type { ResourceType } from '../../lib/resource-progress';
+import { ScheduleEventModal } from './ScheduleEventModal';
+import { useState } from 'react';
+
+type ScheduleButtonProps = {
+  resourceId: string;
+  resourceType: ResourceType;
+  resourceTitle: string;
+};
+
+export function ScheduleButton(props: ScheduleButtonProps) {
+  const { resourceId, resourceType, resourceTitle } = props;
+
+  const [isModalOpen, setIsModalOpen] = useState(false);
+
+  return (
+    <>
+      {isModalOpen && (
+        <ScheduleEventModal
+          onClose={() => {
+            setIsModalOpen(false);
+          }}
+          roadmapId={resourceId}
+        />
+      )}
+
+      <button
+        className="inline-flex items-center justify-center gap-2 rounded-md bg-gray-200 px-3 py-1.5 text-xs font-medium hover:bg-gray-300 sm:text-sm"
+        onClick={() => {
+          setIsModalOpen(true);
+        }}
+      >
+        <Calendar className="h-4 w-4 flex-shrink-0" />
+        <span className="hidden sm:inline">Schedule Learning Time</span>
+      </button>
+    </>
+  );
+}

src/components/Schedule/ScheduleEventModal.tsx

@@ -0,0 +1,325 @@
+import { DateTime } from 'luxon';
+import { Modal } from '../Modal';
+import { ChevronRight, type LucideIcon, X } from 'lucide-react';
+import { useState, type ReactNode, type SVGProps } from 'react';
+import { GoogleCalendarIcon } from '../ReactIcons/GoogleCalendarIcon';
+import { OutlookCalendarIcon } from '../ReactIcons/OutlookCalendarIcon';
+import { AppleCalendarIcon } from '../ReactIcons/AppleCalendarIcon';
+import { FileIcon } from '../ReactIcons/FileIcon';
+
+function generateRoadmapIcsFile(
+  title: string,
+  details: string,
+  location: string,
+  startDate: Date,
+  endDate: Date,
+) {
+  const ics = `
+BEGIN:VCALENDAR
+VERSION:2.0
+BEGIN:VEVENT
+SUMMARY:${title}
+DESCRIPTION:${details}
+LOCATION:${location}
+DTSTART:${startDate.toISOString().replace(/-|:|\.\d+/g, '')}
+DTEND:${endDate.toISOString().replace(/-|:|\.\d+/g, '')}
+RRULE:FREQ=DAILY
+
+BEGIN:VALARM
+TRIGGER:-PT30M
+ACTION:DISPLAY
+DESCRIPTION:Reminder: ${title} starts in 30 minutes
+END:VALARM
+
+BEGIN:VALARM
+TRIGGER:-PT15M
+ACTION:DISPLAY
+DESCRIPTION:Reminder: ${title} starts in 15 minutes
+END:VALARM
+
+END:VEVENT
+END:VCALENDAR
+  `.trim();
+
+  return new Blob([ics], { type: 'text/calendar' });
+}
+
+type ScheduleEventModalProps = {
+  roadmapId: string;
+  onClose: () => void;
+};
+
+export function ScheduleEventModal(props: ScheduleEventModalProps) {
+  const { onClose, roadmapId } = props;
+
+  let roadmapTitle = '';
+
+  if (roadmapId === 'devops') {
+    roadmapTitle = 'DevOps';
+  } else if (roadmapId === 'ios') {
+    roadmapTitle = 'iOS';
+  } else if (roadmapId === 'postgresql-dba') {
+    roadmapTitle = 'PostgreSQL';
+  } else if (roadmapId === 'devrel') {
+    roadmapTitle = 'DevRel';
+  } else if (roadmapId === 'qa') {
+    roadmapTitle = 'QA';
+  } else if (roadmapId === 'api-design') {
+    roadmapTitle = 'API Design';
+  } else if (roadmapId === 'ai-data-scientist') {
+    roadmapTitle = 'AI/Data Scientist';
+  } else if (roadmapId === 'technical-writer') {
+  } else if (roadmapId === 'software-architect') {
+    roadmapTitle = 'Software Architecture';
+  } else if (roadmapId === 'ai-engineer') {
+    roadmapTitle = 'AI Engineer';
+  } else {
+    roadmapTitle = roadmapId
+      .split('-')
+      .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+      .join(' ');
+  }
+
+  const [selectedCalendar, setSelectedCalendar] = useState<
+    'apple' | 'outlook' | null
+  >(null);
+  const [isLoading, setIsLoading] = useState(false);
+
+  const location = `https://roadmap.sh/${roadmapId}`;
+  const title = `Learn from ${roadmapTitle} Roadmap - roadmap.sh`;
+  const details = `
+Learn from the ${roadmapTitle} roadmap on roadmap.sh
+
+Visit the roadmap at https://roadmap.sh/${roadmapId}
+  `.trim();
+
+  const handleDownloadICS = () => {
+    setIsLoading(true);
+
+    const startDate = DateTime.now().minus({
+      minutes: DateTime.now().minute % 30,
+    });
+    const endDate = startDate.plus({ hours: 1 });
+    const blob = generateRoadmapIcsFile(
+      title,
+      details,
+      location,
+      startDate.toJSDate(),
+      endDate.toJSDate(),
+    );
+
+    const url = URL.createObjectURL(blob);
+
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = `${roadmapTitle}.ics`;
+    a.click();
+
+    setIsLoading(false);
+    URL.revokeObjectURL(url);
+  };
+
+  const handleGoogleCalendar = () => {
+    setIsLoading(true);
+    const baseURL =
+      'https://calendar.google.com/calendar/render?action=TEMPLATE';
+
+    const startDate = DateTime.now().minus({
+      minutes: DateTime.now().minute % 30,
+    });
+    const endDate = startDate.plus({ hours: 1 });
+
+    const eventDetails = new URLSearchParams({
+      text: title,
+      dates: `${startDate.toISO().replace(/-|:|\.\d+/g, '')}/${endDate.toISO().replace(/-|:|\.\d+/g, '')}`,
+      details,
+      location,
+      recur: 'RRULE:FREQ=DAILY',
+    }).toString();
+
+    setIsLoading(false);
+    window.open(`${baseURL}&${eventDetails}`, '_blank');
+  };
+
+  const stepDetails = {
+    apple: {
+      title: 'Add to Apple Calendar',
+      steps: [
+        'Download the iCS File',
+        'Open the downloaded file, and it will automatically open your default calendar app.',
+        <>
+          If Apple Calendar is not your default calendar app, open Apple
+          Calendar, go to <strong>File &gt; Import</strong>, and choose the
+          downloaded file.
+        </>,
+      ],
+    },
+    outlook: {
+      title: 'Add to Outlook Calendar',
+      steps: [
+        'Download the iCS File',
+        <>
+          Open Outlook and go to{' '}
+          <strong>File &gt; Open & Export &gt; Import/Export</strong>.
+        </>,
+        <>
+          In the Import and Export Wizard select{' '}
+          <strong>Import an iCalendar (.ics) or vCalendar file (.vcs)</strong>.
+          You can then choose to keep it a separate calendar or make it a new
+          calendar.
+        </>,
+      ],
+    },
+  };
+
+  return (
+    <Modal
+      onClose={onClose}
+      bodyClassName="bg-transparent shadow-none"
+      wrapperClassName="h-auto max-w-lg"
+      overlayClassName="items-start md:items-center"
+    >
+      <div className="rounded-xl bg-white px-3">
+        <button
+          className="absolute right-4 top-4 text-gray-400 hover:text-black"
+          onClick={onClose}
+        >
+          <X className="h-4 w-4 stroke-[2.5]" />
+        </button>
+
+        <div className="flex flex-col items-center p-4 py-6 text-center">
+          {selectedCalendar && (
+            <CalendarSteps
+              title={stepDetails[selectedCalendar].title}
+              steps={stepDetails[selectedCalendar].steps}
+              onDownloadICS={handleDownloadICS}
+              onCancel={() => {
+                setSelectedCalendar(null);
+              }}
+              isLoading={isLoading}
+            />
+          )}
+
+          {!selectedCalendar && (
+            <>
+              <h2 className="text-3xl font-semibold">Schedule Learning Time</h2>
+              <p className="mt-1.5 text-balance text-base text-gray-600">
+                Block some time on your calendar to stay consistent
+              </p>
+
+              <div className="mt-6 flex w-full flex-col gap-1">
+                <CalendarButton
+                  icon={GoogleCalendarIcon}
+                  label="Google Calendar"
+                  onClick={handleGoogleCalendar}
+                  isLoading={isLoading}
+                />
+                <CalendarButton
+                  icon={AppleCalendarIcon}
+                  label="Apple Calendar"
+                  onClick={() => {
+                    setSelectedCalendar('apple');
+                  }}
+                />
+                <CalendarButton
+                  icon={OutlookCalendarIcon}
+                  label="Outlook Calendar"
+                  onClick={() => {
+                    setSelectedCalendar('outlook');
+                  }}
+                />
+
+                <div className="mx-auto my-4 text-base text-gray-600">
+                  or download the iCS file and import it to your calendar app
+                </div>
+
+                <CalendarButton
+                  icon={FileIcon}
+                  label="Download File (.ics)"
+                  onClick={handleDownloadICS}
+                />
+              </div>
+            </>
+          )}
+        </div>
+      </div>
+    </Modal>
+  );
+}
+
+type SVGIcon = (props: SVGProps<SVGSVGElement>) => ReactNode;
+
+type CalendarButtonProps = {
+  icon: LucideIcon | SVGIcon;
+  label: string;
+  isLoading?: boolean;
+  onClick: () => void;
+};
+
+function CalendarButton(props: CalendarButtonProps) {
+  const { icon: Icon, label, isLoading, onClick } = props;
+
+  return (
+    <button
+      className="flex w-full items-center justify-between gap-2 rounded-lg border px-3 py-3 leading-none hover:bg-gray-100 disabled:opacity-60 data-[loading='true']:cursor-progress"
+      data-loading={isLoading}
+      disabled={isLoading}
+      onClick={onClick}
+    >
+      <div className="flex items-center gap-2">
+        <Icon className="h-5 w-5 shrink-0 stroke-[2.5]" />
+        {label}
+      </div>
+      <ChevronRight className="h-4 w-4 stroke-[2.5]" />
+    </button>
+  );
+}
+
+type CalendarStepsProps = {
+  title: string;
+  steps: (string | ReactNode)[];
+  onDownloadICS: () => void;
+  isLoading?: boolean;
+  onCancel: () => void;
+};
+
+export function CalendarSteps(props: CalendarStepsProps) {
+  const { steps, onDownloadICS, onCancel, title, isLoading } = props;
+
+  return (
+    <div className="flex flex-col">
+      <h2 className="text-3xl font-semibold">{title}</h2>
+
+      <div className="mt-6 flex flex-col gap-2">
+        {steps.map((step, index) => (
+          <div key={index} className="flex items-baseline gap-3">
+            <div className="flex h-6 w-6 relative top-px text-sm shrink-0 items-center justify-center rounded-full bg-gray-200 text-gray-600">
+              {index + 1}
+            </div>
+            <div className="flex flex-col gap-1">
+              <p className="text-left text-base text-gray-800">{step}</p>
+            </div>
+          </div>
+        ))}
+      </div>
+
+      <div className="mt-6 flex gap-2">
+        <button
+          className="flex-1 rounded-md border hover:bg-gray-100 border-gray-300 py-2 text-sm text-gray-600 disabled:opacity-60 data-[loading='true']:cursor-progress"
+          onClick={onCancel}
+          disabled={isLoading}
+        >
+          Go back
+        </button>
+        <button
+          className="flex-1 rounded-md bg-black py-2 text-sm text-white hover:bg-blue-700 disabled:opacity-60 data-[loading='true']:cursor-progress"
+          onClick={onDownloadICS}
+          disabled={isLoading}
+          data-loading={isLoading}
+        >
+          Download
+        </button>
+      </div>
+    </div>
+  );
+}

src/components/ShareRoadmapButton.tsx

@@ -33,8 +33,6 @@ export function ShareRoadmapButton(props: ShareRoadmapButtonProps) {
     setIsDropdownOpen(false);
   });
 
-  const embedHtml = `<iframe src="https://roadmap.sh/r/embed?id=${roadmapId}" width="100%" height="500px" frameBorder="0"\n></iframe>`;
-
   return (
     <div className="relative" ref={containerRef}>
       {isEmbedModalOpen && (

src/data/changelogs/devops-project-ideas.md

@@ -0,0 +1,22 @@
+---
+title: 'DevOps Project Ideas, Team Dashboard, Redis Content'
+description: 'New Project Ideas for DevOps, Team Dashboard, Redis Content'
+images:
+  "DevOps Project Ideas": "https://assets.roadmap.sh/guest/devops-project-ideas.png"
+  "Redis Resources": "https://assets.roadmap.sh/guest/redis-resources.png"
+  "Team Dashboard": "https://assets.roadmap.sh/guest/team-dashboard.png"
+seo:
+  title: 'DevOps Project Ideas, Team Dashboard, Redis Content'
+  description: ''
+date: 2024-10-16
+---
+
+We have added 21 new project ideas to our DevOps roadmap, added content to Redis roadmap and introduced a new team dashboard for teams
+
+- Practice your skills with [21 newly added DevOps Project Ideas](https://roadmap.sh/devops)
+- We have a new [Dashboard for teams](https://roadmap.sh/teams) to track their team activity.
+- [Redis roadmap](https://roadmap.sh/redis) now comes with learning resources.
+- Watch us [interview Bruno Simon](https://www.youtube.com/watch?v=IQK9T05BsOw) about his journey as a creative developer.
+- Bug fixes and performance improvements
+
+ML Engineer roadmap and team dashboards are coming up next. Stay tuned!

src/data/guides/consistency-patterns-in-distributed-systems.md

@@ -6,7 +6,6 @@ seo:
   title: 'Consistency Patterns - roadmap.sh'
   description: 'Everything you need to know about Week, Strong and Eventual Consistency'
 isNew: false
-canonicalUrl: 'https://cs.fyi/guide/consistency-patterns-week-strong-eventual/'
 type: 'textual'
 date: 2023-01-18
 sitemap:

src/data/guides/devops-vs-full-stack.md

@@ -0,0 +1,215 @@
+---
+title: 'DevOps engineer vs Full stack developer: Which is best?'
+description: 'DevOps engineer vs Full stack developer: Compare the roles, required skills, and future prospects to make an informed career choice.'
+authorId: ekene
+excludedBySlug: '/devops/vs-full-stack'
+seo:
+  title: 'DevOps engineer vs Full stack developer: Which is best?'
+  description: 'DevOps engineer vs Full stack developer: Compare the roles, required skills, and future prospects to make an informed career choice.'
+  ogImageUrl: 'https://assets.roadmap.sh/guest/devops-engineer-vs-full-stack-developer-jccsq.jpg'
+isNew: true
+type: 'textual'
+date: 2024-10-17
+sitemap:
+  priority: 0.7
+  changefreq: 'weekly'
+tags:
+  - 'guide'
+  - 'textual-guide'
+  - 'guide-sitemap'
+---
+
+![DevOps vs Full Stack: Which suits you best?](https://assets.roadmap.sh/guest/devops-engineer-vs-full-stack-developer-jccsq.jpg)
+
+There are several roles in tech, two common ones being DevOps engineers and full stack developers. The software development industry relies heavily on full stack and DevOps development.
+
+DevOps aims at bridging the gap between developers and operation teams. This leads to an efficient and improved software delivery process.
+
+A [DevOps engineer's](https://roadmap.sh/devops) primary responsibility is creating automated processes to develop, test, deploy, and maintain software systems, while a full stack developer specializes in writing application code that covers both the user-facing side (frontend) and behind-the-scenes logic (backend).
+
+This guide explains what each role entails, addresses the motivations behind choosing either path, guides developers on choosing either path, and gives helpful tips for those who want to transition to DevOps engineering.
+
+![DevOps Process](https://assets.roadmap.sh/guest/devops-process-ajk6p.png)
+
+The key differences between DevOps engineers and full stack developers are summarized in the table below.
+
+| DevOps engineer | Full stack developer |
+|-----------------|----------------------|
+| Responsible for the smooth flow of code changes from development to production. | Focuses on end-to-end application development (both frontend and backend) |
+| Uses monitoring tools to track the performance of deployed software and also identify issues and bottlenecks in the deployment process. | Writes unit, integration, and end-to-end tests for the application code and fixes bugs related to the code. |
+| Focuses on automating processes and ensuring a software application runs reliably and flawlessly. | Handles the development of web applications or a software program (frontend and backend) |
+| Familiar with tools that aid task automation, code testing and deployments. | Has expertise in various frontend and backend programming languages |
+| Focuses more on the infrastructure management side of the whole development life-cycle, which includes managing networks and servers. | Could either focus on the frontend and backend web architectures. |
+| Has an in-depth understanding of operations to ensure optimal software delivery. | Possess a basic knowledge of operations. |
+
+## DevOps engineer or full stack developer
+
+Full stack developers specialize in web development, while DevOps engineers **focus** on the smooth integration and delivery of software components.
+
+Both roles offer great career opportunities. DevOps engineers can work in different sectors and organizations occupying different capacities.
+
+Some DevOps specializations include code release manager, automation architect, DevSecOps engineer, etc. The same applies to a full stack engineer. As a full stack developer, you can work as a [frontend](https://roadmap.sh/frontend?r=frontend-beginner) or [backend](https://roadmap.sh/frontend?r=frontend-beginner) developer.
+
+DevOps developers and full stack developers are also in high demand. According to [Statista](https://www.statista.com/statistics/1367003/in-demand-it-roles/), full stack developers and DevOps developers are among the top technical positions demanded by recruiters worldwide in 2023. Indeed reported that the average salary of a  [DevOps engineer](https://www.indeed.com/career/development-operations-engineer/salaries?from=top_sb) in the USA is $124,392, and that of a [full](https://www.indeed.com/career/full-stack-developer/salaries?from=top_sb) [](https://www.indeed.com/career/full-stack-developer/salaries?from=top_sb)[stack software developer](https://www.indeed.com/career/full-stack-developer/salaries?from=top_sb) is $124,120.
+
+Before deciding which path to follow, some introspection is encouraged, and some factors are to be considered. Some of the things to consider include:
+
+- Interest
+- Strengths
+- Willingness to continously learn new skills and technology
+
+### Interest
+
+Considering your interests before choosing which path to follow is helpful. Building a career takes time and hard work, and it is advisable to do that in something you are interested in.
+
+DevOps is probably the right choice if you are interested in automating repetitive tasks, servers and cloud management, containerization, monitoring, logging etc.
+
+On the other hand, if you are interested in writing application and domain code and enjoy seeing what you build and how users interact with applications directly and indirectly, then it is advisable to choose full stack development.
+
+### Strengths
+
+In addition to your interests, it is also helpful to consider what your strengths are. This would help you to decide what you can work on effortlessly and with less struggle.
+
+Do you find scripting easy? Are you able to grasp the complexities behind containerization and container orchestration? Do you spend more time writing infrastructure code than writing application and domain code? If your answer to these questions is yes, you should consider DevOps.
+
+Can you easily convert mock-ups to actual user interfaces? Do you find it fascinating to translate customer requirements into code? Are you able to interact with databases using SQL without much hassle? If yes, then it might be worth going for full stack development.
+
+### Willingness to continuously learn new skills and technology
+
+The DevOps and full stack fields continually evolve, and there is always something new. To be up to date, you have to be willing and open to learning constantly. This involves taking courses, reading articles, and getting updates on things happening in the tech field.
+
+Here is each role in detail to help you make a deeper consideration.
+
+## Who is a DevOps engineer?
+
+A [DevOps](https://roadmap.sh/devops) engineer who can also be referred to as a DevOps developer  is an IT professional with knowledge of development and operations. The development part involves writing codes and scripts, while the operations part includes managing on-premises and/or cloud infrastructure and system infrastructure.
+
+In traditional software development, there is the challenge of having different teams working in silos. This siloed team structure makes it challenging to collaborate amongst teams, and the priorities and timelines of each team don't align with other teams.
+
+DevOps helps to bridge the gap between development teams and operations teams. DevOps experts often work in a collaborative surrounding where they can collaborate with software engineers and IT teams.
+
+![DevOps process](https://assets.roadmap.sh/guest/devops-lifecycle-simple-9lvkw.png)
+
+DevOps has some core principles that influence the effectiveness of development and operations. Some of these DevOps principles include:
+
+- Automation of the software development lifecycle
+- Collaboration
+
+### Automation of the software development lifecycle
+
+This involves automating tests, builds, and releases of software versions, as well as tasks that can slow down the software delivery process.
+
+### Collaboration
+
+It breaks the silos across teams and enables collaboration and communication. This creates horizontal slices and enhances productivity across teams.
+
+A DevOps developer can use several programming languages for development. Some of them are [Python](https://roadmap.sh/python), Ruby, [Go](https://roadmap.sh/golang), and [Rust](https://roadmap.sh/rust). Also, bash scripts help to automate processes.
+
+Some organizations manage their own server infrastructure on-premise and deploy their applications on these servers. DevOps engineers are responsible for ensuring the servers run reliably and applications deploy successfully.
+
+Cloud computing has gained popularity, and many software applications are deployed on various cloud computing platforms. There are cloud solution providers like [Microsoft Azure](https://azure.microsoft.com/), [Amazon Web Services](https://roadmap.sh/aws), and [Google Cloud Platform](https://cloud.google.com/) who take care of the server infrastructure and are mostly more reliable than the on-premise solution. One significant benefit of the cloud solution is that it is on a pay-as-you-go basis, i.e., you pay for only the cloud resources you use.
+
+## Skills required to be a DevOps engineer
+
+DevOps engineers require soft and technical skills to succeed in their career path. The skills required include:
+
+- Knowledge of coding and scripting
+- Knowledge of operating systems
+- In-depth knowledge of containerization and orchestration
+- Basic understanding of version control
+- Understanding of monitoring, logging, and alerting systems
+- Knowledge of cloud computing
+
+### Knowledge of coding and scripting
+
+Coding and scripting are essential skills every DevOps engineer should have. These skills are typically employed to automate repetitive tasks. Some of the recommended programming/scripting languages used in DevOps include [Python](https://roadmap.sh/python), [Go](https://roadmap.sh/golang), Ruby, [Rust](https://roadmap.sh/rust), and Bash.
+
+### Knowledge of operating systems
+
+DevOps engineers should have knowledge of operating systems. One common operating system used in DevOps is [Linux](https://roadmap.sh/linux). Having the fundamental knowledge of Linux is required, as many servers are Linux based.
+
+### In-depth knowledge of containerization and orchestration
+
+DevOps engineers should know how to use containerization tools to do their jobs effectively. Some common examples of containerization and orchestration tools include [Docker](https://roadmap.sh/docker) and [Kubernetes](https://roadmap.sh/kubernetes).
+
+**Basic understanding of version control and continuous integration and deployment**
+A DevOps engineer should be able to manage and track code changes. This is done with the use of version control systems. Git is a common version control system
+
+Also, DevOps engineers should be familiar with continuous integration and deployment (CI/CD) tools that enable the automatic integration of code changes. Some common CI/CD tools are CirceCl and GitLab.
+
+### Understanding of monitoring, logging, and alerting systems
+
+Monitoring and logging are key aspects of the DevOps process, and it is expected that as a DevOps engineer, you have a good understanding of them. DevOps engineers use logging and monitoring systems to gather, analyze, and understand the system performance, and they set up alerts to be notified if the system state changes and needs to be attended to.
+
+### Knowledge of cloud computing
+
+DevOps engineers should have solid cloud computing skills. Recently, many applications have been deployed on the cloud. Third-party cloud providers mostly manage the cloud infrastructure. Some of the common cloud providers include [AWS](https://roadmap.sh/aws), Microsoft Azure, and Google Cloud Platform.
+
+## Who is a full stack developer?
+
+[Full stack developers](https://roadmap.sh/full-stack) are software developers with extensive frontend and backend development knowledge. Their role is to handle the complete web development process, from designing the user interface to building the server-side logic. 
+
+The frontend of an application includes everything the user can see and interact with, i.e., the user interface. The backend consists of the things the user doesn’t see. These include the server-side and systems supporting the business logic.
+
+Full stack coders also use DevOps tools. Depending on the project, a full stack developer may use DevOps technologies like GitHub and mongoDB to create software applications. 
+
+Let's take a look at frontend and backend development in greater detail.
+
+### Frontend development
+
+It is concerned primarily with the user interface (UI) and user experience (UX). The common languages used in frontend development include HTML, CSS, and JavaScript. HTML defines the markup of the web page. CSS builds upon HTML and represents the style and format of the webpage. JavaScript is a programming language often used for frontend development and adds logic to your web page. You'll find an excellent guide and roadmap to learning [JavaScript](https://roadmap.sh/javascript) on roadmap.sh.
+
+![Frontend development](https://assets.roadmap.sh/guest/frontend-development-common-languages-25kzq.png)
+
+There are quite a few frontend frameworks out there. Some of the common ones are [React](https://roadmap.sh/react), [Vue](https://roadmap.sh/vue), and [Angular](https://roadmap.sh/angular). For a more detailed guide, look at the [frontend beginners roadmap](https://roadmap.sh/frontend?r=frontend-beginner) or the [advanced frontend roadmap](https://roadmap.sh/frontend?r=frontend).
+
+### Backend development
+
+It focuses on the application's functionality and *business logic*. Examples of backend components include data storage, security, and handling of business logic.
+
+Backend development mainly involves creating API endpoints consumed by the application's front end. Some common backend programming languages include C#, [Java](https://roadmap.sh/java), [Rust](https://roadmap.sh/rust), [Golang](https://roadmap.sh/golang), and [Python](https://roadmap.sh/python). Check out the [backend developer](https://roadmap.sh/backend) roadmap.
+
+![Backend development](https://assets.roadmap.sh/guest/backend-programming-common-languages-oyd3s.png)
+
+## Skills required by full stack developers.
+
+The necessary technical skills to required by full stack engineers include:
+
+- Knowledge of HTML, CSS, and [JavaScript](https://roadmap.sh/javascript)/[TypeScript](https://roadmap.sh/typescript).
+- Knowledge of at least one JavaScript framework, e.g., [React](https://roadmap.sh/react), [Vue js](https://roadmap.sh/vue), [Angular](https://roadmap.sh/angular).
+- Knowledge of at least one backend language. You can transfer your knowledge of JavaScript to backend development with [Node JS](https://roadmap.sh/nodejs).
+- In-depth understanding of server-side rendering and web security.
+- Knowledge of APIs.
+- Understanding of database management systems and database architecture.
+
+## How to transition to DevOps
+
+Some fundamental knowledge and skills are required for DevOps that will certainly be helpful in the transition.  Here is a step-by-step guide for you:
+
+- If you do not already know a programming language, learn one. Some languages used in DevOps include [Python](https://roadmap.sh/python) and [Golang](https://roadmap.sh/golang). [Bash](https://www.gnu.org/software/bash/) is commonly used for scripting.
+- Learn about file systems and how to use bash to navigate through files. Also, learn to use Command-Line Interfaces (CLIs).
+- Learn about [Docker](https://roadmap.sh/docker) and [Kubernetes](https://roadmap.sh/kubernetes).
+- Learn about servers and cloud infrastructures. Some of the common cloud service providers include [AWS](https://roadmap.sh/aws), [Azure](https://azure.microsoft.com/), and [GCP](https://cloud.google.com/).
+
+For more detailed guidance, refer to roadmap.sh's DevOps [beginner](https://roadmap.sh/devops) and [advanced](https://roadmap.sh/devops?r=devops) roadmaps.
+
+## How to transition to full stack development
+
+Are you looking to transition into full stack development? Here is a handy guide:
+
+- Learn HTML, CSS, and JavaScript.
+- Learn a JavaScript framework, e.g., [React](https://roadmap.sh/react), [Vue](https://roadmap.sh/vue), [Angular](https://roadmap.sh/angular).
+- Learn a backend programming language of your choice, e.g., C#, [Python](https://roadmap.sh/python), [Java](https://roadmap.sh/java)
+- Learn a backend framework of your choice, e.g., Node.js, [ASP.NET Core,](https://roadmap.sh/aspnet-core) [Spring boot](https://roadmap.sh/spring-boot).
+- Learn database systems i.e SQL and NoSQL databases, e.g., [PostgreSQL](https://roadmap.sh/postgresql-dba), MongoDB
+
+You can refer to roadmap.sh's [full stack development roadmap](https://roadmap.sh/full-stack) for a more detailed guideline.
+
+As you've seen, becoming a DevOps engineer and full stack web developer requires several skill sets.  Full stack developers and DevOps engineers have important roles in software development but have different areas of expertise and responsibilities.
+
+Ultimately, the right choice depends on the specific needs and goals of the **software development project**.  roadmap.sh offers step-by-step guidance on how to become a [DevOps engineer](https://roadmap.sh/devops?r=devops) and a [full stack developer](https://roadmap.sh/full-stack), and by signing up, you will be able to:
+
+- Keep track of your progress and also share it on your roadmap.sh profile.
+- Collaborate on other official roadmaps.
+- Draw your roadmap, either as an individual learner or for [Dev](https://roadmap.sh/teams) [t](https://roadmap.sh/teams)[eams](https://roadmap.sh/teams).
+- [Generate new roadmaps](https://roadmap.sh/ai) with AI.

src/data/guides/frontend-vs-backend-ai.md

@@ -0,0 +1,193 @@
+---
+title: 'Frontend vs. Backend in AI Development'
+description: 'Learn the key differences between frontend and backend in AI development, from roles to tools, and how they impact project success.'
+authorId: william
+excludedBySlug: '/frontend/vs-backend-ai'
+seo:
+  title: 'Frontend vs. Backend in AI Development'
+  description: 'Learn the key differences between frontend and backend in AI development, from roles to tools, and how they impact project success.'
+  ogImageUrl: 'https://assets.roadmap.sh/guest/frontend-vs-backend-in-ai-43wtm.jpg'
+isNew: true
+type: 'textual'
+date: 2024-10-17
+sitemap:
+  priority: 0.7
+  changefreq: 'weekly'
+tags:
+  - 'guide'
+  - 'textual-guide'
+  - 'guide-sitemap'
+---
+
+![The best frontend developer skills to learn.](https://assets.roadmap.sh/guest/frontend-vs-backend-in-ai-43wtm.jpg)
+
+Many software developers begin their careers by choosing an area of focus: backend or front end development. If you're an aspiring software developer, understanding the differences between frontend and backend can help you choose a focus for your career path. This guide focuses on the [front-end](https://roadmap.sh/frontend) and [back-end](https://roadmap.sh/backend) development for AI.
+
+Frontend vs Backend is a common topic in software engineering and understanding both frontend and backend development is crucial for creating effective and efficient websites. Both are essential for a well-rounded web development process. Both career paths are in high demand.
+
+Front-end development refers to the visual elements that users can directly interact with. It is the user facing side of an application also known as the client side of an application. Back-end development includes everything the user cannot see. It focuses on the application’s overall functionality and business logic.
+
+Despite frontend and backend developers in AI having specific roles in the overall software development life cycle, they work together to design, program, test, and deploy AI applications. They collaborate to ensure AI applications meet quality and security standards. In addition to front-end and back-end developers, there are also full stack developers. Full stack developers work and specialize in both frontend and backend of web development.
+
+![Frontend vs Backend AI developers](https://assets.roadmap.sh/guest/frontend-backend-jk2nh.jpeg)
+
+The table below presents a comparison of frontend vs backend development AI specializations.
+
+| Frontend AI development                                                                              | Backend AI development                                                                                                        |
+| ---------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------- |
+| Focuses on the visual aspects of an AI application which is the UI and users directly interact with. | Focuses on the server-side development of an application which has data storage and the user does not directly interact with. |
+| Specializes in the client side of the application.                                                   | Not concerned with the client side of web applications.                                                                       |
+| The front end is about user interface (UI) and user experience (UX).                                 | Focuses on the application’s functionality and business logic.                                                                |
+| Uses HTML, CSS and JavaScript as part of the toolbox.                                                | Uses back-end programming languages like Java, C#, Python and so on.                                                          |
+
+Let’s look at frontend vs backend in detail.
+
+## What is frontend development for AI?
+
+Frontend development for AI involves the design and implementation of the visual elements of an AI application. Several AI applications are being used on a daily basis, such as Chatbots, Virtual assistants, face recognition systems, etc. A user interface (UI) enables you to interact with these applications.
+
+An AI frontend developer designs and builds the parts of an AI application that users can directly interact with. For larger projects, front-end developers will work with a digital and web designer who is responsible for creating a graphic design for the web page of the application. Frontend developers are also referred to as web developers.
+
+Frontends are also built on other platforms asides the web, such as mobile apps for Android and iOS, or desktop apps.
+
+The next section presents who a front-end developer is and the tools they use for building applications for the web.
+
+## Who is a frontend developer?
+
+A [frontend developer](https://roadmap.sh/frontend) builds the visual part of an application, which includes the parts users see and directly interact with, such as the graphical user interface (GUI) and the command line, including the design, navigation menus, texts, images, videos, etc.  A page or screen a user sees with several UI components is called a document object model (DOM).
+
+![Frontend development AI tools](https://assets.roadmap.sh/guest/frontend-ai-developer-tools-q8xnv.png)
+
+Frontend developers build these visual parts using front end programming languages such as:
+
+- HTML (Hypertext Markup Language)
+- CSS
+- JavaScript
+
+### HTML (Hypertext Markup Language):
+
+The basic building block of an application. It defines the markup of the language.
+
+### CSS (Cascading Style Sheets)
+
+Builds upon HTML and defines the layout and style of an application.
+
+### JavaScript
+
+The front-end programming language that adds logic to an application. It can be used for both the frontend and backend (NodeJs, ExpressJs, NestJS).
+
+HTML, CSS, and [JavaScript](https://roadmap.sh/javascript) are fundamental tools in a frontend developer’s toolkit and are used to determine the look and functionality of the client side of an application.
+
+In addition to these languages, there are frontend frameworks, libraries, and CSS preprocessors that help to create websites and applications efficiently. Some of the popular ones are [React](https://roadmap.sh/react), [Vue](https://roadmap.sh/vue), [Angular](https://roadmap.sh/angular), and SASS.
+
+## Front end developers responsibilities for AI
+
+The core responsibilities of AI front end developers include:
+
+- Designing and developing dashboards
+- Developing graphs and charts for data visualization
+- Integrating with AI services
+- Testing and validating the integrated AI services
+- Optimizing the user experience of AI applications
+
+### Designing and developing dashboards
+
+A dashboard conveys different but related information in an understandable format. Frontend developers are responsible for designing and developing dashboards that convey different AI data and metrics. They use design programs to lay out a dashboard prototype and ensure that the dashboards are implemented according to specifications.
+
+### Developing graphs and charts for data visualization
+
+Data visualization is an important process in AI that presents data in visual formats such as graphs and charts. Frontend AI developers use libraries such as Chart.js, Plotly, and D3.js to create graphs and charts to visualize and interpret data.
+
+### Integrating with AI services
+
+AI front end developers connect frontend applications to AI services via Application Programming Interfaces (APIs) to fetch data and predict or perform certain actions. For example, a weather application’s frontend connects to weather prediction services through API endpoints or other means of communication and displays the information users interact with.
+
+### Testing and validating integrated AI services
+
+After integrating AI services into an application, frontend AI developers also test and validate that these services function properly and provide accurate and efficient data. Testing and validation are important for identifying and resolving technical issues that might come up and for addressing optimization requirements.
+
+### Optimizing the user experience of AI applications
+
+Frontend AI developers focus on improving the user experience of software and other mobile applications by optimizing UI elements and adding features like hovering effects or tooltips, navigation flows, and application interactions. They also iterate on designs and features with UI/UX experts based on user feedback to enhance user satisfaction and produce a responsive web design.
+
+## Frontend developer skills for AI
+
+To be a frontend AI developer, you need a combination of soft and technical skills. Some of the skills you require to be a frontend AI developer include:
+
+- Deep understanding of HTML, CSS, and JavaScript/TypeScript.
+- Knowledge of at least one web application framework or library, e.g., React, Vue, and Angular.
+- Knowledge of data visualization libraries. e.g., Chart.js, Plotly.
+- Basic understanding of machine learning and machine learning models. e.g., linear regression, random forest, etc.
+- Collaboration and communication skills.
+- Problem-solving skills.
+
+## What is back end development for AI?
+
+Back end development for AI is the design and implementation of the server side of an AI application. As opposed to frontend development, which involves the visual and interactive elements of an application, backend development involves the part of an application a user cannot directly interact with. The next section goes into detail about who a back-end developer is and their role in the software development process and lifecycle.
+
+## Who is a back-end developer?
+
+A [back-end developer](https://roadmap.sh/backend) specializes in the server-side development of an AI application that users cannot see and directly interact with. A back-end developer manages the behind-the-scenes part of an application, such as the servers, databases, and machine learning models that power AI applications.
+
+![backend developer tools](https://assets.roadmap.sh/guest/ai-backend-developer-tools-nozax.png)
+
+AI back end developers use server-side programming languages such as C#, [Java](https://roadmap.sh/java), [Python](https://roadmap.sh/python), and [Rust](https://roadmap.sh/rust) and frameworks such as [Spring Boot](https://roadmap.sh/spring-boot), [ASP.NET core](https://roadmap.sh/aspnet-core), Django, and Ruby on Rails to develop the backend of AI applications.
+
+## Back end developers responsibilities for AI
+
+The responsibilities of AI back end developers include:
+
+- Database design and management
+- AI model development
+- Application Programming Interface design and development
+- Performance optimization
+
+### Database design and management
+
+Data is stored and retrieved from databases. AI deals with a large amount of data, which can be structured or unstructured. Back end developers are responsible for setting up these databases to save AI data. Two common types of databases are:
+
+- [Relational databases](https://roadmap.sh/sql) /Structured Query Language (SQL) e.g., PostgreSQL, Microsoft SQL Server
+- NoSQL databases, e.g., [MongoDB](https://roadmap.sh/mongodb).
+
+### AI model development
+
+AI models are computer programs that recognize patterns in data and make predictions. They rely heavily on trained and untrained data, and each model is suitable for different cases. Examples of AI models include:
+
+- Classification models, e.g., random forest, K-nearest neighbor, naive bayes
+- Regression models, e.g., linear regression, decision trees
+
+Backend AI developers use tools and frameworks such as Pandas, Numpy, Scikit-Learn, PyTorch, and so on to develop AI these AI models.
+
+### API design and development
+
+A backend AI developer designs and develops APIs that are consumed by the frontend of an AI application or other services. API development involves creating endpoints that provide data that users can visualize and interact with. Backend AI developers use different tools to design and document APIs; a common one is [Swagger](https://swagger.io/).
+
+### Performance optimization
+
+Backend AI developers are constantly optimizing the performance of AI applications. They do this by scaling applications to ensure the backend can handle large volumes of requests. The performance optimization involves code refactoring, optimizing database queries, adding caching, and load balancing.
+
+## Backend developer skills for AI
+
+Some of the job-ready skills needed to excel as a backend AI developer include:
+
+- In-depth knowledge of at least one back-end programming language.
+- Knowledge of database systems.
+- Basic knowledge of web servers.
+- Basic knowledge of how to deploy applications on cloud services or on-premise.
+- Knowledge of machine learning models.
+- Knowledge of data structures and algorithm
+- Knowledge of web application frameworks
+- Problem-solving and logical reasoning skills.
+- Collaboration and communication skills.
+
+## Which should I go for - frontend vs backend?
+
+As you’ve seen in the frontend vs backend comparison, frontend and backend developers who specialize in AI perform different responsibilities and require various skill sets.
+
+![Frontend vs Backend](https://assets.roadmap.sh/guest/frontend-vs-backend-development-1hox5.png)
+
+If you like user interfaces, keen on sound design, and like the visual aspects of creating apps, then perhaps you would be most interested in becoming a front end software developer. If you are more interested in servers, databases, and how systems work behind the scenes, then you should consider backend development.
+
+You can begin your frontend or backend engineering career by obtaining a bachelor’s degree in computer science degree from a college.
+
+roadmap.sh provides you with step-by-step guidance on how to become a [frontend developer](https://roadmap.sh/frontend) and [backend developer](https://roadmap.sh/backend).  You can also explore the [full stack developer roadmap](https://roadmap.sh/full-stack) if you are interested in learning full stack development, which is a combination of frontend and backend development. Signing up on roadmap.sh makes it easy to track your progress and also share it on your profile. You can also draw up your personalized roadmap or work with AI to [generate new roadmaps](https://roadmap.sh/ai).

src/data/guides/frontend-web-developer-portfolio.md

@@ -0,0 +1,298 @@
+---
+title: "Top 10 Web Developer Portfolio Templates - A Pro’s Pick"
+description: 'Build an impressive online presence with these 10 handpicked web developer portfolio templates.'
+authorId: ekene
+excludedBySlug: '/frontend/web-developer-portfolio'
+seo:
+  title: "Top 10 Web Developer Portfolio Templates - A Pro’s Pick"
+  description: 'Build an impressive online presence with these 10 handpicked web developer portfolio templates.'
+  ogImageUrl: 'https://assets.roadmap.sh/guest/roammap-18-xvyn0.jpg'
+isNew: true
+type: 'textual'
+date: 2024-10-18
+sitemap:
+  priority: 0.7
+  changefreq: 'weekly'
+tags:
+  - 'guide'
+  - 'textual-guide'
+  - 'guide-sitemap'
+---
+
+![Web developer portfolio templates and examples](https://assets.roadmap.sh/guest/roammap-18-xvyn0.jpg)
+
+As the popular saying goes, “There aren’t too many chances to make a second first impression." This is particularly important for web developers, as hiring managers and potential employers form an initial opinion of you when they see your portfolio.
+
+Given the competitive job market, web developer portfolios are even more crucial now. Beyond possessing the necessary technical and soft skills, web developers need every tool to build a strong brand perception and leave a lasting impression on recruiters.
+
+I’ll focus on some unique web developer portfolio templates and discuss what made them distinctive and a great choice for your next inspiration. This will equip you with the knowledge needed to make informed decisions about the importance of a portfolio, the features to include, and ultimately, how to choose the right template.
+
+## Top web developer portfolio examples to inspire you
+
+To save time and get started quickly, below are some carefully curated web developer portfolio examples you can adopt and customize to suit your personal brand:
+
+- Minimau
+- Stimulus
+- Lendex
+- Nichol
+- Mikon
+- Noah
+- Zyan
+- iPortfolio
+- Ethereal
+- Steve
+
+### Minimau (Premium)
+
+Minimau is a [React](https://roadmap.sh/react)-based portfolio template that is extensible, customizable, and well-documented. It is compatible with the latest version of React and Bootstrap, ensuring that your portfolio remains up-to-date with current web development practices.
+
+Here’s why you should consider Minimau as a template for your portfolio:
+
+- A grid layout with Google font and FontAwesome icon integrated.
+- Support for social media profiles.
+- **World Wide Web Consortium (W3c)**-validated with clean code and cross-browser compatibility.
+- Support for theme-switching (light theme and dark theme).
+
+[Live demo link](https://preview.themeforest.net/item/minimau-react-minimal-portfolio-template/full_screen_preview/26303041).
+
+![minimau preview](https://assets.roadmap.sh/guest/minimau-pghii.png)
+
+### Stimulus (Free)
+
+Stimulus is a great example of a well-designed HTML resume template with a metro-style block of content. Its mixture of gold, orange, and red colors is extensible and customizable. Additionally, its design is both extensible and customizable, which makes it easy for you to tailor the template to fit your personal branding and unique style.
+
+Here's why Stimulus is a great template for your portfolio:
+
+- A grid layout with unique blocks of content that you can easily use to showcase your work.
+- Fast and lightweight because of minimal dependencies.
+- Support for social media integration.
+
+[Live demo link](https://templatemo.com/tm-498-stimulus).
+
+![Stimulus preview](https://assets.roadmap.sh/guest/stimulus1-n4srr.png)
+
+### Lendex (Premium)
+
+Lendex is a unique design portfolio template with an elegant and creative design. It uses the latest version of BootStrap, which is responsive and cross-browser compatible.
+
+The structure and in-build features make it a compatible portfolio template for a front end developer, visual artist, freelance web designer, content creator, and other creatives.
+
+Here’s why you should consider Lendex as a template for your portfolio:
+
+- Support for Google Fonts and Icofont.
+- W3c-validated HTML files and cross-browser compatibility.
+- Out-of-the-box support for blogging functionality.
+- Support for embedded video player.
+
+[Live demo link](https://preview.themeforest.net/item/lendex-personal-portfolio-bootstrap-5-template/full_screen_preview/31542002).
+
+![lendex preview](https://assets.roadmap.sh/guest/lendex1-jivuj.png)
+
+### Nichol (Premium)
+
+Nichol is a well-documented portfolio built with [Vue](https://roadmap.sh/vue), TailwindCSS, and [JavaScript](https://roadmap.sh/javascript). The design is clean, modern, and fully responsive and includes NPM support to integrate desired packages.
+
+Here's why Nichol could be the ideal template for your portfolio:
+
+- Fully customizable in terms of page layout and theme switching.
+- Support for Google font, Fonts, Icofont.
+- W3c-validated HTML files and cross-browser compatibility.
+- Support for animations to enhance user experience.
+- Timeline view of education and experience.
+
+[Live demo link](https://nichol-vuejs.vercel.app/).
+
+![Nichol preview](https://assets.roadmap.sh/guest/nicho-vc283.png)
+
+### Mikon (Premium)
+
+Mikon is a creative, modern, and responsive portfolio template built with [Angular](https://roadmap.sh/angular), CSS, SCSS, and BootStrap. It is minimal, single-paged, and distinctly sectioned to show essential details at each glance.
+
+Here's why Mikon makes a great template for your portfolio:
+
+- Fully customizable with scroll spy enabled (updates navigation link based on current scroll position).
+- Support for Google font, Fonts, and Icofont.
+- W3c-validated HTML files and cross-browser compatibility.
+- Support for animations to enhance user experience.
+
+[Live demo link](https://preview.themeforest.net/item/mikon-angular-personal-portfolio-template/full_screen_preview/47436527).
+
+![Mikon preview](https://assets.roadmap.sh/guest/mikon-aqk09.png)
+
+### Noah (Free)
+
+Noah is a unique and elegant template suitable for personal web developer portfolios, personal blogs, and personal resume websites. It has an artistic look and a simple, minimal design.
+
+Here’s why you should consider Noah as a template for your portfolio:
+
+- Support for multi-page template and image slideshow.
+- Load on scroll animation.
+- Off-canvas side navigation.
+- Newsletter subscription form UI.
+
+[Live demo link](https://themewagon.com/themes/free-html5-personal-landing-page-template-noah/).
+
+![Noah preview](https://assets.roadmap.sh/guest/noah-qyycw.png)
+
+### Zyan (Premium)
+
+Zyan is a template specifically suited for creative developers looking to showcase their web development skills. It has a sleek, modern design and is fully responsive on all screens.
+
+Here’s why Zyan is worth considering as a template for your portfolio:
+
+- Custom cursor to enhance experience. 
+- Load on scroll animation for an enhanced experience.
+- Support for embedded video player.
+- Uses modern tools like GSAP, Slick Slider, FontAwesome, etc.
+
+[Live demo link](https://codeefly.net/wp/zyan/)
+
+![Zyan preview](https://assets.roadmap.sh/guest/zyan-k0g1e.png)
+
+### iPortfolio (Free)
+
+iPortfolio is a unique template that took a different approach of using a dashboard-like layout to structure the menu. Instead of the traditional approach of having the navigation menu at the top, iPortfolio puts the menu on the left side of the screen. This sidebar navigation provides a modern, streamlined look and enhances the user experience by making it easy to access different sections of your portfolio.
+
+Here’s why iPortfolio is worth considering as a template for your portfolio:
+
+- The unique sidebar layout makes the portfolio stand out.
+- Support for animation and micro-interaction to enhance the user experience.
+- Cross-browser compatibility and responsive to various screen sizes.
+
+[Live demo link](https://bootstrapmade.com/demo/iPortfolio/)
+
+![iPortolio preview](https://assets.roadmap.sh/guest/iportfolio1-hb7mf.png)
+
+### Ethereal (Free)
+
+Ethereal is a portfolio template crafted with creative developers in mind. It features a distinctive horizontal layout you can use to present your projects, case studies, and personal stories in a visually engaging and unconventional way. This layout is perfect for showcasing your work with a narrative flow.
+
+Here’s why you should consider Ethereal as a template for your portfolio:
+
+- The horizontal layout makes the portfolio stand out.
+- Dedicated sections to showcase various projects, case studies, personal stories, and other front end development skills.
+- Designed to be easily customized and extended.
+
+[Live demo link](https://html5up.net/ethereal)
+
+![Ethereal preview](https://assets.roadmap.sh/guest/ethereal1-6x21l.png)
+
+### Steve (Free)
+
+Steve is a portfolio template with a neat and clean design that is ideal for web designers, web developers, graphics designers, or similar professions. This portfolio showcases a minimalist approach that ensures that your work and skills take center stage, which provides you with a polished and professional platform to showcase your projects, experience, and personal brand.
+
+Here’s why you should consider Steve as a template for your portfolio:
+
+- A distinct call to action to capture potential employers' attention.
+- Contact form with custom validation.
+- Testimonial carousel to showcase proof of work.
+- Dedicated blog section.
+
+[Live demo link](https://technext.github.io/steve/index.html)
+
+![Steve preview](https://assets.roadmap.sh/guest/steve1-agtae.png)
+
+### Bonus: Astro themes
+
+Astro themes offer a collection of free and premium templates that you can use for your next portfolio website. They provide a wide range of options to help you build **portfolios**, landing pages, e-commerce sites, and more.
+
+Here’s why you should consider Astro themes when choosing a template for your portfolio:
+
+- Flexible option to select a template based on your preferred styling libraries or frameworks (such as TailwindCSS, PostCC, and UnoCSS)
+- A wide selection of free and premium templates to help you get started quickly
+- The ability to choose templates based on your favorite development technologies (like React, Vue, or Svelte)
+
+[Live demo link](https://astro.build/themes/?search=&categories%5B%5D=portfolio)
+
+![Astro theme](https://assets.roadmap.sh/guest/astro-m2r6h.png)
+
+Now that you have seen some of the best templates you can adopt for your portfolio, let's take a look at some of the reasons why the selected templates stood out among thousands of options.
+
+## What do top web development portfolios have in common
+
+Having a well-structured web development portfolio is crucial for showcasing your technical and web design skills to potential employers. While the template you choose may depend on factors like your intended role and work experience, all portfolios share some common elements to showcase:
+
+- Personal brand
+- Showcase skills and expertise
+- Highlight live projects and contribution
+- Build credibility
+- Networking and opportunities
+
+1. **Personal brand**: The portfolio should have a personal bio or summary that gives a clear representation of who the developer is.
+
+2. **Showcase skills and expertise**: The portfolio should highlight the owner's competencies. Demonstrates proficiency in various technologies, frameworks, libraries, and tools used in [frontend](https://roadmap.sh/frontend) or [backend](https://roadmap.sh/backend) development. In addition, consider showcasing your professional certifications, companies worked for, and years of experience.
+
+3. **Highlight project and contribution**: The portfolio should contain work or project sections to demonstrate real-world impact. It can also include community engagement, like open source projects, technical writing, and public speaking.
+
+4. **Build credibility**: Web developer portfolios are one of the best ways to build brand and credibility. They allow you to showcase your professional image, provide proof of your work, and share testimonials from colleagues or previous clients.
+
+5. **Networking and opportunities**: Portfolios are a great marketing tool for crafting a unique online presence and increasing visibility. They are useful during your job applications because they help you stand out to potential employers and are also ideal for showcasing the latest personal projects on professional networks like LinkedIn.
+
+With the opportunities offered by a portfolio, it can sometimes become overwhelming to decide what to add and how to structure it, especially if you have extensive experience in frontend development, backend, and other web development areas. Let’s look at these aspects in detail.
+
+## What makes a developer’s portfolio stand out from the rest?
+
+A well-crafted developer’s portfolio is important for showcasing your technical skills and experience. We can narrow it down to essential features that every portfolio must have, and optional features that can help you stand out when applying for jobs or bidding on projects.
+
+### Essential features
+
+- **Introductory and About Me section**: This section should include a brief introduction about yourself, your background, and your expertise. It’s also a great place to include your name, location, and any other interesting details about yourself.
+
+- **Skills and technologies section**: This section shows the different skills and proficiencies, such as crafting responsive designs, enhancing user experience, building APIs, and managing databases. It can also include programming languages, frameworks, databases, and other specialized skills.
+
+- **Project section**: This section highlights your best work and can include demo links, GitHub links, screenshots, project overview, technologies used, and any other essential details.
+
+- **Experience section**: This section shows your work history and highlights what you have done, including the timeline.
+
+- **Contact section:** One of the main goals of having a portfolio is to attract potential clients or employers. It is crucial for anyone looking at your portfolio to easily contact you using any of the mediums like contact forms, email addresses, or social media links (like GitHub profiles, LinkedIn, or any other relevant links).
+
+### Optional features
+
+- **Theming**: Your portfolio can contain a theme switcher (dark and light modes) and color schemes to further personalize the visitors' experience.
+
+- **Engaging animations** and engaging design can further enhance the visitor's experience, making your own portfolio stand out.
+
+- **Testimonials**: References and appraisals from clients, colleagues, or managers that validate your skills and work ethic might be a valuable addition to your portfolio.
+
+- **Blog**: Including guides, articles, blog posts, and other written content can help establish you as a thought leader and demonstrate your expertise and passion for the field, which can then boost your portfolio.
+
+## What are the criteria for choosing a web developer portfolio template?
+
+The number of templates available can be overwhelming, especially considering that more developers are open-sourcing their work. Questions like "**Should I clone a template and modify it?"**, **"Is accessibility and Search Engine Optimization (SEO) support available?"** **"Should I use a website builder?"** and many more may arise.
+
+In this section, we will look at best practices and tips that will help you make the right decision. Here are the points to consider:
+
+- Design and aesthetics
+- Content layout
+- Technical features
+- Compatibility
+- Cost and licensing
+- User experience
+
+### Design and aesthetics
+
+The template should have a clean, modern, and professional design that captures your brand with consistent elements across all pages. Additionally, visual elements, such as colors, fonts, layouts, images, etc., should be customizable.
+
+### Content layout
+
+The portfolio template should have a dedicated section to easily access contact information, learn more about you, and showcase your work experience.
+
+### Technical features
+
+The template should have good SEO support, follow accessibility guidelines, be compatible with all major browsers, and support Open Graph tags (information previews) when shared on social media.
+
+### Compatibility
+
+If you intend to manage your portfolio content with a **Content Management System (CMS)**, leverage web development-specific libraries, or use cloud-based media storage to optimize media, choosing a template compatible with and supports desired tools and technologies is important.
+
+### Cost and licensing
+
+Ensure that the template you intend to use allows you to use it freely as you wish. Additionally, consider your budget, as templates range from free to premium.
+
+### User experience
+
+The template should be well-structured with a good sitemap, excellent information architecture, and intuitive navigation. It should also be responsive (like mobile devices) and have good loading speed.
+
+Your personal portfolio usually crafts the first impression for potential employers and clients. Investing time in creating a well-designed, structured, and user-friendly portfolio that captures your experience is important.
+
+Additionally, web developer portfolios are not a one-time effort. They require constant updates on your latest projects. The [roadmap.sh](https://roadmap.sh)’s [frontend development](https://roadmap.sh/frontend) and [backend development](https://roadmap.sh/backend) roadmaps are valuable resources to keep your skills up to date, whether as a frontend developer, backend developer, or full stack developer. Additionally, you can track your learning paths and connect with a vibrant community by [signing up](https://roadmap.sh/signup) on the [roadmap.sh](http://roadmap.sh) platform.

src/data/guides/full-stack-vs-backend.md

@@ -0,0 +1,183 @@
+---
+title: 'Full stack vs Back end: What are the differences?'
+description: 'Full-stack vs Back-end: Learn the key differences in skills, roles, and technologies and find the right development path for you.'
+authorId: william
+excludedBySlug: '/full-stack/vs-backend'
+seo:
+  title: 'Full stack vs Back end: What are the differences?'
+  description: 'Full-stack vs Back-end: Learn the key differences in skills, roles, and technologies and find the right development path for you.'
+  ogImageUrl: 'https://assets.roadmap.sh/guest/full-stack-vs-backend-y0i1g.jpg'
+isNew: true
+type: 'textual'
+date: 2024-10-17
+sitemap:
+  priority: 0.7
+  changefreq: 'weekly'
+tags:
+  - 'guide'
+  - 'textual-guide'
+  - 'guide-sitemap'
+---
+
+![Key differences between full stack vs backend developers](https://assets.roadmap.sh/guest/full-stack-vs-backend-y0i1g.jpg)
+
+Thinking about getting into web development? You've probably heard job titles like full stack developer, backend developer, frontend developer, design engineer, and many more.
+
+Let's focus on two great options: **full stack** and **backend development**. Both are rewarding paths if you want to build websites and apps. These roles work together to create the websites and apps you use every day on the internet.
+
+While each role works towards the common goal of creating an application that users can access from anywhere via the Internet, they differ in their responsibilities. Understanding these differences is important, whether your goal is to pick up a new skill, change career path, or secure a job.
+
+This guide provides an in-depth discussion of the key differences between [full stack](https://roadmap.sh/full-stack) and [backend](https://roadmap.sh/backend) development, what they entail, their similarities, and the web ecosystem changes. Finally, it offers roadmaps for your full stack or backend journey.
+
+The table below summarizes the major differences:
+
+| Full stack Development | Back end Development |
+|------------------------|----------------------|
+| Build both the client-side (frontend) and server-side (backend) of the application. | Specializes only on the server-side of the application. |
+| Uses frontend and backend languages such as HTML, CSS, JavaScript, Java, PHP, etc. | Proficient only in backend programming languages like Python, C++, Java, etc. |
+| Responsible for frontend web development tasks such as crafting responsive web design, enhancing user experience, and ensuring accessibility, as well as backend development tasks like managing databases, implementing security measures, caching, and writing APIs. | Responsible for only the server-side logic like managing database, security, caching, and writing APIs. |
+| Have the highest earning potential. | Lower earning potential as compared to full stack development. |
+| Uses libraries and frameworks that work on the client or server, or both. | Uses libraries and frameworks that work only on the server. |
+| Most challenging to learn as it involves combining frontend and backend development | Relatively easier to learn as compared to Full stack as it focuses only on the backend development |
+| Highest number of jobs available | Lower number of jobs as compared to full stack development |
+
+Let's look at the differences in detail.
+
+## Differences between Full stack and Backend development
+
+These are the key differences between full stack and backend discussed under the following criteria:
+
+- Focus
+- Roles and ownership
+- Technologies
+- Skill sets
+- Salary and job opening
+- Learning curve
+
+![full stack vs backend](https://assets.roadmap.sh/guest/differences-between-full-stack-and-back-end-development-ms2vk.png)
+
+## Focus
+
+The primary focus of a full stack developer is to develop both the client-side and the server side of a web application, while backend development focuses solely on the server side.
+
+## Roles and ownership
+
+Full stack development entails broader ownership and responsibility, covering both frontend and backend technological aspects of the application. In contrast, backend development's ownership and responsibilities are confined to the server side.
+
+## Technologies
+
+A Full stack web developer has a broader skill set covering both frontend and backend technologies. This includes markup languages like HTML and CSS, and scripting languages such as JavaScript, Python, and Java, and frameworks like React, Vue, Django, [Spring Boot](https://roadmap.sh/spring-boot), and Laravel.
+
+Similarly, backend development utilizes server-side programming languages like Python, Ruby, Java, JavaScript (Node.js), and Go, along with frameworks such as Django, Ruby on Rails, Express.js, and Gin-gonic.
+
+## Skill sets
+
+A full stack developer has a wide range of skills that encompass both frontend and backend principles. They can work on user interface design, human-computer interaction, and client-side security, caching, queues, and system design. While full stack developers can touch all elements of an application, backend developers typically have deeper expertise in backend principles due to their focused specialization.
+
+## Salary and job opening
+
+Based on reviews of popular job posting platforms like LinkedIn, Indeed, and Glassdoor, Full stack developers have more job openings and higher average salaries as compared to backend developers.
+
+## Learning curve
+
+Backend development is relatively easier to learn because its core focus is on backend languages, libraries, frameworks, and other server-side development. In contrast,  full stack development combines both frontend and backend development, making it more challenging to learn.
+
+While the points above cover the fundamental differences between full stack and backend development, it's worth noting that their roles and responsibilities can also vary depending on factors such as the organization, industry, and project scope.
+
+Understanding each role and its responsibility is important. Let's look at those next.
+
+## What is Full stack development?
+
+The term "Full stack" refers to a developer who knows both the frontend and the backend of a web application. Full stack developers are versatile enough to handle all aspects of a web project, from constructing dynamic user interfaces that users can see and interact with to managing the server-side logic, database, and server management.
+
+The following are some of the key aspects of full stack development:
+
+- Frontend technologies
+- Backend technologies
+- Application Programming Interfaces (API) design
+- Database
+- Deployment
+- Security
+- Adaptability
+
+## Frontend technologies
+
+A deep understanding of frontend popular languages like HTML, CSS, and [JavaScript](https://roadmap.sh/javascript) is fundamental for building robust and scalable applications. Additionally, as a frontend developer, expertise in determining when and how to utilize frontend development frameworks and libraries like [React](https://roadmap.sh/react), [Vue](https://roadmap.sh/vue), [Angular](https://roadmap.sh/angular), and others is crucial for crafting dynamic applications that are responsive, accessible, and compatible across various browsers.
+
+![html css and javascript](https://assets.roadmap.sh/guest/frontend-development-common-languages-25kzq.png)
+
+## Backend technologies
+
+Proficiency in server-side languages such as [Java](https://roadmap.sh/java), [JavaScript (Node.js)](https://roadmap.sh/nodejs), [Python](https://roadmap.sh/python), C#, [Go](https://roadmap.sh/golang), [Rust](https://roadmap.sh/rust), and their respective frameworks and libraries is essential for constructing scalable and robust services. Backend developers work behind the scenes, building the software required for the website and application user interface to be fully functional.
+
+![Back end technologies](https://assets.roadmap.sh/guest/backend-programming-common-languages-oyd3s.png)
+
+## Application Programming Interfaces (API) design
+
+A [solid understanding](https://roadmap.sh/api-design) of designing, building, and implementing APIs is essential in full stack development. Additionally, knowing when to adopt different API protocols like REST, [GraphQL](https://roadmap.sh/graphql), WebSocket, and gRPC ([Google Remote Procedure Call](https://grpc.io/)) is also important.
+
+![API design](https://assets.roadmap.sh/guest/application-programming-interfaces-design-dybns.png)
+
+## Database
+
+Determining whether to utilize a relational database management system like [PostgreSQL](https://roadmap.sh/postgresql-dba) or a non-relational database like [MongoDB](https://roadmap.sh/mongodb), opt for stored procedures, or an object-relational mapping (ORM) for data management are important decisions a full stack developer must address. Additionally, a good understanding of designing schemas and optimizing queries is also important.
+
+![Relational vs Non-Relational Database](https://assets.roadmap.sh/guest/relational-vs-non-relational-database-k4mwi.png)
+
+## Deployment
+
+The essence of building an application is to ensure that the target users can access it without restrictions and utilize it as intended. Full stack developers should understand deployment strategies and cloud platforms like [AWS](https://roadmap.sh/aws), Azure, and Google Cloud.
+
+![Clouds deployment — AWS vs Azure vs GCP](https://assets.roadmap.sh/guest/clouds-deployment-nhvx3.png)
+
+## Security
+
+Exposing the application to the internet makes it susceptible to attacks. Therefore, familiarity with [security best practices](https://roadmap.sh/best-practices/api-security) and vulnerabilities is crucial to ensuring the integrity and safety of these applications.
+
+![Web Security](https://assets.roadmap.sh/guest/web-security-6r9gg.png)
+
+## Adaptability
+
+Open-source and research activities have constantly changed the web development ecosystem. Full stack developers must be willing to learn new technologies, know when to build from scratch or use third-party solutions, and adapt to changing project requirements.
+
+## What is Backend development?
+
+Unlike full stack development, which combines the roles of frontend developers and backend developers to build applications, backend web development focuses solely on the server side. Backend developers handle tasks that occur behind the scenes and are not directly visible to users, including managing data, executing complex logic, and managing databases.
+
+Backend development is divided into the presentation layer(which handles requests and responses), the business layer(which handles logic like calculation and data processing), and the data access layer (which handles database interactions). It uses server-side technologies similar to a full stack developer.
+
+## Similarities between Full stack and Backend development
+
+Full stack and backend development share several similarities as they both work on the server side of the application. Below are some key similarities in the web development process between full stack and backend:
+
+- Both work on server-side functionality, such as business logic, database interaction, and data processing.
+- Design and implement APIs to facilitate communication between software components.
+- Both ensure the security and integrity of user data.
+- Collaborate with other team members and business stakeholders to ensure project success.
+- Both handle errors, edge cases, and other difficult technical aspects of the application.
+- Both are involved in designing and architecting scalable systems.
+## Web development in the modern era: Full stack vs Backend
+
+While the web's possibilities are exciting and fascinating, they have also changed the roles and responsibilities of developers building applications for it. Let's consider the points below as a case study of how these changes might affect full stack and backend development:
+
+## Collaboration
+
+While full stack development's role and responsibilities are collaborative in nature compared to the specialized focus of backend development, the current innovative trend will further heighten the demand for collaboration. Full stack developers will increasingly collaborate with various stakeholders to build performant and dynamic applications. This may also require backend developers to expand their role beyond their traditional domain.
+
+![Collaboration](https://assets.roadmap.sh/guest/collaboration-7sg14.png)
+
+## Versatility
+
+As the web offers more opportunities, organizations will migrate their core applications from native platforms to web-based solutions, necessitating developers to embrace versatility and acquire new skills.
+
+For full stack web developers who already navigate both frontend and backend development fields, they are well-positioned to adapt to changing demands by acquiring additional skills to meet business needs and project requirements. Similarly, backend developers may need to adjust their roles and embrace expanded responsibilities that extend beyond their domain-specific tasks to leverage the possibilities presented by this transition fully.
+
+![Versatility](https://assets.roadmap.sh/guest/versatility-surv2.png)
+
+## Job role
+
+The new possibilities offered by the web will undoubtedly reshape job descriptions and shift the required skills of developers building for the web. Full stack and backend developer in the tech industry may need to evaluate their career goals, upskill, and embrace these changes to remain competitive and build dynamic solutions.
+
+The possibilities offered by the web, coupled with evolving business requirements, require developers to upskill and stay updated continuously with the latest changes. A reliable source of truth is important for this journey. The [full](https://roadmap.sh/full-stack) [](https://roadmap.sh/full-stack)[stack development](https://roadmap.sh/full-stack) and [backend development](https://roadmap.sh/backend) roadmap are valuable resources for experienced and beginner developers looking to explore a career in web development.
+
+Additionally, these roadmaps allow you to track your progress, showcase your skills to potential employers, and become [part of a supportive communit](https://discord.com/invite/cJpEt5Qbwa)[y](https://discord.com/invite/cJpEt5Qbwa).

src/data/guides/how-to-become-frontend-developer.md

@@ -7,7 +7,7 @@ seo:
   title: 'How to become a Front-End Developer in 7 Steps'
   description: 'Learn how to become a front-end developer in 7 clear steps. Start your coding journey with practical tips and resources today!'
   ogImageUrl: 'https://assets.roadmap.sh/guest/how-to-become-frontend-developer-i23nx.jpg'
-isNew: true
+isNew: false
 type: 'textual'
 date: 2024-08-15
 sitemap:

src/data/projects/age-calculator.md

@@ -0,0 +1,42 @@
+---
+title: Age Calculator
+description: Create an age calculator using HTML, CSS, and JavaScript.
+isNew: true
+sort: 19
+difficulty: 'beginner'
+nature: 'Frontend'
+skills:
+  - 'HTML'
+  - 'CSS'
+  - 'JavaScript'
+  - 'DOM Manipulation'
+  - 'Package Management'
+seo:
+  title: Build an Age Calculator App with JavaScript
+  description: Create an age calculator using HTML, CSS, and JavaScript.
+  keywords:
+    - 'age calculator'
+    - 'frontend project idea'
+    - 'luxon date manipulation'
+    - 'javascript datepicker'
+roadmapIds:
+  - 'frontend'
+---
+
+The goal of this project is to help you learn about how to use external packages using [npm](https://www.npmjs.com/). The user inputs their birthdate via a [JavaScript Datepicker](https://www.npmjs.com/package/js-datepicker), and the app calculates and displays their exact age, including years, and months using [Luxon](https://www.npmjs.com/package/luxon).
+
+![Age Calculator](https://assets.roadmap.sh/guest/age-calculator-do1un.png)
+
+## Requirements
+
+You are required to develop an age calculator with the following features:
+
+- A form that allows users to input their birthdate using a JavaScript datepicker (avoid the default HTML date picker)
+- Use the [Luxon](https://www.npmjs.com/package/luxon) library to calculate the exact age in years, months, and days
+- Display the result on the same page after the user submits the form
+- Implement basic validation to ensure the birthdate is valid
+- Use simple styling to make the calculator visually appealing and responsive
+
+<hr />
+
+This project will help you understand how to manipulate dates and times in JavaScript using [Luxon](https://www.npmjs.com/package/luxon). You'll gain experience handling user input via a datepicker, performing date calculations, and designing a simple user interface.

src/data/projects/caching-server.md

@@ -22,6 +22,7 @@ roadmapIds:
   - 'java'
   - 'golang'
   - 'spring-boot'
+  - 'cpp'
 ---
 
 You are required to build a CLI tool that starts a caching proxy server, it will forward requests to the actual server and cache the responses. If the same request is made again, it will return the cached response instead of forwarding the request to the server.

src/data/projects/custom-dropdown.md

@@ -1,23 +1,23 @@
 ---
-title: 'Custom Dropdown'  
-description: 'Create a custom dropdown using HTML, CSS, and JavaScript.'  
-isNew: false  
-sort: 19
-difficulty: 'intermediate'  
-nature: 'JavaScript'  
-skills:  
-  - 'HTML'  
-  - 'CSS'  
-  - 'JavaScript'  
-  - 'DOM Manipulation'  
-seo:  
-  title: 'Build a Custom Dropdown Menu with JavaScript'  
-  description: 'Learn how to create a fully customizable dropdown menu that allows users to select an item and see the selection reflected in the dropdown.'  
-  keywords:  
+title: 'Custom Dropdown'
+description: 'Create a custom dropdown using HTML, CSS, and JavaScript.'
+isNew: false
+sort: 20
+difficulty: 'intermediate'
+nature: 'JavaScript'
+skills:
+  - 'HTML'
+  - 'CSS'
+  - 'JavaScript'
+  - 'DOM Manipulation'
+seo:
+  title: 'Build a Custom Dropdown Menu with JavaScript'
+  description: 'Learn how to create a fully customizable dropdown menu that allows users to select an item and see the selection reflected in the dropdown.'
+  keywords:
     - 'custom dropdown'
     - 'javascript dropdown'
-    - 'html and css'  
-roadmapIds:  
+    - 'html and css'
+roadmapIds:
   - 'frontend'
 ---
 
@@ -27,4 +27,4 @@ Given below is the mockup showing the dropdown in its default, open, and selecte
 
 [![Custom Dropdown](https://assets.roadmap.sh/guest/dropdown-1f4b3.png)](https://assets.roadmap.sh/guest/dropdown-1f4b3.png)
 
-This project will help you practice DOM manipulation, event handling, and creating responsive and interactive elements with JavaScript.
+This project will help you practice DOM manipulation, event handling, and creating responsive and interactive elements with JavaScript.

src/data/projects/database-backup-utility.md

@@ -22,6 +22,7 @@ roadmapIds:
   - 'java'
   - 'golang'
   - 'spring-boot'
+  - 'cpp'
 ---
 
 You are required to build a command-line interface (CLI) utility for backing up any type of database. The utility will support various database management systems (DBMS) such as MySQL, PostgreSQL, MongoDB, SQLite, and others. The tool will feature automatic backup scheduling, compression of backup files, storage options (local and cloud), and logging of backup activities.

src/data/projects/expense-tracker.md

@@ -23,6 +23,7 @@ roadmapIds:
   - 'java'
   - 'golang'
   - 'spring-boot'
+  - 'cpp'
 ---
 
 Build a simple expense tracker application to manage your finances. The application should allow users to add, delete, and view their expenses. The application should also provide a summary of the expenses.

src/data/projects/flash-cards.md

@@ -0,0 +1,39 @@
+---
+title: Flash Cards
+description: Create a flash card app using JavaScript frameworks.
+isNew: true
+sort: 20
+difficulty: 'beginner'
+nature: 'Frontend'
+skills:
+  - 'HTML'
+  - 'CSS'
+  - 'JavaScript'
+  - 'JavaScript Frameworks'
+seo:
+  title: Build a Flash Cards App
+  description: Create a flash card app using JavaScript frameworks
+  keywords:
+    - 'flash cards'
+    - 'frontend project idea'
+    - 'javascript frameworks'
+roadmapIds:
+  - 'frontend'
+---
+
+The goal of this project is to help you learn about how to use state management and component-based architecture using JavaScript frameworks. You will build a flash card app with pre-defined JavaScript questions and answers that users can flip through to test their knowledge.
+
+![Flash Cards](https://assets.roadmap.sh/guest/flash-cards-crzw6.png)
+
+## Requirements
+
+You are required to develop a flash cards app with the following features:
+
+- Pre-defined flashcards with questions and answers
+- Progress bar to show the user's progress
+- Ability to view flashcards one at a time and flip to reveal the answer
+- Simple navigation to cycle through the flashcards
+
+<hr />
+
+This project will help you understand how to manage state and create reusable components. You can use any framework of your choice, such as React, Angular, or Vue.js, to build this project.

src/data/projects/github-user-activity.md

@@ -22,6 +22,7 @@ roadmapIds:
   - 'java'
   - 'golang'
   - 'spring-boot'
+  - 'cpp'
 ---
 
 In this project, you will build a simple command line interface (CLI) to fetch the recent activity of a GitHub user and display it in the terminal. This project will help you practice your programming skills, including working with APIs, handling JSON data, and building a simple CLI application.

src/data/projects/number-guessing-game.md

@@ -22,6 +22,7 @@ roadmapIds:
   - 'java'
   - 'golang'
   - 'spring-boot'
+  - 'cpp'
 ---
 
 You are required to build a simple number guessing game where the computer randomly selects a number and the user has to guess it. The user will be given a limited number of chances to guess the number. If the user guesses the number correctly, the game will end, and the user will win. Otherwise, the game will continue until the user runs out of chances.

src/data/projects/task-tracker.md

@@ -22,6 +22,7 @@ roadmapIds:
   - 'java'
   - 'golang'
   - 'spring-boot'
+  - 'cpp'
 ---
 
 Task tracker is a project used to track and manage your tasks. In this task, you will build a simple command line interface (CLI) to track what you need to do, what you have done, and what you are currently working on. This project will help you practice your programming skills, including working with the filesystem, handling user inputs, and building a simple CLI application.

src/data/roadmaps/ai-data-scientist/ai-data-scientist.md

@@ -5,7 +5,7 @@ order: 5
 renderer: 'editor'
 briefTitle: 'AI and Data Scientist'
 briefDescription: 'Step by step guide to becoming an AI and Data Scientist in 2024'
-title: 'AI and Data Scientist Roadmap'
+title: 'AI and Data Scientist'
 description: 'Step by step guide to becoming an AI and Data Scientist in 2024'
 hasTopics: true
 isNew: false

src/data/roadmaps/ai-engineer/ai-engineer.md

@@ -5,7 +5,7 @@ order: 4
 renderer: 'editor'
 briefTitle: 'AI Engineer'
 briefDescription: 'Step by step guide to becoming an AI Engineer in 2024'
-title: 'AI Engineer Roadmap'
+title: 'AI Engineer'
 description: 'Step by step guide to becoming an AI Engineer in 2024'
 hasTopics: true
 isNew: true

src/data/roadmaps/ai-engineer/content/agents-usecases@778HsQzTuJ_3c9OSn5DmH.md

@@ -4,6 +4,6 @@ AI Agents have a variety of usecases ranging from customer support, workflow aut
 
 Visit the following resources to learn more:
 
-- [@article@Top 15 Use Cases Of AI Agents In Business](https://www.ampcome.com/post/15-use-cases-of-ai-agents-in-business)
+-[@article@Top 15 Use Cases Of AI Agents In Business](https://www.ampcome.com/post/15-use-cases-of-ai-agents-in-business)
 -[@article@A Brief Guide on AI Agents: Benefits and Use Cases](https://www.codica.com/blog/brief-guide-on-ai-agents/)
 -[@video@The Complete Guide to Building AI Agents for Beginners](https://youtu.be/MOyl58VF2ak?si=-QjRD_5y3iViprJX)

src/data/roadmaps/ai-engineer/content/ai-agents@AeHkNU-uJ_gBdo5-xdpEu.md

@@ -1 +1,9 @@
-# AI Agents
+# AI Agents
+
+In AI engineering, "agents" refer to autonomous systems or components that can perceive their environment, make decisions, and take actions to achieve specific goals. Agents often interact with external systems, users, or other agents to carry out complex tasks. They can vary in complexity, from simple rule-based bots to sophisticated AI-powered agents that leverage machine learning models, natural language processing, and reinforcement learning.
+
+Visit the following resources to learn more:
+
+-[@article@Building an AI Agent Tutorial - LangChain](https://python.langchain.com/docs/tutorials/agents/)
+-[@article@Ai agents and their types](https://play.ht/blog/ai-agents-use-cases/)
+-[@video@The Complete Guide to Building AI Agents for Beginners](https://youtu.be/MOyl58VF2ak?si=-QjRD_5y3iViprJX)

src/data/roadmaps/ai-engineer/content/ai-engineer-vs-ml-engineer@jSZ1LhPdhlkW-9QJhIvFs.md

@@ -1,8 +1,9 @@
 # AI Engineer vs ML Engineer
 
-An AI Engineer develops broad AI solutions, such as chatbots, NLP, and intelligent automation, focusing on integrating AI technologies into large applications. In contrast, an ML Engineer is more focused on building and deploying machine learning models, handling data processing, model training, and optimization in production environments.
+An AI Engineer uses pre-trained models and existing AI tools to improve user experiences. They focus on applying AI in practical ways, without building models from scratch. This is different from AI Researchers and ML Engineers, who focus more on creating new models or developing AI theory.
 
-Visit the following resources to learn more:
+Learn more from the following resources:
 
-- [@article@AI Engineer vs. ML Engineer: Duties, Skills, and Qualifications](https://www.upwork.com/resources/ai-engineer-vs-ml-engineer)
-- [@video@AI Developer vs ML Engineer: What’s the difference?](https://www.youtube.com/watch?v=yU87V2-XisA&t=2s)
+- [@article@What does an AI Engineer do?](https://www.codecademy.com/resources/blog/what-does-an-ai-engineer-do/)
+- [@article@What is an ML Engineer?](https://www.coursera.org/articles/what-is-machine-learning-engineer)
+- [@video@AI vs ML](https://www.youtube.com/watch?v=4RixMPF4xis)

src/data/roadmaps/ai-engineer/content/ai-safety-and-ethics@8ndKHDJgL_gYwaXC7XMer.md

@@ -1 +1,8 @@
-# AI Safety and Ethics
+# AI Safety and Ethics
+
+AI safety and ethics involve establishing guidelines and best practices to ensure that artificial intelligence systems are developed, deployed, and used in a manner that prioritizes human well-being, fairness, and transparency. This includes addressing risks such as bias, privacy violations, unintended consequences, and ensuring that AI operates reliably and predictably, even in complex environments. Ethical considerations focus on promoting accountability, avoiding discrimination, and aligning AI systems with human values and societal norms. Frameworks like explainability, human-in-the-loop design, and robust monitoring are often used to build systems that not only achieve technical objectives but also uphold ethical standards and mitigate potential harms.
+
+Learn more from the following resources:
+
+- [@video@What is AI Ethics?](https://www.youtube.com/watch?v=aGwYtUzMQUk)
+- [@article@Understanding artificial intelligence ethics and safety](https://www.turing.ac.uk/news/publications/understanding-artificial-intelligence-ethics-and-safety)

src/data/roadmaps/ai-engineer/content/ai-vs-agi@5QdihE1lLpMc3DFrGy46M.md

@@ -1 +1,8 @@
-# AI vs AGI
+# AI vs AGI
+
+AI (Artificial Intelligence) refers to systems designed to perform specific tasks by mimicking aspects of human intelligence, such as pattern recognition, decision-making, and language processing. These systems, known as "narrow AI," are highly specialized, excelling in defined areas like image classification or recommendation algorithms but lacking broader cognitive abilities. In contrast, AGI (Artificial General Intelligence) represents a theoretical form of intelligence that possesses the ability to understand, learn, and apply knowledge across a wide range of tasks at a human-like level. AGI would have the capacity for abstract thinking, reasoning, and adaptability similar to human cognitive abilities, making it far more versatile than today’s AI systems. While current AI technology is powerful, AGI remains a distant goal and presents complex challenges in safety, ethics, and technical feasibility.
+
+Learn more from the following resources:
+
+- [@article@What is AGI?](https://aws.amazon.com/what-is/artificial-general-intelligence/)
+- [@article@The crucial difference between AI and AGI](https://www.forbes.com/sites/bernardmarr/2024/05/20/the-crucial-difference-between-ai-and-agi/)

src/data/roadmaps/ai-engineer/content/anomaly-detection@AglWJ7gb9rTT2rMkstxtk.md

@@ -1 +1,7 @@
-# Anomaly Detection
+# Anomaly Detection
+
+Anomaly detection with embeddings works by transforming data, such as text, images, or time-series data, into vector representations that capture their patterns and relationships. In this high-dimensional space, similar data points are positioned close together, while anomalies stand out as those that deviate significantly from the typical distribution. This approach is highly effective for detecting outliers in tasks like fraud detection, network security, and quality control.
+
+Learn more from the following resources:
+
+- [@article@Anomoly in Embeddings](https://ai.google.dev/gemini-api/tutorials/anomaly_detection)

src/data/roadmaps/ai-engineer/content/anthropics-claude@hy6EyKiNxk1x84J63dhez.md

@@ -1 +1,8 @@
-# Anthropic's Claude
+# Anthropic's Claude
+
+Anthropic's Claude is an AI language model designed to facilitate safe and scalable AI systems. Named after Claude Shannon, the father of information theory, Claude focuses on responsible AI use, emphasizing safety, alignment with human intentions, and minimizing harmful outputs. Built as a competitor to models like OpenAI's GPT, Claude is designed to handle natural language tasks such as generating text, answering questions, and supporting conversations, with a strong focus on aligning AI behavior with user goals while maintaining transparency and avoiding harmful biases.
+
+Learn more from the following resources:
+
+- [@official@Claude Website](https://claude.ai)
+- [@video@How To Use Claude Pro For Beginners](https://www.youtube.com/watch?v=J3X_JWQkvo8)

src/data/roadmaps/ai-engineer/content/audio-processing@mxQYB820447DC6kogyZIL.md

@@ -1 +1,8 @@
-# Audio Processing
+# Audio Processing
+
+Audio processing in multimodal AI enables a wide range of use cases by combining sound with other data types, such as text, images, or video, to create more context-aware systems. Use cases include speech recognition paired with real-time transcription and visual analysis in meetings or video conferencing tools, voice-controlled virtual assistants that can interpret commands in conjunction with on-screen visuals, and multimedia content analysis where audio and visual elements are analyzed together for tasks like content moderation or video indexing.
+
+Learn more from the following resources:
+
+- [@article@The State of Audio Processing](https://appwrite.io/blog/post/state-of-audio-processing)
+- [@video@Audio Signal Processing for Machine Learning](https://www.youtube.com/watch?v=iCwMQJnKk2c)

src/data/roadmaps/ai-engineer/content/aws-sagemaker@OkYO-aSPiuVYuLXHswBCn.md

@@ -1 +1,8 @@
-# AWS Sagemaker
+# AWS SageMaker
+
+AWS SageMaker is a fully managed machine learning service from Amazon Web Services that enables developers and data scientists to build, train, and deploy machine learning models at scale. It provides an integrated development environment, simplifying the entire ML workflow, from data preparation and model development to training, tuning, and inference. SageMaker supports popular ML frameworks like TensorFlow, PyTorch, and Scikit-learn, and offers features like automated model tuning, model monitoring, and one-click deployment. It's designed to make machine learning more accessible and scalable, even for large enterprise applications.
+
+Learn more from the following resources:
+
+- [@official@AWS SageMaker](https://aws.amazon.com/sagemaker/)
+- [@video@Introduction to Amazon SageMaker](https://www.youtube.com/watch?v=Qv_Tr_BCFCQ)

src/data/roadmaps/ai-engineer/content/azure-ai@3PQVZbcr4neNMRr6CuNzS.md

@@ -1 +1,8 @@
-# Azure AI
+# Azure AI
+
+Azure AI is a suite of AI services and tools provided by Microsoft through its Azure cloud platform. It includes pre-built AI models for natural language processing, computer vision, and speech, as well as tools for developing custom machine learning models using services like Azure Machine Learning. Azure AI enables developers to integrate AI capabilities into applications with APIs for tasks like sentiment analysis, image recognition, and language translation. It also supports responsible AI development with features for model monitoring, explainability, and fairness, aiming to make AI accessible, scalable, and secure across industries.
+
+Learn more from the following resources:
+
+- [@official@Azure AI](https://azure.microsoft.com/en-gb/solutions/ai)
+- [@video@How to Choose the Right Models for Your Apps](https://www.youtube.com/watch?v=sx_uGylH8eg)

src/data/roadmaps/ai-engineer/content/benefits-of-pre-trained-models@1Ga6DbOPc6Crz7ilsZMYy.md

@@ -1 +1,8 @@
-# Benefits of Pre-trained Models
+# Benefits of Pre-trained Models
+
+Pre-trained models offer several benefits in AI engineering by significantly reducing development time and computational resources because these models are trained on large datasets and can be fine-tuned for specific tasks, which enables quicker deployment and better performance with less data. They help overcome the challenge of needing vast amounts of labeled data and computational power for training from scratch. Additionally, pre-trained models often demonstrate improved accuracy, generalization, and robustness across different tasks, making them ideal for applications in natural language processing, computer vision, and other AI domains.
+
+Learn more from the following resources:
+
+- [@article@Why Pre-Trained Models Matter For Machine Learning](https://www.ahead.com/resources/why-pre-trained-models-matter-for-machine-learning/)
+- [@article@Why You Should Use Pre-Trained Models Versus Building Your Own](https://cohere.com/blog/pre-trained-vs-in-house-nlp-models)

src/data/roadmaps/ai-engineer/content/bias-and-fareness@lhIU0ulpvDAn1Xc3ooYz_.md

@@ -1 +1,9 @@
-# Bias and Fareness
+# Bias and Faireness
+
+Bias and fairness in AI refer to the challenges of ensuring that machine learning models do not produce discriminatory or skewed outcomes. Bias can arise from imbalanced training data, flawed assumptions, or biased algorithms, leading to unfair treatment of certain groups based on race, gender, or other factors. Fairness aims to address these issues by developing techniques to detect, mitigate, and prevent biases in AI systems. Ensuring fairness involves improving data diversity, applying fairness constraints during model training, and continuously monitoring models in production to avoid unintended consequences, promoting ethical and equitable AI use.
+
+Learn more from the following resources:
+
+- [@article@What Do We Do About the Biases in AI?](https://hbr.org/2019/10/what-do-we-do-about-the-biases-in-ai)
+- [@article@AI Bias - What Is It and How to Avoid It?](https://levity.ai/blog/ai-bias-how-to-avoid)
+- [@article@What about fairness, bias and discrimination?](https://ico.org.uk/for-organisations/uk-gdpr-guidance-and-resources/artificial-intelligence/guidance-on-ai-and-data-protection/how-do-we-ensure-fairness-in-ai/what-about-fairness-bias-and-discrimination/)

src/data/roadmaps/ai-engineer/content/capabilities--context-length@vvpYkmycH0_W030E-L12f.md

@@ -1 +1,8 @@
-# Capabilities / Context Length
+# Capabilities / Context Length
+
+A key aspect of the OpenAI models is their context length, which refers to the amount of input text the model can process at once. Earlier models like GPT-3 had a context length of up to 4,096 tokens (words or word pieces), while more recent models like GPT-4 can handle significantly larger context lengths, some supporting up to 32,768 tokens. This extended context length enables the models to handle more complex tasks, such as maintaining long conversations or processing lengthy documents, which enhances their utility in real-world applications like legal document analysis or code generation.
+
+Learn more from the following resources:
+
+- [@official@Managing Context](https://platform.openai.com/docs/guides/text-generation/managing-context-for-text-generation)
+- [@official@Capabilities](https://platform.openai.com/docs/guides/text-generation)

src/data/roadmaps/ai-engineer/content/chat-completions-api@_bPTciEA1GT1JwfXim19z.md

@@ -1 +1,8 @@
-# Chat Completions API
+# Chat Completions API
+
+The OpenAI Chat Completions API is a powerful interface that allows developers to integrate conversational AI into applications by utilizing models like GPT-3.5 and GPT-4. It is designed to manage multi-turn conversations, keeping context across interactions, making it ideal for chatbots, virtual assistants, and interactive AI systems. With the API, users can structure conversations by providing messages in a specific format, where each message has a role (e.g., "system" to guide the model, "user" for input, and "assistant" for responses).
+
+Learn more from the following resources:
+
+- [@official@Create Chat Completions](https://platform.openai.com/docs/api-reference/chat/create)
+- [@article@](https://medium.com/the-ai-archives/getting-started-with-openais-chat-completions-api-in-2024-462aae00bf0a)

src/data/roadmaps/ai-engineer/content/chunking@mX987wiZF7p3V_gExrPeX.md

@@ -1 +1,9 @@
-# Chunking
+# Chunking
+
+The chunking step in Retrieval-Augmented Generation (RAG) involves breaking down large documents or data sources into smaller, manageable chunks. This is done to ensure that the retriever can efficiently search through large volumes of data while staying within the token or input limits of the model. Each chunk, typically a paragraph or section, is converted into an embedding, and these embeddings are stored in a vector database. When a query is made, the retriever searches for the most relevant chunks rather than the entire document, enabling faster and more accurate retrieval.
+
+Learn more from the following resources:
+
+- [@article@Understanding LangChain's RecursiveCharacterTextSplitter](https://dev.to/eteimz/understanding-langchains-recursivecharactertextsplitter-2846)
+- [@article@Chunking Strategies for LLM Applications](https://www.pinecone.io/learn/chunking-strategies/)
+- [@article@A Guide to Chunking Strategies for Retrieval Augmented Generation](https://zilliz.com/learn/guide-to-chunking-strategies-for-rag)

src/data/roadmaps/ai-engineer/content/code-completion-tools@TifVhqFm1zXNssA8QR3SM.md

@@ -1 +1,10 @@
-# Code Completion Tools
+# Code Completion Tools
+
+Code completion tools are AI-powered development assistants designed to enhance productivity by automatically suggesting code snippets, functions, and entire blocks of code as developers type. These tools, such as GitHub Copilot and Tabnine, leverage machine learning models trained on vast code repositories to predict and generate contextually relevant code. They help reduce repetitive coding tasks, minimize errors, and accelerate the development process by offering real-time, intelligent suggestions.
+
+Learn more from the following resources:
+
+- [@official@GitHub Copilot](https://github.com/features/copilot)
+- [@official@Codeium](https://codeium.com/)
+- [@official@Supermaven](https://supermaven.com/)
+- [@official@Tabnine](https://www.tabnine.com/)

src/data/roadmaps/ai-engineer/content/cohere@a7qsvoauFe5u953I699ps.md

@@ -1 +1,8 @@
-# Cohere
+# Cohere
+
+Cohere is an AI platform that specializes in natural language processing (NLP) by providing large language models designed to help developers build and deploy text-based applications. Cohere’s models are used for tasks such as text classification, language generation, semantic search, and sentiment analysis. Unlike some other providers, Cohere emphasizes simplicity and scalability, offering an easy-to-use API that allows developers to fine-tune models on custom data for specific use cases. Additionally, Cohere provides robust multilingual support and focuses on ensuring that its NLP solutions are both accessible and enterprise-ready, catering to a wide range of industries.
+
+Learn more from the following resources:
+
+- [@official@Cohere Website](https://cohere.com/)
+- [@article@What Does Cohere Do?](https://medium.com/geekculture/what-does-cohere-do-cdadf6d70435)

src/data/roadmaps/ai-engineer/content/conducting-adversarial-testing@Pt-AJmSJrOxKvolb5_HEv.md

@@ -1 +1,8 @@
-# Conducting adversarial testing
+# Conducting adversarial testing
+
+Adversarial testing involves intentionally exposing machine learning models to deceptive, perturbed, or carefully crafted inputs to evaluate their robustness and identify vulnerabilities. The goal is to simulate potential attacks or edge cases where the model might fail, such as subtle manipulations in images, text, or data that cause the model to misclassify or produce incorrect outputs. This type of testing helps to improve model resilience, particularly in sensitive applications like cybersecurity, autonomous systems, and finance.
+
+Learn more from the following resources:
+
+- [@article@Adversarial Testing for Generative AI](https://developers.google.com/machine-learning/resources/adv-testing)
+- [@article@Adversarial Testing: Definition, Examples and Resources](https://www.leapwork.com/blog/adversarial-testing)

src/data/roadmaps/ai-engineer/content/constraining-outputs-and-inputs@ONLDyczNacGVZGojYyJrU.md

@@ -1 +1,8 @@
-# Constraining outputs and inputs
+# Constraining outputs and inputs
+
+Constraining outputs and inputs in AI models refers to implementing limits or rules that guide both the data the model processes (inputs) and the results it generates (outputs). Input constraints ensure that only valid, clean, and well-formed data enters the model, which helps to reduce errors and improve performance. This can include setting data type restrictions, value ranges, or specific formats. Output constraints, on the other hand, ensure that the model produces appropriate, safe, and relevant results, often by limiting output length, specifying answer formats, or applying filters to avoid harmful or biased responses. These constraints are crucial for improving model safety, alignment, and utility in practical applications.
+
+Learn more from the following resources:
+
+- [@article@Preventing Prompt Injection](https://learnprompting.org/docs/prompt_hacking/defensive_measures/introduction)
+- [@article@Introducing Structured Outputs in the API - OpenAI](https://openai.com/index/introducing-structured-outputs-in-the-api/)

src/data/roadmaps/ai-engineer/content/cut-off-dates--knowledge@LbB2PeytxRSuU07Bk0KlJ.md

@@ -1 +1,8 @@
-# Cut-off Dates / Knowledge
+# Cut-off Dates / Knowledge
+
+OpenAI models, such as GPT-3.5 and GPT-4, have a knowledge cutoff date, which refers to the last point in time when the model was trained on data. For instance, as of the current version of GPT-4, the knowledge cutoff is October 2023. This means the model does not have awareness or knowledge of events, advancements, or data that occurred after that date. Consequently, the model may lack information on more recent developments, research, or real-time events unless explicitly updated in future versions. This limitation is important to consider when using the models for time-sensitive tasks or inquiries involving recent knowledge.
+
+Learn more from the following resources:
+
+- [@article@Knowledge Cutoff Dates of all LLMs explained](https://otterly.ai/blog/knowledge-cutoff/)
+- [@article@Knowledge Cutoff Dates For ChatGPT, Meta Ai, Copilot, Gemini, Claude](https://computercity.com/artificial-intelligence/knowledge-cutoff-dates-llms)

src/data/roadmaps/ai-engineer/content/dall-e-api@LKFwwjtcawJ4Z12X102Cb.md

@@ -1 +1,8 @@
-# DALL-E API
+# DALL-E API
+
+The DALL-E API is a tool provided by OpenAI that allows developers to integrate the DALL-E image generation model into applications. DALL-E is an AI model designed to generate images from textual descriptions, capable of producing highly detailed and creative visuals. The API enables users to provide a descriptive prompt, and the model generates corresponding images, opening up possibilities in fields like design, advertising, content creation, and art.
+
+Learn more from the following resources:
+
+- [@official@OpenAI Image Generation](https://platform.openai.com/docs/guides/images)
+- [@video@DALL E API - Introduction (Generative AI Pictures from OpenAI)](https://www.youtube.com/watch?v=Zr6vAWwjHN0)

src/data/roadmaps/ai-engineer/content/data-classification@06Xta-OqSci05nV2QMFdF.md

@@ -1 +1,7 @@
-# Data Classification
+# Data Classification
+
+Once data is embedded, a classification algorithm, such as a neural network or a logistic regression model, can be trained on these embeddings to classify the data into different categories. The advantage of using embeddings is that they capture underlying relationships and similarities between data points, even if the raw data is complex or high-dimensional, improving classification accuracy in tasks like text classification, image categorization, and recommendation systems.
+
+Learn more from the following resources:
+
+- [@video@Text Embeddings, Classification, and Semantic Search (w/ Python Code)](https://www.youtube.com/watch?v=sNa_uiqSlJo)

src/data/roadmaps/ai-engineer/content/development-tools@NYge7PNtfI-y6QWefXJ4d.md

@@ -1 +1,8 @@
-# Development Tools
+# Development Tools
+
+AI has given rise to a collection of AI powered development tools of various different varieties. We have IDEs like Cursor that has AI baked into it, live context capturing tools such as Pieces and a variety of brower based tools like V0, Claude and more.
+
+- [@official@v0 Website](https://v0.dev)
+- [@official@Aider - AI Pair Programming in Terminal](https://github.com/Aider-AI/aider)
+- [@official@Replit AI](https://replit.com/ai)
+- [@official@Pieces Website](https://pieces.app)

src/data/roadmaps/ai-engineer/content/embedding@grTcbzT7jKk_sIUwOTZTD.md

@@ -1 +1,8 @@
-# Embedding
+# Embedding
+
+In Retrieval-Augmented Generation (RAG), embeddings are essential for linking information retrieval with natural language generation. Embeddings represent both the user query and documents as dense vectors in a shared space, enabling the system to retrieve relevant information based on similarity. This retrieved information is then fed into a generative model, such as GPT, to produce contextually informed and accurate responses. By using embeddings, RAG enhances the model's ability to generate content grounded in external knowledge, making it effective for tasks like question answering and summarization.
+
+Learn more from the following resources:
+
+- [@article@Understanding the role of embeddings in RAG LLMs](https://www.aporia.com/learn/understanding-the-role-of-embeddings-in-rag-llms/)
+- [@article@Mastering RAG: How to Select an Embedding Model](https://www.rungalileo.io/blog/mastering-rag-how-to-select-an-embedding-model)

src/data/roadmaps/ai-engineer/content/embeddings@XyEp6jnBSpCxMGwALnYfT.md

@@ -1 +1,9 @@
-# Embeddings
+# Embeddings
+
+Embeddings are dense, continuous vector representations of data, such as words, sentences, or images, in a lower-dimensional space. They capture the semantic relationships and patterns in the data, where similar items are placed closer together in the vector space. In machine learning, embeddings are used to convert complex data into numerical form that models can process more easily. For example, word embeddings represent words based on their meanings and contexts, allowing models to understand relationships like synonyms or analogies. Embeddings are widely used in tasks like natural language processing, recommendation systems, and image recognition to improve model performance and efficiency.
+
+Learn more from the following resources:
+
+- [@article@What are embeddings in machine learning?](https://www.cloudflare.com/en-gb/learning/ai/what-are-embeddings/)
+- [@article@What is embedding?](https://www.ibm.com/topics/embedding)
+- [@video@What are Word Embeddings](https://www.youtube.com/watch?v=wgfSDrqYMJ4)

src/data/roadmaps/ai-engineer/content/faiss@JurLbOO1Z8r6C3yUqRNwf.md

@@ -1 +1,9 @@
-# FAISS
+# FAISS
+
+FAISS (Facebook AI Similarity Search) is a library developed by Facebook AI for efficient similarity search and clustering of dense vectors, particularly useful for large-scale datasets. It is optimized to handle embeddings (vector representations) and enables fast nearest neighbor search, allowing you to retrieve similar items from a large collection of vectors based on distance or similarity metrics like cosine similarity or Euclidean distance. FAISS is widely used in applications such as image and text retrieval, recommendation systems, and large-scale search systems where embeddings are used to represent items. It offers several indexing methods and can scale to billions of vectors, making it a powerful tool for handling real-time, large-scale similarity search problems efficiently.
+
+Learn more from the following resources:
+
+- [@official@FAISS](https://ai.meta.com/tools/faiss/)
+- [@video@FAISS Vector Library with LangChain and OpenAI](https://www.youtube.com/watch?v=ZCSsIkyCZk4)
+- [@article@What Is Faiss (Facebook AI Similarity Search)?](https://www.datacamp.com/blog/faiss-facebook-ai-similarity-search)

src/data/roadmaps/ai-engineer/content/fine-tuning@15XOFdVp0IC-kLYPXUJWh.md

@@ -1 +1,8 @@
-# Fine-tuning
+# Fine-tuning
+
+Fine-tuning the OpenAI API involves adapting pre-trained models, such as GPT, to specific use cases by training them on custom datasets. This process allows you to refine the model's behavior and improve its performance on specialized tasks, like generating domain-specific text or following particular patterns. By providing labeled examples of the desired input-output pairs, you guide the model to better understand and predict the appropriate responses for your use case.
+
+Learn more from the following resources:
+
+- [@official@Fine-tuning Documentation](https://platform.openai.com/docs/guides/fine-tuning)
+- [@video@Fine-tuning ChatGPT with OpenAI Tutorial](https://www.youtube.com/watch?v=VVKcSf6r3CM)

src/data/roadmaps/ai-engineer/content/generation@2jJnS9vRYhaS69d6OxrMh.md

@@ -1 +1,8 @@
-# Generation
+# Generation
+
+Generation refers to the process where a generative language model, such as GPT, creates a response based on the information retrieved during the retrieval phase. After relevant documents or data snippets are identified using embeddings, they are passed to the generative model, which uses this information to produce coherent, context-aware, and informative responses. The retrieved content helps the model stay grounded and factual, enhancing its ability to answer questions, provide summaries, or engage in dialogue by combining retrieved knowledge with its natural language generation capabilities. This synergy between retrieval and generation makes RAG systems effective for tasks that require detailed, accurate, and contextually relevant outputs.
+
+Learn more from the following resources:
+
+- [@article@What is RAG (Retrieval-Augmented Generation)?](https://aws.amazon.com/what-is/retrieval-augmented-generation/)
+- [@video@Retrieval Augmented Generation (RAG) Explained in 8 Minutes!](https://www.youtube.com/watch?v=HREbdmOSQ18)

src/data/roadmaps/ai-engineer/content/googles-gemini@oe8E6ZIQWuYvHVbYJHUc1.md

@@ -1 +1,8 @@
-# Google's Gemini
+# Google's Gemini
+
+Google Gemini is an advanced AI model by Google DeepMind, designed to integrate natural language processing with multimodal capabilities, enabling it to understand and generate not just text but also images, videos, and other data types. It combines generative AI with reasoning skills, making it effective for complex tasks requiring logical analysis and contextual understanding. Built on Google's extensive knowledge base and infrastructure, Gemini aims to offer high accuracy, efficiency, and safety, positioning it as a competitor to models like OpenAI's GPT-4.
+
+Learn more from the following resources:
+
+- [@official@Google Gemini](https://workspace.google.com/solutions/ai/)
+- [@video@Welcome to the Gemini era](https://www.youtube.com/watch?v=_fuimO6ErKI)

src/data/roadmaps/ai-engineer/content/hugging-face-hub@YLOdOvLXa5Fa7_mmuvKEi.md

@@ -1 +1,8 @@
-# Hugging Face Hub
+# Hugging Face Hub
+
+The Hugging Face Hub is a comprehensive platform that hosts over 900,000 machine learning models, 200,000 datasets, and 300,000 demo applications, facilitating collaboration and sharing within the AI community. It serves as a central repository where users can discover, upload, and experiment with various models and datasets across multiple domains, including natural language processing, computer vision, and audio tasks. It also supports version control.
+
+Learn more from the following resources:
+
+- [@official@Documentation](https://huggingface.co/docs/hub/en/index)
+- [@course@nlp-official](https://huggingface.co/learn/nlp-course/en/chapter4/1)

src/data/roadmaps/ai-engineer/content/hugging-face-models@8XjkRqHOdyH-DbXHYiBEt.md

@@ -1 +1,7 @@
-# Hugging Face Models
+# Hugging Face Models
+
+Hugging Face models are a collection of pre-trained machine learning models available through the Hugging Face platform, covering a wide range of tasks like natural language processing, computer vision, and audio processing. The platform includes models for tasks such as text classification, translation, summarization, question answering, and more, with popular models like BERT, GPT, T5, and CLIP. Hugging Face provides easy-to-use tools and APIs that allow developers to access, fine-tune, and deploy these models, fostering a collaborative community where users can share, modify, and contribute models to improve AI research and application development.
+
+Learn more from the following resources:
+
+- [@official@Hugging Face Models](https://huggingface.co/models)

src/data/roadmaps/ai-engineer/content/hugging-face-models@EIDbwbdolR_qsNKVDla6V.md

@@ -1 +1,8 @@
-# Hugging Face Models
+# Hugging Face Models
+
+Hugging Face models are a collection of pre-trained machine learning models available through the Hugging Face platform, covering a wide range of tasks like natural language processing, computer vision, and audio processing. The platform includes models for tasks such as text classification, translation, summarization, question answering, and more, with popular models like BERT, GPT, T5, and CLIP. Hugging Face provides easy-to-use tools and APIs that allow developers to access, fine-tune, and deploy these models, fostering a collaborative community where users can share, modify, and contribute models to improve AI research and application development.
+
+Learn more from the following resources:
+
+- [@official@Hugging Face Models](https://huggingface.co/models)
+- [@video@How to Use Pretrained Models from Hugging Face in a Few Lines of Code](https://www.youtube.com/watch?v=ntz160EnWIc)

src/data/roadmaps/ai-engineer/content/hugging-face-tasks@YKIPOiSj_FNtg0h8uaSMq.md

@@ -1 +1,9 @@
-# Hugging Face Tasks
+# Hugging Face Tasks
+
+Hugging Face supports text classification, named entity recognition, question answering, summarization, and translation. It also extends to multimodal tasks that involve both text and images, such as visual question answering (VQA) and image-text matching. Each task is done by various pre-trained models that can be easily accessed and fine-tuned through the Hugging Face library. 
+
+Learn more from the following resources:
+
+- [@official@Task and Model](https://huggingface.co/learn/computer-vision-course/en/unit4/multimodal-models/tasks-models-part1)
+- [@official@Task Summary](https://huggingface.co/docs/transformers/v4.14.1/en/task_summary)
+- [@official@Task Manager](https://huggingface.co/docs/optimum/en/exporters/task_manager)

src/data/roadmaps/ai-engineer/content/hugging-face@v99C5Bml2a6148LCJ9gy9.md

@@ -1 +1,9 @@
-# Hugging Face
+# Hugging Face
+
+Hugging Face is a leading AI company and open-source platform that provides tools, models, and libraries for natural language processing (NLP), computer vision, and other machine learning tasks. It is best known for its "Transformers" library, which simplifies the use of pre-trained models like BERT, GPT, T5, and CLIP, making them accessible for tasks such as text classification, translation, summarization, and image recognition.
+
+Learn more from the following resources:
+
+- [@official@Hugging Face Website](https://huggingface.co)
+- [@video@What is Hugging Face? - Machine Learning Hub Explained](https://www.youtube.com/watch?v=1AUjKfpRZVo)
+- [@course@Hugging Face Official Video Course](https://www.youtube.com/watch?v=00GKzGyWFEs&list=PLo2EIpI_JMQvWfQndUesu0nPBAtZ9gP1o)

src/data/roadmaps/ai-engineer/content/image-generation@49BWxYVFpIgZCCqsikH7l.md

@@ -1 +1,9 @@
-# Image Generation
+# Image Generation
+
+Image generation is a process in artificial intelligence where models create new images based on input prompts or existing data. It involves using generative models like GANs (Generative Adversarial Networks), VAEs (Variational Autoencoders), or more recently, transformer-based models like DALL-E and Stable Diffusion.
+
+Learn more from the following resources:
+
+- [@official@DALL-E Website](https://openai.com/index/dall-e-2/)
+- [@article@How DALL-E 2 Actually Works](https://www.assemblyai.com/blog/how-dall-e-2-actually-works/)
+- [@video@How AI Image Generators Work (Stable Diffusion / Dall-E)](https://www.youtube.com/watch?v=1CIpzeNxIhU)

src/data/roadmaps/ai-engineer/content/image-understanding@fzVq4hGoa2gdbIzoyY1Zp.md

@@ -1 +1,7 @@
-# Image Understanding
+# Image Understanding
+
+Multimodal AI enhances image understanding by integrating visual data with other types of information, such as text or audio. By combining these inputs, AI models can interpret images more comprehensively, recognizing objects, scenes, and actions, while also understanding context and related concepts. For example, an AI system could analyze an image and generate descriptive captions, or provide explanations based on both visual content and accompanying text.
+
+Learn more from the following resources:
+
+- [@article@Low or high fidelity image understanding - OpenAI](https://platform.openai.com/docs/guides/vision/low-or-high-fidelity-image-understanding)

src/data/roadmaps/ai-engineer/content/impact-on-product-development@qJVgKe9uBvXc-YPfvX_Y7.md

@@ -1 +1,8 @@
-# Impact on Product Development
+# Impact on Product Development
+
+AI engineering transforms product development by automating tasks, enhancing data-driven decision-making, and enabling the creation of smarter, more personalized products. It speeds up design cycles, optimizes processes, and allows for predictive maintenance, quality control, and efficient resource management. By integrating AI, companies can innovate faster, reduce costs, and improve user experiences, giving them a competitive edge in the market.
+
+Learn more from the following resources:
+
+- [@article@AI in Product Development: Netflix, BMW, and PepsiCo](https://www.virtasant.com/ai-today/ai-in-product-development-netflix-bmw#:~:text=AI%20can%20help%20make%20product,and%20gain%20a%20competitive%20edge.)
+- [@article@AI Product Development: Why Are Founders So Fascinated By The Potential?](https://www.techmagic.co/blog/ai-product-development/)

src/data/roadmaps/ai-engineer/content/indexing-embeddings@5TQnO9B4_LTHwqjI7iHB1.md

@@ -1 +1,8 @@
-# Indexing Embeddings
+# Indexing Embeddings
+
+Embeddings are stored in a vector database by first converting data, such as text, images, or audio, into high-dimensional vectors using machine learning models. These vectors, also called embeddings, capture the semantic relationships and patterns within the data. Once generated, each embedding is indexed in the vector database along with its associated metadata, such as the original data (e.g., text or image) or an identifier. The vector database then organizes these embeddings to support efficient similarity searches, typically using techniques like approximate nearest neighbor (ANN) search.
+
+Learn more from the following resources:
+
+- [@article@Indexing & Embeddings](https://docs.llamaindex.ai/en/stable/understanding/indexing/indexing/)
+- [@video@Vector Databases simply explained! (Embeddings & Indexes)](https://www.youtube.com/watch?v=dN0lsF2cvm4)

src/data/roadmaps/ai-engineer/content/inference-sdk@3kRTzlLNBnXdTsAEXVu_M.md

@@ -1 +1,8 @@
-# Inference SDK
+# Inference SDK
+
+The Hugging Face Inference SDK is a powerful tool that allows developers to easily integrate and run inference on large language models hosted on the Hugging Face Hub. By using the `InferenceClient`, users can make API calls to various models for tasks such as text generation, image creation, and more. The SDK supports both synchronous and asynchronous operations thus compatible with existing workflows. 
+
+Learn more from the following resources:
+
+- [@official@Inference](https://huggingface.co/docs/huggingface_hub/en/package_reference/inference_client)
+- [@article@Endpoint Setup](https://www.npmjs.com/package/@huggingface/inference)

src/data/roadmaps/ai-engineer/content/inference@KWjD4xEPhOOYS51dvRLd2.md

@@ -1 +1,9 @@
-# Inference
+# Inference
+
+In artificial intelligence (AI), inference refers to the process where a trained machine learning model makes predictions or draws conclusions from new, unseen data. Unlike training, inference involves the model applying what it has learned to make decisions without needing examples of the exact result. In essence, inference is the AI model actively functioning. For example, a self-driving car recognizing a stop sign on a road it has never encountered before demonstrates inference. The model identifies the stop sign in a new setting, using its learned knowledge to make a decision in real-time.
+
+Learn more from the following resources:
+
+- [@article@Inference vs Training](https://www.cloudflare.com/learning/ai/inference-vs-training/)
+- [@article@What is Machine Learning Inference?](https://hazelcast.com/glossary/machine-learning-inference/)
+- [@article@What is Machine Learning Inference? An Introduction to Inference Approaches](https://www.datacamp.com/blog/what-is-machine-learning-inference)

src/data/roadmaps/ai-engineer/content/introduction@_hYN0gEi9BL24nptEtXWU.md

@@ -1 +1,3 @@
-# Introduction
+# Introduction
+
+AI Engineering is the process of designing and implementing AI systems using pre-trained models and existing AI tools to solve practical problems. AI Engineers focus on applying AI in real-world scenarios, improving user experiences, and automating tasks, without developing new models from scratch. They work to ensure AI systems are efficient, scalable, and can be seamlessly integrated into business applications, distinguishing their role from AI Researchers and ML Engineers, who concentrate more on creating new models or advancing AI theory.

src/data/roadmaps/ai-engineer/content/know-your-customers--usecases@t1SObMWkDZ1cKqNNlcd9L.md

@@ -1 +1,7 @@
-# Know your Customers / Usecases
+# Know your Customers / Usecases
+
+To know your customer means deeply understanding the needs, behaviors, and expectations of your target users. This ensures the tools you create are tailored precisely for their intended purpose, while also being designed to prevent misuse or unintended applications. By clearly defining the tool’s functionality and boundaries, you can align its features with the users’ goals while incorporating safeguards that limit its use in contexts it wasn’t designed for. This approach enhances both the tool’s effectiveness and safety, reducing the risk of improper use.
+
+Learn more from the following resources:
+
+- [@article@Assigning Roles](https://learnprompting.org/docs/basics/roles)

src/data/roadmaps/ai-engineer/content/lancedb@rjaCNT3Li45kwu2gXckke.md

@@ -1 +1,8 @@
-# LanceDB
+# LanceDB
+
+LanceDB is a vector database designed for efficient storage, retrieval, and management of embeddings. It enables users to perform fast similarity searches, particularly useful in applications like recommendation systems, semantic search, and AI-driven content retrieval. LanceDB focuses on scalability and speed, allowing large-scale datasets of embeddings to be indexed and queried quickly, which is essential for real-time AI applications. It integrates well with machine learning workflows, making it easier to deploy models that rely on vector-based data processing, and helps manage the complexities of handling high-dimensional vector data efficiently.
+
+Learn more from the following resources:
+
+- [@official@LanceDB Website](https://lancedb.com/)
+- [@opensource@LanceDB on GitHub](https://github.com/lancedb/lancedb)

src/data/roadmaps/ai-engineer/content/langchain-for-multimodal-apps@j9zD3pHysB1CBhLfLjhpD.md

@@ -1 +1,8 @@
-# LangChain for Multimodal Apps
+# LangChain for Multimodal Apps
+
+LangChain is a framework designed to build applications that integrate multiple AI models, especially those focusing on language understanding, generation, and multimodal capabilities. For multimodal apps, LangChain facilitates seamless interaction between text, image, and even audio models, enabling developers to create complex workflows that can process and analyze different types of data.
+
+Learn more from the following resources:
+
+- [@official@LangChain Website](https://www.langchain.com/)
+- [@video@Build a Multimodal GenAI App with LangChain and Gemini LLMs](https://www.youtube.com/watch?v=bToMzuiOMhg)

src/data/roadmaps/ai-engineer/content/langchain@ebXXEhNRROjbbof-Gym4p.md

@@ -1 +1,8 @@
-# Langchain
+# Langchain
+
+LangChain is a development framework that simplifies building applications powered by language models, enabling seamless integration of multiple AI models and data sources. It focuses on creating chains, or sequences, of operations where language models can interact with databases, APIs, and other models to perform complex tasks. LangChain offers tools for prompt management, data retrieval, and workflow orchestration, making it easier to develop robust, scalable applications like chatbots, automated data analysis, and multi-step reasoning systems.
+
+Learn more from the following resources:
+
+- [@official@LangChain Website](https://www.langchain.com/)
+- [@video@What is LangChain?](https://www.youtube.com/watch?v=1bUy-1hGZpI)

src/data/roadmaps/ai-engineer/content/limitations-and-considerations@MXqbQGhNM3xpXlMC2ib_6.md

@@ -1 +1,8 @@
-# Limitations and Considerations
+# Limitations and Considerations
+
+Pre-trained models, while powerful, come with several limitations and considerations. They may carry biases present in the training data, leading to unintended or discriminatory outcomes, these models are also typically trained on general data, so they might not perform well on niche or domain-specific tasks without further fine-tuning. Another concern is the "black-box" nature of many pre-trained models, which can make their decision-making processes hard to interpret and explain.
+
+Learn more from the following resources:
+
+- [@article@Pretrained Topic Models: Advantages and Limitation](https://www.kaggle.com/code/amalsalilan/pretrained-topic-models-advantages-and-limitation)
+- [@video@Should You Use Open Source Large Language Models?](https://www.youtube.com/watch?v=y9k-U9AuDeM)

src/data/roadmaps/ai-engineer/content/llama-index@d0ontCII8KI8wfP-8Y45R.md

@@ -1 +1,8 @@
-# Llama Index
+# LlamaIndex
+
+LlamaIndex, formerly known as GPT Index, is a tool designed to facilitate the integration of large language models (LLMs) with structured and unstructured data sources. It acts as a data framework that helps developers build retrieval-augmented generation (RAG) applications by indexing various types of data, such as documents, databases, and APIs, enabling LLMs to query and retrieve relevant information efficiently.
+
+Learn more from the following resources:
+
+- [@official@llamaindex Website](https://docs.llamaindex.ai/en/stable/)
+- [@video@Introduction to LlamaIndex with Python (2024)](https://www.youtube.com/watch?v=cCyYGYyCka4)

src/data/roadmaps/ai-engineer/content/llamaindex-for-multimodal-apps@akQTCKuPRRelj2GORqvsh.md

@@ -1 +1,8 @@
-# LlamaIndex for Multimodal Apps
+# LlamaIndex for Multi-modal Apps
+
+LlamaIndex enables multi-modal apps by linking language models (LLMs) to diverse data sources, including text and images. It indexes and retrieves information across formats, allowing LLMs to process and integrate data from multiple modalities. This supports applications like visual question answering, content summarization, and interactive systems by providing structured, context-aware inputs from various content types.
+
+Learn more from the following resources:
+
+- [@official@LlamaIndex Multy-modal](https://docs.llamaindex.ai/en/stable/use_cases/multimodal/)
+- [@video@Multi-modal Retrieval Augmented Generation with LlamaIndex](https://www.youtube.com/watch?v=35RlrrgYDyU)

src/data/roadmaps/ai-engineer/content/llms@wf2BSyUekr1S1q6l8kyq6.md

@@ -1,9 +1,9 @@
 # LLMs
 
-Large Language Models (LLMs) are advanced artificial intelligence programs designed to comprehend and generate human language text.
+LLMs, or Large Language Models, are advanced AI models trained on vast datasets to understand and generate human-like text. They can perform a wide range of natural language processing tasks, such as text generation, translation, summarization, and question answering. Examples include GPT-4, BERT, and T5. LLMs are capable of understanding context, handling complex queries, and generating coherent responses, making them useful for applications like chatbots, content creation, and automated support. However, they require significant computational resources and may carry biases from their training data.
 
-Visit the following resources to learn more:
+Learn more from the following resources:
 
-- [@article@What is a large language model (LLM)?](https://www.cloudflare.com/learning/ai/what-is-large-language-model/)
-- [@article@Large language model](https://en.wikipedia.org/wiki/Large_language_model)
-- [@video@How Large Language Models Work](https://www.youtube.com/watch?v=5sLYAQS9sWQ&t=1s)
+- [@article@What is a large language model (LLM)?](https://www.cloudflare.com/en-gb/learning/ai/what-is-large-language-model/)
+- [@video@How Large Langauge Models Work](https://www.youtube.com/watch?v=5sLYAQS9sWQ)
+- [@video@Large Language Models (LLMs) - Everything You NEED To Know](https://www.youtube.com/watch?v=osKyvYJ3PRM)