JSer.info #550 - vscode-js-debugはVSCodeからブラウザのデバッガーに接続し、JavaScriptをデバッグするVSCode拡張です。
このvscode-js-debugがVScodeにbundleされるようになっています。
- Easier browser debugging with Developer Tools integration in Visual Studio Code - Microsoft Edge Blog
- microsoft/vscode-js-debug: The VS Code JavaScript debugger
vscode-js-debugは、ChromeやMSEdgeなどのブラウザのデバッガーに接続できます。
仕組みとしてDebug Adapter Protocol(DAP)という、開発ツール(VScodeなど)とデバッガー(ブラウザやNodeなど)を中継するAdapterを利用しています。
DAPはLanguage Server Protocol(LSP)似た形のもので、開発ツールと各種言語の中継となるプロトコルを定めています。
開発ツールなどはDAPをサポートすれば、各種言語向けのデバッグ機能を再開発しなくて済むようになっています。
Privacy Sandbox TimelineというサイトでGoogleのPrivacy Sandboxと呼ばれるthird-party cookiesを廃止するためのProposal集に関するロードマップが公開されています。
Privacy Sandboxの各Proposalごとにどのようなスケジュールで、実装やテストをしていくかの予定が公開されています。
ちいさな Web ブラウザを作ってみようでは、Rustでウェブブラウザを作りつつ、ブラウザのレンダリングの仕組みやセキュリティについて学習する教材が公開されています。
現時点ではWIP(Working In Progress)な章もありますが、小さなブラウザをつくりつつブラウザの内部構造について学ぶのが目的となっています。
同じようにRustでブラウザを作って学ぶチュートリアルとしてLet's build a browser engine!が有名です。
興味がある人は読んでみると良いかもしれません。
JSer.infoをサポートするには
- 😘 知り合いにJSer.infoをおすすめする
- ❤️ GitHub Sponsorsで@azuのスポンサーになる
- 🐦 X(Twitter)で@jser_infoをフォローする
JSer.info Sponsors
JSer.info SponsorsはGitHub SponsorsとしてJSer.infoを支援してくれている方々です。
ヘッドライン
Version 2.0 released : Node-RED
nodered.org/blog/2021/07/20/version-2-0-released
IoTデバイスなどを扱うビジュアルプログラミング環境のNode-RED 2.0.0リリース。
アーティクル
URLPattern brings routing to the web platform
path-to-regexpのようにURLのパターンマッチを扱うURLPatternオブジェクトについて。
基本的な使い方、キャプチャ、ブラウザサポートとPolyfillについて
Easier browser debugging with Developer Tools integration in Visual Studio Code - Microsoft Edge Blog
blogs.windows.com/msedgedev/2021/07/16/easier-debugging-developer-tools-in-visual-studio-code/
VSCodeからChromeとMSEdgeのDebuggerに接続するvscode-js-debug拡張について。
DAP(Debug Adapter Protocol)のProtocol Adapterを使い、VScodeからブラウザのデバッグに接続している。
Fastly Launches New Era of Highly-Secure Serverless JavaScript With Zero Cold Starts | Fastly
FastlyのCompute@EdgeがJavaScriptをサポート
How to Eliminate Render-Blocking Resources: a Deep Dive
sia.codes/posts/render-blocking-resources/
レンダリングブロッキングの要素となるJavaScriptとCSSについて。
レンダリングブロックされるとどのようにパフォーマンスへ影響があるのか、WebPageTestを使った確認方法、レンダリングブロッキングの削除方法についてなど
サイト、サービス、ドキュメント
Privacy Sandbox Timeline
Privacy Sandboxのロードマップとタイムライン
nicoespeon/abracadabra: Automated refactorings for VS Code (JS & TS) ✨ It's magic ✨
github.com/nicoespeon/abracadabra
JavaScriptとTypeScriptのリファクタリングを補助するVSCode拡張。
WebStormのようにコードのQuick Fixを提供している
ソフトウェア、ツール、ライブラリ関係
Tak-Iwamoto/ptera: Ptera is DateTime library for Deno
Deno向けの日付操作ライブラリ
ajitid/fzf-for-js: Do fuzzy matching using FZF algorithm in JavaScript
コマンドラインツール向けの曖昧(あいまい)検索であるFZFのアルゴリズムをJavaScriptに移植したライブラリ
ES-Community/nsecure: Node.js security CLI / API that allow you to deeply analyze the dependency tree of a given package / directory
github.com/ES-Community/nsecure
ディレクトリや特定のパッケージのnpmパッケージへの依存を分析するツール。
コードをパースして、利用しているnpmパッケージのメタデータ、ライセンス、セキュリティ情報などの一覧を取得する
tangramxyz/tangram: Tangram is an all-in-one automated machine learning framework.
機械学習フレームワーク。
コマンドラインで学習したモデルを作成し、各種言語のFFIなライブラリから予測ができる。
JavaScriptにWasmビルドを公開している。
またモデルのパフォーマンスダッシュボードをブラウザで見れるようになっている。
udecode/plate: A plugin framework for building rich text editors with slate.
slateベースのリッチテキストエディタライブラリ。
プラグインで機能を追加できるようになっていて、さまざまなプラグインが用意されている。
actuallyakash/spacers: 🔳 when you need more __space__
github.com/actuallyakash/spacers
D&Dで要素に対してpaddingやmarginなどのスペースを設定できるライブラリ
davewasmer/devcert: Local HTTPS development made easy
ローカルで開発用のHTTPSサーバの作成を補助するライブラリ。
任意のドメインに対する証明書の作成、マシンへのルート証明書のインストールなどローカルでHTTPSサーバを起動するのを補助するツール。
書籍関係
ちいさな Web ブラウザを作ってみよう
Rustでウェブブラウザを作りつつ、ブラウザのレンダリングの仕組み、全体の流れ、セキュリティについて学習する教材。
