ramidecodes / valparaiso

Adventures of the Valparaiso Website

Valparaiso website

Initial scaffolding was done by vue-CLI using the Webpack template

Using runtime-only build of Vue

Additional core dependencies added: vuex (state management), axios (http client), firebase (Firebase Javascript SDK), vue-touch (Hammer.js wrapper for Vue.js), anime-js (JavaScript Animation Engine)

Staging

valparaiso.surge.sh will be regularly updated to reflect the latest stage of development!

NPM commands

The build command will use surge to deploy to staging. You'll need to install it.

Check package.json for additional details and commands that might not be listed here.

# install dependencies
$ npm install

# serve with hot reload at localhost:8080
$ npm run dev

# build and deploy to staging (new developers will first need to be added as collaborator to deploy to staging!)
$ npm run build

# build locally
$ npm run build-local

For detailed explanation on how the Webpack template works, checkout the guide and docs for vue-loader.

Service worker and offline caching

A service worker is generated to cache all assets for offline use. The site is a fully functional Progressive Web App.

Lighthouse

You're recommended to install Google's Lighthouse for performance auditing. PWA score should always be 100. The rest should score above 80.

Releases / Roadmap

• Version 2.0 - Initial release
  • October 2017
    • Initial release of the new website
• Version 2.1 - First iteration
  • November 2017
  • Tweak and expand initial release
    • layout optimizations
    • transitions
    • animations
    • copy changes

---

Additional info, hints and tips:

In no particular order..

Only seeing the Under Construction page?

Switch the site mode to 0 or 1 in /src/config/index.js!

Styleguide

Adhere to the official VueJS styleguide! Partially enforced by the linting configuration.

Image optimization

Done automatically for all images [png|jpe?g|gif|svg].

Convert embedded SVG

You can convert any embedded SVG (<img src="something.svg">) to inline SVG by adding the markup-inline tag to the img element like so: <img markup-inline src="something.svg">. That way you can easily target the SVG's elements (svg > path etc) with e.g. CSS.

Linting

Refer to .eslintrc.js for configuration. The default extends JavaScript Standard Style and eslint-plugin-vue to enforce the official VueJS style guide as much as possible.

HTTP requests

Using Axios which returns promises, allowing us to utilize async/await.

Folder/codebase structure

• Pages [ /src/pages/ ]
  • top level components that are connected to routes. These are essentially pages.
• Components [ /src/components/ ]
  • reusable elements that are used by pages and sometimes other components. These are your regular components like a list item.

Maintainable size

Try to keep components to 100 lines or less. If your component gets bigger than that it might be time to critically analyze it and possibly break it up into smaller (sub-)components.

Devtools

Install and use the Vue Devtools!

---

---

Enjoy ✌️