コマンドをカスタマイズしてみました
git や npm のコマンドをよく使うものの、特にカスタマイズせずそのまま使っていました。
alias に登録するとすごい省略できて便利でした！
.aliases ファイルを作ってそこに記述するだけです。
例えば
alias g='git' とすると
今まで git commit だったり git push だったりしていたのが
g commit g push と g だけでいけちゃうんですね！
他にも色々設定すれば普段使っているコマンドでの作業が高速化されますね。
設定の仕方も考え方次第ですごいことができそうです。
svgを使ったアイコンの表示設定
ロゴだったり、ツイッター・フェイスブックのアイコンを表示する時に、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">
<symbol id="svgId" fill-rule="evenodd" viewBox="0 0 20 20">
<title>
filePath
</title>
<path d="M22 23.99c0-1.099.898-1.99 1.99-1.99h16.02c1.099 0 1.99.898 1.99 1.99v16.02c0 1.099-.898 1.99-1.99 1.99H23.99c-1.099 0-1.99-.898-1.99-1.99V23.99zm13.937 17.991v-8.765h2.39l.316-2.882h-2.706l.005-1.442c0-.75.074-1.153 1.192-1.153h1.492v-2.882h-2.389c-2.867 0-3.878 1.398-3.878 3.748v1.73h-1.788v2.88h1.788v8.766h3.578z" transform="translate(-22 -22)"/>
</symbol>
<use xlink:href="#svgId"/>
</svg>
title のところに入る文字はsvgファイル名と同じ名前にするとよいです。
例えば facebook.svg だとすると <title>facebook</title> とします。
これで表示の設定は完了です。
あとはcssで色を変えたり、width height を設定する事によってサイズの変更も可能です。
ぜひ使ってみてください。
expressでfaviconを設定していなかったために。。。
nodeをあまり触った事が無かった自分が
現開発中のサービスのexpress内サーバサイドレンダリングをさせる実装をしていました。
が、開発初期段階にレンダリングが２回走っていた。。。
原因はfavicon を設定していなかったためでした。
app.get('*', (req, res) => {})
ルーティング時の設定がこのようにしていたのもあったのだが、faviconのリクエストが入ってくるのが原因でした。
serve-favicon を使ってfavicon の設定をした所今回の問題は解消されました。
「あれ、なんでnodeで複数回実行されてるのだろう？」
という事があったらfavicon の設定をされているか確認してみるのもいいかもしれません。
CloudFrontを経由した時に起こる UserAgentへの影響
nodeでのUAで判別して何か処理を分けている時にハマったので共有します
nodeでモバイルかPCかの判別をしたくて、 express-useragent や ua-parser 等を使ったりして実装をしていました。
ユーザ体験の向上のために、CroudFront を経由してキャッシュし、レスポンスを早めるよう実装した結果、思わぬ所にハマってしまいました。
CroudFrontを経由すると、node上でのUAが書き換わってしまうのです
自分が開発している、local環境では CroudFront を経由していないので影響は無かったのですが、dev環境等で CroudFront を経由している場合、
「表示が何かおかしい。。。」という事があり、原因がなにかわからないまま数時間格闘してしまっていました。。。
CroudFront を経由していると、UAが 書き換わり
Mozilla/5.0 (Linux; U; Android 4.1.2; ja-jp; SC-05D Build/JZO54K) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30
というような、通常のUAが書き換わってしまい
Amazon CloudFront
となってしまいます。
「え、じゃあどうやってUA判別すんねん」という事になると思いますが、
CroudFront を経由した場合下記のようなカスタムヘッダが返ってくるようになっています。
CloudFront-Is-Mobile-Viewer CloudFront-Is-Tablet-Viewer CloudFront-Is-Desktop-Viewer
これらを判別する事で、正しく Mobile なのか PC なのかを判別できるようになります。
補足
一応書き変わらないようにする事も設定で可能のようですが、
"Some headers have a lot of possible values, and caching based on the values in these headers would cause CloudFront to forward more requests to your origin. We recommend that you do not cache based on the following headers: User-Agent"
いくつかのヘッダーは多くの値を持ち、それらのヘッダーの値をもとにキャッシュしているため、CloudFrontが多くのリクエストをオリジンへ転送する要因となります。私たちは次のヘッダーをキャッシュしないことを薦めます。
とのことなので、オススメは出来ません。
同じfont-familyで普通文字と太字の正しい設定方法
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-Regular.woff2) format("woff2"),
url(NotoSansCJKjp-Regular.woff) format("woff"),
url(NotoSansCJKjp-Regular.ttf) format("ttf");
}
@font-face {
font-family: "Noto Sans CJK JP";
font-weight: 700;
font-style: bold;
src:
local("Noto Sans CJK JP"),
url(NotoSansCJKjp-Bold.woff2) format("woff2"),
url(NotoSansCJKjp-Bold.woff) format("woff"),
url(NotoSansCJKjp-Bold.ttf) format("ttf");
}
normal と bold の設定はこれでOK！
フォントファイルのフォーマット woff2 woff ttf はそれぞれデバイスによって対応がバラバラなので設定しておきます。
local の指定は、ローカルにそのフォントがある場合はそちらを参照するようになります。
自分のPCにこのフォントが入っている場合は余計な処理が発生しなくなるので設定しておいた方がいいでしょう。
あとは html なり body なりに font-family で設定しましょう。
例えば
h1 {
font-weight: bold;
}
これで h1 に Noto Sans CJK JP が反映されるようになりました。
補足
@で（at-rule）書かれているのは、CSSでスタイルシートを記述するにあたっての ルールを定義 しています。
@font-face は、ダウンロードされる外部フォントを定義します。
