Sometimes I just want to work on some side projects on my work laptop for personal learning and still light up my personal GitHub account squares with my personal Github account.

I used a mix of a tutorial and a Stack Overflow answers and this is what worked for me.

Step 1 — Create a New SSH Key

cd ~/.sshssh-keygen -t rsa -C "my-personal-github-email@gmail.com"Generating public/private rsa key pairEnter file in which to save the key (/Users/administrator/.ssh/id_rsa): /Users/administrator/.ssh/id_rsa_personalEnter passphrase (empty for no passphrase)Enter same passphrase again:Your id has been saved in .....

Step 2— Enter SSH Keys into Personal Github Account

Log into personal github account, go to account settings, go to…


I keep getting tired of looking up old code to override some style.

import FormControlLabel from '@material-ui/core/FormControlLabel'import { withStyles } from '@material-ui/core/styles'export const StyledFormControlLabel = withStyles({  root: {


  1. Add initial State in Reducers/initialState

i.e. Reducers/initialState/caseManager.js

Put in the shape of the state you’d like to access and update.

i.e.

export const caseManager = { 
showFilters: true,
otherStateStuff: null
}

2. Add to index of initial states in Reducer’s initial states

Reducers/initialState/index.js

import { client } from './client'import { filters } from './filters'import { locations } from './locations'import { screener } from './screener'import { nextSteps } from './nextSteps'import { ui } from './ui'import { caseManager } from './caseManager'export { client, filters, locations, screener, nextSteps, ui, caseManager }

3. Create a file in…


Because I always mix up the positive and negative and transform with translate…

The proper syntax

@mixin absCenter {  position: absolute;  top: 50%;  left: 50%;  transform: translate(-50%, -50%)}


Again…I keep forgetting this…

Option 1: Importing directly from MUI library

yarn add @material-ui/icons

Go here: https://material-ui.com/components/material-icons/

Click or search for icons

Import like so on a React file:

import ErrorIcon from '@material-ui/icons/Error';

If you want to customize it further…

import ErrorIcon from '@material-ui/icons/Error'import { withStyles } from '@material-ui/core/styles'export const StyledErrorIcon = withStyles({  root: {   fontSize: 15,   marginRight: 5,   '&:hover': {     backgroundColor: 'red'   }   '@media (max-width: 350px)' : {     fontSize: 13,   

},
},})(ErrorIcon)

Option 2: Importing SVGs directly from Material

Go here: https://material.io/resources/icons/?style=baseline

Download an SVG from there.

Open the svg.

Make a file path somewhere…do something like this…

import React from 'react'const signUpPath = (  <>   <path d='M0 0h24v24H0z' fill='none' />   <path d='M15 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4     4zm-9-2V7H4v3H1v2h3v3h2v-3h3v-2H6zm9 4c-2.67 0-8 1.34-8 4v2h16v-2c0-  2.66-5.33-4-8-4z' />  </>)export default signUpPath


For when I just want to do a quick and dirty check of styling getting implemented properly, this is the JSX convention I should follow:

function HelloHeader() {…


VoiceOver is a screen reader program that comes on new Mac computers, iPhones, iPads, and iPod touches.

Toggle VoiceOver: Command + F5

VO: Control + Option

VO + command +…


<!DOCTYPE html><html lang="en">  <head>    <meta charset="UTF-8" />    <meta name="viewport" content="width=device-width, initial-      scale=1.0" />    <meta http-equiv="X-UA-Compatible" content="ie=edge" />    <title>Document</title>    <style>      #navigationLink {        opacity: 0;      }


Load up the site, then open up the console, then just paste in the following code:

document.body.addEventListener('focusin', (event) => {  console.log(document.activeElement)})

Now when you tab, the console should log…


Because googling What does {…props} mean yields little results

Spread Attributes

If you already have props as an object, and you want to pass it in JSX, you can use ... as a “spread” operator to pass the whole props object. These two components are equivalent:

// These two are equivalentfunction App1() {
return <Greeting firstName="Ben" lastName="Hector" />;
}

function App2() {
const props = {firstName: 'Ben', lastName: 'Hector'};
return <Greeting {...props} />;
}

You can also pick specific props that your component will consume while passing all other props using the spread operator.

const Button = props => {
const { kind, ...other } = props;
const…

Kevin Kim

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store