今夜がλ

夜だけプログラマー

読んだ記事とメモ

読まなかったブクマ・読んだブクマ・面白くなかったブクマ・有用なブクマなどの管理がしづらくなってきたので、「読んだ記事アルバム」のようなものとしてまとめていくことにしました。 特に新しい記事のみという訳ではないので、雑多にまとめてこの記事に追加更新していく予定です。

個人的な備忘録なので今後の取扱をどうするかまだ決まってませんが、とりあえず走り出しということで。

インフラ

www.fastly.com

  • Cloudflareが「Fastly(Compute@Edge)よりも3倍早い」と言った記事に対するFastlyの反論記事
  • エッジネットワークの相対的なパフォーマンスの測定は容易ではない
  • TTFB以外に必要な計測のための要素
    • リクエストをお客様のコードに渡す際のスタートアップ時間
    • 様々なサイズのワークロードに対するコンピューティングパフォーマンス (思考時間)
    • リクエスト頻度の高いオブジェクトとロングテールコンテンツの両方に対するキャッシュパフォーマンス
    • オリジンリクエストを含むユースケースにおけるオリジンサーバーへのラウンドトリップタイム

tech.basicinc.jp

  • killコマンドはSIGKILLを送信する
  • 引数を渡すことでSIGHUPだったりSIGINTだったりを送信できる
  • プロセス単位でデフォルトの挙動が上書きされていることがある
    • SIGKILLを送信されてもkillされないプロセスというのも存在し得る
  • pumaはSIGHUPを受け取るとログファイルをリオープンする仕様になっている

JS

github.com React18におけるsuspenseのRFC。

Start Date: 2022-03-23

  • Suspenseは、コンポーネントツリーを表示する準備がまだ整っていない段階で、コンポーネントツリーの一部のloading stateを宣言的に指定することを可能にする。
  • React16.6.0の時点では、suspenseはクライアント上でReact.lazyを使ってcode splittingをするためだけのものだった。
  • suspenseがどう動くか
    • renderの状態ができていないことを表す。
    • dataの取得方法によらず、Reactにdataのloading stateをさせることができるので、コードとdataのloadingstateを完全に分離できる。
  • Behavior change: Committed trees are always consistent
    • renderingに関する処理順序・手法が一部変わった。
  • New feature: Server-side rendering support with streaming
    • 元々は、SSR中にsuspendするとエラーになっていた。
    • 新しい手法（stream形式でのrenderer）では、準備が完了していない一部HTMLツリーにfallback HTML（例えばspinner）をemitすることができる。
    • 準備が完了した段階で、同じstream上の短いインラインscriptを使いオリジナルのDOM構造を差し込む。
    • streamとは別の話だが、suspenseを使うことで、hydrationは全てのcode-splitting chunksのloadingを待つ必要がなくなる（main bundleが準備できたらすぐにhydrationできる）。
    • 欠点として、synchronous SSR render（stream形式ではないrenderer）を使っているであろうlibraryについては異なるアプローチを考える必要があるかもしれない。
  • New feature: Using transitions to avoid hiding existing content
    • 例えば、タブUIでタブを切り替えた時、新しいタブのコンテンツが準備できていないのであればsuspenseのfallbackが表示される。
    • fallback表示が気になるのであれば、startTransition APIを使ってタブの切り替えを行うと、新しいタブのコンテンツが準備できるまでタブの切り替えを待つことができる。
    • fallbackがないとユーザーが混乱するかもしれないので、startTransition とセットで useTransition APIの isPending を使うことで、インタラクティブなUIを維持できる。
    • suspenseはネストで利用できる。
    • transitionのdurationをマニュアルで設定する方法はない。
  • Behavior change: Layout effects re-run when content reappears
    • 再度タブUIでタブ切り替えを考えると、suspense状態のときにタブ内のコンテンツ量はわからないため、layoutに影響を及ぼす。
    • layout effectsを実行することで解決できるはず （<-手法が理解できなかった）

career.levtech.jp

関数をsetStateに渡す手法。

複数のsetStateを非同期に行いたくない場合、関数を渡すことで、stateの更新や更新に関する値の取得を行うことが意図した順序かつタイミングで行うことができる。

zenn.dev

  • useRefの返り値の型：RefObject or MutableRefObject
  • どっちの型をどの場面で使うべきか？
  • インスタンス変数代わりに使う時、DOMやコンポーネントにアクセスする手段として使うときなど

blog.uhy.ooo

  • Module Record
    • Abstract Module Record
    • Cyclic Module Record
    • Source Text Module Record
    • （それぞれ別々のものという訳ではない）

tech.plaid.co.jp

  • TSでしか書けないCSS in JS(TS)
  • EmotionよりもTSに対する親和性高そう

zenn.dev

  • useStateではなくuseReducerを使シーン（状態更新が複雑なシーン）について
  • 複雑さの判断ポイント
      1. 更新処理トリガー
      1. 更新条件
      1. 更新ロジック

CSS

coliss.com

  • コンテナクエリ（@container）：親コンテナのサイズによってスタイルを変える
  • カスケードレイヤー（@layer）：詳細度が高くてもレイヤーのスタイルを上書きできない仕組み
  • color-mix, color-contrast：カラーの混合やコントラスト基準を満たすカラー選択が可能になる

＃Glaphics kamino.hatenablog.com

  • OpenGLはラスタライズ前提
  • ラスタライズ方式：描画したい図形や物体を2次元平面（カメラ画像平面）に射影することで画像を生成。物体相互の影響考慮がされない（自分で影を配置してあげる必要がある？）。ゲームなんかはラスタライズが多い。
  • サンプリング方式：光の反射の軌跡をシミュレート。レイトレーシングとかはこの方式。リアリティは高いが計算ロジックに工夫が必要。
  • OpenGLでサンプリング方式でレンダリングするする場合工夫が必要
  • GLUI, freeglut, GLFW
  • Vulkanは複雑

サービス

https://www.digest.elyza.ai/

長文要約AI