DewyへGoogleアカウントによるログイン機能を実装した。
これまで通りsimov/grantを利用したので、基本的に流れはFacebookやTwitterのときと同じであった。
アクセストークンの取得などには上記記事が参考になった。記事が少し古く、現在のUIとやや違う部分はあったが、問題はなかった。
また、Twitterと比べ項目が多く、Facebookと違ってしっかり日本語で表示れてるので色々見ていて楽しい。今回はGoogle+のAPIを触るのみでありが、機会があれば他にも試してみたくなる。
最近ブラウザにもPush通知の足音が聞こえ始めている。
なので基礎学習は始めておきたい。
エッジな方々は既に検証を開始している様子。
ここはやはりFirefoxでも試したい。
Firefoxの実装もかなり進んでいるようで、期待大。
問題はモバイルFirefoxの普及だろう。
SassをGulp経由でWathする際に、差分ビルドを有効にするためgulp-cachedをかますのだが、そうすると@importなどで読み込んでいるファイルを更新しても読み込み元のビルドは動作しない。
これを上手く解決する方法はないかと調べたら以下の記事を見つけた。
なるほど！依存元を辿り解決を図ればいいとのこと。
これに特化したgulpモジュールがあると楽チンやんーと再調査を行うと、gulp-progenyなるものを発見。
まさに依存関係を解決してくれるよう。
1const cache = require('gulp-cached'); 2const progeny = require('gulp-progeny'); 3const sass = require('gulp-sass'); 4 5gulp.task('sass', () => { 6 return gulp.src('*.scss') 7 .pipe(cache('style')) 8 .pipe(progeny()) 9 .pipe(sass()) 10});
これでSass内でインポートしているファイルの更新も監視対象となり、ビルドが走るようになった。
ちらほらと名前を聞くようになってきたので、基礎学習を始めた。
記事は詳しく解説したものが見つかり、大変参考になった。
ツールでは有名なものでaddyosmaniが作ったcriticalが定番っぽい。
penthouseはオンラインデモもあり、ちょっと試すにはいいかも。
またちょっと古いがワザノバさんの下記記事はパフォーマンスツールを網羅的に紹介しており、見てて面白い。
バニラなドロップダウンメニューを作成中。
まぁ単純にクラスの追加・削除を制御すればいいのだが、一応参考資料を探す。
がやはり、jQueryを用いたものは多数見つかるのに対し、バニラは希少である。
今回参考になったのは以下の二つ。
表示の制御はCSSで行い、アクティブ時のオーバービューエフェクトは無し。メニュー外のクリックの際に閉じるようdocumentにもイベントを追加。
あとは最適なアニメーションを考慮すればよさそう。