Skip to content

Instantly share code, notes, and snippets.

View RichardDillman's full-sized avatar

Richard Dillman RichardDillman

View GitHub Profile
@RichardDillman
RichardDillman / slugify.test.ts
Last active January 31, 2022 18:18
General Slugify function. Trim white-space. Replace all non-alphanumeric with dashes. Replace diacritics with generics Reduce chains of dashes to a single dash.
describe("slugify()", () => {
it("Must remove url encodings.", () => {
const result = slugify("New%20York, NY");
expect(result).toBe("new-york-ny");
});
it("Must replace non-alphanumerics with dashes.", () => {
const result = slugify("a@b");
expect(result).toBe("a-b");
});
@RichardDillman
RichardDillman / HotDogStand.txt
Last active January 28, 2022 19:49
HotDogStand: Create a bookmark named HotDogStand and paste the code below as the url.
javascript:(function()%7B var style %3D document.createElement(%27style%27), styleContent %3D document.createTextNode(%27* %7B outline: 1px solid gray !important%3B font-family: system !important%3B %7D body, span %7B background-color: turquoise !important%3B color: white !important%3B %7D a, a:visited, a:active %7B color: yellow !important%3B background-color: white !important%3B %7D a:hover %7B color: White !important%3B background-color: white !important%3B font-family: system !important%3B %7D input, img %7B border: 1px solid red !important%3B %7D input%5Btype%3Dbutton%5D %7B background-color: gray !important%3B font-family: system !important%3B %7D code, blockquote, pre, div, h1, h2, h3, h4, h5, h6 %7B background-color: red !important%3B color: yellow !important%3B %7D input %7B background-color: yellow !important%3B font-family: system !important%3B font-size: 200%25 !important%3B %7D %27)%3B style.appendChild(styleContent )%3B var caput %3D document.getElementsByTagName(%27head%27)%3B caput%5B0%5D.appe
@RichardDillman
RichardDillman / ga-click-tracking.js
Last active February 27, 2019 22:59
Single event to track clicks on all elements within the page. Simply add the data-tracking-label attribute to any elements that should be tracked. If an element is clicked that does not have this attribute we walk up the DOM till we find one that does. Be sure to add a data-tracking-label on your outermost div or body.
/**
* Recursively an ancestor element with a matching attribute.
**/
const findAncestor = (el, label) => {
while ((el = el.parentElement) && !el.getAttribute(label));
return el.getAttribute(label);
}
/**
* Retrieve the attribute or its ancestor attribute.
@RichardDillman
RichardDillman / deep.get.js
Last active April 20, 2023 20:07
Gets the value deep within a path of object. If at any point in the path the key does not exist. We return undefined. If we have a default value and the path does not exist return that default value.
/**
* Gets the value deep within a path of object.
* If at any point in the path the key does not exist. We return undefined.
* If we have a default value and the path does not exist return that default value.
*
* This allows you to avoid constantly checking for properties along the way like
* `this.state.wave && this.state.wave.data && this.state.wave.data.companyName`
*
* @example get(this, "state.wave.data.companyName") // can return undefined
* @example get(this, "state.companyOptions", []); // always returns an array.
@RichardDillman
RichardDillman / getSlotsByRequestData
Last active May 27, 2020 11:04
Retrieve all slot data from performance.getEntries. Fire it once all the slots have been requested. If you page happens to have a LOT of network traffic. you may want to expand the number of entries allowed using the following script before the first GPT request. window.performance.setResourceTimingBufferSize(10000);
/**
* We collect this data from the performance entries instead of directly from GPT because the targeting
* can can change between requests. Pulling data from googletag after a refresh will only give you the
* cuurent state of GPT.
*/
(() => {
function getUrlParams(search) {
let hashes = search.split('&').filter(item => {
return /^enc_prev_ius|^iu_parts|^prev_iu_szs|^prev_scp|^cust_params|^correlator/.test(item);
@RichardDillman
RichardDillman / getAdRequests.js
Last active June 9, 2018 13:03
Returns an array of ad requests.
/**
* Returns an array of ad requests. Requires modern browsers.
* [{
* correlator: '1978064853149162',
* pageTargeting: {
* key1: 'val1',
* key2: 'val2',
* },
* slots: [{
* sizes: [
@RichardDillman
RichardDillman / getLabelIds.js
Created January 3, 2018 19:42
Obtain label id's from loaded slots within GPT
/**
* Gets the label IDs from all currently loaded GPT slots.
*
* @return {Array)} The collected label ids.
*/
function getLabelIds() {
// declare our output array.
var labels = [];
// for looping over the slots
function getlabels(slot) {
@RichardDillman
RichardDillman / appendScripts.js
Last active October 26, 2018 15:41
Append multiple async scripts to the page.
(function(d, u) {
const i = u.length
let s;
while (i--) {
s = d.createElement('script');
s.async = true;
s.src = u[i];
d.head.appendChild(s);
}
}(document, [
@RichardDillman
RichardDillman / elementReady.js
Created December 30, 2017 09:34
Checks for an elements existence within a RAF within a promise. Raw
/**
* Checks for an elements existence within a RAF within a promise.
*
* @param {string} selector - The element you wish to find. Defaults to 'body'.
* @param {string} target - The parent element to search within. Defaults to document.
* @return {Promise} Resolves when the element exists.
*/
function elementReady(selector, target) {
var options = {
target: target || document,
@RichardDillman
RichardDillman / styles.js
Created December 30, 2017 09:33
List all style blocks and sheets used within the page, and output to the console.
(function() {
var tab = [].slice.call(document.styleSheets).map(function(e) {
return {
size: e.cssRules.length / 1e3 + " kb",
url: e.href || "Block"
}
});
console.group("CSS Data");
console.table(tab);
console.groupEnd("CSS Data");