Leaflet seems to be the go-to library for rendering maps these days. It
will be useful for the broadcast work.
This commit add the leaflet Javascript and CSS to our asset pipeline.
The Javascript is already minified so all we need to do is copy it. The
CSS is uncompressed so we put it through the same pipe as our other
stylesheets.
I’m keeping these as separate files because they’re quite heavy (or the
JS is at least – 38kb minified) so I want them to only be loaded on the
pages where they’re used. Most users of Notify will never need to see a
map.
By default our AJAX calls were 2 seconds. Then they were 5 seconds
because someone reckoned 2 seconds was putting too much load on the
system. Then we made them 10 seconds while we were having an incident.
Then we made them 20 seconds for the heaviest pages, but back to 5
seconds or 2 seconds for the rest of the pages.
This is not a good situation because:
- it slows all services down equally, no matter how much traffic they
have, or which features they have switched on
- it slows everything down by the same amount, no matter how much load
the platform is under
- the values are set based on our worst performance, until we manually
remember to switch them back
- we spend time during incidents deploying changes to slow down the
dashboard refresh time because it’s a nothing-to-lose change that
might relieve some symptoms, when we could be spending time digging
into the underlying cause
This pull request makes the Javascript smarter about how long it waits
until it makes another AJAX call. It bases the delay on how long the
server takes to respond (as a proxy for how much load the server is
under).
It’s based on the square root of the response time, so is more sensitive
to slow downs early on, and less sensitive to slow downs later on. This
helps us give a more pronounced difference in delay between an AJAX call
that is fast (for example the page for a single notification) and one
that is slow (for example a dashboard for a service with lots of
traffic).
*Some examples of what this would mean for various pages*
Page | Response time | Wait until next AJAX call
---|---|---
Check a reply to address | 130ms | 1,850ms
Brand new service dashboard | 229ms | 2,783ms
HM Passport Office dashboard | 634ms | 5,294ms
NHS Coronavirus Service dashboard | 779ms | 5,977ms
_Example of the kind of slowness we’ve seen during an incident_ | 6,000ms | 18,364ms
GOV.UK email dashboard | `HTTP 504` | 😬
Fix for issue that caused this revert:
https://github.com/alphagov/notifications-admin/pull/3196
Note:
gulp-css-url-adjuster operates on an Abstract
Syntax Tree (AST) derived from `main.css`. The
CSS output from this loses the compression
gulp-sass applies.
This moves compression out of Sass, to a step
after the URLs are adjusted.
Means our rollup bundling doesn't leave any
artefact files lying around that we'd then have to
deal with.
Also includes:
- removal of some JSHint config' marking the
artefacts as scripts to ignore
- use of streamqueue package to allow the same
ordering of scripts as before
Includes Sass that targeted GOV.UK Template HTML
and also moves some link styles to `globals.scss`.
Also removes bits of frontend build that copied
over GOVUK Template files.
Means our rollup bundling doesn't leave any
artefact files lying around that we'd then have to
deal with.
Also includes:
- removal of some JSHint config' marking the
artefacts as scripts to ignore
- use of streamqueue package to allow the same
ordering of scripts as before
Includes Sass that targeted GOV.UK Template HTML
and also moves some link styles to `globals.scss`.
Also removes bits of frontend build that copied
over GOVUK Template files.
Means our rollup bundling doesn't leave any
artefact files lying around that we'd then have to
deal with.
Also includes:
- removal of some JSHint config' marking the
artefacts as scripts to ignore
- use of streamqueue package to allow the same
ordering of scripts as before
Includes Sass that targeted GOV.UK Template HTML
and also moves some link styles to `globals.scss`.
Also removes bits of frontend build that copied
over GOVUK Template files.
HighlightTags was bad because:
- we haven’t called placeholders ‘tags’ for a long time
- it also does resizing of the `<textarea>`, not just highlighting the
placeholders
Peer dependencies are defined by projects intended
to be used by other projects (ie, libraries).
This doesn't apply to this project so removing the
peer dependencies field.
I'm also not sure why the `request` dependency was
there as it isn't a peer dependency of any of the
packages that use it in this project's dependency
tree.
Versions past this make use of Object.entries
which is not supported in IE11 (so causes an
error). This is meant to be taken care of by
polyfills but our frontend build pipeline isn't
set up to polyfill NPM modules at the moment.
This moves the version bump to the latest that
will still work with our current pipeline.
Version 3.1.3 of govuk-elements-sass makes
everything with the `heading-small` class
`display: block`.
https://github.com/alphagov/govuk_elements/pull/552
We use that class in many places just to make the
text bold with the assumption that it the styles
it applies will not prevent our text rendering
inline. This change breaks that assumption.
We do need to swap these classes out for utility
classes that just apply the bold styles but it can
be done at a later date and we aren't missing out
on much by reverting this library.
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).
