Skip to content

Instantly share code, notes, and snippets.

Avatar

Greg Gant fuzzywalrus

View GitHub Profile
@fuzzywalrus
fuzzywalrus / gulpfile.js
Last active Mar 9, 2021
Gulp 4.x with Sass, JS, BrowserSync
View gulpfile.js
// Load plugins
const gulp = require("gulp");
const sass = require('gulp-sass');
const cleanCSS = require('gulp-clean-css');
const gulpif = require('gulp-if');
const rename = require('gulp-rename');
const kit = require('gulp-kit-2');
const { series, watch } = require("gulp");
const browsersync = require('browser-sync').create();
View responsivevideo.js
//es5 for max browser compatible, works with mutliple videos on a page. No resize event.
//get all vids
var video = document.querySelectorAll('video')
//add source to video tag
function addSourceToVideo(element, src) {
var source = document.createElement('source');
source.src = src;
source.type = 'video/mp4';
@fuzzywalrus
fuzzywalrus / script-load-fail.js
Last active Nov 22, 2017
Check if any given script has errored on load
View script-load-fail.js
var myScript = document.createElement('script');
myScript.src = 'http://www.madeupurl.com/script.js';
myScript.onload = function() {
console.log('Script loaded.');
};
myScript.onerror = function() {
console.log('script failed.');
};
@fuzzywalrus
fuzzywalrus / pure css circular progress bar.scss
Created Oct 23, 2017
This uses a data-attribute to create the progress bar. Forked from https://bootsnipp.com/snippets/featured/circle-progress-bar. This functions based on increments defined in the the scss. Change the $howManySteps var and the for loops below will generate the CSS. The data attributes will need to be changed to reflect the newly generated CSS. Let…
View pure css circular progress bar.scss
//styling
$borderWidth: 7px;
$animationTime: 1.5s;
$border-color-default: #eee;
$border-color-fill: #ffb43e;
$size: 150px;
//Create how many steps
$howManySteps: 10; //this needs to be even.
@fuzzywalrus
fuzzywalrus / imageconversion.sh
Created Aug 20, 2017
Simple image conversion script design create from a double density asset both @2x and @1x versions of said image in JPEG, JPEG2000, WebP for HTML5 picture elements.
View imageconversion.sh
# simple image conversion script design create from a double density asset both @2x and @1x versions of said image in JPEG, JPEG2000, WebP for HTML5 picture elements.
# Requires Zenity, ImageMagick with JPEG2000, MozJPEG, and Webp
# brew install imagemagick --with-openjpeg
# brew install webp
# brew install mozjpeg
# brew install zenity
file=$(zenity --file-selection --title="Select a File")
datafill=`zenity --forms \