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.
<BadgeLinkcolorScheme='yellow'badgeText='Read'href='https://web.dev/fast/'> Fast load times: Techniques for improving site performance.</BadgeLink>
<BadgeLinkcolorScheme='yellow'badgeText='Read'href='https://web.dev/apply-instant-loading-with-prpl/'>Apply instant loading with PRPL</BadgeLink>
<BadgeLinkcolorScheme='yellow'badgeText='Read'href='https://web.dev/rail/'>Measure performance with the RAIL model</BadgeLink>
<BadgeLinkcolorScheme='yellow'badgeText='Read'href='https://www.freecodecamp.org/news/introduction-to-chrome-lighthouse/'>Introduction to Chrome Lighthouse</BadgeLink>
<BadgeLinkcolorScheme='yellow'badgeText='Read'href='https://developers.google.com/web/fundamentals/performance/user-centric-performance-metrics'>Web Performance Metrics - Google Developers</BadgeLink>
<BadgeLinkcolorScheme='yellow'badgeText='Read'href='https://developers.google.com/web/fundamentals/performance/user-centric-performance-metrics'>Web Performance Metrics - Google Developers</BadgeLink>
<BadgeLinkcolorScheme='yellow'badgeText='Read'href='https://web.dev/metrics/'>Measuring performance and user experience - Google Developers</BadgeLink>
<BadgeLinkcolorScheme='yellow'badgeText='Read'href='https://web.dev/metrics/'>Measuring performance and user experience - Google Developers</BadgeLink>
<BadgeLinkcolorScheme='yellow'badgeText='Read'href='https://developer.mozilla.org/en-US/docs/Web/Guide/Performance'>Measuring performance and user experience - MDN</BadgeLink>
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.
* **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.
* **[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
* Have a look at [Qwik](https://qwik.builder.io/) and **[Partytown](https://partytown.builder.io/)**.
* 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.
* **[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.
* **[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.
* **[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.
Kamran Ahmed
2 years ago