1185769_595825287136269_201374516_n.jpg

      BLOG技術分享 

半路出家的網站工程師,發現開發程式的成就感及樂趣,不是在Coding就是在Coding的路上。

由於長期個人接案,偏好開發應用及整合,討厭前、後端、Server開發時的你等我我等你,一直走在全端開發的路上。正在學習Dev Ops的技能,也在準備AWS Solution Architecture Professional


[email protected]  /  IELTS Band: 6 (2018 / 9)
此履歷著重前端,後端履歷請點我

Special Experiences

  • 全英文環境及溝通,管理 2 位菲律賓本籍人使用Rails使用WebScoket開發聊天室後台管理、RESTful API
  • 使用Quasar / Cordova 開發 IOS / Android 聊天室
  • 擔任前端主管,帶領 4 位工程師開發,主導前沿技術
  • 主持公司內部技術分享每個禮拜一次,持續至今已6個月,內容為各種前沿技術
  • 使用 xComponent(Zoid), iframe-resizer和 React 實做 4 個 iframe 跨網域套件,可以坎在任意網站以及不同網域可互傳資料的工具
  • 接案合作的UI設計師,目前遇到的都是沒有RWD與UX的概念。PM是工程師與平面設計師之間溝通的橋樑,我會教導我的PM,讓他知道RWD與UX設計的概念,讓PM有能力跟每一位合作的平面設計師溝通。
  • 寫了React和Vue的比較文 - 14 comparisons let you know Vue should be the first choice rather than React to build a product
  • 熟悉優化頁面 Google pagespeed,最高分電腦98,手機94 (滿分100)

Javascript


Concept

  • Single Page Application
  • RESTful API 串接前端資料以及接發資料
  • 熟悉製作npm套件以及發布
  • 有能力Folk套件並依需求串改
  • 優化以及最小化產品
  • Iframe 開發以及安全性開發
  • Mock server API 開發流程
  • API SPEC 規格
  • CACHE / 靜態 CDN 機制
  • Component coding style
  • FingerPrint 指紋辨識
  • Source Map

Side Tool

  • 使用Postman Tiny Validator (v4 JSON Schema)
  • 使用Postman 寫整合測試,週期性測試並數據回報
  • Eslint / Prettier / Stylint
  • Yarn / NPM
  • 善用 Webpack, webpack-dev-server 打包 (Babel / Polyfill)
  • Cypress 撰寫整合測試,並使用Github Action 達到 CI 流程
  • Cypress 實踐爬蟲
  • PWA 優化使用者體驗,離線時一樣能瀏覽,且可下載到桌面
  • Rollbar Bug 監控
  • Github Action

Vue

媒合預約型產品的網站,i.e:預約剪頭髮、做指甲的設計師的工作時段,或是健身教練的上課時段。

快速掌握影集與漫畫的進度。寫定時爬蟲的程式,郵件通知最新集數與連結網址。 
前端可管理想要訂閱的網址,後端會定期爬資料顯示在前端。

  • Advertisement Management System
純 Vue 打造簡易廣告 Carousel 工具
使用者可增加刪除Slider並選定版型,上傳照片後可發布到 Android Tablet 輪迴播放 (與GrapeJs客製平台是不同功能)

  • Content Management System
Android Tablet輪迴播放後會經由鏡頭的人臉辨識系統抓取有效數據,所以使用Vue打造數據管理系統,可觀看報表以及經濟效益 (花了多少錢有多少人觀看) ; 也可經由此平台管理廣告發布,可選定該Carousel發佈到指定的 Android Tablet。


前端經驗

  • PUG Template
  • Typescript
  • ExpressJS
  • 精通 JQuery / Vue / ES6
  • 熟悉非同步優化處理
  • 處理Component,畫面render時的 API 併發
  • 擅長使用 JS CSS 優化動畫、效果
  • 優化SPA首次加載速度
  • 使用Websocket串接
  • Eslint 套件撰寫
  • NPM套件開發、發布
  • Github Action
  • 使用Nodejs 撰寫專案部署套件
  • Webpack 打包優化,切割套件最小化
  • 最佳化CSS檔案大小
  • 善用Chrome Devtool (意指裡面很多神奇功能)
  • 編譯干擾式JS,意指無法透過 JS mini 檔反編譯,以達到保護 JS 著作權
--------------------------------------------------------------------------------
 Git 版本控制
  • Git 熟悉 add、commit、branch、checkout、merge、 rebase、revert、reset、stash、push、pull、init 等指令 
  • 接案共同協作皆用Git flow / Github flow 流程
  • 常態性為公司 Git mentor


Javascript 實作過功能

  • Grapejs 客製拖拉HTML單元元件及邏輯行為,使用元件製作生成任意網頁 
  • Full Calendar 銜接後臺資料以及能實作出calendar能即時預約的功能 link 點右上角的預約 
  • Sortable 可對組件做任意排序,並回傳順序
  • Google map 串接以及判斷使用者所在地 可再經由Search結果動態即時產生location上的座標點 ( 與Yelp搜尋方式一模一樣 ) 
  • Cropper 多張照片可在 同個頁面 同時選擇 同時裁切 同時上傳 
  •  JQuery cart cookies 版 使用 JQuery cookies 實作購物車以及實作出購物網站前端的購物商業行為(增加減商品數量、計算總金額運費等等) 
  • Lazy loading 可配合 kaminari 實作、或是預Load資料在前端但不顯示照片等方式實作 
  • JQuery / CSS animate 運用CSS配合 JQuery 可手刻做出 modal carousel以及決大部分90%網頁上能見的過場動畫 

Quasar / Cordova

  • 透過 Quasar 開發 IOS Android UI介面 
  • 實作熱更新,只更新畫面靜態CSS, JS資源,不透過冷更新使APP需要重新下載
  • 手機可像Wechat一樣,向上滑開始錄音,放開及結束錄音,並根據手機系統產生不同音檔格式
  • 實作Websocket與Server溝通串接語音、照片、以及文字訊息
  • 具有開發雙平台的Git管理經驗(與一般產品開發流程必然不同)
  • 熟悉使用Cordova操作IOS Android權限
  • 傳接友盟Umeng 消息推送、移動統計
  • 使用Sqlite3處理歷史訊息


      CSS / SCSS / RWD

      • 為了應付接案需求,發展出自己的CSS方法論並寫成library,請見Behavior-Bind-Media
      • 由於套件太肥,曾構思不用套件手刻類似的功能該如何實作,請見3D Banner animate

      開發接案經歷

      T-SOUL

      開發 API(RESTful) Server , 及前端畫面

      • 協作開發
      • 負責部分:
      • 65% 後端 Raills (後端純發API)
      • 100% 前端 CSS/ JS


      AmazingTalker

      Alphacamp時的Demo的作品,畢業後持續開發總時約半年,因個人因素已離開,目前創辦人仍持續開發經營中. 後來以接案形式繼續幫忙負責前端


      • 協作開發  
      • 習得技能:Full Calendar 客制即時預約形式
      • 負責部分:
        • 95% CSS 無套版
        • 100% JS / JQuery
        • 50% Rails 從AC畢業到之後兩個月內

      FUSAKI

      購物車網站

      • 獨立開發 
      • 習得技能:串接金流、購物車.
      • 負責部分:
        • 100% CSS(無套版) 
        • 100% JS / JQuery
        • 100% Rails
        •  AWS  Cloud Flare

      Home Taste

      購物車網站


      • 協作開發 
      • 習得技能:Google Map 串接及客制、Full Calendar整合、用 JQuery Cookies 寫購物車
      • 負責部分:
        • 100% CSS 無套版)
        • 100% JS / JQuery
        • 30% Rails
        • AWS

      EmilyQ

      較複雜的商品/Blog網站 

      • 協作開發 
      • 習得技能:多張照片裁切Upload,同時新增/上傳/裁切
      • 負責部分:
        • 10% CSS 無套版 
        • 100%  JS / JQuery
        • 100% Rails 
        • AWS

      Tao Kesong

      購物車網站

      • 協作開發
      • 習得重點技能:串接RESTful API / API開發、接手已經經過"兩手的DB",接手時是第三手的改造經驗  
      • 負責部分:
        • 100% CSS 無套版
        • 40% JS / JQuery
        • 40% Rails
        • AWS

      Experience

      澳洲闖蕩:2018年4月~2019年的現在

      在澳洲幸運的花了3個禮拜找到全端 Full Stack (React / Rails) 工作,該公司專為Shopify打造預約型產品的工具(該工具分類的第一名)。

      主要責任是帶領兩名前端工程師使用React,主導以及規劃設計可內砍在Shopify的 iFrame 套件並code review。

      同時也需要撰寫RESTful API即後端測試。


      也因為熱愛 Vue 在下班休閒之餘,正在撰寫 WYSIWUG 套件當自己的 Side project 進行自我進修,目標是製作一個像Cakeresume 的內容編輯後台。


      接案時期:2016年6月~2018年3月


      偶然的機緣與 ALPHACamp 的同儕一起接案,個人也與 Fable 和 Bananny 固定承接案子,開啟了接案之路。


      為了讓自己快速成長,對案子來者不拒。曾經歷過重疊五個案子的高壓情況,每天工作12小時以上,連假日也不例外的生活就這樣持續了兩年半。工地主任的歷練也在這高壓情境派上用場,能為自己精準拿捏「浮時」(意指不定因素造成的時間),讓每個案子分配到的時間做更有效率的運用。


      經歷過兩位PM用Sprint進行敏捷式開發,間接了解StartUp公司用Sprint開發的優點在於「打造MVP(最小可行性產品)的風險較低、較快速、更能階段性的上線及測試。」發現專案管理的魅力,也讓自己了解為何第二次創業時連專案管理都不懂,是失敗的原因之一。  

      Powered by CakeResumePowered by CakeResume
      Powered by CakeResumePowered by CakeResume