ocowchun

1. AWS Lambda 在 VPC 裡面的限制

如果將 AWS Lambda 設定在 VPC 裡面的話，大部份 AWS services (DynamoDB,S3,SNS…etc)都不能使用(除非你有設定 NAT)，不過AWS 也有在改善這件事情，特過設定 VPC Endpoints 可以讓 VPC 使用 AWS services ，不過目前只有支援 S3

* VPC Endpoints

2. Apex v0.9.0

Apex 最近更新了，0.9.0的幾個新功能包含:

• Function & command autocompletion
• Function name globbing
• Function cost metrics

Function name globbing 在 deploy 的時候還蠻好用的。另外從 0.9.0 開始， Apex 會透過https://github.com/tj/go-cli-analytics收集使用記錄

Henry

1. ListView 的陷阱

Rate-limited row rendering — By default, only one row is rendered per event-loop (customizable with the pageSize prop). This breaks up the work into smaller chunks to reduce the chance of dropping frames while rendering rows. — 截自 React Native 官方文件 ListView 章節

React Native 的 ListView 預設__一次動畫 (例如往左滑動，從畫面開始移動到畫面靜止算一次動畫) 結束後只會從 DataSource 載入一筆資料__。如果你需要配合無限捲動 (我是使用 react-native-infinite-scroll-view 達成) 的效果，記得要透過 pageSize 將一次載入的資料筆數調高 (例如一次十筆)，不然後面的資料一筆一筆載入，使用如果滑動的速度夠快資料就會在滑到列表結尾才載入，會讓使用者有卡住的感覺。

2. Xcode 如果修改過 Target name，記得要將舊 library 從專案中移除，否則 ld 會出錯

因為我看別人的文章 Target name 都是取有意義的名字，我修改了 Target name，修改之後就一直 app 就一直無法通過 build。我很確定我做了以下幾個步驟：

1. rm node_modules && npm install 重新安裝所有 npm packages，單純以防萬一。
2. cd ios && pod install && cd .. 重新安裝所有 Cocoapods 套件與 Xcode workspace 檔案，確定 library 都有正確連結到專案上。
3. 重新啟動 Xcode 這一步常常被忘掉 XD 雖然不一定必要但重開治百病。

以上步驟做完狀況仍然沒有被排除。翻翻找找之後，我發現 Linked Frameworks and Libraries 還殘留著舊的 library (Cocoapods 會生成 libPods-[target name].a 來與專案連結)，刪掉之後也不用重開 Xcode，直接 Clean & Build 就可以了。

當然如果在此遇到奇怪的問題，還是重開 Xcode 看看，重開治百病。

3. React Native 盡可能使用 Flexbox 而不是 position: absolute

React Native 是我看過對 Flexbox 支援最完整的平台，因此在調整樣式的選擇上盡可能地選擇使用 Flexbox 來排版。

我目前遇到的特殊情形只有浮動的按鈕 (e.g. iOS 返回用的關閉按鈕，口語上的叉叉符號)，其他版面都可以透過純 Flexbox 達成。由於我跟 Flexbox 還是很不熟，我還是需要參考 cheatsheet，在此提供我常用的 cheatsheet A Complete Guide to Flexbox，基本上上面列出來的 Flexbox 屬性到現在還沒有遇到 React Native 不支援的情形。

Peter

網站： CollectUI

CollectUI 顧名思義就是一個 UI 的集合網站， 當前端工程師不知道怎麼安排設計介面的微互動與動態效果、設計師要設計介面卻靈感枯竭，黔驢技窮（咦？好像有點負面）的時候，就到網站上看看吧！

CollectUI 上的介面設計值得一看的原因： 網站上作品是可以由作者本人提供，且作者必須附上 Dribbble 的作品連結， 乍看之下提交作品的程序很簡單，也沒有什麼驗證的機制， 但是附上 Dribbble 的作品連結本身就是一個很大的門檻。

為什麼？

雖然很多設計師都是 Dribbble 的會員， 但要能在 Dribbble 上分享自己的作品卻沒那麼簡單。 這是因為 Dribbble 的使用者要再通過其他 Player（擁有上傳作品權限的使用者）的使用者邀請才能成為 Player， 所以被邀請加入 Player 本身就有難度。

因此 CollectUI 的作品品質不會太差，但照我瀏覽一下所觀察到的結果， 好像很多介面的風格長相都蠻一致的… …

Kalan

這禮拜週末去了 g0v，這次的主題已經沒有像以前那樣技術性那麼濃厚，反而提高了廣度（拆後重建），吸引更多不同領域的人進入。

這邊分享一些心得：

NGO 工程師分享

其實在產品上線之後，就會變成 legacy code。這是當產品變龐大之後都會遇到的共同問題，而在剛開始因為要趕進度、或是需求相對簡單時，我們會傾向用 hard code 的方式完成。

*你可能五年之後才有辦法改版。*，隨著產品需求增加，腳步變快，沒有辦法讓你說改就改，說重構就重構。

如果你是個有目標的團隊：

1. 宗旨與任務的代溝，持續溝通變得很重要
2. 新人越來越新，老人越來越沒有時間談理想
3. 成為既得利益者
4. 有了組織、主管、薪水之後管理一定會變更困難（人）
5. 資訊夠公開了嗎？ 「這應該是資訊組的問題吧」「這是工程師的問題」代表鴻溝會越來越大。

code smell in css

當 css 的程式碼不再小巧可愛，畫面的互動性越來越高。可能重要的就是開始提高 css 的易讀性。畢竟長長一串的 css rules 很不討喜啊…，而且噴在畫面各個角落也非常難維護跟管理。這些潛在因素都會造成重構的意願不高……，趁著現在趕快聞聞看 css smell 吧！

idoticmatic css

code 要寫註解，css 當然也要。目前正在將比較新的頁面跟 ui 開始做拆分以及註解，幫助自己也幫助接手的開發人員知道這行 class 在做什麼，以及如何使用。未來希望可以透過 comment as doc 的方式製作 style guide，目前研究了一些。

• KSS

好像要搭配 ruby 一起服用，還沒有深入研究。

• styledocco

容易操作，但是已經年久失修，沒有人在維護了。 還在評估哪一種方式對主站比較好，評估完之後會再套用到主站。

improve css with PostCss

利用 PostCss 跟 stylelint 來達到 lint 的效果。我也順便幫主站加入了 csslinter，等 styleguide 完善之後再一起 pr 吧～

這是我目前蠻喜歡的排版 style，看起來很舒服呢！

font-family: 'Noto Sans', 'Noto Sans TC', 'Apple LiGothic Medium', Roboto, 'Microsoft JhengHei', 'Microsoft JhengHei', 新細明體, 'Lucida Grande', 'Lucida Sans Unicode', sans-serif;

background: #fdfffa;
font-size: 17px;
font-weight: 400;
line-height: 1.85;
margin: 1.85em;

JS object 深入理解

有時候在對物件做遍歷的時候，會冒出一些我不想要的東西。好奇之下看了看文件，到底物件是怎麼樣運作的，做了一下筆記，有錯還請修正

js Object

回頭看了一下關於物件的使用。雖然平常的使用上直接 const a = {} 就能夠新增一個物件。但其實物件裡頭還有很多好用的方法做操作，了解了之後在實務上就能想到更好的解法也說不定！

背景

物件算是在 js 裡頭的精華之一，我們可以自由操作物件達到各種效果，例如資料結構、hash、模組化等等。這次我們會深入介紹物件的操作。

如何建立物件：

在 js 裡面，物件的宣告有下列幾種方式：

• var a = {}
• Object.create
• var a = new Object

再來我們理解一下 new 這件事實際上幫我們做了哪些事情：

var obj = new Object();

var obj = {}
var obj.__proto__ = Object.prototype;
Object.call(obj);

物件操作

在物件裡面有三個特性：

• writable(可寫)
• enumerable(列舉。是否能被 for in 回傳)
• configurable（能否更動屬性或被移除）

待會會講到這三個屬性要如何配置跟呼叫。

javascript 裡頭有幾種物件的種類：

• 原生 native
• 瀏覽器內建的 object
• 使用者定義
• 繼承

在說明 javascipt 創建物件之前，必須先瞭解何謂 prototype 。每個 js 物件都會有 prototype。而所有物件的都有同一個原型物件。而每次呼叫 new 時，其實我們做的事情就是繼承物件的 prototype

取值

在 object 我們可以這樣取值。

• obj.key = “”
• obj[“key”] = “”

尋訪屬性

(for key in obj) {
  obj[key] = value;
}

這邊要注意，這樣子的尋訪會列出本物件的屬性*跟繼承自 prototype 的屬性*，但定義屬性時宣告：enumerable 的話無法被列舉出來。

可以用 Object.propertyIsEumerable來查看屬性是否為 enumerable。

設定屬性

• var obj.o = 123 js Object.defineProperty(obj, ‘key’, { value: ‘123’, configurable: true // read-only })

這邊要注意的是如果給唯讀屬性設值或是 writable:false 的屬性設值並不會拋出例外，但值不會被改變。但在strict模式下會拋出 TypeError

刪除屬性

delete obj.o

note: 無法刪除繼承而來的屬性跟 configurable 為 false 的屬性

複製屬性

Object.defineProperty(Object.prototype, "extend", {
    writable: true,
    enumerable: false,
    value: function(o) {
      // get all property name
      var names = Object.getOwnPropertyNames(o);
      
      names.forEach(function(value) {
        if(value in this) continue;

        var desc = Object.getOwnPropertyDescriptor(o, value);

        Object.defineProperty(this, value, desc);
      })
      
    }
  })

  _.extend = function(obj) {
        each(slice.call(arguments, 1), function(source) {
            for (var prop in source) {
                obj[prop] = source[prop];
            }
        });
        return obj;
    };

可以看到 lodash 的 extend 代碼實現是用 for in 的方式。但 for in 會將繼承而來的屬性也一併複製（例如toString）。除了 eumerable 屬性為 false 之外的屬性。

deep in js object

extensible

要判斷物件是否可以擴充，可以使用 Objecy.isExtensible，要讓物件變成不可擴充，就將它傳給 Object.preventExtensions()。

而 ES5 定義了幾個函式方便你操作物件。

• Object.seal()
• Object.freeze()

seal 會把物件密封，無法刪除屬性、也無法加入新屬性，但屬性可以被設定（if writable）。

freeze 會把物件鎖得更緊，除了以上的設定之外，還會將所有的自有屬性設為唯讀。

這邊要注意的是，這兩個函式都不會影響繼承而來的屬性（prototype）。所以如果你想要達到完全的封閉物件，可能就必須要連 prototype 的物件也一起修改。

雖然在函式庫滿街都是的情況下，物件操作已經沒有那麼頻繁，也沒有那麼深入，但瞭解一下總是好的。

*note*： 在 es6 裡面有新增兩個 API 分別是 Object.keys 跟 Object.values，直接幫你遍歷物件，不用再寫 for in了。