Twitter で使用されているオープンソースがまとめられています。

bootstrap

http://twitter.github.com/bootstrap/

Webアプリケーション(サイト)の開発をより簡単にスタートするために設計されたHTML、CSS、およびJSツールキットです

その他、Twitter で使用されているオープンソースまとめはこちら↓
http://twitter.github.com/

関連する記事:

1. github.comでサイトを管理するまでの作業メモ

jquery-logo

jQueryのパフォーマンス高速化Tipsのヒントリストです。

セレクタのパフォーマンスのヒント

1. 常に#ID から辿る

jQueryで要素を選択する最速の方法は、IDによるものです。

$('#content').hide();
$('#content p').hide();

2. クラスの前にタグを使用

jQueryで2番目に早いセレクタは、タグセレクタ（$（’head’））です。
なぜならそれはネイティブJavaScriptメソッド、getElementsByTagName（）だからです。
最良の方法は、接頭辞にタグ名（およびIDから派生）を持つクラスです。

var receiveNewsletter = $('#nslForm input.on');

クラスセレクタは、jQueryの最も遅いセレクタのひとつです
可能な限りそれ(タグ名とIDの接頭辞無し)を使用することは避けてください。

例えば、これは遅いです。”content”のIDを探す為に、div要素を全てループするからです。

var content = $('div#content'); // VERY SLOW, AVOID THIS

また、複数のID指定も遅いです。

var traffic_light = $('#content #traffic_light'); // VERY SLOW, AVOID THIS

3. サブクエリを使用

var header = $('#header');

var menu = header.find('.menu');
// or
var menu = $('.menu', header);

4. find()を使用

var divs = $('.testdiv', '#pageBody'); // 2353 on Firebug 3.6
var divs = $('#pageBody').find('.testdiv'); // 2324 on Firebug 3.6 - The best time
var divs = $('#pageBody .testdiv'); // 2469 on Firebug 3.6

5. チェーンメソッドを活用

セレクタをキャッシュするよりも、チェーンのjQueryメソッドをすると良いでしょう

$('#menu-item').click(function () {alert('test click');})
                     .css('display', 'block')
                     .css('color', 'red')
                     fadeTo(2, 0.7);

DOM操作のパフォーマンスのヒント

6. jQueryオブジェクトをキャッシュ

var header = $('#header');
var divs = header.find('div');
var forms = header.find('form');

7. DOM挿入のいずれかの種類を実行するときに単一の要素のすべてをラップする

DOM操作は非常に遅いです。できるだけ少なくしてHTML構造を変更してみてください。

var menu = '<ul id="menu">';
for (var i = 1; i < 100; i++) {
    menu += '<li>' + i + '</li>';
}
menu += '</ul>';
$('#header').prepend(menu);

// 代わりにこちら:

$('#header').prepend('<ul id="menu"></ul>');
for (var i = 1; i < 100; i++) {
    $('#menu').append('<li>' + i + '</li>');
}

イベントのパフォーマンスのヒント

8. readyイベント

// Instead of:
$(document).ready(function (){
    // your code
});

// you can do:

$(function (){
    // your code
});

一般的なjQueryのパフォーマンスのヒント

9. jQueryの最新バージョンを使用

最新バージョンは、通常、最良のものです。ただし、jQueryのコアバージョンを変更した後、コードをテストすることを忘れないでください。時にはそれは完全な下位互換性はありません。

10. HTML 5を使用

HTML5は軽量なDOM構造の標準を念頭にしています。軽量なDOM構造は、jQueryとロードのパフォーマンスに良い結果をもたらします。
だから、可能な場合はHTML5 を使用。

11. 必要とされていないコードをロードしない

不要なJSコードとセレクタをロードしないでください。

12. Googleソースコードからフレームワークをロードする

Google CDNからjQueryをロードする – ユーザーの最寄りのキャッシュの場所からスクリプトを高速に実現します。

// Link the minified version by specific version
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

関連する記事:

1. Node.js パフォーマンス高速化の為の10個のヒント
2. scriptaculous.jsのエフェクト(Highlight)使用方法
3. Firefoxを使ってサイトのモックアップを簡単に作成する「Pencil」

* Big Script: PHP, Perl, Python, Ruby, Smalltalk
http://hyperpolyglot.wikidot.com/scripting

* Small Script: Bash, Tcl, Lua, Javascript, IO
http://hyperpolyglot.wikidot.com/small

* Platform: C, C++, Objective C, Java, C#
http://hyperpolyglot.wikidot.com/platform

関連する記事:

1. Ruby on Rails が自社Webサービス開発に向く11の理由
2. scriptaculous.jsのエフェクト(Highlight)使用方法
3. CentOS 5.4 に munin(サーバー監視ツール) をインストール MRTG/cacti

１．squirrelmail

公式サイト：
http://www.squirrelmail.jp/

SquirrelMailはPHPベースのWEBメールシステムです。40以上の多くの言語に対応、外部サーバーのサポート、プラグインによる機能拡張など多くの機能を備えています。

特徴

• 日本語（多言語：40以上の多くの言語）対応
• データベース不要（しかし、MySQLなどにも対応）
• プラグインによる機能拡張
• IMAP4、SMTPサーバー

２．AtMail

公式サイト：
http://atmail.org/

AtMailはPHP言語によって開発されたWEBメーラーで、IMAPに対応しています。また、Ajax技術を使用しているため、デスクトップアプリケーションに匹敵するぐらいの快適な操作性を実現しています。

特徴

• Ajax技術を使用した快適な操作性
• ビデオメール
• 見栄えの良いデザイン
• IMAPサポート
• スペルチェック

３．RoundCube

公式サイト：
http://roundcube.net/

RoundCube Webmailはデスクトップアプリケーションのようなユーザーインタフェースを持っているブラウザベースの多言語IMAPクライアントです。データベースはMySQLかPostgreSQLを必要とします。

特徴

• 多言語対応
• MIMEとHTMLメッセージに対するフルサポート
• アドレス帳
• 外部SMTPサーバのサポート
• スペルチェック

関連する記事:

1. phpMyAdminのインストール
2. PostgreSQLで外部結合した時、NULL値を初期値に変換する方法
3. 無くなって初めて気づく定期的自動バックアップの大切さ

参考url：
http://kyosuke.jp/portfolio/seminar/2006-04csslite/flash.html

自分はHTML編集ソフトとして「Dreamweaver8」を使ってるのですがそれでFlashオブジェクトを挿入すると、こんな感じのソースが挿入されます。

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="500" height="200" title="SlideShow">
  <param name="movie" value="SlideShow.swf" />
  <param name="quality" value="high" />
  <embed src="SlideShow.swf" width="500" height="200" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash"></embed>
</object>

上記のソースを【The W3C Markup Validation Service】でチェックすると「there is no attribute “src”」とか、「there is no attribute “width”」でエラーが出ます。

最新の「Dreamweaver CS3」では対応されてるかもしれないが、未だ旧バージョンを使用してる場合に、Flashを挿入したときバリデータでエラーを出さないようにするためには次のように修正する。

１．まずは、「embed」タグを消去する。

「embed」タグはXHTMLでは使えないタグなので削除

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="500" height="200" title="SlideShow">
  <param name="movie" value="SlideShow.swf" />
  <param name="quality" value="high" />
</object>

２．「classid」要素を削除し「type」要素に変更

「classid」要素の代わりに、MIME typeを指定する「type=”application/x-shockwave-flash”」に変更する

<object type="application/x-shockwave-flash" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="500" height="200" title="SlideShow">
  <param name="movie" value="SlideShow.swf" />
  <param name="quality" value="high" />
</object>

３．「codebase」要素を削除し「data」属性に変更

「data」属性にmovieのvalueと同じFlashへのパスを追加しないと表示されないので追加。

<object type="application/x-shockwave-flash" data="SlideShow.swf" width="500" height="200" title="SlideShow">
  <param name="movie" value="SlideShow.swf" />
  <param name="quality" value="high" />
</object>

以上で、W3CのXHTML（Valid）規格に準じたFlashソースの書き方でした。

関連する記事:

1. Firefox3は快適過ぎます。
2. 3年B組SEO先生！
3. PHPでファイルをダウンロードさせる方法（PEAR::HTTP_Download）

あとで勉強する為にメモメモ。

関連する記事:

1. scriptaculous.jsのエフェクト(Highlight)使用方法
2. Highslide JSの使い方(使用方法)
3. テキストエリア等の入力フォームをリサイズ可能にするJavaScript

参考url：
http://www.koikikukan.com/archives/2007/01/18-005102.php

ダウンロードページ：
http://vikjavev.no/highslide/download.php

2008-04-10時点での最新バージョンは3.3.12でした。

１．スクリプトのインクルード設定
の直前に設定します。

<script type="text/javascript" src="http://user-domain/highslide/highslide.js"></script>
<script type="text/javascript">
    hs.graphicsDir = 'highslide/graphics/';
    window.onload = function() {
        hs.preloadImages();
    }
</script>

２．ポップアップ用空要素設定
Highslide JS でポップアップする画像を表示させるための div 空要素を設定します。そして div 要素の id 属性に “highslide-container” を設定します。
bodyタグの直下に記述します。

<div id="highslide-container"></div>

３．タグ設定
まず、サムネイル画像表示用の img タグを書き、それを a タグで括ります。a タグの href 属性には元画像の URL を設定してください。
そして a タグに class 属性 “highslide” と、onclick 属性を追加します。
なお、ユーザビリティを考慮して onkeypress 属性も追加しておくと良いでしょう。

<a href="[画像ファイルのURL]" class="highslide" onclick="return hs.expand(this)" onkeypress="return hs.expand(this)"><img src="[サムネイル画像のURL]" alt="..." /></a>

他にもこちらを参考にしました。
http://www.koikikukan.com/archives/2007/03/30-003838.php

関連する記事:

1. scriptaculous.jsのエフェクト(Highlight)使用方法
2. テキストエリア等の入力フォームをリサイズ可能にするJavaScript
3. headerでLocationする時のtarget指定について

入力フォームをリサイズ出来る必要性が出て調べたのでメモ。

参考url：
テキストエリアとかリサイズ可能にする JavaScript
http://espion.just-size.jp/archives/06/237175908.html

yukotan hour
http://yukotan.blogspot.com/2007/02/javascript.html

関連する記事:

1. scriptaculous.jsのエフェクト(Highlight)使用方法
2. headerでLocationする時のtarget指定について

やり方はJavaScriptでやる方法等何種類かあるみたい。

PHP参考url：
http://ml.php.gr.jp/pipermail/php-users/2002-August/009477.html

<form action="" target="_top" method="post">

JavaScript参考url：
http://oshiete1.goo.ne.jp/qa1789095.html

if ( self != top ) { top.location = self.location; }

関連する記事:

1. scriptaculous.jsのエフェクト(Highlight)使用方法
2. CentOSにphpコンパイラのapcをインストール
3. phpMyAdminのインストール

参考url：

http://www.openspc2.org/JavaScript/Ajax/ref/script.aculo.us/ver1.8.1/index.html

まずは、HTMLエレメント。

<div id="resultMsgs">完了しました。</div>

次に、JavaScript。

<script type="text/javascript">
<!--

function execEffect() {
    new Effect.Highlight("resultMsgs", {duration:1.2});
}
Event.observe(window, "load", function(){execEffect();}, false);

// -->
</script>

duration:はハイライトさせる時間(秒数指定)。
値を変える事により、ハイライトする時間が変化する。
以上、簡単なメモ。

関連する記事はありませんでした...