Eason Lin

Front-End Developer

擁有 3+ 年網頁開發經驗,1.5 年全端工程師, 2 年前端工程師, 追求簡潔且擴充性高的程式碼。
Download Resume

Profile

Name : 林依靜 Eason Lin
Education : 國立台中科技大學-會計資訊系
Address : New Taipei City
Date of birth: Auguest 21, 1992

Experience

Front-End Developer @ 易遊網股份有限公司

Dec 2019 -

國內著名旅遊平台網站,擁有各式團旅、自由行及餐券等旅遊產品。
國外團旅, 自由行及郵輪 + 國內部分前端程式碼 / 與專案經理、設計師討論樣式操作 / 與後端工程師討論資料格式
使用 React、Next.js、TypeScript、Play Scala 及 JQuery 增加國內外團旅使用者體驗及各項功能。

工作描述
  • 運用測試項目使 Bugs 減少網頁出錯及客戶跳出率 50 %
  • 整理程式碼減少執行時間 20%
  • JSON-LD 增加 SEO 提升網站排行 10 %
  • 增加 GTM 追蹤網站數據利行銷分析並提高業績 10 %
  • React 渲染每個國家地區資料減少網頁載入時間 30 秒
  • 相容各大瀏覽器提升業績 5 %
  • 開發公司共用元件 Storybook,減少開發重複程式碼 50 %
  • 開發供應商出團資料系統,增加出團人員上架商品作業及記錄資料之效率 10 %
瀏覽紀錄 / 商品比較 / 商品儲存工具
  • 良好的商品歸納方便客戶比較,增加訂單 40%
  • 商品被分享的次數增加 20%
活動頁
  • 方便客戶進行比較並下單商品增加 40%
  • 提供5種版型使行銷同事增加活動頁銷售額 20%

Full-Stack Developer @ 瑞智資訊有限公司

Aug 2017 - Dec 2018

專門銜接舊技術及改寫客戶內部既有軟體之接案公司。
主要透過 AngularJS 設計內部人員及系統管理人員客製化之操作介面,後端運用 C# 處理資料運算及結構轉換,使用 Microsoft SQL Server 設計資料庫及儲存資料,使用 Internet Information Services 簡稱 IIS 為客戶架設公司伺服器端供內部人員使用。

參與之專案及負責工作內容
台新銀行傳真系統
  • AngularJS + Bootstrap 4 減少每次網頁載入時間 30 秒。
  • C# + Microsoft SQL Server 處理資料結構及轉換供傳真伺服器使用。
  • 設定 IIS 為客戶架設內部伺服器端。
  • 串接 LDAP 資料作為權限管理之經驗。
  • 整合 FTP 儲存傳真檔案。
  • 整合 OCR 檔案資訊儲存至資料庫。
台北市七星農田水利會租賃系統
  • AngularJS + Bootstrap 4 美化頁面。
  • C# + Microsoft SQL Server 讀取資料供前端使用。
  • 設定 IIS 為客戶架設內部伺服器端。
  • 使用 Telerik 產生內部報表及租賃繳款單。

Skills

Front-End

  • HTML / CSS

    • Pug
    • SCSS、Less
    • Bootstrap 4 / Materialize
    • RWD
    • Play Scala
  • JavaScript ES6

    • React / Redux / Next.js
    • React Hook
    • Storybook
    • TypeScript
    • JSON-LD
    • GTM

Back-End

  • 搭配 Node.js + Express 建立 RESTful API。
  • 串接及創建 Microsoft SQL Server、Firebase、MySQL 及 MongoDB 資料庫。
  • 使用 Express Handlebars 建立後端渲染頁面。
  • 使用 Nodemailer + Gmail 製作郵件發送功能。
  • 使用 SendGrid 製作並由伺服器發送郵件經驗。
  • 使用 GitHub 多人開發版本控管及基本指令。
  • 使用 Postman 測試API資料及傳送。
  • 使用 Visual Studio Code Debug 功能。

Portfolio

personal-website

個人網站

關於自己的網站, 裡面包含個人履歷、作品集、部落格及聯絡資訊

[相關技術]

  • 使用 vercel 部署網站
  • 使用 html + CSS 及美化頁面。
EE

旅遊規劃幫手 - EagleEyes

第六屆 PIXNET HACKATHON Taiwan Browser 翻轉在地體驗比賽之作品,使用 PIXNET API 搜尋使用者旅行地點的熱門文章,並智能規劃行程供使用者參考。 主要負責 Vue 及 Vuetify 架構以及 API 的串接。

[相關技術]

  • 使用 Vue CLI 3 開發網站。
  • 使用 Vuetify + SCSS 管理 CSS 及美化頁面。
  • 使用 Vue Component 管理重複結構。
  • 透過 Router 管理前後台路由。

[遇到的問題]

  • Question: 使用 Router 傳遞使用者的旅遊時間、地點及目的,在不需要這些參數的步驟中還是要接收並傳至下一個 Router 使網頁 Url 變的很冗長。
    Solution: 應該要加入 Vuex 管理統一資料,沒用到資料的 Component 就無需幫忙傳遞。
  • Question: 初賽甄選時使用 Materialize CDN 直接搭配 HTML 、 CSS 及 JavaScript 寫程式,初賽入圍後導入 Vue 框架發現 Materialize 的一些動畫效果都失效,因為 .Vue 會經過編譯才轉換成原生 HTML 、 CSS 及 JavaScript。
    Solution: 搜尋資料找到運用 Materialize for Vue 的框架 Vuetify ,學習並使用在此專案中。
  • Question: 串接後端 API 時失出現
    'Access-Control-Allow-Origin' header is present on the requested resource
    Solution: 學習程式的教學平台助教有開直播跟同學們分享 跨來源資源共用 CORS 這個問題,所以一看到就立馬通知後端的隊友處理這個跨瀏覽器資料共享的問題。
KB

KinkyBoots 歌劇網站

KinkyBoots 網頁包含介紹歌劇院、商店頁面購買靴子及訂票頁面,可觀看剩餘座位票數,訂購完成會寄送 Email 確認信。 主要負責後端資料庫處理及 Email 發送功能,前端部分負責串接 API 資料,並綁定至畫面上。

[相關技術]

  • 使用 Vue CLI 3 開發 SPA 網站。
  • 透過 Router 管理前後台路由。
  • jQuery 製作功能頁面及商店頁面動畫。

[遇到的問題]

  • Question: 第一次把 jQuery 加入 Vue 的專案,要如何在每一個 .vue 檔都能使用到 jQuery 選擇器 $ 呢?
    Solution: 跟夥伴上網搜尋方法,最後在 Youtube 上搜尋到教學影片,而且也發現 jQuery + JavaScript 可以更方便撰寫程式,例如:
    $(`.${CurrentBoot}`).attr("src", `/static/${getBootsColor}.png`)
    可以把選擇目標 (CurrentBoot) 及圖片路徑 (getBootsColor) 轉換成動態的變數。
  • Question: SendGrid 發送訂票通知信時都會被分到垃圾信箱。
    Solution: 原本以為在 SendGrid 的系統可以設定這個問題,最後找到的解決方法是設定 Domain Name 讓 Gmail 不要判斷為垃圾信或廣告信,有試著將放在 heroku 的 Domain Name 設定至 SendGrid 後台,也許是因為 heroku 網址有亂數所以還是失敗。
  • Question: 後端發送 Email 的信無法套用 CSS className 郵件格式整個跑掉。
    Solution: 想到平常收信時都會看到排版過的 Email 所以到自己的信箱尋找類似的 Email 結果發現都使用 Inline CSS ,不過也發現有亂碼的 className ,後來對照一下 Inline CSS 發現原來 Gmail 會編譯過一次才寄出。
EGTool

EGTool 是源自於前一份全端工程師工作時所發想的 Windows 軟體,當時專案有很多待辦事項,一開始使用記事本,但又有暫時需要存放的資料,一次要開好幾個記事本桌面很雜亂,所以就製作一個可以同時兼具這兩種功能的軟體,後來還新增休息提醒以及 Microsoft SQL 欄位轉換 C# model 的功能。

[相關技術]

  • 使用記事本存放專案的資料。
  • 使用 C# Windows Form 撰寫程式碼。
  • 使用計時器提醒休息時間。
  • 使用 icon 代替文字功能按鈕。

[遇到的問題]

  • Question: 要怎麼與 Windows 開啟檔案的畫面互動 ( 開啟檔案或是另存新檔 ) ?
    Solution: 搜尋 Windows Form open txt ,找到 OpenFileDialog 及 SaveFileDialog 這兩個開啟及存檔的元件,經由不斷嘗試後完成此互動功能。
  • Question: 要怎麼讀取 .txt 檔案內容 ?
    Solution: 搜尋 Windows Form read txt ,找到 ReadAllText() 及 WriteAllText() 兩個 Function , 之後又遇到檔案變亂碼,後來發現需要設定 Encoding 為 Default。
todoX

代辦事項 X

代辦事項 X 是 EGTool (全端工程師時工作開發的 Windows 軟體)的 Web 版,考量到不只工作,生活上也需要記錄很多待辦事項,這次也增加依照 Project 不同管理各別的待辦事項。

[相關技術]

  • 使用 React 開發 SPA 網站。
  • 透過 Redux 統一管理資料。
  • 透過 Thunk 結合非同步與後端資料庫互動。
  • 使用 Firebase 管理 Server 端、資料庫以及使用者權限。
  • 使用 Materialize 美化頁面。

[遇到的問題]

  • Question: 設定 this.setState() 時發現資料沒有即時更新。
    Solution: 後來發現 this.setState() 因為效能的關係並不保證即時更新,所以後來就用 updater 的方式傳一個 callback 解決不保證即時更新的問題。
  • Question: 刪除 Project 裡面的 Todos 也要一併刪除,一開始這樣寫但是馬上就報錯
    firestore.collection('todos').where('projectId', '==', id).delete()
    Solution: 上網搜尋後發現需要先把所有資料拿出來
    return firestore.collection('todos').where('projectId', '==', id).get()
    然後在 callback function 把子資料一個個刪除;不過如果是大專案一定不可能這樣做,光撈出全部的子資料就可能花很多時間,於是我思考有沒有可能集合中新增子集合 ? ,結果真的有,於是我很好奇如果刪掉集合那子集合會跟著刪除嗎 ? 結果子集合沒有因為刪除集合而跟著被移除,而且更糟的是子集合還存在資料庫裡面,如果沒有處理這一部分的話,存取資料庫的速度就會被這些幽靈資料所影響,而降低程式的執行速度。

Blog

thumbnail

學習程式由模仿開始!

凡事由模仿開始,不管是看官網文件或是參考網路上部落客的文章,此篇部落格分享自己是如何把別人 CodePen 作品的星星效果模仿,並應用在自己的網頁裡,這也是讓我一直不斷學習進步的方法之一。

READ NOW
thumbnail

UI / UX 初體驗

前端工程師是人文藝術與電腦科技結合一身的藝術家,除了程式的邏輯,如果能了解一點 UI / UX 設計的理念,就能與設計師減少溝通障礙,增進使用者對產品的體驗;此篇部落格為自己學習 UI / UX 的心得與收穫分享。