學寫網頁比你想像的困難

前言

算一算大概是第十個身邊朋友告訴我想學習網頁，但仍沒有成功自己寫出什麼。這件事情進入一個需要靜下來思考怎麼回事的狀況，而我下了一個從我自身經驗上得到的結論：「大家把寫網頁想的太簡單了」。

學寫網頁的現況

很多人都會有學習寫網頁的這個想法，與想法後續的實現是如何的呢？

想寫網頁的原因

網頁是現代人每天都在用東西，甚至超過一天超過數個小時，而偶爾我們會點到一些設計非常動人的網頁、看到朋友分享自己弄的網頁、又或是看到某機構或教材宣傳著學寫網頁有多容易，上述這些時候都可能讓一個人開始想學網頁。

開始想方法

接著可能出現以下幾種方式

1. 網路上找資料
2. 書店買書
3. 找課來上
4. 問會寫網頁的朋友

這時，若有不錯的寫程式背景的人，或本來就善於學習各種新知識的人，任何方法都能帶領著他最終寫出一些成品。然而，對於這塊陌生的人，其中「網路上找資料」其實是把事情搞的很複雜的開始，因為有太多相關資料，如Google回覆我的第一個連結是Mobile01的討論串，雖說資訊豐富，但反而像是資料爆炸的受害者。

然後，卡住

一樣，那些自學能力超強的人可能這時已經寫出幾個成品。而有心卻不得其門而入的人，可能還在選擇要看哪本書、要用哪個工具、在研究朋友講的到底是什麼意思。時間漸漸過去之後，「最近比較忙」、「我有看一點前面的東西，後來沒時間」之類的話就跑出來了，同時也代表學網頁這件事情並沒有像想像那樣。

我經歷的情況

2011年夏天，在Stanford我修了"Client-Side Internet Technologies"這一門課，也是我開始寫網頁的起點，兩個月的時間，從基本的版面設計、客戶端程式設計到遠端資料呼叫等都學得頗扎實。2015年春天，在CMU我修了Web Application跟Advanced Web Design兩門與網頁相關的課，做出來的成品有Bug Killer跟Tmate。至今我架設過的網頁應當超過30個。

於是，很多朋友會跟我說他們想學網頁，因為網頁在多數人的認知中是比較簡單的，我也盡我所能的提供我能幫助的地方，包含：

上Google或Product Hunt找好的網頁教學平台分享

若想自己寫Code的人，我則會分享W3CSchool的連結配合上Bootstrap的範例；而不想的人我則分享WordPress或甚至Blogger跟Tumblr。在我自己的經驗上，除非有特殊的版面或功能要求，不然既有的工具如WordPress等是最好的選擇。

自己寫學習綱要，包含學習內容、相關連結、範例等

對，我針對朋友願意花的時間，會列出一些步驟，如認識第一週HTML的標籤、第二週瞭解DOM架構等。然而我發現，若是有心的人其實不需要這樣的幫助，而這樣的幫助對於興趣不夠大但覺得網頁是簡單的人，也是沒有幫助的，因為最終仍是很難一步步走完。

在社團教寫網頁

2015年夏天，我在高中社團教學弟妹寫網頁，當時的教材在這個連結裡，因為是連續五天的Workshop，原本的Syllabus裡想要介紹到後端Node.js，然而實際上就只有教了HTML/CSS + JS，其中細節也被我略過很多。可見我也低估了學習網頁的難度。

困難點

說了這麼多，所以困難點到底是什麼？我覺得是以下幾點：

低估寫一個網頁需要的能力

「寫網頁很簡單啦，按一按就好」這句話不知道是否各位也常常聽到，我認為半對半錯。透過既有工具，確實按幾下就是一個網頁，而我會定義這是第一級的層次，其實就如同部落格，或你現在在閱讀的這個網頁。第二層次則是可以套用既有模板而做變化的人，如使用Bootstrap或Semantic UI等。第三層是可以全部自行設計的人。而針對需求會採用或混搭不同層次的做法。

如第一層次的東西來說，到WordPress.com上建立一個網頁、選自己喜歡的模板並不難。但是要開始套用套件，或是想要有修改設計時變是卡關的開始。

低估寫一個網頁需要的成本

要做一個有個人設計的網頁並運行他其實是有成本的，然而在很多數的人認知中似乎自動忽略這件事情。假設是一個靜態網頁，可用Github Pages，但是使用者需要如何使用Git，變回到「低估寫一個網頁需要的能力」的問題；如若是用學校空間、透過FTP上傳，那表示是學校在付營運成本；又或是線上各種架站服務，免費的其實都有各種問題與限制，使用者想像中想要架設的網站往往不是免費的。總而言之，要維持一個網頁持續運作是需要花錢的。

高估自己的動力

「想學一個東西」與「必須把一個東西學好」之間的分別對於包含我在內的很多人都常常會遇到分辨上的困難，如同前文描述的，開始學寫網頁時候，會有過量的資料出現在面前，不知道怎麼取捨。同時，也不知道自己要做的東西確實是長哪樣的，出現有點雞生蛋、蛋生雞的問題。

所以，我很常建議想學網頁的朋友先畫一張草圖（其實就類似正規的網頁開發流程中的Mockup圖），然後刪減上面的東西後，我幫忙選可以使用的工具。然後再一起評估需要花的時間後訂下學習過程中的milestone。

結語

從最早觀察到這個問題至現在，我持續想要解決或改善這個問題，然後讓大家最終都可以如願以償的學習到想學的技能，同時我更相信越多人的加入，可以讓網頁開發這件事情變得更豐富有趣。

最重要的部分是，上述的困難點都源自於學習者的「高估」或「低估」，於是藉由這個文章讓人更認識到一些現實層面會遇到的困難，同時我相信這也是解決問題的開端。此外整篇文章主要針對想學網站但不得其門而入的人，若本就是善於學習這種技能的人也許就不適用了。

對了，曾經我聽過一句話，要完成一件事情：我們需要一個計劃(Plan)，還有永遠不夠用的時間限制(Not Enough Time)，共勉。

[CMU V.S. 交大] - 學期末修課心得

Network Security 期末海報展覽

前言

落筆的此刻是學期結束的隔天，與撰寫前兩篇心得（學期初、學期中）的動機是一樣的，希望把交換過程間的所見所聞與更多人分享。而不同之處是我已經在這兒待頗久，融入並適應之後很多想法可能較無法很客觀地從第三人角度撰寫。

學期初多半的精力我用在適應環境，然而學期中之後，因為幾乎每一堂課的主軸都變成Project，我在學習上的重點變成怎麼與人互動、和大家怎麼一起把東西做好，而不同文化的優秀學生合作經驗成為最寶貴的收穫。

以下針對我所修的四門課，在期末這段時間值得分享的地方，接著是我跟過往在交大學習經驗上的反思。

修課

Principles of Software Construction: Objects, Design, and Concurrency

這堂課仍一直是以作業考試為主的，課程目標是讓我們從較高角度但兼具實作的方式學習各種中大型程式的設計與需要用到的技巧，以下是學期後半段的作業以及簡介：

• Scrabble：撰寫一個Scrabble遊戲（二維拼字遊戲），需要有介面並有好的設計以面對之後的擴充功能。其中有運用到多種Design Pattern，寫程式之前需先繪製程式設計圖跟助教討論
• Socail Network Analytics: 這份是需組隊的作業，我與一個印度同學合作，需撰寫出一個可以針對各種Social Network裡的數據分析並製圖的程式。困難之處在於作業要求的是一個Framework，需要讓使用者可以自由加上不同Plugin的架構（例如，Facebook Plugin、Github Plugin），於是程式彈性是很高的，支援各種用途。這份作業分成三大部分，第一部分是把設計圖提出在助教課上報告；第二部分則是撰寫程式，包含Framework與數個Plugin；最後一部分是寫Plugin裝在其他組的Framework上頭
• MapReduce：這是一個分散式系統中運算資料的方式，而作業需寫出數個Server跟Client同時跑以模擬一份運算怎麼在多台機器上頭分工後完成

整體而言，這堂課教導學生從原本寫單份的小型程式到架構較複雜的中大型程式。

Web Application Development

學期中我們作業是完成一個社交網站，其中功能包含註冊、Email確認信、登入、留言、上傳相片與即時更新等，最後再把網頁放到雲端服務上，我的做起來像是這樣。

接下來的時間我們都分組完成一份Project，過程中有很多的次的進度報告，是在一個小會議室中跟助教還有一些其他同學報告、聽取建議。我們做的是Bug Killer，概念如StackOverflow讓人可以發問Bug與回答Bug，不同之處在於我們加上點數的功能，於是使用者發問Bug需要付出點數、回答問題則可以得到點數，且點數是可以用實際金錢買的，最終的作品放在這裡。

其他同學有人做類似SoundCloud線上音樂平台、同時包含商家與客人端的點餐系統以及旅行路程規劃等網站。

Network Security

每堂課上課前的論文閱讀仍持續至期末考前，而Project部分我們每週見面討論，分頭做實驗，最後再撰寫一份論文並有海報的期末報告。我們做的是分析網路上販賣假YouTube瀏覽量的方式，透過實際購買假瀏覽量，我們能分析流量的特徵，並嘗試寫自己的程式去產生瀏覽量。論文放在這裡。

期末的海報報告頗有趣的，在一個室內空間中有免費點心食物，然後感興趣的人會進來聽各組的作品，最後透過投票選出最佳的組別。有組別做新式的防火牆並在學校工作站上測試、有組做網線網路未註冊使用者偵測系統並錄製了影片展示等，大家都很愉快並認識彼此的作品、互相學習。

Advanced Web Design

這堂課總共有四份作業，最後另外有一個分組Project，且有一個共同展示成品的時間。我們做的作品叫做Tmate，靈感來自於我們發現設計師與工程師這兩個族群通常有各自的社交圈，彼此之間的交集並不多，然而以一個完整作品的角度而言，這兩個社交圈若能彼此認識是很好的，於是Tmate讓設計師與工程師可以登記自己的頁面、彼此認識，並可以依照專長搜尋。成品在這裡，是同時支援各種螢幕大小的。

Tmate網站支援多種螢幕大小

反思

交大修課的期末Project規模與完整度較小：發現在CMU同學們投入在期末Project的精力頗大，每個所做出來的東西完整度或規模，都是我先前在交大不曾做過的，而我這兒遇到的人大家都努力堅持到最後、不斷的修正問題直到最後一刻。

交大在專業工具上的使用上較少：如網頁設計的課，與設計師隊友使用Git同步程式碼省下大量的時間跟開發問題；Network Security的Project中我們使用LaTeX寫最終的報告，在架構與可讀性上增加許多。

不只是修課

有趣的是，在CMU這段時間裡，我學到最有用的知識其實並不是來自課堂，主要以下幾項值得分享：

• VIM/zsh：從高一用VIM到現在我始終很難找到同好，甚至推銷總是失敗；然而在這兒我參加CMU電腦社團的講座，講者分享他的VIM用方式，以及很多我不曾知道的使用方法跟Plugin，讓我的往後打程式的效率又更進一步（這裡有他當時的筆記）
• LaTeX：一樣是我以前接觸過但不曾學起來的東西之一，在先前的環境裡並沒有遇到其他人在使用LaTeX，而在CMU一位好朋友很喜歡LaTeX，跟她學了很多，現在我也能自己寫不少LaTeX的文件了！
• Git：又是一樣的，過去我自己會使用版本管理系統，但是同學們之間並不使用，所以在這兒讓我有機會可以體驗Git在多人同時開發時候是如何的、又有什麼問題需要注意的

結語

網頁設計的Project我們在展示的前一天在圖書館通宵趕工，隔週週末我們一起去動物園玩；Network Security的Project我們合作間不時會吵架，但最終得了第二名，隊友們感情很好我們更曾一起去華盛頓玩；Principles of Software Construction分組作業的印度隊友則跟我一樣喜歡貼貼紙在電腦上，於是我們互送了很多貼紙；而Web Application的隊友則是我這段時間最好最好的朋友，我們總是一起唸書。

於是乎，在不同學校交換的過程中，最重要的是遇見什麼人，而大家彼此之間的態度又是如何。所學的知識固然珍貴，但會讓我難忘而永存的是這裡遇到的每一個人，以及我們如何互相對待彼此。誠心待人、遇到問題直問、專注並投入在自己的學習上是這回交換日子裡我學習到的態度，讓自己保有這樣的態度是不需要跑到地球另一端、也不需要花錢的。

* 關於交換過程更多的生活點滴：http://cmu.heron.me/

Heron at CMU

[CMU v.s. 交大] - 學期中修課心得

晚上在學校自習

前言

在Carnegie Mellon University交換的日子已經邁入期中，我所修的其中一門課考完了期中考，其餘的則有Project在進行中。與學期初修課心得的想法的是一樣：希望把我所見所聞跟更多人分享。

在CMU要同時兼顧課業、社交活動與睡覺實在很困難，而我近日的時間安排則是：

• 早上：寫作業、準備當日上課需要的閱讀
• 下午：上課或討論Project
• 晚上：參與活動或與同學討論作業
• 深夜：繼續寫作業

每日睡五至六小時，但對於生活中遇到的每件事情都讓我很興奮，特別是在這裡新認識的每一個人；而，這篇文章我會將重點放在修課部分，以及我們可以學習的地方。

修課

這學期我總共修了四門課，分別是Principles of Software Construction: Objects, Design, and Concurrency、Web Application Development、Network Security與Advanced Web Design，以下我簡短介紹這幾門課的內容與特別的地方，而在「反思」的部分則描述與交大相呼應、可學習的地方。

Principles of Software Construction: Objects, Design, and Concurrency

這是CS二年級的課，但我在課程中認識的人大部份都已經是研究生了。內容以比較高角度的方式看寫程式的架構與設計，講述抽象的程式設計概念（Design Pattern）並學習畫UML圖（例如程式流程圖、物件關係圖等）。
這堂課每週都有作業，也是我起先花最多時間寫作業的一門課，使用Java：

• 第一週作業：用BFS找出朋友關係圖中，兩個朋友的距離
• 第二週作業：用Dijkstra's Algorithm找最短路徑
• 使用匹茲堡真實的公車路線資料，規劃使用者如何從A站搭車到B站（如同Google Map的路線規劃）
• 需要寫Java的UnitTest達到100% line coverage（就是每一行自己寫的程式碼都要寫出對應的測試程式）
• 通過CheckStyle（即Java程式碼中的排版需要符合規定，並且有標準完整的註解）
• 第三週作業：模擬匹茲堡城市中的公車與搭車情況
• 練習中型規模的程式如何設計，作業中車子、車站與乘客之間有多種相互關係
• 模擬各種細節情況，如：10%的人若是搭輪椅延後上下車時間，影響全部公車是否準時到達的比例是多少
• 使用多種課程學到的設計概念

第二週作業我寫起來有5000行的程式碼，第三週不加測試碼的話則有7000行，是挺辛苦的一門課。下課時間德國教授被一大群的中國學生圍成一圈詢問作業的問題，過了快一小時都不能離開。然而，上週的期中考之後情況好許多，我也漸漸習慣這裡的作業方式了。

反思

這一門課是Software Engineering的前期入門課，也算是很多人修的二年級課，但交大其實並沒有對應的課程。

• 交大程式教學重視語法跟完成度，但幾乎不管設計想法：我記得在交大第一堂C語言的課在教不同資料型態的語法；而在Stanford學習第一堂CS課程時候，教授刻意在前期都不講語法，而透過包裝好的教材（Stanford Karel）學習從較抽象的角度開始思考程式。同時，在交大多數助教並不會看每位同學的程式碼，但在CMU連變數名稱取不夠好都會被寫盡評分的回覆裡。
• 交大程式課程沒有涵蓋「測試」：從這門課的要求中可以看出寫測試碼佔很重要的比重，每寫一小段程式碼就必須寫一段對應的Unit Test測試碼。

Web Application Development

這是一堂同時跨四年級與研究所的課程，學習用Django寫網路應用程式，是學校十分熱門的一門課，而每週都有作業。我個人先前恰好學過大部份的內容，所以還行，但對於沒有學過的同學，幾乎是一週要學一個新的語言：

• 第一週作業：用CSS/HTML繪製出一個計算機
• 第二週作業：讓計算機會動（我的做起來像這樣）
• 第三週作業：讓計算機在Django上跑
• 第四～第六週作業：寫一個社交網站，可以註冊、登入、留言、評論與追蹤等

作業是做一個類似於Facebook的社交網站

反思

• 交大的網路應用程式設計並沒跟上時代，多數同學都是自學：應用程式在交大的重視度較小，而網路應用程式則被包含在資料庫這門課底下，使用PHP；雖然PHP不失一種易學習的語言，但有較完整架構的Django或ROR並沒有課程在教，而CMU這裡則是已經從Java換到熱門的Django架構（今年）。

Network Security

這門是研究所的課程，與矽谷校區的同學同步，所以上課前都會開啟教室視訊，對方教室的同學也可以發問。是一位印度教授在授課，剛開始的前幾週偶而會漏掉幾個聽不懂的字，但漸漸有改善。

除了上課以外，這門課到目前為止做了：

• 每次上課前閱讀一至兩份論文
• 作業一份：寫防火牆
• Project討論

論文一篇約十幾頁至三十幾頁，起先我需要花半天的時間才能瞭解一篇論文大概在講述什麼，漸漸的配合上閱讀技巧，可以在兩小時內抓到一篇論文的討論的重點，也會稍微跳過一些細節部分。

其中防火牆作業用到我過往在交大OSDI課程中學到閱讀大型程式的方式（cscope, ctags）以及修改kernel code的經驗，而有些同學並沒有相關的經驗則在這次作業中挺卡關。

Project部分近日也在進行中，我們會與微軟公司的一位研究員一同合作、定期開會討論，成員有韓裔美國人、土耳其人與印度人，與其他成員聊天、討論是最有趣的部分。

反思

• 交大要求的閱讀並不多：雖然許多課程都有買教科書，但是會閱讀完的同學並不多，我認為與學習環境的關係最大，如果多加些閱讀的作業會有幫助。
• 交大課堂產學合作較少：如這堂課我們組選定主題之後，老師找了一位微軟的研究員與我們共同進行，所以可以使用到微軟的資源，最重要的是研究內容可以使用真實在運作的服務，而非只是實驗室內的小模擬。

Advanced Web Design

這是設計學院的課程，教的是進階的網頁設計，相對於其他CS的課程，這門課其實相對輕鬆許多，老師對於作業的要求較有彈性，也很重視討論，於是有一半的課程只有討論，大家跟附近的同學聊天、老師則會與同學一一了解情況。

第一次作業是將現有的FBI網頁改成現代的新網頁，同時支援電腦、平板與手機（我的作業在這裡），設計是一個不斷問題修正與討論的過程，寫作業的過程是我學習到最多的部分。

由於交大沒有相對應的課程，所以「反思」部分則略過。

整體修課而言

• 交大修課其實是很輕鬆的
• 交大作業期限通常是兩週以上，而CMU作業大部份是每週一份，且都滿大份的。
• 交大上課同學打混比較多，在CMU多數人都很專注，且積極問問題，特別是Design Pattern那門課，如果錯過一些概念就會跟不上。

CMU的資工系大樓，比爾蓋茲所建

結語

雖然生活很繁忙，但是我十分喜歡這裡，在課程中學到的東西比以往扎實許多，而每一個不懂的地方都可以問很清楚，身邊也有很多實事求是、打破砂鍋問到底的同學，我也認為這是求學最好的態度。

[CMU v.s. 交大] - 學期初修課心得

前言

在Carnegie Mellon University交換過了快兩週，選課差不多都確定了，而部分課程的第一次作業也交了；這回交換的機會主要是透過交通大學協助的，而學校除了把學生送出國，也期望能把所見所聞帶回來分享，所以寫了這篇文章。

首先，透過幾個數字簡介CMU這所學校：

• Computer Science世界排名第一（2010年華爾街日報）
• 校園人數約6000人，一屆交換生約50人（這屆兩個台灣人）
• 學費是交大的20倍

而我修的課有：

• Principles of Software Construction: Objects, Design, and Concurrency
• Web Application Development
• Network Security
• Advanced Web Design

前三者是CS類的課，最後一個則是設計。除了選修的課，開學第一週我也多去一些後來沒有選的課旁聽，加上幾年前在Stanford修課的經驗，我想針對這兒修CS課與交大不同處列出來，先是CMU優於交大資工的部分，其次是交大資工優於CMU的部分。主要是討論修課使用的工具與修課方式，而非學生態度、文化之類的。

CMU優於交大資工的部分（個人觀點）

Git

我所修需要寫code的課都用Git來發作業、交作業，所使用的是Github的Organizations，可允許老師與助教個別pull&push非公開的程式碼給學生。比起E3好幾個莫名的跳出視窗好很多，而Git也是實際與人合作時必備的工具，從學校開始有很好的使用基礎。

當然，非公開的Github使用方式是要付費的，CMU這樣的方式一門課約需要幾千塊台幣，而自行架設Git Server不妨是個省錢方式，例如吳育松老師網路安全實務的作業就使用Git繳交。

Piazza

從幾年前在Stanford修課到現在的CMU，這是幾乎每一堂課都會用到的平台，他能讓：

• 學生自由發問問題（可匿名），老師、助教或其他同學可回答問題
• 發布公告
• 協助報告分組

就如同交大的E3，但比較好用且跟Email結合挺好，所以有人發問或回答問題都會被通知。還記得有一堂課因為課程中太多人問問題，怕耽誤到進度，於是教授放一台iPad在講台，若有問題則用Piazza提問，教授會統一回答。上頭同學們總是很熱絡是這平台最有價值的地方吧！

Testing & Checkstyle

對於作業，我在交大的經驗是必須要達到作業要求的功能，而至於方式與品質若沒有要求就隨意。但CMU跟Stanford修課的經驗中，滿講究code的品質，以下幾個例子：

• CMU與Stanford的Java課程會要求學生寫完整的註解，前者甚至需要符合JavaDoc、跑Checkstyle（檢查code所有細節的工具，包含註解完整性），完成後再寫UnitTest後檢查Test的覆蓋程度（是否每行code的所有情況都被測試過），最後才繳交作業
• CMU與Stanford中與網頁前端有關的課程都會要求要經過Validator測試（檢查語法是否正確），其中包含HTML與CSS

產學合作

主要講的是課程中有外部單位加入課程的部分，以下有幾個例子：

• Rapid Prototyping是一門讓不同領域學生選修、組成小組做作品的課程，我去上前兩堂課，學期中各組必須要設計出解決「客戶」需求的產品，而這學期的客戶則是醫療看護，於是課程中老師視訊了三位照顧病患的人，有病患家屬、護士與研究單位等
• Network Security有期末Project，今天老師才宣布有外部公司提供獎金給比較好的Project

Reading

交大大部份的課程靠老師的投影片就可以考試。而CMU跟Stanford滿多課都會被要求要讀課本或論文，有些課是在第一次上課發的課程行事曆中會包含每週應該要閱讀的課本章節，可能包含隨堂考；而我修的一門研究所課程則是每週要讀一兩篇論文並寫感想，若沒有讀的話上課容易聽不懂，所以一學期下來要讀的論文大概這麼多...

交大資工優於CMU的部分（個人觀點）

圖書館

交大的圖書館藏書實在頗多，在學校總是可以很容易的借到幾乎任何一本電腦相關的書籍，且熱門的書籍甚至有好幾本，還有不少線上資源。CMU我則找不太到，也發現他的書並沒有很多，且課堂修課要用的書在學校書局也沒有賣，得自己上網買。

教授很親民

由於交換生不太能在選課系統上選課，所以CMU開學的第一週我花大半的時間在一一找教授加簽，也發現這兒大部份教授實在很忙，除非是修課生或有直接相關的事情，Email常常不會被回覆。例如很多教授會在自己的網頁上寫怎樣的Email是會被他忽略的，而Email又該如何寫才可能被回覆，應該是因為他們Email都是公開的，必定有很多想要申請入學、申請研究工作或外部公司等的信吧！而在交大我們總是可以很容易找到教授、安排會面時間等。

結語

個人覺得課堂使用版本管理系統、作業要求寫測試與足夠的參考資料閱讀是在交大修課過程中不足的部分，但也是很容易學習的部分。而在美國的習慣中較個人主義，所以任何問題必須要自行去問，才有可能被解決，這也是我學習的過程之一；相對台灣，我們有很多的資源如圖書館跟教授其實都是很珍貴的。

更多：http://cmu.heron.me/