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/05/23 14:34] rubenhuygens |
ixc2024:tech:wfrontend:criteria:start [2024/08/26 07:06] (current) rubenhuygens [How do I meet the criteria?] |
||
|---|---|---|---|
| Line 1: | Line 1: | ||
| ==== Evaluation ==== | ==== Evaluation ==== | ||
| - | * [[ixc2024: | ||
| ^ Metric ^ Needs improvement ^ Good ^ Excellent ^ References ^ | ^ Metric ^ Needs improvement ^ Good ^ Excellent ^ References ^ | ||
| - | | Understanding of the challenge |^^^^ | ||
| - | | Process |^^^^ | ||
| - | | Agility | +0 No agreements were made on how to work in a team | +1 Plans were noted down on what needed to be accomplished each day | +2 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 | +0 No prototyping technique used | +1 Documented prototyping process, paper prototypes (Paper or Balsamiq) with brainstorming sessions and discussions that lead to it | +2 Team developed a Figma prototype that showcases the basic flow of the application (+ good req) | Figma, Balsamiq, https:// | ||
| - | | Tools used for analysis | +0 No analysis tools were used | +3 Used one tool to measure energy and data efficiency | +4 Used multiple tools to measure energy and data efficiency and noted to averages of them | | | ||
| - | | Tools used for (green) coding | +0 Used no tools beyond VScode, Netlify, React | + 1 Used SonarLint or SonarQube (or equivalent) | +2 Used SonarLint or SonarQube and WebPack | | | ||
| - | | Tools used for teamwork | +0 No teamwork tools used | +1 Used Git(Hub) | +2 Used Git(Hub) and Trello/Jira | GitHub, Trello, Jira | | ||
| | Sustainable Design decisions |^^^^ | | Sustainable Design decisions |^^^^ | ||
| - | | Green UI Design | +0 Created a tool in light mode | +1 Created a tool in dark mode | +2 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 | -1 design contains unnecessary features and flashy animations that affect negatively users | +1 Minimalistic and understandable design (no flashy animations) | +2 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 | -0 No consideration regarding accessibility | +1 Minimalistic design and applies color conventions | +2 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 | +0 No prompts for energy-efficient settings or greener choices for end users | +1 Some prompts for energy-efficient settings and greener choices | +2 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 | +0 No caching; redundant data fetching | +2 Basic caching implemented | +4 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 | -1 Too large images, videos fetched fully | + 2 compressing of uploaded images, use of SVGs where possible, MP4 | +4 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 | +0 No implementation of CDN | +3 Basic use of CDN with some inefficiencies | + | | CDN Usage | No implementation of CDN | Basic use of CDN with some inefficiencies |
| - | | Clean Code | -1 a lot of unused methods and comments perceived in the team’s code | +2 SonarLint was utilized to maintain code’s cleanness | +3 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 | -4 fetching data that is not being utilized | +1 use of JSON, fetching only the truly necessary data | +3 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 | -2 unnecessary and uncontrolled number of HTTP requests is happening (bug or intentionally implemented this way) | +2 Uncontrolled HTTP requests are not happening and requests are optimized to certain extent | +4 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 | +0: You did not track the energy efficiency of your system | +1: You measured the energy efficiency of your system once and presented it | +3: 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 | +0: You did not track the data efficiency of your system | +1: You measured the data efficiency of your system once and presented it | +3: 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 | +0: You did not identify the causes of inefficiencies in your system | +2: You identified and presented 2 causes of inefficiencies in your system and presented the solution to at least 1 | +4: 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 39: | 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: | ||