├── .gitignore
├── .prettierrc
├── .vscode
    └── settings.json
├── README.md
├── components
    └── Button
    │   ├── Button.docs.mdx
    │   ├── Button.stories.tsx
    │   ├── Button.tsx
    │   └── index.ts
├── gatsby-config.js
├── index.js
├── notes
    ├── apollo-graphql.md
    ├── array-methods.md
    ├── async-cheatsheet.md
    ├── async-load-css.md
    ├── autofill.md
    ├── awesome-web-dev-resources.md
    ├── axios.md
    ├── better-link-underlines.mdx
    ├── better-mobile-form-inputs.mdx
    ├── big-list-naughty-strings.md
    ├── button-as-link.mdx
    ├── change-default-text-editor-mac.md
    ├── check-if-js-array-empty.md
    ├── check-if-js-array.md
    ├── check-if-js-object-empty.md
    ├── circleci.md
    ├── clamp-number.md
    ├── cleanup-node-modules.md
    ├── clear-dns-cache.md
    ├── clickable-box.md
    ├── coding-standards.md
    ├── command-line-tools.md
    ├── commit-message-guidelines.md
    ├── contentful-migrations.md
    ├── create-local-self-signed-certs.md
    ├── crypto.mdx
    ├── css-aspect-ratio.md
    ├── css-cursors.mdx
    ├── css-env-vars.md
    ├── css-filters.md
    ├── css-font-stacks.md
    ├── css-grid.md
    ├── css-logical-properties.md
    ├── css-media-queries.md
    ├── css-object-styles.md
    ├── css-protips.md
    ├── css-rainbow-links.mdx
    ├── css-scroll-behaviour.md
    ├── css-scroll-margin-top.md
    ├── css-style-siblings-hover.md
    ├── cutting-the-mustard.md
    ├── deno.md
    ├── destructuring.md
    ├── docker.md
    ├── es6-module-syntax.md
    ├── es6-templating.md
    ├── express-middleware-testing.md
    ├── favicons.md
    ├── fetch.md
    ├── file-size-of-files-in-directory.md
    ├── firebase.md
    ├── fish-shell.md
    ├── fixed-width-numbers.md
    ├── fluid-typography.md
    ├── font-face.md
    ├── formik.md
    ├── full-bleed-utility.mdx
    ├── fullscreen.md
    ├── gatsby.md
    ├── get-selected-text.md
    ├── git-branching.md
    ├── git.md
    ├── github-actions.md
    ├── google-fonts.md
    ├── graphql.md
    ├── gsap.md
    ├── hexadecimal-transparency.md
    ├── http-methods.md
    ├── ignoring-code.md
    ├── immer.md
    ├── inflect.md
    ├── intersection-observer.md
    ├── ios-safari-height-bug.md
    ├── is-mobile-check.md
    ├── jest-mocks.md
    ├── jest.md
    ├── js-body-class.md
    ├── js-classes.md
    ├── keycode.md
    ├── lobotomised-owl-selector.mdx
    ├── long-words-links.md
    ├── mac-dark-mode.md
    ├── make-directory-if-none-exists.md
    ├── mix-blend-mode.md
    ├── mock-react-router-storybook.md
    ├── native-image-lazy-loading.md
    ├── nextjs.mdx
    ├── nock.md
    ├── npm-script-another-directory.md
    ├── oembed.md
    ├── opengraph-metacrap.md
    ├── performance-tips.md
    ├── picture.md
    ├── plop.md
    ├── postman.md
    ├── pure-esm-package.md
    ├── quotation-marks.md
    ├── react-client-only.md
    ├── react-compound-components.mdx
    ├── react-conditionally-render-client-server.md
    ├── react-errorboundary.md
    ├── react-query-with-graphql.md
    ├── react-query.md
    ├── react-ssr.md
    ├── react-typescript.md
    ├── react-usecontext.md
    ├── react-usereducer.md
    ├── react-useref.md
    ├── readme.md
    ├── redux-concepts.md
    ├── redux-saga.md
    ├── redux.md
    ├── remove-array-duplicates.md
    ├── remove-items-from-arrays.md
    ├── render-if-role.md
    ├── save-scroll-position.md
    ├── security.md
    ├── showing-hiding-content.md
    ├── sql.md
    ├── stimulus-cheatsheet.md
    ├── storybook.md
    ├── structured-data.md
    ├── styled-components.md
    ├── switch-true.md
    ├── testing-library.md
    ├── theme-ui-button.mdx
    ├── theme-ui.md
    ├── typescript-catch.md
    ├── typescript.md
    ├── url.md
    ├── useToggle.md
    ├── useful-js-functions.md
    ├── vercel-serverless-functions.md
    ├── video.md
    ├── vim-cheatsheet.md
    ├── vitest.md
    ├── webmentions.md
    ├── webshare.md
    └── yalc.md
├── package.json
├── static
    └── logo.png
├── vercel.json
└── yarn.lock


/.gitignore:
--------------------------------------------------------------------------------
1 | .cache
2 | public
3 | node_modules
4 | yalc.lock
5 | .yalc
6 | 
7 | .vercel
8 | 


--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 |   "endOfLine": "lf",
3 |   "semi": false,
4 |   "trailingComma": "all",
5 |   "singleQuote": true
6 | }
7 | 


--------------------------------------------------------------------------------
/.vscode/settings.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "workbench.colorCustomizations": {
 3 |     "activityBar.activeBackground": "#f7cae2",
 4 |     "activityBar.activeBorder": "#64a619",
 5 |     "activityBar.background": "#f7cae2",
 6 |     "activityBar.foreground": "#15202b",
 7 |     "activityBar.inactiveForeground": "#15202b99",
 8 |     "activityBarBadge.background": "#64a619",
 9 |     "activityBarBadge.foreground": "#15202b",
10 |     "statusBar.background": "#f09eca",
11 |     "statusBar.foreground": "#15202b",
12 |     "statusBarItem.hoverBackground": "#e972b2",
13 |     "titleBar.activeBackground": "#f09eca",
14 |     "titleBar.activeForeground": "#15202b",
15 |     "titleBar.inactiveBackground": "#f09eca99",
16 |     "titleBar.inactiveForeground": "#15202b99"
17 |   },
18 |   "peacock.color": "#f09eca"
19 | }


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | <div align="center">
 2 |   <img src="https://brand.zander.wtf/Avatar.png" width="140">
 3 |   <h1>
 4 |     notes.zander.wtf
 5 |   </h1>
 6 | 
 7 | > Notes on code. My memory bank.
 8 | 
 9 | </div>
10 | 
11 | This site uses [gatsby-theme-code-notes](https://github.com/mrmartineau/gatsby-theme-code-notes). 
12 | 
13 | ---
14 | 
15 | ## License
16 | 
17 | [MIT](https://choosealicense.com/licenses/mit/) © [Zander Martineau](https://zander.wtf)
18 | 
19 | > Made by [Zander ⚡](https://github.com/mrmartineau/)
20 | 


--------------------------------------------------------------------------------
/components/Button/Button.docs.mdx:
--------------------------------------------------------------------------------
 1 | import { Story, Canvas } from '@storybook/addon-docs'
 2 | import { Button } from './Button'
 3 | 
 4 | # Button
 5 | 
 6 | This button component extends Theme UI's `Button` and add some more props/functionality. It takes all standard `<button>` attributes e.g. `disabled`, `type` etc etc **AND** also Theme UI's props like `variant` and `sx`
 7 | 
 8 | ```js
 9 | import { Button } from './components'
10 | ```
11 | 
12 | ## Basic button
13 | 
14 | ```tsx
15 | <Button>Click me</Button>
16 | <Button type="submit">Click me</Button>
17 | <Button disabled>Click me</Button>
18 | <Button onClick={() => console.log('clicked')}>Click me</Button>
19 | ```
20 | 
21 | ## With loading state
22 | 
23 | ```tsx
24 | <Button isLoading={true}>Click me</Button>
25 | ```
26 | 
27 | ## Inclusive/accessible disabled state
28 | 
29 | Using the guidelines from https://css-tricks.com/making-disabled-buttons-more-inclusive/, this button will show a simple tooltip if the form state is not ready. Instead of passing `disabled=true` to the button, use the `isDisabled` & `disabledText` props.
30 | 
31 | ```tsx
32 | <Button
33 |   isDisabled={true}
34 |   disabledText="You must select a meeting for all trainees"
35 | >
36 |   Request meetings
37 | </Button>
38 | ```
39 | 
40 | ## Icon buttons
41 | 
42 | If you need an icon button, do not use this `Button` component. Instead, use the `IconButton` component from `theme-ui`, like so:
43 | 
44 | ```tsx
45 | import { IconButton } from 'theme-ui'
46 | import { IconPicker } from '../components'
47 | ;<IconButton>
48 |   <IconPicker icon="exclamation" />
49 | </IconButton>
50 | ```
51 | 


--------------------------------------------------------------------------------
/components/Button/Button.stories.tsx:
--------------------------------------------------------------------------------
  1 | import React from 'react'
  2 | import { Story, Meta } from '@storybook/react/types-6-0'
  3 | import { Button, ButtonProps } from './Button'
  4 | import docs from './Button.docs.mdx'
  5 | import { Box } from 'theme-ui'
  6 | 
  7 | export default {
  8 |   title: 'Components/Button',
  9 |   component: Button,
 10 |   parameters: {
 11 |     docs: { page: docs },
 12 |   },
 13 |   argTypes: { onClick: { action: 'clicked' } },
 14 |   decorators: [
 15 |     (Story) => (
 16 |       <Box sx={{ p: 50 }}>
 17 |         <Story />
 18 |       </Box>
 19 |     ),
 20 |   ],
 21 | } as Meta
 22 | 
 23 | const Template: Story<ButtonProps> = (args) => <Button {...args} />
 24 | 
 25 | export const primary = Template.bind({})
 26 | primary.args = {
 27 |   children: 'Click me',
 28 |   variant: 'primary',
 29 |   isLoading: false,
 30 |   disabled: false,
 31 |   isDisabled: false,
 32 |   disabledText: 'Not ready yet',
 33 | }
 34 | export const disabled = Template.bind({})
 35 | disabled.args = {
 36 |   ...primary.args,
 37 |   disabled: true,
 38 | }
 39 | export const loading = Template.bind({})
 40 | loading.args = {
 41 |   ...primary.args,
 42 |   isLoading: true,
 43 | }
 44 | export const loadingPrimarySmall = Template.bind({})
 45 | loadingPrimarySmall.args = {
 46 |   ...loading.args,
 47 |   variant: 'primarySmall',
 48 | }
 49 | 
 50 | export const notReady = Template.bind({})
 51 | notReady.args = {
 52 |   ...primary.args,
 53 |   isDisabled: true,
 54 | }
 55 | 
 56 | export const primarySmall = Template.bind({})
 57 | primarySmall.args = {
 58 |   ...primary.args,
 59 |   variant: 'primarySmall',
 60 | }
 61 | 
 62 | export const secondary = Template.bind({})
 63 | secondary.args = {
 64 |   ...primary.args,
 65 |   variant: 'secondary',
 66 | }
 67 | export const secondarySmall = Template.bind({})
 68 | secondarySmall.args = {
 69 |   ...primary.args,
 70 |   variant: 'secondarySmall',
 71 | }
 72 | 
 73 | export const tertiary = Template.bind({})
 74 | tertiary.args = {
 75 |   ...primary.args,
 76 |   variant: 'tertiary',
 77 | }
 78 | export const tertiarySmall = Template.bind({})
 79 | tertiarySmall.args = {
 80 |   ...primary.args,
 81 |   variant: 'tertiarySmall',
 82 | }
 83 | 
 84 | export const quartinary = Template.bind({})
 85 | quartinary.args = {
 86 |   ...primary.args,
 87 |   variant: 'quartinary',
 88 | }
 89 | export const quartinarySmall = Template.bind({})
 90 | quartinarySmall.args = {
 91 |   ...primary.args,
 92 |   variant: 'quartinarySmall',
 93 | }
 94 | 
 95 | export const ghost = Template.bind({})
 96 | ghost.args = {
 97 |   ...primary.args,
 98 |   variant: 'ghost',
 99 | }
100 | export const ghostSmall = Template.bind({})
101 | ghostSmall.args = {
102 |   ...primary.args,
103 |   variant: 'ghostSmall',
104 | }
105 | 
106 | export const copy = Template.bind({})
107 | copy.args = {
108 |   ...primary.args,
109 |   variant: 'copy',
110 | }
111 | 
112 | export const link = Template.bind({})
113 | link.args = {
114 |   ...primary.args,
115 |   variant: 'link',
116 | }
117 | export const unstyled = Template.bind({})
118 | unstyled.args = {
119 |   ...primary.args,
120 |   variant: 'unstyled',
121 | }
122 | 


--------------------------------------------------------------------------------
/components/Button/Button.tsx:
--------------------------------------------------------------------------------
  1 | import React, { forwardRef } from 'react'
  2 | import {
  3 |   Box,
  4 |   Button as ThemeUIButton,
  5 |   ButtonProps as ThemeUIButtonProps,
  6 | } from 'theme-ui'
  7 | 
  8 | export interface ButtonProps extends ThemeUIButtonProps {
  9 |   isLoading?: boolean
 10 |   isDisabled?: boolean
 11 |   disabledText?: string
 12 | }
 13 | 
 14 | export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
 15 |   (
 16 |     {
 17 |       sx,
 18 |       isLoading,
 19 |       children,
 20 |       onClick,
 21 |       isDisabled,
 22 |       disabledText,
 23 |       disabled,
 24 |       ...rest
 25 |     },
 26 |     ref,
 27 |   ): JSX.Element => {
 28 |     return (
 29 |       <ThemeUIButton
 30 |         sx={{
 31 |           position: 'relative',
 32 |           display: 'inline-flex',
 33 |           alignItems: 'center',
 34 |           ...sx,
 35 |           cursor: isLoading ? 'wait' : isDisabled ? 'not-allowed' : 'pointer',
 36 |           '&:hover .tooltipBox,&:focus-within .tooltipBox': {
 37 |             opacity: 1,
 38 |             visibility: 'visible',
 39 |             transition: 'opacity 250ms',
 40 |           },
 41 |           '&:hover .tooltipBox:hover &': {
 42 |             transition: 'opacity 250ms 500ms',
 43 |           },
 44 |         }}
 45 |         ref={ref}
 46 |         disabled={disabled}
 47 |         onClick={(event) => {
 48 |           if (isLoading || isDisabled) {
 49 |             event.preventDefault()
 50 |           } else {
 51 |             onClick?.(event)
 52 |           }
 53 |         }}
 54 |         {...rest}
 55 |         aria-disabled={isDisabled ? 'true' : 'false'}
 56 |         aria-describedby="disabledReason"
 57 |       >
 58 |         <Box
 59 |           as="span"
 60 |           sx={{
 61 |             visibility: isLoading ? 'hidden' : 'visible',
 62 |           }}
 63 |         >
 64 |           {children}
 65 |         </Box>
 66 |         {isLoading && (
 67 |           <Box
 68 |             sx={{
 69 |               position: 'absolute',
 70 |               top: '50%',
 71 |               left: '50%',
 72 |               transform: 'translate(-50%, -50%)',
 73 |               color: 'currentColor',
 74 |               pointerEvents: 'none',
 75 |               visibility: isLoading ? 'visible' : 'hidden',
 76 |             }}
 77 |           >
 78 |             🤔
 79 |           </Box>
 80 |         )}
 81 |         {isDisabled && disabledText ? (
 82 |           <Box
 83 |             role="tooltip"
 84 |             className="tooltipBox"
 85 |             id="disabledReason"
 86 |             sx={{
 87 |               position: 'absolute',
 88 |               bottom: '100%',
 89 |               left: '50%',
 90 |               transform: 'translateX(-50%)',
 91 |               width: 'max-content',
 92 |               pb: 2,
 93 |               opacity: 0,
 94 |               visibility: 'hidden',
 95 |               transition: 'opacity 250ms, visibility 1ms 250ms',
 96 |             }}
 97 |           >
 98 |             <Box
 99 |               as="span"
100 |               className="tooltipItself"
101 |               sx={{
102 |                 display: 'block',
103 |                 bg: '#e2e8f0',
104 |                 color: '#64748b',
105 |                 px: 2,
106 |                 py: 1,
107 |                 fontSize: 1,
108 |                 borderRadius: 'default',
109 |                 textAlign: 'center',
110 |                 WebkitFontSmoothing: 'initial',
111 |                 MozOsxFontSmoothing: 'initial',
112 |               }}
113 |             >
114 |               {disabledText}
115 |             </Box>
116 |           </Box>
117 |         ) : null}
118 |       </ThemeUIButton>
119 |     )
120 |   },
121 | )
122 | 


--------------------------------------------------------------------------------
/components/Button/index.ts:
--------------------------------------------------------------------------------
1 | export { Button } from './Button'
2 | 


--------------------------------------------------------------------------------
/gatsby-config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   siteMetadata: {
 3 |     title: 'notes.zander.wtf',
 4 |     description: `Notes on code. My  second brain, by Zander Martineau.`,
 5 |     keywords: [],
 6 |     author: 'Zander',
 7 |   },
 8 |   plugins: [
 9 |     {
10 |       resolve: 'gatsby-theme-code-notes',
11 |       options: {
12 |         contentPath: 'notes',
13 |         basePath: '/',
14 |         gitRepoContentPath:
15 |           'https://github.com/mrmartineau/notes.zander.wtf/tree/master/notes/',
16 |         showThemeInfo: true,
17 |         showDescriptionInSidebar: true,
18 |         showDate: true,
19 |         openSearch: {
20 |           siteShortName: `Zander's Code Notes`,
21 |           siteUrl: 'https://notes.zander.wtf',
22 |           siteTags: 'front-end',
23 |           siteContact: 'https://twitter.com/MrMartineau',
24 |           siteDescription:
25 |             'Notes on code. My  second brain, by Zander Martineau.',
26 |         },
27 |       },
28 |     },
29 |     {
30 |       resolve: `gatsby-plugin-manifest`,
31 |       options: {
32 |         name: `Zander's Code Notes`,
33 |         short_name: `CodeNotes`,
34 |         description: `Notes on code. My second brain.`,
35 |         start_url: `/`,
36 |         background_color: `hsl(210, 38%, 95%)`,
37 |         theme_color: `hsl(345, 100%, 69%)`,
38 |         display: `standalone`,
39 |         icon: `static/logo.png`,
40 |       },
41 |     },
42 |     // {
43 |     //   resolve: `gatsby-plugin-offline`,
44 |     //   options: {
45 |     //     precachePages: [`/*`, `/tag/*`],
46 |     //   },
47 |     // },
48 |     {
49 |       resolve: `gatsby-plugin-plausible`,
50 |       options: {
51 |         domain: `notes.zander.wtf`,
52 |         customDomain: `stats.zander.wtf`,
53 |       },
54 |     },
55 |   ],
56 | }
57 | 


--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
1 | // noop
2 | 


--------------------------------------------------------------------------------
/notes/async-cheatsheet.md:
--------------------------------------------------------------------------------
  1 | ---
  2 | title: Async cheatsheet
  3 | tags:
  4 |   - javascript
  5 |   - cheatsheet
  6 | created: 2020-03-22T14:53:49.000Z
  7 | modified: 2020-03-22T14:53:49.000Z
  8 | ---
  9 | 
 10 | Pending promises can become either...
 11 | 
 12 | - `value`: Fulfilled with a value, or...
 13 | - `error`: Rejected with an error.
 14 | - `outcome`: Either way, they are settled with an outcome.
 15 | 
 16 | ## Combining promises
 17 | 
 18 | Use `all()` to turn an array of promises into a promise to an array.
 19 | 
 20 | ```js
 21 | Promise.all([value1, value2, value3])[
 22 |   // ->
 23 | 
 24 |   (value1, value2, value3)
 25 | ]
 26 | ```
 27 | 
 28 | If any promise is rejected, the error will be passed through.
 29 | 
 30 | ```js
 31 | Promise.all([?, ?, error])
 32 | 
 33 | // -> error
 34 | ```
 35 | 
 36 | Use `race()` instead to pass through the first settled promise.
 37 | 
 38 | ```js
 39 | Promise.race([?, ?, value])
 40 | 
 41 | // -> value
 42 | promise.then(onFulfilled, onRejected)
 43 | ```
 44 | 
 45 | ## Combining promises
 46 | 
 47 | ### Calls onFulfilled once the promise is fulfilled.
 48 | 
 49 | ```js
 50 | value.then(value => nextValue, ...) -> nextValue value.then(value => outcome, ...) -> outcome value.then(value => throw error, ...) -> error
 51 | ```
 52 | 
 53 | Calls onRejected if the promise is rejected.
 54 | 
 55 | ```js
 56 | error.then(..., error => value) -> value error.then(..., error => outcome) -> outcome error.then(..., error => throw nextError) -> nextError
 57 | ```
 58 | 
 59 | Passes errors through if onRejected is undefined.
 60 | 
 61 | ```js
 62 | error.then(...) -> error
 63 | ```
 64 | 
 65 | ### `promise.catch( onRejected )`
 66 | 
 67 | Behaves identically to then when onFulfilled is omitted.
 68 | 
 69 | ```js
 70 | error.catch(onRejected) <=> error.then(..., onRejected)
 71 | ```
 72 | 
 73 | Passes fulfilled values through.
 74 | 
 75 | ```js
 76 | value.catch(...) -> value
 77 | ```
 78 | 
 79 | ### `promise.finally( onFinally )`
 80 | 
 81 | Calls onFinally with no arguments once any outcome is available. Passes through input promise.
 82 | 
 83 | ```js
 84 | outcome.finally(() => ...) -> outcome
 85 | ```
 86 | 
 87 | The onFulfilled, onRejected and onFinally functions will not be executed until at least the next tick, even for promises that already have an outcome.
 88 | 
 89 | ## Making promises
 90 | 
 91 | The function passed to new Promise will be executed synchronously.
 92 | 
 93 | ```js
 94 | new Promise((resolve, reject) => {
 95 |   doImportantStuff((error, value) => {
 96 |     if (error) reject(error)
 97 |     else resolve(value)
 98 |   })
 99 | })
100 | ```
101 | 
102 | Use `resolve()` or `reject()` to create promises from values.
103 | Promise.resolve(value) -> value Promise.reject(error) -> error
104 | 
105 | If you put a fulfilled promise into a fulfilled promise, they'll collapse into one.
106 | Promise.resolve(value) -> value
107 | 
108 | Sometimes you might not need reject, or might not resolve to a value.
109 | 
110 | ```js
111 | function delay(milliseconds) {
112 |   return new Promise(resolve => setTimeout(resolve, milliseconds))
113 | }
114 | ```
115 | 
116 | ## async/await
117 | 
118 | **Calling an async function always results in a promise.**
119 | 
120 | ```js
121 | (async () => value)() -> value (async () => outcome)() -> outcome (async () => throw error)() -> error
122 | ```
123 | 
124 | await waits for a promise to be fulfilled, then returns its value.
125 | 
126 | ```js
127 | async function() {
128 |   try {
129 |     let value = await outcome
130 |     // ...
131 |   }
132 |   catch (error) {
133 |     // ...
134 |   }
135 | }
136 | ```
137 | 
138 | You can pass non-promise values to await
139 | 
140 | ```js
141 | const fn = async () => {
142 |   let value = await value
143 |   // ...
144 | }
145 | ```
146 | 
147 | await may only be used within async functions.
148 | 
149 | await will wait until at least the next tick before returning, even when awaiting already-fulfilled promises or non-promise values.
150 | 


--------------------------------------------------------------------------------
/notes/async-load-css.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Async load CSS
 3 | tags:
 4 |   - css
 5 | emoji: 🥱
 6 | link: 'https://www.filamentgroup.com/lab/load-css-simpler'
 7 | created: 2020-02-27T23:51:44.000Z
 8 | modified: 2020-05-20T09:40:27.000Z
 9 | ---
10 | 
11 | ```html
12 | <link rel="preload" href="/path/to/my.css" as="style" />
13 | <link
14 |   rel="stylesheet"
15 |   href="/path/to/my.css"
16 |   media="print"
17 |   onload="this.media='all'"
18 | />
19 | ```
20 | 


--------------------------------------------------------------------------------
/notes/axios.md:
--------------------------------------------------------------------------------
  1 | ---
  2 | title: Axios
  3 | emoji: 🐕
  4 | tags:
  5 |   - javascript
  6 | link: https://github.com/axios/axios
  7 | created: 2020-02-27T23:02:00.000Z
  8 | modified: 2021-12-06T15:30:48.665Z
  9 | ---
 10 | 
 11 | ## Example requests
 12 | 
 13 | ```js
 14 | // GET
 15 | const { data } = await axios({
 16 |   method: 'POST',
 17 |   url: `https://path.to/endpoint`,
 18 | })
 19 | 
 20 | // POST
 21 | const { data } = await axios({
 22 |   method: 'POST',
 23 |   url: `https://path.to/endpoint`,
 24 |   data: {
 25 |     name: 'Zander Martineau',
 26 |   },
 27 |   headers: {},
 28 | })
 29 | ```
 30 | 
 31 | ```ts
 32 | interface ApiResponse {
 33 |   test: number
 34 | }
 35 | 
 36 | const fetchSomeData = (): Promise<ApiResponse> => {
 37 |   return axios<ApiResponse>({
 38 |     method: 'POST',
 39 |     url: `https://path.to/endpoint`,
 40 |   }).then((response) => {
 41 |     return {
 42 |       ...response.data,
 43 |     }
 44 |   })
 45 | }
 46 | ```
 47 | 
 48 | ### With authorisation
 49 | 
 50 | ```js
 51 | // POST
 52 | const { data } = await axios({
 53 |   method: 'POST',
 54 |   url: `https://path.to/endpoint`,
 55 |   data: {
 56 |     name: 'Zander Martineau',
 57 |   },
 58 |   headers: {
 59 |     Authorization: `Bearer ${token}`,
 60 |   },
 61 | })
 62 | ```
 63 | 
 64 | ### Try/Catch
 65 | 
 66 | ```ts
 67 | interface ApiResponse {
 68 |   test: number
 69 | }
 70 | 
 71 | const fetchSomeData = async (): Promise<ApiResponse> => {
 72 |   try {
 73 |     const { data } = await axios<ApiResponse>({
 74 |       method: 'POST',
 75 |       url: `https://path.to/endpoint`,
 76 |     })
 77 | 
 78 |     return data
 79 |   } catch (error) {
 80 |     throw new Error(error.message || 'error.unknown')
 81 |   }
 82 | }
 83 | ```
 84 | 
 85 | ### Alternate method using [await-to-js](https://github.com/scopsy/await-to-js)
 86 | 
 87 | ```ts
 88 | import to from 'await-to-js'
 89 | 
 90 | interface ApiResponse {
 91 |   test: number
 92 | }
 93 | 
 94 | const fetchSomeData = async () => {
 95 |   const [error, data] = await to<AxiosResponse<ApiResponse>>(
 96 |     axios({
 97 |       method: 'POST',
 98 |       url: `https://path.to/endpoint`,
 99 |     })
100 |   )
101 | 
102 |   // ℹ️ Axios' default response has a `data` property,
103 |   // so you may prefer to return `data.data`
104 |   return data.data
105 | }
106 | ```
107 | 
108 | ## Handling errors
109 | 
110 | ```js
111 | axios({
112 |   method: 'GET',
113 |   url: '/user/12345',
114 | }).catch((error) => {
115 |   if (error.response) {
116 |     // The request was made and the server responded with a status code
117 |     // that falls out of the range of 2xx
118 |     console.log(error.response.data)
119 |     console.log(error.response.status)
120 |     console.log(error.response.headers)
121 |   } else if (error.request) {
122 |     // The request was made but no response was received
123 |     // `error.request` is an instance of XMLHttpRequest in the browser and an instance of
124 |     // http.ClientRequest in node.js
125 |     console.log(error.request)
126 |   } else {
127 |     // Something happened in setting up the request that triggered an Error
128 |     console.log('Error', error.message)
129 |   }
130 |   console.log(error.config)
131 | })
132 | ```
133 | 
134 | [Read more here](https://github.com/axios/axios#handling-errors)
135 | 
136 | ### With Typescript
137 | 
138 | ```ts
139 | try {
140 |   await axios.post(
141 |     '/user/12345',
142 |     {
143 |       email: formData.email,
144 |     }
145 |   )
146 | } catch (error: unknown) {
147 |   if (axios.isAxiosError(error)) {
148 |     // you now have type-safe access to the API response that returned the error
149 |     console.error(error.response)
150 |   } else {
151 |     const errorMessage = getErrorMessage(error)
152 |     setFormError(errorMessage)
153 |   }
154 | }
155 | ```
156 | 
157 | ## Redaxios
158 | 
159 | The Axios API, as an 800 byte Fetch wrapper.
160 | 
161 | https://github.com/developit/redaxios
162 | 


--------------------------------------------------------------------------------
/notes/better-link-underlines.mdx:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Better link underlines
 3 | tags:
 4 |   - css
 5 | emoji: ⚓️
 6 | created: 2020-03-22T14:53:49.000Z
 7 | modified: 2020-03-26T23:06:06.000Z
 8 | ---
 9 | 
10 | ```css
11 | a {
12 |   &:link,
13 |   &:visited {
14 |     color: red;
15 |     text-decoration: none;
16 |     border-bottom: 2px solid currentColor;
17 | 
18 |     @supports (text-decoration-thickness: 2px) {
19 |       text-decoration-style: solid;
20 |       text-decoration-line: underline;
21 |       text-decoration-color: currentColor;
22 |       text-decoration-thickness: 2px;
23 |       text-underline-offset: 3px;
24 |       text-decoration-skip: ink;
25 |       border: 0;
26 |     }
27 |   }
28 | }
29 | ```
30 | 
31 | [Browser support](https://caniuse.com/#feat=mdn-css_properties_text-decoration-thickness)
32 | 
33 | <iframe
34 |   height="265"
35 |   style="width: 100%;"
36 |   scrolling="no"
37 |   title="Better link underlines"
38 |   src="https://codepen.io/mrmartineau/embed/BaNOZoM?height=265&theme-id=light&default-tab=result"
39 |   frameborder="no"
40 |   allowtransparency="true"
41 |   allowfullscreen="true"
42 | >
43 |   See the Pen{' '}
44 |   <a href="https://codepen.io/mrmartineau/pen/BaNOZoM">
45 |     Better link underlines
46 |   </a>{' '}
47 |   by Zander Martineau (<a href="https://codepen.io/mrmartineau">@mrmartineau</a>)
48 |   on <a href="https://codepen.io">CodePen</a>.
49 | </iframe>
50 | 


--------------------------------------------------------------------------------
/notes/better-mobile-form-inputs.mdx:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Better mobile form inputs
 3 | tags:
 4 |   - html
 5 | link: 'https://better-mobile-inputs.netlify.app'
 6 | emoji: 🔘
 7 | created: 2020-06-23T16:45:15.000Z
 8 | modified: 2020-06-23T16:45:15.000Z
 9 | ---
10 | 
11 | This web-app makes it easy to know which form input we should use.
12 | 
13 | <iframe
14 |   src="https://better-mobile-inputs.netlify.app"
15 |   style={{
16 |     width: '100%',
17 |     height: '800px',
18 |     border: 0,
19 |   }}
20 | ></iframe>
21 | 


--------------------------------------------------------------------------------
/notes/button-as-link.mdx:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Make a button element look like a link
 3 | tags:
 4 |   - css
 5 | emoji: 🔗
 6 | created: 2021-01-04T19:43:00.000Z
 7 | modified: 2021-01-04T19:43:00.000Z
 8 | link: https://piccalil.li/quick-tip/make-a-button-element-look-like-a-link/
 9 | ---
10 | 
11 | ```css
12 | .link-button {
13 |   display: inline;
14 |   padding: 0;
15 |   border: 0;
16 |   font: inherit;
17 |   cursor: pointer;
18 |   background: transparent;
19 |   color: currentColor;
20 |   -webkit-appearance: none;
21 |   text-decoration: underline;
22 | }
23 | ```
24 | 
25 | <iframe
26 |   height="265"
27 |   style="width: 100%;"
28 |   scrolling="no"
29 |   title="Quick Tip: Link Button"
30 |   src="https://codepen.io/andybelldesign/embed/xxZzEgy?height=265&theme-id=light&default-tab=css,result"
31 |   frameborder="no"
32 |   loading="lazy"
33 |   allowtransparency="true"
34 |   allowfullscreen="true"
35 | >
36 |   See the Pen{' '}
37 |   <a href="https://codepen.io/andybelldesign/pen/xxZzEgy">
38 |     Quick Tip: Link Button
39 |   </a>{' '}
40 |   by Andy Bell (<a href="https://codepen.io/andybelldesign">@andybelldesign</a>)
41 |   on <a href="https://codepen.io">CodePen</a>.
42 | </iframe>
43 | 
44 | ℹ️ It is worth noting that `button`s cannot look exactly like an `a` element because browsers override the `display` property and force it to act like `display: inline-block` despite what you define. The one exception is `display: contents` but there are quite a few catches with that property; more alarmingly, that the element semantics are completely removed which is a nightmare for accessibility. Read more about it here: https://www.scottohara.me/blog/2018/10/03/unbutton-buttons.html
45 | 


--------------------------------------------------------------------------------
/notes/change-default-text-editor-mac.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Changing the default text editor on macOS
 3 | created: 2022-01-19T09:57:44Z
 4 | modified: 2022-01-19T09:57:44Z
 5 | link: https://apple.stackexchange.com/questions/123833/replace-text-edit-as-the-default-text-editor/123834#123834
 6 | ---
 7 | 
 8 | The command line trick works for all text files across the whole system, including hidden files, and I never have to think about it again
 9 | 
10 | ```sh
11 | # VS Code
12 | defaults write com.apple.LaunchServices/com.apple.launchservices.secure LSHandlers -array-add '{LSHandlerContentType=public.plain-text;LSHandlerRoleAll=com.microsoft.VSCode;}'
13 | 
14 | # Sublime Text 4
15 | defaults write com.apple.LaunchServices/com.apple.launchservices.secure LSHandlers -array-add '{LSHandlerContentType=public.plain-text;LSHandlerRoleAll=com.sublimetext.4;}'
16 | 
17 | # Sublime Text 3
18 | defaults write com.apple.LaunchServices/com.apple.launchservices.secure LSHandlers -array-add '{LSHandlerContentType=public.plain-text;LSHandlerRoleAll=com.sublimetext.3;}'
19 | ```
20 | 


--------------------------------------------------------------------------------
/notes/check-if-js-array-empty.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Check if JavaScript array is empty
 3 | tags:
 4 |   - javascript
 5 | created: 2021-01-06T11:17:30.000Z
 6 | modified: 2021-01-06T11:17:30.000Z
 7 | ---
 8 | 
 9 | You want to do the check for `undefined` first. If you do it the other way round, it will generate an error if the array is undefined.
10 | 
11 | ```js
12 | if (array === undefined || array.length == 0) {
13 |   // array empty or does not exist
14 | }
15 | ```
16 | 
17 | #### The foolproof approach
18 | 
19 | This takes into account that the variable might not refer to an array, but to some other type of object with a length property.
20 | 
21 | ```js
22 | if (!Array.isArray(array) || !array.length) {
23 |   // array does not exist, is not an array, or is empty
24 |   // ⇒ do not attempt to process array
25 | }
26 | ```
27 | 
28 | #### The pragmatic approach
29 | 
30 | In a lot of cases, the above might seem like overkill. Maybe you're using a higher order language like TypeScript that does most of the type-checking for you at compile-time, or you really don't care whether the object is actually an array, or just array-like.
31 | 
32 | In those cases, I tend to go for the following, more idiomatic JavaScript:
33 | 
34 | ```js
35 | if (!array || !array.length) {
36 |   // array or array.length are falsy
37 |   // ⇒ do not attempt to process array
38 | }
39 | ```
40 | 
41 | Or, more frequently, its inverse:
42 | 
43 | ```js
44 | if (array && array.length) {
45 |   // array and array.length are truthy
46 |   // ⇒ probably OK to process array
47 | }
48 | ```
49 | 
50 | With the introduction of the optional chaining operator (Elvis operator) in ECMAScript 2020, this can be shortened even further:
51 | 
52 | ```js
53 | if (!array?.length) {
54 |   // array or array.length are falsy
55 |   // ⇒ do not attempt to process array
56 | }
57 | ```
58 | 
59 | Or the opposite:
60 | 
61 | ```js
62 | if (array?.length) {
63 |   // array and array.length are truthy
64 |   // ⇒ probably OK to process array
65 | }
66 | ```
67 | 
68 | From [this](https://stackoverflow.com/a/24403771/91359) brilliant Stack Overflow answer.
69 | 


--------------------------------------------------------------------------------
/notes/check-if-js-array.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Check if value is array in JavaScript
 3 | tags:
 4 |   - javascript
 5 | created: 2022-01-13T10:56:37Z
 6 | modified: 2022-01-13T10:56:37Z
 7 | ---
 8 | 
 9 | ### `instanceof Array`
10 | 
11 | ```js
12 | [] instanceof Array     // true
13 | "test" instanceof Array // false
14 | ```
15 | 
16 | ### `Array.isArray`
17 | 
18 | As of ES5 there is now also:
19 | 
20 | ```js
21 | Array.isArray([])     // true
22 | Array.isArray("test") // false
23 | Array.isArray({})     // false
24 | ```
25 | 
26 | ### `.constructor === Array`
27 | 
28 | ```js
29 | [].constructor === Array    // true
30 | "foo".constructor === Array // false
31 | ```
32 | 
33 | From [Stack Overflow](https://stackoverflow.com/questions/767486/how-do-you-check-if-a-variable-is-an-array-in-javascript)
34 | 


--------------------------------------------------------------------------------
/notes/check-if-js-object-empty.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Check if JavaScript object is empty
 3 | tags:
 4 |   - javascript
 5 | created: 2021-01-06T11:18:30.000Z
 6 | modified: 2021-01-28T16:55:30.000Z
 7 | ---
 8 | 
 9 | ```js
10 | if (obj && Object.entries(obj).length === 0 && obj.constructor === Object) {
11 |   // do something
12 | }
13 | ```
14 | 
15 | or use a function:
16 | 
17 | ```ts
18 | export const isObjectEmpty = (obj: unknown): boolean => {
19 |   if (obj === null || obj === undefined || obj === false) {
20 |     return true
21 |   }
22 |   return Object.entries(obj).length === 0
23 | }
24 | 
25 | // isObjectEmpty({}) true
26 | // isObjectEmpty({a: 1}) false
27 | ```
28 | 
29 | You can also invert that function to check if an object has values.
30 | 
31 | ```ts
32 | export const isObjectFull = (obj) => !isObjectEmpty(obj)
33 | ```
34 | 
35 | Not sure about the naming of this one, but you get the idea
36 | 


--------------------------------------------------------------------------------
/notes/circleci.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: CircleCI
 3 | tags:
 4 |   - devops
 5 | emoji: ⭕️
 6 | created: 2020-02-27T23:51:44.000Z
 7 | modified: 2020-11-04T17:01:50.000Z
 8 | ---
 9 | 
10 | ## Basic example
11 | 
12 | ```yaml
13 | version: 2
14 | 
15 | references:
16 |   npm_auth: &npm_auth
17 |     run:
18 |       name: Authenticate with registry
19 |       command: echo "//registry.npmjs.org/:_authToken=$NPM_TOKEN" > ~/.npmrc
20 | 
21 | jobs:
22 |   build:
23 |     docker:
24 |       - image: circleci/node:13.1.0-stretch
25 |     steps:
26 |       - checkout
27 |       - *npm_auth
28 |       - restore_cache: # special step to restore the dependency cache
29 |           # Read about caching dependencies: https://circleci.com/docs/2.0/caching/
30 |           key: dependency-cache-{{ checksum "yarn.lock" }}
31 |       - run:
32 |           name: install
33 |           command: yarn install
34 |       - save_cache: # special step to save the dependency cache
35 |           key: dependency-cache-{{ checksum "yarn.lock" }}
36 |           paths:
37 |             - ./node_modules
38 |       - run:
39 |           name: build
40 |           command: yarn build
41 |       - run:
42 |           name: test
43 |           command: yarn test
44 |   deploy-chromatic:
45 |     docker:
46 |       - image: circleci/node:lts
47 |     steps:
48 |       - checkout
49 |       - *npm_auth
50 |       - attach_workspace:
51 |           at: .
52 |       - run:
53 |           name: 'Trigger Chromatic release'
54 |           command: |
55 |             if [ "${CIRCLE_BRANCH}" != "master" ];
56 |             then
57 |               yarn chromatic:ci -a $CHROMATIC_PROJECT_TOKEN --exit-zero-on-changes --exit-once-uploaded
58 |             else
59 |               # We know any changes that make it to master *must* have been accepted
60 |               yarn chromatic:ci -a $CHROMATIC_PROJECT_TOKEN --exit-once-uploaded --auto-accept-changes
61 |             fi
62 | 
63 | workflows:
64 |   version: 2
65 |   build-test:
66 |     jobs:
67 |       - build
68 | ```
69 | 
70 | ## Using the CircleCI tool locally
71 | 
72 | ```sh
73 | # run a particular job locally
74 | circleci local execute --job build -e NPM_TOKEN=9e012519-aba7-4372-8381-abcdefghijkl
75 | 
76 | # validate a config locally
77 | circleci config validate
78 | ```
79 | 


--------------------------------------------------------------------------------
/notes/clamp-number.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Clamp number
 3 | tags:
 4 |   - javascript
 5 |   - css
 6 | created: 2021-01-06T11:20:30.000Z
 7 | modified: 2021-01-06T11:20:30.000Z
 8 | emoji: 🗜
 9 | ---
10 | 
11 | ## JavaScript
12 | 
13 | ```ts
14 | const clamp = (value: number, min: number, max: number) => {
15 |   return Math.min(Math.max(value, min), max)
16 | }
17 | 
18 | // clamp(21, 20, 50) > 21
19 | // clamp(10, 20, 50) > 20
20 | // clamp(80, 20, 50) > 50
21 | ```
22 | 
23 | ## CSS
24 | 
25 | Use this if you only need to support Safari (11.1+) and Chrome (79+)
26 | 
27 | ```css
28 | html {
29 |   font-size: min(max(16px, 4vw), 22px);
30 | }
31 | ```
32 | 
33 | Or even this if you only support Chrome (79+)
34 | 
35 | ```css
36 | body {
37 |   font-size: clamp(16px, 4vw, 22px);
38 | }
39 | ```
40 | 


--------------------------------------------------------------------------------
/notes/cleanup-node-modules.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Cleanup / optimise computer
 3 | emoji: 🧼
 4 | created: 2020-02-27T23:51:44.000Z
 5 | modified: 2020-03-26T23:06:06.000Z
 6 | ---
 7 | 
 8 | - https://medium.freecodecamp.org/how-to-free-up-space-on-your-developer-mac-f542f66ddfb
 9 | - https://gist.github.com/Aidurber/7549d3f83b00052cee745a6c4dcf7b9d
10 | 
11 | ```sh
12 | find . -name "node_modules" -type d -mtime +120 | xargs rm -rf
13 | ```
14 | 
15 | The `mtime` arg is in days, e.g. `120` is about 4 months & `240` is about 8 months`
16 | 


--------------------------------------------------------------------------------
/notes/clear-dns-cache.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Clear DNS cache
 3 | emoji: 💵
 4 | created: 2020-04-30T22:14:32.000Z
 5 | modified: 2020-04-30T22:14:32.000Z
 6 | ---
 7 | 
 8 | ## OS X 10.11, 10.12+ (El Capitan, Sierra):
 9 | 
10 | ```sh
11 | sudo killall -HUP mDNSResponder
12 | ```
13 | 
14 | Source: https://superuser.com/a/547218/89928
15 | 
16 | ## In Chrome
17 | 
18 | Navigate to [`chrome://net-internals/#dns`](chrome://net-internals/#dns) and press the "Clear host cache" button.
19 | 


--------------------------------------------------------------------------------
/notes/clickable-box.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Clickable box
 3 | tags:
 4 |   - javascript
 5 |   - react
 6 | link: 'https://github.com/danoc/clickable-box'
 7 | emoji: 📦
 8 | created: 2020-02-27T23:02:00.000Z
 9 | modified: 2020-05-11T11:47:16.000Z
10 | ---
11 | 
12 | Note: this implementation has some major drawbacks compared to using a native `<button>` element. For example a proper `disabled` state cannot be achieved without a lot more effor. Always use the correct HTML element for the job!
13 | 
14 | ```jsx
15 | <span
16 |   // Make the element clickable
17 |   onClick={handleClick}
18 |   // Make the element navigable by keyboard
19 |   tabIndex={0}
20 |   // Call `handleClick` if the user presses
21 |   // space key while the element is in focus
22 |   onKeyDown={(event) => {
23 |     // SPACE keycode: 32
24 |     // ENTER keycode: 13
25 |     // Find more at http://keycode.info/
26 |     if (event.keyCode === 32) {
27 |       event.preventDefault()
28 |       handleClick()
29 |     }
30 |   }}
31 |   // Tell screen readers that the element is a button
32 |   role="button"
33 |   // All other props are passed through to the element
34 |   aria-label="Close modal"
35 | >
36 |   <CloseIcon />
37 | </span>
38 | ```
39 | 
40 | Same without the comments:
41 | 
42 | ```jsx
43 | <span
44 |   onClick={handleClick}
45 |   tabIndex={0}
46 |   onKeyDown={(event) => {
47 |     if (event.keyCode === 32) {
48 |       event.preventDefault()
49 |       handleClick()
50 |     }
51 |   }}
52 |   role="button"
53 |   aria-label="Close modal"
54 | >
55 |   <CloseIcon />
56 | </span>
57 | ```
58 | 


--------------------------------------------------------------------------------
/notes/contentful-migrations.md:
--------------------------------------------------------------------------------
  1 | ---
  2 | title: Contentful migrations
  3 | tags:
  4 |   - javascript
  5 | created: 2021-01-06T11:24:00.000Z
  6 | modified: 2021-01-06T11:24:00.000Z
  7 | emoji: 🦒
  8 | ---
  9 | 
 10 | # Content & schema migrations
 11 | 
 12 | For migrations you will need Contentful's [command line interface tool](https://github.com/contentful/contentful-cli).
 13 | 
 14 | ### Pre-requisites
 15 | 
 16 | - Node LTS
 17 | 
 18 | ### Installation
 19 | 
 20 | Using [homebrew](https://brew.sh):
 21 | 
 22 | ```sh
 23 | brew install contentful-cli
 24 | ```
 25 | 
 26 | Using [npm](https://npmjs.org):
 27 | 
 28 | ```sh
 29 | npm install -g contentful-cli
 30 | ```
 31 | 
 32 | Using [yarn](https://yarnpkg.com):
 33 | 
 34 | ```sh
 35 | yarn global add contentful-cli
 36 | ```
 37 | 
 38 | ### Login
 39 | 
 40 | You will need to login to Contentful on your computer. Run `contentful login` and follow the prompts, see below for an example:
 41 | 
 42 | ```sh
 43 | ❯ contentful login
 44 | 
 45 | A browser window will open where you will log in (or sign up if you don’t have an account), authorize this CLI tool and paste your CMA token here:
 46 | 
 47 | ? Open a browser window now? Yes
 48 | ? Paste your token here: [hidden]
 49 | 
 50 | Great! Your CMA token is now stored on your system. (Located at /Users/zander/.contentfulrc.json)
 51 | You can always run contentful logout to remove it.
 52 | ```
 53 | 
 54 | Create a new CMA token (personal access token) from [this page](https://app.contentful.com/spaces/t51bs9y4c70l/api/cma_tokens).
 55 | 
 56 | ## Content modeling & migration scripts
 57 | 
 58 | Every time you need to modify a content model, a new migration script should be created. It needs to be carefully modeled so that you don't overwrite existing types and content.
 59 | 
 60 | For more information on how to model your content programmatically, see [these docs](https://www.contentful.com/developers/docs/concepts/data-model/)
 61 | 
 62 | When editing existing fields, it can be useful to view the JSON representation of the content model to see what is there. e.g. https://app.contentful.com/spaces/t51bs9y4c70l/environments/staging/content_types/article/preview
 63 | 
 64 | Useful links:
 65 | 
 66 | - [Migration docs](https://github.com/contentful/contentful-migration)
 67 | - [Editor interfaces](https://www.contentful.com/developers/docs/extensibility/app-framework/editor-interfaces/)
 68 | - [Validations](https://www.contentful.com/developers/docs/references/content-management-api/#/reference/content-types/content-type)
 69 | - [Contentful migrations tutorial](https://www.contentful.com/developers/docs/tutorials/cli/scripting-migrations/)
 70 | - [Video overview of using the contentful CLI](https://contentful.wistia.com/medias/kkw7k4j7lp)
 71 | - [CMS as code](https://www.contentful.com/help/cms-as-code/) - article about migrations etc on the Contentful help centre
 72 | - [Managing multiple environments](https://www.contentful.com/developers/docs/concepts/multiple-environments/)
 73 | - [Example migrations](https://github.com/contentful/contentful-migration/tree/master/examples)
 74 | 
 75 | ### Migration scripts
 76 | 
 77 | ```js
 78 | ```
 79 | 
 80 | #### Richtext field
 81 | 
 82 | ```js
 83 | const myRichTextCT = migration
 84 |   .createContentType('myContentTypeWithRichText')
 85 |   .name('MyContentTypeWithRichText')
 86 | myRichTextCT
 87 |   .createField('richText')
 88 |   .name('Text')
 89 |   .type('RichText')
 90 |   .validations([
 91 |     {
 92 |       nodes: {
 93 |         'embedded-entry-block': [
 94 |           {
 95 |             size: {
 96 |               min: 1,
 97 |               max: 4,
 98 |             },
 99 |           },
100 |           {
101 |             linkContentType: ['markdownContentType'],
102 |           },
103 |         ],
104 |         'embedded-entry-inline': [
105 |           {
106 |             size: {
107 |               min: 10,
108 |               max: 20,
109 |             },
110 |             message:
111 |               'this is a custom error for number of embedded inline entries',
112 |           },
113 |           {
114 |             linkContentType: ['parent'],
115 |             message: 'we only accept parent',
116 |           },
117 |         ],
118 |       },
119 |     },
120 |     {
121 |       enabledNodeTypes: [
122 |         'heading-1',
123 |         'heading-2',
124 |         'heading-3',
125 |         'heading-4',
126 |         'heading-5',
127 |         'ordered-list',
128 |         'unordered-list',
129 |         'hr',
130 |         'blockquote',
131 |         'embedded-entry-block',
132 |         'embedded-asset-block',
133 |         'hyperlink',
134 |         'entry-hyperlink',
135 |         'asset-hyperlink',
136 |         'embedded-entry-inline',
137 |       ],
138 |       message:
139 |         'Only heading 1, heading 2, heading 3, heading 4, heading 5, ordered list, unordered list, horizontal rule, quote, block entry, asset, link to Url, link to entry, link to asset, and inline entry nodes are allowed',
140 |     },
141 |   ])
142 | ```
143 | 
144 | ### Running the migration
145 | 
146 | It is a good idea to create a `test` environment that is a clone of `master` so that everything can be checked before running the migration script "for real".
147 | 
148 | ```sh
149 | contentful space migration --space-id a65gr7u3g09k --environment-id 'test' 01-add-article-cta-type.js
150 | ```
151 | 


--------------------------------------------------------------------------------
/notes/create-local-self-signed-certs.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Create local self-signed certificate
 3 | emoji: 📜
 4 | created: 2020-02-27T23:51:44.000Z
 5 | modified: 2020-04-06T08:28:28.000Z
 6 | ---
 7 | 
 8 | ## Use mkcert
 9 | 
10 | https://github.com/FiloSottile/mkcert
11 | 
12 | ### Install
13 | 
14 | ```sh
15 | brew install mkcert
16 | brew install nss
17 | mkcert -install
18 | ```
19 | 
20 | ```sh
21 | $ mkcert -install
22 | Created a new local CA at "/Users/zander/Library/Application Support/mkcert" 💥
23 | The local CA is now installed in the system trust store! ⚡️
24 | The local CA is now installed in the Firefox trust store (requires browser restart)! 🦊
25 | ```
26 | 
27 | ### Run
28 | 
29 | ```sh
30 | mkcert localhost 127.0.0.1 ::1
31 | ```
32 | 
33 | ```sh
34 | $ mkcert localhost 127.0.0.1 ::1
35 | Using the local CA at "/Users/zander/Library/Application Support/mkcert" ✨
36 | 
37 | Created a new certificate valid for the following names 📜
38 |  - "localhost"
39 |  - "127.0.0.1"
40 |  - "::1"
41 | 
42 | The certificate is at "./localhost+2.pem" and the key at "./localhost+2-key.pem" ✅
43 | ```
44 | 
45 | This will add the certificate and key into whichever directory you ran the script in
46 | 
47 | ## Use openssl
48 | 
49 | Run this then follow the instructions.
50 | 
51 | ```sh
52 | sudo openssl req -x509 -nodes -days 365 -newkey rsa:2048 -keyout ./server.key -out ./server.crt
53 | ```
54 | 
55 | This is not nearly as good as mkcert though.
56 | 


--------------------------------------------------------------------------------
/notes/crypto.mdx:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Crypto
 3 | tags:
 4 |   - node
 5 |   - javascript
 6 | emoji: 🛂
 7 | created: 2020-03-11T01:24:26.000Z
 8 | modified: 2020-03-26T23:06:06.000Z
 9 | ---
10 | 
11 | The crypto module provides cryptographic functionality that includes a set of wrappers for OpenSSL's hash, HMAC, cipher, decipher, sign, and verify functions.
12 | 
13 | Docs: http://nodejs.org/api/crypto.html#crypto_crypto
14 | 
15 | ```js
16 | import crypto from 'crypto'
17 | 
18 | const body = {
19 |   uuid: '433d7a1b-e8e1-4b5a-b590-f468e5c18cc7',
20 |   name: 'Zander',
21 | }
22 | 
23 | const hash = crypto.createHash('sha256')
24 | hash.update(JSON.stringify(body))
25 | const hashedResponse = hash.digest('hex') // 5a7430e6d96dafadc642289eba7e215d3b9cfd7a58f9593749891424e6d75a4f
26 | ```
27 | 
28 | <iframe
29 |   height="400px"
30 |   width="100%"
31 |   src="https://repl.it/@mrmartineau/crypto?lite=true"
32 |   scrolling="no"
33 |   frameborder="no"
34 |   allowtransparency="true"
35 |   allowfullscreen="true"
36 |   sandbox="allow-forms allow-pointer-lock allow-popups allow-same-origin allow-scripts allow-modals"
37 | ></iframe>
38 | 


--------------------------------------------------------------------------------
/notes/css-aspect-ratio.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Aspect ratio
 3 | tags:
 4 |   - css
 5 | link: >-
 6 |   https://www.bram.us/2020/11/30/native-aspect-ratio-boxes-in-css-thanks-to-aspect-ratio
 7 | created: 2020-05-19T08:25:55.000Z
 8 | modified: 2020-12-29T17:10:23.000Z
 9 | ---
10 | 
11 | ```css
12 | /* Old, hacky way */
13 | .parent {
14 |   padding-top: 56.25%;
15 | }
16 | 
17 | /* New, cool way */
18 | .parent {
19 |   aspect-ratio: 16 / 9;
20 | 
21 |   /* or for square things */
22 |   aspect-ratio: 1 / 1;
23 | }
24 | ```
25 | 


--------------------------------------------------------------------------------
/notes/css-env-vars.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: CSS environment variables
 3 | tags:
 4 |   - css
 5 | created: 2020-03-22T14:53:49.000Z
 6 | modified: 2020-03-22T14:53:49.000Z
 7 | ---
 8 | 
 9 | [Browser support](https://caniuse.com/#feat=css-env-function)
10 | 
11 | ```css
12 | env('VARIABLE_NME', FALLBACK_VALUE);
13 | 
14 | env(safe-area-inset-top, 12px)
15 | env(safe-area-inset-right, 12px)
16 | env(safe-area-inset-bottom, 12px)
17 | env(safe-area-inset-left, 12px)
18 | ```
19 | 
20 | A specific viewport metatag property is needed:
21 | 
22 | ```html
23 | <meta
24 |   name="viewport"
25 |   content="initial-scale=1.0, width=device-width, viewport-fit=cover"
26 | />
27 | ```
28 | 
29 | or
30 | 
31 | ```css
32 | @viewport {
33 |   viewport-fit: cover;
34 | }
35 | ```
36 | 
37 | ## Example
38 | 
39 | ```css
40 | body {
41 |   padding-top: env(safe-area-inset-top, 12px);
42 |   padding-right: env(safe-area-inset-right, 12px);
43 |   padding-bottom: env(safe-area-inset-bottom, 12px);
44 |   padding-left: env(safe-area-inset-left, 12px);
45 | }
46 | ```
47 | 


--------------------------------------------------------------------------------
/notes/css-filters.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: CSS Filters
 3 | tags:
 4 |   - css
 5 | emoji: 🕶
 6 | created: 2020-03-22T14:53:49.000Z
 7 | modified: 2020-03-26T23:06:06.000Z
 8 | ---
 9 | 
10 | ```css
11 | /* URL to SVG filter */
12 | filter: url('filters.svg#filter-id');
13 | 
14 | /* <filter-function> values */
15 | filter: blur(5px);
16 | filter: brightness(0.4);
17 | filter: contrast(200%);
18 | filter: drop-shadow(16px 16px 20px blue);
19 | filter: grayscale(50%);
20 | filter: hue-rotate(90deg);
21 | filter: invert(75%);
22 | filter: opacity(25%);
23 | filter: saturate(30%);
24 | filter: sepia(60%);
25 | 
26 | /* Multiple filters */
27 | filter: contrast(175%) brightness(3%);
28 | 
29 | /* Use no filter */
30 | filter: none;
31 | 
32 | /* Global values */
33 | filter: inherit;
34 | filter: initial;
35 | filter: unset;
36 | ```
37 | 
38 | Docs: http://developer.mozilla.org/en-US/docs/Web/CSS/filter
39 | 


--------------------------------------------------------------------------------
/notes/css-font-stacks.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: CSS font-stacks
 3 | tags:
 4 |   - css
 5 | created: 2020-02-27T23:02:00.000Z
 6 | modified: 2020-02-27T23:02:00.000Z
 7 | ---
 8 | 
 9 | ## System
10 | 
11 | ```css
12 | -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans"
13 | ```
14 | 
15 | ## Sans
16 | 
17 | ```css
18 | "Helvetica Neue", Helvetica, Arial, sans-serif
19 | ```
20 | 
21 | ## Serif
22 | 
23 | ```css
24 | Georgia, "Times New Roman", Times, serif
25 | ```
26 | 
27 | ## Monospaced
28 | 
29 | ```css
30 | Menlo, Monaco, "Courier New", monospace
31 | ```
32 | 


--------------------------------------------------------------------------------
/notes/css-grid.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: CSS Grid
 3 | emoji: 🍱
 4 | tags:
 5 |   - css
 6 | created: 2020-02-27T23:02:00.000Z
 7 | modified: 2020-04-11T06:27:27.000Z
 8 | ---
 9 | 
10 | ```css
11 | .grid {
12 |   display: grid;
13 |   grid-gap: 30px;
14 |   grid-template-columns: repeat(auto-fill, 112px);
15 |   /* or this */
16 |   grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
17 | }
18 | 
19 | /* To select modern Grid browsers and IE 11 */
20 | @supports (display: grid) {
21 |   grid-gap: 20px;
22 | }
23 | 
24 | /* Else */
25 | @supports not (display: grid) {
26 |   li {
27 |     padding: 10px;
28 |   }
29 | }
30 | 
31 | /* Edge 16 and higher */
32 | @supports (display: -ms-grid) and (display: grid) {
33 |   div {
34 |     width: auto;
35 |   }
36 | }
37 | 
38 | /* Edge 15 and lower */
39 | @supports (display: -ms-grid) and (not (display: grid)) {
40 |   div {
41 |     margin: 0;
42 |   }
43 | }
44 | 
45 | // To select only Grid browsers without IE 11
46 | @supports (grid-gap: 0) {
47 |   grid-gap: 20px;
48 | }
49 | ```
50 | 


--------------------------------------------------------------------------------
/notes/css-logical-properties.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Logical properties
 3 | tags:
 4 |   - css
 5 | link: >-
 6 |   https://www.smashingmagazine.com/2022/12/deploying-css-logical-properties-on-web-apps/
 7 | created: 2022-12-29T08:15:00.000Z
 8 | modified: 2022-12-29T08:15:00.000Z
 9 | ---
10 | 
11 | - We no longer think in terms of `left`/`right` but `start`/`end` (the same goes for `top`/`bottom`):
12 | - We no longer say `width` or `height` but instead `inline` and `block` — quite classical.
13 | 
14 | ## Basics
15 | 
16 | | Classical Property | Logical Property  |
17 | | ------------------ | ----------------- |
18 | | `width`            | `inline-size`     |
19 | | `height`           | `block-size`      |
20 | | `min-width`        | `min-inline-size` |
21 | | `min-height`       | `min-block-size`  |
22 | | `max-width`        | `max-inline-size` |
23 | | `max-height`       | `max-block-size`  |
24 | 
25 | ## Margin
26 | 
27 | | Classical Property | Logical Property      |
28 | | ------------------ | --------------------- |
29 | | `margin-top`       | `margin-block-start`  |
30 | | `margin-bottom`    | `margin-block-end`    |
31 | | `margin-left`      | `margin-inline-start` |
32 | | `margin-right`     | `margin-inline-end`   |
33 | 
34 | ## Padding
35 | 
36 | | Classical Property | Logical Property       |
37 | | ------------------ | ---------------------- |
38 | | `padding-top`      | `padding-block-start`  |
39 | | `padding-bottom`   | `padding-block-end`    |
40 | | `padding-left`     | `padding-inline-start` |
41 | | `padding-right`    | `padding-inline-end`   |
42 | 
43 | ## Position
44 | 
45 | | Classical Property | Logical Property     |
46 | | ------------------ | -------------------- |
47 | | `top`              | `inset-block-start`  |
48 | | `bottom`           | `inset-block-end`    |
49 | | `left`             | `inset-inline-start` |
50 | | `right`            | `inset-inline-end`   |
51 | 
52 | ## `float`
53 | 
54 | | Classical Property | Logical Property      |
55 | | ------------------ | --------------------- |
56 | | `float: left`      | `float: inline-start` |
57 | | `float: right`     | `float: inline-end`   |
58 | 
59 | ## `text-align`
60 | 
61 | | Classical Property  | Logical Property    |
62 | | ------------------- | ------------------- |
63 | | `text-align: left`  | `text-align: start` |
64 | | `text-align: right` | `text-align: end`   |
65 | 
66 | ## `border`
67 | 
68 | | Classical Property | Logical Property      |
69 | | ------------------ | --------------------- |
70 | | `border-top`       | `border-block-start`  |
71 | | `border-bottom`    | `border-block-end`    |
72 | | `border-left`      | `border-inline-start` |
73 | | `border-right`     | `border-inline-end`   |
74 | 
75 | ## Border-radius
76 | 
77 | | Classical Property           | Logical Property            |
78 | | ---------------------------- | --------------------------- |
79 | | `border-top-left-radius`     | `border-start-start-radius` |
80 | | `border-top-right-radius`    | `border-start-end-radius`   |
81 | | `border-bottom-left-radius`  | `border-end-start-radius`   |
82 | | `border-bottom-right-radius` | `border-end-end-radius`     |
83 | 
84 | | Classical Property                                                    | Logical Property           |
85 | | --------------------------------------------------------------------- | -------------------------- |
86 | | `margin-left: auto;`<br/>`margin-right: auto;`                        | `margin-inline: auto;`     |
87 | | `margin-top: 0;`<br/>`margin-bottom: 0;`                              | `margin-block: 0;`         |
88 | | `margin-top: 1rem;`<br/>`margin-bottom: 2rem;`                        | `margin-block: 1rem 2rem;` |
89 | | `top: 2rem;`<br/>`right: 2rem;`<br/>`bottom: 2rem;`<br/>`left: 2rem;` | `inset: 2rem;`             |
90 | | `right: 2rem;`<br/>`left: 2rem;`                                      | `inset-inline: 2rem;`      |
91 | | `top: 2rem;`<br/>`bottom: 2rem;`                                      | `inset-block: 2rem;`       |
92 | 


--------------------------------------------------------------------------------
/notes/css-object-styles.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: CSS Object styles
 3 | tags:
 4 |   - react
 5 |   - css
 6 |   - javascript
 7 | emoji: 💄
 8 | created: 2020-05-19T08:25:55.000Z
 9 | modified: 2020-05-19T08:25:55.000Z
10 | ---
11 | 
12 | Instead of writing css properties in `kebab-case` like regular css, you write them in `camelCase`, for example `background-color` would be `backgroundColor`. Object styles are especially useful with the css prop because you don’t need a css call like with string styles but object styles can also be used with styled.
13 | 
14 | - https://theme-ui.com/guides/object-styles
15 | - https://emotion.sh/docs/object-styles
16 | 
17 | #### [Pseudo elements](https://theme-ui.com/guides/object-styles#pseudo-elements)
18 | 
19 | ```js
20 | {
21 |   "&::before": {
22 |     content: '""',
23 |     display: 'block',
24 |     width: 32,
25 |     height: 32,
26 |     backgroundColor: 'tomato',
27 |   }
28 | }
29 | ```
30 | 
31 | ### Media queries
32 | 
33 | ```js
34 | {
35 |   color: 'darkorchid',
36 |   '@media(min-width: 420px)': {
37 |     color: 'orange'
38 |   }
39 | }
40 | ```
41 | 
42 | ### Numbers
43 | 
44 | ```js
45 | {
46 |   padding: 8,
47 |   zIndex: 200
48 | }
49 | ```
50 | 
51 | ### Vendor prefixes
52 | 
53 | From [MDN](https://developer.mozilla.org/en-US/docs/Glossary/Vendor_Prefix#API_prefixes):
54 | 
55 | Prefixes for interface names are upper-cased:
56 | 
57 | - `WebKit` (Chrome, Safari, newer versions of Opera, almost all iOS browsers (including Firefox for iOS); basically, any WebKit based browser)
58 | - `Moz` (Firefox)
59 | - `O` (Older, pre-WebKit, versions of Opera)
60 | - `MS` (Internet Explorer and Microsoft Edge)
61 | 
62 | ```js
63 | {
64 |   MozTextStrokeColor: 'red,
65 |   WebkitTextStrokeColor: 'red',
66 |   textStrokeColor: 'red,
67 |   MozTextStrokeWidth: '1px',
68 |   WebkitTextStrokeWidth: '1px',
69 |   textStrokeWidth: '1px',
70 | }
71 | ```
72 | 


--------------------------------------------------------------------------------
/notes/css-rainbow-links.mdx:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Rainbow links
 3 | tags:
 4 |   - css
 5 | link: 'https://twitter.com/chrisbiscardi/status/1259606045858467840'
 6 | created: 2020-05-19T08:25:55.000Z
 7 | modified: 2020-05-19T08:25:55.000Z
 8 | ---
 9 | 
10 | ```css
11 | .rainbow {
12 |   background-image: linear-gradient(
13 |     90deg,
14 |     rgba(251, 89, 74, 1) 0%,
15 |     rgba(251, 222, 75, 1) 25%,
16 |     rgba(112, 228, 112, 1) 50%,
17 |     rgba(51, 183, 255, 1) 75%
18 |   );
19 |   -webkit-background-clip: text;
20 |   -webkit-text-fill-color: rgba(255, 255, 255, 0.46);
21 | }
22 | ```
23 | 
24 | <a
25 |   style={{
26 |     backgroundImage: `linear-gradient(
27 |     90deg,
28 |     rgba(251, 89, 74, 1) 0%,
29 |     rgba(251, 222, 75, 1) 25%,
30 |     rgba(112, 228, 112, 1) 50%,
31 |     rgba(51, 183, 255, 1) 75%
32 |   )`,
33 |     WebkitBackgroundClip: 'text',
34 |     WebkitTextFillColor: 'rgba(255, 255, 255, 0.46)',
35 |   }}
36 | >
37 |   This is a rainbow link
38 | </a>
39 | 
40 | With object-styles:
41 | 
42 | ```jsx
43 | <a
44 |   style={{
45 |     backgroundImage: `linear-gradient(
46 |     90deg,
47 |     rgba(251, 89, 74, 1) 0%,
48 |     rgba(251, 222, 75, 1) 25%,
49 |     rgba(112, 228, 112, 1) 50%,
50 |     rgba(51, 183, 255, 1) 75%
51 |   )`,
52 |     WebkitBackgroundClip: 'text',
53 |     WebkitTextFillColor: 'rgba(255, 255, 255, 0.46)',
54 |   }}
55 | >
56 |   This is a rainbow link
57 | </a>
58 | ```
59 | 


--------------------------------------------------------------------------------
/notes/css-scroll-behaviour.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: CSS scroll-behavior
 3 | tags:
 4 |   - css
 5 | link: >-
 6 |   https://gomakethings.com/how-to-animate-scrolling-to-anchor-links-with-one-line-of-css/
 7 | created: 2020-04-28T22:03:21.000Z
 8 | modified: 2021-01-16T13:21:57.000Z
 9 | ---
10 | 
11 | ## The scroll-behavior property
12 | 
13 | The `scroll-behavior` property tells the browser how to handle scrolling to anchor links within an element.
14 | 
15 | The default value, `auto`, does a hard jump like you’re used to. A value of `scroll` tells the browser to animate scrolling. There’s no way to specify easing, but it ties into the browser’s refresh rate to give you silky smooth animations.
16 | 
17 | ```css
18 | /**
19 |  * Enable smooth scrolling on the whole document
20 |  */
21 | html {
22 |   scroll-behavior: smooth;
23 | }
24 | ```
25 | 
26 | [Here’s a demo](https://codepen.io/cferdinandi/pen/MWwvPJZ)
27 | 
28 | You can restrict it to specific elements if you want.
29 | 
30 | ```css
31 | /**
32 |  * Enable smooth scrolling on the #be-cool element
33 |  */
34 | #be-cool {
35 |   scroll-behavior: smooth;
36 | }
37 | ```
38 | 
39 | And if you want to disable it when someone uses their browser's "Find in page" function:
40 | 
41 | ```css
42 | html:focus-within {
43 |   scroll-behavior: smooth;
44 | }
45 | ```
46 | 
47 | ## Accessibility concerns
48 | 
49 | Animations can cause issues for users who suffer from motion sickness and other conditions.
50 | 
51 | Fortunately, Windows, macOs, iOS, and Android all provide a way for users to specify that they prefer reduced motion. And all modern browsers (but not IE) provide a way to check for that setting in both CSS and JavaScript.
52 | 
53 | When using `scroll-behavior`, you should add a `@media` check for prefers-reduced-motion: reduce, and revert to the default auto.
54 | 
55 | ```css
56 | /**
57 |  * Disable smooth scrolling when users have prefers-reduced-motion enabled
58 |  */
59 | @media screen and (prefers-reduced-motion: reduce) {
60 |   html {
61 |     scroll-behavior: auto;
62 |   }
63 | }
64 | ```
65 | 
66 | This prevents animated scrolling when users have specified that they’d prefer reduced motion.
67 | 
68 | [Read more on MDN](http://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior)
69 | 
70 | ## Usage with JavaScript
71 | 
72 | ```js
73 | // Scroll to specific values
74 | // scrollTo is the same
75 | window.scroll({
76 |   top: 2500,
77 |   left: 0,
78 |   behavior: 'smooth',
79 | })
80 | 
81 | // Scroll certain amounts from current position
82 | window.scrollBy({
83 |   top: 100, // could be negative value
84 |   left: 0,
85 |   behavior: 'smooth',
86 | })
87 | 
88 | // Scroll to a certain element
89 | document.querySelector('.hello').scrollIntoView({
90 |   behavior: 'smooth',
91 | })
92 | ```
93 | 
94 | [Reference](https://css-tricks.com/snippets/jquery/smooth-scrolling/)
95 | 


--------------------------------------------------------------------------------
/notes/css-scroll-margin-top.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Scroll-margin-top
 3 | tags:
 4 |   - css
 5 | link: 'https://mobile.twitter.com/JoshWComeau/status/1332015868725891076'
 6 | created: 2020-12-29T10:31:32.000Z
 7 | modified: 2020-12-29T10:31:32.000Z
 8 | ---
 9 | 
10 | You know that annoying thing when you're scrolled to an anchor and the site's sticky header covers it up?
11 | 
12 | ```css
13 | .heading {
14 |   scroll-margin-top: 72px;
15 | }
16 | ```
17 | 
18 | Browser support: Works natively in Chrome, FF, Edge, Opera. Supported in Safari, but with a non-standard property, `scroll-snap-margin-top`.
19 | 


--------------------------------------------------------------------------------
/notes/css-style-siblings-hover.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Styling siblings on hover
 3 | tags:
 4 |   - css
 5 | emoji: 💄
 6 | link: 'https://codyhouse.co/nuggets/styling-siblings-on-hover'
 7 | created: 2020-05-19T08:25:55.000Z
 8 | modified: 2020-05-19T08:25:55.000Z
 9 | ---
10 | 
11 | Use the :not CSS selector to stylize siblings on hover.
12 | 
13 | Normally, you would need JavaScript to stylize all the siblings of an element you're interacting with. But wait! There's a cool method based 100% on CSS.
14 | 
15 | The idea, in short, is to target the :hover of the parent, then target all the children except the one you're hovering over.
16 | 
17 | ```css
18 | .parent:hover .child:not(:hover) {
19 |   /* this style affects all the children except the one you're hovering over */
20 | }
21 | ```
22 | 
23 | <p class="codepen" data-height="265" data-theme-id="light" data-default-tab="result" data-user="codyhouse" data-slug-hash="KKdrmXj" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="CSS Nugget: Styling siblings on hover">
24 |   <span>See the Pen <a href="https://codepen.io/codyhouse/pen/KKdrmXj">
25 |   CSS Nugget: Styling siblings on hover</a> by CodyHouse (<a href="https://codepen.io/codyhouse">@codyhouse</a>)
26 |   on <a href="https://codepen.io">CodePen</a>.</span>
27 | </p>
28 | <script async src="https://static.codepen.io/assets/embed/ei.js"></script>
29 | 


--------------------------------------------------------------------------------
/notes/deno.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Deno
 3 | tags:
 4 |   - deno
 5 | created: 2022-11-26T00:21:36:00Z
 6 | modified: 2022-12-29T00:15:19:00Z
 7 | link: https://deno.land
 8 | emoji: ⚡
 9 | ---
10 | 
11 | ### [3rd party modules](https://deno.land/x)
12 | 
13 | **[deno.land/x](https://deno.land/x?query=serve)** is a hosting service for Deno scripts. It caches releases of open-source modules stored on GitHub and serves them at an easy-to-remember domain.
14 | 
15 | Deno can import modules from any location on the web, like GitHub, a personal webserver, or a CDN like [esm.sh](https://esm.sh/), [Skypack](https://www.skypack.dev/), [jspm.io](https://jspm.io/) or [jsDelivr](https://www.jsdelivr.com/).
16 | 
17 | ## Examples
18 | 
19 | ### [deno.land](https://deno.land/x)
20 | 
21 | ```ts
22 | import { serve } from 'https://deno.land/std@0.131.0/http/server.ts'
23 | ```
24 | 
25 | ### [esm.sh](https://esm.sh)
26 | 
27 | ```ts
28 | import { decode } from 'https://esm.sh/html-entities@2.3.3'
29 | import type { SupabaseClient } from 'https://esm.sh/@supabase/supabase-js@2.1.1'
30 | ```
31 | 
32 | ### CDN
33 | 
34 | ```ts
35 | import urlJoin from 'https://cdn.skypack.dev/pin/proper-url-join@v2.1.1-SID2RKzIsZDaP6lwi1ZT/mode=imports,min/optimized/proper-url-join.js'
36 | ```
37 | 
38 | ### [npm](https://deno.land/manual@v1.29.1/node)
39 | 
40 | ```ts
41 | import chalk from 'npm:chalk@5'
42 | ```
43 | 
44 | #### TS types
45 | 
46 | ```ts
47 | // @deno-types="npm:@types/express@^4.17"
48 | import express from 'npm:express@^4.17'
49 | ```
50 | 
51 | ## Publishing your own modules
52 | 
53 | All modules on deno.land/x need to be hosted as public repositories on GitHub.com.
54 | 
55 | deno.land/x downloads and stores your repository contents every time you create a git tag. We only do this once for every tag. This ensures that the contents we serve for a specific version can never change.
56 | 


--------------------------------------------------------------------------------
/notes/destructuring.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Destructuring
 3 | tags:
 4 |   - javascript
 5 | created: 2020-02-27T23:51:44.000Z
 6 | modified: 2020-03-22T23:14:36.000Z
 7 | ---
 8 | 
 9 | ```js
10 | const exampleObject = { a: { b: 'hi' } }
11 | 
12 | // Want to get both `a` and `b` as variables?
13 | // You totally can do this in one line of destructuring.
14 | const {
15 |   a,
16 |   a: { b }
17 | } = exampleObject
18 | ```
19 | 


--------------------------------------------------------------------------------
/notes/docker.md:
--------------------------------------------------------------------------------
  1 | ---
  2 | title: Docker
  3 | emoji: 🐳
  4 | tags:
  5 |   - devops
  6 | created: 2020-02-27T23:02:00.000Z
  7 | modified: 2022-09-22T13:31:32.000Z
  8 | ---
  9 | 
 10 | ## Best practices
 11 | 
 12 | - [Node Dockerfile best practices](https://github.com/nodejs/docker-node/blob/master/docs/BestPractices.md)
 13 | - [Dockerfile best practices](https://docs.docker.com/develop/develop-images/dockerfile_best-practices/)
 14 | 
 15 | ## Dockerfile examples
 16 | 
 17 | ```docker
 18 | FROM node:12.4.0-alpine
 19 | ENV NPM_CONFIG_LOGLEVEL info
 20 | WORKDIR /usr/src/app
 21 | EXPOSE 8080
 22 | ENTRYPOINT ["yarn", "start"]
 23 | 
 24 | RUN mkdir -p /usr/src/app
 25 | COPY . .
 26 | RUN yarn install && \
 27 |     yarn build && \
 28 |     yarn test && \
 29 |     yarn install --production && \
 30 |     rm -rf .git
 31 | ```
 32 | 
 33 | ### Build a Dockerfile locally
 34 | 
 35 | ```docker
 36 | docker build .
 37 | 
 38 | # or
 39 | 
 40 | docker build -t yourTagName .
 41 | ```
 42 | 
 43 | ### Run a Dockerfile locally
 44 | 
 45 | ```docker
 46 | docker run -p 1717:1717 yourTagName
 47 | ```
 48 | 
 49 | ### Docker commands
 50 | 
 51 | ```docker
 52 | # list all running containers
 53 | docker ps
 54 | 
 55 | # stop/remove particular running container
 56 | docker rm -f $containerId
 57 | 
 58 | # stop all containers
 59 | docker rm -f (docker ps -aq)
 60 | 
 61 | # browse running container files
 62 | docker exec -it $containerId sh
 63 | ```
 64 | 
 65 | ## Using private npm packages
 66 | 
 67 | [Securely using .npmrc files in Docker images](https://www.alexandraulsh.com/2018/06/25/docker-npmrc-security/)
 68 | 
 69 | Here's an example of the above
 70 | 
 71 | ```docker
 72 | # Multi-stage build info & npm security
 73 | # from https://www.alexandraulsh.com/2018/06/25/docker-npmrc-security/
 74 | 
 75 | # First build
 76 | FROM node:13.2.0 AS build
 77 | ENV NPM_CONFIG_LOGLEVEL info
 78 | WORKDIR /usr/src/app
 79 | ARG NPM_TOKEN
 80 | 
 81 | RUN mkdir -p /usr/src/app
 82 | COPY . .
 83 | RUN echo "//registry.npmjs.org/:_authToken=$NPM_TOKEN" > .npmrc && \
 84 |     yarn install && \
 85 |     yarn build && \
 86 |     yarn test && \
 87 |     yarn storybook:build && \
 88 |     yarn install --production && \
 89 |     rm -f .npmrc \
 90 |     rm -rf .git
 91 | 
 92 | 
 93 | # Second build
 94 | FROM node:13.2.0-alpine
 95 | WORKDIR /usr/src/app
 96 | 
 97 | EXPOSE 8080
 98 | COPY --from=build /usr/src/app .
 99 | 
100 | ENTRYPOINT ["yarn", "start"]
101 | ```
102 | 
103 | Then you would run the build like so:
104 | 
105 | ```diff
106 | docker build -t mrmartineau/${CIRCLE_PROJECT_REPONAME}:${CIRCLE_SHA1} \
107 | +               --build-arg NPM_TOKEN=${NPM_TOKEN} \
108 | ```
109 | 
110 | The above extract is from one project's CircleCI config.
111 | 
112 | This is how you would run it locally
113 | 
114 | ```sh
115 | docker build . -f dockerfile -t kiss --build-arg NPM_TOKEN=9e012519-aba7-4372-8381-abcdefghi
116 | ```
117 | 
118 | ## Security
119 | 
120 | https://cloudberry.engineering/article/dockerfile-security-best-practices/
121 | 
122 | Hacker News comments for the above article: https://news.ycombinator.com/item?id=24776771
123 | 
124 | ## Using Docker on a Mac
125 | - Rancher Desktop (https://rancherdesktop.io/)
126 |   - [Using Rancher Desktop as Docker Desktop replacement on macOS](https://www.danielstechblog.io/using-rancher-desktop-as-docker-desktop-replacement-on-macos/) - Daniel's Tech Blog 
127 | - [Podman Desktop](https://podman-desktop.io/)
128 | - [Colima](https://github.com/abiosoft/colima) (CLI tool) - Container runtimes on macOS (and Linux) with minimal setup
129 | - [Portainer](http://www.portainer.io/) (Web-based) Docker and Kubernetes Management
130 | 


--------------------------------------------------------------------------------
/notes/es6-module-syntax.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: ES Module import/export syntax
 3 | tags:
 4 |   - javascript
 5 | created: 2020-02-27T23:02:00.000Z
 6 | modified: 2020-02-27T23:02:00.000Z
 7 | ---
 8 | 
 9 | ```js
10 | // default exports
11 | export default 42
12 | export default {}
13 | export default []
14 | export default 1 + 2
15 | export default foo
16 | export default function() {}
17 | export default class {}
18 | export default function foo() {}
19 | export default class foo {}
20 | 
21 | // variables exports
22 | export var foo = 1
23 | export var foo = function() {}
24 | export var bar
25 | export let foo = 2
26 | export let bar
27 | export const foo = 3
28 | export function foo() {}
29 | export class foo {}
30 | 
31 | // named exports
32 | export {}
33 | export { foo }
34 | export { foo, bar }
35 | export { foo as bar }
36 | export { foo as default }
37 | export { foo as default, bar }
38 | 
39 | // exports from
40 | export * from 'foo'
41 | export {} from 'foo'
42 | export { foo } from 'foo'
43 | export { foo, bar } from 'foo'
44 | export { foo as bar } from 'foo'
45 | export { foo as default } from 'foo'
46 | export { foo as default, bar } from 'foo'
47 | export { default } from 'foo'
48 | export { default as foo } from 'foo'
49 | ```
50 | 
51 | ## Import Syntax
52 | 
53 | ```js
54 | // default imports
55 | import foo from 'foo'
56 | import { default as foo } from 'foo'
57 | 
58 | // named imports
59 | import {} from 'foo'
60 | import { bar } from 'foo'
61 | import { bar, baz } from 'foo'
62 | import { bar as baz } from 'foo'
63 | import { bar as baz, xyz } from 'foo'
64 | 
65 | // glob imports
66 | import * as foo from 'foo'
67 | 
68 | // mixing imports
69 | import foo, { baz as xyz } from 'foo'
70 | import foo, * as bar from 'foo'
71 | 
72 | // just import
73 | import 'foo'
74 | ```
75 | 


--------------------------------------------------------------------------------
/notes/es6-templating.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: ES6 templating
 3 | tags:
 4 |   - javascript
 5 | created: 2020-02-27T23:02:00.000Z
 6 | modified: 2020-02-27T23:02:00.000Z
 7 | ---
 8 | 
 9 | ```js
10 | const dogs = [
11 |   { name: 'Snickers', age: 2 },
12 |   { name: 'Hugo', age: 8 },
13 |   { name: 'Sunny', age: 1 },
14 | ]
15 | 
16 | const markup = `
17 |   <ul class="dogs">
18 |       ${dogs
19 |         .map(
20 |           dog =>
21 |             `<li>${dog.name}
22 |               is
23 |               ${dog.age * 7}
24 |               </li>`
25 |         )
26 |         .join('')}
27 |     </ul>
28 | `
29 | ```
30 | 
31 | ## or
32 | 
33 | ```js
34 | const song = {
35 |   name: 'Dying to live',
36 |   artist: 'Tupac',
37 |   featuring: 'Biggie Smalls',
38 | }
39 | 
40 | const markup = `
41 |     <div class="song">
42 |         <p>
43 |             ${song.name} - ${song.artist}
44 |             ${song.featuring ? `(Featuring ${song.featuring})` : ''}
45 |         </p>
46 |     </div>
47 | `
48 | ```
49 | 


--------------------------------------------------------------------------------
/notes/express-middleware-testing.md:
--------------------------------------------------------------------------------
  1 | ---
  2 | title: Express middleware testing
  3 | tags:
  4 |   - javascript
  5 |   - node
  6 |   - testing
  7 | created: 2020-02-27T23:02:00.000Z
  8 | modified: 2020-02-27T23:02:00.000Z
  9 | ---
 10 | 
 11 | ```js
 12 | import reqresnext from 'reqresnext'
 13 | 
 14 | import { userIdChecker } from './userIdMiddleware'
 15 | 
 16 | const DOMAIN = 'https://example.com'
 17 | const VALID_USER_ID = '103003'
 18 | const jwtToken =
 19 |   'eyJraWQiOiI1WFwvUjdxdEdoeWxcLzNYcnY5SXFiWFwvWEhEKytvb2p0TXhBNDhZRzVERVlZPSIsImFsZyI6IlJTMjU2In0.eyJzdWIiOiJhNTdjMmM1YS1hNmMyLTQzZGYtYjJiMS04YmU1ZTA1YzI1NzMiLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiaXNzIjoiaHR0cHM6XC9cL2NvZ25pdG8taWRwLmV1LXdlc3QtMi5hbWF6b25hd3MuY29tXC9ldS13ZXN0LTJfUDZVMkhmNTZ5IiwiY3VzdG9tOnVzZXJfaWQiOiIxMDMwMDMiLCJjb2duaXRvOnVzZXJuYW1lIjoiYTU3YzJjNWEtYTZjMi00M2RmLWIyYjEtOGJlNWUwNWMyNTczIiwiY3VzdG9tOmlzX2FkbWluIjoiZmFsc2UiLCJhdWQiOiIyZ3FpaWlrdGQwNXFibm1jdmluODV2Zm0yZCIsImV2ZW50X2lkIjoiZDFmMjI4ZWYtMjE0Yi00NmE2LTljMjQtZWZjYTNhNDM1NzQxIiwidG9rZW5fdXNlIjoiaWQiLCJhdXRoX3RpbWUiOjE1NjM0NDgzMTksImV4cCI6MTU2MzQ1MjUzOSwiaWF0IjoxNTYzNDQ4OTM5LCJlbWFpbCI6ImhpK2RpenpsZUB6YW5kZXIud3RmIn0.gAelFt52A-84nkTMjuJ1_0SLSGUNQJgMnPPhci2zeLM0j2g4fCK12tVHbWbRq1yFeJ8LyRpobCq0CyNfDGechYqbnt91owaBDQzZNySdb0Edsfbxoq-JkgGbCJWCTddW9YxDzupZ4IjnYlfQlk6yH0bAzUH0WmACu22pLSk1isDJO8YiPvjtAN10calUkP7O4i0wTMNXXikh4UVylqfJCP4C-6XvJxG8x_UELyVB38N4Vti4aeUOpMjxii6bLxu2fvtCvQIlZJhRBjtHxKb3pWeVxldPMYpEeGrhgW6IiOgGdinGRsM0ENM0EtSrkvJpxCcnmWXjHWQBJsUJqxVD2w'
 20 | 
 21 | describe('Given a userIdChecker middleware', () => {
 22 |   describe(`when it is called with matching userId's`, () => {
 23 |     describe('when the request has a user_id as a query param', () => {
 24 |       it('should not modify the request', () => {
 25 |         const originalRequest = `${DOMAIN}/api/fx-api/user/103003?user_id=103003`
 26 |         const path = `/api/fx-api/user/${VALID_USER_ID}?user_id=${VALID_USER_ID}`
 27 |         const { req, res, next } = reqresnext({
 28 |           url: `${DOMAIN}${path}`,
 29 |           originalUrl: `${DOMAIN}${path}`,
 30 |           path,
 31 |           cookies: {
 32 |             jwt_id_token: jwtToken,
 33 |           },
 34 |         })
 35 | 
 36 |         userIdChecker(req, res, next)
 37 | 
 38 |         expect(req.url).toEqual(originalRequest)
 39 |       })
 40 |     })
 41 | 
 42 |     describe('when the request has a userId in the request body', () => {
 43 |       it('should not modify the request', () => {
 44 |         const path = `/api/fx-api/user/${VALID_USER_ID}`
 45 |         const { req, res, next } = reqresnext({
 46 |           url: `${DOMAIN}${path}`,
 47 |           originalUrl: `${DOMAIN}${path}`,
 48 |           path,
 49 |           cookies: {
 50 |             jwt_id_token: jwtToken,
 51 |           },
 52 |           body: {
 53 |             userId: VALID_USER_ID,
 54 |           },
 55 |         })
 56 | 
 57 |         userIdChecker(req, res, next)
 58 | 
 59 |         expect(req.body.userId).toEqual(VALID_USER_ID)
 60 |       })
 61 |     })
 62 |   })
 63 | 
 64 |   describe(`when it is called with mismatching userId's`, () => {
 65 |     const WRONG_USER_ID = '12345'
 66 | 
 67 |     it('should forbid the API call', () => {
 68 |       const originalRequest = `${DOMAIN}/api/fx-api/user/103003?user_id=${WRONG_USER_ID}`
 69 |       const path = `/api/fx-api/user/${VALID_USER_ID}?user_id=${WRONG_USER_ID}`
 70 |       const { req, res, next } = reqresnext({
 71 |         url: `${DOMAIN}${path}`,
 72 |         originalUrl: `${DOMAIN}${path}`,
 73 |         path,
 74 |         cookies: {
 75 |           jwt_id_token: jwtToken,
 76 |         },
 77 |       })
 78 | 
 79 |       userIdChecker(req, res, next)
 80 | 
 81 |       expect(req.url).toEqual(originalRequest)
 82 |       expect(res.statusCode).toEqual(403)
 83 |       expect(JSON.parse(res.body)).toEqual({ message: 'Forbidden' })
 84 |     })
 85 | 
 86 |     describe('when the request has a userId in the request body', () => {
 87 |       it('should forbid the API call', () => {
 88 |         const path = `/api/fx-api/user/${VALID_USER_ID}`
 89 |         const { req, res, next } = reqresnext({
 90 |           url: `${DOMAIN}${path}`,
 91 |           originalUrl: `${DOMAIN}${path}`,
 92 |           path,
 93 |           cookies: {
 94 |             jwt_id_token: jwtToken,
 95 |           },
 96 |           body: {
 97 |             userId: WRONG_USER_ID,
 98 |           },
 99 |         })
100 | 
101 |         userIdChecker(req, res, next)
102 | 
103 |         expect(res.statusCode).toEqual(403)
104 |         expect(JSON.parse(res.body)).toEqual({ message: 'Forbidden' })
105 |       })
106 |     })
107 |   })
108 | })
109 | ```
110 | 


--------------------------------------------------------------------------------
/notes/favicons.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Favicons
 3 | tags:
 4 |   - html
 5 | emoji: 👍
 6 | created: 2020-03-24T22:53:27.000Z
 7 | modified: 2020-03-26T23:06:06.000Z
 8 | ---
 9 | 
10 | ```html
11 | <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
12 | <link rel="icon" href="/favicon.png" type="image/png" />
13 | 
14 | <!-- Could use the `sizes` attr too -->
15 | <link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16" />
16 | <link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32" />
17 | <link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96" />
18 | ```
19 | 
20 | [Light and dark themed SVG favicon using the CSS prefers-color-scheme media feature](https://catalin.red/svg-favicon-light-dark-theme/)
21 | 
22 | https://css-tricks.com/favicon-quiz
23 | 
24 | https://realfavicongenerator.net/
25 | 


--------------------------------------------------------------------------------
/notes/file-size-of-files-in-directory.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Get file size for all files in directory
 3 | tags:
 4 |   - cli
 5 | created: 2020-03-22T14:53:49.000Z
 6 | modified: 2020-05-27T16:07:27.000Z
 7 | ---
 8 | 
 9 | ```sh
10 | du -sh * | sort -hr
11 | ```
12 | 


--------------------------------------------------------------------------------
/notes/firebase.md:
--------------------------------------------------------------------------------
  1 | ---
  2 | title: Firebase
  3 | created: 2021-04-22T17:45:56.352Z
  4 | modified: 2021-07-12T05:59:03.092Z
  5 | tags:
  6 |   - services
  7 |   - APIs
  8 | ---
  9 | 
 10 | ## Client side
 11 | 
 12 | Initialise the app like so:
 13 | 
 14 | https://firebase.google.com/docs/web/setup#default-hosting-site
 15 | 
 16 | ```ts
 17 | // firebase.ts
 18 | import firebase from 'firebase/app'
 19 | import 'firebase/auth'
 20 | import 'firebase/firestore'
 21 | import 'firebase/functions'
 22 | 
 23 | const FIREBASE_CONFIG = {
 24 |   apiKey: '{api key}',
 25 |   authDomain: '{authDomain}',
 26 |   databaseURL: '{databaseURL}',
 27 |   projectId: '{app name}',
 28 |   storageBucket: '{storageBucket}',
 29 |   messagingSenderId: '{messagingSenderId}',
 30 |   appId: '{appId}',
 31 |   measurementId: '{measurementId}',
 32 | }
 33 | 
 34 | firebase.initializeApp(FIREBASE_CONFIG)
 35 | 
 36 | export const auth = firebase.auth()
 37 | export const firestore = firebase.firestore()
 38 | export const functions = firebase.app().functions('europe-west2') // set the region globally
 39 | 
 40 | export { firebase }
 41 | ```
 42 | 
 43 | ### Hosting
 44 | 
 45 | https://firebase.google.com/docs/hosting/full-config
 46 | 
 47 | ## Functions
 48 | 
 49 | https://firebase.google.com/docs/hosting/functions#direct_hosting_requests_to_your_function
 50 | https://github.com/firebase/functions-samples/issues/395#issuecomment-635445763
 51 | https://firebase.google.com/docs/functions/callable
 52 | Testing functions: https://firebase.google.com/docs/functions/local-shell#invoke_https_callable_functions
 53 | 
 54 | ## Firestore
 55 | 
 56 | Various Firestore helpers and utils to make our lives easier
 57 | 
 58 | ## Firestore helpers
 59 | 
 60 | ### `firestoreDataPoint`
 61 | 
 62 | This helper function exposes a 'typed' version of `firestore().collection(collectionPath)`. Pass it a collectionPath string as the path to the collection in firestore. Pass it a type argument representing the 'type' (schema) of the docs in the collection
 63 | 
 64 | ```ts
 65 | import { firestoreDataPoint } from './utils'
 66 | 
 67 | firestoreDataPoint<FirestoreUser>('users')
 68 | ```
 69 | 
 70 | ## Document helpers
 71 | 
 72 | ### `firestoreUser`
 73 | 
 74 | Returns reference to that user's Firestore document. Can then be used to `.get()` or `.set()` data for that document.
 75 | 
 76 | > This uses `firestoreDataPoint` internally
 77 | 
 78 | ```ts
 79 | import { firestoreUser } from './utils'
 80 | 
 81 | firestoreUser('xyz123').get()
 82 | ```
 83 | 
 84 | ```ts
 85 | import { firebase, firestore } from '../../config'
 86 | import { FirestoreUser } from '../../types/firestore.models'
 87 | 
 88 | /**
 89 |  * @name firestoreConverter
 90 |  * @description This helper function pipes your types through a firestore converter
 91 |  */
 92 | export const firestoreConverter = <
 93 |   T
 94 | >(): firebase.firestore.FirestoreDataConverter<T> => ({
 95 |   toFirestore: (data: Partial<T>) => data,
 96 |   fromFirestore: (snap: firebase.firestore.QueryDocumentSnapshot) =>
 97 |     snap.data() as T,
 98 | })
 99 | 
100 | /**
101 |  * @name firestoreDataPoint
102 |  * @param collectionPath e.g. 'users'
103 |  * @description This helper function exposes a 'typed' version of firestore().collection(collectionPath)
104 |  * Pass it a collectionPath string as the path to the collection in firestore
105 |  * Pass it a type argument representing the 'type' (schema) of the docs in the collection
106 |  */
107 | export const firestoreDataPoint = <T>(
108 |   collectionPath: string,
109 | ): firebase.firestore.CollectionReference => {
110 |   return firestore
111 |     .collection(collectionPath)
112 |     .withConverter(firestoreConverter<T>())
113 | }
114 | 
115 | /**
116 |  * @name firestoreUser
117 |  * @param uid {string} e.g. a user's UID
118 |  * @returns reference to that user's Firestore document
119 |  */
120 | export const firestoreUser = (uid: string) =>
121 |   firestoreDataPoint<FirestoreUser>('users').doc(uid)
122 | ```
123 | 
124 | ```tsx
125 | import { useEffect, useState } from 'react'
126 | import { useUserContext } from '../providers'
127 | import { FirestoreUser } from '../types/firestore.models'
128 | import { firestoreUser } from '../utils'
129 | 
130 | /**
131 |  * @name useFirestoreUserData
132 |  * @description Returns all user data from Firestore
133 |  */
134 | export const useFirestoreUserData = (): FirestoreUser | undefined => {
135 |   const { uid } = useUserContext()
136 |   const [userInfo, setUserInfo] = useState<FirestoreUser | undefined>()
137 | 
138 |   useEffect(() => {
139 |     if (uid) {
140 |       firestoreUser(uid)
141 |         .get()
142 |         .then((doc) => {
143 |           if (doc.exists) {
144 |             console.log('User Document data:', doc.data())
145 |             setUserInfo(doc.data() as FirestoreUser)
146 |           } else {
147 |             // doc.data() will be undefined in this case
148 |             console.log('No such document!')
149 |           }
150 |         })
151 |         .catch((error) => {
152 |           console.log('Error getting document:', error)
153 |         })
154 |     }
155 |   }, [uid])
156 | 
157 |   return userInfo
158 | }
159 | ```
160 | 


--------------------------------------------------------------------------------
/notes/fish-shell.md:
--------------------------------------------------------------------------------
  1 | ---
  2 | title: Fish shell
  3 | emoji: 🐠
  4 | tags:
  5 |   - cli
  6 | link: https://fishshell.com
  7 | created: 2020-02-27T23:02:00.000Z
  8 | modified: 2021-11-26T11:10:59.134Z
  9 | ---
 10 | 
 11 | My Fish config: https://github.com/mrmartineau/fish
 12 | 
 13 | Change fish settings:
 14 | 
 15 | ```shell
 16 | fish_config
 17 | ```
 18 | 
 19 | Reload fish shell
 20 | 
 21 | ```shell
 22 | fish
 23 | ```
 24 | 
 25 | ## Switching to fish?
 26 | 
 27 | If you wish to use fish (or any other shell) as your default shell, you need to enter your new shell's executable in two places.
 28 | 
 29 | Add the shell to `/etc/shells` with:
 30 | 
 31 | ```sh
 32 | echo /usr/local/bin/fish | sudo tee -a /etc/shells
 33 | ```
 34 | 
 35 | > ℹ️ homebrew may install fish to `/opt/homebrew/bin/fish`
 36 | 
 37 | Change your default shell with:
 38 | 
 39 | ```sh
 40 | chsh -s /usr/local/bin/fish
 41 | ```
 42 | 
 43 | > This assumes you installed fish to `/usr/local/bin`, which is the default location when you've compiled it yourself. If you installed it with a package manager, the usual location is `/usr/bin/fish`, but package managers typically already add it to `/etc/shells`. Just substitute the correct location.
 44 | 
 45 | (To change it back to another shell, substitute `/usr/local/bin/fish` with `/bin/bash`, `/bin/tcsh` or `/bin/zsh` as appropriate in the steps above.)
 46 | 
 47 | http://fishshell.com/docs/current/tutorial.html
 48 | https://github.com/jorgebucaran/fish-cookbook
 49 | https://github.com/ghaiklor/iterm-fish-fisher-osx
 50 | 
 51 | ## Fish features
 52 | 
 53 | ### Functions
 54 | 
 55 | Create new functions in `~/.config/fish/functions` e.g. `xyz.fish`
 56 | 
 57 | ### Aliases
 58 | 
 59 | `alias` is a simple wrapper for the `function` builtin, which creates a function wrapping a command.
 60 | 
 61 | https://fishshell.com/docs/current/cmds/alias.html
 62 | 
 63 | ```sh
 64 | alias gco 'git checkout'
 65 | alias undocommit 'git reset HEAD~1'
 66 | alias ya 'yarn add'
 67 | alias yad 'yarn add -D'
 68 | ```
 69 | 
 70 | ### abbr
 71 | 
 72 | If you add an [abbreviation](https://fishshell.com/docs/current/cmds/abbr.html) instead of an alias you'll get better auto-complete. In fish abbr more closely matches the behavior of a bash alias.
 73 | 
 74 | ```sh
 75 | abbr -a gco git checkout
 76 | ```
 77 | 
 78 | Will add a new abbreviation `gco` that expands to `git checkout`.
 79 | 
 80 | ## Fish plugins
 81 | 
 82 | ### Fisher
 83 | 
 84 | https://github.com/jorgebucaran/fisher
 85 | 
 86 | Plugins are listed in the `$__fish_config_dir/fish_plugins` file.
 87 | 
 88 | Install fisher:
 89 | 
 90 | ```sh
 91 | curl -sL https://git.io/fisher | source && fisher install jorgebucaran/fisher
 92 | ```
 93 | 
 94 | Install a plugin:
 95 | 
 96 | ```sh
 97 | fisher install jorgebucaran/nvm.fish@2.1.0
 98 | ```
 99 | 
100 | Listing plugins
101 | 
102 | ```sh
103 | fisher list
104 | ```
105 | 
106 | ## Other info
107 | 
108 | ### Set shell variables
109 | 
110 | ```sh
111 | set -xg PATH /usr/local/sbin $PATH
112 | ```
113 | 
114 | https://fishshell.com/docs/current/cmds/set.html
115 | 
116 | #### Adding to `$PATH`
117 | 
118 | Use [`fish_add_path`](https://fishshell.com/docs/current/cmds/fish_add_path.html)
119 | 
120 | ```sh
121 | fish_add_path /usr/local/sbin
122 | ```
123 | 
124 | https://fishshell.com/docs/current/cmds/fish_add_path.html
125 | 
126 | ### Using `ssh-agent`
127 | 
128 | When needing to add ssh keys to Github, [the docs](https://docs.github.com/en/authentication/connecting-to-github-with-ssh/generating-a-new-ssh-key-and-adding-it-to-the-ssh-agent#adding-your-ssh-key-to-the-ssh-agent) suggest running `eval "$(ssh-agent -s)"` but that does not work in fish. Run this instead:
129 | 
130 | ```sh
131 | command ssh-agent -s
132 | ```
133 | 
134 | ### Executing Bash
135 | 
136 | If fish is your default shell and you want to copy commands from the internet that are written in bash (the default shell on most systems), you can proceed in one of the following two ways:
137 | 
138 | Use the bash command with the -c switch to read from a string:
139 | 
140 | ```sh
141 | $ bash -c 'some bash command'
142 | ```
143 | 
144 | Use bash without a switch to open a bash shell you can use and exit afterward:
145 | 
146 | ```sh
147 | > bash
148 | $ some bash command
149 | $ exit
150 | 
151 | > _
152 | ```
153 | 


--------------------------------------------------------------------------------
/notes/fixed-width-numbers.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Fixed-width numbers
 3 | tags:
 4 |   - css
 5 | emoji: 🔢
 6 | link: >-
 7 |   https://blog.usejournal.com/proportional-vs-monospaced-numbers-when-to-use-which-one-in-order-to-avoid-wiggling-labels-e31b1c83e4d0
 8 | created: 2020-03-22T14:53:49.000Z
 9 | modified: 2020-05-11T11:47:16.000Z
10 | ---
11 | 
12 | ```css
13 | .yourClass {
14 |   font-variant-numeric: tabular-nums;
15 | }
16 | ```
17 | 


--------------------------------------------------------------------------------
/notes/fluid-typography.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Fluid typography
 3 | tags:
 4 |   - css
 5 | created: 2020-03-22T14:53:49.000Z
 6 | modified: 2020-03-22T14:53:49.000Z
 7 | ---
 8 | 
 9 | ```css
10 | html {
11 |   font-size: 16px;
12 | }
13 | @media screen and (min-width: 320px) {
14 |   html {
15 |     font-size: calc(16px + 6 * ((100vw - 320px) / 680));
16 |   }
17 | }
18 | 
19 | @media screen and (min-width: 1000px) {
20 |   html {
21 |     font-size: 22px;
22 |   }
23 | }
24 | ```
25 | 
26 | Calculate your own: https://websemantics.uk/tools/responsive-font-calculator/
27 | 
28 | Or use this if you only need to support Safari (11.1+) and Chrome (79+)
29 | 
30 | ```css
31 | html {
32 |   font-size: min(max(16px, 4vw), 22px);
33 | }
34 | ```
35 | 
36 | Or even this if you only support Chrome (79+)
37 | 
38 | ```css
39 | body {
40 |   font-size: clamp(16px, 4vw, 22px);
41 | }
42 | ```
43 | 
44 | Source: https://css-tricks.com/simplified-fluid-typography/
45 | 


--------------------------------------------------------------------------------
/notes/font-face.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: '@font-face'
 3 | tags:
 4 |   - css
 5 | emoji: 📰
 6 | created: 2020-02-27T23:02:00.000Z
 7 | modified: 2020-03-26T23:06:06.000Z
 8 | ---
 9 | 
10 | ## Modern browsers
11 | 
12 | ```css
13 | @font-face {
14 |   font-family: 'MyWebFont';
15 |   src: url('myfont.woff2') format('woff2'), url('myfont.woff') format('woff');
16 |   font-display: 'swap';
17 | }
18 | ```
19 | 
20 | ## Every browser
21 | 
22 | ```css
23 | /* prettier-ignore */
24 | @font-face {
25 |   font-family: 'MyWebFont';
26 |   src: url('webfont.eot'); /* IE9 Compat Modes */
27 |   src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
28 |        url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
29 |        url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
30 |        url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */
31 |        url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
32 |   font-display: 'swap';
33 | }
34 | ```
35 | 


--------------------------------------------------------------------------------
/notes/full-bleed-utility.mdx:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Full-bleed utility
 3 | tags:
 4 |   - css
 5 | created: 2020-03-10T14:58:40.000Z
 6 | modified: 2020-03-10T14:58:40.000Z
 7 | ---
 8 | 
 9 | ```css
10 | .full-bleed {
11 |   width: 100vw;
12 |   margin-left: calc(50% - 50vw);
13 | }
14 | ```
15 | 
16 | <iframe
17 |   height="265"
18 |   style="width: 100%;"
19 |   scrolling="no"
20 |   title="Piccalilli Demo - Full Bleed Utility"
21 |   src="https://codepen.io/andybelldesign/embed/vYOJjNw?height=265&theme-id=light&default-tab=result"
22 |   frameborder="no"
23 |   allowtransparency="true"
24 |   allowfullscreen="true"
25 | >
26 |   See the Pen{' '}
27 |   <a href="https://codepen.io/andybelldesign/pen/vYOJjNw">
28 |     Piccalilli Demo - Full Bleed Utility
29 |   </a>{' '}
30 |   by Andy Bell (<a href="https://codepen.io/andybelldesign">@andybelldesign</a>)
31 |   on <a href="https://codepen.io">CodePen</a>.
32 | </iframe>
33 | 


--------------------------------------------------------------------------------
/notes/fullscreen.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Fullscreen video
 3 | emoji: 🍿
 4 | tags:
 5 |   - javascript
 6 |   - typescript
 7 | created: 2020-02-27T23:51:44.000Z
 8 | modified: 2020-02-27T23:51:44.000Z
 9 | ---
10 | 
11 | ```ts
12 | const openFullscreen = (elem: HTMLElement): Promise<any> => {
13 |   if (elem.requestFullscreen) {
14 |     return elem.requestFullscreen()
15 |   } else if (elem.mozRequestFullscreen) {
16 |     /* Firefox */
17 |     return elem.mozRequestFullscreen()
18 |   } else if (elem.webkitRequestFullscreen) {
19 |     /* Chrome, Safari and Opera */
20 |     return elem.webkitRequestFullscreen()
21 |   } else if (elem.msRequestFullscreen) {
22 |     /* IE/Edge */
23 |     return elem.msRequestFullscreen()
24 |   }
25 | }
26 | 
27 | // Usage
28 | openFullscreen(element).catch((error) => {
29 |   Sentry.captureException(new Error(error))
30 |   Sentry.captureMessage(
31 |     `Error attempting to enable full-screen mode: ${error.message} (${error.name})`
32 |   )
33 | })
34 | ```
35 | 


--------------------------------------------------------------------------------
/notes/gatsby.md:
--------------------------------------------------------------------------------
  1 | ---
  2 | title: Gatsby
  3 | tags:
  4 |   - react
  5 |   - graphql
  6 | created: 2020-02-27T23:02:00.000Z
  7 | modified: 2021-01-19T13:43:19.000Z
  8 | ---
  9 | 
 10 | ## `gatsby-ssr.js`
 11 | 
 12 | > The APIs wrapPageElement and wrapRootElement exist in both the SSR and browser APIs. If you use one of them, consider if you should implement it in both `gatsby-ssr.js` and `gatsby-browser.js` so that pages generated through SSR with Node.js are the same after being hydrated with browser JavaScript.
 13 | 
 14 | ### `wrapRootElement`
 15 | 
 16 | This is where Providers would be setup, think Redux etc
 17 | 
 18 | ```jsx
 19 | // gatsby-browser.js
 20 | const React = require('react')
 21 | const { Provider } = require('react-redux')
 22 | 
 23 | const createStore = require('./src/state/createStore')
 24 | const store = createStore()
 25 | 
 26 | exports.wrapRootElement = ({ element }) => {
 27 |   return <Provider store={store}>{element}</Provider>
 28 | }
 29 | ```
 30 | 
 31 | More info [here](https://www.gatsbyjs.org/docs/browser-apis/#wrapRootElement)
 32 | 
 33 | https://www.gatsbyjs.com/docs/reference/config-files/gatsby-ssr
 34 | 
 35 | ### `onRenderBody`
 36 | 
 37 | ```js
 38 | export const onRenderBody = ({ setHeadComponents }) => {
 39 |   setHeadComponents([
 40 |     /**
 41 |      * Preload font assets and via SSR to prevent FLOUT (Flash of Unstyled Text)
 42 |      */
 43 |     <link
 44 |       key="Font-Preload--Venti-Bold"
 45 |       rel="preload"
 46 |       href="/fonts/stage-1/VentiCF-Bold--stage1.woff2"
 47 |       as="font"
 48 |       type="font/woff2"
 49 |       crossOrigin="anonymous"
 50 |     />,
 51 |   ])
 52 | }
 53 | ```
 54 | 
 55 | ## GraphQL
 56 | 
 57 | - [Gatsby GraphQL reference](https://www.gatsbyjs.org/docs/graphql-reference)
 58 | 
 59 | ### Group deeply nested fields together
 60 | 
 61 | ```js
 62 | import { graphql, useStaticQuery } from 'gatsby'
 63 | 
 64 | export const useAllTags = () => {
 65 |   const data = useStaticQuery(graphql`
 66 |     {
 67 |       allMdx {
 68 |         tags: group(field: frontmatter___tags) {
 69 |           tag: fieldValue
 70 |           totalCount
 71 |         }
 72 |       }
 73 |     }
 74 |   `)
 75 | 
 76 |   return data
 77 | }
 78 | ```
 79 | 
 80 | #### Output
 81 | 
 82 | ```json
 83 | {
 84 |   "data": {
 85 |     "allMdx": {
 86 |       "tags": [
 87 |         {
 88 |           "tag": "css",
 89 |           "totalCount": 4
 90 |         },
 91 |         {
 92 |           "tag": "devops",
 93 |           "totalCount": 1
 94 |         },
 95 |         {
 96 |           "tag": "git",
 97 |           "totalCount": 1
 98 |         },
 99 |         {
100 |           "tag": "graphql",
101 |           "totalCount": 1
102 |         }
103 |       ]
104 |     }
105 |   }
106 | }
107 | ```
108 | 
109 | ### Graphql untagged
110 | 
111 | Given `frontmatter` like this:
112 | 
113 | ```yml
114 | ---
115 | title: Gatsby
116 | tags:
117 |   - react
118 |   - graphql
119 | ---
120 | 
121 | ```
122 | 
123 | or this
124 | 
125 | ```yml
126 | ---
127 | title: Gatsby
128 | ---
129 | 
130 | ```
131 | 
132 | Then query for items that **don't** have tags set
133 | 
134 | ```graphql
135 | query MyQuery {
136 |   allMdx(filter: { frontmatter: { tags: { eq: null } } }) {
137 |     edges {
138 |       node {
139 |         id
140 |         frontmatter {
141 |           title
142 |           tags
143 |         }
144 |       }
145 |     }
146 |   }
147 | }
148 | ```
149 | 
150 | ## Misc
151 | 
152 | [SEO component](https://github.com/jlengstorf/gatsby-theme-jason-blog/blob/58e67d9e5c1691654185ebdffdc6f01ac7cbb791/src/components/SEO/SEO.js)
153 | 
154 | [Schema.org component](https://github.com/jlengstorf/gatsby-theme-jason-blog/blob/58e67d9e5c1691654185ebdffdc6f01ac7cbb791/src/components/SEO/SchemaOrg.js)
155 | 


--------------------------------------------------------------------------------
/notes/get-selected-text.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Get selected text
 3 | tags:
 4 |   - javascript
 5 | created: 2020-08-04T22:51:25.000Z
 6 | modified: 2020-08-04T22:51:25.000Z
 7 | ---
 8 | 
 9 | ```js
10 | document.onselectionchange = () => {
11 |   const text = document.getSelection().toString()
12 |   console.log(text)
13 | }
14 | ```
15 | 


--------------------------------------------------------------------------------
/notes/git-branching.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Git branching strategies
 3 | tags:
 4 |   - git
 5 | created: 2020-12-29T17:17:21.000Z
 6 | modified: 2020-12-29T17:17:21.000Z
 7 | ---
 8 | 
 9 | ## Different branching strategies
10 | 
11 | - [GitFlow](https://nvie.com/posts/a-successful-git-branching-model/)
12 | - [Please stop recommending Git Flow!](https://georgestocker.com/2020/03/04/please-stop-recommending-git-flow/)
13 | - [ThreeFlow](https://www.nomachetejuggling.com/2017/04/09/a-different-branching-strategy/)
14 | - [Trunk Based Development](https://trunkbaseddevelopment.com/)
15 | - [GitHub flow](http://scottchacon.com/2011/08/31/github-flow.html)
16 | - [Git DMZ](https://gist.github.com/djspiewak/9f2f91085607a4859a66)
17 | 
18 | ### GitHub flow
19 | 
20 | - Anything in the "main" branch is deployable
21 | - To work on something new, create a descriptively named branch off of `master`/`main` (ie: `new-oauth2-scopes`)
22 | - Commit to that branch locally and regularly push your work to the same named branch on the server
23 | - When you need feedback or help, or you think the branch is ready for merging, open a pull request
24 | - After someone else has reviewed and signed off on the feature, you can merge it into master
25 | - Once it is merged and pushed to ‘master’, you can and should deploy immediately
26 | 


--------------------------------------------------------------------------------
/notes/github-actions.md:
--------------------------------------------------------------------------------
  1 | ---
  2 | title: GitHub Actions
  3 | link: https://github.com/marketplace?type=actions
  4 | tags:
  5 |   - devops
  6 | created: 2021-03-03T12:25:27.000Z
  7 | modified: 2021-05-07T09:47:35.049Z
  8 | ---
  9 | 
 10 | Docs:
 11 | 
 12 | - https://docs.github.com/en/actions
 13 | - [Actions reference](https://docs.github.com/en/actions/reference/workflow-syntax-for-github-actions)
 14 | 
 15 | ## Example workflows
 16 | 
 17 | ### On push
 18 | 
 19 | ```yml
 20 | name: learn-github-actions
 21 | on: [push]
 22 | jobs:
 23 |   check-bats-version:
 24 |     runs-on: ubuntu-latest
 25 |     steps:
 26 |       - uses: actions/checkout@v2
 27 |       - uses: actions/setup-node@v1
 28 |       - run: npm install -g bats
 29 |       - run: bats -v
 30 | ```
 31 | 
 32 | ### PRs only
 33 | 
 34 | ```yml
 35 | name: Run on PR
 36 | 'on': pull_request
 37 | jobs:
 38 |   build_and_preview:
 39 |     runs-on: ubuntu-latest
 40 |     steps:
 41 |       - name: Checkout code
 42 |         uses: actions/checkout@v2
 43 |       - name: Get yarn cache directory path
 44 |         id: yarn-cache-dir-path
 45 |         run: echo "::set-output name=dir::$(yarn cache dir)"
 46 |       - uses: actions/cache@v2
 47 |         id: yarn-cache
 48 |         with:
 49 |           path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
 50 |           key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
 51 |           restore-keys: |
 52 |             ${{ runner.os }}-yarn-
 53 |       - name: Install dependencies
 54 |         run: yarn --prefer-offline
 55 |       - name: bundlephobia-checker
 56 |         # https://github.com/carlesnunez/check-my-bundlephobia
 57 |         uses: carlesnunez/check-my-bundlephobia@v1.8.0
 58 |         with:
 59 |           repo-token: ${{ secrets.GITHUB_TOKEN }}
 60 |           strict: true
 61 |           threshold: 800
 62 |           ignore-dev-dependencies: true
 63 |       - name: Lint
 64 |         run: yarn lint
 65 |       - name: Test
 66 |         run: yarn test
 67 |       - name: Build app
 68 |         run: yarn build
 69 | ```
 70 | 
 71 | ### On merge into `main` branch
 72 | 
 73 | ```yml
 74 | name: Run on merge
 75 | 'on':
 76 |   push:
 77 |     branches:
 78 |       - main
 79 | jobs:
 80 |   build_and_deploy:
 81 |     runs-on: ubuntu-latest
 82 |     steps:
 83 |       - name: Checkout code
 84 |         uses: actions/checkout@v2
 85 |       - name: Get yarn cache directory path
 86 |         id: yarn-cache-dir-path
 87 |         run: echo "::set-output name=dir::$(yarn cache dir)"
 88 |       - uses: actions/cache@v2
 89 |         id: yarn-cache
 90 |         with:
 91 |           path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
 92 |           key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
 93 |           restore-keys: |
 94 |             ${{ runner.os }}-yarn-
 95 |       - name: Install dependencies
 96 |         run: yarn --prefer-offline
 97 |       - name: Lint
 98 |         run: yarn lint
 99 |       - name: Test
100 |         run: yarn test
101 |       - name: Build app
102 |         run: yarn build
103 |       - name: Build Storybook
104 |         run: yarn storybook:build
105 | ```
106 | 
107 | ## [Enable debug logging](https://docs.github.com/en/actions/managing-workflow-runs/enabling-debug-logging)
108 | 
109 | Set either/both in your repo's secrets:
110 | 
111 | - `ACTIONS_STEP_DEBUG=true`
112 | - `ACTIONS_RUNNER_DEBUG=true`
113 | 


--------------------------------------------------------------------------------
/notes/google-fonts.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Fastest Google Fonts
 3 | tags:
 4 |   - html
 5 |   - css
 6 | link: 'https://csswizardry.com/2020/05/the-fastest-google-fonts/'
 7 | created: 2020-05-20T09:40:27.000Z
 8 | modified: 2020-05-20T09:40:27.000Z
 9 | ---
10 | 
11 | ```html
12 | <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
13 | 
14 | <link
15 |   rel="preload"
16 |   as="style"
17 |   href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,700;1,400;1,700&display=swap"
18 | />
19 | 
20 | <link
21 |   rel="stylesheet"
22 |   href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,700;1,400;1,700&display=swap"
23 |   media="print"
24 |   onload="this.media='all'"
25 | />
26 | ```
27 | 
28 | This makes use of Filament Group's [async CSS loading method](/async-load-css).
29 | 


--------------------------------------------------------------------------------
/notes/gsap.md:
--------------------------------------------------------------------------------
  1 | ---
  2 | title: GSAP
  3 | tags:
  4 |   - animation
  5 |   - react
  6 |   - javascript
  7 | link: 'https://greensock.com/docs/v3/GSAP'
  8 | created: 2020-12-01T10:18:03.000Z
  9 | modified: 2020-12-02T00:34:34.000Z
 10 | ---
 11 | 
 12 | ## GSAP
 13 | 
 14 | - Docs: https://greensock.com/docs/v3/GSAP
 15 | - Cheatsheet: https://greensock.com/cheatsheet/
 16 | 
 17 | ## Eases
 18 | 
 19 | https://greensock.com/docs/v3/Eases
 20 | 
 21 | ## ScrollTrigger
 22 | 
 23 | - Docs: https://greensock.com/docs/v3/Plugins/ScrollTrigger
 24 | - Demos: https://greensock.com/st-demos/
 25 | 
 26 | ```js
 27 | import gsap from 'gsap'
 28 | import { ScrollTrigger } from 'gsap/ScrollTrigger'
 29 | gsap.registerPlugin(ScrollTrigger)
 30 | ```
 31 | 
 32 | ### With React
 33 | 
 34 | ```tsx
 35 | const wrapperRef = useRef<HTMLDivElement>(null)
 36 | const oneRef = useRef<HTMLDivElement>(null)
 37 | const twoRef = useRef<HTMLDivElement>(null)
 38 | 
 39 | useEffect(() => {
 40 |   if (!oneRef.current && !twoRef.current) {
 41 |     const scrollConfig = {
 42 |       trigger: wrapperRef.current,
 43 |       start: 'top center',
 44 |       end: 'bottom center',
 45 |     }
 46 | 
 47 |     oneRef.current = ScrollTrigger.create({
 48 |       ...scrollConfig,
 49 |       onEnter: (self) => {
 50 |         // self.isActive
 51 |       },
 52 |       onLeaveBack: (self) => {
 53 |         // self.isActive
 54 |       },
 55 |       invalidateOnRefresh: false,
 56 |     })
 57 | 
 58 |     // Line
 59 |     twoRef.current = gsap.to(lineRef.current, {
 60 |       height: wrapperRef.current.scrollHeight,
 61 |       ease: 'sine.inOut',
 62 |       scrollTrigger: {
 63 |         ...scrollConfig,
 64 |         scrub: true,
 65 |       },
 66 |     })
 67 |   }
 68 |   return () => {
 69 |     // Cleanup scroll listeners
 70 |     ScrollTrigger.getAll().forEach((instance) => {
 71 |       instance.kill()
 72 |     })
 73 |     gsap.killTweensOf(window)
 74 |   }
 75 | }, [])
 76 | ```
 77 | 
 78 | #### Cleanup scroll listeners
 79 | 
 80 | Make sure you cleanup your scroll trigger listeners when your component unmounts.
 81 | 
 82 | ```jsx
 83 | // Very simple example
 84 | useEffect(() => {
 85 |   return () => {
 86 |     ScrollTrigger.getAll().forEach((instance) => {
 87 |       instance.kill()
 88 |     })
 89 |     gsap.killTweensOf(window)
 90 |   }
 91 | }, [])
 92 | ```
 93 | 
 94 | ## ScrollTo
 95 | 
 96 | - Docs: https://greensock.com/docs/v3/Plugins/ScrollToPlugin
 97 | - Demos: https://greensock.com/st-demos/
 98 | 
 99 | ```js
100 | import gsap from 'gsap'
101 | import { ScrollToPlugin } from 'gsap/ScrollToPlugin'
102 | gsap.registerPlugin(ScrollToPlugin)
103 | ```
104 | 
105 | ## Useful links:
106 | 
107 | - https://css-tricks.com/writing-smarter-animation-code/
108 | - https://css-tricks.com/tips-for-writing-animation-code-efficiently/
109 | 


--------------------------------------------------------------------------------
/notes/hexadecimal-transparency.md:
--------------------------------------------------------------------------------
  1 | ---
  2 | title: Hexadecimal color code for transparency
  3 | tags:
  4 |   - css
  5 | created: 2020-09-29T16:13:44.000Z
  6 | modified: 2020-09-29T16:13:44.000Z
  7 | ---
  8 | 
  9 | ### How to set transparency with hex value?
 10 | 
 11 | For example, you want to set **40%** alpha transparence to `#000000` (black color), you need to add `66` like this `#00000066`.
 12 | 
 13 | ### All hex value from 100% to 0% alpha:
 14 | 
 15 | - **100% — FF**
 16 | - 99% — FC
 17 | - 98% — FA
 18 | - 97% — F7
 19 | - 96% — F5
 20 | - 95% — F2
 21 | - 94% — F0
 22 | - 93% — ED
 23 | - 92% — EB
 24 | - 91% — E8
 25 | - **90% — E6**
 26 | - 89% — E3
 27 | - 88% — E0
 28 | - 87% — DE
 29 | - 86% — DB
 30 | - 85% — D9
 31 | - 84% — D6
 32 | - 83% — D4
 33 | - 82% — D1
 34 | - 81% — CF
 35 | - **80% — CC**
 36 | - 79% — C9
 37 | - 78% — C7
 38 | - 77% — C4
 39 | - 76% — C2
 40 | - **75% — BF**
 41 | - 74% — BD
 42 | - 73% — BA
 43 | - 72% — B8
 44 | - 71% — B5
 45 | - **70% — B3**
 46 | - 69% — B0
 47 | - 68% — AD
 48 | - 67% — AB
 49 | - 66% — A8
 50 | - 65% — A6
 51 | - 64% — A3
 52 | - 63% — A1
 53 | - 62% — 9E
 54 | - 61% — 9C
 55 | - **60% — 99**
 56 | - 59% — 96
 57 | - 58% — 94
 58 | - 57% — 91
 59 | - 56% — 8F
 60 | - 55% — 8C
 61 | - 54% — 8A
 62 | - 53% — 87
 63 | - 52% — 85
 64 | - 51% — 82
 65 | - **50% — 80**
 66 | - 49% — 7D
 67 | - 48% — 7A
 68 | - 47% — 78
 69 | - 46% — 75
 70 | - 45% — 73
 71 | - 44% — 70
 72 | - 43% — 6E
 73 | - 42% — 6B
 74 | - 41% — 69
 75 | - **40% — 66**
 76 | - 39% — 63
 77 | - 38% — 61
 78 | - 37% — 5E
 79 | - 36% — 5C
 80 | - 35% — 59
 81 | - 34% — 57
 82 | - 33% — 54
 83 | - 32% — 52
 84 | - 31% — 4F
 85 | - **30% — 4D**
 86 | - 29% — 4A
 87 | - 28% — 47
 88 | - 27% — 45
 89 | - 26% — 42
 90 | - **25% — 40**
 91 | - 24% — 3D
 92 | - 23% — 3B
 93 | - 22% — 38
 94 | - 21% — 36
 95 | - **20% — 33**
 96 | - 19% — 30
 97 | - 18% — 2E
 98 | - 17% — 2B
 99 | - 16% — 29
100 | - 15% — 26
101 | - 14% — 24
102 | - 13% — 21
103 | - 12% — 1F
104 | - 11% — 1C
105 | - **10% — 1A**
106 | - 9% — 17
107 | - 8% — 14
108 | - 7% — 12
109 | - 6% — 0F
110 | - 5% — 0D
111 | - 4% — 0A
112 | - 3% — 08
113 | - 2% — 05
114 | - 1% — 03
115 | - **0% — 00**
116 | 


--------------------------------------------------------------------------------
/notes/http-methods.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: HTTP Methods
 3 | tags:
 4 |   - networking
 5 | link: 'https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods'
 6 | created: 2020-08-12T13:30:25.000Z
 7 | modified: 2020-08-12T13:30:25.000Z
 8 | ---
 9 | 
10 | `HTTP` defines a set of request methods to indicate the desired action to be performed for a given resource. Although they can also be nouns, these request methods are sometimes referred to as `HTTP` verbs. Each of them implements a different semantic, but some common features are shared by a group of them: e.g. a request method can be safe, idempotent, or cacheable.
11 | 
12 | ## GET
13 | 
14 | The `GET` method requests a representation of the specified resource. Requests using `GET` should only retrieve data.
15 | 
16 | ## HEAD
17 | 
18 | The `HEAD` method asks for a response identical to that of a `GET` request, but without the response body.
19 | 
20 | ## POST
21 | 
22 | The `POST` method is used to submit an entity to the specified resource, often causing a change in state or side effects on the server.
23 | 
24 | ## PUT
25 | 
26 | The `PUT` method replaces all current representations of the target resource with the request payload.
27 | 
28 | ## DELETE
29 | 
30 | The `DELETE` method deletes the specified resource.
31 | 
32 | ## CONNECT
33 | 
34 | The `CONNECT` method establishes a tunnel to the server identified by the target resource.
35 | 
36 | ## OPTIONS
37 | 
38 | The `OPTIONS` method is used to describe the communication options for the target resource.
39 | 
40 | ## TRACE
41 | 
42 | The `TRACE` method performs a message loop-back test along the path to the target resource.
43 | 
44 | ## PATCH
45 | 
46 | The `PATCH` method is used to apply partial modifications to a resource.
47 | 


--------------------------------------------------------------------------------
/notes/ignoring-code.md:
--------------------------------------------------------------------------------
  1 | ---
  2 | title: Ignoring code
  3 | tags:
  4 |   - css
  5 |   - html
  6 |   - javascript
  7 |   - typescript
  8 | emoji: 🙅‍♀️
  9 | created: 2020-02-27T23:02:00.000Z
 10 | modified: 2020-09-21T08:22:36.000Z
 11 | ---
 12 | 
 13 | ## ESlint
 14 | 
 15 | [https://eslint.org/docs/user-guide/configuring#disabling-rules-with-inline-comments](https://eslint.org/docs/user-guide/configuring#disabling-rules-with-inline-comments)
 16 | 
 17 | ```js
 18 | /* eslint-disable */
 19 | alert('foo')
 20 | /* eslint-enable */
 21 | 
 22 | /* eslint-disable no-alert, no-console */
 23 | alert('foo')
 24 | console.log('bar')
 25 | /* eslint-enable no-alert, no-console */
 26 | 
 27 | alert('foo') // eslint-disable-line
 28 | 
 29 | alert('foo') // eslint-disable-line no-alert
 30 | ```
 31 | 
 32 | ## Prettier
 33 | 
 34 | [https://prettier.io/docs/en/ignore.html](https://prettier.io/docs/en/ignore.html)
 35 | 
 36 | ### JavaScript
 37 | 
 38 | A JavaScript comment of `// prettier-ignore` will exclude the next node in the abstract syntax tree from formatting.
 39 | 
 40 | ```js
 41 | // prettier-ignore
 42 | matrix(
 43 |     1, 0, 0,
 44 |     0, 1, 0,
 45 |     0, 0, 1
 46 | )
 47 | ```
 48 | 
 49 | ### HTML
 50 | 
 51 | ```html
 52 | <!-- prettier-ignore -->
 53 | <div         class="x"       >hello world</div            >
 54 | 
 55 | <!-- prettier-ignore-attribute -->
 56 | <div
 57 |   (mousedown)="       onStart    (    )         "
 58 |   (mouseup)="         onEnd      (    )         "
 59 | ></div>
 60 | 
 61 | <!-- prettier-ignore-attribute (mouseup) -->
 62 | <div
 63 |   (mousedown)="onStart()"
 64 |   (mouseup)="         onEnd      (    )         "
 65 | ></div>
 66 | ```
 67 | 
 68 | ### JSX
 69 | 
 70 | ```jsx
 71 | <div>
 72 |   {/* prettier-ignore */}
 73 |   <span     ugly  format=''   />
 74 | </div>
 75 | ```
 76 | 
 77 | ### CSS
 78 | 
 79 | ```css
 80 | /* prettier-ignore */
 81 | .my    ugly rule
 82 | {
 83 | 
 84 | }
 85 | ```
 86 | 
 87 | ### Markdown
 88 | 
 89 | ```md
 90 | <!-- prettier-ignore -->
 91 | Do   not    format   this
 92 | ```
 93 | 
 94 | This type of ignore is only allowed to be used in top-level and aimed to disable formatting for auto-generated content, e.g. all-contributors, markdown-toc, etc.
 95 | 
 96 | ```md
 97 | <!-- prettier-ignore-start -->
 98 | <!-- SOMETHING AUTO-GENERATED BY TOOLS - START -->
 99 | 
100 | | MY | AWESOME | AUTO-GENERATED | TABLE |
101 | |-|-|-|-|
102 | | a | b | c | d |
103 | 
104 | <!-- SOMETHING AUTO-GENERATED BY TOOLS - END -->
105 | <!-- prettier-ignore-end -->
106 | ```
107 | 
108 | ### YAML
109 | 
110 | ```yml
111 | # prettier-ignore
112 | key  : value
113 | hello: world
114 | ```
115 | 
116 | ### GraphQL
117 | 
118 | ```gql
119 | {
120 |   # prettier-ignore
121 |   addReaction(input:{superLongInputFieldName:"MDU6SXNzdWUyMzEzOTE1NTE=",content:HOORAY}) {
122 |     reaction {content}
123 |   }
124 | }
125 | ```
126 | 
127 | ## TypeScript
128 | 
129 | ```ts
130 | // @ts-ignore
131 | ```
132 | 
133 | ### TSLint
134 | 
135 | ```ts
136 | /* tslint:disable no-console */
137 | console.log()
138 | /* tslint:disable no-console */
139 | 
140 | /* tslint:disable */
141 | /* tslint:enable */
142 | 
143 | /* tslint:disable:rule */
144 | /* tslint:enable:rule */
145 | 
146 | /* tslint:disable-next-line */
147 | /* tslint:disable-line */
148 | /* tslint:disable-next-line:rule */
149 | ```
150 | 
151 | ## Stylelint
152 | 
153 | ```js
154 | /* stylelint-disable */
155 | const Container = styled.div``
156 | /* stylelint-enable */
157 | ```
158 | 


--------------------------------------------------------------------------------
/notes/immer.md:
--------------------------------------------------------------------------------
  1 | ---
  2 | title: Immer
  3 | tags:
  4 |   - react
  5 | created: 2020-12-01T10:18:03.000Z
  6 | modified: 2020-12-01T10:18:03.000Z
  7 | ---
  8 | 
  9 | ## Basic example
 10 | 
 11 | TBC
 12 | 
 13 | ## useImmer
 14 | 
 15 | TBC
 16 | 
 17 | ## Update patterns
 18 | 
 19 | https://immerjs.github.io/immer/docs/update-patterns
 20 | 
 21 | ### Object mutations
 22 | 
 23 | ```js
 24 | import produce from 'immer'
 25 | 
 26 | const todosObj = {
 27 |   id1: { done: false, body: 'Take out the trash' },
 28 |   id2: { done: false, body: 'Check Email' },
 29 | }
 30 | 
 31 | // add
 32 | const addedTodosObj = produce(todosObj, (draft) => {
 33 |   draft['id3'] = { done: false, body: 'Buy bananas' }
 34 | })
 35 | 
 36 | // delete
 37 | const deletedTodosObj = produce(todosObj, (draft) => {
 38 |   delete draft['id1']
 39 | })
 40 | 
 41 | // update
 42 | const updatedTodosObj = produce(todosObj, (draft) => {
 43 |   draft['id1'].done = true
 44 | })
 45 | ```
 46 | 
 47 | ### Array mutations
 48 | 
 49 | ```js
 50 | import produce from 'immer'
 51 | 
 52 | const todosArray = [
 53 |   { id: 'id1', done: false, body: 'Take out the trash' },
 54 |   { id: 'id2', done: false, body: 'Check Email' },
 55 | ]
 56 | 
 57 | // add
 58 | const addedTodosArray = produce(todosArray, (draft) => {
 59 |   draft.push({ id: 'id3', done: false, body: 'Buy bananas' })
 60 | })
 61 | 
 62 | // delete by index
 63 | const deletedTodosArray = produce(todosArray, (draft) => {
 64 |   draft.splice(3 /*the index */, 1)
 65 | })
 66 | 
 67 | // update by index
 68 | const updatedTodosArray = produce(todosArray, (draft) => {
 69 |   draft[3].done = true
 70 | })
 71 | 
 72 | // insert at index
 73 | const updatedTodosArray = produce(todosArray, (draft) => {
 74 |   draft.splice(3, 0, { id: 'id3', done: false, body: 'Buy bananas' })
 75 | })
 76 | 
 77 | // remove last item
 78 | const updatedTodosArray = produce(todosArray, (draft) => {
 79 |   draft.pop()
 80 | })
 81 | 
 82 | // remove first item
 83 | const updatedTodosArray = produce(todosArray, (draft) => {
 84 |   draft.shift()
 85 | })
 86 | 
 87 | // add item at the beginning of the array
 88 | const addedTodosArray = produce(todosArray, (draft) => {
 89 |   draft.unshift({ id: 'id3', done: false, body: 'Buy bananas' })
 90 | })
 91 | 
 92 | // delete by id
 93 | const deletedTodosArray = produce(todosArray, (draft) => {
 94 |   const index = draft.findIndex((todo) => todo.id === 'id1')
 95 |   if (index !== -1) draft.splice(index, 1)
 96 | })
 97 | 
 98 | // update by id
 99 | const updatedTodosArray = produce(todosArray, (draft) => {
100 |   const index = draft.findIndex((todo) => todo.id === 'id1')
101 |   if (index !== -1) draft[index].done = true
102 | })
103 | 
104 | // filtering items
105 | const updatedTodosArray = produce(todosArray, (draft) => {
106 |   // creating a new state is simpler in this example
107 |   // (note that we don't need produce in this case,
108 |   // but as shown below, if the filter is not on the top
109 |   // level produce is still pretty useful)
110 |   return draft.filter((todo) => todo.done)
111 | })
112 | ```
113 | 
114 | ### Nested data structures
115 | 
116 | ```js
117 | import produce from 'immer'
118 | 
119 | // example complex data structure
120 | const store = {
121 |   users: new Map([
122 |     [
123 |       '17',
124 |       {
125 |         name: 'Michel',
126 |         todos: [
127 |           {
128 |             title: 'Get coffee',
129 |             done: false,
130 |           },
131 |         ],
132 |       },
133 |     ],
134 |   ]),
135 | }
136 | 
137 | // updating something deeply in-an-object-in-an-array-in-a-map-in-an-object:
138 | const nextStore = produce(store, (draft) => {
139 |   draft.users.get('17').todos[0].done = true
140 | })
141 | 
142 | // filtering out all unfinished todo's
143 | const nextStore = produce(store, (draft) => {
144 |   const user = draft.users.get('17')
145 |   // when filtering, creating a fresh collection is simpler than
146 |   // removing irrelvant items
147 |   user.todos = user.todos.filter((todo) => todo.done)
148 | })
149 | ```
150 | 


--------------------------------------------------------------------------------
/notes/inflect.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Pluralisation with inflect()
 3 | tags:
 4 |   - javascript
 5 | created: 2022-11-11T13:25:54.000Z
 6 | modified: 2022-11-11T13:25:54.000Z
 7 | link: https://kyleshevlin.com/snippets/inflect
 8 | ---
 9 | 
10 | Often nouns need slight changes depending on the quantity of that noun. Example: One person, several people. I call these differences "inflections". The `inflect` function below is a little helper function I use to help me apply inflections in my application.
11 | 
12 | ```ts
13 | const inflect = (singular: string, plural = `${singular}s`) => {
14 |   return (quantity): string => {
15 |     Math.abs(quantity) === 1 ? singular : plural
16 |   }
17 | }
18 | ```
19 | 
20 | inflect is a higher order function, meaning it's a function that returns a function. If you need some info on higher order functions, check out my post on them and the post on currying.
21 | 
22 | This solution makes use of default parameters for the `plural` argument. If adding an "s" is all you need to make a plural, then you don't need to provide it. Like this
23 | 
24 | ```ts
25 | // If you use this a lot, you can export this particular inflection
26 | const inflectPost = inflect('post')
27 | 
28 | console.log(inflectPost(1)) // 'post'
29 | console.log(inflectPost(2)) // 'posts'
30 | ```
31 | 
32 | But often plurals have oddities (like "person" and "people"), so you can supply a plural argument when you need it.
33 | 
34 | ```ts
35 | const inflectMouse = inflect('mouse', 'mice')
36 | const inflectKnife = inflect('knife', 'knives')
37 | ```
38 | 
39 | Now, as helpful as this is, it is not a proper solution should you need internationalization. Treat this is a helper function for those instances this can support.
40 | 


--------------------------------------------------------------------------------
/notes/intersection-observer.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: IntersectionObserver
 3 | tags:
 4 |   - javascript
 5 | emoji: 🚸
 6 | created: 2020-02-27T23:02:00.000Z
 7 | modified: 2020-11-04T17:01:50.000Z
 8 | ---
 9 | 
10 | ```js
11 | const handleIntersectionChange = (changes, observer) => {
12 |   changes.forEach((change) => {
13 |     console.log('entry', entry)
14 |     // Each entry describes an intersection change for one observed
15 |     // target element:
16 |     //   entry.boundingClientRect
17 |     //   entry.intersectionRatio
18 |     //   entry.intersectionRect
19 |     //   entry.isIntersecting
20 |     //   entry.rootBounds
21 |     //   entry.target
22 |     //   entry.time
23 |     if (entry.intersectionRatio > 0.8) {
24 |       // do something
25 |     } else {
26 |       // do something else
27 |     }
28 |   })
29 | }
30 | var observer = new IntersectionObserver(handleIntersectionChange, {
31 |   root: document.querySelector('body'),
32 |   rootMargin: '0px',
33 |   threshold: [0.0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1.0],
34 | })
35 | 
36 | observer.observe(document.querySelector('.element'))
37 | ```
38 | 
39 | https://css-tricks.com/using-intersectionobserver-to-check-if-page-scrolled-past-certain-point/
40 | 
41 | ## With React
42 | 
43 | ```tsx
44 | import React, { FC, useEffect } from 'react'
45 | 
46 | export const StickyBannerLayout: FC = ({ children }) => {
47 |   useEffect(() => {
48 |     if ('IntersectionObserver' in window) {
49 |       const config = {
50 |         root: null,
51 |         rootMargin: '0px',
52 |         threshold: 0.5,
53 |       }
54 | 
55 |       const handleIntersectionChange = (changes) => {
56 |         changes.forEach((change) => {
57 |           if (change.isIntersecting) {
58 |             // do something
59 |           } else {
60 |             // do something else
61 |           }
62 |         })
63 |       }
64 | 
65 |       const observer = new IntersectionObserver(
66 |         handleIntersectionChange,
67 |         config
68 |       )
69 |       observer.observe(document.querySelector('.element'))
70 |     }
71 |   }, [])
72 | 
73 |   return <div>{children}</div>
74 | }
75 | ```
76 | 


--------------------------------------------------------------------------------
/notes/ios-safari-height-bug.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: iOS Safari bug
 3 | tags:
 4 |   - css
 5 | link: 'https://github.com/postcss/postcss-100vh-fix'
 6 | created: 2020-09-13T18:44:16.000Z
 7 | modified: 2020-09-13T18:44:16.000Z
 8 | ---
 9 | 
10 | This solves the popular problem when 100vh doesn’t fit the mobile browser screen.
11 | 
12 | ```css
13 | body {
14 |   height: 100vh;
15 |   // or
16 |   min-height: 100vh;
17 | }
18 | 
19 | @supports (-webkit-touch-callout: none) {
20 |   body {
21 |     height: -webkit-fill-available;
22 |   }
23 | }
24 | ```
25 | 
26 | ![](https://camo.githubusercontent.com/3b73212cf082c81ce5e2369aa1b7d37ae47941f1/68747470733a2f2f6d6178696d696c69616e7363686d6974742e6d652f706f7374732f6373732d31303076682d6d6f62696c652d62726f77736572732f6c6c642d6d696e696d616c2d76732d6e6f726d616c2d75694032782e706e67)
27 | 


--------------------------------------------------------------------------------
/notes/is-mobile-check.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: is-mobile check
 3 | tags:
 4 |   - javascript
 5 | emoji: 📱
 6 | created: 2020-03-22T14:53:49.000Z
 7 | modified: 2020-05-11T11:47:16.000Z
 8 | ---
 9 | 
10 | ```js
11 | const parser = require('ua-parser-js')
12 | 
13 | function isUserAgentSignallingMobile(userAgentString) {
14 |   const ua = parser(userAgentString)
15 |   return ua.device.type === 'mobile'
16 | }
17 | ```
18 | 
19 | Repo: https://github.com/faisalman/ua-parser-js
20 | 


--------------------------------------------------------------------------------
/notes/jest-mocks.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Jest global mocks
 3 | tags:
 4 |   - javascript
 5 |   - testing
 6 | emoji: 🧪
 7 | created: 2020-02-27T23:02:00.000Z
 8 | modified: 2020-03-26T23:06:06.000Z
 9 | ---
10 | 
11 | ## Some useful mocks
12 | 
13 | ```js
14 | /**
15 |  * Mocks that could be used by any jest test
16 |  * Just add them here and they will automatically be used
17 |  */
18 | 
19 | /**
20 |  * Contract + integration tests will use node env, not jsdom;
21 |  * window doesn't exist in node and will make jest fail.
22 |  * Put any mocks referencing 'window' in this 'if' block.
23 |  */
24 | if (typeof window != 'undefined') {
25 |   window.matchMedia = jest.fn().mockImplementation(query => {
26 |     return {
27 |       matches: false,
28 |       media: query,
29 |       onchange: null,
30 |       addListener: jest.fn(),
31 |       removeListener: jest.fn()
32 |     }
33 |   })
34 | }
35 | 
36 | jest.mock('next/link', () => {
37 |   return ({ children }) => {
38 |     return children
39 |   }
40 | })
41 | 
42 | jest.mock('next/router', () => {
43 |   return {
44 |     push: () => {},
45 |     replace: () => {},
46 |     prefetch: () => {}
47 |   }
48 | })
49 | 
50 | jest.mock('../utils/getConfig')
51 | 
52 | // Mock the publicRuntimeConfig
53 | import config from 'config'
54 | const mockPublicConfigData = {
55 |   env: config.get('env'),
56 |   base: config.get('base'),
57 |   client: config.get('client')
58 | }
59 | 
60 | jest.mock('next/config', () => () => ({
61 |   publicRuntimeConfig: mockPublicConfigData
62 | }))
63 | 
64 | global.MutationObserver = class {
65 |   constructor(callback) {}
66 |   disconnect() {}
67 |   observe(element, initObject) {}
68 | }
69 | ```
70 | 


--------------------------------------------------------------------------------
/notes/jest.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Jest
 3 | tags:
 4 |   - javascript
 5 |   - react
 6 |   - testing
 7 | emoji: 🧪
 8 | created: 2020-02-27T23:02:00.000Z
 9 | modified: 2022-06-10T10:38:49Z
10 | ---
11 | 
12 | ## Basic test skeleton
13 | 
14 | ```js
15 | describe('Given a xxx', () => {
16 |   describe('when it is rendered', () => {
17 |     test('it should ', () => {
18 |       // Arrange
19 | 
20 |       // Act
21 | 
22 |       // Assert
23 |       expect(true).toBe(true)
24 |     })
25 |   })
26 | })
27 | ```
28 | 
29 | ### Use Jest globals
30 | 
31 | ```js
32 | import { expect, test } from '@jest/globals'
33 | 
34 | test('two plus two is four', () => {
35 |   expect(2 + 2).toBe(4)
36 | })
37 | ```
38 | 
39 | ### Throw
40 | 
41 | ```js
42 | import { formatDate } from './formatDate'
43 | 
44 | test('it should throw', () => {
45 |   expect(() => formatDate('197901180')).toThrow(
46 |     'Date string wrong format/length',
47 |   )
48 |   expect(() => formatDate('abcdefgh')).toThrow(
49 |     'Date string must be only digits',
50 |   )
51 | })
52 | ```
53 | 


--------------------------------------------------------------------------------
/notes/js-body-class.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: JS body class
 3 | tags:
 4 |   - javascript
 5 | emoji: 🤷‍♂️
 6 | created: 2020-03-22T14:53:49.000Z
 7 | modified: 2020-05-07T11:04:41.000Z
 8 | ---
 9 | 
10 | ### Best
11 | 
12 | ```js
13 | window.document.documentElement.className =
14 |   window.document.documentElement.className.replace(/\bno-js\b/g, '') + ' js '
15 | ;(function (H) {
16 |   H.className = H.className.replace(/\bno-js\b/, 'js')
17 | })(document.documentElement)
18 | ```
19 | 
20 | ### Add to `<html>`
21 | 
22 | ```html
23 | <script>
24 |   document.body.parentElement.className = document.body.parentElement.className.replace(
25 |     'no-js',
26 |     'js'
27 |   )
28 | </script>
29 | ```
30 | 
31 | ### Add to `<body>`
32 | 
33 | ```html
34 | <script type="text/javascript">
35 |   document.body.className = document.body.className
36 |     ? document.body.className + ' js'
37 |     : 'no-js'
38 | </script>
39 | ```
40 | 


--------------------------------------------------------------------------------
/notes/js-classes.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Classes
 3 | emoji: 🕺
 4 | tags:
 5 |   - javascript
 6 | created: 2020-02-27T23:02:00.000Z
 7 | modified: 2020-04-11T06:27:27.000Z
 8 | ---
 9 | 
10 | ```js
11 | class Parent {
12 |   constructor(options) {
13 |     this.title = options.title
14 |     this.desc = options.desc
15 |   }
16 | 
17 |   getMetadata() {
18 |     return {
19 |       title: this.title,
20 |       desc: this.desc,
21 |     }
22 |   }
23 | }
24 | 
25 | class Child extends Parent {
26 |   constructor(parentOptions, childOptions) {
27 |     super(parentOptions, childOptions)
28 |     this.data = childOptions
29 |   }
30 | 
31 |   getInfo() {
32 |     return `${this.title} + ${this.desc} + ${JSON.stringify(this.data)}`
33 |   }
34 | 
35 |   render() {}
36 | }
37 | 
38 | const Bamber = new Child(
39 |   {
40 |     title: 'Bamber',
41 |     desc: 'baby',
42 |   },
43 |   {
44 |     foo: 'bar',
45 |   }
46 | )
47 | 
48 | console.log(JSON.stringify(Bamber.getMetadata()))
49 | ```
50 | 


--------------------------------------------------------------------------------
/notes/keycode.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Keycode
 3 | tags:
 4 |   - javascript
 5 | emoji: 🔑
 6 | link: 'https://omatsuri.app/events-keycode'
 7 | created: 2020-03-22T14:53:49.000Z
 8 | modified: 2020-09-06T07:57:42.000Z
 9 | ---
10 | 
11 | ```js
12 | document.addEventListener('keydown', (event) => {
13 |   if (event.isComposing || event.keyCode === 229) {
14 |     return
15 |   }
16 |   // do something
17 | })
18 | ```
19 | 
20 | Alt link: http://keycode.info/
21 | 


--------------------------------------------------------------------------------
/notes/lobotomised-owl-selector.mdx:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: The “Lobotomised Owl” Selector
 3 | tags:
 4 |   - css
 5 | emoji: 🦉
 6 | created: 2020-12-29T10:31:32.000Z
 7 | modified: 2020-12-29T17:10:23.000Z
 8 | ---
 9 | 
10 | It may have a strange name but using the universal selector (`*`) with the adjacent sibling selector (`+`) can provide a powerful CSS capability:
11 | 
12 | ```css
13 | * + * {
14 |   margin-top: 1.5em;
15 | }
16 | ```
17 | 
18 | In this example, all elements in the flow of the document that follow other elements will receive `margin-top: 1.5em`.
19 | 
20 | For more on the "lobotomised owl" selector, read [Heydon Pickering's post](http://alistapart.com/article/axiomatic-css-and-lobotomized-owls) on _A List Apart_.
21 | 
22 | #### [Demo](http://codepen.io/AllThingsSmitty/pen/grRvWq)
23 | 
24 | ## Flow space utility
25 | 
26 | The flow utility provides flow and rhythm between direct sibling elements. Where `--flow-space` is not defined: the default value is `1em`, which equals the font size of the affected element.
27 | 
28 | ```css
29 | .flow > * + * {
30 |   margin-top: var(--flow-space, 1em);
31 | }
32 | ```
33 | 
34 | By defining `--flow-space` in the CSS of either a child element of `.flow`, or on `.flow` itself: that value will be honoured in line with the cascade and specificity.
35 | 
36 | For example: if you set `--flow-space: 3rem` on the third element inside of a `.flow` container: only that element will have a 3rem top margin.
37 | 
38 | <iframe
39 |   height="265"
40 |   style="width: 100%;"
41 |   scrolling="no"
42 |   title="Flow utility"
43 |   src="https://codepen.io/andybelldesign/embed/OJXEWyO?height=265&theme-id=light&default-tab=css,result"
44 |   frameborder="no"
45 |   loading="lazy"
46 |   allowtransparency="true"
47 |   allowfullscreen="true"
48 | >
49 |   See the Pen{' '}
50 |   <a href="https://codepen.io/andybelldesign/pen/OJXEWyO">Flow utility</a> by
51 |   Andy Bell (<a href="https://codepen.io/andybelldesign">@andybelldesign</a>) on{' '}
52 |   <a href="https://codepen.io">CodePen</a>.
53 | </iframe>
54 | 


--------------------------------------------------------------------------------
/notes/long-words-links.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: 'Handling Long Words and URLs (Forcing Breaks, Hyphenation, Ellipsis, etc)'
 3 | tags:
 4 |   - css
 5 | link: >-
 6 |   https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container
 7 | created: 2020-04-11T06:27:27.000Z
 8 | modified: 2020-05-11T11:47:16.000Z
 9 | ---
10 | 
11 | ```css
12 | .dont-break-out {
13 |   /* These are technically the same, but use both */
14 |   overflow-wrap: break-word;
15 |   word-wrap: break-word;
16 | 
17 |   -ms-word-break: break-all;
18 |   /* This is the dangerous one in WebKit, as it breaks things wherever */
19 |   word-break: break-all;
20 |   /* Instead use this non-standard one: */
21 |   word-break: break-word;
22 | 
23 |   /* Adds a hyphen where the word breaks, if supported (No Blink) */
24 |   -ms-hyphens: auto;
25 |   -moz-hyphens: auto;
26 |   -webkit-hyphens: auto;
27 |   hyphens: auto;
28 | }
29 | ```
30 | 
31 | ### Preventing Overflow with Ellipsis
32 | 
33 | Another approach to consider is truncating the text altogether and adding ellipses where the string of text hits the container:
34 | 
35 | ```css
36 | .ellipses {
37 |   overflow: hidden;
38 |   white-space: nowrap;
39 |   text-overflow: ellipsis;
40 | }
41 | ```
42 | 


--------------------------------------------------------------------------------
/notes/mac-dark-mode.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Disable dark mode for Mac apps
 3 | created: 2020-12-03T21:51:12.000Z
 4 | modified: 2020-12-05T08:04:29.000Z
 5 | ---
 6 | 
 7 | First, get the bundle identifier for the app that you want to turn off dark mode.
 8 | 
 9 | ```sh
10 | osascript -e 'id of app "{app name}"'
11 | 
12 | # e.g.
13 | osascript -e 'id of app "Dash"' # com.kapeli.dashdoc
14 | osascript -e 'id of app "Chrome"' # com.google.Chrome
15 | ```
16 | 
17 | Then run
18 | 
19 | ```sh
20 | defaults write {package.name} NSRequiresAquaSystemAppearance -bool Yes
21 | 
22 | # e.g.
23 | defaults write com.kapeli.dashdoc NSRequiresAquaSystemAppearance -bool Yes
24 | defaults write com.google.Chrome NSRequiresAquaSystemAppearance -bool Yes
25 | ```
26 | 
27 | If you wish to restore the app’s theme to its default configuration then run the below command. Doing so will re-enable the dark mode for the particular app.
28 | 
29 | ```sh
30 | defaults write {package.name} NSRequiresAquaSystemAppearance -bool no
31 | 
32 | # e.g.
33 | defaults write com.kapeli.dashdoc NSRequiresAquaSystemAppearance -bool no
34 | defaults write com.google.Chrome NSRequiresAquaSystemAppearance -bool no
35 | 
36 | # or
37 | defaults delete com.google.Chrome NSRequiresAquaSystemAppearance
38 | ```
39 | 


--------------------------------------------------------------------------------
/notes/make-directory-if-none-exists.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Make a directory if none exists
 3 | tags:
 4 |   - node
 5 | link: 'https://github.com/isaacs/node-mkdirp'
 6 | created: 2020-02-27T23:02:00.000Z
 7 | modified: 2020-05-11T11:47:16.000Z
 8 | ---
 9 | 
10 | ```js
11 | var mkdirp = require('mkdirp')
12 | 
13 | mkdirp('/tmp/some/path/foo', (err) => {
14 |   // path exists unless there was an error
15 | })
16 | ```
17 | 


--------------------------------------------------------------------------------
/notes/mix-blend-mode.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Mix blend mode
 3 | tags:
 4 |   - css
 5 | emoji: 🥣
 6 | created: 2020-03-22T14:53:49.000Z
 7 | modified: 2020-03-26T23:09:13.000Z
 8 | ---
 9 | 
10 | ```css
11 | .invert-everything-behind {
12 |   mix-blend-mode: exclusion;
13 | }
14 | ```
15 | 


--------------------------------------------------------------------------------
/notes/mock-react-router-storybook.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Mock React Router location inside Storybook stories
 3 | tags:
 4 |   - storybook
 5 |   - react
 6 | emoji: 📖
 7 | created: 2022-01-14T10:13:41Z
 8 | modified: 2022-01-14T10:13:41Z
 9 | ---
10 | 
11 | With a component like this:
12 | 
13 | ```tsx
14 | import { useParams } from 'react-router'
15 | 
16 | export const ParamsComponent = ({
17 |   firstName,
18 |   lastName
19 | }) => {
20 |   const params = useParams<{ id: string }>()
21 |   return (
22 |     <div>{JSON.stringify(params, null, 2)}</div>
23 |   )
24 | }
25 | ```
26 | 
27 | And a story like this:
28 | 
29 | ```tsx
30 | import React from 'react'
31 | import { MemoryRouter, Route } from 'react-router'
32 | import {ParamsComponent} from './ParamsComponent'
33 | 
34 | export default {
35 |   title: 'ParamsComponent',
36 |   component: ParamsComponent,
37 | }
38 | 
39 | export const Default = () => {
40 |   return (
41 |     <MemoryRouter initialEntries={['/user/108']}>
42 |       <Route path='/user/:id'>
43 |         <UserCard />
44 |       </Route>
45 |     </MemoryRouter>
46 |   )
47 | }
48 | ```
49 | 
50 | The story should render this:
51 | 
52 | ```
53 | { id: '108' }
54 | ```


--------------------------------------------------------------------------------
/notes/native-image-lazy-loading.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Native image lazy loading
 3 | emoji: 🖼
 4 | tags:
 5 |   - html
 6 | created: 2020-02-27T23:02:00.000Z
 7 | modified: 2020-02-27T23:02:00.000Z
 8 | ---
 9 | 
10 | ```html
11 | <img src="../path/to/image.jpg" loading="lazy" />
12 | ```
13 | 
14 | You can use three values with this attribute:
15 | 
16 | - `auto`: Default behaviour of the browser, equal to not including the attribute.
17 | - `lazy`: Defer loading of resources until it reaches a calculated distance from viewport.
18 | - `eager`: Load the resource immediately
19 | 
20 | **Feature detection**
21 | 
22 | ```js
23 | if ('loading' in HTMLImageElement.prototype === true) {
24 |   // use the attribute
25 | } else {
26 |   // use polyfill
27 | }
28 | ```
29 | 


--------------------------------------------------------------------------------
/notes/nextjs.mdx:
--------------------------------------------------------------------------------
  1 | ---
  2 | title: Next.js
  3 | link: https://nextjs.org/docs/
  4 | tags:
  5 |   - react
  6 | created: 2021-03-09T20:57:49.000Z
  7 | modified: 2021-03-09T20:57:49.000Z
  8 | ---
  9 | 
 10 | ## Pages
 11 | 
 12 | ### `_app.tsx`
 13 | 
 14 | ```tsx
 15 | import { AppProps } from 'next/app'
 16 | import React from 'react'
 17 | import { ThemeProvider } from 'theme-ui'
 18 | import { theme } from '../theme'
 19 | 
 20 | const App = ({ Component, pageProps }: AppProps) => {
 21 |   return (
 22 |     <ThemeProvider theme={theme}>
 23 |       <Component {...pageProps} />
 24 |     </ThemeProvider>
 25 |   )
 26 | }
 27 | 
 28 | export default App
 29 | ```
 30 | 
 31 | ## Data fetching
 32 | 
 33 | ### [`getStaticProps`](https://nextjs.org/docs/basic-features/data-fetching#getstaticprops-static-generation)
 34 | 
 35 | > (Static Generation): Fetch data at build time.
 36 | 
 37 | If you export an async function called `getStaticProps` from a page, Next.js will pre-render this page at build time using the props returned by `getStaticProps`.
 38 | 
 39 | ```tsx
 40 | import { GetStaticProps } from 'next'
 41 | 
 42 | export const getStaticProps: GetStaticProps = async (context) => {
 43 |   const res = await fetch(`https://...`)
 44 |   const data = await res.json()
 45 | 
 46 |   if (!data) {
 47 |     return {
 48 |       // return a 404
 49 |       // notFound: true,
 50 | 
 51 |       // or redirect to another page
 52 |       redirect: {
 53 |         destination: '/',
 54 |         permanent: false,
 55 |       },
 56 |     }
 57 |   }
 58 | 
 59 |   return {
 60 |     props: {}, // will be passed to the page component as props
 61 |   }
 62 | }
 63 | ```
 64 | 
 65 | ### [`getStaticPaths`](https://nextjs.org/docs/basic-features/data-fetching#getstaticpaths-static-generation)
 66 | 
 67 | > (Static Generation): Specify dynamic routes to pre-render pages based on data.
 68 | 
 69 | If a page has dynamic routes ([documentation](https://nextjs.org/docs/routing/dynamic-routes)) and uses `getStaticProps` it needs to define a list of paths that have to be rendered to HTML at build time.
 70 | 
 71 | The `paths` key determines which paths will be pre-rendered. For example, suppose that you have a page that uses dynamic routes named `pages/posts/[id].js`. If you export `getStaticPaths` from this page and return the following for paths:
 72 | 
 73 | ```tsx
 74 | import { GetStaticPaths } from 'next'
 75 | 
 76 | export const getStaticPaths: GetStaticPaths = async () => {
 77 |   return {
 78 |     paths: [
 79 |       {
 80 |         params: { id: '1' },
 81 |       },
 82 |       {
 83 |         params: { id: '2' },
 84 |       },
 85 |     ],
 86 |     fallback: true, // or false // See the "fallback" section below
 87 |   }
 88 | }
 89 | ```
 90 | 
 91 | Then Next.js will statically generate `posts/1` and `posts/2` at build time using the page component in `pages/posts/[id].js`.
 92 | 
 93 | ### [`getServerSideProps`](https://nextjs.org/docs/basic-features/data-fetching#getserversideprops-server-side-rendering)
 94 | 
 95 | > (Server-side Rendering)
 96 | 
 97 | If you export an `async` function called `getServerSideProps` from a page, Next.js will pre-render this page on each request using the data returned by `getServerSideProps`.
 98 | 
 99 | ```tsx
100 | import { GetServerSideProps } from 'next'
101 | 
102 | export const getServerSideProps: GetServerSideProps = async (context) => {
103 |   const res = await fetch(`https://...`)
104 |   const data = await res.json()
105 | 
106 |   if (!data) {
107 |     return {
108 |       // return a 404
109 |       // notFound: true,
110 | 
111 |       // or redirect to another page
112 |       redirect: {
113 |         destination: '/',
114 |         permanent: false,
115 |       },
116 |     }
117 |   }
118 | 
119 |   return {
120 |     props: {}, // will be passed to the page component as props
121 |   }
122 | }
123 | ```
124 | 
125 | ## APIs
126 | 
127 | ### next/router
128 | 
129 | #### useRouter
130 | 
131 | ```tsx
132 | import { useRouter } from 'next/router'
133 | 
134 | export default function Page() {
135 |   const router = useRouter()
136 |   return <button onClick={() => router.push('/about')}>Click me</button>
137 | }
138 | ```
139 | 


--------------------------------------------------------------------------------
/notes/nock.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Nock
 3 | tags:
 4 |   - testing
 5 |   - javascript
 6 | emoji: 🧪
 7 | link: 'https://github.com/nock/nock'
 8 | created: 2020-02-27T23:02:00.000Z
 9 | modified: 2020-05-11T11:47:16.000Z
10 | ---
11 | 
12 | ```js
13 | const nock = require('nock')
14 | 
15 | const scope = nock('https://api.github.com')
16 |   .get('/repos/atom/atom/license')
17 |   .reply(200, {
18 |     license: {
19 |       key: 'mit',
20 |       name: 'MIT License',
21 |       spdx_id: 'MIT',
22 |       url: 'https://api.github.com/licenses/mit',
23 |       node_id: 'MDc6TGljZW5zZTEz',
24 |     },
25 |   })
26 | ```
27 | 


--------------------------------------------------------------------------------
/notes/npm-script-another-directory.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Run npm script from another directory
 3 | created: 2022-07-19T16:26:06.000Z
 4 | modified: 2022-07-19T16:26:06.000Z
 5 | ---
 6 | 
 7 | ## npm
 8 | 
 9 | To run an npm script from another directory, use --prefix:
10 | 
11 | ```sh
12 | npm --prefix <path> run <command>
13 | ```
14 | 
15 | ## yarn
16 | 
17 | To run a yarn script from another directory, use --cwd:
18 | 
19 | ```sh
20 | yarn --cwd <path> <command>
21 | ```
22 | 
23 | ## Example
24 | 
25 | If you have a `package.json` in the `example` directory:
26 | 
27 | ```json
28 | {
29 |   "scripts": {
30 |     "start": "echo hello world"
31 |   }
32 | }
33 | ```
34 | 
35 | In the following directory:
36 | 
37 | ```
38 | .
39 | ├─ example
40 | │  ├─ package.json
41 | ├─ package.json
42 | ```
43 | 
44 | 1 directory, 1 file
45 | 
46 | Then to run script `start` from your working directory:
47 | 
48 | ```sh
49 | npm --prefix ./example run start
50 | 
51 | yarn --cwd ./example start
52 | ```
53 | 
54 | ```json
55 | {
56 |   "scripts": {
57 |     "start": "npm --prefix ./example run start"
58 |   }
59 | }
60 | ```
61 | 


--------------------------------------------------------------------------------
/notes/oembed.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: oEmbed
 3 | tags:
 4 |   - javascript
 5 |   - html
 6 | link: 'https://oembed.com/'
 7 | created: 2020-03-03T09:46:27.000Z
 8 | modified: 2020-06-30T21:18:03.000Z
 9 | ---
10 | 
11 | Default providers list: https://oembed.com/providers.json
12 | 
13 | Example provider scheme:
14 | 
15 | ```json
16 | {
17 |   "provider_name": "Twitter",
18 |   "provider_url": "http:\/\/www.twitter.com\/",
19 |   "endpoints": [
20 |     {
21 |       "schemes": [
22 |         "https:\/\/twitter.com\/*\/status\/*",
23 |         "https:\/\/*.twitter.com\/*\/status\/*"
24 |       ],
25 |       "url": "https:\/\/publish.twitter.com\/oembed"
26 |     }
27 |   ]
28 | },
29 | ```
30 | 
31 | Example oEmbed link for Twitter
32 | 
33 | ```
34 | https://publish.twitter.com/oembed?url=https://twitter.com/Interior/status/463440424141459456
35 | ```
36 | 


--------------------------------------------------------------------------------
/notes/opengraph-metacrap.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Opengraph metacrap
 3 | tags:
 4 |   - html
 5 | created: 2020-02-27T23:02:00.000Z
 6 | modified: 2020-05-11T11:31:08.000Z
 7 | ---
 8 | 
 9 | ```html
10 | <!DOCTYPE html>
11 | <html lang="en">
12 |   <head>
13 |     <title></title>
14 |     <meta charset="utf-8" />
15 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
16 |     <meta name="author" content="" />
17 |     <meta name="description" content="" />
18 | 
19 |     <!-― facebook open graph tags -->
20 |     <meta property="og:type" content="website" />
21 |     <meta property="og:url" content="" />
22 |     <meta property="og:title" content="" />
23 |     <meta property="og:description" content="" />
24 |     <meta property="og:image" content="" />
25 | 
26 |     <!-― twitter card tags additive with the og: tags -->
27 |     <meta name="twitter:card" content="summary_large_image" />
28 |     <meta name="twitter:domain" value="" />
29 |     <meta name="twitter:title" value="" />
30 |     <meta name="twitter:description" value="" />
31 |     <meta name="twitter:image" content="" />
32 |     <meta name="twitter:url" value="" />
33 |     <meta name="twitter:label1" value="" />
34 |     <meta name="twitter:data1" value="" />
35 |     <meta name="twitter:label2" value="" />
36 |     <meta name="twitter:data2" value="" />
37 | 
38 |     <link href="style.css" rel="stylesheet" />
39 |     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
40 |   </head>
41 | </html>
42 | ```
43 | 
44 | [Everything you ever wanted to know about unfurling but were afraid to ask /or/ How to make your site previews look amazing in Slack](https://medium.com/slack-developer-blog/everything-you-ever-wanted-to-know-about-unfurling-but-were-afraid-to-ask-or-how-to-make-your-e64b4bb9254)
45 | 
46 | Facebook: https://developers.facebook.com/docs/sharing/webmasters
47 | 
48 | https://sproutsocial.com/insights/social-media-image-sizes-guide/
49 | 
50 | ## [Metatags.io](https://metatags.io/)
51 | 
52 | Metatags.io is a very useful service to validate your metatags but also to generate the code needed for them too.
53 | 


--------------------------------------------------------------------------------
/notes/performance-tips.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Performance tips
 3 | emoji: 🏎
 4 | created: 2021-01-15
 5 | modified: 2021-01-15
 6 | ---
 7 | 
 8 | ## Reduce Cumulative Layout Shift
 9 | 
10 | Reduce Cumulative Layout Shift by always showing the scrollbar
11 | 
12 | ```css
13 | html {
14 |   overflow-y: scroll;
15 | }
16 | ```
17 | 
18 | https://twitter.com/TimVereecke/status/1239454788116533248
19 | 
20 | ## Performance API
21 | 
22 | ```js
23 | performance.mark('start')
24 | // some code we want to measure
25 | performance.mark('end')
26 | ```
27 | 
28 | ## Benchmarking code using node
29 | 
30 | ```sh
31 | # assume there's an `add` function that is executed in benchmark.js
32 | 
33 | node --trace-opt benchmark.js | grep add
34 | node --trace-opt --trace-deopt benchmark.js | grep add
35 | 
36 | # add %NeverOptimizeFuntion(add)
37 | node --allow-natives-syntax benchmark.js
38 | ```
39 | 


--------------------------------------------------------------------------------
/notes/picture.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Picture
 3 | tags:
 4 |   - html
 5 | emoji: 🖼
 6 | created: 2020-02-27T23:02:00.000Z
 7 | modified: 2020-03-26T23:06:06.000Z
 8 | ---
 9 | 
10 | ## Webp + png usage
11 | 
12 | ```jsx
13 | <picture>
14 |   <source
15 |     type="image/webp"
16 |     srcset="/images/free-cash.webp, /images/free-cash@2x.webp 2x"
17 |   />
18 |   <source
19 |     type="image/png"
20 |     srcset="/images/free-cash.png, /images/free-cash@2x.png 2x"
21 |   />
22 |   <img src="/images/free-cash.png" alt="Free Cash!" />
23 | </picture>
24 | ```
25 | 


--------------------------------------------------------------------------------
/notes/postman.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Postman.io
 3 | tags:
 4 |   - javascript
 5 | emoji: 📨
 6 | created: 2020-02-27T23:02:00.000Z
 7 | modified: 2020-03-26T23:06:06.000Z
 8 | ---
 9 | 
10 | ## Save an env var
11 | 
12 | ```js
13 | var jsonData = JSON.parse(responseBody)
14 | pm.environment.set('ref', jsonData.refs[0].ref)
15 | ```
16 | 


--------------------------------------------------------------------------------
/notes/quotation-marks.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Quotation marks in different countries
 3 | emoji: 🗣
 4 | created: 2020-10-08T16:37:57.000Z
 5 | modified: 2021-11-11T12:06:43.046Z
 6 | tags:
 7 |   - css
 8 | ---
 9 | 
10 | - Albanian: `«…»` `‹…›`
11 | - English: `“…”` `‘…’`
12 | - Arab: `«…»` `‹…›`
13 | - African: `„…”` `‚…’`
14 | - Belorussian: `«…»` `„…“`
15 | - Bulgarian: `„…“` `‚…‘`
16 | - Hungarian: `„…”`
17 | - Greek: `«…»` `‹…›`
18 | - Danish: `»…«` `›…‹`
19 | - Hebrew: `«…»` / `'…'` `'…'` / `<<…>>`
20 | - Irish: `“…”` `‘…’`
21 | - Icelandic: `„…“` `‚…‘`
22 | - Spanish: `«…»` `“…”`
23 | - Italian: `«…»`
24 | - Chinese: `“…”` `‘…’`
25 | - Latvian: `„…“` `„…“`
26 | - Lithuanian: `„…“` `‚…‘`
27 | - Dutch: `„…”` `‚…’`
28 | - German: `„…“` `‚…‘`
29 | - Norwegian: `«…»`
30 | - Polish: `„…”` `«…»`
31 | - Portuguese: `“…”` `‘…’`
32 | - Romanian: `„…”` `«…»`
33 | - Russian: `«…»` `„…“`
34 | - Serbian: `„…“` `‚…‘`
35 | - Slovak: `„…“` `‚…‘`
36 | - Slovenian: `„…“` `‚…‘`
37 | - Turkish: `“…”` `‘…’`
38 | - Ukrainian: `«…»` `„…“`
39 | - Finnish: `”…”` `’…’`
40 | - French: `« …` `» ‹ … ›`
41 | - Croatian: `»…«` `›…‹`
42 | - Czech: `„…“` `‚…‘`
43 | - Swedish: `”…”` `’…’`
44 | - Estonian: `„…”` `„…”`
45 | - Japanese: `「…」` `『…』`
46 | 
47 | ## Different kinds
48 | 
49 | - `“ ”`: English double
50 | - `‘ ’`: English Single
51 | - `« »`: French «Christmas trees»
52 | - `„ “`: German „paws“
53 | - `„ ”`: Polish
54 | - `» «`: Swedish reverse
55 | - `" "`: Double universal
56 | 
57 | ## Example CSS
58 | 
59 | ```css
60 | blockquote {
61 |   background: #f9f9f9;
62 |   border-left: 10px solid #ccc;
63 |   margin: 1.5em 10px;
64 |   padding: 0.5em 10px;
65 |   quotes: '“' '”' '‘' '’';
66 | }
67 | blockquote::before {
68 |   color: #ccc;
69 |   content: open-quote;
70 |   font-size: 4em;
71 |   line-height: 0.1em;
72 |   margin-right: 0.25em;
73 |   vertical-align: -0.4em;
74 | }
75 | blockquote p {
76 |   display: inline;
77 | }
78 | ```
79 | 


--------------------------------------------------------------------------------
/notes/react-client-only.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Client-only React
 3 | tags:
 4 |   - react
 5 | emoji: 🎣
 6 | link: 'https://joshwcomeau.com/react/the-perils-of-rehydration/'
 7 | created: 2020-06-11T14:47:15.000Z
 8 | modified: 2020-06-11T14:47:15.000Z
 9 | ---
10 | 
11 | ## A client-only wrapper component
12 | 
13 | ```jsx
14 | export const ClientOnly = ({ children, ...delegated }) => {
15 |   const [hasMounted, setHasMounted] = React.useState(false)
16 |   React.useEffect(() => {
17 |     setHasMounted(true)
18 |   }, [])
19 |   if (!hasMounted) {
20 |     return null
21 |   }
22 |   return <div {...delegated}>{children}</div>
23 | }
24 | ```
25 | 
26 | Use like so:
27 | 
28 | ```jsx
29 | <ClientOnly>
30 |   <Navigation />
31 | </ClientOnly>
32 | ```
33 | 
34 | or you could use a hook:
35 | 
36 | ```jsx
37 | export const useHasMounted = () => {
38 |   const [hasMounted, setHasMounted] = React.useState(false)
39 |   React.useEffect(() => {
40 |     setHasMounted(true)
41 |   }, [])
42 |   return hasMounted
43 | }
44 | ```
45 | 
46 | Which could be used like so:
47 | 
48 | ```jsx
49 | function Navigation() {
50 |   const hasMounted = useHasMounted()
51 |   if (!hasMounted) {
52 |     return null
53 |   }
54 | 
55 |   const user = getUser()
56 | 
57 |   if (user) {
58 |     return <AuthenticatedNav user={user} />
59 |   }
60 | 
61 |   return (
62 |     <nav>
63 |       <a href="/login">Login</a>
64 |     </nav>
65 |   )
66 | }
67 | ```
68 | 


--------------------------------------------------------------------------------
/notes/react-compound-components.mdx:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: React compound components
 3 | tags:
 4 |   - react
 5 |   - js
 6 | link: https://jjenzz.com/compound-components
 7 | created: 2021-04-20T23:24:38.094Z
 8 | modified: 2021-04-22T17:50:06.559Z
 9 | ---
10 | 
11 | ```tsx
12 | import React, { useContext } from 'react'
13 | 
14 | const Context = React.createContext()
15 | 
16 | const List = ({ isSmall = false, children, ...props }) => (
17 |   <ul {...props} style={{ padding: isSmall ? '5px' : '10px' }}>
18 |     <Context.Provider value={isSmall}>{children}</Context.Provider>
19 |   </ul>
20 | )
21 | 
22 | const ListItem = ({ children, ...props }) => {
23 |   const isSmall = useContext(Context)
24 | 
25 |   return (
26 |     <li {...props} style={{ padding: isSmall ? '5px' : '10px' }}>
27 |       {children}
28 |     </li>
29 |   )
30 | }
31 | 
32 | export { List, ListItem }
33 | ```
34 | 
35 | ```tsx
36 | <List isSmall>
37 |   <ListItem>Cat</ListItem>
38 |   <ListItem>Dog</ListItem>
39 | </List>
40 | ```
41 | 
42 | Another example: https://egghead.io/lessons/react-write-compound-components
43 | 


--------------------------------------------------------------------------------
/notes/react-conditionally-render-client-server.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Conditionally render on the client or server
 3 | tags:
 4 |   - react
 5 | emoji: ⚛
 6 | created: 2022-08-17T09:08:55.000Z
 7 | modified: 2022-08-17T09:08:55.000Z
 8 | ---
 9 | 
10 | ```tsx
11 | import React, { useEffect, useState, ReactNode } from 'react'
12 | 
13 | export interface ConditionallyRenderProps {
14 |   client?: boolean
15 |   server?: boolean
16 |   children?: ReactNode
17 | }
18 | 
19 | const ConditionallyRender = ({
20 |   client,
21 |   server,
22 |   children,
23 | }: ConditionallyRenderProps) => {
24 |   const [isMounted, setIsMounted] = useState(false)
25 | 
26 |   useEffect(() => setIsMounted(true), [])
27 | 
28 |   if (!isMounted && client) {
29 |     return null
30 |   }
31 | 
32 |   if (isMounted && server) {
33 |     return null
34 |   }
35 | 
36 |   return children as React.ReactElement
37 | }
38 | 
39 | export default ConditionallyRender
40 | ```
41 | 
42 | ## Usage
43 | 
44 | ```tsx
45 | <Layout>
46 |   <ConditionallyRender server>
47 |     <p>This is rendered only on server.</p>
48 |   </ConditionallyRender>
49 |   <ConditionallyRender client>
50 |     <p>This is rendered only on client.</p>
51 |   </ConditionallyRender>
52 | </Layout>
53 | ```
54 | 


--------------------------------------------------------------------------------
/notes/react-errorboundary.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: React Error Boundary
 3 | link: https://reactjs.org/docs/error-boundaries.html
 4 | tags:
 5 |   - react
 6 | emoji: ⚛
 7 | created: 2021-11-11T12:22:44.100Z
 8 | modified: 2021-11-11T12:24:43.372Z
 9 | ---
10 | 
11 | From the React docs on [Error boundaries](https://reactjs.org/docs/error-boundaries.html):
12 | 
13 | > Error boundaries are React components that catch JavaScript errors anywhere in their child component tree, log those errors, and display a fallback UI instead of the component tree that crashed. Error boundaries catch errors during rendering, in lifecycle methods, and in constructors of the whole tree below them.
14 | 
15 | Use this component to wrap other components that might crash so errors can be caught.
16 | 
17 | ## Basic example
18 | 
19 | ```tsx
20 | <ErrorBoundary>
21 |   <Suspense fallback={<Loader />}>
22 |     {/* A component that fetches data */}
23 |   </Suspense>
24 | </ErrorBoundary>
25 | ```
26 | 
27 | ## Custom fallback component
28 | 
29 | A custom `fallback` component can be passed to the `ErrorBoundary` component, like so:
30 | 
31 | ```tsx
32 | <ErrorBoundary fallback={<div>Error loading the cohort list</div>}>
33 |   <Suspense fallback={<Loader />}>
34 |     {/* A component that fetches data */}
35 |   </Suspense>
36 | </ErrorBoundary>
37 | ```
38 | 
39 | ### Source
40 | 
41 | ```tsx
42 | import React, { ReactNode } from 'react'
43 | import { Alert } from 'theme-ui'
44 | 
45 | export interface ErrorBoundaryProps {
46 |   fallback?: ReactNode
47 | }
48 | 
49 | interface ErrorBoundaryState {
50 |   hasError: boolean
51 |   error: Error | null
52 | }
53 | 
54 | export class ErrorBoundary extends React.Component<
55 |   ErrorBoundaryProps,
56 |   ErrorBoundaryState
57 | > {
58 |   state = { hasError: false, error: null }
59 | 
60 |   static getDerivedStateFromError(error: Error): ErrorBoundaryState {
61 |     return {
62 |       hasError: true,
63 |       error,
64 |     }
65 |   }
66 | 
67 |   render(): ReactNode {
68 |     if (this.state.hasError) {
69 |       console.error(this.state.error)
70 |       const fallback = this.props.fallback
71 |       if (typeof fallback === 'string') {
72 |         return <Alert variant="warning">{fallback}</Alert>
73 |       } else if (fallback) {
74 |         return fallback
75 |       }
76 | 
77 |       return (
78 |         <Alert variant="warning">
79 |           Something went wrong. Please refresh the page and try again.
80 |         </Alert>
81 |       )
82 |     }
83 |     return this.props.children
84 |   }
85 | }
86 | ```
87 | 


--------------------------------------------------------------------------------
/notes/react-query.md:
--------------------------------------------------------------------------------
  1 | ---
  2 | title: React Query
  3 | link: https://react-query.tanstack.com
  4 | tags:
  5 |   - react
  6 | emoji: ⚛
  7 | created: 2021-03-26T12:50:12.000Z
  8 | modified: 2021-11-11T12:24:40.451Z
  9 | ---
 10 | 
 11 | ## useQuery
 12 | 
 13 | Given a fetch function like this (that uses [axios](axios.html)):
 14 | 
 15 | ```ts
 16 | import axios from 'axios'
 17 | import urlJoin from 'proper-url-join'
 18 | 
 19 | export interface APIResponse<T> {
 20 |   status?: number
 21 |   success: boolean
 22 |   data?: T
 23 |   error?: ErrorResponse
 24 | }
 25 | export interface ErrorResponse {
 26 |   message: string
 27 |   data?: {
 28 |     errors?: unknown
 29 |     error?: unknown
 30 |   }
 31 | }
 32 | 
 33 | interface RequestModel {
 34 |   path: string
 35 | }
 36 | 
 37 | export const getSomeData = async <Response>({
 38 |   path,
 39 | }: RequestModel): Promise<APIResponse<Response>> => {
 40 |   try {
 41 |     const { data } = await axios({
 42 |       method: 'GET',
 43 |       url: urlJoin('https://mysite.com', path),
 44 |     })
 45 |     return data
 46 |   } catch (error) {
 47 |     throw new Error(error.message || 'error.unknown')
 48 |   }
 49 | }
 50 | ```
 51 | 
 52 | This is how you might use react-query
 53 | 
 54 | ```ts
 55 | import { useQuery, UseQueryResult } from 'react-query'
 56 | 
 57 | interface ResponseModel {
 58 |   data: {
 59 |     key: string
 60 |   }
 61 | }
 62 | type ResponseUseQueryModel = UseQueryResult<ResponseModel, Error>
 63 | 
 64 | const someData = useQuery<ResponseUseQueryModel, Error>(
 65 |   ['traineeFeedback', traineeId],
 66 |   () =>
 67 |     getSomeData<TraineeFeedbackDataModel>({
 68 |       path: TRAINEE_FEEDBACK,
 69 |     }),
 70 | )
 71 | ```
 72 | 
 73 | ### Add options to the query
 74 | 
 75 | ```ts
 76 | const someData = useQuery<ResponseUseQueryModel, Error>(
 77 |   ['traineeFeedback', traineeId],
 78 |   () =>
 79 |     getSomeData<TraineeFeedbackDataModel>({
 80 |       path: TRAINEE_FEEDBACK,
 81 |     }),
 82 |   // options are the 3rd param
 83 |   {
 84 |     // will wait for `idToken` to be truthy before running this query
 85 |     enabled: !!idToken,
 86 |   },
 87 | )
 88 | ```
 89 | 
 90 | ### As a custom hook
 91 | 
 92 | ```ts
 93 | import { useQuery, UseQueryResult } from 'react-query'
 94 | 
 95 | export const useTraineeFeedback = (
 96 |   traineeId: string,
 97 |   idToken: string,
 98 | ): UseQueryResult<TraineeFeedbackResponseModel, Error> => {
 99 |   return useQuery<TraineeFeedbackResponseModel, Error>(
100 |     ['traineeFeedback', traineeId],
101 |     () =>
102 |       getSomeData<TraineeFeedbackDataModel>({
103 |         path: TRAINEE_FEEDBACK,
104 |       }),
105 |     {
106 |       enabled: !!idToken,
107 |     },
108 |   )
109 | }
110 | ```
111 | 
112 | ### Usage in a component
113 | 
114 | From [here](https://github.com/tannerlinsley/react-query/discussions/2063)
115 | 
116 | ```ts
117 | interface ViewUserPagePathParameters {
118 |   userId: string
119 | }
120 | 
121 | interface IUser {
122 |   id: string
123 |   displayName: string
124 | }
125 | 
126 | export function assertNever(value: never): never {
127 |   throw new Error(`Unhandled discriminated union member: ${value}`)
128 | }
129 | 
130 | export const ViewUser: React.FC = (props) => {
131 |   const { userId } = useParams<ViewUserPagePathParameters>()
132 |   const { status, data, error } = useQuery<IUser, Error>(
133 |     `getUser for ${userId}`,
134 |     () => getUser({ id: userId }),
135 |   )
136 | 
137 |   if (status === 'success') {
138 |     const user = data
139 |     return <div>Name: {user.displayName}</div>
140 |   } else if (status === 'loading') {
141 |     return <div>loading...</div>
142 |   } else if (status === 'idle') {
143 |     return <div>mutating...</div>
144 |   } else if (status === 'error') {
145 |     return 'An error has occurred: ' + error.message
146 |   } else {
147 |     return assertNever(queryResult)
148 |   }
149 | }
150 | ```
151 | 
152 | ## useQueries
153 | 
154 | ```ts
155 | import { useQueries } from 'react-query'
156 | 
157 | const scorecardQueries = useQueries([
158 |   {
159 |     queryKey: ['traineeInfo', traineeId],
160 |     queryFn: () =>
161 |       getSomeData<GetTraineeInfoDataModel>({
162 |         path: TRAINEE_FEEDBACK,
163 |       }),
164 |     // options in useQueries are not in a separate object
165 |     enabled: !!idToken,
166 |   },
167 |   {
168 |     queryKey: ['traineeAchievements', traineeId],
169 |     queryFn: () =>
170 |       getSomeData<TraineeAchievementsDataModel>({
171 |         path: TRAINEE_FEEDBACK,
172 |       }),
173 |     enabled: !!idToken,
174 |   },
175 | ])
176 | ```
177 | 


--------------------------------------------------------------------------------
/notes/react-ssr.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: SSR
 3 | tags:
 4 |   - react
 5 | emoji: ⚛
 6 | created: 2020-09-06T07:57:42.000Z
 7 | modified: 2020-09-06T07:57:42.000Z
 8 | ---
 9 | 
10 | Use this to check if `window` is defined
11 | 
12 | ```js
13 | const windowGlobal = typeof window !== 'undefined' && window
14 | ```
15 | 
16 | Useful libraries when working with SSR:
17 | 
18 | - https://github.com/react-corekit/use-where
19 | 


--------------------------------------------------------------------------------
/notes/react-typescript.md:
--------------------------------------------------------------------------------
  1 | ---
  2 | title: React TypeScript
  3 | tags:
  4 |   - react
  5 |   - typescript
  6 | emoji: ⚛
  7 | created: 2021-03-09T12:42:11.000Z
  8 | modified: 2021-11-11T11:54:45.763Z
  9 | ---
 10 | 
 11 | [React TypeScript cheatsheet](https://github.com/typescript-cheatsheets/react-typescript-cheatsheet) is my bible for all React/TypeScipt things
 12 | 
 13 | ## Functional components
 14 | 
 15 | 1. Your own types
 16 | 1. `VoidFunctionComponent` or `VFC`
 17 | 1. `FunctionComponent` or `FC`
 18 | 
 19 | ### 1. Your own type
 20 | 
 21 | This is the preferred method, as described [here](https://react-typescript-cheatsheet.netlify.app/docs/basic/getting-started/function_components/), for typing your React components.
 22 | 
 23 | ```tsx
 24 | interface AppProps {
 25 |   message: string
 26 | }
 27 | 
 28 | const App = ({ message }: AppProps): JSX.Element => <div>{message}</div>
 29 | ```
 30 | 
 31 | If you need to type `children`, you can add the types like so:
 32 | 
 33 | ```tsx
 34 | interface AppProps {
 35 |   message: string
 36 |   children: ReactNode // or whatever type you want
 37 | }
 38 | 
 39 | const App = ({ message, children }: AppProps): JSX.Element => (
 40 |   <div>
 41 |     {message} {children}
 42 |   </div>
 43 | )
 44 | ```
 45 | 
 46 | ### 2. `FunctionComponent` or `FC`
 47 | 
 48 | **Using `FunctionComponent` or `FC` is discouraged because it defines `children` as an optional prop.** In most cases you would want to be explicit about how `children` are used. It also defines `children` as `ReactNode` which is a very broad type. So you may want to define `children` as `ReactText` instead which is `number | string`.
 49 | 
 50 | ```tsx
 51 | interface AppProps {
 52 |   message: string
 53 | }
 54 | 
 55 | const App: FC<AppProps> = ({ message }) => <div>{message}</div>
 56 | ```
 57 | 
 58 | ### 3. `VoidFunctionComponent` or `VFC`
 59 | 
 60 | Using `VoidFunctionComponent` or `VFC` is slightly better than `FunctionComponent` because you have to explicitly define `children` type, but if you're doing that, you might as well use option 1 above instead.
 61 | 
 62 | ```tsx
 63 | interface AppProps {
 64 |   message: string
 65 | }
 66 | 
 67 | const App: FC<AppProps> = ({ message }) => <div>{message}</div>
 68 | ```
 69 | 
 70 | ## Basic prop type examples
 71 | 
 72 | ```ts
 73 | type AppProps = {
 74 |   message: string
 75 |   count: number
 76 |   disabled: boolean
 77 |   /** array of a type! */
 78 |   names: string[]
 79 |   /** string literals to specify exact string values, with a union type to join them together */
 80 |   status: 'waiting' | 'success'
 81 |   /** any object as long as you dont use its properties (NOT COMMON but useful as placeholder) */
 82 |   obj: object
 83 |   obj2: {} // almost the same as `object`, exactly the same as `Object`
 84 |   /** an object with any number of properties (PREFERRED) */
 85 |   obj3: {
 86 |     id: string
 87 |     title: string
 88 |   }
 89 |   /** array of objects! (common) */
 90 |   objArr: {
 91 |     id: string
 92 |     title: string
 93 |   }[]
 94 |   /** a dict object with any number of properties of the same type */
 95 |   dict1: {
 96 |     [key: string]: MyTypeHere
 97 |   }
 98 |   dict2: Record<string, MyTypeHere> // equivalent to dict1
 99 |   /** any function as long as you don't invoke it (not recommended) */
100 |   onSomething: Function
101 |   /** function that doesn't take or return anything (VERY COMMON) */
102 |   onClick: () => void
103 |   /** function with named prop (VERY COMMON) */
104 |   onChange: (id: number) => void
105 |   /** alternative function type syntax that takes an event (VERY COMMON) */
106 |   onClick(event: React.MouseEvent<HTMLButtonElement>): void
107 |   /** an optional prop (VERY COMMON!) */
108 |   optional?: OptionalType
109 | }
110 | ```
111 | 
112 | ## Useful prop type examples
113 | 
114 | ```ts
115 | export declare interface AppProps {
116 |   children1: JSX.Element // bad, doesnt account for arrays
117 |   children2: JSX.Element | JSX.Element[] // meh, doesn't accept strings
118 |   children3: React.ReactChildren // despite the name, not at all an appropriate type; it is a utility
119 |   children4: React.ReactChild[] // better, accepts array children
120 |   children: React.ReactNode // best, accepts everything (see edge case below)
121 |   functionChildren: (name: string) => React.ReactNode // recommended function as a child render prop type
122 |   style?: React.CSSProperties // to pass through style props
123 |   onChange?: React.FormEventHandler<HTMLInputElement> // form events! the generic parameter is the type of event.target
124 |   //  more info: https://react-typescript-cheatsheet.netlify.app/docs/advanced/patterns_by_usecase/#wrappingmirroring
125 |   props: Props & React.ComponentPropsWithoutRef<'button'> // to impersonate all the props of a button element and explicitly not forwarding its ref
126 |   props2: Props & React.ComponentPropsWithRef<MyButtonWithForwardRef> // to impersonate all the props of MyButtonForwardedRef and explicitly forwarding its ref
127 | }
128 | ```
129 | 
130 | Read more [here](https://react-typescript-cheatsheet.netlify.app/docs/basic/getting-started/basic_type_example#useful-react-prop-type-examples)
131 | 
132 | ## Event handling
133 | 
134 | Some `class` based examples of TS event handling can be found at
135 | https://fettblog.eu/typescript-react/events/
136 | 


--------------------------------------------------------------------------------
/notes/react-usecontext.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: useContext
 3 | tags:
 4 |   - react
 5 | emoji: 🎣
 6 | created: 2020-04-17T15:55:11.000Z
 7 | modified: 2020-04-17T15:55:11.000Z
 8 | ---
 9 | 
10 | - Docs: http://reactjs.org/docs/hooks-reference.html#usecontext
11 | - TS/React docs: https://github.com/typescript-cheatsheets/react-typescript-cheatsheet#context
12 | 
13 | ## Setup
14 | 
15 | This example uses the [`use-timer`](https://github.com/thibaultboursier/use-timer) hook to create a provider that passes a timer and it's methods to any consumers.
16 | 
17 | ```tsx
18 | import React, { createContext } from 'react'
19 | import { useTimer } from 'use-timer'
20 | 
21 | export interface TimerContextInterface {
22 |   time: string
23 |   start: () => void
24 |   pause: () => void
25 |   reset: () => void
26 |   isRunning: boolean
27 | }
28 | 
29 | export const TimerContext = createContext<TimerContextInterface>({} as TimerContextInterface)
30 | 
31 | export const TimerProvider = ({ children }) => {
32 |   const { time, start, pause, reset, isRunning } = useTimer({
33 |     initialTime: 5000,
34 |     timerType: 'DECREMENTAL',
35 |     step: 1000,
36 |     },
37 |   })
38 | 
39 |   return (
40 |     <TimerContext.Provider value={{ time, start, pause, reset, isRunning }}>
41 |       {children({ time, start, pause, reset, isRunning })}
42 |     </TimerContext.Provider>
43 |   )
44 | }
45 | 
46 | export const useTimerContext = (): TimerContextInterface =>
47 |   useContext(TimerContext)
48 | ```
49 | 
50 | ## Usage
51 | 
52 | ```tsx
53 | import React, { useContext } from 'react'
54 | 
55 | const MyComponent = () => {
56 |   const { time } = useContext(TimerContext)
57 |   // or
58 |   const { time } = useTimerContext()
59 | 
60 |   return <div>Timer expires in {time}</div>
61 | }
62 | ```
63 | 
64 | ```tsx
65 | <TimerProvider>
66 |   <MyComponent />
67 | </TimerProvider>
68 | 
69 | // or
70 | <TimerProvider>
71 |   {({time})=> (
72 |     <div>Timer expires in {time}</div>
73 |   )}
74 | </TimerProvider>
75 | ```
76 | 


--------------------------------------------------------------------------------
/notes/react-usereducer.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: useReducer
 3 | tags:
 4 |   - react
 5 | emoji: 🎣
 6 | created: 2020-04-17T15:55:11.000Z
 7 | modified: 2020-04-17T15:55:11.000Z
 8 | ---
 9 | 
10 | - Docs: http://reactjs.org/docs/hooks-reference.html#usereducer
11 | - TS/React docs: https://github.com/typescript-cheatsheets/react-typescript-cheatsheet/blob/master/README.md#hooks
12 | 
13 | ## Example
14 | 
15 | ```tsx
16 | import React, { useReducer } from 'react'
17 | 
18 | const initialState = { count: 0 }
19 | 
20 | const reducer = (state, action) => {
21 |   switch (action.type) {
22 |     case 'increment':
23 |       return { count: state.count + 1 }
24 |     case 'decrement':
25 |       return { count: state.count - 1 }
26 |     default:
27 |       throw new Error()
28 |   }
29 | }
30 | 
31 | export const Counter = () => {
32 |   const [state, dispatch] = useReducer(reducer, initialState)
33 |   return (
34 |     <>
35 |       Count: {state.count}
36 |       <button onClick={() => dispatch({ type: 'decrement' })}>-</button>
37 |       <button onClick={() => dispatch({ type: 'increment' })}>+</button>
38 |     </>
39 |   )
40 | }
41 | ```
42 | 
43 | ## useImmer
44 | 
45 | For complex stuff, [useImmer](https://github.com/immerjs/use-immer) is a great option
46 | 


--------------------------------------------------------------------------------
/notes/react-useref.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: useRef
 3 | tags:
 4 |   - react
 5 | emoji: 🎣
 6 | created: 2020-04-17T15:55:11.000Z
 7 | modified: 2020-04-17T15:55:11.000Z
 8 | ---
 9 | 
10 | - Docs: http://reactjs.org/docs/hooks-reference.html#useref
11 | - TS/React docs: https://github.com/typescript-cheatsheets/react-typescript-cheatsheet/blob/master/README.md#hooks
12 | 
13 | ## TypeScript
14 | 
15 | When using useRef, you have two options when creating a ref container that does not have an initial value:
16 | 
17 | ```ts
18 | const ref1 = useRef<HTMLElement>(null!)
19 | const ref2 = useRef<HTMLElement | null>(null)
20 | ```
21 | 
22 | The first option will make `ref1.current` read-only, and is intended to be passed in to built-in ref attributes that React will manage (because React handles setting the current value for you).
23 | 
24 | The second option will make `ref2.current` mutable, and is intended for "instance variables" that you manage yourself.
25 | 
26 | ## Example
27 | 
28 | ```tsx
29 | import React, { useRef } from 'react'
30 | 
31 | export const TextInputWithFocusButton = () => {
32 |   // initialise with null, but tell TypeScript we are looking for an HTMLInputElement
33 |   const inputEl = React.useRef<HTMLInputElement | null>(null)
34 |   const onButtonClick = () => {
35 |     // strict null checks need us to check if inputEl and current exist.
36 |     // but once current exists, it is of type HTMLInputElement, thus it
37 |     // has the method focus! ✅
38 |     if (inputEl && inputEl.current) {
39 |       inputEl.current.focus()
40 |     }
41 |   }
42 |   return (
43 |     <>
44 |       {/* in addition, inputEl only can be used with input elements. Yay! */}
45 |       <input ref={inputEl} type="text" />
46 |       <button onClick={onButtonClick}>Focus the input</button>
47 |     </>
48 |   )
49 | }
50 | ```
51 | 


--------------------------------------------------------------------------------
/notes/readme.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: readme.md
 3 | emoji: 📝
 4 | created: 2020-02-27T23:51:44.000Z
 5 | modified: 2021-07-10T07:14:48.229Z
 6 | ---
 7 | 
 8 | ### Header/intro
 9 | 
10 | ```html
11 | <div align="center">
12 |   <img
13 |     src="https://raw.githubusercontent.com/mrmartineau/gatsby-theme-code-notes/master/assets/opengraph.png"
14 |     width="640"
15 |   />
16 | 
17 |   <p>
18 |     <a
19 |       href="https://github.com/MrMartineau/gatsby-theme-code-notes/blob/master/LICENSE"
20 |     >
21 |       <img
22 |         src="https://img.shields.io/badge/license-MIT-blue.svg"
23 |         alt="gatsby-theme-code-notes is released under the MIT license."
24 |       />
25 |     </a>
26 |     <a href="https://www.npmjs.org/package/gatsby-theme-code-notes">
27 |       <img
28 |         src="https://img.shields.io/npm/v/gatsby-theme-code-notes.svg"
29 |         alt="Current npm package version."
30 |       />
31 |     </a>
32 |     <a
33 |       href="https://npmcharts.com/compare/gatsby-theme-code-notes?minimal=true"
34 |     >
35 |       <img
36 |         src="https://img.shields.io/npm/dm/gatsby-theme-code-notes.svg"
37 |         alt="Downloads per month on npm."
38 |       />
39 |     </a>
40 |     <a
41 |       href="https://npmcharts.com/compare/gatsby-theme-code-notes?minimal=true"
42 |     >
43 |       <img
44 |         src="https://img.shields.io/npm/dt/gatsby-theme-code-notes.svg"
45 |         alt="Total downloads on npm."
46 |       />
47 |     </a>
48 |     <img
49 |       src="https://img.shields.io/badge/PRs-welcome-brightgreen.svg"
50 |       alt="PRs welcome!"
51 |     />
52 |     <a href="https://twitter.com/intent/follow?screen_name=MrMartineau">
53 |       <img
54 |         src="https://img.shields.io/twitter/follow/MrMartineau.svg?label=Follow%20@MrMartineau"
55 |         alt="Follow @MrMartineau"
56 |       />
57 |     </a>
58 |     <a href="https://open.vscode.dev/organization/repository">
59 |       <img
60 |         src="https://open.vscode.dev/badges/open-in-vscode.svg"
61 |         alt="Open in Visual Studio Code"
62 |       />
63 |     </a>
64 |   </p>
65 | 
66 |   <p>
67 |     <a href="#features">Features</a> •
68 |     <a href="#Installation">Installation</a> • <a href="#usage">Usage</a> •
69 |     <a href="https://code-notes-example.netlify.com/">Demo</a>
70 |   </p>
71 | </div>
72 | ```
73 | 
74 | ### Footer
75 | 
76 | ```md
77 | ---
78 | 
79 | ## License
80 | 
81 | [MIT](https://choosealicense.com/licenses/mit/) © [Zander Martineau](https://zander.wtf)
82 | 
83 | > Made by Zander • [zander.wtf](https://zander.wtf) • [GitHub](https://github.com/mrmartineau/) • [Twitter](https://twitter.com/mrmartineau/)
84 | ```
85 | 


--------------------------------------------------------------------------------
/notes/redux-saga.md:
--------------------------------------------------------------------------------
  1 | ---
  2 | title: Redux Saga
  3 | tags:
  4 |   - react
  5 | created: 2020-03-22T23:14:36.000Z
  6 | modified: 2020-03-24T22:53:27.000Z
  7 | ---
  8 | 
  9 | > An alternative side effect model for Redux apps
 10 | 
 11 | https://redux-saga.js.org
 12 | https://github.com/redux-saga/redux-saga/
 13 | 
 14 | ## Routines
 15 | 
 16 | > Routines for redux-saga
 17 | 
 18 | https://github.com/afitiskin/redux-saga-routines
 19 | 
 20 | ```js
 21 | import { createRoutine } from 'redux-saga-routines'
 22 | 
 23 | const fetchData = createRoutine('FETCH_DATA')
 24 | ```
 25 | 
 26 | ### Access the action types
 27 | 
 28 | ```js
 29 | routine.TRIGGER === 'ACTION_TYPE_PREFIX/TRIGGER'
 30 | routine.REQUEST === 'ACTION_TYPE_PREFIX/REQUEST'
 31 | routine.SUCCESS === 'ACTION_TYPE_PREFIX/SUCCESS'
 32 | routine.FAILURE === 'ACTION_TYPE_PREFIX/FAILURE'
 33 | routine.FULFILL === 'ACTION_TYPE_PREFIX/FULFILL'
 34 | ```
 35 | 
 36 | You also have 5 action creators: trigger, request, success, failure, fulfill:
 37 | 
 38 | ```js
 39 | routine.trigger(payload) === { type: 'ACTION_TYPE_PREFIX/TRIGGER', payload }
 40 | routine.request(payload) === { type: 'ACTION_TYPE_PREFIX/REQUEST', payload }
 41 | routine.success(payload) === { type: 'ACTION_TYPE_PREFIX/SUCCESS', payload }
 42 | routine.failure(payload) === { type: 'ACTION_TYPE_PREFIX/FAILURE', payload }
 43 | routine.fulfill(payload) === { type: 'ACTION_TYPE_PREFIX/FULFILL', payload }
 44 | ```
 45 | 
 46 | ### Reducer
 47 | 
 48 | ```js
 49 | import produce from 'immer'
 50 | import { fetchData } from './routines'
 51 | 
 52 | const initialState = {
 53 |   data: null,
 54 |   loading: false,
 55 |   error: null
 56 | }
 57 | 
 58 | export const exampleReducer = (
 59 |   state = initialState,
 60 |   action: ExampleActionInterface
 61 | ) =>
 62 |   produce(state, draft => {
 63 |     switch (action.type) {
 64 |       case fetchData.REQUEST:
 65 |         draft.loading = true
 66 |         break
 67 |       case fetchData.SUCCESS:
 68 |         draft.loading = false
 69 |         draft.data = action.payload
 70 |         break
 71 |       case fetchData.FAILURE:
 72 |         draft.loading = false
 73 |         draft.error = true
 74 |         break
 75 |     }
 76 |   })
 77 | ```
 78 | 
 79 | ### Sagas
 80 | 
 81 | ```js
 82 | export function* fetchDataRequest(
 83 |   { payload },
 84 | ) {
 85 |   const { fromDate, toDate } = payload;
 86 |   try {
 87 |     const walletId = yield select(getWalletId);
 88 |     const { data } = yield call([walletAdapter, 'requestPendingTransactions'], {
 89 |       walletId,
 90 |       fromDate,
 91 |       toDate,
 92 |     });
 93 | 
 94 |     yield put(getPendingTransactions.success(transformTransactionValues(data)));
 95 | 
 96 |   } catch (error) {
 97 |     yield put(getPendingTransactions.failure(error));
 98 |   }
 99 | }
100 | 
101 | export function* walletSagas() {
102 |   yield takeEvery(
103 |     getPendingTransactions.REQUEST,
104 |     getPendingTransactionsRequest as any
105 |   );
106 | }
107 | ```
108 | 


--------------------------------------------------------------------------------
/notes/redux.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Redux
 3 | tags:
 4 |   - react
 5 | created: 2020-02-27T23:02:00.000Z
 6 | modified: 2020-03-24T22:53:27.000Z
 7 | ---
 8 | 
 9 | ## Basic example
10 | 
11 | ```jsx
12 | // index.ts
13 | import { connect } from 'react-redux'
14 | 
15 | import { Component, mapStateToProps, mapDispatchToProps } from './Component'
16 | 
17 | export const ConnectedComponent = connect(
18 |   mapStateToProps,
19 |   mapDispatchToProps
20 | )(UnconnectedComponent)
21 | ```
22 | 
23 | ```jsx
24 | // Component.tsx
25 | import React from 'react'
26 | import { doClearQuery } from './some/file/of/action/creators'
27 | 
28 | const Component = ({ query, results, clearQuery }) => (
29 |   <div>
30 |     query: {query}
31 |     <button onClick={clearQuery}>Clear</button>
32 |     <ul>
33 |       {results.map(result => (
34 |         <li>
35 |           <img src={result.url} alt={result.title} />
36 |           {result.title}
37 |         </li>
38 |       ))}
39 |     </ul>
40 |   </div>
41 | )
42 | 
43 | // mapStateToProps
44 | // For our select function we're returning an object using
45 | // the implicit return and wrapping it in `()`
46 | const mapStateToProps = appState => ({
47 |   results: appState.results,
48 |   query: appState.query
49 | })
50 | 
51 | // mapDispatchToProps
52 | // We could also use object shorthand here to avoid
53 | // building an object, as long as we're OK with the
54 | // props being named the same thing
55 | const mapDispatchToProps = { clearQuery: doClearQuery }
56 | ```
57 | 
58 | ## Selectors
59 | 
60 | ```js
61 | export const getSignedInStatus = user => user.isSignedIn
62 | export const getFullName = user => `${user.firstName} ${user.lastName}`
63 | export const getUsername = user => user.username
64 | ```
65 | 


--------------------------------------------------------------------------------
/notes/remove-array-duplicates.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Remove array duplicates
 3 | tags:
 4 |   - javascript
 5 | emoji: ❌
 6 | created: 2020-03-22T14:53:49.000Z
 7 | modified: 2020-04-29T15:13:20.000Z
 8 | ---
 9 | 
10 | ## Using `Set`
11 | 
12 | ```js
13 | const array = ['🐑', 1, 2, '🐑', '🐑', 3]
14 | 
15 | // Step 1
16 | const uniqueSet = new Set(array)
17 | // Set { '🐑', 1, 2, 3 }
18 | 
19 | // Step 2
20 | const backToArray = [...uniqueSet]
21 | // ['🐑', 1, 2, 3]
22 | 
23 | // or Step 1
24 | const uniqueSet = [...new Set(array)]
25 | // ['🐑', 1, 2, 3]
26 | ```
27 | 
28 | Source: https://www.samanthaming.com/tidbits/43-3-ways-to-remove-array-duplicates
29 | 


--------------------------------------------------------------------------------
/notes/remove-items-from-arrays.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Removing items from arrays
 3 | tags:
 4 |   - javascript
 5 | created: 2021-01-06T11:22:00.000Z
 6 | modified: 2021-01-06T11:22:00.000Z
 7 | emoji: ❌
 8 | ---
 9 | 
10 | ### Remove single item from array
11 | 
12 | ```js
13 | const removeItemFromArray = (arr, value) => {
14 |   var index = arr.indexOf(value)
15 |   if (index > -1) {
16 |     arr.splice(index, 1)
17 |   }
18 |   return arr
19 | }
20 | 
21 | // Usage
22 | console.log(removeItemFromArray([2, 5, 9, 1, 5, 8, 5], 5))
23 | ```
24 | 
25 | ### Remove multiple items from array
26 | 
27 | ```js
28 | const removeAllItemsFromArray = (arr, value) => {
29 |   var i = 0
30 |   while (i < arr.length) {
31 |     if (arr[i] === value) {
32 |       arr.splice(i, 1)
33 |     } else {
34 |       ++i
35 |     }
36 |   }
37 |   return arr
38 | }
39 | 
40 | // Usage
41 | console.log(removeAllItemsFromArray([2, 5, 9, 1, 5, 8, 5], 5))
42 | ```
43 | 


--------------------------------------------------------------------------------
/notes/render-if-role.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: RenderIfRole
 3 | tags:
 4 |   - react
 5 | emoji: ⚛
 6 | created: 2021-07-12T06:09:33.887Z
 7 | modified: 2021-11-11T12:29:12.563Z
 8 | ---
 9 | 
10 | ```tsx
11 | import { ReactNode } from 'react'
12 | import { useUserContext } from '../../providers'
13 | 
14 | export enum Roles {
15 |   none = 'none',
16 |   admin = 'admin',
17 |   superadmin = 'superadmin',
18 |   user = 'user',
19 |   readonly = 'readonly',
20 | }
21 | 
22 | export interface RenderIfRoleProps {
23 |   roles: Roles[]
24 |   children: ReactNode
25 | }
26 | 
27 | export const RenderIfRole = ({
28 |   roles,
29 |   children,
30 | }: RenderIfRoleProps): ReactNode | null => {
31 |   const { role } = useUserContext() // get user's current role, could also be passed as a prop
32 |   const providedRolesMatchUserRole = role && roles.includes(Roles[role])
33 | 
34 |   if (providedRolesMatchUserRole) {
35 |     return children
36 |   }
37 |   return null
38 | }
39 | ```
40 | 
41 | ## Usage
42 | 
43 | This component is used to conditionally show content based on a user's role.
44 | 
45 | This link will only be shown if the current user's role matches `Roles.admin`
46 | 
47 | ```tsx
48 | <RenderIfRole roles={[Roles.admin]}>
49 |   <Link to={INVITE_PAGE_PATH}>Invite</Link>
50 | </RenderIfRole>
51 | ```
52 | 
53 | Multiple roles can be passed in to the `roles` prop, like so:
54 | 
55 | ```tsx
56 | <RenderIfRole roles={[Roles.client, Roles.trainee]}>Some content</RenderIfRole>
57 | ```
58 | 


--------------------------------------------------------------------------------
/notes/save-scroll-position.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Save sidebar scroll position
 3 | tags:
 4 |   - javascript
 5 | link: 'https://twitter.com/hakimel/status/1262337514741706752'
 6 | created: 2020-05-19T08:25:55.000Z
 7 | modified: 2020-05-19T08:25:55.000Z
 8 | ---
 9 | 
10 | ```ts
11 | let sidebar = document.querySelector('.sidebar')
12 | 
13 | let top = sessionStorage.getItem('sidebar-scroll')
14 | 
15 | if (top !== null) {
16 |   sidebar.scrollTop = parseInt(top, 10)
17 | }
18 | 
19 | window.addEventListener('beforeunload', () => {
20 |   sessionStorage.setItem('sidebar-scroll', sidebar.scrollTop)
21 | })
22 | ```
23 | 


--------------------------------------------------------------------------------
/notes/security.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Security
 3 | tags:
 4 |   - node
 5 | emoji: 👮‍♂️
 6 | created: 2020-03-10T14:58:40.000Z
 7 | modified: 2020-03-26T23:06:06.000Z
 8 | ---
 9 | 
10 | [OWASP Top Ten](https://owasp.org/www-project-top-ten/)
11 | 
12 | ## Node
13 | 
14 | - [Node Security best practices](https://github.com/goldbergyoni/nodebestpractices#6-security-best-practices)
15 | - [eslint-plugin-security](https://github.com/nodesecurity/eslint-plugin-security)
16 | 
17 | ### Express middlewares
18 | 
19 | - [helmet](https://github.com/helmetjs/helmet)
20 | - [express-defend](https://github.com/akos-sereg/express-defend)
21 | - [guestlist](https://github.com/i-like-robots/guestlist)
22 | 
23 | ## Threat modelling
24 | 
25 | ### [STRIDE](https://en.wikipedia.org/wiki/STRIDE_%28security%29)
26 | 
27 | | Threat                                                                                                                                            | Desired property  |
28 | | ------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------- |
29 | | [**S**poofing](https://en.wikipedia.org/wiki/Spoofing_attack)                                                                                     | Authenticity      |
30 | | [**T**ampering](<https://en.wikipedia.org/wiki/Tampering_(crime)>)                                                                                | Integrity         |
31 | | [**R**epudiation](https://en.wikipedia.org/wiki/Non-repudiation)                                                                                  | Non-repudiability |
32 | | **I**nformation disclosure ([privacy breach](https://en.wikipedia.org/wiki/Data_privacy) or [data leak](https://en.wikipedia.org/wiki/Data_leak)) | Confidentiality   |
33 | | [**D**enial of Service](https://en.wikipedia.org/wiki/Denial-of-service_attack)                                                                   | Availability      |
34 | | [**E**levation of Privilege](https://en.wikipedia.org/wiki/Privilege_escalation)                                                                  | Authorisation     |
35 | 
36 | ### [Attack tree](https://en.wikipedia.org/wiki/Attack_tree)
37 | 
38 | Attack trees are conceptual diagrams showing how an asset, or target, might be attacked. Attack trees have been used in a variety of applications. In the field of information technology, they have been used to describe threats on computer systems and possible attacks to realize those threats. However, their use is not restricted to the analysis of conventional information systems. They are widely used in the fields of defense and aerospace for the analysis of threats against tamper resistant electronics systems (e.g., avionics on military aircraft).[1] Attack trees are increasingly being applied to computer control systems (especially relating to the electric power grid ).[2] Attack trees have also been used to understand threats to physical systems.
39 | 
40 | ### [DREAD](<https://en.wikipedia.org/wiki/DREAD_(risk_assessment_model)>)
41 | 
42 | DREAD is part of a system for risk-assessing computer security threats previously used at Microsoft and although currently used by OpenStack and other corporations[citation needed] it was abandoned by its creators [1]. It provides a mnemonic for risk rating security threats using five categories.
43 | 
44 | The categories are:
45 | 
46 | - **Damage** – how bad would an attack be?
47 | - **Reproducibility** – how easy is it to reproduce the attack?
48 | - **Exploitability** – how much work is it to launch the attack?
49 | - **Affected** users – how many people will be impacted?
50 | - **Discoverability** – how easy is it to discover the threat?
51 | 


--------------------------------------------------------------------------------
/notes/showing-hiding-content.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Showing/hiding content
 3 | emoji: ♿
 4 | created: 2020-12-29T10:31:32.000Z
 5 | modified: 2020-12-29T17:17:21.000Z
 6 | tags:
 7 |   - html
 8 |   - css
 9 | ---
10 | 
11 | ## Hide from all users
12 | 
13 | ```css
14 | a {
15 |   display: none;
16 |   /* or */
17 |   visibility: hidden;
18 | }
19 | ```
20 | 
21 | or by using the `hidden` attribute
22 | 
23 | ```html
24 | <div hidden />
25 | ```
26 | 
27 | ## Visually hidden
28 | 
29 | ..but still accessible to assistive technologies.
30 | 
31 | > The `:not` portions of the selector are allowing a means for any focusable element to become visible when focused/active by a user. So elements that normally can’t receive focus, like paragraphs, will not become visible if a user navigates through content via screen reader controls or the Tab key, but natively focusable elements, or elements with a non-negative tabindex will have these elements appear in the DOM on focus.
32 | 
33 | ```css
34 | /* ie9+ */
35 | .visually-hidden:not(:focus):not(:active) {
36 |   clip: rect(0 0 0 0);
37 |   clip-path: inset(50%);
38 |   height: 1px;
39 |   overflow: hidden;
40 |   position: absolute;
41 |   white-space: nowrap;
42 |   width: 1px;
43 | }
44 | ```
45 | 
46 | If you need to visually hide everything, including focusable elements, remove `:not(:focus)` from the selector.
47 | 
48 | ## Hide from assistive technology
49 | 
50 | The `aria-hidden="true"` attribute produces the opposite effect of the `.visually-hidden` class. It hides content from assistive technology, but not visually. This can be helpful in cases where there are visual cues that screen readers do not need to announce, such as decorative icons that accompany text labels.
51 | 
52 | ## Useful links:
53 | 
54 | - https://www.scottohara.me/blog/2017/04/14/inclusively-hidden.html
55 | - https://www.a11yproject.com/posts/2013-01-11-how-to-hide-content
56 | - https://webaim.org/techniques/css/invisiblecontent
57 | 


--------------------------------------------------------------------------------
/notes/sql.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: SQL
 3 | created: 2020-09-11T10:39:11.000Z
 4 | modified: 2021-11-11T11:10:43.023Z
 5 | link: https://www.db-book.com/slides-dir/PDF-dir/ch3.pdf
 6 | ---
 7 | 
 8 | ```sql
 9 | -- Comments start with two hyphens. End each command with a semicolon.
10 | 
11 | -- SQL is not case-sensitive about keywords. The sample commands here
12 | -- follow the convention of spelling them in upper-case because it makes
13 | -- it easier to distinguish them from database, table, and column names.
14 | 
15 | -- Create and delete a database. Database and table names are case-sensitive.
16 | CREATE DATABASE someDatabase;
17 | DROP DATABASE someDatabase;
18 | 
19 | -- List available databases.
20 | SHOW DATABASES;
21 | 
22 | -- Use a particular existing database.
23 | USE employees;
24 | 
25 | -- Select all rows and columns from the current database's departments table.
26 | -- Default activity is for the interpreter to scroll the results on your screen.
27 | SELECT * FROM departments;
28 | 
29 | -- Retrieve all rows from the departments table,
30 | -- but only the dept_no and dept_name columns.
31 | -- Splitting up commands across lines is OK.
32 | SELECT dept_no,
33 |        dept_name FROM departments;
34 | 
35 | -- Retrieve all departments columns, but just 5 rows.
36 | SELECT * FROM departments LIMIT 5;
37 | 
38 | -- Retrieve dept_name column values from the departments
39 | -- table where the dept_name value has the substring 'en'.
40 | SELECT dept_name FROM departments WHERE dept_name LIKE '%en%';
41 | 
42 | -- Retrieve all columns from the departments table where the dept_name
43 | -- column starts with an 'S' and has exactly 4 characters after it.
44 | SELECT * FROM departments WHERE dept_name LIKE 'S____';
45 | 
46 | -- Select title values from the titles table but don't show duplicates.
47 | SELECT DISTINCT title FROM titles;
48 | 
49 | -- Same as above, but sorted (case-sensitive) by the title values.
50 | SELECT DISTINCT title FROM titles ORDER BY title;
51 | 
52 | -- Show the number of rows in the departments table.
53 | SELECT COUNT(*) FROM departments;
54 | 
55 | -- Show the number of rows in the departments table that
56 | -- have 'en' as a substring of the dept_name value.
57 | SELECT COUNT(*) FROM departments WHERE dept_name LIKE '%en%';
58 | 
59 | -- A JOIN of information from multiple tables: the titles table shows
60 | -- who had what job titles, by their employee numbers, from what
61 | -- date to what date. Retrieve this information, but instead of the
62 | -- employee number, use the employee number as a cross-reference to
63 | -- the employees table to get each employee's first and last name
64 | -- instead. (And only get 10 rows.)
65 | 
66 | SELECT employees.first_name, employees.last_name,
67 |        titles.title, titles.from_date, titles.to_date
68 | FROM titles INNER JOIN employees ON
69 |        employees.emp_no = titles.emp_no LIMIT 10;
70 | 
71 | -- List all the tables in all the databases. Implementations typically provide
72 | -- their own shortcut command to do this with the database currently in use.
73 | SELECT * FROM INFORMATION_SCHEMA.TABLES
74 | WHERE TABLE_TYPE='BASE TABLE';
75 | 
76 | -- Create a table called tablename1, with the two columns shown, for
77 | -- the database currently in use. Lots of other options are available
78 | -- for how you specify the columns, such as their datatypes.
79 | CREATE TABLE tablename1 (fname VARCHAR(20), lname VARCHAR(20));
80 | 
81 | -- Insert a row of data into the table tablename1. This assumes that the
82 | -- table has been defined to accept these values as appropriate for it.
83 | INSERT INTO tablename1 VALUES('Richard','Mutt');
84 | 
85 | -- In tablename1, change the fname value to 'John'
86 | -- for all rows that have an lname value of 'Mutt'.
87 | UPDATE tablename1 SET fname='John' WHERE lname='Mutt';
88 | 
89 | -- Delete rows from the tablename1 table
90 | -- where the lname value begins with 'M'.
91 | DELETE FROM tablename1 WHERE lname like 'M%';
92 | 
93 | -- Delete all rows from the tablename1 table, leaving the empty table.
94 | DELETE FROM tablename1;
95 | 
96 | -- Remove the entire tablename1 table.
97 | DROP TABLE tablename1;
98 | ```
99 | 


--------------------------------------------------------------------------------
/notes/structured-data.md:
--------------------------------------------------------------------------------
  1 | ---
  2 | title: Schema.org structured data
  3 | created: 2020-06-04T13:43:19.000Z
  4 | modified: 2020-06-04T13:43:19.000Z
  5 | ---
  6 | 
  7 | ## JSON-LD
  8 | 
  9 | ### Article
 10 | 
 11 | https://developers.google.com/search/docs/data-types/article
 12 | 
 13 | ```html
 14 | <script type="application/ld+json">
 15 |   {
 16 |     "@context": "https://schema.org",
 17 |     "@type": "NewsArticle",
 18 |     "mainEntityOfPage": {
 19 |       "@type": "WebPage",
 20 |       "@id": "https://google.com/article"
 21 |     },
 22 |     "headline": "Article headline",
 23 |     "image": [
 24 |       "https://example.com/photos/1x1/photo.jpg",
 25 |       "https://example.com/photos/4x3/photo.jpg",
 26 |       "https://example.com/photos/16x9/photo.jpg"
 27 |     ],
 28 |     "datePublished": "2015-02-05T08:00:00+08:00",
 29 |     "dateModified": "2015-02-05T09:20:00+08:00",
 30 |     "author": {
 31 |       "@type": "Person",
 32 |       "name": "John Doe"
 33 |     },
 34 |     "publisher": {
 35 |       "@type": "Organization",
 36 |       "name": "Google",
 37 |       "logo": {
 38 |         "@type": "ImageObject",
 39 |         "url": "https://google.com/logo.jpg"
 40 |       }
 41 |     }
 42 |   }
 43 | </script>
 44 | ```
 45 | 
 46 | ### Product
 47 | 
 48 | https://developers.google.com/search/docs/data-types/product
 49 | 
 50 | ```html
 51 | <script type="application/ld+json">
 52 |   {
 53 |     "@context": "https://schema.org/",
 54 |     "@type": "Product",
 55 |     "name": "Executive Anvil",
 56 |     "image": [
 57 |       "https://example.com/photos/1x1/photo.jpg",
 58 |       "https://example.com/photos/4x3/photo.jpg",
 59 |       "https://example.com/photos/16x9/photo.jpg"
 60 |     ],
 61 |     "description": "Sleeker than ACME's Classic Anvil, the Executive Anvil is perfect for the business traveler looking for something to drop from a height.",
 62 |     "sku": "0446310786",
 63 |     "mpn": "925872",
 64 |     "brand": {
 65 |       "@type": "Brand",
 66 |       "name": "ACME"
 67 |     },
 68 |     "review": {
 69 |       "@type": "Review",
 70 |       "reviewRating": {
 71 |         "@type": "Rating",
 72 |         "ratingValue": "4",
 73 |         "bestRating": "5"
 74 |       },
 75 |       "author": {
 76 |         "@type": "Person",
 77 |         "name": "Fred Benson"
 78 |       }
 79 |     },
 80 |     "aggregateRating": {
 81 |       "@type": "AggregateRating",
 82 |       "ratingValue": "4.4",
 83 |       "reviewCount": "89"
 84 |     },
 85 |     "offers": {
 86 |       "@type": "Offer",
 87 |       "url": "https://example.com/anvil",
 88 |       "priceCurrency": "USD",
 89 |       "price": "119.99",
 90 |       "priceValidUntil": "2020-11-20",
 91 |       "itemCondition": "https://schema.org/UsedCondition",
 92 |       "availability": "https://schema.org/InStock",
 93 |       "seller": {
 94 |         "@type": "Organization",
 95 |         "name": "Executive Objects"
 96 |       }
 97 |     }
 98 |   }
 99 | </script>
100 | ```
101 | 


--------------------------------------------------------------------------------
/notes/styled-components.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Styled Components
 3 | tags:
 4 |   - react
 5 |   - typescript
 6 | emoji: 💅
 7 | created: 2020-02-27T23:02:00.000Z
 8 | modified: 2020-05-19T08:25:55.000Z
 9 | ---
10 | 
11 | ## Basic component
12 | 
13 | ```ts
14 | import styled from 'styled-components'
15 | 
16 | interface ComponentProps {}
17 | 
18 | export const Component = styled.div<ComponentProps>``
19 | ```
20 | 
21 | ### Tip
22 | 
23 | You can get the props at the top of the component so you don't have to do it in every property that needs them, avoiding all the copy pasting.
24 | 
25 | ```js
26 | import styled, { css } from 'styled-components'
27 | 
28 | // 👎 instead ofgetting the props in every line:
29 | const Post = styled.article`
30 |   font-size: ${(props) => props.theme.fontSizes.md};
31 |   color: ${(props) => props.theme.colors.bodyText};
32 | `
33 | 
34 | // 👍 get them once at the root to make your code cleaner
35 | const Post = styled.article`
36 |   ${({ theme }) =>
37 |     css`
38 |       font-size: ${theme.fontSizes.md};
39 |       color: ${theme.colors.bodyText};
40 |     `}
41 | `
42 | ```
43 | 
44 | h/t https://twitter.com/NikkitaFTW/status/1262423045874089990
45 | 
46 | #### Even better version:
47 | 
48 | ```js
49 | import styled, { css } from 'styled-components'
50 | 
51 | const Post = styled.article({ theme }) => css`
52 |   font-size: ${theme.fontSizes.md};
53 |   color: ${theme.colors.bodyText};
54 | `)
55 | ```
56 | 


--------------------------------------------------------------------------------
/notes/switch-true.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Switch(true)
 3 | tags:
 4 |   - javascript
 5 | created: 2021-01-06T11:21:30.000Z
 6 | modified: 2021-01-06T11:21:30.000Z
 7 | emoji: 🔦
 8 | ---
 9 | 
10 | You can use `switch (true)` instead of multiple `if/else` statements
11 | 
12 | ```js
13 | const x = 1
14 | 
15 | switch (true) {
16 |   case: x === 1 {
17 |     // ...
18 |     break
19 |   }
20 |   case: 5 < x {
21 |     // ...
22 |     break
23 |   }
24 | }
25 | ```
26 | 


--------------------------------------------------------------------------------
/notes/testing-library.md:
--------------------------------------------------------------------------------
  1 | ---
  2 | title: Testing library
  3 | tags:
  4 |   - testing
  5 | emoji: 🧪
  6 | link: 'https://testing-library.com'
  7 | created: 2020-03-25T17:00:14.000Z
  8 | modified: 2020-05-11T11:47:16.000Z
  9 | ---
 10 | 
 11 | ## DOM
 12 | 
 13 | https://testing-library.com/docs/dom-testing-library/intro
 14 | 
 15 | ### Queries
 16 | 
 17 | https://testing-library.com/docs/dom-testing-library/api-queries
 18 | 
 19 | #### Variants
 20 | 
 21 | ##### getBy
 22 | 
 23 | `getBy*` queries return the first matching node for a query, and throw an error
 24 | if no elements match or if more than one match is found (use `getAllBy`
 25 | instead).
 26 | 
 27 | ##### getAllBy
 28 | 
 29 | `getAllBy*` queries return an array of all matching nodes for a query, and throw
 30 | an error if no elements match.
 31 | 
 32 | ##### queryBy
 33 | 
 34 | `queryBy*` queries return the first matching node for a query, and return `null`
 35 | if no elements match. This is useful for asserting an element that is not
 36 | present. This throws if more than one match is found (use `queryAllBy` instead).
 37 | 
 38 | ##### queryAllBy
 39 | 
 40 | `queryAllBy*` queries return an array of all matching nodes for a query, and
 41 | return an empty array (`[]`) if no elements match.
 42 | 
 43 | ##### findBy
 44 | 
 45 | `findBy*` queries return a promise which resolves when an element is found which
 46 | matches the given query. The promise is rejected if no element is found or if
 47 | more than one element is found after a default timeout of `4500`ms. If you need
 48 | to find more than one element, then use `findAllBy`.
 49 | 
 50 | > Note, this is a simple combination of `getBy*` queries and
 51 | > [`waitForElement`](/docs/api-async#waitforelement). The `findBy*` queries
 52 | > accept the `waitForElement` options as the last argument. (i.e.
 53 | > `findByText(container, 'text', queryOptions, waitForElementOptions)`)
 54 | 
 55 | ##### findAllBy
 56 | 
 57 | `findAllBy*` queries return a promise which resolves to an array of elements
 58 | when any elements are found which match the given query. The promise is rejected
 59 | if no elements are found after a default timeout of `4500`ms.
 60 | 
 61 | ## React
 62 | 
 63 | https://testing-library.com/docs/react-testing-library/intro
 64 | 
 65 | ```js
 66 | import React from 'react'
 67 | import { render, fireEvent } from '@testing-library/react'
 68 | 
 69 | import { Button } from './Button'
 70 | 
 71 | describe('Given a Button component', () => {
 72 |   describe('when it is rendered', () => {
 73 |     test('should have the text `This is a button`', () => {
 74 |       // Arrange
 75 |       const { getByText } = render(<Button>This is a button</Button>)
 76 | 
 77 |       // Act
 78 |       fireEvent.click(getByText('This is a button'))
 79 | 
 80 |       // Assert
 81 |       expect(getByText('This is a button')).toHaveTextContent(
 82 |         'This is a button'
 83 |       )
 84 |     })
 85 |   })
 86 | })
 87 | ```
 88 | 
 89 | ## Cypress
 90 | 
 91 | https://testing-library.com/docs/cypress-testing-library/intro
 92 | 
 93 | ```js
 94 | cy.findAllByText('Jackie Chan').click()
 95 | cy.findByText('Button Text').should('exist')
 96 | cy.findByText('Non-existing Button Text').should('not.exist')
 97 | cy.findByLabelText('Label text', { timeout: 7000 }).should('exist')
 98 | 
 99 | // findAllByText _inside_ a form element
100 | cy.get('form').findByText('Button Text').should('exist')
101 | cy.get('form').then((subject) => {
102 |   cy.findByText('Button Text', { container: subject }).should('exist')
103 | })
104 | ```
105 | 


--------------------------------------------------------------------------------
/notes/theme-ui.md:
--------------------------------------------------------------------------------
  1 | ---
  2 | title: Theme UI
  3 | tags:
  4 |   - react
  5 | emoji: 🎨
  6 | link: 'https://theme-ui.com'
  7 | created: 2020-02-27T23:02:00.000Z
  8 | modified: 2020-06-11T14:47:15.000Z
  9 | ---
 10 | 
 11 | ## Theme spec
 12 | 
 13 | https://theme-ui.com/theme-spec
 14 | 
 15 | ## JSX pragma and the `sx` prop
 16 | 
 17 | https://theme-ui.com/sx-prop
 18 | 
 19 | ```jsx
 20 | /** @jsx jsx */
 21 | import { jsx } from 'theme-ui'
 22 | ```
 23 | 
 24 | ## Packages and methods
 25 | 
 26 | ### useThemeUI
 27 | 
 28 | https://theme-ui.com/use-theme-ui
 29 | 
 30 | ```js
 31 | import { useThemeUI } from 'theme-ui'
 32 | 
 33 | export const MyComponent = () => {
 34 |   const { theme, colorMode, setColorMode } = useThemeUI()
 35 |   return <pre>{JSON.stringify(theme, null, 2)}</pre>
 36 | }
 37 | ```
 38 | 
 39 | ## Using custom theme object values in `sx` prop
 40 | 
 41 | Use the `variant` key as documented [here](https://theme-ui.com/theme-spec#variants).
 42 | 
 43 | ```jsx
 44 | // your theme object
 45 | const theme = {
 46 |   motion: {
 47 |     defaultTransition: {
 48 |       transition: 'all 300ms ease-in-out',
 49 |     },
 50 |   },
 51 | }
 52 | 
 53 | // use the `variant` key
 54 | const Link = () => <a sx={{ variant: 'motion.defaultTransition' }}>Click me</a>
 55 | 
 56 | // could also do this
 57 | const Link = () => (
 58 |   <a sx={{ transition: (theme) => theme.motion.defaultTransition.transition }}>
 59 |     Click me
 60 |   </a>
 61 | )
 62 | ```
 63 | 
 64 | ### @theme-ui/color
 65 | 
 66 | https://theme-ui.com/packages/color
 67 | 
 68 | ```js
 69 | /** @jsx jsx */
 70 | import { jsx } from 'theme-ui'
 71 | import { darken, lighten } from '@theme-ui/color'
 72 | export default (props) => (
 73 |   <div
 74 |     {...props}
 75 |     sx={{
 76 |       color: darken('primary', 0.25),
 77 |       bg: lighten('primary', 0.875),
 78 |     }}
 79 |   />
 80 | )
 81 | ```
 82 | 
 83 | ## Using TypeScript
 84 | 
 85 | ### Adding an sx prop to a custom component
 86 | 
 87 | This example allows a user to pass an `sx` prop to a child component. In order to do that, you'll need an interface from `theme-ui`: [`SxStyleProp`]()
 88 | 
 89 | ```tsx
 90 | import React, { FunctionComponent } from 'react'
 91 | import { SxStyleProp } from 'theme-ui'
 92 | import { Heading } from 'theme-ui'
 93 | 
 94 | type HeadingTags = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
 95 | 
 96 | interface MassiveTitleProps {
 97 |   sx?: SxStyleProp
 98 |   as?: HeadingTags
 99 | }
100 | 
101 | export const MassiveTitle: FunctionComponent<MassiveTitleProps> = ({
102 |   sx,
103 |   as = 'h1',
104 |   children,
105 | }) => {
106 |   return (
107 |     <Heading
108 |       as={as}
109 |       sx={{
110 |         color: 'primary',
111 |         ...sx,
112 |       }}
113 |     >
114 |       {children}
115 |     </Heading>
116 |   )
117 | }
118 | ```
119 | 
120 | ## Tips
121 | 
122 | ### Object styles
123 | 
124 | - https://theme-ui.com/guides/object-styles
125 | - https://emotion.sh/docs/object-styles
126 | 
127 | #### Reference the theme within
128 | 
129 | ```js
130 | {
131 |   mx: theme => `-${theme.space[2]}`,
132 | },
133 | ```
134 | 
135 | #### [Pseudo elements](https://theme-ui.com/guides/object-styles#pseudo-elements)
136 | 
137 | ```js
138 | {
139 |   "::before": {
140 |     content: '""',
141 |     display: 'block',
142 |     width: 32,
143 |     height: 32,
144 |     backgroundColor: 'tomato',
145 |   }
146 | }
147 | ```
148 | 


--------------------------------------------------------------------------------
/notes/typescript-catch.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: TypeScript catch block errors
 3 | tags:
 4 |   - typescript
 5 | created: 2021-11-21T20:06:11.062Z
 6 | modified: 2021-12-06T15:20:48.665Z
 7 | link: https://kentcdodds.com/blog/get-a-catch-block-error-message-with-typescript
 8 | ---
 9 | 
10 | ## Basic example
11 | 
12 | This example does not extract logic from the catch block
13 | 
14 | ```ts
15 | try {
16 |   // something that might throw
17 | } catch (error: unknown) {
18 |   // do something with the error message
19 |   if (error instanceof Error) {
20 |     return error.message
21 |   }
22 |   return String(error)
23 | }
24 | ```
25 | 
26 | ## Extract the error handling logic
27 | 
28 | ```ts
29 | const getErrorMessage = (error: unknown) => {
30 |   if (error instanceof Error) return error.message
31 |   return String(error)
32 | }
33 | 
34 | const reportError = ({ message }: { message: string }) => {
35 |   // send the error to our logging service...
36 | }
37 | 
38 | try {
39 |   throw new Error('Oh no!')
40 | } catch (error) {
41 |   const errorMessage = getErrorMessage(error)
42 |   console.error(`🚀 ~ errorMessage`, errorMessage)
43 | 
44 |   // we'll proceed, but let's report it
45 |   reportError({ message: errorMessage })
46 | }
47 | ```
48 | 
49 | ## More robust example
50 | 
51 | The above solution might not fit all cases, since many frameworks throw errors that comply to the `Error` api, but aren't instance of `Error`. [🔗](https://github.com/kentcdodds/kentcdodds.com/issues/206)
52 | 
53 | ```ts
54 | type ErrorWithMessage = {
55 |   message: string
56 | }
57 | 
58 | const isErrorWithMessage = (error: unknown): error is ErrorWithMessage => {
59 |   return (
60 |     typeof error === 'object' &&
61 |     error !== null &&
62 |     'message' in error &&
63 |     typeof (error as Record<string, unknown>).message === 'string'
64 |   )
65 | }
66 | 
67 | const toErrorWithMessage = (maybeError: unknown): ErrorWithMessage => {
68 |   if (isErrorWithMessage(maybeError)) return maybeError
69 | 
70 |   try {
71 |     return new Error(JSON.stringify(maybeError))
72 |   } catch {
73 |     // fallback in case there's an error stringifying the maybeError
74 |     // like with circular references for example.
75 |     return new Error(String(maybeError))
76 |   }
77 | }
78 | 
79 | const getErrorMessage = (error: unknown) => {
80 |   return toErrorWithMessage(error).message
81 | }
82 | ```
83 | 
84 | ### Usage
85 | 
86 | ```ts
87 | try {
88 |   throw new Error('Oh no!')
89 | } catch (error) {
90 |   const errorMessage = getErrorMessage(error)
91 |   console.error(`🚀 ~ errorMessage`, errorMessage)
92 |   // we'll proceed, but let's report it
93 |   reportError({ message: errorMessage })
94 | }
95 | ```
96 | 
97 | Some very detailed info can be found at https://joefallon.net/2018/09/typescript-try-catch-finally-and-custom-errors/
98 | 


--------------------------------------------------------------------------------
/notes/typescript.md:
--------------------------------------------------------------------------------
  1 | ---
  2 | title: TypeScript
  3 | tags:
  4 |   - typescript
  5 | created: 2020-02-27T23:02:00.000Z
  6 | modified: 2021-04-22T18:06:11.062Z
  7 | ---
  8 | 
  9 | - [TypeScript Deep Dive](https://basarat.gitbook.io/typescript/)
 10 | - The tsconfig Schema: http://json.schemastore.org/tsconfig
 11 | 
 12 | ## Built-in utility types
 13 | 
 14 | https://www.typescriptlang.org/docs/handbook/utility-types.html
 15 | 
 16 | ```ts
 17 | /**
 18 |  * Make all properties in T optional
 19 |  */
 20 | type Partial<T> = {
 21 |   [P in keyof T]?: T[P]
 22 | }
 23 | // e.g.
 24 | Partial<Todo>
 25 | 
 26 | /**
 27 |  * Make all properties in T required
 28 |  */
 29 | type Required<T> = {
 30 |   [P in keyof T]-?: T[P]
 31 | }
 32 | // e.g.
 33 | Required<Props>
 34 | 
 35 | /**
 36 |  * Make all properties in T readonly
 37 |  */
 38 | type Readonly<T> = {
 39 |   readonly [P in keyof T]: T[P]
 40 | }
 41 | // e.g.
 42 | Readonly<Todo>
 43 | 
 44 | /**
 45 |  * From T, pick a set of properties whose keys are in the union K
 46 |  */
 47 | type Pick<T, K extends keyof T> = {
 48 |   [P in K]: T[P]
 49 | }
 50 | // e.g.
 51 | Pick<Todo, "title" | "completed">;
 52 | 
 53 | /**
 54 |  * Construct a type with a set of properties K of type T
 55 |  */
 56 | type Record<K extends keyof any, T> = {
 57 |   [P in K]: T
 58 | }
 59 | // e.g.
 60 | Record<string, number>
 61 | Record<string, string[]>
 62 | Record<string, {
 63 |   age: string
 64 | }>
 65 | 
 66 | /**
 67 |  * Exclude from T those types that are assignable to U
 68 |  */
 69 | type Exclude<T, U> = T extends U ? never : T
 70 | // e.g.
 71 | Exclude<"a" | "b" | "c", "a">
 72 | 
 73 | /**
 74 |  * Extract from T those types that are assignable to U
 75 |  */
 76 | type Extract<T, U> = T extends U ? T : never
 77 | // e.g.
 78 | Extract<"a" | "b" | "c", "a" | "f">
 79 | 
 80 | /**
 81 |  * Construct a type with the properties of T except for those in type K.
 82 |  */
 83 | type Omit<T, K extends keyof any> = Pick<T, Exclude<keyof T, K>>
 84 | // e.g.
 85 | Omit<Todo, "completed" | "createdAt">
 86 | 
 87 | /**
 88 |  * Exclude null and undefined from T
 89 |  */
 90 | type NonNullable<T> = T extends null | undefined ? never : T
 91 | // e.g.
 92 | NonNullable<string | number | undefined>
 93 | 
 94 | /**
 95 |  * Constructs a tuple type from the types used in the parameters of a function type Type.
 96 |  */
 97 | type Parameters<T extends (...args: any) => any> = T extends (...args: infer P) => any ? P : never
 98 | // e.g.
 99 | Parameters<(s: string) => void>
100 | 
101 | /**
102 |  * Constructs a tuple or array type from the types of a constructor function type. It produces a tuple type with all the parameter types (or the type never if Type is not a function).
103 |  */
104 | type ConstructorParameters<T extends new (...args: any) => any> = T extends new (...args: infer P) => any ? P : never
105 | // e.g.
106 | ConstructorParameters<ErrorConstructor>
107 | 
108 | /**
109 |  * Obtain the return type of a function type
110 |  */
111 | type ReturnType<T extends (...args: any) => any> = T extends (...args: any) => infer R ? R : any
112 | // e.g.
113 | ReturnType<(s: string) => void>
114 | 
115 | /**
116 |  * Obtain the return type of a constructor function type
117 |  */
118 | type InstanceType<T extends new (...args: any) => any> = T extends new (...args: any) => infer R ? R : any
119 | 
120 | /**
121 |  * Convert string literal type to uppercase
122 |  */
123 | type Uppercase<S extends string> = intrinsic
124 | 
125 | /**
126 |  * Convert string literal type to lowercase
127 |  */
128 | type Lowercase<S extends string> = intrinsic
129 | 
130 | /**
131 |  * Convert first character of string literal type to uppercase
132 |  */
133 | type Capitalize<S extends string> = intrinsic
134 | 
135 | /**
136 |  * Convert first character of string literal type to lowercase
137 |  */
138 | type Uncapitalize<S extends string> = intrinsic
139 | 
140 | /**
141 |  * Marker for contextual 'this' type
142 |  */
143 | interface ThisType<T> { }
144 | ```
145 | 
146 | ## Custom types
147 | 
148 | ```ts
149 | // Convert specified properties of T to be optional
150 | type WithOptional<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>
151 | 
152 | type NewType = WithOptional<OldInterface, 'date' | 'title'>
153 | ```
154 | 
155 | ## Creating type definitions for npm packages
156 | 
157 | If an npm package does not provide types, it is advisable to add your own in a declaration file (`.d.ts`). Here is an example for the `sum-float` package.
158 | 
159 | ```ts
160 | // sum-float.d.ts
161 | declare module 'sum-float' {
162 |   export const SumFloat: (a: number, b: number) => number
163 |   export const DecimalPart: (a: number) => number
164 | }
165 | ```
166 | 


--------------------------------------------------------------------------------
/notes/url.md:
--------------------------------------------------------------------------------
  1 | ---
  2 | title: URL & URLSearchParams
  3 | created: 2020-12-29T10:31:32.000Z
  4 | modified: 2022-11-25T10:52:04.000Z
  5 | tags:
  6 |   - javascript
  7 | ---
  8 | 
  9 | ## URL
 10 | 
 11 | Docs: http://developer.mozilla.org/en-US/docs/Web/API/URL
 12 | 
 13 | ```js
 14 | const url = new URL('https://mysite.com/login?user=zander&page=news#hello')
 15 | 
 16 | url.hostname // mysite.com
 17 | url.pathname // /login
 18 | url.href // https://mysite.com/login?user=zander&page=news#hello
 19 | url.origin // https://mysite.com
 20 | url.search // ?user=zander&page=news
 21 | url.hash // #hello
 22 | ```
 23 | 
 24 | ## URLSearchParams
 25 | 
 26 | Docs: http://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams/URLSearchParams
 27 | 
 28 | ```js
 29 | // example.com?much=wow
 30 | const params = new URLSearchParams(
 31 |   'https://mysite.com/login?user=zander&page=news#hello',
 32 | )
 33 | 
 34 | params.has('user') // true
 35 | params.get('user') // 'zander'
 36 | 
 37 | params.set('page', 'code')
 38 | params.toString() // user=zander&page=code
 39 | 
 40 | for ([key, value] of params) {
 41 |   // ...
 42 | }
 43 | 
 44 | params.delete('page')
 45 | params.toString() // user=zander
 46 | ```
 47 | 
 48 | ### To convert a url with search params to an object:
 49 | 
 50 | ```ts
 51 | // one liner
 52 | const params = Object.fromEntries(
 53 |   new URLSearchParams(
 54 |     new URL('https://mysite.com/login?user=zander&page=news#hello').search,
 55 |   ),
 56 | )
 57 | 
 58 | // multi-line
 59 | const url = new URL('https://mysite.com/login?user=zander&page=news#hello')
 60 | const urlParams = new URLSearchParams(url.search)
 61 | const params = Object.fromEntries(urlParams)
 62 | ```
 63 | 
 64 | Polyfill: https://github.com/ungap/url-search-params#readme
 65 | 
 66 | ## Use `proper-url-join` to construct a url
 67 | 
 68 | https://github.com/moxystudio/js-proper-url-join
 69 | 
 70 | ```ts
 71 | import urlJoin from 'proper-url-join'
 72 | 
 73 | urlJoin('foo', 'bar') // /foo/bar
 74 | urlJoin('/foo/', '/bar/') // /foo/bar
 75 | urlJoin('foo', '', 'bar') // /foo/bar
 76 | urlJoin('foo', undefined, 'bar') // /foo/bar
 77 | urlJoin('foo', null, 'bar') // /foo/bar
 78 | 
 79 | // With leading & trailing slash options
 80 | urlJoin('foo', 'bar', { leadingSlash: false }) // foo/bar
 81 | urlJoin('foo', 'bar', { trailingSlash: true }) // /foo/bar/
 82 | urlJoin('foo', 'bar', { leadingSlash: false, trailingSlash: true }) // foo/bar/
 83 | 
 84 | // Absolute URLs
 85 | urlJoin('http://google.com', 'foo') // http://google.com/foo
 86 | 
 87 | // Protocol relative URLs
 88 | urlJoin('//google.com', 'foo', { protocolRelative: true }) // //google.com/foo
 89 | 
 90 | // With query string as an url part
 91 | urlJoin('foo', 'bar?queryString') // /foo/bar?queryString
 92 | urlJoin('foo', 'bar?queryString', { trailingSlash: true }) // /foo/bar/?queryString
 93 | 
 94 | // With query string as an object
 95 | urlJoin('foo', { query: { biz: 'buz', foo: 'bar' } }) // /foo?biz=buz&foo=bar
 96 | 
 97 | // With both query string as an url part and an object
 98 | urlJoin('foo', 'bar?queryString', { query: { biz: 'buz', foo: 'bar' } }) // /foo/bar?biz=buz&foo=bar&queryString
 99 | ```
100 | 


--------------------------------------------------------------------------------
/notes/useToggle.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: useToggle React Hook
 3 | tags:
 4 |   - react
 5 | emoji: ⚛
 6 | created: 2021-07-12T06:06:50.377Z
 7 | modified: 2021-07-12T06:07:21.645Z
 8 | ---
 9 | 
10 | ```tsx
11 | import { Dispatch, DispatchWithoutAction } from 'react'
12 | import { useCallback, useState } from 'react'
13 | 
14 | /**
15 |  * @name useToggle
16 |  * @description Toggle something
17 |  */
18 | export const useToggle = (
19 |   initialState = false,
20 | ): [boolean, DispatchWithoutAction, Dispatch<boolean>] => {
21 |   // Initialize the state
22 |   const [state, setToggleState] = useState(initialState)
23 | 
24 |   // Define and memorize toggler function in case we pass down the comopnent,
25 |   // This function change the boolean value to it's opposite value
26 |   const toggle = useCallback(() => setToggleState((state) => !state), [])
27 | 
28 |   return [state, toggle, setToggleState]
29 | }
30 | ```
31 | 
32 | ## Usage
33 | 
34 | ```ts
35 | const [isToggled, toggle, setToggleState] = useToggle()
36 | 
37 | setToggleState(true)
38 | setToggleState(false)
39 | toggle()
40 | 
41 | if (isToggled) {
42 |   // do something
43 | }
44 | ```
45 | 


--------------------------------------------------------------------------------
/notes/useful-js-functions.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Useful JavaScript functions & snippets
 3 | tags:
 4 |   - javascript
 5 | created: 2020-09-06T07:57:42.000Z
 6 | modified: 2021-01-06T11:15:23.000Z
 7 | ---
 8 | 
 9 | ## Automatically remove an event listener after it has executed
10 | 
11 | ```js
12 | el.addEventListener('click', console.log, {
13 |   once: true,
14 | })
15 | ```
16 | 
17 | ## The magical `handleEvent` function
18 | 
19 | ```js
20 | // Get a reference to the <button>
21 | const btn = document.querySelector('button')
22 | 
23 | // Define object with `handleEvent` function
24 | const myObject = {
25 |   handleEvent: (event) => {
26 |     alert(event.type)
27 |   },
28 | }
29 | 
30 | // Listen for 'click' events on the <button> and handle them with `myObject`... WHAT?!?!
31 | btn.addEventListener('click', myObject)
32 | ```
33 | 
34 | [More info](https://dev.to/rikschennink/the-fantastically-magical-handleevent-function-1bp4)
35 | 
36 | ## Remove query param
37 | 
38 | ```ts
39 | // https://stackoverflow.com/a/58128921/91359
40 | 
41 | export const removeSearchParam = (paramName: string): void => {
42 |   const searchParams = new URLSearchParams(window.location.search)
43 |   searchParams.delete(paramName)
44 |   if (history.replaceState) {
45 |     const searchString =
46 |       searchParams.toString().length > 0 ? '?' + searchParams.toString() : ''
47 |     const newUrl =
48 |       window.location.protocol +
49 |       '//' +
50 |       window.location.host +
51 |       window.location.pathname +
52 |       searchString +
53 |       window.location.hash
54 |     history.replaceState(null, document.title, newUrl)
55 |   }
56 | }
57 | ```
58 | 


--------------------------------------------------------------------------------
/notes/vercel-serverless-functions.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Vercel Serverless functions
 3 | link: https://vercel.com/docs/concepts/functions/serverless-functions
 4 | created: 2021-12-06T16:30:11.062Z
 5 | modified: 2021-12-06T16:30:11.062Z
 6 | ---
 7 | 
 8 | ## Basic example
 9 | 
10 | ### With JavaScript
11 | 
12 | ```ts
13 | // /api/test.js
14 | const handler = (request, response) => {
15 |   response.status(200).json({
16 |     body: request.body,
17 |     query: request.query,
18 |     cookies: request.cookies,
19 |   })
20 | };
21 | 
22 | export default handler;
23 | ```
24 | 
25 | ### With TypeScript
26 | 
27 | ```ts
28 | // /api/test.ts
29 | import { VercelApiHandler } from './types';
30 | 
31 | const handler: VercelApiHandler = (request, response) => {
32 |   response.status(200).json({
33 |     body: request.body,
34 |     query: request.query,
35 |     cookies: request.cookies,
36 |   })
37 | };
38 | 
39 | export default handler;
40 | ```
41 | 
42 | ## Enabling CORS
43 | 
44 | https://vercel.com/support/articles/how-to-enable-cors


--------------------------------------------------------------------------------
/notes/video.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Video
 3 | emoji: 🎬
 4 | tags:
 5 |   - html
 6 | created: 2020-02-27T23:51:44.000Z
 7 | modified: 2020-02-27T23:51:44.000Z
 8 | ---
 9 | 
10 | ```html
11 | <video width="640" height="360" controls>
12 |   <!-- MP4 must be first for iPad! -->
13 |   <source src="__VIDEO__.mp4" type="video/mp4" />
14 |   <!-- Safari / iOS video    -->
15 |   <source src="__VIDEO__.ogv" type="video/ogg" />
16 |   <!-- Firefox / Opera / Chrome10 -->
17 | </video>
18 | <!-- you *must* offer a download link as they may be able to play the file locally. customise this bit all you want -->
19 | <p>
20 |   <strong>Download Video:</strong> Closed Format:
21 |   <a href="__VIDEO__.MP4">"MP4"</a> Open Format:
22 |   <a href="__VIDEO__.OGV">"Ogg"</a>
23 | </p>
24 | ```
25 | 
26 | ## Autoplay
27 | 
28 | ### Useful links
29 | 
30 | - https://webkit.org/blog/6784/new-video-policies-for-ios/
31 | - https://docs.google.com/presentation/d/1DhW29bTLkDO6JSqp_wLUyByo00nI4krQ9laGQYQEJLU/edit
32 |   - https://bitmovin.com/play-not-play-new-autoplay-policies-safari-11-chrome-64/
33 | 
34 | ## Embedding YouTube/Vimeo etc
35 | 
36 | ### YouTube
37 | 
38 | https://developers.google.com/youtube/player_parameters#Manual_IFrame_Embeds
39 | 
40 | ### Vimeo
41 | 
42 | https://vimeo.zendesk.com/hc/en-us/articles/360001494447-Using-Player-Parameters
43 | 
44 | ### Useful npm packages
45 | 
46 | - https://github.com/alanshaw/embed-video
47 | - https://github.com/radiovisual/get-video-id
48 | 


--------------------------------------------------------------------------------
/notes/vim-cheatsheet.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: VIM cheatsheet
 3 | tags:
 4 |   - cheatsheet
 5 | created: 2020-02-27T23:02:00.000Z
 6 | modified: 2020-09-06T07:57:42.000Z
 7 | ---
 8 | 
 9 | **Cheatsheets**
10 | 
11 | - [https://github.com/hackjutsu/vim-cheatsheet](https://github.com/hackjutsu/vim-cheatsheet)
12 | - [https://gist.github.com/azadkuh/5d223d46a8c269dadfe4](https://gist.github.com/azadkuh/5d223d46a8c269dadfe4)
13 | - [https://vimsheet.com/](https://vimsheet.com/)
14 | 
15 | **Substitute or Find/Replace**
16 | 
17 | To find each occurrence of ‘pick’ in the current line only, and replace it with ‘s’, enter (first press Esc key and type):
18 | 
19 | ```
20 | :%s/pick/s/g
21 | ```
22 | 
23 | To find and replace all occurrences of ‘pick’ with ‘s’, enter:
24 | 
25 | ```
26 | :%s/pick/s/g
27 | ```
28 | 
29 | To find and replace all occurrences of ‘pick’ with ‘s’, but ask for confirmation first, enter:
30 | 
31 | ```
32 | :%s/pick/s/gc
33 | ```
34 | 
35 | To find and replace all occurrences of case insensitive ‘eth1’ with ‘br1’, enter:
36 | 
37 | ```
38 | :%s/eth1/br1/gi
39 | ```
40 | 
41 | The above example will find eth1, ETH1, eTh1, ETh1 and so on and replace with br1. To find and replace all occurrences of ‘eth1’ with ‘br1’ for lines from 3 to 7, enter:
42 | 
43 | ```
44 | :3,7s/eth1/br1/g
45 | ```
46 | 


--------------------------------------------------------------------------------
/notes/vitest.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Vitest
 3 | tags:
 4 |   - testing
 5 | created: 2022-06-14T15:45:25Z
 6 | modified: 2022-06-14T15:45:25Z
 7 | link: https://vitest.dev
 8 | emoji: ⚡
 9 | ---
10 | 
11 | ### `vitest.config.ts`
12 | 
13 | ```ts
14 | /// <reference types="vitest" />
15 | /// <reference types="vite/client" />
16 | 
17 | import react from '@vitejs/plugin-react'
18 | import { defineConfig } from 'vite'
19 | import tsconfigPaths from 'vite-tsconfig-paths'
20 | 
21 | export default defineConfig({
22 |   plugins: [react(), tsconfigPaths()],
23 |   test: {
24 |     environment: 'happy-dom',
25 |     setupFiles: ['./vitest.setup.ts'],
26 |   },
27 | })
28 | ```
29 | 
30 | ### `vitest.setup.ts`
31 | 
32 | Add anything to this file that you want run before each test.
33 | 
34 | If you use the default vitest config value for `globals` and you want to use `jest-dom`:
35 | 
36 | ```ts
37 | import matchers from '@testing-library/jest-dom/matchers'
38 | import { expect } from 'vitest'
39 | 
40 | expect.extend(matchers)
41 | ```
42 | 
43 | If you want `jest-dom` and use `globals: true` in your config:
44 | 
45 | ```ts
46 | import '@testing-library/jest-dom'
47 | ```
48 | 
49 | If you're using Remix:
50 | 
51 | ```ts
52 | import { installGlobals } from '@remix-run/node/globals'
53 | installGlobals()
54 | ```
55 | 


--------------------------------------------------------------------------------
/notes/webmentions.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Webmentions
 3 | tags:
 4 |   - javascript
 5 |   - html
 6 | emoji: 🗣
 7 | created: 2020-03-22T14:53:49.000Z
 8 | modified: 2020-03-26T23:06:06.000Z
 9 | ---
10 | 
11 | ## Go to webmention.io
12 | 
13 | Add this to your site:
14 | 
15 | ```html
16 | <link rel="webmention" href="https://webmention.io/zander.wtf/webmention" />
17 | <link rel="pingback" href="https://webmention.io/zander.wtf/xmlrpc" />
18 | ```
19 | 
20 | ### Feeds:
21 | 
22 | - `https://webmention.io/api/mentions.html?token=H1gjIgBV1XU7F6PUO0lUOg`
23 | - `https://webmention.io/api/mentions.atom?token=H1gjIgBV1XU7F6PUO0lUOg`
24 | 
25 | ### API Key
26 | 
27 | ```
28 | H1gjIgBV1XU7F6PUO0lUOg
29 | ```
30 | 
31 | ```
32 | https://webmention.io/api/mentions?perPage=500&jsonp=parseWebmentions&target={PAGE_URL}
33 | ```
34 | 


--------------------------------------------------------------------------------
/notes/webshare.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Webshare API
 3 | tags:
 4 |   - javascript
 5 | link: 'https://web.dev/web-share/'
 6 | emoji: 👀
 7 | created: 2020-05-07T11:04:41.000Z
 8 | modified: 2020-05-11T11:31:08.000Z
 9 | ---
10 | 
11 | ```js
12 | if (navigator.share) {
13 |   navigator
14 |     .share({
15 |       title: 'web.dev',
16 |       text: 'Check out web.dev.',
17 |       url: 'https://web.dev/',
18 |     })
19 |     .then(() => console.log('Successful share'))
20 |     .catch((error) => console.log('Error sharing', error))
21 | }
22 | ```
23 | 
24 | If your page has a canonical url:
25 | 
26 | ```js
27 | let url = document.location.href
28 | const canonicalElement = document.querySelector('link[rel=canonical]')
29 | if (canonicalElement !== null) {
30 |   url = canonicalElement.href
31 | }
32 | navigator.share({ url: url })
33 | ```
34 | 


--------------------------------------------------------------------------------
/notes/yalc.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Yalc
 3 | tags:
 4 |   - javascript
 5 | link: 'https://github.com/whitecolor/yalc'
 6 | created: 2020-02-27T23:02:00.000Z
 7 | modified: 2020-11-13T09:52:04.000Z
 8 | ---
 9 | 
10 | ## Installation
11 | 
12 | ```sh
13 | yarn global add yalc
14 | ```
15 | 
16 | ## Usage
17 | 
18 | Say we have two projects. e.g. one website & one npm package that the website depends on:
19 | 
20 | `website-a` which depends on npm `package-a`
21 | 
22 | ### Step 1
23 | 
24 | Run **`yalc publish`** in the `package-a` repo
25 | 
26 | ### Step 2
27 | 
28 | Run **`yalc add package-a`** in the `website-a` repo
29 | 
30 | ### Step 3
31 | 
32 | Run `yarn` in `website-a`
33 | 
34 | ### Step 4
35 | 
36 | Whenever you update `package-a`, run **`yalc push`** in the `package-a` repo
37 | 
38 | You may need to run `yarn build && yalc push` if `package-a` needs building first. And You may need to run run `yalc add package-a` in the `website-a` repo.
39 | 
40 | > If you have a dev server running in `website-a`, it might pick up the changes after **`yalc push`** automatically so you may not need to do anything else.
41 | 
42 | ### Revert
43 | 
44 | When you're done testing with Yalc, run **`yalc remove --all`** to remove all the yalced packages from `website-a`
45 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "private": true,
 3 |   "name": "notes.zander.wtf",
 4 |   "version": "1.0.0",
 5 |   "main": "index.js",
 6 |   "author": {
 7 |     "name": "Zander Martineau",
 8 |     "url": "https://zander.wtf"
 9 |   },
10 |   "license": "MIT",
11 |   "scripts": {
12 |     "build": "gatsby build",
13 |     "clean": "gatsby clean",
14 |     "dev": "gatsby develop",
15 |     "start": "gatsby serve",
16 |     "dates": "fds --directory=notes"
17 |   },
18 |   "dependencies": {
19 |     "gatsby": "^3.3.1",
20 |     "gatsby-plugin-manifest": "^3.3.0",
21 |     "gatsby-plugin-offline": "^4.3.0",
22 |     "gatsby-plugin-plausible": "^0.0.7",
23 |     "gatsby-theme-code-notes": "^2.3.0",
24 |     "react": "^17.0.2",
25 |     "react-dom": "^17.0.2"
26 |   },
27 |   "devDependencies": {
28 |     "frontmatter-date-setter": "^0.1.0"
29 |   }
30 | }
31 | 


--------------------------------------------------------------------------------
/static/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mrmartineau/notes.zander.wtf-gatsby/3e950cdc22a5d3db11350e0179ff0b1ddad3f77f/static/logo.png


--------------------------------------------------------------------------------
/vercel.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "headers": [
 3 |     {
 4 |       "source": "/(.*)",
 5 |       "headers": [
 6 |         {
 7 |           "key": "Permissions-Policy",
 8 |           "value": "interest-cohort=()"
 9 |         }
10 |       ]
11 |     }
12 |   ]
13 | }
14 | 


--------------------------------------------------------------------------------