2023/08/12 ~ 2023/08/18 のもくもく日記

もくもく 前回までは

2023/08/05 ~ 2023/08/11 のもくもく日記 をご覧ください。

途中経過

その１

HTML の要素のリサイズって、CSS でリサイズできるようにするので、変更の検知がややこしいorz とりまこれを参考に組み上げてみよっと💪

How to use ResizeObserver with Angular - DEV Community

Window じゃなくて、各DOM のリサイズを検知するRxJS のObserver を書いてみた。 動くは動くけど、最適化出来ているかは怪しいw

function resizeOf(dom: Element) {
    return new Observable(function subscribe(subscriber: Subscriber<DOMRectReadOnly>) {
        const observer = new ResizeObserver(entries => {
            subscriber.next(entries[0].contentRect);
        });
        observer.observe(dom);

        return function unsubscribe() {
            observer.unobserve(dom);
        };
    });
}

※参考文献

その２

そっか、JavaScript のsort って副作用ありだったかorz いっつも忘れて、いっつもハマってしまうので、そろそろ覚えたいw

Array.prototype.sort() - JavaScript | MDN

その３

Angular でmarkdown を描画をする際に、諸般の事情でnativeElement を触っているのだけど、ライフサイクル周りで諸々引っ掛かって時間が溶けていく:

その４

CSS のメディアクエリーって、ビューポートの向きも判定できるっぽい👀

orientation - CSS: カスケーディングスタイルシート | MDN

今回の成果

• GitHub
• Nintendo Switch でトレーニングを進めた
  • 脳を鍛える大人のNintendo Switchトレーニング
  • リングフィット アドベンチャー
• 本を読み進めた
  • 単体テストの考え方/使い方