benjclark’s gists

benjclark / index.html

Created November 16, 2018 14:55

JS Bin // source https://jsbin.com/meqaqig

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>JS Bin</title>
	<style id="jsbin-css">
	fieldset {
	position: relative;
	border: none;

benjclark / gist:d92f1e81d482296023abba55dd8972b0

Created February 10, 2020 12:36

react comp fuzzy match input reference to input issue

	import React, { useRef } from 'react';
	import './App.css';
	import Fuse from 'fuse.js'

	function FuzzyMatchInput(props) {
	const answer = props;
	const inputEl = useRef(null);
	const fuse = new Fuse(answer, {keys: 'answer'});

	function handleChange(event) {

benjclark / ben-fuzzy-match-react-component.js

Created February 20, 2020 15:34

	import React, { useState, useCallback, useMemo } from 'react';
	import Fuse from 'fuse.js';

	function FuzzyMatchInput({ answer, threshold = 0.2 }) {

	const [isFuzzyMatch, setIsFuzzyMatch] = useState(false);

	function sanitiseText(text) {
	// as per https://stackoverflow.com/questions/4328500/how-can-i-strip-all-punctuation-from-a-string-in-javascript-using-regex
	const punctuationLess = text.replace(/[\.,-\/#!$%\^&\*;:{}=\-_`~()@\+\?><\[\]\+]/g, '');

benjclark / ted pseudo css example

Created March 1, 2020 13:35

	body:before {
	content: '';
	width: 100%;
	height: 100%;
	background-image: url(background_image.png);
	opacity: 0.5;
	}

benjclark / ted box media query example

Created March 1, 2020 14:29

benjclark / random-insect-name-fetch.js

Last active May 12, 2020 20:01

Reproducing intercooler.js functionality in plain ES6 for the random insect name endpoint

	/**
	*
	* Simple reproduction of what you are doing with intercooler.js for your random insect button
	* Written in ES6 javascript, i.e. will not work in some older browsers but can be written with more verbose syntax to do so if needed
	* It uses the modern method of retrieving data via xhr called 'fetch' which is asynchronous and returns a promise which is what the .then() is about. You don't need to understand how promises work for now but just know that they allow asynchronous code execution. I can explain more if needed.
	* You can include this js in a <script> on the page or put it in a js file and load that file on your page
	* This code could be updated with a little more syntax to turn it in to a module as in the end you will likely have different modules that you want to all load in to one single js file for your page
	*/

	// store the random insect button in a variable (you will need to add the attribute 'data-rand-insect-btn' to the <a> in your template)

benjclark / GPT Setup (Bunsen)

Created July 3, 2020 15:27

this is the migrated code that will live in GTM

	(function() {
	var adOptions = [
	{
	leaderboard: {
	slotId: 'doubleclick-leaderboard-ad',
	stylingClass: 'leaderboard',
	breakpoint: 'medium'
	}
	},
	{

benjclark / weirdo login field

Created August 28, 2020 10:21

	<form method="post" ms-login="true" class="memberstack-form" data-ms-form="login" name="wf-form-Sign-up-Form" data-name="Sign up Form" data-w-id="daee9403-0dfc-c379-3f36-5e36460bd87a" data-wf-id="["daee9403-0dfc-c379-3f36-5e36460bd87a"]" id="sign-up" redirect="user/dashboard" data-redirect="user/dashboard">
	<div data-w-id="daee9403-0dfc-c379-3f36-5e36460bd88e" data-wf-id="["daee9403-0dfc-c379-3f36-5e36460bd88e"]" class="field-wrapper">
	<label for="node" data-w-id="daee9403-0dfc-c379-3f36-5e36460bd88f" data-wf-id="["daee9403-0dfc-c379-3f36-5e36460bd88f"]" class="signup-label">Email address</label>
	<input class="signup-field w-input" maxlength="256" ms-field="email" data-w-id="daee9403-0dfc-c379-3f36-5e36460bd891" data-wf-id="["daee9403-0dfc-c379-3f36-5e36460bd891"]" type="email" required="">
	</div>
	<div data-w-id="daee9403-0dfc-c379-3f36-5e36460bd897" data-wf-id="["daee9403-0dfc-c379-3f36-5e36460bd897"]" class="field-wrapper">

benjclark / memberstack.js login form submit event handler

Last active August 28, 2020 20:17

	t.addEventListener("submit", function() {
	var e = p()(l.a.mark((function e(t) {
	var o, i, a, s, c, u;
	return l.a.wrap((function(e) {
	for (; ;)
	switch (e.prev = e.next) {
	case 0:
	if (t.preventDefault(),
	t.stopPropagation(),
	!0 !== D.a.hasRecaptcha) {

Created August 28, 2020 20:24

	t.forEach((function(e) {
	var t = e.getAttribute("ms-field") \|\| e.getAttribute("data-ms-member");
	if ("email" !== t && "password" !== t) {
	t = t.replace(/[^a-zA-Z\s]+/g, "-").toLowerCase();
	var r = e.getAttribute("type");
	if ("checkbox" === r)
	o[t] = e.checked;
	else if ("radio" === r) {
	var n = e.getAttribute("name");
	if (!i[n]) {

Ben Clark benjclark