Skip to content

Instantly share code, notes, and snippets.

View fuweichin's full-sized avatar

Fuwei Chin fuweichin

5 followers · 2 following
  • Yongzhou
View GitHub Profile
@fuweichin
fuweichin / index.html
Created December 2, 2022 11:39
setInterval implementations
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>setInterval implementations</title>
</head>
<body>
<div>
@fuweichin
fuweichin / index.html
Last active January 30, 2024 15:09
Power Saving Mode detection
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Power Saving Mode detection</title>
</head>
<body>
<div>Power Saving Mode? <code id="powerSavingMode"></code></div>
<script type="module">
@fuweichin
fuweichin / index.html
Created July 28, 2022 05:52
Enable transition when entering/leaving blackscreen or whitescreen
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.container{
width: 1280px;
margin: 0 auto;
@fuweichin
fuweichin / foobar-experimental.js
Created June 25, 2022 01:21
Chrome 103: import-maps doesn't work with modulepreload
import foo from 'foo';
import bar from 'bar';
console.log(foo, bar);
@fuweichin
fuweichin / index.html
Created June 21, 2022 18:20
Collect and show uncaught script error and unhandled promise rejection
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Script Error Repoter</title>
</head>
<body>
<h1>Script Error Repoter</h1>
<button id="raiseError">Raise an error</button>
@fuweichin
fuweichin / index.html
Created June 16, 2022 20:12
Get nearest color of wave length in sRGB, Display P3, Rec. 2020 or CIE 1931 XYZ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Wave Length to Color Example</title>
<style>
body, p{
margin: 0;
}
@fuweichin
fuweichin / index.html
Last active June 13, 2022 18:29
screen.orienation polyfill and ponyfill, for Safari
<h2>screen.orientation</h2>
<p id="msg">&#160;</p>
<pre><code id="output">...</code></pre>
<script type="module">
import {ponyfill, polyfill} from './screen-orientation.js';
const $ = (s, c = document) => c.querySelector(s);
@fuweichin
fuweichin / index.html
Last active March 7, 2024 16:58
User Agent Client Hints API (navigator.userAgentData) polyfill and ponyfill
<h3>native navigator.userAgentData</h3>
<pre><code id="naviveUserAgentData">...</code></pre>
<h3>polyfilled navigator.userAgentData</h3>
<pre><code id="customUserAgentData">...</code></pre>
<script type="module">
import {ponyfill, polyfill} from './user-agent-data.js';
const $ = (s, c = document) => c.querySelector(s);
@fuweichin
fuweichin / animation-utils.js
Created June 12, 2022 16:43
animate with specific frame rate (fps), based on requestAnimationFrame instead of setInterval/setTimeout
function filterNums(nums, jitter = 0.2, downJitter = 1 - 1 / (1 + jitter)) {
let len = nums.length;
let mid = Math.floor(len % 2 === 0 ? len / 2 : (len - 1) / 2), low = mid, high = mid;
let lower = true, higher = true;
let sum = nums[mid], count = 1;
for (let i = 1, j, num; i <= mid; i += 1) {
if (higher) {
j = mid + i;
if (j === len)
break;
@fuweichin
fuweichin / index.html
Last active July 1, 2022 21:02
given a template literal and a scope object, return resolved string
<!-- to resolve synchronously -->
<script src="resolve-template.js"></script>
<!-- to resolve asynchronously -->
<script>
let worker = new Worker('resolve-template.js');
let idGen = (function* () {
for (let i = 0; true; i = (i + 1) >> 0) {
yield i;
}