PracticeJavaScript · spacerockzero · May 1, 2017 · Apr 30, 2017 · Apr 30, 2017 · Apr 30, 2017
diff --git a/.babelrc b/.babelrc
@@ -0,0 +1,10 @@
+{
+  "presets": [
+    ["env", {
+      "targets": {
+        "browsers": ["last 2 versions"],
+        "uglify": true
+      }
+    }]
+  ]
+}
diff --git a/README.md b/README.md
@@ -3,7 +3,7 @@
 [ ![Codeship Status for PracticeJavaScript/practicejavascript.com](https://app.codeship.com/projects/091c0e50-0a7c-0135-8b3c-6ed4d7e33e57/status?branch=master)](https://app.codeship.com/projects/214753)
 [![Build Status](https://travis-ci.org/PracticeJavaScript/practicejavascript.com.svg?branch=master)](https://travis-ci.org/PracticeJavaScript/practicejavascript.com)
 
-![ScreenShot of practicejavascript.com](https://cldup.com/9rdvK8A98t.png)
+![ScreenShot of practicejavascript.com](https://cldup.com/cFITECDXpD.png)
 
 ## Principles
 - Fast, easy to start. No delays.
@@ -29,9 +29,11 @@ firebase serve
 ```
 
 - That will build it all and watch the css, img, and js assets.
-- Then you can load up `http://localhost:5000` in a browser. narf!
+- Then you can load up `http://localhost:5000` or `public/index.html` in a browser. narf!
 `/src/index.js` is the main file you'll want to edit for functionality.
 - If you have the [LiveReload Chrome extension](https://chrome.google.com/webstore/detail/livereload/jnihajbhpnppcggbcgedagnkighmdlei) installed, it should do live css updates in your browser while gulp watch is running
+- CSS is auto-prefixed for the supported browserslist, so don't manually add any browser prefixes to CSS src.
+- NOTE: If you change the UI, please update the screenshot at top of this README
 
 ## How To Add New Problems
 - Problems are at `/src/problems/*.js`
@@ -54,3 +56,6 @@ Each test must have:
 This test function will be run on code submission, and MUST return boolean. `output` param is available.
 `output` is the output of the JavaScript evaluation of the user's code submission.
 This test function may make chai.js assertions or any other comparison against the `output` value.
+
+## Browser support
+- See `browserslist` settings in package.json
diff --git a/gulpfile.js b/gulpfile.js
@@ -1,3 +1,6 @@
+// DEPS
+// ============================================================
+
 const gulp = require('gulp');
 const sourcemaps = require('gulp-sourcemaps');
 const browserify = require('browserify');
@@ -6,30 +9,41 @@ const buffer = require('vinyl-buffer');
 const uglify = require('gulp-uglify');
 const watchify = require('watchify');
 const babel = require('babelify');
-const es2015 = require('babel-preset-es2015');
 const postcss = require('gulp-postcss');
 const autoprefixer = require('autoprefixer');
 const cssnano = require('cssnano');
 const svgo = require('gulp-svgo');
 const sass = require('gulp-sass');
 const livereload = require('gulp-livereload');
 
-function conf() {
-  const opts = {};
-  opts.builtins = false;
-  opts.entries = ['src/js/index.js'];
-  opts.debug = true;
-  opts.insertGlobalVars = {
+// CONFIG
+// ============================================================
+const browserslist = require('./package.json').browserslist;
+
+const opts = {
+  builtins: false,
+  entries: ['src/js/index.js'],
+  debug: true,
+  insertGlobalVars: {
     global: glob
-  };
-  return opts;
-}
+  }
+};
 
 const uglifyConf = {};
 
+// TASKS
+// ============================================================
+
 function compile(watch) {
-  const opts = conf();
-  const bundler = watchify(browserify(opts).transform([babel, es2015]));
+  const bundler = watchify(browserify(opts).transform(babel.configure({
+    presets: [
+      ['env', {
+        targets: {
+          browsers: browserslist
+        }
+      }]
+    ]
+  })));
   function rebundle() {
     return bundler.bundle()
       .on('error', err => {
@@ -64,7 +78,7 @@ function watch() {
 
 gulp.task('css', () => {
   const plugins = [
-    autoprefixer({browsers: ['last 1 version']}),
+    autoprefixer({browsers: browserslist}),
     cssnano()
   ];
   return gulp.src('./src/css/style.scss')

diff --git a/package.json b/package.json
@@ -10,8 +10,13 @@
     "test": "xo",
     "build": "./node_modules/.bin/gulp build",
     "watch": "./node_modules/.bin/gulp watch",
-    "precommit": "lint-staged"
+    "precommit": "yarn test",
+    "prepush": "yarn test"
   },
+  "browserslist": [
+    "> 1%",
+    "last 1 versions"
+  ],
   "xo": {
     "env": [
       "node",
@@ -43,7 +48,6 @@
     "babelify": "^7.3.0",
     "cssnano": "^3.10.0",
     "gulp": "^3.9.1",
-    "gulp-bro": "^1.0.2",
     "gulp-postcss": "^6.4.0",
     "gulp-sourcemaps": "^2.5.1",
     "gulp-uglify": "^2.1.2",
@@ -57,6 +61,7 @@
     "xo": "^0.18.1"
   },
   "devDependencies": {
+    "babel-preset-env": "^1.4.0",
     "babel-preset-es2017": "^6.24.1",
     "babel-preset-latest": "^6.24.1",
     "browserify": "^14.1.0",

diff --git a/public/dist/css/style.css b/public/dist/css/style.css
diff --git a/public/dist/js/bundle.min.js b/public/dist/js/bundle.min.js
diff --git a/public/dist/js/bundle.min.js.map b/public/dist/js/bundle.min.js.map
diff --git a/public/index.html b/public/index.html
@@ -4,8 +4,6 @@
     <title>Practice JavaScript</title>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <!--<link rel="stylesheet" href="./dist/css/min.min.css">-->
-    <!--<link rel="stylesheet" href="https://cdn.jsdelivr.net/min/1.5/min.min.css">-->
     <link href="./dist/css/style.css" rel="stylesheet">
   </head>
   <body>
@@ -17,15 +15,15 @@ <h1>Practice JavaScript!</h1>
       </span>
       <nav class="controls">
         <div>
-          <img id="prev-problem" class="prev-problem" src="./dist/img/back.svg" alt="Previous problem" height="80">
+          <img id="prev-problem" class="prev-problem" src="./dist/img/back.svg" alt="Previous problem" title="Previous problem (CMD + SHIFT + RETURN or CTRL + SHIFT + ENTER)" height="80">
           <div class="title">Back</div>
         </div>
         <div>
           <img id="shuffle-problems" class="shuffle-problems" src="./dist/img/shuffle.svg" alt="Shuffle problems" title="Shuffle problems" height="80">
           <div class="title">Shuffle</div>
         </div>
         <div>
-          <img id="next-problem" class="next-problem" src="./dist/img/next.svg" alt="Next problem" title="Next problem"height="80">
+          <img id="next-problem" class="next-problem" src="./dist/img/next.svg" alt="Next problem" title="Next problem (CMD + RETURN or CTRL + ENTER)" height="80">
           <div class="title">Next</div>
         </div>
       </nav>

diff --git a/src/css/lib/vars.scss b/src/css/lib/vars.scss
@@ -1,22 +1,22 @@
-$persian-indigo: #2A0965;
-$medium-purple: #8D6BE8;
-$blue-gem: #492A9F;
-$light-blue-gem: lighten($blue-gem, 20%);
-$pinkish: #EB86BF;
-$amethyst: #A456D1;
-$light-amethyst: lighten($amethyst, 10%);
-$light-purple: lighten($medium-purple, 20%);
-$deep-lilac: #9D53B5;
+// $persian-indigo: #2A0965;
+// $medium-purple: #8D6BE8;
+// $blue-gem: #492A9F;
+// $light-blue-gem: lighten($blue-gem, 20%);
+// $pinkish: #EB86BF;
+// $amethyst: #A456D1;
+// $light-amethyst: lighten($amethyst, 10%);
+// $light-purple: lighten($medium-purple, 20%);
+// $deep-lilac: #9D53B5;
 
 /* Palette generated by Material Palette - materialpalette.com/deep-purple/pink */
-$primary-color-dark:   #512DA8;
-$primary-color:        #673AB7;
-$primary-color-light:  #D1C4E9;
-$primary-color-text:   #FFFFFF;
-$accent-color:         #FF4081;
-$primary-text-color:   #212121;
-$secondary-text-color: #757575;
-$divider-color:        #BDBDBD;
+// $primary-color-dark:   #512DA8;
+// $primary-color:        #673AB7;
+// $primary-color-light:  #D1C4E9;
+// $primary-color-text:   #FFFFFF;
+// $accent-color:         #FF4081;
+// $primary-text-color:   #212121;
+// $secondary-text-color: #757575;
+// $divider-color:        #BDBDBD;
 
 // $primary-color-dark:   #303F9F;
 // $primary-color:        #3F51B5;

diff --git a/src/css/style.scss b/src/css/style.scss
@@ -23,6 +23,13 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  text-shadow: 0 0 10px rgba(255,255,255,1),
+              //  0 0 20px rgba(255,255,255,1),
+              //  0 0 30px rgba(255,255,255,1),
+               0 0 40px $primary-color;
+              //  0 0 70px $primary-color;
+              //  0 0 80px $primary-color,
+              //  0 0 100px $primary-color;
 }
 .site-heading h1 {
   font-size: 200%;
@@ -49,7 +56,7 @@
 .controls > div > :active,
 .controls > div > .active {
   background-color: $primary-color;
-  transition: all 200ms ease-in-out;
+  transition: color 100ms ease-in-out;
 }
 .problem-group {
   display: block;

diff --git a/src/js/index.js b/src/js/index.js
@@ -1,19 +1,18 @@
 (function (document, window) {
   // DEPENDENCIES
   // ============================================================
-
   const localforage = require('localforage');
 
   // PROBLEMS
   // ============================================================
-
   const problems = require('../problems/arrays.js');
 
   // CONFIG
   // ============================================================
 
   // Hoist current problem
   let currentProblem;
+
   // Keys to ignore while user is navigating around the textarea but not changing any code
   const ignoreKeyCodes = [
     9, // Tab
@@ -131,6 +130,8 @@
 
   function previousProblem() {
     console.log('previousProblem!');
+    // Activate back button, for visual queue of nav feedback
+    previousProblemButtonEl.classList.add('active');
     config.currentIndex = config.shuffle
       ? getRandomIndex(problems)
       : getPreviousIndex(problems);
@@ -141,6 +142,8 @@
 
   function nextProblem() {
     console.log('nextProblem!');
+    // Activate next button, for visual queue of nav feedback
+    nextProblemButtonEl.classList.add('active');
     config.currentIndex = config.shuffle
       ? getRandomIndex(problems)
       : getNextIndex(problems);
@@ -169,6 +172,7 @@
     testSuite(null, true);
   }
 
+  // TODO: Build the assert errors into the test dom on each update.
   function updateTests(testStatus, init) {
     if (init === true) {
       buildTests(currentProblem.tests);
@@ -201,7 +205,7 @@
         allPassed = false;
       }
     });
-    const testEls = Array.from(testSuiteEl.querySelectorAll('.test-state'));
+    const testEls = [].slice.call(testSuiteEl.querySelectorAll('.test-state'));
     testEls.forEach((testStatusEl, iter) => {
       if (testStatuses[iter] === true) {
         testStatusEl.innerHTML = '[&#x2713;]';
@@ -312,6 +316,10 @@
       previousProblemButtonEl.parentNode.classList.add('hidden');
     }
 
+    // Keybinding stuff
+    // ============================================================
+
+    // Debounced code validation
     const debouncedInputValidation = debounce(e => {
       // If not arrow keys or other non-character keys
       if (ignoreKeyCodes.indexOf(e.keyCode) === -1) {
@@ -320,8 +328,26 @@
       }
     }, 200);
 
+    function problemNav(e) {
+      // Go to previous problem keybinding
+      // If CMD/CTRL + SHIFT + RETURN/ENTER
+      if (config.shuffle === false && e.keyCode === 13 && e.shiftKey && (e.metaKey || e.ctrlKey)) {
+        // Go to next problem
+        previousProblem();
+      } else if (e.keyCode === 13 && !e.shiftKey && (e.metaKey || e.ctrlKey)) {
+      // Go to next problem keybinding
+      // If CMD/CTRL + RETURN/ENTER
+        // Go to next problem
+        nextProblem();
+      }
+    }
+
+    // Event Bindings
+    // ============================================================
+
     // Bind it up
-    codeEl.addEventListener('keyup', debouncedInputValidation);
+    codeEl.addEventListener('keydown', debouncedInputValidation);
+    document.addEventListener('keydown', problemNav);
     shuffleProblemsButtonEl.addEventListener('click', toggleShuffle);
     previousProblemButtonEl.addEventListener('click', previousProblem);
     nextProblemButtonEl.addEventListener('click', nextProblem);