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: {    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…


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 =…

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