chore: update roadmap content json

* wip: age calculator

* fix: update age calculator description

* wip: flash cards project

* wip: flash cards

* fix: remove JavaScript roadmap

* fix: remove JavaScript roadmap

contributing.md

@@ -1,4 +1,4 @@
-# Contribution
+# ✨ Contribution Guidelines ✨
 
 First of all, thank you for considering to contribute. Please look at the details below:
 
@@ -8,6 +8,7 @@ First of all, thank you for considering to contribute. Please look at the detail
 - [Adding Projects](#adding-projects)
 - [Adding Content](#adding-content)
 - [Guidelines](#guidelines)
+- [Good vs. Not So Good Contributions](#good-vs-not-so-good-contributions)
 
 ## Hacktoberfest Contributions
 
@@ -15,10 +16,10 @@ We are taking part in [Hacktoberfest 11](https://hacktoberfest.com/)!
 
 Before you start to contribute to our project in order to satisfy [Hacktoberfest requirements](https://hacktoberfest.com/participation/#contributors), please bare in mind the following:
 
-* There is not a Hacktoberfest t-shirt this year [(see their FAQ)](https://hacktoberfest.com/participation/#faq).
-* There is not an infinite opportunity to contribute to the roadmap.sh project.
+- There is *not* a Hacktoberfest t-shirt this year [(see their FAQ)](https://hacktoberfest.com/participation/#faq)
+- There is *not* an infinite opportunity to contribute to the roadmap.sh project.
 
-### Hacktoberfest Specific Contribution rules
+### Hacktoberfest Specific Contribution Rules
 
 As Hacktoberfest attracts a lot of contributors (which is awesome), it does require a more rigid and strictly enforced set of guidelines than the average contribution.
 
@@ -61,11 +62,12 @@ Learn more from the following resources:
 
 Contributions to the project that meet these requirements will be given the label `hacktoberfest-accepted` and merged, contributions that do not meet the requirements will simply be closed.
 
-Any attempts at spam PRs will be given the `spam` tag. If you recieve 2 `spam` tags against you, you will be [disqualified from Hacktoberfest](https://hacktoberfest.com/participation/#spam).
+Any attempts at spam PRs will be given the `spam` tag. If you receive 2 `spam` tags against you, you will be [disqualified from Hacktoberfest](https://hacktoberfest.com/participation/#spam).
 
 ## New Roadmaps
 
 For new roadmaps, you can either:
+
 - Submit a roadmap by providing [a textual roadmap similar to this roadmap](https://gist.github.com/kamranahmedse/98758d2c73799b3a6ce17385e4c548a5) in an [issue](https://github.com/kamranahmedse/developer-roadmap/issues).
 - Create an interactive roadmap yourself using [our roadmap editor](https://draw.roadmap.sh/) & submit the link to that roadmap in an [issue](https://github.com/kamranahmedse/developer-roadmap/issues).
 
@@ -73,10 +75,10 @@ For new roadmaps, you can either:
 
 For the existing roadmaps, please follow the details listed for the nature of contribution:
 
-- **Fixing Typos** — Make your changes in the [roadmap Markdown file](https://github.com/kamranahmedse/developer-roadmap/tree/master/src/data/roadmaps) and submit a [PR](https://github.com/kamranahmedse/developer-roadmap/pulls).
+- **Fixing Typos** — Make your changes in the [roadmap markdown file](https://github.com/kamranahmedse/developer-roadmap/tree/master/src/data/roadmaps) and submit a [PR](https://github.com/kamranahmedse/developer-roadmap/pulls).
 - **Adding or Removing Nodes** — Please open an [issue](https://github.com/kamranahmedse/developer-roadmap/issues) with your suggestion.
 
-**Note:** Please note that our goal is <strong>not to have the biggest list of items</strong>. Our goal is to list items or skills most relevant today.
+**Note:** Please note that our goal is **not to have the biggest list of items**. Our goal is to list items or skills most relevant today.
 
 ## Adding Projects
 
@@ -84,7 +86,7 @@ If you have a project idea that you think we should add to the roadmap, feel fre
 
 The detailed format for the issue should be as follows:
 
-```
+```md
 ## What is this project about?
 
 (Add an introduction to the project.)
@@ -112,14 +114,14 @@ Find [the content directory inside the relevant roadmap](https://github.com/kamr
 
 Please adhere to the following style when adding content to a topic:
 
-```
+```md
 # Topic Title
 
 (Content)
 
 Visit the following resources to learn more:
 
-- [@type@Description of link](Link)
+- [@type@Title/Description of Link](Link)
 ```
 
 `@type@` must be one of the following and describe the type of content you are adding:
@@ -131,7 +133,7 @@ Visit the following resources to learn more:
 - `@podcast@`
 - `@video@`
 
-It's important to add a valid type, this will help us categorize the content and display it properly on the roadmap.
+It's important to add a valid type, this will help us categorize the content and display it properly on the roadmap. The order of the links based on type is same as above.
 
 ## Guidelines
 
@@ -151,20 +153,21 @@ It's important to add a valid type, this will help us categorize the content and
 
   If you are planning to contribute by adding content to the roadmaps, I recommend you to clone the repository, add content to the [content directory of the roadmap](./src/data/roadmaps/) and create a single PR to make it easier for me to review and merge the PR.
 
-- <p><strong>Write meaningful commit messages</strong><br >
+- <p><strong>Write meaningful commit messages</strong><br/>
 
   Meaningful commit messages help speed up the review process as well as help other contributors gain a good overview of the repositories commit history without having to dive into every commit.
 
   </p>
 - <p><strong>Look at the existing issues/pull requests before opening new ones</strong></p>
 
-### Good vs. Not So Good Contributions
+## Good vs. Not So Good Contributions
 
 <strong>Good</strong>
 
 - New Roadmaps.
-  - Engaging, fresh content links.
+- Engaging and fresh content links.
 - Typos and grammatical fixes.
+- Enhanced Existing Content.
 - Content copy in topics that do not have any (or minimal copy exists).
 
 <strong>Not So Good</strong>
@@ -174,3 +177,7 @@ It's important to add a valid type, this will help us categorize the content and
 - Non-English content.
 - PR's that don't follow our style guide, have no description, and a default title.
 - Links to your own blog articles.
+
+***
+
+Have a look at the [License](./license) file.

license

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

public/roadmap-content/ai-engineer.json

@@ -285,58 +285,184 @@
   },
   "a_3SabylVqzzOyw3tZN5f": {
     "title": "OpenSource AI",
-    "description": "",
-    "links": []
+    "description": "Open-source AI refers to the development and deployment of artificial intelligence technologies using open-source practices. This means that the source code is freely accessible, allowing developers to inspect, modify, and distribute AI systems without restrictions.\n\nLearn more from the following resources:",
+    "links": [
+      {
+        "title": "The Open Source AI Definition",
+        "url": "https://opensource.org/deepdive/drafts/the-open-source-ai-definition-draft-v-0-0-3",
+        "type": "article"
+      },
+      {
+        "title": "Defining Open Source AI",
+        "url": "https://www.technologyreview.com/2024/08/22/1097224/we-finally-have-a-definition-for-open-source-ai/",
+        "type": "article"
+      }
+    ]
   },
   "RBwGsq9DngUsl8PrrCbqx": {
     "title": "Open vs Closed Source Models",
-    "description": "",
-    "links": []
+    "description": "Open-source AI refers to models and software with publicly accessible source code, promoting collaboration, transparency, and cost-effectiveness, but it can face challenges like quality control and security risks. In contrast, closed-source AI involves proprietary models that are not publicly available, offering higher quality, performance, and security due to significant corporate investment, but lacking transparency and community collaboration. Some of them were `Llama` for Open Source Model and `Open AI` for Closed Source Model.\n\nLearn more from the following resources:",
+    "links": [
+      {
+        "title": "Open AI vs Closed AI",
+        "url": "https://formtek.com/blog/open-ai-vs-closed-ai-whats-the-difference-and-why-does-it-matter/",
+        "type": "article"
+      },
+      {
+        "title": "Open vs Closed Source Model",
+        "url": "https://www.techtarget.com/searchEnterpriseAI/feature/Attributes-of-open-vs-closed-AI-explained",
+        "type": "article"
+      }
+    ]
   },
   "97eu-XxYUH9pYbD_KjAtA": {
     "title": "Popular Open Source Models",
-    "description": "",
-    "links": []
+    "description": "Notable open-source examples are `BERT`, developed by Google, which has become a foundational model for natural language processing tasks; `BLOOM`, a multilingual model with 176 billion parameters created through a collaborative project by Hugging Face; and `Falcon 180B`, known for its impressive performance in NLP tasks.\n\nLearn more from the following resources:",
+    "links": [
+      {
+        "title": "Top Open Source Models",
+        "url": "https://www.datacamp.com/blog/top-open-source-llms",
+        "type": "article"
+      },
+      {
+        "title": "Mark on Open Source AI",
+        "url": "https://about.fb.com/news/2024/07/open-source-ai-is-the-path-forward/",
+        "type": "article"
+      }
+    ]
   },
   "v99C5Bml2a6148LCJ9gy9": {
     "title": "Hugging Face",
-    "description": "",
-    "links": []
+    "description": "Hugging Face is often called the GitHub of machine learning because it lets developers share and test their work openly. Hugging Face is known for its `Transformers Python library`, which simplifies the process of `downloading and training ML models`. It promotes collaboration within the AI community by enabling users to `share models` and `datasets`, thus advancing the democratization of artificial intelligence through open-source practices.\n\nLearn more from the following resources:",
+    "links": [
+      {
+        "title": "Hugging Face",
+        "url": "https://huggingface.co/",
+        "type": "article"
+      },
+      {
+        "title": "Github",
+        "url": "https://github.com/huggingface",
+        "type": "article"
+      }
+    ]
   },
   "YLOdOvLXa5Fa7_mmuvKEi": {
     "title": "Hugging Face Hub",
-    "description": "",
-    "links": []
+    "description": "The Hugging Face Hub is a comprehensive platform that hosts over 900,000 machine learning models, 200,000 datasets, and 300,000 demo applications, facilitating collaboration and sharing within the AI community. It serves as a central repository where users can discover, upload, and experiment with various models and datasets across multiple domains, including natural language processing, computer vision, and audio tasks. It also supports version control.\n\nLearn more from the following resources:",
+    "links": [
+      {
+        "title": "nlp-official",
+        "url": "https://huggingface.co/learn/nlp-course/en/chapter4/1",
+        "type": "course"
+      },
+      {
+        "title": "Documentation",
+        "url": "https://huggingface.co/docs/hub/en/index",
+        "type": "article"
+      }
+    ]
   },
   "YKIPOiSj_FNtg0h8uaSMq": {
     "title": "Hugging Face Tasks",
-    "description": "",
-    "links": []
+    "description": "Hugging Face supports text classification, named entity recognition, question answering, summarization, and translation. It also extends to multimodal tasks that involve both text and images, such as visual question answering (VQA) and image-text matching. Each task is done by various pre-trained models that can be easily accessed and fine-tuned through the Hugging Face library.\n\nLearn more from the following resources:",
+    "links": [
+      {
+        "title": "Task and Model",
+        "url": "https://huggingface.co/learn/computer-vision-course/en/unit4/multimodal-models/tasks-models-part1",
+        "type": "article"
+      },
+      {
+        "title": "Task Summary",
+        "url": "https://huggingface.co/docs/transformers/v4.14.1/en/task_summary",
+        "type": "article"
+      },
+      {
+        "title": "Task Manager",
+        "url": "https://huggingface.co/docs/optimum/en/exporters/task_manager",
+        "type": "article"
+      }
+    ]
   },
   "3kRTzlLNBnXdTsAEXVu_M": {
     "title": "Inference SDK",
-    "description": "",
-    "links": []
+    "description": "The Hugging Face Inference SDK is a powerful tool that allows developers to easily integrate and run inference on large language models hosted on the Hugging Face Hub. By using the `InferenceClient`, users can make API calls to various models for tasks such as text generation, image creation, and more. The SDK supports both synchronous and asynchronous operations thus compatible with existing workflows.\n\nLearn more from the following resources:",
+    "links": [
+      {
+        "title": "Inference",
+        "url": "https://huggingface.co/docs/huggingface_hub/en/package_reference/inference_client",
+        "type": "article"
+      },
+      {
+        "title": "Endpoint Setup",
+        "url": "https://www.npmjs.com/package/@huggingface/inference",
+        "type": "article"
+      }
+    ]
   },
   "bGLrbpxKgENe2xS1eQtdh": {
     "title": "Transformers.js",
-    "description": "",
-    "links": []
+    "description": "Hugging Face Transformers.js is a JavaScript library that enables developers to run transformer models directly in the browser without requiring a server. It offers a similar API to the original Python library, allowing tasks like sentiment analysis, text generation, and image processing using pre-trained models. By supporting the `pipeline API`, it simplifies the integration of models with preprocessing and postprocessing functionalities.\n\nLearn more from the following resources:",
+    "links": [
+      {
+        "title": "Transformers.js",
+        "url": "https://huggingface.co/docs/hub/en/transformers-js",
+        "type": "article"
+      }
+    ]
   },
   "rTT2UnvqFO3GH6ThPLEjO": {
     "title": "Ollama",
-    "description": "",
-    "links": []
+    "description": "Ollama is a powerful open-source tool designed to run large language models (LLMs) locally on users' machines, It exposes a `local API`, allowing developers to seamlessly integrate LLMs into their applications and workflows. This API facilitates efficient communication between your application and the LLM, enabling you to send prompts, receive responses, and leverage the full potential of these **powerful AI models**.\n\nLearn more from the following resources:",
+    "links": [
+      {
+        "title": "Ollama",
+        "url": "https://ollama.com/",
+        "type": "article"
+      },
+      {
+        "title": "Ollama Explained",
+        "url": "https://www.geeksforgeeks.org/ollama-explained-transforming-ai-accessibility-and-language-processing/",
+        "type": "article"
+      }
+    ]
   },
   "ro3vY_sp6xMQ-hfzO-rc1": {
     "title": "Ollama Models",
-    "description": "",
-    "links": []
+    "description": "Ollama includes popular options like `Llama 2, Mistral, and Code Llama`. It simplifies the deployment process by bundling model weights, configurations, and datasets into a single package managed by a `Modelfile`, allowing users to easily manage and interact with these models. The platform's extensive library allows users to choose models tailored to their specific needs, and reduces reliance in cloud. Ollama Models could be of `text/base`, `chat/instruct` or `multi modal`.\n\nLearn more from the following resources:",
+    "links": [
+      {
+        "title": "Ollama Free Course",
+        "url": "https://youtu.be/f4tXwCNP1Ac?si=0RRKIfw2XAsWNNBo",
+        "type": "course"
+      },
+      {
+        "title": "Ollama Model Library",
+        "url": "https://ollama.com/library",
+        "type": "article"
+      }
+    ]
   },
   "TsG_I7FL-cOCSw8gvZH3r": {
     "title": "Ollama SDK",
-    "description": "",
-    "links": []
+    "description": "The Ollama SDK is a community-driven tool that allows developers to integrate and run large language models (LLMs) locally through a simple API. Enabling users to easily import the Ollama provider and create customized instances for various models, such as Llama 2 and Mistral. The SDK supports functionalities like `text generation` and `embeddings`, making it versatile for applications ranging from `chatbots` to `content generation`. Also Ollama SDK enhances privacy and control over data while offering seamless integration with existing workflows.\n\nLearn more from the following resources:",
+    "links": [
+      {
+        "title": "SDK Provider",
+        "url": "https://sdk.vercel.ai/providers/community-providers/ollama",
+        "type": "article"
+      },
+      {
+        "title": "Beginner's Guide",
+        "url": "https://dev.to/jayantaadhikary/using-the-ollama-api-to-run-llms-and-generate-responses-locally-18b7",
+        "type": "article"
+      },
+      {
+        "title": "Setup",
+        "url": "https://klu.ai/glossary/ollama",
+        "type": "article"
+      }
+    ]
   },
   "--ig0Ume_BnXb9K2U7HJN": {
     "title": "What are Embeddings",

public/roadmap-content/api-design.json

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

public/roadmap-content/blockchain.json

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

public/roadmap-content/nodejs.json

@@ -448,6 +448,11 @@
         "url": "https://blog.bitsrc.io/types-of-native-errors-in-javascript-you-must-know-b8238d40e492",
         "type": "article"
       },
+      {
+        "title": "JavaScript error reference - MDN",
+        "url": "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors",
+        "type": "article"
+      },
       {
         "title": "Explore top posts about JavaScript",
         "url": "https://app.daily.dev/tags/javascript?ref=roadmapsh",
@@ -527,6 +532,11 @@
         "title": "Async Errors",
         "url": "https://www.mariokandut.com/handling-errors-in-asynchronous-functions-node-js/",
         "type": "article"
+      },
+      {
+        "title": "The best way to handle errors in asynchronous javascript",
+        "url": "https://dev.to/m__mdy__m/the-best-way-to-handle-errors-in-asynchronous-javascript-16bb",
+        "type": "article"
       }
     ]
   },

public/roadmap-content/vue.json

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

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

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

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

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

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

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

src/data/projects/age-calculator.md

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

src/data/projects/custom-dropdown.md

@@ -2,7 +2,7 @@
 title: 'Custom Dropdown'
 description: 'Create a custom dropdown using HTML, CSS, and JavaScript.'
 isNew: false
-sort: 19
+sort: 20
 difficulty: 'intermediate'
 nature: 'JavaScript'
 skills:

src/data/projects/flash-cards.md

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

src/data/roadmaps/blockchain/content/evm-based@tSJyp46rkJcOtDqVpJX1s.md

@@ -6,6 +6,6 @@ Many blockchains have forked the Ethereum blockchain and added functionality on
 
 Visit the following resources to learn more:
 
-- [@article@What is Ethereum Virtual Machine?](https://moralis.io/evm-explained-what-is-ethereum-virtual-machine/)
+- [@article@What is Ethereum Virtual Machine?](https://astrodev.hashnode.dev/blockchain-ethereum-evm)
 - [@video@Understanding the Ethereum Virtual Machine (EVM): Concepts and Architecture](https://www.youtube.com/watch?v=kCswGz9naZg)
 - [@feed@Explore top posts about EVM](https://app.daily.dev/tags/evm?ref=roadmapsh)

src/data/roadmaps/datastructures-and-algorithms/content/106-search-algorithms/100-linear-search.md

@@ -1,3 +1,9 @@
 # Linear Search
 
 Linear search is one of the simplest search algorithms. In this method, every element in an array is checked sequentially starting from the first until a match is found or all elements have been checked. It is also known as sequential search. It works on both sorted and unsorted lists, and does not need any preconditioned list for the operation. However, its efficiency is lesser as compared to other search algorithms since it checks all elements one by one.
+
+Learn more from the following resources:
+
+- [@article@DSA Linear Search - W3Schools](https://www.w3schools.com/dsa/dsa_algo_linearsearch.php)
+- [@article@Linear Search - GeeksForGeeks](https://www.geeksforgeeks.org/linear-search/)
+- [@video@Learn Linear Search in 3 minutes](https://www.youtube.com/watch?v=246V51AWwZM)

src/data/roadmaps/datastructures-and-algorithms/content/106-search-algorithms/101-binary-search.md

@@ -1,3 +1,8 @@
 # Binary Search
 
 `Binary Search` is a type of search algorithm that follows the divide and conquer strategy. It works on a sorted array by repeatedly dividing the search interval in half. Initially, the search space is the entire array and the target is compared with the middle element of the array. If they are not equal, the half in which the target cannot lie is eliminated and the search continues on the remaining half, again taking the middle element to compare to the target, and repeating this until the target is found. If the search ends with the remaining half being empty, the target is not in the array. Binary Search is log(n) as it cuts down the search space by half each step.
+
+Learn more from the following resources:
+
+- [@article@DSA Binary Search - W3Schools](https://www.w3schools.com/dsa/dsa_algo_binarysearch.php)
+- [@video@Learn Binary Search in 10 minutes](https://www.youtube.com/watch?v=xrMppTpoqdw)

src/data/roadmaps/frontend/frontend.md

@@ -13,6 +13,42 @@ question:
   title: 'What is Frontend Development?'
   description: |
     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.
+
+    ## What does a Frontend Developer do?
+
+    While this is not a complete frontend developer job description, the following can be considered as a great introduction to the role of a frontend 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.
+
+    ## Which languages are used for Frontend Development?
+
+    The best part about the frontend development role is that there aren’t that many options to pick from when it comes to technologies (unlike with backend development).
+
+    As a frontend developer, you’ll be working with the following technologies:
+
+    - **HTML**: The markup language used to create the skeleton of the page. All the information you want to show on a webpage will be laid out through HTML.
+    - **CSS**: The Cascading Style Sheet language allows you to adjust the way in which the HTML elements are rendered, improving the visuals of your webpage.
+    - **JavaScript**: This is the de facto programming language for frontend development, and it allows you to add dynamism to your websites/web apps. There is an alternative known as TypeScript, which is a strongly typed superset of JavaScript that you can use instead. However, in that scenario, you’d have to set up a transpiler to translate your code into JavaScript before being able to run it in the browser.
+
+    ## What skills are required for a Frontend developer?
+
+    The main skills required to become a frontend developer are HTML, CSS, and JavaScript. The rest are also important, but without those three basic ones, you can’t apply any of the others.
+
+    The full list of [frontend developer skills](https://roadmap.sh/frontend/developer-skills) you should look into if you’re hoping to up your game is the following:
+
+    **1. Understanding the core technologies**: HTML, CSS & JavaScript.  
+    **2. Understanding accessibility**: Knowing how it can affect your users' experience.  
+    **3. Version control systems**: Be familiar with tools like Git.  
+    **4. Responsive design**: Implementing designs that adapt to different devices and screen sizes.  
+    **5. User experience (UX)**: Understanding the basics of UX principles.  
+    **6. SEO**: Knowing how search engine optimization works and how you can leverage it in your code.  
+    **7. RESTful APIs**: Understanding the basics of RESTful APIs and how to consume them.  
+    **8. Testing and debugging**: Implementing testing practices and debugging effectively.  
+    **9. Dev tools**: Master the browser’s developer tools for inspecting, debugging, and optimizing code.  
+    **10. Frameworks**: Having a go-to frontend framework (like React or Vue) and understanding others at a high level.  
+    **11. Web performance**: Understanding web performance optimizations and core web vitals.  
+    **12. TypeScript**: Understanding how TypeScript works and when to use it.
+
+    Covering these basic skills will prepare you for any type of [frontend developer interview questions](https://roadmap.sh/questions/frontend) you might encounter in the future and will enhance your current role.
+
 dimensions:
   width: 968
   height: 2775

src/data/roadmaps/nodejs/content/handling-async-errors@3MpxV23lNpuKg0--e_9m7.md

@@ -5,3 +5,4 @@ Errors must always be handled. If you are using synchronous programming you coul
 Visit the following resources to learn more:
 
 - [@article@Async Errors](https://www.mariokandut.com/handling-errors-in-asynchronous-functions-node-js/)
+- [@article@The best way to handle errors in asynchronous javascript](https://dev.to/m__mdy__m/the-best-way-to-handle-errors-in-asynchronous-javascript-16bb)

src/data/roadmaps/vue/content/api-calls@ZLlz0Azfze-8k3z8HnVvE.md

@@ -5,3 +5,4 @@ There are several options available to make API calls from your Vue.js applicati
 Visit the following resources to learn more:
 
 - [@article@How To Make API calls in Vue.JS Applications](https://medium.com/bb-tutorials-and-thoughts/how-to-make-api-calls-in-vue-js-applications-43e017d4dc86)
+- [@article@How to Use RapidAPI Client with Vue.js](https://rapidapi.com/guides/fetch-api-with-vue)

src/data/roadmaps/vue/content/apollo@l2Rl6OQbL7kYvPlpYCZ0Z.md

@@ -4,8 +4,8 @@ Apollo is a platform for building a unified graph, a communication layer that he
 
 Visit the following resources to learn more:
 
-- [@article@Apollo Website](https://www.apollographql.com)
-- [@article@Official Docs](https://www.apollographql.com/docs/)
-- [@video@Official YouTube Channel](https://www.youtube.com/c/ApolloGraphQL/)
+- [@official@Apollo Website](https://www.apollographql.com)
+- [@official@Apollo Docs](https://www.apollographql.com/docs/)
+- [@video@Apollo's YouTube Channel](https://www.youtube.com/c/ApolloGraphQL/)
 - [@video@GraphQL With React Tutorial - Apollo Client](https://www.youtube.com/watch?v=YyUWW04HwKY)
 - [@feed@Explore top posts about Apollo](https://app.daily.dev/tags/apollo?ref=roadmapsh)

src/data/roadmaps/vue/content/app-configurations@qRm08uDZW-D8QDc-9sPX8.md

@@ -4,5 +4,4 @@ Every application instance exposes a `config` object that contains the configura
 
 Visit the following resources to learn more:
 
-- [@article@Official Documentation](https://vuejs.org/api/application.html#app-config)
-- [@article@official API Documentation](https://vuejs.org/api/application.html)
+- [@official@Vue.js Documentation](https://vuejs.org/api/application.html#app-config)

src/data/roadmaps/vue/content/async-components@Re7tv1U0LxYqE5ShFxQSf.md

@@ -4,4 +4,4 @@ In large applications, we may need to divide the app into smaller chunks and onl
 
 Visit the following resources to learn more:
 
-- [@article@Async Components](https://vuejs.org/guide/components/async.html)
+- [@official@Async Components](https://vuejs.org/guide/components/async.html)

src/data/roadmaps/vue/content/attribute-inheritance@4S5fVFsFDMbq05ld7n0sF.md

@@ -4,4 +4,4 @@ Attribute inheritance aka "fallthrough attributes" is a feature of Vue.js that a
 
 Visit the following resources to learn more:
 
-- [@article@Fallthrough Attributes](https://vuejs.org/guide/components/attrs.html)
+- [@official@Fallthrough Attributes](https://vuejs.org/guide/components/attrs.html)

src/data/roadmaps/vue/content/axios@n5IlN-wv4k0r16CvhoSpD.md

@@ -1,11 +1,9 @@
 # Axios
 
-The most common way for frontend programs to communicate with servers is through the HTTP protocol. You are probably familiar with the Fetch API and the XMLHttpRequest interface, which allows you to fetch resources and make HTTP requests.
-
-Axios is a client HTTP API based on the XMLHttpRequest interface provided by browsers.
+Axios is a client HTTP API based on the XMLHttpRequest interface provided by browsers. The most common way for frontend programs to communicate with servers is through the HTTP protocol. You are probably familiar with the Fetch API and the XMLHttpRequest interface, which allows you to fetch resources and make HTTP requests.
 
 Visit the following resources to learn more:
 
-- [@article@Axios Getting Started](https://axios-http.com/docs/intro)
+- [@official@Getting Started with Axios](https://axios-http.com/docs/intro)
 - [@article@How to make HTTP requests with Axios](https://blog.logrocket.com/how-to-make-http-requests-like-a-pro-with-axios/#why)
 - [@feed@Explore top posts about Axios](https://app.daily.dev/tags/axios?ref=roadmapsh)

src/data/roadmaps/vue/content/binding-events@b7iXwtUnELg_ShbCyTrNA.md

@@ -1 +1,8 @@
 # Binding Events
+
+Vue.js is an open-source Model–View–ViewModel front-end JavaScript framework for building user interfaces and single-page applications. Vue.js has many own directives for DOM manipulation such as v-bind, v-on, v-model, etc. Binding events is an essential part of creating interactive applications. You can bind events using the v-on directive or its shorthand, the @ symbol.
+
+Visit the following resources to learn more:
+
+- [@official@Binding Events](https://vuejs.org/guide/essentials/event-handling)
+- [@article@Vue.js Event Handling](https://www.geeksforgeeks.org/vue-js-event-handling/)

src/data/roadmaps/vue/content/capacitor@IsNzCdS05tbAK0D1zz0Sf.md

@@ -4,5 +4,5 @@ Since Vue.js is a web framework, it does not natively support mobile app develop
 
 Visit the following resources to learn more:
 
-- [@article@Building cross-platform apps with Capacitor and Vue.js](https://blog.logrocket.com/building-cross-platform-apps-with-capacitor-and-vue-js/)
+- [@article@Building Cross-Platform Apps with Capacitor and Vue.js](https://blog.logrocket.com/building-cross-platform-apps-with-capacitor-and-vue-js/)
 - [@article@Building Mobile Apps With Capacitor And Vue.js](https://www.smashingmagazine.com/2018/07/mobile-apps-capacitor-vue-js/)

src/data/roadmaps/vue/content/component-registration@2HhKifjuDcP3eKpanRMEQ.md

@@ -4,4 +4,4 @@ A Vue component needs to be "registered" so that Vue knows where to locate its i
 
 Visit the following resources to learn more:
 
-- [@article@Component Registration](https://vuejs.org/guide/components/registration.html)
+- [@official@Component Registration](https://vuejs.org/guide/components/registration.html)

src/data/roadmaps/vue/content/components@0EevuyZiyty3X3Jzpjl4y.md

@@ -4,5 +4,5 @@ Components allow us to split the UI into independent and reusable pieces, and th
 
 Visit the following resources to learn more:
 
-- [@article@Components Basics](https://vuejs.org/guide/essentials/component-basics.html)
-- [@article@Components in Depth](https://vuejs.org/guide/components/registration.html)
+- [@official@Components Basics](https://vuejs.org/guide/essentials/component-basics.html)
+- [@official@Components in Depth](https://vuejs.org/guide/components/registration.html)

src/data/roadmaps/vue/content/composition-api@a0qwdQTunxEjQ9A5wpF-q.md

@@ -4,8 +4,8 @@ With the release of Vue 3, developers now have access to the Composition API, a
 
 Visit the following resources to learn more:
 
-- [@article@TypeScript with Composition API](https://vuejs.org/guide/typescript/composition-api.html)
-- [@article@Composition API FAQ](https://vuejs.org/guide/extras/composition-api-faq.html)
-- [@article@Composition API](https://vuejs.org/api/#composition-api)
+- [@official@TypeScript with Composition API](https://vuejs.org/guide/typescript/composition-api.html)
+- [@official@Composition API FAQ](https://vuejs.org/guide/extras/composition-api-faq.html)
+- [@official@Composition API](https://vuejs.org/api/#composition-api)
 - [@article@Vue 3 Composition API](https://www.thisdot.co/blog/vue-3-composition-api-ref-and-reactive)
 - [@feed@Explore top posts about Vue.js](https://app.daily.dev/tags/vuejs?ref=roadmapsh)

src/data/roadmaps/vue/content/computed-properties@Bx1Atxcf15AEaA1BiSIc6.md

@@ -4,4 +4,4 @@ In-template expressions are very convenient, but they are meant for simple opera
 
 Visit the following resources to learn more:
 
-- [@article@Computed Properties](https://vuejs.org/guide/essentials/computed.html#computed-properties)
+- [@official@Computed Properties](https://vuejs.org/guide/essentials/computed.html#computed-properties)

src/data/roadmaps/vue/content/conditional-rendering@tU4Umtnfu01t9gLlnlK6b.md

@@ -4,4 +4,4 @@ The directive `v-if` is used to conditionally render a block. The block will onl
 
 Visit the following resources to learn more:
 
-- [@article@Conditional Rendering](https://vuejs.org/guide/essentials/conditional.html)
+- [@official@Conditional Rendering](https://vuejs.org/guide/essentials/conditional.html)

src/data/roadmaps/vue/content/create-vue@y9ToYDix-koRbR6FLydFw.md

@@ -1,8 +1,9 @@
 # create-vue
 
-[create-vue](https://github.com/vuejs/create-vue) is a CLI tool that helps you create a new Vue project with a single command. It is a simple and easy-to-use tool that saves you time and effort when setting up a new Vue project.
+create-vue is a CLI tool that helps you create a new Vue project with a single command. It is a simple and easy-to-use tool that saves you time and effort when setting up a new Vue project.
 
 Learn more using the following resources:
 
-- [@article@Creating a Vue Project](https://cli.vuejs.org/guide/creating-a-project.html)
+- [@opensource@vuejs/create-vue](https://github.com/vuejs/create-vue)
+- [@official@Creating a Vue Project](https://cli.vuejs.org/guide/creating-a-project.html)
 - [@feed@Explore top posts about Vue.js](https://app.daily.dev/tags/vuejs?ref=roadmapsh)

src/data/roadmaps/vue/content/custom-directives@br1r8KIf5KInY5mk2xhA6.md

@@ -1,7 +1,9 @@
 # Custom Directives
 
-So far you may have covered two forms of code reuse in Vue: [components](https://vuejs.org/guide/essentials/component-basics.html) and [composables](https://vuejs.org/guide/reusability/composables.html). Components are the main building blocks, while composables are focused on reusing stateful logic. Custom directives, on the other hand, are mainly intended for reusing logic that involves low-level DOM access on plain elements.
+So far you may have covered two forms of code reuse in Vue: components and composables. Components are the main building blocks, while composables are focused on reusing stateful logic. Custom directives, on the other hand, are mainly intended for reusing logic that involves low-level DOM access on plain elements.
 
 Visit the following resources to learn more:
 
-- [@article@Custom Directives](https://vuejs.org/guide/reusability/custom-directives.html)
+- [@official@Custom Directives](https://vuejs.org/guide/reusability/custom-directives.html)
+- [@official@Composables](https://vuejs.org/guide/reusability/composables.html)
+- [@official@Components](https://vuejs.org/guide/essentials/component-basics.html)

src/data/roadmaps/vue/content/cypress@JbMKUVDMUygjXXmhndHVs.md

@@ -4,7 +4,7 @@ Cypress framework is a JavaScript-based end-to-end testing framework built on to
 
 Visit the following resources to learn more:
 
-- [@official@Official Website](https://www.cypress.io/)
-- [@article@Official Documentation](https://docs.cypress.io/guides/overview/why-cypress#Other)
+- [@official@Cypress Website](https://www.cypress.io/)
+- [@official@Cypress Documentation](https://docs.cypress.io/guides/overview/why-cypress#Other)
 - [@video@Cypress End-to-End Testing](https://www.youtube.com/watch?v=7N63cMKosIE)
 - [@feed@Explore top posts about Cypress](https://app.daily.dev/tags/cypress?ref=roadmapsh)

src/data/roadmaps/vue/content/debugging@dxwKfBxd5KYVkfEPMdHp-.md

@@ -1 +1,7 @@
 # Debugging
+
+Debugging in Vue.js involves identifying and fixing issues in your Vue applications. It’s an essential part of the development process, and there are several tools and techniques you can use to effectively debug your Vue code.
+
+Visit the following resources to learn more:
+
+- [@official@Debugging Documentation](https://vuejs.org/v2/cookbook/debugging-in-vscode.html)

src/data/roadmaps/vue/content/directives@CGdw3PqLRb9OqFU5SqmE1.md

@@ -1,7 +1,8 @@
 # Directives
 
-Directives are special attributes with the `v-` prefix. Vue provides a number of [built-in directives](https://vuejs.org/api/built-in-directives.html).
+Directives are special attributes with the `v-` prefix. Vue provides a number of built-in directives.
 
 Visit the following resources to learn more:
 
-- [@article@Directives Documentation](https://vuejs.org/guide/essentials/template-syntax.html#directives)
+- [@official@Directives Documentation](https://vuejs.org/guide/essentials/template-syntax.html#directives)
+- [@official@Built-in Directives](https://vuejs.org/api/built-in-directives.html)

src/data/roadmaps/vue/content/element-ui@NMIh8rqLM5P-Uk65uHATn.md

@@ -4,5 +4,5 @@ Element UI is another Vue.js component library with several built-in components
 
 Visit the following resources to learn more:
 
-- [@article@Official Website](https://element-plus.org/en-US/)
-- [@article@Official Getting Started](https://element-plus.org/en-US/guide/design.html)
+- [@official@Element UI Website](https://element-plus.org/en-US/)
+- [@official@Getting Started - Element UI](https://element-plus.org/en-US/guide/design.html)

src/data/roadmaps/vue/content/error--warn-handler@1oIt_5OK-t2WaCgaYt9A8.md

@@ -1 +1,7 @@
 # Error / Warn Handler
+
+Debugging in Vue.js involves identifying and fixing issues in your Vue applications. It’s an essential part of the development process, and there are several tools and techniques you can use to effectively debug your Vue code.
+
+Visit the following resources to learn more:
+
+- [@official@Debugging Documentation](https://vuejs.org/v2/cookbook/debugging-in-vscode.html)

src/data/roadmaps/vue/content/event-handling@4p6Gh2fMPA8hls_mWa5HR.md

@@ -4,4 +4,4 @@ When you build a dynamic website with Vue you'll most likely want it to be able
 
 Visit the following resources to learn more:
 
-- [@article@Event Handling in Vue.js](https://vuejs.org/guide/essentials/event-handling.html)
+- [@official@Event Handling in Vue.js](https://vuejs.org/guide/essentials/event-handling.html)

src/data/roadmaps/vue/content/event-modifiers@Aaf7eA-5sbAD5Cs1MbdTQ.md

@@ -1 +1,7 @@
 # Event Modifiers
+
+In Vue.js, event modifiers are special postfixes that you can add to event handlers to control the behavior of events more easily. They help simplify common tasks such as stopping propagation, preventing default actions, and ensuring that the event is triggered only under certain conditions.
+
+Visit the following resources to learn more:
+
+- [@article@Event Modifiers in Vue.js](https://www.freecodecamp.org/news/how-event-handling-works-in-vue-3-guide-for-devs/)

src/data/roadmaps/vue/content/events@X0J3ogH3W8EQe68tLfcGL.md

@@ -4,5 +4,5 @@ As we develop our applications we may need to communicate with the parent compon
 
 Visit the following resources to learn more:
 
-- [@article@Listening to Events](https://vuejs.org/guide/essentials/component-basics.html#listening-to-events)
-- [@article@Events in Detail](https://vuejs.org/guide/components/events.html)
+- [@official@Listening to Events](https://vuejs.org/guide/essentials/component-basics.html#listening-to-events)
+- [@official@Events in Detail](https://vuejs.org/guide/components/events.html)

src/data/roadmaps/vue/content/fetch@ufnt87swK61kxShLuVc1-.md

@@ -1,9 +1,9 @@
 # Fetch
 
-The fetch() method in JavaScript is used to request to the server and load the information on the webpages. The request can be of any APIs that return the data of the format JSON or XML. This method returns a promise.
+The `fetch()` method in JavaScript is used to request to the server and load the information on the webpages. The request can be of any APIs that return the data of the format JSON or XML. This method returns a promise.
 
 Visit the following resources to learn more:
 
-- [@article@Fetch MDN Docs](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch)
+- [@article@Fetch - MDN](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch)
 - [@article@Fetch W3school Docs](https://www.w3schools.com/jsref/api_fetch.asp)
-- [@article@Network request - Fetch](https://javascript.info/fetch)
+- [@article@Network Request - Fetch](https://javascript.info/fetch)

src/data/roadmaps/vue/content/formkit@BXz1utB_2eYzFvzSbFKx0.md

@@ -5,4 +5,3 @@ FormKit helps build forms faster by simplifying form structure, generation, vali
 Visit the following resources to learn more:
 
 - [@official@Formkit Documentation](https://formkit.com/)
-

src/data/roadmaps/vue/content/forms-handling@PQu4TyJOfCEaafW5th0e4.md

@@ -4,6 +4,6 @@ You can use the `v-model` directive to create two-way data bindings on form inpu
 
 Visit the following resources to learn more:
 
-- [@article@Form Input Bindings](https://vuejs.org/guide/essentials/forms.html)
+- [@official@Form Input Bindings](https://vuejs.org/guide/essentials/forms.html)
 - [@video@Vue JS 3 Tutorial - Form Handling](https://www.youtube.com/watch?v=T-AE-GtSlN4)
 - [@article@A complete guide to forms in Vue.js](https://blog.logrocket.com/an-imperative-guide-to-forms-in-vue-js-2/)

src/data/roadmaps/vue/content/forms@izGdctxP_OvQNvaMwVIrh.md

@@ -4,5 +4,5 @@ Apart from the built-in form-binding support, there are several options availabl
 
 Visit the following resources to learn more:
 
-- [@article@Form Input Bindings](https://vuejs.org/guide/essentials/forms.html)
+- [@official@Form Input Bindings](https://vuejs.org/guide/essentials/forms.html)
 - [@article@User Inputs in Vue 3](https://vueschool.io/lessons/user-inputs-vue-devtools-in-vue-3?friend=vuejs)

src/data/roadmaps/vue/content/global-properties@gihxGgt177BK_EYsAfpx9.md

@@ -1 +1,7 @@
 # Global Properties
+
+Global properties allows you to add properties or methods that can be accessed throughout your application. This is particularly useful for sharing functionality or data across components without the need to pass props explicitly.
+
+Visit the following resources to learn more:
+
+- [@article@Vue.js Global Properties](https://blog.logrocket.com/vue-js-globalproperties/)

src/data/roadmaps/vue/content/inline--method-handlers@gVahaZNPktQuqdukFEbQH.md

@@ -1 +1,7 @@
 # Inline / Method Handlers
+
+In Vue.js, **inline handlers** are defined directly in the template using expressions, making them suitable for simple tasks. For example, you might use an inline handler to increment a counter. **Method handlers**, on the other hand, are defined in the `methods` option and are better for more complex logic or when reusing functionality across multiple components. They improve code readability and maintainability.
+
+Visit the following resources to learn more:
+
+- [@official@Method Handlers](https://v1.vuejs.org/guide/events.html)

src/data/roadmaps/vue/content/input-bindings@NfB3HlZ3uwYK5xszvV50b.md

@@ -1 +1,7 @@
 # Input Bindings
+
+Input bindings are a way to bind user input to a component's data. This allows the component to react to user input and update its state accordingly. Input bindings are typically used with form elements such as text inputs, checkboxes, and select dropdowns.
+
+Visit the following resources to learn more:
+
+- [@official@Input Bindings](https://vuejs.org/guide/essentials/forms)

src/data/roadmaps/vue/content/key-modifiers@BXw36wqhmi3gExXwFCIBd.md

@@ -1 +1,7 @@
 # Key Modifiers
+
+Input bindings are a way to bind user input to a component's data. This allows the component to react to user input and update its state accordingly. Input bindings are typically used with form elements such as text inputs, checkboxes, and select dropdowns.
+
+Visit the following resources to learn more:
+
+- [@official@Input Bindings](https://vuejs.org/guide/essentials/forms)

src/data/roadmaps/vue/content/lifecycle-hooks@WiGG9_4G5y-AVA9byw6_g.md

@@ -4,6 +4,6 @@ Each Vue component instance goes through a series of initialization steps when i
 
 Visit the following resources to learn more:
 
-- [@article@Life Cycle Hooks](https://vuejs.org/guide/essentials/lifecycle.html)
+- [@official@Life Cycle Hooks](https://vuejs.org/guide/essentials/lifecycle.html)
 - [@article@The Lifecycles of Vue.js](https://dev.to/amolikvivian/the-lifecycles-of-vue-js-lhh)
 - [@feed@Explore top posts about React Hooks](https://app.daily.dev/tags/react-hooks?ref=roadmapsh)

src/data/roadmaps/vue/content/modifiers@dSfrFLr8wKkLAOMJwtCTr.md

@@ -1 +1,7 @@
 # Modifiers
+
+Modifiers are special suffixes that can be added to directives (such as v-model and v-bind) to alter their behavior. Modifiers allow you to specify additional functionality or constraints to the binding, making it more flexible and powerful.
+
+Visit the following resources to learn more:
+
+- [@official@Modifiers](https://v2.vuejs.org/v2/guide/components-custom-events.html)

src/data/roadmaps/vue/content/mouse-button-modifiers@x0wl2Qz2LTP4Q2tThKAt3.md

@@ -1 +1,7 @@
 # Mouse Button Modifiers
+
+Mouse button modifiers are a type of modifier that can be used with event handlers to specify which mouse button or buttons should trigger the event. These modifiers allow you to customize the behavior of event handlers, such as v-on:click, to respond to specific mouse button clicks.
+
+Visit the following resources to learn more:
+
+- [@article@Button Modifiers](https://medium.com/evolve-you/vue-3-keyboard-and-mouse-a4866d7d0e8)

src/data/roadmaps/vue/content/nuxtjs@8xZxTLYq5m5_nkGh2lfUt.md

@@ -6,7 +6,7 @@ Visit the following resources to learn more:
 
 - [@official@Nuxt Website](https://nuxt.com/)
 - [@official@Nuxt Docs](https://nuxt.com/docs/getting-started/introduction)
+- [@official@Nuxt Examples](https://nuxt.com/docs/examples/essentials/hello-world)
 - [@article@Get Started with Nuxt](https://explorers.netlify.com/learn/get-started-with-nuxt)
 - [@article@Nuxt.js Fundamentals](https://vueschool.io/courses/nuxtjs-fundamentals)
-- [@official@Nuxt Examples](https://nuxt.com/docs/examples/essentials/hello-world)
 - [@feed@Explore top posts about JavaScript](https://app.daily.dev/tags/javascript?ref=roadmapsh)

src/data/roadmaps/vue/content/optimizing-renders@RRPhAxIqvAcjZIcLe_N8-.md

@@ -4,4 +4,4 @@ Optimizing rendering is crucial for ensuring a smooth and efficient user experie
 
 Learn more from the following resources:
 
-- [@article@Optimizing rendering in Vue](https://blog.logrocket.com/optimizing-rendering-vue/)
+- [@article@Optimizing Rendering in Vue](https://blog.logrocket.com/optimizing-rendering-vue/)

src/data/roadmaps/vue/content/options-api@PPUU3Rb73aCpT4zcyvlJE.md

@@ -1,10 +1,8 @@
 # Options API
 
-We use Options API in a Vue application to write and define different components. With this API, we can use options such as data, methods, and mounted.
-
-To state it simply, Options API is an old way to structure a Vue.JS application. Due to some limitations in this API, Composition API was introduced in Vue 3.
+We use Options API in a Vue application to write and define different components. With this API, we can use options such as data, methods, and mounted. To state it simply, Options API is an old way to structure a Vue.JS application. Due to some limitations in this API, Composition API was introduced in Vue 3.
 
 Visit the following resources to learn more:
 
-- [@article@TypeScript with Options API](https://vuejs.org/guide/typescript/options-api.html)
-- [@article@Options API Documentation](https://vuejs.org/api/#options-api)
+- [@official@TypeScript with Options API](https://vuejs.org/guide/typescript/options-api.html)
+- [@official@Options API Documentation](https://vuejs.org/api/#options-api)

src/data/roadmaps/vue/content/pinia@NIvjyhtTFC1gomtGQT_2t.md

@@ -4,5 +4,5 @@ Pinia is a store library for Vue.js, and can be used in Vue 2 and Vue 3, with th
 
 Visit the following resources to learn more:
 
-- [@article@Official Documentation](https://pinia.vuejs.org/)
+- [@official@Pinia Documentation](https://pinia.vuejs.org/)
 - [@video@Learn Pinia in 30Minutes](https://www.youtube.com/watch?v=JGC7aAC-3y8)

src/data/roadmaps/vue/content/playwright@zqcE3bTnymdepV-Yc8qBl.md

@@ -4,5 +4,5 @@ Playwright Test was created specifically to accommodate the needs of end-to-end
 
 Visit the following resources to learn more:
 
-- [@official@Official Website: Playwright](https://playwright.dev/)
+- [@official@Playwright Website](https://playwright.dev/)
 - [@article@Playwright Tutorial: Learn Basics and Setup](https://www.browserstack.com/guide/playwright-tutorial)

src/data/roadmaps/vue/content/plugins@_Nc8ivQrdpKuf8MwaV-K7.md

@@ -4,5 +4,5 @@ Plugins are self-contained code that usually add app-level functionality to Vue.
 
 Visit the following resources to learn more:
 
-- [@article@Plugins in Vue.js](https://vuejs.org/guide/reusability/plugins.html)
+- [@official@Plugins in Vue.js](https://vuejs.org/guide/reusability/plugins.html)
 - [@article@How to Write Your Own Vue.js Plugin](https://www.linode.com/docs/guides/how-to-write-vue-js-plugins/)

src/data/roadmaps/vue/content/props@raEfI4GLMW2fOucka07VE.md

@@ -6,5 +6,5 @@ Props are custom attributes you can register on a component.
 
 Visit the following resources to learn more:
 
-- [@article@Props Basics](https://vuejs.org/guide/essentials/component-basics.html#passing-props)
-- [@article@Props in Depth](https://vuejs.org/guide/components/props.html)
+- [@official@Props Basics](https://vuejs.org/guide/essentials/component-basics.html#passing-props)
+- [@official@Props in Depth](https://vuejs.org/guide/components/props.html)

src/data/roadmaps/vue/content/provide--inject@xwVbhOpQMPPB4G-lhro0B.md

@@ -4,4 +4,4 @@ Usually, when we need to pass data from the parent to a child component, we use
 
 Visit the following resources to learn more:
 
-- [@article@Provide / Inject in Vue.js](https://vuejs.org/guide/components/provide-inject.html)
+- [@official@Provide / Inject in Vue.js](https://vuejs.org/guide/components/provide-inject.html)

src/data/roadmaps/vue/content/quasar@f2udJnT2q5eDmBZ_OKtmi.md

@@ -4,6 +4,6 @@ Quasar Framework is an open-source Vue.js based framework for building apps, wit
 
 Visit the following resources to learn more:
 
-- [@official@Official Website: Quasar](https://quasar.dev/)
+- [@official@Quasar](https://quasar.dev/)
 - [@video@Quasar Framework: Vue.js Cross Platform App](https://www.youtube.com/watch?v=opmng7llVJ0&list=PLAiDzIdBfy8iu_MZrq3IPuSFcRgCQ0iL0)
 - [@video@How to Build an App using Quasar Framework](https://www.youtube.com/watch?v=czJIuHyPPXo)

src/data/roadmaps/vue/content/rendering-lists@ftqDoGpwqqWQnu4NQSsMk.md

@@ -4,4 +4,4 @@ We can use the `v-for` directive to render a list of items based on an array. Th
 
 Visit the following resources to learn more:
 
-- [@article@Rendering Lists in Vue.js](https://vuejs.org/guide/essentials/list.html)
+- [@official@Rendering Lists in Vue.js](https://vuejs.org/guide/essentials/list.html)

src/data/roadmaps/vue/content/routing@ixRG0xfEp4BmyvCR0mtoR.md

@@ -1,3 +1,8 @@
 # Routing
 
 Routing is an essential concept in Single Page Applications (SPA). When your application is divided into separated logical sections, and all of them are under their own URL, your users can easily share links among each other.
+
+Visit the following resources to learn more:
+
+- [@official@Routing in Vue.js](https://vuejs.org/guide/scaling-up/routing.html)
+- [@official@The Vue Router](https://router.vuejs.org/)

src/data/roadmaps/vue/content/single-file-components@VNBRlJkdH6NOOzGXUrbZK.md

@@ -4,4 +4,4 @@ Vue Single-File Components (a.k.a. `*.vue` files, abbreviated as SFC) is a speci
 
 Visit the following resources to learn more:
 
-- [@article@Single File Components](https://vuejs.org/guide/scaling-up/sfc.html)
+- [@official@Single File Components](https://vuejs.org/guide/scaling-up/sfc.html)

src/data/roadmaps/vue/content/slots@jkX66izOHVWqtyd6KZ0K6.md

@@ -4,4 +4,4 @@ In some cases, we may want to pass a template fragment to a child component, and
 
 Visit the following resources to learn more:
 
-- [@article@Slots in Vue.js](https://vuejs.org/guide/components/slots.html)
+- [@official@Slots in Vue.js](https://vuejs.org/guide/components/slots.html)

src/data/roadmaps/vue/content/ssg@822tGnM9jOkYh9aNlosPr.md

@@ -4,7 +4,7 @@ A static site generator is a tool that generates a full static HTML website base
 
 Visit the following resources to learn more:
 
-- [@article@What is a static site generator?](https://www.cloudflare.com/learning/performance/static-site-generator/)
+- [@article@What is a Static Site Generator?](https://www.cloudflare.com/learning/performance/static-site-generator/)
 - [@article@Next.js SSG](https://nextjs.org/docs/advanced-features/static-html-export)
 - [@article@Gatsby SSG](https://www.gatsbyjs.com/docs/glossary/static-site-generator/)
 - [@article@SSG — An 11ty, Vite And JAM Sandwich](https://www.smashingmagazine.com/2021/10/building-ssg-11ty-vite-jam-sandwich/)

src/data/roadmaps/vue/content/ssr@Cm6mqXYp-G4mGfPxuU73_.md

@@ -4,9 +4,8 @@ Server-side rendering refers to the process that the service side completes the
 
 Visit the following resources to learn more:
 
-- [@article@what is server side rendering](https://www.educative.io/answers/what-is-server-side-rendering)
+- [@article@What is Server Side Rendering (SSR)?](https://www.educative.io/answers/what-is-server-side-rendering)
 - [@article@When should I Server-Side Render?](https://medium.com/@mbleigh/when-should-i-server-side-render-c2a383ff2d0f)
 - [@article@Server-Side Rendering (SSR)](https://vuejs.org/guide/scaling-up/ssr.html)
-- [@video@what is server side rendering?](https://www.youtube.com/watch?v=GQzn7XRdzxY)
-- [@video@What is server-side rendering for web development?](https://www.youtube.com/watch?v=okvg3MRAPs0)
+- [@video@What is Server Side Rendering (SSR) for Web Development?](https://www.youtube.com/watch?v=okvg3MRAPs0)
 - [@feed@Explore top posts about Web Development](https://app.daily.dev/tags/webdev?ref=roadmapsh)

src/data/roadmaps/vue/content/state-management@9AwVtwIv6TfP9F4ulz2F0.md

@@ -4,4 +4,5 @@ Application state management is the process of maintaining knowledge of an appli
 
 Visit the following resources to learn more:
 
+- [@official@State Management](https://vuejs.org/guide/scaling-up/state-management.html)
 - [@article@What is State Management?](https://www.techtarget.com/searchapparchitecture/definition/state-management)

src/data/roadmaps/vue/content/tanstack-query@WSq_cDKQPZa_qmQlIdGXg.md

@@ -4,4 +4,4 @@ TanStack Query is a data fetching and caching library for Vue.js and React. It i
 
 Visit the following resources to learn more:
 
-- [@official@Official Website](https://tanstack.com/query)
+- [@official@Tanstack Query Website](https://tanstack.com/query)

src/data/roadmaps/vue/content/teleport-components@SGsd08ZTu4H76s8cfbCKe.md

@@ -4,4 +4,4 @@ Sometimes we may run into the following scenario: a part of a component's templa
 
 Visit the following resources to learn more:
 
-- [@article@Teleport Components](https://vuejs.org/guide/built-ins/teleport.html)
+- [@official@Teleport Components](https://vuejs.org/guide/built-ins/teleport.html)

src/data/roadmaps/vue/content/templates@VlcYnTHW5d4J_zLYupvu5.md

@@ -4,4 +4,4 @@ Vue uses an HTML-based template syntax that allows you to declaratively bind the
 
 Visit the following resources to learn more:
 
-- [@article@Template Syntax](https://vuejs.org/guide/essentials/template-syntax.html)
+- [@official@Template Syntax](https://vuejs.org/guide/essentials/template-syntax.html)

src/data/roadmaps/vue/content/transition-group@HjzOYjS-7ZEBvElRJ8uN2.md

@@ -4,4 +4,4 @@
 
 Visit the following resources to learn more:
 
-- [@article@TransitionGroup Component](https://vuejs.org/guide/built-ins/transition-group.html)
+- [@official@TransitionGroup Component](https://vuejs.org/guide/built-ins/transition-group.html)

src/data/roadmaps/vue/content/transition@SWpWg5J5N9ZfY_DaIigA5.md

@@ -7,4 +7,4 @@ Vue offers two built-in components that can help work with transitions and anima
 
 Visit the following resources to learn more:
 
-- [@article@Transition Component](https://vuejs.org/guide/built-ins/transition.html#transition)
+- [@official@Transition Component](https://vuejs.org/guide/built-ins/transition.html#transition)

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

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

src/data/roadmaps/vue/content/v-cloak@RrSekP8Ub01coegMwLP6a.md

@@ -1,22 +1,23 @@
 # v-cloak
 
-The v-cloak directive is used to prevent the uncompiled Vue template from being visible while the Vue instance is still loading. It temporarily hides the content until Vue has finished compiling the template
+The v-cloak directive is used to prevent the uncompiled Vue template from being visible while the Vue instance is still loading. It temporarily hides the content until Vue has finished compiling the template. The v-cloak directive remains until the component instance is mounted.
 
-The v-cloak directive remains until the component instance is mounted.
-```vue
+```html
 <div v-cloak>
   {{ message }}
 </div>
 ```
 
 Combined with CSS, you can hide elements with v-cloak until they are ready.
+
 ```css
 [v-cloak] {
   display: none;
 }
 ```
+
 The `<div>` will not be visible until the compilation is done.
 
 Visit the following resources to learn more:
 
-- [@official@v-cloak documentation](https://vuejs.org/api/built-in-directives.html#v-cloak)
+- [@official@v-cloak Documentation](https://vuejs.org/api/built-in-directives.html#v-cloak)

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

@@ -3,4 +3,5 @@
 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-else@0CtAZQcFJexMiJfZ-mofv.md

@@ -2,6 +2,7 @@
 
 The `v-else` conditionally renders an element or a template fragment as a function in case the `v-if` does not fulfil the condition.
 
+
 Visit the following resources for more information:
 
-- [@official@v-else documentation](https://vuejs.org/api/built-in-directives.html#v-else)
+- [@official@v-else Documentation](https://vuejs.org/api/built-in-directives.html#v-else)

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

@@ -1,11 +1,11 @@
 # 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.
+When using this directive it is important to assign a unique key to each item to avoid issues and improve performance. This directive follows the `item in items` syntax.
 
-Example:
-```vue
+## Example
+
+```html
 <script setup>
   import { ref } from 'vue';
   const foods = ref([
@@ -22,4 +22,4 @@ Example:
 
 Visit the following resources to learn more:
 
-- [@official@v-for documentation](https://vuejs.org/guide/essentials/list#v-for)
+- [@official@v-for Documentation](https://vuejs.org/guide/essentials/list#v-for)

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

@@ -1,9 +1,10 @@
 # v-html
 
-The `v-html` directive is similar to the `v-text` directive, but the difference is that `v-html` renders its content as HTML. This means that if you pass an HTML element it will be rendered as an element and not plain text. Since the content is render as HTML, it can pose a security risk if the content contains malicius JavaScript code. For this reason you should never use this directive in combination with user input, unless the input is first properly sanitized.
+The `v-html` directive is similar to the `v-text` directive, but the difference is that `v-html` renders its content as HTML. This means that if you pass an HTML element it will be rendered as an element and not plain text. Since the content is render as HTML, it can pose a security risk if the content contains malicious JavaScript code. For this reason you should never use this directive in combination with user input, unless the input is first properly sanitized.
 
-Example:
-```vue
+## Example
+
+```html
 <template>
   <p v-html="'<h1>Text</h1>'"></p>
 </template>
@@ -11,4 +12,4 @@ Example:
 
 Visit the following resources to learn more:
 
-- [@official@v-html documentation](https://vuejs.org/api/built-in-directives.html#v-html)
+- [@official@v-html Documentation](https://vuejs.org/api/built-in-directives.html#v-html)

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

@@ -1,8 +1,12 @@
 # v-if
 
-Conditionally render an element or a template fragment based on the truthy-ness of the expression value.
+Conditionally render an element or a template fragment based on the truthy-ness of the expression value. When a `v-if` element is toggled, the element and its contained directives / components are destroyed and re-constructed. If the initial condition is falsy, then the inner content won't be rendered at all.
 
-When a `v-if` element is toggled, the element and its contained directives / components are destroyed and re-constructed. If the initial condition is falsy, then the inner content won't be rendered at all.
+## Example
+
+```html
+<h1 v-if="awesome">Vue is awesome!</h1>
+```
 
 Visit the following resources to learn more:
 

src/data/roadmaps/vue/content/v-model@cxu2Wbt306SxM4JKQQqnL.md

@@ -2,4 +2,4 @@
 
 The v-model directive in Vue.js is used for creating two-way data bindings on form input elements, such as `<input>`, `<textarea>`, and `<select>`. This means that the data can be updated in the component when the user inputs something, and the UI will update if the data in the component changes.
 
-- [@article@Form Input Bindings](https://vuejs.org/guide/essentials/forms.html)
+- [@official@Form Input Bindings](https://vuejs.org/guide/essentials/forms.html)

src/data/roadmaps/vue/content/v-model@gMFndBcrTC6FtGryqN6dX.md

@@ -1,5 +1,5 @@
 # v-model
 
-The v-model directive in Vue.js is used for creating two-way data bindings on form input elements, such as <input>, <textarea>, and <select>. This means that the data can be updated in the component when the user inputs something, and the UI will update if the data in the component changes.
+The v-model directive in Vue.js is used for creating two-way data bindings on form input elements, such as `<input>`, `<textarea>`, and `<select>`. This means that the data can be updated in the component when the user inputs something, and the UI will update if the data in the component changes.
 
-- [@article@Form Input Bindings](https://vuejs.org/guide/essentials/forms.html)
+- [@official@Form Input Bindings](https://vuejs.org/guide/essentials/forms.html)

src/data/roadmaps/vue/content/v-model@swpyZFUO4UO3mW8Bvf1Te.md

@@ -2,7 +2,6 @@
 
 v-model is a directive that allows you to create two-way data bindings on form input, textarea, and select elements. It automatically picks the correct way to update the element based on the input type.
 
-
 Visit the following resources to learn more:
 
-- [@article@Vue.js Guide](https://vuejs.org/guide/components/v-model.html#component-v-model)
+- [@official@Vue.js Guide](https://vuejs.org/guide/components/v-model.html#component-v-model)

src/data/roadmaps/vue/content/v-on@hVuRmhXVP65IPtuHTORjJ.md

@@ -1 +1,7 @@
 # v-on
+
+The v-on directive is placed on an element to attach an event listener. To attach an event listener with v-on we need to provide the event type, and any modifier, and a method or expression that should run when that event occurs.
+
+Visit the following resources to learn more:
+
+- [@article@v-on Directive](https://www.w3schools.com/vue/ref_v-on.php)

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

@@ -2,8 +2,9 @@
 
 The `v-once` directive makes an HTML element render only once, skipping every future update.
 
-Example:
-```vue
+## Example
+
+```html
 <script setup>
   import { ref } from 'vue';
   const input = ref("Some Text");
@@ -14,8 +15,9 @@ Example:
   <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)
+- [@official@v-once Documentation](https://vuejs.org/api/built-in-directives.html#v-once)

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

@@ -2,8 +2,9 @@
 
 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
+## Example
+
+```html
 <script setup>
   import { ref } from 'vue';
   const text = ref("Some Text")
@@ -13,6 +14,7 @@ Example:
   <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:

src/data/roadmaps/vue/content/v-show@_TlbGTKFCMO0wdLbC6xHX.md

@@ -1,9 +1,7 @@
 # v-show
 
-`v-show` is similar to `v-if` in that it allows you to conditionally render components. However, it does not remove the component from the DOM and merely toggles its `display` CSS property to be `hidden`. It also does not work with `v-else-if` oe `v-else`.
-
-Prefer `v-show` over `v-if` if the component's visibility needs to change often, and `v-if` if not.
+`v-show` is similar to `v-if` in that it allows you to conditionally render components. However, it does not remove the component from the DOM and merely toggles its `display` CSS property to be `hidden`. It also does not work with `v-else-if` oe `v-else`. Prefer `v-show` over `v-if` if the component's visibility needs to change often, and `v-if` if not.
 
 Visit the following resources to learn more:
 
-- [@official@Vue Conditional Rendering Docs](https://vuejs.org/guide/essentials/conditional.html#v-show)
+- [@official@Vue Conditional Rendering](https://vuejs.org/guide/essentials/conditional.html#v-show)

src/data/roadmaps/vue/content/v-slot@m9pQ3daR3KiwRATcQysHA.md

@@ -4,7 +4,7 @@ The v-slot directive to define slots in components, allowing you to pass and ren
 
 For named slots, you use v-slot with a specific slot name. This lets you pass different content to different parts of a component:
 
-```vue
+```html
 <template>
   <custom-component>
     <template v-slot:header>

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

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

src/data/roadmaps/vue/content/vee-validate@_Fmp8_z4SKWfKUE80_fqb.md

@@ -4,5 +4,5 @@ OpenSource plugin to handle form validations in Vue.js
 
 Visit the following resources to learn more:
 
-- [@article@Official Website: Vee Validate](https://vee-validate.logaretm.com/v4/)
 - [@opensource@logarem/vee-validate](https://github.com/logaretm/vee-validate)
+- [@official@Vee Website: Vee Validate](https://vee-validate.logaretm.com/v4/)

src/data/roadmaps/vue/content/vitepress@_46COO0FGaFuCYwqaRRWy.md

@@ -4,4 +4,4 @@ Vitepress is a static site generator that is built on top of Vite. It is a light
 
 Visit the following resources to learn more:
 
-- [@official@Official Website](https://vitepress.dev/)
+- [@official@Vitepress Website](https://vitepress.dev/)

src/data/roadmaps/vue/content/vitest@LjEAviRMtPLwUUlfcof1h.md

@@ -1,7 +1,6 @@
 # Vitest
 
-Vitest is a fast Vite-native unit test framework with out-of-box ESM and TypeScript support.
-Works on React, Vue, Svelte and more projects created with Vite
+Vitest is a fast Vite-native unit test framework with out-of-box ESM and TypeScript support. It Works on React, Vue, Svelte and more projects created with Vite.
 
 Visit the following resources to learn more:
 

src/data/roadmaps/vue/content/vue-router@COxkmvqe9jFtV9WtGjfbh.md

@@ -4,6 +4,6 @@ Vue Router is the official router for Vue.js which allows creating static/dynami
 
 Visit the following resources to learn more:
 
-- [@article@Vue Router](https://router.vuejs.org/)
+- [@official@The Vue Router](https://router.vuejs.org/)
 - [@feed@Explore top posts about Vue.js](https://app.daily.dev/tags/vuejs?ref=roadmapsh)
 - [@video@The Vue Router](https://www.youtube.com/watch?v=juocv4AtrHo)

src/data/roadmaps/vue/content/vue-testing-library@p5bUvgr_3H-A55ZnEExk8.md

@@ -4,5 +4,5 @@ The Vue Testing Library is a very lightweight solution for testing Vue component
 
 Visit the following resources to learn more:
 
-- [@article@Getting Started with Vue Testing Library](https://testing-library.com/docs/vue-testing-library/intro/)
+- [@official@Getting Started with Vue Testing Library](https://testing-library.com/docs/vue-testing-library/intro/)
 - [@feed@Explore top posts about Testing](https://app.daily.dev/tags/testing?ref=roadmapsh)

src/data/roadmaps/vue/content/vuelidate@6U_CAhAY_jyj_4Mzj_HL_.md

@@ -4,5 +4,5 @@ Simple, lightweight model-based validation for Vue.js.
 
 Visit the following resources to learn more:
 
-- [@article@Official Website: Vuelidate](https://vuelidate.js.org/)
+- [@official@Vuelidate Website](https://vuelidate.js.org/)
 - [@opensource@vuelidate/vuelidate](https://github.com/vuelidate/vuelidate)

src/data/roadmaps/vue/content/vuetify@VNclt_QQthWb2u4xWI_uY.md

@@ -4,7 +4,7 @@ Vuetify is a Vue UI Library with beautifully handcrafted Material Components. No
 
 Visit the following resources to learn more:
 
-- [@article@Official Website](https://vuetifyjs.com/en/)
-- [@article@Getting started with Vuetify](https://vuetifyjs.com/en/getting-started/installation/)
+- [@official@Vuetify Website](https://vuetifyjs.com/en/)
+- [@official@Getting Started with Vuetify](https://vuetifyjs.com/en/getting-started/installation/)
 - [@feed@Explore top posts about Vue.js](https://app.daily.dev/tags/vuejs?ref=roadmapsh)
 - [@video@Vuetify: Create an App with Vue JS - in 30 MINUTES!](https://www.youtube.com/watch?v=CjXgoYo86yY)

src/data/roadmaps/vue/content/vueuse@Z9szBPFXfqK_KsvzkR-rf.md

@@ -4,5 +4,4 @@ VueUse is a collection of utility functions based on Composition API. It has ove
 
 Visit the following resources to learn more:
 
-- [@official@Official Website - VueUse](https://vueuse.org/)
-
+- [@official@VueUse](https://vueuse.org/)

src/data/roadmaps/vue/content/watchers@kdlXhbw_a81xdZtyK-pVa.md

@@ -1,9 +1,7 @@
 # Watchers
 
-Computed properties allow us to declaratively compute derived values. However, there are cases where we need to perform "side effects" in reaction to state changes - for example, mutating the DOM, or changing another piece of state based on the result of an async operation.
-
-With Composition API, we can use the watch function to trigger a callback whenever a piece of reactive state changes.
+Computed properties allow us to declaratively compute derived values. However, there are cases where we need to perform "side effects" in reaction to state changes - for example, mutating the DOM, or changing another piece of state based on the result of an async operation. With Composition API, we can use the watch function to trigger a callback whenever a piece of reactive state changes.
 
 Visit the following resources to learn more:
 
-- [@article@Watchers in Vue.js](https://vuejs.org/guide/essentials/watchers.html)
+- [@official@Watchers in Vue.js](https://vuejs.org/guide/essentials/watchers.html)

src/helper/number.ts

@@ -1,9 +1,12 @@
 export function getPercentage(portion: number, total: number): string {
-  if (total <= 0 || portion <= 0) {
-    return '0';
-  } else if (portion > total) {
-    return '100';
+  if (portion <= 0 || total <= 0) {
+    return '0.00';
   }
   
-  return ((portion / total) * 100).toFixed(2);
+  if (portion >= total) {
+    return '100.00';
+  }
+
+  const percentage = (portion / total) * 100;
+  return percentage.toFixed(2);
 }

src/pages/devops/vs-full-stack.astro

@@ -0,0 +1,31 @@
+---
+import GuideContent from '../../components/Guide/GuideContent.astro';
+import GuideHeader from '../../components/GuideHeader.astro';
+import BaseLayout from '../../layouts/BaseLayout.astro';
+import { getGuideById } from '../../lib/guide';
+import { getOpenGraphImageUrl } from '../../lib/open-graph';
+import { replaceVariables } from '../../lib/markdown';
+
+const guideId = 'devops-vs-full-stack';
+const guide = await getGuideById(guideId);
+
+const { frontmatter: guideData } = guide!;
+
+const ogImageUrl =
+  guideData.seo.ogImageUrl ||
+  getOpenGraphImageUrl({
+    group: 'guide',
+    resourceId: guideId,
+  });
+---
+
+<BaseLayout
+  title={replaceVariables(guideData.seo.title)}
+  description={replaceVariables(guideData.seo.description)}
+  permalink={guide.frontmatter.excludedBySlug}
+  canonicalUrl={guideData.canonicalUrl}
+  ogImageUrl={ogImageUrl}
+>
+  <GuideHeader guide={guide!} />
+  <GuideContent guide={guide!} />
+</BaseLayout>