Skip to content

Instantly share code, notes, and snippets.

View NickColley's full-sized avatar

Nick Colley NickColley

85 followers · 1 following
View GitHub Profile
@NickColley
NickColley / hello-world.js
Created May 14, 2020 10:24
hello-world.js
console.log("Hello, World.");
@NickColley
NickColley / testing-native-html5-details.csv
Created August 6, 2019 16:22
Testing native HTML5 details element
We can make this file beautiful and searchable if this error is corrected: Unclosed quoted field in line 2.
,JAWS 2018 + IE11,JAWS 2018 + Firefox 60,JAWS 2018 + Chrome 75,NVDA 2019 + IE11,NVDA 2019 + Firefox 60,NVDA 2019 + Chrome 75,VoiceOver + Safari 10.13.6,iOS 12.3.1 VoiceOver,Dragon 13 + Firefox 60,Dragon 13 + Chrome 75
Current,"""Help with nationality, button, collapsed""
[press space]
""Help with nationality, button, use JAWS KEY + alt + m to move to controlled element, expanded""
","""Help with nationality, button, collapsed""
[press space]
""Help with nationality, button, use JAWS KEY + alt + m to move to controlled element, expanded""
","""Help with nationality, button, collapsed""
[press space]
""expanded""
@NickColley
NickColley / SPIKE: Explore more flexible use of macros: What if we only used nested components.md
Last active August 2, 2019 12:00
SPIKE: Explore more flexible use of macros: What if we only used nested components
@NickColley
NickColley / Sass mixins to help people implement focus styles.md
Created May 20, 2019 11:12
Sass mixins to help people implement focus styles

Sass mixins to help people implement focus styles

Overview of mixins

Sass is an extension language for CSS, it adds features to make maintaining large CSS codebases easier.

One feature in Sass is mixins.

“Some things in CSS are a bit tedious to write, especially with CSS3 and the many vendor prefixes that exist. A mixin lets you make groups of CSS declarations that you want to reuse throughout your site.”

@NickColley
NickColley / _focusable.scss
Created May 8, 2019 10:00
_focusable.scss mixin with drop-shadow depending on display property
////
/// @group helpers
////
/// Focusable helper
///
/// Provides an additional outline to clearly indicate when the target element is
/// focussed. Used for interactive elements which themselves have some background
/// or border, such as most form elements.
///
@NickColley
NickColley / govuk-frontend-popular-content.md
Created February 8, 2019 16:45
govuk-frontend-popular-content
Content Views Unique visitors
GitHub - alphagov/govuk-frontend: GOV.UK Frontend contains the code you need ... 1,230 403
govuk-frontend/src at master 423 97
Issues 301 45
Pull Requests 264 25
Search · template 243 48
govuk-frontend/installing-with-npm.md at master · alphagov/govuk-frontend · G... 221 111
govuk-frontend/src/components at master 213 66
govuk-frontend/src/settings at master 181 21
@NickColley
NickColley / visually-hidden-audit.csv
Last active July 6, 2019 15:18
Visually Hidden Audit
We can make this file beautiful and searchable if this error is corrected: Unclosed quoted field in line 3.
Test name,Link,VoiceOver OSX,VoiceOver iOS,VoiceOver iPad,NVDA,JAWS,IE8,IE9,IE10,Internet Explorer 11 (Windows),Edge (Windows),Google Chrome (Windows),Mozilla Firefox (Windows),Safari (macOS),Google Chrome (macOS),Mozilla Firefox (macOS),Safari (iOS),Google Chrome (iOS),Google Chrome (Android),Samsung Internet (Android)
Control,https://output.jsbin.com/yesilis,As expected,As expected,As expected,As expected,As expected,As expected,As expected,As expected,As expected,As expected,As expected,As expected,As expected,As expected,As expected,As expected,As expected,As expected,As expected
Visually Hidden with CSS,https://output.jsbin.com/xiqohaz,"Visually hidden text in links is always at the front for example: ""link, name Change"".
This is still the same if the visually hidden text is in the middle of the link.
Buttons behave as expected.
","When swiping left and right visually hidden text is read out.
When pressing on links directly visually hidden text is not read out.
@NickColley
NickColley / webfonts-are-huge-and-blocking.md
Created December 14, 2018 16:31
GOV.UK Webfonts are huge and blocking

Webfonts are huge and blocking

July 25th, 2016

Webfonts on GOV.UK block initial render and are surprisingly big at 200kb GZIPed

Measured impact

I have measured a 2g/3g connection with fonts blocked to see the difference it could make to lazy-load the font with the following results

@NickColley
NickColley / data-list-examples.njk
Created November 22, 2018 13:43
data-list-examples
{% from "warning-text/macro.njk" import govukWarningText %}
{{ govukWarningText({
text: "This is work in progress — No macro",
iconFallbackText: "Warning"
}) }}
<h2 class="govuk-heading-m">DL - govuk-data-list with actions and borders</h2>
@NickColley
NickColley / index.html
Created October 21, 2018 23:36
JS Bin // source https://jsbin.com/bucijav
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style id="jsbin-css">
html, body {
font-size: 16px;
font-family: sans-serif;