Skip to content

Instantly share code, notes, and snippets.

Avatar

Phil Wolstenholme philwolstenholme

View GitHub Profile
View tailwind-lookup-tabe.twig
{# 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',
View svg-loading-placeholder.html
<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
philwolstenholme / example.js
Last active Dec 23, 2020
One example of working around the '100vw includes scrollbar width' issue
View example.js
const width = window.innerWidth - document.documentElement.clientWidth;
const root = document.documentElement;
root.style.setProperty('--scrollbar-width', `${width}px`);
@philwolstenholme
philwolstenholme / ######-phil-wolstenholme-drupalcon-europe-2020-utility-first-css.md
Last active Apr 20, 2021
Phil Wolstenholme - DrupalCon Europe 2020 - Utility-first CSS
View ######-phil-wolstenholme-drupalcon-europe-2020-utility-first-css.md

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!

View random-skin-tone.js
(function randomSkinTone() {
const fitzPatrickTones = [
'#ffe2cc',
'#fadbaf',
'#e5bd95',
'#bf8b60',
'#98562e',
'#673929',
];
@philwolstenholme
philwolstenholme / first-time-using-min-aspect-ratio.scss
Created Apr 16, 2020
Using a combination of the orientation and min-aspect-ratio media queries to make sure a 16:9 video always fits inside a modal (at all screen sizes and orientations) without any content being cut off
View first-time-using-min-aspect-ratio.scss
@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);
}
@philwolstenholme
philwolstenholme / classListToCommaAndNewLineSeparatedString.js
Created Jul 15, 2019
Take the CSS classes of the currently selected DOM node in Chrome devtools and output it as a comma and newline separated string ready to paste into an array
View classListToCommaAndNewLineSeparatedString.js
$0.classList.toString().split(" ").map(utilityClass => `'${utilityClass.trim()}',`).join('\n')
View drupalEditNodeBookmarket.js
javascript:window.location=(jQuery("link[rel='shortlink']").attr('href') + '/edit')
@philwolstenholme
philwolstenholme / example_response.json
Last active Feb 26, 2018
Corrupted Drupal AJAX response JSON (potentially) as a result of the Ghost Inspector Chrome plugin
View example_response.json
[{"command":"settings","settings":{"basePath":"\/","pathPrefix":"","ajaxPageState":{"theme":"london_plan","theme_token":"EER5So6oi7xk_WA15TAY7yhCtIlfsjhC9tpZ_dx4v88"}},"merge":true},{"command":"insert","method":"append","selector":"div#ajax-status-messages-wrapper","data":"\u003Cdiv class=\u0022messages-container\u0022\u003E\n\u003Cdiv class=\u0022messages status\u0022 role=\u0022contentinfo\u0022 aria-label=\u0022Status message\u0022\u003E\n\u003Cdiv role=\u0022status\u0022\u003E\n\u003Ch2 class=\u0022element-invisible\u0022\u003EStatus message\u003C\/h2\u003E\nThank you, your comment has been submitted\u003C\/div\u003E\n\u003C\/div\u003E\n\u003C\/div\u003E\n","settings":null},{"command":"invoke","selector":null,"method":"updateAJAXCommentCount","arguments":["Thank you, your comment has been submitted"]},{"command":"modal_dismiss"},{"command":"insert","method":"append","selector":"div#ajax-status-messages-wrapper","data":"\u003Cdiv class=\u0022messages-container\u0022\u003E\n\u003Cdiv class=\u0022messages st