meta data for this page
  •  

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revision Previous revision
Next revision 		Previous revision
ixc2024:tech:wfrontend:criteria:start [2024/08/19 08:57]
salsabeel-tn 		ixc2024:tech:wfrontend:criteria:start [2024/08/26 07:06] (current)
rubenhuygens [How do I meet the criteria?]
Line 2: Line 2:
  
 ^ Metric ^ Needs improvement ^ Good ^ Excellent ^ References ^ ^ Metric ^ Needs improvement ^ Good ^ Excellent ^ References ^
-| Understanding of the challenge |^^^^ 
-| Process |^^^^ 
-| Agility | No agreements were made on how to work in a team |  Plans were noted down on what needed to be accomplished each day |  Plans were noted down on what needed to be accomplished each day; it was clearly communicated what work each team member took upon themselves | Trello/Jira | 
-| Tools used for design |  No prototyping technique used |  Documented prototyping process, paper prototypes (Paper or Balsamiq) with brainstorming sessions and discussions that lead to it |  Team developed a Figma prototype that showcases the basic flow of the application (+ good req) | Figma, Balsamiq, https//roadmap.sh/ux-design | 
-| Tools used for analysis |  No analysis tools were used |  Used one tool to measure energy and data efficiency |  Used multiple tools to measure energy and data efficiency and noted to averages of them | | 
-| Tools used for (green) coding |  Used no tools beyond VScode, Netlify, React |  Used SonarLint or SonarQube (or equivalent) |  Used SonarLint or SonarQube and WebPack | SonarLint, SonarQube, WebPack | 
-| Tools used for teamwork |  No teamwork tools used |  Used Git(Hub) |  Used Git(Hub) and Trello/Jira | GitHub, Trello, Jira | 
 | Sustainable Design decisions |^^^^ | 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 | | | 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) | | | 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 | | | 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]] |+| 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 |^^^^ | 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]] | +| 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]] | +| 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]] | +| 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]] |+| 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) | | 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) | | 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 |^^^^ | 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 | +| 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  | +| 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 |+| 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 | 
 + 
  
  
Line 37: Line 32:
 === Tools === === Tools ===
 ** Testing web performance ** ** 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:EcoGrader|EcoGrader]] - Gives extremely comprehensive analysis of your website
-  * [[ixc2024:tech:tools:DigitalBeacon|Digital Beacon]] -  compares first and return visit to the websit 
-  * [[ixc2024:tech:tools:Globemallow|Globemallow]] - a browser add-on that generates a report on the environmental sustainability of the website and gives advice on how to optimize it 
-  * [[ixc2024:tech:tools:WebsiteCarbon|Website Carbon]] - estimates the carbon emissions attributed to a website. 
-  * [[ixc2024:tech:tools:lighthouse| Lighthouse]] - dev tools tab that offers most of above mentioned analyses 
   * [[ixc2024:tech:tools:GreenFrame|Green Frame]] - open-source solution that allows developers to decarbonize their websites by detecting carbon leaks   * [[ixc2024:tech:tools:GreenFrame|Green Frame]] - open-source solution that allows developers to decarbonize their websites by detecting carbon leaks
-  * [[ixc2024:tech:tools:GreenPageAnalyzer|Aalto University - Green Page Analyzer]]+
 ** Green development ** ** 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/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   * [[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   * [[ixc2024:tech:tools:webpack| WebPack]] - Code and media minifaction tool
- 
-TEMP: [[ixc2024:tech:tools:evaluation| Green Code categories]]