Honoの捉え方、またはNext.jsとの組み合わせ方 | stin's Blog

2024/12/17 109 users hono Next.js import 捉え方 Message

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

2024/11/27 62 users Picture-in-Picture

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

2024/11/02 15 users Next.js アップ Types パッケージ アップデート

このサイトで使っているNext.jsをv15にアップデートしました。 所詮ブログサイトなのでほとんど大きな変更はないですが、変更した内容を残しておきます。 内容パッケージのアップデート使っているNext.js関連のパッケージを一気にアップデートします。 npm i next@latest react@rc react-dom@rc @types/react@latest @ty... 続きを読む

Rust始めてみた。JSONフォーマッターを作ってみた | stin's Blog

2024/10/15 50 users SWC Vercel rust 勉強 理由

唐突にRustを使ってみたいと思ったので勉強を始めてみました。 始めた理由始めてみたかった理由は色々あります。 まずはやはりフロントエンド開発ツールが色々とRustで実装されることです。VercelはTurborepoとTurbopackをRustで実装していますね。JavaScriptコンパイラのSWCもRustで実装されています。あとは、uhyoさん... 続きを読む

React useで非同期処理を簡単に扱う | stin's Blog

2024/09/28 14 users 非同期処理

先日 続・URLシェアを支える技術 CompressionStream という記事をZennに投稿しました。 この記事のためにlz-stringとCompressionStreamの圧縮率を比較できるサイト(以下比較サイト)をVite+Reactで作りました。 このサイトでは、入力してもらったテキストをURLに反映して、入力状態をそのままシェアできる機能を実装して... 続きを読む

真にチラつかないダークモードをついに実現したぞ。実現方法と気付きを書く | stin's Blog

2024/07/14 10 users チラ ダークモード 実現方法 人権 要出典

真にチラつかないダークモードをついに実現したぞ。実現方法と気付きを書く2024/07/14 14:36 nextjsreact このサイトはダークモードに対応しています。なぜならダークモードは基本的人権だからです(要出典)。 しばらく、サイトに訪問した直後ライトモードとダークモードが切り替わってチラつく現象が発生していました。... 続きを読む

React Context を export するのはアンチパターンではないかと考える | stin's blog

2021/02/21 35 users export CONTEXT アンチパターン 冗談 お前

Context を export するなみなさんは React Context を使っていますか？非常に便利ですよね。 え、使ってない？みんな React Context 使っとる。使ってへんのお前だけ。 冗談はさておき、この記事では Context を export するなという内容をお話しします。 React Context とはその前に React Context についてざっと解説... 続きを読む

Fragment をコンポーネントのトップに置くのはアンチパターンではないかと考える | stin's blog

2021/02/05 21 users Fragment return コンポーネント

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... 続きを読む