From d4123c327c3c378cc86ff734297c286bd6d00c58 Mon Sep 17 00:00:00 2001 From: Kachi-Okorie Date: Wed, 22 Nov 2023 18:23:03 +1100 Subject: [PATCH] Help-hub-session-showcase --- astro.config.mjs | 44 ++++++---- .../Lighthouse/LighthouseReviewReport.md | 83 +++++++++++++++++++ .../troubleshooting doubtfire setup.md | 0 .../applications/Applications Epic-T12022.md | 71 ---------------- 4 files changed, 112 insertions(+), 86 deletions(-) create mode 100644 src/content/docs/products/art-gallery/Projects/Lighthouse/LighthouseReviewReport.md rename src/content/docs/products/ontrack/{issues-and-resolution => issues-and-resolutions}/troubleshooting doubtfire setup.md (100%) delete mode 100644 src/content/docs/products/splashkit/applications/Applications Epic-T12022.md diff --git a/astro.config.mjs b/astro.config.mjs index 008d3cc0..5f929a8b 100644 --- a/astro.config.mjs +++ b/astro.config.mjs @@ -87,17 +87,31 @@ export default defineConfig({ autogenerate: { directory: "products/art-gallery/projects", }, + items: [ + { + label: "Lighthouse", + autogenerate: { + directory: "products/art-gallery/Projects/Lighthouse", + }, + }, + { + label: "Dockerization", + autogenerate: { + directory: "products/art-gallery/Projects/dockerization", + }, + }, + ], }, { label: "Documentation", autogenerate: { - directory: "products/art-gallery/documentation", + directory: "products/art-gallery/Documentation", }, }, { label: "Issues and Resolutions", autogenerate: { - directory: "products/art-gallery/issues-and-resolution", + directory: "products/art-gallery/issues-and-resolutions", }, }, ], @@ -153,19 +167,19 @@ export default defineConfig({ { label: "Projects", autogenerate: { - directory: "products/courseflow/projects", + directory: "products/courseflow/Projects", }, }, { label: "Documentation", autogenerate: { - directory: "products/courseflow/documentation", + directory: "products/courseflow/Documentation", }, }, { label: "Issues and Resolutions", autogenerate: { - directory: "products/courseflow/issues-and-resolution", + directory: "products/courseflow/issues-and-resolutions", }, }, ], @@ -212,7 +226,7 @@ export default defineConfig({ { label: "Issues and Resolutions", autogenerate: { - directory: "products/ontrack/issues-and-resolution", + directory: "products/ontrack/issues-and-resolutions", }, }, ], @@ -235,19 +249,19 @@ export default defineConfig({ autogenerate: { directory: "products/splashkit/documentation", }, - items: [ - { - label: "Applications", - autogenerate: { - directory: "products/splashkit/documentation/applications", - }, - }, - ], + // items: [ + // { + // label: "Applications", + // autogenerate: { + // directory: "products/splashkit/documentation/applications", + // }, + // }, + // ], }, { label: "Issues and Resolutions", autogenerate: { - directory: "products/splashkit/issues-and-resolution", + directory: "products/splashkit/issues-and-resolutions", }, }, ], diff --git a/src/content/docs/products/art-gallery/Projects/Lighthouse/LighthouseReviewReport.md b/src/content/docs/products/art-gallery/Projects/Lighthouse/LighthouseReviewReport.md new file mode 100644 index 00000000..b0f36264 --- /dev/null +++ b/src/content/docs/products/art-gallery/Projects/Lighthouse/LighthouseReviewReport.md @@ -0,0 +1,83 @@ +--- +title: Review Research from T1 +--- + +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. diff --git a/src/content/docs/products/ontrack/issues-and-resolution/troubleshooting doubtfire setup.md b/src/content/docs/products/ontrack/issues-and-resolutions/troubleshooting doubtfire setup.md similarity index 100% rename from src/content/docs/products/ontrack/issues-and-resolution/troubleshooting doubtfire setup.md rename to src/content/docs/products/ontrack/issues-and-resolutions/troubleshooting doubtfire setup.md diff --git a/src/content/docs/products/splashkit/applications/Applications Epic-T12022.md b/src/content/docs/products/splashkit/applications/Applications Epic-T12022.md deleted file mode 100644 index 5f4ab21a..00000000 --- a/src/content/docs/products/splashkit/applications/Applications Epic-T12022.md +++ /dev/null @@ -1,71 +0,0 @@ ---- -title: Application Epic T1-2022 ---- - -## Background/Context - -SplashKit is widely used to create 2D games. It is proposed to extend this for games to be set up -and added to a physical arcade machine where they can be played and showcased. - -## Business value - -Games are an attraction to different age groups, this functionality of providing games and an -article including content to help create similar games would be helpful for interested individuals. - -## What needs to happen - -Creating a method to upload games and store them locally on a system, have them be selected and -played at the user’s leisure. Validation checks on all uploaded games before being playable -(manually, at least initially) for malice/inappropriate content. Create a cool game demonstrating -all functionality of SplashKit. A step-by-step article guide of How to create a Cool game. Guide -should be uploaded to the SplashKit.io website. Document design decisions, process and -how-to-guides. - -## In-Scope - -The first game of Arcade machine. Article guide. - -## Out-Scope - -Building the hardware (presently; may be in scope for future trimesters) - -## Assumptions/Dependencies - -First game needs to be ready, in order to add it to the arcade/showcase. Raspberry Pi will merge -with preconfigured controls without too much complication - -## UI/UX considerations - -- Arcade layout -- Arcade gallery/selection menu UI needs to fit the SplashKit design palette, consistent with - existing SplashKit style (matches website style, etc) -- UI should be user friendly - -## Analytics considerations - -Comparison of different game functionality and time management, upload/download statistics? - -## Regulation & Compliance considerations - -- Secure channels, hardware safety, adequate encryptions and system protection. -- User and publisher consent - -## Operation/Training/Support considerations - -Team members will need to become familiar with SplashKit, C++, potentially Clang (compiler). Advise -teams 2 weeks in advance of planned release - -## What are the challenges? - -- Existing skill gaps (team members needing to learn new languages). -- Creating the physical arcade while remote (for later stages – can't currently implement physical - arcade aspect) -- Creating a game without knowing physical requirements - -## Acceptance criteria - -- Successful execution of building arcade (a user should be able to select and play a game to - completion on a physical arcade machine) -- Functional game (written using SplashKit) -- Step by step guide on how to create game -- Channel exists for users to upload/download validated games