在上一篇文章的最後，我提到了為了要把 TypeScript 檔案同時輸出成 CommonJS 和 ECMAScript modules (ESM)，所以開發了tsc-multi。tsc-multi 的運作方式其實非常簡單，就是同時執行多個 TypeScript compiler 平行運作而已；除此之外，我還對 compiler 動了一點手腳。修改ts.Systemts.System是 TypeScript 用來和作業系統互動的 interface，其中包含了跟檔案系統 (file system) 有關的 method。因為 TypeScript 預設的輸出檔案的副檔名是.js，為了要變更輸出檔案的副檔名，我修改了ts.System裡跟讀寫檔案有關的 method。function rewritePath(path) { if (path.endsWith(".js") return path.replace(/\.js$/, ".mjs"); return path;}const sys: ts.System = { ...ts.sys, fileExists(path) {    return ts.sys.fileExists(rewritePath(path)) || ts.sys.fileExists(path);   ...继续阅读 (4)

最近為了讓Kosko和kubernetes-models能夠支援瀏覽器或是 Deno，所以先做了一些前期準備，首先最重要的就是支援ECMAScript Module (ESM)，因為這是目前所有平台都能支援的標準，但是為了要保持 Node.js 的相容性，所以暫時還是不能放下 CommonJS。這篇文章會介紹如何讓 Node.js package 能夠同時支援 CommonJS 和 ESM，以及使用 ESM 時的注意事項。先講結論以最低支援版本來區分。Node.js 10 以上：CommonJS 輸出成.js副檔名ESM 輸出成.mjs副檔名package.json加上moduleNode.js 12 以上：CommonJS 輸出成.cjs副檔名ESM 輸出成.mjs副檔名package.json加上module和exports，type可設定為module副檔名正常來說，比較建議的做法是 CommonJS 一律採用.cjs副檔名，ESM 一律採用.mjs副檔名，這樣就能避免 Node.js 用package.json的type來判斷，但是在以下情況下會出問題。Node.js 10如果你需要 require package 裡的路徑的話，在 Node.js 10 可能就會出問題。舉例來說，當 require package 的時候，Node.js 會根據package.json裡設 ...继续阅读 (5)

這篇文章是官網上Kosko 1.0 Released的中文翻譯版。關於 Kosko 本身，除了官網，也可以參考這篇文章。自從上一個穩定版本 v0.9 已經過了好一段時間了。最近我決定開始實作工作上一直都想用的一些功能，希望這些功能也能幫助到你。Nested Manifests從 v1.0 開始，component 內的 array 和 function 會被展開，這功能對於在不同 component 之間共用 manifest 會很有用。舉例來說，通常在 Kubernetes 裡，資料庫會由一個Deployment和一個Service組成。如果要在 component 裡使用資料庫的話，在 v1.0 之前，必須要自行展開這兩個 manifest；在 v1.0 之後，就能自動展開了。這樣的話，就可以把資料庫當成單一資源，在 component 到處使用了。function createDatabase() { return [new Deployment(), new Service()];}// v1.0 之前module.exports = [new Deployment(), ...createDatabase()];// v1.0 之後module.exports = [new Deployment(), createDatabase()];Valida ...继续阅读 (5)

九月時EH Redux0.6 終於發布了，這個版本最主要的改進就是下載功能，之所以 0.5 和 0.6 之間隔了這麼久，其實是因為我花了一些時間重寫了幾乎全部的程式碼，前景（foreground）和背景（background）之間的資料同步也讓我卡關了很久。Moor我目前使用 Moor 做為 ORM，這個 library 的預設使用方式是在前景連接資料庫，在大多數情況下不會有效能問題，是最簡單的使用方式。LazyDatabase _openConnection() { return LazyDatabase(() async { final dir = await getApplicationDocumentsDirectory(); final file = File(join(dir.path, 'db.sqlite')); return VmDatabase(file); });}一開始實作下載功能時，我是在前景和背景分別連接資料庫，雖然兩方都可以正常讀取和寫入資料，但是無法監聽資料變動，而且如果同時寫入同一筆資料的話，可能會引發 lock。以我的例子來說，當背景正在下載時，雖然可以正常把進度寫入到資料庫，但是前景不會觸發更新；當前景暫停或取消下載時，如果背景作業也剛好正在寫入下載進度的話，則會造成死鎖。關於這個問 ...继续阅读 (3)

上個月因為工作需要掃描 Redis RDB 檔案，所以用 Go 自幹了一個 parser。雖然已經有各種現成的 library，其中以 Python 實作的redis-rdb-tools為主，其他 library大都以redis-rdb-tools的邏輯來實作，文件中 Go 的連結已失效，然而我的 codebase 以 Go 為主，所以我決定自己用 Go 實作一個 RDB parser。RDB parser 本身其實不會太複雜，redis-rdb-tools的作者很貼心地提供了詳細的文件說明 RDB 的格式。在 RDB 裡，每個 key 大概會長得像這樣：FD/FC $ttl$value-type$string-encoded-key$encoded-value整個 RDB 檔案除了開頭和結尾的一些 metadata 以外，大致上都是由這樣的 key 組成的，所以讀取起來很輕鬆，所有值前面都會標明長度，看到特定的 byte 就停下來，我大概花一週左右把初版的 RDB parser 寫完，API 長得像這樣：parser := NewParser(file)for { data, err := parser.Next() if err == io.EOF { break } if err != nil { panic(err ...继续阅读 (4)

繼上一篇文章提到了用 Channel 實作Flutter和 Android/iOS 之間的通訊。本文將會示範如何用 Channel 來監聽音量按鈕的事件，因為我手邊只有 Android 裝置，所以會用 Kotlin 來示範。EH Redux有一個功能就是能夠使用音量鍵來控制圖片翻頁，這項功能因為目前Flutter還沒有官方支援，所以必須要在 Android/iOS 這邊自己寫程式去補足。MethodChannelMethodChannel用於單次的非同步執行，這次我會用在切換音量控制是否開啟，因為 Flutter 在 Android 上預設只會有一個FlutterActivity，無論在哪個畫面背後實際上都是同一個 activity，而音量控制只會用在圖片瀏覽的畫面上，所以必須動態切換音量控制，否則在其他畫面上也會受到影響。首先是 Android 的部分，在MainActivity裡實作configureFlutterEngine方法，然後在裡面建立一個MethodChannel，用來監聽從 Flutter 傳來的事件。// 用這個變數來控制要不要攔截 keydown 事件private var interceptKeyDownEnabled = falseoverride fun configureFlutterEngine(flutterEngine: FlutterEngin ...继续阅读 (5)

最近心血來潮，決定重新開始學習打從一年前就想玩玩看的Flutter，試試看能不能做出我廢棄多年的E-Hentai 閱讀器 for Android。Flutter是 Google 開發的跨平台 UI toolkit，可以同時支援 Android、iOS 和 Web，其原理就是用 canvas 來繪製所有的 UI，不需要像React Native一樣得在 UI 和 JavaScript engine 兩邊互相溝通而導致效能問題。另一個優勢就是Flutter本身已經提供了非常完整的 UI library，無論是 Android 或 iOS 風格皆有對應的元件可直接取用，雖然有些時候可能會發現和原生的 UI 在外觀或是動畫上有些微妙的差異，但整體來說已經非常實用了。本文會以 Web 的角度來分析Flutter的優缺點，因為我比較熟React，所以主要會拿它來做比較。Declarative UIFlutter和React一樣都是採用 Declarative 的形式來建構 UI，這似乎是最近越來越流行的做法。Android 現在有Jetpack Compose，iOS 有SwiftUI。和傳統的 Imperative 比較的話，最明顯的差別就是，不需要在狀態更新的時候手動更新對應的元素；Declarative 只要定義好介面，程式就會自動去判斷哪些元素需要更新。語法React可以用JSX，語法 ...继续阅读 (3)

本篇接續Yarn 2 和 Monorepo提到的部屬的部分，因為 monorepo 裡包含了很多套件和網站，如果直接在根目錄執行docker build把整個 monorepo 打包成 Docker image 的話，勢必會做出大於 1 GB 而且內含一堆無用垃圾的 Docker image；為了要讓 Docker image 能夠最小化，必須只打包正式環境會需要用到的套件，確保不會浪費任何空間和時間。我把建構 Docker image 的步驟分為：解析正式環境需要用到的套件複製 workspaces建構 Docker image解析套件的相依關係這部分對於 Yarn 2 來說非常容易，在擴充套件裡可以直接讀取整個 monorepo 的狀態，可以參考yarn workspaces focus的原始碼，這個指令是用來只安裝特定 workspace 需要用到的套件，剛好和我需要的功能相同。import { Configuration, Project, Cache } from '@yarnpkg/core';// 讀取設定const configuration = await Configuration.find(this.context.cwd, this.context.plugins);const { project } = await ...继续阅读 (3)

上週試著用Tailwind CSS重新打造了網誌的主題，一開始使用的時候，覺得一直翻文件很煩，因為大部分的 CSS 規則大概都知道怎麼寫，卻得要翻文件才知道對應的 class；但寫了一段時間後，開始覺得還不錯，大部分的 class 都很容易預測，也很容易根據需求客製變數或外掛。跟Bootstrap或Semantic UI這類 UI library 相比，Tailwind CSS 不提供現成的元件（另有提供須付費的Tailwind UI），而是把每個 CSS 規則都寫成單獨的 class，因此即便完全不寫 CSS，只要在 HTML 中設定 class，也很容易能夠拼湊出想要的樣式，但缺點就是還是需要有基本的 CSS 知識才能上手。安裝首先用 npm 或 yarn 安裝tailwindcss。npm install tailwindcss可以搭配PostCSS使用。const postcss = require('postcss');postcss([ require('tailwindcss'), require('autoprefixer')]);使用方式Tailwind 本身只需要在 CSS 的開頭加上下列語法就能使用，這包含了normalize.css和所有可能會用到的 class，展開來大約會有數萬行之多。但是無須擔心，在正式環境下，Tailwind 會利用PurgeCS ...继续阅读 (4)

今年初隨著公司的 repo 越來越多，我們決定把 web 前端部分轉為 monorepo 的形式，一開始花了一段時間研究各個 monorepo 方案的利弊，最後決定基於 Yarn 2 打造一套自用的工具。這篇文章會大概分析一些我試過的 monorepo 方案的優缺點，以及最後用 Yarn 2 的成果。現有 Monorepo 方案LernaLerna是我一開始比較熟悉的方案，在Kosko和kubernetes-models-ts都有用到，算是 JavaScript monorepo 非常普遍的選擇。👍 支援 npm，也可以善用 Yarn 提供的 workspace 功能。👍 可以偵測檔案變動，只更新並發佈有變動的 npm packages。💩 主要是設計用來「發佈到 npm」的，如果是內部使用的話，並不需要用到這功能，必須得客製lerna version才能符合我們的需求。Yarn👍 本身就內建了 workspace 功能，對於 monorepo 有最基本的支援。👍 效能好，會把共用的 dependencies 抽到最上層的node_modules共用避免浪費空間。💩 如果要在 workspace 之間互相引用的話，yarn workspace @scope/a add @scope/b總是會試圖從 npm 下載 package，而不是先安裝 local 版本 (yarnpkg/ya ...继续阅读 (6)

本篇接續上一篇文章，是我在 Dcard 開發的第二個 Kubernetes 工具。開發流程圖片來源目前敝社的開發流程基於GitHub flow，大致上如上圖所示。要開發新的功能時，會從主要分支master開出新的功能分支feature，功能開發完成後會提出 pull request，審核通過後就會合併進master，並部署到 staging 伺服器上。通常在審核 pull request 時，我們僅會檢視程式碼和附帶的測試，如果一切順利而且 CI 測試通過的話，就會直接合併進master。然而在某些情況下，特別是以前端極少測試的狀況來說，只看程式碼有時無法看出問題所在，必須實際執行才能確保程式能夠正常運作，有時也可能需要 PM 確認程式符合 spec，或是讓設計師確認程式符合設計稿。對於工程師來說，要把程式執行起來並不困難，但對於其他人來說，光是設定環境可能就是件讓人頭痛的事了。我們常用的方法是直接讓他們透過區網或ngrok連到工程師的電腦上，有時甚至為了上 staging 伺服器就直接合併進master了。讓還沒審核通過的程式碼進入master不僅可能造成 staging 伺服器的異常，也有可能會影響其他工程師的開發進度。部署 Pull Request為了解決這個問題，我想到的解決方法是利用 webhook 接收 GitHub 的 pull request 事件，在建立新的 pu ...继续阅读 (6)

敝社從 2016 年就開始Kubernetes，應該能算是相當早期的使用者了，也因此我們累積了一堆的 Kubernetes YAML 設定檔，從某個時間開始 staging 和 production 環境的設定檔更開始分裂，自此以來一直無法合併。因此這次的目標就是：整合各環境的設定能夠重複利用能夠驗證設定是否正確現有工具一開始我先從awesome-kubernetes尋找現有的設定管理工具，以下列出一些我覺得還不錯的工具以及它們的優缺點。kustomize👍 屬於sig-cli的專案，應該能夠保障更新活躍且不會突然棄坑。👍 學習成本低，使用熟悉的 YAML。👍 用 Overlay 的概念讓不同環境的參數去 patch 基礎設定檔。👎 沒有驗證設定的功能。ksonnet👍 彈性極高，能透過變數及函數共享設定。👍 支援Helm。👍 能夠驗證設定。👎 使用比較少見的jsonnet，需要另外花時間學習，而且資源也比較少。😢 已停止維護。kapitan👍 能夠管理 secrets。👍 能夠產生文件、Terraform 設定以及一些 scripts。👍 用 Inventory 的概念管理不同環境和共享設定。👎 使用jsonnet，理由同上。👎 使用jinja2做為 template engine，我不太能夠理解既然都用上jsonnet的話那為何還需要用 templates？造輪子因為現有工具對 ...继续阅读 (1)

最近在開發公司內部使用的工具時，心血來潮想用Lerna來管理monorepo，但是又想用TypeScript，結果碰到了一些編譯上的問題，例如套件之間互相依賴時，TypeScript 不知道依賴關係而無法了解編譯順序，導致整個 monorepo 無法編譯成功。之後發現了Quramy/lerna-yarn-workspaces-example這個範例，裡頭用了 Yarn、Lerna 和 TypeScript，在這之中 Yarn 並不是必須的可以忽視，重點是在 TypeScript 3.0 推出的Project References，這個功能讓 TypeScript 能夠知道各個模組之間的依賴關係，因此自動解決了編譯順序的問題。要使用Project References的話必須在tsconfig.json加上下列選項。{ "compilerOptions": { "composite": true, "declaration": true, "rootDir": "src", "outDir": "dist" }}composite- 讓 TypeScript 能夠快速找到被引用專案的位置。declaration- 編譯定義檔 (.d.ts)。rootDir- 設定專案的根目錄，預設是tsconfig.json的所屬資 ...继续阅读 (4)

前幾個月改版時，我決定用Elixir來實作 OAuth server + Proxy，這是一門結合了ErlangVM 和Ruby語法的程式語言，可以很容易運用Erlang的特性做出低延遲、高並發且高容錯度的系統，又不用學習Erlang比較特殊的 Prolog 式語法（但是你可能還是多少要懂Erlang語法，因為很多時候你會直接運用 Erlang library）。Erlang 的這些強大特性拿來做 OAuth server + Proxy 似乎有些大材小用，不過因為我爽，所以就決定用Elixir來寫了。OAuth Server實作 OAuth 的部分很無聊就不在本文贅述了，我強烈推薦Yu-Cheng Chuang 大大寫的 OAuth 2.0 筆記，搭配RFC 6479spec 很快就能實作出符合規格的 OAuth server。Proxy接著就是今天的重頭戲 Proxy，用Elixir實作可能不會是你的最佳選擇，所以看看就好，不要模仿。首先必須先選個 HTTP client，在 Node.js 有個非常強大的request，而 Elixir 有：HTTPoison: 基於hackneyHTTPotion: 基於ibrowse或是 Erlang：hackneyibrowselhttpcfuscogunshotgun:gun+ Server-sent EventsElixir 的 l ...继续阅读 (6)

最近忙著佈署新的測試伺服器，而 Google Cloud Platform 剛好有提供 $300 兩個月的免費試用，且在台灣又有設點，所以我就決定拿 Google Compute Engine 來建置測試伺服器了。Dynamic inventory在開始之前，先稍微解釋一下何謂 Ansible 的 inventory，inventory 即代表伺服器，在 Ansible 中，可把伺服器列在 inventory file 中，藉此來分類伺服器，例如：[webservers]1.2.3.4 ansible_ssh_user=john5.6.7.8 ansible_ssh_user=john[dbservers]9.10.11.12 ansible_ssh_user=mary然而伺服器一多，管理 inventory file 就顯得有些麻煩，這時可以利用dynamic inventory，只要把 inventory file 指定為可執行檔，Ansible 就能從執行檔的輸出中取得 inventory 資料。Ansible 官方提供了各種主流主機商的 dynamic inventory，可以直接取用，而 GCE 當然也沒有缺席：http://docs.ansible.com/ansible/guide_gce.html。服務帳戶為了要從 Google API 動態取得伺服器資料，必須申請 ...继续阅读 (7)

DocSearch是Algolia最近提供的一個免費搜尋引擎服務，只要登錄網站，他們就會爬好整個網站，使用者只要把 JavaScript 腳本貼到適當的位置上即可使用，和Swiftype差不多，只是搜尋結果更好，而且速度更快。這篇文章可能看起來很像業配文，不過我真的沒收這家公司的錢啦 XD。在我登錄網站後，客服不到一小時就寄信跟我聯絡了，確認了一些事情後很快的就幫我設定好搜尋引擎，我只要把 JavaScript 腳本貼上即可使用，之後的各種要求也很快就回覆了，最後我得以在 12/31 前把所有東西都處理完成。各位可以在hexo.io看到最後的成果，搜尋速度很快，就算是中文搜尋精準度也相當不錯，然而目前的缺點就是所有的設定都必須經過客服，我想可能要等一段時間才會解決吧。 ...继续阅读 (5)

好久不見，在資服創新競賽結束後，我耍廢了好一段時間，更準確來說，從校內專題比賽結束後就開始耍廢了 XD，Hexo 的開發停滯這麼久真是不好意思 てへぺろ(・ω<)。我在暑假時開始進入Dcard，利用React+Redux+React Router寫了一個和現行網站完全分離的行動版網站，那時候Redux的文件還非常不齊全，很多東西都得自己摸索，不過拜@tomchentw所賜，解決了很多架構上的問題。然而在我跑去寫 V2 API 的這兩個月，Redux竟然從 1.0.0 升級到 3.0.4 了！React Router也終於推出 1.0.0 了！原本以為新版 Admin panel 也能沿用相同的配置，沒想到還是有一些部分得推倒重來，不禁令人感嘆前端變化之快。Redux先說說Redux究竟有什麼差別吧，其實Redux本身的修改倒還好，只要看Changelog就 OK 的程度，但是它周邊的東西就麻煩了。react-redux從 0.2.1 跳到 4.0.0，此外還多了一堆伙伴，Redux生態圈的形成也他媽的太快了吧！react-reduxreact-redux本身的 API 很簡單，但是Changelog卻能出現好幾次的Breaking Change，這東西是有這麼容易 Break 逆！主要的差別在於connectfunction 變得更好用了，過去只能用來綁定 props，現在也能綁定 ...继续阅读 (3)

最近在寫專題時，嘗試了許多新東西，例如改用 Go 來寫 API Server，還試了最近很潮的 Isomorphic JavaScript，如果未來有時間的話可能會針對這個主題再另外寫一篇文章，今天先寫最近遇到的一個怪問題。各位可能有聽過Fetch這個新一代的標準，它簡化了瀏覽器麻煩的 XMLHttpRequest API，而且支援 Promise。在開發時，Fetch運行順利，然而上線後卻會發生 Illegal Invocation 錯誤，更弔詭的是，這種錯誤只在 Chrome 上發生。（我沒有在 Safari 或 Opera 上試過）我把原始碼都翻過了遍，上網搜尋關於 Illegal Invocation 也大都是關於 jQuery 的解答，在苦心搜尋幾小時就快放棄時，終於在 GitHub 上解答：matthew-andrews/isomorphic-fetch#20解決方式非常簡單，就是把原本的：import fetch from 'isomorphic-fetch';改成：import fetch_ from 'isomorphic-fetch';const fetch = fetch_.bind(this);只要把 import 進來的fetch綁定this，就能解決這個詭異的問題了。後記題圖是本季新番「Show By Rock」，雖然一開始的展開很腦殘，不過之後的劇情卻 ...继续阅读 (6)

長久以來，Hexo 官網都是由我手動在本機產生靜態檔案後，再 push 到 GitHub 上。這種方式對於簡單的網誌來說或許很輕鬆，但是對於偶爾會有 Pull Request 的專案來說就比較麻煩了。在合併了 Pull Request 後，我必須自行把最新的 commit 拉到本機後再手動部署，有時比較忙就會擺爛，因此你會發現，雖然 Pull Request 已經被合併了，Hexo 網站本身卻仍未更新的情況。開始之前在開始之前，請先申請 Travis CI 帳號，把你的 GitHub repo 新增到 Travis CI 上，如果還沒建立.travis.yml的話，請先製作一個新的.travis.yml。Deploy Key因此，我花了一個晚上嘗試出了透過免費的 Travis CI 服務自動佈署的方法，首先你必須用ssh-keygen製作一個 SSH Key，供 GitHub 當作 Deploy key 使用。ssh-keygen -t rsa -C "your_email@example.com"在製作 SSH key 時，請把 passphrase 留空，因為在 Travis 上輸入密碼很麻煩，我目前還找不到比較簡便的方式，如果各位知道的話歡迎提供給我。當 SSH key 製作完成後，複製 Public key 到 GitHub 上的 Deploy key 欄位，如下：加密 P ...继续阅读 (3)

最近在公司負責 Dashboard 的開發，除了從資料庫挖資料以外，還得想盡辦法從其他來源找到更多的資料，而其中一個資料來源就是 Google Analytics。我過去都是在瀏覽器上使用 OAuth，這次花了一個下午才研究出如何在伺服器的 OAuth 用法，途中碰壁了好幾次，以下我將從頭到尾介紹如何接上 Google API，全文將以 Node.js 示範，其中原理可運用在其他程式語言，或 Google 其他服務的 API。建立專案首先，在Google Developer Console建立專案，並開啟「Analytics API」的存取權，到此為止都還是小菜一碟，跟不上的可以洗洗睡了，接下來才是正題。為了獲得 API 的存取權，我們必須申請一個新的用戶端 ID。請進入側邊欄中的「API 和驗證」→「憑證」頁面，你將可以看到一個預先建立的「Compute Engine 和 App Engine」的用戶端 ID，那個一點屁用都沒有，別管它。點選橘色按鈕「建立新的用戶端 ID」後，會跳出一個視窗，請選擇「服務帳戶」，並按下藍色按鈕「建立用戶端 ID」。經過數秒後，新的用戶端 ID 便建立完成，同時會跳出一個 JSON 檔案的下載視窗，該檔案是用來存放 Private key 的，非常重要，請妥善保存。服務帳戶到此為止便建立完成，你可在頁面下方看到熱騰騰剛建好的服務帳戶，你現在可以關掉 ...继续阅读 (4)

最近忙著佈署新的測試伺服器，而 Google Cloud Platform 剛好有提供 $300 兩個月的免費試用，且在台灣又有設點，所以我就決定拿 Google Compute Engine 來建置測試伺服器了。Dynamic inventory在開始之前，先稍微解釋一下何謂 Ansible 的 inventory，inventory 即代表伺服器，在 Ansible 中，可把伺服器列在 inventory file 中，藉此來分類伺服器，例如：123456[webservers]1.2.3.4 ansible_ssh_user=john5.6.7.8 ansible_ssh_user=john[dbservers]9.10.11.12 ansible_ssh_user=mary然而伺服器一多，管理 inventory file 就顯得有些麻煩，這時可以利用dynamic inventory，只要把 inventory file 指定為可執行檔，Ansible 就能從執行檔的輸出中取得 inventory 資料。Ansible 官方提供了各種主流主機商的 dynamic inventory，可以直接取用，而 GCE 當然也沒有缺席：http://docs.ansible.com/ansible/guide_gce.html。服務帳戶為了要從 Google API 動態取得伺服器資 ...继续阅读 (25)

DocSearch是Algolia最近提供的一個免費搜尋引擎服務，只要登錄網站，他們就會爬好整個網站，使用者只要把 JavaScript 腳本貼到適當的位置上即可使用，和Swiftype差不多，只是搜尋結果更好，而且速度更快。這篇文章可能看起來很像業配文，不過我真的沒收這家公司的錢啦 XD。在我登錄網站後，客服不到一小時就寄信跟我聯絡了，確認了一些事情後很快的就幫我設定好搜尋引擎，我只要把 JavaScript 腳本貼上即可使用，之後的各種要求也很快就回覆了，最後我得以在 12/31 前把所有東西都處理完成。各位可以在hexo.io看到最後的成果，搜尋速度很快，就算是中文搜尋精準度也相當不錯，然而目前的缺點就是所有的設定都必須經過客服，我想可能要等一段時間才會解決吧。 ...继续阅读 (32)

好久不見，在資服創新競賽結束後，我耍廢了好一段時間，更準確來說，從校內專題比賽結束後就開始耍廢了 XD，Hexo 的開發停滯這麼久真是不好意思 てへぺろ(・ω<)。我在暑假時開始進入Dcard，利用React+Redux+React Router寫了一個和現行網站完全分離的行動版網站，那時候Redux的文件還非常不齊全，很多東西都得自己摸索，不過拜@tomchentw所賜，解決了很多架構上的問題。然而在我跑去寫 V2 API 的這兩個月，Redux竟然從 1.0.0 升級到 3.0.4 了！React Router也終於推出 1.0.0 了！原本以為新版 Admin panel 也能沿用相同的配置，沒想到還是有一些部分得推倒重來，不禁令人感嘆前端變化之快。Redux先說說Redux究竟有什麼差別吧，其實Redux本身的修改倒還好，只要看Changelog就 OK 的程度，但是它周邊的東西就麻煩了。react-redux從 0.2.1 跳到 4.0.0，此外還多了一堆伙伴，Redux生態圈的形成也他媽的太快了吧！react-reduxreact-redux本身的 API 很簡單，但是Changelog卻能出現好幾次的Breaking Change，這東西是有這麼容易 Break 逆！主要的差別在於connectfunction 變得更好用了，過去只能用來綁定 props，現在也 ...继续阅读 (42)

想必許多紳士都是E-Hentai的常客，我這邊就不細談這網站的內容了，這篇文章是久違的技術文，主要是來說明E-Hentai 閱讀器的發牢騷製作過程。編輯器Android 開發實在不是件簡單的事，一開始開發時使用Eclipse，恰好時逢 Android SDK 推出，結果一更新 SDK，林北的專案就爆炸惹，我也不知道到底該怎麼救，於是一氣之下怒換到Android Studio，Android Studio基於IntelliJ IDEA，速度比Eclipse快多了，介面也比Eclipse美觀許多，而且預設採用Gradle做為建置工具。之前就聽說過 iOS 開發友善許多，實際體驗後深深了解此言絕非虛假，Android 模擬器的效能實在不是一般的慢，光開機就需要數分鐘，而且一切的操作都比實機慢上許多倍，根本無法使用，根本逼人買一台 Nexus，後來改用Genymotion，才終於找回正常模擬器該有的速度，iOS 的開發環境就好多了，從 Build 到 Deploy 只要半分鐘即可在模擬器上操作。一般來說，開發專案絕對會用到很多 Library，因此需要有個 Dependency Manager 來管理套件之間的相依性問題，Java 因為歷史悠久，因此有許多選擇，使用Eclipse時，我本來選用Maven，但是它使用 XML 檔實在令人討厭，舉例來說：1234567<dependenc ...继续阅读 (52)

上週因為懶得更新期中考而沒寫新文章，本週的內容同樣是技術性質的文章，而主題就是「利用 Stylus 自動製作 Sprite」，為了避免各位感到無聊，我特地在文章開頭放了一張毫無關聯的圖片，就是為了騙點閱率。Sprite 是啥？有些人可能會對「Sprite」這詞感到疑惑，它並非飲料名稱，而是一種將數張圖片合併為一張圖片的技術，常見於網頁與遊戲設計中。在網頁設計中使用 Sprite 可以大幅降低網路請求的數量，如果有用到圖片按鈕的話，使用 Sprite 可避免圖片按鈕的閃動效果。過去我用Sass時，一定會搭配Compass使用，而Compass最實用的功能之一就是自動製作 Sprite，它可以從指定資料夾中的所有圖片中，自動建立 Sprite，然而為人詬病的就是：速度頗慢Retina Sprite 處理麻煩林北現在只用Stylus啦！然而，Stylus目前還沒有一個好用的 Sprite 工具能用，所以我一直以來都用Font Awesome來避免這種煩惱。日前剛好在公司研究如何使用Compass製作 Retina Sprite，所以就花了點時間做了專為Stylus設計的 Sprite 工具：sprite.styl。開發過程sprite.styl是一個用起來與Compass很相似的 Sprite 工具，只不過是為Stylus設計的，使用方式很簡單，自己去看說明和範例，本文就不詳細說明了，下 ...继续阅读 (14)

《勇者別囂張》系列是我從 PSP 時代就非常喜歡的遊戲之一，雖然畫面復古但十分有趣，而且極富挑戰性，為了打敗最強勇者「ああああ」花了我好一段時間不斷重複試驗最佳的怪物生成方式。這系列在 PSP 上一共出了三部作品，在去年的 12 月，終於在日本的 PlayStation Store 發售，中文版則在今年的 4 月發售。課金雖然 PSV 版的畫面和 PSP 同樣都是復古風格，甚至連一開始的世界地圖畫面都十分類似，但改為免費制的課金遊戲，一開始遊戲會贈予玩家 5 支免費的鶴嘴鋤（遊玩額度），之後每天僅會補充 3 支鶴嘴鋤，根本完全不夠玩，想玩更多的話就得課金：每天 10 支鶴嘴鋤每天 24 支鶴嘴鋤無限鶴嘴鋤由於之前購買 FF 10 的時候還有點剩餘，我二話不說就買了無限鶴嘴鋤，也不過 243 元而已，而且只需購買一次，比一片遊戲便宜多了，其他還有些沒屁用的課金道具，例如加 3000P、10000P，或者是擴充勇者、磨物欄之類的我就沒買了。系統除了改為免費制遊戲以外，遊戲玩法也大相逕庭，從 PSP 上挖方塊培養魔物的玩法，改為常見的消除方塊遊戲，如圖所示，每三個方塊合併後就能召喚魔物攻擊左方入侵的勇者，合併後會產生一個更高級的方塊，Combo 數愈高一次能夠產生的魔物數量也就愈多，因此在本遊戲中提高 Combo 數十分重要。勇者除了攻擊魔物外，每過一段時間就會產生障礙方塊妨礙玩家，只能 ...继续阅读 (12)

《超級槍彈辯駁 2》是一款由 PSP 移植到 PSV 並完全中文化的「高速推理動作遊戲」，簡單來說就是傳統的推理遊戲加上一些具有動作要素的小遊戲。本次故事背景相較於前作而言更加盛大，由希望峰學園轉移到了由五座小島及一座中央島所組成的「賈巴沃克群島」，然而事情並非如此簡單，原本風平浪靜的海島生活因為黑白熊而再度掀起了一陣波瀾。劇情「希望峰學園」是一所專收「超高校級」卓越人才的有名私立高中，本作的主人公從小就憧憬著能夠進入這所學校就讀。入學日當天，日向一踏進校門便覺得視線模糊，眼前只看到一扇「門」，打開門後，映入眼簾的是其他 15 位同學以及兔子布偶模樣的教師「兔兔美」。奇怪的不僅如此，教室四周的牆壁突然倒塌，場景瞬間轉移到充滿南國氣氛的「賈巴沃克群島」，這是一場為了蒐集「希望的碎片」而舉辦的修學旅行，雖然兔兔美明顯有其他目的，大家都感到懷疑，但很快的便放下警戒心衝向日光明媚的海灘玩耍。黑白熊的突然造訪劃破了學生們短暫的安寧，他奪走了兔兔美的主控權並將她改名為「黑白美」，原本快樂的修學旅行成為了自相殘殺之旅，悲劇就此開始。序章到此為止，各位可能會覺得與前作類似，畢竟是同一系列的作品，為了不破壞看倌們遊玩的興致，我就不破梗了，有興趣的自己去 Google。系統本作的系統與上一代十分類似，分為「（非）日常篇」與「非日常篇」，前者用於推進劇情，每過一個章節就會開放一個新島嶼；而後者則是用於蒐 ...继续阅读 (22)

最近在公司負責 Dashboard 的開發，除了從資料庫挖資料以外，還得想盡辦法從其他來源找到更多的資料，而其中一個資料來源就是 Google Analytics。我過去都是在瀏覽器上使用 OAuth，這次花了一個下午才研究出如何在伺服器的 OAuth 用法，途中碰壁了好幾次，以下我將從頭到尾介紹如何接上 Google API，全文將以 Node.js 示範，其中原理可運用在其他程式語言，或 Google 其他服務的 API。建立專案首先，在Google Developer Console建立專案，並開啟「Analytics API」的存取權，到此為止都還是小菜一碟，跟不上的可以洗洗睡了，接下來才是正題。為了獲得 API 的存取權，我們必須申請一個新的用戶端 ID。請進入側邊欄中的「API 和驗證」→「憑證」頁面，你將可以看到一個預先建立的「Compute Engine 和 App Engine」的用戶端 ID，那個一點屁用都沒有，別管它。點選橘色按鈕「建立新的用戶端 ID」後，會跳出一個視窗，請選擇「服務帳戶」，並按下藍色按鈕「建立用戶端 ID」。經過數秒後，新的用戶端 ID 便建立完成，同時會跳出一個 JSON 檔案的下載視窗，該檔案是用來存放 Private key 的，非常重要，請妥善保存。服務帳戶到此為止便建立完成，你可在頁面下方看到熱騰騰剛建好的服務帳戶，你現在可以關掉 ...继续阅读 (14)

長久以來，Hexo 官網都是由我手動在本機產生靜態檔案後，再 push 到 GitHub 上。這種方式對於簡單的網誌來說或許很輕鬆，但是對於偶爾會有 Pull Request 的專案來說就比較麻煩了。在合併了 Pull Request 後，我必須自行把最新的 commit 拉到本機後再手動部署，有時比較忙就會擺爛，因此你會發現，雖然 Pull Request 已經被合併了，Hexo 網站本身卻仍未更新的情況。開始之前在開始之前，請先申請 Travis CI 帳號，把你的 GitHub repo 新增到 Travis CI 上，如果還沒建立.travis.yml的話，請先製作一個新的.travis.yml。Deploy Key因此，我花了一個晚上嘗試出了透過免費的 Travis CI 服務自動佈署的方法，首先你必須用ssh-keygen製作一個 SSH Key，供 GitHub 當作 Deploy key 使用。1$ ssh-keygen -t rsa -C"your_email@example.com"在製作 SSH key 時，請把 passphrase 留空，因為在 Travis 上輸入密碼很麻煩，我目前還找不到比較簡便的方式，如果各位知道的話歡迎提供給我。當 SSH key 製作完成後，複製 Public key 到 GitHub 上的 Deploy key 欄位，如下：加密 ...继续阅读 (27)

最近在寫專題時，嘗試了許多新東西，例如改用 Go 來寫 API Server，還試了最近很潮的 Isomorphic JavaScript，如果未來有時間的話可能會針對這個主題再另外寫一篇文章，今天先寫最近遇到的一個怪問題。各位可能有聽過Fetch這個新一代的標準，它簡化了瀏覽器麻煩的 XMLHttpRequest API，而且支援 Promise。在開發時，Fetch運行順利，然而上線後卻會發生 Illegal Invocation 錯誤，更弔詭的是，這種錯誤只在 Chrome 上發生。（我沒有在 Safari 或 Opera 上試過）我把原始碼都翻過了遍，上網搜尋關於 Illegal Invocation 也大都是關於 jQuery 的解答，在苦心搜尋幾小時就快放棄時，終於在 GitHub 上解答：matthew-andrews/isomorphic-fetch#20解決方式非常簡單，就是把原本的：1importfetchfrom'isomorphic-fetch';改成：12importfetch_from'isomorphic-fetch';constfetch = fetch_.bind(this);只要把 import 進來的fetch綁定this，就能解決這個詭異的問題了。後記題圖是本季新番「Show By Rock」，雖然一開始的展開很腦殘，不過之後的劇情卻非常有趣 ...继续阅读 (23)