kirby

Kayac Hello kayac-chang

kirby

Binance | Senior Software Engineer | Guitarist 🎸

kayac-chang / chain.ts

Created January 28, 2022 11:53

[learn FP with Kirby using `fp-ts`] Option

	import { describe } from "../utils";

	/**
	* chain (flatmap)
	* ===
	* the chain can perform `map` and `flatten` together.
	*/

	import { flow, pipe } from "fp-ts/lib/function";
	import * as Option from "fp-ts/Option";

kayac-chang / flow.ts

Created January 28, 2022 08:55

[learn FP with Kirby using `fp-ts`] The Flow Operator


	/**
	* The Flow Operator
	* ===
	* The `flow` operator is almost same as `pipe` operator.
	* The difference being the first argument must be a function, rather than value.
	*/

	import { flow, pipe } from "fp-ts/lib/function";
	import assert = require("assert");

kayac-chang / pipe.ts

Last active January 28, 2022 08:30

[learn FP with Kirby using `fp-ts`] The Pipe Operator

	/**
	* The Pipe Operator
	* ===
	* The basic building block of fp-ts is the Pipe operator.
	*/

	import { pipe } from "fp-ts/lib/function";

	type Fn = (a: number) => number;
	const add1: Fn = (num) => num + 1;

kayac-chang / curcular.js

Created April 10, 2021 15:34

JS curcular function

kayac-chang / main.js

Created March 28, 2021 04:26

PureJS Data Driven Rerender

	function select(key, el = document) {
	return el.querySelector(key);
	}
	function selectAll(key, el = document) {
	return Array.from(el.querySelectorAll(key));
	}
	function replace(oldEl, newEl) {
	oldEl.parentNode.replaceChild(newEl, oldEl);
	return newEl;
	}

kayac-chang / RenderProps.tsx

Created February 8, 2021 08:59

React Pattern

	import { ReactNode, isValidElement, PropsWithChildren } from "react";

	type Props<T> = Pick<PropsWithChildren<T>, Exclude<keyof T, "children">>;

	function isFunction<T, R>(instance: any): instance is (props: T) => R {
	return typeof instance === "function";
	}

	export default function RenderProps<T>({
	children,

kayac-chang / KeyBoard.js

Created September 13, 2020 08:21

sync keyboard event to requestAnimationFrame

	export function KeyBoard(keymap) {
	const pressing = new Set();

	window.addEventListener("keydown", ({ key }) =>
	keymap[key] && pressing.add(keymap[key])
	);

	window.addEventListener("keyup", ({ key }) =>
	keymap[key] && pressing.delete(keymap[key])
	);

kayac-chang / res.js

Last active July 23, 2020 15:45

Show how to integrate pixj.js loader with howler.js

	import { Loader } from 'pixi.js';
	import { Howl } from 'howler';

	const loader = new Loader();

	loader.pre(SoundHandler);

	function SoundHandler(resource, next) {
	const SUPPORT_FORMATS = ['mp3', 'opus', 'ogg', 'wav', 'aac', 'm4a', 'm4b', 'mp4', 'webm'];

kayac-chang / index.html

Created March 22, 2020 07:41

Simple JSX

	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Simple JSX</title>
	</head>

	<body>

kayac-chang / frameLoop.js

Created September 30, 2019 07:35

Execute a function repeatedly when frame change.

	/**
	* Execute a function repeatedly when frame change.
	* @param {Function} func
	* @param {any} args
	* @return {stop} : Function to stop the loop
	*/
	function frameLoop(func, ...args) {
	let loop = true;

	(async function execute() {