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…


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