add: documentation on behalf of siva

docs/ArtGallery/Lighthouse Project/LighthouseReviewReport.md

@@ -0,0 +1,81 @@
+# Report on task: Review Research from T1 and create backlog
+
+I have reviewed two reports on the Lighthouse scores and identified the issues that needed to be
+rectified. One report was a review on the desktop app and the other was a review on the mobile app.
+Both had many errors so, I had to analyse both reports and did some research on finding
+recommendations and solutions for the issue identified.
+
+## Desktop App
+
+For the desktop app, here are the problems/recommendations I have identified from the report:
+
+- Properly size images (add explicit width & height for images)
+- Work on reducing network payloads
+- Serve static assets with efficient cache policy
+- Optimise the Largest Contentful Paint (make it faster):
+  - Eliminate resource load delay
+  - Eliminate element render delay
+  - Reduce resource load time
+  - Reduce time to first byte
+- Reduce the impact of third-party code (identify slow third-party JavaScript)
+- Reduce JavaScript execution time:
+  - Remove unused code
+  - Minify and compress code
+  - Implement code splitting
+  - Cache code with PRPL pattern
+- Minimise main thread work:
+  - Evaluate the script (debounce input handlers, use web workers)
+  - Check style layout (reduce complexity of style calculations, avoid large, complex layouts).
+  - Rendering (manage layer count, simplify paint complexity, and reduce paint areas)
+  - Parse HTML and CSS (extract critical CSS, minify CSS, defer non-critical CSS)
+- Reduce resource counts and transfer sizes (CSS & JavaScript, Images, Fonts, Documents, Media)
+- Minify JavaScript
+- Improve page loading speed:
+  - Using Preconnect to required origins
+  - Preload key requests
+- Minimise critical request depth:
+  - Minimise number of critical resources (eliminate them, defer their download, etc)
+  - Optimize the number of critical bytes and reduce the download time
+  - Optimize the order for the remaining resources to be loaded (download all critical assets early
+    to shorten critical path length)
+
+## Mobile App
+
+For the mobile app, here are the problems/recommendations I have identified from the report:
+
+- Properly size images (add explicit width & height for images)
+- Work on reducing network payloads
+- Serve static assets with efficient cache policy
+- Optimise the Largest Contentful Paint (make it faster):
+  - Eliminate resource load delay
+  - Eliminate element render delay
+  - Reduce resource load time
+  - Reduce time to first byte
+- Improve mobile friendliness (appropriately size tap targets)
+- Reduce the impact of third-party code (identify slow third-party JavaScript)
+- Reduce JavaScript execution time:
+  - Remove unused code
+  - Minify and compress code
+  - Implement code splitting
+  - Cache code with PRPL pattern
+- Minimise main thread work:
+  - Evaluate the script (debounce input handlers, use web workers)
+  - Check style layout (reduce complexity of style calculations, avoid large, complex layouts).
+  - Rendering (manage layer count, simplify paint complexity, and reduce paint areas)
+  - Parse HTML and CSS (extract critical CSS, minify CSS, defer non-critical CSS)
+- Reduce resource counts and transfer sizes (CSS & JavaScript, Images, Fonts, Documents, Media)
+- Minify JavaScript
+- Improve page loading speed:
+  - Using Preconnect to required origins
+  - Preload key requests
+- Minimise critical request depth:
+  - Minimise number of critical resources (eliminate them, defer their download, etc)
+  - Optimize the number of critical bytes and reduce the download time
+  - Optimize the order for the remaining resources to be loaded (download all critical assets early
+    to shorten critical path length)
+- Shorten main-thread tasks
+- Check and use discernible name for links
+- Add meta description to document
+
+I have added cards and allocated story points for each of these problems and recommendations into
+the Trello board under the ‘Lighthouse Project Implementation’ section.

docs/ArtGallery/Lighthouse Project/SpikeUpskillingReport.md

@@ -0,0 +1,59 @@
+# Report on Upskilling
+
+## JavaScript basics with HTML and CSS
+
+I have spent some time upskilling to contribute to this project. So far, I have learnt the basics of
+using JavaScript with HTML and CSS. I have completed a 7-hour course online and followed through
+each chapter of the basics and I understand the basic concepts of working with these languages
+together for web development.
+
+The online courses focused mainly on the fundamentals of JavaScript, HTML and CSS. I have learnt a
+few important information from this course:
+
+- JavaScript basics
+- Modifying text styles, text boxes and images using CSS
+- Chrome DevTools – tool for debugging and inspecting code
+- CSS Box Model – designing and positioning elements on a website. Structure of HTML
+
+### Courses for this upskilling
+
+- HTML to CSS Full Course (Beginner)
+- JavaScript, HTML & CSS Basics
+
+## CSS and Javascript, vue.js upskilling
+
+I have learnt how to modify existing CSS code to remove unnecessary code without changing the
+appearance of the website. I have also learnt how vue.js works and how to make changes to existing
+code. This is to help with tasks related to improving network payloads, . Here is a list of what I
+have learnt during this upskilling:
+
+- remove unused CSS code
+- remove unused JavaScript code
+- including webpacks to help with CSS & JS codes
+- purpose of vue.js, and how it functions
+
+### Topics covered
+
+- Removing unused CSS, JavaScript and HTML code
+- Learn webpacks to help minify CSS, JavaScript and HTML
+- Vue.js for beginners
+
+## Lazy loading, TreeShaking and Ant Design upskilling
+
+I have learnt how to implement lazy routing and TreeShaking into the existing code to help with some
+performance issues. I have also learnt about Ant Design, it's purpose and how it works. This
+upskilling helps with tasks related to PRPL and modifying/reducing impact of thirs party code. I
+have learnt the following:
+
+- What is lazy routing
+- How to properly implement lazy loading
+- What is TreeShaking and what does it to
+- How to implement TreeShaking
+- What is Ant Design and why is it used
+
+### Topics covered for this upskilling
+
+- Vue router tutorial
+- Lazy routing and code splitting
+- What is TreeShaking and how to implement
+- Ant Design courses