タグ

ブックマーク / tech.nitoyon.com (9)

  • grunt-contrib-watch が重いので grunt-este-watch を試したら幸せになった

    最近、Grunt と grunt-contrib-watch を使っているのだけど、grunt-contrib-watch が CPU を消費しがちである。 watch 対象のファイルが少ないうちは grunt-contrib-watch は問題なく動くんだけども、ファイル数が増えてくると CPU の消費量が増えてくる。自分の環境では、1,000 個ぐらいのファイルを監視していると、常時 10% 程度 CPU を消費している。 この問題は既知であり、FAQ には次のように書いている。 たくさんのファイルを監視している場合、デフォルトの interval の値が小さすぎるかもしれない。options: { interval: 5007 } のようにして増やしてみてほしい。詳しくは issues #35 と #145 を参照のこと (※日語訳は私によるもの) Another reason i

    grunt-contrib-watch が重いので grunt-este-watch を試したら幸せになった
  • Git にパッチを送って取り込まれた話

    Git の挙動に変なところを見つけたので、パッチを作って Git のメーリングリストに投げてみたところ、何度かのレビューを経て、無事に取り込まれた。 Git に貢献したい人とか、オープンソース開発の流れに興味がある人もいるだろうから、作業の流れを書いておくことにする。 1. バグを発見する 何はともあれ、修正したいところを見つけるところから。 先日、git difftool --dir-diff が便利すぎて泣きそうです という記事を書いたが、difftool --dir-diff の挙動を調べているうちに、一時ファイル書き戻し条件が変なことに気づいた。 手元のバージョンが古いのかとも思ったが、master ブランチでも再現したので、ちょっくら深入りしてみた。git difftool は Perl スクリプトだったので、ソースコードに print を追加しつつ挙動を探っていった。しばらく調

    Git にパッチを送って取り込まれた話
  • Node.js 0.12 では yield が使えるのでコールバック地獄にサヨナラできる話

    Node.js の次のメジャーバージョン 0.12 で yield が使えるようになります。 そのおかげで、JavaScript のコールバック地獄に光が差し込むのです。ああ、さようなら、コールバック地獄。 7 年ごしで実現した yield 2006 年、Firefox 2 のリリースと同時に yield は JavaScript 界に登場しました。随分と前の話ですね。 登場した当時は JavaScript 界隈でけっこう話題になっていました。 JavaScript 1.7 の yield が凄すぎる件について - IT戦記 Latest topics > JavaScript 1.7のyield文ってなんじゃらほ - outsider reflex JavaScript 1.7 の新機能: Days on the Moon 登場したときにはインパクト大きかったものの、結局 Firefox

    Node.js 0.12 では yield が使えるのでコールバック地獄にサヨナラできる話
  • git difftool --dir-diff が便利すぎて泣きそうです

    Git の 1.7.11 から git difftool コマンドに --dir-diff というオプションが追加されたのですが、これがライフ チェンジングだと思ったので紹介します。 --dir-diff 登場以前の git difftool は「ファイルごとに順番に差分を表示していく」ことしかできず、使い勝手はいまいちでした。それが、--dir-diff オプションの登場で状況が一変したわけです。 こんな感じの使い心地だよ ある Git レポジトリーで dir1/a.txt と dir2/c.txt を編集したとしましょう。 この状態で git difftool --dir-diff または git difftool -d を実行してみると・・・。 はい、差分のあるファイルが一覧で表示されました。 (difftool に WinMerge を設定して、メニューから [ツリー表示] を有効

    git difftool --dir-diff が便利すぎて泣きそうです
  • ファイル編集したら即ブラウザー再読込させる LiveReloadX を作った

    Web 開発してると、ソースを編集して、ブラウザーをリロードして、という作業の繰り返しになりがちだ。ソースを編集したら、自動でブラウザーをリロードしてくれるような夢のツールがあれば便利そうだ。 この分野では CodeKit や LiveReload などが有名なんだけど、もれなく有料だったり GUI だったりする。そこで、LiveReload のオープンソースな部分を参考にしつつ、コマンドラインで使える LiveReloadX というものを作ってみた。 特長はこんなところ。 Node.js を使ってるので Windows/Mac/Linux 問わずに動かせる 開発環境のブラウザーだけでなくスマートフォンのブラウザーもリロードできる 無料 インストール方法 インストールは超簡単! Node.js をインストールする。 コマンドラインで npm install -g livereloadx

    ファイル編集したら即ブラウザー再読込させる LiveReloadX を作った
  • これがスマートフォン向けサイトを作るときの viewport 設定3パターンだ

    スマートフォン向けの Web サイトを作るとき、viewport の設定次第で使い勝手が大幅に変わる。 最近はレスポンシブ Web デザインが流行してるけども、その大前提として viewport の設定パターンを抑えておくのは重要だろう。 この記事では、viewport の設定によって、見た目・使い勝手がどう変わるかを解説する。 パターン1: 何も考えずに HTML を書く まずは、viewport を指定せずに、単純な HTML をスマートフォンで表示してみる。 <!DOCTYPE html> <head> <meta charset="utf-8"> </head> <body> <img src="/images/logo-ja.png"> <p>色んな素材がごった煮になった様子をお椀で表現しています。 湯気が<strong>「てっく」</strong>に見えるのが隠し味になっていま

    これがスマートフォン向けサイトを作るときの viewport 設定3パターンだ
  • jQuery 1.9 のソースマップ対応で圧縮版でもデバッグが簡単になった話

    jQuery 1.9 がリリースされました。1.9 の新機能の中ではあまり注目されていませんが、ソースマップに対応したのが地味に便利そうです。 というのも、圧縮版の jquery.min.js を使っていると 何か問題が起きたときにスタックトレースを眺めても jQuery の部分が意味不明 デバッガーで jQuery のソースにステップインしても意味不明 といった理由で、開発中には非圧縮の jquery.js を使うことが多かったわけです。 それが、1.9 からはソースマップに対応したので圧縮版のままでのデバッグが簡単になってます。 超簡単な使い方 ソースマップに対応したブラウザーは現時点では Google Chrome のみなので、Google Chrome の手順を説明します。 (Firefox はソースマップへの対応を計画中らしい) 事前準備を忘れずに Google Chrome

    jQuery 1.9 のソースマップ対応で圧縮版でもデバッグが簡単になった話
  • GitHub で clone するときは SSH じゃなく HTTP を使ったほうが高速

    GitHub には clone するための URL として [HTTP]、[SSH]、[Git Read-Only] の 3 つが用意されている。 いままで、SSH に慣れているという理由だけで [SSH] を利用していたのだけど、「SSH は転送速度が遅い」という問題がある。 SSH だとこんなに遅い… さっき、[SSH] で clone してみたら 20~60 KiB/s 程度の速度しか出なかった。 $ git clone git@github.com:nitoyon/tech.nitoyon.com.git Cloning into 'tech.nitoyon.com'... remote: Counting objects: 8856, done. remote: Compressing objects: 100% (2125/2125), done. remote: Total

    GitHub で clone するときは SSH じゃなく HTTP を使ったほうが高速
  • Google Maps をジオラマ風にしてみた - てっく煮ブログ

    GoogleMapsAPI, asGoogle Maps をジオラマ写真風にすると印象が変わる、というアイディアが チルトシフトの新しい使い方 その2 に書いてあった。おもしろそうなのでリアルタイムに Google Maps をジオラマ風に表示するものを作ってみた。好きな場所を表示できるので、地球全体がジオラマにしてしまった。簡単な使い方:上部の検索欄に英語で入力して移動左のコントロールは Google Maps と同じShift+ドラッグで視点移動日各地を巡ってみた東京駅前車がミニチュア風でかわいい。京都御所箱庭になりました。大阪駅前線路と高速道路とビル群。 どうぞご利用くださいあなたの街をジオラマ風に!ソースコードチルトシフトのエフェクトは「彩度をあげる」「周りをぼかす」「周りを暗くする」ことで実現している。ソースコードは以下に(map_1_20.swc、minimalcomps、T

  • 1