prog_note_2020/12/13

今日学んだこと

SafariのDevToolを使った

iPhoneと優先でつないでDevToo優先使うこともできた！

https://qiita.com/nanarya/items/8d01dfb4de434e7b8acc

StyledComponenntにPropsを渡すときのTypeScriptの書き方

こんな感じに書けばOK！

const Footer = styled.div<{ isBottom: boolean }>`
	// CSS Property
`

<{ isBottom: boolean }>の位置が重要ね.

https://qiita.com/taneba/items/3bff0c5a1b0ebed36b5b

Next.jsでページ遷移時にスクロールトップ

NextjsのLinkComponentにデフォルトの機能であるので,なるべくそれを使ったほうが良い.

https://nextjs.org/docs/api-reference/next/link#disable-scrolling-to-the-top-of-the-page

それ以外は自前でカスタマイズしないとダメそう.

Reactでスクロールを検知

これが爆死した.未達成.

window.innerHeight,window.scrollY,document.body.offsetHeightなどを学んだ.

スクロールが最下位置の場合にイベントを発火させるコードは書けたけど,iOSのSafariのtouchイベントの仕様で爆死.

https://www.it-swarm-ja.tech/ja/javascript/iphone-ipad用のjavascriptスクロールイベント？/969612083/

http://blog.aqutras.com/entry/2016/06/20/210000

ヘッダーやフッターでposition: fixed;使う際の注意点

position: fixed;
bottom: 0;
left: 0;

などと書くと,幅をいい感じにすることができないので,left: 0;を消してwidthを設定する必要がある.

CSSで背景をぼかしたい

backdrop-filter: blur(12px);

これだけでOK

https://note.com/psephopaiktes/n/n5cef19fdb8c4

placeholderの文字の色だけを変える

::placeholderをCSSのセレクタにすればOK

https://code-kitchen.dev/css/placeholder/

React Scrollというものを知った

使ってないけど,シンプルで良さそう.

使ってない理由はスクロール位置の取得ができないから.

https://github.com/fisshy/react-scroll

Chromeのタブの左右切り替えショートカット

control+tab

---

所感

LINEのようなチャット画面を作ることに手こずっている.

scrollに応じて入力エリアが常に下部にあるようにしたいのだが,デバイス間による挙動が違ってうまくいかない.

そして,一番の心のわだかまりは,

環境になれないのか,

十分な食事や睡眠の質の調整ができていないからか,

ここらが凡人の頭の限界なのか,

わからないが,パフォーマンスを発揮できない.

はたまた,これは劣等感による錯覚なのか,

不安の嵐による心の乱れなのか.

わからない.わからないぞ.