Monthly Frontend News 2022年7月
7月は個人的に夏休みやらなんやらで更新ができなかったので、まとめて更新しました。
8月からはまた毎週更新します！！
(毎週じゃないと量が多くて大変という学び)
ライブラリなどのOSS系
Release v1.24.0 · microsoft/playwright
describe のtitleなしが可能に、Component Testに使用できる beforeMount と afterMount が追加された。
remix/streaming.md at deferred · remix-run/remix
Remixの deferred apiについて。
React 18の Suspense を使用する際に起こるデータの流れとそのソリューションについての解説も合わせられている。
Next.jsのアクセシビリティに関するドキュメント改善
◆ 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
新しいJavaScript runtime。
react-dom/serverを動かす用意もできていて、Next.jsのSSRも動くらしい。Reactに振り切っている印象がある。
astro@1.0.0-rc.1
Astro v1のRCリリース。
Vite 3やMDXに。
Hermes as the Default
React Nativeのdefault engineがHermesになる説明。
Storybook 7.0 design sneak peek
Storybook v7の変更点チラ見せ。
Storybook v7はalphaでリリースされてるけど、色々と細かく改善されてるぽいから待ち遠しい。
Next.jsのLayouts RFC続報とデモ
Demoで実際のLayouts RFCの挙動が見える。
Vite 3.0 is out!
Vite v3のリリース。
10月にViteConfがあるからそこでも詳細が聞けそう。
ブラウザ系
New WebKit Features in Safari 15.6
CSSに :modal の追加。そのほかバグfixなど。
New to the web platform in July
7月にあったブラウザ周りの更新情報。
Can I DevTools?
各ブラウザのDevtool対応機能の一覧。
What's New In DevTools (Chrome 104)
Chrome 104のdevtool情報。
Recorder panel多め。
Feature: Media Queries Level 4 Syntax & Evaluation
@media (width >= 400px) { … } のようなMedia Queriesが書ける。
Help pick a syntax for CSS nesting
CSSでネストができるCSS nestingの仕様についてのアンケート。
複数ある候補からアンケートがとられている。
Release Notes for Safari Technology Preview 150
タイトル通りで、特にこれといったものはなかった。
Top layer support in Chrome DevTools
Top layer elementの解説とDevtoolsで可視化することで役立つ点の解説。
記事系
The CSS behind Figma
FigmaでFlexboxやGridがどのように使われているのかの解説。
Examples of large production-grade, open-source React apps
Reactアプリケーションで参考になるOSS一覧。
BODY MARGIN 8PX
bodyになぜmargin 8pxがついているのか歴史から遡って解説。
Understanding CSS :has() - YouTube
Igaliaが :has() についてYouTubeで解説しているもの。
視覚的でわかりやすい。
Reading Source Code: React
Reactのソースコードの読み方の記事。
Cascade Layers – There’s a Polyfill for That!
Post CSSで実装されたCascade LayersのPolyfillを話。
Polyfillで実現できないことや設定について。
Style Queries
container queriesのcontain-level-3 specの一部であるstyle container queriesについての解説。
こんなことができる
@container style(color: hotpink) {
.card {
background: white;
}
}
Build Your Own Web Framework
Vercel Build Output APIとReactを使い、Next.jsのような機能を持ったフレームワークを独自実装する解説。
Next.jsに依存するほどでもないもので、一定の最適化を取り入れることとかできそう👀
各項目の解説も面白い。
Bringing the best GraphQL experience to Svelte
SvelteとgraphqlにHoudiniとKitQLを使った解説。
The React core team finally have opinions about CSS
dan氏がユーチューブでReactのCSSについて答えてたまとめ的なやつ。
パフォーマンス的に事前コンパイルしてCSSを読み込み、動的なCSSの変化はインラインスタイルでやるといいと思っているなど。
Linaria、Vanilla Extrac、atomic CSS とかにも触れている。
Discussion