Add bonus content

content/roadmaps/100-frontend/content-paths.json

@@ -97,18 +97,30 @@
   "testing-your-apps:playwright": "/roadmaps/100-frontend/content/115-testing-your-apps/104-playwright.md",
   "testing-your-apps:react-testing-library": "/roadmaps/100-frontend/content/115-testing-your-apps/101-react-testing-library.md",
   "testing-your-apps:cypress": "/roadmaps/100-frontend/content/115-testing-your-apps/102-cypress.md",
-  "testing-your-apps:enzyme": "/roadmaps/100-frontend/content/115-testing-your-apps/103-enzyme.md",
   "testing-your-apps:other-options": "/roadmaps/100-frontend/content/115-testing-your-apps/104-other-options.md",
   "testing-your-apps:mocha": "/roadmaps/100-frontend/content/115-testing-your-apps/105-mocha.md",
   "testing-your-apps:chai": "/roadmaps/100-frontend/content/115-testing-your-apps/106-chai.md",
   "testing-your-apps:ava": "/roadmaps/100-frontend/content/115-testing-your-apps/107-ava.md",
   "testing-your-apps:jasmine": "/roadmaps/100-frontend/content/115-testing-your-apps/108-jasmine.md",
+  "auth-strategies": "/roadmaps/100-frontend/content/116-auth-strategies/readme.md",
   "type-checkers": "/roadmaps/100-frontend/content/116-type-checkers/readme.md",
   "type-checkers:typescript": "/roadmaps/100-frontend/content/116-type-checkers/100-typescript.md",
   "type-checkers:flow": "/roadmaps/100-frontend/content/116-type-checkers/101-flow.md",
   "progressive-web-apps": "/roadmaps/100-frontend/content/117-progressive-web-apps/readme.md",
-  "progressive-web-apps:performance": "/roadmaps/100-frontend/content/117-progressive-web-apps/101-performance.md",
-  "progressive-web-apps:apis": "/roadmaps/100-frontend/content/117-progressive-web-apps/100-apis.md",
+  "progressive-web-apps:storage": "/roadmaps/100-frontend/content/117-progressive-web-apps/100-storage.md",
+  "progressive-web-apps:web-sockets": "/roadmaps/100-frontend/content/117-progressive-web-apps/101-web-sockets.md",
+  "progressive-web-apps:server-sent-events": "/roadmaps/100-frontend/content/117-progressive-web-apps/102-server-sent-events.md",
+  "progressive-web-apps:service-workers": "/roadmaps/100-frontend/content/117-progressive-web-apps/103-service-workers.md",
+  "progressive-web-apps:location": "/roadmaps/100-frontend/content/117-progressive-web-apps/104-location.md",
+  "progressive-web-apps:notifications": "/roadmaps/100-frontend/content/117-progressive-web-apps/105-notifications.md",
+  "progressive-web-apps:device-orientation": "/roadmaps/100-frontend/content/117-progressive-web-apps/106-device-orientation.md",
+  "progressive-web-apps:payments": "/roadmaps/100-frontend/content/117-progressive-web-apps/107-payments.md",
+  "progressive-web-apps:credentials": "/roadmaps/100-frontend/content/117-progressive-web-apps/108-credentials.md",
+  "progressive-web-apps:prpl-pattern": "/roadmaps/100-frontend/content/117-progressive-web-apps/109-prpl-pattern.md",
+  "progressive-web-apps:rail-model": "/roadmaps/100-frontend/content/117-progressive-web-apps/110-rail-model.md",
+  "progressive-web-apps:performance-metrics": "/roadmaps/100-frontend/content/117-progressive-web-apps/111-performance-metrics.md",
+  "progressive-web-apps:lighthouse": "/roadmaps/100-frontend/content/117-progressive-web-apps/112-lighthouse.md",
+  "progressive-web-apps:browser-devtools": "/roadmaps/100-frontend/content/117-progressive-web-apps/113-browser-devtools.md",
   "server-side-rendering": "/roadmaps/100-frontend/content/118-server-side-rendering/readme.md",
   "server-side-rendering:react-js": "/roadmaps/100-frontend/content/118-server-side-rendering/100-react-js/readme.md",
   "server-side-rendering:react-js:next-js": "/roadmaps/100-frontend/content/118-server-side-rendering/100-react-js/100-next-js.md",
@@ -118,6 +130,8 @@
   "server-side-rendering:angular:universal": "/roadmaps/100-frontend/content/118-server-side-rendering/101-angular/100-universal.md",
   "server-side-rendering:vue-js": "/roadmaps/100-frontend/content/118-server-side-rendering/102-vue-js/readme.md",
   "server-side-rendering:vue-js:nuxt-js": "/roadmaps/100-frontend/content/118-server-side-rendering/102-vue-js/100-nuxt-js.md",
+  "server-side-rendering:svelte": "/roadmaps/100-frontend/content/118-server-side-rendering/103-svelte/readme.md",
+  "server-side-rendering:svelte:svelte-kit": "/roadmaps/100-frontend/content/118-server-side-rendering/103-svelte/100-svelte-kit.md",
   "graphql": "/roadmaps/100-frontend/content/119-graphql/readme.md",
   "graphql:apollo": "/roadmaps/100-frontend/content/119-graphql/100-apollo.md",
   "graphql:relay-modern": "/roadmaps/100-frontend/content/119-graphql/101-relay-modern.md",
@@ -129,7 +143,7 @@
   "static-site-generators:vuepress": "/roadmaps/100-frontend/content/120-static-site-generators/103-vuepress.md",
   "static-site-generators:jekyll": "/roadmaps/100-frontend/content/120-static-site-generators/104-jekyll.md",
   "static-site-generators:hugo": "/roadmaps/100-frontend/content/120-static-site-generators/105-hugo.md",
-  "static-site-generators:gridsome": "/roadmaps/100-frontend/content/120-static-site-generators/106-gridsome.md",
+  "static-site-generators:astro": "/roadmaps/100-frontend/content/120-static-site-generators/106-astro.md",
   "static-site-generators:eleventy": "/roadmaps/100-frontend/content/120-static-site-generators/107-eleventy.md",
   "mobile-applications": "/roadmaps/100-frontend/content/121-mobile-applications/readme.md",
   "mobile-applications:react-native": "/roadmaps/100-frontend/content/121-mobile-applications/100-react-native.md",
@@ -139,6 +153,6 @@
   "desktop-applications": "/roadmaps/100-frontend/content/122-desktop-applications/readme.md",
   "desktop-applications:electron": "/roadmaps/100-frontend/content/122-desktop-applications/100-electron.md",
   "desktop-applications:tauri": "/roadmaps/100-frontend/content/122-desktop-applications/101-tauri.md",
-  "desktop-applications:proton-native": "/roadmaps/100-frontend/content/122-desktop-applications/102-proton-native.md",
-  "web-assembly": "/roadmaps/100-frontend/content/123-web-assembly.md"
+  "desktop-applications:flutter": "/roadmaps/100-frontend/content/122-desktop-applications/102-flutter.md",
+  "bonus-content": "/roadmaps/100-frontend/content/123-bonus-content.md"
 }

content/roadmaps/100-frontend/content/115-testing-your-apps/103-enzyme.md

@@ -1,6 +0,0 @@
-# Enzyme
-
-Enzyme is a JavaScript Testing utility for React that makes it easier to test your React Components' output. You can also manipulate, traverse, and in some ways simulate runtime given the output.
-
-<ResourceGroupTitle>Free Content</ResourceGroupTitle>
-<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://enzymejs.github.io/enzyme/'>Enzyme Website</BadgeLink>

content/roadmaps/100-frontend/content/116-auth-strategies/readme.md

@@ -0,0 +1,22 @@
+# Authentication Strategies
+
+Authentication strategies are methods or techniques used to verify the identity of a user or system in order to grant access to a protected resource. There are several different authentication strategies that can be used, including:
+
+- Basic Authentication
+- Session Based Authentication
+- Token Based Authentication
+- JWT Authentication
+- OAuth
+- SSO
+
+You don't necessarily need to learn all of these, how to implement and the ins and outs from the get go. But it's important to know what they are and how they work. This will help you make better decisions when choosing an authentication strategy for your application.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://roadmap.sh/guides/basic-authentication'>Basic Authentication</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://roadmap.sh/guides/session-authentication'>Session Based Authentication</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://roadmap.sh/guides/token-authentication'>Token Based Authentication</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://roadmap.sh/guides/jwt-authentication'>JWT Authentication</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://roadmap.sh/guides/oauth'>OAuth</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://roadmap.sh/guides/sso'>SSO - Single Sign On</BadgeLink>
+
+

content/roadmaps/100-frontend/content/117-progressive-web-apps/100-apis.md

@@ -1,8 +0,0 @@
-# PWA APIs
-
-One of the main purposes of PWAs is to provide a native-app-like experience. APIs like service workers, web sockets, and storage allow a PWA to fast load, access data offline, and other capabilities, similar to a native app.
-
-<ResourceGroupTitle>Free Content</ResourceGroupTitle>
-<BadgeLink colorScheme='yellow' badgeText='Read' href='https://web.dev/progressive-web-apps/'>Progressive Web Apps</BadgeLink>
-<BadgeLink colorScheme='yellow' badgeText='Read' href='https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps'>Progressive web apps (PWAs)</BadgeLink>
-<BadgeLink colorScheme='yellow' badgeText='Read' href='https://blog.logrocket.com/project-fugu-5-new-apis-to-try-out-in-your-pwa/'> 5 new APIs to try out in your PWA</BadgeLink>

content/roadmaps/100-frontend/content/117-progressive-web-apps/100-storage.md

@@ -0,0 +1,8 @@
+# Web Storage API
+
+The Web Storage API provides mechanisms for storing key-value pairs in a web browser. It includes two storage objects: localStorage and sessionStorage, which allow you to save data on the client side and persist it across multiple browser sessions, respectively.
+
+The Web Storage API is designed to be simple and easy to use, and it is widely supported across modern web browsers. It is often used as an alternative to cookies, as it allows for larger amounts of data to be stored and is more efficient in terms of performance.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API'>Web Storage API - MDN</BadgeLink>

content/roadmaps/100-frontend/content/117-progressive-web-apps/101-performance.md

@@ -1,12 +0,0 @@
-# Performance
-
-Performance plays a significant role in the success of any online venture, as high performing sites engage and retain users better than poorly performing ones. Tools like Lighthouse and Devtools highlight performance metrics and help improve performance of PWAs.
-
-<BadgeLink colorScheme='yellow' badgeText='Read' href='https://web.dev/fast/'> Fast load times: Techniques for improving site performance.</BadgeLink>
-<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.patterns.dev/posts/prpl/'>PRPL pattern</BadgeLink>
-<BadgeLink colorScheme='yellow' badgeText='Read' href='https://web.dev/apply-instant-loading-with-prpl/'>Apply instant loading with PRPL</BadgeLink>
-<BadgeLink colorScheme='yellow' badgeText='Read' href='https://web.dev/rail/'>Measure performance with the RAIL model</BadgeLink>
-<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.freecodecamp.org/news/introduction-to-chrome-lighthouse/'>Introduction to Chrome Lighthouse</BadgeLink>
-<BadgeLink colorScheme='yellow' badgeText='Read' href='https://developers.google.com/web/ilt/pwa/lighthouse-pwa-analysis-tool'>Lighthouse PWA Analysis Tool</BadgeLink>
-<BadgeLink colorScheme='yellow' badgeText='Read' href='https://developer.chrome.com/docs/devtools/speed/get-started/'>Lighthouse: Optimize website speed</BadgeLink>
-<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=egmwY9n6qWY'>PWA Tutorial: Lighthouse Audit</BadgeLink>

content/roadmaps/100-frontend/content/117-progressive-web-apps/101-web-sockets.md

@@ -0,0 +1,10 @@
+# Web Sockets
+
+Web Sockets is a technology that allows for full-duplex communication over a single TCP connection. It enables real-time, bi-directional communication between a client and a server, and is typically used in applications that require high-speed, low-latency communication, such as online gaming and real-time data streaming.
+
+Web Sockets utilizes a persistent connection between a client and a server, allowing for continuous data exchange without the need for the client to send additional requests to the server. This makes it more efficient and faster than other technologies, such as HTTP, which require a new request to be sent for each piece of data.
+
+Web Sockets is supported by most modern web browsers and can be used with a variety of programming languages and frameworks.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API'>Web Sockets - MDN</BadgeLink>

content/roadmaps/100-frontend/content/117-progressive-web-apps/102-server-sent-events.md

@@ -0,0 +1,10 @@
+# Server Sent Events
+
+Server-Sent Events (SSE) is a technology that allows a web server to push data to a client in real-time. It uses an HTTP connection to send a stream of data from the server to the client, and the client can listen for these events and take action when they are received.
+
+SSE is useful for applications that require real-time updates, such as chat systems, stock tickers, and social media feeds. It is a simple and efficient way to establish a long-lived connection between a client and a server, and it is supported by most modern web browsers.
+
+To use SSE, the client must create an EventSource object and specify the URL of the server-side script that will send the events. The server can then send events by writing them to the response stream with the proper formatting.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://developer.mozilla.org/en-US/docs/Web/API/Server-sent_events'>Server-Sent Events - MDN</BadgeLink>

content/roadmaps/100-frontend/content/117-progressive-web-apps/103-service-workers.md

@@ -0,0 +1,10 @@
+# Service Workers
+
+Service Workers are a type of web worker that acts as a proxy between a web page and the network, allowing web developers to build offline-first and reliable applications. Service Workers can intercept network requests, access the cache, and make decisions on how to respond to a request based on the available resources.
+
+Service Workers are written in JavaScript and are registered by a web page. Once registered, they can control the page and all its requests, even when the page is not open in a browser. This allows Service Workers to enable features such as push notifications, background synchronization, and offline support.
+
+Service Workers are supported by most modern web browsers, and they are an essential component of progressive web applications (PWAs).
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API'>Service Workers - MDN</BadgeLink>

content/roadmaps/100-frontend/content/117-progressive-web-apps/104-location.md

@@ -0,0 +1,8 @@
+# Location API
+
+The Geolocation API is a web API that provides access to the device's location data, such as latitude and longitude. It allows web developers to build location-based applications, such as mapping and location sharing, by using the device's GPS, Wi-Fi, and other sensors to determine the user's location.
+
+To use the Geolocation API, a web page must first request permission from the user to access their location. If permission is granted, the page can then use the `navigator.geolocation` object to access the device's location data. The API provides several methods for getting the user's current location, watching for location changes, and calculating distances between two locations.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API'>Geolocation API - MDN</BadgeLink>

content/roadmaps/100-frontend/content/117-progressive-web-apps/105-notifications.md

@@ -0,0 +1,8 @@
+# Notifications API
+
+The Notifications API is a web API that allows web pages to display system-level notifications to the user. These notifications can be used to alert the user of important events, such as new messages or updates, even when the web page is not open in the browser.
+
+To use the Notifications API, a web page must first request permission from the user to display notifications. If permission is granted, the page can then use the `Notification` constructor to create a new notification and display it to the user. The notification can include a title, body text, and an icon, and it can be customized with options such as a timeout and a click action.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://developer.mozilla.org/en-US/docs/Web/API/Notifications_API'>Notifications API - MDN</BadgeLink>

content/roadmaps/100-frontend/content/117-progressive-web-apps/106-device-orientation.md

@@ -0,0 +1,10 @@
+# Device Orientation API
+
+The Device Orientation API is a web API that provides access to the device's orientation and motion data, such as its pitch, roll, and yaw. It allows web developers to build applications that can respond to the device's orientation and motion, such as augmented reality and motion-controlled games.
+
+To use the Device Orientation API, a web page must first request permission from the user to access the device's orientation data. If permission is granted, the page can then use the DeviceOrientationEvent object to access the device's orientation data and respond to changes in orientation. The API provides several properties for accessing the device's orientation and motion data, as well as events for detecting changes in orientation.
+
+The Device Orientation API is supported by most modern web browsers and is often used in conjunction with other APIs, such as the Geolocation API, to build location-based applications.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://developer.mozilla.org/en-US/docs/Web/API/Device_orientation_events'>Device Orientation API - MDN</BadgeLink>

content/roadmaps/100-frontend/content/117-progressive-web-apps/107-payments.md

@@ -0,0 +1,13 @@
+# Payments
+
+The Payment Request API is a web API that allows web developers to build checkout flows within their web applications. It provides a standardized, browser-based interface for collecting payment and shipping information from the user, and it supports a wide range of payment methods, including credit cards, debit cards, and digital wallets.
+
+To use the Payment Request API, a web page must first create a `PaymentRequest` object and specify the payment and shipping options that are available to the user. The page can then invoke the Payment Request UI by calling the `show()` method on the `PaymentRequest` object. The user can then select their preferred payment and shipping options and confirm the payment, at which point the Payment Request API will return a payment response object that can be used to complete the transaction.
+
+The Payment Request API is supported by most modern web browsers and is designed to be simple and efficient for both the developer and the user.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://developer.mozilla.org/en-US/docs/Web/API/Payment_Request_API'>Payment Request API - MDN</BadgeLink>
+
+
+

content/roadmaps/100-frontend/content/117-progressive-web-apps/108-credentials.md

@@ -0,0 +1,10 @@
+# Credentials API
+
+The Credential Management API is a web API that allows web developers to integrate password-based and federated login flows into their applications. It provides a standardized, browser-based interface for storing and retrieving user credentials, such as username and password combinations and OAuth tokens.
+
+To use the Credential Management API, a web page must first create a Credential object and specify the credentials that the user wishes to store. The page can then use the navigator.credentials object to store and retrieve the user's credentials. The API provides several methods for storing and retrieving credentials, as well as for prompting the user to sign in or sign up.
+
+The Credential Management API is supported by most modern web browsers and is designed to improve the security and usability of login flows by allowing the user to store and reuse their credentials across multiple sites and devices.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://developer.mozilla.org/en-US/docs/Web/API/Credential_Management_API'>Credential Management API - MDN</BadgeLink>

content/roadmaps/100-frontend/content/117-progressive-web-apps/109-prpl-pattern.md

@@ -0,0 +1,13 @@
+# PRPL Pattern
+
+The PRPL pattern is a performance optimization pattern for web applications that focuses on minimizing the time it takes for the initial rendering of a web page. It stands for Push, Render, Pre-cache, and Lazy-load, and it involves the following steps:
+
+* Push: Prioritize the delivery of critical resources, such as HTML, CSS, and JavaScript, to the client as early as possible.
+* Render: Start rendering the web page as soon as the critical resources are received, even if some non-critical resources are still being downloaded.
+* Pre-cache: Pre-cache non-critical resources in the background so that they are available when needed.
+* Lazy-load: Defer the loading of non-critical resources until they are needed, such as when the user scrolls to them or interacts with them.
+
+The PRPL pattern is designed to improve the perceived performance of a web page by reducing the time it takes for the page to become interactive. It is particularly useful for applications that are served over slow or unreliable networks, as it allows the page to render as quickly as possible and then gradually load the remaining resources.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://developers.google.com/web/fundamentals/performance/prpl-pattern'>PRPL Pattern - Google Developers</BadgeLink>

content/roadmaps/100-frontend/content/117-progressive-web-apps/110-rail-model.md

@@ -0,0 +1,13 @@
+# RAIL Model
+
+The RAIL model is a performance optimization model for web applications that focuses on improving the perceived performance of a web page. It stands for Response, Animation, Idle, and Load, and it involves the following four performance goals:
+
+* Response: The time it takes for the web page to respond to user input should be under 100 milliseconds.
+* Animation: The time it takes for an animation to run should be under 10 milliseconds.
+* Idle: The web page should take advantage of idle time to perform non-critical tasks.
+* Load: The time it takes for the web page to fully load should be under 1 second.
+
+The RAIL model is designed to provide a framework for optimizing the performance of a web page by focusing on the four key areas that impact the user's perception of performance. It is particularly useful for applications that require high levels of interactivity, such as games and social media applications.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://developers.google.com/web/fundamentals/performance/rail'>RAIL Model - Google Developers</BadgeLink>

content/roadmaps/100-frontend/content/117-progressive-web-apps/111-performance-metrics.md

@@ -0,0 +1,16 @@
+# Performance Metrics
+
+Web performance metrics are quantitative measures of the performance of a web page or application. They are used to assess the speed and efficiency of a web page, and they can help identify areas for improvement. Some common web performance metrics include:
+
+* Load time: The time it takes for a web page to fully load and become interactive.
+* First contentful paint (FCP): The time it takes for the first content to appear on the page.
+* Time to interactive (TTI): The time it takes for the page to become fully interactive.
+* First input delay (FID): The time it takes for the page to respond to the first user input.
+* Total blocking time (TBT): The time it takes for the page to become fully interactive, taking into account the time spent blocking the main thread.
+
+There are many tools and techniques available for measuring web performance metrics, including browser dev tools, performance monitoring tools, and web performance APIs. By tracking these metrics and analyzing the results, web developers can identify areas for improvement and optimize the performance of their web pages.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://developers.google.com/web/fundamentals/performance/user-centric-performance-metrics'>Web Performance Metrics - Google Developers</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://web.dev/metrics/'>Measuring performance and user experience - Google Developers</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://developer.mozilla.org/en-US/docs/Web/Guide/Performance'>Measuring performance and user experience - MDN</BadgeLink>

content/roadmaps/100-frontend/content/117-progressive-web-apps/112-lighthouse.md

@@ -0,0 +1,10 @@
+# Lighthouse
+
+Lighthouse is an open-source tool developed by Google that is used to audit the performance, accessibility, and SEO of web pages. It is available as a browser extension and as a command-line tool, and it can be run on any web page to generate a report with recommendations for improvement.
+
+Lighthouse works by simulating the load and interaction of a web page and measuring various performance metrics, such as load time, time to first paint, and time to interactive. It also checks for common issues such as incorrect image sizes, missing alt text, and broken links.
+
+Lighthouse provides a comprehensive and easy-to-use tool for identifying and fixing performance and accessibility issues on web pages. It is widely used by web developers and is integrated into many popular development tools.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://developers.google.com/web/tools/lighthouse'>Lighthouse - Google Developers</BadgeLink>

content/roadmaps/100-frontend/content/117-progressive-web-apps/113-browser-devtools.md

@@ -0,0 +1,18 @@
+# Browser DevTools
+
+Most of the browsers have built-in developer tools that help you perform web development specific tasks on a webpage. My personal recommendation would be to use Chrome DevTools as it is the most advanced and has the most features. However, if you are using a different browser, you can still use the DevTools to debug your web application. 
+
+Chrome DevTools is a set of web development tools built into the Google Chrome browser. It allows web developers to debug and optimize web pages by providing a range of features for inspecting and manipulating the page's HTML, CSS, and JavaScript.
+
+Some of the features provided by Chrome DevTools include:
+
+* **Elements panel**: Inspect and modify the page's HTML and CSS.
+* **Console panel**: View and debug JavaScript errors and log messages.
+* **Network panel**: Monitor network requests and responses, and analyze performance issues.
+* **Performance panel**: Analyze the performance of the page and identify bottlenecks.
+* **Application panel**: Inspect the page's resources, such as cookies and local storage.
+
+Chrome DevTools is a powerful and essential tool for web developers, and it is widely used to debug and optimize web pages. It is constantly updated with new features and improvements, and it is available on all modern web browsers.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://developers.google.com/web/tools/chrome-devtools'>Chrome DevTools - Google Developers</BadgeLink>

content/roadmaps/100-frontend/content/118-server-side-rendering/103-svelte/100-svelte-kit.md

@@ -0,0 +1,7 @@
+# Svelte Kit
+
+Svelte Kit is a framework for building web applications with the Svelte JavaScript framework. It is designed to be a complete solution for building web applications, with support for server-side rendering, automatic code splitting, and optimized performance.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://kit.svelte.dev/'>Svelte Kit Official Website</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://kit.svelte.dev/docs/introduction'>Official Svelte Kit Docs</BadgeLink>

content/roadmaps/100-frontend/content/118-server-side-rendering/103-svelte/readme.md

@@ -0,0 +1,10 @@
+# Svelte
+
+Svelte is a javascript framework that unlike Vue and React does not use vertical DOM diffing but instead knows exactly what and where to update when the state changes. It's mainly focused on frontend and building user interfaces.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://svelte.dev/'>Svelte Website</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Official Guide' href='https://svelte.dev/docs'>Svelte Documentation</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/playlist?list=PL4cUxeGkcC9hlbrVO_2QFVqVPhlZmz7tO'>Svelte Course Playlist for beginners</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://thenewstack.io/all-about-svelte-the-much-loved-state-driven-web-framework/'>All About Svelte, the Much-Loved, State-Driven Web Framework</BadgeLink>
+<BadgeLink colorScheme='purple' badgeText='Watch' href='https://thenewstack.io/svelte-and-the-future-of-front-end-development/'>Svelte and the Future of Frontend Development</BadgeLink>

content/roadmaps/100-frontend/content/120-static-site-generators/106-astro.md

@@ -0,0 +1,14 @@
+# Astro
+
+Astro is an all-in-one web framework for building fast, content-focused websites. Astro combines the power of a modern component-based framework with the performance and flexibility of a static site generator.
+
+- Component Islands: A new web architecture for building faster websites.
+- Server-first API design: Move expensive hydration off of your users’ devices.
+- Zero JS, by default: No JavaScript runtime overhead to slow you down.
+- Edge-ready: Deploy anywhere, even a global edge runtime like Deno or Cloudflare.
+- Customizable: Tailwind, MDX, and 100+ other integrations to choose from.
+- UI-agnostic: Supports React, Preact, Svelte, Vue, Solid, Lit and more.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://astro.build/'>Official Astro Website</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://docs.astro.build/'>Official Astro Docs</BadgeLink>

content/roadmaps/100-frontend/content/122-desktop-applications/102-flutter.md

@@ -0,0 +1,18 @@
+<DedicatedRoadmap
+href='/flutter'
+title='Flutter Roadmap'
+description='Click to check the detailed Flutter Roadmap.'
+/>
+
+# Flutter
+
+Flutter is a free and open-source multi-platform UI framework created by Google and released in May 2017. In a few words, it allows you to create a native mobile application with only one codebase. This means that you can use one programming language and one codebase to create three different apps (for iOS, Android and Desktop).
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://flutter.dev'>Flutter Website</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://flutter.dev/multi-platform/desktop'>Flutter for Desktop</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.w3adda.com/flutter-tutorial'>Flutter Tutorial</BadgeLink>
+<BadgeLink colorScheme='green' badgeText='Course' href='https://www.youtube.com/watch?v=1ukSR1GRtMU&list=PL4cUxeGkcC9jLYyp2Aoh6hcWuxFDX6PBJ'>Flutter Tutorial for Beginners</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.w3adda.com/flutter-tutorial'>Flutter Tutorial</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.tutorialspoint.com/dart_programming/index.htm'>Learn Dart Programming</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://thenewstack.io/12-ways-flutter-streamlines-app-development/'>12 Ways Flutter Streamlines App Development</BadgeLink>

content/roadmaps/100-frontend/content/122-desktop-applications/102-proton-native.md

@@ -1,7 +0,0 @@
-# Proton native
-
-Proton Native allows you to create desktop applications through a React syntax, on all platforms.
-
-<ResourceGroupTitle>Free Content</ResourceGroupTitle>
-<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://proton-native.js.org/'>Official Website and Docs</BadgeLink>
-<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=Hw6vPBfVVeo'>Getting Started With Proton Native</BadgeLink>

content/roadmaps/100-frontend/content/123-bonus-content.md

@@ -0,0 +1,16 @@
+# Bonus Content
+
+It is not required to complete the bonus content, it just expands on the topics covered in the roadmap and has the items which were missed in the roadmap. Go through them if you want.
+
+* **UI / UX Knowledge** - Gaining UI/UX knowledge is not a must for a Frontend Developer but having an eye for design and a good understanding of UI/UX will help you in your career.
+* **[Design Systems](/design-system)** - Learn how to create and work with design systems.
+* **Visual Programming** — it is entirely possible to be a successful, competent frontend developer without it, but for many frontend developers this path represents a serious chunk of their workload, and represents a very in-demand option for frontend development – especially for developers who are have a visual aptitude.
+  * **For Animations**: [GSAP](https://greensock.com/gsap/), [Lottie](https://airbnb.design/lottie/), [Framer Motion](https://github.com/framer/motion) or [MoJs](https://mojs.github.io/)
+  * **Web Graphics Library (WebGL)**: [WebGL MDN](https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/Tutorial), [WebGL Fundamentals](https://webglfundamentals.org/webgl/lessons/webgl-fundamentals.html)
+  * **2D Graphics**: [Canvas](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API), [PixiJS](https://pixijs.com/), [PhaserJS](https://phaser.io/)
+  * **3D Graphics**: [ThreeJS](https://threejs.org/), [BabylonJS](https://www.babylonjs.com/)
+* Have a look at [Qwik](https://qwik.builder.io/) and **[Partytown](https://partytown.builder.io/)**.
+* [Houdini](https://developer.mozilla.org/en-US/docs/Web/Guide/Houdini) — Here is a good [introductory article to houdini](https://www.smashingmagazine.com/2020/03/practical-overview-css-houdini/).
+* **[WebRTC](https://developer.mozilla.org/en-US/docs/Web/API/WebRTC_API)** - WebRTC is a free, open project that provides browsers and mobile applications with Real-Time Communications (RTC) capabilities via simple APIs. The WebRTC components have been optimized to best serve this purpose.
+* **[IDLs](https://developer.mozilla.org/en-US/docs/Glossary/IDL)** - Not every developer will have a need for understanding [IDLs](https://developer.mozilla.org/en-US/docs/Glossary/IDL) but but there's a good argument for having more JavaScript developers aware of their existence and hopefully the ability for making use of them as well.
+* **[WebAssembly](https://developer.mozilla.org/en-US/docs/WebAssembly)** - WebAssembly is a comparatively new technology that allows you to run code written in languages other than JavaScript on the web. It's a low-level assembly-like language with a compact binary format that runs with near-native performance and provides languages such as C/C++ and Rust with a compilation target so that they can run on the web.

content/roadmaps/100-frontend/content/123-web-assembly.md

@@ -1,10 +0,0 @@
-# Web Assembly
-
-WebAssembly is a new type of code that can be run in modern web browsers — it is a low-level assembly-like language with a compact binary format that runs with near-native performance and provides languages such as C/C++, C# and Rust with a compilation target so that they can run on the web. It is also designed to run alongside JavaScript, allowing both to work together.
-
-<ResourceGroupTitle>Free Content</ResourceGroupTitle>
-<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://webassembly.org/'>Official Website</BadgeLink>
-<BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://webassembly.org/getting-started/developers-guide/'>Official Getting Started to Web Assembly</BadgeLink>
-<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=3sU557ZKjUs'>An introduction to WebAssembly</BadgeLink>
-<BadgeLink colorScheme='yellow' badgeText='Read' href='https://thenewstack.io/what-is-webassembly/'>What Is WebAssembly — and Why Are You Hearing So Much About It?</BadgeLink>
-<BadgeLink colorScheme='yellow' badgeText='Read' href='https://thenewstack.io/what-is-webassembly-and-why-do-you-need-it/'>What Is WebAssembly and Why Do You Need It?</BadgeLink>

public/sitemap.xml

@@ -123,7 +123,7 @@
 <url>
               <loc>https://roadmap.sh/graphql</loc>
               <changefreq>monthly</changefreq>
-              <lastmod>2022-12-19T18:21:56.429Z</lastmod>
+              <lastmod>2022-12-19T18:23:02.999Z</lastmod>
               <priority>1.0</priority>
           </url>
 <url>