Skip to content

Instantly share code, notes, and snippets.

View kayac-chang's full-sized avatar
:octocat:
kirby

Kayac Hello kayac-chang

:octocat:
kirby
233 followers · 334 following
View GitHub Profile
@kayac-chang
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
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
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
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
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
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
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
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
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
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,