Skip to content

Instantly share code, notes, and snippets.

View gdibble's full-sized avatar
🤩
Optimistic

Gabriel Dibble gdibble

🤩
Optimistic
View GitHub Profile
@gdibble
gdibble / isMobile.const.js
Created March 11, 2022 00:07
Mobile Device Feature Detection (Works in Chrome + Safari as of 2022-02-07)
/** isMobile - Feature Detection of an actual mobile device
* @description The localStorage.mobile works in Chrome mobile; the latter works in Safari mobile.
* Does not trigger desktop browsers with or w/o the dev-tools open and/or on a mobile simulator.
* @see https://stackoverflow.com/questions/11381673/detecting-a-mobile-browser/71030087#71030087
*/
const isMobile = localStorage.mobile || window.navigator.maxTouchPoints > 1;
@gdibble
gdibble / CloseConfirm.module.scss
Created March 10, 2022 23:54
CSS x to check animation
/** CloseConfirm.module.scss - Animated x → ✓
* @see https://codepen.io/gdibble/pen/LYePYXL
* @example <button className={styles.CloseConfirm} type="button" onClick={someFn}><div className="check"> </div></button>
*/
$SkyBlue100: #08b2e3;
.CloseConfirm {
position: absolute;
top: 0.25em;
/** replaceJSX
* RegExp search text and replace with JSX
* @see https://stackoverflow.com/a/63647844
* @param {string} str
* @param {RegExp} find
* @param {JSX} replace
* @returns {JSX}
*/
export default function replaceJSX(str, find, replace) {
const parts = str.split(find);
@gdibble
gdibble / findDateRanges.js
Created October 4, 2019 22:30
findDateRanges: Find and group date-ranges in an Array of dates
/**
* @function findDateRanges
* @description Find and group date-ranges in an Array of dates
*
* @param {Array} sourceCollection - containing ISODateStrings in any order
* @param {?Array} destinationCollection - defaults to []
*
* @returns {Array} - ^destinationCollection passed or new Array
*
* @example findDateRanges([
@gdibble
gdibble / intersectionObj.js
Created May 12, 2017 22:41
Lodash mixin to find similar property values in an array of objects
/**
* intersectionObj
* Pass an array of objects to find the similar objects
* You may also pass a single prop as a string, or an array of props to ignore
* Returns an array of the items which intersected
*
* Usage example:
* var arr = [ { id:1, b:2, c:3 }, { id:2, b:3, c:4 }, { id:3, b:2, c:3 } ];
* _.intersectionObj(arr, 'id');
* » [ { id:1, b:2, c:3 }, { id:3, b:2, c:3 } ]
function clone(thing, opts) {
var newObject = {};
if (thing instanceof Array) {
return thing.map(function (i) { return clone(i, opts); });
} else if (thing instanceof Date) {
return new Date(thing);
} else if (thing instanceof RegExp) {
return new RegExp(thing);
} else if (thing instanceof Function) {
return opts && opts.newFns ? new Function('return ' + thing.toString())() : thing;
@gdibble
gdibble / grab.styl
Last active May 12, 2017 22:47 — forked from BenKalsky/grab.scss
Grabbing Cursor SCSS Mixin
.grab-cursor
cursor: url('http://www.google.com/intl/en_ALL/mapfiles/openhand.cur'), all-scroll
cursor: url('data:image/vnd.microsoft.icon;base64,AAACAAEAICACAAcABQAwAQAAFgAAACgAAAAgAAAAQAAAAAEAAQAAAAAAAAEAAAAAAAAAAAAAAgAAAAAAAAAAAAAA////AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD8AAAA/AAAAfwAAAP+AAAH/gAAB/8AAA//AAAd/wAAGf+AAAH9gAADbYAAA2yAAAZsAAAGbAAAAGAAAAAAAAA//////////////////////////////////////////////////////////////////////////////////////gH///4B///8Af//+AD///AA///wAH//4AB//8AAf//AAD//5AA///gAP//4AD//8AF///AB///5A////5///8='), all-scroll
cursor: -webkit-grab
cursor: -moz-grab
cursor: -o-grab
cursor: -ms-grab
cursor: grab
.grabbing-cursor
/* Detection: http://gist.github.com/df3fd4016e632344336f3227a6f159e6
* While userAgent sniffing is not ideal, arguably it is best in most cases
* throw in some proper feature detection & this will give you vast UI/UX control
*/
var userAgent = navigator.userAgent || navigator.vendor || window.opera || navigator.platform;
this.isMobile = (function (browserUserAgent) { return /(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(browserUserAgent) || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|n
@gdibble
gdibble / reIndexOf.js
Last active May 20, 2016 22:04
Regular Expresion indexOf for Arrays
/**
* Regular Expresion IndexOf for Arrays
* This little addition to the Array prototype will iterate over array
* and return the index of the first element which matches the provided
* regular expresion. Note: This will not match on objects.
* @param {RegEx} rx The regular expression to test with. E.g. /-ba/gim
* @return {Numeric} -1 means not found
*/
if (typeof Array.prototype.reIndexOf === 'undefined') {
Array.prototype.reIndexOf = function (str) {
@gdibble
gdibble / random-number.js
Last active August 29, 2015 14:19
random number generator - lower/upper range, as integer or not
/*
* return random number within lower/upper range
* output a whole number by passing returnInteger=1
* Examples: $R(0, 10); >>> 3.141592653589793
* $R(0, 10, 1); >>> 7
*/
function $R(lowerLimit, upperLimit, returnInteger) {
var step1 = Math.random() * (upperLimit - lowerLimit);
if (returnInteger && (returnInteger === 1)) {
return lowerLimit + parseInt(step1, 10);