ISSUE 1

葉顆顆

Published in

Sudo Ninja

10 min readApr 12, 2016

分享 Sudo 開發者們最近在學習與研究的東西

1. 不要把locale記錄在cookie/session

If you set your locals in domain name or url then it has several advantages

The locale is an obvious part of the URL.
People intuitively grasp in which language the content will be displayed.
It is very trivial to implement in Rails.
Search engines seem to like that content in different languages lives at different, inter-linked domains.

ref

2. The decorator pattern in JavaScript using closures, monkey patching, prototypes, proxies and ‘middleware’

作者使用 JavaScript 示範了實作 decorator 的五種方式，我的個人意見是 middleware 看起來最順眼，因為在串接多個decorator的時候，可讀性比較高，redux也是用這樣的方式。

3. 最近在研究 TSDB(time series database) ，簡單說就是針對包含時間序列的資料進行優化的資料庫，適合用於 monitor，目前應該會使用 elasticsearch 作為主要的資料庫。

Elasticsearch as a Time Series Database — Does it work? : 一間做晚鳥旅館的網站，他們的工程師分享如何使用 elasticsearch 來監控系統資源與指標。

4. 研究如何客製化 elasticsearch query的 score fucntion

ref elasticsearch難得寫得不錯的文件，最後有一個例子在做示範。

1. 研究 React Native 的 flexbox 系統

React Native 雖號稱 讓前端工程師不必另外學習其他程式語言 (Objective-C、Java) 就可以直接投入 mobile app 開發。但實際投入開發之後，會發現很多 API 由於之後還是必須轉譯成 Objective-C，會發生很多異於 Objective-C 或異於 JavaScript 的行為，其中最容易發生誤差的即 flexbox。

採用 flexbox 雖然讓開發人員不需要學習新語言就可以上手，卻捨棄了 iOS 與 Android 原有的排版系統，並在排版的過程中發生非常嚴重的嵌套，幸虧 React Native 最後還是會轉譯回 Objective-C，效能損失不會太明顯。另外 flexbox 的標準還在草案階段，也造成 React Native 的排版系統日後可能還會有很大的變動。

這也是上一週週耗費最多時間的部分。

2. 研究 iOS app 的 beta releasing system

由於 Apple 對於裝置的安全政策非常嚴格，除了部署 app 到裝置上需要有 Apple 官方發佈的證書，要具備特定資格才可以使用 Apple 官方的 Testflight 服務，來發布 app 的測試版給特定使用者。

本週會需要 @rogi0318 支援提供 app 後台完整權限以研究完整的 Testflight 功能。

3. VIPER

app 架構極度偏重 view，也導致傳統的 MVC 架構很容易往 Controller 傾斜，變成 Massive Controller View。本篇文章介紹的 VIPER，是在新近 app 開發人員之間流行起來的開發架構。

由於 VIPER 偏向 native (Objective-C or Java) 的開發架構，在實際開發上暫時不會採用。

4. Jenkins + Dokku

本週研究 Jenkins 配合 Dokku 的部署流程。隨著 Docker 與 AWS 之間的協作架構愈來愈完整、參考資料愈來愈多，估計今年就會出現完整的 based-on-Docker 部署流程。現階段，最廣泛的 self-hosted CI/CD 服務仍以 Jenkins 為大宗，且還沒有出現足以撼動其地位的殺手應用，因此如果要架設 self-hosted CI/CD，還是以 Jenkins 為主。

ref https://thomastoye.be/2015/play-framework-cd/

Kalan

1. Css grid

https://css-tricks.com/snippets/css/complete-guide-grid/ 一直以來 grid 的方式都不斷地推出解決方案，從最古老的 table 排版，到現在的 float inline-block，更潮的使用 flexbox 來做 grid 系統。不過 flex 雖然很好用，但是卻沒有 2 維度的 layout（row col)。

現在 css 已經推出了新的屬性 grid ，雖然還大部分的瀏覽器還沒實作標準。還蠻看好的，不過主站對 bootstrap 的依賴性應該是拿不掉的吧 😭

當然不是說討厭 grid ，實際上 grid system 也已經解決了很多問題。只是用 float 的問題就是父元素 div 高度要用 clearfix 的方式撐開，而且大量 nested 的 grid 其實會影響易讀性。

舉例：

<div class="row">
  <div class="col-md-6 col-xs-12">
    <div class="row"></div>
    <div class="row"></div>
  </div>  <div class="col-md-6 col-xs-12 m-hidden">
    <div class="row">
      <div class="col-md-6">
        <div class="card">
          <div class="row"></div>
        </div>
      </div>
      <div class="col-md-5">
        <div class="right_menu"></div>
      </div>
      <div class="col-md-1">
        <div class="right_list"></div>
      </div>
    </div>
  </div>
</div>

像這種 col 中有 row 的情景很常見，彼此又互相嵌套（負 margin 跟 col 的 padding 消除），所以很容易牽一髮動全身。所以自己在用 grid 的時候原則上不超過 2 層。不管怎樣，這次 css 提出了新屬性跟解決方案，持續關注吧！

2. lint your css

http://stylelint.io/ 其實很早以前就有 csslint 這樣的東西出現了。為什麼不用的原因是因為他不支援 scss 語法，任何巢狀的 class 他都會噴錯。 stylelint 的好處是他像 eslint 一樣可以客製化自己的 rule ，如果沒有現成的也可以自己增加，更棒的是它支援 scss 語法、可以跟 postcss、gulp 等工具搭配。

3. programmer life

關於工程師的 Unit Test 你全都亮紅燈了嗎？在網路上看到一篇 why sitting is killing you，深深覺得身體健康的重要性啊！呼籲大家久坐太久記得站起來動動。以下是正常規律生活的 unit test：

assert(daily_exercise_minutes).eq(30minutes)
assert(stand_up_five_minutes_each_hour)
assert(gotosleep).before(12pm)
assert(get_an_eye_exam).every_day

好吧，我也會讓自己努力亮綠燈的。畢竟保持充足的精神是把 code 寫好的第一要件。

Peter

Craft

因為沒有取消訂閱 InVision 的電子信，所以就發現 Craft 這個 Sketch 套件。

1. 單純的起點：製造重複的 item

許多設計師在畫 mockup 最常遇到的就是重複的結構，一方面很懶得複製貼上，還要對齊，Craft 看到了這個無意義卻重要的設計步驟，Craft 讓設計師製作重複的物件更簡單了。

設計師只需要設計一個物件，使用複製功能就可以按照需要的方向、欄位製造出相同的物件。

2. 強大的內容假資料

有了強大的複製功能還不夠，總不能每一個物件都是相同的照片，因此出現了線上抓取假資料的功能。

Craft 強大的地方在於可以直接到網路上抓圖放入 Sketch 中的圖形區域，而且是以 Fill （填滿）的形式顯示圖片。舉例來說，要畫一個高 500 px 寬 1440 px 的滿版背景標頭，一般的做法會先畫一個 1440 px *500 px 的長方形，將圖片載入 Sketch，然後將長方形做為 Mask 遮罩住圖片。

但遮罩與填滿之間的差別，遮罩用的圖層比較多，而且圖片一直都會存在 Sketch 中造成檔案肥大。填滿的方式做，檔案就會小很多且不會造成編輯設計時電腦的負擔。

假資料除了圖片，當然還包含文字， Craft 讓設計師可以點選網頁中的文字，就載入至 Sketch 的文字方框中，再也不用自己想一些鳥鳥文案了。

3. Style Guide 功能

最近（也不算最近），出現了 Style Guide 的功能，只要按下「Sync Style」， Craft 就依照 mockup 中的字級、顏色製作出一個 Style Guide，其中包含： 1. 色票 2. 字型與字級大小另外， Craft 會將色票匯入 Document Color 內，方便設計師取用。

只要修改 Style Guide 中的字型，同步之後，新的字型就會套用在 mockup 中。
只要修改 Style Guide 中的色票，同步後，新的色票就會取代 mockup 之前的色票。

雖然我覺得蠻猛的，但是還有許多東西是需要克服的：每個字型的設計 line-height 其實不相同，所以直接在 Style Guide 改，依然是要去 mockup 調整的…

還有之前我有自己做了一個類似色票庫的東西，用了 Craft 的 Style 之後，就出現一片混亂（重複的色票出現在 Document Color）。

總體而言，Style 功能真的是蠻不錯的，使用 Style 後發現過多色票，就代表自己太懶，顏色都抓個大概所以 Craft 會將色票一個個分開。這時候就將相近的顏色統一起來就會好多了（當然這都是之前 mock up 混亂的業障）。

4.Prototype ，我最最期待的功能

Prototype 原本為 Silver Flow，是由一個人獨立開發（設計、開發）的 Sketch 套件，但最近被 InVision 併入了。

Prototype 讓使用者可以在手機上模擬 mockup 的互動效果。

Craft 值得注意的

InVision 做 Craft 的目的是什麼？未來收費或免費？
InVision 推銷 Craft 的電子信真的蠻好看的（看來我該讓賢了）。
Craft 一直快速的成長，可以看看他們的 Change Log
Craft 擁有自己的專屬網頁，哪怕功能簡陋。
最後出現 Craft Manager 的東西：原本 Craft 要自己下載安裝在 Sketch 上，現在是包成 dmg 讓使用者一鍵安裝 Craft Manager（設計師無痛），之後的更新，都透過 Craft Manager 更新到 Sketch 上。