ポプテピピック「数々の名誉ある賞」の載った帯の再現

ちょっと前に話題になった、ポプテピピックの「数々の名誉ある賞」の載った帯をhtmlにした。 これを元にちょっと遊べるものを作る予定。

See the Pen 【重要】数多くの名誉ある賞 by tamoriinu (@yokoyama) on CodePen.

元ネタ omoganews.com

山手線を描く

See the Pen 山手線 by tamoriinu (@yokoyama) on CodePen.

この間見つけた以下のsass mixinが便利なので、山手線の沿線図を描いてみた。
Placing Items on a Circle | CSS-Tricks

吹き出しの位置とか結構適当。
色々他にも応用できそうな気がする。

vue.jsのカスタムイベントの名前はキャメルケースでは動かない(例外あり)

github.com

jp.vuejs.org

タイトル通りでケバブケースかすべて小文字にする必要がある。
HTML attributes are case-insensitive だから。
なのでカスタムイベント以外のpropsに渡す値なども、ケバブケースにする。(ちょっと面倒臭い)

【動かない例】 jsfiddle.net

ただし、テンプレート文字列を使う場合は動く。

【動く例】 jsfiddle.net

テンプレート文字列 - JavaScript | MDN

円状に並べたdotが点滅するやつ

now loadingなどでよく使われるものをcssで作成。

See the Pen flashing circle by tamoriinu (@yokoyama) on CodePen.

以下参考

Bouncing loader

30 Seconds of CSS

要素をcircle状に並べるmixin(これは結構便利)

Placing Items on a Circle | CSS-Tricks

Javascriptでのsortまとめ

JSでの数値の昇順・降順、アルファベット順のsortをまとめておいた。 ひらがなや漢字のsortはJSでやらないほうがよい気がする。

See the Pen javascript sort by tamoriinu (@yokoyama) on CodePen.

参考サイト goma.pw

オブジェクト内の全プロパティ値にある文字列が含まれているかのチェック

これの中にあるフィルタリング機能の所を抽出したのが以下

備忘録としてやっていることをコメントしておいた。 lodashのincludesを使えばもっとシンプルに書ける。Nativeのincludesは、そのままだと配列にしか使えないよう(後できちんと調べる)

javascriptの関数処理計測

javascriptである関数の処理にかかる時間を計測するのに以下のサイトを参考にさせてもらった。 sbfl.net

こちらの本にあったdivのappend計測を実装。

しかし、上記の本は2013年出版だが、jQuery中心の内容で改めてjs界隈の移り変わりの速さを実感した。