タグ stin's blog
人気順 5 users 50 users 100 users 500 users 1000 usersHonoの捉え方、またはNext.jsとの組み合わせ方 | stin's Blog
HonoというWebフレームワークがあります。Express.jsのような書き方でWebアプリケーションを作れるものです。 import { Hono } from "hono"; const app = new Hono(); app.get("/", (c) => c.json({ message: "Hello, Hono!" })); export default app; HonoはWeb標準準拠を謳っているフレームワークです。それを聞くとな... 続きを読む
記事をPicture-in-Pictureで読めるようにしてみた | stin's Blog
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 con... 続きを読む
Next.js 15にアップデートした | stin's Blog
このサイトで使っているNext.jsをv15にアップデートしました。 所詮ブログサイトなのでほとんど大きな変更はないですが、変更した内容を残しておきます。 内容パッケージのアップデート使っているNext.js関連のパッケージを一気にアップデートします。 npm i next@latest react@rc react-dom@rc @types/react@latest @ty... 続きを読む
Rust始めてみた。JSONフォーマッターを作ってみた | stin's Blog
唐突にRustを使ってみたいと思ったので勉強を始めてみました。 始めた理由始めてみたかった理由は色々あります。 まずはやはりフロントエンド開発ツールが色々とRustで実装されることです。VercelはTurborepoとTurbopackをRustで実装していますね。JavaScriptコンパイラのSWCもRustで実装されています。あとは、uhyoさん... 続きを読む
React useで非同期処理を簡単に扱う | stin's Blog
先日 続・URLシェアを支える技術 CompressionStream という記事をZennに投稿しました。 この記事のためにlz-stringとCompressionStreamの圧縮率を比較できるサイト(以下比較サイト)をVite+Reactで作りました。 このサイトでは、入力してもらったテキストをURLに反映して、入力状態をそのままシェアできる機能を実装して... 続きを読む
真にチラつかないダークモードをついに実現したぞ。実現方法と気付きを書く | stin's Blog
真にチラつかないダークモードをついに実現したぞ。実現方法と気付きを書く2024/07/14 14:36 nextjsreact このサイトはダークモードに対応しています。なぜならダークモードは基本的人権だからです(要出典)。 しばらく、サイトに訪問した直後ライトモードとダークモードが切り替わってチラつく現象が発生していました。... 続きを読む
React Context を export するのはアンチパターンではないかと考える | stin's blog
Context を export するなみなさんは React Context を使っていますか?非常に便利ですよね。 え、使ってない?みんな React Context 使っとる。使ってへんのお前だけ。 冗談はさておき、この記事では Context を export するなという内容をお話しします。 React Context とはその前に React Context についてざっと解説... 続きを読む
Fragment をコンポーネントのトップに置くのはアンチパターンではないかと考える | stin's blog
Fragment をコンポーネントのトップに置くな「Fragment をコンポーネントにトップに置く」というのは下のようなコンポーネントを作成することを指します。 export const MyComponent = () => { return ( <> <h1>This is a sample code.</h1> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusm... 続きを読む