GoでEnd To End Testingフレームワーク書いた - Webtech Walker

2014/10/17 67 users YAML Actions テストフレームワーク Visit

SeleniumラッパーなテストフレームワークをGoで書いてみた。初Go。 https://github.com/hokaccha/sprinkler GoのコードでE2Eテストのコード書けてもあんまり嬉しくないのでYAMLで書けるようにした。 scenarios: - name: Hello sprinkler! actions: - visit: http://www.google.com -... 続きを読む

peco、ghq、gh-openの組み合わせが捗る - Webtech Walker

2014/06/24 86 users peco Poetry GHQ GitHub 思索

それぞれのツールは以下を見ればどんなのかわかると思う。 peco（Simplistic interactive filtering tool）を作った話 : D-7 ghq: リモートリポジトリのローカルクローンをシンプルに管理する - 詩と創作・思索のひろば (Poetry, Writing and Contemplation) GitHubのレポジトリURLを開くgh-openコマンド - u... 続きを読む

GitHubクローンのGitLabを1分で使えるようにする - Webtech Walker

2014/05/24 65 users GitLab GitBucket ふり GitHubクローン

元ネタ GitHubクローンのGitBucketを10秒でインストールした - rela1470のにっき GitHubクローンのGitLabを５分でインストールした - アルパカDiary Digital Oceanはこんな感じでサーバーつくるときに色んなアプリケーションがプリインストールされたイメージを選べる。 GitLabもこの中にあるので、これを選んでサーバーをつくると、GitLabがインス... 続きを読む

Re: Single Page Application ではない場合 JavaScript コードのエントリポイントはどこにあるべきか？ - Webtech Walker

2014/03/31 68 users エントリポイント ルーティング SPA 方法 自分

Single Page Application ではない場合 JavaScript コードのエントリポイントはどこにあるべきか？ - @kyanny's blog Backbone.Routerは基本的にhistory APIやhashchangeを使ったSPAのためのルーティングをしてくれるものなので、SPAじゃない場合に使うのはあんまりオススメできない。 方法は色々だと思うけど、自分の場合はそ... 続きを読む

クライアントサイドJavaScriptのテストカバレッジをCoverallsに投げる - Webtech Walker

2014/01/08 52 users テストカバレッジ クライアントサイド GitHub 若干めん

CoverallsというGitHubのプロジェクトのテストカバレッジを記録するためのサービスがあって、クライアントサイドのJavaScriptのテストでもできそうだったんでやってみた。 最近のJavaScriptのカバレッジツールはBlanket.jsがいけてるらしいんだけど、これを使ってクライアントサイドJavaScriptのカバレッジをCoverallsに投げるの若干めんどそうだったんで、po... 続きを読む

Pull RequestとCIを使ったGitHub Flowなブログ環境を作ってみた - アインシュタインの電話番号

2013/11/11 77 users アインシュタイン pull request 煮ブログ 話題

今から1年ほど前に、自分でお気に入りのブログ環境を構築する記事が話題になっていて、それを読んだ時から、自分用のブログ環境を作りたいと思っていた。 俺の最強ブログ システムが火を噴くぜ - てっく煮ブログ 俺の最強ブログシステムも火を噴いてたぜ - Webtech Walker 当時はそれどころではなかったこともあって、なかなか着手できずにいたんだけど、今年の7月頃から作り始めて、最近そこそこ希望通... 続きを読む

静的サイト開発ツールとしてのMiddlemanとGrunt - Webtech Walker

2013/09/03 146 users Grunt Middleman concat Sass CSS

最近自分の周りを見ると、フロントエンドの開発ツールといえばGruntをみんな使ってるんだけど、Middlemanを使うのもけっこういいんじゃないかと思ったので比較してみる。 実現したいこと 例えば次のようなものをつくりたいとする。 HTMLは数ページ〜十数ページくらい（ヘッダ・フッタくらいは共通化したい） JSはconcatしてminifyしたい CSSはSassを使いたい 開発時はwatchした... 続きを読む

ブログをJekyllからmiddlemanに移行してTravis CIでGitHub Pagesにデプロイするようにした - Webtech Walker

2013/08/26 68 users Middleman jekyll GitHub 興味 ブログ

ちょうど一年くらい前にWordPressからJekyllに移行したんだけど、今回middlemanで作りなおしてみた。 hokaccha/webtech-walker - GitHub 特にJekyllに不満があったわけでもなく単に技術的興味によるもの。 middleman Middleman: Hand-crafted frontend development middlemanはほぼJekyl... 続きを読む

Node.jsのFiberを使って非同期処理を同期っぽく書く - Webtech Walker

2013/04/10 64 users yield Ｒｕｎ function NEXT Fiber

FirefoxのJavaScriptではバージョンを1.7以上に指定するとyieldが使えて非同期処理を同期っぽく書くことができるようになる。 適当な例だけどこんな感じ。 function run(f) { var g = f(function(x) { g.send(x) }); g.next(); } run(function(next) { var result = []; result.p... 続きを読む

「ノンプログラマのためのJavaScriptはじめの一歩」の1章が公開されました - Webtech Walker

2012/10/31 375 users ノンプログラマ JavaScriptはじめ デバッグツール

11/7発売予定の書籍「ノンプログラマのためのJavaScriptはじめの一歩」のはじめにと1章が先行して技評のWebサイトで公開されました。 はじめに 1章 1章はイントロ的なところで、JavaScriptを学ぶ前にJavaScriptの動かし方やデバッグツールの使い方について解説しています。 また、本書籍の2章以降で解説するスライドショーのサンプルプログラムも1章で登場するため公開されています... 続きを読む

mochaとphantomJSとtravis-ciでフロントエンドJavaScriptのテスト - Webtech Walker

2012/10/23 90 users Travis-CI Jenkins PhantomJS 内容

東京Node学園祭2012 アドベントカレンダーの9日目です。Node.jsとほとんど関係ないうえに内容がけっこう薄い感じなった気がするんですけど気にせずいこうと思います。 フロントエンドのJavaScriptをテストするとき最近はいつもmochaを使ってるんですが、やはりJenkinsとかtravis-ciを使って自動テストもしたいと思って試してみました。 hokaccha/mocha-phan... 続きを読む

jQueryのイベントハンドラでreturn falseするとイベントのバブリングが止まる - Webtech Walker

2012/09/20 76 users イベントハンドラ jQuery functio return

例えばjQueryでスムーズスクロール的なのを実装したとして、a要素のデフォルトの機能を止めるために以下のようにreturn falseってするとイベントのバブリングまでとまるよという話。 $(function() { $('a[href*=#]').click(function() { // スムーズスクロースの処理 ... return false; }); }); つまり $(functio... 続きを読む

iOSのSafariで特定のfont-sizeのときの謎の隙間 - Webtech Walker

2011/03/30 64 users iOS font-size padding iPhone 隙間

結構前に書いたの公開してなかった。iOSのSafariでなぜか特定のfont-size（11px、10px、9px）のときだけマルチバイトの幅計算がおかしいのか、折り返し位置がずれるという件。DemoこれをiPhoneで見るとこんな感じになる。こんな感じ。11px、10px、9pxのときに右側に隙間が空いてるがわかると思います。これは特にpaddingとかとってるわけではなくて、このfont-si... 続きを読む

flipsnap.jsというのを書いた - Webtech Walker

2011/03/28 149 users

最近タッチデバイスでスワイプしてスライドするようなUIを書く機会が多いので汎用的に使えるようにしてみた。demo（webkit only）pxgrid/js-flipsnap - GitHubiScrollでもsnapっていう機能使うと同じようなことができるんだけど、iScrollでこれをやろうとするとこのスクロールが効いてるところはネイティブの縦スクロールが効かなくなるという問題があって、それを... 続きを読む

history.pushStateでページ遷移するjQueryプラグイン書いた - Webtech Walker

2011/02/23 87 users jQuery Chrome jQueryプラグイン ブラウザ

history.pushStateを汎用的に使えるようにするためにjQueryのプラグインとしてjquery.smarthistory.jsというのを書いてみました。jquery.smarthistory.jshistory.pushStateをサポートしてるブラウザではhistory.pushStateを使って、サポートしてないブラウザでは何もしません（普通に遷移する）。今だとchrome、sa... 続きを読む

TitaniumでiPhoneアプリを申請に出すときのフロー - Webtech Walker

2011/02/22 85 users Titanium iPhoneアプリ フロー 申請

アプリ申請始めてで色々細かいところで色々はまったのでメモ。Provisioning ProfileをつくるまずProvisioning Profileをつくります。以下の記事が参考になると思います。目指せ！iPhoneアプリ開発エキスパート：第10回　App Storeでアプリを公開｜gihyo.jp … 技術評論社まずはまったのが、ここでDistributionのタブがでなかったこと。これはアカ... 続きを読む

CSSセレクタの高速化の話し - Webtech Walker

2010/05/18 927 users CSSセレクタ foo セレクタ bar 高速化

続・ハイパフォーマンスWebサイトを呼んでCSSセレクタの高速化の話しが面白かった（というか全然知らなくてちょっとびびった）ので紹介します。 セレクタは右から左に解釈される これは正直知らなくて、結構衝撃でした。 #foo .bar {} これはなんとなく#fooを探して、その中の.barを探している気がしてたんですけど、実は.barを探して、その親要素に#fooがあるかを探すそうです。なので特に... 続きを読む