feat: update dashboard layout

Co-authored-by: kamranahmedse <4921183+kamranahmedse@users.noreply.github.com>

public/roadmap-content/android.json

@@ -620,8 +620,19 @@
   },
   "e3vHFaFFMV7kI9q6yf5e9": {
     "title": "Cloud Messaging",
-    "description": "Firebase Cloud Messaging (FCM) is a powerful, battery-efficient messaging service that enables you to send messages reliably and securely to your Android applications. It enables you to send two types of messages: \"notification messages\" and \"data messages\". Notification messages are primarily meant for user notifications and will only be delivered when the application is in the foreground. On the other hand, data messages can handle even when the app is in the background or killed and can be used to send custom key-value pairs. FCM also supports various additional features, such as topic messaging to send messages to multiple devices subscribed to a common topic, device group messaging for sending messages to groups of user devices, and upstream messaging for sending messages from the client application to the FCM server.",
-    "links": []
+    "description": "Firebase Cloud Messaging (FCM) is a powerful, battery-efficient messaging service that enables you to send messages reliably and securely to your Android applications. It enables you to send two types of messages: \"notification messages\" and \"data messages\". Notification messages are primarily meant for user notifications and will only be delivered when the application is in the foreground. On the other hand, data messages can handle even when the app is in the background or killed and can be used to send custom key-value pairs. FCM also supports various additional features, such as topic messaging to send messages to multiple devices subscribed to a common topic, device group messaging for sending messages to groups of user devices, and upstream messaging for sending messages from the client application to the FCM server.\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "Documentation",
+        "url": "https://firebase.google.com/docs/cloud-messaging/android/client",
+        "type": "article"
+      },
+      {
+        "title": "Firebase Cloud Messaging",
+        "url": "https://www.youtube.com/watch?v=sioEY4tWmLI&list=PLl-K7zZEsYLkuHRCtHTpi6JYHka8oHLft",
+        "type": "video"
+      }
+    ]
   },
   "3EEfKAd-ppIQpdQSEhbA1": {
     "title": "FireStore",

public/roadmap-content/angular.json

@@ -12,12 +12,42 @@
   },
   "DE3cMpeRYuUPw2ADtfS-3": {
     "title": "Angular Architecture",
-    "description": "Visit the following resources to learn more:",
+    "description": "Angular follows a modular architecture pattern, dividing the application into distinct modules, components, services, and other elements, which enhances code organization and maintainability. The key building blocks include modules, which are containers grouping related components, services, directives, and other elements to ensure proper encapsulation and reusability. Components are the building blocks of Angular applications, representing parts of the user interface with associated logic, consisting of templates, styles, and a class defining behavior. Services encapsulate reusable business logic, data manipulation, and API communication, enabling data and functionality sharing across components. Directives are HTML attributes or elements that extend HTML functionality, allowing reusable behaviors across the application. Lastly, pipes transform data before displaying it in templates, providing convenient ways to format, filter, and sort data.\n\nVisit the following resources to learn more:",
     "links": [
       {
         "title": "Angular coding style guide",
         "url": "https://angular.dev/style-guide",
         "type": "article"
+      },
+      {
+        "title": "The Ultimate Guide to Angular Architecture: Best Practices for efficient coding with Angular Framework",
+        "url": "https://angulardive.com/blog/the-ultimate-guide-to-angular-architecture-best-practices-for-efficient-coding-with-angular-framework/",
+        "type": "article"
+      },
+      {
+        "title": "Modern Architectures with Angular Part 1: Strategic design with Sheriff and Standalone Components",
+        "url": "https://www.angulararchitects.io/en/blog/modern-architectures-with-angular-part-1-strategic-design-with-sheriff-and-standalone-components/",
+        "type": "article"
+      },
+      {
+        "title": "Optimizing the architecture of large web applications with Angular",
+        "url": "https://albertobasalo.medium.com/optimizing-the-architecture-of-large-web-applications-with-angular-79d03b01a92b",
+        "type": "article"
+      },
+      {
+        "title": "Angular Architecture Concepts and Patterns",
+        "url": "https://www.bigscal.com/blogs/frontend/angular-architecture-concepts-and-patterns/",
+        "type": "article"
+      },
+      {
+        "title": "Top 10 Angular Architecture Mistakes",
+        "url": "https://angularexperts.io/blog/top-10-angular-architecture-mistakes",
+        "type": "article"
+      },
+      {
+        "title": "Architecting Angular: A Guide to effective project structure",
+        "url": "https://medium.com/@nile.bits/architecting-angular-a-guide-to-effective-project-structure-9756bae92262",
+        "type": "article"
       }
     ]
   },

public/roadmap-content/backend.json

@@ -2907,8 +2907,19 @@
   },
   "5XGvep2qoti31bsyqNzrU": {
     "title": "Real-Time Data",
-    "description": "Real-time data refers to information that is processed and made available immediately or with minimal delay, allowing users or systems to react promptly to current conditions. This type of data is essential in applications requiring immediate updates and responses, such as financial trading platforms, online gaming, real-time analytics, and monitoring systems. Real-time data processing involves capturing, analyzing, and delivering information as it is generated, often using technologies like stream processing frameworks (e.g., Apache Kafka, Apache Flink) and low-latency databases. Effective real-time data systems can handle high-speed data flows, ensuring timely and accurate decision-making.",
-    "links": []
+    "description": "Real-time data refers to information that is processed and made available immediately or with minimal delay, allowing users or systems to react promptly to current conditions. This type of data is essential in applications requiring immediate updates and responses, such as financial trading platforms, online gaming, real-time analytics, and monitoring systems. Real-time data processing involves capturing, analyzing, and delivering information as it is generated, often using technologies like stream processing frameworks (e.g., Apache Kafka, Apache Flink) and low-latency databases. Effective real-time data systems can handle high-speed data flows, ensuring timely and accurate decision-making.\n\nLearn more from the following resources:",
+    "links": [
+      {
+        "title": "Real-time data - Wiki",
+        "url": "https://en.wikipedia.org/wiki/Real-time_data",
+        "type": "article"
+      },
+      {
+        "title": "What is Real-time Data?",
+        "url": "https://www.qlik.com/us/streaming-data/real-time-data",
+        "type": "article"
+      }
+    ]
   },
   "osvajAJlwGI3XnX0fE-kA": {
     "title": "Long Polling",

public/roadmap-content/git-github.json

@@ -1437,12 +1437,22 @@
   },
   "BKVA6Q7DXemAYjyQOA0nh": {
     "title": "git filter-branch",
-    "description": "You can use `git filter-branch` to rewrite Git revision history by applying custom filters on each revision.\n\n*   Filter types: You can modify trees (e.g., removing a file or running a Perl script) or information about each commit.\n*   Preserving original data: The command preserves all original commit times, merge information, and other details unless specified otherwise.\n*   Rewriting specific branches: Only the positive refs mentioned in the command line are rewritten; if no filters are specified, commits are recommitted without changes.\n\nVisit the following resources to learn more:",
+    "description": "You can use `git filter-branch` to rewrite Git revision history by applying custom filters on each revision.\n\n*   Filter types: You can modify trees (e.g., removing a file or running a Perl script) or information about each commit.\n*   Preserving original data: The command preserves all original commit times, merge information, and other details unless specified otherwise.\n*   Rewriting specific branches: Only the positive refs mentioned in the command line are rewritten; if no filters are specified, commits are recommitted without changes.\n\nNotably, there exists a simpler, safer, and more powerful alternative: `git filter-repo`. This tool is actively promoted by Git and offers a streamlined approach to filtering revisions, making it a preferred choice for rewriting your Git history, especially when managing large repositories.\n\nVisit the following resources to learn more:",
     "links": [
       {
         "title": "git filter-branch",
         "url": "https://git-scm.com/docs/git-filter-branch",
         "type": "article"
+      },
+      {
+        "title": "git filter-repo",
+        "url": "https://github.com/newren/git-filter-repo",
+        "type": "article"
+      },
+      {
+        "title": "Removing sensitive data from a repository",
+        "url": "https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/removing-sensitive-data-from-a-repository",
+        "type": "article"
       }
     ]
   },
@@ -2209,7 +2219,7 @@
   },
   "qrdOARfqGPF9xhF6snbAn": {
     "title": "OAuth Apps",
-    "description": "GitHub OAuth Apps are a way to integrate with the GitHub platform using OAuth authentication. They allow developers to create custom integrations that can automate tasks, provide real-time notifications, and build custom workflows.\n\nVisit the following resources to learn more:",
+    "description": "GitHub OAuth Apps allow developers to integrate with GitHub using OAuth 2.0 authentication. They enable secure, token-based access to specific GitHub resources like repositories, issues, and pull requests. OAuth Apps can automate tasks, personalize interactions, and provide real-time notifications through webhooks, all while allowing users to approve only the necessary permissions without sharing their credentials.\n\nVisit the following resources to learn more:",
     "links": [
       {
         "title": "Creating an OAuth app",

public/roadmap-content/ios.json

@@ -965,6 +965,11 @@
     "title": "SwiftUI",
     "description": "SwiftUI is Apple's modern declarative framework for building user interfaces across all Apple platforms. Introduced in 2019, it allows developers to create UIs using Swift code, describing the desired layout and behavior rather than implementing them imperatively. SwiftUI offers a more concise and intuitive approach to UI development, with features like automatic support for Dark Mode, dynamic type, and localization. It uses a state-driven approach, automatically updating the UI when underlying data changes. While newer than UIKit, SwiftUI is rapidly evolving and gaining adoption, offering seamless integration with UIKit when needed.\n\nLearn more from the following resources:",
     "links": [
+      {
+        "title": "HackingWithSwift - 100 Days of SwiftUI",
+        "url": "https://www.hackingwithswift.com/100/swiftui",
+        "type": "course"
+      },
       {
         "title": "SwiftUI Documentation",
         "url": "https://developer.apple.com/xcode/swiftui/",

public/roadmap-content/mlops.json

@@ -393,7 +393,7 @@
   },
   "o6GQ3-8DgDtHzdX6yeg1w": {
     "title": "Flink",
-    "description": "Apache Flink is a distributed stream processing framework that is used to process large amounts of data in real-time. It is designed to be highly scalable and fault-tolerant. Flink is built on top of the Apache Kafka messaging system and is used to process data streams in real-time.\n\nVisit the following resources to learn more:",
+    "description": "Apache Flink is an open-source stream processing framework designed for real-time and batch data processing with low latency and high throughput. It supports event time processing, fault tolerance, and stateful operations, making it ideal for applications like real-time analytics, fraud detection, and event-driven systems. Flink is highly scalable, integrates with various data systems, and is widely used in industries for large-scale, real-time data processing tasks.\n\nVisit the following resources to learn more:",
     "links": [
       {
         "title": "Apache Flink Documentation",
@@ -404,6 +404,11 @@
         "title": "Explore top posts about Apache Flink",
         "url": "https://app.daily.dev/tags/apache-flink?ref=roadmapsh",
         "type": "article"
+      },
+      {
+        "title": "Apache Flink Tutorialpoint",
+        "url": "https://www.tutorialspoint.com/apache_flink/apache_flink_introduction.htm",
+        "type": "article"
       }
     ]
   },

public/roadmap-content/nodejs.json

@@ -2085,7 +2085,58 @@
   },
   "M62lAWBOrTe99TfpFOQ-Y": {
     "title": "Common Built-in Modules",
-    "description": "These are the common modules that come with `Node.js` out of the box. This module provides tools or APIs for performing out certain standard `Node.js` operations. like interacting with the file system, url parsing, or logging information to the console.",
-    "links": []
+    "description": "These are the core modules that come with `Node.js` out of the box. This module provides tools or APIs for performing out certain standard `Node.js` operations. like interacting with the file system, url parsing, or logging information to the console.\n\nLearn more from the following resources:",
+    "links": [
+      {
+        "title": "Nodejs fs module",
+        "url": "https://nodejs.org/api/fs.html",
+        "type": "article"
+      },
+      {
+        "title": "Nodejs url module",
+        "url": "https://nodejs.org/api/url.html",
+        "type": "article"
+      },
+      {
+        "title": "Nodejs console module",
+        "url": "https://nodejs.org/api/console.html",
+        "type": "article"
+      },
+      {
+        "title": "Nodejs util module",
+        "url": "https://nodejs.org/api/util.html",
+        "type": "article"
+      },
+      {
+        "title": "Nodejs events module",
+        "url": "https://nodejs.org/api/events.html",
+        "type": "article"
+      },
+      {
+        "title": "Nodejs os module",
+        "url": "https://nodejs.org/api/os.html",
+        "type": "article"
+      },
+      {
+        "title": "Nodejs worker threads module",
+        "url": "https://nodejs.org/api/worker_threads.html",
+        "type": "article"
+      },
+      {
+        "title": "Nodejs child process module",
+        "url": "https://nodejs.org/api/child_process.html",
+        "type": "article"
+      },
+      {
+        "title": "Nodejs process object",
+        "url": "https://nodejs.org/api/process.html",
+        "type": "article"
+      },
+      {
+        "title": "Nodejs crypto module",
+        "url": "https://nodejs.org/api/crypto.html",
+        "type": "article"
+      }
+    ]
   }
 }

public/roadmap-content/ux-design.json

@@ -64,7 +64,7 @@
   },
   "kcG4IpneJzA6di0uqTiwb": {
     "title": "CREATE Action Funnel",
-    "description": "Stephen Wendell's Create Action Funnel is a UX design framework focused on converting website visitors into active customers through a systematic and engaging process. The approach emphasizes on understanding user behavior, catering to their needs, and directing them towards specific actions. The Action Funnel consists of four major steps:\n\n*   **Establish the Objectives:** Before diving into the design, clearly define the goals you want to achieve through the website or app. Determine what actions you want the users to take (e.g., sign up, make a purchase, share content) and what constitutes a successful conversion.\n    \n*   **Understand User Mindsets:** Identify your target audience and recognize their needs, preferences, emotions, and pain points. Accomplishing this requires user research, creating personas, storyboarding, and empathy mapping, among other methods.\n    \n*   **Design the Optimal User Flow:** Craft a seamless and intuitive user journey by designing a clear path from the landing page to the desired action. Prioritize simplicity, usability, and efficiency. Make sure to include meaningful touchpoints and interactions to engage the users and make it easy for them to complete the intended action.\n    \n*   **Refine and Test the Experience:** Use wireframes and prototypes to test and iteratively refine the user experience. Employ user testing, A/B testing, and analytics to gather insight on user behavior, preferences, and engagement. Continuously use feedback to make improvements, ensuring that the design effectively leads visitors down the action funnel.\n    \n\nBy implementing Stephen Wendell's `Create Action Funnel`, you can effectively guide users through an engaging journey that motivates them to become active customers, ultimately increasing conversion rates and overall satisfaction.",
+    "description": "Stephen Wendel's CREATE Action Funnel is a behavioral design framework aimed at helping individuals or organizations encourage specific behaviors in others, especially in the context of product design. It breaks down the process of motivating action into six key stages. Each stage helps identify where users might drop off or face barriers, allowing designers or strategists to address these pain points effectively. These stages are:\n\n*   **CUE:** The user must notice a cue or prompt that tells them to act. This could be a notification, a visual element, or any kind of reminder.\n    \n*   **REACTION:** The user must react positively to the cue. This stage involves emotional and cognitive processing, where the individual decides if the action is relevant or attractive.\n    \n*   **EVALUATION:** The user evaluates whether the action is worth their time, energy, or resources. They assess the benefits versus the effort required.\n    \n*   **ABILITY:** The user must feel capable of taking the action. This involves ensuring that the action is easy enough to do and aligns with their skills and resources.\n    \n*   **TIMING:** The action needs to happen at the right time. Users need to have the opportunity and be in the right context to act.\n    \n*   **EXECUTION:** Finally, the action must be carried out successfully. This is the stage where the behavior is completed.\n    \n\nThe CREATE Action Funnel is helpful for product designers, marketers, or behavior change professionals, as it provides a structured way to understand user actions and design interventions to improve completion rates. It identifies and solves the gaps that occur between intention and action.",
     "links": [
       {
         "title": "Behavioral Science Crash Course: Steve Wendel's CREATE Action Funnel",
@@ -75,7 +75,7 @@
   },
   "0Df110GZcDw5wbAe1eKoA": {
     "title": "Spectrum of Thinking Interventions",
-    "description": "The _Spectrum of Thinking Interventions_ provides a structure to guide your UX design process, helping you identify the types and range of thinking interventions that the user may require. This spectrum encompasses four primary categories: guidance, explanation, exploration, and creation.\n\nGuidance\n--------\n\nGuidance-based interventions are designed to help users navigate through a digital product or service with minimal effort. They may be aimed at full-fledged beginners, casual users, or experts in their respective domains. Such interventions may include signposts, tooltips, and clearly articulated labels.\n\n_Examples:_\n\n*   Visual cues (e.g., icons, colors)\n*   Signposting (e.g., breadcrumbs)\n*   In-context information (e.g., tool tips, hints)\n\nExplanation\n-----------\n\nExplanation-based interventions provide users with detailed narratives, overviews, or background information that helps them make informed decisions. This may include tutorials, articles, videos, or any other mediums that help explain complex concepts or instructions.\n\n_Examples:_\n\n*   Multimedia tutorials\n*   Articles or blog posts\n*   Infographics or diagrams\n\nExploration\n-----------\n\nExploration-based interventions encourage users to understand and interact with the product by investigating, asking questions, or searching for solutions on their own. This can be done by providing interactive elements, multiple pathways, and opportunities for discovery.\n\n_Examples:_\n\n*   Interactive simulations or models\n*   Advanced search capabilities\n*   Multiple UI paths for task completion\n\nCreation\n--------\n\nCreation-based interventions engage users by offering them the tools and resources to co-create or customize their experience. This type of intervention often involves a more extensive level of input and involvement from the user as they become active participants in the design process.\n\n_Examples:_\n\n*   Customizable user interfaces\n*   Allowing users to create their content\n*   Enabling users to manage their preferences, settings, and configurations\n\nWith this spectrum in mind, it is essential as a UX designer to analyze which types of thinking interventions are most relevant to your target users and design the most accessible and effective solutions. Always consider how these interventions will influence users' decision-making processes and their overall satisfaction with your digital product or service.",
+    "description": "The _Spectrum of Thinking Interventions_ provides a structure for understanding the different types of decision-making processes by illustrating how our minds would respond in a _default, lowest energy way_, if we didn't consciously do something different. This spectrum ranges from situations requiring minimal thought to those demanding intensive thinking, and includes the mechanisms (\"interventions\") that our minds will likely use.\n\n*   **Habits:** Triggering a learned routine based on familiar cues\n*   **Other intuitive responses:** Used in familiar or semi-familiar situations, with responses based on past experiences\n*   **Active mindset or self-concept:** Used in ambiguous scenarios with multiple possible interpretations\n*   **Heuristics:** Used in situations requiring conscious attention, but where decisions can be made more easily\n*   **Focused, conscious calculation:** Used in unfamiliar scenarios or crucial decisions where deliberate focus is needed\n\nWith this spectrum in mind, it is essential as a UX designer to leverage on the mind's decision-making process, analyze which mechanisms are most applicable to your target users and design the most accessible and effective solutions.",
     "links": []
   },
   "kWA8CvocP1pkom2N7O4gb": {

public/roadmap-content/vue.json

@@ -242,13 +242,25 @@
   },
   "NCIzs3jbQTv1xXhAaGfZN": {
     "title": "v-text",
-    "description": "",
-    "links": []
+    "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:",
+    "links": [
+      {
+        "title": "v-text documentation",
+        "url": "https://vuejs.org/api/built-in-directives.html#v-text",
+        "type": "article"
+      }
+    ]
   },
   "bZxtIBeIfeUcR32LZWrPW": {
     "title": "v-html",
-    "description": "",
-    "links": []
+    "description": "The `v-thml` 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:",
+    "links": [
+      {
+        "title": "v-html documentation",
+        "url": "https://vuejs.org/api/built-in-directives.html#v-html",
+        "type": "article"
+      }
+    ]
   },
   "_TlbGTKFCMO0wdLbC6xHX": {
     "title": "v-show",
@@ -285,13 +297,25 @@
   },
   "a9caVhderJaVo0v14w8WB": {
     "title": "v-else-if",
-    "description": "",
-    "links": []
+    "description": "This directive is used to add additional conditions to a v-if and v-else block.\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "v-else-if Documentation",
+        "url": "https://vuejs.org/api/built-in-directives.html#v-else-if",
+        "type": "article"
+      }
+    ]
   },
   "3ftwRjQ9e1-qDT9BV53zr": {
     "title": "v-for",
-    "description": "",
-    "links": []
+    "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:",
+    "links": [
+      {
+        "title": "v-for documentation",
+        "url": "https://vuejs.org/guide/essentials/list#v-for",
+        "type": "article"
+      }
+    ]
   },
   "hVuRmhXVP65IPtuHTORjJ": {
     "title": "v-on",
@@ -300,8 +324,14 @@
   },
   "cuM9q9vYy8JpZPGeBffd1": {
     "title": "v-bind",
-    "description": "",
-    "links": []
+    "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:",
+    "links": [
+      {
+        "title": "v-bind documentation",
+        "url": "https://vuejs.org/api/built-in-directives.html#v-bind",
+        "type": "article"
+      }
+    ]
   },
   "cxu2Wbt306SxM4JKQQqnL": {
     "title": "v-model",
@@ -321,13 +351,25 @@
   },
   "5k9CrbzhNy9iiS6ez2UE6": {
     "title": "v-once",
-    "description": "",
-    "links": []
+    "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:",
+    "links": [
+      {
+        "title": "v-once documentation",
+        "url": "https://vuejs.org/api/built-in-directives.html#v-once",
+        "type": "article"
+      }
+    ]
   },
   "mlsrhioiEkqnRIL6O3hNa": {
     "title": "v-pre",
-    "description": "",
-    "links": []
+    "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:",
+    "links": [
+      {
+        "title": "v-pre Documentation",
+        "url": "https://vuejs.org/api/built-in-directives.html#v-pre",
+        "type": "article"
+      }
+    ]
   },
   "RrSekP8Ub01coegMwLP6a": {
     "title": "v-cloak",

src/components/CreateTeam/ContentConfirmationModal.tsx

@@ -9,28 +9,31 @@ export function ContentConfirmationModal(props: ContentConfirmationModalProps) {
   const { onClose, onClick } = props;
 
   return (
-    <Modal onClose={onClose}>
+    <Modal onClose={onClose} wrapperClassName="max-w-lg">
       <div className="p-4">
-        <h2 className="text-lg font-semibold">Roadmap Content</h2>
+        <h2 className="text-lg font-semibold">
+          Copy Node Details and Resources?
+        </h2>
         <p className="balanc text-gray-600">
-          Do you want to copy the content of this roadmap?
+          This will just copy the roadmap in your team. Would you like to copy
+          the resource links and node details as well?
         </p>
         <div className="mt-4 grid grid-cols-2 gap-2">
           <button
-            className="rounded-lg border p-2.5 font-medium"
+            className="rounded-lg border p-2.5 font-normal"
             onClick={() => {
               onClick(false);
             }}
           >
-            No
+            No, copy roadmap only
           </button>
           <button
-            className="rounded-lg border bg-black p-2.5 font-medium text-white hover:opacity-80"
+            className="rounded-lg border bg-black p-2.5 font-normal text-white hover:opacity-80"
             onClick={() => {
               onClick(true);
             }}
           >
-            Yes
+            Yes, also copy resources
           </button>
         </div>
       </div>

src/components/Dashboard/DashboardAiRoadmaps.tsx

@@ -4,7 +4,13 @@ import { DashboardCardLink } from './DashboardCardLink';
 import { useState } from 'react';
 import { CreateRoadmapModal } from '../CustomRoadmap/CreateRoadmap/CreateRoadmapModal';
 import { Simulate } from 'react-dom/test-utils';
-import { Bot, BrainCircuit, Map, PencilRuler } from 'lucide-react';
+import {
+  ArrowUpRight,
+  Bot,
+  BrainCircuit,
+  Map,
+  PencilRuler,
+} from 'lucide-react';
 
 type DashboardAiRoadmapsProps = {
   roadmaps: {
@@ -20,9 +26,21 @@ export function DashboardAiRoadmaps(props: DashboardAiRoadmapsProps) {
 
   return (
     <>
-      <h2 className="mb-2 mt-6 text-xs uppercase text-gray-400">
-        AI Generated Roadmaps
-      </h2>
+      <div className="mb-2 mt-6 flex items-center justify-between gap-2">
+        <h2 className="text-xs uppercase text-gray-400">
+          AI Generated Roadmaps
+        </h2>
+
+        {!isLoading && roadmaps.length !== 0 && (
+          <a
+            href="/ai/explore"
+            className="flex items-center gap-1 text-xs text-gray-500 hover:text-black"
+          >
+            <ArrowUpRight size={12} />
+            AI Generated Roadmaps
+          </a>
+        )}
+      </div>
 
       {!isLoading && roadmaps.length === 0 && (
         <DashboardCardLink
@@ -48,7 +66,7 @@ export function DashboardAiRoadmaps(props: DashboardAiRoadmapsProps) {
             {roadmaps.map((roadmap) => (
               <a
                 href={`/ai/${roadmap.slug}`}
-                className="relative rounded-md border bg-white p-2.5 text-left text-sm shadow-sm truncate hover:border-gray-400 hover:bg-gray-50"
+                className="relative truncate rounded-md border bg-white p-2.5 text-left text-sm shadow-sm hover:border-gray-400 hover:bg-gray-50"
               >
                 {roadmap.title}
               </a>
@@ -69,9 +87,7 @@ export function DashboardAiRoadmaps(props: DashboardAiRoadmapsProps) {
 
 type CustomProgressCardSkeletonProps = {};
 
-function RoadmapCardSkeleton(
-  props: CustomProgressCardSkeletonProps,
-) {
+function RoadmapCardSkeleton(props: CustomProgressCardSkeletonProps) {
   return (
     <div className="h-[42px] w-full animate-pulse rounded-md bg-gray-200" />
   );

src/components/Dashboard/DashboardCardLink.tsx

@@ -19,7 +19,6 @@ export function DashboardCardLink(props: DashboardCardLinkProps) {
         className,
       )}
       href={href}
-      target="_blank"
     >
       <Icon className="mb-4 size-10 text-gray-300" strokeWidth={1.25} />
       <h4 className="text-xl font-semibold tracking-wide">{title}</h4>

src/components/Dashboard/EmptyStackMessage.tsx

@@ -1,17 +1,26 @@
+import { cn } from '../../lib/classname';
+
 type EmptyStackMessageProps = {
-  number: number;
+  number: number | string;
   title: string;
   description: string;
   buttonText: string;
   buttonLink: string;
+  bodyClassName?: string;
 };
 
 export function EmptyStackMessage(props: EmptyStackMessageProps) {
-  const { number, title, description, buttonText, buttonLink } = props;
+  const { number, title, description, buttonText, buttonLink, bodyClassName } =
+    props;
 
   return (
     <div className="absolute inset-0 flex items-center justify-center rounded-md bg-black/50">
-      <div className="flex max-w-[200px] flex-col items-center justify-center rounded-md bg-white p-4 shadow-sm">
+      <div
+        className={cn(
+          'flex max-w-[200px] flex-col items-center justify-center rounded-md bg-white p-4 shadow-sm',
+          bodyClassName,
+        )}
+      >
         <span className="flex h-8 w-8 items-center justify-center rounded-full bg-gray-300 text-white">
           {number}
         </span>

src/components/Dashboard/ListDashboardCustomProgress.tsx

@@ -4,7 +4,13 @@ import { DashboardCardLink } from './DashboardCardLink';
 import { useState } from 'react';
 import { CreateRoadmapModal } from '../CustomRoadmap/CreateRoadmap/CreateRoadmapModal';
 import { Simulate } from 'react-dom/test-utils';
-import {Bot, BrainCircuit, Map, PencilRuler} from 'lucide-react';
+import {
+  ArrowUpRight,
+  Bot,
+  BrainCircuit,
+  Map,
+  PencilRuler,
+} from 'lucide-react';
 
 type ListDashboardCustomProgressProps = {
   progresses: UserProgress[];
@@ -40,9 +46,21 @@ export function ListDashboardCustomProgress(
     <>
       {customRoadmapModal}
 
-      <h2 className="mb-2 mt-6 text-xs uppercase text-gray-400">
-        {isAIGeneratedRoadmaps ? 'AI Generated Roadmaps' : 'Custom Roadmaps'}
-      </h2>
+      <div className="mb-2 mt-6 flex items-center justify-between gap-2">
+        <h2 className="text-xs uppercase text-gray-400">
+          {isAIGeneratedRoadmaps ? 'AI Generated Roadmaps' : 'Custom Roadmaps'}
+        </h2>
+
+        {!isLoading && progresses.length !== 0 && (
+          <a
+            href="/ai/explore"
+            className="flex items-center gap-1 text-xs text-gray-500 hover:text-black"
+          >
+            <ArrowUpRight size={12} />
+            Community Roadmaps
+          </a>
+        )}
+      </div>
 
       {!isLoading && progresses.length === 0 && isAIGeneratedRoadmaps && (
         <DashboardCardLink

src/components/Dashboard/PersonalDashboard.tsx

@@ -233,9 +233,9 @@ export function PersonalDashboard(props: PersonalDashboardProps) {
           </h2>
           <a
             href="/home"
-            className="text-xs text-purple-600 underline underline-offset-2 hover:text-purple-700"
+            className="text-xs font-medium bg-gray-200 hover:bg-gray-300 px-2.5 py-1 rounded-full text-gray-700 hover:text-black"
           >
-            Looking for old homepage? Click here
+            Visit Homepage
           </a>
         </div>
       )}
@@ -273,7 +273,7 @@ export function PersonalDashboard(props: PersonalDashboardProps) {
             <DashboardCard
               icon={CheckEmoji}
               title="Best Practices"
-              description="Do things right way"
+              description="Do things the right way"
               href="/best-practices"
             />
           </>
@@ -320,7 +320,6 @@ function DashboardCard(props: DashboardCardProps) {
   return (
     <a
       href={href}
-      target="_blank"
       className="flex flex-col overflow-hidden rounded-lg border border-gray-300 bg-white hover:border-gray-400 hover:bg-gray-50"
     >
       {Icon && (

src/components/Dashboard/ProgressStack.tsx

@@ -26,8 +26,7 @@ type ProgressStackProps = {
   topicDoneToday: number;
 };
 
-const MAX_PROGRESS_TO_SHOW = 5;
-const MAX_BOOKMARKS_TO_SHOW = 5;
+const MAX_PROGRESS_TO_SHOW = 11;
 const MAX_PROJECTS_TO_SHOW = 8;
 
 type ProgressLaneProps = {
@@ -36,6 +35,7 @@ type ProgressLaneProps = {
   linkHref?: string;
   isLoading?: boolean;
   isEmpty?: boolean;
+  loadingWrapperClassName?: string;
   loadingSkeletonCount?: number;
   loadingSkeletonClassName?: string;
   children: React.ReactNode;
@@ -43,6 +43,7 @@ type ProgressLaneProps = {
   emptyIcon?: LucideIcon;
   emptyLinkText?: string;
   emptyLinkHref?: string;
+  className?: string;
 };
 
 function ProgressLane(props: ProgressLaneProps) {
@@ -51,6 +52,7 @@ function ProgressLane(props: ProgressLaneProps) {
     linkText,
     linkHref,
     isLoading = false,
+    loadingWrapperClassName = '',
     loadingSkeletonCount = 4,
     loadingSkeletonClassName = '',
     children,
@@ -59,10 +61,16 @@ function ProgressLane(props: ProgressLaneProps) {
     emptyMessage = `No ${title.toLowerCase()} to show`,
     emptyLinkHref = '/roadmaps',
     emptyLinkText = 'Explore',
+    className,
   } = props;
 
   return (
-    <div className="flex h-full flex-col rounded-md border bg-white px-4 py-3 shadow-sm">
+    <div
+      className={cn(
+        'flex h-full flex-col rounded-md border bg-white px-4 py-3 shadow-sm',
+        className,
+      )}
+    >
       {isLoading && (
         <div className={'flex flex-row justify-between'}>
           <div className="h-[16px] w-[75px] animate-pulse rounded-md bg-gray-100"></div>
@@ -86,11 +94,13 @@ function ProgressLane(props: ProgressLaneProps) {
 
       <div className="mt-4 flex flex-grow flex-col gap-1.5">
         {isLoading && (
-          <>
+          <div
+            className={cn('grid grid-cols-2 gap-2', loadingWrapperClassName)}
+          >
             {Array.from({ length: loadingSkeletonCount }).map((_, index) => (
               <CardSkeleton key={index} className={loadingSkeletonClassName} />
             ))}
-          </>
+          </div>
         )}
         {!isLoading && children}
 
@@ -119,29 +129,27 @@ export function ProgressStack(props: ProgressStackProps) {
   const { progresses, projects, isLoading, accountStreak, topicDoneToday } =
     props;
 
-  const bookmarkedProgresses = progresses.filter(
-    (progress) => progress?.isFavorite,
-  );
-
-  const userProgresses = progresses.filter(
-    (progress) => !progress?.isFavorite || progress?.done > 0,
-  );
-
   const [showAllProgresses, setShowAllProgresses] = useState(false);
+  const sortedProgresses = progresses.sort((a, b) => {
+    if (a.isFavorite && !b.isFavorite) {
+      return 1;
+    }
+
+    if (!a.isFavorite && b.isFavorite) {
+      return -1;
+    }
+
+    return 0;
+  });
   const userProgressesToShow = showAllProgresses
-    ? userProgresses
-    : userProgresses.slice(0, MAX_PROGRESS_TO_SHOW);
+    ? sortedProgresses
+    : sortedProgresses.slice(0, MAX_PROGRESS_TO_SHOW);
 
   const [showAllProjects, setShowAllProjects] = useState(false);
   const projectsToShow = showAllProjects
     ? projects
     : projects.slice(0, MAX_PROJECTS_TO_SHOW);
 
-  const [showAllBookmarks, setShowAllBookmarks] = useState(false);
-  const bookmarksToShow = showAllBookmarks
-    ? bookmarkedProgresses
-    : bookmarkedProgresses.slice(0, MAX_BOOKMARKS_TO_SHOW);
-
   const totalProjectFinished = projects.filter(
     (project) => project.repositoryUrl,
   ).length;
@@ -167,92 +175,70 @@ export function ProgressStack(props: ProgressStackProps) {
       </div>
 
       <div className="mt-2 grid min-h-[330px] grid-cols-1 gap-2 sm:grid-cols-2 md:grid-cols-3">
-        <div className="relative">
-          {!isLoading && bookmarksToShow.length === 0 && (
+        <div className="relative col-span-2">
+          {!isLoading && userProgressesToShow.length === 0 && (
             <EmptyStackMessage
               number={1}
-              title={'Bookmark Roadmaps'}
-              description={'Bookmark some roadmaps to access them quickly'}
+              title={'Bookmark some Roadmaps'}
+              description={
+                'Bookmark some roadmaps to access them quickly and start updating your progress'
+              }
               buttonText={'Explore Roadmaps'}
               buttonLink={'/roadmaps'}
+              bodyClassName="max-w-[280px]"
             />
           )}
 
           <ProgressLane
-            title={'Bookmarks'}
+            title="Progress & Bookmarks"
             isLoading={isLoading}
-            loadingSkeletonCount={5}
-            linkHref={'/roadmaps'}
-            linkText={'Roadmaps'}
-            isEmpty={bookmarksToShow.length === 0}
+            loadingSkeletonCount={MAX_PROGRESS_TO_SHOW}
+            linkHref="/roadmaps"
+            linkText="Roadmaps"
+            isEmpty={userProgressesToShow.length === 0}
             emptyIcon={Bookmark}
             emptyMessage={'No bookmarks to show'}
             emptyLinkHref={'/roadmaps'}
             emptyLinkText={'Explore Roadmaps'}
           >
-            {bookmarksToShow.map((progress) => {
-              return (
-                <DashboardBookmarkCard
-                  key={progress.resourceId}
-                  bookmark={progress}
+            <div className="grid grid-cols-2 gap-2">
+              {userProgressesToShow.length > 0 && (
+                <>
+                  {userProgressesToShow.map((progress) => {
+                    const isFavorite =
+                      progress.isFavorite &&
+                      !progress.done &&
+                      !progress.skipped;
+
+                    if (isFavorite) {
+                      return (
+                        <DashboardBookmarkCard
+                          key={progress.resourceId}
+                          bookmark={progress}
+                        />
+                      );
+                    }
+
+                    return (
+                      <DashboardProgressCard
+                        key={progress.resourceId}
+                        progress={progress}
+                      />
+                    );
+                  })}
+                </>
+              )}
+
+              {sortedProgresses.length > MAX_PROGRESS_TO_SHOW && (
+                <ShowAllButton
+                  showAll={showAllProgresses}
+                  setShowAll={setShowAllProgresses}
+                  count={sortedProgresses.length}
+                  maxCount={MAX_PROGRESS_TO_SHOW}
+                  className="min-h-[38px] rounded-md border border-dashed leading-none"
                 />
-              );
-            })}
-            {bookmarkedProgresses.length > MAX_BOOKMARKS_TO_SHOW && (
-              <ShowAllButton
-                showAll={showAllBookmarks}
-                setShowAll={setShowAllBookmarks}
-                count={bookmarkedProgresses.length}
-                maxCount={MAX_BOOKMARKS_TO_SHOW}
-                className="mb-0.5 mt-3"
-              />
-            )}
-          </ProgressLane>
-        </div>
-
-        <div className="relative">
-          {!isLoading && userProgressesToShow.length === 0 && (
-            <EmptyStackMessage
-              number={2}
-              title={'Track Progress'}
-              description={'Pick your first roadmap and start learning'}
-              buttonText={'Explore roadmaps'}
-              buttonLink={'/roadmaps'}
-            />
-          )}
-          <ProgressLane
-            title={'Progress'}
-            linkHref={'/roadmaps'}
-            linkText={'Roadmaps'}
-            isLoading={isLoading}
-            loadingSkeletonCount={5}
-            isEmpty={userProgressesToShow.length === 0}
-            emptyMessage={'Update your Progress'}
-            emptyIcon={Map}
-            emptyLinkText={'Explore Roadmaps'}
-          >
-            {userProgressesToShow.length > 0 && (
-              <>
-                {userProgressesToShow.map((progress) => {
-                  return (
-                    <DashboardProgressCard
-                      key={progress.resourceId}
-                      progress={progress}
-                    />
-                  );
-                })}
-              </>
-            )}
-
-            {userProgresses.length > MAX_PROGRESS_TO_SHOW && (
-              <ShowAllButton
-                showAll={showAllProgresses}
-                setShowAll={setShowAllProgresses}
-                count={userProgresses.length}
-                maxCount={MAX_PROGRESS_TO_SHOW}
-                className="mb-0.5 mt-3"
-              />
-            )}
+              )}
+            </div>
           </ProgressLane>
         </div>
 
@@ -262,6 +248,7 @@ export function ProgressStack(props: ProgressStackProps) {
             linkHref={'/projects'}
             linkText={'Projects'}
             isLoading={isLoading}
+            loadingWrapperClassName="grid-cols-1"
             loadingSkeletonClassName={'h-5'}
             loadingSkeletonCount={8}
             isEmpty={projectsToShow.length === 0}
@@ -272,7 +259,7 @@ export function ProgressStack(props: ProgressStackProps) {
           >
             {!isLoading && projectsToShow.length === 0 && (
               <EmptyStackMessage
-                number={3}
+                number={2}
                 title={'Build your first project'}
                 description={'Pick a project to practice and start building'}
                 buttonText={'Explore Projects'}
@@ -317,17 +304,15 @@ function ShowAllButton(props: ShowAllButtonProps) {
   const { showAll, setShowAll, count, maxCount, className } = props;
 
   return (
-    <span className="flex flex-grow items-end">
-      <button
-        className={cn(
-          'flex w-full items-center justify-center text-sm text-gray-500 hover:text-gray-700',
-          className,
-        )}
-        onClick={() => setShowAll(!showAll)}
-      >
-        {!showAll ? <>+ show {count - maxCount} more</> : <>- show less</>}
-      </button>
-    </span>
+    <button
+      className={cn(
+        'flex w-full items-center justify-center text-sm text-gray-500 hover:text-gray-700',
+        className,
+      )}
+      onClick={() => setShowAll(!showAll)}
+    >
+      {!showAll ? <>+ show {count - maxCount} more</> : <>- show less</>}
+    </button>
   );
 }
 
@@ -341,7 +326,7 @@ function CardSkeleton(props: CardSkeletonProps) {
   return (
     <div
       className={cn(
-        'h-10 w-full animate-pulse rounded-md bg-gray-100',
+        'h-[38px] w-full animate-pulse rounded-md bg-gray-100',
         className,
       )}
     />

src/data/guides/devops-engineer.md

@@ -1,5 +1,5 @@
 ---
-title: 'What is a DevOps Engineer? Responsbilities & Roles in @currentYear@'
+title: 'What is a DevOps Engineer? Responsibilities & Roles in @currentYear@'
 description: 'Explore the responsibilities and roles of a DevOps Engineer in @currentYear@. Gain insights into the evolving field of DevOps and what it takes to succeed.'
 authorId: ekene
 excludedBySlug: '/devops/devops-engineer'
@@ -21,13 +21,13 @@ tags:
 
 ![What is a DevOps engineer and what are their responsibilities?](https://assets.roadmap.sh/guest/what-is-devops-engineer-jort4.jpg)
 
-Are you a developer monitoring recent changes in the ecosystem, looking to change careers or pick up new skills in 2024? If your choice is DevOps, you might be wondering what it entails, what it will take to become one in 2024, and how it is affected by the recent changes in the tech ecosystem.
+Are you a developer monitoring recent changes in the ecosystem, looking to change careers or pick up new skills in 2024? If your choice is [DevOps](https://roadmap.sh/devops), you might be wondering what it entails, what it will take to become one in 2024, and how it is affected by the recent changes in the tech ecosystem.
 
 In recent years, the technology ecosystem has experienced a constant shift in the way hiring managers reach out, companies hire, and the roles and responsibilities described in job postings. Particularly, 2023 proved to be a challenging year as layoffs in the technology sector grew significantly, with more than [262,000 employees laid off across 1,180 firms](https://www.statista.com/statistics/199999/worldwide-tech-layoffs-covid-19/).
 
 Despite this change, DevOps, a field within the same ecosystem, has experienced continuous growth. In fact, the DevOps market size is expected to grow to [25.5 billion USD by 2028](https://www.marketsandmarkets.com/Market-Reports/devops-market-824.html#:~:text=The%20global%20DevOps%20market%20size,USD%2010.4%20billion%20in%202023.). This indicates that the roles and responsibilities of a DevOps engineer in the modern technology environment will evolve alongside this increasing demand.
 
-In this guide, we'll discuss the roles and responsibilities of a [DevOps engineer](https://roadmap.sh/devops), the importance of DevOps in teams, common roles within a DevOps team, and best practices for DevOps teams. Finally, the guide will offer roadmaps for your DevOps journey.
+In this guide, we'll discuss the roles and responsibilities of a DevOps engineer, the importance of DevOps in teams, common roles within a DevOps team, and best practices for DevOps teams. Finally, the guide will offer roadmaps for your DevOps journey.
 
 A DevOps engineer's roles and responsibilities include:
 

src/data/roadmaps/android/content/cloud-messaging@e3vHFaFFMV7kI9q6yf5e9.md

@@ -1,3 +1,8 @@
 # Cloud Messaging
 
-Firebase Cloud Messaging (FCM) is a powerful, battery-efficient messaging service that enables you to send messages reliably and securely to your Android applications. It enables you to send two types of messages: "notification messages" and "data messages". Notification messages are primarily meant for user notifications and will only be delivered when the application is in the foreground. On the other hand, data messages can handle even when the app is in the background or killed and can be used to send custom key-value pairs. FCM also supports various additional features, such as topic messaging to send messages to multiple devices subscribed to a common topic, device group messaging for sending messages to groups of user devices, and upstream messaging for sending messages from the client application to the FCM server.
+Firebase Cloud Messaging (FCM) is a powerful, battery-efficient messaging service that enables you to send messages reliably and securely to your Android applications. It enables you to send two types of messages: "notification messages" and "data messages". Notification messages are primarily meant for user notifications and will only be delivered when the application is in the foreground. On the other hand, data messages can handle even when the app is in the background or killed and can be used to send custom key-value pairs. FCM also supports various additional features, such as topic messaging to send messages to multiple devices subscribed to a common topic, device group messaging for sending messages to groups of user devices, and upstream messaging for sending messages from the client application to the FCM server.
+
+Visit the following resources to learn more:
+
+- [@official@Documentation](https://firebase.google.com/docs/cloud-messaging/android/client)
+- [@video@Firebase Cloud Messaging](https://www.youtube.com/watch?v=sioEY4tWmLI&list=PLl-K7zZEsYLkuHRCtHTpi6JYHka8oHLft) 

src/data/roadmaps/angular/content/angular-architecture@DE3cMpeRYuUPw2ADtfS-3.md

@@ -1,5 +1,13 @@
 # Angular Architecture
 
+Angular follows a modular architecture pattern, dividing the application into distinct modules, components, services, and other elements, which enhances code organization and maintainability. The key building blocks include modules, which are containers grouping related components, services, directives, and other elements to ensure proper encapsulation and reusability. Components are the building blocks of Angular applications, representing parts of the user interface with associated logic, consisting of templates, styles, and a class defining behavior. Services encapsulate reusable business logic, data manipulation, and API communication, enabling data and functionality sharing across components. Directives are HTML attributes or elements that extend HTML functionality, allowing reusable behaviors across the application. Lastly, pipes transform data before displaying it in templates, providing convenient ways to format, filter, and sort data.
+
 Visit the following resources to learn more:
 
 - [@official@Angular coding style guide](https://angular.dev/style-guide)
+- [@article@The Ultimate Guide to Angular Architecture: Best Practices for efficient coding with Angular Framework](https://angulardive.com/blog/the-ultimate-guide-to-angular-architecture-best-practices-for-efficient-coding-with-angular-framework/)
+- [@article@Modern Architectures with Angular Part 1: Strategic design with Sheriff and Standalone Components](https://www.angulararchitects.io/en/blog/modern-architectures-with-angular-part-1-strategic-design-with-sheriff-and-standalone-components/)
+- [@article@Optimizing the architecture of large web applications with Angular](https://albertobasalo.medium.com/optimizing-the-architecture-of-large-web-applications-with-angular-79d03b01a92b)
+- [@article@Angular Architecture Concepts and Patterns](https://www.bigscal.com/blogs/frontend/angular-architecture-concepts-and-patterns/)
+- [@article@Top 10 Angular Architecture Mistakes](https://angularexperts.io/blog/top-10-angular-architecture-mistakes)
+- [@article@Architecting Angular: A Guide to effective project structure](https://medium.com/@nile.bits/architecting-angular-a-guide-to-effective-project-structure-9756bae92262)

src/data/roadmaps/backend/content/git@_I1E__wCIVrhjMk6IMieE.md

@@ -4,7 +4,7 @@ Git is a distributed version control system designed to handle projects of any s
 
 Visit the following resources to learn more:
 
-- [@roadmap@Learn Git & GitHub](/git-github)
+- [@roadmap@Learn Git & GitHub](https://roadmap.sh/git-github)
 - [@video@Git & GitHub Crash Course For Beginners](https://www.youtube.com/watch?v=SWYqp7iY_Tc)
 - [@article@Learn Git with Tutorials, News and Tips - Atlassian](https://www.atlassian.com/git)
 - [@article@Git Cheat Sheet](https://cs.fyi/guide/git-cheatsheet)

src/data/roadmaps/backend/content/github@ptD8EVqwFUYr4W5A_tABY.md

@@ -4,7 +4,7 @@ GitHub is a web-based platform for version control and collaboration using Git.
 
 Visit the following resources to learn more:
 
-- [@roadmap@Learn Git & GitHub](/git-github)
+- [@roadmap@Learn Git & GitHub](https://roadmap.sh/git-github)
 - [@official@GitHub Website](https://github.com)
 - [@video@What is GitHub?](https://www.youtube.com/watch?v=w3jLJU7DT5E)
 - [@video@Git vs. GitHub: Whats the difference?](https://www.youtube.com/watch?v=wpISo9TNjfU)

src/data/roadmaps/backend/content/go@BdXbcz4-ar3XOX0wIKzBp.md

@@ -4,7 +4,7 @@ Go, also known as Golang, is a statically typed, compiled programming language d
 
 Visit the following resources to learn more:
 
-- [@roadmap@Visit Dedicated Go Roadmap](/golang)
+- [@roadmap@Visit Dedicated Go Roadmap](https://roadmap.sh/golang)
 - [@official@Go Reference Documentation](https://go.dev/doc/)
 - [@article@Go by Example - annotated example programs](https://gobyexample.com/)
 - [@article@Go, the Programming Language of the Cloud](https://thenewstack.io/go-the-programming-language-of-the-cloud/)

src/data/roadmaps/backend/content/graphql@zp3bq38tMnutT2N0tktOW.md

@@ -4,7 +4,7 @@ GraphQL is a query language for APIs and a runtime for executing those queries,
 
 Visit the following resources to learn more:
 
-- [@roadmap@GraphQL Roadmap](/graphql)
+- [@roadmap@GraphQL Roadmap](https://roadmap.sh/graphql)
 - [@official@GraphQL Official Website](https://graphql.org/)
 - [@video@Tutorial - GraphQL Explained in 100 Seconds](https://www.youtube.com/watch?v=eIQh02xuVw4)
 - [@feed@Explore top posts about GraphQL](https://app.daily.dev/tags/graphql?ref=roadmapsh)

src/data/roadmaps/backend/content/java@ANeSwxJDJyQ-49pO2-CCI.md

@@ -4,7 +4,7 @@ Java is a high-level, object-oriented programming language known for its portabi
 
 Visit the following resources to learn more:
 
-- [@roadmap@Visit Dedicated Java Roadmap](/java)
+- [@roadmap@Visit Dedicated Java Roadmap](https://roadmap.sh/java)
 - [@official@Java Website](https://www.java.com/)
 - [@article@W3 Schools Tutorials](https://www.w3schools.com/java/)
 - [@video@Complete Java course](https://www.youtube.com/watch?v=xk4_1vDrzzo)

src/data/roadmaps/backend/content/javascript@8-lO-v6jCYYoklEJXULxN.md

@@ -4,7 +4,7 @@ JavaScript is a versatile, high-level programming language primarily used for ad
 
 Visit the following resources to learn more:
 
-- [@roadmap@Visit Dedicated JavaScript Roadmap](/javascript)
+- [@roadmap@Visit Dedicated JavaScript Roadmap](https://roadmap.sh/javascript)
 - [@article@The Modern JavaScript Tutorial](https://javascript.info/)
 - [@article@Build 30 Javascript projects in 30 days](https://javascript30.com/)
 - [@video@JavaScript Crash Course for Beginners](https://youtu.be/hdI2bqOjy3c?t=2)

src/data/roadmaps/backend/content/mongodb@28U6q_X-NTYf7OSKHjoWH.md

@@ -4,7 +4,7 @@ MongoDB is a NoSQL, open-source database designed for storing and managing large
 
 Visit the following resources to learn more:
 
-- [@roadmap@Visit Dedicated MongoDB Roadmap](/mongodb)
+- [@roadmap@Visit Dedicated MongoDB Roadmap](https://roadmap.sh/mongodb)
 - [@official@MongoDB Website](https://www.mongodb.com/)
 - [@official@Learning Path for MongoDB Developers](https://learn.mongodb.com/catalog)
 - [@article@MongoDB Online Sandbox](https://mongoplayground.net/)

src/data/roadmaps/backend/content/ms-sql@dEsTje8kfHwWjCI3zcgLC.md

@@ -4,7 +4,7 @@ Microsoft SQL Server (MS SQL) is a relational database management system develop
 
 Visit the following resources to learn more:
 
-- [@roadmap@SQL Roadmap](/sql)
+- [@roadmap@SQL Roadmap](https://roadmap.sh/sql)
 - [@article@MS SQL website](https://www.microsoft.com/en-ca/sql-server/)
 - [@article@Tutorials for SQL Server](https://docs.microsoft.com/en-us/sql/sql-server/tutorials-for-sql-server-2016?view=sql-server-ver15)
 - [@video@SQL Server tutorial for beginners](https://www.youtube.com/watch?v=-EPMOaV7h_Q)

src/data/roadmaps/backend/content/postgresql@FihTrMO56kj9jT8O_pO2T.md

@@ -4,7 +4,7 @@ PostgreSQL is an advanced, open-source relational database management system (RD
 
 Visit the following resources to learn more:
 
-- [@roadmap@Visit Dedicated PostgreSQL DBA Roadmap](/postgresql-dba)
+- [@roadmap@Visit Dedicated PostgreSQL DBA Roadmap](https://roadmap.sh/postgresql-dba)
 - [@official@Official Website](https://www.postgresql.org/)
 - [@article@Learn PostgreSQL - Full Tutorial for Beginners](https://www.postgresqltutorial.com/)
 - [@video@PostgreSQL in 100 Seconds](https://www.youtube.com/watch?v=n2Fluyr3lbc)

src/data/roadmaps/backend/content/python@J_sVHsD72Yzyqb9KCIvAY.md

@@ -4,7 +4,7 @@ Python is a high-level, interpreted programming language known for its readabili
 
 Visit the following resources to learn more:
 
-- [@roadmap@Visit Dedicated Python Roadmap](/python)
+- [@roadmap@Visit Dedicated Python Roadmap](https://roadmap.sh/python)
 - [@official@Python Website](https://www.python.org/)
 - [@article@Automate the Boring Stuff](https://automatetheboringstuff.com/)
 - [@course@Python Full Course for free](https://www.youtube.com/watch?v=ix9cRaBkVe0)

src/data/roadmaps/backend/content/real-time-data@5XGvep2qoti31bsyqNzrU.md

@@ -1,3 +1,7 @@
 # Real Time Data
 
 Real-time data refers to information that is processed and made available immediately or with minimal delay, allowing users or systems to react promptly to current conditions. This type of data is essential in applications requiring immediate updates and responses, such as financial trading platforms, online gaming, real-time analytics, and monitoring systems. Real-time data processing involves capturing, analyzing, and delivering information as it is generated, often using technologies like stream processing frameworks (e.g., Apache Kafka, Apache Flink) and low-latency databases. Effective real-time data systems can handle high-speed data flows, ensuring timely and accurate decision-making.
+
+Learn more from the following resources:
+- [@article@Real-time data - Wiki](https://en.wikipedia.org/wiki/Real-time_data)
+- [@article@What is Real-time Data?](https://www.qlik.com/us/streaming-data/real-time-data)

src/data/roadmaps/backend/content/version-control-systems@ezdqQW9wTUw93F6kjOzku.md

@@ -4,7 +4,7 @@ Version Control Systems (VCS) are tools that manage and track changes to code or
 
 Visit the following resources to learn more:
 
-- [@roadmap@Learn Git & GitHub](/git-github)
+- [@roadmap@Learn Git & GitHub](https://roadmap.sh/git-github)
 - [@article@Git](https://git-scm.com/)
 - [@article@What is Version Control?](https://www.atlassian.com/git/tutorials/what-is-version-control)
 - [@video@Version Control System (VCS) - Everything you need to know](https://www.youtube.com/watch?v=SVkuliabq4g)

src/data/roadmaps/blockchain/content/angular@UY_vAsixTyocvo8zvAF4b.md

@@ -4,6 +4,6 @@ Angular is a component based front-end development framework built on TypeScript
 
 Visit the following resources to learn more:
 
-- [@roadmap@Visit Dedicated Angular Roadmap](/angular)
+- [@roadmap@Visit Dedicated Angular Roadmap](https://roadmap.sh/angular)
 - [@official@Official - Getting started with Angular](https://angular.io/start)
 - [@feed@Explore top posts about Angular](https://app.daily.dev/tags/angular?ref=roadmapsh)

src/data/roadmaps/blockchain/content/go@jxlQ1ibcCv6ZlcEvobZ_G.md

@@ -4,7 +4,7 @@ Go is an open source programming language supported by Google. Go can be used to
 
 Visit the following resources to learn more:
 
-- [@roadmap@Visit Dedicated Go Roadmap](/golang)
+- [@roadmap@Visit Dedicated Go Roadmap](https://roadmap.sh/golang)
 - [@official@A Tour of Go – Go Basics](https://go.dev/tour/welcome/1)
 - [@official@Go Reference Documentation](https://go.dev/doc/)
 - [@article@Go by Example - annotated example programs](https://gobyexample.com/)

src/data/roadmaps/blockchain/content/python@pVG7bGqVGCeSBlZxRNHJs.md

@@ -4,7 +4,7 @@ Python is a well known programming language which is both a strongly typed and a
 
 Visit the following resources to learn more:
 
-- [@roadmap@Visit Dedicated Python Roadmap](/python)
+- [@roadmap@Visit Dedicated Python Roadmap](https://roadmap.sh/python)
 - [@official@Python Website](https://www.python.org/)
 - [@official@Python Getting Started](https://www.python.org/about/gettingstarted/)
 - [@article@W3Schools - Python Tutorial ](https://www.w3schools.com/python/)

src/data/roadmaps/blockchain/content/react@0DUYS40_-BTpk2rLQ1a0e.md

@@ -4,7 +4,7 @@ React is the most popular front-end JavaScript library for building user interfa
 
 Visit the following resources to learn more:
 
-- [@roadmap@Visit Dedicated React Roadmap](/react)
+- [@roadmap@Visit Dedicated React Roadmap](https://roadmap.sh/react)
 - [@article@React Website](https://reactjs.org/)
 - [@article@Official Getting Started](https://reactjs.org/tutorial/tutorial.html)
 - [@video@React JS Course for Beginners](https://www.youtube.com/watch?v=nTeuhbP7wdE)

src/data/roadmaps/blockchain/content/vue@Ke97bMHGfb-8hB_xSwMbk.md

@@ -4,7 +4,7 @@ Vue.js is an open-source JavaScript framework for building user interfaces and s
 
 Visit the following resources to learn more:
 
-- [@roadmap@Visit Dedicated Vue Roadmap](/vue)
+- [@roadmap@Visit Dedicated Vue Roadmap](https://roadmap.sh/vue)
 - [@article@Vue.js Website](https://vuejs.org/)
 - [@article@Official Getting Started](https://vuejs.org/v2/guide/)
 - [@video@Vue.js Course for Beginners](https://www.youtube.com/watch?v=FXpIoQ_rT_c)

src/data/roadmaps/computer-science/content/go@mWW88VnkqWgDz02qw5zU-.md

@@ -4,7 +4,7 @@ Go is an open source programming language supported by Google. Go can be used to
 
 Visit the following resources to learn more:
 
-- [@roadmap@Visit Dedicated Go Roadmap](/golang)
+- [@roadmap@Visit Dedicated Go Roadmap](https://roadmap.sh/golang)
 - [@official@A Tour of Go – Go Basics](https://go.dev/tour/welcome/1)
 - [@official@Go Reference Documentation](https://go.dev/doc/)
 - [@article@Go by Example - annotated example programs](https://gobyexample.com/)

src/data/roadmaps/computer-science/content/java@1lQSUFrrIGq19nUnM92-I.md

@@ -5,7 +5,7 @@ It was created in 1995 by James Gosling at Sun Microsystems and is one of the mo
 
 Visit the following resources to learn more:
 
-- [@roadmap@Visit Dedicated Java Roadmap](/java)
+- [@roadmap@Visit Dedicated Java Roadmap](https://roadmap.sh/java)
 - [@official@Java Website](https://www.java.com/)
 - [@article@W3 Schools Tutorials](https://www.w3schools.com/java/)
 - [@video@Java Crash Course](https://www.youtube.com/watch?v=eIrMbAQSU34)

src/data/roadmaps/computer-science/content/python@RlKZzs44biQPgxD0tK1qx.md

@@ -4,7 +4,7 @@ Python is a well known programming language which is both a strongly typed and a
 
 Visit the following resources to learn more:
 
-- [@roadmap@Visit Dedicated Python Roadmap](/python)
+- [@roadmap@Visit Dedicated Python Roadmap](https://roadmap.sh/python)
 - [@official@Python Website](https://www.python.org/)
 - [@official@Python Getting Started](https://www.python.org/about/gettingstarted/)
 - [@article@Automate the Boring Stuff](https://automatetheboringstuff.com/)

src/data/roadmaps/datastructures-and-algorithms/content/100-language/100-javascript.md

@@ -4,7 +4,7 @@ JavaScript allows you to add interactivity to your pages. Common examples that y
 
 Visit the following resources to learn more:
 
-- [@roadmap@Visit Dedicated JavaScript Roadmap](/javascript)
+- [@roadmap@Visit Dedicated JavaScript Roadmap](https://roadmap.sh/javascript)
 - [@article@W3Schools – JavaScript Tutorial](https://www.w3schools.com/js/)
 - [@article@The Modern JavaScript Tutorial](https://javascript.info/)
 - [@video@JavaScript Crash Course for Beginners](https://youtu.be/hdI2bqOjy3c)

src/data/roadmaps/datastructures-and-algorithms/content/100-language/101-java.md

@@ -5,7 +5,7 @@ It was created in 1995 by James Gosling at Sun Microsystems and is one of the mo
 
 Visit the following resources to learn more:
 
-- [@roadmap@Visit Dedicated Java Roadmap](/java)
+- [@roadmap@Visit Dedicated Java Roadmap](https://roadmap.sh/java)
 - [@official@Java Website](https://www.java.com/)
 - [@article@W3 Schools Tutorials](https://www.w3schools.com/java/)
 - [@video@Java Crash Course](https://www.youtube.com/watch?v=eIrMbAQSU34)

src/data/roadmaps/datastructures-and-algorithms/content/100-language/102-go.md

@@ -4,7 +4,7 @@ Go is an open source programming language supported by Google. Go can be used to
 
 Visit the following resources to learn more:
 
-- [@roadmap@Visit Dedicated Go Roadmap](/golang)
+- [@roadmap@Visit Dedicated Go Roadmap](https://roadmap.sh/golang)
 - [@official@A Tour of Go – Go Basics](https://go.dev/tour/welcome/1)
 - [@official@Go Reference Documentation](https://go.dev/doc/)
 - [@article@Go by Example - annotated example programs](https://gobyexample.com/)

src/data/roadmaps/datastructures-and-algorithms/content/100-language/105-python.md

@@ -4,7 +4,7 @@ Python is a well known programming language which is both a strongly typed and a
 
 Visit the following resources to learn more:
 
-- [@roadmap@Visit Dedicated Python Roadmap](/python)
+- [@roadmap@Visit Dedicated Python Roadmap](https://roadmap.sh/python)
 - [@official@Python Website](https://www.python.org/)
 - [@official@Python Getting Started](https://www.python.org/about/gettingstarted/)
 - [@article@Automate the Boring Stuff](https://automatetheboringstuff.com/)

src/data/roadmaps/datastructures-and-algorithms/content/105-sorting-algorithms/104-selection-sort.md

@@ -1,3 +1,3 @@
 # Selection Sort
 
-Selection Sort is a simple and intuitive sorting algorithm. It works by dividing the array into two parts - sorted and unsorted. Initially, the sorted part is empty and the unsorted part contains all the elements. The algorithm repeatedly selects the smallest (or largest, if sorting in descending order) element from the unsorted part and moves that to the end of the sorted part. The process continues until the unsorted part becomes empty and the sorted part contains all the elements. Selection sort is not efficient on large lists, as its time complexity is $O(n²)$ where $n$ is the number of items.
+Selection Sort is a simple and intuitive sorting algorithm. It works by dividing the array into two parts - sorted and unsorted. Initially, the sorted part is empty and the unsorted part contains all the elements. The algorithm repeatedly selects the smallest (or largest, if sorting in descending order) element from the unsorted part and moves that to the end of the sorted part. The process continues until the unsorted part becomes empty and the sorted part contains all the elements. Selection sort is not efficient on large lists, as its time complexity is O(n²) where n is the number of items.

src/data/roadmaps/devops/content/go@npnMwSDEK2aLGgnuZZ4dO.md

@@ -4,7 +4,7 @@ Go is an open source programming language supported by Google. Go can be used to
 
 Visit the following resources to learn more:
 
-- [@roadmap@Visit Dedicated Go Roadmap](/golang)
+- [@roadmap@Visit Dedicated Go Roadmap](https://roadmap.sh/golang)
 - [@official@A Tour of Go – Go Basics](https://go.dev/tour/welcome/1)
 - [@official@Go Reference Documentation](https://go.dev/doc/)
 - [@article@Go by Example - annotated example programs](https://gobyexample.com/)

src/data/roadmaps/devops/content/javascript--nodejs@QCdemtWa2mE78poNXeqzr.md

@@ -4,7 +4,7 @@ JavaScript allows you to add interactivity to your pages. Common examples that y
 
 Visit the following resources to learn more:
 
-- [@roadmap@Visit Dedicated JavaScript Roadmap](/javascript)
+- [@roadmap@Visit Dedicated JavaScript Roadmap](https://roadmap.sh/javascript)
 - [@article@W3Schools – JavaScript Tutorial](https://www.w3schools.com/js/)
 - [@article@The Modern JavaScript Tutorial](https://javascript.info/)
 - [@video@JavaScript Crash Course for Beginners](https://youtu.be/hdI2bqOjy3c)

src/data/roadmaps/devops/content/networking-tools@OaqKLZe-XnngcDhDzCtRt.md

@@ -17,7 +17,7 @@ Networking tools are used to troubleshoot network issues. They are also used to
 
 - [How to Run Traceroute in Linux](https://linuxhint.com/run_traceroute_linux/)
 
-`ping` (**P**acket **In**ternet **G**roper) command is used to check the network connectivity between host and server/host. This command takes as input the IP address or the URL and sends a data packet to the specified address with the message “PING” and get a response from the server/host this time is recorded which is called latency.
+`ping` (**P**acket **In**ternet **G**roper) command is used to check the network connectivity between host and server/host. This command takes as input the IP address or hostname and sends a data packet to the specified address with the message “PING” and get a response from the server/host this time is recorded which is called latency.
 
 - [What is ping command?](https://linuxize.com/post/linux-ping-command/)
 

src/data/roadmaps/devops/content/python@TwVfCYMS9jSaJ6UyYmC-K.md

@@ -4,7 +4,7 @@ Python is a multi-paradigm language. Being an interpreted language, code is exec
 
 Visit the following resources to learn more:
 
-- [@roadmap@Visit Dedicated Python Roadmap](/python)
+- [@roadmap@Visit Dedicated Python Roadmap](https://roadmap.sh/python)
 - [@official@Python Website](https://www.python.org/)
 - [@official@Python Getting Started](https://www.python.org/about/gettingstarted/)
 - [@article@Automate the Boring Stuff](https://automatetheboringstuff.com/)

src/data/roadmaps/devops/content/ubuntu--debian@cTqVab0VbVcn3W7i0wBrX.md

@@ -15,3 +15,4 @@ Visit the following resources to learn more:
 - [@video@Introduction to Linux - Full Course for Beginners](https://www.youtube.com/watch?v=sWbUDq4S6Y8\&pp=ygUTVWJ1bnR1IGNyYXNoIGNvdXJzZQ%3D%3D)
 - [@article@Linux Fundamentals](https://academy.hackthebox.com/course/preview/linux-fundamentals)
 - [@feed@Explore top posts about Ubuntu](https://app.daily.dev/tags/ubuntu?ref=roadmapsh)
+- [@course@Practice Linux Commands with Hands-on Labs"](https://labex.io/courses/linux-basic-commands-practice-online)

src/data/roadmaps/frontend/content/angular@-bHFIiXnoUQSov64WI9yo.md

@@ -4,7 +4,7 @@ Angular is a component based front-end development framework built on TypeScript
 
 Visit the following resources to learn more:
 
-- [@roadmap@Visit Dedicated Angular Roadmap](/angular)
+- [@roadmap@Visit Dedicated Angular Roadmap](https://roadmap.sh/angular)
 - [@official@Official - Getting started with Angular](https://angular.io/start)
 - [@video@Angular for Beginners Course](https://www.youtube.com/watch?v=3qBXWUpoPHo)
 - [@feed@Explore top posts about Angular](https://app.daily.dev/tags/angular?ref=roadmapsh)

src/data/roadmaps/frontend/content/flutter@2MRvAK9G9RGM_auWytcKh.md

@@ -4,7 +4,7 @@ Flutter is a free and open-source multi-platform UI framework created by Google
 
 Visit the following resources to learn more:
 
-- [@roadmap@Visit Dedicated Flutter Roadmap](/flutter)
+- [@roadmap@Visit Dedicated Flutter Roadmap](https://roadmap.sh/flutter)
 - [@official@Flutter Website](https://flutter.dev)
 - [@official@Flutter for Desktop](https://flutter.dev/multi-platform/desktop)
 - [@video@Flutter Tutorial for Beginners](https://www.youtube.com/watch?v=1ukSR1GRtMU\&list=PL4cUxeGkcC9jLYyp2Aoh6hcWuxFDX6PBJ)

src/data/roadmaps/frontend/content/flutter@dIQXjFEUAJAGxxfAYceHU.md

@@ -14,7 +14,7 @@ If you know a bit of programming, Dart is a typed object programming language. Y
 
 Visit the following resources to learn more:
 
-- [@roadmap@Visit Dedicated Flutter Roadmap](/flutter)
+- [@roadmap@Visit Dedicated Flutter Roadmap](https://roadmap.sh/flutter)
 - [@official@Flutter Website](https://flutter.dev)
 - [@video@Flutter Tutorial for Beginners](https://www.youtube.com/watch?v=1ukSR1GRtMU\&list=PL4cUxeGkcC9jLYyp2Aoh6hcWuxFDX6PBJ)
 - [@article@Learn Dart Programming](https://www.tutorialspoint.com/dart_programming/index.htm)

src/data/roadmaps/frontend/content/javascript@ODcfFEorkfJNupoQygM53.md

@@ -4,7 +4,7 @@ JavaScript allows you to add interactivity to your pages. Common examples that y
 
 Visit the following resources to learn more:
 
-- [@roadmap@Visit Dedicated JavaScript Roadmap](/javascript)
+- [@roadmap@Visit Dedicated JavaScript Roadmap](https://roadmap.sh/javascript)
 - [@article@The Modern JavaScript Tutorial](https://javascript.info/)
 - [@video@JavaScript Crash Course for Beginners](https://youtu.be/hdI2bqOjy3c?t=2)
 - [@article@Build 30 Javascript projects in 30 days](https://javascript30.com/)

src/data/roadmaps/frontend/content/react@SGDf_rbfmFSHlxI-Czzlz.md

@@ -4,7 +4,7 @@ React is the most popular front-end JavaScript library for building user interfa
 
 Visit the following resources to learn more:
 
-- [@roadmap@Visit Dedicated React Roadmap](/react)
+- [@roadmap@Visit Dedicated React Roadmap](https://roadmap.sh/react)
 - [@official@React Website](https://react.dev)
 - [@official@Official Getting Started](https://react.dev/learn/tutorial-tic-tac-toe)
 - [@video@React JS Course for Beginners](https://www.youtube.com/watch?v=nTeuhbP7wdE)

src/data/roadmaps/frontend/content/react@tG5v3O4lNIFc2uCnacPak.md

@@ -4,7 +4,7 @@ React is the most popular front-end JavaScript library for building user interfa
 
 Visit the following resources to learn more:
 
-- [@roadmap@Visit Dedicated React Roadmap](/react)
+- [@roadmap@Visit Dedicated React Roadmap](https://roadmap.sh/react)
 - [@official@React Website](https://react.dev)
 - [@official@Official Getting Started](https://react.dev/learn/tutorial-tic-tac-toe)
 - [@video@React JS Course for Beginners](https://www.youtube.com/watch?v=nTeuhbP7wdE)

src/data/roadmaps/frontend/content/vuejs@ERAdwL1G9M1bnx-fOm5ZA.md

@@ -4,7 +4,7 @@ Vue.js is an open-source JavaScript framework for building user interfaces and s
 
 Visit the following resources to learn more:
 
-- [@roadmap@Visit Dedicated Vue Roadmap](/vue)
+- [@roadmap@Visit Dedicated Vue Roadmap](https://roadmap.sh/vue)
 - [@official@Vue.js Website](https://vuejs.org/)
 - [@official@Official Getting Started](https://vuejs.org/v2/guide/)
 - [@video@Vue.js Course for Beginners](https://www.youtube.com/watch?v=FXpIoQ_rT_c)

src/data/roadmaps/frontend/faqs.astro

@@ -2,39 +2,78 @@
 import type { FAQType } from '../../../components/FAQs/FAQs.astro';
 
 export const faqs: FAQType[] = [
+  {
+    question: 'Is Frontend Development really coding?',
+    answer: [
+      "Do frontend developers really code? The answer is yes, absolutely.",
+      "The fact that frontend developers are full-time developers who produce an output that is visually appealing (thanks to the designs provided by others) sometimes confuses others, making them believe that frontend developers aren\’t really coding. However, that couldn\’t be further from the truth.",
+      "As a frontend developer, you\’ll be coding all the time.",
+      "While in some companies, the frontend developer is also a skilled designer or UX engineer, those are not the typical profiles. As a frontend dev, your learning focus should be coding-related (i.e coding best practices, software design patterns, frontend architecture, etc).",
+    ],
+  },
+  {
+    question: 'Is Frontend Developer a good career?',
+    answer: [
+      "As the web space and technology in general continue to evolve, the role of frontend developers becomes more relevant. In the end, providing a web version of an application has quite a lot of benefits, making it the obvious version (unless there is a specific requirement forcing for native development) for most systems, meaning that frontend developers have the potential to be involved in all types of projects and companies.",
+      "This renders the frontend developer career one of the most versatile and in-demand paths in the web tech industry.",
+    ],
+  },
+  {
+    question: 'How to prepare for a frontend developer interview?',
+    answer: [
+      "If you\’re looking to prepare for a frontend developer interview, make sure you\’ve tackled the fundamentals of the technologies you\’ll work with.",
+      "And while that is one of the most impactful things you can do for your frontend career, consider focusing on the following points as well:",
+      "1. **Master the Fundamentals**: Ensure a solid understanding of HTML, CSS, and JavaScript, as they are crucial for the role of frontend developer.",
+      "2. **Practice Coding**: Improve your skills through mini-projects or coding challenges on platforms like LeetCode, especially those focused on front-end development.",
+      "3. **Learn Modern Frameworks**: Familiarize yourself with popular frameworks like React, Angular, or Vue.js.",
+      "4. **Know Your Tools**: Be comfortable with version control systems, testing, and build tools, which are vital for all types of development, including frontend.",
+      "5. **Understand UI/UX Principles**: Learn about accessibility, responsive design, and intuitive interfaces to stand out.",
+      "6. **Research the Company**: Show interest by learning about the company\’s business and products.",
+      "7. **Enhance Communication Skills**: Good communication skills are essential for success in any role, so make sure to work on them.",
+    ],
+  },
+  {
+    question: 'How is Frontend Development different from Backend Development?',
+    answer: [
+      "The main difference between frontend development and backend development is that frontend development focuses on the UI, while [backend development](https://roadmap.sh/backend) focuses more on the server-side logic.",
+      "You see, frontend development works with the user interface and user experience, dealing with the design, layout, and interactivity of a website or application using HTML, CSS, and JavaScript (or TypeScript).",
+      "On the other hand, backend development handles the server-side logic, databases, and application functionality, ensuring data is processed and served correctly. The tech stack for backend development is much bigger with more options, such as Python, Java, or Node.js.",
+      "Both options are equally interesting and challenging, so it\’s not really a question of backend vs frontend, but instead of understanding where you feel more comfortable and what type of systems you enjoy creating.",
+    ],
+  },
   {
     question: 'What are the job titles of a Frontend Developer?',
     answer: [
-      'Front-end developers are also known as front-end engineers, front-end web developers, JavaScript Developers, HTML/CSS Developer, front-end web designers, and front-end web architects.',
-      "Each of these roles mostly encompass the same front-end development skills but require different levels of expertise in different [front-end development skills](https://roadmap.sh/frontend/developer-skills). It's better to look at the job description to get an idea about the job requirements.",
+      "Front-end developers are also known as front-end engineers, front-end web developers, JavaScript Developers, HTML/CSS Developer, front-end web designers, and front-end web architects.",
+      "Each of these roles mostly encompasses the same front-end development skills but requires different levels of expertise in different [front-end development skills](https://roadmap.sh/frontend/developer-skills). It's better to look at the job description to get an idea about the job requirements.",
     ],
   },
   {
     question: 'How to become a Frontend Developer?',
     answer: [
-      "Start with learning HTML and CSS; don't wait to fully master these and start building simple projects as soon as possible. You could try rebuilding the frontend of your favorite websites using HTML and CSS to start with. Do as many of these projects as possible as you keep learning. Once you are somewhat comfortable with HTML and CSS, start [learning some basic JavaScript](/javascript) (DOM manipulation, making AJAX calls etc) and learn how to add interactivity to your websites. While you are at it learn some basics of Git and GitHub. At this point you should be able to get an entry level frontend development job. Keep revisiting this roadmap and try to fill the gaps in your knowledge.",
+      "You can [become a frontend developer](https://roadmap.sh/frontend/how-to-become-frontend-developer) by starting with learning HTML and CSS. Don't wait to fully master these and start building simple projects as soon as possible. You could try rebuilding the frontend of your favorite websites using HTML and CSS to start with. Do as many of these projects as possible as you keep learning. Once you are somewhat comfortable with HTML and CSS, start learning some basic JavaScript (DOM manipulation, making backend calls with Fetch or Axios,  etc) and learn how to add interactivity to your websites. While you are at it, learn some basics of Git and GitHub. At this point, you should be able to get an entry-level frontend development job. Keep revisiting this roadmap and try to fill the gaps in your knowledge.",
     ],
   },
   {
     question: 'How long does it take to become a Frontend Developer?',
     answer: [
-      'The amount of time it takes to become a frontend developer can vary depending on several factors, such as your learning pace, previous experience and the amount of time you are able to dedicate to learning.',
-      "However, to give you a rough idea, if you are a complete beginner, it could take you anywhere from 3 to 6 months to get a job as an entry level frontend developer. If you are already familiar with some of the frontend technologies, it could take you anywhere from 1 to 3 months. What's important is to practice as much you can while you are learning i.e. by building as many projects as you can. You should also participate in online communities and ask for feedback from more experienced developers to accelerate your learning process.",
+      "The amount of time it takes to become a frontend developer can vary depending on several factors, such as your learning pace, previous experience, and the amount of time you are able to dedicate to learning.",
+      "However, to give you a rough idea, if you are a complete beginner, it could take you anywhere from 3 to 6 months to get a job as an entry-level frontend developer. If you are already familiar with some of the frontend technologies, it could take you anywhere from 1 to 3 months. What's important is to practice as much as you can while you are learning i.e., by building as many projects as you can. You should also participate in online communities and ask for feedback from more experienced developers to accelerate your learning process.",
     ],
   },
   {
     question: 'What are the Frontend Developer salaries?',
     answer: [
-      'Frontend developer salaries can vary depending on factors such as location, experience, and company size. According to data from Glassdoor, the average base salary for a frontend developer in the United States is around $80,000 per year. However, this number can vary greatly depending on location, with the highest-paying cities such as San Francisco, Seattle, and New York having an average salary of $110,000 to $130,000.',
-      "It's important to keep in mind that these are just averages, and salaries can vary greatly depending on factors such as experience level, specific skills, and the company you work for. With more experience and specific skills you can expect to earn more.",
-      'It is worth looking at a range of resources, including salary surveys, and job boards to get a general understanding of the current market in your location and experience level. Also try reaching out to other professionals in the field and getting an understanding of their own experience and salary ranges.',
+      "Frontend developer salaries can vary depending on factors such as location, experience, and company size. According to data from Glassdoor, the average base salary for a frontend developer in the United States is around $80,000 per year. However, this number can vary greatly depending on location, with the highest-paying cities such as San Francisco, Seattle, and New York having an average salary of $110,000 to $130,000.",
+      "It's important to keep in mind that these are just averages, and salaries can vary greatly depending on factors such as experience level, specific skills, and the company you work for. With more experience and specific skills, you can expect to earn more.",
+      "It is worth looking at a range of resources, including salary surveys and job boards, to get a general understanding of the current market in your location and experience level. Also, try reaching out to other professionals in the field and understanding their experience and salary ranges.",
     ],
   },
   {
     question: 'Should I learn everything listed on the Frontend Roadmap?',
     answer: [
-      "This roadmap contains everything that you might encounter while working as a Frontend Developer. You may not need everything listed on this roadmap to get into the industry; every job is different and most of the jobs will require a subset of the items on the roadmap. However, knowing what you don't know is as important as knowing things, so you can use this roadmap to get an idea of what you are missing as well.",
-      "If you are a beginner who is just getting started, don't feel overwhelmed by looking at this roadmap. Look at the answer to the FAQ 'How to become a Frontend Developer?'",
+      "This roadmap contains everything that you might encounter while working as a Frontend Developer. You may not need everything listed on this roadmap to get into the industry; every job is different, and most of the jobs will require a subset of the items on the roadmap. However, knowing what you don't know is as important as knowing things, so you can use this roadmap to get an idea of what you are missing as well.",
+      "If you are a beginner who is just getting started, don't feel overwhelmed by looking at this roadmap. Look at the answer to the FAQ 'How to become a Frontend Developer?",
     ],
   },
 ];

src/data/roadmaps/frontend/frontend.md

@@ -12,10 +12,7 @@ tnsBannerLink: 'https://thenewstack.io?utm_source=roadmap.sh&utm_medium=Referral
 question:
   title: 'What is Frontend Development?'
   description: |
-    Front-end development is the development of visual and interactive elements of a website that users interact with directly. It's a combination of HTML, CSS and [JavaScript](/javascript), where HTML provides the structure, CSS the styling and layout, and JavaScript the dynamic behaviour and interactivity.
-
-    ## What does a Frontend Developer do?
-    As a front-end developer, you'll be responsible for creating the user interface of a website, to ensure it looks good and is easy to use, with great focus on design principles and user experience. You'll be working closely with designers, back-end developers, and project managers to make sure the final product meets the client's needs and provides the best possible experience for the end-users.
+    Frontend development is the development of visual and interactive elements of a website that users interact with directly. It's a combination of HTML, CSS, and JavaScript, where HTML provides the structure, CSS the styling and layout, and JavaScript the dynamic behavior and interactivity.
 dimensions:
   width: 968
   height: 2775

src/data/roadmaps/full-stack/content/javascript@T9PB6WQf-Fa9NXKKvVOy_.md

@@ -4,7 +4,7 @@ JavaScript allows you to add interactivity to your pages. Common examples that y
 
 Visit the following resources to learn more:
 
-- [@roadmap@Visit Dedicated JavaScript Roadmap](/javascript)
+- [@roadmap@Visit Dedicated JavaScript Roadmap](https://roadmap.sh/javascript)
 - [@article@The Modern JavaScript Tutorial](https://javascript.info/)
 - [@video@JavaScript Crash Course for Beginners](https://youtu.be/hdI2bqOjy3c?t=2)
 - [@article@Build 30 Javascript projects in 30 days](https://javascript30.com/)

src/data/roadmaps/full-stack/content/postgresql@HGhnbMg6jh6cAmUH4DtOx.md

@@ -4,7 +4,7 @@ PostgreSQL, also known as Postgres, is a free and open-source relational databas
 
 Visit the following resources to learn more:
 
-- [@roadmap@Visit Dedicated PostgreSQL DBA Roadmap](/postgresql-dba)
+- [@roadmap@Visit Dedicated PostgreSQL DBA Roadmap](https://roadmap.sh/postgresql-dba)
 - [@official@Official Website](https://www.postgresql.org/)
 - [@article@Learn PostgreSQL - Full Tutorial for Beginners](https://www.postgresqltutorial.com/)
 - [@video@Learn PostgreSQL Tutorial - Full Course for Beginners](https://www.youtube.com/watch?v=qw--VYLpxG4)

src/data/roadmaps/full-stack/content/react@khoUtTUxdf8udAzN9_CAb.md

@@ -4,7 +4,7 @@ React is the most popular front-end JavaScript library for building user interfa
 
 Visit the following resources to learn more:
 
-- [@roadmap@Visit Dedicated React Roadmap](/react)
+- [@roadmap@Visit Dedicated React Roadmap](https://roadmap.sh/react)
 - [@article@React Website](https://reactjs.org/)
 - [@article@Official Getting Started](https://reactjs.org/tutorial/tutorial.html)
 - [@video@React JS Course for Beginners](https://www.youtube.com/watch?v=nTeuhbP7wdE)

src/data/roadmaps/git-github/content/git-filter-branch@BKVA6Q7DXemAYjyQOA0nh.md

@@ -6,6 +6,10 @@ You can use `git filter-branch` to rewrite Git revision history by applying cust
 - Preserving original data: The command preserves all original commit times, merge information, and other details unless specified otherwise.
 - Rewriting specific branches: Only the positive refs mentioned in the command line are rewritten; if no filters are specified, commits are recommitted without changes.
 
+Notably, there exists a simpler, safer, and more powerful alternative: `git filter-repo`. This tool is actively promoted by Git and offers a streamlined approach to filtering revisions, making it a preferred choice for rewriting your Git history, especially when managing large repositories.
+
 Visit the following resources to learn more: 
 
-- [@official@git filter-branch](https://git-scm.com/docs/git-filter-branch)
+- [@official@git filter-branch](https://git-scm.com/docs/git-filter-branch)
+- [@official@git filter-repo](https://github.com/newren/git-filter-repo)
+- [@article@Removing sensitive data from a repository](https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/removing-sensitive-data-from-a-repository)

src/data/roadmaps/git-github/content/oauth-apps@qrdOARfqGPF9xhF6snbAn.md

@@ -1,8 +1,8 @@
 # OAuth Apps
 
-GitHub OAuth Apps are a way to integrate with the GitHub platform using OAuth authentication. They allow developers to create custom integrations that can automate tasks, provide real-time notifications, and build custom workflows.
+GitHub OAuth Apps allow developers to integrate with GitHub using OAuth 2.0 authentication. They enable secure, token-based access to specific GitHub resources like repositories, issues, and pull requests. OAuth Apps can automate tasks, personalize interactions, and provide real-time notifications through webhooks, all while allowing users to approve only the necessary permissions without sharing their credentials.
 
 Visit the following resources to learn more:
 
 - [@official@Creating an OAuth app](https://docs.github.com/en/apps/oauth-apps/building-oauth-apps/creating-an-oauth-app)
-- [@video@GitHub Login With React (GitHub APIs, GitHub OAuth 2.0 Authentication)](https://www.youtube.com/watch?v=rRn2EisxPl4)
+- [@video@GitHub Login With React (GitHub APIs, GitHub OAuth 2.0 Authentication)](https://www.youtube.com/watch?v=rRn2EisxPl4)

src/data/roadmaps/golang/content/101-go-advanced/103-interfaces.md

@@ -8,5 +8,4 @@ Visit the following resources to learn more:
 - [@official@Effective Go: Interfaces](https://go.dev/doc/effective_go#interfaces)
 - [@article@Go by Example: Interfaces](https://gobyexample.com/interfaces)
 - [@video@Golang Tutorial #22 - Interfaces (by Tech With Tim on YouTube)](https://www.youtube.com/watch?v=lh_Uv2imp14)
-- [@video@Learn Go Interfaces](https://www.youtube.com/watch?v=KB3ysH8cupY)
 - [@video@Understanding Go Interfaces](https://www.youtube.com/watch?v=qJKQZKGZgf0)

src/data/roadmaps/golang/content/101-go-advanced/111-generics.md

@@ -7,3 +7,4 @@ Visit the following resources to learn more:
 - [@official@Generics](https://go.dev/doc/tutorial/generics)
 - [@official@Go Blog: Generics](https://go.dev/blog/intro-generics)
 - [@article@Go by Example: Generics](https://gobyexample.com/generics)
+- [@video@Generics Explained](https://www.youtube.com/watch?v=SSRIn5DAmyw)

src/data/roadmaps/golang/content/102-go-building-clis/100-cobra.md

@@ -7,3 +7,4 @@ Visit the following resources to learn more:
 - [@opensource@Cobra Github Repo](https://github.com/spf13/cobra)
 - [@official@Cobra Website](https://cobra.dev/)
 - [@article@Cobra Package Documentation](https://pkg.go.dev/github.com/spf13/cobra)
+- [@video@How to write beautiful Golang CLI](https://www.youtube.com/watch?v=SSRIn5DAmyw)

src/data/roadmaps/ios/content/swiftui@kAIKsDcDzwI1E0wSnC_uo.md

@@ -8,3 +8,4 @@ Learn more from the following resources:
 - [@official@Apple - SwiftUI Documentation](https://developer.apple.com/documentation/SwiftUI?changes=latest_minor)
 - [@article@Build an iOS app with SwiftUI](https://www.swift.org/getting-started/swiftui/)
 - [@video@WWDC24: SwiftUI essentials | Apple ](https://www.youtube.com/watch?v=HyQgpxX__-A)
+- [@course@HackingWithSwift - 100 Days of SwiftUI](https://www.hackingwithswift.com/100/swiftui)

src/data/roadmaps/java/content/103-java-web-frameworks/101-spring-boot.md

@@ -4,7 +4,7 @@ Spring Boot is an open source, microservice-based Java web framework. The Spring
 
 Visit the following resources to learn more:
 
-- [@roadmap@Visit Dedicated Spring Boot Roadmap](/spring-boot)
+- [@roadmap@Visit Dedicated Spring Boot Roadmap](https://roadmap.sh/spring-boot)
 - [@official@Spring Boot](https://spring.io/projects/spring-boot/)
 - [@article@What is Spring Boot?](https://www.ibm.com/cloud/learn/java-spring-boot)
 - [@article@Spring Boot Tutorial](https://www.javaguides.net/2021/07/spring-boot-tutorial-for-beginners.html)

src/data/roadmaps/mlops/content/flink@o6GQ3-8DgDtHzdX6yeg1w.md

@@ -1,8 +1,9 @@
 # Flink
 
-Apache Flink is a distributed stream processing framework that is used to process large amounts of data in real-time. It is designed to be highly scalable and fault-tolerant. Flink is built on top of the Apache Kafka messaging system and is used to process data streams in real-time.
+Apache Flink is an open-source stream processing framework designed for real-time and batch data processing with low latency and high throughput. It supports event time processing, fault tolerance, and stateful operations, making it ideal for applications like real-time analytics, fraud detection, and event-driven systems. Flink is highly scalable, integrates with various data systems, and is widely used in industries for large-scale, real-time data processing tasks.
 
 Visit the following resources to learn more:
 
 - [@article@Apache Flink Documentation](https://flink.apache.org/)
 - [@feed@Explore top posts about Apache Flink](https://app.daily.dev/tags/apache-flink?ref=roadmapsh)
+-[@reference@Apache Flink Tutorialpoint](https://www.tutorialspoint.com/apache_flink/apache_flink_introduction.htm)

src/data/roadmaps/mlops/content/go@vdVq3RQvQF3mF8PQc6DMg.md

@@ -4,7 +4,7 @@ Go is an open source programming language supported by Google. Go can be used to
 
 Visit the following resources to learn more:
 
-- [@roadmap@Visit Dedicated Go Roadmap](/golang)
+- [@roadmap@Visit Dedicated Go Roadmap](https://roadmap.sh/golang)
 - [@official@A Tour of Go – Go Basics](https://go.dev/tour/welcome/1)
 - [@official@Go Reference Documentation](https://go.dev/doc/)
 - [@article@Go by Example - annotated example programs](https://gobyexample.com/)

src/data/roadmaps/nodejs/content/common-built-in-modules@M62lAWBOrTe99TfpFOQ-Y.md

@@ -1,3 +1,16 @@
-# Nodejs common modules
+# Nodejs core modules
 
-These are the common modules that come with `Node.js` out of the box. This module provides tools or APIs for performing out certain standard `Node.js` operations. like interacting with the file system, url parsing, or logging information to the console.
+These are the core modules that come with `Node.js` out of the box. This module provides tools or APIs for performing out certain standard `Node.js` operations. like interacting with the file system, url parsing, or logging information to the console.
+
+Learn more from the following resources:
+
+- [@official@Nodejs fs module](https://nodejs.org/api/fs.html)
+- [@official@Nodejs url module](https://nodejs.org/api/url.html)
+- [@official@Nodejs console module](https://nodejs.org/api/console.html)
+- [@official@Nodejs util module](https://nodejs.org/api/util.html)
+- [@official@Nodejs events module](https://nodejs.org/api/events.html)
+- [@official@Nodejs os module](https://nodejs.org/api/os.html)
+- [@official@Nodejs worker threads module](https://nodejs.org/api/worker_threads.html)
+- [@official@Nodejs child process module](https://nodejs.org/api/child_process.html)
+- [@official@Nodejs process object](https://nodejs.org/api/process.html)
+- [@official@Nodejs crypto module](https://nodejs.org/api/crypto.html)

src/data/roadmaps/postgresql-dba/content/data-types@fvEgtFP7xvkq_D4hYw3gz.md

@@ -4,5 +4,5 @@ PostgreSQL offers a comprehensive set of data types to cater to diverse data nee
 
 Learn more from the following resources:
 
-- [@article@](https://www.instaclustr.com/blog/postgresql-data-types-mappings-to-sql-jdbc-and-java-data-types/)
+- [@article@PostgreSQL® Data Types: Mappings to SQL, JDBC, and Java Data Types](https://www.instaclustr.com/blog/postgresql-data-types-mappings-to-sql-jdbc-and-java-data-types/)
 - [@official@Data Types](https://www.postgresql.org/docs/current/datatype.html)

src/data/roadmaps/prompt-engineering/content/103-real-world/100-structured-data.md

@@ -1,15 +1,19 @@
 # Structured Data
 
-Asking the model to generate structured data is a great way to utilize the power of LLMs. 
+Structured data helps in organizing information. It is especially useful in applications like e-commerce where you need to convert user input into a structured format.
 
-For example, you might have an e-commerce application where you want to generate the search query from the user's natural language input. You can instruct LLM to identify the JSON version from the natural language text given by the user. Let's say that the user searches for `Birthday gift for my 18 months old daughter`. We could have the following prompt to generate the JSON object:
+### Example 1
+
+Let's say a user searches for `Birthday gift for my 18 months old daughter`. You can use a prompt to generate a JSON object from this input:
 
 ```
-Print a JSON object containing `gender` ("male", "female"), `occasion` (one of "party", "birthday", "anniversary"), `age_years` (numeric value) from the text delimited by tripple quotes.:
+Print a JSON object containing `gender` ("male", "female"), `occasion` (one of "party", "birthday", "anniversary"), `age_years` (numeric value) from the text delimited by triple quotes:
 """Birthday gift for my 18 months old daughter"""
 ```
 
-The output from model would be:
+### Output
+
+The model would generate the following JSON object:
 
 ```json
 {
@@ -18,3 +22,24 @@ The output from model would be:
   "age_years": 1.5
 }
 ```
+
+### Example 2
+
+Consider a user input `Anniversary gift for my husband`. You can use a prompt to generate a JSON object from this input:
+
+```
+Print a JSON object containing `gender` ("male", "female"), `occasion` (one of "party", "birthday", "anniversary"), `age_years` (numeric value) from the text delimited by triple quotes:
+"""Anniversary gift for my husband"""
+```
+
+### Output
+
+The model would generate the following JSON object:
+
+```json
+{
+  "gender": "male",
+  "occasion": "anniversary",
+  "age_years": null
+}
+```

src/data/roadmaps/software-architect/content/go@nKlM9k4qAh4wBFXqM-2kC.md

@@ -4,7 +4,7 @@ Go is an open source programming language supported by Google. Go can be used to
 
 Visit the following resources to learn more:
 
-- [@roadmap@Visit Dedicated Go Roadmap](/golang)
+- [@roadmap@Visit Dedicated Go Roadmap](https://roadmap.sh/golang)
 - [@official@A Tour of Go – Go Basics](https://go.dev/tour/welcome/1)
 - [@official@Go Reference Documentation](https://go.dev/doc/)
 - [@article@Go by Example - annotated example programs](https://gobyexample.com/)

src/data/roadmaps/software-architect/content/java--kotlin--scala@a5DB_hsD4bAf8BtHNFNPo.md

@@ -2,7 +2,7 @@
 
 Visit the following resources to learn more:
 
-- [@roadmap@Visit Dedicated Java Roadmap](/java)
+- [@roadmap@Visit Dedicated Java Roadmap](https://roadmap.sh/java)
 - [@article@Java Basics](https://www.w3schools.com/java/)
 - [@article@Learn the basics of Kotlin](https://blog.teamtreehouse.com/absolute-beginners-guide-kotlin)
 - [@article@Kotlin Docs](https://kotlinlang.org/docs/reference/basic-syntax.html)

src/data/roadmaps/software-architect/content/javascript--typescript@bhP5gMpRVebSFpCeHVXBj.md

@@ -4,7 +4,7 @@ JavaScript allows you to add interactivity to your pages. Common examples that y
 
 Visit the following resources to learn more:
 
-- [@roadmap@Visit Dedicated JavaScript Roadmap](/javascript)
+- [@roadmap@Visit Dedicated JavaScript Roadmap](https://roadmap.sh/javascript)
 - [@article@W3Schools – JavaScript Tutorial](https://www.w3schools.com/js/)
 - [@article@The Modern JavaScript Tutorial](https://javascript.info/)
 - [@video@JavaScript Crash Course for Beginners](https://youtu.be/hdI2bqOjy3c)

src/data/roadmaps/software-architect/content/python@j2Ph2QcKwmKlbaMHz1l_i.md

@@ -4,7 +4,7 @@ Python is a multi-paradigm language. Being an interpreted language, code is exec
 
 Visit the following resources to learn more:
 
-- [@roadmap@Visit Dedicated Python Roadmap](/python)
+- [@roadmap@Visit Dedicated Python Roadmap](https://roadmap.sh/python)
 - [@official@Python Website](https://www.python.org/)
 - [@official@Python Getting Started](https://www.python.org/about/gettingstarted/)
 - [@article@Automate the Boring Stuff](https://automatetheboringstuff.com/)

src/data/roadmaps/software-architect/content/react-vue-angular@mCiYCbKIOVU34qil_q7Hg.md

@@ -4,7 +4,7 @@ React is the most popular front-end JavaScript library for building user interfa
 
 Visit the following resources to learn more:
 
-- [@roadmap@Visit Dedicated React Roadmap](/react)
+- [@roadmap@Visit Dedicated React Roadmap](https://roadmap.sh/react)
 - [@article@React Website](https://reactjs.org/)
 - [@article@Official Getting Started](https://reactjs.org/tutorial/tutorial.html)
 - [@article@Beta React Docs](https://reactjs.org/)

src/data/roadmaps/ux-design/content/create-action-funnel@kcG4IpneJzA6di0uqTiwb.md

@@ -1,15 +1,19 @@
-# Stephen Wendell's CREATE Action Funnel
+# Stephen Wendel's CREATE Action Funnel
 
-Stephen Wendell's Create Action Funnel is a UX design framework focused on converting website visitors into active customers through a systematic and engaging process. The approach emphasizes on understanding user behavior, catering to their needs, and directing them towards specific actions. The Action Funnel consists of four major steps:
+Stephen Wendel's CREATE Action Funnel is a behavioral design framework aimed at helping individuals or organizations encourage specific behaviors in others, especially in the context of product design. It breaks down the process of motivating action into six key stages. Each stage helps identify where users might drop off or face barriers, allowing designers or strategists to address these pain points effectively. These stages are:
 
-- **Establish the Objectives:** Before diving into the design, clearly define the goals you want to achieve through the website or app. Determine what actions you want the users to take (e.g., sign up, make a purchase, share content) and what constitutes a successful conversion.
+- **CUE:** The user must notice a cue or prompt that tells them to act. This could be a notification, a visual element, or any kind of reminder.
 
-- **Understand User Mindsets:** Identify your target audience and recognize their needs, preferences, emotions, and pain points. Accomplishing this requires user research, creating personas, storyboarding, and empathy mapping, among other methods.
+- **REACTION:** The user must react positively to the cue. This stage involves emotional and cognitive processing, where the individual decides if the action is relevant or attractive.
 
-- **Design the Optimal User Flow:** Craft a seamless and intuitive user journey by designing a clear path from the landing page to the desired action. Prioritize simplicity, usability, and efficiency. Make sure to include meaningful touchpoints and interactions to engage the users and make it easy for them to complete the intended action.
+- **EVALUATION:** The user evaluates whether the action is worth their time, energy, or resources. They assess the benefits versus the effort required.
 
-- **Refine and Test the Experience:** Use wireframes and prototypes to test and iteratively refine the user experience. Employ user testing, A/B testing, and analytics to gather insight on user behavior, preferences, and engagement. Continuously use feedback to make improvements, ensuring that the design effectively leads visitors down the action funnel.
+- **ABILITY:** The user must feel capable of taking the action. This involves ensuring that the action is easy enough to do and aligns with their skills and resources.
 
-By implementing Stephen Wendell's `Create Action Funnel`, you can effectively guide users through an engaging journey that motivates them to become active customers, ultimately increasing conversion rates and overall satisfaction.
+- **TIMING:** The action needs to happen at the right time. Users need to have the opportunity and be in the right context to act.
 
-- [@article@Behavioral Science Crash Course: Steve Wendel's CREATE Action Funnel](https://www.prodify.group/blog/behavioral-science-crash-course-steve-wendels-create-action-funnel)
+- **EXECUTION:** Finally, the action must be carried out successfully. This is the stage where the behavior is completed.
+
+The CREATE Action Funnel is helpful for product designers, marketers, or behavior change professionals, as it provides a structured way to understand user actions and design interventions to improve completion rates. It identifies and solves the gaps that occur between intention and action.
+
+- [@article@Behavioral Science Crash Course: Steve Wendel's CREATE Action Funnel](https://www.prodify.group/blog/behavioral-science-crash-course-steve-wendels-create-action-funnel)

src/data/roadmaps/ux-design/content/spectrum-of-thinking-interventions@0Df110GZcDw5wbAe1eKoA.md

@@ -1,45 +1,11 @@
 # Spectrum of Thinking Interventions
 
-The _Spectrum of Thinking Interventions_ provides a structure to guide your UX design process, helping you identify the types and range of thinking interventions that the user may require. This spectrum encompasses four primary categories: guidance, explanation, exploration, and creation.
+The _Spectrum of Thinking Interventions_ provides a structure for understanding the different types of decision-making processes by illustrating how our minds would respond in a _default, lowest energy way_, if we didn't consciously do something different. This spectrum ranges from situations requiring minimal thought to those demanding intensive thinking, and includes  the mechanisms ("interventions") that our minds will likely use.
 
-## Guidance
+- **Habits:** Triggering a learned routine based on familiar cues
+- **Other intuitive responses:** Used in familiar or semi-familiar situations, with responses based on past experiences
+- **Active mindset or self-concept:** Used in ambiguous scenarios with multiple possible interpretations
+- **Heuristics:** Used in situations requiring conscious attention, but where decisions can be made more easily
+- **Focused, conscious calculation:** Used in unfamiliar scenarios or crucial decisions where deliberate focus is needed
 
-Guidance-based interventions are designed to help users navigate through a digital product or service with minimal effort. They may be aimed at full-fledged beginners, casual users, or experts in their respective domains. Such interventions may include signposts, tooltips, and clearly articulated labels.
-
-_Examples:_
-
-- Visual cues (e.g., icons, colors)
-- Signposting (e.g., breadcrumbs)
-- In-context information (e.g., tool tips, hints)
-
-## Explanation
-
-Explanation-based interventions provide users with detailed narratives, overviews, or background information that helps them make informed decisions. This may include tutorials, articles, videos, or any other mediums that help explain complex concepts or instructions.
-
-_Examples:_
-
-- Multimedia tutorials
-- Articles or blog posts
-- Infographics or diagrams
-
-## Exploration
-
-Exploration-based interventions encourage users to understand and interact with the product by investigating, asking questions, or searching for solutions on their own. This can be done by providing interactive elements, multiple pathways, and opportunities for discovery.
-
-_Examples:_
-
-- Interactive simulations or models
-- Advanced search capabilities
-- Multiple UI paths for task completion
-
-## Creation
-
-Creation-based interventions engage users by offering them the tools and resources to co-create or customize their experience. This type of intervention often involves a more extensive level of input and involvement from the user as they become active participants in the design process.
-
-_Examples:_
-
-- Customizable user interfaces
-- Allowing users to create their content
-- Enabling users to manage their preferences, settings, and configurations
-
-With this spectrum in mind, it is essential as a UX designer to analyze which types of thinking interventions are most relevant to your target users and design the most accessible and effective solutions. Always consider how these interventions will influence users' decision-making processes and their overall satisfaction with your digital product or service.
+With this spectrum in mind, it is essential as a UX designer to leverage on the mind's decision-making process, analyze which mechanisms are most applicable to your target users and design the most accessible and effective solutions.

src/data/roadmaps/vue/content/v-bind@cuM9q9vYy8JpZPGeBffd1.md

@@ -1 +1,21 @@
-# v-bind
+# v-bind
+
+The `v-bind` directive dynamically binds an HTML attribute to data.
+
+The shorthand for this directive is `:`
+
+Example:
+```vue
+<script setup>
+  import { ref } from 'vue';
+  const image_url = ref("path/to/image.png")
+</script>
+
+<template>
+  <img :src="image_url" />
+</template>
+```
+
+Visit the following resources for more information:
+
+- [@official@v-bind documentation](https://vuejs.org/api/built-in-directives.html#v-bind)

src/data/roadmaps/vue/content/v-else-if@a9caVhderJaVo0v14w8WB.md

@@ -1 +1,6 @@
-# v-else-if
+# v-else-if
+
+This directive is used to add additional conditions to a v-if and v-else block.
+
+Visit the following resources to learn more:
+- [@official@v-else-if Documentation](https://vuejs.org/api/built-in-directives.html#v-else-if)

src/data/roadmaps/vue/content/v-for@3ftwRjQ9e1-qDT9BV53zr.md

@@ -1 +1,25 @@
-# v-for
+# v-for
+
+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.
+
+Example:
+```vue
+<script setup>
+  import { ref } from 'vue';
+  const foods = ref([
+    {id: 1, name: "apple"},
+    {id: 2, name: "pear"},
+    {id: 3, name: "pizza"}
+  ]);
+</script>
+
+<template>
+  <p v-for="food in foods" :key="food.id">{{ food.name }}</p>
+</template>
+```
+
+Visit the following resources to learn more:
+
+- [@official@v-for documentation](https://vuejs.org/guide/essentials/list#v-for)

src/data/roadmaps/vue/content/v-html@bZxtIBeIfeUcR32LZWrPW.md

@@ -1 +1,14 @@
-# v-html
+# v-html
+
+The `v-thml` 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.
+
+Example:
+```vue
+<template>
+  <p v-html="'<h1>Text</h1>'"></p>
+</template>
+```
+
+Visit the following resources to learn more:
+
+- [@official@v-html documentation](https://vuejs.org/api/built-in-directives.html#v-html)

src/data/roadmaps/vue/content/v-once@5k9CrbzhNy9iiS6ez2UE6.md

@@ -1 +1,21 @@
-# v-once
+# v-once
+
+The `v-once` directive makes an HTML element render only once, skipping every future update.
+
+Example:
+```vue
+<script setup>
+  import { ref } from 'vue';
+  const input = ref("Some Text");
+</script>
+
+<template>
+  <input v-model="input">
+  <p v-once>{{ input }}</p>
+</template>
+```
+In this example the **p** element will not change its text even if the input variable is changed through the **input** element.
+
+Visit the following resources to learn more:
+
+- [@official@v-once documentation](https://vuejs.org/api/built-in-directives.html#v-once)

src/data/roadmaps/vue/content/v-pre@mlsrhioiEkqnRIL6O3hNa.md

@@ -1 +1,20 @@
-# v-pre
+# v-pre
+
+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.
+
+Example:
+```vue
+<script setup>
+  import { ref } from 'vue';
+  const text = ref("Some Text")
+</script>
+
+<template>
+  <p v-pre >{{ text }}</p>
+</template>
+```
+The **p** element will display: `{{ text }}` and not `Some Text` because the compilation is skipped.
+
+Visit the following resources to learn more:
+
+- [@official@v-pre Documentation](https://vuejs.org/api/built-in-directives.html#v-pre)

src/data/roadmaps/vue/content/v-text@NCIzs3jbQTv1xXhAaGfZN.md

@@ -1 +1,15 @@
-# v-text
+# v-text
+
+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.
+
+Example:
+```vue
+<template>
+  <p v-text="'I am some text'"></p>
+</template>
+```
+
+Visit the following resources to learn more:
+
+- [@official@v-text documentation](https://vuejs.org/api/built-in-directives.html#v-text)

src/pages/index.astro

@@ -14,6 +14,16 @@ const roleRoadmaps = await getRoadmapsByTag('role-roadmap');
 const skillRoadmaps = await getRoadmapsByTag('skill-roadmap');
 const bestPractices = await getAllBestPractices();
 const questionGroups = await getAllQuestionGroups();
+const projectGroups = [
+  {
+    title: 'Frontend',
+    id: 'frontend',
+  },
+  {
+    title: 'Backend',
+    id: 'backend',
+  },
+]
 
 const guides = await getAllGuides();
 const questionGuides = (await getAllQuestionGroups()).filter(
@@ -59,6 +69,15 @@ const videos = await getAllVideos();
       showCreateRoadmap={true}
     />
 
+    <FeaturedItems
+      heading='Project Ideas'
+      allowBookmark={false}
+      featuredItems={projectGroups.map((projectGroup) => ({
+        text: projectGroup.title,
+        url: `${projectGroup.id}/projects`,
+      }))}
+    />
+
     <FeaturedItems
       heading='Best Practices'
       featuredItems={bestPractices.map((bestPractice) => ({