ocowchun
1. AWS Lambda 在 VPC 裡面的限制
如果將 AWS Lambda 設定在 VPC 裡面的話,大部份 AWS services (DynamoDB,S3,SNS…etc)都不能使用(除非你有設定 NAT),不過AWS 也有在改善這件事情,特過設定 VPC Endpoints 可以讓 VPC 使用 AWS services ,不過目前只有支援 S3
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。我很確定我做了以下幾個步驟:
- rm node_modules && npm install 重新安裝所有 npm packages,單純以防萬一。
- cd ios && pod install && cd .. 重新安裝所有 Cocoapods 套件與 Xcode workspace 檔案,確定 library 都有正確連結到專案上。
- 重新啟動 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 的方式完成。
*你可能五年之後才有辦法改版。*,隨著產品需求增加,腳步變快,沒有辦法讓你說改就改,說重構就重構。
如果你是個有目標的團隊:
- 宗旨與任務的代溝,持續溝通變得很重要
- 新人越來越新,老人越來越沒有時間談理想
- 成為既得利益者
- 有了組織、主管、薪水之後管理一定會變更困難(人)
- 資訊夠公開了嗎? 「這應該是資訊組的問題吧」「這是工程師的問題」代表鴻溝會越來越大。
code smell in css
當 css 的程式碼不再小巧可愛,畫面的互動性越來越高。可能重要的就是開始提高 css 的易讀性。畢竟長長一串的 css rules 很不討喜啊…,而且噴在畫面各個角落也非常難維護跟管理。這些潛在因素都會造成重構的意願不高……,趁著現在趕快聞聞看 css smell 吧!
idoticmatic css
code 要寫註解,css 當然也要。目前正在將比較新的頁面跟 ui 開始做拆分以及註解,幫助自己也幫助接手的開發人員知道這行 class 在做什麼,以及如何使用。未來希望可以透過 comment as doc 的方式製作 style guide,目前研究了一些。
好像要搭配 ruby 一起服用,還沒有深入研究。
容易操作,但是已經年久失修,沒有人在維護了。 還在評估哪一種方式對主站比較好,評估完之後會再套用到主站。
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 之外的屬性。
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了。