Pierre-Henri Lavigne

日々のインスピレーション5

2011-03-09T01:55:00.000+09:00

「Neon Manga」 via @abduzeedo
「Back Home」
Back Home from Gold Panda on Vimeo.
「Mountain of dust and gas rising in the Carina Nebula」Hubblesite.org

2011.03.02のリンク

2011-03-03T01:47:00.000+09:00

JS Console、ジャバスクリプトのコンソール、クロスブラウザー、スマートフォンも
The M Project、モバイルアプリケーションの作成：HTML5のジャバスクリプトフレームワーク
JSONP with jQuery, MooTools, and Dojo

jQuery Templates in Just 424 Seconds from Rebecca Murphey on Vimeo.

jQueryのプラグイン：始めに

2011-02-14T00:58:00.000+09:00

/**
 * @fileoverview
 * 元のバージョン
 * Copyright (c) 20XX 元のライター
 * [  コードのリンク  ]
 * [ ライセンス ]
 *
 * [ 自分のプラグインの名前 ]
 * @version [ X.X ]
 * @requires [ jQuery v1.X.X or above ]
 * [ プラグインのリンク ]
 * [ プラグインのコピーライト ]
 * [ プラグインのライセンス ]
 *
 */

(function( $ ) {

$.customPlugin = {};
$.customPlugin.o = [];
$.customPlugin.op = {};
$.customPlugin.defaults = {
    key1: value1,
    key2: value2
};

$.fn.customPlugin = function( op ) {

    return this.each(
        function() {

            var s = this.serial = $.customPlugin.o.length;
            var o = $.extend( {}, jQuery.customPlugin.defaults, op );
            $.customPlugin.o[s] = $.customPlugin.op = o;

           // ここでスタート！！！

        }
    );
};

})( jQuery );

日々のインスピレーション4

2010-12-31T01:16:00.000+09:00

「Space Chase」 by ilovedust via AOL
「Adam Isaac Jackson」 via @abduzeedo
「Server Move」 via @songbirdteam

Wordpressのサムネイルのサイズ

2010-12-24T00:28:00.000+09:00

写真のサイズ

デフォルト記事の写真サイズを決めることが出来る：

投稿パネルのメディアメニューから写真ボタンを押して写真の設定をします
「メディア」メニューの「ライブラリ」から写真の設定でサイズを決めることが出来ます

サムネイルのサイズ

the_post_thumbnail( $size, $attr )

テーマのテンプレートの中では４つのサイズがあります：

thumbnail ( 150px * 150px )
medium ( 300px * 300px )
large ( 1024px * 1024px )
full

写真のリサイズすることが出来ません。プラグインを使わなければいけません。
プラグインを使わない場合、デフォルトサイズを決めることが出来ます：「設定」のメニューで「メディア」をクリックして、「メディア設定」のパネルを出します。

ターミナルのフォント

2010-10-31T18:52:00.000+09:00

先月「Thomas Fuch」はターミナルのいいフォントを探し終えた。The long search for a terminal font is over。私の設定を説明します。ウブントゥを使います。

sudo apt-get install msttcorefonts
wget http://github.com/downloads/andreberg/Meslo-Font/Meslo%20LG%20DZ%20v1.0.zip
unzip Meslo\ LG\ DZ\ v1.0.zip
cd Meslo\ LG\ DZ\ v1.0
sudo mkdir /usr/share/fonts/truetype/meslolgdz
sudo mv *.ttf /usr/share/fonts/truetype/meslolgdz
fc-cache -f -v

CMSでjQueryのアコーディオン

2010-10-22T03:11:00.000+09:00

HTMLのコード

<div id="accordion" data-current="accordion-header2">
    <h3 id="accordion-header0"><a href="#section1">タイトル1</a></h3>
    <div>
        <p>いいですね!</p>
    </div>
    <h3 id="accordion-header1"><a href="#section2">タイトル2</a></h3>
    <div>
        <p>あれ？<br />大丈夫ですか？</p>
    </div>
    <h3 id="accordion-header2"><a href="#section3">タイトル3</a></h3>
    <div>
        <p>ありがとうごあいます</p>
        <ul>
            <li>アイテム</li>
        </ul>
        <a href="#othercontent">ちがうコンテンツへ</a>
    </div>
</div>

jQuery

$(window).ready(function(){
    var $accordion = $("#accordion");
    $accordion.accordion({
        autoHeight: false,
        collapsible: true,
        active: $( "#" + $accordion.data("current") ).index() / 2
    });
});

ソースコード

リナックスでtwurlのインストール

2010-09-23T18:16:00.000+09:00

パッケージ

Ruby

Debianで

apt-get install ruby libopenssl-ruby rdoc git-core

GEM

Rubygems 1.3.7のダウンロード

su
tar -xvzf rubygems-1.3.7.tgz
cd rubygems-1.3.7
ruby setup.rb all

RAILS

gem1.8 install rails --include-dependencies

RAKE

gem1.8 install rake

TWURL

gem1.8 install oauth
git clone http://github.com/mbbx6spp/twurl.git # 2010.09 Bug fixed
cd twurl
rake dist:gem
gem1.8 install pkg/twurl-0.6.1.gem

Twurl

READMEのファイルがあります。（英語）

アプリケーションの作成

新しいアプリケーションを作りました: http://twitter.com/apps/new

Localhostはダメですから「アプリケーションウェブサイトのURL」と「コールバックURL」でカスタム名前を使いました: pita.jp
私のホスト「/etc/hosts」をアップデートしました：

127.0.0.1 localhost
127.0.0.1 pita.jp #あだ名

初めに

ターミナルで：

twurl authorize -u username -p password \ 
--consumer-key the_key \ 
--consumer-secret the_secret

「username」と「password」はユーザーのアカウントです。
「the_key」は「Consumer key」です。
「the_secret」は「Consumer secret」です。
自分のアプリケーションはこちら（http://twitter.com/apps）です。設定を見ることが出来ます。

次のメッセージ：

Go to https://api.twitter.com/oauth/authorize?(...) and paste in the supplied PIN

ブラウザーでそのURLを行って来ました、PINの番号を貰いました。ターミナルにコピーペストをする。おわり。

Authorization successful

twurl accounts
yakeson_chihiro
  MGYP4f36F6ydtAkQ7EA4kA (default)

リクエスト

GETのリクエスト

twurl /1/statuses/home_timeline.xml?count=1

レスポンス：

<?xml version="1.0" encoding="UTF-8"?>
<statuses type="array">
<status>
  <created_at>Thu Sep 23 13:15:02 +0000 2010</created_at>
  <id>25305650522</id>
  <text>"25 Vim Tutorials, Screencasts, and Resources" by @nettuts #tech #webdev http://bit.ly/ctGaAJ</text>
  <source><a href="http://www.hootsuite.com" rel="nofollow">HootSuite</a></source>
  <truncated>false</truncated>
  <in_reply_to_status_id></in_reply_to_status_id>
  <in_reply_to_user_id></in_reply_to_user_id>
  <favorited>false</favorited>
  <in_reply_to_screen_name></in_reply_to_screen_name>
  <retweet_count></retweet_count>
  <retweeted>false</retweeted>
  <user>
    <id>9453872</id>
    <name>Elijah Manor</name>
    <screen_name>elijahmanor</screen_name>
    <location>Nashville, TN</location>
    <description>Christian w/ beautiful family and develop @ appendTo providing corporate support for jQuery. Also an ASP.NET MVP and ASPInsider</description>
    <profile_image_url>http://a2.twimg.com/profile_images/1040889762/ProfielPictureUpdate50_normal.jpg</profile_image_url>
    <url>http://j.mp/AboutElijahManor</url>
    <protected>false</protected>
    <followers_count>31634</followers_count>
    <profile_background_color>0f1923</profile_background_color>
    <profile_text_color>39424b</profile_text_color>
    <profile_link_color>0d5a95</profile_link_color>
    <profile_sidebar_fill_color>eeeeee</profile_sidebar_fill_color>
    <profile_sidebar_border_color>0f1923</profile_sidebar_border_color>
    <friends_count>31458</friends_count>
    <created_at>Mon Oct 15 12:12:30 +0000 2007</created_at>
    <favourites_count>21052</favourites_count>
    <utc_offset>-21600</utc_offset>
    <time_zone>Central Time (US & Canada)</time_zone>
    <profile_background_image_url>http://a3.twimg.com/profile_background_images/86093215/jQuery142.png</profile_background_image_url>
    <profile_background_tile>false</profile_background_tile>
    <profile_use_background_image>true</profile_use_background_image>
    <notifications>false</notifications>
    <geo_enabled>true</geo_enabled>
    <verified>false</verified>
    <following>true</following>
    <statuses_count>20464</statuses_count>
    <lang>en</lang>
    <contributors_enabled>false</contributors_enabled>
    <follow_request_sent>false</follow_request_sent>
    <listed_count>1423</listed_count>
    <show_all_inline_media>false</show_all_inline_media>
  </user>
  <geo/>
  <coordinates/>
  <place/>
  <contributors/>
</status>
</statuses>

POSTのリクエスト：

twurl -d 'status=Twurlのインストールをしました http://www.p3t1.com/2010/09/twurl.html' /1/statuses/update.xml

レスポンス：

<?xml version="1.0" encoding="UTF-8"?>
<status>
  <created_at>Thu Sep 23 13:10:06 +0000 2010</created_at>
  <id>25305265682</id>
  <text>Twurlのインストールをしました http://www.p3t1.com/2010/09/twurl.html</text>
  <source><a href="http://p3t1.jp" rel="nofollow">Pita's Localhost</a></source>
  <truncated>false</truncated>
  <in_reply_to_status_id></in_reply_to_status_id>
  <in_reply_to_user_id></in_reply_to_user_id>
  <favorited>false</favorited>
  <in_reply_to_screen_name></in_reply_to_screen_name>
  <retweet_count></retweet_count>
  <retweeted>false</retweeted>
  <user>
    <id>17262330</id>
    <name>ピエールランリ・ラヴィン</name>
    <screen_name>yakeson_chihiro</screen_name>
    <location>東京</location>
    <description>フロントエンド ウェブプログラマー</description>
    <profile_image_url>http://a0.twimg.com/profile_images/873064912/pierre-henri-lavigne-73-73_normal.png</profile_image_url>
    <url>http://www.p3t1.com</url>
    <protected>true</protected>
    <followers_count>132</followers_count>
    <profile_background_color>8998ac</profile_background_color>
    <profile_text_color>333333</profile_text_color>
    <profile_link_color>3b5374</profile_link_color>
    <profile_sidebar_fill_color>ffffff</profile_sidebar_fill_color>
    <profile_sidebar_border_color>ffffff</profile_sidebar_border_color>
    <friends_count>343</friends_count>
    <created_at>Sun Nov 09 01:13:07 +0000 2008</created_at>
    <favourites_count>0</favourites_count>
    <utc_offset>32400</utc_offset>
    <time_zone>Tokyo</time_zone>
    <profile_background_image_url>http://a3.twimg.com/profile_background_images/40243153/pat_20050222152535.gif</profile_background_image_url>
    <profile_background_tile>true</profile_background_tile>
    <profile_use_background_image>true</profile_use_background_image>
    <notifications>false</notifications>
    <geo_enabled>false</geo_enabled>
    <verified>false</verified>
    <following>false</following>
    <statuses_count>624</statuses_count>
    <lang>ja</lang>
    <contributors_enabled>false</contributors_enabled>
    <follow_request_sent>false</follow_request_sent>
    <listed_count>6</listed_count>
    <show_all_inline_media>false</show_all_inline_media>
  </user>
  <geo/>
  <coordinates/>
  <place/>
  <contributors/>
</status>

2010.09.06のリンク

2010-09-06T00:36:00.000+09:00

document onready と document onload

2010-08-20T01:28:00.000+09:00

jQuery

$(document).ready(function(){});

$(window).load(function(){});

Introducing $(document).ready() | Learning jQuery

Prototype

document.observe("dom:loaded", function(){});

Event.observe( window, "load", function(){});

Prototype JavaScript framework: document.observe

Mootools

window.addEvent("domready", function(){});

window.addEvent("load", function(){});

Window Event: domready | MooTools Docs - Utilities/DomReady

Extjs

Ext.onReady(function(){});

Dojo

dojo.addOnLoad(function(){});

Introducing The Dojo Toolkit | Opera Developer Community

YUI

Y.on("domready", function(){});

Using the domready Event (Formerly onDOMReady) | YUI 3: Event

Youtubeのサムネル

2010-08-11T02:50:00.000+09:00

Weezer - Island In The Sun。ビデオのIDは「0C3zgYW_FAM」です。

ビデオ: http://www.youtube.com/watch?v=0C3zgYW_FAM
Flash: http://www.youtube.com/v/0C3zgYW_FAM
サムネル0 - 480x360px - http://img.youtube.com/vi/0C3zgYW_FAM/0.jpg
サムネル1 - 120x90px - http://img.youtube.com/vi/0C3zgYW_FAM/1.jpg
サムネル2 - 120x90px - http://img.youtube.com/vi/0C3zgYW_FAM/2.jpg

jQueryのプラグインがあります: jYoutube

2010.08.11のリンク

2010-08-11T01:58:00.000+09:00

「HTML5, Modernized: Fourth IE9 Platform Preview Available for Developers」、IE9プレビュー４
「Combining media queries and JavaScript」メディアクエリーとジャバスクリプト
「jQuery UI 1.8.4」バージョン1.8.4のリリース

Rich Text Editing with YUI @ Yahoo! Video

GeanyでTextmateのテーマを使う

2010-08-09T23:45:00.000+09:00

１「Geany」をインストールする

フィンクを使って、「Geany」のパーケッジをインストールします。ポートを作りました。

fink install geany

２テーマをインストールする

「Jason Willson」は良いテーマを作りました：「Vibrant Ink color 」。そのテーマは「Textmate」の色パターンです。

ダウンロードして次に

cp -rf vibrant_ink_geany/filedefs/* ~/.config/geany/filedefs

それだけです！

2010.08.03のリンク

2010-08-03T09:41:00.000+09:00

「JavaScript performance playground」、ジャバスクリプトのツール
「How To Get Digg, Delicious and Tweet Counts Using jQuery」、カウンタの作成
「Bit.ly Button - jQuery Plugin for Your Clicky Post」、Bit.lyのボタン
「Turbine PHP power framework」

日々のインスピレーション３

2010-08-01T04:33:00.000+09:00

「The Tangga house」 via @recave
「Antoine Audiau & Manuel Warosz」 via AOL
Weezer Island in the sun @Youtube

日々のインスピレーション２

2010-07-30T01:38:00.000+09:00

「Girl Hair」 Dan Mumford via @Inspirationf
「Platinum Angel」 Brom
Hooverphonic - Mad about you - @Youtube

2010.06.30のリンク

2010-07-28T08:43:00.000+09:00

「Announcing the world’s fastest VP8 decoder: ffvp8」, FFMPEGVP8のデコーダ
「Load JavaScript after pageload」
「Tasks manager based on jQuery」
「NODEJS.SE」、NODEのニュースアグリゲータ

2010.07.24のリンク

2010-07-25T02:41:00.000+09:00

「Google JavaScript Style Guide」,ググールのジャバスクリプトのガイド
「10 Useful Website Management and Testing 」、ウェブサイトのツール：テストとマネジャー
「GameBoy Emulation in JavaScript: The CPU」、ジャバスクリプトでGameboyのエミュレータ
「Bing Webmaster Tools」、Microsoftのウェブマスターツール
「30+ Essential Javascript Framework Supported Navigation Techniques」、ジャバスクリプトのメニューバー

日々のインスピレーション１

2010-07-22T02:20:00.000+09:00

Aaron Maurer's Phantasmic Collages via @meusings
What if Darth Vader were painted by Monet in 1875...? via @theretronaut
パリの自転車

沢山がある

Canonical Link Element

2010-07-13T01:02:00.001+09:00

2010.06.24のリンク

2010-06-25T01:47:00.000+09:00

「Sencha」、煎茶、HTML5モバイルアプリケーションフレームワーク
「Flock」、「Flock」のブラウザー、新しいバージョン
「Booktorious」、ジャバスクリプトのEPUBリーダー、Firefox3.6から、Chrome6から
「Script Junkie」、Microsoftのコミュニティサイト - HTMLとかCSSとかスクリプト
「Internet Explorer 9」IE９のバージョン、プレビュー３

グーグルアプリケーションの作成（１０分）　 @youtube (英語）

2010.06.17のリンク

2010-06-18T00:54:00.000+09:00

「Jquery语法总结和注意事项」,Jquery various syntax
「Top 10 Icon Search Engines and Libraries」、アイコンの検索
「Be careful with non-ascii characters in URLs」、URLのキャラクターを気を付けて下さい
「Be a CSS Team Player: CSS Best Practices for Team-Based Development」、チームワーク：おすすめのTips
「Jo JavaScript App Framework」、ジャバスクリプトのアプリケーションのフレームワーク

2010.06.16のリンク

2010-06-17T02:07:00.000+09:00

「jQuery Globalization Plugin from Microsoft」、Micrososoftのプラグイン
「Badass JavaScript」、ハンサムジャバスクリプトのコード
「iPadでHTML5でWebアプリを作ってみました。」, web application for iPad using html5
「Opera 10.60 moves to the beta zone」

2010.06.14のリンク

2010-06-15T02:23:00.000+09:00

「JSConduit」,データはJSONのフィードになります
「HTML5 Microdata: Welcome to the Machine」,HTML5とミクロデータ
「About: DOM Storage」
「jQuery.Syntax」
「StarCraft II FIRST TV Commercial」

Andreas Bovens and David Storey — 10 Essential Things You Should Know about Supporting Opera

2010-06-06T02:19:00.000+09:00

Andreas Bovens and David Store from browsermaker Opera Software talk about the Opera browser, reviewing key points that developers should be aware of as they work to support Opera on their sites.

Nate Koechley — Professional Frontend Engineering

2010-06-02T17:07:00.000+09:00

Nate Koechley lays out the foundations of professional frontend engineering as they've developed at Yahoo over the past decade.

Nate Koechley: "Professional Frontend Engineering" @ Yahoo! Video

2010.06.01のリンク

2010-06-02T16:50:00.000+09:00

2010.05.26のリンク

2010-05-26T17:09:00.000+09:00

2010.05.18のリンク

2010-05-18T18:18:00.000+09:00

Eric Miraglia - Welcome to YUI 3

2010-05-18T18:16:00.000+09:00

YUI engineer Eric Miraglia provides a high-level introduction to key concepts underlying the YUI 3 codeline.

Eric Miraglia: "Welcome to YUI 3"

Design Inspiration - Fabio Sasso - Front End Conference 2009

2010-05-15T19:32:00.000+09:00

Fabio is a graphic, web designer and enthusiast from Porto Alegre, very south of Brazil. He is the co-founder of a design studio called Zee and runs a blog called Abduzeedo where he shares his thoughts, cool sites, and tutorials.

One of the major takeaways from the presentation was the fact that Brazilian designers have a completely different learning process from American designers. English is not a major language in Brazil and many of the design resources that we cherish have not been translated to Portugese. This results in Brazilian designers needing to intensely study images and their associations in order to figure out ways to create them.

Design Inspiration - Fabio Sasso - Front End Conference 2009 from Nate Croft on Vimeo

flickr JSON Javascript: photos.getExif

2010-05-12T17:31:00.000+09:00

今日「photos.getExifのメソッドを加えました。例えば：

2010.05.11のリンク

2010-05-12T15:58:00.000+09:00

flickr JSON Javascript: photos.getAllContexts

2010-05-07T18:45:00.000+09:00

今日「photos.getAllContextsのメソッドを加えました。例えば：

window.onload = function() {
    var myFlickr = new flickr.init({
        key: '***APIのキー***'
    });
    var getAllContextsCallBack = function( context ) {
        if ( !context ) {
            return false;
        }
        var html = ['<' + 'h2' + '>' + Preview: Context from the photo 4351135868 + '<' + '/h2>'];
        if ( context.set ) {
            for ( var sets = context.set, i = 0; i < sets.length; i++ ) {
                var setTitle = context.set[i].title || false,
                    setID = context.set[i].id || false;
                if ( setTitle ) {
                    html.push( '<' + 'h3' + '>' + setTitle + '<' + '/h3>' );
                }
                if ( setID ) {
                    html.push( 'This photo belongs to the following set <' + 'a href="http://www.flickr.com/photos/allianceport/sets/' + setID + '">' + setID + '<' + '/a><' + '/p>' );
                }
            }
        }
        var example = document.getElementById('example') || false;
        if ( example ) {
            example.innerHTML = html.join('');
        }
    };
    myFlickr.photos.getAllContexts( 'http://www.flickr.com/photos/allianceport/4351135868', getAllContextsCallBack );
};

flickr JSON Javascript: photos.search

2010-04-21T18:23:00.000+09:00

今日「photos.search」のメソッドを加えました。例えば：

Flickr JSON Javascript

2010-04-18T18:19:00.000+09:00

新しいプラグインを始めました：　flickrのデータを作る。
今私の[URL=http://github.com/getphuture/javascript/tree/master/flickr/]GITのレポジトリ[/URL]で二つメソッドがあります：

photos.getInfo
photos.getSizes

今週ドキュメントの作成をします。

2010.04.16のリンク

2010-04-16T18:15:00.000+09:00

2010.03.31のリンク

2010-03-31T19:15:00.000+09:00

2010.02.25のリンク

2010-02-25T19:13:00.000+09:00

2010.02.12のリンク

2010-02-12T20:26:00.000+09:00

「Designing HTML Email For the Preview Pane」、ニュースレータのデザイン
「UX design framework – Behaviour」
「Memory leak patterns in JavaScript」
「10 Websites Every Web Designer Should Know About」

Webkit スピナー

2010-02-09T05:49:00.000+09:00

24WaysのサイトでTim Van DammeはCSSアニメションの記事を書きました。本当にWebkitはとてもすばらしいです。これは新しい例です。

二つのイメージを使っています。

GIFのイメージ
PNGのイメージ

HTMLのコード

<p id="spinner-wrapper">
    <span id="spinner-1"><span id="spinner-2">Please wait</span></span>
</p>

デフォルトユーザーはブラウザーでGIFのスピナーを見る。

#spinner-1 {
  display: block;
  overflow: hidden;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -33px 0 0 -33px;
  background: #fff url(spinner.gif) no-repeat;
}

Wekbitのブラウザーでイメージのアニメーションを作る。

#spinner-1 {
...
  -webkit-mask-image: url(spinner.png);
  -webkit-animation-name: spinnerRotate;
  -webkit-animation-duration: 20s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
}

「-webkit-mask-image」はマスクです
「-webkit-animation-name」: アニメーションの名前
「-webkit-animation-duration」: アニメーションの時間枠
「-webkit-animation-iteration-count」: 1回、2回、...またはループします
「-webkit-animation-timing-function」: 主なタイミング機能は「Linear」です。その他に「ease-in, ease-out, ease-in-out…」があります

アニメーションの作成

@-webkit-keyframes spinnerRotate {
  from {
    -webkit-transform:rotate(0deg);
  }
  to {
    -webkit-transform:rotate(360deg);
  }
}

もう一回イメージのアニメーションを作ります。GIFを使っています。

#spinner-2 {
  -webkit-mask-image: url(spinner.gif);
  -webkit-animation-name: spinnerColor;
  -webkit-animation-duration: 2s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
}

色のアニメーション

@-webkit-keyframes spinnerColor {
  from {
    background-color: rgba(0, 0, 0, .5);
  }
  25% {
    background-color: rgba(102, 0, 102, .5);
  }
  50% {
    background-color: rgba(0, 102, 102, .5);
  }
  75% {
    background-color: rgba(102, 102, 0, .5);
  }
  to {
    background-color: rgba(0, 0, 0, .5);
  }
}

プレビュー（Webkitのブラウザー、例えば「Safari」）

Please wait

2010.02.06のリンク

2010-02-07T16:28:00.000+09:00

2010.01.31のリンク

2010-02-02T18:58:00.000+09:00

20010.01.26のリンク

2010-01-27T20:41:00.000+09:00

2010.01.15のリンク

2010-01-16T20:18:00.000+09:00

「jQuery 1.4 iPhone reference app」
「Robots.txt Tips For Deailing With Bots」
「Firefox 3.6 due this month; next comes 'Lorentz'」、「Firefox 3.6」のリリース、次は「Lorentz」

2010.01.14のリンク

2010-01-16T07:44:00.000+09:00

「A new approach to China」、中国とグーグル
「Google Hackers Targeted Source Code of More Than 30 Companies Read More」
「Conversations About the Internet #5: Anonymous Facebook Employee」、Facebook会社員のインタビュー
「The 7 Components Of Design」
「Optimizing JavaScript」

2010.01.12のリンク

2010-01-13T19:27:00.000+09:00

2010.01.11のリンク

2010-01-12T09:37:00.000+09:00

「Best Practices To Develop Perfect Websites for iPhone and Mobile Devices」、iPhoneサイトの作成
「Notes on designing the Guardian iPhone app」, 「The Guardian」のアプリケーション
「Soma FontFriend」タイポグラフィのブックマークレット
「Why Your Next App Will Fail」
「14 Days of jQuery」,「jQuery 1.4」のリリースのイベント

レポート１：インターフェイス

2010-01-10T19:53:00.000+09:00

去年、脳波でメッセージを送る実験をtwitterで初めて行いました。未来のインターフェイスとは？

ジェスチャー

「プロトタイプ」Wiiのコントローラのハック、Johnny Lee、TED

「作成中」PlayStation Motion Controller

「作成中」Project Natal（プロジェクト・ナタル）マイクロソフトがXbox 360向けに開発を行っている、コントローラを用いずに操作ができる入力機器のコードネームである。

表面

「発売しました」Microsoft Surfaceのテーブル、テーブルトップのインタフェイス

「プロトタイプ」CRISTALのテーブル、リモートコントロール

「プロトタイプ」Microsoft Office Labs、将来のビジョンの動画

モバイル

「発売しました」iPhoneのバムップ Bump Technologies

「発売しました」Nokia Point & Find

「発売しました」Wikitudeのブラウザー, 運行、運転、コンテンツ、３D

「発売しました」Layar Reality ブラウザ2.0

「プロトタイプ」ARhrrrr! 実験モバイルゲーム、アメリカ人

メガネ/アイウェア

「発売しました」VuzixのWrap920のメガネ

体ウェア

「発売しました」AcceleGloveの手袋。AcceleGlove会社は手袋を作りました及びアプリケーションキッとを販売しています。

「プロトタイプ」MITの学生、六つ五感

GUI

「プロトタイプ」10GUIのコンセプト

「発売しました」Quicksilver、拡張なインターフェイス：アプリケーション、接点、音楽とデータ。

「発売しました」GnomeDo、linuxでQuickSilver-likeのインターフェイス。

「発売しました」Ubiquity、ウェブをより有益に、より使いやすくするために自然言語で Firefox を操作するインターフェースを提供します。

ソース: UX Booth

新しいプジョーのサイト

2010-01-10T14:03:00.000+09:00

http://www.new-peugeot.com/#/en/

2010.01.08のリンク

2010-01-09T02:13:00.000+09:00

婚約指輪

2009-12-27T20:05:00.000+09:00

今日一緒にです！彼女と婚約しました。「The Kiss」の指輪を買いました。永久に一緒にです！！：D

2009.12.16のリンク

2009-12-17T16:46:00.000+09:00

「Twitter Design Tools」トウィッターデザインのツール
「jQuery and Google Maps Tutorial」, jQueryとGoogle Map:チュートリアル
「How to Code HTML Email Newsletters」 ニュースレターのコーディング

2009.12.14のリンク

2009-12-14T20:48:00.000+09:00

「jQuery Snow Plugin」, 雪のjQueryプラグイン
「A Collection of HTML5 Resources and Tutorials」, HTML5の記事のリスト
「W3.org's Historical Browser Statistics」, ブラウザの統計

2009.12.13のリンク

2009-12-13T23:30:00.000+09:00

「JavaScript link tracking with Google Analytics」,リンクのトラッキング
「Node.js is genuinely exciting」, NodeのJavascriptライブラリ
「XML Driven Pie Chart」, 円グラフのFlash
「jQuery Reel Plugin」, Reelのプラグイン

2009.12.10のリンク

2009-12-10T21:00:00.000+09:00

「Display Cross Domain Data with Jquery JSON Callback」,クロスドメインデータとjQueryコールバック
「Should error messages be displayed for corrupt HTML5?」, エラーメッセージとHTML5
「The 100 essential websites」, トップ１００サイト
「Exploding the myths of web design」, ウェブデザインとは？

脳内メーカ

2009-11-30T15:21:00.000+09:00

脳内メーカー(正面)

脳内メーカー

2009.11.26のリンク

2009-11-26T17:19:00.000+09:00

「Focus on You with the Top Web Portfolio and Resume Apps」, ポートフォリオアプリケーション
「Smashing Magazine Killed The Community (Or Maybe It Was Me)」, Copycats
「10 Mootools scripts for enhancing your html forms」, １０個のファームのプラグイン
「10 Things You Must Do Before A New Site Or Blog Launch」, 新しいサイトのタスク
「300+ High Quality And Most Popular Fonts For Designers To Discover In 2009」, ３００種類のフォント
「Untitled Page」, 面白いHTML5のデザイン

「Chocolate Doom 1.2.1」のリリース

2009-11-22T17:38:00.001+09:00

今年の4月「Chocolate Doom」のバーション1.1.1のポートをしました。今月バーション1.2.1のアップデートをしました。

fink install chocolate-doom

2009.11.21のリンク

2009-11-22T03:19:00.000+09:00

「Dojo Confessions (Or: How I gave up my jQuery Security Blanket and Lived to Tell the Tale)」, Dojoの告白
「リッチスニペットの導入について」
「Handy CSS Debug Snippet」, CSSのデバッグのスニペット
「30 amazing packaging designs for your inspiration」３０個パケージのデザイン

Bespinのインスト−ル

2009-11-19T17:28:00.000+09:00

Bespinとは？Mozillaのコードエディタのソフトウェアです。ブラウザで、HTML5とCanvasタグを使います。Bespinを使用出来るブラウザは: Firefox3, Webkit, Google Chrome (Chromeのデベロッパのバーション）です。BespinのサーバーはPythonとRubyを使います。Bespinを使用出来るOSはWindows、Macintosh、Linuxです。オンラインバーション: http://bespin.mozilla.com。私は「Linux Ubuntu Hardy」でBespinのインスト−ルをしました。

Linuxのパッケージ

Mercurialのインスト−ル

sudo apt-get install mercurial

Pythonのインスト−ル

sudo apt-get install python python-dev

GEMのインスト−ル

sudo apt-get install ruby-full build-essential
cd ~/bin
wget http://rubyforge.org/frs/download.php/60718/rubygems-1.3.5.tgz
tar -xvzf rubygems-1.3.5.tgz
cd rubygems-1.3.5
sudo ruby setup.rb
sudo ln -s /usr/bin/gem1.8 /usr/bin/gem

.bashrのファイルのアップデート

#RubyGems
export PATH=/var/lib/gems/1.8/bin:$PATH

GEMのアップデート

sudo gem update --system

Bespinのインスト−ル：デベロッパのバーション

sudo gem install rack jeweler json_pure extlib erubis thor
cd ~/bin
hg clone http://hg.mozilla.org/labs/bespinclient
hg clone http://hg.mozilla.org/labs/bespinserver
cd bespinclient
python bootstrap.py --no-site-packages

Bespinのスタート

cd ~/bin/bespinclient
source ./bin/active
paver start

ブラウザのhttp://0.0.0.0:4020/

Bespinのインスト−ル：ユーザーのバーション

cd ~/bin
hg clone http://hg.mozilla.org/labs/bespin/
cd ./bespin
python bootstrap.py
source bin/activate
paver create_db
paver start

新しいアカウント

ブラウザのhttp://127.0.0.1:8080/。「Signup」のリンクをクリックして下さい。次は新しいアカウントのファーム

「Ctrl+J」はコマンドです。私のユーザー名前は「yakeson」です。リポジトはここです

~/bin/bespin/devfiles/yakeson

「Ctrl+O」はファイルのブラウザです。

サーバー

Bespinのスタート

cd ~/bin/bespin
source bin/activate
paver start

Bespinのストップ:「Ctrl+C」

リンク

2009.11.17のリンク

2009-11-18T11:56:00.000+09:00

「Movable Type Pagination」, MTの改ページ
「9 Most Common IE Bugs and How to Fix Them」, 有名なIEバーグとソリューション
「Drupal or Django? A Guide for Decision Makers」, 「DrupalかDjango?」のガイド
「Practical Guide to 404 Error Pages: What WordPress is Missing」, Wordpressの404ページの作成
「Screen Reader User Survey Results」, スクリーンリーダーのユーザー調査
「Interview with Creative Agency FACTORY311」, エージェンシーFACTORY311のインタビュー

2009.11.16のリンク

2009-11-16T21:00:00.000+09:00

「今日のMovable Type 4.2：MT4.2で無償で利用できるTinyMCEプラグイン登場！TinyMCE-MTPlugin 」, Movable Type 4.2 TinyMCE Plugin
「GoogleMap プラグインをアップデートしました」, Movable Type, Google Map plugin
「Install Mozilla Raindrop In Ubuntu Karmic」, Ubuntu KarmicでRaindropのインスト−ル
「jParse: jQuery XML Parse Plugin」, jQueryプラグイン: XML構文解析
「50 Most Influential Bloggers of 2009」, 影響力のある５０人のブロガー
「Getting into Computer Science」,コンピューター科学の導入

2009.11.15のリンク

2009-11-16T13:51:00.000+09:00

「10 short 'n' sweet tips on how to design for web」, ウェブデザイン
「The History of the Internet in a Nutshell」, インターネットの歴史
「Ten XML Schemas you should know」,１０個の有名なXML模様
「80(!) Excellent Examples of Mixed Media Fashion Illustration」,８０個流行アート

2009.11.14のリンク

2009-11-15T09:42:00.001+09:00

「Free Colourful Floral Backgrounds And Elements」,フリー花背景
「13 Great Flickr Galleries to Integrate into Your Site」,１３個「Flickr」ギャラリープラグイン
「LinuxMint8 Helena RC1 video Tour- by Unixmen.com」,Youtubeビデオ
「Google Wave Add-on for Firefox」,GoogleWaveのFirefoxアドオ

ストリートアート - タコスケートボードプール

2009-11-14T17:26:00.000+09:00

ブログ記事は「My Modern Metropolis」です。ルガノ（スイスの町）でスイス人アーティスト「Nevercrew」はスケートプールのカスタムをしました。

2009.11.12のリンク

2009-11-12T23:59:00.001+09:00

「Top 20 Essential Firefox Add-ons for Web Designers」, ２０種類のFirefoxアドオン
「40 Beautifully-Designed Navigation Menus」, ４０種類のナビゲーション
「CSS Backgrounds: 12 Solutions To Common Questions」, CSS背景
「10 Things You Need to Know About WordPress 2.9」, Wordpress 2.9 Tips
「8 Very Useful JQuery forms」, jQueryとファーム:８プラグイン

2009.11.09のリンク

2009-11-10T13:02:00.000+09:00

「10 Twitter Design Lists You Must Follow」, トップ１０のデザイントウィッターリスト
「Best Open Source UML tools」, オープンソースUMLツール
「35 Single page portfolio design」, ３５種類のポートフォリオ
「20 Websites to Help You Master User Interface Design」, ユーザーインターフェイスのサイト

2009.11.04のリンク

2009-11-05T15:44:00.000+09:00

「55 Niche Web Design Galleries for Your Inspiration」, ５５種類のデザインギャラリー
「Fresh PHP Resources and Tutorials」, PHPのチュートリアル
「20 Simple jQuery Tricks」, 20種類の単純なプラグイン
「5 Things to Ignore When Designing Websites」

2009.11.03のリンク

2009-11-03T21:19:00.002+09:00

「Realigning For A Beautiful Web using HTML5, CSS transforms and transitions」
「The Future of Interface Design」, 未来のインターフェイス
「Web Inspector gets major improvements」, Safariのウェブツールのアップデート
「Web Design Trends for 2010」, ２０１０年のウェブデザイントレンド

2009.11.02のリンク

2009-11-03T14:50:00.000+09:00

「16 tips to impove as a graphic designer」, より良いデザイナーになるためのヒント
「Tips on How to Bome a Better Designer」, より良いデザイナーになるためのヒント
「15 Examples of Well Designed Contact Pages」, １５種類の「お問い合わせ」ページのデザイン
「Photoshop Tip: Locking Transparent Pixels」, PhotoShopのTip
「7 Free Tools to Minify your Scripts and CSS」,７つのツール
「10 Attractive Jquery CSS Tooltips Tutorials」, jQueryのツールチップのチュートリアル

2009.10.31のリンク

2009-10-31T20:35:00.003+09:00

「500+ Free Download High Quality Photoshop PSD Files For Designers」, ５００種類のPSD
「10 little tools for designers」, １０種類のツール
「Line25 Sites of the Week for October 30th 2009」
「105 Free Grunge Fonts for Web Designers and Logo Artists」, １０５種類のフォンート
「Creating a Coda-style Slider with jQuery and Hybrid on WordPress」, jQueryのCodaスライダー
「When can we stop talking about “supporting” certain browsers?」
「Internet Addresses Can Use New Scripts」
「25 CSS CHEAT CODES: Designers & Developers Delight」, ２５CSS Tips

2009.10.29のリンク

2009-10-30T14:16:00.000+09:00

「90 Exciting Typography Posters and Designs」, ９０種類のポスター
「Hokusai’s great wave is everywhere」, 北斎の有名な波の絵
「Over 5000 FREE Adobe Photoshop Brushes」, ５０００種類のPhotoShopブラシ
「HayStack - Find the right Web Designer for your next project」, Haystack - 新しいプロジェクトの為のウェブデザイナ検索
「Showcase Of Beautiful Textured Web Designs」, ３５種類のデザイン
「Read URL GET variables with jQuery」, jQuery:URLの変数
「35 More Useful jQuery Plugins and Techniques」, ３５種類のjQueryプラグイン
「5 Fresh & Innovative Collaboration Platforms For The Creative Community」

2009.10.27のリンク

2009-10-27T22:32:00.002+09:00

「200+ Free Exclusive RSS Icons: “Supra”」, ２００種類のRSSアイコン
「18 Alternative Ways To Use Wordpress」, １８種類のWordpress
「Work Smarter, Not Harder – 8 Important Tips for Web and Graphic Designers 」
「Great Collection of Visual Identities」, 素晴らしいビジュアルアイデンティティ
「Internet speeds and costs around the world」, 全世界インターネットスピード

2009.10.26のリンク

2009-10-26T16:14:00.000+09:00

「The 10 Basics of HTML Email Newsletters」, ニュースレターの１０このルール
「Beautiful Email Newsletters」, ニュースレターデザインの例
「What is a Browser? Google Explains」, ブラウザとは？Googleの説明
「Equal Height Columns with Cross-Browser CSS and No Hacks」, CSSのレイアウト
「Mu Connect - JavaScript Library to use Facebook Connect」, JavaScriptライブラリと「FaceBook Connect」

2009.10.25のリンク

2009-10-25T17:26:00.000+09:00

「10 Best Javascript Drawing and Canvas Libraries」, １０ライブラリ
「UbuntuでApache+PHP+MySQLの開発！」, LAMP development with Ubuntu
「Birdhouse: A notepad for Twitter」, トウィッターのメモ帳
「BBC Radio 1 Zoom Tabs」, jQueryプラグイン: BBCラジオのズームタブ
「RevCanonical: url shortening that doesn't hurt the internet」

2009.10.23のリンク

2009-10-24T15:02:00.000+09:00

「Inspirational Single Colour Logo Designs」, 一つ色のロゴ
「A look at the 1978 Atari Catalog」, １９７８年のAtariカタログ
「Website Design Showcase Of 21 Popular Brands」, ２１種類のコーポレートデザイン
「jQuery custom selectors with parameters」, jQueryのセレクター
「Wordpress Theme Building Cheat Sheet」

2009.10.24のリンク

2009-10-23T19:33:00.000+09:00

「location.href vs. location.replace - The Difference Between JavaScript Url Redirection Methods 」, Javascript:location.hrefとlocation.replaceとは？
「Chrome for Mac (Developer Release)」, MacのChromeブラウザ、開発のリリース（Mac>=10.5）
「JavaScript Security」, Javascriptのセキュリティ
「jQuery and General Javascript Tips to Improve Your Code」, Jquery Tips

2009.10.21のリンク

2009-10-21T18:25:00.000+09:00

「25 Examples of Clean and Well designed Web Sites」,25種類のウェブデザイン
「30+ Websites That Use Wood Texture」, 30種類の木材デザイン
「Web Directions & Typographic Structure」
「30 Beautiful Examples of Illustrated Twitter Backgrounds」, 30種類のトウィッターデザイン
「Many Eyes: IBM's collaborative democratic visualization tool」, Many Eyes： IBMの新しいツール
「Website Accessibility and Usability: Ten Tips On How To Make Your Website More Viewer-friendly!」, アクセシビリティとユーザビリティ：１０Tips

2009.10.20のリンク

2009-10-20T17:38:00.001+09:00

「User testing: You don’t know everything」,ユーザーテスト：You don’t know everything
「The essence of qualitative research: “verstehen”」
「25 Fresh and New jQuery Plugins and Tutorials」, ２５種類の新しいjQueryプラグイン
「Tokyo Metro desktop icons」東京メトロのデスクトップアイコン
「Weekly Web Roundup: The Client Edition #22」, 今週おすすめのリンク

2009.10.19のリンク

2009-10-20T09:20:00.000+09:00

「Chrome Experiments」, JavaScriptのチュートリアル
「jQuery Blend」, jQueryのアニメーション
「7 Things Web Designers Hate Hearing from Clients」, クライアントとデザイナー
「UX Design Defined」, 「User Experience Designers」とは?
「Google Accessibility」, Googleはアクセシビリティを始めました
「Google Voice」, Googleのモバイルアプリケーション

2009.10.14のリンク

2009-10-15T01:42:00.000+09:00

「64 essential guides, tips and tutorials to definitely master Photoshop like a pro」, ６４種類のPhotoshopガイド
「30 Stunning Fonts To Enhance Your Designs」, ３０種類のフォント
「An Analysis of the Amazon Shopping Experience」, Amazonショップのユーザビリティ
「25 Redesigned Logos of 2009 - Changing world of Graphic Designs!!」, 会社のロゴ：２５種類の新しいデザイン
「The Spriters Resource」, ゲームのパターン
「18 Essential Tools for Every Word-of-Mouth Marketer」, マーケターの１８個のツール
「Zack's JQuery Jumpstart」, ZackのjQueryプレゼンテーション
「10 Very Useful jQuery Plugins for Web Developers I wasn’t aware of」, jQueryプラグイン

2009.10.13のリンク

2009-10-13T21:23:00.001+09:00

「30 Impressive vCard Web Designs」, ３０種類のvCard
「10 Rare and Cool jQuery Plugins」, １０種類のjQueryプラグイン
「TweetPeep & TweetMap」, TwitterのjQueryプラグイン
「@font-face and performance」, @font-faceの動作
「Fighting the @font-face FOUT - Quicken the load time」, @font-faceのローディング
「Gzip your @font-face files」, @font-faceのgzip
「More @font-face fun」, @font-face
「Rad Pattern in Illustrator that Makes you Dizzy」, Illustrator: スケートボードのパターン
「HTML5 Canvas Cheat Sheet」, html5canvasのガイド

2009.10.11のリンク

2009-10-12T14:41:00.001+09:00

「Javascript scalable applications」
「Spread Canvas」, Canvasのデも, Tom Theisen
「21 Selective color desaturation with creative…(Photo collections) 」, Photoshopの色
「8 Hand Drawn Icon Sets For Bloggers」, ８種類のアイコン
「18 Really Beautiful and Creative Web Designs」, １８種類のウェブデザイン
「The twitter Guide Book」, トウィッタのガイド

2009.10.09のリンク

2009-10-09T19:52:00.000+09:00

「CSS – A Sticky Subject 」, CSSのフッター
「Qualitative Tools to Improve Your Website」, 10種類のウェブツール
「10 nifty things you didn't know Bing could do」, 10種類のBingトリック
「The History and Evolution of Social Media」
「Create a Portfolio Site」, ポートフォリオの開発

2009.10.07のリンク

2009-10-08T15:51:00.000+09:00

「IE overall usage slips, but IE 8 gains」、ブラウザの統計
「Ryan Singer’s talk on UI Fundamentals for Programmers」, ユーザインターフェイスファンダメンタルズ
「SVG Open Lightning Talk: SVG & Media Queries」, Youtube, Andreas Bovensのビデオ
「The Great WebKit Comparison Table」,　モバイルwebkitのテスト
「69 Free (or low cost) Tools to Improve Your Website」, 69種類のツール
「20 jQuery Plugins Worth Implementing into your Themes」, デザインのjQueryプラグイン
「Christoph Niemann: Short Deadlines Make You Think Straight」

2009.09.05のリンク

2009-10-06T02:18:00.002+09:00

「Wpf Drag & Drop behaviour」
「 Creative Image-Galleries by jQuery」, jQueryのイメージギャラリー
「Unobtrusive CSS Framework」
「My selection of iPhone apps for freelancers and front-end developers」, ウェブプログラマー: iPhoneのアプリケーション
「6 iPhone Apps that Let You Access Files in the Cloud」, ６種類のアプリケーション: ファイルのアクセス

2009.10.04のリンク

2009-10-05T15:40:00.000+09:00

「HTML5」, HTML5のサイト、日本語バージョン。
「@font-face in Depth」, cssのfont-faceを使用します。
「Enterprise JavaScript Error Handling (Ajax Experience 2008)」, Javscriptのエラー操作、SlideShareのプレゼンテーション
「Memset Dedicated Hosting」, イギリスのサーバー
「Getting and setting max zIndex with jQuery」
「iPhone Wallpaper」, iPhoneの壁紙

2009.10.01のリンク

2009-10-02T14:02:00.000+09:00

「17 Creative Online eCommerce Designs」,　１７種類のウェブショップのデザイン
「15 Elegant Light Free Font You Shouldn’t Miss 」, １５種類のかわいいフォント
「List of Really Useful Plugins and Resources For MooTools」, Mootoolsのプラグイン
「Color Fading Menu with jQuery」, jQueryのメニュー
「Great use of Google Maps」, ウェブサイトとGoogle Maps
「How to remove a specific value from a javascript array」

2009.09.30のリンク

2009-10-01T11:17:00.000+09:00

「Curated: Top Motion Reels for October」, ６種類つのトップモーション
「The Best Design」, ウェブデザインのギャラリー
「Different Methods for Choosing Color Schemes in Web Design」, デザインの色
「Building iPhone Apps with HTML, CSS, and JavaScript」, iPhoneのアプリケーションの作成: html, css, javascript
「A list of HTML5 related articles.」, １０２HTML5の記事
「Increase Your Website Performance by Hosting jQuery with a CDN」

2009.09.29のリンク

2009-09-29T16:04:00.000+09:00

「Install New Tab King 2.1.0 Firefox Addon - Super Powers For Your New Tab Page」, Firefoxのアドオン
「Object-Oriented CSS: What, How, and Why」, オブジェクト指向のCSS
「How To Effectively Communicate With Developers」, コミュニケーション
「Color Sheme Designer」, 色のツール
「40 Very Colourful Websites」

2009.09.26のリンク

2009-09-27T13:56:00.000+09:00

「Google Chrome Frame - accessibility black hole」
「Top 10 Flickr Hacks Tips Tricks」
「Introduction to HTML 5」, 「HTML5」の導入, Youtubeのビデオ
「10 Wonderful Letterpress Type Tutorials」, 10活版印刷のチュートリアル
「JSNES: a NES Emulator Written in JavaScript」 JavaScriptのファミコンのエミュレータ

COMBO a collaborative animation by Blu and David Ellis

2009-09-26T16:15:00.001+09:00

コラボレイティブアニメーション「Blublu」と「David Ellis」、プロデューサー「Studio Cromie」, 音楽「Roberto Lange」, 「Fame festival 2009」

On Vimeo.

2009.09.25のリンク

2009-09-26T11:42:00.000+09:00

「Deep on Design」, Philippe Starck, Tedのビデオ
「Wallpaper Art」, デスクトップの背景のアート
「Best Places to Find Seamless Background Patterns」, バックグラウンドのパターン
「10 Great Font Resources」,
「ScrnShots」, デザインのスクリーンショットを共有する
「3 Tips for Dealing with Feelings of Overwhelm」
「Why Corporations Don’t Upgrade IE6 and How Chrome Frame Could Help」
「JavaScript CoverFlow 2.0 (jCoverFlow)」, Apple iTunes CoverFlow effect
「JavaScript Debugging Techniques in IE 6」, IE6のデバッグ
「23 Essential HTML 5 Resources」, HTML5のコード

2009.09.24のリンク

2009-09-25T10:02:00.000+09:00

「30 Top Web Designers On Twitter」, トウィッターのトップ30ウェブデザイナー
「Pattern Tap」, デザインパターン
「Pixel Pattern」, ピクセルのパターン
「70 Best Free Grunge Fonts」, グランジのフォント
「30 Illustrator Gradient Mesh Tutorials to Help Enhance Your Vector Realism」, Illustratorのチュートリアル

2009.09.23のリンク

2009-09-24T14:29:00.000+09:00

「Browserscope & SpriteMe」, Google Tech Talks, Youtube
「Browserscope」, ウェブブラウザのプロファイル
「Sprite Me」, ウェブブラウザのプロファイル
「Browser Support Standards」, BBCのテクニカルノート
「Graded Browser Support」, プログラマーのYUIガイド
「Bezier Curves and Arcs in jQuery」, jQueryのベジェ曲線

2009.09.22のリンク

2009-09-23T07:48:00.000+09:00

Improving Web Application Security, Microsoft Developer Center
WSSE for JavaScript
JavaScript MD5, JavaScript implementation of MD5, and some other secure hash algorithms.
jCryption, HTML-Form encryption plugin using the public-key algorithm of RSA for the encryption
Facebox, Facebook-style lightbox
Guide to CSS Font Stacks: Techniques and Resources, Smashing Magazine

2009.09.21のリンク

2009-09-22T14:58:00.000+09:00

「Please start from the beginning」, Video interview with Ryan Taylor.
「SlickMap CSS」, simple stylesheet for displaying finished sitemaps directly from HTML unordered list navigation.
「Handy Tips for Creating a Print CSS Stylesheet」, a print stylesheet can really help polish the printed document for when it is used.
「Print to Preview」, Remember in the old days when you had to effectively run two sites or create separate templates in a CMS for “printer friendly pages”?
「Web Fonts」, Wiki, everything about @font-face
「Using jQuery for Background Image Animations」
「jQuery Tweets」, A List of Twitter users who provide really useful resources for jQuery.
See how I used Firebug to learn jQuery, Youtube Video.
「Gnome 3 Gnome Shells」, Youtube Video.
「Haiku」, new open-source operating system that specifically targets personal computing.
「10 design lessons from the art of Ikebana」, the Japanese perception of beauty is largely based on space...

知っておくべき１０個の「Firefox」のアドオン

2009-09-20T15:56:00.000+09:00

ファイヤーバグ
「Firebug」は、Webページを閲覧中にクリック一つで使える豊富な開発ツールを「Firefox」に統合します。あなたはあらゆる Web ページのCSS、HTML、及びJavaScriptをリアルタイムに編集、デバッグ、またはモニタすることが出来ます。
YSLOW
Yslowはウェブページを分析します。「Yahoo」のルールのレポートを作成します。何故そのページの読み込みが遅いのか調べます。
HTMLベリファイア
ネイティブ「HTML」エラーのレポート。アイコンはエラーの番号を表示します。エラーの詳細はソースコードと同時に表示されます。二つアルゴリズム：TidyとOpenSP。
アクセシビリティバー
ページのアクセシビリティ特徴をテストします。
ウェブデベロッパツールバー
ウェブツールのメニューバー。
ファイヤーFTP
FTPクライアント。 SFTP, TSL, SSL, IPv6...
「Pearl Crescent Page Saver Basic」
ウェブページのスクリーンショット。
ユビクイティ
「Ubiquity」はウェブをより有益に、より使いやすくするために自然言語で Firefox を操作するインターフェースを提供します。日本語「Mozilla」ブログのビデオ
スノール
「Snowl」は「Firefox」のアドオンで、メール、SMS、TwitterからRSS/Atomのフィードにいたるまで、あらゆるメッセージを一箇所に集約するものです。
べスピン
「Bespin」は拡張性のあるWeb開発フレームワークで、開発者の生産性を改善し、Mozillaの提唱する「Open Web」を進めるのが狙いです。

ajaxリクエスト:　phpでプロキシ !

2009-09-03T15:52:00.001+09:00

proxy.phpのファイル

<?php

// http://developer.yahoo.com/javascript/samples/proxy/php_proxy_simple.txt
// PHP Proxy example for Yahoo! Web services.
// Responds to both HTTP GET and POST requests
//
// Author: Jason Levitt
// December 7th, 2005
//
// Modified by ピエールランリ・ラヴィン
// August 28th, 2009
// Notes: apt-get install php5-curl

$host = ($_POST['host']) ? $_POST['host'] : $_GET['host']; 
if (empty($host)) exit();

// Get the REST call path from the AJAX application
// Is it a POST or a GET?
$path = ($_POST['path']) ? $_POST['path'] : $_GET['path'];
if (empty($path)) $path="";

$url = $host.$path;

// Get the expected Content-Type
$ctype = ($_POST['ctype']) ? $_POST['ctype'] : $_GET['ctype'];
if(empty($ctype)) $ctype = "text/plain";

if ($_GET['path']) {
 unset($_GET['host']);
 unset($_GET['path']);
 unset($_GET['ctype']);
 $getvars = '';
 while ($element = current($_GET)) {
 $getvars .= key($_GET).'='.$element.'&';
 next($_GET);
 }
 $url .= "?" . $getvars;
}

// Open the Curl session
$session = curl_init($url);

// If it's a POST, put the POST data in the body
if ($_POST['path']) {
 unset($_POST['host']);
 unset($_POST['path']);
 unset($_POST['ctype']);
 $postvars = '';
 while ($element = current($_POST)) {
 $postvars .= key($_POST).'='.$element.'&';
 next($_POST);
 }
 curl_setopt ($session, CURLOPT_POST, true);
 curl_setopt ($session, CURLOPT_POSTFIELDS, $postvars);
}


// Don't return HTTP headers. Do return the contents of the call
curl_setopt($session, CURLOPT_HEADER, false);
curl_setopt($session, CURLOPT_RETURNTRANSFER, true);

// Make the call
$response = curl_exec($session);

// Set manually the Content-Type regards to the web service
header("Content-Type: " . $ctype);

echo $response;
curl_close($session);

?>

たとえば： XMLのGETリクエスト　「http://images.apple.com/trailers/home/rss/newtrailers.rss」

PHP

$queries = Array(
"host" => urlencode("http://images.apple.com"),
"path" => urlencode("/trailers/home/rss/newtrailers.rss"),
"ctype" => urlencode("application/xml")
);
printf("proxy.php?host=%s&path=%s&ctype=%s", $queries["host"], $queries["path"], $queries["ctype"]);

JavaScript

var queries = {
host: encodeURIComponent("http://images.apple.com"),
path: encodeURIComponent("/trailers/home/rss/newtrailers.rss"),
ctype: encodeURIComponent("application/xml")
};
console.log( "proxy.php?host=" + queries.host + "&path=" + queries.path + "&ctype=" + queries.ctype );

Pierre-Henri Lavigne

日々のインスピレーション5

2011.03.02のリンク

jQueryのプラグイン：始めに

日々のインスピレーション4

Wordpressのサムネイルのサイズ

写真のサイズ

サムネイルのサイズ

ターミナルのフォント

CMSでjQueryのアコーディオン

関連記事

リナックスでtwurlのインストール

パッケージ

Ruby

GEM

RAILS

RAKE

TWURL

Twurl

アプリケーションの作成

初めに

リクエスト

2010.09.06のリンク

document onready と document onload

jQuery

Prototype

Mootools

Extjs

Dojo

YUI

関連記事

Youtubeのサムネル

2010.08.11のリンク

GeanyでTextmateのテーマを使う

１「Geany」をインストールする

２テーマをインストールする

2010.08.03のリンク

日々のインスピレーション３

日々のインスピレーション２

2010.06.30のリンク

2010.07.24のリンク

日々のインスピレーション１

Canonical Link Element

2010.06.24のリンク

2010.06.17のリンク

2010.06.16のリンク

2010.06.14のリンク

Andreas Bovens and David Storey — 10 Essential Things You Should Know about Supporting Opera

Nate Koechley — Professional Frontend Engineering

2010.06.01のリンク

2010.05.26のリンク

2010.05.18のリンク

Eric Miraglia - Welcome to YUI 3

Design Inspiration - Fabio Sasso - Front End Conference 2009

flickr JSON Javascript: photos.getExif

2010.05.11のリンク

flickr JSON Javascript: photos.getAllContexts

flickr JSON Javascript: photos.search

Flickr JSON Javascript

2010.04.16のリンク

2010.03.31のリンク

2010.02.25のリンク

2010.02.12のリンク

Webkit スピナー

デフォルトユーザーはブラウザーでGIFのスピナーを見る。

Wekbitのブラウザーでイメージのアニメーションを作る。

もう一回イメージのアニメーションを作ります。GIFを使っています。

プレビュー（Webkitのブラウザー、例えば「Safari」）

2010.02.06のリンク

2010.01.31のリンク

20010.01.26のリンク

2010.01.15のリンク

2010.01.14のリンク

2010.01.12のリンク

2010.01.11のリンク

レポート１：インターフェイス

ジェスチャー

表面

モバイル

メガネ/アイウェア

ajaxリクエスト:　phpでプロキシ !