From 23800a35b4bbb360c4f119852ebb7ee49ded0014 Mon Sep 17 00:00:00 2001 From: azu Date: Tue, 27 Jul 2021 22:29:41 +0900 Subject: [PATCH] =?UTF-8?q?2021-07-27=E3=81=AEJS:=20vscode-js-debug?= =?UTF-8?q?=E3=80=81=20Privacy=20Sandbox=20Timeline=E3=80=81=E5=B0=8F?= =?UTF-8?q?=E3=81=95=E3=81=AA=E3=83=96=E3=83=A9=E3=82=A6=E3=82=B6=E3=81=AE?= =?UTF-8?q?=E4=BD=9C=E3=82=8A=E6=96=B9=20(#897)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Update 550 draft * Update 550 draft * Update 550 draft * Update 550 draft * Update 550 draft * Update 550 draft * Update 550 draft * Update 550 draft * Update 550 draft * Update 550 draft * Update 550 draft * Update 550 draft * Update 550 draft * Update 550 draft * Update 550 draft * Update 550 draft * Update 550 draft * Update _i18n/ja/_posts/2021/2021-07-27-vscode-js-debug-privacy-sandbox-timeline-.md * Delete _i18n/ja/_posts/2021/2021-07-27-550draft.md * Update _i18n/ja/_posts/2021/2021-07-27-vscode-js-debug-privacy-sandbox-timeline-.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> --- ...code-js-debug-privacy-sandbox-timeline-.md | 213 ++++++++++++++++++ 1 file changed, 213 insertions(+) create mode 100644 _i18n/ja/_posts/2021/2021-07-27-vscode-js-debug-privacy-sandbox-timeline-.md diff --git a/_i18n/ja/_posts/2021/2021-07-27-vscode-js-debug-privacy-sandbox-timeline-.md b/_i18n/ja/_posts/2021/2021-07-27-vscode-js-debug-privacy-sandbox-timeline-.md new file mode 100644 index 00000000000..d958838b525 --- /dev/null +++ b/_i18n/ja/_posts/2021/2021-07-27-vscode-js-debug-privacy-sandbox-timeline-.md @@ -0,0 +1,213 @@ +--- +title: "2021-07-27のJS: vscode-js-debug、 Privacy Sandbox Timeline、小さなブラウザの作り方" +author: "azu" +layout: post +date : 2021-07-27T12:52:36.749Z +category: JSer +tags: +- node.js +- browser +- security +- Tools +- Chrome + +--- + +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](https://blogs.windows.com/msedgedev/2021/07/16/easier-debugging-developer-tools-in-visual-studio-code/) +- [microsoft/vscode-js-debug: The VS Code JavaScript debugger](https://github.com/microsoft/vscode-js-debug) + +vscode-js-debugは、ChromeやMSEdgeなどのブラウザのデバッガーに接続できます。 +仕組みとして[Debug Adapter Protocol](https://microsoft.github.io/debug-adapter-protocol/)(DAP)という、開発ツール(VScodeなど)とデバッガー(ブラウザやNodeなど)を中継するAdapterを利用しています。 + +DAPは[Language Server Protocol](https://microsoft.github.io/language-server-protocol/)(LSP)似た形のもので、開発ツールと各種言語の中継となるプロトコルを定めています。 +開発ツールなどはDAPをサポートすれば、各種言語向けのデバッグ機能を再開発しなくて済むようになっています。 + +---- + +[Privacy Sandbox Timeline](https://privacysandbox.com/timeline/)というサイトでGoogleのPrivacy Sandboxと呼ばれるthird-party cookiesを廃止するためのProposal集に関するロードマップが公開されています。 + +Privacy Sandboxの各Proposalごとにどのようなスケジュールで、実装やテストをしていくかの予定が公開されています。 + +--- + +[ちいさな Web ブラウザを作ってみよう](https://browserbook.shift-js.info/)では、Rustでウェブブラウザを作りつつ、ブラウザのレンダリングの仕組みやセキュリティについて学習する教材が公開されています。 + +現時点ではWIP(Working In Progress)な章もありますが、小さなブラウザをつくりつつブラウザの内部構造について学ぶのが目的となっています。 + +同じようにRustでブラウザを作って学ぶチュートリアルとしてLet's build a browser engine!が有名です。 +興味がある人は読んでみると良いかもしれません。 + +- [Let's build a browser engine! Part 1: Getting started](https://limpet.net/mbrubeck/2014/08/08/toy-layout-engine-1.html) + - [ブラウザの作り方 - Speaker Deck](https://speakerdeck.com/keiya01/burauzafalsezuo-rifang) + - [「Let's build a browser engine!」を読んでRustで簡易レンダリングエンジンを作った - dackdive's blog](https://dackdive.hateblo.jp/entry/2021/02/23/113522) + + +---- + +

ヘッドライン

+ +---- + +## Version 2.0 released : Node-RED +[nodered.org/blog/2021/07/20/version-2-0-released](https://nodered.org/blog/2021/07/20/version-2-0-released "Version 2.0 released : Node-RED") +

node.js ReleaseNote

+ +IoTデバイスなどを扱うビジュアルプログラミング環境のNode-RED 2.0.0リリース。 + +- [Release 2.0.0: Milestone Release · node-red/node-red](https://github.com/node-red/node-red/releases/tag/2.0.0 "Release 2.0.0: Milestone Release · node-red/node-red") + +---- +

アーティクル

+ +---- + +## URLPattern brings routing to the web platform +[web.dev/urlpattern/](https://web.dev/urlpattern/ "URLPattern brings routing to the web platform") +

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/](https://blogs.windows.com/msedgedev/2021/07/16/easier-debugging-developer-tools-in-visual-studio-code/ "Easier browser debugging with Developer Tools integration in Visual Studio Code - Microsoft Edge Blog") +

VSCode browser debug article

+ +VSCodeからChromeとMSEdgeのDebuggerに接続するvscode-js-debug拡張について。 +DAP(Debug Adapter Protocol)のProtocol Adapterを使い、VScodeからブラウザのデバッグに接続している。 + +- [microsoft/vscode-js-debug: The VS Code JavaScript debugger](https://github.com/microsoft/vscode-js-debug "microsoft/vscode-js-debug: The VS Code JavaScript debugger") + +---- + +## 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](https://www.fastly.com/press/press-releases/fastly-launches-new-era-of-highly-secure-serverless-javascript-with-zero "Fastly Launches New Era of Highly-Secure Serverless JavaScript With Zero Cold Starts | Fastly") +

WebAssembly cdn JavaScript article

+ +FastlyのCompute@EdgeがJavaScriptをサポート + +- [JS on Wasm with Nick Fitzgerald (JS Party #183) |> Changelog](https://changelog.com/jsparty/183 "JS on Wasm with Nick Fitzgerald (JS Party #183) |&gt; Changelog") + +---- + +## How to Eliminate Render-Blocking Resources: a Deep Dive +[sia.codes/posts/render-blocking-resources/](https://sia.codes/posts/render-blocking-resources/ "How to Eliminate Render-Blocking Resources: a Deep Dive") +

JavaScript CSS browser performance article

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

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

+ +---- + +## Privacy Sandbox Timeline +[privacysandbox.com/timeline/](https://privacysandbox.com/timeline/ "Privacy Sandbox Timeline") +

Chrome privacy document

+ +Privacy Sandboxのロードマップとタイムライン + + +---- + +## nicoespeon/abracadabra: Automated refactorings for VS Code (JS & TS) ✨ It's magic ✨ +[github.com/nicoespeon/abracadabra](https://github.com/nicoespeon/abracadabra "nicoespeon/abracadabra: Automated refactorings for VS Code (JS & TS) ✨ It's magic ✨") +

VSCode refacoring plugin JavaScript

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

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

+ +---- + +## Tak-Iwamoto/ptera: Ptera is DateTime library for Deno +[github.com/Tak-Iwamoto/ptera](https://github.com/Tak-Iwamoto/ptera "Tak-Iwamoto/ptera: Ptera is DateTime library for Deno") +

deno JavaScript library

+ +Deno向けの日付操作ライブラリ + +- [DenoのDateTimeライブラリPteraをリリースしました](https://zenn.dev/tak_iwamoto/articles/8b32b27bd577b1 "DenoのDateTimeライブラリPteraをリリースしました") + +---- + +## ajitid/fzf-for-js: Do fuzzy matching using FZF algorithm in JavaScript +[github.com/ajitid/fzf-for-js](https://github.com/ajitid/fzf-for-js "ajitid/fzf-for-js: Do fuzzy matching using FZF algorithm in JavaScript") +

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](https://github.com/ES-Community/nsecure "ES-Community/nsecure: Node.js security CLI / API that allow you to deeply analyze the dependency tree of a given package / directory") +

node.js npm security Tools

+ +ディレクトリや特定のパッケージのnpmパッケージへの依存を分析するツール。 +コードをパースして、利用しているnpmパッケージのメタデータ、ライセンス、セキュリティ情報などの一覧を取得する + + +---- + +## tangramxyz/tangram: Tangram is an all-in-one automated machine learning framework. +[github.com/tangramxyz/tangram](https://github.com/tangramxyz/tangram "tangramxyz/tangram: Tangram is an all-in-one automated machine learning framework.") +

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](https://github.com/udecode/plate "udecode/plate: A plugin framework for building rich text editors with slate.") +

JavaScript editor React library

+ +slateベースのリッチテキストエディタライブラリ。 +プラグインで機能を追加できるようになっていて、さまざまなプラグインが用意されている。 + + +---- + +## actuallyakash/spacers: 🔳 when you need more \_\_space\_\_ +[github.com/actuallyakash/spacers](https://github.com/actuallyakash/spacers "actuallyakash/spacers: 🔳 when you need more \_\_space\_\_") +

JavaScript library

+ +D&Dで要素に対してpaddingやmarginなどのスペースを設定できるライブラリ + + +---- + +## davewasmer/devcert: Local HTTPS development made easy +[github.com/davewasmer/devcert](https://github.com/davewasmer/devcert "davewasmer/devcert: Local HTTPS development made easy") +

node.js SSL debug Tools

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

書籍関係

+ +---- + +## ちいさな Web ブラウザを作ってみよう +[browserbook.shift-js.info/](https://browserbook.shift-js.info/ "ちいさな Web ブラウザを作ってみよう") +

browser book Rust security

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