GitHub - ryanackley/git-html5.js: pure Javascript git implementation for your browserYou signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
Zopfli を Emscripten で移植した際の備忘録 : document
3月10 Zopfli を Emscripten で移植した際の備忘録 Emscripten で Zopfli を移植した際のメモを残します。 思ったより簡単に使えましたが、知らないとハマることも結構多かったです。 導入 自分の環境(Mac)では以下のような感じでやれば OK でした。この辺りは情報が豊富なので適当です。 JS Engine は NodeJS だけで良いっぽいです 必要な環境は homebrew 環境なら brew install llvm だけ？ あとは emscripten を clone するだけ clang, clang++ の位置が llvm-link と違う場合はシンボリックリンクを張るなどして合わせる 使い方 C プログラムから JS へ変換 $ emcc *.c -o hoge.js ライブラリの場合 通常だとリンク時最適化(LTO)によりエントリポイント(
あとから線の編集が可能なお絵描きツールの描画高速化 : document
7月24 あとから線の編集が可能なお絵描きツールの描画高速化 はじめに 2010 年くらいからのんびり開発している趣味のお絵かきツール Diceros の実装について、ドキュメントを残しておいたほうがよさそうなのでこの文章を書きます。 まだ未完成ですが、お絵描きツールは以下の URL で開発バージョンを触ることができます。IE10+, Google Chrome 17+ あたりで動作すると思います。Wacom のペンタブレットプラグイン(MouseEvent)、Android Chrome(TouchEvent)、IE10(PointerEvents) あたりの筆圧に対応してます。 http://draw-imaya.sqale.jp/diceros/ しばらく触るとわかると思うのですが、このお絵描きツールは(VectorLayer/SVGLayerでは)一度書いた線をあとから調整すること
プログレッシブレンダリングでUXを向上させるJS非同期読み込みのベストプラクティス | ゆっくりと…
本ブログでは、サイトの高速化に直結する「JavaScript 非同期読み込み」の話題を多数取り上げてきました。タイトルに釣られてこの記事を見てくれている方なら Google Analytics の非同期コードスニペット はご存知でしょうし、規模の大きいサイトやアプリ用に RequireJS などのフレームワークを使っている方もいるでしょう。 GA も RequireJS も、動的に生成したスクリプト要素を DOM に埋め込む「DOM 挿入法」が用いられています。さらに遡れば、Steve Souders が 2009年4月の記事 ノン・ブロッキングなスクリプト読み込み で、6つの手法に分類しています。 果たしてこれらの方法は、サイトの高速化にとってベストなのでしょうか？ 答えは2012年12月の海外記事にありました。そこで本エントリーでは、日本ではほとんど取り上げられていない Frame i
YetiでJavaScriptのテストを動かす方法
Yeti はYahoo.comがメインで開発してるNode製のTest Runner的なCLIです。 Yeti自体はテストの構文とかは持っていなくて、Test Frameworksに書かれているようにQUnitやJasmine、MochaやYUI Testなどで書かれたテストを動かすツールになっています。 雰囲気的にはTestemに似ていて、上のTest Frameworksで書いたhtmlページを用意して、 キャプチャー用のURLを作って、そこにテストしたいブラウザをキャプチャーして、テストを書いたhtmlを指定して実行させるという感じです。 (意味的にあんまり変わらないですが、先にテスト用htmlを指定して、ブラウザにアクセスさせるという逆の手順もできます) Yeti自体は数年前からあって、Bunyipとかでもインスパイアされてたりします。 動かしてみる QUnitやJasmine、M
HTML5機能を色々使ったスマホ向けWebアプリを作ってみた話：後編 - webとかmacとかやってみようか R
前回のエントリでもお知らせしたように、ドコモゼミ Webアプリラボのコンテストにアプリを出しました！面白かったら下記ページの いいねをお願いします！ かきまる スマートフォンを使いながらも、アナログな感触をもっと楽しんで欲しい。そういう想いで考えられた、デジタルとアナログを繋ぐお絵かきWebアプリです。 . で、今回のエントリでは 前回のHTML5機能を色々使ったスマホ向けWebアプリを作ってみた話：前編 で書き切れなかった残りを解説します。 今回は次のトピックス かわいい文字で表示したい。 音があると楽しい。 スマホとタブレット両方対応。AndroidでもiPhoneでも。 Webフォントでオリジナルフォントを使う Androidがいけてないの一つが、フォントにあると思っています。標準フォントや入っているフォントやが機種によりバラバラ。しかも標準フォントがダサイのが多い。あまりに違うため
ボックスの高さを指定して「続きを読む」リンクを付けられるjQueryプラグイン・READMORE.JS - かちびと.net
この記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。 ちょっと便利そうだったので備忘録。テキストが長いコンテンツをコンパクト化するスクリプトです。方法はいろいろありますけど、こちらは高さ指定という点がシンプルで良かったです。 「続きを読む」リンクを挿入できる、というもの。先発スクリプトは文字数の指定が殆どですが、こちらはボックスの高さを指定するタイプになります。 動作サンプル 続きを読む、のリンクが加わっていますが、特に要素を追加する必要が無いので既存コンテンツに導入しやすそう。 コード <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script> <script src="readmore.min.js"></s
[JS]4種類のエフェクトを備えたタブを簡単に実装できるスクリプト -Tabulous.js
デモ：Flip Tabulous.jsの使い方 実装は非常にシンプルで、エフェクトの設定も簡単です。 Step 1: 外部ファイル 当スタイルシート、「jquery.js」と当スクリプトをhead内に記述します。 <link href='tabulous.css' rel='stylesheet' type='text/css'> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script type="text/javascript" src="tabulous.js"></script> Step 2: HTML HTMLは非常にシンプルで、タブをリスト要素、コンテンツをdiv要素で実装し、divで内包します。
Canvasで超可愛いグラフが作れる！「Chart.js」の紹介 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。デザイナーのハルエです。 最近ちょくちょくグラフを用いた制作物に関わることがあり、案件によってはエンジニアさんにお願いしたりIllustratorのグラフツールで作ったりしていたのですが、なんやかんやで時間とられちゃうんですよね。で、もっとこうオシャレでスマートにさくっとハイテンションで作れるものはないかと探してみました。 そこで見つけたのがこれ。「Chart.js」。 めちゃくちゃ愛くるしい動きをしてくれます。デザインもフラットでいい！ ポートフォリオやプレゼンなんかにもきっと役立ちますよ。 Chart.jsとは？ 折れ線グラフ、棒グラフ、円グラフ、レーダーチャートなど、6種類のグラフが簡単に描けてしまうJavascriptのライブラリです。 HTML5のCanvasを使って描画され、表示の際の気持ちいいアニメーションの動きが特徴的です。とても分かりやすいマークアップなので、
Spectacular - Introduction
Spectacular is a BDD framework for CoffeeScript and JavaScript whose attempt to bring the power of RSpec to JavaScript. Spectacular tries to favor the best practices used for writing better RSpec tests in its design. These are the kind of tests you can write with Spectacular: describe Array, -> given 'item', -> foo: 'bar' it -> should exist itsInstance 'length', -> should equal 0 describe '::index
JavaScript : localStorage と IndexedDB : typeOf 'aki_mana'
localStorage のパフォーマンスについて考察したブログエントリがhtml5jのMLで紹介されたので読んでみた。 現在、JavaScriptコードのインストーラとして活用してるので、気になった次第。 *** localStorageのパフォーマンス問題を再び考えてみる http://www.nczonline.net/blog/2012/04/25/the-performance-of-localstorage-revisited/ まとめとしては、「あんまり気にすんなよ、でも、でかいデータを保存するのはNGな」って感じでした。 リンク先（NCZOnline）も読んだら、「同期的に呼び出すので、大きなサイズだと、JavaScriptの他の処理が止まる」という事が書かれてた。まぁ、紹介されてる通り、でかいデータ保存はNGということ。 冒頭で述べた通り、インストーラに使ってる体験談を：
WebWorkerのデバッグ - 音の鳴るブログ
WebWorker は便利だけどデバッグしにくい。僕は根っからのプリントデバッガーなんだけど、WebWorker は console.log が使えなくて困る。しかし泣いてばかりもいられない。 WebWorker で console.log を使う WorkerConsole というやり方がある。下記は簡略版だけど、WebWorker側に console というグローバル変数を用意して、log とか error メソッドで呼び出し元に引数を postMessage する。そして、呼び出し元の onmessage でコンソールに表示する。 このやり方には若干問題があって、postMessage を通過出来るものしか表示できない。つまりオブジェクトを表示して DevTools で属性を確認したりとかできない。 // worker.js global.console = {}; ["log",
node.js と thread hog の話（３）
[前回までの話へのリンク] ・node.js と thread hog の話（１） ・node.js と thread hog の話（２） では、なぜ今頃になって HTTP Server の c10k 問題（もしくは、thread hog 問題）が顕在化したのだろう。 当時（９０年代の終わり頃）と比べて、もっとも大きく変わったのはCPUの性能である。クロック数は、数百MHzから数GHzへと一桁増えたし、マルチコア化もしている。CPU 性能だけ見れば、当時の数十倍の能力が出てしかるべきである。 しかし、実際の人生はそう簡単ではない。サーバーのパフォーマンスはCPU性能だけが決めるわけではないからだ。そこで、ボトルネックの一つとして注目されはじめたのが、thread の数なのである。 前回述べた様に、thread 一つあたり 2MB～8MB のスタック領域を仮想メモリ空間に確保しなければならな
High Performance Web Frontend
★追記： https://speakerdeck.com/ahomu/high-performance-web-frontend-2013-qiu のほうがブラッシュアップ版です WCAN 2013 Summer (7/6) で行われた、"High Performance Web Frontend…
datalist experiment
datalist experiment By using <datalist>, you can define a list of suggestions you want the user to select from. Users can optionally select from your suggestions as well as typing it by themselves. Options can be tagged with datalist and referenced from the input element using list attribute by its id. See examples below. input[type=text] datalist For text type, datalist simply suggests list of wo
Private Presentation
Private content!This content has been marked as private by the uploader.
JavaScriptの+演算子の謎挙動に迫る » nmi.jp
console.log(+[]); // 0 console.log(+[3]); // 3 console.log(+[null]); // 0 console.log(+[undefined]); // 0 console.log(+["3"]); // 3 console.log(+[1,2]); // NaN console.log(+[true]); // NaN console.log(+[false]); // NaN なぜこのような処理になるのか、JavaScriptの仕様書（ECMA Script Specification 5th）から説明してみましょう。 まず最初、単項+演算子（Unary + Operator）を評価する際に、ToNumberを呼び出すのは前述したとおりです。仕様書の（11.4.6）に書かれています。ではToNumberとはどのような処理でしょうか。
JavaScript イディオム集
JavaScriptでは、初見の人にはさっぱりわからないけれども、ある程度慣れた人は当たり前に使うイディオムが結構たくさんあります。知ってしまえば何てことはないので、私の知っている限りのイディオムとその意味を解説します。 （7/3追記: twitter等で教えていただいた内容を追加しました） +v （数値化） var v = "123"; console.log(+v + 100) // 223 console.log(v + 100) // 123100 vを数値化する方法では最もメジャーです。parseFloat(v) に比べて高速なのに加えて、parseFloatとは細かい挙動が異なります（例えば空文字列の場合、parseFloatならば NaN になりますが、 +v の場合はゼロになります）。必ず数値になることが保証されており、文字列などで数値化出来ない場合はNaNが返ります。 v
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
最近海外で流行りのTwitter,Facebook,Google+1,Analyticsをまとめる非同期スクリプトにはてなを加えてみた | ゆっくりと…
HTML5 のオフライン機能