Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 0d44c55

Browse files
Merge pull request #35 from PracticeJavaScript/keybindings
Keybindings for problem navigation
2 parents 3ce2113 + 19b6b49 commit 0d44c55

File tree

13 files changed

+195
-162
lines changed

13 files changed

+195
-162
lines changed

‎.babelrc

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
{
2+
"presets": [
3+
["env", {
4+
"targets": {
5+
"browsers": ["last 2 versions"],
6+
"uglify": true
7+
}
8+
}]
9+
]
10+
}

‎README.md

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
[ ![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)
44
[![Build Status](https://travis-ci.org/PracticeJavaScript/practicejavascript.com.svg?branch=master)](https://travis-ci.org/PracticeJavaScript/practicejavascript.com)
55

6-
![ScreenShot of practicejavascript.com](https://cldup.com/9rdvK8A98t.png)
6+
![ScreenShot of practicejavascript.com](https://cldup.com/cFITECDXpD.png)
77

88
## Principles
99
- Fast, easy to start. No delays.
@@ -29,9 +29,11 @@ firebase serve
2929
```
3030

3131
- That will build it all and watch the css, img, and js assets.
32-
- Then you can load up `http://localhost:5000` in a browser. narf!
32+
- Then you can load up `http://localhost:5000` or `public/index.html`in a browser. narf!
3333
`/src/index.js` is the main file you'll want to edit for functionality.
3434
- 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
35+
- CSS is auto-prefixed for the supported browserslist, so don't manually add any browser prefixes to CSS src.
36+
- NOTE: If you change the UI, please update the screenshot at top of this README
3537

3638
## How To Add New Problems
3739
- Problems are at `/src/problems/*.js`
@@ -54,3 +56,6 @@ Each test must have:
5456
This test function will be run on code submission, and MUST return boolean. `output` param is available.
5557
`output` is the output of the JavaScript evaluation of the user's code submission.
5658
This test function may make chai.js assertions or any other comparison against the `output` value.
59+
60+
## Browser support
61+
- See `browserslist` settings in package.json

‎gulpfile.js

Lines changed: 27 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,6 @@
1+
// DEPS
2+
// ============================================================
3+
14
const gulp = require('gulp');
25
const sourcemaps = require('gulp-sourcemaps');
36
const browserify = require('browserify');
@@ -6,30 +9,41 @@ const buffer = require('vinyl-buffer');
69
const uglify = require('gulp-uglify');
710
const watchify = require('watchify');
811
const babel = require('babelify');
9-
const es2015 = require('babel-preset-es2015');
1012
const postcss = require('gulp-postcss');
1113
const autoprefixer = require('autoprefixer');
1214
const cssnano = require('cssnano');
1315
const svgo = require('gulp-svgo');
1416
const sass = require('gulp-sass');
1517
const livereload = require('gulp-livereload');
1618

17-
function conf() {
18-
const opts = {};
19-
opts.builtins = false;
20-
opts.entries = ['src/js/index.js'];
21-
opts.debug = true;
22-
opts.insertGlobalVars = {
19+
// CONFIG
20+
// ============================================================
21+
const browserslist = require('./package.json').browserslist;
22+
23+
const opts = {
24+
builtins: false,
25+
entries: ['src/js/index.js'],
26+
debug: true,
27+
insertGlobalVars: {
2328
global: glob
24-
};
25-
return opts;
26-
}
29+
}
30+
};
2731

2832
const uglifyConf = {};
2933

34+
// TASKS
35+
// ============================================================
36+
3037
function compile(watch) {
31-
const opts = conf();
32-
const bundler = watchify(browserify(opts).transform([babel, es2015]));
38+
const bundler = watchify(browserify(opts).transform(babel.configure({
39+
presets: [
40+
['env', {
41+
targets: {
42+
browsers: browserslist
43+
}
44+
}]
45+
]
46+
})));
3347
function rebundle() {
3448
return bundler.bundle()
3549
.on('error', err => {
@@ -64,7 +78,7 @@ function watch() {
6478

6579
gulp.task('css', () => {
6680
const plugins = [
67-
autoprefixer({browsers: ['last 1 version']}),
81+
autoprefixer({browsers: browserslist}),
6882
cssnano()
6983
];
7084
return gulp.src('./src/css/style.scss')

‎package.json

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,13 @@
1010
"test": "xo",
1111
"build": "./node_modules/.bin/gulp build",
1212
"watch": "./node_modules/.bin/gulp watch",
13-
"precommit": "lint-staged"
13+
"precommit": "yarn test",
14+
"prepush": "yarn test"
1415
},
16+
"browserslist": [
17+
"> 1%",
18+
"last 1 versions"
19+
],
1520
"xo": {
1621
"env": [
1722
"node",
@@ -43,7 +48,6 @@
4348
"babelify": "^7.3.0",
4449
"cssnano": "^3.10.0",
4550
"gulp": "^3.9.1",
46-
"gulp-bro": "^1.0.2",
4751
"gulp-postcss": "^6.4.0",
4852
"gulp-sourcemaps": "^2.5.1",
4953
"gulp-uglify": "^2.1.2",
@@ -57,6 +61,7 @@
5761
"xo": "^0.18.1"
5862
},
5963
"devDependencies": {
64+
"babel-preset-env": "^1.4.0",
6065
"babel-preset-es2017": "^6.24.1",
6166
"babel-preset-latest": "^6.24.1",
6267
"browserify": "^14.1.0",

‎public/dist/css/style.css

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎public/dist/js/bundle.min.js

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎public/dist/js/bundle.min.js.map

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎public/index.html

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,6 @@
44
<title>Practice JavaScript</title>
55
<meta charset="UTF-8">
66
<meta name="viewport" content="width=device-width, initial-scale=1">
7-
<!--<link rel="stylesheet" href="./dist/css/min.min.css">-->
8-
<!--<link rel="stylesheet" href="https://cdn.jsdelivr.net/min/1.5/min.min.css">-->
97
<link href="./dist/css/style.css" rel="stylesheet">
108
</head>
119
<body>
@@ -17,15 +15,15 @@ <h1>Practice JavaScript!</h1>
1715
</span>
1816
<nav class="controls">
1917
<div>
20-
<img id="prev-problem" class="prev-problem" src="./dist/img/back.svg" alt="Previous problem" height="80">
18+
<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">
2119
<div class="title">Back</div>
2220
</div>
2321
<div>
2422
<img id="shuffle-problems" class="shuffle-problems" src="./dist/img/shuffle.svg" alt="Shuffle problems" title="Shuffle problems" height="80">
2523
<div class="title">Shuffle</div>
2624
</div>
2725
<div>
28-
<img id="next-problem" class="next-problem" src="./dist/img/next.svg" alt="Next problem" title="Next problem"height="80">
26+
<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">
2927
<div class="title">Next</div>
3028
</div>
3129
</nav>

‎src/css/lib/vars.scss

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,22 @@
1-
$persian-indigo: #2A0965;
2-
$medium-purple: #8D6BE8;
3-
$blue-gem: #492A9F;
4-
$light-blue-gem: lighten($blue-gem, 20%);
5-
$pinkish: #EB86BF;
6-
$amethyst: #A456D1;
7-
$light-amethyst: lighten($amethyst, 10%);
8-
$light-purple: lighten($medium-purple, 20%);
9-
$deep-lilac: #9D53B5;
1+
//$persian-indigo: #2A0965;
2+
//$medium-purple: #8D6BE8;
3+
//$blue-gem: #492A9F;
4+
//$light-blue-gem: lighten($blue-gem, 20%);
5+
//$pinkish: #EB86BF;
6+
//$amethyst: #A456D1;
7+
//$light-amethyst: lighten($amethyst, 10%);
8+
//$light-purple: lighten($medium-purple, 20%);
9+
//$deep-lilac: #9D53B5;
1010

1111
/* Palette generated by Material Palette - materialpalette.com/deep-purple/pink */
12-
$primary-color-dark: #512DA8;
13-
$primary-color: #673AB7;
14-
$primary-color-light: #D1C4E9;
15-
$primary-color-text: #FFFFFF;
16-
$accent-color: #FF4081;
17-
$primary-text-color: #212121;
18-
$secondary-text-color: #757575;
19-
$divider-color: #BDBDBD;
12+
//$primary-color-dark: #512DA8;
13+
//$primary-color: #673AB7;
14+
//$primary-color-light: #D1C4E9;
15+
//$primary-color-text: #FFFFFF;
16+
//$accent-color: #FF4081;
17+
//$primary-text-color: #212121;
18+
//$secondary-text-color: #757575;
19+
//$divider-color: #BDBDBD;
2020

2121
// $primary-color-dark: #303F9F;
2222
// $primary-color: #3F51B5;

‎src/css/style.scss

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,13 @@
2323
display: flex;
2424
align-items: center;
2525
justify-content: center;
26+
text-shadow: 0 0 10px rgba(255,255,255,1),
27+
// 0 0 20px rgba(255,255,255,1),
28+
// 0 0 30px rgba(255,255,255,1),
29+
0 0 40px $primary-color;
30+
// 0 0 70px $primary-color;
31+
// 0 0 80px $primary-color,
32+
// 0 0 100px $primary-color;
2633
}
2734
.site-heading h1 {
2835
font-size: 200%;
@@ -49,7 +56,7 @@
4956
.controls > div > :active,
5057
.controls > div > .active {
5158
background-color: $primary-color;
52-
transition: all200ms ease-in-out;
59+
transition: color100ms ease-in-out;
5360
}
5461
.problem-group {
5562
display: block;

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /