The gulp-base64 package has 11 dependencies with
vulnerabilities listed against them as of this
time. It also doesn't seem to be maintained any
more. The last commit was in 2015 and there are
issues and pull requests up to bump the
dependencies.
This replaces it with gulp-base64-inline.
gulp-base64-inline takes a single path, which it
prepends to any image paths it finds. Our image
paths are actually URLs, not filesystem paths so
we need to send it a relative path to repoint the
URL.
This commit includes changes that remove a few
`@import`s from one of our sass partials.
They aren't needed as those files are imported
further up the stack and `_typography.scss` has an
import in it that overwrites the new
`_url-helpers.scss` we added here.
Means that only the following packages will now be
out of date:
1. govuk_template_jinja
2. jquery
Reasons:
GOVUK Template Jinja
This bumps it to 0.24.1, after which the only
changes are to add analytics tracking to the
GOV.UK logo and cookie banner.
We don't need to track either of these and they
were added for GOVUK analytics work.
jQuery
jQuery stops supporting IE<9 after version
1.12. This is pretty much our support now but if
we move to IE>8 we shouldn't do it by bumping the
version. This would just increase the amount of
broken JS we ship to IE8.
Also: both are deprecated and we will move off
them in the near future.
Since it moved to ES Modules in version 2.3.1,
diff-dom stopped including the `diffDOM.js` file
in its NPM package.
We don't do any kind of bundling in our build yet,
just concatenation of our scripts and some
minification of the results so we can't take
advantage of this yet.
The `diffDOM.js` file is still available in the
Github release so this moves to referencing that
in the `package.json` instead, until we start
using a bundler.
I opened an issue to check this is what the author
intended:
https://github.com/fiduswriter/diffDOM/issues/84
The latest version also adds Rollup as a peer
dependency.
Brings in a new API which is a breaking change:
https://github.com/gulpjs/gulp/blob/master/CHANGELOG.md#400
Requires gulpfile.babel.js to be a CommonJS module
and for all tasks to be exported.
Replaces using ES6 modules for the CommonJS to
include other packages to match the type of module
the gulpfile now is.
Updates to 4.0.0 include `series` and `parallel`
methods which remove the need for the
`run-sequence` package.
Also bumps gulp-specific libraries.
Version 3.1.3 changed heading classes to display block - https://github.com/alphagov/govuk_elements/pull/552
This is a breaking change for us since we are using the heading classes
to make font bold - 3.1.3 adds line breaks in places where we don't want
them and causes some functional tests to fail.
Since we will be replacing govuk-elements with the new design system,
this commit pins the version of govuk-elements instead of updating all
the code to work with the lastest version.
We had a user report that the ‘inbound messages’ part of their dashboard
was appearing for a split second then disappearing.
This was caused by the Javascript on the page throwing an exception as
it was trying to re-render this part of the page. This meant it gave up
and rendered nothing.
The exception was caused by passing `undefined` as the second argument
to `.insertBefore`. This is acceptable in most browsers, but not older
versions of IE. This is fixed in the latest version of diffDOM (the 3rd
party library we use to do the AJAX stuff) by defaulting the second
argument to `.insertBefore` to `null`, which is acceptable in old IE
versions.
See the fix here: 8833d87e9d
Gulp was spitting out a lot of noise about stuff being out of date. The
cause seemed to be our outdated version of Gulp SASS. This commit
upgrades Gulp SASS to the latest version.
Changes:
---
https://github.com/dlmanning/gulp-sass/compare/v2.3.1...v3.1.0
This is a breaking change because one of the underlying libraries
includes a breaking change. But looking at their release notes, it
doesn’t seem to affect any SASS features that we’re using:
https://github.com/sass/libsass/releases/tag/3.4.0
Problem
---
You make a minor typo, save the file and your Gulp process dies without
you realising. You then spend 5 minutes trying to work out why your
changes aren’t appearing, no matter what edits you make.
Solution
---
Catch errors raised in processing the JS/SASS files and log them,
without killing the process.
How
---
Use a handy plugin called
[Gulp PrettyError](https://www.npmjs.com/package/gulp-prettyerror).
It’s weird to be on a page that says ‘2 seconds ago’ and stays stuck
there.
We don’t want to AJAX the whole page because it would get in the way of
interacting with the list of notifications.
This commit adds the venerable jQuery Timeago[1] plugin to keep the
relative times accurate and fresh.
1. http://timeago.yarp.com/
Services who are in alpha or building prototypes need a way of sending
to any email address or phone number without having to sign the MOU.
This commit adds a page where they can whitelist up to 5 email addresses
and 5 phone numbers.
It uses the ‘list entry’ UI pattern from the Digital Marketplace
frontend toolkit [1] [2] [3].
I had to do some modification:
- of the Javascript, to make it work with the GOV.UK Module pattern
- of the template to make it work with WTForms
- of the content security policy, because the list entry pattern uses
Hogan[1], which needs to use `eval()` (this should be fine if we’re
only allowing it for scripts that we serve)
- of our SASS lint config, to allow browser-targeting mixins to come
after normal rules (so that they can override them)
This commit also adds a new form class to validate and populate the two
whitelists. The validation is fairly rudimentary at the moment, and
doesn’t highlight which item in the list has the error, but it’s
probably good enough.
The list can only be updated all-at-once, this is how it’s possible to
remove items from the list without having to make multiple `POST`
requests.
1. 434ad30791/toolkit/templates/forms/list-entry.html
2. 434ad30791/toolkit/scss/forms/_list-entry.scss
3. 434ad30791/toolkit/javascripts/list-entry.js
4. http://twitter.github.io/hogan.js/
Features:
- Expose Diff object
Fixes:
- Reverse actions for modifyComment/Text
- Simplify diff on some text only diffs
- Simplify diff on single element removal
Currently, when we update a section of the page with AJAX we replace the
entire HTML of the section with the new HTML. This causes problems:
- if you’re trying to interact with that section of the page, eg by
inpecting it, clicking or hovering an element
- (probably) for screenreaders trying to navigate a page which is
changing more than is necessary
This commit replaces the call to `.html()` with a pretty clever library
called diffDOM[1]. DiffDOM works by taking a diff of the old element and
the new element, then doing a patch update, ie only modifying the parts
that have changed.
This is similar in concept to React’s virtual DOM, while still allowing
us to render all markup from one set of templates on the server-side.
1. https://github.com/fiduswriter/diffDOM
Makes the size of the HTML file slightly smaller
Full changelog:
> # 0.17.1
>
> - Reduce file size of template: removes HTML comments, `type` attributes
> on scripts, and uses HTML5 charset declaration. #208
> - Switch external link media query to be mobile first #205
> - Sass file cleanups
> - Replace old grid mixins with newer grid from frontend toolkit #134
> - Remove duplicate grey variables #201
>
> # 0.17.0
>
> - Add CSS hook (`.js-hidden`) for hiding content when JS is enabled.
> Some apps have an equivalent hook, which can be removed once
> upgraded to this version
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.
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.
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 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
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
Users can add placeholders to their messages, eg
> …your vehicle ((registration number))
when the message is sent, this gets replaced with the data the user uploads, eg
> …your vehicle LC12 BFL
We reckon that it will be useful to see that the placeholder has been
recognised, ie that its syntax is correct, before uploading any data.
We reckon that the best way to do this is by styling it differently to the rest
of the text that the user types.
This is not a trivial problem. There are two possible ways to do it:
1 Write a Google Docs-style text rendering engine, which completely replaces
the native HTML `<textarea>` with a custom control, and programme what should
happen when the user types something that looks like a placeholder, or
presses an arrow key, or makes a selection, or…
2 Leave the `<textarea>` in place, unmodified, and duplicate layers in front
of/behind it to visually replace a placeholder with the blue lozenge
Unsurprisingly, this commit implements 2.
There are four layers. Each layer contains live-updated copy of the text in the
textbox, and each is styled differently:
- one layer behind the textbox to make the blue background
- the textbox itself
- a layer with the white text, which overlays the black text of the textbox
- a layer with an inner shadow to knock back the brackets
This is because of some interesting limitations:
- The text in the foreground and background must occupy the same physical space,
so no deleting characters from the duplicated layers
- Words can’t be split up into multiple elements,
eg `<span>((</span>regist…`:—this results in slightly different kerning to
`((regis…`, which messes up the alignment of the layers
- The textbox can’t be completely overlapped with a block of colour, because
the cursor disappears behind it. Trying to edit text when you can’t see the
cursor is hard.
Implementation
Technically this makes use of Paul Hayes work on Javascript modules in the
GOV.UK frontend toolkit[1].
It also makes use of the `oninput` event to detect changes to the textbox’s
contents. This is much more performant than `onkeydown`, `onpaste`, etc. Without
it the delay between user input and the layers all updating is too slow and you
see misalignment of the layers.
1. https://github.com/alphagov/govuk_frontend_toolkit/pull/227
…or how to move a bunch of things from a bunch of different places into
`app/static`.
There are three main reasons not to use Flask Assets:
- It had some strange behaviour like only
- It was based on Ruby SASS, which is slower to get new features than libsass,
and meant depending on Ruby, and having the SASS Gem globally installed—so
you’re already out of being a ‘pure’ Python app
- Martyn and I have experience of doing it this way on Marketplace, and we’ve
ironed out the initial rough patches
The specific technologies this introduces, all of which are Node-based:
- Gulp – like a Makefile written in Javascript
- NPM – package management, used for managing Gulp and its related dependencies
- Bower – also package management, and the only way I can think to have
GOV.UK template as a proper dependency
…speaking of which, GOV.UK template is now a dependency. This means it can’t be
modified at all (eg to add a global `#content` wrapper), so every page now
inherits from a template that has this wrapper. But it also means that we have a
clean upgrade path when the template is modified.
Everything else (toolkit, elements) I’ve kept as submodules but moved them to a
more logical place (`app/assets` not `app/assets/stylesheets`, because they
contain more than just SASS/CSS).
