[JS] YouTubeのインラインプレイヤーとモーダルダイアログの連動

以下要件：

  1. YouTubeの動画をインラインで再生させる
  2. 1をクリックするとモーダルでその動画を拡大表示させる
  3. モーダルウィンドウが開いている時はインライン動画は停止、閉じたら再生

“[JS] YouTubeのインラインプレイヤーとモーダルダイアログの連動” の続きを読む→

By Javascript コメントする

[CSS] 背景画像の特定の位置を常に画面中央に配置する

backgroundプロパティだけでやるより融通がきくやつ。

See the Pen centering background image by Tenderfeel (@Tenderfeel) on CodePen.

サンプルの猫画像は縦長（1600×2400)のものを使って、猫の顔が常に画面に入るように指定している。

positionとtrasnform操作すれば画面に映す場所の指定ができる。
たとえば上固定して下を伸ばすなら top:0; bottom: auto; transform: translate(-50%, 0); となる。

By CSSコメントする

[CSS] 縦スクロールのニュースティッカー

縦方向に１件ずつスクロール表示するやつ

See the Pen Pure CSS News Ticker (vertical) by Tenderfeel (@Tenderfeel) on CodePen.

表示エリアの高さ＝リスト要素１件の高さ＝keyframeのスクロール量　にする。
keyframesに入れてるvisibilityを消すと巻き戻る様子が表示される。
演出として巻き戻すところを敢えて見せるなら消してもよろしいと思う。

By CSS 、、コメントする

[JS] Object.entries や Template Strings による簡単なテンプレート

JavaScriptでオブジェクトをループさせたいと思った時は Object.keys でキーだけ配列にしたものを
Array.forEach で回すっていうのが鉄板だったが、
ES2017の Object.entries の方が見た目エレガントやなあと思った。

“[JS] Object.entries や Template Strings による簡単なテンプレート” の続きを読む→

By Javascript 、コメントする

[JS] jest-mock-axios “Cannot read property ‘resolve’ of undefined”

JestのtestでmockAxios使ってて、mockResponseのところでエラーになる原因

//TypeError: Cannot read property 'resolve' of undefined

> 297 |  mockAxios.mockResponse({ data: [] });
  298 |  wrapper.vm.refresh(); ← axios.getしてる
  299 |  expect(mockAxios.get).toHaveBeenCalledWith(

同名であげられてたissueにあるコメントを要約すると
テスト書くときの順番の問題で

wrapper.vm.refresh(); ← axios.getしてる
mockAxios.mockResponse({ data: [] });
expect(mockAxios.get).toHaveBeenCalledWith(

axios.getしてるやつの後にmockResponseを書けばエラーは出ない

By Javascript コメントする

[css, js] 404エラーのimgタグをいい感じにスタイリングする

詳しく書いてある記事はこちらで、
https://bitsofco.de/styling-broken-images/
imgがbroken状態になるとbefore, after擬似要素使えるからよしなにやっつければおkという意味である。
この記事ではbefore, after擬似要素に背景色をつけてposition:absoluteで上に被せて消している。

私の場合は

  • どんなサイズの画像があるか事前にわからない
  • レスポンシブ
  • NO IMAGE画像素材を使う
  • Retina対応もする

ていう条件があった。
“[css, js] 404エラーのimgタグをいい感じにスタイリングする” の続きを読む→

By CSS 、コメントする

[WordPress] カスタムヘッダーをカルーセル表示に変更する

デフォルトだと画像１枚しか表示できないので、登録されているヘッダー画像をカルーセルでスライドショーしてやろうっていう改造についての覚書。
文中ではSwiperを利用する場合のソースになっているが、別のライブラリでもマークアップ変えたら動くと思う。

なおVer4.9＆PHP7環境でこしらえたので他のバージョンでは動かないかもしれない。
（すくなくとも4.7以上は必須）
“[WordPress] カスタムヘッダーをカルーセル表示に変更する” の続きを読む→

By wordpress 、コメントする