update devDependencies, so things work with current node versions

.eslintrc

@@ -10,20 +10,20 @@
   "ecmaFeatures": {
     "jsx": true
   },
-  rules: {
+  "rules": {
-    'react/display-name': 1 ,
+    "react/display-name": 1 ,
-    'react/jsx-no-duplicate-props': 2,
+    "react/jsx-no-duplicate-props": 2,
-    'react/jsx-no-undef': 2,
+    "react/jsx-no-undef": 2,
-    'react/jsx-uses-react': 2,
+    "react/jsx-uses-react": 2,
-    'react/jsx-uses-vars': 2,
+    "react/jsx-uses-vars": 2,
-    'react/no-danger': 0,
+    "react/no-danger": 0,
-    'react/no-deprecated': 2,
+    "react/no-deprecated": 2,
-    'react/no-did-mount-set-state': [2, 'allow-in-func'],
+    "react/no-did-mount-set-state": [2],
-    'react/no-did-update-set-state': [2, 'allow-in-func'],
+    "react/no-did-update-set-state": [2],
-    'react/no-direct-mutation-state': 2,
+    "react/no-direct-mutation-state": 2,
-    'react/no-is-mounted': 2,
+    "react/no-is-mounted": 2,
-    'react/no-unknown-property': 2,
+    "react/no-unknown-property": 2,
-    'react/prop-types': 2,
+    "react/prop-types": 2,
-    'react/react-in-jsx-scope': 2
+    "react/react-in-jsx-scope": 2
   }
 }

.nvmrc

@@ -1 +1 @@
-v4.2.2
+v8.9.0

README.md

@@ -7,30 +7,30 @@ Simple dashboard that taps into the [opensensemap](http://opensensemap.org/) api
 ## Development environment
 To set up the development environment for this website, you'll need to install the following on your system:
 
-- Node (v4.2.x) & Npm ([nvm](https://github.com/creationix/nvm) usage is advised)
+- Node (v8.9.x) & yarn ([nvm](https://github.com/creationix/nvm) usage is advised)
 
 > The versions mentioned are the ones used during development. It could work with newer ones.
   Run `nvm use` to activate the correct version.
 
 After these basic requirements are met, run the following commands in the website's folder:
-```
+```sh
-$ npm install
+$ yarn install
 ```
 
 ### Getting started
 
-```
+```sh
-$ npm run serve
+$ yarn serve
 ```
 Compiles the sass files, javascript, and launches the server making the site available at `http://localhost:1337/`
 The system will watch files and execute tasks whenever one of them changes.
-The site will automatically refresh since it is bundled with livereload.  
+The site will automatically refresh since it is bundled with livereload.
-  
+
-The current code will show the values for the [DS Lisbon sensebox](http://opensensemap.org/#/explore/570629b945fd40c8197462fb).  
+The current code will show the values for the [Begga sensebox](http://opensensemap.org/#/explore/5b26181b1fef04001b69093c).
 This can be changed by setting the correct ids in `config/production.js`
 
 ### Other commands
 Compile the files to the `dist` folder ready for production.
 ```
 $ npm run build
-```
+```

app/assets/styles/_base.scss

@@ -114,9 +114,9 @@ a:active {
 }
 
 .site-headline {
-  @include col(12/12);
+  @include column(12/12);
   @include media(medium-up) {
-    @include col(6/12);
+    @include column(6/12);
   }
 }
 
@@ -171,10 +171,10 @@ a:active {
   margin-bottom: 2rem;
 
   @include media(large-up) {
-    @include col(6/12, $cycle: 2);
+    @include column(6/12, $cycle: 2);
   }
   @include media(xlarge-up) {
-    @include col(4/12, $cycle: 3, $uncycle: 2);
+    @include column(4/12, $cycle: 3);
   }
 
   &__header {
@@ -237,7 +237,7 @@ a:active {
     &__list  {
       @extend .clearfix;
       li {
-        @include col(6/12);
+        @include column(6/12);
         text-align: center;
 
         &:not(:last-child) {

app/assets/styles/main.scss

@@ -27,7 +27,7 @@
  * http://jeet.gs/
  */
 
-@import "jeet/index";
+@import "jeet/scss/index";
 
 
 /* Reboot

gulpfile.js

@@ -11,7 +11,7 @@ var browserify = require('browserify');
 var source = require('vinyl-source-stream');
 var buffer = require('vinyl-buffer');
 var sourcemaps = require('gulp-sourcemaps');
-var gutil = require('gulp-util');
+var log = require('fancy-log');
 var exit = require('gulp-exit');
 var rev = require('gulp-rev');
 var revReplace = require('gulp-rev-replace');
@@ -133,7 +133,7 @@ gulp.task('javascript', function () {
   }
 
   watcher
-  .on('log', gutil.log)
+  .on('log', log)
   .on('update', bundler);
 
   return bundler();
@@ -149,7 +149,7 @@ gulp.task('vendorScripts', function () {
     require: pkg.dependencies ? Object.keys(pkg.dependencies) : []
   });
   return vb.bundle()
-    .on('error', gutil.log.bind(gutil, 'Browserify Error'))
+    .on('error', err => log('Browserify Error', err))
     .pipe(source('vendor.js'))
     .pipe(buffer())
     .pipe(sourcemaps.init({loadMaps: true}))
@@ -202,7 +202,7 @@ gulp.task('styles', function () {
     .pipe($.sass({
       outputStyle: 'expanded',
       precision: 10,
-      includePaths: ['.'].concat(require('node-bourbon').includePaths).concat(['node_modules/jeet/scss'])
+      includePaths: ['.'].concat(require('node-bourbon').includePaths).concat(['node_modules'])
     }))
     .pipe($.sourcemaps.write())
     .pipe(gulp.dest('.tmp/assets/styles'))

package.json

@@ -38,48 +38,50 @@
     ]
   },
   "devDependencies": {
-    "babel": "^6.5.2",
+    "babel-cli": "^6.26.0",
     "babel-preset-es2015": "^6.5.0",
     "babel-preset-react": "^6.5.0",
-    "babelify": "^7.2.0",
+    "babelify": "^8.0.0",
     "browser-sync": "^2.11.1",
-    "browserify": "^13.0.0",
+    "browserify": "^16.2.2",
-    "collecticons-processor": "^2.0.0",
+    "collecticons-processor": "^3.1.0",
-    "del": "^2.2.0",
+    "del": "^3.0.0",
-    "envify": "^3.4.0",
+    "envify": "^4.1.0",
-    "eslint": "^1.0.0",
+    "eslint": "^4.19.1",
-    "eslint-config-semistandard": "^5.0.0",
+    "eslint-config-semistandard": "^12.0.1",
-    "eslint-config-standard": "^4.0.0",
+    "eslint-config-standard": "^11.0.0",
-    "eslint-plugin-promise": "^1.0.8",
+    "eslint-plugin-import": "^2.12.0",
-    "eslint-plugin-react": "^3.16.1",
+    "eslint-plugin-node": "^6.0.1",
-    "eslint-plugin-standard": "^1.3.2",
+    "eslint-plugin-promise": "^3.8.0",
+    "eslint-plugin-react": "^7.9.1",
+    "eslint-plugin-standard": "^3.1.0",
     "gulp": "^3.9.1",
-    "gulp-cache": "^0.4.2",
+    "gulp-cache": "^1.0.2",
-    "gulp-csso": "^1.0.1",
+    "gulp-csso": "^3.0.1",
     "gulp-exit": "0.0.2",
     "gulp-if": "^2.0.0",
-    "gulp-imagemin": "^2.4.0",
+    "gulp-imagemin": "^4.1.0",
     "gulp-load-plugins": "^1.2.0",
     "gulp-plumber": "^1.1.0",
-    "gulp-rev": "^7.0.0",
+    "gulp-rev": "^8.1.1",
     "gulp-rev-replace": "^0.4.3",
-    "gulp-sass": "^2.2.0",
+    "gulp-sass": "^4.0.1",
-    "gulp-size": "^2.0.0",
+    "gulp-size": "^3.0.0",
-    "gulp-sourcemaps": "^1.6.0",
+    "gulp-sourcemaps": "^2.6.4",
-    "gulp-uglify": "^1.5.2",
+    "gulp-uglify": "^3.0.0",
     "gulp-useref": "^3.0.5",
-    "gulp-util": "^3.0.7",
+    "jeet": "^7.2.0",
-    "jeet": "^6.1.2",
     "node-bourbon": "^4.2.3",
-    "node-notifier": "^4.5.0",
+    "node-notifier": "^5.2.1",
     "require-globify": "^1.3.0",
     "vinyl-buffer": "^1.0.0",
-    "vinyl-source-stream": "^1.1.0",
+    "vinyl-source-stream": "^2.0.0",
     "watchify": "^3.7.0"
   },
   "dependencies": {
     "babel-polyfill": "^6.3.14",
     "d3": "^3.5.16",
+    "fancy-log": "^1.3.2",
     "history": "^2.0.1",
     "isomorphic-fetch": "^2.2.1",
     "lodash": "^4.10.0",