The people who are crazy enough to think they can change the world are the ones who do."

By Steve Jobs
jeff.jpg

王建傑 Wang Chien-Chieh

 (+886) 916958529   
新北市汐止區 Xizh Districti, New Taipei, Taiwan

Front-end Developer, EDM, Fitness


   Education

  •   臺北市立南港高中- (2008~2010)
    Taipei Municipal Nan-Gang Senior high school, Taiwan.

  •   SMEAG語言學校- (2014~2015)
    Study Abroad, English Training Center, Philippines. 

  •   私立大同大學-資訊經營學系 (2010~2015)
    Bachelor's degree ,Department of Information      Management ,Tatung University, Taiwan.

tw-taipei-nksh.jpg sme.png Ttumark.jpg

  Experience

發燒互動 Feversocial - Front-end engineer                 01 March 2017 - 01 April 2018

- 以React, Redux, Next 的架構下去維護及開發公司的網頁編輯器產品介面。 
  (https://tw.feversocial.com/feversocialtw/)

- 架構及開發編輯器的後台管理介面。 (React, Recompose, Styled-Component)
- 實作多國語系i18n在編輯器及管理後台。(react-intl, onesky)

- 應用CI &CD (Circle CI)、Docker的經驗。

- 管理維護AWS服務的經驗 (EC2, ECS, S3, Lambda, CloudWatch)

- 開發環境使用git、webpack、babel、eslint、jest。

LiTV 線上影視 - Javascript developer                                    12 Sept - 31 Dec 2016

- 公司活動專頁的切版。

- 實作RWD自適應網頁(css media queries)。

- 支援跨瀏覽器的實作經驗。(IE 9 up, Firefox, Chrome, Safari)

- 使用prototype pattern及singleton的方式去開發產品所需的JS Module

Digital Plus 數碼數位-Front-end Intern                                April 2015 - Sept 2015

- 基本的HTML、CSS、jQuery切版。

- 使用Bootstrap去實作RWD自適應網頁。

- 以zepto去開發Mobile Web所需的按壓觸摸事件。

HEIMAVISTA黑快馬-暑期實習                                                  July 2013 - Sept 2013

- 測試並協助操作CMS後台管理系統。

- 協助撰寫需求文件及測試案例文件。

  Skills


Frontend

  • HTML & CSS & Javascript
  • jQuery
  • RWD 
  • CSS in JS
    (glamor、style-components)


React

  • ES6
  • NPM
  • Babel & Webpack
  • Flux & Redux
  • Next
  • Recompose


Node

  • Express
    ( Server side render )
  • Compression function in Lambda


AWS

  • EC2
  • ECS
  • S3
  • Route 53
  • CloudWatch
  • Load Balancer
  • Lambda


DevOps

  • Docker
  • Circle CI
  • Jest


Other

  • Git
  • Github
  • Mac OS
  • Serverless Framework
  • Storybook
  • ESLint


Language

  • Mandarin & Chinese - Native
  • English - Upper intermediate, Academic IELTS 5.5


Certifications

  • Academic IELTS Overall - 5.5
  • Cisco Certified Network Associate Routing and Switching


  Projects 

Zines - 線上行銷網頁編輯器

專為行銷人打造,所見即所得的行銷頁編輯器。

前端部分,由於在編輯器上會有滿多的交互行為所以一開始便規劃透過React、Redux去做介面的顯示和狀態的管理,然而又因為行銷頁面有SEO的考量,便以server render方向下去設計,而選用了Next.js ,並且為了因應之後海外的市場,因此也在一開始就有做i18n (react-intl)。


架構部分,Render server (Node) 、API server (PHP) 和RDS (MySQL)等service皆是部署在AWS上,流程上,透過Docker和Circle CI去做持續交付、部署。


使用技術: React, Redux, redux-thunk, Next, glamor, ESLint, Jest, Docker, CircleCI, EC2, ECS, ALB, Route 53, S3, Lambda。

Zines CMS - 行銷網頁管理資訊後台

管理行銷網頁和顯示網頁資訊的後台介面。

前端部分,因為後台部分不用做到SEO,所以就以SPA的方式下去設計,而routing方面則是用我們自己寫的簡易的react-router去做管理,然後一樣有做i18n (react-intl)。


架構部分, 用Nginx當作靜態網頁的web server,而相關的service也同樣是部署在AWS上,持續交付、部署也一樣是透過Docker和Circle CI。


使用技術: React, Redux, Recompose, create-react-app, redux-thunk, styled-components, ESLint, Jest, Docker, CircleCI, EC2, ECS, ALB, Route 53, S3。

LiTV JS Module

模組化的跳窗介面和信用卡購買介面。

因為公司網站的架構慢慢變大,因此有很多功能和視圖就需要切出來另外做模組化,以便好維護和日後的擴展。


實作上,先把view append到Document Fragment (虛擬的DOM tree)中,並且select 出需要的DOM element儲存在變數中,在呼叫show的接口時,再把Fragment append到要render的DOM element中,只return要公開的方法,把不必要公開的方法用匿名函式的特性隱藏起來。

架構的設計採用的是revealing module pattern (跳窗模組) 和prototype pattern (信用卡購買介面模組) 的方式。


使用技術:Vanilla JavaScript and a little bit CSS, HTML。

iApp - 自媒體平台

產品展示及導入編輯頁面的portal頁。

由一位設計師一位PM及兩位後端人員和我 (前端) 組成的五人團隊,進行為期五個月左右的開發,圖示為初期的Beta版本。


流程上,PM跟設計師討論出整體設計風格及樣式,再由我切出template給後端,然後再根據需求加上樣式 (CSS) 及效果 (JS)。


使用技術: HTML5 (template) , CSS (介面樣式、轉場效果), jQuery (選單、按鈕),  masonry.js & infinitescroll.js (瀑布流效果), Bootstrap (RWD), Git, Github

Travel leader - 系上專題實作

Android地圖遊戲APP。

和系上同學合作開發的畢業專題 - 為期三個月,本人負責遊戲內容的規劃、實作及Google Map API的串接。


實務上,使用 Java去實作外部的Android介面,再透過Android SDK提供的Webview去完成主遊戲程式和API的串接。


使用技術:HTML5 (template) , Javascript (遊戲邏輯), Google map API (地圖資料串接), Android API (外部介面&內部嵌套),  JSON (資料串接), LocalStorage (存擋紀錄功能)

  Open source

react-progressive-component

It’s an self maintain and develop open-source project aim to collect the progressive loading effect with react.

(Still developing ... )

slate-wysiwyg

A wysiwyg rich editor build on the top of react and slate. Covers several common functionality of editor like font, color, link, alignment etc.

(Still developing ... )

   Activities


大同大學資訊經營系學會-資訊組組長, 08 June 2012 - 2013

主要負責系學會內資訊設備的架設及迎新宿營影片的剪接製作。

Ttumark.jpg

巨匠電腦-CiscoCCNAX網路工程師認證班, June 2014 - Sept 2014

學習Switch與Router的運作原理與組態設定以及區域網路、廣域網路的基本原理。

ccna.png

Reactjs.tw - 社群小聚 8, 24 June 2015

與會者,當天講題是樂天實戰經驗與桌面程式開發(Electron)。 

下載.png

Will 保哥實戰課程-AngularJS 開發實戰:新手入門篇, 02 Aug 2015

AngularJS 觀念與架構 基礎開發入門。

AngularJS-Shield-200x200_original_large_large.png

Node.js Party 分享會 -JavaScript fullstack Test flow, 6 Aug 2015

與會者,當天講題是分享E2E測試的相關經驗。

ㄍㄟ.jpg

黑客松台灣-第十屆, 15 Aug 2015

參與活動及工作坊。

黑客松.jpg

COSCUP 2015 React/Flux 入門-Jeremy Lu, 22 Aug 2015

由Jeremy 大講授入門React該注意的事項。

150329150418_coscup-logo-512_promote_promote.png

Will 保哥實戰課程-JavaScript 開發實戰:核心概念篇, 27 Dec 2015

講授JavaScript 程式語言中重要的觀念與特性及一些新手容易發生的錯誤。

js.jpg

Will 保哥實戰課程-Git 版本控管實戰:新手入門篇, 23 Jan 2016

講述Git 基本版控流程、基本版控命令和Git 圖形化介面工具。

git.jpg

CTJS -中台灣 JavaScript Conference, 25 June 2016

javascript的中大型分享會,由台中前端社群主辦。

ctjs.png

原生JavaScript程式設計進階班:飛肯設計學苑, 19 Nov - 10 Dec 2016

講授有關JavaScript 的一些進階觀念(prototype, design pattern ,ES6 ....),講師:林儀泰老師

images.jpeg

JSDC - JavaScript Conference, 22-23 Oct 2016

台灣JavaScript 開發者年會,主義議題圍繞在react, react-native, vue等...的javascript框架上,比較印象深刻的是在講universal javascript的那場,提到了很多相關的know how。



jsdc-2016.png

台灣資料科學年會 - 深入淺出深度學習,  26 March 2017

此場的議題由臺大資工陳縕儂教授講述有關深度學習的一些心得和入門介紹,這次的議程聽起來主要都是偏向數理的範疇,整場下來可能只聽懂四五成而已,果然要入門還是要先回去翻翻微積分和演算法。



jsdc-2016.png

AWS - SUMMIT Conference,  06-07 June 2017

一年一度AWS台北高峰會,此次前往主要是由於工作方面會慢慢的需要接觸AWS,然後自己對雲端架構也有點興趣了解,因為之前都沒有太多AWS的經驗,所以選的議程還是偏向基本入門的,印像最深刻的是Github的那場,因為Bitbucket的原因還因此得到了giftcardㄎㄎ 。



jsdc-2016.png

GraphQL Taiwan - First Meetup, 16 Aug 2017

久聞GraphQL大名,這次聽完後更有種未來趨勢的樣子,感覺之後會省了很多支API,可惜好像是前後端都要integrate才行。



jsdc-2016.png

F2E&RGBA - Meetup 九月號, 21 Sept 2017

此次meetup分享的是recompose和rxjs的Marble Testing,比較有印象的是recompose的講者介紹時把一個個原本必須寫為class的component都拆解成functional component,雖然這不是什麼提升效能或功能的feature,但把class拆解掉一直都是我想做的事。



jsdc-2016.png

F2E&RGBA - Meetup 十一月號, 28 Nov 2017

這次meetup上下半場都在分享AMP這個由Google提出來的新技術,透過遵守他所訂立的amp規範去製作網頁,google便會免費幫你cache,並且在手機搜尋的時候給你個潮潮的閃電,但整場聽下來,只覺得還有很多坑要採而且開發上也實在不方便啊...



jsdc-2016.png

Docker - DockerCon Briefing 2017 Taipei,  01 Dec 2017

由於專案上其實是用到docker去做部署,但自己對這塊也僅止於知道基本的指令(docker run...)及如何應用,所以想說趁這次的機會去好好了解一下,而這場下來最精彩的應該是講者在分享架構上的經驗吧,像這種寶貴的踩坑經驗永遠都是無價的哈哈。



jsdc-2016.png
Powered by CakeResumePowered by CakeResume
Powered by CakeResumePowered by CakeResume