From e9eb162250c9126af1c5b4cdcc22b1f3e3c57141 Mon Sep 17 00:00:00 2001 From: Kamran Ahmed Date: Thu, 22 Dec 2022 15:19:25 +0400 Subject: [PATCH] Add bonus content --- .../117-progressive-web-apps/101-performance.md | 12 ------------ .../111-performance-metrics.md | 1 + .../100-frontend/content/123-bonus-content.md | 3 ++- 3 files changed, 3 insertions(+), 13 deletions(-) delete mode 100644 content/roadmaps/100-frontend/content/117-progressive-web-apps/101-performance.md diff --git a/content/roadmaps/100-frontend/content/117-progressive-web-apps/101-performance.md b/content/roadmaps/100-frontend/content/117-progressive-web-apps/101-performance.md deleted file mode 100644 index c4a8a3486..000000000 --- a/content/roadmaps/100-frontend/content/117-progressive-web-apps/101-performance.md +++ /dev/null @@ -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. - - Fast load times: Techniques for improving site performance. -PRPL pattern -Apply instant loading with PRPL -Measure performance with the RAIL model -Introduction to Chrome Lighthouse -Lighthouse PWA Analysis Tool -Lighthouse: Optimize website speed -PWA Tutorial: Lighthouse Audit diff --git a/content/roadmaps/100-frontend/content/117-progressive-web-apps/111-performance-metrics.md b/content/roadmaps/100-frontend/content/117-progressive-web-apps/111-performance-metrics.md index 49197b144..1a311e677 100644 --- a/content/roadmaps/100-frontend/content/117-progressive-web-apps/111-performance-metrics.md +++ b/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 Free Content Web Performance Metrics - Google Developers Measuring performance and user experience - Google Developers +Measuring performance and user experience - MDN diff --git a/content/roadmaps/100-frontend/content/123-bonus-content.md b/content/roadmaps/100-frontend/content/123-bonus-content.md index b44766698..b63c2f936 100644 --- a/content/roadmaps/100-frontend/content/123-bonus-content.md +++ b/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.