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に応じて入力エリアが常に下部にあるようにしたいのだが,デバイス間による挙動が違ってうまくいかない.
そして,一番の心のわだかまりは,
環境になれないのか,
十分な食事や睡眠の質の調整ができていないからか,
ここらが凡人の頭の限界なのか,
わからないが,パフォーマンスを発揮できない.
はたまた,これは劣等感による錯覚なのか,
不安の嵐による心の乱れなのか.
わからない.わからないぞ.
Discussion