WebApp/2 作ってます。HTTP/2 + ESModules は安くて速くて美味しいよ! - latest log
最近 WebApp/2 というのを作ってます。 WebApp/2 は2012年頃から温めていた「ES6 + ESModules を使い、開発初期〜中期は Bundler や Transpiler を使用せずに開発を進められるようにしたい」というアイデアを具現化したものです(細かい仕様は wiki にあります)。 作り始めて20日ほどですが、昨日までの WebApp/2 には、以下の課題や疑問が存在しました。 WebApp/2 は一般的なトレンド [要出典] から大きくJUMPしている。世の中には webpack, babel, browserify を前提に書かれた ES5/ES6 なコードが大量にあるが、それらを ES6+ESModulesに変換するための シンプルで将来取り外しが効くマイグレーションパスが見つかっていない ファイルを事前結合しない場合の パフォーマンスのトレードオフがど
"デバッグしてください", "パフォーマンスチューニングしてもらってもいいですか?" とJavaScriptが難読化された状態のページのURLを渡してくる人に、伝えなきゃならない事がある - latest log
webpackを使ったサイト、極端にデバッグしずらい (外部ライブラリが eval(文字列) の形で埋め込まれる)ので、はっきり言って大キライだったりする— コラーゲンたっぷりさん (@uupaa) 2017年4月19日 見知らぬコードが minifyされ、さらに eval されているのをデバッグしろとか、暴力にも等しい要求なんだよね。そりゃキライになるよ— コラーゲンたっぷりさん (@uupaa) 2017年4月19日 「環境Aの言語Bで書かれたコードを言語Fに変換した、環境C/D/Eで動くと思うのでデバッグしろ」というのも極端にデバッグしづらいという理由から避けるようにしている。 デバッガビリティに問題がある環境は、心がすり減るのでイヤ(時給1万円なら頑張る— コラーゲンたっぷりさん (@uupaa) 2017年4月19日 js minifyあるある A「パフォーマンスに問題があるので
Webフロントエンドの人達(?)が次々と微妙なツールを導入して「流れが早過ぎる」とつぶやいているのを横目で見て感じている事 - latest log
自分の会社に「新ツール導入の際はCTOの許可が必要」というルールを生やして居心地を悪化させたり、後輩のやる気を削りたくなかったら、ツールの将来性を考えて行動したほうが… SI等のアレな現場にその手のルールが存在するのは何故なのか?という事と、自分達もその歴史の一節にならないように— コラーゲンたっぷりさん (@uupaa) November 20, 2015 必要な物は生まれる(創れば良い)ので、どんな問題がありどのような解決方法があり、状況の変化にどう対応するかなど、大人はツール導入前に織り込んでおくし、”勉強会の人が流行ってるって言ってたし”ですぐ廃れるツールを導入するなんて事を繰り返してると、あっという間にデストピアな職場に。な— コラーゲンたっぷりさん (@uupaa) November 20, 2015 “ツール導入で劇的に効率や抱えている問題が改善される”なら導入すればいいし、
プロダクトの開発速度を左右するキーマン「プロQA」という貴重な存在について - latest log
イノベーティブなプロダクトだと、チャレンジ成分の多さに応じてエッジな技術を投入できる可能性が高まるという観測ができた。 さて上記の状況で、QAチームがなぜか突然IE7,IE8対応を求めてきました。その時の僕はどうなったでしょう? A1. 徹夜になった A2. 二徹して対応した— コラーゲンたっぷりさん (@uupaa) 2015, 9月 3 強い心で「古いIE対応なんてありえない」と宣言すればよかったし、それができなかったのが僕の落ち度だ— コラーゲンたっぷりさん (@uupaa) 2015, 9月 3 プロダクトのターゲットユーザをQAと共有できていない場合に、不幸が起こりえるので、今後は特に気をつけたい。— コラーゲンたっぷりさん (@uupaa) 2015, 9月 3 QAにも、良く訓練されたプロQAと、ユーザと同じ程度のアマQAが居て、練度が全く事なる。 よく訓練されたQAは、不具
Android 4.4 Browser が大幅に機能強化しているようです - latest log
140 文字だと入らないので、こちらで。 追記 Android 4.4 (KitKat) からは、 AOSP Stock Browser(通称 Android Browser)のサポートが終了し、代わりに、Chrome WebView (Chromium) をラップしたブラウザが提供されています。 Chrome WebView は Android 4.4 の時点では WebGL や WebAudio など一部の機能が利用できません(can i use)。また UserAgent が書き換え可能なため、旧来のAOSPブラウザの UserAgent を偽装した形で配布されているケースがあります。 (※) WebGL や WebAudio は、Android 5.0 の Chrome WebView (WebView v37) から利用可能になりました。 未だに AOSP Browser を端末
スマフォブラウザゲームのパフォーマンスチューニング手遅れパターン - latest log
最近、こういう事例が増えてます ネイティブゲームアプリもグリグリアニメーションする昨今 🐤俺らもブラウザゲームの限界を目指そうぜ! 🐤盛るぜー盛るぜーー超盛るぜーー 数ヶ月後… 🐤来月リリースだけどカクカクします助けてーー 🐲きさまら何度やったらわかるんだ…そこに正座しろ…(ゴゴゴゴゴ) #こうですか?— コラーゲンたっぷりさん (@uupaa) 2014, 8月 19 🐲なぜ作ってる途中で実機で動作確認をしなかったんですか? 🐤え、あの、CreateJS なら大丈夫かとおもって… 確認してませんでした 🐲(イラッイラッ #こうですか— コラーゲンたっぷりさん (@uupaa) 2014, 8月 19 🐲(はぁ…)とりあえず実機動作とコードを見たいので開発サーバ名やログインする為の情報ください …2日後… 🐤…これで💦 🐲…動かない…あとminify解除してない状態な
(〜・◇・)〜 o O ( 闇色 JavaScript イディオム〜 - latest log
(ε・◇・)з o O ( 最近ブログ書いてないなー、そろそろ書かないとなー (ε・◇・)з o O ( JavaScriptイディオム集 が大人気かぁー、もうすぐブクマ1000個とかすごいなー (ε・◇・)з o O ( よーし。便乗して、ボクも手持ちの闇色な奴を幾つか紹介するよー window.onload をもっと使い倒したい? (ε・◇・)з o O ( window.onload には、コールバック関数を1つしか設定できないという昔からの制限があるよね? (ε・◇・)з o O ( そこを中央突破ですよ! __defineSetter__("onload", function(callback) { addEventListener("load", callback); }); (ε・◇・)з o O ( はい、これで何個でも設定できちゃうね onload = function(
プロトタイプ汚染とループ - latest log
脳内棚卸 Prototype.js と プロトタイプ汚染(昔話) jQuery が登場する以前、Prototype.js という JavaScript ライブラリがありました。 Prototype.js は、JavaScript OOP の普及期(2005～2007年頃)に多くのサイトで活用されました。 Prototype.js は Object.prototype や Array.prototype 以下に、Ruby 由来のメソッドを拡張することで、 JavaScript に Ruby 感をもたらし、ブームを起こしました。 当時の JavaScript(ES3: ECMAScript262-3rd) には、 言語仕様として Object.prototype を安全に拡張する方法が存在せず、 Prototype.js はしばらく後に 汚染(pollution) と呼ばれる問題を起こしてしま
mofmof.js とクラスベースOOP - latest log
クラスの使い方(初級) mofmof.js では mm("Hoge", { メソッド }) でクラス mm.Hoge を定義することができます。 mm("Hoge", { init: function(arg1, arg2) { this._arg1 = arg1; this._arg2 = arg2; }, method: function() { alert(this._arg1 + this._arg2); } }); var hoge = new mm.Hoge(1, 2); hoge.method(); new mm.Hoge(1, 2) のタイミングで init(1, 2) が呼ばれます init はコンストラクタと呼ばれ、 主に初期化に関わる処理を記述します mm.Hoge クラスのインスタンスを生成します alert(3) が実行されます クラス内部で使うプライベートなメソ
prototypeを拡張することで得られるもの。prototype拡張指向へのスイッチ - latest log
(ε・◇・)з mofmof.js や新しい uupaa.js では prototype拡張を活用しています (ε・◇・)з 長所がわかりづらいみたいなので、言い出しっぺのボクの中の人がメリットを列挙してみよー というエントリです (ε・◇・)з でも、長文になりそうなので、思いついたらちょっとずつ書き足していって、後で再編するよー というノリです (ε・◇・)з タイトルも適当です かわいい子には旅をさせるよ ( HTMLElement#cut ) 子ノード(div)を親ノードからパージする処理を考えてみましょう。 ---✂-------------------✂--- if (div.parentNode) { div.parentNode.removeChild(div); // div.parentNode = null } ---✂-------------------✂---
uupaa looper 見っけたよー - latest log
(ε・◇・)з hasOwnProperty を使った for in ループより 20%～84% 低コストな、うーぱー式 ループのご紹介だよ～ Object.keys を使い、key を列挙することで、hasOwnProperty を使った for in ループよりも速くなります。 var keys = Object.keys(obj), i = 0, iz = keys.length; for (; i < iz; ++i) { var key = keys[i]; var value = obj[key]; ... ベンチマーク http://jsperf.com/perf-for-in-loop-vs-pre-enum-keys-for-loop/8 Browser for_in_hasOwnProperty loop uupaa-looper Chrome 16.0.912.77
IE 6, IE 7, IE 8 が退場した未来 - latest log
Internet Explorer の自動アップグレードについて | TechNet 長かった… 本当に長かった… やっと、IE 6, IE 7 が居なくなるのですね… uupaa.js ver 0.8 に埋まっている処理から情報を抜き出し IE 6, IE 7, IE 8 が居なくなった未来では何が可能になるのか抜粋してみました。 IE8 でやっと使えるようになる機能 一部は IE 6 や IE 7 でも使えるのですが、対応が限定的だったり不具合が多かったりと、安心して使えなかった機能も含まれています。 display: inline-block display: table, table-cell など position: fixed; E:active {...} E:focus {...} E::first-child {...} E:lang(C) {...} E::after
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
