💛

web関係リンク集

2020/09/19に公開

変数にをHTMLタグとして書く

- var text = "hogehoge<br>hogehoge"

p=text //- <br>がそのまま文字としてでる
p!=text //- <br>が改行タグになる

filter一覧

トランジションのカーブを作るサイト

https://cubic-bezier.com/

stylusでcalcとかに変数を使う

$hoge = 10
$huga = 2
margin-top "calc(100% - %s / %s)" % ($hoge $huga)

“css 右寄せ”

https://teratail.com/questions/127558

改行コードでテキスト折り返す

white-space: pre-wrap
word-wrap:break-word

テキスト折り返さない

white-space nowrap

アニメーション animation

@kayframe 定義

@keyframes AnimationName
  from
    opacity 0
  to
    opacity 1

@keyframes AnimationName
  0%
    opacity 0
  50%
    opacity 1
  100%
    opacity 0

Animationタグ
引用> https://qiita.com/7968/items/1d999354e00db53bcbd8#no09-animation-プロパティ
(Animationについてはこの記事だいたいまとまっている)

セレクタ名 {
    animation: animation-nameの値 animation-durationの値 animation-timing-functionの値 animation-delayの値 animation-iteration-countの値 animation-directionの値 animation-fill-modeの値 animation-play-stateの値;
}

セレクタ名 {
    animation: 名前 開始から終了までの時間 進行の度合い 開始時間 繰り返し回数 再生方向 開始前・終了後のスタイル 再生・停止;
}

“scrollmagic offset percentage”

janpaepke/ScrollMagic#337
scroll magicのトリガーの位置を％で指定したいときはoffsetじゃなくてtriggerhookに0.0~1.0の値を入れる

画像のロード待つ

const waitLoadingImage = (src)=>{
  return new Promise((resolve)=>{
    const image = new Image();
    image.onload = ()=>{
      resolve();
    }
    image.src = src;
  })  
}

ゼロうめ

function yyyymmdd(y, m, d) {
    var y0 = ('000' + y).slice(-4);
    var m0 = ('0' + m).slice(-2);
    var d0 = ('0' + d).slice(-2);
    return y0 + m0 + d0;
}

いつもつかうやつ
https://github.com/js-cookie/js-cookie

import Cookies from 'js-cookie'

Cookies.set('foo', 'bar')
Cookies.set('name', 'value', { expires: 7 })
Cookies.get('name') 
Cookies.remove('name')

カルーセル

いろいろ検討したけどカルーセルはこれが一番いいと思う

指定回数の処理をするv-for

https://hafilog.com/vue-for-loop

コンポーネントを再レンダリングする

Vueコンポーネント再描画の方法
keyに値入れておいてそれを更新すると再描画される。
なのでdataに変数をもっておいて、更新したい時変数をインクリメントするなどした。

テキストの背景にパターンを敷く

ビデオ(イメージ)をpathでマスクする

サブセット化されたnotosans

Android Chromeデバッグ

usbデバッグを有効にする
chrome://inspect/#devices

psdで使われてるフォントを表示するスクリプト

画像圧縮

pngquant
フォルダを再帰的に読む方法

findで探してパイプする
find {dir} -name '*.png' -print0 | xargs -0 -P8 -L1 pngquant --ext .png -f --speed 1

実行前に対象ファイルを確認したいときは以下のようにechoすれば良さそう
find {dir} -name '*.png' -print0 | xargs -0 -P8 -L1 echo

xargsのオプション、-0はデリミタ文字(不要文字？)の削除 -Pは同時実行可能数 -Lは展開可能数らしい
xargsのオプションいろいろ
 xargsのオプション無し、-Iオプション、-0オプションの挙動に関する勘違い

jpegoptim
再起云々はpngquantと同じでできる。
以下のリンクはjpgoptimの画質設定の比較。95くらいにしないとかなり劣化する

よってコマンドは
find {dir} -name '*.png' -print0 | xargs -0 -P8 -L1 jpegoptim --strip-all -m95 -t
確認は
find {dir} -name '*.jpg' -print0 | xargs -0 -P8 -L1 echo