The people who are crazy enough to think they can change the world are the ones who do."
By Steve Jobs
Front-end Developer, EDM, Fitness
- 以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。
- 公司活動專頁的切版。
- 實作RWD自適應網頁(css media queries)。
- 支援跨瀏覽器的實作經驗。(IE 9 up, Firefox, Chrome, Safari)
- 使用prototype pattern及singleton的方式去開發產品所需的JS Module
- 基本的HTML、CSS、jQuery切版。
- 使用Bootstrap去實作RWD自適應網頁。
- 以zepto去開發Mobile Web所需的按壓觸摸事件。
- 測試並協助操作CMS後台管理系統。
- 協助撰寫需求文件及測試案例文件。
專為行銷人打造,所見即所得的行銷頁編輯器。
前端部分,由於在編輯器上會有滿多的交互行為所以一開始便規劃透過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。
管理行銷網頁和顯示網頁資訊的後台介面。
前端部分,因為後台部分不用做到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。
模組化的跳窗介面和信用卡購買介面。
因為公司網站的架構慢慢變大,因此有很多功能和視圖就需要切出來另外做模組化,以便好維護和日後的擴展。
實作上,先把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。
產品展示及導入編輯頁面的portal頁。
由一位設計師一位PM及兩位後端人員和我 (前端) 組成的五人團隊,進行為期五個月左右的開發,圖示為初期的Beta版本。
流程上,PM跟設計師討論出整體設計風格及樣式,再由我切出template給後端,然後再根據需求加上樣式 (CSS) 及效果 (JS)。
使用技術: HTML5 (template) , CSS (介面樣式、轉場效果), jQuery (選單、按鈕), masonry.js & infinitescroll.js (瀑布流效果), Bootstrap (RWD), Git, Github
Android地圖遊戲APP。
和系上同學合作開發的畢業專題 - 為期三個月,本人負責遊戲內容的規劃、實作及Google Map API的串接。
實務上,使用 Java去實作外部的Android介面,再透過Android SDK提供的Webview去完成主遊戲程式和API的串接。
使用技術:HTML5 (template) , Javascript (遊戲邏輯), Google map API (地圖資料串接), Android API (外部介面&內部嵌套), JSON (資料串接), LocalStorage (存擋紀錄功能)
It’s an self maintain and develop open-source project aim to collect the progressive loading effect with react.
(Still developing ... )
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 ... )
主要負責系學會內資訊設備的架設及迎新宿營影片的剪接製作。
學習Switch與Router的運作原理與組態設定以及區域網路、廣域網路的基本原理。
與會者,當天講題是樂天實戰經驗與桌面程式開發(Electron)。
AngularJS 觀念與架構 基礎開發入門。
與會者,當天講題是分享E2E測試的相關經驗。
參與活動及工作坊。
由Jeremy 大講授入門React該注意的事項。
講授JavaScript 程式語言中重要的觀念與特性及一些新手容易發生的錯誤。
講述Git 基本版控流程、基本版控命令和Git 圖形化介面工具。
javascript的中大型分享會,由台中前端社群主辦。
講授有關JavaScript 的一些進階觀念(prototype, design pattern ,ES6 ....),講師:林儀泰老師
台灣JavaScript 開發者年會,主義議題圍繞在react, react-native, vue等...的javascript框架上,比較印象深刻的是在講universal javascript的那場,提到了很多相關的know how。
此場的議題由臺大資工陳縕儂教授講述有關深度學習的一些心得和入門介紹,這次的議程聽起來主要都是偏向數理的範疇,整場下來可能只聽懂四五成而已,果然要入門還是要先回去翻翻微積分和演算法。
一年一度AWS台北高峰會,此次前往主要是由於工作方面會慢慢的需要接觸AWS,然後自己對雲端架構也有點興趣了解,因為之前都沒有太多AWS的經驗,所以選的議程還是偏向基本入門的,印像最深刻的是Github的那場,因為Bitbucket的原因還因此得到了giftcardㄎㄎ 。
久聞GraphQL大名,這次聽完後更有種未來趨勢的樣子,感覺之後會省了很多支API,可惜好像是前後端都要integrate才行。
此次meetup分享的是recompose和rxjs的Marble Testing,比較有印象的是recompose的講者介紹時把一個個原本必須寫為class的component都拆解成functional component,雖然這不是什麼提升效能或功能的feature,但把class拆解掉一直都是我想做的事。
這次meetup上下半場都在分享AMP這個由Google提出來的新技術,透過遵守他所訂立的amp規範去製作網頁,google便會免費幫你cache,並且在手機搜尋的時候給你個潮潮的閃電,但整場聽下來,只覺得還有很多坑要採而且開發上也實在不方便啊...
由於專案上其實是用到docker去做部署,但自己對這塊也僅止於知道基本的指令(docker run...)及如何應用,所以想說趁這次的機會去好好了解一下,而這場下來最精彩的應該是講者在分享架構上的經驗吧,像這種寶貴的踩坑經驗永遠都是無價的哈哈。