羅子堯

前端工程師 / Taipei

web 前端工程師。

專注於 JavaScript,喜愛 React 持續精進。擁有 Vue 開發經驗。

使用 html / CSS 搭配 JavaScript 相關框架快速打造出網站。

後端經驗: mySQL, node.js + express 撰寫後端程式。 

[email protected]

+886 962-024-997


國立台灣藝術大學 / 圖文傳播學系畢業

工作經歷

前端工程師

Feb 2020 - Oct 2020。

關鍵評論網 (廣編分離的獨立媒體)

  • 與設計師、後端工程師、PM 密切溝通。使用 Bootstrap、Laravel 開發之 API 建制 TNL 集團會員後台、會員登入註冊驗證流程。
  • 關鍵評論網:全站繁體簡體轉換功能。
  • 使用 slate.js / draft.js 承接開發公司內部 WYSIWYG 編輯工具。
  • 使用 Svelte, D3 支援維護 covid-19 互動專欄 Svelte 頁面。

前端工程師

Mar 2019 - Oct 2019。

give543 贈物網(惜物愛物的交流平臺)

  • 與後端、測試人員合作,使用 Laravel 開發之 API。
  • 使用 React, Redux, ant Design, CSS Modules 開發/維護 web 網站。
  • 使用 Vue.js , Vuex 開發/維護 mobile app。
  • 前端過濾違禁品,並自動提醒使用者,減少客服人員需要逐一通知用戶的負擔。
  • 新增使用者取貨提醒功能,減少大量未取件數量。
  • 美化:使用者後台系統 UI、管理人員後台系統 UI。
  • 優化:註冊流程、社群分享功能、使用者私訊/留言區 UI、使用者上架/索取操作流程、留言者操作權限、搜尋用戶、物品篩選器。

程式導師實驗計畫

Sep 2018 - Jan 2019

  • 全程參予 Huli 第二期程式導師計劃。補足許多重要的業界知識。

前後端自學

May 2016 - Aug 2018

  • 透過 Pluralsight / freeCodeCamp / MongoDB University 自學,熟悉 JavaScript 語法。
  • 打造實用工具:實價登錄資料轉換小工具、Gtranslate 翻譯小工具。

前端技能


Javascript

  • ES6 語法
  • Callback Function & Event Loop
  • 物件導向 & Prototype

相關生態系

  • React  ( 經歷 hook 前後變革)
  • Redux
  • react query 
  • react query 實作網站 
  • Vue.js (搭配 Vuex)
  • Gatsby SSG

  • 其他

  • 排版:Flexbox, Grid
  • CSS  / BEM/ CSS Modules /CSS in JS 
  • Bootstrap 規劃 RWD 版型
  • SCSS / stylus
  • Git  / github / Bitbucket
  • Gulp / Webpack
  • 前端相關作品


    Projects 01 00@2x 9a5a97084c8e268ae3725d8e03654d1815ae2eb597b59c292ae4d0beffa7b703

    2048 遊戲

    • 上下左右操作遊玩。
    • 使用物件導向觀念。
    • 使用 ES6 class 語法, private variable, 透過 set, get 存取變數。
    • 純粹前端。html / css / javascript。
    • 佈署在 netlify。

    Projects 01 00@2x 9a5a97084c8e268ae3725d8e03654d1815ae2eb597b59c292ae4d0beffa7b703

    PHP & AJAX 的留言板系統

    • 具備會員功能。
    • abc / abc 登入即可留言/編輯/刪除。
    • 使用 PDO prepare statement 存取 MySQL 資料庫。
    • 前、後端:佈署在自行架設的 DigitalOcean Ubuntu 主機。

    Projects 01 00@2x 9a5a97084c8e268ae3725d8e03654d1815ae2eb597b59c292ae4d0beffa7b703

    Node.js 短網址系統

    • Node.js + Express,簡易 MVC 架構。
    • abc / abc 登入即可使用。
    • 運用 ORM 套件 Sequelize 串接操作 MySQL 資料庫。使用 pug 模板引擎。
    • 使用 PM2 套件運行在 DigitalOcean Ubuntu 主機上。


    Projects 01 00@2x 9a5a97084c8e268ae3725d8e03654d1815ae2eb597b59c292ae4d0beffa7b703

    記憶卡片小遊戲

    • javascript / html / css 實作。
    • 每回合遊戲,從 48 種 logo 中隨機抽出 8 組卡片做組合。

    Projects 01 00@2x 9a5a97084c8e268ae3725d8e03654d1815ae2eb597b59c292ae4d0beffa7b703

    React 五子棋

    • 附帶棋局歷史記錄。建置工具使用 create-react-app。


    Projects 01 00@2x 9a5a97084c8e268ae3725d8e03654d1815ae2eb597b59c292ae4d0beffa7b703

    React 待辦清單

    • 建置工具使用 Webpack 及 Babel。

    Projects 01 00@2x 9a5a97084c8e268ae3725d8e03654d1815ae2eb597b59c292ae4d0beffa7b703

    React 自動儲存表單

    • 使用 react / localStorage ,實現未完成表單儲存功能。



    Projects 01 00@2x 9a5a97084c8e268ae3725d8e03654d1815ae2eb597b59c292ae4d0beffa7b703

    串接 Twitch api

    • 使用 Vanilla JS 串接 Twitch API。
    • 搜尋遊戲關鍵字,再去 live stream 頁面直播頻道並展示。

    Projects 01 00@2x 9a5a97084c8e268ae3725d8e03654d1815ae2eb597b59c292ae4d0beffa7b703

    串接 Twitter api

    • 搜尋某 id ,然後秀出其 favs 。
    • 使用 Vanilla JS 串接 twitter API。
    • 生成 OAuth 1.0 request header。

    後端技能


    PHP & MySQL

    • 使用 PDO 操作 MySQL。
    • 會員系統建立,使用 session 及 password hash。
    • 清楚 SQL injection / XSS / CSRF 並防範。


    Node.js


    Deploy

    • Ubuntu, DigitalOcean。
    • Netlify

    後端相關作品


    Projects 01 00@2x 9a5a97084c8e268ae3725d8e03654d1815ae2eb597b59c292ae4d0beffa7b703

    實價登錄資料轉換小工具

    • 可方便轉換內政部公開交易資料。
    • 轉出 csv 檔案,方便應用在其他平臺。
    • 使用 Javascript / mongo shell 編寫。

    Projects 01 00@2x 9a5a97084c8e268ae3725d8e03654d1815ae2eb597b59c292ae4d0beffa7b703

    Gtranslate 翻譯小工具

    • 自己有大量翻譯的需求,可跳脫 google translate api 限制的小工具。
    • 使用 node.js / fs library 編寫。

    Projects 01 00@2x 9a5a97084c8e268ae3725d8e03654d1815ae2eb597b59c292ae4d0beffa7b703

    Twitter timeline 抓取

    • 抓取 Twitter 上 favs / timeline 存爲 Json 檔。
    • 使用 node.js / fs library 編寫。