fix: todo uncheck

* Fix link labels

* Update src/data/roadmaps/rust/content/101-language-basics/103-data-structures/113-queue.md

---------

Co-authored-by: dsh <daniel.s.holdsworth@gmail.com>

.astro/settings.json

@@ -3,6 +3,6 @@
 		"enabled": false
 	},
 	"_variables": {
-		"lastUpdateCheck": 1720119515249
+		"lastUpdateCheck": 1720192549979
 	}
 }

package.json

@@ -28,17 +28,17 @@
     "test:e2e": "playwright test"
   },
   "dependencies": {
-    "@astrojs/node": "^8.2.5",
-    "@astrojs/react": "^3.4.0",
-    "@astrojs/sitemap": "^3.1.5",
+    "@astrojs/node": "^8.3.2",
+    "@astrojs/react": "^3.6.0",
+    "@astrojs/sitemap": "^3.1.6",
     "@astrojs/tailwind": "^5.1.0",
-    "@fingerprintjs/fingerprintjs": "^4.3.0",
+    "@fingerprintjs/fingerprintjs": "^4.4.1",
     "@nanostores/react": "^0.7.2",
     "@napi-rs/image": "^1.9.2",
     "@resvg/resvg-js": "^2.6.2",
-    "@types/react": "^18.3.2",
+    "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
-    "astro": "^4.9.1",
+    "astro": "^4.11.3",
     "clsx": "^2.1.1",
     "dayjs": "^1.11.11",
     "dom-to-image": "^2.6.0",
@@ -46,21 +46,21 @@
     "gray-matter": "^4.0.3",
     "htm": "^3.1.1",
     "image-size": "^1.1.1",
-    "jose": "^5.3.0",
+    "jose": "^5.6.2",
     "js-cookie": "^3.0.5",
-    "lucide-react": "^0.378.0",
+    "lucide-react": "^0.399.0",
     "nanoid": "^5.0.7",
     "nanostores": "^0.10.3",
     "node-html-parser": "^6.1.13",
     "npm-check-updates": "^16.14.20",
-    "playwright": "^1.44.0",
+    "playwright": "^1.45.0",
     "prismjs": "^1.29.0",
     "react": "^18.3.1",
     "react-calendar-heatmap": "^1.9.0",
     "react-confetti": "^6.1.0",
     "react-dom": "^18.3.1",
-    "react-tooltip": "^5.26.4",
-    "reactflow": "^11.11.3",
+    "react-tooltip": "^5.27.0",
+    "reactflow": "^11.11.4",
     "rehype-external-links": "^3.0.0",
     "remark-parse": "^11.0.0",
     "roadmap-renderer": "^1.0.6",
@@ -69,12 +69,12 @@
     "sharp": "^0.33.4",
     "slugify": "^1.6.6",
     "tailwind-merge": "^2.3.0",
-    "tailwindcss": "^3.4.3",
-    "unified": "^11.0.4",
-    "zustand": "^4.5.2"
+    "tailwindcss": "^3.4.4",
+    "unified": "^11.0.5",
+    "zustand": "^4.5.4"
   },
   "devDependencies": {
-    "@playwright/test": "^1.44.0",
+    "@playwright/test": "^1.45.0",
     "@tailwindcss/typography": "^0.5.13",
     "@types/dom-to-image": "^2.6.7",
     "@types/js-cookie": "^3.0.6",
@@ -84,10 +84,10 @@
     "gh-pages": "^6.1.1",
     "js-yaml": "^4.1.0",
     "markdown-it": "^14.1.0",
-    "openai": "^4.47.1",
-    "prettier": "^3.2.5",
-    "prettier-plugin-astro": "^0.13.0",
-    "prettier-plugin-tailwindcss": "^0.5.14",
-    "tsx": "^4.10.5"
+    "openai": "^4.52.2",
+    "prettier": "^3.3.2",
+    "prettier-plugin-astro": "^0.14.0",
+    "prettier-plugin-tailwindcss": "^0.6.5",
+    "tsx": "^4.16.0"
   }
 }

src/components/CustomRoadmap/FlowRoadmapRenderer.tsx

@@ -62,7 +62,10 @@ export function FlowRoadmapRenderer(props: FlowRoadmapRendererProps) {
   }
 
   const handleTopicRightClick = useCallback((e: MouseEvent, node: Node) => {
-    const target = e?.currentTarget as HTMLDivElement;
+    const target =
+      node?.type === 'todo'
+        ? document.querySelector(`[data-id="${node.id}"]`)
+        : (e?.currentTarget as HTMLDivElement);
     if (!target) {
       return;
     }

src/components/EditorRoadmap/EditorRoadmapRenderer.css

@@ -42,6 +42,10 @@ svg > g[data-type='topic'].done > rect + text {
   fill: black;
 }
 
+svg .done text[fill='#ffffff'] {
+  fill: black;
+}
+
 svg > g[data-type='subtipic'].done > rect + text,
 svg > g[data-type='subtipic'].learning > rect + text {
   fill: #cbcbcb;

src/components/FrameRenderer/renderer.ts

@@ -152,6 +152,10 @@ export class Renderer {
       return;
     }
 
+    if (/^check:/.test(topicId)) {
+      topicId = topicId.replace('check:', '');
+    }
+
     pageProgressMessage.set('Updating progress');
     updateResourceProgress(
       {

src/components/TeamProgress/MemberCustomProgressModal.tsx

@@ -161,7 +161,10 @@ export function MemberCustomProgressModal(props: ProgressMapProps) {
       return;
     }
 
-    const target = e?.currentTarget as HTMLDivElement;
+    const target =
+      node?.type === 'todo'
+        ? document.querySelector(`[data-id="${node.id}"]`)
+        : (e?.currentTarget as HTMLDivElement);
     if (!target) {
       return;
     }
@@ -237,7 +240,6 @@ export function MemberCustomProgressModal(props: ProgressMapProps) {
             <div className="px-4 pb-2">
               <ReadonlyEditor
                 variant="modal"
-                hasMinimap={false}
                 roadmap={roadmap!}
                 className="min-h-[400px]"
                 onRendered={() => {

src/data/guides/frontend-developer-skills.md

@@ -0,0 +1,261 @@
+---
+title: '12 In-Demand Front End Developer Skills to Master'
+description: 'Master these 12 in-demand front end developer skills and become a standout candidate in the web development field.'
+authorId: fernando
+excludedBySlug: '/frontend/developer-skills'
+seo:
+  title: '12 In-Demand Front End Developer Skills to Master'
+  description: 'Master these 12 in-demand front end developer skills and become a standout candidate in the web development field.'
+  ogImageUrl: 'https://assets.roadmap.sh/guest/frontend-developer-skills-zdpyd.jpg'
+isNew: true
+type: 'textual'
+date: 2024-07-04
+sitemap:
+  priority: 0.7
+  changefreq: 'weekly'
+tags:
+  - 'guide'
+  - 'textual-guide'
+  - 'guide-sitemap'
+---
+
+![12 In-Demand Front End Developer Skills to Master](https://assets.roadmap.sh/guest/frontend-developer-skills-zdpyd.jpg)
+
+Front end development is probably one of the most dynamic fields in our industry, it’s constantly forcing developers to stay up-to-date with the latest trends and technologies. Either by learning about new frameworks or libraries, or simply by making them choose between their current stack and the hot new framework released every other month.
+
+While working as a front end developer can be headache-inducing sometimes, it’s also a great field for those who love to constantly learn new technologies. Given how active and dynamic the frontend community is.
+
+In this article, we’ll try to help guide you through the constantly growing front end ecosystem and we’re going to cover 12 essential front end development skills that every front end dev should master to remain competitive and effective in their role.
+
+## Understanding Front End Development
+
+But before we move forward, let’s first understand what front end development is.
+
+Front end development involves creating the parts of a website or application that users interact with directly. This includes designing layouts, implementing visual elements, and ensuring a seamless user experience by coding the interactions through the use of three basic technologies: HTML, CSS, and JavaScript.
+
+Unlike backend development, which deals with server-side logic, front end development focuses exclusively on client-side logic.
+
+With that said, HTML, CSS, and JavaScript aren’t the only three front end developer skills you should be focusing on, in fact, there are many others that are just as important, so let’s take a quick look at them.
+
+## 1. HTML/CSS/JavaScript
+
+![html css and javascript layers](https://assets.roadmap.sh/guest/html-css-javascript-layers-7agjb.png)
+
+HTML, CSS, and JavaScript are the foundational technologies for front end development. Mind you, they’re not the only skills that matter, but they’re definitely the three skills you should focus on first.
+
+### HTML (HyperText Markup Language):
+
+- **Role**: HTML is the backbone of any web page, providing the basic structure and content. It defines elements like headings, paragraphs, links, images, and other multimedia.
+- **Key Features**: Semantic HTML5 elements (like `<header>`, `<footer>`, `<article>`, and `<section>`) improve accessibility and SEO. Proper use of these elements makes the content more understandable for both users, search engines and even accessibility devices (like screen readers).
+
+### CSS (Cascading Style Sheets):
+
+- **Role**: CSS is responsible for the visual presentation of the web page. It controls the layout, colors, fonts, and overall style. While HTML lays out the foundational work for the page, CSS is a big component in making it look “good” for the users.
+- **Key Features**: CSS3 introduces features like Flexbox, Grid Layout, animations, and transitions, which enable complex designs with less code. While trying to build responsive designs (which everyone should be doing by now), media queries, flexbox and grid are your friends, making web pages look good on all devices.                                                                                            
+### JavaScript:
+
+- **Role**: JavaScript adds interactivity and dynamic behavior to web pages. It enables features like form validation, content updates without page reloads, and interactive elements like sliders and carousels. In other words, while CSS makes it look “good”, JavaScript makes it interactive and reactive to the user’s actions.
+- **Key Features**: Modern JavaScript (ES6+) introduces features like arrow functions, template literals, destructuring, modules, and promises. These features make the code more concise and readable. Whether you’re an old developer looking to become a front end developer, or a new one just getting started, adopting these features is key to your success as a JavaScript developer.
+
+Mastering these three key front end developer skills is not just about knowing the syntax but also understanding how to use these technologies together to create responsive, interactive, and accessible web pages. 
+
+## 2. Accessibility
+
+Accessibility ensures that websites are usable by people with various disabilities (from being sight-challenged to having other types of mobility-related disabilities).
+
+In the end, the web should be accessible to everyone, and knowing and understanding about accessibility allows you to make your web-based products something that everyone can use.
+
+This practice includes practices that range from implementing proper HTML tags, ARIA roles, all the way up to proper keyboard navigations. Accessible websites are not only compliant with legal standards but also offer a better user experience for a broader audience. Tools like screen readers and voice recognition software rely on well-structured, accessible content to function correctly.
+
+You can read more about Accessibility in the web space by [listening to this interview I did](https://www.youtube.com/watch?v=chEEnz0MJ10) with an accessibility expert.
+
+## 3. Version Control
+
+![git flow](https://assets.roadmap.sh/guest/gitflow-example-j1iu3.png)
+
+Version control is an essential skill for any front end developer, as it allows you to manage and track changes to your codebase efficiently. It provides a structured way to collaborate with other developers, maintain a history of changes, and ensure the integrity of your code. Here’s a more detailed look at why this skill is crucial and how to use it effectively:
+
+- **Collaboration**: When working on a project with a team, version control systems (VCS) enable multiple developers to work on the same codebase without conflicts. Each developer can create their own branches, make changes, and then merge their work into the main codebase.
+- **History and Documentation**: These systems maintain a history of all changes made to the code. This is invaluable for tracking when and why changes were made, which helps in debugging and understanding the evolution of the project.
+- **Backup and Recovery**: Version control acts as a backup system. If something goes wrong with the current code, developers can revert to previous versions without losing their work. This is a massive benefit for teams and honestly, for solo developers as well.
+
+### Popular Version Control Systems
+
+While the de-facto standard is Git, it’s also interesting to learn that Git is not the only VCS option out there (even though it’s the recommended option):
+
+- **Git**: The most widely used version control system. Git is a distributed VCS, meaning every developer has a complete copy of the repository. This allows for offline work and provides redundancy.
+- **Subversion (SVN)**: A centralized VCS where the repository is stored on a server, and developers check out the latest version to work on. This option is slowly fading out, and is mostly in use only by teams that inherit it as a company-wide standard.
+
+### Best Practices
+
+Regardless of the solution you use for this, try to keep in mind these best practices that will make your life (and your teammate’s life) a lot easier:
+
+- **Frequent Commits**: Make small, frequent commits with clear, descriptive messages. This makes it easier to track changes and debug issues.
+- **Branching Strategy**: Use a branching strategy that fits your workflow. Common strategies include [Git Flow](https://www.atlassian.com/git/tutorials/comparing-workflows/gitflow-workflow) and [GitHub Flow](https://docs.github.com/en/get-started/using-github/github-flow).
+- **Code Reviews**: Use pull requests to facilitate code reviews. This helps maintain code quality and fosters collaboration.
+
+## 4. Responsive Web Design
+
+![responsive design example](https://assets.roadmap.sh/guest/responsive-design-example-6j7wq.png)
+
+Responsive web design ensures that a website looks and functions well on different devices and screen sizes.  With the increasing use of mobile devices, responsive design is key for providing a consistent user experience across desktops, tablets, and smartphones.
+
+From the implementation side, one of the key elements to achieve responsive web design, are media queries. Through the use of media queries, developers can test for multiple screens and viewport sizes and style different sections of the page accordingly.
+
+That said, if media queries sound too complex or just not flexible enough (given that testing for every screen size can be too much nowadays), the alternative is to create a “flexible grid”, in other words, a layout that by definition, can adapt to the current screen size automatically.
+
+The main responsive design techniques to use for these flexible grids are: [multi-column layouts, flexbox](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout) and [grid](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Grids). Either way, whatever you decide to go with, they will all provide you with a flexible layout right off the bat.
+
+## 5. Basics of UX
+
+As a front end developer, you are not strictly in charge of designing and defining the user experience standards, however, in some team compositions (especially when they work for smaller companies), the front end developers are also in charge of defining aspects of the user experience.
+
+Understanding the basics of user experience (UX) design helps developers create websites that are not only functional but also intuitive and enjoyable to use. This includes, in theory,  knowledge of design principles, user research, and usability testing. However,  front end developers, given their partial contact and responsibility over the UX, don’t usually go deep into UX, but rather, take a more practical approach, learning from experts or from their own past experience.
+
+A solid grasp of UX principles allows developers to build interfaces that meet users' needs and expectations, leading to higher satisfaction and engagement.
+
+- **Enhanced User Satisfaction**: Good UX design leads to higher user satisfaction by making interfaces intuitive and enjoyable to use. Users are more likely to return to and recommend a product that provides a positive experience.
+- **Improved Engagement and Retention**: A well-designed UX keeps users engaged and encourages them to spend more time on a site or app. This can lead to higher retention rates and better overall performance metrics.
+- **Competitive Advantage**: In a crowded market, products with superior UX stand out. Investing in UX design can provide a competitive edge by attracting and retaining more users compared to products with poor UX.
+- **Alignment with Business Goals**: Good UX design aligns with business objectives by enhancing user satisfaction, which can lead to increased conversions, sales, and customer loyalty. It ensures that the product meets both user needs and business goals effectively.
+
+## 6. Basics of SEO
+
+![SERP results](https://assets.roadmap.sh/guest/serp-results-rny9a.jpg)
+
+Search Engine Optimization (SEO) is essential for ensuring that a website is discoverable by search engines. This involves optimizing the site's content, structure, and performance to rank higher in search engine results.
+
+Key aspects of SEO include using relevant keywords, creating high-quality content, optimizing meta tags, and ensuring fast load times. Effective SEO practices can significantly increase organic traffic to a website.
+
+With that said, why should this be of interest to a front end developer? Shouldn’t there be an SEO expert taking care of all of this?
+
+The answer to that question is “yes, there should be”, however, as a front end developer, you do benefit from having some basic understanding of how SEO works:
+
+- **Increased visibility and traffic**: Good SEO practices improve a website’s ranking on search engine results pages (SERPs). As a front end developer you have control over how the page is rendered, including how fast it does it and the information that is provided to search engines In other words, you have full control over the traffic and visibility of the project you’re working on.
+- **Career advancement**: As businesses increasingly recognize the importance of online presence, the demand for developers with SEO expertise is growing. Front End developers who can implement SEO best practices are more valuable to employers and clients, leading to better - job opportunities and career growth.
+- **Improved code quality**: SEO-friendly code is usually cleaner, more organized, and easier to maintain (there are no guarantees though). By adhering to SEO best practices, front end developers tend to produce code that is well-structured and follows industry standards, leading to fewer bugs and more scalable projects.
+			
+## 7. RESTful APIs
+
+![RESTful API](https://assets.roadmap.sh/guest/restfulapi-from-frontend-dev-8msjn.png)
+
+RESTful APIs are a key piece of technology for front end developers to master. Mind you, not from the POV of creating them, but rather, understanding how to use and interact with them.
+
+These APIs are used to connect the front end of a web application to its backend services. Understanding how to work with APIs, including making HTTP requests and handling responses, is essential for integrating dynamic data into your web applications (i.e. data from your database, data from a third party API, etc).
+
+Familiarity with REST principles and tools like [Postman](https://postman.com) can help developers efficiently test and debug API integrations. As a front end developer, by understanding how RESTful APIs work, you gain the following “superpowers”:
+
+- **Dynamic Content**: RESTful APIs allow front end applications to request and receive data from servers dynamically. This enables the development of interactive and responsive applications that can update content without requiring a full page reload.
+- **Separation of Concerns**: By using RESTful APIs, front end developers can separate the user interface from the backend logic (dumping the responsibility of creating the backend logic on backend developers). This division allows each part of the application to be developed, tested, and maintained independently, leading to cleaner and more manageable codebases.
+- **Scalability and Flexibility**: RESTful APIs provide a standardized way to interact with backend services. This standardization makes it easier to scale applications and integrate with various third-party services. Front End developers can easily connect to different data sources and services as needed.
+- **Improved Collaboration**: Working with RESTful APIs improves collaboration between front end and backend teams. Clear API documentation and standardized endpoints enable teams to work in parallel without dependencies, speeding up the development process.
+
+## 8. Testing and Debugging
+
+![breakpoint debugging](https://assets.roadmap.sh/guest/breakpoint-debugging-izun3.jpg)
+
+Testing and debugging are crucial for ensuring that your code is functional and free of errors. While this applies to both front end and backend development alike, we tend to oversimplify the complexity of the front end logic (in our minds) and, usually, we try to avoid writing tests for it.
+
+However, there is a reason why so many testing frameworks exist for the front end: because front end logic is just as complex and requires just as much care and attention as backend logic.
+
+Now, keep in mind that familiarity with testing frameworks like Jest and debugging tools in modern browser DevTools will help you maintain high-quality code standards. However, keep in mind these are not magical tools, and they will not automatically make your code better, you still have to put in the effort.
+
+Unit testing, integration testing, and end-to-end testing are all important practices to ensure that different parts of the application work correctly both individually and together.
+
+As front end developers, you’ll want to focus on debugging and testing to ensure:
+
+- **Improved Code Quality**: Regular testing helps identify and fix bugs early in the development process, resulting in cleaner and more reliable code. This, as you’ve probably guessed by now, reduces the likelihood of errors in production, ensuring a smoother user experience. 
+- **Increased Developer Efficiency**: By using debugging tools and techniques, developers can quickly pinpoint and resolve issues, ideally,  saving time and effort.
+- **Easier Maintenance**: Well-tested code is easier to maintain and extend, period. Test suites act as a safety net around your code, and as new features are added, existing functionality remains stable (and safe), reducing the risk of introducing new bugs. This makes it easier to scale applications over time.
+
+## 9. Browser DevTools
+
+![chrome devtools](https://assets.roadmap.sh/guest/chrome-dev-tools-ef41z.jpg)
+
+Browser DevTools are essential for inspecting, debugging, and profiling your web applications. Directly built-in to browsers such as Chrome, Firefox and Safari, these tools provide a suite of features for diagnosing and fixing issues in your code. Developers can use these tools to inspect HTML elements, modify CSS styles in real-time, monitor network requests, and analyze performance bottlenecks.
+
+If you’re still wondering why a front end developer should focus on browser DevTools, these are the main reasons:
+
+- **Immediate Feedback**: Browser DevTools allow developers to inspect and modify HTML, CSS, and JavaScript in real 
+time. This immediate feedback is crucial for quickly diagnosing and fixing issues without the need to reload the page.
+- **Enhanced Debugging Capabilities**: DevTools provide powerful debugging features, such as setting breakpoints, stepping through code, and inspecting variables. These capabilities make it easier to identify and resolve bugs in complex applications.
+- **Performance Optimization**: Performance tabs in DevTools enable developers to analyze the loading and runtime performance of their applications. Tools like the Lighthouse audit and the Network panel help identify bottlenecks and optimize resource loading, leading to faster and more efficient web applications.
+- **Responsive Design Testing**: DevTools offer features for testing responsive designs across different screen sizes and devices. The device toolbar allows developers to simulate various mobile and tablet environments, ensuring that applications provide a consistent experience across all platforms.
+- **Detailed Network Analysis**: The Network panel provides insights into all network requests made by the application, including fetches, XHRs, and resource loading. This information is crucial for debugging network issues, understanding load times, and optimizing the overall performance of the application.
+- **CSS and Style Debugging**: The Elements panel allows developers to inspect and manipulate the DOM and CSS. It provides tools to edit styles, view CSS rules, and understand the computed styles for any element, making it easier to fine-tune the visual aspects of an application.
+
+## 10. At Least One Framework (React, Vue, Angular)
+
+![react, angular & vue logos](https://assets.roadmap.sh/guest/react-angular-vue-logos-se584.png)
+
+While in theory, all you need to be a front end developer is JavaScript + HTML + CSS, in practice, there are tools available (i.e. frameworks and libraries) that will help you speed up your dev process and produce much cleaner and maintainable code than what you would normally produce on your own.
+
+And in fact, those tools will also let you focus on the actual application you’re building, leaving the extra, presentation-related logic to the framework.
+
+We are, of course, talking about modern front end frameworks (or libraries) such as React, Vue, or Angular.
+
+Of course, there are other options out there, such as Svelte, Solid, or even just the native Web Components that all major browsers support nowadays. However, while those are very valid options, the main 3 still remain the most used options and if you’re looking to become a front end developer, you’ll want to first focus on one of them.
+
+Each framework has its own strengths and use cases, so understanding their core concepts and ecosystems can significantly enhance a developer's productivity. 
+
+Now the question remains: which one is the right one for you? That’s entirely up to you to decide, but here are some of the highlights of each framework:
+
+### Highlights about React
+
+- **Component-Based Architecture**: React's component-based structure promotes reusability and maintainability. Components encapsulate logic, styles, and behavior, making the code more modular and easier to manage.
+- **Virtual DOM**: React’s use of a virtual DOM improves performance by minimizing direct manipulations of the real DOM. This approach results in faster updates and a smoother user experience.
+- **Large Ecosystem and Community**: React has a huge ecosystem of libraries, tools, and a strong community. This support makes it easier to find solutions, share knowledge, and access a wide range of third-party integrations.
+- **Flexibility**: Contrary to popular belief, React is not a full-fledged framework but a library, providing flexibility in choosing additional tools and libraries for routing, state management, and other functionalities.
+
+### Highlights about Angular
+
+- **Full-Featured Framework**: Angular provides a complete solution with built-in tools for routing, state management, form handling, and HTTP requests. This reduces the need for third-party libraries and offers a cohesive development experience.
+- **Two-Way Data Binding**: Angular’s two-way data binding simplifies the synchronization between the model and the view, reducing the amount of boilerplate code needed for updates.
+- **Comprehensive Documentation and Community Support**: Angular has extensive documentation and a supportive community, making it easier to find resources and get help.
+
+### Highlights about Vue
+
+- **Progressive Framework**: Vue is designed to be incrementally adoptable. Developers can start with a small part of the application and progressively integrate Vue’s features as needed.
+- **Simplicity and Ease of Learning**: Vue’s syntax and design are straightforward, making it easier for new developers to learn and start building applications quickly.
+- **Flexibility**: Vue allows for extensive customization and can be integrated with other projects or libraries. It offers both a simple core library and advanced features for larger applications.
+
+## 11. Web Performance
+
+Web performance is a key aspect of front end development because it affects many areas around the product. And not only on the technical side, but also from the business side as well, considering how performance affects the way users experience and interact with your app.
+
+In simple terms, optimizing web performance involves making your website load faster and run more efficiently. In the space of front end development, performance optimization techniques include minimizing HTTP requests, optimizing images (as in reducing their size without losing quality), using lazy loading (async loading of portions of your app or specific components), and leveraging browser caching.
+
+### Why should you care about web performance as a front end developer?
+
+As a front end developer, the performance of your user interface is your responsibility, however, here are other reasons in case that’s not enough:
+
+- **User Experience**: As already mentioned, fast-loading websites provide a better user experience. Users are more likely to stay on a site and interact with it if pages load quickly and smoothly.
+- **SEO Benefits**: Another way to focus on SEO as a front end developer, is to focus on the performance of your app. Search engines like Google consider page speed as a ranking factor. Faster websites are more likely to rank higher in search results, driving more organic traffic.
+- **Conversion Rates**: [Studies show](https://www.speedsense.com/insights/web-performance-impact-ecommerce-revenue) that even a small delay in page load time can significantly reduce conversion rates. Improving performance can directly impact the bottom line by increasing sales and sign-ups.
+- **Mobile Performance**: With the increasing use of mobile devices, optimizing performance for mobile users is essential. Mobile networks can be slower in some parts of the world, making performance optimizations even more critical.
+
+## 12. TypeScript
+
+![typescript logo](https://assets.roadmap.sh/guest/image3-y7ryl.png)
+
+TypeScript is a superset of JavaScript that adds static typing (amongst other things). It helps catch errors early during development and helps to make your code more maintainable.
+
+As a front end developer, learning TypeScript can enhance your JavaScript skills and improve the quality of your code by giving you both types and higher-level OOP constructs (such as interfaces) to add more structure to your written logic.
+
+By providing these extra tools, TypeScript enables developers to write more predictable and robust code.
+
+Is your code going to be automatically better because of this? No, it’s not. You will still have to pay attention to what you’re writing and building, and you will still have to apply many of the concepts mentioned throughout this article.
+
+### Getting started with TypeScript
+
+- **Official Documentation**: The TypeScript Handbook is an excellent resource for learning the basics and advanced features of TypeScript.
+- **Check out the TypeScript Roadmap**: If you’re wondering what steps to take on your way to learning TypeScript, take a look at the TypeScript Roadmap to learn exactly what you need.
+- **Community Resources**: The TypeScript community is active and supportive. Joining forums, participating in discussions on platforms like Stack Overflow, and following TypeScript-related blogs can provide valuable insights and help.
+
+## Conclusion
+
+Understanding the importance and relevance of these 12 essential front end developer skills can equip front end developers with the tools and knowledge needed to create high-quality, performant, and accessible web applications.
+
+That said, this is only a high-level overview of these skills, if you want to know more about how to tackle each of every one of these skills, check out this front end roadmap.
+
+In the end, staying updated with these core skills ensures developers can effectively tackle new challenges while remaining competitive in the industry.

src/data/guides/full-stack-developer-skills.md

@@ -0,0 +1,264 @@
+---
+title: '8 In-Demand Full Stack Developer Skills to Master'
+description: 'Master these 8 in-demand full stack developer skills and become a standout candidate for your next job application.'
+authorId: fernando
+excludedBySlug: '/full-stack/developer-skills'
+seo:
+  title: '8 In-Demand Full Stack Developer Skills to Master'
+  description: 'Master these 8 in-demand full stack developer skills and become a standout candidate for your next job application.'
+  ogImageUrl: 'https://assets.roadmap.sh/guest/full-stack-developer-skills-abb38.jpg'
+isNew: true
+type: 'textual'
+date: 2024-07-05
+sitemap:
+  priority: 0.7
+  changefreq: 'weekly'
+tags:
+  - 'guide'
+  - 'textual-guide'
+  - 'guide-sitemap'
+---
+
+![image](https://assets.roadmap.sh/guest/full-stack-developer-skills-abb38.jpg)
+
+It should be no surprise to anyone that given the fast pace of the web development industry, every type of developer, especially full stack developers, must stay ahead of the curve by continuously updating their skills.
+
+Full-stack web developers share a unique blend of expertise that allows them to independently build and maintain entire web applications. However, this mix of skills is a double-edged sword because it makes staying up-to-date harder for them.
+In this article, we will explore the 8 essential full stack developer skills that you need to master and thrive in your career.
+
+Remember that you have more details about the different technologies and topics to cover in our [full stack developer roadmap](https://roadmap.sh/full-stack).
+
+## Understanding full-stack development
+
+Full stack development involves both frontend and backend work. It means you're not just limited to designing the parts of a website or application that users interact with (frontend), but also managing the server, database, and application logic that power those interactions (backend).
+
+Plus, full-stack developers need to be proficient in working with both relational and non-relational databases, setting up and maintaining infrastructure, and ensuring that their applications are scalable and secure. In other words, if they need to, full-stack developers can be the equivalent of a one-man army. Is this an ideal situation? No, it isn’t. In fact, a better way to look at a full stack developer is to think of them as a wildcard that can be placed in any team, and they’ll consistently add value to it, with minimum ramp-up time needed.
+
+With that foundation in mind, let's dive into the specific skills you need to master.
+
+## 1. Basic understanding of HTTP
+
+![basic understand of HTTP](https://assets.roadmap.sh/guest/understanding-http-pct23.png)
+
+Let’s start with the basics: understanding HTTP. HTTP, or HyperText Transfer Protocol, is the foundation of any interaction on the web. It’s what allows clients (like your web browser) and servers to communicate with each other. As a full-stack developer, having a solid grasp of HTTP is crucial for building, debugging, and maintaining web applications. It’s your bread and butter, and you’ll need to internalize it if you hope to become great at your job.
+
+### Why HTTP Matters for Full Stack Developers?
+Without HTTP, the internet as we know it wouldn’t function, it’s that simple. For a full-stack developer, understanding HTTP means you can effectively manage how your frontend communicates with your backend.
+
+### Key Concepts to understand in HTTP
+
+- **HTTP Methods**: These are the actions that can be performed on a resource. The most common methods are GET (to retrieve data), POST (to send data to the server), PUT (to update data), and DELETE (to remove data). Each method has a specific purpose and knowing when to use each one is essential for building efficient APIs. You can read the [full list of verbs here](https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods).
+- **Status Codes**: HTTP status codes are responses from the server to the client's request. They indicate whether the request was successful, if there was an error, or if further action is needed. Common status codes include 200 (OK), 404 (Not Found), 500 (Internal Server Error), and 403 (Forbidden). Understanding these codes helps in debugging and improving user experience. Here’s the [full list of status codes](https://developer.mozilla.org/en-US/docs/Web/HTTP/Status) in case you’re wondering.
+- **Headers**: HTTP headers are key-value pairs sent between the client and server. They carry essential information like content type, authorization information (in some cases even credentials), and cache control. Familiarity with headers allows you to manage security, content negotiation, and request-response flow more effectively. While you can create your own, here’s a list of the [standard set of HTTP headers](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers).
+
+## 2. HTML/CSS/JavaScript
+
+![html, css & javascript](https://assets.roadmap.sh/guest/html-css-javascript-layers-7agjb.png)
+
+For full-stack developers, a solid grasp of HTML, CSS, and JavaScript is essential. These technologies are the building blocks of the visual side of the web, enabling you to create an engaging and functional user interface. While you'll need many other coding skills, mastering these three should be your first priority.
+
+### HTML (HyperText Markup Language)
+
+HTML forms the backbone of any web page, providing structure and content. It defines elements like headings, paragraphs, links, images, and multimedia components.
+
+**Key Features**:
+
+- **Semantic Elements**: Elements like `<header>`, `<footer>`, `<article>`, and `<section>` enhance accessibility and SEO. Properly using these elements makes your content more understandable for users, search engines, and accessibility devices like screen readers.
+- **Foundational**: Understanding HTML is crucial for laying the foundation of any web application, making it an essential skill for full stack developers.
+
+### CSS (Cascading Style Sheets)
+
+CSS is responsible for the visual presentation of a web page. It controls layout, colors, fonts, and overall style, making your web pages visually appealing.
+
+**Key Features**:
+
+- **Rich visual elements**: Features like Flexbox, Grid Layout, animations, and transitions allow you to create complex designs with minimal code.
+- **Responsive Design**: Media queries, Flexbox, and Grid are vital for creating web pages that look great on all devices, from desktops to smartphones.
+
+### JavaScript
+
+JavaScript adds interactivity and dynamic behavior to web pages. In other words, it makes the webpage come to life.
+
+**Key Features**:
+
+- **Modern JavaScript**: Features like arrow functions, template literals, destructuring, modules, and promises make your code more concise and readable.
+- **Interactive Elements**: JavaScript makes your web pages interactive, responding to user actions in real time.
+
+## 3. Writing Modern JavaScript
+
+![modern javascript](https://assets.roadmap.sh/guest/modern-javascript-js84y.jpg)
+
+Modern JavaScript is a key element for full stack development, bringing not just new syntax but powerful tools that make development more efficient and scalable. Mastering this involves understanding how to stay up-to-date with the latest developments in the JS-world, and it also involves technologies such as: npm, build-tools, and bundlers that streamline the development process.
+
+### What is “modern JavaScript”?
+
+The term “Modern JavaScript” can be a bit ambiguous, considering how every new feature or syntax update will directly affect your experience as a developer.
+Some of those “key modern features” are:
+
+- **Arrow Functions**: Offer a shorthand for writing functions and lexical scoping of the this keyword.
+- **Template Literals**: Provide an easier way to create strings with embedded expressions.
+- **Destructuring**: Simplifies the extraction of values from arrays or properties from objects.
+- **Modules**: Enable better code organization and reuse.
+- **Promises and Async/Await**: Facilitate asynchronous programming by providing cleaner and more intuitive ways to handle async operations.
+
+### npm (Node Package Manager)
+
+For those who don’t yet know, [npm](https://www.npmjs.com/) is a critical tool for managing JavaScript libraries and dependencies. It allows you to easily install, update, and manage packages, ensuring your projects stay up-to-date with the latest versions and features.
+
+### Build Tools and Bundlers
+
+Build tools and bundlers to automate many repetitive tasks, optimize performance, and ensure code is production-ready. Let’s take a look at some key tools:
+
+- **Webpack**: [Webpack](https://webpack.js.org/) is a robust module bundler that processes and bundles JavaScript files along with assets like images and stylesheets. It has an ecosystem of plugins and loaders, making it highly configurable and suitable for complex applications. 
+- **Parcel 2**: [Parcel](https://parceljs.org/) simplifies the bundling process with zero configuration out of the box. It automatically handles code splitting hot module replacement and supports a variety of file types.
+- **Vite**: [Vite](https://vitejs.dev/) is designed for speed, leveraging native ES modules to deliver lightning-fast development builds and optimized production builds using Rollup. It’s particularly ideal for modern frameworks like Vue, React, and Svelte. Vite’s configuration is straightforward, and it supports an extensive plugin system for additional functionality.
+
+## 4. At least One Frontend Framework (React, Vue, Angular)
+
+![react, angular & vue](https://assets.roadmap.sh/guest/react-angular-vue-logos-se584.png)
+
+Although HTML, CSS, and JavaScript form the core of front-end development, there are many frameworks and libraries that can significantly enhance your development workflow. Among the most popular front-end frameworks and libraries are React, Vue, and Angular.
+
+Mind you, there are quite a lot of other options out there. However, React, Vue, and Angular remain the primary choices for most developers due to their widespread use and strong community support. 
+
+### React
+
+Developed by Facebook, React is a powerful JavaScript library for building user interfaces, especially for single-page applications.
+
+- **Component-Based Architecture**: React’s structure is built around components that encapsulate their own logic, styles, and behaviors. This modular approach promotes reusability and maintainability, making it easier to manage complex applications.
+- **Virtual DOM**: React uses a virtual DOM to optimize performance. This technique reduces the need for direct DOM manipulation, which translates into faster updates and a smoother user experience.
+- **Large Ecosystem and Community**: With a large ecosystem of libraries and tools, plus a strong community, React provides lots of resources for problem-solving and third-party integrations.
+
+### Angular
+
+Developed and maintained by Google, Angular is a full framework for building dynamic web applications
+
+- **Full-Featured Framework**: Angular offers a “complete” solution with built-in support for routing, state management, form handling, and HTTP requests. This approach minimizes the need for additional third-party libraries.
+- **Two-Way Data Binding**: Angular’s two-way data binding simplifies the synchronization between the model and the view (the data and its representation), making updates more efficient.
+- **Extensive Documentation and Community Support**: Angular has excellent documentation and a very active community, providing a wealth of resources for learning and troubleshooting.
+
+### Vue
+
+Vue.js, created by Evan You after working for Google, is known for its progressive framework design, making it easy to integrate into projects incrementally.
+
+- **Progressive Framework**: Vue is designed to be incrementally adoptable, allowing developers to start with a small part of their application and gradually integrate more features as needed.
+- **Simplicity and Ease of Learning**: Vue’s straightforward syntax and design make it easier for new developers to learn and start building applications quickly.
+- **Flexibility**: Vue offers extensive customization options and can be easily integrated with other projects or libraries. It combines a simple core library with advanced features suitable for larger applications.
+
+Each of these frameworks has its own set of strengths and use cases. The right choice depends on your specific project requirements and personal preference.
+
+## 5. Backend Programming Language
+
+![backend programming languages](https://assets.roadmap.sh/guest/ruby-python-javascript-java-code-h3wyj.jpg)
+
+Choosing the right backend programming language is crucial for building robust and efficient server-side applications. Here are some of the most popular languages used in backend development, each with its own unique features and benefits. You can read this detailed guide for more options and a complete description of each one: [The best backend languages to master](https://roadmap.sh/backend/languages).
+
+**JavaScript (Node.js)**: JavaScript, primarily known for front-end development, extends to the backend through Node.js. Node.js allows for server-side scripting, enabling full stack developers to use the same language for both client-side and server-side development. When it comes to picking a single language for full stack development, JavaScript definitely takes the lead.
+
+**Python**: Python is well known for its simplicity and readability, making it a favorite among developers. Its vast ecosystem of libraries and frameworks, such as Django and Flask, streamlines backend development and makes full stack web development very straightforward. Python's versatility and ease of use make it suitable for both beginners and experienced developers.
+
+**Java**: Java is a highly popular, class-based, object-oriented programming language that’s designed to have as few implementation dependencies as possible. Java is commonly used in large-scale enterprise applications. Frameworks like Spring and Hibernate further enhance its capabilities.
+
+**Ruby**: Ruby is known for its elegant syntax that is natural to read and easy to write. Ruby on Rails, a powerful web application framework, simplifies the process of building web applications by providing default structures for a database, a web service, and web pages. Its convention-over-configuration approach makes development faster and easier.
+
+There are many more options, and as a full stack developer, you’ll need to understand the type of technologies you feel more comfortable with, before choosing the language for your backend.
+
+## 6. Consuming and Creating RESTful APIs
+
+![restful apis](https://assets.roadmap.sh/guest/restful-apis-q1gvl.png)
+
+For full stack developers, working with RESTful APIs is a fundamental skill that bridges the front-end and back-end of web applications. APIs (Application Programming Interfaces) allow different software systems to communicate with each other, enabling your front-end to interact seamlessly with server-side logic and data.
+
+### Consuming RESTful APIs
+
+Consuming APIs involves making HTTP requests from your front-end application to retrieve or send data to the server. Here are the key concepts:
+
+- **HTTP Methods**: Understanding the different HTTP methods is crucial. We’ve already mentioned them above when describing HTTP itself, so make sure to check out the links listed there for more details.
+- **Endpoints and Routes**: An API endpoint is a specific path where your API can be accessed by a client. Each endpoint corresponds to a route in your back-end server, handling specific requests. In the case of RESTful APIs, these routes refer to resources in your system.
+- **Request and Response**: When consuming an API, the front-end sends a request to the server and receives a response. The request typically includes headers (metadata about the request) and a body (data sent to the server), while the response contains the status code, headers, and data.
+- **Fetching Data**: In JavaScript, you can use the native fetch API or libraries like Axios to make HTTP requests.
+
+### Creating RESTful APIs
+
+Creating APIs involves setting up server-side routes and handling requests. Here’s how to get started:
+
+- **Define Routes**: In your back-end framework (like Express for Node.js or Django for Python), define routes that correspond to different endpoints. Each route should handle a specific HTTP method.
+- **Handle Requests and Responses**: For each route, write logic to handle incoming requests and send appropriate responses. Use status codes to indicate the outcome of the request (e.g., 200 for success, 404 for not found, 500 for server errors).
+- **Middleware**: Middleware functions in frameworks like Express can process requests before they reach the endpoint handlers. They’re useful for tasks like authentication, logging, and data validation.
+- **Database Integration**: Often, your API will interact with a database. Use an ORM (Object-Relational Mapping) tool like Sequelize for SQL databases or Mongoose for MongoDB to manage database operations.
+- **REST Principles**: Ensure your API follows REST principles, such as statelessness (each request is independent), resource-based URLs (use nouns for endpoints), and appropriate use of HTTP methods. You can [read here](https://ics.uci.edu/~fielding/pubs/dissertation/rest_arch_style.htm) the full details about REST from the paper that defined the concept.
+
+## 7. Databases
+
+![relational databases](https://assets.roadmap.sh/guest/relational-cb-vs-non-relational-db-9r4m5.png)
+
+Understanding both relational and non-relational databases is crucial for managing and storing data effectively in your applications. Each type of database has its own strengths and use cases, and knowing when to use each is essential for building robust and scalable applications.
+
+### Relational Databases
+
+Relational databases store data in structured tables with predefined schemas. They use SQL (Structured Query Language) for querying and managing data. Here are some key relational databases:
+
+- **MySQL**: MySQL is one of the most popular open-source relational databases. It's known for its ease of use (a common choice for new developers) and performance.
+- **PostgreSQL**: PostgreSQL is a powerful, open-source relational database system known for its advanced features and compliance with SQL standards. It supports complex queries, transactions, and extensibility, making it suitable for a wide range of applications.
+- **SQLite**: SQLite is a lightweight, disk-based database that's easy to set up and use. It's often used in embedded systems and applications that require a simple, self-contained database engine. You’re not going to see big systems using SQLite for its main database, but it’s very common in small projects.
+
+### Non-Relational Databases
+
+Non-relational databases, also known as NoSQL databases, store data in various formats such as documents, key-value pairs, graphs, or wide-column stores. They are designed to handle large volumes of unstructured or semi-structured data. Here are some popular non-relational databases:
+
+- **MongoDB**: MongoDB is a document-oriented database that stores data in JSON-like documents. It’s highly flexible and scalable, making it ideal for applications that require quick iterations and schema flexibility.
+- **Redis**: Redis is an in-memory key-value store known for its high performance and speed. It’s commonly used for caching, real-time analytics, and as a message broker.
+- **Cassandra**: Cassandra is a distributed, wide-column store designed for handling large amounts of data across many commodity servers without any single point of failure. It's highly scalable and suitable for applications that require high availability and performance.
+
+In the end, like with many other technologies, there is not one single option that’s better than the others. It’s more about your particular needs and the features of each database. When having to decide on a specific database option, try to understand their capabilities and try to match them to your particular context.
+
+## 8. Hosting and Infrastructure
+
+![deployment insfrastructure](https://assets.roadmap.sh/guest/deployment-infrastructures-jrvr9.png)
+
+For full stack developers, understanding hosting and infrastructure is essential for deploying and managing their web applications. This involves knowing where to host your applications, how to set up servers, and how to ensure your application runs smoothly and efficiently. Here’s a breakdown of key concepts and services in this area:
+
+### Cloud Hosting Providers
+
+Cloud hosting providers offer scalable and flexible solutions for hosting web applications. They provide various services including virtual machines, storage, databases, and more. Some of the most popular providers are:
+
+- **Amazon Web Services (AWS)**: AWS offers a comprehensive suite of cloud services, including EC2 for virtual servers, S3 for storage, and RDS for managed databases. Its scalability and range of services make it a go-to choice for many developers.
+- **Google Cloud Platform (GCP)**: GCP provides robust cloud computing services, including Compute Engine for virtual machines, Cloud Storage, and Cloud SQL for managed databases. 
+- **Microsoft Azure**: Azure offers a wide range of cloud services similar to AWS and GCP. It includes Azure Virtual Machines, Blob Storage, and Azure SQL Database. Azure integrates well with Microsoft’s other products, making it ideal for enterprise applications.
+
+### Web Hosting Services
+
+For simpler or smaller-scale projects, traditional web hosting services might be more than enough. These services typically offer easy setup and management for hosting websites and web applications:
+
+- **Heroku**: Heroku is a platform-as-a-service (PaaS) that makes it easy to deploy, manage, and scale applications. It supports several programming languages and provides a straightforward way to deploy applications directly from your code repository.
+- **Netlify**: Netlify specializes in hosting static websites and front-end applications. It provides continuous deployment from Git repositories, built-in SSL, and a global CDN, making it a popular choice for modern web development workflows.
+- **Vercel**: Vercel is optimized for Next.js. It offers seamless deployment, serverless functions, and a global CDN, ensuring fast and reliable performance for web applications.
+
+### Containers and Orchestration
+
+Containers allow developers to package applications with all their dependencies, ensuring consistency across different environments (this simplifies deployment processes by ensuring your app always gets deployed into the same system). Orchestration tools manage and scale these containers:
+
+- **Docker**: Docker is a platform that allows developers to create, deploy, and run applications in containers. Containers are lightweight and portable, making it easier to manage application dependencies and environments.
+- **Kubernetes**: Kubernetes is an open-source orchestration tool for managing containerized applications at scale. It automates deployment, scaling, and operations of application containers, providing a solid infrastructure for large-scale applications.
+
+### Serverless Architecture
+
+If you just don’t want to think about the server, at all (configuration, specs, resource requirements, etc), then you probably want a serverless architecture.
+
+Serverless architecture allows developers to build and run applications without managing server infrastructure (the servers are there, you just don’t interact directly with them). Key benefits include automatic scaling and pay-per-use billing.
+
+- **AWS Lambda**: AWS Lambda lets you run code without provisioning or managing servers. It executes code in response to events and automatically scales based on the number of requests, making it ideal for microservices and real-time data processing.
+- **Google Cloud Functions**: Google Cloud Functions is a serverless execution environment for building and connecting cloud services. It allows you to write simple, single-purpose functions that are triggered by events.
+- **Azure Functions**: Azure Functions provides a serverless compute service that enables you to run event-triggered code. It integrates with other Azure services, offering a seamless development and deployment experience.
+
+### Infrastructure as Code (IaC)
+
+IaC allows developers to manage and provision computing infrastructure through machine-readable configuration files rather than physical hardware configuration or interactive configuration tools. This is a great option if you’re looking to version your infrastructure configuration.
+
+- **Terraform**: Terraform is an IaC tool that allows you to define and provision data center infrastructure using a high-level configuration language. It supports multiple cloud providers, making it a versatile choice for managing infrastructure. While not fully open-source, Terraform offers a paid version called Terraform Cloud. If you’re looking for a fully open-source version, you can look into OpenTofu, which is an open-source fork from Terraform under the Mozilla Public License 2.0.
+- **Ansible**: Ansible is an open-source automation tool for configuration management, application deployment, and task automation. It uses YAML and doesn’t require agent software on the target nodes, making it easy to use and manage.
+
+##Conclusion 
+Keeping up-to-date with the full set of skills any full stack web developer will need for their job is not easy, given how varied their work might be. That said, the 8 full stack developer skills listed here are more than enough to get you started, and you can keep adding more as you see the need for them.
+
+Remember that if you want more details about the roadmap to become a great full stack developer, you have a great resource here: [Full stack developer roadmap](https://roadmap.sh/full-stack).

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

@@ -2,6 +2,7 @@
 jsonUrl: '/jsons/roadmaps/ai-data-scientist.json'
 pdfUrl: '/pdfs/roadmaps/ai-data-scientist.pdf'
 order: 4
+renderer: 'editor'
 briefTitle: 'AI and Data Scientist'
 briefDescription: 'Step by step guide to becoming an AI and Data Scientist in 2024'
 title: 'AI and Data Scientist Roadmap'
@@ -10,7 +11,7 @@ hasTopics: true
 isNew: false
 dimensions:
   width: 968
-  height: 2243.96
+  height: 2140
 schema:
   headline: 'AI and Data Scientist Roadmap'
   description: 'Learn how to become an AI and Data Scientist with this interactive step by step guide in 2023. We also have resources and short descriptions attached to the roadmap items so you can get everything you want to learn in one place.'

src/data/roadmaps/ai-data-scientist/content/coding@XLDWuSt4tI4gnmqMFdpmy.md

@@ -0,0 +1,3 @@
+# Coding
+
+Programming is a fundamental skill for data scientists. You need to be able to write code to manipulate data, build models, and deploy solutions. The most common programming languages used in data science are Python and R. Python is a general-purpose programming language that is easy to learn and has a large number of libraries for data manipulation and machine learning. R is a programming language and free software environment for statistical computing and graphics. It is widely used for statistical analysis and data visualization.

src/data/roadmaps/ai-data-scientist/content/deep-learning@cjvVLN0XjrKPn6o20oMmc.md

@@ -0,0 +1,3 @@
+## Deep Learning
+
+Deep learning is a subset of machine learning that deals with algorithms inspired by the structure and function of the brain called artificial neural networks. Deep learning is a key technology behind driverless cars, enabling them to recognize a stop sign, or to distinguish a pedestrian from a lamppost. It is the key to voice control in consumer devices like phones, tablets, TVs, and hands-free speakers. Deep learning is getting lots of attention lately and for good reason. It’s achieving results that were not possible before.

src/data/roadmaps/ai-data-scientist/content/econometrics@Gd2egqKZPnbPW1W2jw4j8.md

@@ -0,0 +1,3 @@
+# Econometrics
+
+Ecenometrics is the application of statistical methods to economic data. It is a branch of economics that aims to give empirical content to economic relations. More precisely, it is "the quantitative analysis of actual economic phenomena based on the concurrent development of theory and observation, related by appropriate methods of inference." Econometrics can be described as something that allows economists "to sift through mountains of data to extract simple relationships."

src/data/roadmaps/ai-data-scientist/content/exploratory-data-analysis@l1027SBZxTHKzqWw98Ee-.md

@@ -0,0 +1,3 @@
+# Exploratory Data Analysis
+
+Exploratory Data Analysis (EDA) is an approach to analyzing data sets to summarize their main characteristics, often with visual methods. EDA is used to understand what the data can tell us beyond the formal modeling or hypothesis testing task. It is a crucial step in the data analysis process.

src/data/roadmaps/ai-data-scientist/content/machine-learning@kBdt_t2SvVsY3blfubWIz.md

@@ -0,0 +1,3 @@
+# Machine Learning
+
+Machine learning is a field of artificial intelligence that uses statistical techniques to give computer systems the ability to "learn" (e.g., progressively improve performance on a specific task) from data, without being explicitly programmed. The name machine learning was coined in 1959 by Arthur Samuel. Evolved from the study of pattern recognition and computational learning theory in artificial intelligence, machine learning explores the study and construction of algorithms that can learn from and make predictions on data – such algorithms overcome following strictly static program instructions by making data-driven predictions or decisions, through building a model from sample inputs. Machine learning is employed in a range of computing tasks where designing and programming explicit algorithms with good performance is difficult or infeasible; example applications include email filtering, detection of network intruders, and computer vision.

src/data/roadmaps/ai-data-scientist/content/mathematics@aStaDENn5PhEa-cFvNzXa.md

@@ -0,0 +1,6 @@
+# Mathematics
+
+Mathematics is the foundation of AI and Data Science. It is essential to have a good understanding of mathematics to excel in these fields.
+
+- [Mathematics for Machine Learning](https://imp.i384100.net/baqMYv)
+- [Algebra and Differential Calculus](https://imp.i384100.net/LX5M7M)

src/data/roadmaps/ai-data-scientist/content/mlops@Qa85hEVe2kz62k9Pj4QCA.md

@@ -0,0 +1,3 @@
+# MLOps
+
+MLOps is a practice for collaboration and communication between data scientists and operations professionals to help manage production ML lifecycle. It is a set of best practices that aims to automate the ML lifecycle, including training, deployment, and monitoring. MLOps helps organizations to scale ML models and deliver business value faster.

src/data/roadmaps/ai-data-scientist/content/statistics@4WZL_fzJ3cZdWLLDoWN8D.md

@@ -0,0 +1,5 @@
+# Statistics
+
+Statistics is the science of collecting, analyzing, interpreting, presenting, and organizing data. It is a branch of mathematics that deals with the collection, analysis, interpretation, presentation, and organization of data. It is used in a wide range of fields, including science, engineering, medicine, and social science. Statistics is used to make informed decisions, to predict future events, and to test hypotheses. It is also used to summarize data, to describe relationships between variables, and to make inferences about populations based on samples.
+
+Learn more from the resources given on the roadmap.

src/data/roadmaps/ai-data-scientist/mapping.json

@@ -0,0 +1,19 @@
+{
+  "linear-algebra-calc-mathana": "gWMvD83hVXeTmCuHGIiOL",
+  "stats-clt": "Y9YJdARIRqqCBCy3GVYdA",
+  "hypothesis-testing": "XJXIkWVDIrPJ-bVIvX0ZO",
+  "probability-sampling": "jxJtwbiCvxHqmkWkE7zdx",
+  "ab-testing": "mJq9b50MJM9o9dLhx40iN",
+  "increasing-test-sensitivity": "v68nwX914qCwHDSwY_ZhG",
+  "ratio-metrics": "n2JFGwFxTuOviW6kHO1Uv",
+  "data-understanding": "JaN8YhMeN3whAe2TCXvw9",
+  "classic-advanced-ml": "FdBih8tlGPPy97YWq463y",
+  "deployment-models": "uPzzUpI0--7OWDfNeBIjt",
+  "fully-connected-nn": "eOFoGKveaHaBm_6ppJUtA",
+  "learn-sql": "Im0tXXn3GC-FUq2aMHgwm",
+  "learn-dsa": "StBCykpzpM4g9PRFeSNXa",
+  "learn-python": "MVrAqizgkoAs2aghN8TgV",
+  "regression-time-series-fitting-distr": "h19k9Fn5XPh3_pKEC8Ftp",
+  "econometrics-pre-req": "y6xXsc-uSAmRDnNuyhqH2",
+  "diff-calculus": "mwPJh33MEUQ4Co_LiVEOb"
+}

src/data/roadmaps/angular/content/101-rxjs-basics/104-operators/102-transformation.md

@@ -3,19 +3,20 @@
 In RxJS, "transformation" refers to the process of modifying or manipulating the data emitted by an Observable. There are a variety of methods available in RxJS that can be used to transform the data emitted by an Observable, including:
 
 - map: applies a function to each item emitted by the Observable and emits the resulting value
-- flatMap: applies a function to each item emitted by the Observable, and then flattens the resulting Observables into a single Observable
-- concatMap: applies a function to each item emitted by the Observable, and then concatenates the resulting Observables into a single Observable
 - mergeMap: applies a function to each item emitted by the Observable, and then merges the resulting Observables into a single Observable
 - switchMap: applies a function to each item emitted by the Observable, and then switches to the latest resulting Observable
+- concatMap: applies a function to each item emitted by the Observable, and then concatenates the resulting Observables into a single Observable
+- exhaustMap: applies a function to each item emitted by the Observable, but ignores subsequent emissions until the current Observable completes
 
 These are just a few examples of the many methods available in RxJS for transforming the data emitted by an Observable. Each method has its own specific use case, and the best method to use will depend on the requirements of your application.
 
 Here are the official documentation links for the RxJS transformation methods:
 
-- [@article@map](https://rxjs.dev/api/operators/map)
-- [@article@flatMap](https://rxjs.dev/api/operators/flatMap)
-- [@article@concatMap](https://rxjs.dev/api/operators/concatMap)
-- [@article@mergeMap](https://rxjs.dev/api/operators/mergeMap)
-- [@article@switchMap](https://rxjs.dev/api/operators/switchMap)
+- [@official@map](https://rxjs.dev/api/operators/map)
+- [@official@mergeMap](https://rxjs.dev/api/operators/mergeMap)
+- [@official@switchMap](https://rxjs.dev/api/operators/switchMap)
+- [@official@concatMap](https://rxjs.dev/api/operators/concatMap)
+- [@official@exhaustMap](https://rxjs.dev/api/operators/exhaustMap)
+- [@video@switchMap vs mergeMap vs concatMap vs exhaustMap practical guide](https://youtu.be/40pC5wHowWw)
 
 You can find more information and examples on these methods in the official RxJS documentation. Additionally, you can find more operators on https://rxjs.dev/api/operators and you can also find more information on the library as a whole on https://rxjs.dev/

src/data/roadmaps/api-design/api-design.json

@@ -927,7 +927,7 @@
       "focusable": true
     },
     {
-      "id": "dqslZ1FfJjCqkWhxY5JGD",
+      "id": "Wwd-0PjrtViMFWxRGaQey",
       "type": "subtopic",
       "position": {
         "x": -196.3881872719935,
@@ -941,7 +941,7 @@
           "justifyContent": "flex-start",
           "textAlign": "center"
         },
-        "oldId": "Wwd-0PjrtViMFWxRGaQey"
+        "oldId": "dqslZ1FfJjCqkWhxY5JGD"
       },
       "zIndex": 999,
       "width": 245,

src/data/roadmaps/backend/content/couchdb@qOlNzZ7U8LhIGukb67n7U.md

@@ -1 +1,11 @@
-# CouchDB
+# CouchDB
+
+Apache CouchDB is an open-source document-oriented NoSQL database. It uses JSON to store data, JavaScript as its query language using MapReduce, and HTTP for an API. Unlike a relational database, a CouchDB database does not store data and relationships in tables. Instead, each database is a collection of independent documents. Each document maintains its own data and self-contained schema.
+
+Visit the following resources to learn more:
+
+- [@article@CouchDB Website](https://couchdb.apache.org/)
+- [@article@CouchDB Documentation](https://docs.couchdb.org/)
+- [@article@The big NoSQL databases comparison](https://kkovacs.eu/cassandra-vs-mongodb-vs-couchdb-vs-redis/)
+- [@article@pouchdb - a JavaScript database inspired by CouchDB](https://pouchdb.com/)
+- [@feed@Explore top posts about CouchDB](https://app.daily.dev/tags/couchdb?ref=roadmapsh)

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

@@ -1,6 +1,4 @@
-# Document databases
-
-## MongoDB
+# MongoDB
 
 MongoDB is a source-available cross-platform document-oriented database program. Classified as a NoSQL database program, MongoDB uses JSON-like documents with optional schemas. MongoDB is developed by MongoDB Inc. and licensed under the Server Side Public License (SSPL).
 
@@ -13,4 +11,3 @@ Visit the following resources to learn more:
 - [@article@Learning Path for MongoDB Developers](https://learn.mongodb.com/catalog)
 - [@article@Dynamo DB Docs](https://docs.aws.amazon.com/dynamodb/index.html)
 - [@article@Official Developers Guide](https://docs.aws.amazon.com/amazondynamodb/latest/developerguide/Introduction.html)
-- [@feed@Explore top posts about Backend Development](https://app.daily.dev/tags/backend?ref=roadmapsh)

src/data/roadmaps/devops/content/netlify@hCKODV2b_l2uPit0YeP1M.md

@@ -1 +1,8 @@
-# Netlify
+# Netlify
+
+Netlify Functions are serverless functions that allow developers to run server-side code in a JAMstack environment without managing servers. They are built on AWS Lambda and automatically deploy alongside your Netlify site. These functions can handle tasks like API requests, form submissions, and database operations, enabling dynamic functionality in static sites. They support various languages including JavaScript, TypeScript, and Go. Netlify Functions integrate seamlessly with Netlify's deployment pipeline, offering easy development, testing, and production deployment. 
+
+Visit the following resources to learn more:
+
+- [@official@Official Documentation](https://docs.netlify.com/platform/primitives/#functions)
+- [@article@Introducing Netlify Functions 2.0](https://www.netlify.com/blog/introducing-netlify-functions-2-0/)

src/data/roadmaps/devrel/content/advocacy@7MCmY1bABGPfmzjErADvg.md

@@ -1 +1,9 @@
-# Advocacy
+# Advocacy
+
+Developer Advocacy is the practice of representing and supporting the needs and interests of developers both within a company and in the broader developer community. Developer Advocates act as liaisons between the company’s development team and external developers, ensuring that the developers have the tools, resources, and knowledge to effectively use the company's products or platforms. They create educational content, provide technical support, gather feedback, and participate in community events.
+
+Learn more from the following resources:
+
+- [@article@What is developer advocacy?](https://appsembler.com/glossary/developer-advocacy/)
+- [@article@What the heck is a developer advocate?](https://www.freecodecamp.org/news/what-the-heck-is-a-developer-advocate-87ab4faccfc4/)
+- [@video@Developer Relations: New Career Path for Developers](https://www.youtube.com/watch?v=iA2SQ4OL4GU)

src/data/roadmaps/devrel/content/community-support@1NFcpGzCJylRPbFYdD9bB.md

@@ -1 +1,8 @@
-# Community Support
+# Community Support
+
+Community Support in the context of Developer Relations (DevRel) involves actively engaging with and assisting the developer community to foster a collaborative and supportive environment. This includes moderating forums, responding to queries, organizing community events, and facilitating peer-to-peer support. Effective community support ensures that developers feel heard and valued, and have access to timely and accurate assistance, which enhances their overall experience and productivity.
+
+- [@article@Community and DevRel](https://developerrelations.com/podcast/community-and-devrel)
+- [@article@New to DevRel? Talk to your community!](https://dev.to/amandamartindev/new-to-devrel-talk-to-your-community-hmf)
+- [@video@DevRel & Community](https://www.youtube.com/watch?v=CfXkY2m_0dU)
+

src/data/roadmaps/devrel/content/content-creation@_3ZnPUl4kzzuM0bKQ8IAq.md

@@ -1 +1,9 @@
-# Content Creation
+# Content Creation
+
+Content creation in the context of Developer Relations (DevRel) involves producing a wide range of materials designed to educate, engage, and empower developers. This includes writing technical blogs, creating video tutorials, developing comprehensive documentation, and crafting code samples and demos. The goal is to provide valuable resources that help developers understand and effectively use a product or platform. High-quality content addresses common challenges, showcases best practices, and highlights new features or updates.
+
+Learn more from the following resources:
+
+- [@video@DevRel Content Creation with Stephanie Wong from Google Cloud](https://www.youtube.com/watch?v=DQE1hBXVXYA)
+- [@article@The secret of content creation for DevRel](https://developerrelations.com/dev-rel/the-secrets-of-content-creation-for-devrels)
+- [@article@Content strategy for DevRel teams](https://www.stephaniemorillo.co/post/content-strategy-for-devrel-teams-a-primer)

src/data/roadmaps/devrel/content/developer-experience@No-UnhdGmtLW9uFGLy-ca.md

@@ -1 +1,9 @@
-# Developer Experience
+# Developer Experience
+
+Developer Experience (DX) refers to the overall experience developers have while using a software product, tool, or platform. A positive DX is characterized by intuitive and well-documented APIs, robust and clear documentation, seamless integration processes, and responsive support. Good DX ensures that developers can efficiently build, deploy, and manage applications, reducing frustration and increasing productivity. 
+
+Learn more from the following resources:
+
+- [@article@What is developer experience?](https://swimm.io/learn/developer-experience/what-is-developer-experience-devx-pillars-and-best-practices)
+- [@article@Developer Experience: What is it and why should you care? GitHub](https://github.blog/2023-06-08-developer-experience-what-is-it-and-why-should-you-care/)
+- [@video@The Secret Formula to Improve Developer Experience Revealed!]9https://www.youtube.com/watch?v=mRqoVlhtVzA)

src/data/roadmaps/devrel/content/developer-journey@BooGiYTMoS0N5eobwjPHY.md

@@ -1 +1,9 @@
-# Developer Journey
+# Developer Journey
+
+The Developer Journey encompasses the entire process that a developer goes through when interacting with a product or platform, from initial discovery to long-term engagement. This journey includes various stages such as awareness, onboarding, learning, building, deploying, and scaling. Each stage requires thoughtful design and support to ensure a smooth and positive experience. By understanding and optimizing each touchpoint in the Developer Journey, companies can reduce friction, enhance satisfaction, and foster a more loyal and productive developer community.
+
+Learn more from the following resources:
+
+- [@article@The Developer Journey](https://www.devrel.agency/developerjourney)
+- [@article@Developer Relations: The Developer Journey Map](https://medium.com/codex/developer-relations-the-developer-journey-map-36bd4619f5f3)
+- [@article@Understand the developer journey](https://www.commonroom.io/resources/ultimate-guide-to-developer-experience/)

src/data/roadmaps/devrel/content/developer-marketing@UhMk8g5MMhvi3kWLLI6B1.md

@@ -1 +1,9 @@
-# Developer Marketing
+# Developer Marketing
+
+Developer Marketing focuses on strategies and tactics to engage and attract developers to a product, platform, or service. It involves creating targeted content, such as technical blogs, tutorials, and case studies, that addresses developers' needs and pain points. Effective developer marketing also includes hosting events like hackathons, webinars, and conferences to build community and demonstrate value. By leveraging channels that developers trust, such as GitHub, Stack Overflow, and social media, companies can increase visibility and adoption of their offerings.
+
+Learn more from the following resources:
+
+- [@article@What is developer marketing?](https://appsembler.com/glossary/developer-marketing/)
+- [@article@What is developer marketing? IronHorse.io](https://ironhorse.io/blog/what-is-developer-marketing/)
+- [@article@What is developer marketing (B2D)](https://www.productmarketingalliance.com/what-is-developer-marketing/)

src/data/roadmaps/devrel/content/education@EjqJkyojhO7f1uFHIoyGY.md

@@ -1 +1,9 @@
-# Education
+# Education
+
+Developer Education focuses on providing developers with the knowledge and skills they need to effectively use a product, platform, or technology. This involves creating and delivering a variety of educational materials such as documentation, tutorials, courses, webinars, and interactive workshops. Effective developer education programs cater to different learning styles and levels of expertise, from beginners to advanced users.
+
+Learn more from the following resources:
+
+- [@article@What is developer eduction?](https://appsembler.com/glossary/developer-education/)
+- [@article@What is developer education - Dev.to](https://dev.to/jacobandrewsky/what-is-developer-education-5a01)
+- [@article@Successful Developer Education: What you need to know](https://www.developermarketing.io/successful-developer-education-what-you-need-to-know/)

src/data/roadmaps/devrel/content/feedback-loop@IxRvVvX9Fax08YUbVob4s.md

@@ -1 +1,8 @@
-# Feedback Loop
+# Feedback Loop
+
+Feedback loops are a crucial process that involves collecting, analyzing, and acting on feedback from developers to improve products and services. This loop begins with gathering insights through various channels such as forums, surveys, social media, direct interactions at events, and support tickets. The feedback is then communicated to internal teams, including product management, engineering, and marketing, to inform product enhancements, feature requests, and bug fixes.
+
+Learn more from the following resources:
+
+- [@article@Harnessing the Power of Community Feedback for Product Development](https://draft.dev/learn/devrel-harnessing-the-power-of-community-feedback-for-product-development)
+- [@article@The Developer Advocacy Feedback Loop](https://glaforge.dev/talks/2020/08/06/the-developer-advocacy-feedback-loop/)

src/data/roadmaps/devrel/content/history-and-evolution@KP28dl1I9hxM130gIPxSZ.md

@@ -1 +1,11 @@
-# History and Evolution
+# History and Evolution
+
+The first Developer Relations teams came about in the lates 80’s during fierce rivalry between Microsoft and Apple. Apple created a team of “Evangelists” and when Microsoft saw the large impact that this team were having on the sales and adoption of Apple products, they created a their own team of “Technical Evangelists” which later became the Microsoft Developer Relations Group.
+
+DevRel has since evolved into multiple roles within itself, including Developer Marketing, Developer Advocate and Developer Engineer.
+
+Learn more from the following resources:
+
+- [@article@Developer Relations History & Mission Structure](https://lmcdunna.medium.com/developer-relations-history-mission-structure-5fcad869deac)
+- [@video@History of Developer Evangelism](https://www.youtube.com/watch?v=ieiQmyrmakI)
+

src/data/roadmaps/devrel/content/importance-of-devrel@N9HXTCQq2wfC-QurSofE_.md

@@ -1 +1,8 @@
-# Importance of DevRel
+# Importance of DevRel
+
+Developer Relations (DevRel) is crucial for fostering a vibrant and engaged developer community around a product or platform. It involves creating and maintaining strong relationships with developers through activities like community building, technical support, advocacy, and education. Effective DevRel ensures that developers have the resources and support they need to succeed, which in turn drives product adoption, innovation, and loyalty. By bridging the gap between a company's development teams and external developers, DevRel can also provide valuable feedback for product improvements and help in shaping the future direction of the product or platform.
+
+Learn more from the following resources:
+
+- [@article@DevRel - Why is it important?](https://developers.onelogin.com/blog/devrel)
+- [@article@The role of developer advocacy in driving innovation](https://leaddev.com/process/role-developer-advocacy-driving-innovation)

src/data/roadmaps/devrel/content/what-is-devrel@SiYUdtYMDImRPmV2_XPkH.md

@@ -1 +1,7 @@
-# What is DevRel?
+# What is DevRel?
+
+DevRel, or Developer Relations, is a field that connects a company's technical products or services with the developer community. It encompasses community engagement, technical advocacy, feedback collection, content creation, event participation, and product evangelism.
+
+DevRel professionals build relationships with developers, educate them about company tools and APIs, gather insights for product improvement, produce technical content, represent the company at industry events, and promote technology adoption.
+
+They typically possess both technical expertise and strong communication skills, serving as a vital link between external developers and internal engineering and product teams. DevRel aims to foster a positive ecosystem around a company's technology, driving adoption and user satisfaction.

src/data/roadmaps/full-stack/content/basic-aws-services@cUOfvOlQ_0Uu1VX3i67kJ.md

@@ -1,12 +1,6 @@
 # Basic AWS Services
 
-AWS has several services but you don't need to know all of them. Here are the most common ones that you can get started with:
-
-- [@article@EC2](https://aws.amazon.com/ec2/) - Virtual machines in the cloud
-- [@article@VPC](https://aws.amazon.com/vpc/) - Virtual private cloud
-- [@article@S3](https://aws.amazon.com/s3/) - Object storage
-- [@article@Route 53](https://aws.amazon.com/route53/) - DNS
-- [@article@SES](https://aws.amazon.com/ses/) - Email sending
+AWS has several services but you don't need to know all of them. Some common ones that you can start with are EC2, VPN, S3, Route 53, and SES.
 
 Here are some of the resources to get you started:
 

src/data/roadmaps/full-stack/full-stack.md

@@ -1,6 +1,7 @@
 ---
 jsonUrl: '/jsons/roadmaps/full-stack.json'
 pdfUrl: '/pdfs/roadmaps/full-stack.pdf'
+renderer: 'editor'
 order: 3
 briefTitle: 'Full Stack'
 briefDescription: 'Step by step guide to becoming a full stack developer in 2024'
@@ -10,7 +11,7 @@ isNew: false
 hasTopics: true
 dimensions:
   width: 968
-  height: 1951.64
+  height: 2075
 question:
   title: 'What is Full Stack Development?'
   description: |

src/data/roadmaps/full-stack/migration-mapping.json

@@ -0,0 +1,39 @@
+{
+  "html": "B0kARTODvCBi0iOF8iiqI",
+  "css": "dAJHWmGeiYdzZ1ZjrWz1S",
+  "checkpoint-static-websites": "WsdUAEaI7FX6DKKhPXUHp",
+  "javascript": "T9PB6WQf-Fa9NXKKvVOy_",
+  "checkpoint-interactivity": "2DFzoIUjKdAKGjfu_SCfa",
+  "npm": "mGgx_QTEPmVKf6AijX9fi",
+  "external-packages": "R4aeJNOrfWyVp3ea-qF4H",
+  "git": "We2APJpOPTr-VNfowG0kI",
+  "github": "8sPXL8iClpPqje03ksses",
+  "collaborative-work": "zFGWxgLPcZoW7KIzlnSV9",
+  "tailwind": "CVCqdPkq_hGQfI8EEi5RC",
+  "react": "khoUtTUxdf8udAzN9_CAb",
+  "frontend-apps": "7JU1cVggMDoZUV-adGsf-",
+  "nodejs": "_aA6Hp4KkgJeptqo8oKTg",
+  "cli-apps": "JGu0TKwAw-ieiG92BytYI",
+  "postgresql": "HGhnbMg6jh6cAmUH4DtOx",
+  "crud": "3EtGLO6cwkLc1-o9gwFNk",
+  "restful-apis": "vmHbWdmMHF53otXIrqzRV",
+  "jwt-auth": "vHojhJYjiN0IwruEqi1Dv",
+  "redis": "Onfd7Sl8LG2sjh2aQY7gb",
+  "complete-app": "v4NF25lJElAtkU0Rm6Fob",
+  "basic-aws-services:route53": "5zyYpu9cyuTFwQCjTbHpS",
+  "basic-aws-services:ses": "B-cphY7Imnv6JBMujVIF7",
+  "basic-aws-services:ec2": "6oBIxYj8WPcUHidQ99tus",
+  "basic-aws-services:vpc": "QtL-bLKtWIdH00K6k_PdC",
+  "basic-aws-services:s3": "n2Xp_ijJ2OS8xhE7xMWxk",
+  "basic-aws-services": "cUOfvOlQ_0Uu1VX3i67kJ",
+  "linux-basics": "SHTSvMDqI7X1_ZT7-m--n",
+  "deployment": "J2_IWAb1s9zZcxOY3NXm2",
+  "monit": "y1SFX7uvWaCy4OYBnECLu",
+  "monitoring": "NQmEl27eBPYhivcXdOEz3",
+  "github-actions": "863KMXcFJzInvTp_-Ldmz",
+  "ci-cd": "liaY1GnlOateB_ZKBjNpY",
+  "ansible": "rFXupYpUFfp7vZO8zh614",
+  "terraform": "2kKHuQZScu7hCDgQWxl5u",
+  "automation": "sO_9-l4FECbaqiaFnyeXO",
+  "infrastructure": "YVMyHFSCVF-GgXydq-SFJ"
+}

src/data/roadmaps/game-developer/content/104-programming-languages/103-rust.md

@@ -2,4 +2,4 @@
 
 **Rust** is a modern, open-source, multi-paradigm programming language designed for performance and safety, especially safe concurrency. It was initially designed by Mozilla Research as a language that can provide memory safety without garbage collection. Since then, it has gained popularity due to its features and performance that often compare favorably to languages like C++. Its rich type system and ownership model guarantee memory-safety and thread-safety while maintaining a high level of abstraction. Rust supports a mixture of imperative procedural, concurrent actor, object-oriented and pure functional styles.
 
-[Learn Rust full tutorial](https://youtu.be/BpPEoZW5IiY?si=lyBbBPLXQ0HWdJNr
+[Learn Rust full tutorial](https://youtu.be/BpPEoZW5IiY?si=lyBbBPLXQ0HWdJNr)

src/data/roadmaps/ios/content/combine-and-mvvm@pY_zaMcFpeFDLgVk2W0Vy.md

@@ -1 +1,9 @@
-# Combine and MVVM
+# Combine and MVVM
+
+Combine and MVVM (Model-View-ViewModel) form a powerful combination in iOS development. Combine's reactive approach complements MVVM's separation of concerns. In this pairing, ViewModels use Combine publishers to expose data streams to Views, which subscribe to these streams for reactive UI updates. Models can publish changes through Combine, which ViewModels then process and transform. This setup allows for clean, declarative bindings between Views and ViewModels, reducing boilerplate code and improving testability. Combine's operators facilitate complex data transformations within ViewModels, while its handling of asynchronous operations simplifies tasks like network requests.
+
+Learn more from the following resoureces:
+
+- [@article@MVVM Design Pattern with Combine Framework](https://medium.com/@mshcheglov/mvvm-design-pattern-with-combine-framework-on-ios-5ff911011b0b)
+- [@article@MVVM and Combine](https://betterprogramming.pub/uikit-mvvm-combine-912c80c02262)
+- [@video@MVVM Combine Swift (2022)](https://www.youtube.com/watch?v=KK6ryBmTKHg)

src/data/roadmaps/ios/content/components@xkH7Llut6uP2-8iTMw76F.md

@@ -1 +1,9 @@
-# Components
+# Components
+
+Components are built by composing primitive views like Text, Image, and Button, along with container views such as VStack and HStack. They can accept parameters for customization and use `@State` and `@Binding` for internal state management and data flow. SwiftUI's modifiers allow for styling and behavior adjustments. Components can be extracted into separate files for reusability across the app. This approach encourages a modular design, improving code organization and maintainability.
+
+Learn more from the following resources:
+
+- [@article@SwiftUI Components](https://designcode.io/swiftui-handbook-components)
+- [@course@Building Reusable SwiftUI Components](https://peterfriese.github.io/Building-SwiftUI-Components-Tutorial/tutorials/tutorial-table-of-contents/)
+- [@video@Building SwiftUI Components](https://www.youtube.com/playlist?list=PLsnLd2esiGRTfzn8pq4ZMYyDsL8GEMZO8)

src/data/roadmaps/ios/content/data-binding@yR94uHs0SiSScU4gPBzfr.md

@@ -1 +1,9 @@
-# Data binding
+# Data binding
+
+SwiftUI data binding is a mechanism that creates a two-way connection between a piece of data and a UI element. It uses the `@Binding` property wrapper to allow child views to share and modify data owned by parent views. Bindings ensure that changes in data are immediately reflected in the UI and vice versa. They are typically created using the `$` prefix on a `@State` property. This approach facilitates the flow of data through an app's view hierarchy, enabling reactive UI updates and maintaining a single source of truth.
+
+Learn more from the following resources:
+
+- [@official@Binding](https://developer.apple.com/documentation/swiftui/binding)
+- [@video@How to use @Binding property wrapper in SwiftUI](https://www.youtube.com/watch?v=btDMzB5x2Gs)
+- [@video@SwiftUI - @Binding Property Wrapper Explained](https://www.youtube.com/watch?v=lgtB3WLEOYg)

src/data/roadmaps/ios/content/declarative-syntax@QVg4_8EXeQBJbleryy8c1.md

@@ -1 +1,9 @@
-# Declarative Syntax
+# Declarative Syntax
+
+SwiftUI's declarative syntax allows developers to describe the desired UI state rather than the step-by-step process to achieve it. This approach uses Swift code to define what views should appear and how they should behave, with SwiftUI handling the underlying implementation details. Developers create views by combining and modifying smaller view components, using modifiers to adjust appearance and behavior. State management is integrated into this syntax, with UI automatically updating when state changes.
+
+Learn more from the following resources:
+
+- [@article@Declarative and Imperative Programming using SwiftUI and UIKit](https://medium.com/@rmeji1/declarative-and-imperative-programming-using-swiftui-and-uikit-c91f1f104252)
+- [@article@Apple's SwiftUI Declarative Framework](https://www.linkedin.com/pulse/apples-swiftui-declarative-framework-vivek-singh/)
+- [@video@Imperative vs Declarative Programming](https://www.youtube.com/watch?v=yOBBkIJBEL8)

src/data/roadmaps/ios/content/modals-and-navigation@jb89kQxDhZND3vQo0EH7r.md

@@ -1 +1,15 @@
-# Modals and Navigation
+# Modals and Navigation
+
+UIKit navigation stacks support both modal presentations and hierarchical navigation:
+
+Modal presentations temporarily overlay new content using present(_:animated:completion:). They're suitable for self-contained tasks or information that doesn't fit the main navigation hierarchy.
+
+Hierarchical navigation uses push and pop operations on the navigation stack. pushViewController(_:animated:) adds a new screen, while popViewController(animated:) returns to the previous one.
+
+These can be combined: a modal can contain its own navigation stack, or a screen in the main navigation can present a modal. This flexibility allows developers to create complex navigation patterns that maintain clarity and context for users, adapting to various app structures and user flow requirements.
+
+Learn more from the following resources:
+
+- [@official@animate(withDuration:animations:completion:)](https://developer.apple.com/documentation/uikit/uiview/1622515-animate)
+- [@officialpushViewController](https://developer.apple.com/documentation/uikit/uinavigationcontroller/1621887-pushviewcontroller)
+- [@video@UIKit Programmatic Navigation](https://www.youtube.com/watch?v=c0YSGtFmik8)

src/data/roadmaps/ios/content/navigation-controllers-segues@tUbMr1pGlw4JwMuW311JJ.md

@@ -1 +1,12 @@
-# Navigation Controllers, Segues
+# Navigation Controllers, Segues
+
+UIKit Navigation Controllers and Segues are key components for managing app navigation:
+
+Navigation Controllers (`UINavigationController`) manage a stack of view controllers, providing a hierarchical interface for navigating content. They handle push and pop transitions between screens, maintain a navigation bar, and support back-navigation functionality.
+
+Segues are visual connections between view controllers in storyboards, defining transitions between scenes. They can be triggered programmatically or through user interactions. Types include push, modal, and custom segues. Segues simplify the process of passing data between view controllers during transitions.
+
+Learn more from the following resources:
+
+- [@video@How to Nav Bar Programmatically](https://www.youtube.com/watch?v=wcN3-E1_ZxU)
+- [@official@UINavigationController](https://developer.apple.com/documentation/uikit/uinavigationcontroller)