メモログ

💡 Personal notes about anything I'm interested in

Inner and outer display types

前回のCSS Display Module Introductionに引き続き、CSS Display Module Level 3の2. Box Layout Modes: the display property冒頭部分についてのメモ。内容を見直して、変だなと思うところは随時修正してる。

📖 続きを読む

CSS Display Module Introduction

用語的な理解を得るために、CSS Display Module Level 3 Introductionの部分を読んで簡単にメモる、というメモ。日本語訳も参考にしてる。内容を見直して、変だなと思うところは随時修正してる。

📖 続きを読む

The Web Worker's lifetime

Web Worker(以下worker)はいつ止まるのか。端的に言うと、画面遷移した時など、関連するDocumentがなくなった時に止まる。workerの実行はclosingフラグで管理されていて、このフラグがtrueになるとworkerはそれ以降の処理をしなくなる。workerのインスタンスが削除されるかどうかは仕様上では考慮されていない雰囲気だけど(ガベージコレクトされたときに削除されるのではなかろうか)、とにかく、実質的に、closingフラグがtrueになったタイミングでworkerは止まると言える。

📖 続きを読む

Convert video files with the ffmpeg.js worker

Convert screen capture to animation GIFの話でffmpegを使ってキャプチャをGIFに変えるということをした。Macだとffmpegのインストールは簡単だしその方が良いと思うけど、環境によっては難しい場合もあるだろうし、そもそもインストールしてはならない状況もあるかもしれない。そんな時にffmpeg.jsをWeb Workersで動かすのはどうだろうかと思ってやってみた。

📖 続きを読む

n^2 sort algorithms again

O(n^2)の計算量で実行するソートアルゴリズムについては、Bubble Sort in JavaScript(バブルソート)、Insertion Sort in JavaScript(挿入ソート)、Selection Sort in JavaScript(選択ソート)にて扱ったのだけど、完全に忘れてしまったので、もう一度確認する。

📖 続きを読む

Convert screen capture to animation GIF

Macの場合、Quicktime Playerのファイルメニューの「新規画面収録」から簡単にスクリーンキャプチャを録画することができる(iPhoneの場合はiPhone、iPad、iPod touch で画面を録画する方法参照)。再現性が難しいケースなどで複雑な手順を書き記すよりずっとわかりやすく動作を見せることができるのでとても便利。だけれども、動画はmov形式で保存されるので、githubのissueに貼り付ける事ができない。なので、ffmpegを使ってgifに変換しようという話。gifならgithubのissueに貼り付けられる。

📖 続きを読む

Top-level await will be soon

asyncとawaitの書き方に慣れてくると、非同期の処理を待つ時はいつでもawaitを使いたくなるのだが、使えるのはasyncのついたfunctionの中だけでトップレベルでは使えない。

📖 続きを読む

Web Workers work on IE10

JavaScriptはシングルスレッドでイベントドリブンであり、実行を非同期にすることはできるけど、基本的に同時に一つのことしかできない。Web Workersを使えば、メインスレッドとは別のスレッドで処理を実行することができるので、メインスレッドとは別の処理を同時に実行することができる。Web Workersを使ったメインスレッドの負荷低減は今後のフロンドエンドにおいて必携の技術になると思われる。

なのだけど、Web Workersは意外と歴史があり(よく知らないけど)、IE10でも動作する(Can I use Web Workers)。

📖 続きを読む

Optional chaining and Nullish coalescing

ES2020で新しく追加された機能(ECMAScript 2016+ compatibility tableの画面の下の方にある)はどれもわりと実用的で、なくても大丈夫なんだけどあると便利といったものが並んでいる。Bigintは日常的には使わないとは思うけど。

その中で、Nullish coalescingとOptional chaining はかなり便利。なくても大丈夫だし、使わなくても良いんだけど、便利だから日常的に書かれるJavaScriptの書き方を変えるものになると思う。

📖 続きを読む