create account

自學 | Self Study _v 0.2.2 | 前端工程師 (Front-End developers) 初探 by snailpjw

View this thread on: hive.blog |  peakd.com |  ecency.com
cn · @snailpjw ·
$8.08
自學 | Self Study _v 0.2.2 | 前端工程師 (Front-End developers) 初探
<html>
<p>上大學前, 我是個只會用電腦玩玩電動的屁孩, 對於能運用電腦去做些什麼, 根本一竅不通, 沒有概念, 那時候喜歡寫字, 作文, 寫詩, 感覺充滿了文藝氣息, 那時候還不相信怎麼會用電腦用到不會寫字, 但 現在懂了......</p>
<p>電腦, 網際網路, 手機...... 讓資訊快速地流通, 資訊變得 多, 雜, "快"! 變化的速度加快, 我們要以怎樣態度來面對呢?</p>
<p>引用 <a href="http://www.csie.ntu.edu.tw/~liao/">廖世偉</a> 老師在某個 Blockchain talk的佳句來註解 :</p>
<blockquote>聚焦在無限小的點：單點突破．快速複製</blockquote>
<blockquote>小步快跑，加速迭代（跌倒）</blockquote>
<p>就跟前個學期 資策會創研所副所長 洪毓祥老師所耳提面命的: (意思大概如下)</p>
<blockquote>只有不斷的嘗試失敗, 才有機會趨近於那個機率渺茫的成功機會</blockquote>
<p>而我計畫嘗試"工程師"的這條路上, 工具的變化也是相當迅速, 下面整理一些資訊分享!</p>
<p>*關於工程師</p>
<p>根據 鄭仲鈞(Sean Cheng) 前輩在<a href="http://st-threath.blogspot.tw/2013/06/an-engineer.html">Blog</a>上分享的資料, 工程師大致上可以區分成三種 :&nbsp;</p>
<ol>
  <li>寫程式的人(Coder、Employee、Worker)</li>
  <li>有目標而寫程式的人(Hacker、Doer、Entrepreneur)</li>
  <li>熱愛程式本身的人(Architect、Theorists、Change Maker、Geek)</li>
</ol>
<p>在 ALPHA camp 的<a href="https://blog.alphacamp.co/2016/01/05/3-things-you-have-to-know-before-you-switch-over-to-a-developer/">Blog</a>中也有一篇文章 "轉職成軟體工程師前你該考慮的三件事", 下面簡單註記:</p>
<ol>
  <li>工程師都在做些什麼?
    <ol>
      <li>跟其他工程師討論</li>
      <li>撰寫程式</li>
      <li>除錯</li>
      <li>跟使用者溝通</li>
    </ol>
  </li>
  <li>媒體宣揚的好處不過是種迷思
    <ol>
      <li>薪水超高?</li>
      <li>出國工作?</li>
      <li>轉職後就海闊天空?</li>
    </ol>
  </li>
  <li>你對寫成是真的有愛嗎?</li>
</ol>
<p>針對上面的問題, 自我評估, 我還只是的Coder, 目標尚未明確, 會選擇這條路, 也只是剛好大學有接觸到程式設計, 剛好學起來比同學厲害些, 有成就感些, 聽老師說出路不錯, 也就順其自然地朝著這個方向去做, 至於不是本科系的朋友, 想轉職成工程師也不是不可能, 就我遇到厲害的專家, 也有不少不是本科系的(Ex：觀光系、經濟系等等)</p>
<p>而近期我會萌生朝 前端發展的種子, 不外乎是覺得視覺效果很炫, 不斷推陳出新, 感覺任何視覺特效都可以刻出來, 很酷!!!</p>
<p>再來大概就是大學畢業專題發表時, 副校長對於我專題系統的評語了,&nbsp;</p>
<p>"這畫面可能要去給設計系的設計一下!"</p>
<p>(雖然真的是不怎麼樣的介面, 但不得不說, 不單單是他, 我也是, 對於第一眼看到事物的外表, 介面, 是有相當大的影響力的, 剛好 @sweetsssj 在文章 <a href="https://steemit.com/story/@sweetsssj/welcome-to-my-world-of-idioms-6-fine-feathers-make-fine-birds">Fine feathers make fine birds</a> 也有提到類似的現象, 值得思考)</p>
<p><br></p>
<p>*關於前端工程師 (Front-End developers)</p>
<p>根據 "<a href="http://www.ditldesign.com/news/2014/12/19/ditktalk2014nov20hsieh">DITLTALK-前端工程師所應具備的能力為何？</a>" 這篇文章中 謝舒婷小姐Talk的紀錄如下:</p>
<ol>
  <li>會純的HTML、CSS、JavaScript，至少熟悉一套JS Framework</li>
  <li>能解決跨瀏覽器的問題</li>
  <li>至少瞭解一種後端程式</li>
  <li>對UX領域保持熱誠</li>
  <li>積極吸收最新資訊</li>
</ol>
<p>除了上面基礎條件外, 還有其他幾項</p>
<ol>
  <li>各種框架Framework的應用</li>
  <li>注重安全性及效能</li>
  <li>瞭解W3C的網頁結構規範</li>
</ol>
<p>個人特質培養</p>
<ol>
  <li>溝通的技巧</li>
  <li>團隊開發的能力</li>
  <li>互動設計</li>
  <li>易用性</li>
</ol>
<p>*列舉一些 <a href="http://www.f2e.tw/jobs.html">Front-End Developers Taiwan</a> 網站上徵才的資訊：(<a href="https://github.com/f2etw/jobs">Github</a>)</p>
<ol>
  <li><a href="https://github.com/f2etw/jobs/issues/158">Cepave.com 香港商翱鶚股份有限公司</a></li>
  <li><a href="https://github.com/f2etw/jobs/issues/151">幫你優 BoniO</a></li>
  <li><a href="https://github.com/f2etw/jobs/issues/150">InQ</a></li>
  <li><a href="https://github.com/f2etw/jobs/issues/125">25sprout</a></li>
</ol>
<p>需具備能力的範例</p>
<ul>
  <li>基本使用 Git 能力</li>
  <li>熟悉 HTML5 、CSS3、ES6+ 語法</li>
  <li>使用過 React.js</li>
  <li>Flux/Redux or 任何與React搭配的state management</li>
  <li>SASS or postCSS</li>
  <li>不依賴css framework切版的能力</li>
  <li>Responsive Web Design 網站製作經驗</li>
  <li>jQuery 使用經驗</li>
  <li>Webpack使用/設定經驗</li>
  <li>熟悉前端測試</li>
  <li>對後端有一定了解，Ruby on Rails尤佳</li>
  <li>瞭解scrum流程</li>
  <li>具備 RESTful API 介接經驗</li>
</ul>
<p>*註記其他中意的公司</p>
<ol>
  <li><a href="https://hahow.in/joinus">Hahow</a></li>
  <li><a href="https://5xruby.tw/posts">五倍紅寶石</a></li>
  <li><a href="https://tw.voicetube.com/jobs">VoiceTube</a></li>
</ol>
<p>*學習資源 (Search 到好多, 得花時間消化消化)</p>
<ol>
  <li><a href="http://chuansong.me/n/1427418552860">送给你的100篇前端技术好文</a></li>
  <li><a href="https://github.com/soyaine/JavaScript30">有关 @wesbos 的课程 JavaScript-30 的中文练习指南</a></li>
  <li>&nbsp;<a href="https://pjchender.blogspot.tw/2017/01/js30day1.html">PJCHENder愛分享-[筆記] JS30系列：監聽按鍵事件及撥放音效（Day1）</a></li>
  <li><a href="https://buzzorange.com/techorange/2016/10/25/2016-programming-language/">【全端工程師解密】2016 年度 JavaScript 潮流：請徹底拋棄 jQuery</a></li>
  <li><a href="https://softnshare.wordpress.com/2016/05/02/轉載-前端設計師工程師的職缺要如何寫/">轉載-前端設計師/工程師的職缺要如何寫?</a></li>
  <li><a href="https://noootown.wordpress.com/2016/03/23/frontend-backend-breakfast/">[前端連載] 買早餐也能了解前端 vs 後端？</a></li>
  <li><a href="https://hahow.in/courses/56c1e3b3e91d590900234105">Hahow- 前端網頁設計入門</a></li>
  <li><a href="http://www.slideshare.net/l443018/frontend-resource-intergration-and-sharing-modern-web-2016-review?qid=bfbb958a-0276-431a-a18f-15e409fec195&amp;v=&amp;b=&amp;from_search=8">Frontend Resource Intergration and Sharing - Modern Web 2016 review</a></li>
  <li><a href="http://ithelp.ithome.com.tw/articles/10184581">30 天打造 MERN Stack Boilerplate系列</a></li>
  <li><a href="https://www.facebook.com/groups/f2e.tw/?fref=ts">&nbsp;Front-End Developers Taiwan Facebook</a></li>
  <li><a href="http://blog.miniasp.com/post/2016/02/02/JavaScript-novice-advice-and-learning-resources.aspx">我要成為前端工程師！給 JavaScript 新手的建議與學習資源整理</a></li>
  <li><a href="http://kimix.name/如何成為前端工程師/">如何成為前端工程師？</a></li>
  <li><a href="https://zh-tw.facebook.com/notes/lock-chou/譯為什麼我們找不到前端工程師/10152095506555563/">[譯]為什麼我們找不到前端工程師？</a></li>
  <li><a href="http://denny.qollie.com/2016/07/30/front-end-career-job/">我的前端工程師之路：找工作</a></li>
  <li><a href="https://noootown.wordpress.com/category/前端連載/">沒一村Blog前端連載</a></li>
  <li><a href="https://blog.alphacamp.co/2016/01/14/how-to-become-a-startup-ui-rockstar/">如何成為新創公司渴求的 UI 設計師？</a></li>
  <li><a href="http://ithelp.ithome.com.tw/articles/10186104">30 天精通 RxJS</a></li>
  <li><a href="https://cn.vuejs.org/v2/guide/">Vue.js</a></li>
  <li><a href="http://blog.techbridge.cc/2016/04/04/react-react-native-es5-es6-cheat-sheet/">一看就懂的 React ES5、ES6+ 常見用法對照表</a></li>
  <li><a href="https://resourcecards.com">Resource Cards</a></li>
  <li><a href="https://ihower.tw/rails/intro.html">Ruby on Rails 實戰聖經</a></li>
  <li><a href="https://www.lynda.com/Web-Foundations-tutorials/Front-end-design/158666/158685-4.html">Front-end design &amp; Front-end developer</a></li>
  <li><a href="http://csscoke.com/">CSS Coke - CSS可樂 (Lee Amos)</a></li>
  <li><a href="https://medium.freecodecamp.com/a-study-plan-to-cure-javascript-fatigue-8ad3a54f2eb1#.wu9jhhrvi">A Study Plan To Cure JavaScript Fatigue</a></li>
  <li><a href="http://blog.techbridge.cc/2016/07/23/progressive-web-app/">Progressive Web App 會是未來趨勢嗎？</a></li>
  <li><a href="http://ithelp.ithome.com.tw/articles/10186198">30 天 Progressive Web App 學習筆記</a></li>
</ol>
<p><br></p>
<p>......TBC</p>
</html>
👍  , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , ,
properties (23)
authorsnailpjw
permlinkor-self-study-v-0-2-2-or-front-end-developers
categorycn
json_metadata{"tags":["cn","pjwstudy","frontend","developers","study"],"users":["sweetsssj"],"links":["http://www.csie.ntu.edu.tw/~liao/","http://st-threath.blogspot.tw/2013/06/an-engineer.html","https://blog.alphacamp.co/2016/01/05/3-things-you-have-to-know-before-you-switch-over-to-a-developer/","https://steemit.com/story/@sweetsssj/welcome-to-my-world-of-idioms-6-fine-feathers-make-fine-birds","http://www.ditldesign.com/news/2014/12/19/ditktalk2014nov20hsieh","http://www.f2e.tw/jobs.html","https://github.com/f2etw/jobs","https://github.com/f2etw/jobs/issues/158","https://github.com/f2etw/jobs/issues/151","https://github.com/f2etw/jobs/issues/150","https://github.com/f2etw/jobs/issues/125","https://hahow.in/joinus","https://5xruby.tw/posts","https://tw.voicetube.com/jobs","http://chuansong.me/n/1427418552860","https://github.com/soyaine/JavaScript30","https://pjchender.blogspot.tw/2017/01/js30day1.html","https://buzzorange.com/techorange/2016/10/25/2016-programming-language/","https://softnshare.wordpress.com/2016/05/02/轉載-前端設計師工程師的職缺要如何寫/","https://noootown.wordpress.com/2016/03/23/frontend-backend-breakfast/","https://hahow.in/courses/56c1e3b3e91d590900234105","http://www.slideshare.net/l443018/frontend-resource-intergration-and-sharing-modern-web-2016-review?qid=bfbb958a-0276-431a-a18f-15e409fec195&v=&b=&from_search=8","http://ithelp.ithome.com.tw/articles/10184581","https://www.facebook.com/groups/f2e.tw/?fref=ts","http://blog.miniasp.com/post/2016/02/02/JavaScript-novice-advice-and-learning-resources.aspx","http://kimix.name/如何成為前端工程師/","https://zh-tw.facebook.com/notes/lock-chou/譯為什麼我們找不到前端工程師/10152095506555563/","http://denny.qollie.com/2016/07/30/front-end-career-job/","https://noootown.wordpress.com/category/前端連載/","https://blog.alphacamp.co/2016/01/14/how-to-become-a-startup-ui-rockstar/","http://ithelp.ithome.com.tw/articles/10186104","https://cn.vuejs.org/v2/guide/","http://blog.techbridge.cc/2016/04/04/react-react-native-es5-es6-cheat-sheet/","https://resourcecards.com","https://ihower.tw/rails/intro.html","https://www.lynda.com/Web-Foundations-tutorials/Front-end-design/158666/158685-4.html","http://csscoke.com/","https://medium.freecodecamp.com/a-study-plan-to-cure-javascript-fatigue-8ad3a54f2eb1#.wu9jhhrvi","http://blog.techbridge.cc/2016/07/23/progressive-web-app/","http://ithelp.ithome.com.tw/articles/10186198"],"app":"steemit/0.1","format":"html"}
created2017-01-28 13:28:06
last_update2017-01-28 13:28:06
depth0
children6
last_payout2017-02-28 16:11:21
cashout_time1969-12-31 23:59:59
total_payout_value6.471 HBD
curator_payout_value1.610 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length6,470
author_reputation2,813,881,534,367
root_title"自學 | Self Study _v 0.2.2 | 前端工程師 (Front-End developers) 初探"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd0
post_id2,364,851
net_rshares32,254,346,602,494
author_curate_reward""
vote details (61)
@hpshin · 
學習資源多到眼花花@3@
properties (22)
authorhpshin
permlinkre-snailpjw-or-self-study-v-0-2-2-or-front-end-developers-20170128t133921260z
categorycn
json_metadata{"tags":["cn"],"app":"steemit/0.1"}
created2017-01-28 13:39:21
last_update2017-01-28 13:39:21
depth1
children1
last_payout2017-02-28 16:11:21
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length12
author_reputation1,042,657,113
root_title"自學 | Self Study _v 0.2.2 | 前端工程師 (Front-End developers) 初探"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id2,364,917
net_rshares0
@snailpjw · 
嗨~花花!
properties (22)
authorsnailpjw
permlinkre-hpshin-re-snailpjw-or-self-study-v-0-2-2-or-front-end-developers-20170128t134013458z
categorycn
json_metadata{"tags":["cn"],"app":"steemit/0.1"}
created2017-01-28 13:40:15
last_update2017-01-28 13:40:15
depth2
children0
last_payout2017-02-28 16:11:21
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length5
author_reputation2,813,881,534,367
root_title"自學 | Self Study _v 0.2.2 | 前端工程師 (Front-End developers) 初探"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id2,364,920
net_rshares0
@steemitboard · 
Congratulations @snailpjw! You have completed some achievement on Steemit and have been rewarded with new badge(s) :

[![](https://steemitimages.com/70x80/http://steemitboard.com/notifications/firstcommented.png)](http://steemitboard.com/@snailpjw) You got a First Reply

Click on any badge to view your own Board of Honnor on SteemitBoard.
For more information about SteemitBoard, click [here](https://steemit.com/@steemitboard)

If you no longer want to receive notifications, reply to this comment with the word `STOP`

By upvoting this notification, you can help all Steemit users. Learn how [here](https://steemit.com/steemitboard/@steemitboard/http-i-cubeupload-com-7ciqeo-png)!
properties (22)
authorsteemitboard
permlinksteemitboard-notify-snailpjw-20170620t234724000z
categorycn
json_metadata{"image":["https://steemitboard.com/img/notifications.png"]}
created2017-06-20 21:47:42
last_update2017-06-20 21:47:42
depth1
children0
last_payout2017-06-27 21:47:42
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length684
author_reputation38,975,615,169,260
root_title"自學 | Self Study _v 0.2.2 | 前端工程師 (Front-End developers) 初探"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id5,413,423
net_rshares0
@steemitboard · 
Congratulations @snailpjw! You have received a personal award!

[![](https://steemitimages.com/70x70/http://steemitboard.com/@snailpjw/birthday1.png)](http://steemitboard.com/@snailpjw)  Happy Birthday - 1 Year on Steemit Happy Birthday - 1 Year on Steemit
Click on the badge to view your own Board of Honor on SteemitBoard.

> By upvoting this notification, you can help all Steemit users. Learn how [here](https://steemit.com/steemitboard/@steemitboard/http-i-cubeupload-com-7ciqeo-png)!
properties (22)
authorsteemitboard
permlinksteemitboard-notify-snailpjw-20171205t142459000z
categorycn
json_metadata{"image":["https://steemitboard.com/img/notifications.png"]}
created2017-12-05 14:24:57
last_update2017-12-05 14:24:57
depth1
children0
last_payout2017-12-12 14:24:57
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length489
author_reputation38,975,615,169,260
root_title"自學 | Self Study _v 0.2.2 | 前端工程師 (Front-End developers) 初探"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id22,466,962
net_rshares0
@steemitboard · 
Congratulations @snailpjw! You received a personal award!

<table><tr><td>https://steemitimages.com/70x70/http://steemitboard.com/@snailpjw/birthday2.png</td><td>2 Years on Steemit</td></tr></table>

<sub>_[Click here to view your Board of Honor](https://steemitboard.com/@snailpjw)_</sub>


**Do not miss the last post from @steemitboard:**
<table><tr><td><a href="https://steemit.com/steemitboard/@steemitboard/5jrq2c-steemitboard-saint-nicholas-day"><img src="https://steemitimages.com/64x128/http://i.cubeupload.com/mGo2Zd.png"></a></td><td><a href="https://steemit.com/steemitboard/@steemitboard/5jrq2c-steemitboard-saint-nicholas-day">Saint Nicholas challenge for good boys and girls</a></td></tr></table>

> Support [SteemitBoard's project](https://steemit.com/@steemitboard)! **[Vote for its witness](https://v2.steemconnect.com/sign/account-witness-vote?witness=steemitboard&approve=1)** and **get one more award**!
properties (22)
authorsteemitboard
permlinksteemitboard-notify-snailpjw-20181203t102227000z
categorycn
json_metadata{"image":["https://steemitboard.com/img/notify.png"]}
created2018-12-03 10:22:27
last_update2018-12-03 10:22:27
depth1
children0
last_payout2018-12-10 10:22:27
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length924
author_reputation38,975,615,169,260
root_title"自學 | Self Study _v 0.2.2 | 前端工程師 (Front-End developers) 初探"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id76,286,217
net_rshares0
@steemitboard · 
Congratulations @snailpjw! You received a personal award!

<table><tr><td>https://steemitimages.com/70x70/http://steemitboard.com/@snailpjw/birthday3.png</td><td>Happy Birthday! - You are on the Steem blockchain for 3 years!</td></tr></table>

<sub>_You can view [your badges on your Steem Board](https://steemitboard.com/@snailpjw) and compare to others on the [Steem Ranking](https://steemitboard.com/ranking/index.php?name=snailpjw)_</sub>


###### [Vote for @Steemitboard as a witness](https://v2.steemconnect.com/sign/account-witness-vote?witness=steemitboard&approve=1) to get one more award and increased upvotes!
properties (22)
authorsteemitboard
permlinksteemitboard-notify-snailpjw-20191203t101957000z
categorycn
json_metadata{"image":["https://steemitboard.com/img/notify.png"]}
created2019-12-03 10:19:57
last_update2019-12-03 10:19:57
depth1
children0
last_payout2019-12-10 10:19:57
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length620
author_reputation38,975,615,169,260
root_title"自學 | Self Study _v 0.2.2 | 前端工程師 (Front-End developers) 初探"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id93,068,316
net_rshares0
Help/Feedback