葉顆顆
Sudo Ninja
Published in
8 min readAug 13, 2016

--

ocowchun

追蹤 AWS Lambda 錯誤的問題

處理 AWS Lambda 錯誤是一件很麻煩的事情,跟大家分享如何使用 CWL 追蹤錯誤,然後丟到 Rollbar 來管理

Kalan

別跟我說你懂 margin

拿捏 margin 跟 padding 可以很容易地看出前端工程師對 CSS 的掌握程度。說真的超多眉眉角角的,不過看完文章發現原來 margin 的妙用這麼多。以後的實踐或許有比較容易的方法也說不定!

MutationObserver

這個鮮為人知的 API,被喜歡翻 MSDN 的我挖掘到了,基本上已經支持目前主流的瀏覽器(IE11+)。

看完介紹會發現他很像事件,專門給 DOM 的變化使用的,不過不同的是,一般的事件是同步的,而 MutationObserver 是*非同步*的。

這可以幫助我們在 DOM 有變化的時候,做出相對應的反應。

利用這個特性,我們可以達到以下幾個應用: 1. lazy loading 2. initialize

因為在 HTML 實際被 render 之前,DOM 就已經先下載下來了,所以我們可以在 rendering 之前就改變 DOM 的內容。

var observer =  new  MutationObserver ( function ( mutations ){ 
for ( var i = 0 ; i < mutations . length ; i ++){
for ( var j = 0 ; j < mutations [ i ]. addedNodes . length ; j ++ ){
lazyLoad ( mutations [ i ]. addedNodes [ j ]);
}
}
});

observer . observe ( document . documentElement , {
childList : true ,
subtree : true
});

astrum

這是一個很炫砲的 style guide library。做得非常精緻。 最近像這些 styleguide 的 library 一直推陳出新,其實就像潘大所說的。寫文件是好的,但是一定要評估成本、其他人的熟悉成本、要建構的時間等等,不能只是因為又潮又炫就自己跳下去自幹。而是要讓寫文件這件事情逐漸被引入。

不過當作 side project 或是自己想玩玩看就另當別論了。

新的問題

每個框架都是為了解決某個問題而出現的。但使用了某個框架之後,好像逐漸又會萌生新的問題。我把一些自己在開發上常會碰到的問題整理了一下:

  1. 文件切換

我覺得很麻煩的一點就是要一直在 component 之間跳來跳去,有時候還要切過去看看 action, reducer 之類的,久了很容易阻礙思考。

  1. Webpack 打包過慢

要 bundle 的檔案越來越多,webpack 逐漸變得沒有那麼快了。每次寫完 code 還要等他 bundle,而且每次更新都會 reload 一次,說真的還挺麻煩的。

SudoDashboard

其實只是想練習 dashboard 的 UI 跟 Websocket 的實作。不過感覺做起來還蠻實用的,最近空閒的時候應該會開始組織一下。還請潘大多多擔任設計指導。

karote00

NodeJs & Express

之前拿 nodejs & express 想做 RESTful 的小測試,不過一直卡關卡了三天,後來才發現原來是自己用 postman 的時候,沒有在 request body 的內容加上字串,所以會判斷成參數而不是我要的 key,這只是單純 codeing style 的習慣問題而已(習慣不好就浪費時間了….)

MJML

這禮拜繼續玩 MJML,在做 custom 的時候有點小問題
  1. compile 不過,結果是路徑錯
  2. syntax 不過,結果是 es6 的問題
  3. syntax 解完之後,現在換 React 不過,目前正在找解法中

Peter

新發現與心得:用 MJML 寫 Responsive 簽名檔吧!

image
image

什麼是 MJML?

MJML 是一個製作自適性 Email 的框架。

MJML 解決什麼問題?

因為產品服務需要寄系統信,所以就開始學習設計、實作 HTML Email, 然而提供電子信箱服務的網站有名的就有三種, Google、Yahoo!和 Microsoft。

為了克服跨各家信箱瀏覽的問題, 使用最不樂見的 Table 標籤 作為主要架構, 除此之外為了 Outlook 信箱,在最外層加上 if mso 等特殊處理, 整個 Email 看起來非常髒亂,更別說維護了, 每一次光理解一個月前寫的標籤就花了不少時間。

MJML 將這些髒亂的結構標籤收納起來, 以簡單的 mj 標籤表示, 例如 mj-section 為橫向架構, mj-column 為縱向排版架構,

image

取自於 MJML

就好像 bootstrap 的網格系統, MJML 用更簡單的標籤涵蓋了髒亂的架構。

image

取自於 MJML

MJML 基礎

既然是自適性 Email 框架, MJML 將 Email 內容的寬度訂為 600px 而且置中, 而且會依照網格系統比例在小螢幕上呈現不同排版, 我們可以自由的安排 column 間的比例, 但最終信件的內容寬度還是會以 600px 為總和。

image

取自 MJML

備註 MJML 還預設了許多 component 供使用, 另外使用者可以自訂 component 的標籤名稱, 但由於牽涉到 React.js,這裡就不多加探討。

image
image

運用基礎寫簽名檔

雖說 MJML 是用來寫 HTML Email, 但其實簽名檔也可以看做是 HTML 標籤, 熟悉 MJML 的排版邏輯與架構, 畫出適當的 mockup 後便可以開始動工。

image
image

就像寫 HTML Email一樣, 完全可以毫無障礙得寫出 Responsive 的簽名檔。

但是!千萬要注意,在將 mjml 檔案轉成 html 時, 別忘記 mjml 會將內容置中, 所以比較麻煩的一點就是要至 html 檔案, 手動的將 margin: 0 auto; 改為 margin: 0 0;

image
image

如此一來簽名檔的內容就會乖乖地向左靠齊, 接下來只要以瀏覽器打開 html 檔案, 將畫面上的簽名檔複製貼到信箱的簽名檔設定, 完成設定!

Henry

Object.try

最近在處理 Ruby on Rails 的 model association 問題時遇到一個很嚴重的障礙。如果 model 的 association 呈現一個 chain 的形式,例如 project.super_project.project_types.find(params[:project_type_id]),一旦 project.super_project 是 nil,就會發生錯誤。因此為了防禦這樣的錯誤,一般都會寫成以下形式。

if project.present? && project.super_project.present?
@project_type = project.super_project.project_types.find(params[:project_type_id])
end

又臭又長又不 DRY。

Ruby on Rails 4 其實有提供一個 try method 去解決這樣的問題。像上面提到的 chain association 我們可以改寫成 project.try(:super_project).try(:project_types).find(params[:project_type_id]),只要中間出現一次 nil,就會讓整段程式碼返回 nil,而不是另外丟出錯誤。但,你還是要處理這個丟出來的 nil,不然這個 nil 傳遞到後面的程式碼一樣有可能會造成不可預期的錯誤

最後要補一句,無業時期的接的案子最好在新工作上工前把它結束掉或轉包他人,否則上工之後就會過著白天工作晚上也工作的日子 — — 根本像地獄一樣。

--

--