Skip to content

Instantly share code, notes, and snippets.

Avatar
⚛️
Reconciling

Alexis H. Munsayac LXSMNSYC

⚛️
Reconciling
View GitHub Profile
@LXSMNSYC
LXSMNSYC / example.ts
Last active Sep 3, 2021
createSWRResource
View example.ts
interface SWROptions {
revalidateOnVisibility?: boolean;
revalidateOnNetwork?: boolean;
revalidateOnFocus?: boolean;
}
function createSWRResource<T>(
data: Resource<T>,
refetch: () => void,
options: SWROptions,
@LXSMNSYC
LXSMNSYC / introspection.graphql
Created Apr 29, 2021
Introspection Query for GraphQL
View introspection.graphql
query IntrospectionQuery {
__schema {
queryType {
name
}
mutationType {
name
}
subscriptionType {
name
View index.md

Preferred CSS/Design

Tailwind

Pros

  • When customizing stick to the design system
  • Small learning curve
  • They have component-based design in mind
  • Upcoming NextJS, built-in Tailwind
@LXSMNSYC
LXSMNSYC / brainfuck-type.ts
Created Nov 30, 2020
Brainfuck-to-JS Compiler using only TypeScript's type system
View brainfuck-type.ts
type Collect<T, O extends string, C extends string, S extends string, R extends any[] = []> =
T extends `${C}${infer Rest}`
? Collect<Rest, Rest, C, S, [any, ...R]>
: `${S}(${R['length']});${Compile<O>}`;
type Compile<T> =
T extends `+${infer Rest}`
? Collect<T, Rest, '+', 'c'>
:
T extends `-${infer Rest}`
@LXSMNSYC
LXSMNSYC / ZoomLoader.jsx
Last active Nov 13, 2020
Zoom Loader for Next.js
View ZoomLoader.jsx
import Head from 'next/head';
const CDN_BASE = 'https://cdn.jsdelivr.net/npm/';
const PACKAGE_NAME = '@zoomus/websdk';
const PACKAGE_VERSION = '1.8.1';
const PACKAGE_DIR = `${CDN_BASE}${PACKAGE_NAME}@${PACKAGE_VERSION}`;
const ZOOM_DIR = '/dist/lib';
const AV_DIR = '/av';
const VERSION_PREFIX = '5793_';
View useDispose.tsx
import { useEffect } from 'react';
export type Dispose = () => void;
export default function useDispose(dispose: Dispose): void {
const timeout = setTimeout(dispose, 64);
useEffect(() => {
clearTimeout(timeout);
}, [timeout]);
View useContainerQuery.tsx
import { MutableRefObject } from 'react';
import useIsomorphicEffect from './useIsomorphicEffect';
export type ContainerQuery =
| 'width'
| 'height'
| 'max-width'
| 'max-height'
| 'aspect-ratio'
| 'orientation';
View debounce-async.ts
export type AsyncCallback<T extends any[]> = (...args: T) => Promise<void>;
export type DebouncedAsync<T extends any[]> = (...args: T) => void;
export function debounceAsync<T extends any[]>(callback: AsyncCallback<T>, duration: number): DebouncedAsync<T> {
let lifecycle: PromiseLifecycle;
let timeout: number;
function control(...args: T) {
if (timeout) {
lifecycle.alive = false;
@LXSMNSYC
LXSMNSYC / string-interpolation.ts
Last active Sep 30, 2020
string-interpolation.ts
View string-interpolation.ts
export function interpolate(template: string, ...replacements: string[]): string {
return template.replace(/{([^{}]*)}/g, (match, point) => replacements[point] ?? match);
}
export function keyedInterpolate(template: string, replacements: Record<string, string>): string {
return template.replace(/{([^{}]*)}/g, (match, point) => replacements[point] ?? match);
}
View content-ranking.js
function createNode() {
return {
score: 1,
incoming: [],
outgoing: [],
total: 0,
};
}
function getIncomingEdge(node, toMatch) {