bonlifeのブックマーク - はてなブックマーク

Service WorkerとWasmを組み合わせてサーバー処理をブラウザーでリアルに再現する

今回の話はWasmというよりもService Workerの話がメインになりますが、WasmとService Workerを組み合わせることで、ブラウザー上でサーバー処理をリアルに再現することができるので、このタイトルにしています。まずは動画をご覧ください。見ていただくと分かるように、ブラウザー上でPHPのコードを書くとその実行結果が右側に表示されています。特に面白い点が、お問い合わせフォームのPOST後の処理までもブラウザー上だけで実行できているという点です。これはWasmとService Workerを組み合わせて実現しています。大体以下のようなプロセスで実現しています。 Wasmはブラウザー側でも実行可能ですが、あえてService Worker上で実行しているのは、URLへのリクエストに対してそのリクエストにインターセプト（介入）することで、POST後の処理などもブラウザ

bonlife 2023/06/22

あとで読む

リンク

Next.jsで多言語対応のサイトを作るのが簡単すぎた件

Next.jsで多言語対応を試みた経緯以前趣味でブログのRSSを登録するとブログの投稿率をGitHubの草のようなヒートマップ形式で表示でき他のユーザーと継続率を競えるサービス、Blog Friendsを開発しました。今回のこのサービスをProductHunt（海外の自分が作ったWebサービスやアプリを投稿できるサイト）に提出しようと思い英語対応をしました。日本語サイトがこちらで、英語サイトはこちらです。 ProductHuntに提出してみた結果は以下のように12Upvotedでなんとも言えない結果でしたが、多言語サイトを作る上で勉強になったので後悔はしていません。 Next.jsで多言語サイトを作る方法ルーティングを理解する公式サイトにもあるのですが、Next.jsで多言語サイトを作る方法として以下の二つのルーティング方法があります。 Domain Routing Sub-p

bonlife 2021/11/14

あとで読む

リンク

Notion APIで自分のポートフォリオサイトを作ってみた

Notionのbeta版のパブリックAPIで現時点でどこまでのことができるか試してみるため、自分のポートフォリオサイトを実際にNotion APIで作ってみました。この記事ではNotion APIの使い方と、どのようにポートフォリオサイトを作ったかをご紹介したいと思います。完成したもの実際に完成したポートフォリオサイトはこちらこちらはその元となっているNotionのページになります。使用技術使用技術は以下のようになります。最近自分の中でNext.jsとTypeScriptは切っても切れない技術になってきてます。 Next.js TypeScript Notion API また、@notionhq/clientというNotionが公式で提供しているnpmライブラリを使うことで簡単に記事データを取得することができました。ポートフォリオサイトを作った手順 Notionにてデータベー