Skip to content

Instantly share code, notes, and snippets.


Mike Heavers heaversm

View GitHub Profile
heaversm / co2fromeventflights.js
Created Oct 25, 2022
all-company-trip co2 estimator
View co2fromeventflights.js
let totalPeopleInDirectory = 0;
let peopleWithUnknownLocation = 0;
let numLocations;
const locations = [];
const addPersonToTotal = function () {
totalPeopleInDirectory += 1;
const addToPeopleWithUnknownLocation = function () {
heaversm / docker-compose.yml
Created Aug 30, 2022
Docker Compose Running Cypress Tests
View docker-compose.yml
version: '3'
# the client container, running webpack and the dev server
image: path_to/image
- allhosts
heaversm /
Last active Aug 9, 2022
regex: wrap all text inside matching tags
  • Find: <p class="italic text-center">(.+?)<\/p>
  • Replace: <p class="italic text-center"><time class="dt-published" datetime="$1">$1</time></p>
  • Example: <p class="italic text-center">03/01/2015</p>
  • Result: <p class="italic text-center"><time class="dt-published" datetime="03/01/2015">03/01/2015</time></p>
heaversm /
Last active Jun 1, 2022
Easy up and running Create React App with Express backend running on Heroku with auto-deploys

React Express Heroku Quickstart

npm init -y


create folder server and file index.js inside, with contents:

const express = require("express");
heaversm / useful-sass.scss
Last active Sep 16, 2020
Useful sass mixins
View useful-sass.scss
#fluid type between a small and large screen size / small & large font size
@mixin fluid-type($min-vw, $max-vw, $min-font-size, $max-font-size) {
$u1: unit($min-vw);
$u2: unit($max-vw);
$u3: unit($min-font-size);
$u4: unit($max-font-size);
@if $u1 == $u2 and $u1 == $u3 and $u1 == $u4 {
& {
#Clone and checkout a single github branch
git clone --single-branch --branch <branchname> <remote-repo>
#delete all local branches matching pattern
git branch | grep "mh/#*" | xargs git branch -D
#set up git post-receive hooks for autodeployment
#on VPS:
heaversm / js-library-glitch-fixes.js
Created Apr 5, 2020
Fixes for some weird but crucial bugs in JS
View js-library-glitch-fixes.js
//Polyfill for aframe/threejs raycasting
//navigator.xr.requestDevice is not a function
navigator.xr.requestDevice = navigator.xr.requestDevice || function () {
return new Promise((resolve, reject) => {
supportsSession: new Promise((resolve, reject) => {
immersive: true,
View Useful-css.css
.next-image-button:focus { /* disable focus ring */
outline: none;
.next-image-button:focus-visible { /* enable focus ring for assistive devices */
outline: 3px solid blanchedalmond;
/* avoid layout flash on images by setting default aspect ratio equal to initial width and height of html element */
heaversm /
Last active Feb 2, 2020
VSCode Shortcuts

VSCode Shortcuts


  • option + dbl_click to multiselect entire words.
  • opt + cmd + ↓ selects multiple lines
  • Pasting multi-line content into multi-line cursors distributes them, for example, among list items
  • cmd + d selects additional instances of the highlighted code
  • shift + cmd + l selects all instances of the highlighted code
  • shift + → expands selection one space
heaversm / react-functionality.js
Last active May 6, 2020
Common React Functionality
View react-functionality.js
/* reusable function to update any form input value with state */
state = {
title: ''
handleChange = (e)=>{
const {name, type, value} =;
console.log({name,type,value}); //gives keys to your console log values when you put brackets around them!
const val = type === 'number' ? parseFloat(value) : value; //converts numbers from strings