你想變強嗎?你想獲得力量嗎?你想透過前端 / UI 改變你的生活,但找不到地方修練嗎?
如果你的答案是「Yes」那麼你來對地方了!
修練內容
- 一週挑戰一個修練主題,總計三週,可挑選「前端工程師」、「UI 設計師」、「團體組」的挑戰方向
- 本屆將與交通部合作,採用全國最大的運輸資料流通服務平台 (TDX) 之交通 API 來開發應用,三週主題為:
a. 台灣旅遊景點導覽
b. 自行車道地圖資訊整合網
c. 全台公車動態時刻查詢應用服務
在 The F2E 會獲得什麼資源?
資源授權:本活動的授權大部分都是 CC0、CC BY 格式,方便挑戰者重製成自己的 side project 與作品,授權範圍含:
- User story (使用者故事)
- Functional Map (功能架構規劃)
- Mockup (設計稿)
報名組別
請依照自己想投入的部分,額外選擇下面三條修練方向。
A.個人組-UI 設計師
設計 UI 介面:每道修練主題我們都會提供 User story (使用者故事),你可以依此使用 UI 繪圖軟體來設計 Mockup,以加強自己對 Web UI 的掌握度。
B.個人組-前端工程師
JS 開發 & 介接 API:在開發中大型介面時,一個網頁上可能會有許多第三方介接的資料,例如後端的 RESTful API、Google Map、BaaS 等等,您可以思考我們所提供的修練主題,試著導入服務進去。
C.團體組
欲報名團體組,請符合以下條件
- 最少 2 人,最多限制為 4 人
- 建議至少 1 位前端工程師與 1 位 UI 設計師,但非強制,全部都為工程師也可以,但仍需要由組內成員完成 UI 設計稿。
- UI 設計稿與程式開發需由組內成員共同完成。
注意:一個帳號不可同時報團體組跟個人組
報名與參賽方式
報名時間:10/14(四) 11:00 AM ~ 11/7(日)
報名方式:10/14(四) 當天,請重新來到此頁面,即可透過連結,前往全新的 The F2E 平台報名。
開賽規則:每週一中午 12 點開放新題目投稿,隔週一中午 12 點前將作品投稿到平台。
投稿作品:開賽後的每週登錄作品請投稿到 The F2E 平台,當週才算挑戰成功
- UI 、團體組開賽時間:11/1(一)
- 前端組開賽時間:11/8(一)
Q:為什麼 UI 跟團體組的開賽時間,比前端組提前一週?
A:因為必須由 UI 設計師花一週時間設計完後,再交棒給前端組認領 UI 設計稿,並實做出來
前端工程師修練方向
你可以依照我們提供的修練主題,主動練習自己想投入的新技術。為了確保每週都能挑戰功能,會建議 70% 用自己會的技術,30% 使用剛學會的新技術,以避免挑戰曲線不會過高。
以 CSS、JavaScript 為例,你可投入:
CSS
- 會使用 float 排版時,可以嘗試使用 flexbox、grid 排版
- 思考響應式排版的實做方式,並在 iPad、mobile 有極好的使用者體驗
- transition、animation、transform 動畫效果,提升網頁動線
- 能使用 CSS 實做出來的效果,就不要使用 JavaScript
- 預處理器 (SCSS、LESS) 與 PostCSS
- CSS 框架 (Bootstrap、Pure)
- 設計模式 (SMACSS、OOCSS、BEM、MVCSS)
JavaScript
- JS 基礎:使用一個你不曾用過的 JS 技巧,例如
- array map 、filter、reduce
- 閉包、遞迴、物件導向
- JSON 資料、字串處理
- 正規表達式 (Regular Expression)
- 模組管理:使用任務管理工具 (grunt、gulp)、模組打包工具 (webpack)
- ECMAScript:ES 6、7 、8,並使用 Babel 兼容網頁瀏覽器。
- HTML5 API:LocalStorage、Geolocation、File API
- 介接第三方服務 API: social login、weater、open data、自建 API
- 導入 SPA 框架: Vue、React、Angular
- 工具框架:lodash、Underscore
- 2、3D 動畫開發:使用 SVG、canvas、WebGL 設計動畫效果,例如 D3.js、three.js
- Node.js:NPM 、後端框架 (koa、express)、API 設計、測試(Mocha、Nightwatch)
- 程式檢查:ESLint、JSHint
獎勵機制
- 完成一道關卡:授予銅級數位勳章,並記錄在戰績榜上。
- 完成二道關卡:授予銀級數位勳章,並記錄在戰績榜上。
- 完成三道關卡:授予金級數位勳章,並記錄在戰績榜上。
評審獎項
為提升活動趣味性,本活動將針對第三道主題 - 全台公車動態時刻查詢應用服務,邀請評審來審核獎項。(一個人僅限領一個獎項)
- 團體組評審獎 (1名):獎金 8,500
- 個人組 - 前端工程師評審獎 (1名):獎金 3,500
- UI 組 - 前端工程師評審獎 (1名):獎金 3,500
- 入圍獎 (共12名):獎金 1,500
- 佳作獎 (共15名):一式數位獎狀
詳細參賽得獎規定:
- 比賽結果將於 110/12/16 (四) 公佈得獎名單,並公告於「活動官網」同時主辦單位也會透過 Email 聯絡得獎者。
- 依中華民國稅法規定,中獎金額在新台幣 1,000(含)元以上者,所得將併入中獎人個人綜合所得稅申報,請中獎人配合繳交身分證影印本作為申報依據,中獎金額超過 NT$20,000 元,中獎人應依稅法先行繳交相當於獎品價值 10%機會中獎之稅金;非中華民國國境內居住之國人(即在中華民國境內居住未達 183 天之本國人及外國人)不論得獎者所得之金額,須就中獎所得扣繳20%機會中獎稅,扣繳稅款未超過 NT$2,000,免扣繳 (外籍人士不適用),以供本公司做代繳稅及提供扣繳憑單使用。本公司統一於活動年之隔年寄發扣繳憑單給中獎人,以利中獎人申報之用。
本學院保留活動最終決定之權利。
評審門檻
- 僅限 Web 瀏覽器應用來開發, Android、iOS APP 不在本活動評審範圍內。
- 有使用到 TDX API 的 API 服務
評審機制
- 初選:將由六角學院前端、UI 評審 進行第一波篩選,並於 12/3(五) 公布佳作、入圍名單
- 決選:由外部評審針對入圍獎進行最後篩選,並直播分享評審講名單!並於 12/16(四) 公布名單
評審
![](https://firebasestorage.googleapis.com/v0/b/hexschool-api.appspot.com/o/blog%2F2021%2F09%2F09%2Fspeaker_22.png?alt=media&token=cc59ed85-59bd-44b4-bf5e-61eb2b9f05ec)
高見龍
五倍紅寶石
程式資訊教育股份有限公司
負責人
![](https://2021.thef2e.com/_nuxt/img/leo.b1fe923.png)
Leo (李歐)
Angular Taiwan 傳教士
![](https://2021.thef2e.com/_nuxt/img/kuro.296f3dd.jpeg)
Kuro Hsu
Vue.js Taiwan 社群主辦人
![](https://2021.thef2e.com/_nuxt/img/water.3e38d34.jpeg)
小水
互動設計師
(Interaction Designer)
![](https://2021.thef2e.com/_nuxt/img/Simon.c6e3731.jpeg)
Simon Lin
Sr. UX Designer
![](https://2021.thef2e.com/_nuxt/img/Drow.5ebde4e.png)
卓致遠
致遠體驗設計
負責人
前端、UI 直播客分享
本次活動同時邀請到許多有在經營前端直播的資深開發者,藉此促進交流,大幅升級自己的腦袋!
協辦單位
![](https://firebasestorage.googleapis.com/v0/b/hexschool-api.appspot.com/o/blog%2F2021%2F09%2F09%2Flogo-03.png?alt=media&token=d03aac00-536c-4594-8807-8d37a2ba38ca)
中華民國交通部
![](https://firebasestorage.googleapis.com/v0/b/hexschool-api.appspot.com/o/blog%2F2021%2F09%2F09%2FTDX%E9%81%8B%E8%BC%B8%E8%B3%87%E6%96%99%E6%95%B4%E5%90%88%E6%B5%81%E9%80%9A%E6%9C%8D%E5%8B%99-Logo%E3%80%90%E8%97%8D%E8%89%B2%E3%80%91_(1)-02.png?alt=media&token=c30f6163-b6fe-41de-a5f2-afcc95b83d27)
TDX 運輸資料流通服務
![](https://firebasestorage.googleapis.com/v0/b/hexschool-api.appspot.com/o/blog%2F2021%2F09%2F09%2FUntitled.png?alt=media&token=0e27e172-6b94-4e66-a2f5-d930faf868e9)
五倍紅寶石
常見問答
Q:如果某一週不小心挑戰失敗,是否能再繼續挑戰後面關卡?
A:可以,儘管那週挑戰失敗,之後您仍可以挑選喜歡的關卡進行挑戰,並在該關卡期限內繳交作品。
Q:大家都好強,我怕我做的東西沒有達到過關門檻,不敢登錄作品
A:這個活動並非競爭性質,每個參賽者都是你的隊友,最大的敵人是你自己,因為你必須定期練功前端開發,讓自己能夠順利完賽。
Q:我不確定自己做的版型有沒有符合過關門檻,要寫到什麼程度才有到過關門檻?
A:主辦單位其實不會去審核大家的程式碼,只要你認為當週你有針對主題有做到一定程度,就算是半完成品也請大方投稿,不用擔心。
Q:我已經寫到一半了,但時間快來不及,可以先投稿嗎?
A:可以,有投稿表示你還會持續努力在這次活動上。
【UI 設計師常見問題】
Q:到時投稿到平台是提供什麼呢?我也不像是工程師可以有 CODEPEN 上傳。
A:其中投稿的欄位裡面會有一個「線上標示文件」,像是 Adobe XD 便有提供該服務(範例連結),屆時提供標示文件後,便可讓其他前端工程師採用你的設計稿來開發。
Q:投稿上去的 UI 作品,我知道需要授權讓前端工程師組做成 Web 介面,那授權部分可以設定嗎?
A:會有的,屆時平台投稿流程上,會讓您的作品可以選擇 CC0、CC BY 等授權,以保障您的 UI 作品權益。
Q:一定要上傳「線上標示文件」嗎?
A:是的,因為這樣才有辦法讓其他前端工程師,能採用您的設計稿,將您的設計稿實作出網頁格式。如果您是使用 Sketch,也可使用 Sketch Measure 編譯出來後,壓縮 ZIP 到雲端空間 (Dropbox、Google Drive)。
Q:不能使用 PS、Illustrator 設計嗎?
A:只要您能找到 PS 或 Illustrator 產出線上標示文件的方式就可以,因為前端工程師大部分皆比較少具有繪圖軟體,所以用線上標示文件將會減少許工程師協作上的溝通時間。
Q:當每週一題目出來後,我有一些設計進度也可以先投稿嗎?
A:可以,團隊在協作過程中,一定也會先出些進度提供前端切版,有進度時您也可以先投稿,讓前端工程師可以先接手,之後再透過 FB 社團來溝通進度即可。
【前端工程師常見問題】
Q:我可以不依照設計稿,自己做版面嗎?因為我想多練習 JS / 後端
A:可以,The F2E 活動是希望讓大家人人有功練,所以依照你自己想投入的方向練功即可。CSS 也可以用框架,例如 Bootstrap。
Q:前端介面一定要長得一模一樣嗎?
A:不用,依照自己的想法來開發也可以
Q:有現成的網頁靜態頁面嗎?我想只練習 JS / 後端就好
A:這段我們不會提供,畢竟每個人習慣的 Coding style 又不一樣,產出的 HTML、CSS 並非是自己習慣的 Layout 反而會更花時間。
Q:那我只想要練習 JS,HTML/CSS 我用陽春版,不依照設計稿開發可以嗎?
A:可以,你可以當做我們就是出一個主題,你依照那主題當作參考方向來開發即可。
【團體組常見問題】
Q:請問團體組最多幾人?
A:最多 4 人,投稿作品時請派一位組長來投稿即可。
Q:我對獎項有興趣,可以只做第三道主題就好嗎?
A:可以,您可以在這場活動中,和組員一起打磨第三道主題,不用三個主題都做。
Q:那團體組第三道主題最晚投稿期限為?
A:團體組投稿第三週 UI 最晚投稿時間為 11/22(一) 中午 12 點,前端最晚投稿期限為 11/29(一) 中午 12 點。
Q:我們團體組比較想做手機 APP,可以投稿並符合評審門檻嗎?
A:您可以開發手機 APP,若有在期限前投稿也能獲得數位獎狀。但評審門檻僅限 Web 瀏覽器應用開發,Android、iOS APP 則不在評審範圍內,故不符合評審門檻。
Q:請問除了前端開發、UI 設計外,還能做其他加值應用嗎?例如後端動態應用整合?
A:可以的,只要能透過網頁瀏覽器操控您的服務,並有使用到 TDX API 的任何一個 API,您可以依照本次主題「全台公車動態時刻查詢應用服務」做最大的加值整合應用,甚至搭配後端應用,整合多個外部 API 也是可以的。
Q:團體組的 UI 設計稿,可以讓『個人組-前端工程師』組別採用嗎?
A:不能,預設是不能讓『個人組-前端工程師』採用。