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 SSH Public Keys, set the title to whatever, and paste in Key from whatever is stored in your .ssh …


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: {    color: 'red',  },  label: {    textTransform: 'capitalize',  },})(FormControlLabel)

That should do it


  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 the Reducers (i.e. …


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() {
return <h1 style={{color: "red", fontSize: "16px"}}>Hello World!</h1>
}

Two curly braces, and then camelCase everything.

Source:

https://dev.to/ceceliacreates/inline-styling-with-jsx-20k0


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 + H: Next heading

VO + A: Start Reading

Control (while in Reading): Pause/Resume Reading

Tab: Next link or form control

VO + →: Read next item

VO + ←: Read previous item

VO + B: Read from top to current location

VO + command + L: Next link

VO + space: Activate a link or form control

Sources

Getting Started with WebAIM


<!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;      }     #navigationLink:focus {        opacity: 1;     }    </style>  </head><body>   <div id="sidebarMenu">     <ul id="navigation" tabindex="-1">       <li><a href="/about">About</a></li>       <li><a href="/contact">Contact Us</a></li>       <li><a href="/signup">Sign up</a></li>     </ul>   </div>   <div id="mainContent">     <p>Lorem ipsum stuff</p>     <a id="navigationLink" href="#navigation">Click me to set focus to sidebar</a>   </div> </body></html>

The navigation link is hidden by default; when you tab to it though, it will show. When you click on the link, it will go to the navigation sidebar, but since it’s technically a tabbable element, the focus element will wrap the sidebar element. Useful for accessibility. And this is just straight up HTML only.

Sources:

https://frontendmasters.com/courses/javascript-accessibility/coding-a-skip-link-wiring-it-up/


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 what element the app is focused in at.

Great for detecting things like if people wrote outline: 0 in the css code, or something wonky is happening where things aren’t tabbing over to the right thing.

Source:


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 className = kind === "primary" ? "PrimaryButton" : "SecondaryButton";
return <button className={className} {...other} />;
};

const App = () => {
return (
<div>
<Button kind="primary" onClick={() => console.log("clicked!")}>
Hello World! …

About

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