johnpmorris’s gists

johnpmorris / aspect-ratio.js

Last active August 21, 2017 00:08

get and display the aspect ratio of the browser window

(function(){ var wr; function gcd(a,b) {if(b>a) {temp = a; a = b; b = temp} while(b!=0) {m=a%b; a=b; b=m;} return a;} function r(x,y) {c=gcd(x,y); return ""+(x/c)+"/"+(y/c)} function setwr() { wr = r(window.innerWidth, window.innerHeight); var rd = document.createElement("div"); rd.id = 'rd'; rd.style.position = 'absolute'; rd.style.fontSize = '12px'; rd.style.backgroundColor = '#000'; rd.style.color = '#FFF'; rd.style.top = 0; rd.style.left = 0; var rt = document.createTextNode(wr); rd.appendChild(rt); document.body.appendChild(rd); } function updatewr(){ wr = r(window.innerWidth, window.innerHeight); document.querySelector('#rd').innerText = wr; } window.addEventListener('resize', updatewr); setwr(); })();

johnpmorris / domyshit.sh

Last active June 20, 2016 07:00

get most of our projects running smoothly with one command

	function domyshit {

	#bundle
	echo -e "\n...does this shit have a \e[1mGemfile? \e[0m💩\n"
	if [[ -a Gemfile ]]
	then
	echo -e "\n\e[32m...shit yeah! \e[0m💩\n"
	bundle install
	echo -e "\n\e[32m...done that shit \e[0m💩\n"
	else

johnpmorris / Slack-Themes.md

Last active November 17, 2016 06:20

after multiple requests to share my themes for various slack channels. here they are.

NetEngine

#06a8f9,#1897d6,#ffffff,#06a8f9,#1897D6,#ffffff,#15ff00,#FF8669

TriggerApp

#0070ff,#157be8,#2b92ff,#FFFFFF,#1c49ba,#FFFFFF,#5eff00,#de4d2c

johnpmorris / ‑.js

Created May 13, 2016 01:34

Replace standard hyphens with non-breaking hyphens.

	$('span').each(function() {
	var text = $(this).text();
	$(this).text(text.replace('-', '‑'));
	});

johnpmorris / twenty-percent-checker.html

Last active December 1, 2015 02:49

Javascript that draws an interactive grid to test if the document to be rendered complies with facebook's 20% text to image rule. Click the squares with text.

	<style type="text/css">
	@media screen {
	body { margin: 0; padding: 0; }
	#twenty-percent-grid { position: absolute; left: 0; right: 0; bottom: 0; top: 0; overflow: auto; }
	#twenty-percent-grid .grid-cell { float: left; width: 20vw; margin-left: -1px; margin-top: -1px; margin-bottom: -1px; margin-right: -1px; height: 20vh; border: 1px solid rgba(0, 225, 0, 0.4); }
	#twenty-percent-grid .grid-cell:hover { background: rgba(0, 225, 0, 0.01); }
	#twenty-percent-grid .grid-cell.js-active { background: rgba(0, 225, 0, 0.25); }
	#twenty-percent-grid.warning .grid-cell { border: 1px solid rgba(225, 0, 0, 0.4); }
	#twenty-percent-grid.warning .grid-cell:hover { background: rgba(225, 0, 0, 0.1); }
	#twenty-percent-grid.warning .grid-cell.js-active { background: rgba(225, 0, 0, 0.25); }

johnpmorris / dribbblefeed.js

Created November 7, 2015 01:20

	$(function() {
	$.getJSON('https://api.dribbble.com/v1/users/USERNAME/shots?access_token=TOKEN&callback=?', function(resp) {
	if (resp.data.length > 0) {
	$.each(resp.data.reverse(), function(i, val) {
	$('#dribbble').prepend(
	'<div class="dribbble-shot"><div class="dribbble-image" style="background-image: url('+val.images.hidpi+')"><a href="'+val.html_url+'"></a><h3>'+val.title+'</h3></div></div>'
	);
	});
	}
	});

johnpmorris / css-regions-polyfill.js

Created October 13, 2015 01:50

css regions, out of the box by https://github.com/FremyCompany

	/! CSS-REGIONS-POLYFILL - v3.0.0 - 2015-08-21 - https://github.com/FremyCompany/css-regions-polyfill - Copyright (c) 2015 François REMY; MIT-Licensed !/

	!(function() { 'use strict';
	var module = { exports:{} };
	var require = (function() { var modules = {}; var require = function(m) { return modules[m]; }; require.define = function(m) { modules[m]=module.exports; module.exports={}; }; return require; })();

	////////////////////////////////////////

	!(function(window, document) { "use strict";

johnpmorris / vminvmax.js

Last active October 13, 2015 01:43

some javascript to replicate this css and keep ie compatibility http://codepen.io/Johnm__/pen/bVdNWj

	// setting the size of the units used in the calc function from the example pen.
	var vminsize = 2
	var vmaxsize = 1.4
	var vhsize = 2

	function setSize() {

	var vw = window.innerWidth / 100 // vw = 1/100th viewport width
	var vh = window.innerHeight / 100 // vh = 1/100th viewport height
	var vmin = Math.min(vw, vh) // vmin = 1/100th of the smallest side

johnpmorris / slugify.js

Last active August 31, 2015 23:50 — forked from mathewbyrne/slugify.js

Javascript Slugify

	function slugify(text)
	{
	return text.toString().toLowerCase()
	.replace(/\s+/g, '-') // Replace spaces with -
	.replace(/[^\w\-]+/g, '') // Remove all non-word chars
	.replace(/\-\-+/g, '-') // Replace multiple - with single -
	.replace(/^-+/, '') // Trim - from start of text
	.replace(/-+$/, ''); // Trim - from end of text
	}

John johnpmorris