Fork me on GitHub

2021-05-11のJS: Bootstrap 5、Underscore.js 1.13.0(`_.template`のセキュリティ修正)、Prettier 2.3

Edit on GitHub 編集履歴を見る

JSer.info #539 - CSSフレームワークであるBootstrap 5 がリリースされました。

Bootstrap 5では、IEのサポート終了し、jQueryに依存しないように書き換えられています。
offcanvasコンポーネント、cardの代替えとなるaccordionコンポーネントが追加されています。
また、FormとLayoutの変更、RTLのサポート、SassのUtility APIの追加なども行われています。

v4からのマイグレーション方法については次のドキュメントにまとめられています。


Underscore.js 1.13がリリースされています。

Underscore.js 1.13では、package.jsonexportsフィールドに対応し、ECMAScript Modulesをサポートしています。

また、Underscore.js 1.12では、lodash 4.17.21で修正された、_.templateの脆弱性の修正も含まれています。

あまり多くはないと思いますが、UnderscoreとLodashどちらも_.templatevariableオプションに任意の文字列を渡せる場合に、
渡した文字列をコードとして実行できる脆弱性が修正されています。

const _ = require("underscore");
const template = _.template('hello: <%= name %>', { variable: 'ここに任意の文字列を渡せると脆弱性' });
template({name: "Mustache"});

Prettier 2.3がリリースされました。

JavaScriptのフォーマットの大きめな変更、Handlebarsサポートをalphaからreleaseに変更、JSON5/JSONのフォーマットの修正などが含まれています。
JavaScriptの変数やプロパティへの代入における一貫性の修正が含まれているため、アップデート後に大きなDiffがでる可能性についても書かれています。


ヘッドライン


Bootstrap 5 | Bootstrap Blog

blog.getbootstrap.com/2021/05/05/bootstrap-5/

CSS library ReleaseNote JavaScript

Bootstrap 5リリース。
IEのサポート終了、jQueryの削除。
offcanvasコンポーネント、cardの代替えとなるaccordionコンポーネントの追加。
FormとLayoutの変更、RTLのサポート、SassのUtility APIの追加など。


Underscore.js

underscorejs.org/#1.13.0

JavaScript library ReleaseNote

underscore 1.13.0リリース。
ECMAScript Modulesのサポート。
1.12.1では_.templatevariableオプション経由でのCode Injectionができる脆弱性も修正されている。


Prettier 2.3. In which assignments are consistent, short keys non-breaking, and Handlebars official · Prettier

prettier.io/blog/2021/05/09/2.3.0.html

JavaScript Tools ReleaseNote

Prettier 2.3リリース。
JavaScriptのフォーマットの大きめな変更、Handlebarsサポートをalphaからreleaseに変更、JSON5/JSONのフォーマットの修正など


アーティクル


How we use Web Components at GitHub - The GitHub Blog

github.blog/2021-05-04-how-we-use-web-components-at-github/

WebComponents Github JavaScript article

GitHubでのWeb Componentsについて。
Rails ViewComponentとCatalystを使ったWeb Componentsの組み込み、GitHub Elementsの公開についてなど


リソースの読み込みを助けるウェブブラウザ API の世界

nhiroki.jp/2021/05/06/resource-loading-apis

browser WebPlatformAPI article

先読みや読み込みの優先度などウェブブラウザにおけるリソースロードのHintとなるAPIや仕組みについてのまとめ


Hello, Modules!. JavaScript Modules, also known as ESM… | by Sindre Sorhus | May, 2021 | 🦄 Sindre Sorhus’ blog

blog.sindresorhus.com/hello-modules-d1010b4e777b

ECMAScript node.js article

Node.js 10のサポートが終了したことで、ESMへの移行をどのようにするかについての記事。
ESMのメリット、パッケージのメンテナ向けの移行ガイドについて


A Guide To Newly Supported, Modern CSS Pseudo-Class Selectors — Smashing Magazine

www.smashingmagazine.com/2021/04/guide-supported-modern-css-pseudo-class-selectors/

CSS article

最近のCSSで扱える擬似クラスの紹介記事。
任意のaにマッチする:any-link、フォーカスしてる要素を扱う:focus-visible:focus-within、セレクタを扱う:is()where():has():emptyなど


Chapter 8: CSS | CSS-Tricks

css-tricks.com/chapter-8-css/

CSS history article

CSSの歴史についての記事。
Lie、IE3のCSS実装、W3CのCSS WG、NetscapeのJSSS。
doctype宣言でのスイッチと後方互換性、fantasai、CSS3でのモジューラアプローチについてなど


スライド、動画関係


Svelte Summit Spring 2021 簡易まとめ

zenn.dev/tomoam/articles/889618f2e6e62f

Svelte video Conference

Svelte Summit Springの動画と概要のまとめ


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


sinclairzx81/hammer: Build Tool for Browser and Node Applications

github.com/sinclairzx81/hammer

JavaScript HTML Tools

esbuildをベースにしたparcelのようにHTMLをエントリポイントにしたビルド/開発ツール


jsxtools/cqfill: Polyfill for CSS Container Queries

github.com/jsxtools/cqfill

CSS JavaScript polyfill library

CSS Container Queriesのpolyfill。
PostCSSと組み合わせて利用できる


google/zx: A tool for writing better scripts

github.com/google/zx

ShellScript node.js Tools

シェルスクリプトのような処理をJavaScriptで書けるNode.js製のツール。
Top-Level awaitを使ってシェルコマンドをそのまま使える$やHTTP通信するfetchなどが同梱されている。


書籍関係


プロフェッショナルWebプログラミング JavaScript | 柳井 政和 | 工学 | Kindleストア | Amazon

www.amazon.co.jp/dp/B092QQJQF4/

JavaScript book

ウェブページを動作させることに絞ったJavaScriptの入門書


React と Vue に関する XSS アンチパターン

zenn.dev/yuuhu04/books/xss-anti-pattern-of-react-and-vue

React Vue XSS document

ReactとVueにおけるXSSのパターンについて書かれた文章。
ReactとVueのエスケープの仕組み、フレームワークが保護しないケースとXSSが発生するパターンについて書かれている


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