點點滴滴

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

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

網頁 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!

共勉。

[點點滴滴] 寫網頁,很難嗎? 有 “ 16 則迴響 ”

  1. 但我覺得有心就不會放棄!!!
    像剛開始我做網也,我css根本排不了版…
    google了上千遍,才會知道怎麼做(真的XD
    現在我轉寫php,做了簡單的計算機,留言板,資料機… 但是這些都要用MySQL啦(除了計算機OuO
    反正做了就知道了!!!
    p.s. Javascript真的好難…

    ———————————————–我是分隔線—————————————————–
    上面那個lionel823,HTML是一個語言歐!!!
    你去查他的全文,HyperText Makeup Lauguage,其中Lauguage就是語言啊XD

  2. 1000 行的CSS,JS 原始碼 的困難,CSS 跟 JS 也一堆框架,還有 Nodejs 出來亂……
    作者大大提到的幾個點都講到我們心坎裡了QQQQ
    自學點前端東西,跨了 BS , Semantic-ui , jQuery , React ,然後跑去搞後端,學了點SQL,搞了點 Laravel , ASP.Net ,算一算又幾個月過去了,網頁之路真是漫長Q

  3. 最近想開始接觸網頁設計這一塊,現在都只有在codecademy碰過一些html和css,想請問買一本書參考會比較有幫助?目前只有在網路上看教學或其他人的作品,很想跟大大一樣能自學有成果。

  4. 身為半路出家的網頁設計,我非常認同你的看法…
    我目前也還在跟javascript奮鬥…
    但多虧了各種專案,html、css算有點上手。
    一起Never give up!

  5. 我覺得, 真正讓工程師一波一波離開"寫網頁"崗位的原因, 是薪水太少, 寫網頁的進入門檻太低了, 不必有什麼資訊背景的人自學都可以上手, 雖然偶爾有些大師級的高手, 但絕大部分都是普普, 而且網頁的原始碼是開放的, 好看的排板或架構大家抄來抄去.
    網頁和App不是一個層次的, 你會覺得App簡單, 是因為你只寫簡單的App. 舉個例子, 讀取兩個解析度不相同的鏡頭的影像, 做疊合, 這種對硬體和OpenGLES的操控, 就不是網頁可以做的了, 去年我還被 React-Native 荼毒了三個月之後放棄.
    真正有實力的工程師, 會往底層或後端鑽研, 人少的路, 風景最美, 寫網頁除非自己創業或接案, 不然很快就被新一代工程師所取代, 我今天會來逛"寫網頁"的網站, 不是我自己想學, 而是想教我兒子寫網頁, 而他才小學六年級, 他在小學一年級就會寫C語言控製單晶片, 讓七段顯示器秀出自己的身分證字號, 小學四年級寫出用紅外線追踪黑色膠帶的循跡自走車, 剛剛結束的寒假, 他用Python寫了結合語音辨識,語意分析,網路爬蟲,文字轉語音的AI對話機器人, 過去10年來, 高中生會寫網頁已經比比皆是, 在職場上會寫網頁有什麼競爭力呢? 玩玩就好.

發表迴響

Please log in using one of these methods to post your comment:

WordPress.com 標誌

您的留言將使用 WordPress.com 帳號。 登出 /  變更 )

Google photo

您的留言將使用 Google 帳號。 登出 /  變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 登出 /  變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 登出 /  變更 )

連結到 %s