為什麼這篇CSS 跑版鄉民發文收入到精華區:因為在CSS 跑版這個討論話題中,有許多相關的文章在討論,這篇最有參考價值!作者allqooxx (BIKU)看板Soft_Job標題[心得] 前端入門心得時間Tue Jan ...
CSS 跑版 在 NeKo嗚喵 Instagram 的精選貼文
2020-04-28 02:09:36
[上班日常] 同事兼老師的Amber特訓css 重點如下 1.要幫程式換一個跟我一樣大的螢幕,這樣就看不出來我跑版了 2.我們寫html就是在追求一個什麼都沒寫的概念 3.只要會飄移了我就得到全世界!!!!!!!!! 快來人陪我去藤原豆腐店!!!!!!! #css #網頁設計 #妳到底有沒有認真上課...
Hi 大家,
最近在整理網頁前端學習的心得,
想著從 soft_job 版上得到很多東西,
至少在迷失方向的時候這裡都會有人把你罵醒。
現在把這篇回饋給版上,
希望能幫助到對前端或軟體工作有興趣,
卻又不太知道從何開始的人。
網誌好讀版:http://abalone0204.github.io/2016/01/18/way-to-fed/
我的前端工程師之路
- 「這個畫面幫我稍微調一下應該沒有很難吧?」
先簡介一下自己背景:
1. 非資工資科資管系(也就是所謂的非本科系)
2. 興趣使然的前端工程師,擅長一鍵跑版
3. 學習時間:一年半(從林先生口中的碼盲到現在終於可以改一些 code)
4. 稍微熟一點的技能: JavaScript, CSS, html, React.js
5. 預計未來要學的東西:Haskell, golang, Angular(2.0), Rx.js
6. 總之這篇就是來介紹一下我是怎麼慢慢上手這個職業,
中間會提到一些我覺得很棒的學習資源,和吸收新知的方式。
7. 先講結論的話,我覺得碼天狗是目前看到很棒的資源,
禮拜一都會很焦慮的一直按重新整理
http://weekly.codetengu.com/
------
Get started
其實我本來立志成為一個 Data Scientist ,
只是不小心被擺到前端的位置上去......
回顧這一年半的旅程,前端的東西真的太多太雜了,
更容易完全只知其然而不知其所以然的就開始用某個新框架、library,
所以對我來說,「學什麼」是副課題,「不學什麼」才是真正的關鍵。
------
因為我前端工程師的路還沒走完,
所以應該在我退休或換職業(去賣雞排)之前,
都會繼續寫下去。
目前寫完三點,主要都是我剛開始工作時最常有的疑問:
1. 非本科系 v.s 本科系
2. 從哪裡開始學習?
3. 前端工程師該懂後端嗎?
------
1. 非本科系 v.s 本科系
就來說說「本科系」來到底有沒有差。
首先,我們都知道學校裡的課程,
很少是真的專注在所謂「前端工程」上;
這是可以理解的,因為前端變化太快,
學期初才在說好棒棒的東西,
到了學期末可能就變 deprecated了。
所以這就代表非本科系跟本科系的人站在相同的學習立足點上了嗎?
No,你得面對現實,本科生就是有他的優勢在。
這裏要講個實習的故事。
我第一間去實習的新創公司,應徵的是行銷,
CEO 是個自己學習 JavaScript 並且把產品做出來的人,
更重要的是他是個很願意教的人,
在我表示我想朝這方向前進的意願時,
他很大方的說:「如果你對 JavaScript 有興趣可以教你。」
當時還有另一位是資管系的同學也一起,
第一次的作業是用 Angular 做表單的驗證,
怎麼讓使用者不能繼續輸入資料呢?
(當時的我連 JavaScript、html 都不會寫)
我的做法是非常土炮的將 input 換成 div 然後加上紅色的邊框,
另一位實習生則是使用了 disabled 這個 property,就搞定了。
講起來也沒什麼了不起的技巧,但不知道就是不知道。
我問他怎麼會知道有 disabled 這個特性,
他的回答也很簡單:
「查文件啊!」
也是這次教訓,我知道要先查文件。
http://imgur.com/B8wms6V
講起來蠻白癡,
不過會上 stackoverflow 和 google 找答案和看官方文件,
都是最基本的能力。
為什麼他會知道?
很簡單,因為平常他們在寫作業或作專題就需要這個能力。
既然我們遇到不會的字會查字典,
那為什麼我們寫軟體遇到問題時,不需要讀 doc 呢?
而對於整個電腦的理解,非本科系的人絕對也是被甩在幾條街之外,
因為我們不需要修資料結構、演算法,
更別說對於資料庫,
作業系統、計算機結構、計算機組織、編譯器理解的淺薄,
一定要掌握上述這些知識才能寫前端嗎?
這是一個很大的疑問;
但一個了解底下發生什麼事情的人,才會更知道極限在哪裏,
這個絕對是肯定的。
有時候你寫程式時會卡在一個小小的點,想出來之後覺得沒什麼,
而本科系的人能從以前上述課程中的經驗去延伸,
(不管是演算法或是系統相關的事情)
比你更快速得到答案。
畢竟,人家花了那麼多時間了解電腦,
你如果不是天縱英才,要比他們理解電腦就得更努力跟上才行。
這裏推薦一個很棒的課程,nand2tetris:
http://www.nand2tetris.org/
上面有很詳細的指示,如果你需要影片和評分系統的話,
coursera 上也有開課了:https://www.coursera.org/course/nand2tetris1。
這門課會從最基本的 nand(not and) 邏輯閘開始講起,
用模擬器組合出自己的 CPU、記憶體,定義自己的組合語言,
用習慣的程式語言寫出組譯器,
再寫出一個超簡易版的 JVM,最後用一個簡化過後的 Java 語言(真的超簡化),
寫出一個俄羅斯方塊來。
整台電腦、軟體,都是由你一手寫出來的,不覺得很熱血嗎?
而且你終於也能夠看懂這張圖的笑點在哪了:
https://media.giphy.com/media/3oEdv6pGyOH00ZiRH2/giphy.gif
當然,如果你在學習途中發現你對系統的東西很有興趣,
那也恭喜你發現新天地啦!
想當初為了所謂堅實的基礎,還跑去圖書館借白算盤來啃,
那又是另一個故事了。
總結一下這一段,
前端工程師也是軟體工程師,
對電腦一無所知的人寫出來的軟體,你敢用嗎?
我認為至少玩過一輪 nand2tetris 對於非本科系的人會相當有幫助,
本科系的人來寫前端確實是有一點優勢在,
但這不是認輸的藉口,
而是你必須比別人更努力找方法變強的原因。
另外,
千萬不要以為念研究所的人是只會讀書的書呆子,
比你聰明、比你努力,又比你勇敢的人永遠都多的是。
------
2. 從哪裡開始學習?
先來說說「單純」的前端從哪裡開始,
主要分成兩塊:
第一塊是 html 和 CSS:
我以前學習 html 和 CSS 的方法就是把 w3schools 上面的東西看完......
http://www.w3schools.com/
不能說有什麼不好,不過真的是看完大部分都忘記,
畢竟很多東西都馬是要用到的時候再去查。
但現在我會推薦 codecademy:
https://www.codecademy.com/
邊寫點東西邊學絕對是很有效的學習方式。
而學會基礎後,
要怎麼設計出好維護又乾淨的 html and CSS 那又是另一個很長的故事。
第二塊則是 JavaScript:
坦白說一年半過去,我仍然認為自己在 JavaScript 的知識上很貧瘠。
這裏有篇 10 個面試時應該要知道的問題:https://goo.gl/I4fN89
可以探一下自己到底對 JavaScript 理解多少。
這裏如果把教學全部列出來,真的是完全列不完,
但學習的流程是這樣子:
- 掌握了基礎的語法和原則
- 實作練習
- 回頭研究基礎再繼續實作
- 重複以上循環不斷的把你的武器磨的更亮
至於掌握基礎的語法,你可以到以下任一網站,
挑一個你喜歡的,上完基礎 JavaScript 課程:
- treehouse: https://teamtreehouse.com/
- code school: https://www.codeschool.com/
- egghead.io: https://egghead.io/
練習一段時間後,你會發現又有好多新工具冒出來了,
這時候你可以先辦個 github 帳號,
首先 watch awesome 這個 repo:
https://github.com/sindresorhus/awesome
看一下你喜歡的領域有沒有啥好東西。
再挑幾個你最有興趣的 repo 按下 watch,
最後再開始訂閱各大框架或社群的 weekly,
接著就是準備被源源不絕的資訊轟炸、不斷的學習和升級。
而值得一提的是, JavaScript 有很多工具可以用,
不管是 library 還是 framework,
學習之前,真的必須想一想:
「你真的需要用它嗎?」
舉例來說:
React 的確相當的好用,
但是你的畫面真的有那麼多 state 要處理嗎?
有些人簡單的認為 SPA(Single Page Application)就要用 React,
我得說不一定,假如根本沒有那麼複雜,
也許你只是需要一個 template engine 而已,
而把 React 當作 html 的 template 來用,
實在是有點太小看它了。
什麼時候該用 React 或是 React 到底好在哪裏,
這個議題其實已經超出了本篇文章的範圍,
有興趣的可以看這篇:
React Components, Elements, and Instances by Dan Abramov (Redux 作者)
https://goo.gl/NvpwpN
這也是為什麼我一直遲遲沒有碰 Angular 的原因,
(因為我還沒遇過複雜到需要用到它的情境)
但我認為在選擇前端的框架時,這篇文章很值得一看再看:
界面之下:還原真實的MV*模式:
https://github.com/livoras/blog/issues/11
裡面並沒有太多的程式碼,只有比較 high level 的概念,
但看完你會比較理解別人說 MVC、MVP、MVVM、Model 2 是在說些什麼,
前端主要工作之一就是處理使用者介面(UI),
我認為理解這些模式是一個前端工程師必備的 common sense,
這些概念比起淘汰迅速的工具們,是比較能夠保值的,
並且也會漸漸影響你挑選工具的眼光。
而 medium 上也有許多好文章可以看,
twitter 上面也有很多大神可以讓你追蹤,
不要把這些事情當作是在大拜拜,
覺得追蹤越多人自己越屌,
重要的是你看他們生產的內容時得到了什麼。
另外臉書上的前端社團也很值得加入,台灣人的軟體能力是很強悍的:
- Front-End Developers Taiwan:
https://www.facebook.com/groups/f2e.tw
- AngularJS.tw:
https://www.facebook.com/groups/augularjs.tw
- ReactJS.tw:
https://www.facebook.com/groups/reactjs.tw
- JavaScript.tw
https://www.facebook.com/groups/javascript.tw
重要的是在上面發問,也會有人很熱心的回答你。
假如這樣都還是讓你資訊焦慮,可以開始訂閱一些技術週刊,
像是碼天狗:http://weekly.codetengu.com/
TechBridge:http://weekly.techbridge.cc/
讓 curators 來幫你整理一些技術上的新知。
已經盡量精簡了資訊來源,希望能讓新手們不要太無所適從。
------
3. 前端工程師該懂後端嗎?
後端跟前端是完全不一樣的專業,
有人說 Node.js 能讓前端工程師跨足到後端去。
(Isomorphic?)
事實上前端工程師想往後端走還是有許多需要學習的,
不管是資料庫或是系統面,都不是平常前端會碰觸到的領域,
認為自己會寫 JavaScript 就硬上的下場通常是:
- 效能有問題
- 資安有問題
- 整個 server side 的 code 都他媽很有問題
聽起來是很糟糕的事情,所以請千萬尊重專業,
讓我們前端歸前端、政治歸政治(欸?)。
那前端到底要理解後端到怎樣的程度呢?
這是一個很 tricky 的問題,
大部份人會說:「至少要會接資料啦!」
但要學到會接資料揪竟是需要怎樣的能力呢?
真的有人學到剛剛好就喊停的嗎?
最好的方法其實就是自己去玩一套網頁框架,
後端前端都寫一遍。
Rails, Laravel, Django 都是我認為不錯的選擇,
(Koa 也很不錯啦......)
重點是去感受一下自己要怎樣設計 DB 的 Schema,
怎樣做正規化、怎樣避免 N+1 Query,
以及整個框架的架構為什麼要這樣設計,
最後再跟自己拉的頁面整合在一起,然後部署上去,
(用 heroku 是有點偷懶,不過如果你對 server 真的沒興趣,還是可以考慮這樣做沒差)
等做到這一步,「至少要會接資料」這一點,
早就迎刃而解了。
對了,
記得也不要因為自己寫過後端的 code 就說自己是 full-stack,
這就跟你會收發 email 就說自己懂電腦一樣會被笑。
(IT crowd 真的是個不錯的影集)
有興趣可以看看這篇:
一個前端工程師眼中的 Node.js: http://goo.gl/lTB8e
可以略懂 Async 在 server 端和 client 端的差異。
------
目前大概走到這裡,還有很多沒說到,
但學個基礎開始實作後就能體會到許多了。
至於實作,
可以選擇自己寫個身體健康、參與 open source,
或是去實習都是非常好的選擇
不管是 RWD、mobile web、跨瀏覽器的處理、SEO,
動畫該用 CSS3 或是 JavaScript 還是 SVG?
每天都有新的問題可以鑽研,
目前就先寫到這裡啦!
希望可以改變一些覺得前端工程師只是在切切版的想法,
(有時候光是切切版其實就很要命了)
也希望能幫助到想往前端工程師邁進的人。
謝謝大家!
--
Re: [求助] 男女共處一室?
假設有一男 a 及一女 b
他們單獨共處一室 alone
abalone = 鮑魚
--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 1.162.60.75
※ 文章網址: https://www.ptt.cc/bbs/Soft_Job/M.1453137664.A.52D.html
其實跟一般本科生找工作沒什麼差別,
就是履歷寫好、說明自己會什麼,
但你參與過哪些專案會變得更重要,
要讓人家知道你雖然沒有學歷加值,
學習速度以及能力仍然值得信賴 :D
http://imgur.com/CadaUfD
已更正。
「所有」也太猛了吧!
我的意思其實是本科在寫作業時「通常」都會需要查文件啦!
http://imgur.com/B8wms6V
只要先確定以後維護的人不是自己(誤
真的被問了!XDDDD
這個很難有什麼祕訣欸 XDD
總之多切、多看、多溝通。
有時候並不單純是前端工程師的問題,
所以要常跟設計師溝通哪樣子的版會比較好切,
另外就是你可能會做怎樣的折衷也要讓他知道,
因為今天並不是說 mockup 畫出來這樣,
那就百分之百 pixel perfect 長這樣,
正常情況下都會有進度壓力,不太可能有時間追求這件事。
(當然這還是得看情況啦)
所以在你做了什麼更動時,
讓設計師知道發生了什麼事,你不是有意要改變它的設計,
而是你做了一點折衷。
尊重他人的專業:D 別人才會尊重你。
1. 為什麼要學 Angular
有一說是 React 是 library,Angular 是 framework,
我喜歡更輕量單純的、彈性更高一些。
(但這一定有偏見,因為我根本不夠瞭解 Angular)
反過來說,使用 React 也不一定要啥架構,
為什麼想要學 Angular 2 的原因很簡單,
因為 Angular 火紅的時候我才剛學 JavaScript,
最近觀察一陣子後覺得可以直接學 2。
至於學完會有什麼幫助?
學習 Angular 能讓我從不同的角度來看待前端的開發吧!
2. React 對於平時的開發有何幫助?
簡單說就是不用自己去手動處理 UI 的狀態,
反正 props 傳下來,一律重繪就對了!
(至於有沒有真的重繪那就是 React 神奇的地方了)
這裏有篇自己手刻 Virtual DOM 的教學:
https://github.com/livoras/blog/issues/13
除此之外,因為資料流向很單純的關係,
出錯的時候更容易去 trace,
這點搭配 Redux之類的單向資料流架構,好處會更明顯。
(我沒有學 Flux,因為我覺得 Redux 看起來比較順眼......)
大概是這樣吧!
3. 為什麼想學 Haskell, Rx.js, golang?
雖然你沒問,
不過也把為什麼想學 Haskell、Rx.js、golang 講一講。
首先是 Function 在 JavaScript 裡面是一等公民,
很多好的實現都是靠函數做到的,
舉例像是平常寫到 Curry function 的頻率也很高,
原因就是因為它能讓 code 變得好讀又好預測會發生什麼事情,
更能藉由函數的組合減少重複的程式碼
當然如果時程一趕起來還是得摸摸鼻子先寫髒髒的 code,
然後在最上面寫下一句謊話:Todo: Refactor。
Rx.js 的 Observable 給了你完全不同的方式去思考 event。
(對不起,我真的不喜歡 Promise,是一個不想給承諾的男人唉)
而 Haskell 則是一門純函數語言,
去年因為教授的關係開始接觸到這門語言,
(推薦Real world Haskell,雖然買了一直沒時間看)
「純函數」真的給了你一個完全不同的角度看世界。
我覺得這裡我知道得太淺薄,
可以看一下良葛格對函數式程式的理解會比較清晰一點:
http://www.ithome.com.tw/voice/92652
Golang 則是因為我很喜歡它 interface 的概念,
而且也想要選擇一門後端語言去熟悉,
蠻單純的。
我的確弄錯了,
已把 two-way binding 那段刪除掉。
為什麼會說後端開發人員會比較熟悉 Angular 的寫法呢?
Btw, 能點出我一開始就想錯的地方很感謝你,
但思考方式不一樣就是我認為它值得我學習的原因,
所以儘管我現在只是個會從 React 角度思考的前端,
我仍然認為 Angular 2 很值得投資時間學習。
但是如果你今天要問我太多 Angular 的細節,
我真的只能邊 google 邊想辦法回答你,
沒辦法給你你心目中滿意的答案
就像內文說的一樣,
我是打算要學,而不是已經學會了呀!
QQ 大大
很大一部分真的是出於好奇吧 XD
我覺得在這領域自己真的像小嬰兒一樣什麼都不知道。
如果在 Angular 學習上遇到問題希望也不吝賜教了 XD
其實我也很好奇最後你選擇 Angular 的原因是什麼
(不小心也看到你的部落格現在入坑了,哈哈)
可以私信水球聊聊!