點點滴滴

[點點滴滴] 寫網頁,很難嗎?

回想起來,從開始寫網頁到現在,已經過了一年了。在這一年內,不敢說網頁寫得很好,但至少體驗過這個過程。加上很多人一直詢問我寫網頁的相關知識,所以我決定寫一篇文章,讓大家知道,也順便記錄一下,這一年來寫網頁的困難、辛酸和樂趣。

網頁 vs app,誰難?

我想懂app又懂網頁的人,87%會說網頁,不能再高了。

我最開始接觸程式,是在高一的時候。但直到高二升高三的暑假,我才知道迴圈,以及物件導向的一些基本概念。而開發一支可以動的軟體,則是在高三升大一的暑假。那個暑假,我買了三本書,自學Android,一個月後,我上架了第一支app。

開學後,我幫社團寫了一支簡單藍芽傳輸的app,又加入了另一個團隊,幫忙寫前端排版和一些邏輯。而大一升二的暑假,我跑去竹科打工,做的是 android 的開發。又一年後的今天,我已不再寫app了,但我發現身邊很多人,都能在課堂的project,做出一支簡單的app來demo。至於網頁demo呢?少之又少。

在這一年內,我沒有每天都泡在 Android 上面,只有需要的時候,我才去查才去看。即便如此,我還是能獨立弄出一個完整的app,然後拿著這些app去面試,跑去竹科打工。

此外,為什麼我要特別標亮「一個月後」?那是因為比起網頁,app真的特別的簡單。寫完app,放在手機上操作即可,不需要考慮很多複雜的情況。普遍較為麻煩的點, Android 要考慮的頂多只是螢幕大小不同,而在Ios上,這個可能性又大幅降低。網頁呢?瀏覽器不同要考慮,螢幕大小,甚至手機上網也要考慮。當然還有其它的點,但我不打算在這裡細講。

為什麼你會想要寫網頁?

大部分的人包括我,都會說:「因為很酷很炫!」

因為網頁是最貼近我們的生活的,當我們滑到一個很有設計感的網頁,我們會不自覺得想多玩一下。接著就會思考,如果這個炫泡的網站的作者是我,別人一定會覺得我很酷,然後我就可以⋯⋯,還可以⋯⋯。於是,便抱著興奮的心情,開了codecademy練功,接著不到一個月後,就放棄了。

為什麼這麼快就放棄?

事實上,在我寫網頁的這一年中,已經聽過不少人跟我說過想學網頁,但是真正有成功做出個什麼的,不到1/3。如果把時間再拉長,我想這個比例只會更低。

跟 app 的 java 和 swift 比起來,寫網頁至少要懂3種程式語言,html、css、javascript。當然你也可以反駁我,說 html 不是一個語言,但不可否認的是,學寫網頁,你一定得懂這三樣東西。html 和 css 負責排版,javascript負責邏輯。

大多數人的第一支網頁,應該都是沒有 js 的。不過 html 和 css 就足夠消磨大多數人的意志。為什麼?我想要加一個底圖,怎麼加?查!我想要按鈕擺這裡,然後不會隨著滾輪動而不見,怎麼加?查!我想要這些東西都整齊排列,怎麼加?查!

以上這些動作來來回回個十次,大多數的人就會選擇離開了,更何況要寫好一個網頁的話,這動作得來來回回上百次,上千次。比起 app 的小螢幕,網頁有更大的揮灑空間,當然也就增加複雜度。做完一頁的排版,可能就兩三天過去了,剩下的人,算是特別有毅力的人。

javascript大魔王

js 是一個很好上手的語言,但也因為它富有彈性,使得新手常會對於 error,不知所措。最慘的是,因為 js 太有彈性了,有時甚至不跳出 error,網頁不動就是不動,直接死給你看,留著給有緣人去猜測錯的地方在哪裡。這時有什麼辦法?一樣,查!在查個上百次後,又有一部分的人離開了。

被 framework 踹了一腳

大多數的人最初所接觸的 js,並不是 js 的最本質,而是 jquery。jquery 把所有的東西都包好好,只要照著 call 就好,對於新手的 debug 能力,幾乎沒有幫助。有時必須寫 native js 時,各種哀嚎就來了。closure、call、apply、asynchrounous、this,都是其它語言所沒有的概念,此時又有一票人走了。

而css的部分也是。bootstrap 很好用,但要在 bootstrap 上客製化,就會遇到很多莫名奇妙的問題。是bootstrap的問題嗎?不是,是因為它本身就是設計成這樣。除非你得加各種 !important 蓋過去,不然就是自己寫純css。然而,自己刻純css的時候,便會變得不知所措。該從哪邊開始?id class該怎麼設定?該如何重複使用?尤其 css 又是一個不小心就會寫很多行的程式語言,面對1000行的css,該怎麼管理?此時又有一部分的人離開了。

還需要懂什麼?

可以到達這一步的人,應該自學能力也應該沒問題。但除了程式碼的部分,還是有很多東西是要懂的。例如:怎麼架一個server,怎麼用 github 和 git,怎麼用 terminal,怎麼設定編輯器,怎麼使用ftp⋯⋯。對於自學的人而言,每一件事都不是一件簡單速成的事。甚至一堆資工系的學生,對於上述這些事情,都不甚了解,遑論一般人。

此外,網頁不是只有前端的部分,還包括後端資料庫架設、API串接。這些包含 mysql、mongodb⋯等資料庫語法以及後端程式語言包含php, ruby on rails, nodejs⋯⋯,對學習而言,又是另一個負擔。

時間?

大多數的人,平常都是有外務在身的,有些要上課,有些要上班。即便是最閒的學生,可能每天也只有 5 6小時可以運用,還不包括得要寫其它作業,或陪男女朋友,還要幹麻幹麻的⋯⋯。對於磨練寫網頁的技能,時間根本不夠。1 2個月做不出炫泡的東西,得不到別人的稱讚,索性就放棄了。

資料爆炸性多,也爆炸性雜

這年頭,關於寫網頁的資料,可以說是像海一樣多,但是內容也一樣繁雜。搜一個bootstrap,會跑出各種 bootstrap 教程,這倒還好,至少是教程。但若不幸的點到 bootstrap vs semantic 這類比來比去的資料,那就會有麻煩了XD。這時大多數的人包括我,會迷茫於該選擇哪個來用,而不知所措。同樣的,其它問題也是一樣。在網頁的世界裡,從來都沒有最好的解法,只有最適合的解法,面對多種解法,大多數人會不知所措,進而原地踏步。

再來,選書的時候,看到架上琳琅滿目的書,再度眼花撩亂,不知道該怎麼辦。於是又無奈的走出書店。

我的打怪心路歷程

我的第一步,是開 codecademy 的範例,直接 trace 幾百行的 code。對於一般新手而言,這可能不是好的辦法,但當時的我是這麼做的。雖然我沒有完全看懂,但至少對於 javascript 有初步的認識。

接著,拿現成的東西下去改。改完現成的後,試著從0到100弄出一個類似的來,在這個過程會學到很多。然後便重複以下步驟,不斷的累積實力。

第一個專案,我改了上面 codecademy 的範例,做成了一張卡片。接著1個半月後,我做出了一個類似小畫家的東西。連結

半個月後,我開啟了另一個專案,做了一個酷炫的煙火,4個月後,這個專案被我中斷,包成了一個jquery plugin 釋出。現在回頭看,會發現 coding style 很爛,完全不想動。但唯有先爛過一次,才會知道好在哪裡。連結

這4個月的專案乍看冗長,但卻學了不少東西。包括 coding style、reactjs、自動化工具⋯⋯,都在這個專案一次弄懂。之後去面試的時候,有面試官問我:「你的第二個專案就用reactjs囉?」我笑笑的點了頭。

接著我又去接了案子,然後和案主合作到現在。又寫了自己的履歷,和幫學校諮商中心做了網頁投影片

此外,也開始寫部落格和粉專(工商一下XD),跟網友和友人交換想法和意見。

還有一些大大小小的嘗試和小專案,而這些事全部都在一年之內發生。

所以關於寫網頁,我可以做些什麼?

雖然寫網頁不是很簡單。但是還是有些方法可以照著做,對學習會有幫助。

  1. 挑一本「喜歡的書」就好,不必再乎它是不是最好,因為從來都不會有一本最好的書,只有最適合自己的書。
  2. 不用把書看完,實作最重要!
  3. 需要再學,不用想著一次全部學完,按部就班就好。事實上,網頁的世界太廣,也不可能全部學完。
  4. 開個部落格,寫一些自己的筆記。當有人來看的時候,彼此就可以交換些想法。
  5. 加入臉書相關社群,包括 f2e,javascript.tw、台中、高雄前端社群⋯⋯,和大家一起討論,然後提出一些問題。
  6. 找些案子或工作來做
  7. 幫系上寫個網頁
  8. 做一份自己的履歷
  9. 問問前輩的意見,虛心請教,多半會回答你
  10. 投幾間公司的面試
  11. 參加比賽
  12. 參加 conference
  13. 找到寫網頁的熱忱和動力

最後一點,也是最重要的一點,就是

Never give up!

共勉。

4 thoughts on “[點點滴滴] 寫網頁,很難嗎?

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / 變更 )

Twitter picture

You are commenting using your Twitter account. Log Out / 變更 )

Facebook照片

You are commenting using your Facebook account. Log Out / 變更 )

Google+ photo

You are commenting using your Google+ account. Log Out / 變更 )

連結到 %s