JavaScript

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

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

起きたこと react-scripts buildがメモリ不足でFailedする。 対策 package.jsonのscriptsにあるbuildをreact-scripts --max_old_space_size=4096 startに変更する。 参考 github.com

YouTube埋め込みプレーヤーのあるページでhistoryに同一URLがpushされる

何が起こった? YouTube埋め込みプレーヤーを使っているページで同一のURLがhistoryにpushされていた。つまりページAからYouTube埋め込みプレーヤーのあるページBに遷移し動画の読み込みが完了した後に「前のページに戻る」操作をしてもそこは同じページBで…

APIモードのRailsでActive StorageとS3を使ってバックエンド、Reactでフロントエンドを実装したい

作り終わってから思い出して書き始めたので抜けがあるかもしれない バックエンド(Rails API) APIモードでRailsアプリを作ってCORSの設定とかをいい感じにする aws-sdk-s3とactive_model_serializersをGemfileに追加してbundle install S3にバケットを作っ…

Reactでimg要素のwidth, heightを取得

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

ReactでHOCしててちょっとはまったこと

withHoge()でWrapする処理をrenderの中で毎回行ってしまっていてinputのonChangeでrenderが呼ばれるたびにフォーカスが外れてしまっていた。 See the Pen HOC000 by to_m0ya (@gazimum) on CodePen.

Hyperappのボイラープレートを作った

概要 Hyperapp Hyperapp Router Picostyle Atomic Design を使用するボイラープレートを作った Repository github.com デモ hyperapp-boilerplate 展望 TypeScript Test axiosを使った簡単なAPIコール を追加したい

<textarea>においてctrl+enterでvalidate付きform.submit()

したかったこと <textarea>においてctrl+enterでform.submit()させたい ただしrequiredとかのvalidateも効かせたい やりかた 送信させたいときにform.reportValidity()でvalidateしてから form.submit()する サンプル 参考文献 developer.mozilla.orgdeveloper.mozilla</textarea>…