Fork me on GitHub

2021-07-27のJS: vscode-js-debug、 Privacy Sandbox Timeline、小さなブラウザの作り方

Edit on GitHub 編集履歴を見る

JSer.info #550 - vscode-js-debugはVSCodeからブラウザのデバッガーに接続し、JavaScriptをデバッグするVSCode拡張です。
このvscode-js-debugがVScodeにbundleされるようになっています。

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!が有名です。
興味がある人は読んでみると良いかもしれません。


ヘッドライン


Version 2.0 released : Node-RED

nodered.org/blog/2021/07/20/version-2-0-released

node.js ReleaseNote

IoTデバイスなどを扱うビジュアルプログラミング環境のNode-RED 2.0.0リリース。


アーティクル


URLPattern brings routing to the web platform

web.dev/urlpattern/

JavaScript Chrome WebPlatformAPI article

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 browser debug article

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

www.fastly.com/press/press-releases/fastly-launches-new-era-of-highly-secure-serverless-javascript-with-zero

WebAssembly cdn JavaScript article

FastlyのCompute@EdgeがJavaScriptをサポート


How to Eliminate Render-Blocking Resources: a Deep Dive

sia.codes/posts/render-blocking-resources/

JavaScript CSS browser performance article

レンダリングブロッキングの要素となるJavaScriptとCSSについて。
レンダリングブロックされるとどのようにパフォーマンスへ影響があるのか、WebPageTestを使った確認方法、レンダリングブロッキングの削除方法についてなど


サイト、サービス、ドキュメント


Privacy Sandbox Timeline

privacysandbox.com/timeline/

Chrome privacy document

Privacy Sandboxのロードマップとタイムライン


nicoespeon/abracadabra: Automated refactorings for VS Code (JS & TS) ✨ It's magic ✨

github.com/nicoespeon/abracadabra

VSCode refacoring plugin JavaScript

JavaScriptとTypeScriptのリファクタリングを補助するVSCode拡張。
WebStormのようにコードのQuick Fixを提供している


ソフトウェア、ツール、ライブラリ関係


Tak-Iwamoto/ptera: Ptera is DateTime library for Deno

github.com/Tak-Iwamoto/ptera

deno JavaScript library

Deno向けの日付操作ライブラリ


ajitid/fzf-for-js: Do fuzzy matching using FZF algorithm in JavaScript

github.com/ajitid/fzf-for-js

JavaScript library search

コマンドラインツール向けの曖昧(あいまい)検索である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

node.js npm security Tools

ディレクトリや特定のパッケージのnpmパッケージへの依存を分析するツール。
コードをパースして、利用しているnpmパッケージのメタデータ、ライセンス、セキュリティ情報などの一覧を取得する


tangramxyz/tangram: Tangram is an all-in-one automated machine learning framework.

github.com/tangramxyz/tangram

MachineLearning library Rust JavaScript ruby python golang

機械学習フレームワーク。
コマンドラインで学習したモデルを作成し、各種言語のFFIなライブラリから予測ができる。
JavaScriptにWasmビルドを公開している。
またモデルのパフォーマンスダッシュボードをブラウザで見れるようになっている。


udecode/plate: A plugin framework for building rich text editors with slate.

github.com/udecode/plate

JavaScript editor React library

slateベースのリッチテキストエディタライブラリ。
プラグインで機能を追加できるようになっていて、さまざまなプラグインが用意されている。


actuallyakash/spacers: 🔳 when you need more __space__

github.com/actuallyakash/spacers

JavaScript library

D&Dで要素に対してpaddingやmarginなどのスペースを設定できるライブラリ


davewasmer/devcert: Local HTTPS development made easy

github.com/davewasmer/devcert

node.js SSL debug Tools

ローカルで開発用のHTTPSサーバの作成を補助するライブラリ。
任意のドメインに対する証明書の作成、マシンへのルート証明書のインストールなどローカルでHTTPSサーバを起動するのを補助するツール。


書籍関係


ちいさな Web ブラウザを作ってみよう

browserbook.shift-js.info/

browser book Rust security

Rustでウェブブラウザを作りつつ、ブラウザのレンダリングの仕組み、全体の流れ、セキュリティについて学習する教材。


この記事へ修正リクエストをする
JSer.info Slackに参加する