What's going on my site, @vercel @nextjs ?🥲 Error with applied custom domain. t6a.dev No error. t6a.vercel.app github.com/t6adev/t6adev
My tweets
Check your RSC that it has dynamic functions, cookies() or headers(), or not. The RSCs that have dynamic functions are rendered at every request time. It's a straightforward strategy but causes unexpected behavior sometimes if you forget. nextjs.org/docs/app/build…
You know, if we want to use any React Server Components in Client Components, we can't import RSC directly, so we must receive these through props. Today I had an experience when I was coding all components as RSC. nextjs.org/docs/app/build…
How do you represent blurDataURL feature without using Next.js Image component? I just noticed it works with @tailwindcss to show blur data before loading image. nextjs.org/docs/app/api-r… If you want to try this demo, you should set network throttling slow image-component.nextjs.gallery/placeholder
Hope someone can feel today my work in Next.js 🙃
CAUTION: redirect() function throws a NEXT_REDIRECT """error""" in Next.js 🚨 So you know, we can't invoke it in try-catch simply 😕 (Why is it under the Example section...I just sent a feedback.) nextjs.org/docs/app/api-r…
Hi Next.js users, you can invoke your server action from "anywhere" not only <form action={myAction}> 👋 All example codes were written with form action though. nextjs.org/docs/app/api-r…
The atomWithFormControls is provided to handle a group of atoms with form controls in jotai-form. In my case, I'd handle form controls for just one atom, like one input with one atom. It's an atom creator util for eliminating to write key. github.com/jotaijs/jotai-…
Today's my ghost style: focus outline
Don't be scared.
昨今のフロントエンド界隈での技術の進化は凄まじく、キャッチアップするのが大変です。 一つアドバイスしたいのは、フレームワークやライブラリの使い方に囚われすぎないでください。 重要なのは「その技術が何を解決したいか」です。 理解できない時はマインドセットを切り替える必要があります。
See React Forget soon 🤩
React Advanced London 2023 / thanks @jherr good talk too youtube.com/live/hn_L56ypX…
Guess what. Want to show it more but newborn #buildinpublic
Today I learned: null!
同意。あと、着地を何処にするかは統一しないとゴチャついちゃうのがフロントエンド側。 catchするの（ErrorBoundary）は外側から整備していくのが自分の中の基本方針。もちろん適切に。 event handlerでthrowしても反応してくれないので設計が難しいんだけど、jotaiで(続く
TypeScript の例外のはなし、現実的にはフロントエンド書くときの話なのか GraphQL バックエンド書く時の話なのか、場面によって話変わるなというのが自分の感想。フロントエンドで React の場合、ErrorBoundary や Suspense があるから素直にスローするほうが全体的に良さそう
You can see a list of all timezone in JS 🕗 developer.mozilla.org/en-US/docs/Web…
Falling in love with Cloudflare x Honojs. I tried to build a React app with Vite on it. Cooooooool!!!!
クリックすると🧡がフワフワ漂うアニメーションをtailwindcssベースで実装してみた。 #React animation keyframesはtailwindのconfigで定義。クリックしたら🧡の数だけコンポーネントを生成。 日頃アニメーション関連の実装は出来合いのもので間に合わせるので楽しかった！ codesandbox.io/p/sandbox/hear…
<div class="animate-fly">❤️</div> Hi, @tailwindcss animation. play.tailwindcss.com/9Nzi15SrqI?fil…
How do you get each type from the list of union? In this situation, I believe this is an acceptable way. Any idea? tsplay.dev/m3VryN #TypeScript #React
Microsoft Excelを使わない人生を送っていたので？Byte Order Mark(BOM)が無いcsvは文字化けするって初めて知りました🙄
Is it possible to use the "default" parameter to identify the user's timezone in their browser? It can be changed other using like devtool. (Anyway, the default timezone comes from OS, right?) developer.mozilla.org/en/docs/Web/Ja…
Release is better than perfect. jotai-gallery.pages.dev It has just one now, I'll add more content. Thanks to @CloudflareDev @honojs @reactjs @jotaijs @tailwindcss @mdx_js @codesandbox @FormidableLabs
Hi, @jotaijs users. I'm just struggling to build `Jotai Gallery` to show how can we implement something using jotai. The official doc already has some examples but I'd like to collect more real use cases or copy-pastable code. Not a React Server Component project, but so fun 👻
Hi, @jotaijs users. I'm just struggling to build `Jotai Gallery` to show how can we implement something using jotai. The official doc already has some examples but I'd like to collect more real use cases or copy-pastable code. Not a React Server Component project, but so fun 👻
I approved writing `import Foo from 'Foo.js'` for importing tsx file as there was no choice. However, the allowImportingTsExtensions option provides me with a peaceful heart😇
How does it prevent disappearing page contents through transitions? #React #jotai Yes, we can use useTransition simply in this case. Let's see 🧵
Long time no see, Emoji-Mart 👋 Currently, your implementation is not good for me. github.com/missive/emoji-… My dirty improvement is:
How can we show the list upside? headlessui.com/react/listbox Thanks for the answer 🙌 github.com/tailwindlabs/h…
My new combination: ESM, TypeScript, Vite-Express, Auth.js (prev. NextAuth), tRPC, zod, Prisma, Resend, React, Tailwindcss, Jotai Yeah, no RSC 😅
Today I learned: We can write types defined in its module in the `declare module` block without importing it.
I'm starting to try @resendlabs 💌 DNS settings are always complicated and vary depending on domain registrars. They indicate how to set it up on a registrar (Now Google, Cloudflare, and Namecheap). So helpful. No stress to combine it into your app. resend.com/docs/dashboard…
Glad to know this lib today. It makes components "denounced components" to delay rendering. React Debounce Render github.com/podefr/react-d… Sample code: codesandbox.io/s/react-deboun…
Did you know layout.jsx can be a client component in the Next.js app router? Thanks to it, we can use context providers with RSCs. RSCs are rendered as payload on the server side then those are sent to clients with SSR-ed page "in Next.js".
Server functions are called by POST with multipart/form-data in Next.js <form action={...}> or <form><button formAction={...} /></form>. ACTION_ID is a reference of the server function as an API endpoint.
3 pattern server function invocations in Next.js👀 See more details: nextjs.org/docs/app/build… Also, check it: nextjs.org/docs/app/build…
🎉 @uehaj さん主導の元、create-t3-appのドキュメントが日本語翻訳されましたー！
create-t3-app docs are now available in Japanese, thanks to a massive effort from @uehaj @t6adev now we can really be the new rails :)
初めてLive Codingをしてみました。 CybozuのKintoneのReact化でJotaiが"選ばれなかった"のですが、良い機会なので題材にさせていただきました!! さて、どうやって実装したでしょう？ YouTubeはこちら👇 youtu.be/HNs_bdaErKc コードはこちら👇 github.com/t6adev/jotai-t…
React Tip: You know we can use a key to trigger rerendering components when we change the key, right? You don't need to use the useEffect inside <Content /> to change content by a key, like a user id. Just do it.
VSCodeでTypeScriptのエラーを超絶読みやすくしてくる拡張が登場したのでその話題と、Vercelで募集されたドキュメントエンジニアのポジションとその給料についての話題を話しました。 👇 youtu.be/vJgqZgmUYhw
Let's install it in VSCode NOW!! TypeScript users!! 👇 marketplace.visualstudio.com/items?itemName…
Typescript just got way better github.com/yoavbls/pretty…
Let's dive into React Server Components!! First, How does it work? What is the difference between normal components? When render and commit in streaming? ...What's RSC? (I need your public review🙃)
Recently, the topic of React Server Components has become more prevalent. I took the time to review React concepts like SPA, data fetching and client-side rendering, SSR, and Suspense.
React Server Components の前に知っておいたほうが良さそうなStreaming HTMLとSelective Hydration。 Data fetchやcode splitしたいコンポーネントをSuspenseで囲んでおいて初期表示を速める（SSRという点はこれまでと変わらず）。残りの2,3,4もSSRなんだけど並列化可能。 全てSSRという点に注目。
React Server Components 理解のための SSR / SSG の復習。 serverではリクエストページ”全体”のHTMLを構築します。 1と2はcacheやprebuildで短縮可能です。3,4でのJS読み込み〜hydration完了でようやくbuttonやinputが動作可能になることも押さえておきましょう。 そして1~4全てがwaterfallです。
React Server Components 理解のための復習。 ”Render-As-You-Fetch”, "Fetch-on-Render" と呼ばれるパターンです。 コンポーネントで必要なデータを随時取得していくので、データ取得が逐次的になりやすいですね。並列化は実装者次第。 不要なJSXが初回リクエスト時に取得済みな事もポイント。
Reactの状態管理をURLクエリーパラメータと組み合わせる時はJotaiのatomWithHashが使えます話や、WebSocketではなくEventSource(Server-Sent Events)が使えるね話をしました。 youtu.be/yJLVElPfwA0
When you need Jotai atom's type, you can use type utils. 👻🧩 github.com/pmndrs/jotai/b…
Created Next.js 13 app dir/ playground used by @codesandbox It's a very simple version but you can see how React Server Components work. Hope it helps 👋 🔳 codesandbox.io/p/sandbox/wiza…
My decent work was merged. It's in a while. If you have experience using atomWithDefault in Jotai, you will be interested. You can try this by codesandbox in the doc. Hope it helps. Thanks @dai_shi 🙌 jotai.org/docs/recipes/a…
Maybe now you are so itching to try @nextjs canary, right? Me too. Open this in your browser, then replace github.com with stackblitz.com/github, here we go. 👉github.com/vercel/next.js… Thanks to @stackblitz
I like it😂
Introducing Sandpack 2.0 and Nodebox, a Node.js runtime for any browser. 📱 Run Node.js in any browser, any device ✨ Vite, Next.js, Astro & more ⚡ Super fast, with a Rust-based transpiler Here’s why we believe this is HUGE 👇 codesandbox.io/blog/announcin…
"You live in @astrodotbuild. I'll live in @nextjs. Together, we’ll live. Yakul and I will visit you."
「お前に駆け出しエンジニアが救えるか！？」
最近反対のfunction + returnで縛る理由を探していてようやく見つけて納得できた。 👇 twitter.com/t6adev/status/… あとはeslint-plugin-react/function-component-definition があるのでOK。喧嘩せずにすむね😂
Aha twitter.com/sunnysinghio/s…
Reactのコンポーネント関数、あなたはどっち派？ 理由を添えてね🫰
あなたはどっち派？ Return typeを明記する派？ 推論に任せて書かない派？ #TypeScript
"I need jotai-tanstack-query-trpc! Should I make a lib...?" "No, just use jotai-tanstack-query with @trpc/client" HAPPY🥳 codesandbox.io/s/jotai-tansta… Any idea? Thanks to @jotaijs, @tan_stack and @trpcio
For @recoiljs users who don't know @jotaijs yet 👻 It's a basic intro. 🧵 jotai.org/docs/basics/co…
配列内で重複となるデータを省きたいときにBOCCHI THE ROCK🎸
え、私のコード、ループ書いてる🫢 #JavaScript
Prisma x tRPC x Zod = 気持ちぃいいい
refactoringui.com グサグサきたので購入決定です。
Recoil? Jotai? oh, Do you like to type a lot to practice? There is a way to think more simple. You are a geek, right? Have a better day in your React life ;) recoiljs.org/docs/introduct… jotai.org *I respect Recoil 🫶
Hi, React Router and @jotaijs folks. I made this sample that tries to use store.set() in Route.loader by Jotai v2 RFC. So clear to understand when to initialize atoms at navigating other pages. The sample code is here codesandbox.io/s/react-router…
課題はserver/client間の型とバリデーション。真実とすべきはserverなのでreq.bodyのバリデーションをzodで、後はres.send部分をreturnで書く🎫 あとは"type"をexportしてclientで使えば、clientでバリデーションすることも二重で型定義することも不要。 もちろん補完も効く。
分かっててやってる人以外はここに座りなさい、怒らないから、ね 😌
TypeScriptでタイプガード書きまくるの辛いし不要な物が交じる可能性もあるので完璧ではない。 そんなときのzod先生。スキーマ定義したらパーサーも型も手に入って不純物は取り除いてくれる。惚れる。 const user: unknown のところを User でキャストする悪い子も素直になれるはず。
💎💎💎
これを見て自分の中の靄が晴れてきた感じ。 Jotai / Recoil は従来のReduxのようなトップダウンな状態管理ライブラリではなくボトムアップ型。 なので一元的にまとめるような構成は哲学に反してる気がする。 Single source of truth 、巨大なstoreから切り出すのを忘れよう？ zenn.dev/8_8/articles/5…
React.useState()はcomponentのkeyが変わればリセットされる。 そう、リストじゃなくても状態のリセットにkeyが使える！ beta.reactjs.org/apis/react/use…
Jotai atom is going outside React world !! 👻 Can't believe it? Check it out for yourself 👉 WIP, but amazing and blazingly fast work, @dai_shi github.com/pmndrs/jotai/p… v2 RFC is here github.com/pmndrs/jotai/d… Sample code is here codesandbox.io/s/jotai-rfc-v2…
いやぁ、駆け出しエンジニアの皆さんも大困惑のNextjs v13ですな😂 React始めるのに際してCRAの代わりにNext使う流れになってきてこれだし、チュートリアル終わったらノーマルすっ飛ばしてハードモードって感じ。 日本語記事を頼りにするしか無い人達は2歩も3歩も出遅れる・・ beta.nextjs.org/docs/rendering…
Reactで大きな変化が。こりゃあ嬉しい。 github.com/reactjs/rfcs/p…
Let's get help from TanStack/react-query Query to have a cache feature. (Of course, as well as other powerful features) Using the integration is recommended than using Jotai core only, now. 🔳 codesandbox.io/s/jotai-async-… 👻 jotai.org/docs/integrati… ⚛️ tanstack.com/query/v4
Need cache? One of the easy ways is to use atomFamily. #React #Suspense with #Jotai 🔳 codesandbox.io/s/jotai-async-… 👻 jotai.org/docs/utils/ato…
Hi, folks. If you don't use Jotai and you are a Redux user, I hope this CodeSandbox helps you to have a chance to know what Jotai is.⚛️ #react codesandbox.io/s/redux-essent…