philwolstenholme

import type { PropsWithChildren, ReactElement, ReactNode } from 'react';
import React, { Children, cloneElement, isValidElement } from 'react';

import { render } from '@testing-library/react';

function setFakeReactDispatcher<T>(action: () => T): T {
  /**
   * We use some internals from React to avoid a lot of warnings in our tests when faking
   * to render server components. If the structure of React changes, this function should still work,
   * but the tests will again print warnings.

philwolstenholme

import type { PropsWithChildren, ReactElement, ReactNode } from 'react';
import React, { Children, cloneElement, isValidElement } from 'react';

import { render } from '@testing-library/react';

function setFakeReactDispatcher<T>(action: () => T): T {
  /**
   * We use some internals from React to avoid a lot of warnings in our tests when faking
   * to render server components. If the structure of React changes, this function should still work,
   * but the tests will again print warnings.

philwolstenholme

/**
 * Replace text inside class attributes across the DOM (allows partial matches).
 *
 * @param {string} find - Text to find inside class attribute (partial allowed).
 * @param {string} replaceWith - Replacement text.
 * @param {Object} [options]
 * @param {HTMLElement|Document|Element} [options.scope=document] - Limit to a subtree.
 * @returns {number} Count of elements that were modified.
 */
function replaceClassNames(find, replaceWith, { scope = document } = {}) {

philwolstenholme

import { UAParser } from "ua-parser-js";

/**
 * Uses the `Sec-CH-UA-Mobile` header if it's available to work out how many
 * items to show per page.
 */
export const getItemsPerPage = ({
  astroRequest,
  mobileItemsPerPage = 5,
  desktopItemsPerPage = 12,

philwolstenholme

!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports):"function"==typeof define&&define.amd?define(["exports"],n):n(e.quicklink={})}(this,function(e){function n(e){return new Promise(function(n,r,t){(t=new XMLHttpRequest).open("GET",e,t.withCredentials=!0),t.onload=function(){200===t.status?n():r()},t.send()})}var r,t=(r=document.createElement("link")).relList&&r.relList.supports&&r.relList.supports("prefetch")?function(e){return new Promise(function(n,r,t){(t=document.createElement("link")).rel="prefetch",t.href=e,t.onload=n,t.onerror=r,document.head.appendChild(t)})}:n,o=window.requestIdleCallback||function(e){var n=Date.now();return setTimeout(function(){e({didTimeout:!1,timeRemaining:function(){return Math.max(0,50-(Date.now()-n))}})},1)},i=new Set,c=new Set,a=!1;function u(e){if(e){if(e.saveData)return new Error("Save-Data is enabled");if(/2g/.test(e.effectiveType))return new Error("network conditions are poor")}return!0}function s(e,r,o){var s=u(navigator.connection);return s in

philwolstenholme

{# List out all the classes we *may* want to use, so they are not purged #}
{% set spacing_levels = {
  1: 'u-o-1',
  2: 'u-o-2',
  3: 'u-o-3',
  4: 'u-o-4',
  5: 'u-o-5',
  6: 'u-o-6',
  7: 'u-o-7',
  8: 'u-o-8',

philwolstenholme

<img
  style="
    background: no-repeat center/cover
      url('data:image/svg+xml,%3csvg xmlns=\'http://www.w3.org/2000/svg\' xmlns:xlink=\'http://www.w3.org/1999/xlink\' viewBox=\'0 0 50 50\'%3e %3cfilter id=\'b\' color-interpolation-filters=\'sRGB\'%3e %3cfeGaussianBlur stdDeviation=\'.9\'%3e%3c/feGaussianBlur%3e %3cfeComponentTransfer%3e %3cfeFuncA type=\'discrete\' tableValues=\'1 1\'%3e%3c/feFuncA%3e %3c/feComponentTransfer%3e %3c/filter%3e %3cimage filter=\'url%28%23b%29\' preserveAspectRatio=\'none\' height=\'100%25\' width=\'100%25\' xlink:href=\'data:image/png%3bbase64%2ciVBORw0KGgoAAAANSUhEUgAAAAMAAAACCAIAAAASFvFNAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAAHElEQVQImWNsbulgZPjHzc3PcvvOXYb/f/n4hABJ6gd39LTd2AAAAABJRU5ErkJggg==\'%3e %3c/image%3e %3c/svg%3e');
  "
  data-blurhash
  src="/sites/default/files/2021-03/photo-1485304018316-1ff471aa1369.jpeg"
  width="2850"
  height="1900"
  alt="Fire"

philwolstenholme

const width = window.innerWidth - document.documentElement.clientWidth;
const root = document.documentElement;
root.style.setProperty('--scrollbar-width', `${width}px`);

philwolstenholme

Hello DrupalCon! 👋

Here's a big dump of code examples from my slides, plus some examples that didn't make it to the final cut.

The snippets should be organised by slide number, e.g. #46--_search.scss is the snippet of search-related SCSS shown on slide 46.

My slides

Here's a PDF of my slides (via Google Drive) for your reference, or if Zoom goes wrong!

philwolstenholme

(function randomSkinTone() {
  const fitzPatrickTones = [
    '#ffe2cc',
    '#fadbaf',
    '#e5bd95',
    '#bf8b60',
    '#98562e',
    '#673929',
  ];