Fork me on GitHub

2021-12-08のJS: Rust + Node-APIのパッケージの公開、 #WebSpeedHackathon 、The 2021 Web Almanac

Edit on GitHub 編集履歴を見る

JSer.info #569 - Rust + Node-APIでクロスプラットフォーム向けnpmパッケージを公開する - 別にしんどくないブログという記事では、Rustでnapi-rsを使って書いたコードをNode.jsから利用する方法について書かれています。

パッケージとして公開する場合、Node.jsのNode-APIを使うためネイティブモジュールとしてインストール必要があります。
その場合に、インストール後にpostinstallでバイナリをダウンロード/ビルドするのではなく、optionalDependenciesを使ってアーキテクチャごとのパッケージをインストールできるようにする方法についても紹介されています。


#WebSpeedHackathonの2021年版が開催されています。

重たいウェブサイトのパフォーマンスを改善するハッカソンの題材として作られたアプリケーションです。
2022/1/3まで開催されていて、スコアはGitHub Actionsで計測する仕組みも公開されています。
ウェブサイトのパフォーマンス改善に興味がある人は触ってみると面白いかもしれません。


HTTP Archiveのデータをもとにウェブの状態をまとめたWeb Almanacの2021年版が公開されています。

ブラウザのテクノロジーやウェブの状態を確認できるレポートで、全24章から構成されています。


ヘッドライン


Node v17.2.0 (Current) | Node.js

nodejs.org/en/blog/release/v17.2.0/

node.js ReleaseNote

Node.js 17.2.0リリース。
async_hooksモジュールにasyncWrapProvidersを追加、AbortSignalにreasonを追加など


アーティクル


Rust + Node-APIでクロスプラットフォーム向けnpmパッケージを公開する - 別にしんどくないブログ

shisama.hatenablog.com/entry/2021/12/03/054437

Rust node.js article

napi-rsを使ったRustで書いたコードをNode.jsのnative modulesとして利用する方法について。
アーキテクチャごとのバイナリをpublishしoptionalDependenciesとして定義することで、postinstallを不要にする方法について。


react-router 作り方

zenn.dev/stin/articles/how-to-develop-react-router

React history library article

react-routerが内部的に利用しているhistoryライブラリを使ったルータの作り方についての記事


重いサイトを軽くしろ!年末年始は #WebSpeedHackathon 2021 に挑戦しよう | CyberAgent Developers Blog

developers.cyberagent.co.jp/blog/archives/32747/

performance example article

ウェブパフォーマンスを改善するハッカソン教材


Web Performance Calendar » HTTP compression

calendar.perfplanet.com/2021/http-compression/

HTTP performance article

ロスレスデータ圧縮の圧縮レベルと速度のバランスについて。
gzip、brotli、zstd、圧縮レベルのトレードオフについて。
また、バイナリコンテンツの2重圧縮の問題などについて


WebAssembly and Back Again: Fine-Grained Sandboxing in Firefox 95 - Mozilla Hacks - the Web developer blog

hacks.mozilla.org/2021/12/webassembly-and-back-again-fine-grained-sandboxing-in-firefox-95/

WebAssembly security article

Firefox 95に含まれるRLBoxというWebAssemblyを使ったSandboxの仕組みについて。
プロセスの分離はオーバヘッドが大きくなりやすい。分離したいコードをWasmに変換し、Wasmをwasm2cでC言語に変換してネイティブコードへ変換し利用する。
Wasmを経由することで指定外のメモリ空間にアクセスできないことを保証している。


スライド、動画関係


JSConf JP 2021 Track A - YouTube

www.youtube.com/playlist?list=PL42hYWKFRfN7cg6c3uM4_tAxbybVzG3ao

JavaScript Conference video

JSConf JP 2021の動画一覧


Svelte Summit Fall 2021 - YouTube

www.youtube.com/playlist?list=PL8bMgX1kyZTg2bI9IOMgfBc8lrU3v2itt

Svelte video Conference

Svelte Summit Fall 2021の動画まとめ


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


primo-af/primo: a simpler, all-in-one way to develop and manage websites

github.com/primo-af/primo

Svelte CMS OpenSource software

静的なサイトを管理、開発するためのCMSアプリ。
Svelteベースで作られていて、デスクトップアプリでサイトを編集ができ、バックエンドはSupabaseベースのものが公開されている。


Online CSS Analyzer - Project Wallace

www.projectwallace.com/analyze-css

CSS Tools webservice

URLを指定してサイトが利用しているCSSを解析するツール。
サイズ、セレクタ数、詳細度、色、フォントの指定などについての分析結果を表示する


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


denoland/dnt: Deno to npm package build tool.

github.com/denoland/dnt

deno node.js Tools library

Deno向けに書かれたモジュールをNode.jsで利用できるように変換するツール。


Open Props: sub-atomic styles

open-props.style/

CSS library

CSS custom propertiesを使ったライブラリ。


BuilderIO/mitosis: Write components once, run everywhere. Compiles to Vue, React, Solid, Angular, Svelte, and more.

github.com/BuilderIO/mitosis

jsx JavaScript library

JSXベースコンポーネントを定義し、それをReact/Angular/Vue/Solid/Svelteなどの各種フレームワークを使ったコードへと変換できるツール。
UIフレームワークの中間言語


plentico/plenti: Static Site Generator with Go backend and Svelte frontend

github.com/plentico/plenti

Svelte Tools golang

SvelteとGo言語を使った静的サイトジェネレータ


書籍関係


The 2021 Web Almanac

almanac.httparchive.org/en/2021/

book browser HTTP

HTTP Archiveのデータ元にしたレポートであるWeb Almanacの2021年版。
ブラウザのテクノロジーやウェブの状態を確認できるレポート


The Jamstack Book

www.manning.com/books/the-jamstack-book

Jamstack book

2022年4月26日発売予定
Jamstackについての書籍


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