Skip to content

Instantly share code, notes, and snippets.

View johnpmorris's full-sized avatar
caffeine to code converter

John johnpmorris

caffeine to code converter
View GitHub Profile
@johnpmorris
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
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
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
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
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); }
$(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>'
);
});
}
});
/*! 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
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
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
}