qiita.com const englishList = ["aaa", "bbb"] as const type English = typeof englishList[number] こうするとenglishList自体も配列としてfilterとかでチェックするとかに使える ところでtypeof englishList[number]って書き方ってなんなのだろう…ちょっ…
まずfsってなに qiita.com なるほどファイルを扱うためのモジュールで、Node.jsが提供しているモジュールなのでわざわざインストールする必要とかはないらしい。自分はMarkdownのファイルを読むために使っていた。 で、本題。これをNext.jsで使う際に、 Modu…
と、レビューで言われまして。 例えば const List = ['first', 'second', 'third'] ['a','b','c'].map((item, index) => ( <Text>List[index]</Text> ) みたいな。 で、これはなぜか。 理由としては 堅牢性が低い 保守性が低い 静的解析しにくい だと。 つまるところ、ind…
necomesi.jp 一緒にプロジェクトやってる人がこんなの見つけたーと話していた。 受託のWeb開発とかだとサーバーサイドとの兼ね合いもあり自由にReactを使うとか使って宣言的に出来ず、どうしても命令的にやらざるを得ないことはある。そこで見つけた上記の記…
qiita.com 上記の諸々をmasterとdevelopに設定したい。 で、どうするんだっけなーと。 stackoverflow.com これが参考になりました。 [master,develop]* これでいけました。
www.npmjs.com github.com これ便利。 import { Element, Link as ScrollLink } from 'react-scroll' <ScrollLink to="section" smooth={true} duration={500}> TextText </ScrollLink> <Element name="section"> Section </Element> これでScrollLink to="section"を押下時にスムーススクロールでElement name="section"まで遷移してくれる。 import { anima…
github.com （とかの約物を半角に出来るフォント。便利。 で、10日前に3.4.0がリリースされました。マイナーアップデートですね。 なので開発環境もアップデートしてみる…と、なんとそのままでは動きません。おそらく、Scss使ってるならCSSがビルドできなく…
iOSのSafariはブラウザ開いた際に出るステータスバー分、タップできないエリアが存在する。ここの領域はステータスバーが出ていないときはタップが無効になる。 また、iPhoneX以降はセーフエリアというのが存在する。周囲のノッチの周囲あたりがセーフエリア…
って思うじゃないですか。で、探したら qiita.com あーこれ！！まさにこれ。 だいたい修正前と修正後をスクショして貼るとか、テーブルにして横並びに出来ると見やすいし便利。
よく要素をopacityで消したりすると思うのですが、opacityで消すと要素は残るのでタブで移動とかするとカーソルがあたってしまうのです。なので、アクセシビリティ気にする必要あるのであればopacityでは厳しい。 なので、その場合はカーソル当たらない状態…
developer.mozilla.org matchmediaありますよね。上記を見てIE11も対応しているので油断していました。 window.matchMedia(`screen and (max-width: 768px)`).addEventListener('change', () => { }); 上記のようにmatchmediaの閾値を検出するのをaddEventLi…
qiita.com この記事が参考になります。 throttleを使うと、何秒ごとにイベントを起こす、のように出来ます。 this.elms.forEach(elm => { window.addEventListener( 'scroll', throttle(() => { elm.style.left = `-${pageXOffset}px`; }, 20) ); }); 上記の…
qiita.com 上記の記事が参考になります。 qiita.com のように、高さ取得したかったらoffsetHeightとか使うと思いますが、これ丸めちゃって整数になるんですね。まあだいたい計算出来れば良いならそれで良いのですが、 tech.motoki-watanabe.net でparseFloat…
qiita.com const elm = document.querySelector('.elm'); const style: CSSStyleDeclaration = window.getComputedStyle(elm); const lineHeight = style.lineHeight; のように、して、実際に計算された後のCSSの値をとってこれます。 こちらの結果は21pxの…
あー PCは Google Chrome ですか？だとすると、時間表示(タイムゾーン)がおかしくなるケースが発生しているとか…(原因調査中?)https://t.co/oGtvIR73ANだとすると、他のブラウザか端末で購入しておくのもよいかな…と。— PKS|通りすがり (@JustApasserby00) 2…
