hexschool
The F2E - 第二屆 前端 & UI 修練精神時光屋
你想變強嗎？
你想獲得力量嗎？
你想透過前端改變你的生活，但找不到地方修練嗎？
如果你的答案是「Yes」那麼你來對地方了！
六角學院 x Adobe Xd Taiwan 聯名活動
本活動特別感謝 Adobe Xd Taiwan 社群一同參與。
修練內容
- 一週挑戰一個修練主題，總計九週，可挑選「前端工程師」、「UI 設計師」的挑戰方向
在 The F2E 會獲得什麼資源？
- 資源授權：本活動的所有授權都是 CC0 格式，方便挑戰者重製成自己的 side project 與作品，授權範圍含：
- User story (使用者故事)
- Functional Map (功能架構規劃)
- Mockup (設計稿)
報名與參賽方式
請依照下列三步驟進行報名
- 報名時間：6/14(五)~7/7(五)，正式開賽時間為 7/8 (一)
- 報名方式：到此平台報名。
- 開賽規則：每週一中午 12 點公布新題目，隔週一中午 12 點前將作品投稿到平台。
- 發文登記：開賽後的每週登錄作品請投稿到 The F2E 平台，當週才算挑戰成功。
技能樹選擇
請依照自己想投入的部分，額外選擇下面兩條修練方向。
A.UI 設計師
設計 UI 介面：每道修練主題我們都會提供 User story (使用者故事)，你可以依此使用 UI 繪圖軟體來設計 Mockup，以加強自己對 Web UI 的掌握度。
B.前端工程師
JS開發 & 介接 API：在開發中大型介面時，一個網頁上可能會有許多第三方介接的資料，例如後端的 RESTful API、Google Map、BaaS 等等，您可以思考我們所提供的修練主題，試著導入服務進去。
前端工程師修練方向
你可以依照我們提供的修練主題，主動練習自己想投入的新技術。為了確保每週都能挑戰功能，會建議 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
- 應用程式服務：瀏覽器插件 (chrome extension)、桌面應用程式 (electron)、APP (ionic、react native)
- 2、3D 動畫開發：使用 SVG、canvas、WebGL 設計動畫效果，例如 D3.js、three.js
- Node.js：NPM 、後端框架 (koa、express)、API 設計、測試(Mocha、Nightwatch)
- 程式檢查：ESLint、JSHint
獎勵機制
- 完成三道關卡：授予銅級數位勳章，並記錄在戰績榜上。
- 完成六道關卡：授予銀級數位勳章，並記錄在戰績榜上。
- 完成九道關卡：授予金級數位勳章，並記錄在戰績榜上。
前端直播客分享
本次活動同時邀請到許多有在經營前端直播的資深開發者，藉此促進交流，大幅升級自己的腦袋！
常見問答
Q：如果某一週不小心挑戰失敗，是否能再繼續挑戰後面關卡？
A：可以，儘管那週挑戰失敗，之後您仍可以挑選喜歡的關卡進行挑戰，並在該關卡期限內繳交作品。
Q：大家都好強，我怕我做的東西沒有達到過關門檻，不敢登錄作品
A：這個活動並非競爭性質，每個參賽者都是你的隊友，最大的敵人是你自己，因為你必須定期練功前端開發，讓自己能夠順利完賽。
Q：我不確定自己做的版型有沒有符合過關門檻，要寫到什麼程度才有到過關門檻？
A：主辦單位其實不會去審核大家的程式碼，只要你認為當週你有針對主題有做到一定程度，就算是半完成品也請大方投稿，不用擔心。
Q：我已經寫到一半了，但時間快來不及，可以先投稿嗎？
A：可以，有投稿表示你還會持續努力在這次活動上。
【UI 設計師常見問題】
Q：到時投稿到平台是提供什麼呢？我也不像是工程師可以有 CODEPEN 上傳。
A：其中投稿的欄位裡面會有一個「線上標示文件」，像是 Adobe XD 便有提供該服務(範例連結)，屆時提供標示文件後，便可讓其他前端工程師採用你的設計稿來開發。
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：可以，你可以當做我們就是出一個主題，你依照那主題當作參考方向來開發即可。
協力廠商 MonoSpace
