Skip to content

Instantly share code, notes, and snippets.

Avatar

Dominic Tobias DominicTobias

  • London
View GitHub Profile
@DominicTobias
DominicTobias / fastifySchemaExample.ts
Created Dec 23, 2021
Fsatify JSON Schema example
View fastifySchemaExample.ts
fastify.get<{ Querystring: { address: string } }>(
'/checkAddress',
{
schema: {
querystring: {
type: 'object',
properties: {
postcode: { type: 'string' },
},
required: ['postcode'],
@DominicTobias
DominicTobias / server.ts
Last active Dec 24, 2021
Fastify NodeJS server example
View server.ts
import Fastify from 'fastify'
import middie from 'middie'
import cors from 'cors'
import frameguard from 'frameguard'
import xXssProtection from 'x-xss-protection'
const fastify = Fastify({
logger: true,
})
View binarySearch.ts
function binarySearch<T = any>(
findValue: number,
items: T[],
getValue: (item: T) => number
) {
let lo = 0
let hi = items.length - 1
while (lo <= hi) {
const mi = (lo + hi) >>> 1
@DominicTobias
DominicTobias / package.json
Created Jul 18, 2021
A component/library config for rollup
View package.json
{
"main": "dist/index.cjs.js",
"module": "dist/index.js",
"exports": {
".": {
"import": "./dist/index.js",
"require": "./dist/index.cjs.js"
}
},
"types": "dist/index.d.ts",
@DominicTobias
DominicTobias / useSizeObserver.ts
Last active Aug 4, 2021
React useSizeObserver
View useSizeObserver.ts
import { useEffect, useRef } from 'react'
export function useSizeObserver(
elRef: React.RefObject<HTMLElement | null>,
onChange: (width: number, height: number) => void,
shouldObserve = true
) {
const onChangeRef = useRef(onChange)
onChangeRef.current = onChange
View math.test.ts
import { round, floor, ceil, roundToTick, floorToTick, ceilToTick } from './math'
describe('math', () => {
it('round works up to 8 decimals and 999 million', () => {
expect(round(123.123456789, 0)).toEqual(123)
expect(round(123.123456789, 1)).toEqual(123.1)
expect(round(123.123456789, 2)).toEqual(123.12)
expect(round(123.123456789, 3)).toEqual(123.123)
expect(round(123.123456789, 4)).toEqual(123.1235)
expect(round(123.123456789, 5)).toEqual(123.12346)
@DominicTobias
DominicTobias / DecayAnimation.ts
Created Aug 8, 2020
DecayAnimation for scrolling
View DecayAnimation.ts
type UpdateCb = (x: number, y: number) => void;
export interface DecayAnimationProps {
deceleration?: number;
onUpdate: UpdateCb;
}
export class DecayAnimation {
deceleration: number;
_onUpdate: UpdateCb;
@DominicTobias
DominicTobias / useScrollPos.ts
Created Mar 12, 2020
useScrollPos - React hook for scroll position
View useScrollPos.ts
import { RefObject, useEffect, useState } from 'react';
export interface ScrollPos {
top: number;
left: number;
}
export function useScrollPos(elRef: RefObject<HTMLElement>, disabled?: boolean): ScrollPos {
const [scrollPos, setScrollPos] = useState({ top: 0, left: 0 });
@DominicTobias
DominicTobias / CSS.tsx
Last active Mar 9, 2020
Simple no-frills CSS-In-JSS in React
View CSS.tsx
/*
Why?
- Tiny compared to existing solutions
- No frills or stupid class hashing, just for portability of providing components with CSS included
- Discourage dynamism -> While the CSS will update if you pass in variables, `insertRule` is more
efficient for highly dynamic CSS. But highly dynamic CSS is a code smell. Conditional selectors and
CSS Variables can achieve most use cases whilst being far more performant.
*/
import { useRef, useEffect } from 'react';
@DominicTobias
DominicTobias / MyApp.jsx
Last active Sep 15, 2020
React CSS Theme
View MyApp.jsx
function MyApp({ theme }) {
const cssTheme = useMemo(() => makeCssTheme(theme, 'xx'), [theme]);
return (
<div style={cssTheme}>
{/*
Any component in here now has access to:
var(--xx-buttonPadding), var(--xx-background) etc.
*/}
</div>