Skip to content

Instantly share code, notes, and snippets.


Mike Heavers heaversm

View GitHub Profile
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
heaversm / styled-components.jsx
Last active Feb 2, 2020
Styled Components Conventions
View styled-components.jsx
import styled, { ThemeProvider, injectGlobal } from 'styled-components';
const theme = {
red: '#FF0000',
black: '#393939',
grey: '#3A3A3A',
lightgrey: '#E1E1E1',
offWhite: '#EDEDED',
maxWidth: '1000px',
bs: '0 12px 24px 0 rgba(0, 0, 0, 0.09)', /*box shadow*/
heaversm / common-js-tasks.js
Last active Apr 7, 2020
Common JS Tasks and Functions
View common-js-tasks.js
//basic async await
// this is the function we want to schedule. it's a promise.
const addOne = (x) => {
return new Promise(resolve => {
setTimeout(() => {
console.log(`I added one! Now it's ${x + 1}.`)
}, 2000);
# see outdated modules
npm outdated
# update all modules (latest minor version)
npm update --save/--save-dev