Clean Code Craving

各式各樣的程式讀書會在公司已經辦了很久了，每過一段時間我們就會找一本有人有興趣的書，大家每週找一小時開會報告，大家輪流報告書的一個章節。 最近報的書大概就是 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...

看 Reddit 裡面這麼多人 po 一些 Anomaly 的遊戲影片，突然就想玩，不過這插件真是多到可怕。 安裝 STALKER Anomaly 這步驟應該不會有什麼問題，就去 Anomaly 官網 下載，然後安裝就好了。 要安裝哪些插件 (Addons/Mods)? 這才是最困難的步驟吧，去看 Addons 有哪些赫然發現竟然有將近 1500 個 mods，我到底要選哪一個? 有沒有什麼推薦的安裝列表呢? 後來就在 reddit r/stalker 右邊側欄看到有一個人 Grok 有整理一份不錯的 Google Sheet 表單 : 打開來看雖然也是密密麻麻的看起來很恐怖，但是他其實有放上推薦度和這些插件是做什麼的，還有插件之間的衝突要如何依序解決: 我就把一些 Mandatory 和 Highly recommended 的插件裝來玩玩看。 當然你也可以自己仔細研究，或是參考別人的清單 (例如隨便 Google 一下就找到 Lazy Stalker 的推薦插件清單 )。 如何安裝插件 通常插件都是裝在壓縮檔 zip/7z/rar，打開來至少會看到 gamedata 資料夾，那你就可以複製貼上到遊戲的目錄覆蓋。 但是許多插件本身是會互相衝突，或是部分衝突的。 這樣蓋來蓋去根據以前玩可以客製化的 CS1.6 的經驗來說，走到某一個地步你的遊戲就會開始 crash、發現有材質壞掉、甚至不知道到底是裝了哪個插件造成的，也沒辦法還原。 重頭來過? 或是提心吊膽的一直把整包遊戲壓縮怕哪天突然壞掉，我們應該有更好的做法。 用 Mod Organizer 2 忘記是在哪看到的了，但好像有人推薦用這個來管理插件，所以我就來試用看看。 安裝步驟其實滿繁瑣的，所以我也不會寫整個文章就用完所有力氣只是在教你如何安裝，因為大部分的資源都是英文的，所以我也期待你應該至少看得懂一些英文。 大致上的安裝步驟如下: 先去 Mod Organizer 2 官網 看一下 裡面有 GitHub 連結，去 GitHub 找 "Mod.Organizer-x.x.x.exe" 或 .7z 下載 打開 Mod Organizer 2 創新的 Instance, 一個 Instance 通常就搭配一款遊戲 (他不只能用在 Stalker，還可以用在 Fallout, Skyrim 上...