heaversm

React Express Heroku Quickstart

npm init -y

Backend

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

const express = require("express");

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

#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

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

heaversm

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

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

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

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

# see outdated modules
npm outdated

# update all modules (latest minor version)
npm update --save/--save-dev