NickColley

{"userAgent":"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/66.0.3344.0 Safari/537.36","lighthouseVersion":"2.8.0","generatedTime":"2018-02-10T12:58:39.832Z","initialUrl":"http://localhost:3000/","url":"http://localhost:3000/","runWarnings":[],"audits":{"first-meaningful-paint":{"score":35,"displayValue":"4,900 ms","rawValue":4897.4,"extendedInfo":{"value":{"timestamps":{"navStart":216298093445,"fCP":216302848512,"fMP":216302990818,"onLoad":216303458064,"endOfTrace":216343103987},"timings":{"navStart":0,"fCP":4755.067,"fMP":4897.373,"onLoad":5364.619,"endOfTrace":45010.542},"fmpFellBack":false}},"scoringMode":"numeric","name":"first-meaningful-paint","description":"First meaningful paint","helpText":"First meaningful paint measures when the primary content of a page is visible. [Learn more](https://developers.google.com/web/tools/lighthouse/audits/first-meaningful-paint)."},"speed-index-metric":{"score":56,"displayValue":"4,939","rawValue":4939,"extendedInfo":{"value"

NickColley

GOV.UK Frontend - How we version

Prior art

• Variable exposing mixin proposal

The public API: or what you can depend on

Note: If you want to use anything that is not listed here to extend or create your own components please contact us and we might be able to make something public that you can depend on. If you depend on something that is not listed here, it can and will likely be broken without warning.

NickColley

Proposal: GOV.UK Frontend - How we write JavaScript

Who are our users?

GOV.UK Design System projects is designed to work with a distributed ecosystem that is the UK Government. Even if we wanted to we can not force a certain framework or approach on teams distributed in different departments across the UK.

With this in mind we need to support the lowest denominator and be technology agnostic.

Any approach that relies on HTML being identical on both the client and server will mean our JavaScript will only work with a framework that we have chosen. (See virtual dom hydration)

NickColley

Leo Hemsted - GOV.UK Notify

Technospective, Monday, 5 March 2018

---

How GOV.UK Notify (sometimes) supports client libraries

Lots of people expose APIs based on endpoints and not client libraries.

Context

Two applications:

NickColley

GOV.AU UIKit / Gold

Date: 8 Mar 2018

Distributing components

Nick: We currently have a similar setup to you guys, with multiple packages for multiple components. Why did you decide to take this approach?

NickColley

Accessible client-side routing links

Example of announcers patterns

• https://github.com/thinkcompany/react-a11y-announcer
• https://github.com/ember-a11y/a11y-announcer

Excellent example of ‘doing it right’ by the Ember community

• https://github.com/ember-a11y/ember-a11y

What assistive technologies should I test in?

NickColley

We're getting close to 1.0.0 and are tidying up and loose ends for the public API.

One of the final things we're auditing is the consistency between class names, we believe if they're more consistent they'll be easier to remember and more intuative.

Right now our override classes look like:

.govuk-!-display-inline {}
.govuk-!-display-inline-block {}

NickColley

<!-- This code example is not the same as GOV.UK Frontend, and is just for demonstration. -->
<style>
  .back-link::before {
    content: '';
    display: inline-block;
    margin-right: .3em;
    border-top: 0.3125em solid transparent;
    border-right: 0.375em solid currentColor;
    border-bottom: 0.3125em solid transparent;
    clip-path: polygon(0% 50%, 100% 100%, 100% 0%);

NickColley

<!-- This code example is not the same as GOV.UK Frontend, and is just for demonstration -->
<style>
.breadcrumbs {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
.breadcrumbs > li {
  display: inline-block;
}

NickColley

<!-- This code example is not the same as GOV.UK Frontend, and is just for demonstration -->
<style>
  .check-mark-icon {
    width: 1.125em;
    height: 0.4375em;
    transform: rotate(-45deg);
    border: solid;
    border-width: 0 0 .3125em .3125em;
  }
</style>