Skip to content

Instantly share code, notes, and snippets.


Phil Wolstenholme philwolstenholme

View GitHub Profile
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;'--scrollbar-width', `${width}px`);
philwolstenholme /
Last active Feb 10, 2021
Phil Wolstenholme - DrupalCon Europe 2020 - Utility-first CSS

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 = [
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 / 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 / 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
View views-page-title.php
* Implements hook_views_post_render().
function MODULE_NAME_views_post_render($view) {
if ($view->id() !== 'VIEW_ID' && $view->getDisplay()->getPluginId() !== 'page') {
View index.html
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="author" content="">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="//"></script>