Skip to content

Instantly share code, notes, and snippets.

Sam Beevors sambeevors

View GitHub Profile
@sambeevors
sambeevors / muh-stack.md
Last active Nov 30, 2018
Everything I use for web development
View muh-stack.md

My Development Stack

Editor

I use VScode with the following extensions:

  • Bracket Pair Colorizer
  • Code Runner
  • DotEnv
  • Easy icon theme
  • EditorConfig for VS Code
  • ESLint
@sambeevors
sambeevors / hooks.js
Last active Jun 22, 2018
Kinda jQuery like (but not really) es2015 module for consistent and scalable DOM manipulation
View hooks.js
/*
generateQueryString
Returns a kebab-case js hook.
generateQueryString('fooBar')
'.js-foo-bar'
*/
const generateQueryString = (string, prefix = 'js') =>
View ezcanvas.js
!function(t){function e(s){if(n[s])return n[s].exports;var i=n[s]={i:s,l:!1,exports:{}};return t[s].call(i.exports,i,i.exports,e),i.l=!0,i.exports}var n={};return e.m=t,e.c=n,e.i=function(t){return t},e.d=function(t,n,s){e.o(t,n)||Object.defineProperty(t,n,{configurable:!1,enumerable:!0,get:s})},e.n=function(t){var n=t&&t.__esModule?function(){return t.default}:function(){return t};return e.d(n,"a",n),n},e.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},e.p="",e(e.s=4)}([function(t,e,n){"use strict";function s(t){return t&&t.__esModule?t:{default:t}}Object.defineProperty(e,"__esModule",{value:!0}),e.Ease=e.EZCanvas=void 0;var i=n(1),a=s(i),r=n(3),o=n(2),c=s(o),u={inQuad:function(t){return t*t},outQuad:function(t){return t*(2-t)},inOutQuad:function(t){return t<.5?2*t*t:-1+(4-2*t)*t},inCubic:function(t){return t*t*t},outCubic:function(t){return--t*t*t+1},inOutCubic:function(t){return t<.5?4*t*t*t:(t-1)*(2*t-2)*(2*t-2)+1},inQuart:function(t){return t*t*t*t},outQuart:function(t){return 1- --t*t*
View heightGroup.min.js
"use strict";function _classCallCheck(a,b){if(!(a instanceof b))throw new TypeError("Cannot call a class as a function")}var HeightGroup=function(){function a(b){_classCallCheck(this,a),this.nodeList=document.querySelectorAll(b),this.nodeHeights,this.newHeight}return a.prototype.watchElements=function(){var b=this;window.addEventListener("resize",function(){b.matchHeights()}),this.matchHeights()},a.prototype.matchHeights=function(){this.nodeHeights=[],this.newHeight=null;for(var b=0;b<this.nodeList.length&&!window.CP.shouldStopExecution(1);b++)this.nodeList[b].style.minHeight="auto",this.nodeHeights.push(this.nodeList[b].offsetHeight);window.CP.exitedLoop(1),this.newHeight=Math.max.apply(null,this.nodeHeights);for(var b=0;b<this.nodeList.length;b++)this.nodeList[b].style.minHeight=this.newHeight+"px"},a}();
@sambeevors
sambeevors / heightGroup.js
Created Jan 3, 2017
Group up elements to ensure that they will all match the height of the tallest one.
View heightGroup.js
class HeightGroup {
constructor (querySelector) {
this.nodeList = document.querySelectorAll(querySelector)
this.nodeHeights
this.newHeight
}
watchElements () {
window.addEventListener('resize', () => {
this.matchHeights()
View matchheight.min.js
"use strict";var matchHeight=function(){var a=function(){b(),c()},b=function(){window.addEventListener("resize",function(){c()})},c=function(){for(var b=document.querySelectorAll("[matchHeight]"),c=[],d=0;d<b.length;d++)b[d].style.minHeight="auto",c.push(b[d].offsetHeight);for(var e=Math.max.apply(null,c),f=0;f<b.length;f++)b[f].style.minHeight=e+"px"};return{init:a}}();matchHeight.init();
@sambeevors
sambeevors / matchheight.js
Last active Nov 16, 2016
Matches the height of all elements with the matchHeight data attribute.
View matchheight.js
const matchHeight = (() => {
const init = () => {
_eventListeners();
_matchHeight();
},
// Reruns on window resize
_eventListeners = () => {
window.addEventListener('resize', () => {
_matchHeight();
You can’t perform that action at this time.