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