Clean Code Craving

成品 互動式網頁連結:  Interactive Computational Graph 微積分課經典的範例 df/dx sin(x) / x: 2 個 inputs, 1 個 output, 沒有 hidden layer 的 fully connected neural network: 為何要做這套工具 以前在學 machine learning 的時候覺得最難理解的部分就是 backpropagation，也就是神經網路到底是怎麼用數學來做訓練的。 我們知道神經網路就是長這樣子: Source: Wikipedia 但實際上每個 neuron (圓圈圈) 裡面有許多基本的數學運算，像是 sum 還有 activation function: Source:  Neural Networks and Machine Learning 當我們把所有東西綜合在一起，腦袋就會打結，到底 chain rule 是怎麼在這麼複雜的神經網路之間套用的? 就算了解基礎也很難相信實際上到底怎麼運作的。我又沒有要真的使用的話，網路上的教學就覺得看看就好 Source:  A Step by Step Backpropagation Example 但決心要了解 backpropagation 細節之後，不少教學都提到了 computational graph，從基礎的數學運算當作 nodes 來去理解似乎是比較簡單的方式。 後來找到了這篇文章  Calculus on Computational Graphs: Backpropagation  把 chain rule 講解的簡單至極，於是就在想，為何我不做一個網頁，讓大家可以自由地組合想要的 graph，然後看一下 chain rule 是怎麼流通的。 失敗作經驗 在做這次 side project 前，其實早在一年前我就開始作另一個 side project 是想展現神經網路的訓練過程。名稱叫做 explain-derivatives，是被 TensorFlow 的一個網頁 A Neural Network Playground 啟發的。 但由於一開始欠缺規劃，想到什麼就加什麼功能進去，造成架構一直修改，最後由於程式碼架構太過複雜就放棄了。 這個 project 是用 Cy...

最近讀書會剛好要報 Prototype Pattern，看了一下  Design Patterns: Elements of Reusable Object-Oriented Software 的 prototype 這章節。書中一開始動機說明一個五線譜的 GUI 編輯器，後面 sample code 卻是用像是 toy example 的迷宮，這樣真的兜不攏也看不太懂。 網路上找了一下也沒有人為了 prototype pattern 做五線譜的範例，剛好最近工作上會碰到 PySide2 ，於是我想想，乾脆來把五線譜的範例做出來順便練習一下 Qt 的 QGraphicsView 要怎麼使用，也順便展示 prototype pattern 的優缺點。 Side Project on  GitHub 簡單的樂譜編輯器 GUI Users 可以從左邊拖曳樂譜上的符號到右邊的畫板上，畫板 (canvas) 上的符號也可以事後再進行拖曳、旋轉。 就算簡單也該有的功能 為了讓範例簡單，我就只做了書中提到的 half note 和 whole note，不要加進一大堆其他符號來讓整個 example 複雜化。但相對地我們也不能弄得太簡單太像 toy example 看了沒感覺。 我就多做了幾個比較像 real project 的功能: 拖曳的符號會像是磁鐵一樣 snap to lines/spaces 到最近的五線譜線上或空格(間) 內 拖曳符號時我把預設有的圖示 (indicator) 隱藏，拖曳中 (dragging) 也看的到放開 (drop) 後的樣子 我限制拖曳的符號只能在畫板 (canvas) 中移動，不給使用者拖曳到不見或卡在邊邊一半 Prototype Pattern 優點 1: 可以 Reuse Framework 不用 prototype pattern 我們會怎麼做創 object 的 framework? 我們可能就會創出一大堆平行化的 GraphicTool ( 橘色 的部分) 用來造代表樂譜符號的 Graphic: 書中說 framework 不應該知道 application 任何細節才對，萬一今天 application 改成做遊戲地圖編輯器呢? 難道要創更多 GraphicTool? 那可能我們會先發瘋。 所以 prototy...

上次 用 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 設置完後，重新整...