heaversm

import React, { Component } from 'react'
import { AppRegistry, Animated, Easing, View, StyleSheet, Image, Dimensions, ScrollView, TouchableOpacity, Text } from 'react-native'

const deviceWidth = Dimensions.get('window').width
const deviceHeight = Dimensions.get('window').height
const DISMISS_MODAL_THRESHOLD = 150 //distance we have to scroll in the y direction to dismiss the carousel

const images = [
  require('./assets/images/image01.jpg'),
  require('./assets/images/image02.jpg'),

heaversm

#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

#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 {
    & {

heaversm

//MAP A NUMBER FROM ONE RANGE TO ANOTHER:
function map_range(value, low1, high1, low2, high2) {
    return low2 + (high2 - low2) * (value - low1) / (high1 - low1);
}

//RANDOM DECIMAL NUMBER BETWEEN [MIN] and [MAX]:
randomNumber(min, max) {
  return Math.random() * (max - min) + min;
}

heaversm

//Set state in react to the previous state plus an updated value:

const initState = {
  thing1: 0,
  thing2: null,
  thing3: false,
};

const [state, setState] = useState(initState);

heaversm

php -S localhost:8080
#boots a local php server

python -m SimpleHTTPServer
#boots a local http server on python 2

python -m http.server
#boots a local http server on python 3

sass --watch main.scss main.css

heaversm

/* 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

//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);
  })
}

heaversm

//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,

heaversm

.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 */