napochaan.com を作りました。 ひそなさんに書いていただいたイラストを大きく出してアニメーション多めな HP にしました。 napochaan.com を作りました。 仕様技術 ダークテーマ・ライトテーマ対応、a11y 対応をした ダークテーマ・ライトテーマ対応 a11y …

@apollo/client でも suspense したい！ React18 がでたし、loading, data という関係ともおさらばしたい。でも @apollo/client は suspense に対応してない..... ちょっと困ったので作りました。 github.com 以前作成したライブラリと @apollo/client を併…

Observable から suspense でデータを取得するライブラリ作った firestore や websocket など変化したデータを watch することができる際に有効になりそうなライブラリです。 npm https://www.npmjs.com/package/@naporin0624/react-flowder github https://…

Next.js と Babylon.js とwebGL が全く分からない俺 分からないので動かしたかった．バンドラーとして Next.js つかったら next.config.js 書かなきゃ動かなかったので備忘録的に文字に起こしておきます． Babylon.js を動かす babylonjs で npm ライブラリ…

いつもTSのPlaygroundで作ってるなぁと思うやつをメモする 下に書いてあるやつすべてplaygroundで実行しているやつ www.typescriptlang.org splitの型定義 // 文字列を受け取って受け取ってその文字列をDelimiterでsplitする型 type Split<T, U extends string> = T extends strin</t,>…

Array.prototype.sortにわたすorder関数の型定義 Playgroundはこちらいろいろ触ってみてください。 www.typescriptlang.org 文章 sortにわたすorder関数を配列の要素がネストしているオブジェクトだったとき即時関数で書かなきゃいけないのが辛いというのが…

flowからTypeScriptへ ts-migrateをつかう 新しく作るページをts化して参照するモジュールにd.tsをかく ts-migrateを使う これで倒せるなら最高だが、テストを書いてないと主要なページすべてを動作確認する必要がありそう。ASTで機械的に変更すると言っても…

Normalizrの型定義を(制約付きで)書いた normalizrのhelper型です。こうなってくれているといいなぁと思って書きました。 読むのめんどくさいよ〜って人はサンプルを用意したのでcodesandboxか手元の環境でガチャガチャいじってみてください https://github.…

firebase難しくない？ Nextjs(ssr)のデプロイ環境を作ろう思って挑戦したのですが，時間だけとかして日曜日が終わりそうなので日課にしたいブログを書くことにしました． 気分転換です 理想型 firebase emulatorを使う&&Nextjsでの開発環境上での最高体験を…

aspidaとNestJSを使って気持ちがいい開発がしたい！したくない？ 今回もお試しリポジトリが存在します．NestJS x aspida x Reactの環境で作っています．是非お試しください github.com なにするの？ NestJSはにはSwaggerModuleがありOpenAPIでしゃべることが…

DIVでもInput要素のblur的なことがしたい！ InputElementは別のところを触るとBlurイベントを発火してフォーカスが外れます． developer.mozilla.org MDNのサイトで動作は確認できるかと思います． これをDIV Elementでもやりたいなぁと言うのが今回の議題で…

Lottieで消えちゃうCheckBox作るぞ！ コードの全体像 index.tsx 最後に わかっていること Lottieで消えちゃうCheckBox作るぞ！ こういうのを作りたい https://naporin0624.github.io/napoblog-assets/#/ 今回はこちらのチェックボックスアニメーションを使わ…

リストで表示したものにトランジションを適用したい コードを比較 変な挙動をするコード 想定している動きをするコード 原因 styles.ts リストで表示したものにトランジションを適用したい こんなやつをやりたかった なんかこうなる コードを比較 styles.ts…

NestJSにwebpack-dev-middlewareを組み込む 2020-04-09追記 ライブラリとして公開しました www.npmjs.com 遅刻しました．今日は25日．クリスマスです．名取の配信見てたら24日もいつのまにか終わっていました． 23日目は研究室の実験があり，徹夜でNestJSを…

NestJS & TypeORM & Webpackで優勝したい！ NestJsはmoduleが膨れ上がっていくと, ts-nodeだと起動がめちゃくちゃ遅くなって開発時にすごいストレスになります。それを解決できるのがHMRで、webpackです qiita.com はじめに結論 github.com entities: getMet…