🏄
Matsuri-tech Frontend Weekly 2023-10-20

hrdtbs

hrdtbs

2023年10月20日
MFWESLintRemix

社内向けに、フロントエンド関連のニュースや業務で発生したQ&A、利用しているライブラリなどの情報を定期的に書いています。

社内の開発部メンバーに向けて直近でリリースされたライブラリなどの情報をMatsuri-tech Frontend Weeklyとしてまとめています。内容は実務や趣味で使えそうなものを中心に扱っており、網羅的ではなく偏りがあります。

# Flat config rollout plans

Flat config rollout plans - ESLint - Pluggable JavaScript LinterA pluggable and configurable linter tool for identifying and reporting on patterns in JavaScript. Maintain your code quality with ease. Flat config rollout plans - ESLint - Pluggable JavaScript Linter

年末頃にリリース予定のESLint v9からflat configがデフォルトになり、ESLINT_USE_FLAT_CONFIG=falseを設定しないとeslintrcは読み込まれなくなります。またv10からeslintrcが廃止されます。

# Just use vite! - remix-run/remix

Just use vite! · remix-run/remix · Discussion #7632"Just Use Vite!" Background Over-reliance on compilers is often to blame for apps being slow and clunky for both the developer and users, so our initial approach with Remix was to keep it simple an...Just use vite! · remix-run/remix · Discussion #7632

Remixはesbuild上でカスタムコンパイラを維持するのではなく、Viteのプラグインとして動作するようにすることを検討しています。

# Astro 3.3: Picture component

Astro 3.3: Picture component | AstroAstro 3.3 is out with a brand new, experimental Picture component, improved compatibility for syntax highlighting, and package provenance.Astro 3.3: Picture component | Astro

まだ実験的な機能ですが、Pictureコンポーネントが追加されました。Pictureコンポーネントを利用するとpictureやsource要素を含む要素が生成されます。またImageコンポーネントにsrcset属性が追加されました。

# Write your own Zod

Write your own ZodWrite your own Zod from scratchWrite your own Zod

ZodのようなSchema validatorを実装する記事。 Zodのようなスキーマオブジェクトから型をInferする方法など。

# Announcing v0: Generative UI

Announcing v0: Generative UI – VercelIntroducing v0Announcing v0: Generative UI – Vercel

VercelがプロンプトからUIを生成するサービスv0をベータ公開しました。

現在は、ReactベースでShadcnとTailwind CSSを利用したコードが生成されますが、今後は他のライブラリやフレームワークも検討しているとのころ。

料金プランが公開され、無料プランも提供されます。基本的には料金に応じて生成に利用できるクレジットが増えるだけです。

v0 by VercelGenerate UI with simple text prompts. Copy, paste, ship.v0 by Vercel

# CSS Findings From Photoshop Web Version

CSS Findings From Photoshop Web VersionA look at Photoshop web version CSSCSS Findings From Photoshop Web Version

Web版PhotoshopがどのようなCSSで記述されているという記事。

Web componentsで多くのUIが作られており、レイアウトにはFlexboxが多用されている。