Accudio

self.addEventListener('activate', event => {
  event.waitUntil(
    caches.keys().then(allCaches => {
      return Promise.all(allCaches.map(cacheToDelete => {
        return caches.delete(cacheToDelete);
      }));
    }).then(() => self.clients.claim())
  );
});

Accudio

{# using macro directly #}
{{ image({
  url: '/path/to/image.jpg',
  alt: 'Image alt attribute',
  class: 'mb-30',
  imgClass: 'rounded',
  lazy: false,
  width: 1920,
  height: 1080,
  ratio: 0.5,

Accudio

{
  "name": "glyphhanger-usage",
  "version": "0.1.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "convert": "npx glyphhanger --subset=\"*.ttf\" --formats=woff2",
    "subset": "npx glyphhanger --subset=\"*.ttf\" --US_ASCII --formats=woff2"
  },
  "keywords": [],

Accudio

body {
  background: black;
}
body, img {
  filter: invert(1) hue-rotate(180deg);
}

Accudio

#### FIG ENV VARIABLES ####
[ -s ~/.fig/shell/pre.sh ] && source ~/.fig/shell/pre.sh
#### END FIG ENV VARIABLES ####

# Enable Powerlevel10k instant prompt. Should stay close to the top of ~/.zshrc.
# Initialization code that may require console input (password prompts, [y/n]
# confirmations, etc.) must go above this block; everything else may go below.
if [[ -r "${XDG_CACHE_HOME:-$HOME/.cache}/p10k-instant-prompt-${(%):-%n}.zsh" ]]; then
  source "${XDG_CACHE_HOME:-$HOME/.cache}/p10k-instant-prompt-${(%):-%n}.zsh"
fi

Accudio

Building for Accessibility

Series Eight aims for websites we develop to meet the accessibility standard WCAG 2.1 at a minimum of AA level. Most sites won't be certified to WCAG standards unless required to, but we should aim for at least AA where possible.

This document covers a few things to watch out for and common issues you will need to deal with whilst developing a website. It is accompanied by the Testing for Accessibility document (in-progress) which explains how we can test the accessibility of our sites using automated tools and manual processes.

To see a table of contents of this document within GitHub, you can click the "list" icon in the top-left (see this guide).

Workshops

We will be hosting a workshop on accessibility building and testing for developers, in addition to one for designers. When complete the recording will also be available here.

Accudio

{% image {
  src: 'otter.jpg'
  alt: 'an otter standing on a log looking majestic'
  srcset: [300, 450, 600, 800, 1000, 1200]
  sizes: '100vw'
  width: 1200
  height: 800
  loading: 'lazy'
  class: 'image-class'
} %}

Accudio

import Image from '../components/Image'

export default function () {
  return (
    <Image
      src="otter.jpg"
      alt="an otter standing on a log looking majestic"
      srcset={[300, 450, 600, 800, 1000, 1200]}
      sizes="100vw"
      width="1200"

Accudio

javascript:(function(){var a,b,c,d,e,f,g=0;if(a=["tag seen","Stray end tag","Bad start tag","violates nesting rules","Duplicate ID","first occurrence of ID","Unclosed element","not allowed as child of element","unclosed elements","not allowed on element","unquoted attribute value","Duplicate attribute"].join("|"),b=document.getElementById("results"),!b)return void alert("No results container found.");for(c=b.getElementsByTagName("li"),f=0;f<c.length;f++)d=c[f],""!==d.className%26%26(e=(void 0===d.innerText%3Fd.textContent:d.innerText)+"",resultHtml=d.innerHTML,null===e.match(a)%3F(d.style.display="none",d.className+=" steveNoLike",g++):-1!==e.indexOf("not allowed on element")%26%26(-1!==resultHtml.indexOf("<code>ng-")||-1!==resultHtml.indexOf("<code>x-")||-1!==resultHtml.indexOf("<code>ax-")||-1!==resultHtml.indexOf("<code>v-")||-1!==resultHtml.indexOf("<code>:")||-1!==resultHtml.indexOf("<code>%40"))%26%26(d.style.display="none",d.className+=" steveNoLike",g++));alert("Complete. "+g+" items removed.")})();

Accudio

const plugin = require('tailwindcss/plugin')

const baseClass = '.focus'
const property = '--focus-colour'

const getColours = (colours, prefix, e) => {
  let utils = {}
  for (const key in colours) {

    if (typeof colours[key] === 'object') {