kirby

Kayac Hello kayac-chang

kirby

Binance | Senior Software Engineer | Guitarist 🎸

kayac-chang / gist:a52bfd359e3b5f29d62db1a7093336e0

Created April 30, 2018 16:06

create a Mask In Document

	function createMaskElement() {

	// 1. 做一個空的 <p> 充當我們的 offset
	let offset = document.createElement("p")

	// 這行其實可以省略
	offset.innerHTML = ""

	// Browser Default 都會給 Element margin 16px , 這裡為了保持數據上的乾淨 , 直接歸零
	offset.style.margin = "0"

kayac-chang / gist:4f24337dd7f08404ccc06caf2eef1635

Created April 30, 2018 16:11

trigger Mask

	function triggerMask() {

	// 1. 找到遮罩
	let mask = document.getElementById("mask")

	// 2. 當我滑到多少高度時
	let flag = window.scrollY >= 50

	// 把遮罩打開
	mask.style.display = flag ? "none" : "block"

kayac-chang / throttleBy.js

Created September 7, 2019 07:38

Throttle by async function call

	function throttleBy(func) {
	let skip = false;

	return async function call(...args) {
	if (skip) return;

	skip = true;

	const result = await func(...args);

kayac-chang / observe.js

Created September 7, 2019 10:03

Simple Object property Observer

	const {defineProperty} = Object;

	function observe({key, value, onChange}, it) {

	const descriptor = {
	get() {
	return value;
	},
	set(newValue) {
	value = newValue;

kayac-chang / Timer.js

Last active September 8, 2019 06:17

PressHold: Execute function once at first time. And after 1 second will execute the function on every frames.

	function Timer() {
	const start = performance.now();

	return function get() {
	return performance.now() - start;
	};
	}

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() {

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 / 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 / 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 / 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,