Browser JavaScript におけるコンポーネント化の大波(ES Modulesとプラグイン) - latest log
ツイート貼っただけですけども MozillaがHTTPSを前提とした機能追加を行うと宣言したように、今後はES Modulesを前提とした機能追加がありえるのだけど、ESMに対応する標準的な解が存在しないRailsはどうするんだろね。現状はjs系はバンドラの使用が大前提で、フルマネージドが足かせ状態になってる— コラーゲンたっぷりさん (@uupaa) 2018年1月22日 こちらです: www.publickey1.jp 今日リリース予定のChrome64でESMを無効化するフラグ chrome://flags#enable-module-scripts が無くなりESMが常時有効化されます。いよいよ<script type=“module”>を活用する時代に突入するため我々も変化しつつ前進ですよ— コラーゲンたっぷりさん (@uupaa) 2018年1月22日 jsを1つにバンドルして
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に変換するための シンプルで将来取り外しが効くマイグレーションパスが見つかっていない ファイルを事前結合しない場合の パフォーマンスのトレードオフがど
他人の書いたコードは難しい(純ポエム - latest log
他人が書いたコードは何故難しいのか ・契約プログラミング(型システム) ・コメントによる表現力の補完 ・図式 ・簡易で合理的なSyntax( != 記号プログラミング) などを施しても、なぜ読みづらいのか。 ここ30年でこの部分は進化してない? という原点回帰な思考実験— コラーゲンたっぷりさん (@uupaa) 2016年9月21日 他人の書いたコードは難しい →自分が理解する必要が無い部分まで見ているからだ(知りたがり過ぎ →再利用ではなく、最初から他人に使ってもらう前提で設計 →よくテストされ仕様が説明されている公開部品を黒箱として扱えば良い(Modules →難しさから解放されつつある ← いまここ— コラーゲンたっぷりさん (@uupaa) 2016年9月21日 コードは見られたら負け。コードで動作を説明したら負け。それは「他人のコードは難しい」「引き継ぎ難しい(そもそも引き継ぎ
低レベルなビット操作関数を集約した WebModule ベースのライブラリ Bit.js を追加 - latest log
結構な割合で必要となるビット演算系の関数をまとめた WebModule ベースのライブラリ Bit.js を追加しました。 こんな関数があります。 // make bit mask Bit.mask(2) // -> 0x03 Bit.mask(4) // -> 0x0f // bit split by bit-pattern Bit.split(0xffff1234, [16,4,4,4,4]) // -> [0xffff,0x1,0x2,0x3,0x4] // With ES6 Destructuring Assignment // ES6 Destructuring Assignment と Bit.split を併用すると以下のように簡便に記述できます var [u16, u8a, u8b] = Bit.split(0x00001234, [16, 8, 8]); // u16 =
HTML の linkタグに prefetch 機能が追加され、より便利になるようです - latest log
linkタグに pre fetch 機能を追加する仕様 (Editor's Draft)が上がってきています。 Chrome - indevelopment IE - サポートするかも Firefox - 不明 Safari - 不明 <link rel="preload" href=“…" as=“…" onload=“…” onerror=“…”> 従来は、new Image や XHR と DOM API を使ってリソース毎に別々のJavaScriptを記述する必要がありましたが、お手軽になりますね。 これまで var img = new Image(); img.onload = function() { document.body.appendChild(img); }; img.onerror = ... img.src = url; var script = document
みんな大好き WebWorkers (WorkerMessage.js 作った) - latest log
WebWorkers(以下Worker)をハンドリングするのは結構大変で、ちゃんと意味があるコードを書こうとすると、 Worker が応答無くなったらどうしよう。エラーハンドリングどうしよう。どんなエラーがあるんだろう Worker に job 投げて結果を受け取ってクローズしてという基本的な部分をもっと楽に書きたい インラインワーカーどうしよう。インラインワーカーの場合の importScripts のパスの指定どうしよう postMessageの呼び出しコストは大丈夫か? 十分な時間分解能があるんだろうか などなど色々と考慮する必要があったりします。 このへんの事を考慮した実装がこちら( WebWorker.js )。半年ほど前の実装です。 https://github.com/uupaa/WebWorker.js/blob/master/lib/WebWorker.js (409行)
現代的で大容量なクライアントサイドストレージの実装 WMCache.js を公開しました - latest log
ブラウザ上で、100MB 〜 2GB もの大容量のクライアントキャッシュを高速に、ストレスなく扱えます。 もちろんモバイルブラウザに対応しており、iOS 8 と Chrome for Android でも動作します。 詳しくは、 https://github.com/uupaa/WMCache.js/wiki/WMCache に書いたのでご覧ください (ε・◇・)з o O ( いつまでも 5MB + 5MB な (ε・◇・)з o O ( チョビットな世界に縛られているボクタチではないのです! (ε・◇・)っ 画像とWebAudioな動作確認ページ ひとりごと WebKit の IndexedDB は Blob をサポートしていない。Blob が使えれば、もっとシンプルに組めた。 Chrome の FileSystem は Blob も ArrayBuffer も受け付けるが現状 Blo
WebModule ドックフーディングメモ - latest log
一人で黙々とドックフーディングしている WebModule の自分用のメモ。 開発支援を受けるために必要となるコード 動的に型チェックを行ったり、問題発生でAPIのリファレンスページへのリンクを表示するなどの開発支援を受けるには、このように書く必要がありました。 先週までのコード function Foo_set(value) { // @arg Number/Integer(= 0): comment. // @help: Foo //{@assert _if(!Valid.type(value, "Number/Integer/omit"), Foo, "value"); //}@assert this._value = value || 0; } Foo["repository"] = "https://github.com/uupaa/Foo.js"; Foo["set"] = F
Task.js は、非同期処理をスッキリ書ける(よく見かける)ライブラリである - latest log
(ε・◇・)з o O ( 非同期が隠し味になってない他の人が書いたスパゲッティーコードを見てると寿命が縮まるマン (ε・◇・)з o O ( 今出せるベストなソリューションを提供するマン これは「進捗どうでしょう?」アタックに対する防御シールドとして作成したスライドだけど、 発表する機会とかなさげなので、そろそろ放流 http://t.co/FX5y3T32Sl (ε・◇・)з o O ( Task.js マジ オススメ— コラーゲンたっぷりさん (@uupaa) 2014, 2月 21 Task.js の Task.run() は 最新のChromeに試験実装されている DOM Promise の Promise.all()に比べて、2〜2.5倍速でタスクを処理する能力を持っています— コラーゲンたっぷりさん (@uupaa) 2014, 2月 21 一連の Promise に対する
お手軽に画像の読み込みをハンドリングする、今どきな方法 - latest log
2008年のエントリ http://d.hatena.ne.jp/uupaa/20080413/1208067631 のリニューアル版です。 (ε・◇・)з o O ( 2018年頃にでも、もう一度調べて書きたいと思います。
Chrome の拡張 JSONView が便利ですね - latest log
この記事の賞味期限は2013年内です。10秒で読めます。 (ε・ ワ ・)з 勘違いがありまして、本文の趣旨が変わり Chrome の拡張 JSONView の機能紹介になりました JSONView をインストールした状態でhttp: や https: スキームで始まる JSONファイルを開くと、改行やスペースを含まない(圧縮された状態の)JSONも、適切に展開した状態で見ることができます。 この状態で、マウスを各要素にホバーさせると、画面下の薄い紫の部分に、要素にアクセスするためのパスが表示されます。 紫色の部分: tree[0].attrs.frame[3] xpath のようなこれは、json path とでも呼ぶのでしょうか? また、各ノードの左側にある - や + をクリックすると展開と折りたたみが行われます。 以下のパスを JSONView をインストールした状態で開くと、お試
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 前の記事
型情報(宣言)と、実装を分離できる仕組み prof.js を実装してみました - latest log
続き書きました: http://uupaa.hatenablog.com/entry/2012/11/02/154337 今朝方ピコーン*1 があったので頑張って1日で実装してみました。 ピコーンの内容は ・今あるソースコードを汚さずに、動的な型チェックのための仕組みを後付で追加する事ってできないかな? ・同時にパフォーマンス・チューニングに必要な情報も取れるのではないか ・宣言と実装を分離する方法があるのではないか ・今まではできなかった、戻り値の動的な型チェックもできるのではないか です。 監視対象の関数のIN/OUTで、呼び出し階層をネストした状態で吐き出すトレース機能 監視対象の関数の呼び出し回数と、実行時間の統計情報 宣言にもとづく引数の動的な型チェックと、戻り値の動的な型チェック などを prof.js として実装してみました。スライドはこちら http://www.slide
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
デバッグする人にやさしいコードの書き方というものがあります - latest log
(ε・◇・)з 分かりやすいコードは、ステップ実行もしやすいのです! (ε・◇・)з ループの先頭に、滅多に通らない大きな塊を配置するのはダメなのです! (ε・◇・)з ポチポチする毎に画面がスクロールするのは、余計なストレスなのです! (ε・﹏・)з ブラウザのデバッガ(IDE) などは、テキストエディタよりも領域が半分程度しかなかったりと、一度にみれる範囲が少ないのです for (i = 0; i < 10; ++i) { if (i === 5) { // 一度しか通らないルート : : : : : : : : : : : : : : : : : : : : : : : : : : : : } else { // 頻繁に通るルート : : // 短い処理 : } } (ε・◇・)з ループの先頭には、頻繁に通る短いコードを配置するのです (ε・◇・)з 滅多に通らない大きな塊は後ろに
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Chrome ブラウザで画像の DataURI を簡単に取得する方法 - latest log
package.json にメタ情報を追加して、もうちょっと便利にしてみる - latest log
サムスンが S Browser 三銃士を連れてきたよ - latest log
Typical JavaScript Module Pattern - latest log
