Hello World
CodeTengu Weekly 碼天狗週刊
CodeTengu Weekly 會在 GMT+8 時區的每個禮拜一 AM 10:00 出刊，每期會由三位不同的 curator 負責當期的內容，每個 curator 有各自擅長的領域，如果你在這一期沒有看到自已感興趣的東西，可能下一期就會有了。你也可以瀏覽一下前幾期的內容。
目前的 curator 陣容：
- @vinta - I failed the Turing Test - 科幻迷，最近在玩 NieR: Automata
- @saiday - Imnotyourson - 教召報名成功～
- @tzangms - Oceanic / 人生海海 - 衝動型購物
- @fukuball - ImFukuball - 婚後生活
- @mingderwang - Ethereum enthusiast
- @kako0507 - 熱愛嘗試新事物的前端工程師
- @chiahsien - 新年新專案，好刺激啊！
- @hiroshiyui - 沒有人是一座孤島
- @uranusjr - Smaller Things - 不愛談技術的技術人，最近對做菜很有興趣
- @kkdai - 態度萬歲 - 喜歡 Golang 的略懂工程師，最近在學機器學習 (疑?)
- @yhsiang
你也可以關注我們的 Facebook、Twitter、GitHub 或微博，有很多 Weekly 看不到的內容。有任何建議或疑問也可以來 Gitter 聊聊，歡迎亂入。
致力於解決開發者之間的資訊不對稱
@saiday
Lottie
Lottie is an iOS, Android, and React Native library that renders After Effects animations in real time, allowing apps to use animations as easily as they use static images.
Airbnb 新 Open Source 專案，這真的把在 mobile app 上加入動畫的難易度往下拉到了新低點。 (但你需要學會用 After Effect)
透過一套 After Effect 的 plugin Bodymovin 產生的 JSON 檔案，餵給 iOS, Android 的 Lottie library，它就會 render 出來，除了全頁的動畫之外，lottie 還支援 cache，這很適合介面上的狀態改變加入固定動畫。
光是看 GitHub 上面的 star 數就知道這種解決方案打到了以往 native app 支援動畫的痛點了。
詳細的說明：Introducing Lottie
Overcast 3: Design walkthrough
Marco Arment 是 Overcast 的作者，比較廣為人知的身份是前 Tumblr co-founder 跟 lead developer、創立 Instapaper 最後賣掉。是一個擅長獨立開發的朋友呢！
我個人很喜歡這篇文章，它給了關於介面調整很好的例子，比起要變成什麼樣更重要的是為什麼要變成這樣。
有根據的設計或改版，後續才可以檢討調整。
Enumerating The Ways I Love Swift Enumerations
Enum 在 Swift 是 first-class type 這大概是跟其他語言最不一樣的基本類型吧。
很強大的 Enum 可以有 associated value, method, extension, interface，很容易讓剛學習 Swift 的人走火入魔，這篇文章舉的 Enum 的例子我覺得是很適合的。
註：我現在在做的 Swift project，就因為剛學習 Swift 時被 Enum 的新特性過分吸引，把 model layer 都用 Enum 來處理，現在擴充實在是苦不堪言，這就是分不清楚場合硬用的下場。
Android Security: The Forgetful Keystore
「我們的 Android app 沒有把敏感資訊存在 Keystore」 「猴～ 你們是爛的開發團隊」
Keystore 看起來就是 Android SDK 提供的最好的敏感資訊儲存方案，可是為什麼很少聽到有人在用？因為它除了有不少的 bug 之外還有奇怪的 feature。
文末還是有整理出一些還是可以採用 Keystore 的情況，但我想大多數 app 想要存的敏感資訊在那樣的條件下都是不可行的。
這一欄如果可以讓大家可以少走一點冤枉路，就是我最大的功德。
How “Effective Java” may have influenced the design of Kotlin
作者重新看了一次 Effective Java 然後思考這些 items 在 Kotlin 上是否還適用，顯然有些書上提供的 best practice 已經在 Kotlin 設計時就採用了。
他於是列了 Java 跟 Kotlin 的語言設計相異處跟說明，無論你有沒有開發 Kotlin 都值得一看。
@kako0507
Redux 4 Ways
本篇文章透過 fetch data 的畫面變化做範例，並用下面四種不同的 Redux libraries 來 handle side effect 與 asynchronous actions ：
- Redux Thunk ：用來 delay action 的 dispatch 。
- Redux Saga ：利用 ES6 Generators 讓 asynchronous flows 容易讀、寫與測試。
- Redux Observable ：利用 RxJS observables 來 create asynchronous actions 與 data flow 。
- Redux Promise Middleware ：處理 Promises 並在 reject 觸發時返回應有狀態 (conditional optimistic updates)
How Flexbox works — explained with big, colorful, animated gifs
CSS flexbox layout 使得網頁排版更加的方便簡單，本篇文章利用圖形動畫來帶領初學者快速理解 flexbox ，有興趣也可以看作者的另一篇進階版 flexbox property 動畫圖解。
Variables declared using const are not immutable
JavaScript (ES6) 的 const 可以避免 variable renferencing 新的值，但是對於像是 array 或 object 這類的 reference types ，其內部資料是可以被更動的，要達到真正的 immutable ，可以透過 Object.freeze 這個 function，來避免值得的更動，不過要注意的是，如果物件本身是 nested ，那底下的所有 reference type 物件都必須要透過 Object.freeze 來賦值。
Optimising the front end for the browser
這篇文章詳細介紹瀏覽器產生網頁的各個步驟以及如何最佳化這些流程：
- HTML - 利用 HTML 產生 Document Object Model (DOM)
- CSS - 利用 CSS 產生 CSS Object Model (CSSOM)
- JavaScript - 執行 Script
- Render Tree - 透過 DOM 與 CSSOM 來組成 Render Tree
- Layout - 利用 Render Tree 來排列各個 Elements 的大小與位置
- Paint - 畫出畫面
除了上述 Render 流程外，也透過 Critical Rendering Path (CRP) 來對 Network call 做介紹與最佳化。
@uranusjr
Code review checklist
最近 MacDown 終於有了固定的 contributors（除了我之外），現在 review 的時間都比自己寫的要多了，看到這篇就很有同感啊。要接受一個功能是很簡單的事情，尤其如果是認識的人，就更會有偷懶的衝動，反正他應該知道自己在做什麼吧。但即使這在當下很容易，未來卻可能後患無窮，讓你在維護和修復時耗掉更多功。這時候有這種 checklist 就最方便了，反正從頭到尾跑過一遍就好啦，省了一堆腦力。
相關閱讀：十個 pull request review 最常見的錯誤 最後一項讓我震驚了
Forms Need Validation
做使用者介面的時候，最重要的就是驗證使用者的輸入。一來因為使用者輸入不可信，另一方面如果使用者的輸入有問題，也必須要盡快讓使用者知道問題在哪裡，並盡可能讓人知道應該怎麼修正。
這篇文章描述了當使用者輸入時，應該如何提示使用者的錯誤輸入，並正確呈現這些提示。作者舉出了一些常見的 validation 情境，並提出可能的提示方法。我覺得最重要的一點就是他指出不應該在使用者做出部分輸入（例如開始輸入 email，但尚未完成）時，就提示輸入無效，而要等到使用者暫停輸入、或者離開輸入框。這做起來有點麻煩，但這樣一說，就覺得的確是好做法啊！
How to break Python
如果你有寫過 Python 函式庫，大概就知道使用某些語法與內建函式庫時要特別注意，才能支援不同的 Python 版本，尤其是 Python 2。但如果想讓自己的程式無法支援某些版本，又應該怎麼辦呢？
我知道你想說什麼。「為什麼我要這麼做？」通常是因為你不想被不想支援的使用者打交道。假設我今天做了一個函式庫，只想支援到 Python 2.7。但我並沒有用到很特別的功能，所以在 2.6 上好像也可以動⋯⋯直到使用者遇到某個 Python 2.6 的 bug，造成函式庫行為錯誤。這時候你就得處理送來的 bug report。麻煩。
更好的做法是，讓使用者明確知道你並不想支援他現在使用的版本。所以這裡列出了各 Python 版本「不」支援的語法，讓你可以保證自己的程式在錯誤的版本中無法執行，一勞永逸。
Legacy systems are everywhere
我們軟體工程師最愛抱怨其他人（或者三年前的自己）寫的程式根本是一團垃圾，要我維護不如下地獄算了。可是上面的人就是死腦筋，不肯讓我們砍掉重練。唉唉你知道軟體就是跟其他工程不一樣啊，沒辦法像蓋房子那樣事先規劃好才動手，所以維護 legacy systems 才會那麼痛苦。
作者最近接的專案就是這樣。專案超龐大超複雜，維護人轉了好幾手，到處都是 hacks 和技術債，還有一堆過時的技術。
這個專案是他們幾個月前剛買的新房子。如果你略懂電工（建議這年頭技術宅最好懂一點，不然跟不上潮潮的 maker movement 會被瞧不起R），應該會對裡面的內容感到⋯⋯廢到笑，然後笑一笑怎麼我就哭了。為什麼我要維護這種爛東西，可以砍掉重練嗎。QQ
你軟體工程師還有一絲絲可能呢，房子蓋了就蓋了，上線之後就是永遠，即使有可能整棟倒下來，也只能硬著頭皮維護。惜福啊各位。
Random Cool Stuff
How I Ruined Office Productivity With a Face-Replacing Slack Bot
一個會把上傳到 slack 中圖片的臉換掉再重新上傳的 slack bot ...
用 go-opencv 來辨識臉部位置跟貼上去，是用 golang 寫的，source code 相當精簡。
由 @saiday 提供
This RSS feed is published on http://weekly.codetengu.com/. You can also subscribe via email.