Skip to content

Instantly share code, notes, and snippets.

View tamagokun's full-sized avatar

Mike Kruk tamagokun

View GitHub Profile
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;
@EllyLoel
EllyLoel / reset.css
Last active October 24, 2024 06:51
CSS Reset
/*
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.
*/

assert() (sometimes called invariant())

Instead of checks like:

if (value === null) {
  throw new Error("missing value")
}
doSomethingThatNeedsValue(value)
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;
}
@kaueDM
kaueDM / KeyboardAware.tsx
Created September 25, 2019 14:14
Handling keyboard position - React Native
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'
@necolas
necolas / Composite-Link.js
Created September 19, 2018 23:02
Next.js links with React Native for Web
@pjobson
pjobson / clover_boot_flags.md
Last active September 29, 2024 16:59
Clover Boot Flags

Clover Boot Flags

Flag Description
-v Verbose Mode
-x Safe Mode
-s Single User Mode
-no-zp Zone Postponing (use if hanging)
cpus=1 Single CPU Core Mode
-f No Kext Cache Mode (use if hanging)

How we incorporate next and cloudfront (2018-04-21)

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.

Goals