Add bonus content to frontend roadmap

pull/3165/head
Kamran Ahmed 2 years ago
parent 1a493a9dbe
commit 8dd1665cd0
  1. 2
      content/roadmaps/100-frontend/content-paths.json
  2. 14
      content/roadmaps/100-frontend/content/123-bonus-content.md
  3. 10
      content/roadmaps/100-frontend/content/123-web-assembly.md
  4. 3839
      public/project/frontend.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"
}

@ -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.

@ -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>

File diff suppressed because it is too large Load Diff
Loading…
Cancel
Save