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	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	WebPack, 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	React Lazy
CDN Usage	No implementation of CDN	Basic use of CDN with some inefficiencies	Highly efficient CDN with edge caching and minimal latency	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	SonarLint, 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

Suggested Green Code practices

Patterns and Energy Consumption

Best practices for React

Tools

Testing web performance

Digital Beacon link- compares first and return visit to the websit

Globemallow 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

Website Carbon link- estimates the carbon emissions attributed to a website.

Lighthouse (open inspector)- dev tools tab that offers most of above mentioned analyses

Green Frame - open-source solution that allows developers to decarbonize their websites by detecting carbon leaks

Aalto University - Green Page Analyzer

EcoGrader - Gives extremely comprehensive analysis of your website

Green development

SonarLint - Tool that forces efficient code on the webpage-level

SonarQube - Tool that benchmarks your code and tells you how to improve upon it

WebPack - Code and media minifaction tool

TEMP: Green Code categories