Hubble Coding Guidelines for Contributors

A component:

• is a Vue.js single file component (SFC)
• uses properties to control the components' behaviour (configuration)
• uses <MiscLink> for internal anchors to make use of multilanguage
• imports child components dynamically
• uses garbage collection to avoid memory leaks

State management:

• uses pinia for managing states between components

Independent:

• has as few dependencies as possible

Responsive:

• is functional on all modern devices
• uses the style section of a SFC

Code Markup:

• use self-closing html tags in template
• takes into account all rules defined via eslint / prettier when programming
• uses ES6 JS Features

SEO:

• can render all relevant content server-side to facilitate search engine crawling
• contains valid HTML markup (only one H1 per page, meta descriptions, images alt tag, anchor rel tags)

Interface:

• always provides feedback to the user for all interactions, e.g. a transition or animation at a speed of 0.2 - 0.3 seconds
• displays a confirmation message when it comes to user input that triggers an API call that succeeds
• displays an error message when it comes to user input that triggers an API call that fails
• has a clear loading indicator and placeholders when an API call is made

Documentation:

• inline documentation in english