Add bonus content

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/111-performance-metrics.md

@@ -13,3 +13,4 @@ There are many tools and techniques available for measuring web performance metr
 <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/123-bonus-content.md

@@ -1,6 +1,6 @@
 # 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.
+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.
@@ -10,6 +10,7 @@ It is not required to complete the bonus content, it just expands on the topics
   * **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.