【仮説】requestAnimationFrameよりsetTimeoutでアニメーションした方が旧端末で安定感ある

セオリーとしては、JavaScriptでアニメーション実装する場合はrequestAnimationFrameにコールバックを渡してやるわけですが、
setTimeoutでアニメーションしたほうが旧端末での安定感があると感じることが多々あります。
誰か検証してくれませんかね。

【疑問点】iOS SafariでのJavascript Memory Profilingについて

今作っているとあるWebアプリのJSが、旧端末で思うように動かない。
重さを感じていて、アプリの性質としてもメモリを食うものなので、決定的なメモリリークが起こっていることを疑っている。

macOS SierraのSafariを使うと、SafariのWeb Inspectorでメモリプロファイリングができると聞いて、遂にmacOS Sierraにアップグレード。こんな感じで取れます。これは凄い。ちなみに、iOS側がある程度新しいバージョンじゃないとダメっぽい。

しかし、疑っていたJavascriptによるメモリ消費量は一定の範囲内を増減しているだけで、リークはしていなさそう（Categories: JavaScript）。それより気になるのが、Categories: Pageの単調増加するメモリ使用。下記リンクによると、
Memory Debugging with Web Inspector | WebKit

> Page – All other memory. This includes engine memory related to the DOM, styles, rendering data, memory caches, system allocations, etc.
とのことで、JSによる直接のメモリアロケーションではない間接的リソース使用量が単調増加しているように見えるが、内訳は分からない。
推測でしか無いが、"engine memory related to the DOM, styles"は数十MBも食わないだろう。"rendering data", "memory caches"あたりは怪しいが、表現が曖昧すぎて問題の追求に窮している。
誰かヒント下さい。

Grayアルパイン試乗などゆるふわインプレッション

 土曜日にハンタマに行ったらたまたまGrayの試乗会が催されていたので機に乗じて2本ほど試乗しました。自分の備忘録も兼ねて、拙いながらインプレ/レビューをしようと思う。比較のため、マイ板についても。なお、筆者そんなにスキル無いのと、体の温まり具合もマチマチなので全然対照比較にはなっていない模様。

1. Tycoon TypeS 63

2. Tycoon 67

3. BC Stream TC 75（マイ板）

4. f2 Equipe RS 78（マイ板）

試乗はG-Styleのステップインバイン（Speed Plate Type-A）で。

1. Tycoon Type-S 63

    メタルが板の対角を結ぶようなX型で入っていて、トーション剛性高め。癖がなく扱いやすいと感じた。トーション剛性の高さのおかげか、前後脚の角づけ不均一とか、ローテーション過多によるエッジ抜けは起こりにくい。でも決して低速での裁きにくさも感じない（短いお陰かも）。ただ、これも短いせいかもしれないが、ターン後半のエッジプレッシャーが高い時に少し細かいスキッドが起こりやすい傾向を感じた。これは自分にあった長さの板を使えば済む話かもしれない。（ちなみに私は身長191cmと無駄に高い）。もう少し長めの板にも乗ってみたいが、感触としては優等生だが面白みに欠ける印象。

2. Tycoon 67 （下の画像のもの）

    メタルがエッジに平行に2本入っていて、トーション剛性はType-Sに比べて低め。

#test #testride #gray #tycoon #alpine #snowboading #huntermountain ＃Japan

これは始め、どうやって曲げたら良いかわからず苦戦した。後述するEquipe程ではないが、斜面を落ちていく方向性が強め。

しかし、少しターンインの角づけを丁寧にすることを心がけると、驚くほど省エネでスパスパ切れることが判明。これは個人的には非常に面白いと感じた。うまく乗りこなせばどんな所でも滑れそうな守備範囲広めの板だと思う。割と欲しい。もう少しじっくり試乗したい。

続いてマイ板

3. BC Stream TC 75 (07-08年)

    自動的に曲がるフリーラン板。大概トゥクリップのバイン（Glide Ti）で履いている。エッジに乗れば勝手に曲がる。入門板としてもお勧めできると思う。一昨年あたり新作のTCにも乗ったが、最近のTCも根本的な乗り味は踏襲している模様。

ただ、決してフレックスが柔らかい訳ではなく、ハリもあってvividな板かと思う。踏んだ時の応答が元気すぎて、けっこうびっくりさせられることがある（まだ乗り切れてない。下の動画はびっくりした時のやつ）。

I can't understand why I was blowed away hitting nothing there lol. Nearly flipped. #snowboarding #fail #flip #snow #togakushi #alpine #alpine #snowboard

そのクセ、ターン後半の走りはあんまり感じられない。

操作の許容範囲が広くて楽なので、一番よく使っている板。

4. f2 Equipe RS 78 (12-13年)

    慣性のでかいGS板。大概ACTIVE PRO FLEXの黒プレートを挟んで乗っている。

TCとは対照的でダルな板。操作に対する初期応答が悪く、ターンインでリーンを取ってから遠心力が迎えに来るまでが遅くて不安になる。一方で回り始めるとけっこうずっと回って行って、ちゃんと抜重しないと次のターンに移行できないかもしれない。

板を立てないとロクに曲がらない。Tycoon67とは対照的で、前荷重での角づけはほどほどに、とにかく両足使って板を立てるとなんとなくうまくいく。

プレートのせいかもしれないが、この板だとまだベーシックターンでは踏み切れない（僕は身長の割に異様に体重が軽い。つまりガリガリ野郎である）。ダイナミックターンなら脚力で持っていけるからけっこう楽しい。こんど久々にプレートを外して乗ってみることにしよう。

まとめ

• 板によってツボが全然違うので乗り比べ楽しい
• 違うツボの板に乗ると普段気づかない自分の苦手な部分が分かることがあるので勉強になる
• Gray Tycoonのトータルバランスの良さたるや

svgを使って、html要素をmask / clipする

<style>
.clipping-target {
  width: 100%;
  height: 100%;
  mask: url(./mask.svg) no-repeat 50% 50%;
}
</style>
<div class="clipping-target">
Yo!
</div>

などと, maskしたり, clip-path css propertyでclipさせたりできるのだが、
IE 11では動かない！ 別の手段を使いましょう。
svgでsvgの要素をclipするのはIEでもできるみたいです。svgをhtml要素に作用させるのが不可みたい。

ES6 (ES2015) のMapクラスに関しての注意点

new Map();

てな感じでマップ使える。

new Map([
[1, "value"],
["2", "valval"],
[3, "hogehoge"]
]);

みたいな形での初期化はIE11では使えない。
Chrome, Firefox, Safariでは使えるが、互換性を考えると封じておいたほうが良い。

webcomponentsjs (WebComponents v1 polyfills) についての備忘録

とてつもなく久々の投稿ですが、ここのところ人柱コード書いていてところどころハマリポイントが見つかったりしているので、悩める人々の光になる可能性が0.0001%でもあればと思いメモ。

HTML5で好きなタグ名でカスタム要素を定義できる、CustomElementsで遊んでいます。
ShadowDOMなどと組み合わされるので、実装の瑣末なものを隠蔽したりして、よりセマンティックなウェブページを構成できます。

GitHub - webcomponents/webcomponentsjs: A suite of polyfills supporting the HTML Web Components specs

loaderをカスタムしたりしています
GitHub - misttechnologies/webcomponentsjs: A suite of polyfills supporting the HTML Web Components specs

以下、ハマったポイント

1. ShadyDOM / ShadyCSSを使う場合は`ShadyCSS.prepareTemplate()`メソッドでtemplateをゴニョゴニョしてあげないといけない
IEとFirefoxに該当。
nativeのshadowDOM tree内のcssセレクタをエミュレートするために、cssスコーピングのためのクラスをshadowRootノードに, :hostセレクタなどをhostのタグ名に変換する必要がある.

if (ShadyCSS) { ShadyCSS.prepareTemplate(template, "hoge-element"); }

てなノリで。

2. あるCustomElementのShadowDOMの中で別のCustomElementを使う場合（IE たぶん11以下 限定）
外側クラスを先に`customElements.define()`してupgradeElementさせ、そのあとに内側クラスを`customElements.define()`してupgradeElementさせないといけない。
少なくともIE11で、これに気づかないと動かない。他のChrome, Firefoxなどのモダンな奴らは大丈夫。
これは、内側で使われているCustomElementの定義を先にした上で、外側のShadowDOMをtemplateを使って構築しようとすると、template内のdocumentFragmentがぶっ壊れるから。外側templateのDOMパース中に不意に内側customElementがupgradeされることが想定されていないらしい。

3. あと、polyfillのロード完了タイミング制御が割と難しい。
WebComponentsReadyなるCustomEventも飛んでくるが、あんまりアテにならない。

OpenBlocks AX3にVyatta 6.4をインストールする

OpenBlocksはARMプロセッサを使っており, 一般的なi386, x86_64アーキテクチャ用のビルドだとそのまま使うことはできません. そこでarmelアーキテクチャ用に自分でビルドし直す必要性があります.

そこで, OBDNマガジン: OpenBlocks AX3でVyattaを動かす(ビルド編)を見ながらvyatta入りkernelをビルドしようとしたのですが, kernelに当てるunionfs.diffがリンク切れになってたりと、結局ビルドできませんでした。
よーく探すと Vyatta CORE for OpenBlocks AX3 にビルド済みのisoが置いてあったので結局これを使うことに. OBDNマガジン: OpenBlocks AX3でVyattaを動かす(起動編) を参考にしながらこのisoを使ってOpenBlocksにVyattaを導入することに成功しました.
具体的には, ODBNマガジンの起動編「 ◆OpenBlocks AX3でVyattaをlive起動」以降の手順を踏めば良いはずです.