The F2E - 第二屆 前端 & UI 修練精神時光屋

你想變強嗎?
你想獲得力量嗎?
你想透過前端改變你的生活,但找不到地方修練嗎?

如果你的答案是「Yes」那麼你來對地方了!

六角學院 x Adobe Xd Taiwan 聯名活動

本活動特別感謝 Adobe Xd Taiwan 社群一同參與。

修練內容

  1. 一週挑戰一個修練主題,總計九週,可挑選「前端工程師」、「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



Tags

友站推薦

前端專欄文章