javascriptのイベントハンドラはevent.preventDefault()スクロールを止めてしまう事があります。 なのでイベントハンドラの処理が完了するまでスクロールする事ができずに、ユーザビリティのて低下につながってしまいます。。 document.addEventListener('to…

Node.jsでは例外処理が発生するとデフォルトでは標準エラー出力にスタックトレースが出力され、プログラムが停止してしまいます。 Node.jsは１つでもエラーが発生してしまうと停止してしまいますので、予期せぬエラーにも対応できるようにしておくのが望まし…

githubでプルリクエストを送る時にどのような変更をしたのかの説明を記述すると思います。 そこでプルリクエストをするたびに毎回記述するのはめんどくさいですよね。 そこでリボジトリ直下に.githubフォルダを作りその中にPULL_REQUEST_TEMPLATE.mdを設定し…

今までgitでのコミットログをまとめる事をやっていなかったため、rebaseコマンドを使ってきませんでした。 最近使うようになったので書き溜めておきます。 git rebase -i HEAD~~ ~ の数でどこまでのコミットを扱うかの範囲指定します。 上記のコマンドだとHE…

:rootに定義する :root { --theme-color: #FFF } というように :root 擬似クラスに --theme-color という変数名で #FFF が定義する事ができます。 あとはここで定義された変数は .text { color: var(--thema-color); } として var(--theme-color) として使用…

npm install コマンドを叩いて package.json で管理されている modules 達をインストールします。 typescript を使っているのですが、バージョン2.4~ に上げてしまうとrxjs との互換性がまだできていなくエラーになってしまいます。 ローカル環境での typesc…

Node.jsの開発環境によってBasic認証を設定する場合があると思います。 例えばAPIにBasic認証を設定する時に、javascriptで定数にそのまま入れてしまうと、コードにそのまま吐き出されてしまうのでバレてしまい、Basic認証をしている意味がありません。 そこ…

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…