About Me.

Hi, I'm Michael / 晁世杰

This is the most fantastic art that I'm loving with.

前端工程師 Front-End Developer
新北市土城區,TW

 0982-516-540
aa76652001@gmail.com

Skills


Front-end

HTML5

CSS3 JavaScript (ES6+)

jQuery Stylus

Sass

 Vue.js (Vue2, Vue3)

 Swiper RWD


Others

Git / GitLab / Bitbucket

Webpack.js

Element-UI /Bootstrap / Vant Popup

Restful API

Restful API

Vue i18n

Yapi Mock

Node.js 

Work Experience


格拉墨科技Ltd. , Front-End Developer, Mar 2021 -- Present

公司是以平台的開發為主, 與產品部, 安卓及IOS, 後端群及產品經理協作。

前端團隊是以敏捷開發去安排每個專案需要的時程與人力, 來去支援不同專案的開發。
主要的內容包含賽事的投注資料呈現, 活動頁面展示和參與, 用戶的各項資料和嵌入體育網(外網)...等等。


參與過的項目:

桌機端, 移動端,後台刻板和開發功能, 新增元件及串接 api 資料...等等, 每日也會因應 QA 開出的 bug 做修復及調整。在推上測試環境前與同事互相 review 過各自的改動或新增的功能(透過 GitLab 版控)並在需要讓對方瞭解原因時練習以更精簡的方式讓雙方互相理解。


另外,喜歡在處理新事物或遇到bug,一個人靜下來思考的時間。在解開問題點或與同事及主管之間討論中獲得解答時,非常開心!當然與同事之間也會常常交流自己或對方不懂的技術點。


樂活資訊科技, Front-End Developer, Mar 2020 ~ Apr 2020

於2020年/03月進此公司, 爾後為銜接公司業務, 這幾個月正針對接下來客戶的案子進行技術與插件的研究學習。

在這裡的業務是以PM與客戶討論後的版面與內容進行作業。 第一份切版內容是以全手刻的方式去做練習 ( 除 slider 部份是套用 Swiper 網站上的 Demo )。 第二份切版是這間公司的案子:套用 Bootstrap 的 AdminLTE3 的樣式去做切版的動作。

中間除了基礎的技術, 也接觸了一些粗淺的 Sass 寫法, 接著套用到第三方 plugin 並從網站上提供的 api 文件去更改內容及樣式。 Ex : Swiper , Google Fonts , Bootstrap , FreeIcons ...。


最後因疫情關係, 在4月中旬時接到裁員通知 , 並於月底離職。為時雖僅僅 2 個月 , 但在前輩身上也學到很多技術且更清楚的知道接下來自己的目標技術與方向。


統一集團, 7-11職員, Jan 2016 ~ Dec 2019

時間並不是完整的四年, 斷斷續續的, 因為中間嘗試轉換跑道, 因此找不同的工作。

在大學時期就接觸這個行業。爾後通過內部考試升任至儲備店經理一職。
做這份工作學習到和喜歡的事情:


1. 喜歡與人接觸

2. 將自己的想法和對事情的改善方式討論, 並予以實現
(Ex.商品陳列, 時間分配, 帶新人)

3. 實務上很快就能上手, 偶爾也會將先前在他店學到的技術運用在當下的工作上


概述

以下簡述於格拉墨所接觸過或進行中的工作內容。

活動頁面-切版

1. 此頁內容除了刻版, banner 換圖是用到先前沒接觸過的 img srcset 特性, 然後去動態提取 api 回來的圖片資料。

2. 桃紅色底白字的內容"正在進行"則是由 api 回來的資料, 由回傳後的日期用dayjs各種屬性判斷活動的狀態。

3. 申請方式這邊:邏輯處理部分由下方的圖示做說明。

活動頁面-檢查機制

1. 左圖:

點擊參與活動按鈕會判斷各種狀態, ex: 登入與否則跳出此圖, 參與過跳message...等等。

2. 右圖:

基本的參與過則由後端回傳資料判斷該按鈕狀態。

贊助頁

還記得當初一個人開發贊助頁時有很多想法, 但因為沒有養成事前規劃頁面結構, 導致後面用 emit & props 傳得很頭痛。

不過也在此時跟後端和產品大量溝通回傳格式或內容等等, 慢慢能夠精簡的敘述自己需要的內容。
還有印象當初也和產品討論很久他們想要的輪播方式, 最後用 swiper 的coverflow, 花最久的時間也在這上面(各種大小, 模式, 翻轉角度...等等)。

注單 iframe

1. 注單嵌 iframe, 主包和財務包溝通方式以 EventListener 為主, 並將該 js 檔掛載於全域下。 iframe 背後的注單資料表格則是使用 element-UI 製作。

其中有趣的地方在用該套件本身的屬性 ( cell-style ) 去判斷並更換顏色。

2. 無資料時引入共用元件 - 空資料頁面展示。

全站黑化

原本用 localStorage 去存取參數, 之後改用專案已使用的 vuex-persistedstate 將該參數置於其內, 達到相同效果。

與大小網專案拆分開的財務包及活動包, 則使用前述的 EventListener 接收原站點切換過後顏色的值, 得以全站統一色系。