==== Evaluation ==== ^ Metric ^ Needs improvement ^ Good ^ Excellent ^ References ^ | Sustainable Design decisions |^^^^ | Green UI Design | Created a tool in light mode | Created a tool in dark mode | Created a tool that is in dark mode by default, but can be toggled to light mode | | | Minimal features | design contains unnecessary features and flashy animations that affect negatively users | Minimalistic and understandable design (no flashy animations) | The flow of the application is simple and understandable with no unnecessary steps and clicks (+ good req) | | | Accessibility | No consideration regarding accessibility | Minimalistic design and applies color conventions | Minimalistic design, prevents user errors, and applies color conventions | | | User’s sustainability awareness | No prompts for energy-efficient settings or greener choices for end users | Some prompts for energy-efficient settings and greener choices | Frequent and encouraging prompts for green options with some potential incentives for the end user | [[https://greentheweb.com|Checklist for user-centered awareness features- UX design]] | | Green Code |^^^^ | Caching | No caching; redundant data fetching | Basic caching implemented | Advanced caching strategies with high cache hit rates | [[https://webpack.js.org/|WebPack]], [[https://react.dev/reference/react/cache|React Caching]] | | Content (Assets) Optimization | Too large images, videos fetched fully | compressing of uploaded images, use of SVGs where possible, MP4 | Lazy loading, conducted font optimization, different resolutions for different screen sizes, informed user choice for content quality | [[https://react.dev/reference/react/lazy|React Lazy]] | | CDN Usage | No implementation of CDN | Basic use of CDN with some inefficiencies | Highly efficient CDN with edge caching and minimal latency | [[https://help.hcltechsw.com/commerce/8.0.0/admin/tasks/tdccachemeasuring.html|Tool for measuring CDN efficiency]] | | Clean Code | a lot of unused methods and comments perceived in the team’s code | SonarLint was utilized to maintain code’s cleanness | SonarQube was utilized to maintain codebase and results are well documented and elaborated on | [[https://www.sonarsource.com/products/sonarlint/|SonarLint]], [[https://www.sonarsource.com/products/sonarqube/|SonarQube]] | | Data fetching | fetching data that is not being utilized | use of JSON, fetching only the truly necessary data | fetching images separated from fetching of other information, fetching when requested | Lighthouse, Browser console (inspect element) | | HTTP Requests | unnecessary and uncontrolled number of HTTP requests is happening (bug or intentionally implemented this way) | Uncontrolled HTTP requests are not happening and requests are optimized to certain extent | optimized way of requesting information and communicating through APIs | Lighthouse, Browser console (inspect element) | | Presented environmental sustainability knowledge |^^^^ | Energy efficiency tracking | : You did not track the energy efficiency of your system | : You measured the energy efficiency of your system once and presented it | : You measured the energy efficiency of your system regularly and presented the progression over time | See Tools below | | Data efficiency tracking | : You did not track the data efficiency of your system | : You measured the data efficiency of your system once and presented it | : You measured the data efficiency of your system regularly and presented it | See Tools below | | Identification of inefficiencies | : You did not identify the causes of inefficiencies in your system | : You identified and presented 2 causes of inefficiencies in your system and presented the solution to at least 1 | : You identified and presented 3 causes of inefficiencies in your system and presented the solution to each of them | See Tools below | ==== How do I meet the criteria? ==== === Recommended practices === * [[ixc2024:tech:wfrontend:criteria:GreenCode | Suggested Green Code practices]] * [[ixc2024:tech:wfrontend:criteria:Patterns_and_Energy_Consumption | Patterns and Energy Consumption]] * [[ixc2024:tech:wfrontend:criteria:React|Best practices for React]] === Tools === ** Testing web performance ** * [[ixc2024:tech:tools:DigitalBeacon|Digital Beacon]] [[https://digitalbeacon.co|link]] - compares first and return visit to the websit * [[ixc2024:tech:tools:Globemallow|Globemallow]] [[https://chromewebstore.google.com/detail/globemallow/jibhiolaefbcfiahgolfpmngjefngdmd|link]] - a browser add-on that generates a report on the environmental sustainability of the website and gives advice on how to optimize it, works when hosting a website locally * [[ixc2024:tech:tools:WebsiteCarbon|Website Carbon]] [[https://www.websitecarbon.com|link]] - estimates the carbon emissions attributed to a website. * [[ixc2024:tech:tools:lighthouse| Lighthouse]] (open inspector)- dev tools tab that offers most of above mentioned analyses * [[ixc2024:tech:tools:GreenPageAnalyzer|Aalto University - Green Page Analyzer]] [[https://greenpages.aalto.fi|link]] If you have time: * [[ixc2024:tech:tools:EcoGrader|EcoGrader]] - Gives extremely comprehensive analysis of your website * [[ixc2024:tech:tools:GreenFrame|Green Frame]] - open-source solution that allows developers to decarbonize their websites by detecting carbon leaks ** Green development ** * [[https://www.sonarsource.com/products/sonarlint/?s_campaign=SL-EUH-Brand&s_content=SonarLint&s_term=sonarlint&s_category=Paid&s_source=Paid%20Search&s_origin=Google&cq_src=google_ads&cq_cmp=19172896942&cq_con=145021525675&cq_term=sonarlint&cq_med=&cq_plac=&cq_net=g&cq_pos=&cq_plt=gp&gad_source=1&gclid=CjwKCAjwr7ayBhAPEiwA6EIGxPNqKULR9yPRICoA_9_qzHYR1yxDA5KaGMSiMt6ysMOdHW3DqKypQxoC1s0QAvD_BwE | SonarLint]] - Tool that forces efficient code on the webpage-level * [[https://www.sonarsource.com/products/sonarqube/developer-edition/?s_campaign=SQ-EU-Cities-Brand&s_content=SonarQube&s_term=sonarqube&s_category=Paid&s_source=Paid%20Search&s_origin=Google&cq_src=google_ads&cq_cmp=21283128645&cq_con=164767820560&cq_term=sonarqube&cq_med=&cq_plac=&cq_net=g&cq_pos=&cq_plt=gp&gad_source=1&gclid=CjwKCAjwr7ayBhAPEiwA6EIGxEsR9B3Gaa28QrzuHQ2e7IsYY3VYFio_ZnPTrKymNDfTMBWC8oxJLxoCpuoQAvD_BwE | SonarQube]] - Tool that benchmarks your code and tells you how to improve upon it * [[ixc2024:tech:tools:webpack| WebPack]] - Code and media minifaction tool