To see Reactotron logs while running on an Android, type the following into the Terminal.
adb reverse tcp:9090 tcp:9090To reload Android app device without opening and closing:
adb shell…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
…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: {…
- 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…
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…
