Vue, MathJaxをCodepenで

CODEPENを使うと、HTML+CSS+JSでちょっとしたことを試せるわけですね。JS系のサイトでよく見かけててたけど、今回はじめて使ってみたらけっこうよかった。

はじめて数式表示のためのMathJaxを使用。LaTeXを使ってみる機会がないままこれまで来ちゃったけど、MathJaxでなら追いつけるかも。

それとVue.js(もう日本語コミュニティーがある!)ね。軽量フレームワークと聞いて少し試してみました。全然深いことしてないけど、触ってみて雰囲気だけと思ってやってみたのですが、たしかに気軽に試せる感じですね。フィボナッチ数がでますよ。

See the Pen jWwLyN by Ken (@kentakunte) on CodePen.

出典&参考:「Javaによるアルゴリズム辞典」技術評論社

translatez(0)ってなんのために書いてるの?

CSSで

transform: translateZ(0);

ってなんのために書いているのかなって調べてみたら、ハードウェアアクセラレータを有効にするためだったことが判明。

Even though we’re not animating an element in 3D space, we can enable 3D rendering. At the very least, the transform: translateZ(0); declaration triggers GPU acceleration in modern desktop and mobile browsers. This seems to be the most effective way of triggering GPU acceleration (all vendor prefixes included):
— Increase Your Site's Performance with Hardware-Accelerated CSS

3D描画をするつもりじゃなくてもtranslatez(0)で3D扱いにすると、2D描画もパフォーマンスが上がるそうです。