Skip to content

Instantly share code, notes, and snippets.

Avatar

Mike Heavers heaversm

View GitHub Profile
@heaversm
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 {
& {
View useful-github-commands.sh
#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
#source: https://www.digitalocean.com/community/tutorials/how-to-set-up-automatic-deployment-with-git-with-a-vps
#on VPS:
@heaversm
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
//see https://github.com/aframevr/aframe/issues/4354#issuecomment-567052948
navigator.xr.requestDevice = navigator.xr.requestDevice || function () {
return new Promise((resolve, reject) => {
resolve({
supportsSession: new Promise((resolve, reject) => {
resolve({
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
heaversm / vscode-tips.md
Last active Feb 2, 2020
VSCode Shortcuts
View vscode-tips.md

VSCode Shortcuts

MOUSE AND KEYBOARD

  • 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
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} = e.target;
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
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
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}.`)
resolve()
}, 2000);
})
}
View useful-npm-commands.sh
# see outdated modules
npm outdated
# update all modules (latest minor version)
npm update --save/--save-dev
@heaversm
heaversm / useful-wp-commands.sh
Created Oct 31, 2019
Useful helpers for wordpress
View useful-wp-commands.sh
#Add a new user
wp user create <username> <email> --role=administrator --user_pass=mypassword
You can’t perform that action at this time.