技術記事以外

技術記事以外の振り返りやその日学んだことのちょっとしたメモなどを置く予定です

JS

今日の学習メモ

Boyer-Moore Voting Algorithm 頭良すぎる〜〜〜〜〜シンプルな感じのロジックに見えるけど最初え、なんで動くの?って感じで色々なパターンやってみたら(当たり前だけど)うわ、この場合もここがこうなるから問題ないのか…!の連続 授業の影響で pigeon-hole…

今日の学習メモ

Test Generator | Playwright playwright を起動してサイトを操作するだけで画面テストを生成してくれるらしい。 「UXデザインとは」からはじめる「本流」のUXデザインはじめの一歩 | UXデザイン基礎セミナー 第1回 「ユーザーは自分の欲しいものを知らない…

今日の学習メモ

nmi.jp 使わないので何回読んでも都度忘れるから定期的に勉強し直さないといけないビット演算 2の補数の表現において、一番左のビットは符号ビットと呼ばれ、これが1の時は負の数になる そのため、32 bit で数の表現をする場合、最大の正の数は一番左のビッ…

学習メモ

web.dev Heapなども含めたJSの実行状態のスナップショットをキャッシュすることができ、bfcacheと呼ばれる setTimeoutの進捗なども一点でストップした状態で記録され、キャッシュをロードした時に再開される リクエストに対するレスポンスを保持するHTMLCach…

今日の学習メモ

Bubbling and capturing 基本的に event.stopPropagation でバブリングを止める必要はない、というか思わぬところで副作用が出たりするので本当に必要でもなければしないほうが良い イベントは最初は親からターゲットに伝わるcaptureのフェーズがあるが、ほ…

今日の学習メモ

Learning from the session Canvas is not accessible, so we should use SVG for meaningful data such as graphs as much as possible It's possible to add markup in canvas tag as fallback set role="img" and use aria-label. Update img.alt or othe…

今日の学習メモ

LightHouseなどのツールで機械的なパフォーマンスの数値が計測できて色々な改善のとっかかりになる一方、それでは大きな改善が見られなかった場合には実際にユーザーが体験している数値を計測することが必要になる その時、Navigator Timing API と Resource…

今日の学習メモ

https://stackoverflow.com/questions/26783586/canvas-todataurl-returns-blank-image/26790802#26790802 Canvasによる描画実行の流れ(ドローイング・モデル)-Canvasリファレンス Canvas はコンポジットごとにクリアされて黒いビットマップになる。とい…

今日の学習メモ

JS

Pixi.js の pivot は中心にpivotをセットすると元々の(0,0)の位置に中心がくる形でGraphics自体が移動してしまうっぽい? 最初から(0,0)に中心がくるように描画した方が楽そう

今日の学習メモ

Performance overhead of PIXI.Container - Pixi.js - HTML5 Game Devs Forum Pixijs のコンテナあるなしで Devtool > Performance Monitor の CPU 利用率が 50% -> 10% くらい違う 原因はよく理解できていないけど後で調べる

今日の学習メモ

pixi pointerevent currentTarget = null ? - Pixi.js - HTML5 Game Devs Forum PixiJSでpointerdownとかのイベントを取得した時にイベント丸ごとconsole.logで出力するとtarget/currentTargetがnullに見えるけど実際には入っているやつ罠感すごい

今日の学習メモ

npmとかでライブラリ使うときに @なんとか/projectName みたいになってるのなんなんだろう、親戚同士のレポまとめるみたいなものなのかなと勝手に思ってたけどあれはスコープと言ってあれをつけることでパッケージ名の被りを回避できるらしい。なるほど。

今日の学習メモ

https://crates.io/crates/console_error_panic_hook Rust で wasm するときはこれを入れておくとちゃんとエラーメッセージが出て便利(素のままだとunreachableみたいなRuntime error しか出ない)

今日の学習メモ

正式仕様リリース! JavaScriptの最新仕様ES2021で追加された新機能まとめ 大変わかりやすいまとめ ??= 辺りはぱっと見頭がバグりそうになるけど慣れたら便利そう

今日の学習メモ

PWAを一旦ホーム画面に保存して、ページの一番上が表示されている時(スクロールしていない状態)で上から下に引っ張る(スワイプする?に入るのかなこれも)と上部に謎の空白ができるんだけど、多分これはアプリとかで上から下に引っ張るとページを更新するPull…

今日の学習メモ

色々書き比べた結果Tailwind CSSにしたという話 - Qiita メジャーな方法をいくつか紹介してからの流れで出してくれたのでそれぞれの良さとか違いがわかりやすいとても良い記事だった やっぱりアーティスティックな感じのUIは厳しいんだなと思うが、そもそも…

今日の学習メモ

JS

GitHub - tc39/proposal-intl-segmenter: Unicode text segmentation for ECMAScript ちょうど文章を単語ごとにくぎりたいことがあってどうしようかと思っていたところにすごいものを見つけた。Chromeではもう使える!ああでもこれSafariでも動かさないとい…

今日の学習メモ

Introducing WebContainers: Run Node.js natively in your browser このターミナルで走ってるNode.jsはリモートのVMとかじゃなくてブラウザで動いているとのこと 興味深い… Devtool使ってバックエンドのデバッグできるのは結構惹かれるものがあるかもしれな…

今日の学習メモ

Wake Lock APIを使うと画面をつけたままにしておくことができるが、サポートがかなり限られているので、現時点だとNoSleep.jsのようにブラウザに応じて別の方法を適用してくれるユーティリティを使うのが現実的な気がする。

今日の学習メモ

ブラウザはまだgRPCを解釈することができないので、gRPC-webのようなproxyが必要。Envoyなどが使われることが多い。

今日の学習メモ

ダークモード対応 JSでOSのダークモードの設定を取得するには、メディアクエリをmatchMediaで読むのが良いらしい: 参考

今日の学習メモ

JavaScript オブジェクト入門 - ウェブ開発を学ぶ | MDN 読んでいて役に立ちそうな真新しい発見とかはないんだけどECMA2015以前の話とかちょっと面白かった。classのない世界か〜 XMLHttpRequestって直接使われることはどれくらいあるんだろう 自分がプログ…

今日の学習メモ

The W3C Markup Validation Service Markupのバリデーションしてくれるらしい。便利そう(まあでもJSのロード待ってはくれないのでSPAではheadしかチェックしてくれない) <abbr> 略語を括る用のタグがあったとは知らなかった。これで括ってtitleに正式名称入れたり</abbr>…

今日の学習メモ

Bazel ちょっとBazelのキャッチアップをした 基本的に大規模になればなるほど恩恵を受けられる感じ あとは環境の違いを吸収してくれるからチーム開発でも 個人開発でプロジェクトも小規模だと積極的に採用する理由はないかも Node Node 14以前だとimport使う…

今日の学習メモ

Web Animations API を利用する - Web API | MDN - はああ、CSSアニメーションっぽいことをJSかつブラウザ組み込みのAPIで出来るのか、すごい

今日の学習メモ

Nullish Operator、できたときは超喜んだ物だけどなんだかんだまだ使ったことないなあ。少なくとも前職では0がfalseになる起因のバグ多かったからありがたいと思う

今日の学習メモ

Angular Change Detection - How Does It Really Work? Dev modeではChange Detectionが2回走る。そうすることで、Change Detectionのループを検出することができる。これはExpressionHasBeenChangedError(名前うろ覚え)のこと。ライフサイクルメソッドの中…

今日の学習メモ

Angular Change Detection - How Does It Really Work? Angularの起動時にはlow-levelのAPIの上書きが行われている。例えば、addEventListenerを上書きすることで「ネイティブのaddEventListenerを実行→Angular独自の変更があるかどうか、あれば再描画する」…

今日の学習メモ

Responsive Patterns Off canvasっていう縦割りしといてスマホでは一部だけを表示、横スクロールにするパターンは初めて見たな Reactのコンポーネント動的import React.LazyでDynamic importをする。 Dynamic importされたコンポーネントはSuspenseに包まれ…

今日の学習メモ

Temporal 評判の悪いJSのDate APIを使いやすくした物のproposalの概要を読んだ。Timezoneがあるものとないものが別の型になっているのと、immutableになっているのはかなり嬉しい気がする。dayjsやmomentが必須ではなくなる時代が来るといいな JavaScriptの…