Re: [請益] 菜鳥自學前端障礙,請求大神開示

[doomdied (Died)]

※ 引述《Lucya (我是男的..)》之銘言：
: 小弟目前html css js jquery的基礎書都有看過了
: 有看過前端資源懶人包
: https://goo.gl/WoCY6h
: 裡面的東西實在很多,
: 不知道方向改往哪
: 目前只要是基礎的書給我,
: 打開基本的書7~8成的內容都懂再說什麼
: 不知道接下來該怎麼走..
: 丟一個網站給我,要我刻出來我沒有辦法
: 而現在是照著一本書 叫做"CSS 你不可不知道的400範例"
: 每一個程式碼都嘗試做一次
: 裡面其中一個大概長這樣
: https://codepen.io/anon/pen/MVpXoR

先說我不是前端工程師

個人認為這年頭學資訊的東西，除非你還是學生在上課
不然看書學都趕不上時代的變化，直接看官方文件然後看範例，實作
這是我認為最實際的方式，當然有個缺點就是沒做過的就可能不會
不過現在的技術發展太快太多，不可能有人可以都懂，這缺點我個人可以接受

看起來你的情況是有東西照做可以做，但沒辦法從抽象的概念轉成實體
換句話說就是給需求要實作可能有困難，就像你說的給你一個網站無法刻出來
其實這個問題可以靠多練習實作去改善，大致上有幾個步驟可以走

1.細節修改：實務上很常見
以你的例子來說，:hover bar的顏色你是用亂數產生
今天要改成亂數的固定顏色，或是改成指定某些顏色組合，你要怎麼做 ?
或是hover的transition效果要修改，你可以自己想幾個方向去改，試著做到
你可以自己想需求給你自己做，一方面掌握這些東西
一方面這也是實務上你會遇到的需求修改，只是你自己想需求而已

2.掌握package：肯定會遇到
這年頭大部分前端都是靠各種package堆起來，你看到一個新的package
你可以多快看懂，掌握，運用到自己的東西上 ?
舉個例子，前幾天我在hackernews上看到rough.js
https://github.com/pshihn/rough (我star的時候才不到100，現在已經6k+...)

我試了一下，參考他範例用D3套了個台灣地圖
https://died.github.io/tw-map.html
因為我也沒用過D3.js，加上又是用v4語法跟網路上大多範例不同
所以花了點時間才做出來，但這水準太低了還不足以當作品集

https://roughjs.com/examples/contributed/balloon-animation.html
大概要到這樣的demo才比較可以當作品，雖然技術不是很複雜
但對於不懂的人會感到不明覺厲

https://www.aria.ai/snake.html
如果可以做到這樣就很能在面試加分了XD
(上面兩個作品都是網友給rough.js demo用的)

3.具體實作：總是會遇到的
東西做多之後，你可以具體想個你想呈現的東西，避開後段，只用前端做出來
舉例來說，你可以找個open data的資料來源，拉這些資料組出你要的頁面
找自己有興趣的做可以更投入，比如現在花蓮捐款正夯
你可以找產業分析、營業額、繳稅...等資料，去分析企業補助合理性
(data visualization正夯)
或是現在虛擬貨幣蠻熱的，也有很多api資料可以拉，拿來做個整理或分析
這些都是前端可能會做的

上面講的都是小型或是單一的需求，實際上還是會有從無到有做個站的情況
不過那個從需求訪談到wireframe到刻css跟js功能等等，不是沒經驗空想就能搞定
我覺得你多做些作品，然後進公司累積經驗就會對這個比較有想法了

差不多就是這樣，順便給個建議
目前我看head hunter的需求，台灣前端缺的framework
前三依序是 react > angular > vue
好好選擇可以增加面試機會XD

其實我認為寫coding的重點在於解決問題的能力跟掌握技術的速度
其他都比較其次，當然這年頭很會說的都比較吃香啦....

--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 36.229.141.242
※ 文章網址: https://www.ptt.cc/bbs/Soft_Job/M.1521634233.A.471.html
推 dsilver: 那star速度也太誇張了吧
推 paint: 裏面好幾個範例也太神了吧
→ doomdied: 我有看到拿來做小畫家的，很神XD
推 Lucya: 小弟萬分感謝你的長篇回復Orz
→ Lucya: 第一眼看完的想法是很多名詞不太懂
→ Lucya: 例如像是 package.open data的資料來源 這些目前都還沒有
舉例來說好了，政府資料開放平台 https://data.gov.tw
你要怎麼運用這些資料做出一個user friendly的頁面，讓人更好的獲得資訊 ?

像這個上網速率 https://data.gov.tw/dataset/8258
資料結構很簡單，你要怎麼去呈現 ?

假設上面有個桃園市停車場車位資料 https://data.gov.tw/dataset/25940
說明是寫說即時更新，但實際上他給的連結只是下載json，你要怎麼解決這問題 ?
(我找了一下是要到桃園市政府才找的到api url，政府網站水準，呵呵)
這兩個資料都跟地圖相關，但呈現手法不同，你要怎麼做 ?
遇到問題，了解問題，解決問題，就會從中學到東西(應該啦
→ Lucya: 看過,我會再研究的.
→ doomdied: 找資料是工程師的基本功啊XD
※ 編輯: doomdied (36.229.141.242), 03/21/2018 21:17:12
推 abccbaandy: 新手不太推政府資料開放平台，滿多坑的...
推 lininu: 推這篇，滿中肯的XD...
→ doomdied: 政府資料開放平台就是很爛，才能順便練功(誤
推 death5903: 感謝原PO讓我認識到rough.js 我也寫出了自己的貪食蛇
→ death5903: https://death5903.github.io/greedsnake/greedsnake/
推 SACkings55: 好文學習了