はてなブックマーク

Document Picture-in-Picture APIというWeb APIがあります。まだブラウザの実装が限定的ですが、Chromeなら116から使えるようです。 The Document Picture-in-Picture API makes it possible to open an always-on-top window that can be populated with arbitrary HTML content — for example a video with custom controls or a set of streams showing the participants of a video conference call. It extends the earlier Picture-in-Picture API for <video>, whi

このサイトで使っているNext.jsをv15にアップデートしました。 所詮ブログサイトなのでほとんど大きな変更はないですが、変更した内容を残しておきます。 内容パッケージのアップデート使っているNext.js関連のパッケージを一気にアップデートします。 npm i next@latest react@rc react-dom@rc @types/react@latest @types/react-dom@latest @next/bundle-analyzer@latest @next/third-parties@latest 注意点は、Next.js自体はv15が正式リリースされていますが、React v19はまだRC版です。なのでインストール時は @rc をつけてインストールします。 Async Request APIsNext.js 15からpage.tsxやlayout.tsxのp

唐突にRustを使ってみたいと思ったので勉強を始めてみました。 始めた理由始めてみたかった理由は色々あります。 まずはやはりフロントエンド開発ツールが色々とRustで実装されることです。VercelはTurborepoとTurbopackをRustで実装していますね。JavaScriptコンパイラのSWCもRustで実装されています。あとは、uhyoさんのnitrogqlもRustで作られていて、おもしろいなと思いました。そんな感じで、コンパイラ実装でRustがよく使われていることと、ビルドツールなどのテキスト処理に興味があったのが1つ目の理由です。 あとは、Tauriですね。ふとデスクトップアプリを作りたいと思ったときにTauriを調べたんですが、TauriのバックエンドをRustで書けたらかっこいいなと思いました。普通にJavaScriptでも書けるらしいんですが、かっこよさ重視です。

先日 続・URLシェアを支える技術 CompressionStream という記事をZennに投稿しました。 この記事のためにlz-stringとCompressionStreamの圧縮率を比較できるサイト(以下比較サイト)をVite+Reactで作りました。 このサイトでは、入力してもらったテキストをURLに反映して、入力状態をそのままシェアできる機能を実装しています。TypeScript PlaygroundやReact Compiler Playgroundのような感じです。 例えば次のようなURLをシェアすることができます。 https://stinbox.github.io/lz-string-vs-compression-stream?source=eJx73Nj0uHHV48b5jxvXKxSXZObpJuXkpys8blz3uHnV4-bNj5vWP26a9GJH_-Omy

真にチラつかないダークモードをついに実現したぞ。実現方法と気付きを書く2024/07/14 14:36 nextjsreact このサイトはダークモードに対応しています。なぜならダークモードは基本的人権だからです(要出典)。 しばらく、サイトに訪問した直後ライトモードとダークモードが切り替わってチラつく現象が発生していました。これを改善したので、実装方法と気付いたことを残しておきます。 ダークモードの実装方法一般に、ダークモードの実装方法は3タイプあります。 OSによるモード設定を反映する メディアクエリー@media (prefers-color-scheme: dark)を使うと、OS側でダークモードを指定している時だけ有効になるスタイルを書くことが出来ます。 JavaScriptでも判定が必要な場合はmatchMedia("(prefers-color-scheme: dark)")

Remix に興味を持ったのでドキュメントを読み漁ってだいたい読み切ったので、練習がてら Node.js 向け Remix テンプレートを修正して Cloudflare Pages にデプロイする。 create-remix という npx コマンドでさっとテンプレートを作る。プロジェクト名は remix-on-cloudflare-pages とした。パッケージ管理ツールは npm を普段遣いしているので、CLI に提案されるままに npm install を実行した。 npx create-remix@latest dir Where should we create your new project? remix-on-cloudflare-pages ◼ Using basic template See https://remix.run/guides/templates for

react-markdown をやめて remark から自力でレンダリングするようにした話2023/12/28 16:27 remark Introこのブログサイトの記事ページではこれまで react-markdown というライブラリでマークダウンを HTML に変換して表示していました。この度、react-markdown を剥がして remark を直接使って記事をレンダリングするように変更しました。 前回の記事で Playwright で VRT を導入した記事を書きました。VRT でデグレチェックをしたかったのはこの変更を加えたかったからです。Playwright のおかげで表示崩れすることなく移行することができました。 react-markdown についてreact-markdown は unified/remark/rehype を使ってマークダウンを解析し、適切な要素を

Next.js は普通に開発して普通にデプロイする場合、Node.js ランタイムでサーバーを動かすことになります。しかし next.config.js の設定1行で、ビルド結果にサーバー用コードが含まれなくなり、静的なファイルだけをまとめた out ディレクトリが生成されるようになります。この out ディレクトリを好きな静的サイトホスティングでHTTP配信するだけで、Webサイトにすることができます。AWS S3 や Firebase Hosting、GitHub Pages などにファイルを置くだけでよくなります。 Next.js なので SSG によって HTML はちゃんとコンテンツを含んでいます。なので SEO 的にも問題ありません。また next/link も prefetch してくれたり SPA のクライアントサイドナビゲーションなので画面遷移も爆速です。 Static

このサイトを Next.js App Router で実装し直しました。Server Components が扱えてなんか便利なやつです。 移行にあたって学んだことや App Router の嬉しいポイントなどを書いておきます。 スタイリングメソッドの移行このブログサイトのスタイリングは vanilla-extract で書かれていました。Next.js の最新ドキュメントでは App Router でも vanilla-extract をサポートしたと書かれていましたが、ランタイム JS を必要とする CSS in JS 同様に Client Components でサポートしていると書かれていました。vanilla-extract は CSS in JS ですが完全に静的な CSS に変換されるため、Server Components でも使えそうな気はします。が、ドキュメントがそう言

こんなツイートをしたらちょっと反響がありました。 大した事ないツイートがプチバズりしているの不思議 ではありますが、みんな似た経験をしているのでしょう。 本記事では、このツイートの裏にある自分の考え方を書き残しておきます。 とあるアプリの初期デザインとその実装著者リストと記事リストのデザインが次の画像のようになっているとします。 それぞれのリストアイテムには、サムネイル・太字のテキスト・小さいテキストがありますが、それらは内容が異なるだけでまったく同じ CSS で表現できるようになっています。これは同じコンポーネントで実装できるんじゃないかと次のようなコードを書くかもしれません。 import styles from "./card.module.css"; export const Card: FC<{ image: string; name: string; description:

Context を export するなみなさんは React Context を使っていますか？非常に便利ですよね。 え、使ってない？みんな React Context 使っとる。使ってへんのお前だけ。 冗談はさておき、この記事では Context を export するなという内容をお話しします。 React Context とはその前に React Context についてざっと解説していきます。 Context は、コンポーネントをまたいだ値の共有を実現するためのオブジェクトです。 createContext で生成することができます。 import { createContext } from "react"; const context = createContext<string>("initial value");

Fragment をコンポーネントのトップに置くな「Fragment をコンポーネントにトップに置く」というのは下のようなコンポーネントを作成することを指します。 export const MyComponent = () => { return ( <> <h1>This is a sample code.</h1> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Dui