Trying to install gulp-sass-lint fails because some of its dependencies are not
met:
> npm install gulp-sass-lint
> npm ERR! Darwin 15.3.0
> npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "install" "gulp-sass-lint"
> npm ERR! node v5.7.0
> npm ERR! npm v3.7.5
>
> npm ERR! No compatible version found: lodash.upperfirst@^3.0.0
> npm ERR! Valid install targets:
> npm ERR! 4.1.2, 4.1.1, 4.1.0, 4.0.2, 4.0.1, 4.0.0
> npm ERR!
This commit removes it until we can work out what the problem is.
While looking at front end performance I noticed that the GOV.UK Template CSS
and Javascript files weren’t being minified, so were being served with (for
example) lots of comments still in the code.
This changes the Gulp task from simply copying the files to also minfiying them,
where appropriate.
Because this commit’s parent added a few new images, we are now serving at
least a handful of images, therefore a few additional HTTP requests. It’s better
to combine multiple HTTP requests into one for performance reasons (up to a
point).
This commit adds an extra step to the preprocessing of SASS files which takes
any images it finds, base64 encodes them and inlines them into the distributed
CSS files.
It also modifies the content security policy to allow inline images.
This takes the original prototype version of this page, and, using the same
fake data (ie nothing is wired up):
- adds an invite users page
- adds an edit (and delete) user page
Both these pages allow the user to set another user’s permissions.
This commit adds images for the ticks and crosses, so we have control over their
appearance.
Since https://github.com/alphagov/govuk_template/pull/193 the Jinja version of
the GOV.UK Template is published with a `package.json`. This means
- we can consume it via NPM
- so we can get rid of Bower
Which is what this commit does.
Similar to how PEP8 enforces Python style, there are tools for front end code:
- jshint[1] for Javascript
- sass-lint[2] for SASS
This commit adds the Gulp plugins for both, and sets up some sensible rules
(which can be iterated on).
It also adds a command to `./scripts/run_tests.sh`, so that any errors in the
front end code will fail the build before it has a chance to be deployed.
1. http://jshint.com/
2. https://www.npmjs.com/package/sass-lint
This commit adds a very small Javascript module to autofocus a textbox on page
load. It should only be used once per page.
It also adds a parameter to the textbox macro which adds the attribute to
trigger autofocus.
This commit moves user-related navigation into the proposition header (the black
bar) at the top of the site. It adds some custom SASS to override GOV.UK
template and align these navigation items to the right (because it looks
better).
It then removes the service chooser dropdown (and its associated SASS and JS) in
favour of a link alongside the user-related navigation items. ‘Switch service’
is the best language for this that we’ve come up with so far.
This means that the only way of adding a new service is from the `/services`
page. So this commit removes the redirect if you land on this page with only one
service (else it would prevent you from ever being able to add more).
The previous service switcher was built purely in Javascript, which meant that,
for the purposes of progressive enhancement, it had to load in the open state.
Setting it to the closed state with Javascript happened a fraction of a second
after page load. This caused an unpleasant flicker as the whole page shifted up
and down as it loaded.
This commit changes the switcher to use the native HTML5 `details` and
`summary` elements[1].
This commit adds a polyfill from GOV.UK Elements for browsers which don’t
support `details`/`summary`.
1. http://html5doctor.com/the-details-and-summary-elements/
This commit adds a component for showing an API key. Usage:
```jinja
{{ from 'components/api-key.html' import api_key }}
{{ api_key('e1b0751388f3cd0fc9982c701acdb3c2') }}
```
Depending on the user’s browser, it works in three different ways.
No Javascript
---
The API key is shown on the page.
Older browsers with Javascript
---
The API key is hidden, and users can click a button to reveal it.
Newer browsers that support copying to clipboard without Flash
---
As above, but when the key is shown there is a button which copies it to the
clipboard. This is acheived by using
[this polyfill](https://www.npmjs.com/package/query-command-supported)
to reliably detect browser support for the ‘copy’ command.
The styling of the component is a bit different to the initial sketch. I think
a grey button works better than green. Green feels like it’s going to take you
somewhere else.
Because:
- GOV.UK elements is now published with a package.json that only install the
SASS files (https://github.com/alphagov/govuk_elements/pull/156)
- We can drop Git submodules, so one less dependency management tool
This commit also changes the `gulpfile.js` and `main.scss` files to use the
assets from `node_modules` rather than the Git submodules.
Gulp was failing silently on Travis. I tracked this down to the task that
builds a custom, slimmed-down version of jQuery from source.
To fix this I’ve removed the task and replaced it with just `src`ing the
minified version of jQuery from `node_modules`.
Cons:
- A few more kb of JS
Pros:
- Less random, afternoon-chewing complexity
- by default, the menu is open
- if Javascript is enabled/loaded, the links are hidden, and visual cues (▶) to
show that it can be opened are added
- clicking it opens and closes it
Somewhere in the many rebases the bits of code that add jQuery to the production
Javascript got lost.
This caused Javascript to fail on all pages.
This commit re-adds that missing code.
ES6 has some nice new features. Specifically relevant to this piece of
work are:
Arrow functions[1], whose `this` context is bound the value of `this` in the
current scope and can’t be overidden. The code is cleaner as a result, and
doesn’t need the addition of a bind polyfill for older browsers.
Template strings[2], which are similar to triple-quoted multi line strings in
Python. This means less fiddly and error-prone string concatenation.
This commit adds Babel[3] to the Gulp pipeline. This transpiles Javascript
written to the ES6 specification into code which is compatible with older
browsers that don’t understand ES6 syntax.
It also rewrites the gulpfile itself using some ES6 syntax, for the same reasons.
1. https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/Arrow_functions
2. https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/template_strings
3. https://babeljs.io
