Clean Code Craving

公司幾乎每個月都會收到一封看起來很逼真又精緻的釣魚信，以前一眼就看的出來陽春的釣魚信，現在卻是越來越難辨認。尤其是在外商公司的話，又是英文又不熟悉公司的狀況下就更容易被騙了。 如果我是公司的新人，直接看到這封釣魚信或許就有 50% 的機會不小心點下去： 每天我會收到 10 封以上的 emails，有些是群組內的溝通、有的是系統自動化的報告、有的是公司的訊息。這麼多雜七雜八的資訊，要每封都提高警覺判斷是不是釣魚信真的很累。 通常我們會想用 blacklist 來擋這類的 emails，但其實我們也可以用相反的概念: whitelist。概念是與其封鎖一大堆各式各樣的網域，不如允許少量真正信任的網域。 這篇文的適用對象主要是給我們一般使用者如何保護自己免受釣魚信的困擾。 方法1: 用 Outlook 垃圾郵件設定 (Junk Email Options) 分類釣魚信 Step 1: 不在 Whitelist 全部當成垃圾信 我們點 Outlook 右上角選單中的垃圾郵件設定 (Junk E-mail Options): 選擇最後一個最嚴格等同 whitelist 的選項 "Safe Lists Only": Step 2: 加入信任的 Emails/網域 要允許"寄送"的對象我們可以加在 Safe Senders: 他也可以用 * 例如 "@*.company.com" ，如果你覺得全部的 subdomains 都可以信任的話。 另外旁邊的 "Safe Recipients" 是要允許我們可能在一些 email groups 裡面，例如寄信到 xxx-group@company.name.com 也同時會寄給團隊中 10 個人包含自己，那我們可以允許這個 group，但我覺得平常應該用不太到，通常 "Safe Senders" 那邊就夠了: 方法2: 用 Outlook 收件匣規則 (Rules) 分類釣魚信 用 Outlook 收件匣規則 (rules) 設置的話順序會是這樣: 任何信，除了從信任的網域來，全部移到一個 "Not in Whitelist" 資料夾 其他自己原本設定的規則... Step 1: 不在 Whitelist 就移動到特殊

各式各樣的程式讀書會在公司已經辦了很久了，每過一段時間我們就會找一本有人有興趣的書，大家每週找一小時開會報告，大家輪流報告書的一個章節。 最近報的書大概就是 Threading Building Blocks, Approximation Algorithm 和 Design Patterns。有些是有人工作上需要用到，剛好大家一起報一起學新東西，也有一些是為了像是我們剛進公司的新手複習的。 跳脫不了常規的簡報格式 每一團讀書會的人都不太一樣，早就讀過相關類型的人其實就不會來 meeting，有老鳥和新手一起的，也有只有對這主題有興趣的人來參加，或是只有三四人的讀書會也是有。 可是參加了一陣子後突然發現讀書會變得非常"規格化"，這什麼意思呢? 因為大家因為還要忙於平常的工作，常常導致最後一週突然想起下週換他報告，只好臨時準備一下。 這時候不知道要怎麼做簡報怎麼辦? 簡單啦，我看一下上次的人怎麼報的就好了。 於是就把上一個人的簡報或好幾年前有報過相關的簡報抄來改一下，結果大家的簡報都長得很像這樣: ( source ) 而且不只一頁，幾乎是每一頁都長這樣。但這也怪不了大家，因為這本來就不是我們的主要工作，況且時間這麼少，能有什麼變化? 沒時間準備讀書會怎麼辦? 我們有沒有辦法同時做到以下的兩件事: 讓大家快速了解某章節的內容 自己又學會新東西 這是我在突然發現我要報讀書會只剩三天的準備時間時思考的事情。 我心中想: Oh no 完蛋了，只剩三天我還不如就直接把前幾年的人做的投影片拿來朗誦一遍就好了吧? 但喜歡跳脫框架的我又覺得: 不行啊，只會抄前人的，可以學到什麼? 但當我打開前人做的投影片的那瞬間，我意識到我只能跳脫框架了，因為我發現幾年前做同一個主題的人竟然只是把書中的內容截圖下來放進投影片。沒錯真的每一頁都只有截圖不誇張。 這也怪我前幾次都用了很創新的方式來呈現讀書會：有次我用 Jupyter Notebook + Plotly Express 來做 interactive 的教學、又有一次我真的用 Qt 做出一個能做 syntax highlighting 的小程式。這讓我真的沒辦法抄一抄就好。 於是我就靈機一動突然想到，那我給我自己辦一場 hackathon 如何? React JS 黑客松 我要報的 Head First Design

上次 用 Google Apps Script 做的 side project 就比較商業化，這次來做一個比較有趣的 side project 。上次比較可惜的是沒有完整記錄做 side project 的過程，這次我從 idea 到做完的經過都把它紀錄下來，跟大家分享一下做這個 side project 的種種過程與挑戰。 最終成品 直接用一張 GIF 展示最快 (28MB 看不到請等他一下): Online Demo:  https://sc420.github.io/jellify-ur-website/ GitHub:  https://github.com/sc420/jellify-ur-website Idea 發想 做 side project 最難的就是無中生有，做人家做過的好像就沒什麼挑戰，做人家完全沒做過的也不知道能不能做出來。 一開始的構想 其實一開始我是想做 ANTLR + HTML canvas 的 side project。因為公司剛好也正在做 ANTLR 來 parse 一些東西，但對於這個 library 不熟自然就想多玩玩看，想說藉著 side project 也可以練習到。 不過 ANTLR 能做的事基本上還是要 parse 一種程式語言，不管是 C++ 程式碼還是 JSON 甚至到自訂格式的計算機。想了想覺得如果要用網頁的方式呈現還是對大部分的人有點生硬。 原本是想說讓大家在網頁上隨便輸入一串 JavaScript，讓大家一步一步看他被 syntax highlighting 的過程。後面想說更有趣的話我可以搭配 canvas 和變成考題的方式，類似之前有看過 JavaScript quiz，輸入正確的 JavaScript 否則寫錯的程式碼就會在網頁上炸開來。 如果要讓字母爆炸就代表我需要自己知道 JavaScript 每一個字要上什麼顏色，就會需要 ANTLR。要爆炸需要一個物理引擎。 延伸的構想 後來覺得實在太困難，ANTLR 我又不熟、物理引擎我也不熟，這樣兩個不熟加起來就很容易做不出來，而且好像也不太有趣。 但是為了調查能不能做出來的時候我有跑去看一個找到的物理引擎 Matter.js 的 demo，還有看到 Matter.js GitHub 的 gallery 那邊也有大家有趣的應用，看到一堆物件撞來撞去還有

有抽過股票的人應該都知道 HiStock嗨投資有一個 公開申購/股票抽籤日程表 的網頁: 不過我們自己應該都會去有一些規則去篩選，例如最簡單的篩選規則我們可以這樣訂: 承銷張數 >= 1000 (越多張中籤率越高) 獲利 >= 5000 (獲利太少我幹嘛去抽?) 報酬率(%) >= 10 (報酬率太低怕可能等抽到股價已經跌破承銷價) 不要含有 "KY" 的股票 在 Google Sheets 試算表匯入網頁資料 我們可以打開一個空白的試算表，在最左上角的一格輸入: =IMPORTHTML("https://histock.tw/stock/public.aspx", "table") 這樣表單就會大概 一小時更新一次 把上面網頁的資料匯入到工作表中: 條件式格式設定好難用 如何把我們想要篩選的列給標示出來? 我們可以用條件式格式設定 (Conditional formatting)。 為了套用顏色到每一列，我們只能先選全部範圍，再用公式的方式: =AND($F1>=1000, $I1>=5000, $J1>=10) 可是光是套用前三條規則我們立刻就發現公式變得很長又不好讀: 條件式格式設定的缺點 條件式格式設定這麼難用，我盡量會避免的原因是: 剪下、複製、貼上一些資料後，套用範圍經常會亂掉，會這邊缺一個洞、那邊缺一個洞 要經常更改公式會變得很麻煩 在 Excel 也會碰到同樣的問題。第一個剪下貼上的問題可以透過一些小技巧避免，第二個問題基本上無解。 用 Google Apps Script 寫小工具: Smart 篩選 之前就有用 Google Apps Script 幫不會用公式的朋友寫一些好用的小工具的經驗，所以我就在想，我能不能做出一個比條件式格式設定更好用的工具? 於是我就花了一些時間用 Google Apps Script, jQuery, DataTables, Bootstrap 5 加上比較新的 ES6 來練習寫一個工具 Smart 篩選 : 安裝方法我就放在 GitHub 不在這邊贅述了。 只要是 Table 格式的資料都可以用，我這邊只是用抽股票來當範例。 使用方式 把 GitHub 中的檔案都在 Apps Script 設置完後，重新整

如果面試出這題我大概會說，阿不就用 stack，網路上隨便一找也如出一轍都用 stack。那如果不給你用 stack 呢? 何謂合法的一堆括號 LeetCode 解答一堆文字我真的覺得和上課或教科書沒兩樣，以前上課也是被灌輸這就是要用 stack，可是為什麼要用 stack? 之前的人怎麼知道的? 我們就用圖片來理解一下比較快: 如果我們把左邊和右邊的括號用一條線連起來，我們會發現他有一種把俄羅斯娃娃拆開放的感覺。 題目問是不是 valid，其實就是問拆開放的俄羅斯娃娃能不能組的回去? 說不定有人偷了一小塊，或是順序亂掉了就會變 invalid。 我也有點懶得做俄羅斯娃娃的圖片，所以我們直接來看一些 invalid 的範例: 最常見的 invalid 大概是第一個，我們把括號交錯放，如果不用 stack 就會誤判是 valid。 其他常見的 invalid 是找不到右邊的括號，或是左邊的括號不見了。 用 Stack 來做 為什麼大家這麼喜歡用 stack 來做這一題? 因為我們發現從左到右的順序剛好可以用 stack 的 push & pop 來代表: 任何破壞 stack 操作這樣 push & pop 的人都是 invalid。 我們按照這想法來寫一個很簡單的 C++ code 就會變成: class Solution { public: bool isValid(std::string s) { std::stack<char> leftParens; for (int i = 0; i < s.size(); i++) { const char c = s.at(i); if (isLeftParen(c)) { leftParens.push(c); } else { if (leftParens.empty()) return false; const char prevC = leftParens.top(); leftParens.pop(); if (!isPair(prevC, c)) return false; } } return leftP