Skip to content

Instantly share code, notes, and snippets.

@tsmd
tsmd / debounce.js
Created Mar 6, 2021
simple throttle and debounce
View debounce.js
/**
* @param {number} delay
* @param {Function} callback
* @returns {Function}
*/
function debounce(delay, callback) {
var timer = 0;
return function () {
var self = this;
var args = arguments;
@tsmd
tsmd / load-polyfills.html
Created Dec 29, 2020
Load polyfills conditionally from CDN
View load-polyfills.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Load polyfills conditionally from CDN</title>
<script>
function loadFromCdn(src, integrity) {
var s = document.createElement("script");
s.src = src;
s.integrity = integrity;
@tsmd
tsmd / dom-utils.js
Created Oct 22, 2020
DOM utilities
View dom-utils.js
/**
* ツリー上で最初に登場するテキストノードを深さ優先で探索し取得する
*/
function getFirstTextNode(root) {
return traverse(root, (node) => node.nodeType === Node.TEXT_NODE && node.textContent.trim() !== "");
}
/**
* ツリー上で最後に登場するテキストノードを深さ優先で探索し取得する
*/
@tsmd
tsmd / adjust-rem.js
Last active Sep 5, 2020
rem を 10/16 倍する
View adjust-rem.js
#!/usr/bin/env node
/**
* @fileoverview rem を 10/16 倍する
* @example cat styles.css | ./adjust-rem > styles.css
*/
const { readFileSync } - require("fs");
const postcss = require("postcss");
@tsmd
tsmd / web-storage.ts
Created Feb 1, 2020
localStorage, sessionStorage のごく薄いラッパー。Cookie 無効環境でストレージにアクセスしたときに発生する例外を捕捉しスクリプトが止まらないようにする。
View web-storage.ts
/**
* @fileOverview
* localStorage, sessionStorage のごく薄いラッパー。
* Cookie 無効環境でストレージにアクセスしたときに発生する例外を捕捉しスクリプトが止まらないようにする。
*/
type storageType = 'localStorage' | 'sessionStorage'
class WebStorage {
constructor(private storageType: storageType) {}
View roll-focus.js
function rollFocus(backFlag) {
let focusIndex
const currentIndex = this.tabbableElements.indexOf(document.activeElement)
if (currentIndex < 0) {
focusIndex = 0
} else {
const tabbableLength = this.tabbableElements.length
const direction = backFlag ? -1 : 1
focusIndex = (currentIndex + direction + tabbableLength) % tabbableLength
}
View get-orientation.js
/**
* 画像の回転を取得する
* @returns {number} 回転を表す数字。正しく表示するために数字に応じて以下の処理をする:
* 1: 何もしない
* 2: 左右反転
* 3: 180度回転
* 4: 180度回転し、左右反転
* 5: 時計回りに90度回転し、左右反転
* 6: 時計回りに90度回転
* 7: 時計回りに270度回転し、左右反転
View dom-utils.js
/**
* 引数を起点に兄弟要素、親の兄弟要素、さらに親の兄弟要素、…を取得する
* @param {Element} baseElement
* @return {[Element]} 対象となるHTML要素
*/
export function collectAllSiblings(baseElement) {
const targets = []
let current = baseElement
while (current && current !== document.body) {
const siblings = Array.from(current.parentNode.children)
@tsmd
tsmd / _textarea.scss
Last active May 30, 2019
Cool textarea
View _textarea.scss
@charset "UTF-8";
.Textarea {
@at-root {
& {
position: relative;
color: inherit;
font-size: rem(16px);
line-height: 1.8;
}
View _text-input.scss
@charset "UTF-8";
.TextInput {
@at-root {
& {
width: 100%;
height: rem(40px);
padding: 0 rem(14px);
border: 0;
color: inherit;