| !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 |
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.
Here's a PDF of my slides (via Google Drive) for your reference, or if Zoom goes wrong!
| {# 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', |
| <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" |
| const width = window.innerWidth - document.documentElement.clientWidth; | |
| const root = document.documentElement; | |
| root.style.setProperty('--scrollbar-width', `${width}px`); |
| (function randomSkinTone() { | |
| const fitzPatrickTones = [ | |
| '#ffe2cc', | |
| '#fadbaf', | |
| '#e5bd95', | |
| '#bf8b60', | |
| '#98562e', | |
| '#673929', | |
| ]; |
| @media (orientation: landscape) { | |
| // 1.77 represents the 16/9 aspect ratio. | |
| // 95vh / 1.77 gives us the max height our video can be to guarantee | |
| // its width won't be too large to fit on some awkward viewport dimensions. | |
| // 95vh / 1.77 = 53.672316384, and 53.672316384 * 1.77 = 95. | |
| // This is <100, so this stops our video ever being too wide to fit on the screen. | |
| width: calc((95vh / 1.77) * 1.77); | |
| height: calc(95vh / 1.77); | |
| } |
| $0.classList.toString().split(" ").map(utilityClass => `'${utilityClass.trim()}',`).join('\n') |
| javascript:window.location=(jQuery("link[rel='shortlink']").attr('href') + '/edit') |