Instead of checks like:
if (value === null) {
throw new Error("missing value")
}
doSomethingThatNeedsValue(value)
import * as React from 'react'; | |
const useIsFirstRender = (): boolean => { | |
const isFirst = React.useRef(true); | |
if (isFirst.current) { | |
isFirst.current = false; | |
return true; | |
} else { |
// Turn all HTML <a> elements into client side router links, no special framework-specific <Link> component necessary! | |
// Example using the Next.js App Router. | |
import { useRouter } from 'next/navigation'; | |
import { useEffect } from 'react'; | |
function useLinkHandler() { | |
let router = useRouter(); | |
useEffect(() => { | |
let onClick = e => { |
import Breakpoints from './Breakpoints'; | |
import { css, cx } from '@emotion/css'; | |
import { HTMLAttributes, forwardRef } from 'react'; | |
export type StackProps = { | |
adaptive?: true; | |
alignCenter?: true; | |
center?: true; | |
children?: React.ReactNode; | |
className?: string; |
/* | |
Made by Elly Loel - https://ellyloel.com/ | |
With inspiration from: | |
- Josh W Comeau - https://courses.joshwcomeau.com/css-for-js/treasure-trove/010-global-styles/ | |
- Andy Bell - https://piccalil.li/blog/a-modern-css-reset/ | |
- Adam Argyle - https://unpkg.com/[email protected]/normalize.min.css / https://codepen.io/argyleink/pen/KKvRORE | |
Notes: | |
- `:where()` is used to lower specificity for easy overriding. | |
*/ |
input[type="search"]::-webkit-search-cancel-button { | |
--size: 11px; | |
--background: #7F7F7F; | |
--icon: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI3IiBoZWlnaHQ9IjciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjMiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgY2xhc3M9ImZlYXRoZXIgZmVhdGhlci14Ij48cGF0aCBkPSJNMTggNkw2IDE4TTYgNmwxMiAxMiIvPjwvc3ZnPgo="); | |
-webkit-appearance: none; | |
height: var(--size); | |
width: var(--size); | |
border-radius: 50%; | |
background: var(--background) var(--icon) 50% 50% no-repeat; | |
} |
import React, { useEffect } from 'react' | |
import { runTiming } from 'utils/animations' | |
import Animated from 'react-native-reanimated' | |
import { | |
Dimensions, | |
Keyboard, | |
UIManager, | |
TextInput, | |
Platform | |
} from 'react-native' |
import NextLink from 'next/link'; | |
import React from 'react'; | |
import { Text } from 'react-native-web'; | |
// https://github.com/zeit/next.js#with-link | |
// Combines the Next.js <Link> with React Native's <Text> component. | |
// Enables use like this: | |
// | |
// <Link | |
// href={href} |
Feel free to contact me at [email protected] or tweet at me @statisticsftw
This is a rough outline of how we utilize next.js and S3/Cloudfront. Hope it helps!
It assumes some knowledge of AWS.