GatsbyJS製のブログをダークモードに対応させる
GatsbyJS 製のこのブログをダークモードに対応させたので実装法を書く。 ダークモードの対応は基本的には以下のメディアクエリで各テーマ毎の css を書くだけでいい。 コンポーネント毎に対応していくのは面倒なので 各プロパティ値を css valiables…
2020/03/08Angularでdisplay switch用のコンポーネントを作成する
この記事に影響を受けた こんな感じで使いたい 実装方針としては条件判定用のコンポーネントを作りng-contentで表示するコンポーネントを外から指定出来るようにする。 ReactでいうChild Componentと同じ。 サンプルでは@angular/flex-layout…
2019/07/18Intersection Observerを使用した画像のlazyLoadのサンプル
※ iPhone だと iframe の挙動がおかしいので PC で確認してください(Android は未確認) 上記の参考
2019/05/10graphql-rubyでrange fieldを実装する
はじめに graphql-rubyを試していて created_ad が 2019-01-01 ~ 2019-05-01 のデータが欲しいとなった時にどう実装するか悩んだのでメモ。 graphql-ruby の使い方自体は特に説明しません。 尚、version 1.…
2019/04/30Storybook for Angularで~(チルダ)のpathを解決する
Storybook for Angularを使用していてsassのimportで~(チルダ)を使うとpathを解決できずにエラーが出たので解決法のメモ 検証した際のversion Angular 7.2 Storybook 5.0.5 とりあえずng new…
2019/04/05JavaScriptでRubyのeach_sliceと同じことをしたい
こうしたい 残念ながらArray.prototypeにはeach_sliceと同じ動作をするメソッドが定義されてないので自分で実装する。 再帰(破壊的) の要素数が1600…
2019/02/19minimagickのソースを読む
※ 記事執筆時点のversionは4.9.2です。 minimagickの内部の動作の理解のためにソースを読んでみた。 今回はminimagickのクラス構成と役割を調べてみる。 以下クラス構成 MiniMagick Configuration Image Info Shell…
2019/02/12ReactでApexChartsを動かす
githubのトレンドを眺めていたら良さげなチャートライブラリApexChartsを見つけたのでReactで使ってみた。 今回は公式のCreating Your First JavaScript Chartのサンプルを参考にする。 ApexCharts…
2018/08/01フロントエンド周りで読んだ技術書まとめ
初めに フロントエンドを学習したときに参考になった技術書をピックアップしてざっくり紹介する。 サービスを作るのであればこの辺は一旦後回しでいいと思うが、サービスをスケールさせたい時に知っておいて損はない技術書も紹介してるので気が向いたら是非読んでみてほしい。 HTML5/CSS…
2018/07/31GatsbyJS + Netlifyで技術ブログを作った
技術書を読んで写経したりライブラリを試したりはしていたものの 外部にアウトプットしていなかったので作った。 ホスティングサービスは技術ブログの運用なら無料で済みそうなNetlify…
2018/07/18