クライアントサイドJavaScriptのテストカバレッジをCoverallsに投げる - Webtech Walker
CoverallsというGitHubのプロジェクトのテストカバレッジを記録するためのサービスがあって、クライアントサイドのJavaScriptのテストでもできそうだったんでやってみた。 最近のJavaScriptのカバレッジツールはBlanket.jsがいけてるらしいんだけど、これを使ってクライアントサイドJavaScriptのカバレッジをCoverallsに投げるの若干めんどそうだったんで、ponchoっていうラッパーを使ってみた。 ponchoはMocha、PhantomJS、Blanket.jsをうまいことつないでくれるやつで、普通にMochaでテスト書いてるプロジェクトだったらすごく簡単に設定できる。Mocha限定になっちゃうけど。 すでにMochaでテストが書かれてて、test/index.htmlとかでテスト実行できる（ブラウザで開いてMochaのテストが走る）とすると、まず、
JavaScriptでRuby 2.0のRefinements的なのを実装してみる - Webtech Walker
Ruby2.0でRefinementsという、クラスの拡張を特定にスコープに限定する仕組みが導入された（一応使えるけどまだ実験的な機能）。 こんな感じで使う # foo.rb module Foo refine String do def greeting "hello #{self}!" end end end require './foo' using Foo puts 'hokaccha'.greeting #=> hello hokaccha! refineで拡張したString#greetingメソッドはusingしたファイル内でしか使えない。 このような仕組みがあると、どこでどのようにクラスが拡張されたか、わけがわからなくなるという問題を解決できる。 試しにJavaScriptでも実装してみた。 refinements.js こんな感じで使う。 // TestRefineという
Node.jsのFiberを使って非同期処理を同期っぽく書く - Webtech Walker
FirefoxのJavaScriptではバージョンを1.7以上に指定するとyieldが使えて非同期処理を同期っぽく書くことができるようになる。 適当な例だけどこんな感じ。 function run(f) { var g = f(function(x) { g.send(x) }); g.next(); } run(function(next) { var result = []; result.push('foo'); // ここで1秒待つ yield setTimeout(function() { result.push('bar'); next(); }, 1000); // ここで1秒待つ var baz = yield setTimeout(function() { // nextの引数がyieldの返り値になる next('baz'); }, 1000); result.push
Advent Calendarの登録サイトつくりました - Webtech Walker
もうすぐAdvent Calendarの季節なわけですが、いかがお過ごしてしょうか。僕も毎年なんらかのAdvent Calendarに参加したり、去年はSass Less Advent Calendarなどを立てたりしました。 最近はけっこうATNDでAdvent Calendarを募集することが多いみたいなんですが、ATNDは何日に書くことになるのかわかりにくく、順番も決めづらいなどAdvent Calendarの募集には向いてないと個人的には思ってたので、Advent Calendarの登録サイトを作ってみました。 Adventar 任意の日付にボタン一つで登録できるのでATNDよりは簡単でいいかなと思います。 思いついて特急で作ったんでバグってるところとかつかいにくいとことがあると思いますけどちょいちょい直していく予定です。 エントリー公開後にタイトルとURLを入力できるようにする
「ノンプログラマのためのJavaScriptはじめの一歩」の1章が公開されました - Webtech Walker
11/7発売予定の書籍「ノンプログラマのためのJavaScriptはじめの一歩」のはじめにと1章が先行して技評のWebサイトで公開されました。 はじめに 1章 1章はイントロ的なところで、JavaScriptを学ぶ前にJavaScriptの動かし方やデバッグツールの使い方について解説しています。 また、本書籍の2章以降で解説するスライドショーのサンプルプログラムも1章で登場するため公開されています。次のようにボタンを押すと次の画像に行くというだけの、簡単なサンプルプログラムです。 {::nomarkdown} {:/nomarkdown} 技評のWebサイトからも実際に試すことができます。 JavaScriptのソースはこんなかんじです。全体で90行程度、コメントや空行を除くと40行程度です。 /** * 簡易スライドショー * * nextボタンを押したときに画像を切り替える簡単な *
「ノンプログラマのための JavaScriptはじめの一歩」という本を書きました - Webtech Walker
Amazon.co.jp： ノンプログラマのための JavaScriptはじめの一歩 2012/11/7に発売予定です。ハッシュタグは#jsippoなのでみなさんどうぞふるってツイートしてください。 想定している対象 タイトルからもわかるように、デザイナやマークアップエンジニアなどをやっていてプログラムはほとんどわからないというくらいの読者を想定しています。 なので普段JavaScriptを書いている人や、他の言語をやっていて、JavaScriptを学んでみようと思っているような方にはもの足りない内容だと思います。そういう人はサイ本とかパーフェクトJavaScriptを読みましょう。 何を書いて何を書かないかというところの線引に苦労しました。たとえば変数のスコープやprototypeなどはJavaScriptを学ぶ上では避けて通れませんが、そこは敢えて説明を省いています。初めてプログラムを
jQueryのイベントハンドラでreturn falseするとイベントのバブリングが止まる - Webtech Walker
例えばjQueryでスムーズスクロール的なのを実装したとして、a要素のデフォルトの機能を止めるために以下のようにreturn falseってするとイベントのバブリングまでとまるよという話。 $(function() { $('a[href*=#]').click(function() { // スムーズスクロールの処理 ... return false; }); }); つまり $(function() { $('a[href*=#]').click(function(ev) { ev.preventDefault(); ev.stopPropagation(); // スムーズスクロールの処理 ... }); }); としたときと同じ挙動になる。return falseしてるコードは、デフォルトの挙動を止めるのは意図してるけど、イベントのバブリングまで止めるのは意図してない場合が多いんじ
githubがhistory.replaceState使ってた - Webtech Walker
JavaScriptでhistory.pushStateとhistory.replaceStateっていう履歴管理のための仕様があるんですけど、これを使うとlocation.hashを使って実装しているような、ページ遷移をしないでコンテンツを入れ替える（Twitterの新UIみたいな）ものを実現できます。 5.4 Session history and navigation — HTML5 Manipulating the browser history - MDC Doc Center で、これを実際使ってるところは見たことなかったんですけど、githubがいつの間にか使ってました。適当なリポジトリに入ってhistory.replaceStateをサポートしてるブラウザ（現時点ではchromeかsafari）で見るとページ遷移なしで動いて、切り替わるときにURLが書き換わってるのがわかる
郵便番号から住所を検索するJavaScriptの再々発明 - Webtech Walker
先日勉強会で@kotarok先生が見せてくれたjQuery.zip2addrを元に車輪の再々発明（kotarokさんのが再発明と言っていたので）してみました。 jQuery.zip2addrはGoogle日本語入力APIを利用して郵便番号から住所を検索するという画期的アイデアのスクリプトなんですが、これのjQueryとかHTMLに依存してない版です。 DEMO hokaccha’s js-zip2address at master - GitHub zip2address('150-0001', function(address) { address.all; //=> 東京都渋谷区神宮前 address.pref; //=> 東京都 address.city; //=> 渋谷区神宮前 }); ハイフンはあってもなくてもいいです。郵便番号が間違ってたりするとaddressにはundefin
CSSセレクタの高速化の話し - Webtech Walker
続・ハイパフォーマンスWebサイトを読んでCSSセレクタの高速化の話しが面白かった（というか全然知らなくてちょっとびびった）ので紹介します。 セレクタは右から左に解釈される これは正直知らなくて、結構衝撃でした。 #foo .bar {} これはなんとなく#fooを探して、その中の.barを探している気がしてたんですけど、実は.barを探して、その親要素に#fooがあるかを探すそうです。なので特に#fooが必要なければ .bar {} と書いたほうが高速だということ。 また、以下の様に要素名で指定すると、その要素を全て探します。 #foo a {} これは一度a要素を全て探すので、できればaにclassをふって #foo .anchor {} とするほうが高速のようです。（#fooをとるとより高速） 特にユニバーサルセレクタなどは、 #foo * {} とすると、全ての要素の親要素に対して
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
