本文章是由機器翻譯。

Windows 8.1

透過 Chronicling America API 建立現代微縮影片

Tim Kulp

下载代码示例

今天,報紙上取而代之的是其他網站上的新聞源。一次,不過,報紙是當前事件資訊的主要來源。通過記載美國專案 (chroniclingamerica.loc.gov),美國國會和各種機構的圖書館一直在努力使美國的豐富歷史報紙通過標準化的 API 在 Web 上可用。此 API 可以讓開發人員利用媒體從要生成研究應用、 新聞與歷史背景的應用程式或應用程式用於將內容附加到族譜的記載美國專案。在本文中,我介紹記載美國 API,然後生成 Windows 應用商店的應用程式,允許使用者研究,並查看數位化的報紙。

收藏美國 API 的概述

記載美國有兩個核心元件到它的 API:OpenSearch議定書和標準化的 Url 導航內容。為每個發佈 URL 遵循標準的格式,您可以修改以提供不同的資料。作為一個例子,檢索特定頁面需要下面的 URL 結構:HTTP://chroniclingamerica.loc.gov/lccn/sn83030214/1913-08-12/ed-1/seq-1/。這種格式打破下來到:請求一個特定的出版物 (/ lccn/sn83030214 /),提供的日期和識別碼的問題和版 (1913年-08-12/ed-1),並提供頁面數 (seq 1 /)。如果我想要請求的第二頁,我只是更新 seq 1 到 seq-2。在整篇文章,我將使用的標準化的 URL,使導航簡單和快速無需查找具有許多一次性請求到伺服器的物件。

您可以使用 URL 來檢索特定的內容和OpenSearch協定要搜索標題和頁。搜索標題和頁使用不同的 URL 結構。標題搜索結構可以發現在 1.usa.gov/1a0GOpF,並且頁面搜索結構可以發現在 1.usa.gov/188T1HB。這些 XML 檔提供所有的輸出格式和參數,可以在記載美國使用。我將重點介紹在這篇文章,有的大多數屬性對要搜索的網頁搜索。

建設一個縮微膠片應用程式

如果你不是膜的足夠老記得縮微膠片,它是膜的一個清楚的片斷的微型列印圖像了。這些圖像是由肉眼看,幾乎沒有可讀,但通過將縮微膠片表放在特別的投影儀,您可以訪問到數百個圖像 (或更多)。它是偉大的海量存儲媒介的圖像,並説明使用者通過使用投影機的控制車輪的文檔之間快速移動。

縮微膠片是我的一個應用程式範例,顯示從記載美國報紙的靈感。這款應用程式啟動的出版物在 GridView 中顯示清單。使用者可以搜索此內容 (增強從縮微膠片) 和審查的問題,很像使用電子書閱讀器。國會圖書館已經建立好的 Web 應用程式中具有強大的 JavaScript 功能。你可以從這個網站瞭解並翻譯 JavaScript 從 Web 構建 Windows 應用程式商店。

我建 JavaScript 為 Windows 8.1 我記載美國的 app。首先,從Visual Studio中的 JavaScript Windows 應用商店的應用程式範本創建導航應用程式。可以使用範本 (例如,導航中的代碼 navigator.js) 和 default.js 的應用程式啟動事件處理常式中的預先存在的代碼這樣你就不用到手動生成應用程式的所有基礎設施。

100 年前的今天......

記載美國主頁顯示今天的日期 100 年前的報紙的頭版。這是一個有趣的地方開始我的應用程式,並立即向內容介紹人。若要開始,需要將連接到記載美國和拉資料。這款應用程式執行許多功能圍繞其資料,所以在 js 資料夾中,創建一個新的 JavaScript 檔命名為 data.js,在所有的資料交互將發生。認為這是我的資料層。

因為我不想 data.js 漏出來到全域命名空間中的代碼,我將下面的代碼添加到 data.js 創建一個自包含的函數:

(function () {
  "use strict";
  // Code goes here
})();

此塊使裡面一切東西私人所以我不遇到任何變數命名衝突的檔,使用 data.js。 中的代碼注釋,"代碼此處顯示"替換圖 1

圖 1 初始代碼為 Data.js 的

var imageList = new WinJS.Binding.List(); // The image list for binding
var pagesList = new WinJS.Binding.List(); // List of pages for a single issue
var urlPrefix =   "http://chroniclingamerica.loc.gov"; // Used to prefix all URLs
var httpClient =   new Windows.Web.Http.HttpClient(); // Default HTTP client to use
function getInitialPages() {
  // Get the date and set it 100 years ago
  var hundredYearsAgo = new Date();
  hundredYearsAgo.setYear(hundredYearsAgo.getYear() - 100);
  var uri =
    new Windows.Foundation.Uri(urlPrefix + "/frontpages/" +
    hundredYearsAgo.getFullYear() + "-" + hundredYearsAgo.getMonth() + "-" +
    hundredYearsAgo.getDate() + ".json");
  httpClient.getStringAsync(uri)
    .then(
    function c(result) {
      var images = JSON.parse(result);
      images.forEach(function (item) {
        item.medium_url = urlPrefix + item.medium_url;
        item.thumbnail_url = urlPrefix + item.thumbnail_url;
        item.url = urlPrefix + item.url;
        imageList.push(item);
    });
  })
}
// Get function goes here
WinJS.Namespace.define("Data", {
  GetInitialPage: getInitialPages,
  ImageList: imageList,
  PageList: pagesList
});

圖 1 開頭基本保存從記載美國 API 呼叫資料的聲明。我設置了一些內務管理變數,如 URL 首碼,以避免打字 (和不可避免地 mistyping) 的基記載美國 URL,以及 HttpClient 物件要共用跨職能。

從 100 年前在 data.js 中的第一個函式呼叫初始頁。此函數與一個簡單的計算,以獲取今天的日期開始,然後減去 100 年。我使用的標準化的 Url 從記載美國,設置到 frontpages 目錄中的 API 的匹配提供的日期的每一個問題從載入所有前臺頁面的請求。請注意該 URL 以.json 來表示希望從伺服器返回的 JSON 資料結束。

記載美國 API 允許您設置此值,以請求不同的資料類型如 XML 或 HTML。使用 HTTPClient.get­StringAsync 函數,應用程式從 API 請求 JSON 資料,並將返回的字串值解析到一個 JSON 物件。因為我打電話 getStringAsync,我不知道什麼類型的資料從伺服器回來。我的應用程式期望 JSON,所以要驗證的資料 API 返回可以轉換為 JSON,我使用這樣。這在這種情況下返回的 JSON 物件的陣列。如果返回的字串不能轉換為 JSON,該代碼將引發錯誤。最後,代碼更新要追加首碼 (因為記載美國提供的 Url 在這裡不是絕對的相對 Url 作為) 在該專案中的 Url 以確保我的應用程式可以連接到圖像。

關於使用 Windows.Web.Http.HttpClient 的一個說明:總是計畫失敗。您的代碼試圖達到的伺服器可能是關機或不可用,例如。已為簡潔起見,此處省略了錯誤處理,但我已經把它包含在線上示例代碼中。

在結束了在代碼圖 1,我添加了 WinJS.Namespace 要註冊 data.js 可用於其他應用程式的內容。此命名空間功能將 data.js 中的私有物件轉換為市民,可由其他代碼訪問。使用 WinJS.Namespace.define 通知應用程式的已定義的物件和成員都可用的代碼的其他部分。本質上,這是您在其中進行資料和它的成員可訪問與IntelliSense一起在您的網頁上。

綁定到主畫面定義的資料物件,您需要連接要顯示來自記載美國網站的內容的 HTML 頁面。首先打開 default.html 頁並添加對 data.js 的腳本引用。

這一步使得 data.js 可用於所有頁面在應用程式中。Home.html 的主要部分中的代碼替換為以下內容:

<div id="hundresYearsListView" class="itemslist win-selectionstylefilled"
  aria-label="List of Publications"
  data-win-control="WinJS.UI.ListView" data-win-options=
    "{ selectionMode: 'none', layout: { type:  WinJS.UI.GridLayout } }"></div>

此代碼定義一個 ListView 控制項顯示搜尋結果從記載美國 API。ListView 控制項使用範本與報紙頁面的圖像和出版物的地方。通過使用 WinJS.Binding.Template 控制項,您描述什麼應該出現在清單視圖中。範本讓您的設計團隊 (或市場行銷團隊,如果你沒有一個設計團隊) 工作直接與 HTML 而不必擔心資料繫結。添加以下直接下文 < 身體 > 標籤:

<div class="itemtemplate" data-win-control="WinJS.Binding.Template">
  <div class="item">
    <img class="item-image" src="#" data-win-bind=
      "src: thumbnail_url; alt: label" />
    <div class="item-description">
    <h3 class="item-title" data-win-bind="textContent: label"></h3>
    <h4>(<span data-win-bind="textContent: pages"></span> pp.)</h4>
    <h4 class="item-subtitle win-type-ellipsis" data-win-bind="textContent:
      place_of_publication"></h4>
    </div>
  </div>
</div>

確定要綁定到哪個欄位由該贏將資料繫結屬性,Windows 用來確定要顯示在綁定期間中的特定屬性的屬性。 資料集屬性是在 HTML5,它允許您生成您的需要的自訂屬性的新屬性。 Windows 應用商店的應用程式廣泛使用的資料屬性,但您可以建立您自己的屬性,例如資料發佈在此示例中,其中包含報紙的名稱。 此屬性可以通過使用 document.querySelector 函數,方便地訪問到的所有元素提供此屬性搜索。

將資料連線到 ListView 若要將資料放入清單視圖,請打開 home.js 檔 (/ pages/home/home.js) 和添加所示的代碼圖 2 對主頁控制的準備好了的函數。

圖 2 代碼添加到準備好的函數

ready: function (element, options) {
  // Load the data
  Data.GetInitialPage();
  // Configure the list view
  var hundredYearListView =
     document.getElementById("hundresYearsListView").winControl;
  hundredYearListView.itemDataSource = Data.ImageList.dataSource;
  hundredYearListView.itemTemplate = document.querySelector(".itemtemplate");
  hundredYearListView.oniteminvoked = this._itemInvoked;
  // Process the bindings
    WinJS.Binding.processAll();
},
_itemInvoked: function (args) {
  args.detail.itemPromise.done(function itemInvoked(item) {
  var itemSelected = Data.ImageList.getAt(args.detail.itemIndex);
  WinJS.Navigation.
navigate(
    "/pages/details/details.html", { selectedItem: itemSelected });
  });
}

中的代碼圖 2 開始從 API 通過調用 Data.GetInitialPage 函數載入資料的過程。 然後我設置 ListView 來接資料從 imagelist (這由 GetInitialPage 函數填充) 和准到 ListView 控制項的範本控制項。 要總結 ListView 控制項的功能,我將添加 ItemInvoked 的事件處理常式以便當使用者按一下一個報紙圖像,事情發生。 在準備好的函數結束與對 WinJS.Binding.processAll 的調用來更新使用者介面的基礎,在準備好的功能,如資料繫結期間發生的修改。

下一步,_itemInvoked 的定義,採取一個選定的項並將它傳遞給採取進一步的行動的詳細資訊頁面。 這是只直接到頁傳遞的資料物件的基本操作。 請記住導航方法提供了將資料從一頁傳遞到另一個很大的靈活性。 在 Windows 應用商店的應用程式中使用導航的詳細資訊,查閱 Windows 開發中心 Windows 應用商店的應用程式頁上的樣本 (bit.ly/153fDXM)。

你在運行您的應用程式之前,添加中所示的樣式圖 3 到 home.css (/ pages/home/home.css),使 app 略為簡潔的外觀。

圖 3 樣式為 Home.css 的

.homepage section[role=main] {
  margin-left: 120px;
  margin-right: 120px;
}
.homepage item {
  height: 225px;
  display: block;
  margin-bottom: 5px;
  margin-top: 5px;
  margin-left: 5px;
}
#hundredYearsListView {
  height: 90%;
}

此時,運行您的專案,您應該看到類似的圖 4


圖 4 記載美國主畫面

我造了一個主畫面和一點點的水管系統。下一步是查看出版物的頁面並創建一個詳細資訊螢幕。

查看特定的頁面

添加詳細資訊螢幕非常簡單與現有的應用程式安裝程式。首先,我需要將一個新的函數添加到 data.js 來查找網頁的問題。接下來,我需要打造出了實際上將顯示此資料的頁面控制項。

與中的代碼開始由回 data.js 和替換的評論,"Get 函數在這裡," 圖 5

圖 5 獲取函數為 Data.js

function get(url) {
  pagesList.length = 0;
  var uri = new Windows.Foundation.Uri(
    url.replace(/\/seq\-[1-999]{1,3}(\/|\.json)?$/g, ".json"));
  httpClient.getStringAsync(uri)
    .then(
    function complete(result) {
      var editionItem = JSON.parse(result);
      editionItem.pages.forEach(function (item) {
        item.thumbnail_url = item.url.replace(".json", "/thumbnail.jpg");
        item.medium_url = item.url.replace(".json", "/medium.jpg");
        pagesList.push(item);
      })
    })
}

此代碼將一個 URL 並使用標準的 URL 約定的記載美國取代對第一頁的引用 (/ seq-1 /) 與 JSON 調用到版 (將轉換教育署-1/seq-1 / ed 1.json)。若要執行此操作,使用正則運算式匹配模式 /seq-[1-3 位數位] / 或 seq-[1-3 位數位號碼].json 和.json 只是將其替換。通過調用版的 JSON 物件,如何獲得有關這一問題並不只是具體的頁面資訊。可以進一步向上的 URL,一般情況下,獲取有關的問題或發佈更多常規資訊,但現在我會堅持的版和頁面。在添加後 Get 函數,一定要得到這樣的其他網頁可以使用它為參考的 WinJS.Namespace.define 函數中註冊它。

創建詳細資訊頁第一,在頁目錄下,創建一個資料夾命名為"詳細資訊"。此資料夾將舉行的三個檔組成一個頁面控制項 (HTML、 JS 和 CSS 檔)。向資料夾中添加一個新的專案,選擇頁面控制項 (下 Windows 存儲區),並命名專案 details.html。現在更新 details.html 的身體標記 (/ pages/details/details.html) 通過使用中的代碼圖 6

圖 6 代碼為 Details.html 的

<div class="listview-itemtemplate"
  data-win-control="WinJS.Binding.Template">
  <div class="item">
    <img class="item-image" src="#" data-win-bind="src: medium_url" />
  </div>
</div>
<div class="details fragment">
  <header aria-label="Header content" role="banner">
    <button data-win-control="WinJS.UI.BackButton"></button>
    <h1 class="titlearea win-type-ellipsis">
      <span class="pagetitle"></span>
    </h1>
  </header>
  <section aria-label="Main content" role="main">
    <div id="flipview" data-win-control="WinJS.UI.FlipView"></div>
  </section>
</div>

請注意此代碼非常類似于 home.html,除而不是 ListView 控制項中使用 FlipView 控制項。 這使應用程式更多的電子書閱讀器的感覺。 雖然我討論只有圖像,記載美國提供消費 PDF 內容、 光學字元辨識 (OCR) 的文本和其他類型的內容的訪問。 認為有關如何這些不同類型可以添加更多深度至某個應用程式 (如依賴 OCR 功能的輔助技術) 在今後的專案。

HTML 是完整的。 現在去比 CSS 檔 (/ pages/details/details.css) 若要添加清理的樣式,將使頁面看起來體面:

.details section[role=main] {
  margin-left: 120px;
  margin-right: 120px;
}
#pageListView {
  height: 90%;
  width: 90%;
}
#flipview {
  height: 90%;
  width: 90%;
}

連接到 FlipView 的詳細資訊

打開 details.js 頁面 (/ pages/details/details.js) 並將下面的代碼添加到頁面控制項的準備就緒功能:

// Step 1: consume the options data
var selectedItem = options.selectedItem;
// Step 2: acquire data for pages
Data.Get(selectedItem.url);
// Step 3: set the page title
var title = document.querySelector(".details .pagetitle");
title.textContent = selectedItem.label;
// Step 4: set up the ListView to display the pages
var fV = document.getElementById("flipview").winControl;
fV.itemDataSource = Data.PageList.dataSource;
fV.itemTemplate = document.querySelector(".flipview-itemtemplate");
WinJS.Binding.processAll();

此代碼是 home.js,與我使用 options.selectedItem 的異常相同。此物件來自主頁,進入詳細資訊頁面,通過導航功能。我使用的 options.selectedItem 物件中的資料調用 Data.Get 和填充綁定到 FlipView 控制項的清單物件。就像 ListView,FlipView 使用 WinJS.Binding.Template 控制項來顯示內容。我決定使用 FlipView,因為我想要一次顯示只有一頁,那一頁是一張圖片。使用 FlipView 控制項還為使用者提供更為自然的閱讀體驗。

運行該代碼,您應該看到類似圖 7


圖 7 示例的詳細資訊頁

與地方中的細節,是一塊收拾這款應用程式:搜索功能。

搜索內容

搜索報紙內容的能力提供了一個最大的研究工具。它是舊的縮微膠片設備從一定的改善。通過使用OpenSearch,記載美國提供了功能強大的搜索能力,遵循開放標準。我要為我的應用程式,對頁面內容使用從參數搜索 1.usa.gov/188T1HB

首先添加一個資料夾命名為"搜索"頁目錄中將新項添加到搜尋資料夾,然後選擇搜尋結果控制。要啟用搜索,必須將搜索聲明添加到您 appmanifest 和對 default.html 檔,將 searchResults.js 檔的引用。有更多的搜索比添加幾個檔,所以如果您不熟悉搜索合同流程,你可以通過閱讀在 Windows 應用商店的應用程式開發中心文章開始 bit.ly/HMtNCo

生成的搜索功能所需的第一個元素是向 data.js 添加新的搜索功能 (/ js/data.js) 檔。打開 data.js,在代碼中添加圖 8 後 get 函數。

圖 8 搜索功能

function search(terms) {
  itemList.length = 0; // Clear the list items
  var uri = new Windows.Foundation.Uri(
    urlPrefix + "/search/pages/results/?andtext=" + terms + "&format=json");
  return httpClient.getStringAsync(uri)
    .then(
    function complete(result) {
      var searchList = JSON.parse(result);
      imageList.pop();
      searchList.items.forEach(function (item) {
        item.medium_url = urlPrefix + item.id + "medium.jpg";
        item.thumbnail_url = urlPrefix + item.id + "thumbnail.jpg";
        item.label = item.title;
        imageList.push(item);
      })
  })
}

此簡單函數的搜尋條件,構建出要與頁面搜索 URL 一起工作的 URI。 Andtext 參數允許您提供搜索術語來使用的內容在頁面上,但別忘了檢查搜索定義 XML 檔中的多個參數,可以用。 若要完成 data.js,添加搜索作為一個專案命名空間中所以那 searchResults.js (/ pages/search/searchResults.js) 可以訪問它。

修改搜尋結果控制 (只是與頁面控制項一樣) 當您添加專案時,創建三個檔:顯示您的結果、 樣式使用您的結果的 CSS 檔和一個 JavaScript 檔綁定您的結果的 HTML 檔案。 通過替換項範本匹配的資料模型中所示首先更新 searchResults.html 檔圖 9

圖 9 更新 SearchResults.html

<div class="itemtemplate" data-win-control="WinJS.Binding.Template">
  <div class="item">
    <img class="item-image" src="#" data-win-bind=
      "src: backgroundImage; alt: title" />
    <div class="item-content">
      <h3 class="item-title win-type-x-small win-type-ellipsis"
        data-win-bind="innerHTML: title searchResults.markText"></h3>
      <h4 class="item-subtitle win-type-x-small win-type-ellipsis"
        data-win-bind="innerHTML: publisher searchResults.markText"></h4>
      <h4 class="item-description win-type-x-small win-type-ellipsis"
        data-win-bind="innerHTML:
        place_of_publication searchResults.markText"></h4>
    </div>
  </div>
</div>

現在打開 searchResults.js 檔。 此檔有函數的數目,但大多數的所做的更改是到 _searchData 函數。 代碼替換為 _searchData 中所示的代碼圖 10

圖 10 代碼為 _searchData 的

_searchData: function (queryText) {
  var results;
  if (window.Data) {
    Data.Search(queryText).done(
      function complete(result) {
        if(Data.ImageList.length > 0)
          document.querySelector('.resultsmessage').style.display = "none";
      });
    results = Data.ImageList.createFiltered(function (item) {
      return ((item.title !== undefined && item.title.indexOf(queryText) >= 0)
        || (item.publisher !== undefined && item.publisher.indexOf(queryText)
        >= 0) || (item.place_of_publication !== undefined &&
        item.place_of_publication.indexOf(queryText) >= 0));
    });
  } else {
    results = new WinJS.Binding.List();
  }
  return results;
}

如果你比較這對生成的代碼的代碼,你會明白我所做的只是更新的專案物件資料模型以反映這些元件,添加一些功能,在 Data.Search 函數完成後,會出現。使用預生成的代碼,你可以 app 這樣對市場更快。您可以集中精力創建您的應用程式的特定功能,不必分別掛接每件每次。

在運行代碼之前,更新 searchResults.js 以反映資料模型中的篩選器 _generateFilters 函數。預設情況下,為組添加兩個篩選器。更新那些要為篩選器在發行市值等資料模型更有用的東西。與這項工作完成,你應該能夠運行您的代碼並看到類似圖 11


圖 11 搜尋結果螢幕為收藏美國 App

要總結搜索螢幕,您需要查看的一篇文章,看看它的頁的詳細資訊。更新搜索中的 _itemInvoked 函數­Results.js (/ pages/search/searchResults.js) 用下面的代碼:

_itemInvoked: function (args) {
  args.detail.itemPromise.done(function itemInvoked(item) {
  var searchResult = originalResults.getAt(args.detail.itemIndex);
  WinJS.Navigation.
navigate(    "/pages/details/details.html",
    { selectedItem: searchResult });
  });
},

此代碼捕獲當前選定的搜尋結果項,並將它傳遞給的詳細資訊頁面。 WinJS.Navigation。 導航功能可以使用兩個參數:頁面和初始狀態宣言 》 的位址。 通過使用 initialState 物件,您可以傳遞參數從一個螢幕到下一個。 在這種情況下,導航功能選定搜尋結果物件向傳遞詳細資訊頁面,就像我以前從主頁 selectedItem。

面向 21 世紀的縮微膠片

記載美國檔案歷史報紙並使它們可通過簡單的 API。 在本文中,我探討了此 Web 服務以及如何通過使用一些基本控制項,使用 Windows 應用程式商店中的核心能力。 Windows 8.1 提供許多機會,你要有創意和重新思考人與技術的對話模式。

在這種情況下,什麼將被一張報紙圖像並把它做成一個互動式的現代應用程式了 您可以擴展此示例來共用和存儲使用者的個人化的搜索設置基於他的利益 — — 這就是只是冰山一角。 國會圖書館和國家人文基金會提供了豐富的 API,在其上構建。 可以將此歷史資料添加到你的食譜裡為建設偉大的應用程式。

彙報:迷人的體驗,可重複使用的技能

Windows 應用商店的應用程式讓你發揮你的創造力與資料。 在此應用程式中,您可以流覽歷史報紙資料,可以用於研究、 教育或其他歷史查詢。 通過媒體豐富的 API 和簡單的 JavaScript 編碼組合與 Windows 8.1 記載美國提供可以方便地生成一個深深地參與體驗。

它的簡介:

在本文中,資料是從 API 拉扯和搜查,並探討了內容 — 所有通過重用一套核心的技能。 迷人的體驗是通過代碼重用和富媒體 API 創建的。

  • 通過使用他們現有的技能來生成豐富的經驗,為使用者進行您的開發團隊成員。
  • 通過連接到 Windows 8.1 魅力功能,如搜索與您的使用者。
  • 作為市場優勢提供新視野的老技術。

適用于開發人員的簡介:

發展是一項創造性的工作,和 Windows 應用商店的應用程式給你更多的自由。 在這篇文章,適用的一種復古的技術和技能 (ListView 和 Windows.Web.Http.HttpClient) 的一套核心重用打造出來。 與搜索功能的整合應用程式允許使用者要探索這款應用程式的內容來自任何地方的 Windows 8.1。

  • 連結生成非同步代碼工作流的承諾。
  • 重複使用 FlipView 控制項 ListView 技能。
  • 使用 JavaScript 原型能力動態地擴展物件。

詳細資訊:

Tim Kulp 帶領的開發團隊在 UnitedHealthcare 國際在巴爾的摩。您可以在自己的博客上找到庫爾普 seccode.blogspot.com 或在 Twitter 上 twitter.com/seccode,在他說話的代碼、 安全和巴爾的摩美食家。

感謝以下協助校閱本篇文章的技術專家:Eric Schmidt(Microsoft)
Eric Schmidt是內容開發商在微軟的 Windows 開發人員內容團隊中,寫關於 Windows 庫的 JavaScript (WinJS)。 當以前在Microsoft Office司,他建造辦公平臺的應用程式的代碼樣本。 否則為他花時間與他的家庭、 戲劇字串低音、 生成 HTML5 視頻遊戲或塑膠建材玩具博客 (HTTP://historybricks.com/)。