Skip to content

Instantly share code, notes, and snippets.

View yano3nora's full-sized avatar

y3n yano3nora

9 followers · 3 following
View GitHub Profile
@yano3nora
yano3nora / ts-pattern.md
Last active August 23, 2022 01:24
[js: ts-pattern] Pattern matching library for TypeScript. #js #ts
@yano3nora
yano3nora / dummy-transparent-gif-png.html
Created August 9, 2022 03:34
[html: dummy transparent gif / png] #html
<!--
@link https://qiita.com/CloudRemix/items/92e68a048a0da93ed240
-->
<!-- gif 39 bytes -->
<img src="data:image/gif;base64,R0lGODlhAQABAGAAACH5BAEKAP8ALAAAAAABAAEAAAgEAP8FBAA7" alt="" height="1" width="1">
<!-- png 68 bytes -->
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVQI12NgYAAAAAMAASDVlMcAAAAASUVORK5CYII=" alt="" height="1" width="1">
@yano3nora
yano3nora / react-flip-toolkit.md
Created August 6, 2022 01:03
[react: react-flip-toolkit] FLIP animation library for React. #js #react
@yano3nora
yano3nora / percent-weighted-average.js
Created July 25, 2022 11:59
[js: percent-weighted-average] 単純なパーセント配分のお重みで加重平均出すやつ #js
/**
* 単純な 100% の配分で重み付けできる「値:重み」の列挙から、加重平均値を導出する
*
* @link https://jp.indeed.com/career-advice/career-development/how-to-calculate-weighted-average
* @example percentWeightedAvg([
* { value: 150, weight: 320 },
* { value: 200, weight: 180 },
* ]) // 168
*/
const percentWeightedAvg = (data = [{ value: 0, weight: 0 }]) => {
@yano3nora
yano3nora / motion-hooks.md
Last active September 6, 2022 20:12
[js: Motion One + motion-hooks] Modern WAAPI library + React hook wrapper. #js
@yano3nora
yano3nora / auto-animate.md
Last active August 4, 2022 00:55
[react: auto-animate] Auto Animation library for React. #js

Overview

auto-animate.formkit.com
github.com/formkit/auto-animate

  • 「追加 / 削除 / 移動 」あたりに「それっぽい」アニメーション付与できる
  • react なら useAutoAnimate みたいな hook で実装可能
  • react 以外にもつかえるっぽい
  • 追加 / 削除 ... 時の詳細な動きをカスタムするなら Plugins を見よ
  • ぱっと動かした感じ map してないと動作しないっぽい ... 微妙かも
@yano3nora
yano3nora / array-chunk.ts
Last active June 11, 2023 10:14
[js: Chunk Array] Split array elements by chunk number. #js
/**
* @example chunk([1, 2, 3, 4, 5, 6, 7], 3) // [[1, 2, 3], [4, 5, 6], [7]]
* @link https://qiita.com/yarnaimo/items/e92600237d65876f8dd8
*/
export const chunk = <T>(arr: T[], size: number) => (
arr.reduce((newarr, _, i) => (
i % size ? newarr : [...newarr, arr.slice(i, i + size)]
), [] as T[][])
)
@yano3nora
yano3nora / mutation-observer.js
Last active July 8, 2022 23:32
[js: Mutation Observer] #js
/**
* https://ja.javascript.info/mutation-observer
*/
const origin = document.querySelector('p#origin')
const copy = document.querySelector('p#copy')
// origin の変更を検知して innerText を copy へ転記、的な...
const obs = new MutationObserver(mutations => {
// mutations に変更内容の詳細が配列で入ってる感じ
// 正直ここで origin を api から読み取ったほうが見やすいけど
@yano3nora
yano3nora / set-get.md
Last active June 25, 2022 03:12
[js: get / set] Object Accessor (Getter/Setter). #js
@yano3nora
yano3nora / regexp.js
Created May 29, 2022 04:48
[js: RegExp] #js
/**
* string[] から /(パターン１|パターン２)/g みたいなやつ
* 動的につくりたいよおお
*/
const words = ['パターン１', 'パターン２']
const regex = new RegExp(`(${words.join('|')})`, 'g')