2010»9月»ヤフーユーザーインターフェイスブログ（YUIBlog）

YUI 3クイックヒント：独自の素晴らしい追加

2010年9月29日12:22にエリックMiraglia別|中開発 | 3コメント

ルーク（ @ ls_nが）先日の質問に応答して、このスニペットを投稿して、私はそれが簡単なヒントとして、ここで共有する価値があると思いました。

ほとんどのセレクタベースのイディオムと同じように、YUI 3の表現力の多くは、1つまたは複数のHTMLElementsへの参照を持ったら、何ができるかから来ている-ノード参照を持つことを意味し、YUI 3では、あなたが通常を介して取得したY.one( selector string )またはY.all( selector string ) 。だから、 Y.one("#foo"). doSomethingInteresting一般的なパターンです。

それは、ノード（および/またはのNodeList）に独自の魔法を追加することで、YUI 3の表現力を拡張するのは簡単です。ここにあなたの拡張機能がモジュール化され、再利用可能にする1つの方法です。

まず、新しいカスタムモジュールを作成します（我々はそれを呼ぶことにnode++ ）：

  YUI.add（ 'ノード+ +'、関数（Y）{
	
	 / /のコンテキストで実行される関数を定義する
	 / /ノード·インスタンス：
	関数doSomethingAwesome（）{
		 Y.log（ "ここで素晴らしい何かを実行してください。"）;
	 }

	 / /ノードのプロトタイプにdoAwesomeThingを追加するためにaddMethodを使用します。
	 Y.Node.addMethod（ "doAwesomeThing"、doSomethingAwesome）;
	
	 / / NodeListsにこの機能を拡張します。
	 Y.NodeList.importMethod（Y.Node.prototype、 "doAwesomeThing"）;
	
 }、'0 .0.1 '、{必要があります：['ノード ']}）;

ルークの要旨はこちらです。

ページ上の定義では、 node++することができますuseの任意のインスタンスでdを。実装コードでは、するだろう：

  YUI（）を使用します。（ 'ノード+ +'、関数（Y）{
	
	 / /単一のノードから使用します。
         Y.one（ '＃foo'）をdoAwesomeThing（）;

	 / / NodeListから使用します。
	 Y.all（ 'P'）doAwesomeThing（）;
	
 }）;

あなたがバインドするための唯一のYUIインスタンス（複数可）ことに注意してnode++モジュールへのアクセスがありますdoAwesomeThing 。複雑なアプリケーションを構築するあなたが好きだろうと、このデザインの特徴の一つは、実装ロジックは変更する必要はありませんということである場合の依存関係リストnode++の進化-で自動的に処理されているuse()時間、および依存関係宣言は、それに付随するコードでご利用いただけます。

共有および拡張： del.icio.usでブックマーク | Diggそれ！ | reddit！

YUIシアター-ダヴガラス： "Node.jsのとYUI 3の使用"を参照してください（36分）

中| 11:34 2010年9月29日には、Eric Miragliaによって午前YUIシアター | 11コメント

Node.jsの上のライアン·ダールの作品 -と、そのプロジェクトの周囲に形成するコミュニティは- 2010の大きな物語の一つとして、HTML5に参加しています。 YUIエンジニアダヴガラスはYUI 3 Node.jsの実装のための強力な味方を作るために取り組んできましたが、このビデオで彼は彼がこれまで行われているかを示しています - クライアントとサーバー上で同じコードを実行して徐々に強化されたウィジェットのデモを含む。このいずれかをお見逃しなく。

ビデオは下に埋め込んだ場合、あなたのRSSリーダーで正しく表示されません、 YUIシアターの映像の高解像度版を見たり、ダウンロードするにはクリックスルー。

その他の最近のYUIシアター動画：

アロイスReitbauer：dynaTraceのAjax版 - dynaTraceは、Internet ExplorerでWebアプリケーションのパフォーマンスを分析するための最も強力なツールの1つを提供する。本講演では、dynaTraceエンジニアアロイスReitbauerはdynaTraceインターフェイスを使用して、4つの特定の分析シナリオを順を追って説明します。
ライアングローブ：YUI 3禅の達成パフォーマンス -以下の成文化されたガイドラインは、あなたが高速のWebサイトの構築を支援し、しかし、きれいな、高速かつ拡張可能なアプリケーションを構築することもF2Eの仕事のあらゆるレベルでのパフォーマンスのバランスのとれたアプローチを取って含むことができます。 YUI 3は、パフォーマンスの魔法、高速フロントエンドのコードが簡単に生成するために楽しく、さまざまなツールを内蔵した適切なサイズの抽象化層を提供する、このプロセスであなたを助けるために設計されています。このセッションでは、YUI 3の世界でパフォーマンスのJavaScriptの禅を探っていきますとYUI 3は、あなたが書くあらゆるアプリであなたの処分で置く強力なツールのいくつかを紹介します。
ダグラスクロックフォード：JavaScriptをクロックフォード- ：シーン6 Loopage -ソフトウェア開発は、最初のプログラミング言語で作られて以来行われているすべてで繰り返された設計ミスの特定のセットによって妨げられている。と、やや奇跡的には、JavaScriptが根本的に我々はアプリケーションを書く方法を変革し、それを右にしようとしている。再び。歴史のループでは、すべての前に起こっているが、それはこのように起こったことはない。あなたがサーバサイドJavaScriptとNode.jsのようなプロジェクトの周り興奮の出現を気にしなければならない理由である - 彼らはトレンドの鋭い終わりにならないため、彼らは次の大きな革命に向かって道路を舗装しているので、ソフトウェアインチ

YUIシアターを購読する：

共有および拡張： del.icio.usでブックマーク | Diggそれ！ | reddit！

インプリメンテーション·フォーカス：レンタカーエクスプレス

中| 6時01分に2010年9月28日には、ステファン·クロップによって午前野生では、 YUIの実装 | 2コメント

著者について： ステファン·クロップは、開発のディレクターであるExpressITechの親会社レンタカーエクスプレス。ステファンは、過去6年間のさまざまなロールでレンタカー業界向けに高度に使用可能なWebソリューションを開発してきました。彼は現在住んでいるバンクーバー、ブリティッシュコロンビア、カナダで働いています。

レンタカーExpressはインターネット上でリードする独立系レンタカー比較サイトです。それは、世界中の1000以上の都市と空港のオンラインユーザーが家賃の車をすることができます。

私たちのユーザーベースは、価格を比較すると同じように簡単に可能な限り車を借りたいことを意味し、主に非技術的である。 2010年6月に当社のウェブサイトのリニューアルで、私たちは直感的な経験をお客様に提供するために、YUI 2の多くのコンポーネントが実装されています。

我々はどのYUIコンポーネントを使用していますか？

我々が使ってきたコンポーネントが含まれ、接続マネージャ、オートコンプリート、データソース、カレンダー、アニメーション、 JSON 、およびコンテナを。

我々はYUIを選んだ理由

我々は潜在的に使うことができた別のJavaScriptライブラリ確認するときはレンタカーExpressを、我々はYUIが私たちのニーズに最も完全であることがわかった。私たちの最大の販売機能はYUIが異なるデザインパターンと同様に、堅牢なドキュメント、およびそれらが提供されている例を実装した非常にモジュラーアプローチでした。開発の観点から、これはライブラリを使用して苦労することなく、我々のアプリケーションの急速な発展につながった。

我々はYUIを使用する方法

我々はいくつかの方法でYUIを利用しています。私たちの4最も使用されるコンポーネントは、オートコンプリート、カレンダー、コンテナ、および接続マネージャです。ここでは、これらの各コンポーネントを使用するいくつかの方法があります。

オートコンプリート

オートコンプリートコンポーネントは、ユーザーが車を借りるための都市または空港を見つけるために私たちのサイト上で広く使われています。私たちは本当にそれがこのコンポーネントを実装することであったか簡単に好きで、どのように迅速にそれが応答します。我々はキャッシュ検索の検索結果を向上させるため、サーバー側の結果が、また、クライアント側のキャッシュを持つことは、コンポーネントの応答を高速化する上で大いに役立ちました。私たちは本当にに撮ったもう一つの特徴は、結果のスタイルにあったか簡単だった。我々がいる場所都市で発見され空港で発見された場所を識別するために、必要に応じてユーザーに場所を表示するときにこれが重要だった。

オートコンプリートコンポーネントのスタイル設定

カレンダー

賃借人が検索を行うために日付を記入されたときにカレンダコンポーネントは、サイト全体で使用されます。私たちは、ジョンPeloquinのカスタマイズしたバージョンを使用している間隔の選択カレンダーをし、それを表示するYUIダイアログ。それらの日付を選択する際に本質的に我々が何をしたいか賃借人に2ヶ月のビューを提供されただけでなく、視覚的に日付は、彼らが現在選択されている範囲はどの程度それらが表示されます。繰り返しますが、これはYUI 2カレンダーを使用して実装するのは非常に簡単でした、そして、それは基本的には、そのdivにYUIの間隔カレンダーを添付し、カレンダーのdivを格納するためにボディを設定して、YUIダイアログの作成に降りてきた。

コンテナ

我々は、異なるいくつかの方法で当社のウェブサイトを通じてYUIのコンテナを利用しています。上記の例では、ユーザーが日付を選択したときに私たちはインターバルカレンダーを表示するためのダイアログを使用していました。私達の率の検索結果ページでは、賃借人に別のレンタカー会社の側面と、彼らが潜在的に借りるかもしれない車両の詳細な情報を提供するために、コンテナを多用している。このページ上のコンテナのほとんどはパネル我々はそれぞれ異なったリストについては、再使用している。たとえば、車両の表示はパネルを備えています：

標準パネル

観光賃借評価機関の評価をもう少し楽しみを得た。評価を表示するときに、私たちは本当に代理店が受け取ったスコアにユーザーの注意を集中するときれいに、簡単にビューの方法でこの情報を表示したかった。ダイアログコントロールを利用することによって、我々は、私たちはこの目標を達成するために簡単にビューポートとセンターのダイアログを抑制することができました。空白のヘッダーとフッターを設定することによって、それはちょうど私たちのCSSに適切なスタイルを追加することにより、シンプルなスタイリングしました。最終結果は、彼らが望む情報を賃借人を提供するクリーンな評価コンテナた。

ダイアログコンテナのスタイル設定

接続マネージャ

我々はXHRリクエストを介してデータをプルする必要がある場合、接続マネージャは、サイト全体で使用されます。上記の例のいくつかでは、オートコンプリートimplementaitonsための都市と空港を要求するとダイアログ評価賃借人のために評価情報を引き出すために、このコンポーネントを使用しています。

我々はConnection Managerを利用している1つの興味深い方法は、ほとんどのページに座っている私たちのレンタルセンターブロックを使用することです。パフォーマンスを助けるために我々はコンテンツページの多くでフルページキャッシングの多くを行う。しかし、我々はまだこれらのページに動的なレンタルセンターブロックを表示したい。これは、我々は、Connection Managerを使用して解決することができなかった問題を私たちに提示した。むしろ私たちの完全にキャッシュされたページと、我々はそれは単純な非同期要求を介してレンタルセンターブロックを含むように簡単だったが見つかりましたページのキャッシュのみの側面を分割する必要がなくなります。我々は、この私たちが完全にキャッシュされたページを持っていることから、パフォーマンスを維持する、まだ、まだ私たちのレンタルセンターボックスに動的コンテンツを表示するために許可されてことがわかった。

接続コンポーネントを介して取り込まれたレンタルセンター

最終的な考え

全体的に我々はYUIを使用するには、私たちの選択で非常に満足しています。それは、よく文書化されていますモジュラーライブラリで使用すると簡単に実装を提供してくれます。

共有および拡張： del.icio.usでブックマーク | Diggそれ！ | reddit！

マット·テイラーのRaphaelJSモジュール：YUI 3ギャラリーで

中|マシュー·テイラー13:05で2010年9月27日開発、 YUI 3ギャラリー | 9コメント

マット·テイラー（ @ rhyolight 、ブログ）は、内部ブラウザサイドのJavaScriptフレームワークにヤフーで働いています。 彼はグラフィックスで作業楽しんで、彼が使用する場合は、図面とアニメーションで働いていJAVA2Dライブラリを。 ヤフーのために働くシリコンバレーに移動する前に、マットは、ソフトウェアの請負業者としてセントルイスエリアで働いていた。 彼はまたして幅広く活動しているのGroovyとGrailsを SpringSourceのための技術。 彼はYUI2ベースの元のリードプログラマでしたGrailsUIの GrailsのWebフレームワークのプラグイン。

RaphaelJSが管理する強力なJavaScriptライブラリであり、 SVG描画やアニメーションを。それはあなたが簡単にSVGキャンバスを作成し、非常に簡単に基本的なシェイプとパスを描画しても、セットにそれらをグループ化し、1つまたは多数のベクトルに変換を適用することができます。あなたは、図形を描画する画像を操作し、すべてをアニメーション化することができます。 RaphaelJSは素晴らしい提供API簡単にSVG要素を作成および変更するします。

ライブラリが印象的ですが、私はYUI3でRaphaelJSライブラリの要素にいくつかの重要な機能を追加することが判明している。私は新しいとこれらの取り組みを始めましたRaphaelJSギャラリーモジュール。

レイジーローディングRaphaelJSとプラグイン

第一の特徴はRaphaelJSライブラリだけでなく、のレイジーローディングですが、任意のRaphaelJS プラグインする必要があるかもしれません。 RaphaelJSギャラリーモジュールでは、あなたがYUIサンドボックス内でそれらを使用することがあります宣言するときにのみ、これらのファイルをロードします。たとえば、次のように

 
 YUI（{ギャラリー： "ギャラリー -  2010年9月22日-20-15 '}）を使用します（'ギャラリーラファエル '、関数（Y）{
 
	 Y.Raphael（）は（関数（ラファエル）{使用
		
		 / /ここでラファエルを使用するだけでは、YUIの外側と同じよう
		 VAR紙=ラファエル（ 'myPaper'、500、500）;
 
	 }）;
 
 }）;

あなたがRaphaelJSプラグインを使用している場合は、配列内のパスを指定するとしてY.Raphaelの最初のパラメータは、（）（）関数を使用することを送る。

 
 YUI（{ギャラリー： "ギャラリー -  2010年9月22日-20-15 '}）を使用します（'ギャラリーラファエル '、関数（Y）{
 
	 VAR myPlugins = ['プラグイン/ raphael.awesomePlugin.js'、 'プラグイン/ raphael.wickedPlugin.js'];
 
	 Y.Raphael（）は（myPlugins、関数（ラファエル）{使用
 
		 / /ここでラファエルを使用するだけでは、YUIの外側と同じよう
		 VAR紙=ラファエル（ 'myPaper'、500、500）;
		 / / '紙'は今、あなたのプラグインによって追加された新しい機能を持っています。
	 }）;
 
 }）;

RaphaelJSライブラリが最初にロードされるコールバック関数が唯一のパラメータとしてラファエルオブジェクトを使用して実行される前に、任意の指定されたプラグインがロードされます。

カスタムイベント

一度ラファエルオブジェクトを使用して描画領域を作成しましたが、その後すぐに図面に取り掛かることができます。あなたのようなメソッドを呼び出すときにrect 、 circle 、およびpathの描画空間上には、SVGベクトルを表すバックオブジェクトを受け取ります。通常は、を介してそれらに対応するDOM要素へのアクセスを必要がありますnodeのプロパティ。たとえば、次のように

 
 VAR紙=ラファエル（ 'myPaper'、500、500）;
 varの二乗= paper.rect（0、0、100、100）;

これは、100ピクセルの幅と高さの座標[0,0]で長方形のベクトルオブジェクトを作成します。基になるDOM要素（これはSVGですへのアクセス権を持っているrectのように要素）：

 
 VAR rectNode = square.node。
 rectNode.onclick =関数（）{
	アラート（ "おめでとう、あなたが正方形をクリック！ '）;
 };

あなたが熱心なYUIのユーザーであれば、おそらくこれ以上の何かをしたいと思います。どのように組み込みの約Y.Node同様に？同じようにnodeプロパティはSVGオブジェクトの背後にHTMLElementを指す、 $nodeプロパティが指すY.Nodeその要素のラッパー。ですから、このようなことを行うことができます：

 
正方形。$ node.on（ 'マウス'、関数（）{
	アラート（ "おめでとうございます、あなたがマウスを移動することができます！ '）;
 }）;

今より複雑なものを試してみましょう。つのベクトルとの相互作用は、右のスタイルを更新するために、他の描画のベクトルを引き起こすことができるでしょうか？方法について我々はすべてのマウスがページ上の円周上に配置されている場所でそれらの色に依存してレンダリングされるいくつかのバーを作成します。

 
 VAR紙=ラファエル（ 'rcanvas'、600、800）;
 
 。VAR CIRCは= paper.circle（350、200、100）attrは（{記入してください： 'ピンク'、ストローク： 'ブラック'}）;
 
 / /配列に長方形の束を押す
ます。var i = 0;長方形= [];
 （は、i <10は、i + +）{のために
	 rectangles.push（paper.rect（0、40 * iの、200、20）attrは（{記入してください： "赤"、ストローク： 'イエロー'}））;
 }
 
 / /それぞれに特定のサークルのMouseMoveイベントハンドラを追加して、長方形をループ
 Y.Array.each（四角形、関数（矩形、インデックス）{
	します。var i =インデックス+ 1;
	 CIRC $ node.on（ 'MouseMoveイベント'、関数（EVT）{
		 / /塗りつぶしの色はこの長方形の位置に依存し、ダイナミックである
		 / /配列だけでなく、マウスの位置
		 VAR LF = circ.attrs.cx  -  circ.attrs.r、
			 RT = 2 * circ.attrs.r + LF、
			 X = evt.clientX  -  LF、
			トップ= circ.attrs.cy  -  circ.attrs.r、
			 BTM = 2 * circ.attrs.r +トップ、
			 Y = evt.clientY  - トップ。
			赤=（（（128 * X）/（2 * circ.attrs.r））-1）* I / 6、
			緑= 256  - （（（（128 * X）/（2 * circ.attrs.r））-1）* I / 6）
			青=（（（128 * Y）/（2 * circ.attrs.r））-1）* I / 6;
		 rect.attr（ '記入'、 'RGB（' +赤+ '、' +緑+ '、' +青+ '）'）;
	 }）;
 }）;

この例では、実行されているここが、あなたは以下のスナップショットで見ることができるように、それぞれのバーの色は、円の上にマウスの場所としてだけでなく、バーの順序に依存します。

マウスカーソルが円の上に配置されている場所に応じて、バーの色を個別に変更します。

だから、見ることができ$node便利なショートカットですが、何も壮観。それは本当にであろう素晴らしいあなたはRaphaelJSで作成したそれぞれのSVGオブジェクトが起動しなかった場合、カスタムイベントを。それはあなたの個々の描画要素は、カスタムイベントを発生させることができるでしょうし、ページ上の何かを聞くと反応する可能性があります。これは多くの点で役立ちます。まず第一に、それはあなたの図面間の豊富な相互作用を提供します。つのベクトルを持つユーザとの対話は現在、オンデマンドで相互作用の他のベクトルを通知することができます。これは、特定の条件が満たされたときに、プログラムで、図面からイベントを発生させることを意味します。これはあなたの図面が他のベクトルを通知することができませんが、ページ上のものはインチ聞くことができるだけでなく、

 
 VAR紙=ラファエル（ 'rcanvas'、600、800）;
 
 。VAR CIRCは= paper.circle（350、200、100）attrは（{記入してください： 'ピンク'、ストローク： 'ブラック'}）;
 
 / /四角形や円の配列を作る
ます。var i = 0、長方形= []、円= [];
 （は、i <10は、i + +）{のために
	 rectangles.push（paper.rect（0、40 * iの、40 * iの、20）attrは（{記入してください： "赤"、ストローク： 'イエロー'}））;
	 circles.push（paper.circle（0,0,20））は（非表示）;
 }
 Y.Array.each（四角形、関数（矩形、インデックス）{
	します。var i =インデックス+ 1;
	 CIRC $ node.on（ 'MouseMoveイベント'、関数（EVT）{
		 VAR LF = circ.attrs.cx  -  circ.attrs.r、
			 RT = 2 * circ.attrs.r + LF、
			 X = evt.clientX  -  LF、
			トップ= circ.attrs.cy  -  circ.attrs.r、
			 BTM = 2 * circ.attrs.r +トップ、
			 Y = evt.clientY  - トップ。
			 newWidth =（（（256 * X）/（2 * circ.attrs.r））-1）* I / 6、
			赤=（（（128 * X）/（2 * circ.attrs.r））-1）* I / 6、
			緑= 256  - （（（（128 * X）/（2 * circ.attrs.r））-1）* I / 6）
			青=（（（128 * Y）/（2 * circ.attrs.r））-1）* I / 6;
		 / /この時、色だけでなく、長方形の幅を変更するだけでなく、
		 rect.attr（{
			幅：newWidth、
			記入してください： "RGB（ '+赤+'、 '+緑+'、 '+青+'） '
		 }）;
		 / /この矩形の幅が変更されたことを通知するカスタムイベントを発生させる
		 rect.fire（{幅：newWidth、ソース：RECT、順序：インデックス}、 '幅の変更'）;
	 }）;
	
	 / /各矩形は幅が変更に起動リスナーを取得します。
	 rect.on（ '幅の変更'、関数（EVT）{
		 VARはattrs = evt.source.attrs。
		 / /対応する円を取得し、矩形の右端に移動します
		円[evt.order]。attrは（{
			 CX：attrs.x + attrs.width、
			 CY：attrs.y、
			記入してください： 'cornflowerblue "を
		 }）のshow（）;
		
	 }）;
	
 }）;

この実行例を見てくださいここに。また、長方形の右端に描かされていることを円の下のスナップショットから見ることができます。これは長方形の現在の属性からの相対位置に円を移動させるハンドラによって捕捉されている個々の長方形のカスタムイベントの発生に応答して発生している。

これはYUI3内RaphaelJSためのいくつかの興味深いpossiblitiesを開きます。たとえば、我々は外の世界にイベントを発生させているエンティティグループ自体にベクトル図形のグループに何を作成することができますか？内部で、各ベクトルの図面は、カスタムイベントを介して、そのコンテナとの通信ができ、コンテナは、それが外の世界に発生しますどのようなデータについて決定を下すだろう。これは完全にカプセル化された、インタラクティブなSVGコントロールのアイデアを開きます。

要約

HTML5とその衛星技術の優勢で、豊かな相互作用のためのFlash以外のそう多くのオプションがあります。理想的には、ページ上の任意のベクタの要素は完全にアクセス可能と標準化すべきである。これはFlashに頼らずにアクセス可能な、標準のWebコントロールを作成するために私たちのために素晴らしいpossiblitiesを開きます。ページに描かれたすべてのベクトルは我々だけで他のDOMノードのようにYUIに変更することができますDOMノードによってバックアップされているためSVGは魅力的なオプションです。それにより何ですRaphaelJSギャラリーモジュールは RaphaelJSによって作成されるすべてのSVGオブジェクトを拡張するために、そのページ上の別の場所からこれらのelmentsの豊富な相互作用の鍵となります。

共有および拡張： del.icio.usでブックマーク | Diggそれ！ | reddit！

隠された詳解：clearfixは+オーバーフローをリローデッド

中| 6時27分に2010年9月27日には、ティエリKoblentzによって午前CSS 101 | 12コメント

著者について：ティエリKoblentzはYahoo!でフロントエンドエンジニアです
彼が所有しているTJKデザインとEZ-css.orgを。 あなたがでTwitterでティエリーに従うことができます@ thierrykoblentz 。

clearfixとoverflow ： hidden構造的なマークアップなしでフロートをクリアするには、2つの最も人気のあるテクニックかもしれません。

この短い記事は、最初の方法を強化し、第二の本当の意味でいくつかの光を流しています。

clearfix

であなたはclearfix知っているすべて間違っている我々はまだマージンを崩壊に対処しなければならない者としてものの、私はこの方法ではブラウザ間で作成する問題を説明し、私は浮動小数点数（モーダルウィンドウなど）が隣接していない要素にclearfixを使用することをお勧め。このデモページには、問題を示しています。

のマージン崩壊挙動最初の二つのボックスは、それはボックス（理にかなっている内部の下マージンを保持し、生成された（非空）コンテンツであることを示している仕様による）。

したがって、ブラウザ間で同じボックスのレイアウトを作成する我々は両方の擬似要素を使用してコンテンツを生成することによって、元のメソッドを向上させることができます:before と :after ：

  。clearfix：前に、
 。clearfix：{の後に
  内容：; "。"    
  表示：ブロック;    
  高さ：0;    
  オーバーフロー：隠された;	
 }
 。clearfix：の後に{クリア：両方;}
 。clearfix {ズーム：1;} / * IEの<8 * /

あなたが他のメソッドを介してマージンを崩壊に関連して既にパッチを当てた問題が発生する可能性があり、単にしかし、 既存のプロジェクトでこれらの新しいものを使用してclearfixのルールを置き換えるものではありません。

`overflow`

決済に関するほとんどの議論に浮かぶoverflow:hidden方法が現れ、それは常に"によって撃墜されたあなたは、div内の絶対座標で配置された要素を配置している場合、あなたはこれらの要素を切断されるだろう "。しかし、これは本当の必要はありません。 overflow:hidden常に相対的に配置された要素をクリップしますが、それは常に絶対座標で配置されたものを非表示になりません。それがすべて包含ブロックに依存しているため、これは次のとおりです。

"包含ブロック"の10.1定義 ：

4。要素は、 'の位置：絶対的な"を持っている場合は、包含ブロックは、最も近い先祖によって確立される"位置" 、 "絶対"の、 "相対的な'または'固定'、...

これは絶対座標で配置された要素がでスタイルボックスの外側に表示されることを意味overflow:hidden彼らの包含ブロックは、ボックス自体または前記ボックス内の要素である場合を除きます 。

ことが確認できます。このデモページを物事がどのように動作するか確認する。

より良い代替

あなたは浮動小数点数を含む要素に幅を適用することができた場合は、あなたの最良のオプションは、使用することです。

 表示：インラインブロック;
幅：<any明示VALUE>。

参考文献

共有および拡張： del.icio.usでブックマーク | Diggそれ！ | reddit！

YUI：営業時間9月29日（水）

中|ルーク·スミス13:50で2010年9月24日開発 | 1件のコメント

YUIの次の割賦：営業時間は次の水曜日、29になります。

YUI 3チャートは次のリリースで来ている、いくつかの初期の作品のプレビューは既にギャラリーに。トリップブリッジは新しい構造を導入し、YUI 2のチャートパッケージから学んだことは、新しいアーキテクチャーを通知する方法を示す、柔軟性とシンプルの間の微妙なバランスを求めて、呼び出しになります。ああ、私はFlashを言及しないのですか？

また、デッキになりアレンラビノビチ彼はyuilibrary.comの再設計でやっている素晴らしい作品の更新を与える。ホーム·ページ、ユーザーガイド、デモ、チュートリアル、APIドキュメント：我々はここですべてを話している。動作します。多くの方法では、全体の新たな物語と、はるかに良いものです。

私たちは、午前10時から12時PDTにオンラインになるでしょう。接続の詳細は、通常と同じです。

1-888-371-8922（Skypeは米国以外の参加者*のために偉大な作品）へのダイヤル
参加者コード47188953を入力してください＃
画面共有セッションに参加する（これはそれを初めて使用する場合は、このは、Adobe Connectのプラグインをインストールするプロンプトが表示されます）

そして最後に、この営業時間のためにyuilibrary.comフォーラムのスレッドはここで。ノート、興味深い持ち帰り、それが行われていた後、コールの録音のためにそちらを参照してください。質問や、トピックの提案、またはレビューをお願いしているコードを掲示することにより早期のオフ会話を始める。

にサブスクライブすることを忘れないでYUIのカレンダーに従っ@ yuilibraryを営業時間と他のYUIの興味深さの最新のアップデートをTwitterで。

そこにお会いしたい！

* - Skypeがオプションでない場合は、ローカル番号を私にメールしてください。

共有および拡張： del.icio.usでブックマーク | Diggそれ！ | reddit！

2010年9月24日のために野生の

エリックMiragliaで午後1時2010年9月24日|で野生の | コメントオフ

私達はのための準備としてYUIConf 2010年と数ヶ月でより多くの、ここでは大規模なYUIの世界でのメモを取った他のものの一部です。

YUI劇場は必見F2EポッドキャストのNetTutsリストをトップス：アンドリュー·バージェスは約書き込みYUIシアター： "それは、しばしば数回で月、Yahoo!はその従業員を最大に保つためのWeb技術の最先端に開発者にもたらすと思われる日付。私たちの残りの利益のために、これらの会談が記録され、公開されています。あなたは、ダグラスクロックフォードとニコラスZakas、パフォーマンスとアクセシビリティから、JavaScriptとDOMに至るまでの協議のようなよく知られている開発者を見つけることができます。 " ＃
YUI 3によって供給DigitalInsurance.com（@ apipkinサイト）：多産アンソニー小土瓶はギャラリー寄稿新しい生成できましたDigitalInsurance.comポータル YUI 3を利用して、。＃
しかし、JS（@ davglassの@ codepo8）何も使用していないプログレッシブ·エンハンスメント：クリスチャン·ハイルマンは、Ajaxianに書いている： "プログレッシブ·エンハンスメントはまだ非常に現代的なブラウザ環境でJavaScriptの機能について興奮している多くの人々のために混乱を招く問題である。これは、非JS環境のためのソリューションを書き込むことが時代錯誤を感じるし、もう一度、JavaScriptで強化することができます。私はそれが正しいことを行うための単純な問題である私のためにそのように育ったが、JavaScriptライブラリーとアウトオブボックスウィジェットの今日の世界でそれは、ドラッグに見えるかもしれません。 YUIチームのダヴガラスを入力してください。彼は頭の中で周りにプログレッシブ·エンハンスメントの概念を回すとJS恋人とバックエンド·コード"endurer"として、彼は純粋なJavaScriptのようにきっぱりとこの問題を解決するために設定されています" 詳細については記事全文をチェックしてください。＃
オリバーAndrichからYUI 3のより多くのオーバーレイプラグイン：オリバーのGitHubのページから： "オーバーレイプラグインは、私は一般的にYUI 3プラグインの開発効率を学ぶために書いた5プラグインのコレクションです。 5プラグインのうち三人は多かれ少なかれ模倣オーバーレイエクストラで作成されたエリック·Ferraiuoloを .... 5プラグインは、次のとおりです。
- BaseOverlayPlugin
- ModalOverlay
- KeepAligned
- HideOnEscape
- ConstrainDimensions "
（オリジナルのソース。）＃
カーネギーメロン大学HackUためのリードバークのYUIスライド：YUIエンジニア（とイエティの作者）がリード·バークは、一部のスライドとYUI 3ベースのスライドショーエンジンを手早くカーネギーメロン大学で彼の最近の講演のために。＃
YUI劇場にクロックフォードおよびその他の達人からのJSを学ぶ上でDevcurry Suprotim Agarwalさんは今朝devcurryに書き込みます： "この記事では、私が情報の完全なJavaScriptの達人が提供するいくつかの非常に有用なJavaScriptのビデオや講義のリンクを共有し、楽しみウォッチングし、絶対に無料！インターネット無料動画のフルですが、私が最も有用彼らの唯一のカップルを、選択しています。あなたが学ぶようにメモを取るために準備をしなさい... JavaScriptをCrockfordのビデオ講義 -ダグラスクロックフォードは、JavaScriptの建築家や演劇と言語の新しい機能を設計する上で重要な役割です。彼のビデオは、任意のJavaScript開発者のために'-なければなりません"を。 YUIシアター - JavaScriptとウェブ開発の教祖による自由なプログラミング交渉へのアクセスを提供します"Suprotimは、他のYUI Theaterのタイトルを含むコンテンツのいくつかの他のソースを表示するには点灯します。。＃