Add bonus content to frontend roadmap

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

@@ -142,5 +142,5 @@
   "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:flutter": "/roadmaps/100-frontend/content/122-desktop-applications/102-flutter.md",
-  "web-assembly": "/roadmaps/100-frontend/content/123-web-assembly.md"
+  "bonus-content": "/roadmaps/100-frontend/content/123-bonus-content.md"
 }

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

@@ -0,0 +1,14 @@
+# 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.
+
+* **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.
+* **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/)**.
+* **[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>