DinoPark front-end

A front-end for the repositioned Mozillians, to display, edit and search for people's profiles.

Setup

To install all resources for this project, please make sure to have Node installed, then run:

npm install

This will install the dependencies the project requires. Then run:

npm run serve

This will start a local server.

Unit tests are in the tests folder and ran with Jest.

We ensure our code complies to the Web Content Accessibility Guidelines (WCAG)], so that Mozillians is usable by all and we comply with relevant legislation.
- Example: our autocomplete works well with keyboard, screenreaders and dictation
We prefer web platform features to library-specific workarounds
- Example: we make sure form elements are in a form tag and submitting works (by pressing ENTER in an element, by firing form.submit(), by pressing GO on iOS, etc)
We embrace progressive enhancement to make our code more resilient with things like feature detection
- Examples: if we require geolocation to display something, we build the no-geo view first, make sure that is GOOD then add geo as an enhancement so that it is GREAT. An escalator is still stairs when the power is off.

We embrace the cascade where it makes sense.
We write as little CSS as possible.
We don't scope CSS with JS, we use ‘naming for scoping’, i.e. by sticking to unique names, we have workable enough ‘scopes’.
CSS is included with the highest level component that needs it. For example, styles that work for the whole app, go into the App.vue file. Styles that only apply to a Profile view go to Profile.vue, styles that only apply to tag commponents go to Tag.vue.
As a naming convention we follow BEM (block, element, modifier). Quick summary:
- .block is a component
- .block--modifier is a variation on the block component
- .block__element is something inside the block component
We make sure components look good (not necessarily the same) in the devices, browsers, platforms our users use.