Field notes
軟體開發
以實作為核心，記錄從新手到資深工程師，在無數踩坑與實作中累積出的軟體開發之路
A curious mind,
exploring a more open world.
Same person.
Just a little
farther.
我用 GPT-6 Astra 重做個人網站：從 Mockup 到上線，實作只花了約 5 小時！
喔？真的嗎？ 9/3 GPT-6 Astra 模型發行，號稱連不懂軟體的育兒媽媽都能做出動畫等級的個人網站。我怎麼能夠錯過這次的潮流，不做出點什麼火花呢？這次我只使用了5個小時的時間實作，就開發好我的個人網站的新介面設計，讓我們來看看吧！
從 Hugo 到 Next.js (SSG)：重構個人網站並保住 30 萬歷史瀏覽與每日 50+ 穩定造訪的 SEO 成果
實戰經驗分享：使用 Next.js 重構原先的 Hugo個人網站，並且維持 30 萬歷史瀏覽與每日 50+ 穩定造訪的 SEO 成果，紀錄包含 metadata、SEO優化的要點及部署靜態網站的設定。
[前端小菜鳥] 前端工程師成長計畫 - 讀書篇(5) | CSS(4) Layout 樣式、Flexbox、Grid 佈局
此篇文章將紀錄本人研讀跟鑽研CSS Layout佈局、Flexbox及Grid的相關知識，最後附上關於Portrait跟Landscape頁面的小知識。
[前端小菜鳥] 前端工程師成長計畫 - 讀書篇(4) | CSS(3) 顏色、尺寸、大小
此篇文章將研讀CSS的顏色、不同的尺寸單位及大小。
[前端小菜鳥] 前端工程師成長計畫 - 讀書篇(3) | CSS(2) css樣式優先度計算
此篇文章將介紹CSS的知識，特別與CSS樣式的優先度規則與計算相關的知識。最後附上關於CSS不同的單位介紹
[前端小菜鳥] 前端工程師成長計畫 - 讀書篇(2) | HTTP/CSS(1)
此篇文章會正式進入研讀前端的HTTP/CSS知識，文章最初有將預計的讀書資源列出，其他的就是自己本身做筆記而已。
[前端小菜鳥] 前端工程師成長計畫 - 實戰經驗篇(1) | React.js + Class Component with Lifecycle Methods vs Functional Hook
轉行前端工程師的第一份工作，我在公司的陳年老code中，看到了令我最害怕的React.js Class Component寫法，不過既然遇到了，也只能乖乖地學習，這篇文章就簡單列出幾的我遇到的Lifecycle Methods吧。
購買新的Domain後，如何跟Github Page連接
最近剛完成我自己設計的網頁版占卜服務Miri，並架設在Github Page上，就想著不如趁機會購買新的網域讓占卜服務使用，而不是讓服務依附在原本部落格的網域。
[前端小菜鳥] 前端工程師成長計畫 - 讀書篇(1) | Internet
按照初章節的前端讀書計畫目錄，第一項目我想從網路Internet的知識下手，此項目的知識關乎網際網路是如何溝通，前端又是如何和後端聯繫，這部分的知識由於在我作為後端工程師的前幾年面試也常被問到，所以將它作為首要研讀的項目。
[前端小菜鳥] 前端工程師成長計畫 - 面試篇(2)
由於計劃趕不上變化，原先想要按照讀書計畫執行，再去面試。但由於有面試邀約，所以趕緊開始研讀自己收集的面試題目。
[前端小菜鳥] 前端工程師成長計畫 - 面試篇(1) | General 問題
這篇文章收入除了技術問題以外，面試官還可能會詢問的其他非技術相關的問題。
[前端小菜鳥] 前端工程師成長計畫 - 完整讀書計畫
從大學的志願一直到研究所的網頁設計合約，我對前端都很有熱忱，畢業後不小心邁進後端的領域。2022年開始自學前端技術一直到2023年底，我從第三份工作離職，我想嘗試看看下份工作找前端工程師的工作。因此，制定了前端的學習計畫。
[後端技術研究] Black Duck APIs 和 Fortify On Demand APIs 怎麼使用？ (透過Python Requests或Postman)
公司有一項冗長繁瑣的程式資安審核流程使用Black Duck和Fortify On Demand Scans，為了能達成自動化兩個掃描功能，我們研究了這兩項掃描服務的APIs，並在此文章紀錄我們的研究成果。
[研發解決方法] 研究公司的產品功能發布流程、設計並提出自動化解決方案(Fortify on Demand 和 Black Duck 掃描服務)
公司在新功能釋出前必須通過一連串冗長繁瑣的程式資安審核流程，為了縮短流程時間以及降低人工錯誤，管理經理提出了看似不切實際的需求，卻讓我們成功研發出自動化的解決方案，並成功開發出程式幫助工程師自動化程式掃描的過程。
[前端] 使用CSS linear-gradient與Figma轉化SVG達成簡單的漸層星空特效。
今天來分享一下，我是用CSS線性漸層linear-gradient搭配Figma轉出的星星SVG檔，構成的前端簡單星空背景效果。
[前端] CSS背景若使用漸層效果(linear-gradient)，又需要有改變背景顏色的需求，該如何做？
由於本人最近在開發自己的命理服務產品，大量使用了漸層(linear-gradient)的css背景顏色來美化前端頁面。其中一個功能是當使用者點選時，改變背景顏色，用原本的方式單純改變背景顏色(background-color)無法實現功能，後來找到解法並分享在文章。