-
-
Notifications
You must be signed in to change notification settings - Fork 71
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
2024-09-01のJS: Rspack 1.0、Safari Technology Preview 202、Material UI v6 (
#1218) * Update 705 draft * Update 705 draft * Update 705 draft * Update 705 draft * Update 705 draft * Update 705 draft * Update 705 draft * Update 705 draft * Update 705 draft * Update 705 draft * Update 705 draft * Update 705 draft * Update 705 draft * Update 705 draft * Update 705 draft * Update 705 draft * Update 705 draft * Update 705 draft * Update _i18n/ja/_posts/2024/2024-09-01-rspack-1.0-safari-technology-preview-202-material-ui-v6.md * Delete _i18n/ja/_posts/2024/2024-09-01-705draft.md * Update _i18n/ja/_posts/2024/2024-09-01-rspack-1.0-safari-technology-preview-202-material-ui-v6.md * Update _i18n/ja/_posts/2024/2024-09-01-rspack-1.0-safari-technology-preview-202-material-ui-v6.md * Update _i18n/ja/_posts/2024/2024-09-01-rspack-1.0-safari-technology-preview-202-material-ui-v6.md * Update 2024-09-01-rspack-1.0-safari-technology-preview-202-material-ui-v6.md * Update _i18n/ja/_posts/2024/2024-09-01-rspack-1.0-safari-technology-preview-202-material-ui-v6.md --------- Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
- Loading branch information
1 parent
7d9bb36
commit d0e5d53
Showing
1 changed file
with
248 additions
and
0 deletions.
There are no files selected for viewing
248 changes: 248 additions & 0 deletions
248
...osts/2024/2024-09-01-rspack-1.0-safari-technology-preview-202-material-ui-v6.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,248 @@ | ||
| --- | ||
| title: "2024-09-01のJS: Rspack 1.0、Safari Technology Preview 202、Material UI v6" | ||
| author: "azu" | ||
| layout: post | ||
| date: 2024-09-01T05:25:04.712Z | ||
| category: JSer | ||
| tags: | ||
| - webpack | ||
| - css | ||
| - React | ||
| - security | ||
| - Next.js | ||
|
|
||
| --- | ||
|
|
||
| JSer.info #705 - webpackとの互換性を持つようにRustで書かれたbundlerであるRspack 1.0がリリースされました。 | ||
|
|
||
| - [Announcing Rspack 1.0 - Rspack](https://rspack.dev/blog/announcing-1-0) | ||
|
|
||
| 0.7からの破壊的な変更もいくつか含まれているため、マイグレーションガイドも公開されています。 | ||
|
|
||
| - [Migrating from Rspack 0.x - Rspack](https://rspack.dev/guide/migration/rspack_0.x) | ||
|
|
||
| --- | ||
|
|
||
| Safari Technology Preview 202がリリースされました。 | ||
|
|
||
| - [Release Notes for Safari Technology Preview 202](https://webkit.org/blog/15798/release-notes-for-safari-technology-preview-202/) | ||
|
|
||
| CSSの`background-clip: border-area`/`ruby-align`、`shape()` function/`@page`で`jis-b4`と`jis-b5`のサポートなどが追加されています。 | ||
| また、ECMAScript Proposal Stage 3のFloat16Arrayの実装、`WebAssembly.{Memory/Table}.prototype.type()`の実装も行われています。 | ||
| WebAsseblyでは、Wasm GC/Wasm Tail Callsのサポート、JITなしでWebAssemblyを実行できるようになる変更も含まれています。 | ||
|
|
||
| --- | ||
|
|
||
| Material UI v6がリリースされました。 | ||
|
|
||
| - [Material UI v6 is out now 🎉 - MUI](https://mui.com/blog/material-ui-v6-is-out/) | ||
|
|
||
| CSS theme variablesの追加、Color schemesでのLight/Dark modeの切り替え、Container queriesのサポートが追加されています。 | ||
| [Pigment CSS](https://github.com/mui/pigment-css)によるZero Runtime Stylingの仕組みをopt-inで導入、React 19の対応なども行われています。 | ||
|
|
||
| ---- | ||
|
|
||
| {% include inline-support.html %} | ||
|
|
||
| ---- | ||
|
|
||
| <h1 class="site-genre">ヘッドライン</h1> | ||
|
|
||
| ---- | ||
|
|
||
| ## Chrome 129 beta | Blog | Chrome for Developers | ||
| [developer.chrome.com/blog/chrome-129-beta?hl=en](https://developer.chrome.com/blog/chrome-129-beta?hl=en "Chrome 129 beta | Blog | Chrome for Developers") | ||
| <p class="jser-tags jser-tag-icon"><span class="jser-tag">Chrome</span> <span class="jser-tag">ReleaseNote</span></p> | ||
|
|
||
| Chrome 129 betaリリース。 | ||
| CSSの`interpolate-size`プロパティと`calc-size()`をサポート、`Intl.DurationFormat`のサポート、`scheduler.yield()`のサポート。 | ||
| Origin TraialとしてFile System Observer APIの追加、`0.0.0.0`を利用したPrivate Network AccessをDeprecateにするなど | ||
|
|
||
|
|
||
| ---- | ||
|
|
||
| ## Release Version 25.0.0 · jsdom/jsdom | ||
| [github.com/jsdom/jsdom/releases/tag/25.0.0](https://github.com/jsdom/jsdom/releases/tag/25.0.0 "Release Version 25.0.0 · jsdom/jsdom") | ||
| <p class="jser-tags jser-tag-icon"><span class="jser-tag">JavaScript</span> <span class="jser-tag">DOM</span> <span class="jser-tag">ReleaseNote</span></p> | ||
|
|
||
| jsdom 25.0.0リリース。 | ||
| `EventTarget.prototype`の参照先をjsdom内の`Object.prototype`に変更。 | ||
|
|
||
|
|
||
| ---- | ||
|
|
||
| ## Announcing Rspack 1.0 - Rspack | ||
| [rspack.dev/blog/announcing-1-0](https://rspack.dev/blog/announcing-1-0 "Announcing Rspack 1.0 - Rspack") | ||
| <p class="jser-tags jser-tag-icon"><span class="jser-tag">rspack</span> <span class="jser-tag">ReleaseNote</span> <span class="jser-tag">webpack</span></p> | ||
|
|
||
| webpackとの互換性を持つようにRustで書かれたbundlerであるRspack 1.0がリリース。 | ||
|
|
||
| - [Migrating from Rspack 0.x - Rspack](https://rspack.dev/guide/migration/rspack_0.x "Migrating from Rspack 0.x - Rspack") | ||
|
|
||
| ---- | ||
|
|
||
| ## Release 5.19.0 · prisma/prisma | ||
| [github.com/prisma/prisma/releases/tag/5.19.0](https://github.com/prisma/prisma/releases/tag/5.19.0 "Release 5.19.0 · prisma/prisma") | ||
| <p class="jser-tags jser-tag-icon"><span class="jser-tag">prisma</span> <span class="jser-tag">MySQL</span></p> | ||
|
|
||
| Prisma 5.19.0リリース。 | ||
| TypedSQLの導入 | ||
|
|
||
|
|
||
| ---- | ||
|
|
||
| ## Release v2.0.0 · pmndrs/valtio | ||
| [github.com/pmndrs/valtio/releases/tag/v2.0.0](https://github.com/pmndrs/valtio/releases/tag/v2.0.0 "Release v2.0.0 · pmndrs/valtio") | ||
| <p class="jser-tags jser-tag-icon"><span class="jser-tag">React</span> <span class="jser-tag">JavaScript</span> <span class="jser-tag">library</span> <span class="jser-tag">ReleaseNote</span></p> | ||
|
|
||
| Valito 2.0.0リリース。 | ||
| React 19で`use` hookが入るため、Promiseの扱い方を変更など | ||
|
|
||
| - [valtio/docs/guides/migrating-to-v2.mdx at main · pmndrs/valtio](https://github.com/pmndrs/valtio/blob/main/docs/guides/migrating-to-v2.mdx "valtio/docs/guides/migrating-to-v2.mdx at main · pmndrs/valtio") | ||
|
|
||
| ---- | ||
|
|
||
| ## Release Notes for Safari Technology Preview 202 | WebKit | ||
| [webkit.org/blog/15798/release-notes-for-safari-technology-preview-202/](https://webkit.org/blog/15798/release-notes-for-safari-technology-preview-202/ "Release Notes for Safari Technology Preview 202 | WebKit") | ||
| <p class="jser-tags jser-tag-icon"><span class="jser-tag">safari</span> <span class="jser-tag">ReleaseNote</span></p> | ||
|
|
||
| Safari Technology Preview 202リリース。 | ||
| CSSの`background-clip: border-area`/`ruby-align`、`shape()` function/`@page`で`jis-b4`と`jis-b5`のサポートなど。 | ||
| ES Proposal Stage 3のFloat16Arrayの実装、`WebAssembly.{Memory/Table}.prototype.type()`の実装。 | ||
| Wasm GC/Wasm Tail Callsのサポート、JITなしでWebAssemblyを実行できるようになるなど | ||
|
|
||
|
|
||
| ---- | ||
|
|
||
| ## Svelte has a potential mXSS vulnerability due to improper HTML escaping · CVE-2024-45047 · GitHub Advisory Database | ||
| [github.com/advisories/GHSA-8266-84wp-wv5c](https://github.com/advisories/GHSA-8266-84wp-wv5c "Svelte has a potential mXSS vulnerability due to improper HTML escaping · CVE-2024-45047 · GitHub Advisory Database") | ||
| <p class="jser-tags jser-tag-icon"><span class="jser-tag">Svelte</span> <span class="jser-tag">security</span> <span class="jser-tag">ReleaseNote</span> <span class="jser-tag">XSS</span></p> | ||
|
|
||
| Svelteの`<noscript>`内の要素の属性値にユーザー入力を入れている場合に発生するXSSを修正。 | ||
| Svelte 4.2.19で修正されている。 | ||
|
|
||
| - [Release [email protected] · sveltejs/svelte](https://github.com/sveltejs/svelte/releases/tag/svelte%404.2.19 "Release [email protected] · sveltejs/svelte") | ||
|
|
||
| ---- | ||
|
|
||
| ## Material UI v6 is out now 🎉 - MUI | ||
| [mui.com/blog/material-ui-v6-is-out/](https://mui.com/blog/material-ui-v6-is-out/ "Material UI v6 is out now 🎉 - MUI") | ||
| <p class="jser-tags jser-tag-icon"><span class="jser-tag">React</span> <span class="jser-tag">UI</span> <span class="jser-tag">library</span> <span class="jser-tag">ReleaseNote</span></p> | ||
|
|
||
| Material UI v6リリース。 | ||
| CSS theme variablesの追加、Color schemesでのLight/Dark modeの切り替え、Container queriesのサポート。 | ||
| Pigment CSSによるZero Runtime Stylingの仕組みをopt-inで導入、React 19の対応など | ||
|
|
||
|
|
||
| ---- | ||
|
|
||
| ## DOM Clobbering Gadget found in Webpack's AutoPublicPathRuntimeModule that leads to XSS · Advisory · webpack/webpack | ||
| [github.com/webpack/webpack/security/advisories/GHSA-4vvj-4cpr-p986](https://github.com/webpack/webpack/security/advisories/GHSA-4vvj-4cpr-p986 "DOM Clobbering Gadget found in Webpack's AutoPublicPathRuntimeModule that leads to XSS · Advisory · webpack/webpack") | ||
| <p class="jser-tags jser-tag-icon"><span class="jser-tag">webpack</span> <span class="jser-tag">ReleaseNote</span> <span class="jser-tag">security</span></p> | ||
|
|
||
| webpackのセキュリティリリース。 | ||
| ユーザーが任意の属性を含む`<img>`タグをかける場合に、webpackの`publicPath: 'auto'`が有効なbundleを読み込むとXSSが発生する問題。 | ||
| webpack 5.94.0で修正された。 | ||
|
|
||
| - [Release v5.94.0 · webpack/webpack](https://github.com/webpack/webpack/releases/tag/v5.94.0 "Release v5.94.0 · webpack/webpack") | ||
| - [security: fix DOM clobbering in auto public path by alexander-akait · Pull Request #18700 · webpack/webpack](https://github.com/webpack/webpack/pull/18700 "security: fix DOM clobbering in auto public path by alexander-akait · Pull Request #18700 · webpack/webpack") | ||
|
|
||
| ---- | ||
| <h1 class="site-genre">アーティクル</h1> | ||
|
|
||
| ---- | ||
|
|
||
| ## State of CSS 2024 | ||
| [survey.devographics.com/en-US/survey/state-of-css/2024](https://survey.devographics.com/en-US/survey/state-of-css/2024 "State of CSS 2024") | ||
| <p class="jser-tags jser-tag-icon"><span class="jser-tag">css </span> <span class="jser-tag">Survey</span></p> | ||
|
|
||
| State of CSS 2024の開発者アンケートの受付が開始された | ||
|
|
||
|
|
||
| ---- | ||
|
|
||
| ## monorepo内でのパッケージのバージョンを1つだけに統一するOne Version Ruleをpnpm catalogで実装する - newmo 技術ブログ | ||
| [tech.newmo.me/entry/one-version-rule-built-on-pnpm-catalog](https://tech.newmo.me/entry/one-version-rule-built-on-pnpm-catalog "monorepo内でのパッケージのバージョンを1つだけに統一するOne Version Ruleをpnpm catalogで実装する - newmo 技術ブログ") | ||
| <p class="jser-tags jser-tag-icon"><span class="jser-tag">npm</span> <span class="jser-tag">pnpm</span> <span class="jser-tag">monorepo</span> <span class="jser-tag">JavaScript</span> <span class="jser-tag">article</span></p> | ||
|
|
||
| pnpm catalogを使い、monorepo内で依存するライブラリのバージョンを1つだけにする方法について。 | ||
| pnpm 9.5で導入されたcatalogを使い依存するパッケージの一覧を管理、`.pnpmfile.cjs`のhooksを使いcatalogで管理されてない依存をエラーとする実装について。 | ||
|
|
||
|
|
||
| ---- | ||
|
|
||
| ## ジャンプTOON Next.js App Router の活用〜得られた恩恵と課題〜 | CyberAgent Developers Blog | ||
| [developers.cyberagent.co.jp/blog/archives/49429/](https://developers.cyberagent.co.jp/blog/archives/49429/ "ジャンプTOON Next.js App Router の活用〜得られた恩恵と課題〜 | CyberAgent Developers Blog") | ||
| <p class="jser-tags jser-tag-icon"><span class="jser-tag">Next.js</span> <span class="jser-tag">article</span></p> | ||
|
|
||
| Next.js App RouterとServer Components/Server Actionsを使った開発と注意点について | ||
|
|
||
|
|
||
| ---- | ||
|
|
||
| ## Common misconceptions about how to optimize LCP | Blog | web.dev | ||
| [web.dev/blog/common-misconceptions-lcp?hl=en](https://web.dev/blog/common-misconceptions-lcp?hl=en "Common misconceptions about how to optimize LCP | Blog | web.dev") | ||
| <p class="jser-tags jser-tag-icon"><span class="jser-tag">browser</span> <span class="jser-tag">performance</span> <span class="jser-tag">article</span></p> | ||
|
|
||
| Largest Contentful Paint (LCP)の最適化に関するよくある誤解について。 | ||
| 画像サイズの最適化は、p75タイルのLCPの10%未満の影響であることが多く、TTFBやリソースロードの優先度の問題がLCPに強く影響してるケースについて | ||
|
|
||
|
|
||
| ---- | ||
| <h1 class="site-genre">スライド、動画関係</h1> | ||
|
|
||
| ---- | ||
|
|
||
| ## フロントエンドカンファレンス北海道 2024 公開資料・Xアカウントリンクまとめ | ||
| [zenn.dev/yumemi\_inc/articles/2024-08-25-frontend-conf-hokkaido-2024](https://zenn.dev/yumemi_inc/articles/2024-08-25-frontend-conf-hokkaido-2024 "フロントエンドカンファレンス北海道 2024 公開資料・Xアカウントリンクまとめ") | ||
| <p class="jser-tags jser-tag-icon"><span class="jser-tag">Conference</span> <span class="jser-tag">slide</span></p> | ||
|
|
||
| フロントエンドカンファレンス北海道 2024のスライドまとめ | ||
|
|
||
| - [フロントエンドカンファレンス北海道2024](https://www.frontend-conf.jp/ "フロントエンドカンファレンス北海道2024") | ||
|
|
||
| ---- | ||
|
|
||
| ## bramus/style-observer: MutationObserver for CSS. Get notified when the computed value of a CSS property changes. | ||
| [github.com/bramus/style-observer](https://github.com/bramus/style-observer "bramus/style-observer: MutationObserver for CSS. Get notified when the computed value of a CSS property changes.") | ||
| <p class="jser-tags jser-tag-icon"><span class="jser-tag">css </span> <span class="jser-tag">JavaScript</span> <span class="jser-tag">library</span></p> | ||
|
|
||
| Mutation Observerのようにスタイルの変化を監視するライブラリ。 | ||
| 短いtransitionと`transition-behavior: allow-discrete;`を使うことで、`transitionstart`イベントを見て変化を検知している | ||
|
|
||
| - [Introducing @bramus/style-observer, a MutationObserver for CSS – Bram.us](https://www.bram.us/2024/08/31/introducing-bramus-style-observer-a-mutationobserver-for-css/ "Introducing @bramus/style-observer, a MutationObserver for CSS – Bram.us") | ||
|
|
||
| ---- | ||
| <h1 class="site-genre">サイト、サービス、ドキュメント</h1> | ||
|
|
||
| ---- | ||
|
|
||
| ## vue-email/vue-email: 💌 Write email templates with vue | ||
| [github.com/vue-email/vue-email?tab=readme-ov-file](https://github.com/vue-email/vue-email?tab=readme-ov-file "vue-email/vue-email: 💌 Write email templates with vue") | ||
| <p class="jser-tags jser-tag-icon"><span class="jser-tag">Vue</span> <span class="jser-tag">mail</span></p> | ||
|
|
||
| Vueでメールのコンテンツを扱うライブラリ | ||
|
|
||
|
|
||
| ---- | ||
|
|
||
| ## hoppergee/heic-to: Convert HEIC/HEIF images to JPEG, PNG in browser | ||
| [github.com/hoppergee/heic-to?tab=readme-ov-file](https://github.com/hoppergee/heic-to?tab=readme-ov-file "hoppergee/heic-to: Convert HEIC/HEIF images to JPEG, PNG in browser") | ||
| <p class="jser-tags jser-tag-icon"><span class="jser-tag">JavaScript</span> <span class="jser-tag">browser</span> <span class="jser-tag">Image</span> <span class="jser-tag">library</span></p> | ||
|
|
||
| libheifを使ってHEIC/HEIFの画像をJPEG/PNGに変換するライブラリ | ||
|
|
||
|
|
||
| ---- | ||
| <h1 class="site-genre">書籍関係</h1> | ||
|
|
||
| ---- | ||
|
|
||
| ## Next.jsの考え方 | ||
| [zenn.dev/akfm/books/nextjs-basic-principle](https://zenn.dev/akfm/books/nextjs-basic-principle "Next.jsの考え方") | ||
| <p class="jser-tags jser-tag-icon"><span class="jser-tag">Next.js</span> <span class="jser-tag">book</span></p> | ||
|
|
||
| Next.jsのServer Componentについて | ||
|
|
||
|
|
||
| ---- |