Skip to content

Instantly share code, notes, and snippets.

View hyunbinseo's full-sized avatar

Hyunbin hyunbinseo

114 followers · 123 following
View GitHub Profile
@hyunbinseo
hyunbinseo / about.md
Last active October 2, 2021 08:06
Sign JWT in Node.js using crypto-js library
@hyunbinseo
hyunbinseo / type-object-values.ts
Created October 2, 2021 08:27
Set object's value type while keeping key autocomplete
/* Types */
type Person = {
age: number,
city: string
}
type People = { [name: string]: Person }
@hyunbinseo
hyunbinseo / tailwind-colors.ts
Created February 19, 2022 12:32
Typescript types for Tailwind CSS colors (background, text)
// Based on Tailwind CSS v3.0.23
// Requires TypeScript 4.1 or later (Template Literal Types)
// Reference https://www.typescriptlang.org/docs/handbook/release-notes/typescript-4-1.html#template-literal-types
type Name =
| 'amber'
| 'blue'
| 'cyan'
| 'emerald'
@hyunbinseo
hyunbinseo / layout.html
Last active June 16, 2022 08:40
Unsupported browser page for Internet Explorer
<!DOCTYPE html>
<html lang="en">
<head>
<script>
// Check if the client is Internet Explorer.
if (/MSIE|Trident/.test(window.navigator.userAgent))
// In Cloudflare Pages trim .html from the URL
// It is not supported in older versions of IE
// Can be reproduced in version 11.0.9600.18860
@hyunbinseo
hyunbinseo / colorthief.js
Created April 19, 2022 01:03
Get dominant color from images in RGB or HEX
// https://github.com/lokesh/color-thief
const ColorThief = require('colorthief');
// Preferences
const directory = './images';
const extension = 'jpg';
const filenames = [
'loon-yyy-riven',
'dining-agreed-gumball',
'cowan-logs-bagged',
@hyunbinseo
hyunbinseo / puppeteer.js
Created July 23, 2022 06:50
Convert multiple URLs into PDF using puppeteer
const puppeteer = require('puppeteer'); // puppeteer@15.5.0
const urls = [
'https://en.wikipedia.org/wiki/TypeScript',
'https://en.wikipedia.org/wiki/JavaScript',
];
const urlCount = urls.length;
const delay = 5000; // Delay between each save
@hyunbinseo
hyunbinseo / .vscode\tasks.json
Created August 18, 2022 09:37
Run currently opened .ts file in VS Code
{
// Steps
// 1. Open workspace in the Visual Studio Code
// 2. Install 'esno' (https://www.npmjs.com/package/esno)
// 3. Create a '.vscode/tasks.json' file
// 4. Open a TypeScript file
// 5. Press 'Ctrl + Shift + B' (run build task)
"version": "2.0.0",
// See https://go.microsoft.com/fwlink/?LinkId=733558
// for the documentation about the tasks.json format
@hyunbinseo
hyunbinseo / ie-error-page.html
Created September 6, 2022 01:30
Internet Explorer Error Page
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" type="text/css" href="NewErrorPageTemplate.css">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>이 페이지에 연결할 수 없음</title>
<script src="errorPageStrings.js" language="javascript" type="text/javascript">
</script>
<script src="httpErrorPagesScripts.js" language="javascript" type="text/javascript">
@hyunbinseo
hyunbinseo / .prettierrc.json
Last active August 25, 2023 03:34
VS Code, Prettier Settings
{
"htmlWhitespaceSensitivity": "ignore",
"quoteProps": "consistent",
"singleQuote": true,
"useTabs": true,
"overrides": [
{
"files": "*.md",
"options": {
"useTabs": false
@hyunbinseo
hyunbinseo / dom-focus-lock.ts
Created January 15, 2023 14:07
Lock focus on modal elements, TypeScript
const tabIndexGuard = (el: Element): el is HTMLElement => (el as HTMLElement).tabIndex >= 0;
// Based on https://svelte.dev/examples/modal
export const focusLock = (e: KeyboardEvent, el: HTMLElement) => {
if (e.key === 'Tab') {
// trap focus
const nodes = el.querySelectorAll('*');
const tabbable = Array.from(nodes).filter(tabIndexGuard);
let index = tabbable.indexOf(document.activeElement as HTMLElement);