#プロジェクト内用語定義このプロジェクトではブラウザ上で動くJavaScriptに関することを指す言葉。[Node.js]と「ブラウザで動くJavaScript」は必ずしも同じ機能が使えるとは限らない。ブラウザだと[Streams API]はNode.jsのReadableとかWritableとは違うし、cryptoも違うし、

#WebブラウザのJavaScript #Fetch_API #XMLHttpRequest #HTTP #リダイレクト[*** fetch()]まず`fetch()`は以下の仕様で分かるようにデフォルトが`redirect: 'follow'`になる。> A request has an associated redirect mode, which is "follow", "error", or "manual". Unless stated otherwise, it is "follow".

#Structured_Field_Values #HTTPEN: https://www.rfc-editor.org/rfc/rfc8941.html#name-why-not-jsonJA: https://triple-underscore.github.io/http-header-structure-ja.html#why-not-json

#hyper #Rust[Rust]の[HTTP]のライブラリの[hyper]では`tower_service::Service`がベースになってできている。[https://github.com/tower-rs/tower]のAboutにも書かれているとおり「 async fn(Request) -> Result<Response, Error> 」をしたいライブラリになっている。つまりリクエストをもらってレスポンスを非同期で返す。

#HTTP/1.0 #HTTP[** モチベーション]「HTTPの1系ならほとんどは1.1だろう」と思われていそうな時代にそれなりに広く使われていてデフォルトで[HTTP/1.0]を使ってくるソフトウェアをまとめたい。1.0にはTransfer-Encoding: chunkedがなかったりしてハマることがあるのでHTTP/1.0なのか1.1なのかが重要になるケースがある。[*** 一覧][ApacheBench], [abコマンド]

#X-Forwarded-Prefix #HTTP #リバースプロキシ #reverse_proxyリバースプロキシが受け取ったHTTPのリクエストのパス（`GET <ここの部分> HTTP/1.1`）をupstreamのサーバーに伝える時のヘッダに[X-Forwarded-Prefix]を使うことが広く使わされていることが分かった。[X-Forwarded-Prefix]の情報は現段階では少ない。[X-Forwarded-Prefix]は非標準のヘッダ。

#Webブラウザ #HTTP #Web目的：時系列で過去を知り、昔のWebブラウザでも動くアプリケーションを作るため。そのため場合によっては、HTMLの歴史OSの歴史

[curl]コマンドで[HTTP/2]の[多重化]を実装するのにステートが必要だと思うからどう実装してるのかなって思ってたけど、非対応だと公式が言っているのを見つけた。> The [command] line tool won't do any [HTTP/2] [multiplexing] even though [libcurl] supports it, simply because the curl tool is not written to take advantage of the libcurl API that's necessary for

#Service-Worker #ServiceWorker #HTTP以下の仕様に書かれているとおり、Webブラウザは[ServiceWorker]の登録をするときのHTTPリクエストに[Service-Workerヘッダ]をつける。>An HTTP request to fetch a service worker's script resource will include the following header:

#Piping_Server #コマンド #netcat[*** やりたいこと][curl]がインストールされてない/できない非常事態でもデータをデータ転送を[Piping Server]でしたい。[*** 送信]`./myfile.txt`は任意のファイルパスに変更可能。

[low-leve]の[HTTP]のライブラリと謳う[Hyper] 0.13での破壊的変更やRustの機能 async/awaitに対応を[Rust]版 [Piping Server]でおこなった。この対応における実際のコードの変化は以下。「[Merge branch 'feature/hyper-0.13-futures-0.3-http-0.2' into develop · nwtgck/piping-server-rust@28216b7 https://github.com/nwtgck/piping-server-rust/commit/28216b7e0dc0212393e74a8130baca98d4525298]」

#QUIC #HTTP>QUICはステートフルですので、おなじQUICコネクションのUDPパケットは同じサーバに割り振ってやる必要があります引用元: [HTTP/3をUDPロードバランサで分散するときの問題点 (AWS NLBで試してみた) - ASnoKaze blog https://asnokaze.hatenablog.com/entry/2019/12/30/201331]

#HTTP[*** 知りたいこと][HTTP]の[Transfer-Encoding: chunked]した時に、元データと比べてどれぐらい増えるのかを知りたい。[Base64]だとバイナリデータと比べて約133%増えるなどと言われていてそういった具合に[Transfer-Encoding: chunked]の場合のデータの増加ぐあいを知りたい。（[Base64 - Wikipedia https://ja.wikipedia.org/wiki/Base64]）

#Web_Bluetooth #WebブラウザのJavaScript #JavaScript以下のように、`acceptAllDevices: true`をして、`filters: [...]`はしないようにすれば良い。`navigator.bluetooth.requestDevice({ acceptAllDevices: true })``.then(device => { console.log(device) })`

#WebブラウザのJavaScript #JavaScript #ダークモード #ダークテーマ`window.matchMedia('(prefers-color-scheme: dark)').matches``.matches`は```true`だったら[ダークテーマ]で、それ以外は`false`。[NIpp]: [Prefers dark https://nipp.nwtgck.org/#Prefers_dark/es2017/K8/MS8kv18tNLEnO8E1NyUzUUNcoKEpNSy0q1k3Oz8kv0i1OzkjNTbVSSEksytZU14QoTS0GAA==]

#WebブラウザのJavaScript #JavaScript[*** Uint8Array → Base64]`// (from: https://stackoverflow.com/a/11562550/2885946)``function uint8ArrayToBase64(uint8Array) {``return btoa(String.fromCharCode(...uint8Array));`

#WebブラウザのJavaScript #JavaScript #feature_detection[*** 判定方法]以下のようにしてこの機能に対応しているブラウザかどうか判定できる。引用元: [Streaming requests with the fetch API https://web.dev/fetch-upload-streaming/#feature-detection]上記はReadableStreamのアップロードに非対応だと、`"[object ReadableStream]"`がアップロードされてしまうことを利用している様子。その結果おそらく`Content-Type: text/plain ...`がつく仕様になっているのだと思う。

#WebブラウザのJavaScript #JavaScript #ストリームすごく意味なさそうだけど[Polyfill]とか入ってるときに使ったりする。

#WebブラウザのJavaScript #JavaScript #random引用元: [Javascriptでランダムな文字列を生成する方法 - Qiita https://qiita.com/ryounagaoka/items/4736c225bdd86a74d59c#%E3%81%84%E3%81%8F%E3%81%A4%E3%81%8B%E3%81%AE%E6%96%B9%E6%B3%95]

#Service_Worker #WebブラウザのJavaScript #PWA[*** やりたいこと][Service Worker]にメッセージを送ってレスポンスを受け取りたい。送るだけでなくて[Service Worker]からなんらかの結果を受け取れるところが大事なところ。[*** やりかた]

#WebブラウザのJavaScript #JavaScript #暗号 #セキュリティ [Web Crypto API - Web APIs | MDN https://developer.mozilla.org/en-US/docs/Web/API/Web_Crypto_API]

#WebブラウザのJavaScript #JavaScript[[SWAGSHOT] https://js13kgames.com/games/swagshot/index.html][GitHub]: [remvst/swagshot https://github.com/remvst/swagshot]どうやって実装しているのか見てみたい。[< ESC]で抜けれる。

#Blob #ReadableStream #WebブラウザのJavaScript #JavaScript[https://github.com/mozilla/send/blob/90f6a07d4af4863165a827895a6d2a01ab948bde/app/streams.js#L43-L73][Firefox Send]は、ユーザーがドラッグアンドドロップした`File`(`Blob`)をストリーミングしながら暗号化したりしているので、どうやっているのか調べて見つけたもの。[Blob.slice https://developer.mozilla.org/en-US/docs/Web/API/Blob/slice]があるのでそれを活用している。

#ライブラリ #WebブラウザのJavaScript #JavaScript #トランスパイル公式: [Svelte • Cybernetically enhanced web apps https://svelte.dev/]GitHub: [sveltejs/svelte: Cybernetically enhanced web apps https://github.com/sveltejs/svelte]

#TCP #WebブラウザのJavaScript #JavaScriptまだ標準的な機能ではない。[Google Chrome]には[Chrome拡張]限定で使えるみたいなことが以下に書かれている。[html5 - Connecting to TCP Socket from browser using javascript - Stack Overflow https://stackoverflow.com/a/17337074/2885946]

#JWT #JSON_Web_Token #WebブラウザのJavaScript #Nipp以下でサーバーにデータを送らずにJWTをパースできる。[** [Parse JWT https://nipp.nwtgck.org/#Parse_JWT/es2017/hU9bU+IwFH7vr8i4O0OyYlsuVoHBGRQvxQUUUNdVR9OSQrQknSSVVof/vqnIxV3Hfeg055zvalkABoJPqmCsVCSrljWiUpkjqsaxZ/p8YnlcUDmJpVWwS8WdsvMtA+jDhDC1VShXSnbRQUY

#WebブラウザのJavaScript #fetch #timeout`function timeoutGet(path, timeout) {``const controller = new AbortController();``const resPromise = fetch(path, {``signal: controller.signal,`

#WebブラウザのJavaScript[Nipp] : [https://nipp.nwtgck.org/#Flatten_JSON/es2017/fY9Rb9s2FIXf9SsuiDxIiKImA4YO8pRiDxuwFKsDOG+uUNMyadOhSZe8WmoI+u8lKcmR7aR6kKjDe879Dq9VhUIr2Fqtng57NuWxPybQROCeSiuLgO5C8xkaKPpzmA8T9kVgtYH4ODNYg51aB

#Web_Crypto #WebブラウザのJavaScript #セキュリティ[*** やりたいこと][WebブラウザのJavaScript]だけで[Web Crypto]を使って安全にパスワードによる暗号化をしたい。[Web Crypto]はWeb標準の機能で動く。[*** やりかた]

#Web_Audio_API #WebブラウザのJavaScriptドミソ:https://nipp.nwtgck.org/#/es2017,click_run/hc9LCoMwEIDhvafIUjdBJ2CR0EXpAXqGEKcQkIQmYx+3rzEKtQZchvnnY6KdDcTU2BvXsDOz+GKX+Lg6S/imspKFnhMXdAxSybVHRXgL2gyDIudjt4RzAUcWrBYcWuLIEqsl8lYRb+d3j48Rrf7wpxpGnHagb

#Web_Crypto #SHA256 #ダイジェスト #メッセージダイジェスト #ハッシュ #WebブラウザのJavaScript[*** やりたいこと]サードパーティー製のライブラリを使わずに標準のライブラリだけでハッシュを計算したい。Web標準で使える[Web Crypto]を使えばできる。[*** 方法]

#Web_Audio_API #WebブラウザのJavaScript[Nipp]:https://nipp.nwtgck.org/#/es2017,click_run/zY+9btswFIV3PcWFu8ioQ0uyfmu4QJCiRac+gJFBoGlXgEC6JtXWCLzYkx8gc5AxQPZOfRq/SHmp3/w06hKgGgjx4zn3nkMFlwrSYpEJmAFnP+Ac/y8EV+ynsodTixqFkFS/Gx2hG5Yq9kXSLM9TJTaoypmCt

#StreamSaver.js #WebブラウザのJavaScript[*** 確認]https://gist.githack.com/nwtgck/55945861612869d9225a7de61780cef5/raw/StreamSaver.js-support-check.html[*** [Gist]][https://gist.github.com/nwtgck/55945861612869d9225a7de61780cef5]

#JavaScript #for文 #レキシカルスコープ #クロージャ[Google Chrome]で検証。[*** for(let i = 0; ...]以下は昔ながらfor文を`let`を使って書いたもの。`for(let i = 0; i < 10; i++) {`

#Nipp #JavaScript[Nipp]のホスト先のドメインなど関係なく、URLのフラグメント（`#`以降）からコードが抽出できる。[https://nipp.nwtgck.org/#Extract_Nipp_Code_from_URL/es2017/rY9Bi9swEIXv/hVzKNgG49BrQihLNpRCmi3b5NKyNKo0jlVkSYzkZtuQ/96RkzQO9NiDZc3M+0bvTSbwSVBA2D6vQFgF+BpJyAhRR4MVOB+1s+E8stIpVAs+sqa3Mk3AJ3qtvd+SgaIn

#JavaScript[Nipp]: https://nipp.nwtgck.org/#/es2017/yyvNyVGwtVUozUtJTcvMS00BAA==関連:[JavaScriptの「==」の評価アルゴリズムはAbstract Equality Comparison Algorithmという]

#JavaScript`Math.floor((new Date() - new Date("1995-12-17T03:24:00")) / (365 * 24 * 60 * 60 * 1000)) + "歳"`"1995-12-17T03:24:00"は[Date - JavaScript | MDN https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date]からとったもので、好きな生年月日を入れれば良い。

#AbortController #JavaScript #fetch[JavaScripit]の`fetch()`を中断させた時などに使う`AbortController`は使い回すべきではなさそうなことが分かった。なんとなくそのような気がしていたがちゃんと試した。一度`abort()`した`AbortController`は中断したという状態を保持し続けるような実装になっているように見える。他の実装の可能性として`EventTarget`のようにイベントが発生した瞬間に中断が発生するようなことがありえると思うがそうではなさそう。

#Temporal #JavaScript #Polyfill[*** やりたいこと]「[JavaScriptの日時処理はこう変わる！　Temporal入門 - Qiita https://qiita.com/uhyo/items/5f34f5d6f33aa091a104]」を軽く眺めていると、イミュータブルな時刻表現だったり、今までの`Date`でいけてないところが改善した良さそうな感じがしたので、試したくなった。

#JavaScript[Nipp]: [https://nipp.nwtgck.org/#/es2017/NY7dSsNAEIXv+xTHIHQmhsV6K1EIFBERRLzRNFBtJnWh3chmo4GSd7eZdi/mYwbOzxAx8jscZkDTetq0rgsobT1k6J0NFdoGpTGmTIokQ/KkfFY+KN+UL8ql8kP5XiSVERe8lY64Ml5+xXdCzFMXcGraf4bNt9

#JavaScript[Nipp]: [https://nipp.nwtgck.org/#Get_Readable_Bytes/es2017/TY9Pa4NAEMXv+ykGCUSLrbX0VOtFCKWUpoXk0oZA/DPaBRnD7iopxu/edbcxzuGxO2/3/WbKlnLFGwKBaZFmNSa/CuVGCU6Vm41nD3oGuvKGpIKWuJIQw85JHB+cN6PvRl+Mbo1+Gl0Z

#JavaScript #Nipp[https://nipp.nwtgck.org/#/es2017,click_run/jY9Bb9QwEIXv+RXTcFhb2jhbLki7ClJLewRO/ACvPUkNiScajzeKqv3vuClCKnDg4MO8mfc+v7YF1TNNR3gSmdOxbe08G0ceBw7eRJQWo/Davj/cfmgGlCYn5GZCH2xzq6vQq5slRE+LmdZL8EganiuAtxp0

#PageSpeed_Insights #API #JavaScript[Nipp]:[https://nipp.nwtgck.org/#/es2017,click_run,promise_wait/RY3LCsIwEEX3/YpZuEihNCC4UaoLdy5U8AcaYppG4iTkYSml/24qtt0Mw7ln7hDme+RAcqiOMGQA3KAPEJ2GCvxhAcyqM9MTrNsQrN9T2nVdKY2RWqTQl9y8qWVSeCvE06BWKOhnR13E+0x

#single_quote #Nipp #変換[*** やりたいこと]`"I'm John Smith"`のようなダブルクォートの文字列表現をシングルクォートな文字列に変換したい時に使う。例えば[Bash]などダブルクォートな文字列だと意味が変わる場面で使える。[*** Nipp]

[Nipp]: [https://nipp.nwtgck.org/#Kazu_Yomikata//y1awVVAN14hRUHiyo13haUuLwtPWNoUnu9YoPJ03WeHD0rkbFZ6vXKzwbNdchWf7pis8W7tY4cWeToVnS7cqPGuc9GzT5mebZiq8nLH/afPy50vbFV42LX4+ZeOT3dOAxvU+7V//rGHui7UbFJ63LHz[JavaScript]だと以下が便利そうだった。

#JavaScript #バイナリ #4バイト追記: 「[JavaScriptで整数 ⇄ バイト列に相互変換]」ですでにやっていたことを発見した...[JavaScript]の整数 (number) バイナリ表現(Uint8Array)に変換する方法。`// number => Uint8Array``function fourBytesIntToUint8Array(n) {`

#JavaScript`readableStream.getReader({ mode: "byob" });`>First create the reader using ReadableStream.getReader() on the stream, specifying mode: "byob" in the options parameter. As this is a "Bring Your Own Buffer" reader, we also need to create an ArrayB

#JavaScript[Google Chrome Canary]：[SurmaさんはTwitterを使っています 「Chrome Canary just got structuredClone()! That means *all* browsers (yes, even Safari) and Deno now support structuredClone() in their nightlies (some even shipped it to stabl

#piping-server-rust #piping-server #Piping_Server #Rust #TypeScript[5a8b42c486 https://github.com/nwtgck/piping-server-rust/tree/5a8b42c486616e44286216aa5d5d39f17838534c] 時点での話。追記：上記のコミットから先の時点でも以下のリストに追記をしている。

#JavaScript以下のように[Reponse https://fetch.spec.whatwg.org/#response-class]を使えば簡単にできる。

#JavaScript #用語 #逆 #反対 #対義語> The normal, non-strict mode of JavaScript is sometimes referred to as sloppy mode.[Sloppy mode - MDN Web Docs Glossary: Definitions of Web-related terms | MDN https://developer.mozilla.org/en-US/docs/Glossary/Sloppy_mode]