meta data for this page
Differences
This shows you the differences between two versions of the page.
Both sides previous revision Previous revision Next revision | Previous revision | ||
ixc2024:tech:wfrontend:criteria:start [2024/08/19 07:39] 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// | ||
- | | 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// | + | | 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:// |
| Green Code |^^^^ | | Green Code |^^^^ | ||
- | | Caching | No caching; redundant data fetching | Basic caching implemented | Advanced caching strategies with high cache hit rates | [[https// | + | | Caching | No caching; redundant data fetching | Basic caching implemented | Advanced caching strategies with high cache hit rates | [[https:// |
- | | Content (Assets) Optimization | Too large images, videos fetched fully | compressing of uploaded images, use of SVGs where possible, MP4 | Lazy loading, conducted font optimization, | + | | Content (Assets) Optimization | Too large images, videos fetched fully | compressing of uploaded images, use of SVGs where possible, MP4 | Lazy loading, conducted font optimization, |
- | | CDN Usage | No implementation of CDN | Basic use of CDN with some inefficiencies | + | | CDN Usage | No implementation of CDN | Basic use of CDN with some inefficiencies |
- | | 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// | + | | 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:// |
| 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, | | 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, | ||
| 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: | ||
+ | * [[ixc2024: | ||
+ | * [[ixc2024: | ||
+ | * [[ixc2024: | ||
+ | * [[ixc2024: | ||
+ | |||
+ | If you have time: | ||
* [[ixc2024: | * [[ixc2024: | ||
- | * [[ixc2024: | ||
- | * [[ixc2024: | ||
- | * [[ixc2024: | ||
- | * [[ixc2024: | ||
* [[ixc2024: | * [[ixc2024: | ||
- | * [[ixc2024: | + | |
** Green development ** | ** Green development ** | ||
* [[https:// | * [[https:// | ||
* [[https:// | * [[https:// | ||
* [[ixc2024: | * [[ixc2024: | ||
- | |||
- | TEMP: [[ixc2024: | ||