Last active
October 22, 2023 10:00
-
-
Save ashalfarhan/bd9f6718073434097902339fa3b30489 to your computer and use it in GitHub Desktop.
Utilities
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
function chunk(arr = [], size = 1) { | |
const compact = arr.slice(0, arr.length - (arr.length % size)); | |
const chunks = []; | |
for (let i = 0; i < compact.length/ size; i++) { | |
let start = i === 0 ? 0 : i * size; | |
let end = i === 0 ? size : i * size + size; | |
chunks.push(arr.slice(start, end)) | |
} | |
chunks.push(arr.slice(compact.length, arr.length)); | |
return chunks | |
} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
function randomHex(length = 6) { | |
let letters = "0123456789ABCDEF"; | |
let color = "#"; | |
for (let i = 0; i < length; i++) { | |
color += letters[Math.floor(Math.random() * 16)]; | |
} | |
return color; | |
} | |
/** | |
* Shade given color. | |
* @param {string} color Color in hex format | |
* @param {number} percent Shade percentage e.g. `40` for lighten, `-40` for darken. | |
*/ | |
function shadeColor(color, percent) { | |
let R = parseInt(color.substring(1, 3), 16); | |
let G = parseInt(color.substring(3, 5), 16); | |
let B = parseInt(color.substring(5, 7), 16); | |
R = parseInt((R * (100 + percent)) / 100); | |
G = parseInt((G * (100 + percent)) / 100); | |
B = parseInt((B * (100 + percent)) / 100); | |
R = R < 255 ? R : 255; | |
G = G < 255 ? G : 255; | |
B = B < 255 ? B : 255; | |
R = Math.round(R); | |
G = Math.round(G); | |
B = Math.round(B); | |
let RR = R.toString(16).length == 1 ? '0' + R.toString(16) : R.toString(16); | |
let GG = G.toString(16).length == 1 ? '0' + G.toString(16) : G.toString(16); | |
let BB = B.toString(16).length == 1 ? '0' + B.toString(16) : B.toString(16); | |
return '#' + RR + GG + BB; | |
} | |
function hexToRgb(hex) { | |
// Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF") | |
let shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i; | |
hex = hex.replace(shorthandRegex, function(m, r, g, b) { | |
return r + r + g + g + b + b; | |
}); | |
let result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex); | |
return result ? { | |
r: parseInt(result[1], 16), | |
g: parseInt(result[2], 16), | |
b: parseInt(result[3], 16) | |
} : null; | |
} | |
const rgbToHex = (r, g, b) => '#' + [r, g, b] | |
.map(x => x.toString(16).padStart(2, '0')).join('') |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* Utility to safely parse JSON from `localStorage`. | |
* | |
* @param val Value from Web Storage API | |
* @param _default Fallback value if the `val` cannot be parsed | |
*/ | |
export function safeParse<T>(val: unknown, _default: T): T { | |
try { | |
if (typeof val === 'string') { | |
return JSON.parse(val); | |
} | |
} catch {} | |
return _default; | |
} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Utility to preload theme from `localStorage` and will prevent flashing screen. | |
// This should be placed in the fist child of the <head> element. | |
let preloadedTheme = localStorage.getItem("theme"); | |
if (preloadedTheme == null) { | |
const isPreferDark = window.matchMedia('(prefers-color-scheme:dark)').matches; | |
preloadedTheme = isPreferDark ? 'dark' : 'light'; | |
} | |
if (preloadedTheme === "dark") { | |
document.documentElement.classList.add("dark"); | |
} | |
document.documentElement.style['color-scheme'] = preloadedTheme; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment