SPAを実装したことのある人なら誰もが一度はつまづく画面遷移時のスクロールポジション。 自分も「このタイミングでこの位置にいてほしいのに。。。」と思う事が多々ありました。 特にブラウザバック時にいたスクロールポジションを保持している時の対応。 …

webサービスでよく見るカルーセル。 普通にスクロールするモジュールとしても利用されてると思います。 例）Amebloから iPhoneでスクロール時にCSSで慣性を簡単に持たせる事ができる。 -webkit-overflow-scrolling これを設定するだけです。 あるのとないの…

git や npm のコマンドをよく使うものの、特にカスタマイズせずそのまま使っていました。 alias に登録するとすごい省略できて便利でした！ .aliases ファイルを作ってそこに記述するだけです。 例えば alias g='git' とすると 今まで git commit だったり g…

ロゴだったり、ツイッター・フェイスブックのアイコンを表示する時に、svgを使うと便利です。 <svg> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="filePath#svgId"></use> </svg> filePath のところに参照するsvgファイルををセット。（例：sample.svg） svgファイルのサンプル <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> </svg>

nodeをあまり触った事が無かった自分が 現開発中のサービスのexpress内サーバサイドレンダリングをさせる実装をしていました。 が、開発初期段階にレンダリングが２回走っていた。。。 原因はfavicon を設定していなかったためでした。 app.get('*', (req, r…

nodeでのUAで判別して何か処理を分けている時にハマったので共有します nodeでモバイルかPCかの判別をしたくて、 express-useragent や ua-parser 等を使ったりして実装をしていました。 ユーザ体験の向上のために、CroudFront を経由してキャッシュし、レス…

cssで @font-face を設定する場合の方法を学びを共有します。 文字の太さの種類でフォントを設定する場合 @font-face { font-family: "Noto Sans CJK JP"; font-weight: 400; font-style: normal; src: local("Noto Sans CJK JP"), url(NotoSansCJKjp-Regula…