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