chocotakaの日記

日々技術的な事で学んだ小さな事をを自分なりに書いていきます

sublimeTextで小文字⇄大文字

エディターはsublimeTextを愛用してかれこれ5年以上経つのですが、ずっと無料版で使っていました。

そして購入しました。無料版いままでありがとう。有料版これからよろしくお願いします。

せっかく購入したので意欲的にショートカットキーを覚えようと思いました。

今回意外と使うコマンドだけど今まで使っていなかった、小文字⇄大文字の変換処理です。

f:id:chocotaka:20170802200132g:plain

選択した範囲で、cmd + K → Uで大文字にcmd + K →Lで小文字になります。

これも体に覚えさせれば作業スピードUPしますね。

sketchで色をすぐ調べる方法

sketchである要素の色を調べたい時に、レイヤーからその要素をクリックしていって調べる方法もありますが、階層が深い場合手間になります。

そこで簡単な方法で、ctrl + cでカラーの抽出が可能になります。

f:id:chocotaka:20170802002343p:plain

このようにカーソルが丸い円になりその範囲内にある色を表示してくれます。

テキストをCSSで縦書き表示

テキストは基本横書きで、文字は左から右へ表示されます。

縦書きで表示する案件がなかったので、縦書きで表示する場合はどうしたらいいか調べました。

writing-mode これをcssで定義すれば縦書きになります。

writing-mode: vertical-rl

なら右から左へ

writing-mode: vertical-rl

なら左から右への表示になります。

https://caniuse.com/#search=writing-mode

補足

ChromeSafariは右詰め、Firefoxは左詰めで表示されてしまうので気をつけてください。

コミットログを修正

こんばんは、chocotakaです。

gitのコミットログは、自分で過去のコミットを参照するときにも大事ですし、他の人がチーム加わった時にもログを辿るために大切な要素になります。

先ほど作業した内容をコミットしたときに、内容が不十分だったり書き間違えた時に直したい場合は

git commit --amend でコミットログを修正することができます。

またコミットメッセージだけを修正したい場合は

git commit --amend -m "chocotaka"

とすればコミットメッセージだけを修正することが可能です。

axiosでbasic認証を設定をする

axiosでget処理やpost処理をする時にbasic認証を設定をすることができます。

axios.get('/user?ID=12345', {
    auth: {
      username: abcd
      password: 1234
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

のように設定する事が可能ですが、get処理やpost処理の数が増えるたびに同じ設定をするのはスマートじゃありあません。

ので下記のように変数に入れてあげて、require or importしてきたaxiosに設定をしてあげるとデフォルトでauth設定がされている状態でaxiosを使う事が出来ます。

const axios = axios.create({
    auth: {
      username: config.BASIC_AUTH_API_USER_NAME,
      password: config.BASIC_AUTH_API_PASSWORD
    }
  });

auth設定以外にも共通で設定しておくべき要素があれば同じように設定して使う事ができるのでおすすめです。

brotliについて

先日紹介したzopfli

今回はさらに圧縮率が高いbrotliについてです。

https://github.com/google/brotli

brotlizopfliと同じくGoogleが開発した圧縮アルゴリズムです。

自分の中ではzopfliの上位互換??のような印象。

zopfliでの圧縮率は3〜8%程と先日お話しましたが、brotli20~30%ほど?の圧縮率になっています。

圧縮の処理速度はzopfliと同じぐらいです。

ただ1つの気をつけるのは対応ブラウザが限られていること。

Can I use... Support tables for HTML5, CSS3, etc

対応していないブラウザもちらほらあるので、brotli/zopfli両方設定するようにするのが望ましいと思われます。

zopfliについて

zopfliはGoogleが開発した圧縮アルゴリズムです。

よく使われているgzipと比較して、圧縮率は3〜8%程度向上するみたいですが、圧縮時間がそれなりにかかってしまうのが欠点です。

zopfliは圧縮処理を何度も繰り返します。回数が多い程圧縮率は上がるみたいですが、数バイトの差みたいなので何百何千とやる必要はないと思います。

実行オプションで圧縮回数指定ができます。デフォルトは15回のようです。

圧縮回数が大きいほど圧縮率が高くなるはずですが、あまり変わらないようです。

圧縮回数のテストデータがでているので参考にしてみてください。

blog.jxck.io

圧縮可能な静的ファイルや、ほとんど変化がないPNGファイルなどに使用するのが最適だと思います。