【2024-03-10】Dependabotに特定のパッケージのバージョンをあげさせない

背景

1つ前のScrapの投稿でmarkdown-itのバージョンを最新から1つ前に指定した。
するとすぐにDependabotがバージョンを最新にアプデしたPRを作ってCloudflareのビルドエラーで落ちている。

実装

markdown-itは最新にしなくていいなぁ...。
厳密にいうと14.0.0でなければ良いので以下のように修正する。

dependabot.yml

version: 2
updates:
  - package-ecosystem: "npm"
    directory: "/"
    schedule:
      interval: "weekly"
    groups:
      dependencies:
        patterns:
          - "*"
+   ignore:
+     - dependency-name: "markdown-it"
+       versions: ["14.0.0"]

メジャーアップデートを無視したければ以下のようにする。

dependabot.yml

    ignore:
      - dependency-name: "markdown-it"
+       update-types: [ "version-update:semver-major" ]

結果

落ちていたPRをCloseしてくれた。

因みに手動実行は「Insights > Dependency graph > Dependabot > package.json」の「Check for updates」をクリック。

参考

saneatsu 1ヶ月前に更新

【2024-03-13】R2のキーの命名規則

背景

やりたいこと

ユーザーアイコンやら画像ファイルをR2に保存したい
GitHubやZennのようにMarkdownにペーストした際に画像をアップロードしてリンクを表示させたい

キーの命名規則

R2のバケット・キー命名規則について調べる。
（R2の情報は少ないし、S3と互換性があったと思うからS3について調べてみた）

Qiitaの記事の中にある通りまさに「REST的な命名」をしようとしていたわけだが逆だったのか。
今回は要件がある程度固まってるし大丈夫そうだな。

3 ～ 4 文字のハッシュプレフィックスを追加すれば十分です。プレフィックスとしては、16 進のハッシュを使用することを強くお勧めします。

Zenn の画像URLも zenn-user-upload/f3241403904d-20240316.png って感じになっているのはこのパフォーマンスの問題を回避するためだったりするのかな？

まとめると、

前提
- S3は各リージョンにオブジェクトキー名のインデックスを持っており、オブジェクトキーは複数のパーティションにUTF-8バイナリ順で格納されている
課題
- キー名の一部に連番や日付を使うとパフォーマンスに問題が発生する
  - 例: examplebucket/2013-26-05-15-00-00/cust1234234/photo1.jpg
理由
- 連続するプレフィックスを使うと、Amazon S3が大量のキーを特定のパーティションに集中させるためパフォーマンスが低下する
- その結果、そのパーティションの処理能力が限られ、スローダウンが生じる可能性がある
解決方法
- ランダムなプレフィックスを使うと、キーが複数のパーティションに均等に分散されるため、負荷がより効率的に分散され、パフォーマンスの問題が軽減される
  - 例: examplebucket/232a-2013-26-05-15-00-00/cust1234234/photo1.jpg
- プレフィックスは3〜4文字あればよく、16進数のハッシュがおすすめ

その他

GitHubとかこのZennも「クリップボードから画像をコピペしたらアップロードされてURLが発行される」わけだけども、それだと画像をアップロードしたが使わないケースがあった場合無駄に容量食っちゃうのでは？と思っている。

しかし、それを回避しようとすると、記事投稿時に選択したものだけにURLが発行されるからユーザー的にはちょっと手間ではある。

無駄に容量食うのは許容するしかないよね、という考えが一般的ということなのだろうか？

saneatsu 1ヶ月前に更新

【2024-03-15】Prisma x D1(SQLite)ついにAssigneesが...！

このScrapで見ていたIssue、Prisma x D1(SQLite)のIssue、ついにアサインされた

03-17追記

このパッケージでいけるのか？？
3月いっぱい様子見てよ

03-21追記

試してみる人いた。

結論(2024/3/19時点)
ビルドサイズがPrismaだけで1MB近く専有するので有料版のCloudflare Workersのみが動作します
PrismaのmigrateはCloudflare D1への反映はサポートされていないのでPrismaが出力したDDLをCloudflare D1に向けて実行する必要があります

それに対して更にService Bindingで回避できるよ、というScrapを書いたという投稿。

saneatsu 1ヶ月前に更新

【2024-03-15】埋め込まれたYoutubeの最大幅を設定する

追記：どんぴしゃの内容がググっても意外と無かったので記事にしてみた。

やりたいこと

Zennのパブリックリポジトリ内のCSSを見ながらYoutubeの埋め込みのCSSを書いている。
しかしwidthは100%になってしまうので、明示的に最大幅を設定したい。

実装

Youtubeの埋め込みに関する最小限の実装は以下。

span.embed-block {
  max-width: 600px; // 最大幅
  display: block;
}

.embed-youtube {
  position: relative;
  padding-bottom: min(calc(58%), calc(600px / 16px * 9px + 16px)); // 16pxは適当な値
  iframe {
    position: absolute;
    width: 100%;
    height: auto;
    border: none;
    aspect-ratio: 16 / 9;
  }
}