9/13~9/19本週回顧

本週沒有閱讀新書，倍感新知不足

Juo Penguin

5 min readSep 20, 2020

技術學習

SSR

全名為Server Side Rendering
重點在於「第一次」渲染給網頁的資料
server要做DOM的轉換和處理成html string
全篇文章: 初探React 的 SSR — 原理和實作

NODE_ENV設定

mac/linux可以直接用像是NODE_ENV=development即可；
windows的node要設定為以下形式

set NODE_ENV=development&&...你的其他指令

QRcode API

一般使用google 的 API就行了
如果要替換qrcode顏色、背景顏色可以使用: http://goqr.me/api/doc/create-qr-code/#param_data 這個qrcode產生器
全篇文章: QRcode API介紹

用圖庫替換圖片做線上網頁(已上架)的快速mock up

將你要替換的圖片上傳到imgur…等的圖床
用右鍵點擊上傳完成的圖片，複製圖片位址
在網頁上的元素上直接替換該img的src即可

工作經驗學習

前端 -> 印刷的細節處理

雖然這次不是第一次處理印刷相關的問題了，因此有了上次的經驗後已經有相關的sense了，像是svg字體的編排、版面的調整(A4、A5大小…等)以及最重要的svg轉png這一塊也處理好了。

然而這次要做的跟上次輸出一整張不一樣，是需要自動排版成一張A4的印刷檔，像是合板印刷的方式，將很多張小張的圖片排在版面上。

我們主要需要注意以下這4點

出血:

為設計印刷會需要的「留白」，因為印刷總不會100%準確，因此會在最外圍留下2~5mm的留白，以防裁切時切到圖案，這就叫做出血。

裁切線:

如果排版後的紙張需要人工裁切，那麼會需要裁切線以利作業，否則如果背景都是同一種顏色，你根本不知道邊界在哪，接下來就是崩潰的量尺寸和切割了(因為我犯過這種蠢…)

字體/其他元素的排版:

因為需求方的要求，因此字體會需要做斷行和縮放的調整，而svg並不像是html的元素這麼彈性，沒有這麼多的css屬性可以使用。

我們會用到svg的text和tspan做相關的位移處理，並且要針對每個元素的高度去做位移，這就是svg元素麻煩的地方，沒有說可以直接針對寬度自動做wrap的style。

svg轉檔

因為網頁直接輸出的svg會因為不知名原因，到現在還不知道原因(有空好好研究這一塊)，在Adobe Illustrator會出現跑板問題。

因此研究了svg轉為png的相關方法，這也在上次的印刷專案解決了，主要簡述一下作法:

抓取所有svg元素 -> 轉為svg Blob —(放到canvas -> 取得png URI) — > png blob -> 一個個傳給jszip -> 所有svg都全部完成後 -> jszip傳壓縮檔blob-> download link處理下載 -> 完成

其他

番茄鐘的時間從20 -> 25一週感受

雖然番茄數量差不多(約6~8個)，但是加乘起來每天平均多了7x5=35的時間，也就是說多了約半小時的認真時間，而且只多5分鐘並沒有多大的負擔，因此會繼續使用這樣的番茄鐘時間。

業餘時間的任務反思

任務一定要切分仔細，不能模稜兩可，否則就像畫大餅一樣只是空談
每週要讀一本書或鑽研一個主題

其他反思

在別人講完事情後才發表意見：

有時候在開會時，會因為對方發表的某個論點或是某些工作事項有質疑，在別人講到一半的途中就打斷他的發表並插嘴，然而這樣會讓整個會議非常沒效率，不只你可能在途中跟發表者意見相左，而且打斷之後講者還要重新拾起回憶看自己剛剛打斷前講了什麼。

如此一來一往非常浪費時間，而且很容易鬧得很尷尬，因此我認為比較好的做法是，在該主題完整講述完之前都不該插嘴，而是你要針對有疑問的內容寫下筆記，到最後的問答或討論時間再做討論，如此一來不僅會議會比較省時(最重要的)，會議記錄也會比較好整理，比較不會發生大家在發表途中就在那邊七嘴八舌，導致會議偏離方向之類的。

跨領域能力：

即便是工程師，有時擁有程式之外的能力也是不錯的。像是前端工程師其實多涉獵點畫面呈現、印刷、排版、3D動畫相關的知識，有時候都會有幫助，像是遊戲設計就會需要理解畫面相關的動畫處理、D3.js會需要動畫相關的打光、模型視角…等，因此有時候也不是說寫程式就夠了，程式寫好只是基本而已，不只程式相關的深度，在這之外還有廣度，各種相關的學科，演算法、印刷學、色彩學、數據處理…等都是，目標是成為T型能力的工程師，即便今天不用web了，相關的知識也能應用在其他地方，好好增強自己的生存能力吧!!

預計事項

拆分預計的任務到組件的等級：每個組件等級的任務最多一小時內可以完成（除非有卡關）
閱讀「一本讀懂50本經濟學名著」：以雪球術閱讀，並思考如何做統整筆記和全景圖