📝

Monthly Frontend News 2022年7月

2022/08/01に公開約4,400字

7月は個人的に夏休みやらなんやらで更新ができなかったので、まとめて更新しました。
8月からはまた毎週更新します!!

(毎週じゃないと量が多くて大変という学び)

ライブラリなどのOSS系

Release v1.24.0 · microsoft/playwright

https://github.com/microsoft/playwright/releases/tag/v1.24.0

describe のtitleなしが可能に、Component Testに使用できる beforeMountafterMount が追加された。

remix/streaming.md at deferred · remix-run/remix

https://github.com/remix-run/remix/blob/deferred/docs/guides/streaming.md

Remixの deferred apiについて。
React 18の Suspense を使用する際に起こるデータの流れとそのソリューションについての解説も合わせられている。

Next.jsのアクセシビリティに関するドキュメント改善

https://twitter.com/nextjs/status/1549043787330375680?s=20

◆ Provide page names to screen readers and assistive technologies for client-side navigations
◆ ESLint default accessibility rules
◆ Disable JavaScript with an experimental flag

a11yのlintやスクリーンリーダーについてNextのドキュメントに追加された。

Bun is a fast all-in-one JavaScript runtime

https://bun.sh/

新しいJavaScript runtime。

https://twitter.com/jarredsumner/status/1544580094328418304?s=20&t=UiyTEZl4sVvaGYqTNC578g

react-dom/serverを動かす用意もできていて、Next.jsのSSRも動くらしい。Reactに振り切っている印象がある。

astro@1.0.0-rc.1

https://github.com/withastro/astro/releases/tag/astro%401.0.0-rc.1

Astro v1のRCリリース。
Vite 3やMDXに。

Hermes as the Default

https://reactnative.dev/blog/2022/07/08/hermes-as-the-default

React Nativeのdefault engineがHermesになる説明。

Storybook 7.0 design sneak peek

https://storybook.js.org/blog/storybook-7-0-design-sneak-peek/

Storybook v7の変更点チラ見せ。
Storybook v7はalphaでリリースされてるけど、色々と細かく改善されてるぽいから待ち遠しい。

Next.jsのLayouts RFC続報とデモ

https://twitter.com/nextjs/status/1549841497822056454

Demoで実際のLayouts RFCの挙動が見える。

Vite 3.0 is out!

https://vitejs.dev/blog/announcing-vite3.html

Vite v3のリリース。

10月にViteConfがあるからそこでも詳細が聞けそう。

https://viteconf.org/

ブラウザ系

New WebKit Features in Safari 15.6

https://webkit.org/blog/13009/new-webkit-features-in-safari-15-6/

CSSに :modal の追加。そのほかバグfixなど。

New to the web platform in July

https://web.dev/web-platform-07-2022/

7月にあったブラウザ周りの更新情報。

Can I DevTools?

https://www.canidev.tools/

各ブラウザのDevtool対応機能の一覧。

What's New In DevTools (Chrome 104)

https://developer.chrome.com/en/blog/new-in-devtools-104/

Chrome 104のdevtool情報。
Recorder panel多め。

Feature: Media Queries Level 4 Syntax & Evaluation

https://chromestatus.com/feature/5203042742829056

@media (width >= 400px) { … } のようなMedia Queriesが書ける。

Help pick a syntax for CSS nesting

https://developer.chrome.com/blog/help-css-nesting/

CSSでネストができるCSS nestingの仕様についてのアンケート。
複数ある候補からアンケートがとられている。

Release Notes for Safari Technology Preview 150

https://webkit.org/blog/13066/release-notes-for-safari-technology-preview-150/

タイトル通りで、特にこれといったものはなかった。

Top layer support in Chrome DevTools

https://developer.chrome.com/en/blog/top-layer-devtools/

Top layer elementの解説とDevtoolsで可視化することで役立つ点の解説。

記事系

The CSS behind Figma

https://ishadeed.com/article/figma-css/

FigmaでFlexboxやGridがどのように使われているのかの解説。

Examples of large production-grade, open-source React apps

https://maxrozen.com/examples-of-large-production-grade-open-source-react-apps

Reactアプリケーションで参考になるOSS一覧。

BODY MARGIN 8PX

https://www.miriamsuzanne.com/2022/07/04/body-margin-8px/

bodyになぜmargin 8pxがついているのか歴史から遡って解説。

Understanding CSS :has() - YouTube

https://www.youtube.com/watch?v=axkefJvfS9U

Igaliaが :has() についてYouTubeで解説しているもの。
視覚的でわかりやすい。

Reading Source Code: React

https://alexkondov.com/readint-source-code-react/

Reactのソースコードの読み方の記事。

Cascade Layers – There’s a Polyfill for That!

https://www.oddbird.net/2022/06/21/cascade-layers-polyfill/

Post CSSで実装されたCascade LayersのPolyfillを話。
Polyfillで実現できないことや設定について。

Style Queries

https://una.im/style-queries/

container queriesのcontain-level-3 specの一部であるstyle container queriesについての解説。

こんなことができる

@container style(color: hotpink) {
  .card {
    background: white;
  }
}

Build Your Own Web Framework

https://vercel.com/blog/build-your-own-web-framework

Vercel Build Output APIとReactを使い、Next.jsのような機能を持ったフレームワークを独自実装する解説。

Next.jsに依存するほどでもないもので、一定の最適化を取り入れることとかできそう👀

各項目の解説も面白い。

Bringing the best GraphQL experience to Svelte

https://www.the-guild.dev/blog/houdini-and-kitql

SvelteとgraphqlにHoudiniとKitQLを使った解説。

The React core team finally have opinions about CSS

https://dev.to/hypeddev/the-react-core-team-finally-have-opinions-about-css-16f0

dan氏がユーチューブでReactのCSSについて答えてたまとめ的なやつ。
パフォーマンス的に事前コンパイルしてCSSを読み込み、動的なCSSの変化はインラインスタイルでやるといいと思っているなど。
Linaria、Vanilla Extrac、atomic CSS とかにも触れている。

Discussion

ログインするとコメントできます