A Better UI (CLI) for git | Jon Saints
By Jon Saints - 29 Jan 2012 I recently read 3 UI books Design of Everyday Things About Face Don’t Make Me Think. The books did make me think. A lot. A lot about a tool I use everyday… git http://git-scm.com. Git is sweet tool. But, the UI could use some love. The UI can be confusing and inconsistent for newbies. In fact, even after three years of using git, there are commands I still find confusin
Shadow DOM, Pointer Lock and a new CSS Lexer « Peter Beverloo
Published on January 30th, 2012 in Google Chrome, Last Week, tech, WebKit. Version: Chrome 18 929 changes landed at Chromium’s repository last week, whereas WebKit’s received 626, totaling up to 1,555. Highlights include quite some progress on implementing the Shadow DOM and the Pointer Lock API. Web Inspector’s Timeline Panel has been extended with three graphs, all hidden behind the Experimental
非同期メソッドを書きやすく拡張されたIcedCoffeeScript が登場 - mizchi log
IcedCoffeeScript IcedCoffeeScriptなんてのができていた。(フォーク元は最新のv1.2.0) 非同期関連を書きやすくしたもの。その意味ではtame.jsなどとコンセプトは同じ。 生成されるコードはIcedCoffeeScript -> CoffeeScript 使い方 公式サンプルより search = (keyword, cb) -> host = "http://search.twitter.com/" url = "#{host}/search.json?q=#{keyword}&callback=?" await $.getJSON url, defer json cb json.resultsawait の非同期関数の返り値を、defer 受け取ってそのクロージャに吐き出す。直列に記述されているようだが、実際にはawait以下はコールバックの中になる
Using the Fullscreen API in web browsers – Mozilla Hacks - the Web developer blog
Thanks! Please check your inbox to confirm your subscription. If you haven’t previously confirmed a subscription to a Mozilla-related newsletter you may have to do so. Please check your inbox or your spam filter for an email from us. Rodrigo Ayala Excellent!, I didn’t know anything about this feature, a great functionality to show fullscreen videos or play cool games using the whole screen. Note:
ディテール
Webページにおける細かいパーツを正しく実装することがユーザー経験の向上につながるということについて書かれたUI: Getting the Details Rightを読んだ。WordPressの結構な人気テーマでもタブがあたかもパンくずリストのように表示されていたりするし、頭ではわかってても実践にまでは至らないことも多そう。 Getting the Details Rightではいくつかの有名なパターンを例に、こう実装するとユーザーが混乱しにくいという説明をしている。例えばスライドショーでは切り替えの矢印以外にも「いくつくらい画像が用意されていて、今何番目を表示しているのか」を示すドットを使ったインジケーターが重要であるとしている。また、画像や画面の切り替えにも簡単なアニメーションを導入することによって、ユーザーに「どう切り替わったのかをアニメーションで示すことによって戻る方法を示唆でき
スケーラブルな三角形をCSSグラデーションで作る
ひとつ前のエントリで書いたやり方だとスケーラブルじゃないので著しく生産性に欠ける。真っ当にCSSグラデーションを書いてうまく重ねてやるとスケーラブルな三角形を作ることができるようだ。変な書き方を知っているのも良し悪しですね！ Demo: しゅるしゅる動く奴 #2 .test { background-color: red; background-image: linear-gradient(top right, red 0, red 50%, transparent 50%, transparent 100%), linear-gradient(top left, white 0, white 50%, red 50%, red 100%) ; } これがベースでCSSグラデーションを使って斜めのグラデーションを作り重ねてやるというもの。複数の背景画像を指定した場合は先に書いた背景画像が手
PSD.js by meltingice
A Photoshop PSD file parser in Javascript for NodeJS and the browser. View the Project on GitHub meltingice/psd.js Download ZIP File Download TAR Ball View On GitHub A general purpose PSD parser written in Coffeescript. Based off of PSD.rb. It allows you to work with a Photoshop document in a manageable tree structure and find out important data such as: Document structure Document size Layer/fold
NFCの可能性に挑戦したアイディアソンとハッカソン 前編
近距離無線通信規格「NFC（Near Field Communication）」を使った開発イベント「NFCアイディアソン」と「NFCハッカソン」が2012年1月20日、21日に東京・銀座のリクルート メディアテクノロジーラボ（MTL）Cafeで開催された。NFCは非接触型の近距離通信規格で、電子マネーの「Edy」や「Suica」などが利用できるFeliCaもNFCの一種。昨年末に発売された最新スマートフォン「Galaxy Nexus」や「Galaxy S2 LTE」などに搭載されており、いま世界レベルで注目を集めている。 今回のイベントでは、開発前のアイディア出しを行う「NFCアイディアソン」と、実際に開発を行う「NFCハッカソン」を開催。両日ともNFCに興味を持つ開発者やデザイナーが多数集結。タッチするだけで情報をやり取りできるNFCの特性を活用した新しいサービスやシステムの開発に挑戦
THREE.jsのソース読みサポートサイト作りました - ずっと君のターン
皆さんTHREE.jsは単なるWebGLのラッパーと思っているかもしれませんが、実際はそれだけではなくて、テクスチャローダーや視点管理用コントローラーなんかの補助クラスに加えて、スプライトやパーティクルシステムまで付いていて、たぶん見たことない人が考えているよりいろいろできます。 ただ、いかんせんまともなドキュメントがないので、それらを実際に使うには、そのクラスを使っている例を見つけて、さらにそれらが使われている部分を検索して使い方を調べるしかありません。 正直面倒くさいので、ブラウザで少しだけ楽にソースを眺められるサイトを立ち上げました。 http://threejsdoc.appspot.com/doc/index.html ただしこれはあくまでもソース読むのを手伝うためのツールです。何やってるクラスなのかとか、どうやって使うかとかは、ファイル名やインスタンス変数から推測したり、サンプ
HTTP 2.0はグーグルのSPDYがベースになる？ 議論開始の提案がIETFで
「新しいバージョンのHTTPについての作業を開始する機が熟したのではないか」。HTTP 1.1仕様の改版を議論しているIETFのHTTPbisワーキンググループのメーリングリストに1月24日、このようなメッセージが議長のMark Nottingham氏から投稿されました。 現在議論されているのは、RFC2616で規定されたHTTP 1.1仕様のバグや問題の修正などで、基本的にこれまでのHTTPと互換性があることを前提にした仕様です。これが2月にラストコールとなることから、そろそろ次のHTTPについての議論をスタートさせよう、と呼びかけが始まったのです。 HTTP 2.0の議論を含む新しい憲章案も メッセージは、「We're getting close to Working Group Last Call.」（ワーキンググループの作業もラストコールに近づいてきた）と始まります。もうすぐ4年あ
どこからでも入力して一瞬で同期するメモツール、Day One
最近導入して、あまりの使いやすさに、あっという間にモレスキン・デイリーダイヤリーを脅かす存在になっているのが、Mac / iOS 用のメモツール、Day One です。 Mac、iPhone、iPad を使っているなら、どこからでも入力して iCloud / Dropbox で一瞬で同期することができる「ライフログ」アプリという分類になるでしょうか。 Day Oneはできることが最初から「テキストのメモを取る事」に限定されています。一日に一つのメモではなく、一日にいくつもメモを追加して、カレンダー形式でみることができます。 この手のアプリでは、Mac 版は使いやすいけれども、iOS 側は不便だったり、iPad 版がなかったりといった「利用の偏り」があるアプリが多く見られます。いつでも利用できるとは限らないために、それが利用のハードルになったりするわけです。 しかし Day One のつごい
コード書けるインフラエンジニアの深刻な不足問題
インフラエンジニアを厳密に定義しないであえて使うことをお許しください。 だいたいは、ゼロスタートの山崎さんの記事を見てほしい。 巷で聞かれる、「インフラエンジニアの深刻な不足問題」は、実は「コード書けるインフラエンジニアの深刻な不足問題」であり、それは「コード書けるインフラエンジニアへの深刻な給与不足問題」なのではないかと思うのです。 インフラエンジニアに15年前にはいった人(私は大学卒業が15年前なので感覚で語れるのはこのころから)は特にインフラエンジニアなどとは呼称されていなかったはずです。オープン系サーバ屋、オープン系ネットワーク屋、汎用機のプログラマ、IPのネットワーク、ATM、sonet、INSのエンジニアなどのように分類されていたように記憶しています。もちろん複数の分野を持つ人、持たざるをえなかった人が時代を推進していたことは事実です。しかし、そのように区分されて業界にはいって
Adobe Revelは理想の写真保管ツールかもしれない - @hitoshi annex on hatena
デジカメを使うようになって約10年。この10年は、撮影した写真の保管方法で悩む10年でもありました。フィルムと違って、デジカメは何枚でも気楽に撮影できてしまいます。気づけば、一日で数百枚撮ってしまうことだって珍しくありません。それをどう保存していけばいいのでしょうか。 HDDなどのストレージ製品の価格はどんどん安くなり続けていますから、いつかは「いくらでも無限に保存できる」ほどの膨大な容量を持った外付けHDDが現れるだろうと期待していた時期もあります。しかしよく考えてみたらそれと比例して、デジカメの高画素化も進んでいるわけでして。写真一枚あたりのファイルサイズもどんどん大きくなって、今やRAWで撮影しようものなら、一枚が数十MBにもなります。結局は常に「写真を保存したくてもディスクが足りない」的な問題との戦いは続くのでありました。 さらに先日は、外付けで使っていたHDDがぶっ飛ぶというトラ
Webサービスの埋め込み用HTMLを手軽に取得するためのWebAPI『QuoteIt』を作りました - みずぴー日記
# この記事は名古屋クリスマスハッカソン2011で書いてます。メリークリスマス! GistとかTwitterとかの最近のWebサービスは他のページに埋め込めるようになっていますね。ただ、サービスごとに埋め込むためのHTMLコードが違うので、いちいち調べるのが面倒ですよね。 そこで各種Webサービスの埋め込み用HTMLを統一的に取得できるWebAPI『QuoteIt』を作りました。しかも、誰でも引用元を簡単に追加することができます。 http://quoteit.heroku.com/ 使い方 URLを指定すると、埋め込み用のHTMLを取得できます。 例えば、 http://twitpic.com/73wiodを埋め込みたい場合は、 http://quoteit.heroku.com/clip.html?u=http%3A%2F%2Ftwitpic.com%2F73wiod にアクセスするこ
開発者向けリアルタイムチャットアプリケーション『AsakusaSatellite』 0.7をリリースしました - みずぴー日記
前回のバージョンアップからだいぶ時間が空いてしまいましたが、AsakusaSatelliteの新バージョンのリリースを行ないました。 前回まではSkypeで相談しながら開発するというスタイルでした。しかし、今回のバージョンアップで機能が多数追加されたことによりAsakusaSatelliteで相談しながらAsakusaSatelliteを開発するというドッグフードスタイルによる開発が可能となりました。 AsakusaSatelliteの特徴 AsakusaSatelliteは以下のような機能をもった開発者向けチャットアプリケーションです。 WebSocketを用いたリアルタイムチャット シンタックスハイライト・Redmineチケットリンクなど開発者に特化した機能 全文検索 プラグインによる自由な拡張 今回のバージョンアップにより追加された機能 v0.7 のバージョンアップのキーワードは「A
MouseEvent: button property - Web APIs | MDN
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015. Learn moreSee full compatibilityReport feedback The MouseEvent.button read-only property indicates which button was pressed on the mouse to trigger the event. This property only guarantees to indicate which buttons are pressed during events caused by pressing or
JavaScriptの動かないコード (中級編) IEでスコープチェインにdocumentが補完されるように見える不思議 - 主に言語とシステム開発に関して
連載目次へ 以下のJavaScriptコードが意図した動作をしないのは，なぜですか。（制限時間１分） やりたい事： alertとかgetElementByIdなどの関数を，１文字の変数に代入して利用する。（つまり，ショートコーディングを試みる。） <html> <body> <input type="button" onclick="f()" value="１文字関数のテスト"> <div id="my_div">fuga</div> <script language="JavaScript"> function f(){ var a = alert; a( "hoge" ); // 関数を１文字で利用 var g = document.getElementById; var elem = g("my_div"); // 関数を１文字で利用 alert( elem.innerHTML );
3D CSS Tester
Parent container Perspective "Cube" container Preserve 3D Automatic rotation X Y Z Cube Coordinates Cube x Cube y Cube z Cube rotation Cube rotate x Cube rotate y Cube rotate z Front logo (MDN) Front logo Coordinates Front x Front y Front z Front logo Rotation Front rotate x Front rotate y Front rotate z Front Backface visibilily
WebサイトのIE10対応を支援するツール、「IE10 Compact Inspector」登場
IE (Internet Explorer)の開発チームは、既存のWebページをIE9に対応させるための分析ツール「IE9 Compat Inspector」を提供しているが、今回新たにIE10に対応させるツール「IE10 Compat Inspector」を発表した。「Compat Inspector」は、既存のサイトがどの程度IE9またはIE10に対応しているのかを分析するJavaScriptツール。閲覧時に動的に処理を実行するという特徴がある。 Compat Inspectorを利用するには、確認するページの一番最初にCompat InscpectorのJavaScriptコードが読み込まれるように次のコードを挿入するか、またはFiddlerを利用してオンザフライで自動的にCompat Inscpectorの機能を利用する方法がある。 <script src="http://ie.m
iBooks AuthorでHTML5の電子書籍作ってみた (1/4)
アップルが1月20日に発表した電子書籍作成ツール「iBooks Author」。さっそくダウンロードして使ってみた方も多いのではないでしょうか？ アップルは、学生が使用する電子教科書の作成を目的としたツールとしていますが、iBooks Authorを使えば、画像や動画などのリッチコンテンツを埋め込んだインタラクティブな電子書籍を手軽に作成できます。 注目は、電子書籍の中にHTMLも埋め込めることです。つまり、自分で作成したHTML5+JavaScriptのプログラムを組み合わせて、よりインタラクティブな電子書籍を作成できるのです。 実際に試してみると、MP3形式などのサウンドは埋め込めないなど、若干の制限はありますが、ちょっとしたゲームや観光案内コンテンツなどを1つのパッケージとして配布できるのはメリットです（ただし、有料で販売する場合はiBooks Storeを介する必要があります）。
Closure Inspector Guide - Closure Compiler - Google Code
Documentation Closure Compiler Service UI Getting Started Closure Compiler Service API Getting Started Tutorials Communicating with the API Compressing Files with the API API Reference Closure Compiler Application Getting Started Closure Inspector Guide Closure Inspector is an extension to Firebug, the Firefox debugger extension. Closure Inspector adds three powerful features to Firebug: source ma
ユニークなボックスタイプのナビゲーションメニューを実装するjQueryプラグイン・BoxyMenu - かちびと.net
いろいろとアイデアが参考になった ので備忘録。ボックスタイプのナビ メニューで、ユニークなUIです。こ ういうアイデアというか、発想が出 てくるようになりたいです。 というわけでただのメモ。僕では思い浮かばないアイデアで素敵だったので衝動的に書き留めておきます。 一見変哲も無いコンテンツですけど・・・どうもドロップダウンメニューにして当然、みたいな流れが自分の中にあったのでいい刺激になりました。 こんな感じ。ドロップダウンも子要素を隠すものですし、同じように隠すならこういう形もありだなぁと思いました。子要素が少ないことが条件ですけど・・・ 手抜きですけどサンプル用意しました。 Sample ピンを押すとマウスを離しても戻らず固定できます。cookie使うのもありですね。これはいいユーザビリティかもしれない。 ただ、最初はピンを押せるって分かりませんでした。もう少し分かりやすく明示してあげた
vimからEvernote - sugilogのブログ
vimからEvernoteを使ってしまおうといういい感じのプラグインを見つけたので、使ってみた。 （しかも日本人！文字コードやヘルプが日本語で見やすい。ありがたや） http://wp.krks.net/2011/05/vimからevernoteを編集するプラグインevervimを作成しました。/ で、さっそく使ってみようとしたら、pythonが必要ということで、vimをmakeしなおします。 で、mercurialのインストールまで戻ったので、おさらいがてら全部書いておきます。 mercurial http://mercurial.selenic.com/ cd ~/src wget http://mercurial.selenic.com/release/mercurial-1.8.1.tar.gz tar xzvf mercurial-1.8.1.tar.gz cd mercuria
SourceMapでminifyされたJavaScriptを元に戻してみた - @vvakame の日記
当初の期待としては、CoffeeScriptをコンパイルしたJavaScriptにSourceMapで元のCoffeeScriptヒモ付てそのままデバッグ出来るようになんないのかなー？？て思ったんだけどなんか無理そうでした(結論)。 で、調査しはじめてみたんだけど全然情報なくてビビった。 CSS Selector Profiler, Source Mapping and Software Rendering « Peter Beverloo に情報がだいぶまとまってて超助かりました。 なんかWebKitの中の人なんじゃないのレベルで色々書かれててびっくりします。 Source Map Revision 3 Proposal - Google ドキュメント をざらーっと眺めてみたところで、JavaScript以外の言語にはなんか対応してなさそうだなーっていうのが分かってがっくり。字句解析した
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://openhri.net/software/openjtalk/
New community features for Google Chat and an update on Currents
Google Code Archive - Long-term storage for Google Code Project Hosting.
Javascript Madness: Mouse Events
『Amazon.co.jp: ソーシャルデザイン (アイデアインク): グリーンズ: 本』へのコメント
#5370 (All drag & drop events fail in IE9) - jQuery UI - Bug Tracker
691059 - "Illegal operation on WrappedNative prototype object" on store.sony.ca's prototype.js
#地獄の美夢沢
Google Code Archive - Long-term storage for Google Code Project Hosting.