fix: paragraph overflow

feat(java): add official articles on basic syntax and update the content (#7665 )
Improve Prompt Engineering - Pitfalls of LLMs - Content & Links (#7666 )
2026-03-13 02:01:57 +08:00 · 2024-11-04 16:45:37 +06:00 · 2024-11-04 09:53:12 +00:00 · 2024-11-04 09:52:32 +00:00 · 2024-11-04 09:47:25 +00:00 · 2024-11-01 12:12:28 +00:00
622 changed files with 8300 additions and 2288 deletions
--- a/.astro/settings.json
+++ b/.astro/settings.json
@@ -3,6 +3,6 @@
 		"enabled": false
 	},
 	"_variables": {
-		"lastUpdateCheck": 1728296475293
+		"lastUpdateCheck": 1729612578122
 	}
 }
--- a/contributing.md
+++ b/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.
--- a/5
+++ b/5
@@ -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
--- a/public/roadmap-content/ai-engineer.json
+++ b/public/roadmap-content/ai-engineer.json
--- a/public/roadmap-content/api-design.json
+++ b/public/roadmap-content/api-design.json
@@ -176,7 +176,7 @@
        "type": "article"
      },
      {
-        "title": "Cookes - Mozilla",
+        "title": "Cookies - Mozilla",
        "url": "https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/cookies",
        "type": "article"
      }
@@ -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": []
  }
 }
--- a/public/roadmap-content/backend.json
+++ b/public/roadmap-content/backend.json
@@ -1695,6 +1695,16 @@
        "url": "https://app.daily.dev/tags/kafka?ref=roadmapsh",
        "type": "article"
      },
+      {
+        "title": "Apache Kafka Streams",
+        "url": "https://docs.confluent.io/platform/current/streams/concepts.html",
+        "type": "article"
+      },
+      {
+        "title": "Kafka Streams Confluent",
+        "url": "https://kafka.apache.org/documentation/streams/",
+        "type": "article"
+      },
      {
        "title": "Apache Kafka Fundamentals",
        "url": "https://www.youtube.com/watch?v=B5j3uNBH8X4",
--- a/public/roadmap-content/blockchain.json
+++ b/public/roadmap-content/blockchain.json
--- a/public/roadmap-content/computer-science.json
+++ b/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",
--- a/public/roadmap-content/cyber-security.json
+++ b/public/roadmap-content/cyber-security.json
@@ -78,7 +78,7 @@
        "type": "article"
      },
      {
-        "title": "Libra Office",
+        "title": "LibreOffice",
        "url": "https://www.libreoffice.org/",
        "type": "article"
      }
@@ -811,13 +811,8 @@
        "type": "article"
      },
      {
-        "title": "Lets subnet your home network!",
-        "url": "https://www.youtube.com/watch?v=mJ_5qeqGOaI&list=PLIhvC56v63IKrRHh3gvZZBAGvsvOhwrRF&index=6",
-        "type": "video"
-      },
-      {
-        "title": "Subnetting for hackers",
-        "url": "https://www.youtube.com/watch?v=o0dZFcIFIAw",
+        "title": "Subnetting",
+        "url": "https://www.youtube.com/playlist?list=PLIhvC56v63IKrRHh3gvZZBAGvsvOhwrRF",
        "type": "video"
      }
    ]
@@ -1403,11 +1398,16 @@
  },
  "LKK1A5-xawA7yCIAWHS8P": {
    "title": "SSL / TLS",
-    "description": "Single Sign-On (SSO) is an authentication method that allows users to access multiple applications or systems with one set of login credentials. It enables users to log in once and gain access to various connected systems without re-entering credentials. SSO enhances user experience by reducing password fatigue, streamlines access management for IT departments, and can improve security by centralizing authentication controls. It typically uses protocols like SAML, OAuth, or OpenID Connect to securely share authentication information across different domains. While SSO offers convenience and can strengthen security when implemented correctly, it also presents a single point of failure if compromised, making robust security measures for the SSO system critical.\n\nLearn more from the following resources:",
+    "description": "Secure Sockets Layer (SSL) and Transport Layer Security (TLS) are cryptographic protocols used to provide security in internet communications. These protocols encrypt the data that is transmitted over the web, so anyone who tries to intercept packets will not be able to interpret the data. One difference that is important to know is that SSL is now deprecated due to security flaws, and most modern web browsers no longer support it. But TLS is still secure and widely supported, so preferably use TLS.\n\nLearn more from the following resources:",
    "links": [
      {
-        "title": "What’s the Difference Between SSL and TLS?",
-        "url": "https://aws.amazon.com/compare/the-difference-between-ssl-and-tls/",
+        "title": "What is SSL? | SSL definition",
+        "url": "https://www.cloudflare.com/en-gb/learning/ssl/what-is-ssl/",
+        "type": "article"
+      },
+      {
+        "title": "TLS Basics",
+        "url": "https://www.internetsociety.org/deploy360/tls/basics/",
        "type": "article"
      },
      {
@@ -1805,7 +1805,7 @@
        "type": "article"
      },
      {
-        "title": "",
+        "title": "What is LDAP",
        "url": "https://www.youtube.com/watch?v=vy3e6ekuqqg",
        "type": "video"
      }
--- a/public/roadmap-content/frontend.json
+++ b/public/roadmap-content/frontend.json
@@ -2587,6 +2587,11 @@
        "url": "https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API",
        "type": "article"
      },
+      {
+        "title": "Web Storage API – How to Store Data on the Browser",
+        "url": "https://www.freecodecamp.org/news/web-storage-api-how-to-store-data-on-the-browser/",
+        "type": "article"
+      },
      {
        "title": "Explore top posts about Storage",
        "url": "https://app.daily.dev/tags/storage?ref=roadmapsh",
--- a/public/roadmap-content/game-developer.json
+++ b/public/roadmap-content/game-developer.json
--- a/public/roadmap-content/git-github.json
+++ b/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"
      }
    ]
--- a/public/roadmap-content/nodejs.json
+++ b/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"
      }
    ]
  },
@@ -996,7 +1011,7 @@
    "links": [
      {
        "title": "Node.js Learn environment variables",
-        "url": "https://www.digitalocean.com/community/tutorials/nodejs-command-line-arguments-node-scripts",
+        "url": "https://nodejs.org/en/learn/command-line/how-to-read-environment-variables-from-nodejs",
        "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"
      }
    ]
  },
@@ -1867,6 +1892,11 @@
        "title": "winston Website",
        "url": "https://github.com/winstonjs/winston",
        "type": "opensource"
+      },
+      {
+        "title": "A Complete Guide to Winston Logging in Node.js",
+        "url": "https://betterstack.com/community/guides/logging/how-to-install-setup-and-use-winston-and-morgan-to-log-node-js-applications/",
+        "type": "article"
      }
    ]
  },
--- a/public/roadmap-content/postgresql-dba.json
+++ b/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"
      }
--- a/public/roadmap-content/python.json
+++ b/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"
      }
    ]
  },
@@ -328,7 +333,7 @@
    "links": [
      {
        "title": "Visit Dedicated DSA Roadmap",
-        "url": "https://roadmap.sh/data-structures-and-algorithms",
+        "url": "https://roadmap.sh/datastructures-and-algorithms",
        "type": "article"
      },
      {
--- a/public/roadmap-content/react.json
+++ b/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"
      }
    ]
  },
--- a/public/roadmap-content/technical-writer.json
+++ b/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",
--- a/public/roadmap-content/terraform.json
+++ b/public/roadmap-content/terraform.json
@@ -265,8 +265,19 @@
  },
  "76kp98rvph_8UOXZR-PBC": {
    "title": "Resource Lifecycle",
-    "description": "",
-    "links": []
+    "description": "Each Terraform resource is subject to the lifecycle: Create, Update or Recreate, Destroy. When executing `terraform apply`, each resource:\n\n*   which exists in configuration but not in state is created\n*   which exists in configuration and state and has changed is updated\n*   which exists in configuration and state and has changed, but cannot updated due to API limitation is destroyed and recreated\n*   which exists in state, but not (anymore) in configuration is destroyed\n\nThe lifecycle behaviour can be modified to some extend using the `lifecycle` meta argument.\n\nLearn more from the following resources:",
+    "links": [
+      {
+        "title": "How Terraform Applies a Configuration",
+        "url": "https://developer.hashicorp.com/terraform/language/resources/behavior#how-terraform-applies-a-configuration",
+        "type": "article"
+      },
+      {
+        "title": "The lifecycle Meta-Argument",
+        "url": "https://developer.hashicorp.com/terraform/language/meta-arguments/lifecycle",
+        "type": "article"
+      }
+    ]
  },
  "EIsex6gNHDRYHn0o2spzi": {
    "title": "depends_on",
@@ -495,7 +506,7 @@
        "type": "article"
      },
      {
-        "title": "@Article@Terraform Locals",
+        "title": "Terraform Locals",
        "url": "https://spacelift.io/blog/terraform-locals",
        "type": "article"
      }
@@ -550,7 +561,7 @@
  },
  "8giL6H5944M2L0rwxjPso": {
    "title": "Sensitive Outputs",
-    "description": "Terraform sensitive outputs are a feature used to protect sensitive information in Terraform configurations. When an output is marked as sensitive, Terraform obscures its value in the console output and state files, displaying it as \"\" instead of the actual value. This is crucial for protecting sensitive data like passwords or API keys.\n\nTo mark an output as sensitive, use the sensitive argument in the output block:\n\n    output \"database_password\" {\n      value     = aws_db_instance.example.password\n      sensitive = true\n    }\n    \n\nSensitive outputs are still accessible programmatically, but their values are hidden in logs and the console to prevent accidental exposure. This feature helps maintain security when sharing Terraform configurations or outputs with team members or in CI/CD pipelines.\n\nLearn more from the following resources:",
+    "description": "Terraform sensitive outputs are a feature used to protect sensitive information in Terraform configurations. When an output is marked as sensitive, Terraform obscures its value in the console output, displaying it as `<sensitive>` instead of the actual value. This is crucial for protecting sensitive data like passwords or API keys.\n\nTo mark an output as sensitive, use the sensitive argument in the output block:\n\n    output \"database_password\" {\n      value     = aws_db_instance.example.password\n      sensitive = true\n    }\n    \n\nSensitive outputs are still accessible programmatically and are written to the state in clear text, but their values are hidden in logs and the console to prevent accidental exposure. This feature helps maintain security when sharing Terraform configurations or outputs with team members or in CI/CD pipelines.\n\nLearn more from the following resources:",
    "links": [
      {
        "title": "How to output sensitive data in Terraform",
@@ -679,6 +690,11 @@
        "url": "https://developer.hashicorp.com/terraform/tutorials/cli/plan",
        "type": "course"
      },
+      {
+        "title": "Terraform Plan Documentation",
+        "url": "https://developer.hashicorp.com/terraform/cli/commands/plan",
+        "type": "article"
+      },
      {
        "title": "Terraform plan command and how it works",
        "url": "https://spacelift.io/blog/terraform-plan",
@@ -702,7 +718,7 @@
      },
      {
        "title": "Terraform Apply Documentation",
-        "url": "https://developer.hashicorp.com/terraform/cli/commands/plan",
+        "url": "https://developer.hashicorp.com/terraform/cli/commands/apply",
        "type": "article"
      },
      {
@@ -1091,7 +1107,7 @@
    "description": "Creating local modules in Terraform involves organizing a set of related resources into a reusable package within your project. To create a local module, you typically create a new directory within your project structure and place Terraform configuration files (`.tf`) inside it. These files define the resources, variables, and outputs for the module. The module can then be called from your root configuration using a module block, specifying the local path to the module directory. Local modules are useful for encapsulating and reusing common infrastructure patterns within a project, improving code organization and maintainability. They can accept input variables for customization and provide outputs for use in the calling configuration. Local modules are particularly beneficial for breaking down complex infrastructures into manageable, logical components and for standardizing resource configurations across a project.\n\nLearn more from the following resources:",
    "links": [
      {
-        "title": "Build and use a local moduke",
+        "title": "Build and use a local module",
        "url": "https://developer.hashicorp.com/terraform/tutorials/modules/module-create",
        "type": "article"
      },
@@ -1299,7 +1315,7 @@
  },
  "wSh7bbPswcFAzOicX8VPx": {
    "title": "state pull / push",
-    "description": "The `terraform state pull` and `terraform state push` commands are used for managing Terraform state in remote backends. The `pull` command retrieves the current state from the configured backend and outputs it to stdout, allowing for inspection or backup of the remote state. It's useful for debugging or for performing manual state manipulations.\n\nThe`push` command does the opposite, uploading a local state file to the configured backend, overwriting the existing remote state. This is typically used to restore a backup or to manually reconcile state discrepancies. Both commands should be used with caution, especially push, as they can potentially overwrite important state information.\n\nLearn more from the following resources:",
+    "description": "The `terraform state pull` and `terraform state push` commands are used for managing Terraform state in remote backends. The `pull` command retrieves the current state from the configured backend and outputs it to stdout, allowing for inspection or backup of the remote state. It's useful for debugging or for performing manual state manipulations.\n\nThe `push` command does the opposite, uploading a local state file to the configured backend, overwriting the existing remote state. This is typically used to restore a backup or to manually reconcile state discrepancies. Both commands should be used with caution, especially push, as they can potentially overwrite important state information.\n\nLearn more from the following resources:",
    "links": [
      {
        "title": "Command - State pull",
--- a/public/roadmap-content/typescript.json
+++ b/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",
@@ -1029,7 +1029,7 @@
    "links": [
      {
        "title": "Ambient Modules",
-        "url": "https://www.typescriptlang.org/docs/handbook/modules.html#ambient-modules",
+        "url": "https://www.typescriptlang.org/docs/handbook/modules/reference.html#ambient-modules",
        "type": "article"
      }
    ]
@@ -1079,7 +1079,7 @@
  },
  "fU8Vnw1DobM4iXl1Tq6EK": {
    "title": "Formatting",
-    "description": "Prettier is an opinionated code formatter with support for JavaScript, HTML, CSS, YAML, Markdown, GraphQL Schemas. By far the biggest reason for adopting Prettier is to stop all the on-going debates over styles.\n\nVisit the following resources to learn more:",
+    "description": "Prettier is an opinionated code formatter with support for JavaScript, HTML, CSS, YAML, Markdown, GraphQL Schemas. By far the biggest reason for adopting Prettier is to stop all the on-going debates over styles. Biome is a faster alternative to Prettier! (It also does linting!)\n\nVisit the following resources to learn more:",
    "links": [
      {
        "title": "Prettier Website",
@@ -1090,6 +1090,11 @@
        "title": "Why Prettier",
        "url": "https://prettier.io/docs/en/why-prettier.html",
        "type": "article"
+      },
+      {
+        "title": "BiomeJS Website",
+        "url": "https://biomejs.dev",
+        "type": "article"
      }
    ]
  },
--- a/public/roadmap-content/ux-design.json
+++ b/public/roadmap-content/ux-design.json
@@ -38,27 +38,55 @@
  },
  "zYCBEUqZVlvjlAKnh5cPQ": {
    "title": "Behavior Design",
-    "description": "Behavior Design is an approach that combines elements of psychology, neuroscience, and design principles to understand and influence human behaviors. The goal behind behavior design is to make it easier for users to accomplish their goals or desired actions within a product, service, or system.\n\nIn the context of UX Design, behavior design focuses on:\n\n*   **Motivation**: Understanding what motivates users to take action, such as personal interests, external rewards, or social influence.\n    \n*   **Ability**: Ensuring that users have the necessary skills, time, and resources to complete a desired action.\n    \n*   **Triggers**: Implementing well-timed prompts that encourage users to take a specific action within the interface.\n    \n\nTo create effective behavior designs, UX designers should:\n\n*   Identify user goals and desired outcomes.\n*   Analyze the user's environment and potential barriers that may affect their ability to complete the desired action.\n*   Design solutions that address both the motivation and ability aspects of behavior change, as well as the appropriate triggers to prompt action.\n*   Continuously test and iterate on the design to better understand user behavior and optimize engagement.\n\nBy focusing on behavior design, UX designers can create more engaging and user-friendly experiences that ultimately drive user satisfaction and increase the chances of achieving their desired goals.",
-    "links": []
+    "description": "Behavior Design is an approach that combines elements of psychology, neuroscience, and design principles to understand and influence human behaviors. The goal behind behavior design is to make it easier for users to accomplish their goals or desired actions within a product, service, or system.\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "Behavior Design",
+        "url": "https://www.interaction-design.org/literature/topics/behavioral-design",
+        "type": "article"
+      }
+    ]
  },
  "D553-nVELaB5gdxtoKSVc": {
    "title": "Behavioral Science",
-    "description": "Behavioral science is the interdisciplinary study of human behavior, which encompasses disciplines like psychology, sociology, and anthropology. This field- primarily focuses on understanding what impacts our decisions, actions, and emotions. In the context of UX design, applying behavioral science concepts and principles can enhance user experience by improving user engagement, usability, and overall satisfaction.\n\nSome key principles of behavioral science that UX designers should consider include:\n\n*   **Cognitive biases:** These are mental shortcuts our brains take when processing information which can lead to irrational decisions or judgments. Designers can use these biases to guide user behavior, as seen in the 'anchoring effect,' where users rely on the first piece of information provided on a page.\n    \n*   **Loss aversion:** People tend to prioritize avoiding losses over acquiring gains. Designers can use this to their advantage by highlighting potential losses that could occur without using a specific feature or product, increasing user motivation.\n    \n*   **Social proof:** People look to others for cues about how to behave in uncertain situations. To leverage this effect, designers can include testimonials, ratings, and user-generated content to demonstrate that others have found value in their product or service.\n    \n*   **Incentivization:** Users may be more likely to engage with a product if there are rewards or incentives for completing certain tasks. Gamifying an experience or offering exclusive benefits can encourage users to engage more deeply with the product.\n    \n*   **Choice architecture:** The way choices are presented influences users' decisions. Designers can use this to guide users to desired outcomes or simplify decision-making by reducing the number of options presented.\n    \n*   **Habit formation:** Creating a habit-forming experience can lead to increased user retention and engagement. Designers should consider features and elements that reinforce routine usage or solve recurring pain-points.\n    \n\nBy integrating behavioral science principles into their design process, UX designers can better understand and anticipate users' needs, ultimately creating more enjoyable, effective, and engaging experiences.",
-    "links": []
+    "description": "Behavioral science is the interdisciplinary study of human behavior, which encompasses disciplines like psychology, sociology, and anthropology. This field- primarily focuses on understanding what impacts our decisions, actions, and emotions. In the context of UX design, applying behavioral science concepts and principles can enhance user experience by improving user engagement, usability, and overall satisfaction.\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "Behavioral Science",
+        "url": "https://uxplanet.org/how-to-use-behavioral-science-to-influence-user-behavior-in-design-581dc0805f7c",
+        "type": "article"
+      },
+      {
+        "title": "Future of Behavioral Science",
+        "url": "https://behavioralscientist.org/what-is-the-future-of-design-and-behavioral-science-a-conversation-with-cliff-kuang/",
+        "type": "article"
+      }
+    ]
  },
  "_lv6GJ0wlMfhJ7PHRGQ_V": {
    "title": "Behavioral Economics",
-    "description": "Behavioral Economics is a subfield of economics that studies the psychological, social, and emotional factors that influence decision-making and economic behavior. It seeks to understand why people make choices that deviate from the traditional economic model, which assumes that individuals behave rationally and seek to maximize their utility.\n\nThe key concepts of Behavioral Economics include:\n\n*   Bounded Rationality: People make decisions based on limited information, cognitive constraints, and personal biases.\n    \n*   Prospect Theory: Individuals perceive losses and gains asymmetrically, feeling greater pain from a loss than satisfaction from an equivalent gain.\n    \n*   Anchoring: People tend to rely on a reference point (the anchor) when assessing the value of an unknown option, which can lead to arbitrary or irrational decisions.\n    \n*   Mental Accounting: Individuals mentally categorize and allocate expenses differently, which can lead to biases like the sunk cost fallacy or the endowment effect.\n    \n*   Nudging: Subtle changes to choice architecture can influence people's decisions without restricting their freedom of choice, through methods like default options, framing, or social proof.\n    \n\nUnderstanding and applying behavioral economic principles can help UX designers create interfaces and experiences that account for these biases and help users make better choices. By designing to minimize cognitive load, supporting decision-making, and presenting options effectively, UX designers can enhance user satisfaction and encourage desired actions.",
-    "links": []
+    "description": "Behavioral Economics is a subfield of economics that studies the psychological, social, and emotional factors that influence decision-making and economic behavior. It seeks to understand why people make choices that deviate from the traditional economic model, which assumes that individuals behave rationally and seek to maximize their utility.\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "Behavioral Economics",
+        "url": "https://www.interaction-design.org/literature/article/behavioural-economics-ideas-that-you-can-use-in-ux-design",
+        "type": "article"
+      }
+    ]
  },
  "2NlgbLeLBYwZX2u2rKkIO": {
    "title": "BJ Fogg's Behavior Model",
-    "description": "B.J. Fogg, a renowned psychologist, and researcher at Stanford University, proposed the [Fogg Behavior Model (FBM)](https://www.behaviormodel.org/). This insightful model helps UX designers understand and influence user behavior by focusing on three core elements. These key factors are motivation, ability, and prompts.\n\n*   **Motivation**: This element emphasizes the user's desire to perform a certain action or attain specific outcomes. Motivation can be linked to three core elements specified as sensation (pleasure/pain), anticipation (hope/fear), and social cohesion (belonging/rejection).\n    \n*   **Ability**: Ability refers to the user's capacity, both physical and mental, to perform desired actions. To enhance the ability of users, UX designers should follow the principle of simplicity. The easier it is to perform an action, the more likely users will engage with the product. Some factors to consider are time, financial resources, physical efforts, and cognitive load.\n    \n*   **Prompts**: Prompts are the cues, notifications, or triggers that signal users to take an action. For an action to occur, prompts should be presented at the right time when the user has adequate motivation and ability.\n    \n\nUX designers should strive to find the balance between these three factors to facilitate the desired user behavior. By understanding your audience and their needs, implementing clear and concise prompts, and minimizing the effort required for action, the FBM can be an effective tool for designing user-centered products.",
+    "description": "B.J. Fogg, a renowned psychologist, and researcher at Stanford University, proposed the Fogg Behavior Model (FBM). This insightful model helps UX designers understand and influence user behavior by focusing on three core elements. These key factors are motivation, ability, and prompts.\n\nVisit the following resources to learn more:",
    "links": [
      {
-        "title": "meaning of BJ fogg's behavior model",
+        "title": "Meaning of BJ Fogg's Behavior Model",
        "url": "https://behaviormodel.org/",
        "type": "article"
+      },
+      {
+        "title": "The Fogg Behavior Model",
+        "url": "https://blog.logrocket.com/ux-design/fogg-behavior-model/",
+        "type": "article"
      }
    ]
  },
@@ -85,8 +113,19 @@
  },
  "lRBC8VYJPsR65LHDuuIsL": {
    "title": "BJ Fogg's Behavior Grid",
-    "description": "The BJ Fogg Behavior Grid is a framework that helps UX designers, product managers, and marketers understand and identify different types of behavior change. Created by Stanford University professor B.J. Fogg, the grid consists of 15 behavior types based on the combination of three dimensions: Duration, Frequency, and Intensity.\n\nDuration\n--------\n\n*   **One-time behaviors**: These are behaviors that happen only once (e.g., signing up for an account).\n*   **Short-term behaviors**: Behaviors that take place for a limited period of time (e.g., using a trial version of a product).\n*   **Long-term behaviors**: Behaviors that are ongoing or happen repeatedly over a considerable time (e.g., continued use of a product).\n\nFrequency\n---------\n\n*   **Single-instance behaviors**: Behaviors that occur only one time per occasion (e.g., entering a password once to log in)\n*   **Infrequent behaviors**: Behaviors that do not happen regularly or happen sporadically (e.g., posting on social media once a week)\n*   **Frequent behaviors**: Behaviors that happen on a consistent and regular basis (e.g., checking email multiple times a day)\n\nIntensity\n---------\n\n*   **Low-stakes behaviors**: Behaviors that have little impact or are considered less important (e.g., choosing a profile picture)\n*   **Medium-stakes behaviors**: Behaviors that have moderate importance or impact (e.g., deciding how much personal information to share)\n*   **High-stakes behaviors**: Behaviors that have significant impact on the user's experience or perception of the product (e.g., making a purchase or canceling a subscription)\n\nUsing this grid, designers can classify user behaviors into different types and tailor their UX design strategies to target the specific behavior they want to encourage, change, or eliminate. Additionally, the Behavior Grid can be used to analyze and understand user motivations, triggers, and barriers, enabling designers to create more effective behavior change interventions.",
-    "links": []
+    "description": "The BJ Fogg Behavior Grid is a framework that helps UX designers, product managers, and marketers understand and identify different types of behavior change. Created by Stanford University professor B.J. Fogg, the grid consists of 15 behavior types based on the combination of three dimensions: Duration, Frequency, and Intensity.\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "BJ Fogg’s Behavior Grid",
+        "url": "https://behaviordesign.stanford.edu/resources/fogg-behavior-grid",
+        "type": "article"
+      },
+      {
+        "title": "The Fogg Behavior Model",
+        "url": "https://blog.logrocket.com/ux-design/fogg-behavior-model/",
+        "type": "article"
+      }
+    ]
  },
  "PLLTcrHkhd1KYaMSRKALp": {
    "title": "Nir Eyal's Hook Model",
@@ -136,8 +175,14 @@
  },
  "ZufrLRNkMoJ4e2T-vWxCR": {
    "title": "Automate the Act of Repetition",
-    "description": "As a UX designer, one of your main goals is to simplify and streamline user interactions. Often, users are required to perform repetitive tasks, which can lead to frustration and decrease efficiency. To enhance the user experience and ensure smooth sailing, it's essential to reduce or eliminate the need for repeated actions by automating repetitive tasks wherever possible.\n\nBenefits of Automation\n----------------------\n\nWhen properly implemented, automation can:\n\n*   Save time: By cutting down on repeated actions, users can complete tasks more quickly, increasing productivity.\n*   Reduce errors: Automating tasks can minimize human error and ensure that actions are completed correctly every time.\n*   Improve user satisfaction: Reducing tedious tasks can lead to a more positive user experience and increase user retention.\n\nStrategies for Automation\n-------------------------\n\nAs a UX designer, consider the following strategies to automate repetitive tasks:\n\n*   **Pre-fill forms**: Auto-fill form fields with the information that the user has entered previously or is likely to enter, such as their name, email address, or phone number. This can save users time and effort in filling out forms.\n*   **Remember user preferences**: Store user settings and preferences, such as preferred language, currency, or theme, so that users don't have to set them again every time they visit your site or app.\n*   **Smart suggestions**: Implement predictive text or auto-suggestions based on user input or past behavior. For example, when typing search queries or filling out forms, users may appreciate suggestions to help them complete their task quickly.\n*   **Batch actions**: Allow users to perform actions, like selecting or deleting items, in groups rather than individually. This can significantly reduce the number of clicks and time required to complete the task.\n*   **Keyboard shortcuts**: Provide keyboard shortcuts for common actions, enabling users to perform tasks without using a mouse or touch interactions. This can be particularly helpful for power users or users with accessibility needs.\n\nBy automating acts of repetition in your design, you can enhance the user experience, reduce frustration and improve overall satisfaction. Be mindful of your users' needs, analyze the repetitive tasks they may encounter, and implement effective automation techniques to create a seamless, efficient, and enjoyable experience.",
-    "links": []
+    "description": "To enhance user experience and streamline interactions, it's crucial to automate repetitive tasks that often lead to frustration and decreased efficiency. Properly implemented automation can save time, reduce errors, and improve user satisfaction by minimizing tedious actions. As a UX designer, consider strategies such as pre-filling forms with previously entered information, remembering user preferences, providing smart suggestions based on past behavior, enabling batch actions for group tasks, and offering keyboard shortcuts for common actions. By focusing on these automation techniques, you can create a seamless and enjoyable experience that meets users' needs and increases retention.\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "Repeating Elements",
+        "url": "https://helpx.adobe.com/au/xd/help/create-repeating-elements.html",
+        "type": "article"
+      }
+    ]
  },
  "y6CqgqTvOt-LrvTnPJkQQ": {
    "title": "Make or Change Habits",
@@ -171,8 +216,14 @@
  },
  "w_QWN80zCf1tsVROeyuvo": {
    "title": "Behavior Change Strategies",
-    "description": "Behavior change strategies are techniques that aim to help users adopt new behaviors or break existing ones to achieve specific goals, such as healthier lifestyles or improved productivity. In UX design, these strategies are applied to design elements and features within digital products or services to motivate and support users in making lasting changes in their actions.\n\nHere are some key behavior change strategies often employed in UX design:\n\n*   **Goal Setting:** Asking users to set specific, measurable, achievable, relevant, and time-bound (SMART) goals can help them focus their efforts and track their progress.\n    \n*   **Feedback and Rewards:** Providing users with real-time feedback on their progress and rewarding them with positive reinforcement (e.g., badges or points) can increase motivation and engagement.\n    \n*   **Social Comparisons:** Facilitating comparisons between users or groups can tap into social influence and normative pressure, encouraging behavior change through competition or collaboration.\n    \n*   **Reminders and Prompts:** Sending timely reminders or prompts can help reinforce desired behaviors by making them more salient and top of mind.\n    \n*   **Choice Architecture:** Structuring the presentation of options, defaults, and information can nudge users towards better decisions without restricting their freedom of choice.\n    \n*   **Modeling and Stories:** Demonstrating desired behaviors through role models, cases, testimonials or stories can provide inspiration and social proof that change is possible and desirable.\n    \n*   **Progressive Disclosure:** Gradually introducing advanced features, content or challenges can help users build their skills and confidence, preventing them from feeling overwhelmed or disengaged.\n    \n*   **Personalization and Tailoring:** Customizing content or recommendations based on a user's preferences, history or characteristics can make interventions more relevant and effective.\n    \n\nBy incorporating these behavior change strategies in your UX design, you improve the chances of users successfully adopting the desired behaviors, which can ultimately lead to a more positive and effective user experience.",
-    "links": []
+    "description": "Behavior change strategies are techniques that aim to help users adopt new behaviors or break existing ones to achieve specific goals, such as healthier lifestyles or improved productivity. In UX design, these strategies are applied to design elements and features within digital products or services to motivate and support users in making lasting changes in their actions.\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "Behavioral Change Strategies",
+        "url": "https://blog.logrocket.com/ux-design/starter-guide-behavioral-design/",
+        "type": "article"
+      }
+    ]
  },
  "q1WX2Cp4k4-o1T1vgL8FH": {
    "title": "Understanding the Product",
@@ -201,8 +252,14 @@
  },
  "SGO9hHju49_py0n0ASGBe": {
    "title": "Business Model Canvas",
-    "description": "The **Business Model Canvas** is a strategic management and visual representation tool that allows you to describe, design, challenge, and pivot your existing business model. Developed by Alexander Osterwalder and Yves Pigneur, it helps organizations to understand how they create, deliver, and capture value. The canvas is divided into nine building blocks, which represent the essential elements of a business model:\n\n*   **Customer Segments (CS):** These are the target groups your business aims to serve, such as specific users, organizations, or market segments.\n*   **Value Propositions (VP):** The unique combinations of products and services that create value for your customer segments. It describes the reasons why customers choose your product or service over your competitors'.\n*   **Channels (CH):** The means by which your company communicates, delivers, and distributes its value propositions to the customers. This block includes both physical (e.g., stores) and virtual (e.g., online) channels.\n*   **Customer Relationships (CR):** The type of relationships your business establishes and maintains with its customer segments, such as personal assistance, self-service, or automated services.\n*   **Revenue Streams (RS):** The ways in which your company generates revenue from each customer segment, such as through sales, subscriptions, or advertising fees.\n*   **Key Resources (KR):** The most important assets needed to make your business model work, including physical, financial, intellectual, and human resources.\n*   **Key Activities (KA):** The primary actions your company must perform to deliver its value propositions, reach its customer segments, and maintain customer relationships. These can involve production, problem-solving, or service provision.\n*   **Key Partnerships (KP):** The network of suppliers, partners, and allies that help your business execute its key activities, optimize resources, and reduce risks.\n*   **Cost Structure (CS):** The major expenses associated with operating your business model, such as fixed and variable costs, economies of scale, and cost advantages.\n\nWhen designing or analyzing an existing business model, the Business Model Canvas enables you to visually map out all these critical components and understand how they are interconnected. By understanding your current business model, you can identify weaknesses, opportunities for improvement, and potential pivots to enhance the overall user experience and the success of the business.",
-    "links": []
+    "description": "The **Business Model Canvas** is a strategic management and visual representation tool that allows you to describe, design, challenge, and pivot your existing business model. Developed by **Alexander Osterwalder** and **Yves Pigneur**, it helps organizations to understand how they create, deliver, and capture value. The canvas is divided into nine building blocks, which represent the essential elements of a business model:\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "Business Model Canvas",
+        "url": "https://www.interaction-design.org/literature/topics/business-model-canvas",
+        "type": "article"
+      }
+    ]
  },
  "sc8jJ_77CrkQuxIJYk28Q": {
    "title": "Lean Canvas",
@@ -211,8 +268,14 @@
  },
  "GI06-DbGyJlQXq5Tyi-aH": {
    "title": "Business Model Inspirator",
-    "description": "A Business Model Inspirator is a tool or method that helps you to generate new or creative ideas for the strategic, operational, and financial aspects of a business. It helps entrepreneurs, startups, and established companies to explore different ways of designing or improving their business models by drawing inspiration from various sources.\n\nSome key aspects of Business Model Inspirators include:\n\n*   **Analyze Successful Models**: Look at successful companies from diverse industries to identify the core elements that made their business models successful. Understanding these elements can spark ideas for your own business model.\n    \n*   **Cross-Pollination**: Combine elements from various industries and business models to create an innovative approach that suits your specific domain. This process can lead to the development of a unique value proposition and competitive advantage.\n    \n*   **Experimentation**: Test different ideas to find the most feasible and scalable business model by iteratively prototyping, validating, and refining the model based on user/client feedback.\n    \n*   **Futuristic Thinking**: Stay aware of emerging trends, technologies, and structural changes in society that might affect your industry or target market. Use foresight to adapt your business model to future opportunities and challenges.\n    \n*   **Adaptability**: Be ready to pivot or evolve your business model based on changing market dynamics, user preferences, competitive forces, and other external factors. Developing a flexible business model is crucial to ensure long-term success and sustainability.\n    \n\nImplementing a Business Model Inspirator can contribute to the creation of a more innovative and robust UX design, ultimately leading to enhanced customer experiences, increased revenue, and long-term success for your brand.",
-    "links": []
+    "description": "A Business Model Inspirator is a tool or method that helps you to generate new or creative ideas for the strategic, operational, and financial aspects of a business. It helps entrepreneurs, startups, and established companies to explore different ways of designing or improving their business models by drawing inspiration from various sources.\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "Business Model Inspirator",
+        "url": "https://businessdesign.org/knowledge-base/business-model-inspirator",
+        "type": "article"
+      }
+    ]
  },
  "HUZ5n2MRHzQPyjwX2h6Q4": {
    "title": "Competitor Analysis",
@@ -281,8 +344,19 @@
  },
  "jy5jtSEyNE8iJpad27rPX": {
    "title": "Business Process Model & Notation (BPMN)",
-    "description": "Business Process Model and Notation (BPMN) is a graphical representation of business processes, providing a standardized and easy-to-understand method for visualizing different aspects of a business. By using BPMN, UX designers can analyze and optimize business processes and workflows, which ultimately improves the overall user experience.\n\nKey Components of BPMN\n----------------------\n\n*   Flow Objects: Main building blocks of a BPMN diagram, which include events, activities, and gateways.\n*   Connecting Objects: Linking elements between flow objects, such as sequence flows, message flows, and associations.\n*   Swimlanes: Visual elements that help organize activities based on roles or responsibilities.\n*   Artifacts: Supplementary elements providing additional information, such as data objects, groupings, and annotations.\n\nBenefits of BPMN for UX Design\n------------------------------\n\n*   **Visualization**: BPMN offers a clear visual layout of business processes, allowing UX designers to understand the overall structure easily.\n*   **Standardization**: As an internationally recognized standard, BPMN ensures consistent interpretation and communication among team members.\n*   **Flexibility**: BPMN can accommodate various levels of complexity, enabling designers to model simple or complex processes as needed.\n*   **Collaboration**: By bridging the gap between technical and non-technical stakeholders, BPMN empowers cross-functional collaboration throughout the design process.\n\nTo incorporate BPMN in your UX design process, you'll need to familiarize yourself with its various elements and syntax. Consider leveraging BPMN tools and resources to create diagrams that accurately represent your target user's needs and the corresponding business processes. By doing so, you'll be able to craft a more precise and effective user experience.",
-    "links": []
+    "description": "Business Process Model and Notation (BPMN) is a graphical representation of business processes, providing a standardized and easy-to-understand method for visualizing different aspects of a business. By using BPMN, UX designers can analyze and optimize business processes and workflows, which ultimately improves the overall user experience.\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "Business Process Model and Notation (BPMN)",
+        "url": "https://aguayo.co/en/blog-aguayp-user-experience/business-process-model-notation-for-ux/",
+        "type": "article"
+      },
+      {
+        "title": "How to Design BPNM",
+        "url": "https://devlight.io/blog/how-to-design-business-process-model-and-notation-for-a-mobile-app/",
+        "type": "article"
+      }
+    ]
  },
  "6yCBFwntQ_KxFmmGTJ8iR": {
    "title": "Prototyping",
@@ -301,8 +375,24 @@
  },
  "HI_urBhPqT0m3AeBQJIej": {
    "title": "Adobe XD",
-    "description": "Adobe XD (Experience Design) is a powerful design and prototyping tool that allows UX designers to create wireframes, mockups, and interactive prototypes for various digital projects. It is available for both Mac and Windows, and it focuses on providing an easy-to-use, intuitive interface for designing responsive websites, mobile apps, and more.\n\nKey Features of Adobe XD\n------------------------\n\n*   **Design tools**: Adobe XD offers a set of powerful design tools, such as vector drawing, the ability to import images, and a range of pre-defined UI components to help you create aesthetically pleasing designs. The built-in grid system allows for precise alignment and consistency across your designs.\n    \n*   **Responsive artboards**: XD allows you to create multiple artboards for different devices and screen sizes. This enables you to visualize and design in one go, for multiple device types.\n    \n*   **Prototype and Interactions**: With Adobe XD, you can easily add interactions to your designs. This helps in better communication of your ideas and makes it easier for clients and developers to understand your vision. The preview mode enables you to test your prototype and see the interactions in real-time.\n    \n*   **Collaboration and Sharing**: Adobe XD simplifies collaboration between team members, stakeholders, and developers. You can create shared design specs and live URLs for your prototypes, gather feedback, and even co-edit documents with other designers in real-time.\n    \n*   **Integrations**: XD seamlessly integrates with other Adobe Creative Cloud applications, such as Photoshop, Illustrator, and After Effects, enabling smoother workflows and consistency across your designs. It also supports third-party plugins to expand its capabilities.\n    \n\nTo get started with Adobe XD, you'll need to download and install the application from the [Adobe Creative Cloud website](https://www.adobe.com/products/xd.html). Adobe offers a free basic plan for XD, which allows you to work on one shared document at a time and a limited number of shared prototypes and design specs.\n\nAs a designer, familiarizing yourself with Adobe XD's features and learning how to effectively use it can significantly improve your design process, making your wireframing and prototyping tasks quicker and more efficient.",
-    "links": []
+    "description": "Adobe XD (Experience Design) is a powerful design and prototyping tool that allows UX designers to create wireframes, mockups, and interactive prototypes for various digital projects. It is available for both Mac and Windows, and it focuses on providing an easy-to-use, intuitive interface for designing responsive websites, mobile apps, and more.\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "Adobe XD Platform",
+        "url": "https://adobexdplatform.com/",
+        "type": "article"
+      },
+      {
+        "title": "Getting Started with Adobe XD",
+        "url": "https://helpx.adobe.com/xd/get-started.html",
+        "type": "article"
+      },
+      {
+        "title": "Learn Adobe XD",
+        "url": "https://www.adobe.com/ph_en/products/xd/learn/get-started-xd-design.html",
+        "type": "article"
+      }
+    ]
  },
  "nb7Ql1gvxqEucsGnIWTyY": {
    "title": "Sketch",
@@ -311,8 +401,14 @@
  },
  "fZkARg6kPXPemYW1vDMTe": {
    "title": "Balsamiq",
-    "description": "Balsamiq is a popular wireframing tool that helps designers, developers, and product managers to quickly create and visualize user interfaces, web pages, or app screens. It's an easy-to-use software that allows you to focus on ideas and concepts rather than getting caught up in pixel-perfect designs.\n\n**Key Features of Balsamiq**",
-    "links": []
+    "description": "Balsamiq is a popular wireframing tool that helps designers, developers, and product managers to quickly create and visualize user interfaces, web pages, or app screens. It's an easy-to-use software that allows you to focus on ideas and concepts rather than getting caught up in pixel-perfect designs.\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "Balsamiq Website",
+        "url": "https://balsamiq.com/",
+        "type": "article"
+      }
+    ]
  },
  "U4ZEFUcghr9XjSyf-0Np7": {
    "title": "Call to Action",
@@ -341,8 +437,14 @@
  },
  "JSBiw0C6aq1LhA33y79PM": {
    "title": "Behavior Change Games",
-    "description": "Behavior change games are a powerful UX design pattern that help users adopt new habits or make positive lifestyle changes. These games are typically designed to be engaging, enjoyable, and motivating, utilizing various game elements and mechanics to encourage users to take desired actions.\n\nKey elements of behavior change games\n-------------------------------------\n\n*   **Set clear objectives**: Define specific goals users should achieve, such as losing weight or learning a new skill. Well-defined objectives provide a strong focus for the game and encourage user engagement.\n    \n*   **Feedback and progress**: Provide real-time feedback and track user progress to create a sense of accomplishment. This can include visual cues, points, badges, or leveling up systems.\n    \n*   **Social interaction**: Utilize social features, such as sharing achievements, comparing results with friends, or team challenges. This enables users to work together, fosters a sense of community, and enhances motivation through friendly competition.\n    \n*   **Reward system**: Implement a reward system that grants virtual or real rewards for completing tasks or reaching milestones. These rewards can be intrinsic (e.g., personal satisfaction) or extrinsic (e.g., discounts or prizes).\n    \n*   **Gamification**: Incorporate game-like elements, such as storytelling, quests, or time-limited challenges. These elements add an entertaining aspect, improve user experience, and make the behavior change process more enjoyable.\n    \n\nBenefits of behavior change games\n---------------------------------\n\n*   **Increased motivation**: By turning the behavior change process into a game, users are often more motivated to participate and stay engaged.\n    \n*   **Higher user retention**: Engaging games can increase user retention, resulting in higher long-term success rates for behavior change.\n    \n*   **Measurable results**: These games allow users to easily track progress and outcomes, helping them understand the impact of their actions and reinforcing positive behavior.\n    \n*   **Personalization**: Games can be tailored to individual users' preferences and play styles, making the experience more enjoyable and relevant.\n    \n*   **Support network**: The inclusion of social features creates a community of support, forging connections between individuals with similar goals and fostering accountability.\n    \n\nWhen designing behavior change games, it's essential to keep user experience in mind, and create an enjoyable and motivating experience. Balancing fun and educational elements can result in a powerful tool for guiding users towards positive change in their lives.",
-    "links": []
+    "description": "Behavior change games are a powerful UX design pattern that help users adopt new habits or make positive lifestyle changes. These games are typically designed to be engaging, enjoyable, and motivating, utilizing various game elements and mechanics to encourage users to take desired actions. When designing behavior change games, it's essential to keep user experience in mind, and create an enjoyable and motivating experience. Balancing fun and educational elements can result in a powerful tool for guiding users towards positive change in their lives.\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "Behavioral Change Games",
+        "url": "https://medium.com/@jgruver/designing-for-behavioral-change-a-new-approach-in-ux-ui-design-59f9fb0086d1",
+        "type": "article"
+      }
+    ]
  },
  "fbIur1tEIdNDE6gls4Bru": {
    "title": "Gamification",
@@ -411,8 +513,14 @@
  },
  "m30ePaw_qa36m9Rv9NSFf": {
    "title": "Be Authentic and Personal",
-    "description": "When creating a user experience (UX) design, it's essential to be authentic and personal. This means that your design should be genuine, truthful, and relatable to your users. By being authentic and personal, you can create a positive intuitive reaction in your users, as they feel connected and engaged with your website or application. Here are some tips to make your UX design authentic and personal:\n\n#### 1\\. Understand your user persona(s)\n\nBefore you start designing, define your target audience and create user personas that represent them. This may include their age, gender, occupation, interests, and pain points. By understanding the different personas, you can create a design that resonates with each of them, meeting their needs and expectations.\n\n#### 2\\. Use natural and conversational language\n\nTo make your design personal, use natural and conversational language that speaks directly to your users. Avoid jargons, buzzwords, or overly formal language that can create a barrier between you and your users. Your users should be able to understand the content and interact with it smoothly.\n\n#### 3\\. Employ appropriate imagery and visuals\n\nTo enhance authenticity, incorporate images and graphics that are relevant and relatable to your target audience. This means using high-quality, real-life pictures of people or objects that genuinely represent your brand or product. Avoid overused stock images, as they can significantly decrease the perceived authenticity of your design.\n\n#### 4\\. Make emotional connections\n\nEmotions play a vital role in creating personal connections with users. In your design, use color schemes, fonts, and visual elements that evoke emotions and encourage users to form an emotional attachment to your product or brand. The more emotionally invested users are, the more positive their intuitive reactions will be.\n\n#### 5\\. Consistency in design elements\n\nAn authentic user experience is characterized by consistency in design elements, including typography, colors, and visual hierarchy. This consistency helps users feel reassured and comfortable, as they can easily understand and navigate through the design.\n\n#### 6\\. Provide personalized experiences\n\nTo create an authentic UX design, offer personalized experiences to your users based on their preferences, browsing history, or other data. This might include recommending content they may be interested in or tailoring the website layout to meet their specific needs.\n\nBy being authentic and personal in your UX design, you can create a positive and memorable experience for your users. By understanding your target audience, using natural language, incorporating engaging visuals, and providing personalized experiences, you can foster user engagement, trust, and loyalty towards your product or brand.",
-    "links": []
+    "description": "When creating a user experience (UX) design, it's essential to be authentic and personal. This means that your design should be genuine, truthful, and relatable to your users. By being authentic and personal, you can create a positive intuitive reaction in your users, as they feel connected and engaged with your website or application.\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "Rethinking Personas",
+        "url": "https://uxdesign.cc/rethinking-personas-empathy-and-inclusion-in-ux-design-37145d2ee807",
+        "type": "article"
+      }
+    ]
  },
  "jBQtuiHGl3eyCTZG85Vz5": {
    "title": "Prime User-Relevant Associations",
@@ -436,18 +544,41 @@
  },
  "4AzPOKXUN32CkgchRMrRY": {
    "title": "Avoid Cognitive Overhead",
-    "description": "Cognitive overhead refers to the mental effort needed to understand or operate a given system, tool, or interface. In UX design, it is crucial to minimize cognitive overhead to create user-friendly and efficient experiences. The less mental effort a user needs to invest, the more likely they will have a positive conscious evaluation of your design. Here are three key strategies to help you avoid cognitive overhead in your designs:\n\n#### 1\\. Keep it simple\n\nA clutter-free, clean, and easy-to-navigate design is always a good starting point. In order to keep cognitive overhead to a minimum, focus on simplifying both the interface and the content:\n\n*   Utilize white space: By providing ample space between functional elements, you make it easier for users to scan and process the interface.\n*   Reduce the number of options: Offering too many choices can overwhelm users or cause them to second-guess their decisions. Aim for a balance of ease and functionality.\n\n#### 2\\. Establish a clear hierarchy\n\nA well-structured hierarchy helps users navigate your design and understand the relationship between elements. This reduces cognitive overhead as users don't have to work hard to make sense of the interface:\n\n*   Organize content logically: Group related items together and place them in a consistent order.\n*   Use size, color, and typography effectively: Make important information stand out and use visual cues to indicate less important elements.\n\n#### 3\\. Provide clear & concise instructions\n\nYour design should guide users effortlessly, which can be achieved by providing clear directions or prompts:\n\n*   Use actionable language: Be precise and direct with your wording, and avoid using jargon.\n*   Offer visual cues & feedback: Include well-placed icons, highlighted sections, or animation to support the user's actions and indicate the outcome of those actions.\n\nIn summary, reducing cognitive overhead in your UX design is essential to create an efficient and user-friendly experience. Adopt a simple and clean design, establish a clear hierarchy, and provide helpful instructions to ensure more favorable conscious evaluations from your users.",
-    "links": []
+    "description": "Cognitive overhead refers to the mental effort needed to understand or operate a given system, tool, or interface. In UX design, it is crucial to minimize cognitive overhead to create user-friendly and efficient experiences. The less mental effort a user needs to invest, the more likely they will have a positive conscious evaluation of your design.\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "Cognitive Overload",
+        "url": "https://blog.logrocket.com/ux-design/cognitive-overload/",
+        "type": "article"
+      },
+      {
+        "title": "Reducing Cognitive Overload",
+        "url": "https://uxdesign.cc/reducing-cognitive-overload-designing-for-human-cognition-350f07cff9c4",
+        "type": "article"
+      }
+    ]
  },
  "8wxlu4KA2iu9CJa1UAUll": {
    "title": "Avoid Choice Overload",
-    "description": "Choice overload is a phenomenon that occurs when users are presented with too many options, causing decision paralysis, anxiety, and ultimately, dissatisfaction with their final choice. As a UX designer, it's essential to ensure that users can easily make decisions within your designs, so it's important to avoid choice overload. In this section, we'll discuss some strategies for managing the number of options and streamlining decision-making processes for users.\n\nLimit the Number of Options\n---------------------------\n\nResearch has shown that a user's ability to make decisions decreases as the number of options increases. To avoid overwhelming users, aim to present no more than 5-7 options at a time. This can be applied to menus, product listings, or any other area where users are asked to make a selection. Remember to prioritize the most important or commonly used options and make them more prominent within the design.\n\nCategorize and Organize Options\n-------------------------------\n\nWhen users are presented with multiple choices, it's crucial to make it easy for them to understand and differentiate between the available options. By categorizing and organizing options into logical groups, users can more quickly find the information or functionality they need. Consider using headings, icons, or other visual cues to assist in organizing content effectively.\n\nImplement Smart Defaults\n------------------------\n\nTo help users make decisions quicker, consider setting default selections for certain choices. By pre-selecting the most commonly used or recommended option, users can easily accept the default if it aligns with their needs, or quickly change it if necessary. This not only saves time and effort for the user, but it can also guide them towards an optimal outcome based on their needs.\n\nAdvanced Filtering and Sorting Options\n--------------------------------------\n\nIf your design requires users to make complex decisions, such as choosing a product from an extensive catalog, consider implementing advanced filtering and sorting options. By giving users the ability to refine their options based on specific attributes, they can more easily identify the best option for their needs. Make sure these filtering options are easy to understand and use, and provide clear feedback on the number of results remaining as users adjust their filters.\n\nBy being mindful of choice overload and implementing these strategies, you can create a more enjoyable and user-friendly experience for your users. Remember, the goal is to make their decision-making process as seamless and stress-free as possible.",
-    "links": []
+    "description": "Choice overload occurs when users face too many options, leading to decision paralysis, anxiety, and dissatisfaction. As a UX designer, it's important to simplify decision-making by limiting the number of options to 5-7 at a time, prioritizing the most relevant choices. Organizing options into logical categories with visual cues can help users navigate their selections more easily. Implementing smart defaults can streamline decisions by pre-selecting commonly used options, while advanced filtering and sorting features allow users to refine their choices in complex scenarios. By addressing choice overload with these strategies, you can enhance user experience and facilitate a more seamless decision-making process.\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "Choice of Overload",
+        "url": "https://medium.com/@evamiller091/the-impact-of-choice-overload-in-ux-f5defb6cee5d",
+        "type": "article"
+      }
+    ]
  },
  "iQNvKhwhvbis4Yn1ZxQua": {
    "title": "Avoid Direct Payments",
-    "description": "Avoiding direct payments is a crucial aspect of UX design that can lead to favorable conscious evaluations from users. Direct payments refer to instances where users are required to pay for your product or service upfront, which can create a negative perception and less willingness to engage. By finding alternative ways to monetize or offer premium features, you can create an enjoyable experience and encourage users to appreciate and invest in your offerings without feeling forced.\n\nWhy it Matters?\n---------------\n\n*   **Trust-Building**: When users are not asked to pay upfront or have no hidden costs, they are more likely to trust your product or service, increasing the likelihood of loyal customers.\n*   **Accessibility**: Making your offerings available without direct payments ensures a larger and more diverse audience can experience the value your product provides, which can lead to increased traffic and eventual conversions.\n*   **Reduced churn**: Users who do not feel \"locked-in\" by having to pay upfront are less likely to abandon your product or service in search of alternative solutions.\n\nStrategies to Avoid Direct Payments\n-----------------------------------\n\n*   **Offer a free trial**: Provide users with a limited-time free trial of your product or service to showcase its value and encourage them to invest once the trial is over.\n*   **Freemium model**: Allow users to access basic features of your product for free, while offering premium features at a cost. This model lets users experience your offerings without having to pay upfront and gives them the option to upgrade if they find value in it.\n*   **In-app purchases**: Incorporate in-app purchases within your product, which enables users to access premium features and benefits without being forced to pay upfront.\n*   **Subscriptions**: Offer subscriptions as an alternative payment method that allows users to access premium features and receive updates frequently, creating a sense of loyalty and commitment.\n*   **Pay-as-you-go or usage-based pricing**: Implement a flexible pricing model where users only pay for what they use or when they use a specific feature, removing the barrier of direct payments and increasing user satisfaction.\n\nBy avoiding direct payments and implementing these strategies, a UX designer can create a user experience that fosters trust, accessibility, and user engagement. By doing so, you increase the likelihood of gaining favorable conscious evaluations of your product, ultimately leading to long-term success.",
-    "links": []
+    "description": "Avoiding direct payments is a crucial aspect of UX design that can lead to favorable conscious evaluations from users. Direct payments refer to instances where users are required to pay for your product or service upfront, which can create a negative perception and less willingness to engage. By finding alternative ways to monetize or offer premium features, you can create an enjoyable experience and encourage users to appreciate and invest in your offerings without feeling forced.\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "Payment UX Best Practices",
+        "url": "https://gocardless.com/guides/posts/payment-ux-best-practices/",
+        "type": "article"
+      }
+    ]
  },
  "S9rJr8pc-Ln8BxG0suBWa": {
    "title": "Frame Text to Avoid Temporal Myopia",
--- a/public/roadmap-content/vue.json
+++ b/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"
      },
--- a/src/components/Analytics/Analytics.astro
+++ b/src/components/Analytics/Analytics.astro
@@ -2,16 +2,12 @@
 ---

 <script src='./analytics.ts'></script>
-<script async src='https://www.googletagmanager.com/gtag/js?id=UA-139582634-1'
-></script>
+<script async src="https://www.googletagmanager.com/gtag/js?id=G-EZHDT2S2LF"></script>
 <script is:inline>
-  // @ts-nocheck
-  window.dataLayer = window.dataLayer || [];
+    // @ts-nocheck
+    window.dataLayer = window.dataLayer || [];
+    function gtag(){dataLayer.push(arguments);}
+    gtag('js', new Date());

-  function gtag() {
-    dataLayer.push(arguments);
-  }
-
-  gtag('js', new Date());
-  gtag('config', 'UA-139582634-1');
-</script>
+    gtag('config', 'G-EZHDT2S2LF');
+</script>
--- a/src/components/AuthenticationFlow/GitHubButton.tsx
+++ b/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);
--- a/src/components/AuthenticationFlow/GoogleButton.tsx
+++ b/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;

--- a/src/components/AuthenticationFlow/LinkedInButton.tsx
+++ b/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;

--- a/src/components/AuthenticationFlow/TriggerVerifyAccount.tsx
+++ b/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 = '/';
      })
--- a/src/components/FrameRenderer/renderer.ts
+++ b/src/components/FrameRenderer/renderer.ts
@@ -57,7 +57,7 @@ export class Renderer {
    }

    // Clone it so we can use it later
-    this.loaderHTML = this.loaderEl!.innerHTML;
+    this.loaderHTML = this.loaderEl?.innerHTML!;
    const dataset = this.containerEl.dataset;

    this.resourceType = dataset.resourceType!;
@@ -66,11 +66,7 @@ export class Renderer {
    return true;
  }

-  /**
-   * @param { string } jsonUrl
-   * @returns {Promise<SVGElement>}
-   */
-  jsonToSvg(jsonUrl: string) {
+  jsonToSvg(jsonUrl: string): Promise<void> | null {
    if (!jsonUrl) {
      console.error('jsonUrl not defined in frontmatter');
      return null;
--- a/src/components/GenerateRoadmap/RoadmapTopicDetail.tsx
+++ b/src/components/GenerateRoadmap/RoadmapTopicDetail.tsx
@@ -124,7 +124,7 @@ export function RoadmapTopicDetail(props: RoadmapTopicDetailProps) {
  const openAIKey = getOpenAIKey();

  return (
-    <div className={'relative z-[90]'}>
+    <div className={'relative z-[92]'}>
      <div
        ref={topicRef}
        tabIndex={0}
--- a/src/components/OnboardingNudge.tsx
+++ b/src/components/OnboardingNudge.tsx
@@ -2,6 +2,8 @@ import { cn } from '../lib/classname.ts';
 import { memo, useEffect, useState } from 'react';
 import { useScrollPosition } from '../hooks/use-scroll-position.ts';
 import { X } from 'lucide-react';
+import { isOnboardingStripHidden } from '../stores/page.ts';
+import { useStore } from '@nanostores/react';

 type OnboardingNudgeProps = {
  onStartOnboarding: () => void;
@@ -14,6 +16,7 @@ export function OnboardingNudge(props: OnboardingNudgeProps) {

  const [isLoading, setIsLoading] = useState(false);

+  const $isOnboardingStripHidden = useStore(isOnboardingStripHidden);
  const { y: scrollY } = useScrollPosition();

  useEffect(() => {
@@ -30,10 +33,14 @@ export function OnboardingNudge(props: OnboardingNudgeProps) {
    return null;
  }

+  if ($isOnboardingStripHidden) {
+    return null;
+  }
+
  return (
    <div
      className={cn(
-        'fixed left-0 right-0 top-0 z-[91] flex w-full items-center justify-center bg-yellow-300 border-b border-b-yellow-500/30 pt-1.5 pb-2',
+        'fixed left-0 right-0 top-0 z-[91] flex w-full items-center justify-center border-b border-b-yellow-500/30 bg-yellow-300 pb-2 pt-1.5',
        {
          'striped-loader': isLoading,
        },
--- a/src/components/PageSponsor.tsx
+++ b/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 (
@@ -136,10 +147,13 @@ export function PageSponsor(props: PageSponsorProps) {
      rel="noopener sponsored nofollow"
      className="fixed bottom-0 left-0 right-0 z-50 flex bg-white shadow-lg outline-0 outline-transparent sm:bottom-[15px] sm:left-auto sm:right-[15px] sm:max-w-[350px]"
      onClick={async () => {
+        const labelValue = gaLabel || `${gaPageIdentifier} / ${company} Link`;
+
        window.fireEvent({
          category: 'SponsorClick',
          action: `${company} Redirect`,
-          label: gaLabel || `${gaPageIdentifier} / ${company} Link`,
+          label: labelValue,
+          value: labelValue,
        });
        await clickSponsor(sponsorId || '');
      }}
@@ -149,6 +163,8 @@ export function PageSponsor(props: PageSponsorProps) {
        aria-label="Close"
        onClick={(e) => {
          e.preventDefault();
+          e.stopPropagation();
+
          markSponsorHidden(sponsorId || '');
          sponsorHidden.set(true);
        }}
--- a/src/components/PageSponsors/BottomRightSponsor.tsx
+++ b/src/components/PageSponsors/BottomRightSponsor.tsx
@@ -0,0 +1,104 @@
+import { useEffect, useState } from 'react';
+import { httpGet, httpPatch, httpPost } from '../../lib/http';
+import { sponsorHidden } from '../../stores/page';
+import { useStore } from '@nanostores/react';
+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 BottomRightSponsorType = {
+  id: string;
+  company: string;
+  description: string;
+  gaLabel: string;
+  imageUrl: string;
+  pageUrl: string;
+  title: string;
+  url: string;
+};
+
+type V1GetSponsorResponse = {
+  id?: string;
+  href?: string;
+  sponsor?: BottomRightSponsorType;
+};
+
+type BottomRightSponsorProps = {
+  sponsor: BottomRightSponsorType;
+
+  onSponsorClick: () => void;
+  onSponsorImpression: () => void;
+  onSponsorHidden: () => void;
+};
+
+export function BottomRightSponsor(props: BottomRightSponsorProps) {
+  const { sponsor, onSponsorImpression, onSponsorClick, onSponsorHidden } =
+    props;
+
+  const [isHidden, setIsHidden] = useState(false);
+
+  useEffect(() => {
+    if (!sponsor) {
+      return;
+    }
+
+    onSponsorImpression();
+  }, []);
+
+  const { url, title, imageUrl, description, company, gaLabel } = sponsor;
+
+  const isRoadmapAd = title.toLowerCase() === 'advertise with us!';
+
+  if (isHidden) {
+    return null;
+  }
+
+  return (
+    <a
+      href={url}
+      target="_blank"
+      rel="noopener sponsored nofollow"
+      className="fixed bottom-0 left-0 right-0 z-50 flex bg-white shadow-lg outline-0 outline-transparent sm:bottom-[15px] sm:left-auto sm:right-[15px] sm:max-w-[350px]"
+      onClick={onSponsorClick}
+    >
+      <span
+        className="absolute right-1 top-1 text-gray-400 hover:text-gray-800 sm:right-1.5 sm:top-1.5 sm:text-gray-300"
+        aria-label="Close"
+        onClick={(e) => {
+          e.preventDefault();
+          e.stopPropagation();
+
+          setIsHidden(true);
+          onSponsorHidden();
+        }}
+      >
+        <X className="h-5 w-5 sm:h-4 sm:w-4" />
+      </span>
+      <span>
+        <img
+          src={imageUrl}
+          className="block h-[106px] object-cover sm:h-[153px] sm:w-[118.18px]"
+          alt="Sponsor Banner"
+        />
+      </span>
+      <span className="flex flex-1 flex-col justify-between text-xs sm:text-sm">
+        <span className="p-[10px]">
+          <span className="mb-0.5 block font-semibold">{title}</span>
+          <span className="block text-gray-500">{description}</span>
+        </span>
+        {!isRoadmapAd && (
+          <>
+            <span className="sponsor-footer hidden sm:block">
+              Partner Content
+            </span>
+            <span className="block pb-1 text-center text-[10px] uppercase text-gray-400 sm:hidden">
+              Partner Content
+            </span>
+          </>
+        )}
+      </span>
+    </a>
+  );
+}
--- a/src/components/PageSponsors/PageSponsors.tsx
+++ b/src/components/PageSponsors/PageSponsors.tsx
@@ -0,0 +1,195 @@
+import { useEffect, useState } from 'react';
+import { httpGet, httpPatch } from '../../lib/http';
+import { sponsorHidden } from '../../stores/page';
+import { useStore } from '@nanostores/react';
+import { setViewSponsorCookie } from '../../lib/jwt';
+import { isMobile } from '../../lib/is-mobile';
+import Cookies from 'js-cookie';
+import { getUrlUtmParams } from '../../lib/browser.ts';
+import { StickyTopSponsor } from './StickyTopSponsor.tsx';
+import { BottomRightSponsor } from './BottomRightSponsor.tsx';
+
+type PageSponsorType = {
+  company: string;
+  description: string;
+  gaLabel: string;
+  imageUrl: string;
+  pageUrl: string;
+  title: string;
+  url: string;
+  id: string;
+};
+
+export type StickyTopSponsorType = PageSponsorType & {
+  buttonText: string;
+  style?: {
+    fromColor?: string;
+    toColor?: string;
+    textColor?: string;
+    buttonBackgroundColor?: string;
+    buttonTextColor?: string;
+  };
+};
+export type BottomRightSponsorType = PageSponsorType;
+
+type V1GetSponsorResponse = {
+  bottomRightAd?: BottomRightSponsorType;
+  stickyTopAd?: StickyTopSponsorType;
+};
+
+type PageSponsorsProps = {
+  gaPageIdentifier?: string;
+};
+
+const CLOSE_SPONSOR_KEY = 'sponsorClosed';
+
+function markSponsorHidden(sponsorId: string) {
+  Cookies.set(`${CLOSE_SPONSOR_KEY}-${sponsorId}`, '1', {
+    path: '/',
+    expires: 1,
+    sameSite: 'lax',
+    secure: true,
+    domain: import.meta.env.DEV ? 'localhost' : '.roadmap.sh',
+  });
+}
+
+function isSponsorMarkedHidden(sponsorId: string) {
+  return Cookies.get(`${CLOSE_SPONSOR_KEY}-${sponsorId}`) === '1';
+}
+
+export function PageSponsors(props: PageSponsorsProps) {
+  const { gaPageIdentifier } = props;
+
+  const $isSponsorHidden = useStore(sponsorHidden);
+
+  const [stickyTopSponsor, setStickyTopSponsor] =
+    useState<StickyTopSponsorType | null>();
+  const [bottomRightSponsor, setBottomRightSponsor] =
+    useState<BottomRightSponsorType | null>();
+
+  useEffect(() => {
+    const foundUtmParams = getUrlUtmParams();
+
+    if (!foundUtmParams.utmSource) {
+      return;
+    }
+
+    localStorage.setItem('utm_params', JSON.stringify(foundUtmParams));
+  }, []);
+
+  async function loadSponsor() {
+    const currentPath = window.location.pathname;
+    if (
+      currentPath === '/' ||
+      currentPath === '/best-practices' ||
+      currentPath === '/roadmaps' ||
+      currentPath.startsWith('/guides') ||
+      currentPath.startsWith('/videos') ||
+      currentPath.startsWith('/account') ||
+      currentPath.startsWith('/team/')
+    ) {
+      return;
+    }
+
+    const { response, error } = await httpGet<V1GetSponsorResponse>(
+      `${import.meta.env.PUBLIC_API_URL}/v1-get-sponsor`,
+      {
+        href: window.location.pathname,
+        mobile: isMobile() ? 'true' : 'false',
+      },
+    );
+
+    if (error) {
+      console.error(error);
+      return;
+    }
+
+    setStickyTopSponsor(response?.stickyTopAd);
+    setBottomRightSponsor(response?.bottomRightAd);
+  }
+
+  async function logSponsorImpression(
+    sponsor: BottomRightSponsorType | StickyTopSponsorType,
+  ) {
+    window.fireEvent({
+      category: 'SponsorImpression',
+      action: `${sponsor?.company} Impression`,
+      label:
+        sponsor?.gaLabel || `${gaPageIdentifier} / ${sponsor?.company} Link`,
+    });
+  }
+
+  async function clickSponsor(
+    sponsor: BottomRightSponsorType | StickyTopSponsorType,
+  ) {
+    const { id: sponsorId, company, gaLabel } = sponsor;
+
+    const labelValue = gaLabel || `${gaPageIdentifier} / ${company} Link`;
+
+    window.fireEvent({
+      category: 'SponsorClick',
+      action: `${company} Redirect`,
+      label: labelValue,
+      value: labelValue,
+    });
+
+    const clickUrl = new URL(
+      `${import.meta.env.PUBLIC_API_URL}/v1-view-sponsor/${sponsorId}`,
+    );
+
+    const { response, error } = await httpPatch<{ status: 'ok' }>(
+      clickUrl.toString(),
+      {
+        mobile: isMobile(),
+      },
+    );
+
+    if (error || !response) {
+      console.error(error);
+      return;
+    }
+
+    setViewSponsorCookie(sponsorId);
+  }
+
+  useEffect(() => {
+    window.setTimeout(loadSponsor);
+  }, []);
+
+  if ($isSponsorHidden) {
+    return null;
+  }
+
+  return (
+    <div>
+      {stickyTopSponsor && !isSponsorMarkedHidden(stickyTopSponsor.id) && (
+        <StickyTopSponsor
+          sponsor={stickyTopSponsor}
+          onSponsorImpression={() => {
+            logSponsorImpression(stickyTopSponsor).catch(console.error);
+          }}
+          onSponsorClick={() => {
+            clickSponsor(stickyTopSponsor).catch(console.error);
+          }}
+          onSponsorHidden={() => {
+            markSponsorHidden(stickyTopSponsor.id);
+          }}
+        />
+      )}
+      {bottomRightSponsor && !isSponsorMarkedHidden(bottomRightSponsor.id) && (
+        <BottomRightSponsor
+          sponsor={bottomRightSponsor}
+          onSponsorClick={() => {
+            clickSponsor(bottomRightSponsor).catch(console.error);
+          }}
+          onSponsorHidden={() => {
+            markSponsorHidden(bottomRightSponsor.id);
+          }}
+          onSponsorImpression={() => {
+            logSponsorImpression(bottomRightSponsor).catch(console.error);
+          }}
+        />
+      )}
+    </div>
+  );
+}
--- a/src/components/PageSponsors/StickyTopSponsor.tsx
+++ b/src/components/PageSponsors/StickyTopSponsor.tsx
@@ -0,0 +1,87 @@
+import { cn } from '../../lib/classname.ts';
+import { useScrollPosition } from '../../hooks/use-scroll-position.ts';
+import { X } from 'lucide-react';
+import type { StickyTopSponsorType } from './PageSponsors.tsx';
+import { useEffect, useState } from 'react';
+import { isOnboardingStripHidden } from '../../stores/page.ts';
+
+type StickyTopSponsorProps = {
+  sponsor: StickyTopSponsorType;
+
+  onSponsorImpression: () => void;
+  onSponsorClick: () => void;
+  onSponsorHidden: () => void;
+};
+
+const SCROLL_DISTANCE = 100;
+
+export function StickyTopSponsor(props: StickyTopSponsorProps) {
+  const { sponsor, onSponsorHidden, onSponsorImpression, onSponsorClick } =
+    props;
+
+  const { y: scrollY } = useScrollPosition();
+  const [isImpressionLogged, setIsImpressionLogged] = useState(false);
+  const [isHidden, setIsHidden] = useState(false);
+
+  useEffect(() => {
+    if (!sponsor) {
+      return;
+    }
+
+    // hide the onboarding strip when the sponsor is visible
+    isOnboardingStripHidden.set(true);
+  }, [sponsor]);
+
+  useEffect(() => {
+    if (scrollY < SCROLL_DISTANCE || isImpressionLogged) {
+      return;
+    }
+
+    setIsImpressionLogged(true);
+    onSponsorImpression();
+  }, [scrollY]);
+
+  if (scrollY < SCROLL_DISTANCE || isHidden) {
+    return null;
+  }
+
+  return (
+    <a
+      target="_blank"
+      href="https://www.google.com"
+      onClick={onSponsorClick}
+      className={cn(
+        'fixed left-0 right-0 top-0 z-[91] flex min-h-[45px] w-full flex-row items-center justify-center px-14 pb-2 pt-1.5 text-base font-medium text-yellow-950',
+      )}
+      style={{
+        backgroundImage: `linear-gradient(to bottom, ${sponsor.style?.fromColor}, ${sponsor.style?.toColor})`,
+        color: sponsor.style?.textColor,
+      }}
+    >
+      <img className="h-[23px]" src={sponsor.imageUrl} alt={'ad'} />
+      <span className="mx-3 truncate">{sponsor.description}</span>
+      <button
+        className="flex-truncate rounded-md px-3 py-1 text-sm transition-colors"
+        style={{
+          backgroundColor: sponsor.style?.buttonBackgroundColor,
+          color: sponsor.style?.buttonTextColor,
+        }}
+      >
+        {sponsor.buttonText}
+      </button>
+      <button
+        type="button"
+        className="absolute right-5 top-1/2 ml-1 -translate-y-1/2 px-1 py-1 opacity-70 hover:opacity-100"
+        onClick={(e) => {
+          e.preventDefault();
+          e.stopPropagation();
+
+          setIsHidden(true);
+          onSponsorHidden();
+        }}
+      >
+        <X className="h-4 w-4" strokeWidth={3} />
+      </button>
+    </a>
+  );
+}
--- a/src/components/TopicDetail/TopicDetail.tsx
+++ b/src/components/TopicDetail/TopicDetail.tsx
@@ -340,7 +340,7 @@ export function TopicDetail(props: TopicDetailProps) {
  );

  return (
-    <div className={'relative z-[90]'}>
+    <div className={'relative z-[92]'}>
      <div
        ref={topicRef}
        tabIndex={0}
--- a/src/data/changelogs/devops-project-ideas.md
+++ b/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!
--- a/src/data/guides/consistency-patterns-in-distributed-systems.md
+++ b/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:
--- a/src/data/guides/devops-vs-full-stack.md
+++ b/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.
--- a/src/data/guides/frontend-vs-backend-ai.md
+++ b/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).
--- a/src/data/guides/frontend-web-developer-portfolio.md
+++ b/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.
--- a/src/data/guides/full-stack-vs-backend.md
+++ b/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).
--- a/src/data/guides/how-to-become-frontend-developer.md
+++ b/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:
--- a/src/data/projects/age-calculator.md
+++ b/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.
--- a/src/data/projects/caching-server.md
+++ b/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.
--- a/src/data/projects/custom-dropdown.md
+++ b/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.
--- a/src/data/projects/database-backup-utility.md
+++ b/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.
--- a/src/data/projects/expense-tracker.md
+++ b/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.
--- a/src/data/projects/flash-cards.md
+++ b/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.
--- a/src/data/projects/github-user-activity.md
+++ b/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.
--- a/src/data/projects/number-guessing-game.md
+++ b/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.
--- a/src/data/projects/portfolio-website.md
+++ b/src/data/projects/portfolio-website.md
@@ -28,7 +28,7 @@ roadmapIds:

 In this project, you will style the HTML website structure you created previously [in a different project](/projects/basic-html-website). The focus will be on learning how to use CSS to create responsive layouts, apply color and typography, and enhance the overall design of your website.

-Rough mockups of the website structure for mobile and desctop devices are given below. Do not worry about the design details i.e. colors backgrounds etc at this stage; we are not looking for a beautiful design, but a well-structured and responsive website. Just focus on making the layout same as the mockup and ensuring it looks good on different screen sizes.
+Rough mockups of the website structure for mobile and desktop devices are given below. Do not worry about the design details i.e. colors backgrounds etc at this stage; we are not looking for a beautiful design, but a well-structured and responsive website. Just focus on making the layout same as the mockup and ensuring it looks good on different screen sizes.

 [![Styled HTML Website](https://assets.roadmap.sh/guest/portfolio-template-xdhki.png)](https://assets.roadmap.sh/guest/portfolio-template-xdhki.png)

@@ -51,4 +51,4 @@ For bonus points, you can:

 ---

-After completing this project, you will have a solid understanding of how to style a basic HTML website using CSS. You can move on to more advanced topics, such as CSS animations, transitions, and grid layouts, in future projects.
+After completing this project, you will have a solid understanding of how to style a basic HTML website using CSS. You can move on to more advanced topics, such as CSS animations, transitions, and grid layouts, in future projects.
--- a/src/data/projects/task-tracker.md
+++ b/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.
--- a/src/data/roadmaps/ai-engineer/ai-engineer.md
+++ b/src/data/roadmaps/ai-engineer/ai-engineer.md
@@ -15,7 +15,7 @@ dimensions:
 question:
  title: 'What is an AI Engineer?'
  description: |
-    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.
+    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. The [advantages and disadvantages of AI](https://towardsdatascience.com/advantages-and-disadvantages-of-artificial-intelligence-182a5ef6588c) are key considerations that AI Engineers must understand to effectively implement solutions.
 schema:
  headline: 'AI Engineer Roadmap'
  description: 'Learn how to become an AI Engineer with this interactive step by step guide in 2023. We also have resources and short descriptions attached to the roadmap items so you can get everything you want to learn in one place.'
--- a/src/data/roadmaps/ai-engineer/content/adding-end-user-ids-in-prompts@4Q5x2VCXedAWISBXUIyin.md
+++ b/src/data/roadmaps/ai-engineer/content/adding-end-user-ids-in-prompts@4Q5x2VCXedAWISBXUIyin.md
@@ -4,4 +4,4 @@ Sending end-user IDs in your requests can be a useful tool to help OpenAI monito

 Visit the following resources to learn more:

-[@official@Sending end-user IDs - OpenAi](https://platform.openai.com/docs/guides/safety-best-practices/end-user-ids)
+- [@official@Sending end-user IDs - OpenAi](https://platform.openai.com/docs/guides/safety-best-practices/end-user-ids)
--- a/src/data/roadmaps/ai-engineer/content/agents-usecases@778HsQzTuJ_3c9OSn5DmH.md
+++ b/src/data/roadmaps/ai-engineer/content/agents-usecases@778HsQzTuJ_3c9OSn5DmH.md
@@ -5,5 +5,5 @@ 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@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)
+- [@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)
--- a/src/data/roadmaps/ai-engineer/content/ai-agents@9XCxilAQ7FRet7lHQr1gE.md
+++ b/src/data/roadmaps/ai-engineer/content/ai-agents@9XCxilAQ7FRet7lHQr1gE.md
@@ -4,6 +4,6 @@ In AI engineering, "agents" refer to autonomous systems or components that can p

 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)
+- [@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)
--- a/src/data/roadmaps/ai-engineer/content/ai-agents@AeHkNU-uJ_gBdo5-xdpEu.md
+++ b/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)
--- a/src/data/roadmaps/ai-engineer/content/ai-engineer-vs-ml-engineer@jSZ1LhPdhlkW-9QJhIvFs.md
+++ b/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)
--- a/src/data/roadmaps/ai-engineer/content/ai-safety-and-ethics@8ndKHDJgL_gYwaXC7XMer.md
+++ b/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)
--- a/src/data/roadmaps/ai-engineer/content/ai-vs-agi@5QdihE1lLpMc3DFrGy46M.md
+++ b/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/)
--- a/src/data/roadmaps/ai-engineer/content/anomaly-detection@AglWJ7gb9rTT2rMkstxtk.md
+++ b/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)
--- a/src/data/roadmaps/ai-engineer/content/anthropics-claude@hy6EyKiNxk1x84J63dhez.md
+++ b/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)
--- a/src/data/roadmaps/ai-engineer/content/audio-processing@mxQYB820447DC6kogyZIL.md
+++ b/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)
--- a/src/data/roadmaps/ai-engineer/content/aws-sagemaker@OkYO-aSPiuVYuLXHswBCn.md
+++ b/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)
--- a/src/data/roadmaps/ai-engineer/content/azure-ai@3PQVZbcr4neNMRr6CuNzS.md
+++ b/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)
--- a/src/data/roadmaps/ai-engineer/content/benefits-of-pre-trained-models@1Ga6DbOPc6Crz7ilsZMYy.md
+++ b/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)
--- a/src/data/roadmaps/ai-engineer/content/bias-and-fareness@lhIU0ulpvDAn1Xc3ooYz_.md
+++ b/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/)
--- a/src/data/roadmaps/ai-engineer/content/capabilities--context-length@vvpYkmycH0_W030E-L12f.md
+++ b/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)
--- a/src/data/roadmaps/ai-engineer/content/chat-completions-api@_bPTciEA1GT1JwfXim19z.md
+++ b/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)
--- a/src/data/roadmaps/ai-engineer/content/chroma@dSd2C9lNl-ymmCRT9_ZC3.md
+++ b/src/data/roadmaps/ai-engineer/content/chroma@dSd2C9lNl-ymmCRT9_ZC3.md
@@ -4,6 +4,6 @@ Chroma is an open-source vector database and AI-native embedding database design

 Visit the following resources to learn more:

-[@official@Chroma](https://www.trychroma.com/)
-[@article@Chroma Tutorials](https://lablab.ai/tech/chroma)
-[@video@Chroma - Chroma - Vector Database for LLM Applications](https://youtu.be/Qs_y0lTJAp0?si=Z2-eSmhf6PKrEKCW)
+- [@official@Chroma](https://www.trychroma.com/)
+- [@article@Chroma Tutorials](https://lablab.ai/tech/chroma)
+- [@video@Chroma - Chroma - Vector Database for LLM Applications](https://youtu.be/Qs_y0lTJAp0?si=Z2-eSmhf6PKrEKCW)
--- a/src/data/roadmaps/ai-engineer/content/chunking@mX987wiZF7p3V_gExrPeX.md
+++ b/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)
--- a/src/data/roadmaps/ai-engineer/content/code-completion-tools@TifVhqFm1zXNssA8QR3SM.md
+++ b/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/)
--- a/src/data/roadmaps/ai-engineer/content/cohere@a7qsvoauFe5u953I699ps.md
+++ b/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)
--- a/src/data/roadmaps/ai-engineer/content/conducting-adversarial-testing@Pt-AJmSJrOxKvolb5_HEv.md
+++ b/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)
--- a/src/data/roadmaps/ai-engineer/content/constraining-outputs-and-inputs@ONLDyczNacGVZGojYyJrU.md
+++ b/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/)
--- a/src/data/roadmaps/ai-engineer/content/cut-off-dates--knowledge@LbB2PeytxRSuU07Bk0KlJ.md
+++ b/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)
--- a/src/data/roadmaps/ai-engineer/content/dall-e-api@LKFwwjtcawJ4Z12X102Cb.md
+++ b/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)
--- a/src/data/roadmaps/ai-engineer/content/data-classification@06Xta-OqSci05nV2QMFdF.md
+++ b/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)
--- a/src/data/roadmaps/ai-engineer/content/development-tools@NYge7PNtfI-y6QWefXJ4d.md
+++ b/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)
--- a/src/data/roadmaps/ai-engineer/content/embedding@grTcbzT7jKk_sIUwOTZTD.md
+++ b/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)
--- a/src/data/roadmaps/ai-engineer/content/embeddings@XyEp6jnBSpCxMGwALnYfT.md
+++ b/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)
--- a/src/data/roadmaps/ai-engineer/content/faiss@JurLbOO1Z8r6C3yUqRNwf.md
+++ b/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)
--- a/src/data/roadmaps/ai-engineer/content/fine-tuning@15XOFdVp0IC-kLYPXUJWh.md
+++ b/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)
--- a/src/data/roadmaps/ai-engineer/content/generation@2jJnS9vRYhaS69d6OxrMh.md
+++ b/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)
--- a/src/data/roadmaps/ai-engineer/content/googles-gemini@oe8E6ZIQWuYvHVbYJHUc1.md
+++ b/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)
--- a/src/data/roadmaps/ai-engineer/content/hugging-face-hub@YLOdOvLXa5Fa7_mmuvKEi.md
+++ b/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)
--- a/src/data/roadmaps/ai-engineer/content/hugging-face-models@8XjkRqHOdyH-DbXHYiBEt.md
+++ b/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)
--- a/src/data/roadmaps/ai-engineer/content/hugging-face-models@EIDbwbdolR_qsNKVDla6V.md
+++ b/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)
--- a/src/data/roadmaps/ai-engineer/content/hugging-face-tasks@YKIPOiSj_FNtg0h8uaSMq.md
+++ b/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)
--- a/src/data/roadmaps/ai-engineer/content/hugging-face@v99C5Bml2a6148LCJ9gy9.md
+++ b/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)
--- a/src/data/roadmaps/ai-engineer/content/image-generation@49BWxYVFpIgZCCqsikH7l.md
+++ b/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)
--- a/src/data/roadmaps/ai-engineer/content/image-understanding@fzVq4hGoa2gdbIzoyY1Zp.md
+++ b/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)
--- a/src/data/roadmaps/ai-engineer/content/impact-on-product-development@qJVgKe9uBvXc-YPfvX_Y7.md
+++ b/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/)
--- a/src/data/roadmaps/ai-engineer/content/indexing-embeddings@5TQnO9B4_LTHwqjI7iHB1.md
+++ b/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)
--- a/src/data/roadmaps/ai-engineer/content/inference-sdk@3kRTzlLNBnXdTsAEXVu_M.md
+++ b/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)
--- a/src/data/roadmaps/ai-engineer/content/inference@KWjD4xEPhOOYS51dvRLd2.md
+++ b/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)
--- a/src/data/roadmaps/ai-engineer/content/introduction@_hYN0gEi9BL24nptEtXWU.md
+++ b/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.
--- a/src/data/roadmaps/ai-engineer/content/know-your-customers--usecases@t1SObMWkDZ1cKqNNlcd9L.md
+++ b/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)
--- a/src/data/roadmaps/ai-engineer/content/lancedb@rjaCNT3Li45kwu2gXckke.md
+++ b/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)
--- a/src/data/roadmaps/ai-engineer/content/langchain-for-multimodal-apps@j9zD3pHysB1CBhLfLjhpD.md
+++ b/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)
--- a/src/data/roadmaps/ai-engineer/content/langchain@ebXXEhNRROjbbof-Gym4p.md
+++ b/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)
--- a/Show More
+++ b/Show More