devongovett

// Turn all HTML <a> elements into client side router links, no special framework-specific <Link> component necessary!
// Example using the Next.js App Router.
import { useRouter } from 'next/navigation';
import { useEffect } from 'react';

function useLinkHandler() {
  let router = useRouter();

  useEffect(() => {
    let onClick = e => {

gaearon

Next.js client-only SPA example

Made this example to show how to use Next.js router for a 100% SPA (no JS server) app.

You use Next.js router like normally, but don't define getStaticProps and such. Instead you do client-only fetching with swr, react-query, or similar methods.

You can generate HTML fallback for the page if there's something meaningful to show before you "know" the params. (Remember, HTML is static, so it can't respond to dynamic query. But it can be different per route.)

Don't like Next? Here's how to do the same in Gatsby.

azu

Convert TypeScript library project to Node.js Dual Package

It is a script to convert a TypeScript library project to a Node.js Dual CommonJS/ES module packages.

This script aim to convert following project:

• Use TypeScript
• Use ts-node
• Use mocha

azu

*://ranking.goo.ne.jp/*
*://my-best.com/*
*://sakidori.co/*
*://wowma.jp/*
*://osusume.mynavi.jp/*
*://pc.moppy.jp/*
*://heim.jp/*
*://www.esquire.com/*
*://epark.jp/*
*://iecolle.com/*

hyuki

結城浩とChatGPTの対話

2022年12月2日

• 「質問」は結城浩の文章です。
• 「回答」はChatGPTの文章です。

質問

ChatGPTという対話するAIツールがあります。人間が質問を投げかけるとそれらしく対話して回答してくれるツールです。こういうツールに対してどんな質問を投げかけたらおもしろい対話になるでしょうかね。何かアイディアがあったら聞かせてください。具体的な質問を知りたいなあ。

martin-fv

import { Meta } from "@storybook/react/types-6-0";
import { PostList } from "../PostList";
import { getTRPCMock } from "../getTrpcMock";

export default {
  title: "Components/PostList",
  component: PostList,
} as Meta;

export const PostListPage = () => {

mizchi

放送で紹介する用。書きかけです。

ちょっと伸びたのでさらに追記。これは元々自分の勉強がてら書いていたもので、これを書く過程でどうしても自分の理解では説明できないところがあり koba789 に依頼してペアプロをしてもらった、という流れがあります。その結果が次の動画です。

https://t.co/FIBmVrR83U

生放送の流れを円滑にするために資料を公開しましたが、この記事は未完成で、あとでさらに整理して別途記事にまとめるつもりです

---

azu

サブドメインをユーザーホスティングサイトに使うときのパターン

hoge.example.com でユーザが作成したサイトをホスティングして、任意のJavaScriptを実行できる状態にしたいケース。 サブドメインを分けることで、Fetch APIなどはSame Origin Policyを基本にするため、別のサブドメインや example.com に対するリクエストなどはできなくなる。

一方で、CookieはSame Origin Policyではない。 デフォルトでは、hoge.example.com から example.com に対するCookieが設定できる。 これを利用したDoS(Cookie Bomb)やこの挙動を組み合わせた別の脆弱性に利用できる場合がある。

• The Cookie Monster in Your Browsers - Speaker Deck

toricls

Lima (Linux virtual machines, on macOS) installation guide for M1 Mac.

Sep. 27th 2021 UPDATED

Now we can install patched version of QEMU via Homebrew (thank you everyone for the info!). Here is the updated instruction with it:

Used M1 Mac mini 2020 with macOS Big Sur Version 11.6.

1. Install QEMU & Lima

azu

tsconfig.json の設定についてのメモ書きです。

• TypeScript: TSConfig Reference - Docs on every TSConfig option
• TypeScript: Documentation - What is a tsconfig.json

Node.jsのバージョンごとの設定

target は 変換後のコードのECMAScriptバージョンを指定する たとえば、Node.js 14はES2020をサポートしている。そのため、Node.js 14向けのコード(サーバなど)ならtarget: "ES2020"を指定することで、余計なTranspileが省かれててコードサイズや実行時間が最適化される。