ea124f2886
When looking at Google’s PageSpeed Insights tool as part of the compression work I noticed a suggestion that we preload our font files. The tool suggests this should save about 300ms on first page load time. *** Our font files are referenced from our CSS. This means that the browser has to download and parse the CSS before it knows where to find the font files. This means the requests happen in sequence. We can make the requests happen in parallel by using a `<link>` tag with `rel=preload`. This tells the browser to start downloading the fonts before it’s even started downloading the CSS (the CSS will be the next thing to start downloading, since it’s the next `<link>` element in the head of the HTML). Downloading fonts before things like images is important because once the font is downloaded it causes the layout to repaint, and shift everything around. So the page doesn’t feel stable until after the fonts have loaded. Google call this [cumulative layout shift](https://web.dev/cls/) which is a score for how much the page moves around. A lower score means a better experience (and, less importantly for us, means the page might rank higher in search results) We’re only preloading the WOFF2 fonts because only modern browsers support preload, and these browsers also all support WOFF2. We set an empty `crossorigin` attribute (which means anonymous-mode) because the preload request needs to match the origin’s CORS mode. See https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content#CORS-enabled_fetches for more details. We set `as=font` because this helps the browser use the correct content security policy, and prioritise which requests to make first.
notifications-admin
GOV.UK Notify admin application - https://www.notifications.service.gov.uk/
Features of this application
- Register and manage users
- Create and manage services
- Send batch emails and SMS by uploading a CSV
- Show history of notifications
First-time setup
1. Install Homebrew
Install Homebrew, a package manager for OSX:
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"
2. Make sure you're using correct language versions
Languages needed
Need to install node? Run:
brew install node
2.1. pyenv For Python version management
pyenv is a program to manage and swap between different versions of Python. To install:
brew install pyenv
And then follow the further installation instructions in https://github.com/pyenv/pyenv#installation to configure it.
2.2. n For Node version management
NPM is Node's package management tool. n is a tool for managing
different versions of Node. The following installs n and uses the long term support (LTS)
version of Node.
npm install -g n
n lts
3. Install NPM dependencies
npm install
npm rebuild node-sass
4. Install and use virtualenvwrapper (optional)
We suggest using a virtualenv to separate the python dependencies for this project from python dependencies for other projects.
Install virtualenvwrapper:
pip install virtualenvwrapper
Then follow the virtualenvwrapper installation instructions docs to configure virtualenvwrapper for your terminal.
Set up your virtualenv:
mkvirtualenv notifications-admin
If you need to specify a certain version of python you can do this using -p, for example:
mkvirtualenv -p ~/.pyenv/versions/3.6.3/bin/python notifications-admin
Activate your virtualenv:
workon notifications-admin
5. Install Python dependencies
Install dependencies and build the frontend assets:
./scripts/bootstrap.sh
Note: You may need versions of both Python 3 and Python 2 accessible to build the python dependencies. pyenv is great for that, and making both Python versions accessible can be done like so:
pyenv global 3.6.3 2.7.15
6. Create a local environment.sh file
In the root directory of the application, run:
echo "
export NOTIFY_ENVIRONMENT='development'
export FLASK_APP=application.py
export FLASK_DEBUG=1
export WERKZEUG_DEBUG_PIN=off
"> environment.sh
7. AWS credentials
Your aws credentials should be stored in a folder located at ~/.aws. Follow Amazon's instructions for storing them correctly
8. Running the application
In the root directory of the application, run:
./scripts/run_app.sh
Then visit localhost:6012
Updating application dependencies
requirements.txt file is generated from the requirements-app.txt in order to pin
versions of all nested dependencies. If requirements-app.txt has been changed (or
we want to update the unpinned nested dependencies) requirements.txt should be
regenerated with
make freeze-requirements
requirements.txt should be committed alongside requirements-app.txt changes.
Automatically rebuild the frontend assets
If you want the front end assets to re-compile on changes, leave this running in a separate terminal from the app
npm run watch
Working with static assets
When running locally static assets are served by Flask at http://localhost:6012/static/…
When running on preview, staging and production there’s a bit more to it:
