雅虎的用戶界面博客（YUIBlog）

loader用法在Quorus

2011年3月24日，在9:49上午由彼得Abrahamsen |在發展中， YUI實現 | 1條評論

今天，我想談談銳裝載機和我們如何在Quorus，公司 ，用它來提供與需求的新功能的第三方網站。

權力功能的代碼，我們寫上其他人的頁面，這意味著我們不僅沒有在瀏覽器環境控制吃力不討好的位置，但我們如何使用文件本身的沉重限制。 我們的客戶在其網頁上Quorus引導腳本，一切為我們的功能需要和需求是動態加載的。 我們去英雄的長度，以確保我們的元素，樣式和腳本不改變任何東西，我們不負責的行為。

兩年前，我們開始我們目前的代碼庫，YUI 3時，只是初具雛形。 這是一個冒險的決定在當時承諾，不會打數個月的試用版的代碼庫。 現在回想起來，我不能想像我們將如何取得的成就，我們沒有。 我還沒有看到任何其他的框架，組件接近電源裝載機，屬性， 和 CustomEvent 。

Quorus 引導腳本中，我們為我們的客戶提供幾乎一無所有。 它的工作僅僅是加載我們的平台的核心，沒有阻止頁面加載休息和隊列中的任何API調用，直到我們這樣做。 這個核心的腳本文件，所謂的stage2，內聯yui ， loader ， oop ，以及足夠的智慧來加載額外的庫回應API調用，用戶點擊，其他條件和經營環境。 大部分其他資源提供一個自定義的組合的服務器，它的自定義 Quorus和股票銳模塊。

Bootstrap排隊API調用之間在主機站點的代碼加載時，當我們準備去在我們的全局對象，QUORUS數組：

 QUORUS._callbacks = []; QUORUS.use = function () { // turn the arguments object into a regular array, // so that it can be stored safely var args = Array.prototype.slice.call(arguments, 0); QUORUS._callbacks.push(args); }; ， QUORUS._callbacks = []; QUORUS.use = function () { // turn the arguments object into a regular array, // so that it can be stored safely var args = Array.prototype.slice.call(arguments, 0); QUORUS._callbacks.push(args); }; 

一旦我們準備過程中的API調用， stage2運行，他們一個個在超時。 這將確保我們定期回瀏覽器，這使得用戶體驗更加適應產量控制。 的行為是很多，但像Y。AsyncQueue簡單，並不需要YUI加載：

 // Put the real 'use' function in place for any subsequent calls: QUORUS.use = function (feature, callback) { YUI.use('module-that-provides-the-feature', function (Y) { // find the API for the requested feature, and pass it to the callback callback(Y.APIs[feature]); // process another pending API call, if any: setTimeout(processAPICall, 0); }); }; // Play catch-up, running each callback in sequence: function processAPICall () { var callback = QUORUS._callbacks.shift(); if (callback) { QUORUS.use.apply(QUORUS, callback); } } // Start processing the queue: processAPICall(); ： // Put the real 'use' function in place for any subsequent calls: QUORUS.use = function (feature, callback) { YUI.use('module-that-provides-the-feature', function (Y) { // find the API for the requested feature, and pass it to the callback callback(Y.APIs[feature]); // process another pending API call, if any: setTimeout(processAPICall, 0); }); }; // Play catch-up, running each callback in sequence: function processAPICall () { var callback = QUORUS._callbacks.shift(); if (callback) { QUORUS.use.apply(QUORUS, callback); } } // Start processing the queue: processAPICall(); ： // Put the real 'use' function in place for any subsequent calls: QUORUS.use = function (feature, callback) { YUI.use('module-that-provides-the-feature', function (Y) { // find the API for the requested feature, and pass it to the callback callback(Y.APIs[feature]); // process another pending API call, if any: setTimeout(processAPICall, 0); }); }; // Play catch-up, running each callback in sequence: function processAPICall () { var callback = QUORUS._callbacks.shift(); if (callback) { QUORUS.use.apply(QUORUS, callback); } } // Start processing the queue: processAPICall(); 

bootstrap文件，由這一點，主要是不可改變的：這是我們手頭的東西給客戶，可能需要一個月或更多的部署任何新的版本中，我們給了他們敏捷的初創公司不可能長時間。 同時， stage2文件，是小，從我們自己的服務器的負載，並有一個很短的緩存一生。 這將確保沒有最終用戶將超過幾分鐘的舊版本。 幾乎所有的其他資源，我們需要的是永久緩存的JavaScript庫和CSS文件。

當我們發布了我們的代碼的新版本stage2的自動指示瀏覽器開始下載一個新的位置，確保他們只使用最新的代碼。 這種設置使我們能夠快速部署服務資產超過必要更經常的變化。 這不僅使我們的帶寬成本低，但它提供了一個更好的用戶體驗：緩存的資源負載非常迅速的頁面載入時。

如果我們開始我們今天的代碼庫的利益， YUI畫廊，也有若干組成部分，我們可能會使用使我們的生活更輕鬆。 其中之一是埃里克Ferraiuolo的基本組件管理器，它協助了組件的需求（通常是小部件）的佈線。 另一種可能是存儲精簡版，來幫助我們保留在頁面加載應用程序的狀態。

YUI的團隊為他們的偉大的工作，和許多社會所作出的貢獻表示感謝。 如果你想閱讀更多關於我們的沙箱或協調異步加載的組件的方法，請讓我知道在評論！

作者簡介：彼得Abrahamsen寫的Ruby和JavaScript，管理服務器基礎設施，並研究在美國華盛頓州西雅圖，以用戶為中心設計的。 他可以在IRC上找到的Rainhead。

談話： bloglines | technorati

分享和擴展： 書籤del.icio.us Digg它！ | 書籤交易！

互聯網電視將YUI劇場

12月6日，2010在10:14 am由乍得Auld |在發展中， YUI實現 | 4評論

我想，後一個數的YUI相關的項目，我一直與我的一個朋友，Ozgur傑姆森（@ ozgurcemsen）的快速更新。 埃里克在幾個月前發布關於我們的努力帶來YUI劇場Boxee的 。 我們剛剛完成改造的Boxee的用戶界面和添加一些新的特徵，如標籤和搜索瀏覽。 我們目前正在與Boxee的隊伍獲得進入新的應用程序添加Boxee的箱系統信息庫。 這是除了標準的資源庫桌面版。 Boxee的箱庫中有一些嚴格的要求，圍繞性能和視頻質量。 新版本可望在未來一周左右。

完成了Boxee的應用程序的同時，我們無意中發現了三星電視平台和時機是完美的，因為他們實際上是運行一個“免費電視”的挑戰。 在遊戲中已經很晚，我們碰到的較量幾乎錯過了截止報名日期，但我們拼盡全力，三星在短期內成功地重建了同樣的經歷。 如果你有幾分鐘，請投票/幫助傳播關於我們銳三星劇院提交的字 - http://www.freethetvchallenge.com/submissions/249。 我們已經有了50 +其他項擊敗。

最後，但並非最不重要的的-我們也只是最近完成了一個YUI影院應用工作複雜。 它不是在正式申請資料庫，但要求是在此期間英寸如果你想你可以從這裡下載- http://wiki.plexapp.com/index.php/YahooYUITheater 。

這裡有一些影片在行動應用：

• 三星電視應用- http://www.youtube.com/watch?v=e1kRicivfDU
• 複雜的應用程序- http://www.youtube.com/watch?v=oxBPqVQqdnY
• Boxee的應用程序- http://www.youtube.com/watch?v=IK4i1DksuhU

您應該會看到類似谷歌電視和雅虎連接電視在不遠的未來，以及努力。

希望這些應用程序被證明是寶貴的資源，對於那些通常不參加聚會並/或沒有作出的最新YUIConf 。 他們被釋放，我們將繼續添加新的視頻。

談話： bloglines | technorati

分享和擴展： 書籤del.icio.us Digg它！ | 書籤交易！

jQuery和YUI 3：兩個JavaScript庫的故事

10月27日，2010年由馬克曼仕龍在2:08分|在發展中， YUI實現| 5評論

最近我有機會建立我的第一個 JavaScript前端應用程序。 下面是一個試圖利用手頭的工作，不適合的工具時，發現和演變的短篇小說。 它是通過收購發展相同的前端應用程序使用兩種截然不同的圖書館，jQuery和YUI 3的學習。 的客戶和項目的詳細信息已被故意省略。

概述

該項目涉及到一個單一的大型內容出版商的開放標準為基礎的互動應用程序的幾個不同的Flash工具的重構。 應用程序的高度重視，要高度優化，由於日均頁面展示的大量客戶端收到一個小的初始腳印。 涉及幾個階段，首先是一個初步的概念證明。

這個概念涉及發展一個將填妥的申請。 它包括：

• 動態加載任何框架（如jQuery或YUI 3）初次申請文件負責一個初始種子文件（<1KB）。
• jQuery插件的開發和包容，以支持表單元素的造型和驗證，以及動態的圖表可視化。
• 代和人口的用戶界面，根據用戶輸入，默認配置和應用程序的位置在出版商的網站上。
• 基於用戶的輸入信息的計算和演示。

在充分披露的利益，我自己的經驗，這一點已在發展小的，獨立的解決方案，類型，您通常可以描述作為插件。 這些措施包括圖像旋轉木馬，交互式地圖和Twitter / Flickr的的部件，如動態的UI組件。 首次涉足使用JavaScript時，jQuery是流行的，簡單易學，讓我趕緊拿起我工作的項目所需的基礎知識。 然而，這些都是獨立的單位，沒有互動的需要與其他的代碼，或作為一個更大的應用程序的一部分。

第一次嘗試

在完成該項目的第一階段，它成為痛苦明顯，我是一個非常不同的野獸，比我用來處理。 有過代碼組織中的小經驗，我的代碼很快變得混亂，效率低下和重複。 因此，第一部分是什麼將成為一個更大的應用程序加載緩慢。 事實上，它花了8秒，以產生單一的概念證明。 一個大的變化是必要的，而我曾考慮使用像小型圖書館院長愛德華基地或John Resig的簡單的JavaScript的遺傳模式，基於類的繼承添加到jQuery，我決定走一步。

我想要的是一個完整的，成熟的框架內，開發我的第一個面向對象的應用程序。 東西，將有效地引導我經歷的過程。 在審查可用的庫，我決定採取以下原因銳 3：

• 集成的，基於繼承的應用程序開發支持，包括屬性和一流的管理。
• 長期的解決方案：
  • 支持標準和可訪問。
  • 由一個知名的大型組織，雅虎
  • 與像尊重名稱道格拉斯Crockford的 ， 尼古拉Zakas ，和斯托揚STEFANOV 。
• 性能優化：
  • 初始種子文件只有7KB。
  • 延遲加載的模塊上的需求。
  • CDN的交付。
• 多樣化和全面的文檔：
  • 雅虎開發者網絡
  • YUI 3的API文檔
  • 銳劇院
  • YUI庫
  • YUI的博客
• 成熟的，不斷演進版本之間。
• 在集成工具YUI壓縮 ， YUIDoc ， YUI Builder中 ，“和” 控制台 。
• 不只是的JavaScript，CSS框架。

採取兩種

銳 3集成帶來了直接和間接效益的項目：

• 基於繼承的架構和管理類通過屬性界面，和基地 和 Widget類，生產高性能，可重複使用的和有組織的代碼。
• 從使用的模型和數據演示部件類呈現替代的意見（inline或覆蓋）基於應用程序的站點內的位置分離。
• 沙箱和動態模塊包含通過YUI.use（）。
• 跨瀏覽器的控制台調試使用YUI控制台。
• 在保存，性能優化， 使用YUI壓縮機在Eclipse 。
• 簡單的包容性和整合現有的jQuery插件。
• 在保存時，自動化的代碼文檔，使用YUIDoc。

最後的結果是一個快樂的客戶端和成品分一秒的加載時間（記住了8秒負載的概念的初步證明）。

吸取的經驗教訓

選擇合適的工具

在閱讀這篇文章，我相信有些讀者會認為反jQuery的。 不盡然。 jQuery是一個奇妙的的項目負責許多創新。 但是，正如任何工具，它有它的長處和預期的目的。 它的力量在於正常化的瀏覽器不一致，降低了門檻，對於新手和有經驗的程序員的效率改善。 項目主要學習了，你不能依賴於每一個工作的一個工具。 YUI的基礎上也提供一個良好架構的應用程序框架jQuery可以提供。 但公平地說，它有代價的，看到下一個點。

陡峭的學習曲線

你需要耐心，尤其是當一個陌生的圖書館寫你的第一個應用程序，像我一樣。 然而回報是巨大的。 通過學習另一個庫，不但將您的JavaScript核心技能提高，你也將開發一個圖書館如何工作以及它們帶來的好處有更深的了解。 我努力學習對 YUI的日常新的東西，我越學，越我的思想和純粹的人才，進入了建設 YUI的敬畏了。

只加載當你需要它的內容

雖然它肯定是只加載所有你可能需要前期編程更容易，性能的改進獲得了作為一個延遲加載的內容，只有當你需要的是巨大的直接結果。 這是大大改善了應用程序的性能的關鍵因素之一。

盡可能少與 DOM交互

這一點，並沒有涉及到具體使用的庫。 緩存所需的DOM元素和利用HTML模板，UI的渲染時間大幅下降。 節點可以緩存使用Y.one（），而節點列表可以使用Y.all（）被捕獲。 此外Y.Node.create（）是非常有效地轉換大量的HTML文本字符串到DOM元素之前插入非常有用。

通過例子來學習，使用CDN

在YUI的CDN庫交付使用，我們決定通過 CDN提供該項目的所有資產。 這可能是下一個最大的因素，性能的改善。

酒吧，分喧嘩

對於那些有經驗的程序員，盡量不要在這一個笑。 被用來寫一點比過去更多的插件，我不知道應用程序應如何進行內部交流。 即使閱讀“自定義事件允許你發布自己的代碼中有趣的瞬間或事件，使頁面上的其他組件可以訂閱這些事件並做出回應，”我還是錯過了。

事實證明，YUI的自定義事件的發布 - 訂閱模型作品精美跨類和對象間的通信。 你甚至可以認購前，後的事件和包括動態邏輯基於在一定條件下壓制起泡。

融入您的工作流程的最佳實踐

使用Eclipse，我們能夠融入構建過程 JSLint和YUI壓縮機。 簡單地說，按Ctrl / Cmd + S的每一次你打你的JavaScript代碼進行驗證和優化。 這意味著你的測試和優化，生產高檔代碼從代碼的第一行。 這也意味著，你不會忘記在瘋狂的最後一場比賽中優化的交貨期限。

學習作業銳

雖然每個人都有不同的學習風格，我以為我共享什麼資源，我用學習銳在考慮到具體的目標。

• 觀看有關的YUI劇院情節獲得庫的總體概述，或學習一個特定的模塊。 我強烈建議的起始號碼：
  • 埃里克米拉利亞歡迎銳3
  • 托德Kloots銳3糖
  • 馬特理髮師銳3性能
  • 盧克史密斯的調試銳3
  • 艾薩克Schlueter上解決使用YUI 3中的問題
  • 埃里克在Web應用程序開發使用YUI 3 Ferraiuolo
  • 盧克史密斯的活動演進
• 對雅虎閱讀銳 開發者網絡 。 我嘗試閱讀每週一點點，多學些，每次我重新閱讀它。
• 閱讀API文檔。 如果你不能找到銳劇院或開發人員網絡，深入的API。 它甚至支付直接閱讀代碼。
• YUILibrary.com論壇的閱讀和發布的問題。
• 玩了很多樂趣！

結論

YUI 3是一個功能齊全，成熟和不斷變化的庫，適合從小到大的項目。 作為前端Web應用程序變得越來越複雜，需要像YUI庫將增長。 雖然對於外行，它可以在第一個艱鉅的經驗，如果你堅持下去，你會得到回報。

談話： bloglines | technorati

分享和擴展： 書籤del.icio.us Digg它！ | 書籤交易！

大廈TipTheWeb使用YUI 3

2010年10月5日，在9:35時由Eric Ferraiuolo | 在發展，在野生， YUI實現|評論關閉

作者簡介：埃里克Ferraiuolo是TipTheWeb的董事和聯合創始人Oddnut軟件 。 他寫道：在他的博客 ： 925的HTML ，並且可以在Twitter 上找到： ericf 。 埃里克是2009年在YUIConf功能演示 。

TipTheWeb是一項新服務，讓人民群眾直接引爆它支持自己喜愛的網頁內容。 例如，如果你找到一個偉大的博客後，你可以提示25美分。

TipTheWeb是一個非盈利組織， 促進自由，高品質的網頁內容授予出版商收到提示。 如果您發布在網上，您可以使用您TipTheWeb的帳戶要求的地方，你發布到收到提示，並有資格領取 TipTheWeb獎項。

TipTheWeb的使用YUI 3

TipTheWeb用戶界面是完全建立在頂部銳3（我們喝了庫爾援助。）我們採取的方法是使用我們的JavaScript代碼的基礎和結構YUI 3 。 我們已經建立了33自定義銳3個模塊 （56如果你包括子模塊，插件，滾UPS），其中有幾個我們貢獻了YUI 3畫廊 ： 覆蓋附加 組件管理器 ， Markout ，和REST資源 。

頁面級別的類

TipTheWeb的核心功能，實現對一些高功能的網頁超過 Ajax服務器通信。 對於每個頁面，我們創建了一個自定義的YUI 3模塊，公開了一個頁面級的類，用於頁面的功能部件之間的協調行動。

在我們的應用程序的主要頁面，提示頁面，你可以看到這種方法是如何應用頁面級類TipsWindow。 頁面的主要功能部件的部件：CreateTip用於創建提示，和TipList部件進行編輯，取消，和現有資金的秘訣。

很多重疊

我們使用Y.Overlay小號各地廣泛，我們應用程序的UI實現用戶互動，這使得我們保持界面整潔的同時，仍然有在頁面上可用的高級功能的功能。 我們需要的，不中內置的Y.Overlay覆蓋，所以我們開發了覆蓋附加，這是在YUI 3畫廊和很多其他YUI的3個供電網站使用。 這裡有一些地方我們使用TipTheWeb覆蓋：

當前國家的TipTheWeb

我們很樂意為您嘗試TipTheWeb ，現在我們是在邀請只有測試版，所以要求邀請我們的網站上，我們會向您發送邀請碼。

請務必趕上我們談的YUIConf 2010年我們將展示我們如何使用TipTheWeb銳3 YQL（更深入）。

談話： bloglines | technorati

分享和擴展： 書籤del.icio.us Digg它！ | 書籤交易！

實施重點：租車快車

2010年9月28日，6:01上午斯特凡克洛普|在野生 ， YUI實現 | 2評論

出租汽車Express是在互聯網上領先的獨立汽車租賃比較網站。 它可以讓用戶租用汽車，在網上超過 1000個城市和世界各地的機場。

我們的用戶群主要是由非技術，這意味著他們要盡可能比較價格和租金的汽車一樣輕鬆。 隨著我們的網站重新啟動在2010年6月，我們已實施 2 YUI的許多組件，以幫助我們的客戶提供了一個直觀的感受。

我們使用YUI的組件？

我們一直在使用的組件，包括連接管理器 ，自動完成，數據源， 日曆 ， 動畫 ， JSON ，以及集裝箱 。

我們為什麼選擇銳

審查不同的JavaScript庫，我們可能會使用在出租汽車Express時，我們發現，YUI的是我們的需要，最完整的。 對我們最大的賣點是非常模塊化的方法了YUI實施不同的設計模式，以及強大的文檔和例子，他們提供。 從發展的角度來看，這導致了我們的應用程序的快速發展，而無需鬥爭庫。

我們如何使用YUI

我們在許多方面利用了YUI。 我們最常用的組件，自動完成，日曆，容器，連接管理器。 下面是一些我們使用這些組件的方法。

自動完成

自動完成的組件是在我們的網站上廣泛使用，以幫助用戶找到在其中一個城市或機場租一輛車。 我們真的很喜歡，是多麼容易實現這個組件，以及如何快速響應。 我們的高速緩存的搜索結果服務器端，以幫助改善搜索結果，但是，在客戶端緩存也有助於加快響應組件的巨大。 我們真正走上另一個特點是多麼容易的結果風格。 當顯示用戶的位置，這是至關重要的，因為我們需要確定在城市和發現的地點是在機場發現的。

日曆

日曆組件也可用於整個網站時，承租人是灌裝日期進行搜索。 我們正在使用一個定制版本約翰Peloquin的間隔選擇日曆 ，在YUI的對話框顯示。 基本上是我們想做的是給承租人了為期兩個月的觀點時，選擇的日期，以及直觀地展現他們的日期範圍，他們目前已經選定。 再次，這是非常簡單的實現使用YUI 2日曆，它基本上下來到創建 YUI的對話，身體包含一個日曆的div，然後附加一個 YUI間隔日曆該 div。

容器

我們利用我們的整個網站在許多不同的方式YUI的容器。 在上面的例子中，我們用一個對話框來幫助我們顯示的時間間隔，當用戶選擇一個日期的日曆。 在我們的率搜索結果頁面中，我們集裝箱的大量使用給承租人汽車租賃公司的不同方面的更多信息和車輛他們可能潛在的租金。 此頁面上的容器中， 大多是面板，我們再利用為每個不同的上市。 例如，車輛顯示功能面板：

承租人與評價機構的評級事情多了幾分樂趣。 顯示的收視率時，我們真的希望把重點用戶的關注，收到一個機構的分數，並在一個乾淨，易於查看的方式來顯示信息。 利用對話框控制，我們能夠約束視口和中心的對話框，輕鬆地幫助我們實現這一目標。 通過設置一個空白頁眉和頁腳，它造型簡單，只需添加相應的樣式，我們的CSS。 最終的結果是一個乾淨的收視率容器承租人提供了他們想要的信息。

連接管理器

連接管理器是​​用於整個網站，每當我們需要拉通過 XHR請求的數據。 在一些上面的例子中，我們利用此組件要求的自動完成implementaitons的城市和機場，並拉動額定對話承租人的評級信息。

我們利用連接管理器的一個有趣的方式與我們的租賃中心區塊位於大多數頁面。 為了幫助與表現，我們做很多全頁面緩存，我們的許多內容的網頁上。 然而，我們仍希望在這些網頁上顯示的動態租賃中心塊。 這提出了一個問題，我們能夠解決與連接管理器。 而不是打破了我們充分緩存頁面和緩存的頁面，我們發現它是更容易，包括通過一個簡單的異步請求的租賃中心塊的唯一方面。 我們發現，這使得我們完全緩存的頁面保留的性能，但仍顯示在我們的租賃中心中的動態內容。

最後的思考

總體而言，我們一直與我們的選擇非常樂意使用YUI。 它為我們提供了一個模塊化磁帶庫，是有據可查的的，易於使用和實施。

談話： bloglines | technorati

分享和擴展： 書籤del.icio.us Digg它！ | 書籤交易！

實施重點：燈光

，2010 9月15日上午9:00由珍妮唐納利|在YUI的實現 | 評論關閉

談話： bloglines | technorati

分享和擴展： 書籤del.icio.us Digg它！ | 書籤交易！

使用YUI的2 DuckDuckGo搜索引擎

2010年8月19日5:41上午| 2評論 |在YUI的實現由加布里埃爾溫伯格

DuckDuckGo is a search engine that uses YUI extensively. Here's what it uses in particular:

• ImageLoader . Matt Mlinac's YUI 2 ImageLoader was the first thing I implemented and what originally hooked me on YUI for this project. DuckDuckGo has favicons next to results and often has “Zero-click Info” above results that usually includes an image . I didn't want these images to compete with the results when loading, as getting results as fast as possible is the ultimate goal.

  The ImageLoader Utility handles this well by loading the images after the page load. DDG also auto-loads the next page of results when you scroll down. Sometimes the favicons icons are therefore hidden, and with ImageLoader their load is delayed (sometimes indefinitely) until necessary. To accomplish this, there is a different image group per (internal) page, each with its own custom trigger.

   div.event=new YAHOO.util.CustomEvent('it');
      var ig1=new YAHOO.util.ImageLoader.group(div,'click');
      ig1.addCustomTrigger(div.event);
      div.ig = ig1;
  

• Cookie . DuckDuckGo has a lot of settings , which are stored via cookies and alternately via URL params . When cookies are used, I use Nicholas Zakas's YUI 2 Cookie Utility to easily get and set the values.

   YAHOO.util.Cookie.set(cookie, value, { expires: new Date("January 12, 2025") });
    x=ki||YAHOO.util.Cookie.get("i"); 

• StyleSheet . Some DDG settings change the look and feel of the site. These changes are actually accomplished after page load via Luke Smith's YUI 2 StyleSheet Utility . Some of these changes are straightforward and I can just use the setStyle Dom function .

   YAHOO.util.Dom.setStyle('b2','display','block'); 

  Others require actual class changes, which I use the utility to do.

   YAHOO.util.StyleSheet('DDG').set('.ci', {display: "block"}).
              set('.cid', {display: "block"}).
              set('.ci2', {display: "block"}).
              enable(); 

• Dom . I also use some functions in Matt Sweeney's base YUI 2 Dom component . I referenced setStyle above, and I also use the related getStyle , addClass and removeClass functions. In addition, I find the getViewportHeight , getViewportWidth , getX and getY functions to be incredibly useful to make things work cross-browser, and now on mobile screens as well.

• KeyListener . DDG has a bunch of keyboard shortcuts that let you navigate results without the mouse. I use the YUI 2 KeyListener component to enable these shortcuts.

   kl14 = new YAHOO.util.KeyListener(document, { keys:[70] }, { fn:not } );kl14.enable(); 

• AutoComplete . I'm currently working on adding search suggestions to the search engine, and will be using Jenny Donnelly's YUI 2 AutoComplete component for the front-end. I understand that AutoComplete is getting introduced in YUI 3 soon. Everything else I use has already been introduced in YUI 3, though I still use YUI 2. However, I will be exploring the migration to YUI 3 soon.

About the author: Gabriel Weinberg is the founder of the DuckDuckGo search engine, based out of Valley Forge, PA. Gabriel has been a startup founder for over ten years, and his last company was sold in 2006. Gabriel holds degrees from MIT in Physics and the Technology and Policy Program.

談話： bloglines | technorati

分享和擴展： 書籤del.icio.us Digg它！ | 書籤交易！