青いやつの進捗日記。

メモとしてべんきょうのしんちょくをかいていきます。あとで自分が検索しやすいもん

yakuhanjp、3.3→3.4で地味に破壊的変更があった scssのパスの指定が変わっておるよ

github.com (とかの約物を半角に出来るフォント。便利。 で、10日前に3.4.0がリリースされました。マイナーアップデートですね。 なので開発環境もアップデートしてみる…と、なんとそのままでは動きません。おそらく、Scss使ってるならCSSがビルドできなく…

ページ下部にトップに戻るボタンとか設置する時に気をつけるべきこと。iOSでセーフエリア、Safariで下部のステータスバー

iOSのSafariはブラウザ開いた際に出るステータスバー分、タップできないエリアが存在する。ここの領域はステータスバーが出ていないときはタップが無効になる。 また、iPhoneX以降はセーフエリアというのが存在する。周囲のノッチの周囲あたりがセーフエリア…

GithubのPullRequestで画像を小さく貼りたい…

って思うじゃないですか。で、探したら qiita.com あーこれ!!まさにこれ。 だいたい修正前と修正後をスクショして貼るとか、テーブルにして横並びに出来ると見やすいし便利。

Visibility:hidden; と display:none; の、アクセシビリティ的な違い

よく要素をopacityで消したりすると思うのですが、opacityで消すと要素は残るのでタブで移動とかするとカーソルがあたってしまうのです。なので、アクセシビリティ気にする必要あるのであればopacityでは厳しい。 なので、その場合はカーソル当たらない状態…

IE11やSafariでmatchMediaのaddEventListener('change' は効かない

developer.mozilla.org matchmediaありますよね。上記を見てIE11も対応しているので油断していました。 window.matchMedia(`screen and (max-width: 768px)`).addEventListener('change', () => { }); 上記のようにmatchmediaの閾値を検出するのをaddEventLi…

lodashでイベントを間引く。イベントの終了後にしたり、イベントを何秒ごとに区切ったり。

qiita.com この記事が参考になります。 throttleを使うと、何秒ごとにイベントを起こす、のように出来ます。 this.elms.forEach(elm => { window.addEventListener( 'scroll', throttle(() => { elm.style.left = `-${pageXOffset}px`; }, 20) ); }); 上記の…

JavaScriptで高さを小数点まで含めて取得したいときに

qiita.com 上記の記事が参考になります。 qiita.com のように、高さ取得したかったらoffsetHeightとか使うと思いますが、これ丸めちゃって整数になるんですね。まあだいたい計算出来れば良いならそれで良いのですが、 tech.motoki-watanabe.net でparseFloat…

getComputedStyleでスタイルを取得し、parseIntやparseFloatで数字にする

qiita.com const elm = document.querySelector('.elm'); const style: CSSStyleDeclaration = window.getComputedStyle(elm); const lineHeight = style.lineHeight; のように、して、実際に計算された後のCSSの値をとってこれます。 こちらの結果は21pxの…

WindowsのGoogleChromeでタイムゾーンのバグあったみたいだけどもう治ってるっぽい。

あー PCは Google Chrome ですか?だとすると、時間表示(タイムゾーン)がおかしくなるケースが発生しているとか…(原因調査中?)https://t.co/oGtvIR73ANだとすると、他のブラウザか端末で購入しておくのもよいかな…と。— PKS|通りすがり (@JustApasserby00) 2…

Safariでのバグ。z-indexとtransformの組み合わせにおるz軸での戦い

Safariで、 .layer1 { transform: rotateX(45deg) } .layer2 { z-index: 1; } rotateXさせている.layer1の上に.layer2を乗せたい時。 Chromeなどでは問題なかったのだが、Safariではなんと、.layer1が上に来る。 どうやら、Safariではz-indexよりtransformの…

Reactで数字入ってるかを条件に&&で出し分けようとすると、0が描画される→なぜなら0はfalseだから…!

どういう状況の話かと言うと、 num && ( <Text>{list[num]}</Text> ) のように、型がnumberの変数numが入っていたらlist[num]を描画したい、という状況。 で、numに1とか入ったら意図通り<Text>list[1]</Text>が描画されるのだけど、numに0が入ると、<Text>list[0]</Text>ではなく、なぜか0だけ描画…

yupでnumberだけどnullも許す感じでバリデーションしたいとき

cpoint-lab.co.jp React Hook Formとyupでフォームにバリデーションかけてます。 で、問題は、inputのtypeがnumberで、yupではnumber or nullでバリデーションかけたいとき。 yup.number() yup.number().nullable() だと、数字はいけますが、nullが入りませ…

【メモ】仮想スクロールってものがある

web.dev VirtualScrollはパフォーマンスめちゃ上がるらしい。けどなんだ仮想スクロールって。 qiita.com つまり、見えている範囲だけスクロールイベントを起こす、のようなものらしい

removeEventListenerでscrollイベントを消す

qiita.com teratail.com scrollイベントを動かしたいが、目的達成したら消したい。で、また目的が出来たら動かしたい。 const closeFunc = () => { isOpened = false; // NOTE: scrollイベントを消す target.removeEventListener("scroll", closeFunc); }; t…

TypeScriptでinstallしたのにパッケージが見つからない…→型定義ファイルを入れる必要

www.npmjs.com これを入れたのにTypescriptで import ScrollBooster from 'scrollbooster' としても、そもそも'scrollbooster'が見つからない。 どうやら、型定義ファイルがなかったから、でした。 qiita.com www.npmjs.com 今回は@typesから入れられたので…