今さら感はありますが、Gridを試してみました。 まずは基本形 See the Pen grid layout basic by misumi (@mismith0227) on CodePen. grid-template-areasでエ[…]

React.js

HOCをつかっていたけど、childrenをFunctionとして渡すことで同じようなことができるらしい。 参考記事 Function as Child Components Reactのfunction as childとは何か Reac[…]

flexboxの子要素のさらに子を三点リーダーさせたい時にうまくいかなかったのでメモ 上のパターンは簡単ですが、下のパターンは少し曲者。 See the Pen flexbox-santen by misumi (@mismith0227)[…]

vuejs

仕事ではひたすらReactなので、他の技術も触ってみようと思いVueをはじめてみました。 Vueはvue cliを使うと楽チンらしい。 vueのプロジェクトを始めるにはcreateとinitコマンドがあるそうです。 いまいち違いを書いてくれ[…]

hugo

Hugoではhugo serverでローカル環境が立ち上がりますが、開発中はGoogle アナリティクスの計測を除外したいという場合があると思います。 アナリティクスでも設定できそうですが、Hugoのタグでも除外することができます。 以下の[…]

building

小ネタですがちょいちょいやるのでメモ 複数人でgitを使って、作業する時にまずコミット・プッシュして、PR作っておくという手順をする場合に使うやつです。 通常は何か変更を加えないとコミットできないですが、以下のコマンドを打つと何も変更してな[…]

React.js

recomposeはreactのコンポーネントに状態を持たせたりいろいろできるみたいです。 第一引数がstate名、第二引数がfunction名、第三引数が初期値です。 これでいろいろと操作できます。 参考 https://qiita.co[…]

css3

cssのfilterにdrop-shadowがあるのは知ってたんですが、box-shadowと同じじゃんと思ってました。 が、実はかなり頭いい奴。以下のcodepenの通りです。 See the Pen shadow by misumi ([…]

building

flow-typedを導入して外部ライブラリが引っかかる時にやるやつ。 まずはflow-typedコマンドを使えるようにしときます。 こんな感じでライブラリ検索します。 そしてflow-typedのバージョンと該当ライブラリのバージョンを指[…]

React.js

react-autosuggestを使ってサジェスト機能を作る機会があったのでメモ react-autosuggest 大体はこちらの記事を参考にできました!ありがたい。 react-autosuggestでサジェスト(Autocomple[…]

React.js

Reactv16からの目玉機能であるFragmentsの書き方メモ書き 以前はrenderではコンポーネント内にコンポーネントを含めることはできるけど、ルート要素は1つしか返せない、つまり以下のようはできませんでした。divとかなんかでくく[…]

海で作業

こちら小ネタですが、GitHubのReadmeにライセンスやビルドが成功してるかどうか、使ってる技術が何かなどをバッジをつけたりしますよね。 そのバッジが一覧でまとめられてるサイトがあります。 https://shields.io/ このサ[…]