Wed Aug 09 2023
...

コメントメニューの更新

! この記事には専門用語が含まれています

変更点

一部のFastCommentsテナントはコメントウィジェットをカスタマイズしています。これによりカスタマイズと当社の実装との間に契約が生まれます。我々はこの契約を壊さないよう最善を尽くしますが、この発表の一環として小さな互換性のない変更があります。

開発者向け

コメントメニューのCSSセレクターが変更されました。

旧:

.comment .menu .menu-content

新:

.menu-content

既存のテナント

すでに「menu-content」セレクターを使用している場合、おめでとうございます！このセレクターを使用しているすべてのテナントを調査し、ウィジェット設定を更新して壊れるのを防ぎました。

問題があればお知らせください。

理由

コメントウィジェットが作成されて以来、コメントメニューは純粋にCSS駆動のドロップダウンでした。これはコードをあまり必要としないシンプルで高速なドロップダウンメニューを実装するための素晴らしい方法です - これはFastCommentsの設計目標です。

しかし、年月が経つにつれて問題が発生しました。

一つは、コメントエリアに特定の高さがあり、スクロール可能な場合（ストリーミングチャットのように）、メニューの下部にアクセスするのが難しく、メニューがスクロール可能なコンテンツ領域を越えようとするためです。これによりメニューの一部が見えなくなり、意図していた作業を完了するためにマウスを移動してメニューの上に再度ホバーする必要があります。我々はこれが使いづらいと感じました。

メニューの方向を上に反転させるなどの回避策がいくつかありましたが、ウィジェットの高さが十分でなく、メニューに多くのアクション項目がある場合（管理者向けなど）はこれも機能しません。この場合、スクロール可能なコンテンツ領域の外にメニューをドロップするのが理想的です。

サイズの利点

この変更の一つの利点は、多くのコードを非同期で読み込むモジュールに抽象化できたことです。これによりウィジェットの最初の読み込みを膨らませることなく、コメントデータに対して実行できるアクションを拡大できます。これは、最初に編集メニューにホバーしたときにネットワーク呼び出しを発生させますが、初期バンドルは非常に小さい（< 1kb）ので、あまり気にならないはずです。

ソフトウェアを進化させ続けることと、そのサイズを時間とともに減少させることは非常に難しいです。通常、ソフトウェアは最初は速く、次第に遅くなります。したがって、FastCommentsを速く保つために努力し続けることを嬉しく思います：

Before: 28.76kb gzipped (108.02kb total)
After: 28.39kb gzipped (105.79kb total)

コードが少ないことは、ページ読み込み時にブラウザが解析するコードも少ないことを意味します。この影響はより多くの機能が追加されるにつれて拡大します。

性能の利点

旧メニューはすべてのメニュー項目をレンダリングし、拡張機能が項目を追加できるかを確認するためにすべての拡張機能を読み込んでいました。そしてそれらをすべてレンダリングしていました - 各コメントに対して - そのためコンテンツはマウスの準備が整っていました。

通常30〜100のオブジェクトしかないため、これは大きな問題ではない傾向がありますが、影響は増大していました。新しいシステムはこの懸念を取り除き、メニューは現在要求に応じてのみレンダリングされます。

トレードオフは、新しいメニューはJSを使用して我々が望むことを達成するために位置付けられ、レンダリングされることです。引き続き最適化を行っていきますが、現在はうまく機能しています。

結論

これらの変更を導入する際の顧客のご理解に感謝します。これからもFastCommentsを愛していただけることを願っています。

乾杯！

Wed Aug 09 2023...