O hirunewani blog

Frontend Weekly 2024-09-06

Created at

Prism ORMのTypedSQL、Astro 4.15.0のAstro Actionsなどについて紹介する。

Announcing TypedSQL: Make your raw SQL queries type-safe with Prisma ORM

Prisma ORMが、生SQLから型安全な関数を生成できるTypedSQLの機能を発表した。

https://www.prisma.io/blog/announcing-typedsql-make-your-raw-sql-queries-type-safe-with-prisma-orm

簡単なクエリであれば従来のAPIの方が手軽だが、複雑なクエリの場合はTypedSQLが有効という意見が見られる。

Astro 4.15.0 

Astro Actionsが安定版になった。

https://astro.build/blog/astro-4150/

Astro Actionsは、簡素な記述で型安全なデータ取得、JSON解析、入力検証を自動的に処理する。次のように利用できる。

// src/actions/index.ts
import { defineAction } from "astro:actions";
import { z } from "astro:schema";

export const server = {
  newsletter: defineAction({
    input: z.object({ email: z.string().email() }),
    handler: async input => {
      return {
        error: null,
      };
    },
  }),
};
---
// src/pages/newsletter.astro
import { actions } from "astro:actions";

const result = Astro.getActionResult(actions.newsletter);
---

{result && !result.error && <p>Thanks for signing up!</p>}

<form method="POST" action={actions.newsletter}>
  <input type="email" name="email" />
  <button>Sign up</button>
</form>

https://docs.astro.build/en/guides/actions/

Chromium Docs - How Chrome Accessibility Works

ChromiumがどのようにAccessibilityを動作させているかについてのChromiumによる解説記事。全3部。

https://chromium.googlesource.com/chromium/src/+/main/docs/accessibility/browser/how_a11y_works.md

第1部では、DOMツリーに基づいたアクセシビリティツリーの概要について。第2部では、マルチプロセスブラウザであるChromiumにおけるアクセシビリティツリーのキャッシュなどの仕組みについて。第3部では、マルチプラットフォーム対応やiframeへの対応などについて触れられている。

AVIFファイルがGoogle検索及びGoogle画像検索で有効になった。

https://developers.google.com/search/blog/2024/08/happy-avifriday

Webサイト全体の画像に盲目的に大幅な変更を加えることは推奨しないと言及している。実際、過剰な圧縮やリダイレクトを伴わない拡張子の変更などはむしろSEOやUXに対してマイナスを影響を与える場合がある。

Can you convert a video to pure css?

動画をスクロールタイムラインを利用したCSSに変換する記事。

https://dgerrells.com/blog/can-you-convert-a-video-to-pure-css