概要
Angularを使ってWebフロントを実装しているのですが、その過程で便利だったChrome extensionを紹介します。
Chrome extension
Page Ruler
画面上でのピクセルを測るのに使う。デザイナーさんからPNGだけ頂いた時など。
ColorZilla
カラーピッカー。デザイナーさんからPNGだけ頂いた時など。
ただ opacity は区別できないので、それはPSDで確認が必要。
Kibanaを5.xにメジャーアップデートする際、Elastic社公式のdocker imageも用意されたのでdocker-composeでまとめて作ることにしました。
その際調べたこと、ハマったことをまとめます。
Webフォントを当てると途端にサイトが良く見えるようになりますが、一方でフォントファイルに入っている文字数が多いため、必然的にファイルサイズが大きくなってしまいます。
そこでフォントのサブセット化と呼ばれる、使用する文字だけをフォントから抽出して独自のフォントとして用意する方法があります。
5〜10MBほどあるフォントが大体数十KB程度になるので初期ロード時間が劇的に改善されます。
このfontminというツールを使用します。
続きを読むAngularにはリクエストのクエリパラメータを取得する方法として、
@Component({...}) export class MyComponent implements OnInit { constructor(private activatedRoute: ActivatedRoute) {} ngOnInit() { this.activatedRoute.params.subscribe((params: Params) => { let userId = params['userId']; console.log(userId); }); } }
というようにActivatedRoute
があるのですが、今回はその中でAPI側コールし、もしかしたらエラーが発生する可能性もあるのでfinallyで後処理を必ずさせたい、という状況でした。
そこで
this.activatedRoute.params .finally(() => { // 後処理 }) .subscribe((params: Params) => { let userId = params['userId']; // エラーが起きるかもしれないAPIコール });
としてみたところ、finallyの処理が実行されませんでした。何故でしょうか?
続きを読むAngularで出てきたfakeAsyncやwhenStableを使う時に、microtasksの話が出たのでちゃんと理解しようと調べてみました。
以下のjsのログ順はどうなるでしょうか?
console.log('script start'); setTimeout(function() { console.log('setTimeout'); }, 0); Promise.resolve().then(function() { console.log('promise1'); }).then(function() { console.log('promise2'); }); console.log('script end');続きを読む