過去接觸過的技術 C++, MFC, OLE, CppUnit, Jenkins, Git, Boost C++, python, Django, C#, Silverlight…等，最熟練的是標準 C++ 的語言本身, 用 Git 版本控制, CppUnit 輔助自動化測試, Jenkins 自動化工作流程, 用 python 寫小工具。

希望未來, 是以「網頁前端技術」, 有機會面對&解決當代有價值的問題, 繼續開發者的路。

目前熟悉的語言 HTML 和 CSS ，可以參考 Blog 選單中的 Novice F2E (前端新手村)，以及 JavaScript，熟悉的前端框架是 Vue.js 是個小巧快速的好工具。

除了「寫程式」之外, 我也很喜歡「設計」, 曾經去成大旁聽一年的工業設計課程，覺得解鎖設計技能樹，有助於在工作上與設計師溝通。

¶作品介紹

以下是我這幾年來寫過東西、用過的技術或做過的練習。

All
網頁前端
網頁後端
桌面應用程式
HTML + CSS
Bootstrap
pull request
JavaScript
node.js
Vue.js
Exercise
CA-SDK
C++
MFC
Design Pattern
C#
BSpline 實作
串接 MS Office 功能
Package
Python
Django
Canvas
DevOps

hausenncamp 官方網站

婚紗公司形象網站

負責工作: 切版、視覺特效、需求管理
使用工具&套件: Component SCSS, jQuery, Bootstrap4 + Masonry, Animate.css
手工特效: Pure CSS Parallax + RWD
Transition: 跳接、移動
Animations: Loading page, Navigation bar items
工作概述:
初期: 直接與案主(設計師)溝通與co-work, 建立合作的溝通模式,、溝通使用者情境，協助製作 baclog 以價值決定工作順序
中期: 協助幫 JavaScript 工程師處理套件的 bug , 確保每個人的工作順利進行。
收尾: 利用 issue tracker 工具,收斂案子的 scop，順利結案。

台南路上觀察團官方網站

社群形象網站

負責工作: 切版、視覺特效
使用工具&套件: Bootstrap, SASS
手工特效: Navigation bar fix in top
工作概述: 案主(技術麻瓜)溝通需求, 並且以對方出設計稿的方式進行實作設計稿。
密切溝通的讓案主學會 git , 不改程式碼的小幅度的修改, 案主可自行操作 git 更新維護。

vue a bit 聚會

圍繞著 Vue-cli 的學習讀書會

主題包含 Webpack, loader, plgin, vue, npm, node, commonjs
從 vue-cli 的 webpack-simple 每個套件的研究，到 webpack 模版的練習

練習筆記 Vue.js 2

初學 vue.js 的學習記錄 & 習作

透過官方網站的文件, 每一個練習都記錄在內, 自行寫成一個 html 檔。
初期以 CDN 的方式使用 vue。
vue-cli 對 vue.js 的了解又更進一步。
vue-resource: 用來接 API
vue-router: 用來做前端 router
Vuex: 用來管理資料(狀態)更新途徑

Atom theme 修改

Atom theme

加上行 heightline 的光劍。
加上 indent 的 heightline 的光劍。
加上括號的 heightline 的底部畫螢光筆。
畫面傾斜，像 star wars (平常沒有這樣使用)

Messenger 聊天機器人

Facebook Messenger Chatbot

擔任 PM，技術上是使用 php 的 Laravel 為框架的後端 web service。
主要負責與業業主溝通、整理 API Doc 草稿、 Wireframe 、 Sequence diagram
用前端的 JavaScript 做發送 API 的 API 自動化測試
另外，還有使用 node.js + Messenger webhook 實作練習。

Scrollify - Fix overflow scroll #268

修改 Open Source Project

網站 hausenncamp.com 有用的捲軸特效套件。
問題: 容器在 overflow: hidden , 容器的捲軸特效定位, 預期的行為不同。
過程概述: 使用 Chrome 的 debugger 追縱 js 出錯的地方, 修改完成並提交給原作者。

練習筆記 JavaScript30

線上課程的學習記錄 & 習作

線上課程 JavaScript30 三十天的課程。
每一天都記錄在 github 上, 大約三週結束整個課程。
收獲: 對學習 JavaScript 和 ES6 之間的差異與 ES6 語法的掌握有非常大的幫助。
練習使用 Web 技術呼叫手機的senso做練習。
ex: 指南針、語音輸入、語音輸出...等有趣的互動內容。

習作網頁前端

進行案子中, 製作的 Propertype

對於不熟的技術, 或者沒有組合過的套件, 會先以 Property 的方式進行研究, 一來進行技術評估, 二來可以學到有趣的組合經驗。在設計思考的流程中, 說 Property 是一種找到解答就要丟掉的垃圾, 但是我覺得留下來展示也是不錯的選擇。

Hexo - sel code block line number #2612

修改 Open Source Project

Github flow, Js unit test, CI
將 hackmd 的這個功能移植到 hexo 上。
因為是 hackmd 的愛用者, hexo 剛好也使用 markdown 撰寫, 所以就想把 hackmd 當作 hexo 的編輯環境。
在 hexo 設定「文章裡的程式碼行號」的方式, 以往只能在 config 檔設定
而 hackmd 可以每個區塊使用語法設定。

過程看了 hexo 的 source code, 也看了 hackmd 的 source code。
也問了 hackmd 的作者, 感謝他的細心引導讓我可以順利的找到我想參考的程式碼。