material-ui-pickersと@date-io/date-fnsでエラー「Uncaught RangeError: Format string contains an unescaped latin alphabet character `n`」

@date-io/date-fnsのv2系をmaterial-ui-pickersと使うとエラーを吐くのでv1.3.13にダウングレードしなければいけないらしい。

github.com

AdSenseの広告が含まれたReactコンポーネントをレスポンシブに非表示にしたい

問題

AdSenseではレスポンシブ広告ユニット以外でdisplay: none等を利用して広告ユニットが見えなくなるようにしてはいけない。[1]

よってメディアクエリを使ってdisplay: noneで広告を含んだReactコンポーネントの表示・非表示をコントロールするやり方はやってはいけないことになる。

解決方法

いい感じのブログ記事を見つけた[2]のでそこでおすすめされていたreact-socks[3]というライブラリの実装を確認してみた。

ウィンドウがresizeされる毎に幅をいい感じに取得してくれている[4][5]ことが分かった。

これならdisplay: noneを使わなくても広告ユニットを含んだコンポーネントを非表示にできる。

追記

development環境だとエラーなく動くのに、なぜかproduction環境ではimportするだけでエラーを吐くようになってしまう。 普通にreact-responsiveを使うことにした。

参考

[1] support.google.com

[2] hackernoon.com

[3] github.com

[4] https://github.com/flexdinesh/react-socks/blob/1a069e999b95e32fc48c8f473d9fecb925c7e58a/src/Breakpoint/BreakpointProvider.js#L34

[5] https://github.com/flexdinesh/react-socks/blob/1a069e999b95e32fc48c8f473d9fecb925c7e58a/src/Breakpoint/breakpoint-util.js#L85

NumPyのndarrayからPyTorchのTensorへ変換

arr = np.arange(3)とする。

torch.Tensorかtorch.FloatTensor

torch.Tensor(arr)

torch.tensor()

  • 元のdtypeを受け継ぐ。
  • dtypeを指定することもできる。
  • コピーを作る。
torch.tensor(arr)
# or 
torch.tensor(arr, dtype=float32)

torch.from_numpy()

  • 元のdtypeを受け継ぐ。
  • メモリをシェアするので、元のarrayの値を変更するとtensorの値も変わるし逆も成り立つ。
tensor = torch.from_numpy(arr)
print(arr, tensor)
# [0 1 2] tensor([0, 1, 2])

arr[0] = 3
print(arr, tensor)
# [3 1 2] tensor([3, 1, 2])

tensor[1] = 4
print(arr, tensor)
# [3 4 2] tensor([3, 4, 2])

参考資料

https://pytorch.org/docs/stable/tensors.html?highlight=from_numpy

https://pytorch.org/docs/stable/sparse.html?highlight=floattensor#torch.sparse.FloatTensor

https://pytorch.org/docs/stable/torch.html?highlight=from_numpy#torch.from_numpy

stackoverflow.com

Lancersでアンケート作るときに気をつける事

  • CSV内での変数の順番とHTML内の変数の出てくる順番を揃える。
  • CSVもHTMLも文字数制限がある。
  • HTMLの機能の一部が使えない。
  • 一度アップロードしたCSVファイルをダウンロードすることはできない。
    • 結果のCSVには元のCSVが含まれているのでそこで確認できる。

CRAのビルドがメモリ不足で落ちる問題の解決方法

起きたこと

react-scripts buildがメモリ不足でFailedする。

対策

package.jsonのscriptsにあるbuildをreact-scripts --max_old_space_size=4096 startに変更する。

参考

github.com

CRAで作ったプロジェクトでTwitterCardを表示させるにはrobots.txtを変える

何故かCRAで作ったデフォルトの/public/robots.txtが以下のようになっているのでCard Validatorで何回試してもTwitterCardが表示されない。

# https://www.robotstxt.org/robotstxt.html
User-agent: *

以下のように変更したら直った。

# https://www.robotstxt.org/robotstxt.html
User-agent: *
Disallow:

 

スクロールさせたいけど中身がずれてる

display: flex;
justify-content: center;

を外側の要素に指定するとずれるので

display: flex;
justify-content: flex-start;

にする。

See the Pen RwNZBeZ by to_m0ya (@gazimum) on CodePen.