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.json
のexports
フィールドに対応し、ECMAScript Modulesをサポートしています。
また、Underscore.js 1.12では、lodash 4.17.21で修正された、_.template
の脆弱性の修正も含まれています。
あまり多くはないと思いますが、UnderscoreとLodashどちらも_.template
のvariable
オプションに任意の文字列を渡せる場合に、
渡した文字列をコードとして実行できる脆弱性が修正されています。
const _ = require("underscore");
const template = _.template('hello: <%= name %>', { variable: 'ここに任意の文字列を渡せると脆弱性' });
template({name: "Mustache"});
Prettier 2.3がリリースされました。
JavaScriptのフォーマットの大きめな変更、Handlebarsサポートをalphaからreleaseに変更、JSON5/JSONのフォーマットの修正などが含まれています。
JavaScriptの変数やプロパティへの代入における一貫性の修正が含まれているため、アップデート後に大きなDiffがでる可能性についても書かれています。
JSer.infoをサポートするには
- 😘 知り合いにJSer.infoをおすすめする
- ❤️ GitHub Sponsorsで@azuのスポンサーになる
- 🐦 X(Twitter)で@jser_infoをフォローする
JSer.info Sponsors
JSer.info SponsorsはGitHub SponsorsとしてJSer.infoを支援してくれている方々です。
ヘッドライン
Bootstrap 5 | Bootstrap Blog
blog.getbootstrap.com/2021/05/05/bootstrap-5/
Bootstrap 5リリース。
IEのサポート終了、jQueryの削除。
offcanvasコンポーネント、cardの代替えとなるaccordionコンポーネントの追加。
FormとLayoutの変更、RTLのサポート、SassのUtility APIの追加など。
Underscore.js
underscore 1.13.0リリース。
ECMAScript Modulesのサポート。
1.12.1では_.template
のvariable
オプション経由での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
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/
GitHubでのWeb Componentsについて。
Rails ViewComponentとCatalystを使ったWeb Componentsの組み込み、GitHub Elementsの公開についてなど
リソースの読み込みを助けるウェブブラウザ API の世界
nhiroki.jp/2021/05/06/resource-loading-apis
先読みや読み込みの優先度などウェブブラウザにおけるリソースロードのHintとなるAPIや仕組みについてのまとめ
Hello, Modules!. JavaScript Modules, also known as ESM… | by Sindre Sorhus | May, 2021 | 🦄 Sindre Sorhus’ blog
blog.sindresorhus.com/hello-modules-d1010b4e777b
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で扱える擬似クラスの紹介記事。
任意のa
にマッチする:any-link
、フォーカスしてる要素を扱う:focus-visible
と:focus-within
、セレクタを扱う:is()
とwhere()
と:has()
、:empty
など
Chapter 8: CSS | CSS-Tricks
CSSの歴史についての記事。
Lie、IE3のCSS実装、W3CのCSS WG、NetscapeのJSSS。
doctype宣言でのスイッチと後方互換性、fantasai、CSS3でのモジューラアプローチについてなど
スライド、動画関係
Svelte Summit Spring 2021 簡易まとめ
zenn.dev/tomoam/articles/889618f2e6e62f
Svelte Summit Springの動画と概要のまとめ
ソフトウェア、ツール、ライブラリ関係
sinclairzx81/hammer: Build Tool for Browser and Node Applications
github.com/sinclairzx81/hammer
esbuildをベースにしたparcelのようにHTMLをエントリポイントにしたビルド/開発ツール
jsxtools/cqfill: Polyfill for CSS Container Queries
CSS Container Queriesのpolyfill。
PostCSSと組み合わせて利用できる
google/zx: A tool for writing better scripts
シェルスクリプトのような処理をJavaScriptで書けるNode.js製のツール。
Top-Level awaitを使ってシェルコマンドをそのまま使える$
やHTTP通信するfetchなどが同梱されている。
書籍関係
プロフェッショナルWebプログラミング JavaScript | 柳井 政和 | 工学 | Kindleストア | Amazon
www.amazon.co.jp/dp/B092QQJQF4/
ウェブページを動作させることに絞ったJavaScriptの入門書
React と Vue に関する XSS アンチパターン
zenn.dev/yuuhu04/books/xss-anti-pattern-of-react-and-vue
ReactとVueにおけるXSSのパターンについて書かれた文章。
ReactとVueのエスケープの仕組み、フレームワークが保護しないケースとXSSが発生するパターンについて書かれている