latest log

酩酊状態で書いたエンジニアポエムです。酩酊状態で読んでください。

Browser JavaScript におけるコンポーネント化の大波(ES Modulesとプラグイン)

ツイート貼っただけですけども

こちらです:

www.publickey1.jp

生の ES Modules や Dynamic import は「サーバ側で特定のディレクトリ以下の js は全部まとめて1つにすればいいじゃん」というこれまでの発想や、それを体現したフレームワークとは相性がとても悪いです。

そのままでは水と油なので、暫くはマイグレーションのための仕組みが必要となりますが、それは又の機会に。

Solve the ESC key big problem in MacVim with New MBP TouchBar. (remap F1 to ESC and always displaying Fn keys)

新型MBP with TouchBar 購入直後は荒ぶってました。キーボードとかESCキーに対して。

(ა✘﹏✘)ა カラビナーーどのーーー

(ა✘﹏✘)ა ひぃぃEE、VimでESCキーがちゃんと押せないーー ミスタッチしまくるー

(ა✘﹏✘)ა VimからESCキーとったら何がのこるんじゃーー

当時は、だいぶ荒れてました。

現在の設定

あれから半年…色々手をつくした結果、現在はこのような設定で乗り切っています。

Key repeat setting

defaults write -g InitialKeyRepeat -int 12
defaults write -g KeyRepeat -int 3

これ以下の値にすると、キー詰まりや爆走するのでこれでガマン

defaults read -g KeyRepeat
> 3

defaults read -g InitialKeyRepeat
> 12

Always displaying Function keys

MacVim を操作中は、Fn キーを常に表示する。

f:id:uupaa:20170831134615p:plain

Remap F1 key to ESC key in MacVim

F1 を押した場合に ESC として扱う

f:id:uupaa:20170831134623p:plain

Kill the calculator

電卓表示中は、謎のバグによりESCキーが効きません。電卓を殺します。

f:id:uupaa:20170831135240j:plain

(ა✘﹏✘)ა もっと良い設定があったら教えてください

WebApp/2 作ってます。HTTP/2 + ESModules は安くて速くて美味しいよ!

最近 WebApp/2 というのを作ってます。

WebApp/2 は2012年頃から温めていた「ES6 + ESModules を使い、開発初期〜中期は Bundler や Transpiler を使用せずに開発を進められるようにしたい」というアイデアを具現化したものです(細かい仕様は wiki にあります)。

作り始めて20日ほどですが、昨日までの WebApp/2 には、以下の課題や疑問が存在しました。

  1. WebApp/2 は一般的なトレンド [要出典] から大きくJUMPしている。世の中には webpack, babel, browserify を前提に書かれた ES5/ES6 なコードが大量にあるが、それらを ES6+ESModulesに変換するための シンプルで将来取り外しが効くマイグレーションパスが見つかっていない
  2. ファイルを事前結合しない場合の パフォーマンスのトレードオフがどれ位あるのか? そして、それは 許容できる範囲に収まっているのか?
  3. アセットパイプラインの煩わしさから開放されるというプラスの側面パフォーマンスのトレードオフというマイナスの側面 の存在を他の人に説明した時に、どのように受け取られるのか?

最初の課題については、rollup.js で解決できる事が分かりました。

そして、多くの方々が気になるであろう、

  1. 事前に結合された bundle.js を読み込む場合と
  2. HTTP/2 + ESModules を使って js をバラバラに読み込む場合の

パフォーマンスのトレードオフについても許容出来る範囲に収まっており、アセットパイプラインが不要という説明に対しても予想よりもポジティブな反応がありました。


ESModules に乗っかると、bundeler も transpiler も sourceMap も minify もコンパイラも、開発初期〜中期まで必要ありません(そのまま本番にデプロイも可能です)。

従来の魔窟化したビルド環境を今後も使っていくか、HTTP/2 + ESModules のパワーを信じるかどうかはアナタ次第です。

"デバッグしてください", "パフォーマンスチューニングしてもらってもいいですか?" とJavaScriptが難読化された状態のページのURLを渡してくる人に、伝えなきゃならない事がある

デバッグしてください” “パフォーマンスチューニングしてもらってもいいですか?”JavaScriptが難読化された状態のページのURLを渡された場合に、依頼された側は(恐らく)以下の方法で解決を試みます。

  • Minify をほどいた状態の JavaScript をローカルに保存し、難読化されたコードの意味的な解読とコードの流れを何となく読み取る
  • コードの実際の動作を確認するために、 Charles などの LocalProxy を使い、Minifyされたコードと解読したコードを差し替え、DevTools上で動かしてみる
  • DevTools が謎の理由で死亡する場合や、コードを表示するだけでUIの応答性が極端に悪くなるほど巨大な JavaScript の塊(10万行を超えるコード)対しては、まずはコードをDevToolsが耐えられるサイズに分割する
  • minify + eval されているコードの一部を差し替える場合は、DevToolsによってはevalの内部に対しブレークポイントが張れない場合があるため、さらにほどき、動く状態にしてからブレークポイントを張ったり、printfデバッグ用のコードを追加する

はい、聡明な諸氏であればお分かりのように、Minify前のコードを提示してくれたら、このような無駄な苦労はそもそも発生しない のです。

時間は有効に活用したいですね。


webpackを使ってて極端にデバッグしづらいサイトが大キライ のとこは、webpackを使ってCSSや画像がBase64化された状態でjsと一緒に埋め込まれている事が多々あり、DevToolsがそれによって悲鳴を上げるから。ですね。

webpack を使って全部一つに混ぜる → 生成された bundle.js が死ぬほどデカくなる → DevToolsで開けない/DevToolsの反応が死ぬ → オマエを殺して俺も死ぬ。 の構図です。

JavaScript で記号プログラミング

息抜きに、JavaScript で記号プログラミング を Qiita に投稿してみました。

JavaScript で記号プログラミングは、(僕の中で)JavaScript がまだ盛り上がっていた頃(2005〜2013年頃)の話題です。とても懐かしい感じがします。

200x年ごろのJavaScript界隈といえば、集団で力をあわせて一つの大きな目標を達成する感じではなく

という、ルール無用で、一寸先は闇のような主張が闊歩する魔界だったように記憶しています。昨今のJavaScriptとはだいぶ趣が違いますね。

“どんなに汚いコードでも動けばいい” と主張するスピードスターやバーサーカープログラマーも最近は老化やLinterツールの普及によりめっきり減ってきましたが、まだかなり多くの個体の存在が確認されています。

そのような方へのアンチテーゼとして記号プログラミングというジャンルが存在するとかしないとか(要出典)。

このような動作環境や言語仕様の重箱を過度につつくようなトリッキーなコードに頼らず、誰にでも読みやすいコードを書くように心がけたいですね(自戒)。

GitHub pages の公開ディレクトリを master /docs に設定し Symlink を作ったら色々捗るかと思ったらダメでした

先ごろ、github-pages として公開するディレクトリを masterブランチの docs に設定することが可能になりました。

(これまでは gh-pages と呼ばれる別ブランチを用意し、そちらに必要なファイルを都度 publish する必要がありました)

そこで

(〜・◇・)〜 github シンボリックリンクをある程度理解してくれるから、もしかしてリンク作れば、master や develop ブランチに追加したファイルを docs から参照可能できたりしないかなぁ?

と考えた (ε・◇・)з ← コイツがおったそうな。

具体的なエラーはこちら

リンクだと無理そうなので、

https://github.com/uupaa/WebGLDetector.js/tree/master/docs

のように必要なファイルをコピーして設置することに。

https://github.com/uupaa/WebGLDetector.js/tree/master/docs を公開したページはこちら。

http://uupaa.github.io/WebGLDetector.js/

gyazo.com

他人の書いたコードは難しい(純ポエム