Fork me on GitHub

2021-01-07のJS: Wasmer 1.0、2021年のウェブ標準とブラウザ、xstyled

Edit on GitHub 編集履歴を見る

JSer.info #521 - WebAssemblyのランタイムであるWasmer 1.0がリリースされました。

Wasmer 1.0では、Wasmファイルを.dllなどにプリコンパイルするwasmer compileの追加、クロスコンパイルの対応、エラーレポートの改善などが含まれています。

1.0ではAOT (Ahead Of Time) compilation(wasmer compileによるprecompile)などをサポートしたことでproduction readyとなったと書かれています。


次の記事では、2020年におけるウェブ標準の動きと今後の動きについて書かれています。

2020年におけるHTML、CSS、DOM APIに関するウェブ標準やブラウザの対応などについて書かれています。
また、WebアクセシビリティについてではWCAG 2.2と次の標準であるWCAG 3.0の策定状況について書かれています。


React向けのUtility-firstなCSS-in-JSフレームワークであるxstyled 2.0がリリースされています。

xstyledStyled SystemTailwind CSSをインスパイアして作成されたCSS-in-JSフレームワークです。

内部的なCSS-in-JSライブラリとしてstyled-componentsまたはemotionを使い、TailwindのようなUtilityスタイルを指定できるReactコンポーネントを提供する目的のようです。
2.0では1.xからAPIの変更などが含まれていますが、TypeScriptの型定義が追加されドキュメントサイトが刷新されています。


ヘッドライン


Wasmer 1.0. By leveraging Wasm for software… | by Syrus Akbary | Wasmer | Jan, 2021 | Medium

medium.com/wasmer/wasmer-1-0-3f86ca18c043

WebAssembly ReleaseNote Tools

WebAssembly RuntimeであるWasmer 1.0リリース。
Wasmファイルを.dllなどにプリコンパイルするwasmer compileの追加、クロスコンパイルの対応、エラーレポートの改善など


Node v15.5.1 (Current) | Node.js

nodejs.org/en/blog/release/v15.5.1/

node.js security ReleaseNote

Node.js 15.5.1リリース。
DoSにつながる脆弱性とHTTP Request Smugglingの脆弱性の修正を含むセキュリティアップデート。
Node.js 10, 12, 14にそれぞれ同様のセキュリティリリースがされている


Release Notes for Safari Technology Preview 118 | WebKit

webkit.org/blog/11439/release-notes-for-safari-technology-preview-118/

safari webkit ReleaseNote

Safari Technology Preview 118リリース。
Web InspectorにNetworkリクエストのinterceptをするUIの追加。
ECMAScript ProposalのArray#atをサポート、Private Click Measurementの設定をexperimentalから標準UIに移動など


アーティクル


Reactチュートリアル1:犬画像ギャラリーを作ろう

zenn.dev/likr/articles/6be53ca64f29aa035f07

React tutorial

Reactを使ったウェブアプリケーションの開発チュートリアル。
Reactの基本的な使い方、コンポーネント、Netlifyを使った公開方法について


2021年のウェブ標準とブラウザ:新春特別企画|gihyo.jp … 技術評論社

gihyo.jp/design/column/newyear/2021/web-standards-and-browsers

HTML CSS DOM article spec browser

2020年におけるHTML、CSS、DOM APIに変化についてまとめた記事。
また、IE 11と旧Edgeのサポート状況、UA Client HintやPrivacy Sandboxなどの取り組みについてなど幅広くウェブ(標準)の状況について扱っている


2021年のWebアクセシビリティ:新春特別企画|gihyo.jp … 技術評論社

gihyo.jp/design/column/newyear/2021/web-accessibility-prospect

accessibility article spec

ウェブアクセシビリティの仕様のステータスについての記事。
2020年のWCAGの変更点、WCAGのデジュール標準としてのISO/JIS版のステータス。
策定作業中のWCAG 3.0、WAI-ARIA 1.2についてなど


Denoからnpmパッケージを使用するノウハウ

zenn.dev/uki00a/articles/how-to-use-npm-packages-in-deno

deno TypeScript npm article

Denoからnpmに公開されたパッケージを利用する方法について。
skypack、esm.sh、jspm.devを使った方法について。
また、JavaScriptで書かれたパッケージを型チェックする仕組みとしてのX-TypeScript-Typesヘッダと@deno-typesについて


Vanilla Hooks (outside React). Hooks are a pattern, not something… | by Andrea Giammarchi | JavaScript In Plain English | Jan, 2021 | Medium

medium.com/javascript-in-plain-english/vanilla-hooks-outside-react-860471e5f95c

JavaScript DOM library article

uhooksを使ってReact HooksライクにDOM APIを使ったTODOアプリを書く話。


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


TabFS

omar.website/tabfs/

Chrome Firefox WebExtension

ブラウザのタブをファイルシステムとしてマウントするブラウザ拡張


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


g-plane/typed-query-selector: Better typed `querySelector` and `querySelectorAll`.

github.com/g-plane/typed-query-selector

TypeScript library

Template Literal Typeを使ってdocument.querySelectorの引数から返す要素の型を推論するライブラリ


xstyled - A utility-first CSS-in-JS framework built for React. - xstyled

xstyled.dev/

React CSS library TypeScript

React向けのUtility-firstなCSS-in-JSフレームワーク。
CSS-in-JSライブラリとしてstyled-componentsまたはemotionを使い、TailwindのようなUtilityスタイルを指定できるコンポーネントを提供する目的。
styled-systemをインスパイアしている


Nullstack - Full-stack Javascript Components

nullstack.app/

JavaScript node.js browser library

同じコンポーネントでブラウザとNode.jsで動くコードを扱うフルスタックフレームワーク。
.njsという拡張子でライフサイクルメソッドとJSXを使ったコンポーネントを書くことで、SSRやHydrateなどを行う。
サーバで動くコードはstatic asyncで書き、インスタントメソッドはブラウザ向けの処理となり、contextオブジェクトで値をやり取りする。
ビルドするとブラウザとサーバのコードをそれぞれbundleしたファイルを出力する。


kripod/otion: Atomic CSS-in-JS with a featherweight runtime

github.com/kripod/otion

CSS JavaScript library

runtimeでのatomic CSS-in-JSの実装ライブラリ


atlassian-labs/compiled: Build time atomic CSS-in-JS. Baked and ready to serve.

github.com/atlassian-labs/compiled

CSS JavaScript library

build timeでのAtomic CSS-in-JSの実装ライブラリ


Yord/shargs: 🦈 shargs is a library for building command-line argument parsers.

github.com/Yord/shargs

node.js JavaScript console library

コマンドライン引数パーサライブラリ。
サブコマンド、スペルミスの訂正、REPLなどに対応している


O1dMate/dns-host: Simple, lightweight DNS server written in pure JavaScript with no external dependencies.

github.com/O1dMate/dns-host

node.js library

Node.jsのdgramコアパッケージを使ったDNSサーバの実装ライブラリ


書籍関係


Amazon.co.jp: Web配信の技術―HTTPキャッシュ・リバースプロキシ・CDNを活用する: 田中 祥平: 本

www.amazon.co.jp/dp/4297119250/

book cdn HTTP

2021年2月13日 発売


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