-
Notifications
You must be signed in to change notification settings - Fork 105
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
f544421
commit a23a42c
Showing
19 changed files
with
504 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
--- | ||
title: A chantastic guide to preparing for layoff | ||
--- |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,27 @@ | ||
--- | ||
title: A chantastic guide to Raycast | ||
--- | ||
|
||
<!-- | ||
Found notes: | ||
A chantastic guide to Raycast | ||
0- config | ||
- [ ] open meeting (my schedule) | ||
- [ ] my schedule in bar | ||
- [ ] clipboard history | ||
- [ ] emoji picker | ||
- [ ] calc | ||
- [ ] | ||
- [ ] change display | ||
quick links | ||
window management | ||
Karabiner (layer up) | ||
meta | ||
hyper | ||
--> |
221 changes: 221 additions & 0 deletions
221
chan.dev/src/content/guide_steps/react-components/index.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,221 @@ | ||
--- | ||
title: A chantastic guide to components | ||
--- | ||
|
||
## This is a component | ||
|
||
```tsx | ||
function AComponent() { | ||
return <>Hello components</> | ||
} | ||
``` | ||
|
||
## A component can compose other components | ||
|
||
```tsx | ||
function AComponent() { | ||
return <h1>Hello components</h1> | ||
} | ||
``` | ||
|
||
## A component can me bade composeable via the `children` prop | ||
|
||
```tsx | ||
function AComponent({children = 'Hello components'}) { | ||
return <h1>{children}</h1> | ||
} | ||
``` | ||
|
||
## This is another component | ||
|
||
```tsx | ||
function App() { | ||
return <main>Hello app</main> | ||
} | ||
``` | ||
|
||
## One component can render another | ||
|
||
```tsx | ||
function App() { | ||
return ( | ||
<main> | ||
<AComponent>Hello app</AComponent> | ||
</main> | ||
) | ||
} | ||
``` | ||
|
||
## Options can be passed to components (these are called props) | ||
|
||
```tsx | ||
function App() { | ||
return ( | ||
<main> | ||
<AComponent style={color: "red"}>Hello app!</AComponent> | ||
</main> | ||
) | ||
} | ||
``` | ||
|
||
## But props must be accepted and implemented | ||
|
||
```tsx | ||
function AComponent({ | ||
style = null, | ||
children = 'Hello components', | ||
}) { | ||
return <h1 style={style}>{children}</h1> | ||
} | ||
``` | ||
|
||
## props can have default values | ||
|
||
```tsx | ||
function AComponent({ | ||
style = {textDecoration: 'underline'}, | ||
children = 'Hello components', | ||
}) { | ||
return <h1 style={style}>{children}</h1> | ||
} | ||
``` | ||
|
||
## but these values are not automatically merged with incoming values | ||
|
||
## merging values must be done manually as well | ||
|
||
```tsx | ||
let defaultStyles = {textDecoration: 'underline'} | ||
|
||
function AComponent({ | ||
style = null, | ||
children = 'Hello components', | ||
}) { | ||
let mergedStyles = {...defaultStyles, ...style} | ||
|
||
return <h1 style={mergedStyles}>{children}</h1> | ||
} | ||
``` | ||
|
||
## Control of merging can be delegated via prop callback functions — allowing component consumers to modify defaults | ||
|
||
```tsx | ||
let defaultStyles = {textDecoration: 'underline'} | ||
|
||
function AComponent({ | ||
style = null, | ||
children = 'Hello components', | ||
}) { | ||
let mergedStyles = | ||
typeof style === 'function' | ||
? style(defaultStyles) | ||
: {...defaultStyles, ...style} | ||
|
||
return <h1 style={mergedStyles}>{children}</h1> | ||
} | ||
``` | ||
|
||
```tsx | ||
function App() { | ||
return ( | ||
<main> | ||
<AComponent | ||
style={(defaultStyles) => ({ | ||
...defaultStyles, | ||
...{color: 'red'}, | ||
})} | ||
> | ||
Hello app! | ||
</AComponent> | ||
</main> | ||
) | ||
} | ||
``` | ||
|
||
## Default resolvers, and formatters can be exported for use by component consumers | ||
|
||
<!-- TODO (haven't introduced that "consumer" yet) --> | ||
|
||
```tsx | ||
let defaultStyles = {textDecoration: 'underline'} | ||
|
||
export function resolveDefaultStyles(incomingStyle) { | ||
return typeof incomingStyle === 'function' | ||
? incomingStyle(defaultStyles) | ||
: {...defaultStyles, ...incomingStyle} | ||
} | ||
|
||
export function AComponent({ | ||
style = null, | ||
children = 'Hello components', | ||
}) { | ||
let mergedStyles = resolveDefaultStyles(style) | ||
|
||
return <h1 style={mergedStyles}>{children}</h1> | ||
} | ||
``` | ||
|
||
## to avoid manually clearlisting all valid HTML attributes, use rest and spread syntax for props | ||
|
||
```tsx | ||
export function AComponent({ | ||
style = null, | ||
children = 'Hello components', | ||
...restProps | ||
}) { | ||
let mergedStyles = resolveDefaultStyles(style) | ||
|
||
return ( | ||
<h1 style={mergedStyles} {...restProps}> | ||
{children} | ||
</h1> | ||
) | ||
} | ||
``` | ||
|
||
## This implementation makes it simple to opt out of defaults (where necessary) | ||
|
||
```tsx | ||
function App() { | ||
return ( | ||
<main> | ||
<AComponent | ||
style={ | ||
(/* ignore defaults */) => { | ||
color: 'red' | ||
} | ||
} | ||
> | ||
Hello app! | ||
</AComponent> | ||
</main> | ||
) | ||
} | ||
``` | ||
|
||
## `children` can be an array | ||
|
||
```tsx | ||
function AComponent({ | ||
chant = false, | ||
children = 'Hello components', | ||
}) { | ||
return <h1>{[children, children, children].join(' ')}</h1> | ||
} | ||
``` | ||
|
||
## `children` can be many types. | ||
|
||
```tsx | ||
<AComponent>A string</AComponent> | ||
<AComponent>{123}</AComponent> | ||
<AComponent>{boolean}</AComponent> | ||
<AComponent>[1, 2, 3]</AComponent> | ||
<AComponent>[1, <>2</>, 3]</AComponent> | ||
<AComponent><>stuff</></AComponent> | ||
<AComponent><h1>stuff</h1></AComponent> | ||
``` | ||
|
||
## So treat `children` as opaque | ||
|
||
React.children |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,20 @@ | ||
--- | ||
title: a chantastic guide to theh Shure SM7B | ||
--- | ||
|
||
This mic is the standard. | ||
|
||
Love it or hate it, it is the choice for content creators, podcasters, broadcasters and more. | ||
|
||
It’s an extremely compromised mic. But its versatility more than compensates for it. | ||
|
||
it looks good on camera. and not for any single reason but a lot of little reasons. | ||
|
||
- integrated pop filter | ||
- integrated (and internal) shock mount | ||
- matte black color | ||
- integrated cable routing | ||
|
||
I wanted to hate this mic. With degrees in recording arts, I never understood why at-desk creators love this mic so much. | ||
|
||
The SM 7B microphone is not a perfect mic. It is the most versatile and that’s because of its shock mount system. I’ve seen a lot of mics attempt to compete on one aspect of the microphone quality. Would in fact it is easy to beat the S7 on one met. The problem is beating it on all metrics background noise isolation signal aesthetic and vibration injection |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,21 @@ | ||
--- | ||
title: A chantastic guide to supermotions | ||
--- | ||
|
||
vim supermotions | ||
|
||
- destructive insert | ||
- change full text object (inside) | ||
- change partial text object (til) | ||
- change line (C) | ||
- change partial line | ||
- (visualizing selections, understanding motion) | ||
- positional insert | ||
- above and below | ||
- begging of line | ||
- first character | ||
- end of line | ||
|
||
* jump to occurrence | ||
- next | ||
- previous |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
--- | ||
title: A chantastic guide to survivg a layoff | ||
--- |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,10 @@ | ||
--- | ||
title: a chantastic guide to looking good on webcam | ||
--- | ||
|
||
looking good with a webcam | ||
|
||
1. external keyboard (you can now get a more flattering angle - put it on boooks. benefit. no more keyboard clunking in someone’s ear) | ||
2. square up with your background (this ads stability to your shot and therefor stabilityvto you) | ||
3. orient your window so that the object of your focus is closest to the webcam | ||
4. get lit. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,17 @@ | ||
--- | ||
title: Excellence is viral | ||
--- | ||
|
||
About 9 years ago I gave the best man toast at my brother-in-law's wedding. | ||
|
||
I'm a decent speaker. And I did a good job. | ||
|
||
But I didn't realize how good a job until hearing that brother-in-law deliver the toast at his brother's wedding. | ||
|
||
It was the best groomsman toast I'd ever heard. Flawless. | ||
|
||
Excellence begets excellence. | ||
|
||
When you try hard, take your responsibilities seriously, you set a bar for others to beat. And when they exell, they don't just bless you with their achievement. They bless others. | ||
|
||
Do the absolute best you can, in al things. It will come back to you. |
Oops, something went wrong.