Skip to content

Instantly share code, notes, and snippets.

View cmcculloh's full-sized avatar

Christopher McCulloh cmcculloh

View GitHub Profile
@cmcculloh
cmcculloh / msConverter.js
Created June 11, 2021 14:41
Converting a timespan of HH:MM:SS to MS using Javascript
console.log('qa', (1 * 60 * 60 * 1000) + (40 * 60 * 1000) + (30 * 1000))
const rawTimespan = '01:40:30';
const rawTimespanArray = rawTimespan.split(':').slice(-3);
const timespanFromReduce = rawTimespanArray.reduce((timespan, segment, i, rawTimespanArray) => {
@cmcculloh
cmcculloh / what-forces-layout.md
Last active May 11, 2020 16:43 — forked from paulirish/what-forces-layout.md
What forces layout/reflow. The comprehensive list.

What forces layout / reflow

All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck.

Element

Box metrics
  • elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent
  • elem.clientLeft, elem.clientTop, elem.clientWidth, elem.clientHeight
  • elem.getClientRects(), elem.getBoundingClientRect()
@cmcculloh
cmcculloh / highlights
Last active August 8, 2017 18:10
Bookmarklet that allows you to highlight (permanently for that visit) text on page.
javascript: (function() {
/* STYLES */
const css = '.highlight { background: yellow; }';
const head = document.head || document.getElementsByTagName('head')[0];
const style = document.createElement('style');
style.type = 'text/css';
if (style.styleSheet){
style.styleSheet.cssText = css;
} else {
{
"Badge Text" : "\\(user.gitBranch)",
"Working Directory" : "\/Users\/cmcculloh",
"Prompt Before Closing 2" : 0,
"Selected Text Color" : {
"Red Component" : 0.8866617679595947,
"Color Space" : "Calibrated",
"Blue Component" : 0.9910151958465576,
"Alpha Component" : 1,
"Green Component" : 0.9932246208190918
@cmcculloh
cmcculloh / linkbait.md
Last active October 2, 2015 16:29
Top 28 strategies for perfect link bait git commit comments, first you'll be skeptical, then you'll be inspired.

Writing git commit comments is boring. Following this guide will make it easy to make it much more fun. Inspired by this comic, Clickbait Headline Generator and this article used as a reference.

  1. The List
    Good for fixes that required a number of discrete methods to fix something
    • "10 antipaterns everyone knows are actually just lies"
    • "5 weird ways spinbox changed in just 2 weeks, the 4th will leave you speachless."
  2. Case Studies
    Perfect for unit test commit comments (you can even use the GH Issue number as the case study number)
    • "Case Study #1543: Does spinbox still allow exceeding maximum through manual input?"
    • `"Case Study #24: Does repeater still
@cmcculloh
cmcculloh / test
Last active September 26, 2015 12:10
<html><body><p style="word-wrap: normal">When I explain the Art of Manliness to other people, I often describe it as a site about growing up well, aimed at men. Our mission is to help young men mature into well-rounded adults, and to aid older men in improving areas of their lives they still feel are lacking.
Yet despite this focus, we labor under no delusions that growing up is an easy task. In fact, while maturing has always been a challenge, we’d posit that it’s never been as hard to do as it is in our modern world. Consequently, many young people seem stuck in limbo – no longer a child, but not fully an adult.
Oftentimes pundits point to the economy to explain this phenomenon of arrested development. Surely the state of the job market, particularly for men, looms large in the difficulty of getting out on one’s own and setting up a household. 23% of modern men remain unmarried over their lifetime, compared to 17% of women — a gap between the sexes that has been widening since 1960. Part of the reason for
@cmcculloh
cmcculloh / marionette-cheat-sheet.md
Last active June 7, 2018 17:09
Marionette Cheat Sheet
<!DOCTYPE html>
<html class="fuelux">
<head lang="en">
<!-- styles -->
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<link href="http://www.fuelcdn.com/fuelux/3.3.0/css/fuelux.min.css" rel="stylesheet"/>
<link href="http://www.fuelcdn.com/fuelux-mctheme/1.1.0/css/fuelux-mctheme.min.css" rel="stylesheet"/>
<!-- scripts -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
@cmcculloh
cmcculloh / default.js
Last active August 29, 2015 14:02
Twitter Getter - Blinking tweets on your sparkboard
//put this in a config/ directory
module.exports = {
io: {
token: '',
deviceId: ''
},
twitter: {
consumer_key: '',
consumer_secret: '',
access_token_key: '',
<!--div id="canvas-header" class="container-fluid no-gutter">
<div class="row-fluid">
<div class="col-sm-6 col-lg-4">
<div class="row-fluid">
<div class="col-sm-12 col-lg-12 no-gutter">
<div class="title">
<input class="form-control editable input-lg" id="name-input" type="text" placeholder="{{I18N_NAME}}" value="{{name}}{{^name}}{{I18N_NAME}}{{/name}}">
</div>
</div>
</div>