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 はコンポジットごとにクリアされて黒いビットマップになる。とい…
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は厳しいんだなと思うが、そもそも…
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の…