[javascript] 内包する要素のサイズを比率から計算する（contain or cover）

object-fit: cover; などのサイズをjsで計算する。
div要素をcover表示するときなどに使えるかもしれない。

See the Pen calculate cover and contain by phantom4 (@phantom4) on CodePen.

CodePenで見る

[JavaScript] 要素が画面内に表示されているか

getBoundingClientRect() を使うと簡単に判別できるようです。

要素が画面内に表示されている

const rect = element.getBoundingClientRect();
const isInView = 0 < rect.top && rect.bottom < window.innerHeight;

要素が一部でも画面内に表示されている

const rect = element.getBoundingClientRect();
const isInView = 0 < rect.bottom && rect.top < window.innerHeight;

See the Pen in view by phantom4 (@phantom4) on CodePen.

Codepenで見る

iPhoneではcodepenやiframeで上手く動きません。

iPhone用サンプル

Vivaldiのスピードダイヤル用のサムネイルを生成する

毎回photoshopなどで作るのが面倒なので、アイコンをアップロードしてサムネイルを生成するツールを作ってみました。

Codepenで見る

See the Pen Vivaldi thumbnail generator by phantom4 (@phantom4) on CodePen.

future

  • 複数素材のアップロード
  • 素材をURLで指定
  • 素材のサイズ指定
  • サムネイルのサイズ指定
  • 背景色の選択

ランダムな日付・時間を生成

カンプのダミー用などに。

出力サンプル（2018/1/1 – 2018/12/31 の期間で 10:00 – 20:00、新しい順）

2018/11/16 11:31:57
2018/11/04 19:09:04
2018/10/31 12:27:34
2018/10/06 15:45:07
2018/09/28 17:09:31
2018/09/03 18:29:38
2018/05/25 10:30:33
2018/03/13 17:48:37
2018/02/16 11:43:20
2018/01/24 15:59:15

日付のフォーマット、生成する日付の期間、含めない期間 or 時間、並び順（ランダム or 新しい順 or 古い順）が指定できます。

Codepenで見る

See the Pen Generate date&time random by phantom4 (@phantom4) on CodePen.

[Trello] リストを削除する（アーカイブではなく削除）

Trelloのリストを削除するにはアーカイブすることになっていますが、見えなくなるだけで残ってしまいます。

どうしても削除したい場合、削除用のボードを作ってリストを移動し、ボードごと消す方法があります。
以下、手順です。
続きを読む [Trello] リストを削除する（アーカイブではなく削除）

中黒（ビュレット記号）のsvg

忘れた頃に使うことがあるのでコピペ用

<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
  <circle cx="8" cy="8" fill="#bdbdbd" r="2"></circle>
</svg>

bullet_black.svg (#000)
bullet_dimgray.svg (#696969)
bullet_gray.svg (#808080)
bullet_darkgray.svg (#a9a9a9)
bullet_silver.svg (#c0c0c0)
bullet_white.svg (#fff)