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「パフォーマンスに問題があるので
インターネットにゴミをばら撒かない為にやっている、ちょっとしたルーティン - latest log
ポエムっす。あるあるっす。 書いて消す(核ボタン押したフリ) 僕は、他人に対して何か余計な一言を言いたくなったり、良くない気持ちになった時は、「今の気持ちを文章にする。SNSやメールに書き、送信する直前まで行く。実際には送信せず消す」という、ちょっとした儀式(ルーティン)をこなしています。 「確かに気持ちを文字にした。そしてそれを吐き出した」という擬似体験(寸止め)を得る事で、気持ちを切り替えています。 (これ割とありふれてて、結構沢山の人が同じような事をやっているような気がしていますよ) ルーティン導入前 感情という精神的な活動が、肉体的な理由(空腹・疲労・体調の僅かな変化)や、瑣末な情報(心ない誰かの一言・ネットにあふれるくだらない挑発)にうっかり引きづられてしまう事に、ちょっとだけ悩んでました。 「(ε・◇・)з 今日は良い天気!」「💩こっちは土砂降りだよ ざけんなクソが」的なクソ
最も基本的なコードは残しつつ、徐々に最適化を行うという考え方 - latest log
まずシンプルで説明的なコードを組む(当然遅い)。これをAとして最後まで保持する。次に様々な条件を設定し測り改修効果がありそうな場所を探す。削ったコードを測定する。Aと付きあわせて削りの正しさを証明する。 これらは至極当然の事。これを知らない人が削りを行うと速攻でクソコード化する— コラーゲンたっぷりさん (@uupaa) 2015, 1月 9 http://t.co/S7ocspaTdo これをやる過程で色々なテストコードや資料ができあがる。これらは後から効いてくる。 引き継ぎが簡単で手離れが良く、後輩に尊敬されるようなエンジニアリングを行い、身軽さを維持しつつ、次々に新しい事にチャレンジしましょう。— コラーゲンたっぷりさん (@uupaa) 2015, 1月 9
innerHTML clears the drawing canvas pixels. - latest log
Canvas に描画した内容は、innerHTML を使った Nodeツリーへの干渉により描画内容がリセットされ消えてしまいます(in Chrome, Safari, Firefox) useInnerHTML = false にすると消えません。 <body> <canvas></canvas> <img src="foo.png"></img> </body> var useInnerHTML = true; window.onload = function() { var ctx = document.querySelector("canvas").getContext("2d"); ctx.drawImage(document.querySelector("img"), 0, 0); if (useInnerHTML) { document.body.innerHTML += "<
Xorshift を JavaScript(WebModule)で - latest log
XORShift.js (ドキュメント) をWebModule で実装しました。 XORShift.js は、Math.random() の代替機能です。 ランダムシードを指定可能で、値の再現性も備えています。 XORShift.random(); // -> uint32 な数値 ランダム生成器は実質10行ほどの小さなプログラムですが、モジュールの作成作業はトータルで30分ほどです。 30分の内訳は、 Xorshift の仕様把握 (6分) メルセンヌ・ツイスター を実装すべきか迷った時間 (3分) GitHubでリポジトリ作成(20秒) WebModuleから雛形を生成(5秒) 実装(4分) 3パターンのテストケースの作成とテスト(7分) ドキュメントの作成(5分) クロージャコンパイラのアドバンスドモード対応 (WebModuleの機能) どこでも動くように部品化 (WebModul
JavaScript の ArrayLike Object について - latest log
このエントリの賞味期限は 2015-12-31 です。
uupaa's pure JavaScript module pattern - latest log
2013-08-19 uupaa's pure JavaScript module pattern pure JavaScript で記述し、Browser, WebWorker, Node.js で使えるモジュール定義パターンのご紹介。 uupaa 2013-08-19 18:05 前の記事
(〜・◇・)〜 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(
非同期プログラミングを驚きのシンプルさに (するかもしれない) Flow.js を公開しました。 - latest log
(ε・◇・)з o O ( (ミ・◇・ミ) o O ( あたし。ずっと思ってた… (ミ・◇・ミ) o O ( あたしの脳みそだと Deferred/Promises は、ちょっと難しすぎるって… (ミ・◇・ミ) o O ( jQuery.Deferred 解説記事をいくつかみたけど、すごく… モジモジしてて、ちょっと縦長すぎるんですもの… (ミ・◇・ミ) o O ( だから作っちゃった… ).done(); 非同期処理をシンプルに書ける、とても小さなライブラリをリリースしました。 Deferred/Promises は既存の構造や, そもそもの考え方を大きく改変する必要がありますが、 flow.js はあまり大きな違和感もなく、現在の流れを維持したまま導入できると思います。 使い方はこちらをごらんください http://www.slideshare.net/uupaa/flowjs リポジ
JSONを設定ファイル代わりに使う場合は JSON.parse → だめなら → eval のように二段階で評価するといいんじゃないかな - latest log
JSON.parse があまりにも眼鏡委員長なので、JSON.parse でエラーが出たら黒ギャル eval("(" + … + ")") で試す的なコードいれたらストレス減った via https://twitter.com/uupaa/status/294711990000168960 あ、さっきのJSONスタイルで書く設定ファイルのバリデーションの事ね。ユーザが設定ファイルにありがちなコメント( /* */ や // )いれてたり、 ハッシュの末尾のカンマ消し忘れてるだけでエラーで弾くのは忍びないので、 eval で jsとして評価して正しければOKでしょと via https://twitter.com/uupaa/status/294713049221324800 JSON を設定ファィル代わりに使うプロダクト多いけど、JSON.parse は些細なことでもエラーで弾くので、ev
TypeScript の Interface が mofmof.js にもほしい - latest log
TypeScript を知ってる前提で書きますよー (ε・◇・)з TypeScript いいですねー、JavaScriptの上位互換でES6と衝突しない感じでステキですねー。 (ε・◇・)з Interface とかもいいですねー。とりいれたいですねー Interface を mofmof.js に実装してみました // TypeScript Style interface Point { x: number; y: number; } // mofmof.js Style mm.Interface("Point", { x: "number", y: "number" }); (ε・◇・)з モニターから3メートルぐらい離れてみれば、ほぼ同じだね! 実行してみました 以下のコードを実行すると、mm.allow({ x: 1 }, "Point"); の行でアサーションが発生し、ブラウザ
TypeScript / js / mofmof.js 並べてみて、第三者から見れば動いているコードにコメントがあるのって凄くありがたい事かなーって今更ながらに再確認(長い - latest log
# CSS3 の flexbox をサポートしているブラウザで御覧ください // TypeScript interface Size { _width: number; _height: number; getWidth(): number; setWidth(value: number): void; getHeight(): number; setHeight(value: number): void; } class Box implements Size { _width: number = 0; _height: number = 0; constructor(width: number = 0, height: number = 0) { this._width = width; this._height = height; }; public getWidth() { ret
prototypeを拡張することで得られるもの。prototype拡張指向へのスイッチ - latest log
(ε・◇・)з mofmof.js や新しい uupaa.js では prototype拡張を活用しています (ε・◇・)з 長所がわかりづらいみたいなので、言い出しっぺのボクの中の人がメリットを列挙してみよー というエントリです (ε・◇・)з でも、長文になりそうなので、思いついたらちょっとずつ書き足していって、後で再編するよー というノリです (ε・◇・)з タイトルも適当です かわいい子には旅をさせるよ ( HTMLElement#cut ) 子ノード(div)を親ノードからパージする処理を考えてみましょう。 ---✂-------------------✂--- if (div.parentNode) { div.parentNode.removeChild(div); // div.parentNode = null } ---✂-------------------✂---
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) が実行されます クラス内部で使うプライベートなメソ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ぜひまた購入したい Mini DisplayPort → HDMI 変換ケーブルと、もう二度と購入しないケーブルの一覧 - latest log
第三次ブラウザ戦争がそろそろ閉幕します - latest log
This is the implementation of the animation PNG renderer by pure JavaScript. - latest log
JSX の使い方 自分メモ - latest log