三十天寫三十個網站的挑戰來自 JavaScript30，連續三十天每天用原生的 JavaScript 寫一個小網站或是一個特定主題的練習。
上個學期用 JavaScript 寫了一些好玩的網站，但開始用 React 或其他框架的時候總覺得有點不踏實，應該要對原生的 JavaScript（或稱 Vanilla JS）下更多功夫才行。而也剛好看到 JS30 這個挑戰，就決定回過頭來練習用純粹的 JS 寫網頁，順便學習別人的程式碼。
這三十天每個網站的學習筆記我都放在 Github 上，歡迎在上面跟我交流 :) 。
以下就分享三個自己在這三十天的心得與想法。
一、學習不知道自己不知道的事
JS30 的挑戰是每天都會實作一個網站的功能，而這些功能很多是在開始這個挑戰前沒有想到可以用純 JS 實作的。
這樣的學習體驗跟一般線上學習為了實作某個功能才去查這功能如何達成很不一樣，因為你不知道自己不知道這種功能是可以簡單用 JS 完成，而這些功能又可以分為兩種：
沒有嘗試過的領域
沒有嘗試過的領域如：電腦的 Webcam 攝影機、網頁原生的語音辨識、 網頁原生的地圖定位等等。
這些領域的功能通常如果沒有想做相關的專案時比較難碰到，但透過這個別人指定的挑戰，才會去研究發現這些功能原來都可以用原生的 JS 就達成。
舉例來說，JavaScript 可以簡單使用一行程式碼 navigator.geolocation.watchPosition() 向使用者要求取得的地理定位，再搭配簡單的判斷就可以顯示使用者移動的速度跟方位等。甚至還可以透過 Xcode 的 Simulator，去模擬使用者的各種通勤方式 Debug。
Nice-to-have 的功能
Nice-to-have 的功能則是一些非必要，但發現可以額外加的功能。雖然這些功能大部分炫砲成分居多，但用的好也許也能增加使用者的體驗。
這些 Nice-to-have 的功能如搜尋框的 Autocomplete、自己實作客製化的影片播放器、幫 Webcam 影像做色彩處理、在網頁裡埋彩蛋等。
而其中有一個自己還蠻喜歡的例子是實作 Stripe 官網上那個蠻別出心裁的導覽列。當然一般的導覽列可以很簡單用像網頁書籤資料夾的方式實作（滑鼠移到資料夾上就把裡面的網頁吐出來），但用 Stripe 這樣讓導覽列內容好像隨著滑鼠移動的方式顯然是酷多了。
二、多看別人的程式碼
網頁的功能通常都有不只一種實作的方式，而同一種實作的方式也可以用不同程式碼的寫法達成。舉例來說：一個自製的影片播放器可以提供一些不同的參數讓使用者調整影片的設定，例如在這個播放器中可以讓使用者調整影片音量跟播放速度這兩個參數。
要運用這兩個參數去調整影片當然可以直接實作兩個 function 去分別處理 input 的變化，但如果在 input 上的 name 有好好對應到影片的 property 時，一個 function 就可以處理所有 input 的變化了，例如我們的 HTML 寫成：
<input type="range" name="volume" class="player__slider">
<input type="range" name="playbackRate" class="player__slider">而 JS 只要一個 function 即可
function handleRangeUpdate() {
video[this.name] = this.value;
}在舉另外一個簡單的例子，同樣的在判斷式後執行一個 function 的邏輯可以用簡單的 if statement 寫，但也可以用更簡潔但可能會降低一點可讀性的方式寫，如：
isTrue && doSomething();這實作三十個網站中，可以發現有很多功能的寫法跟自己原本想的不一樣，雖然都可以達成目的，但一方面可以比較不同寫法在效率或是可讀性上的差別，另一方面也可以學習各種不同人的邏輯，方便訓練自己 trace 別人程式碼時能夠更快適應。
三、找到自己舒服以及不舒服的學習方式
先找自己舒服的學習方式
不管上什麼樣的線上課程，找到屬於自己的學習方式都是很重要的事情，而且自己的同一套學習方式也不一定適合每一個線上課程。所以在剛接觸一個線上課程時，我覺得先嘗試從自己好上手課程的方式開始蠻適合的。
舉例來說，我剛開始在進行挑戰的前幾天，完成每天網站的方式通常是用 2 倍速看完影片，然後再開始自己打開 VS code，把網站的功能一個個實作出來，如果有不熟的地方再回去看影片或 Google，最後再把學到的東西紀錄下來。
對我來說，這樣的步驟就是舒服的學習方式，但很顯然這樣學花蠻多的時間，且遇到不熟在回去看影片的學習效果沒那麼好（畢竟平常在寫網站時也不會用這樣的方式開發）。
強迫自己不舒服一點學習
所以找到自己舒服的學習方式後，下一步就是去找自己沒那麼舒服，但可以學得更快或更好的方法。而對我來說，用 2 倍速看完影片並不是那麼不舒服，也跟自己平常邊聽課邊記筆記的習慣不太一樣。
所以我認為比較好的方式反而是用 1.5 倍速看影片，然後邊看邊把學習的筆記寫完。看完影片就可以把網頁關掉。接下來完全依靠自己的腦袋跟筆記，把網頁寫完。
因為 2 倍速實在手速跟不上（應該算太不舒服有反效果），所以退而求其次慢一點但強迫自己邊看影片邊把筆記做完，這樣不僅可以強迫自己完全專心看影片（因為一晃神筆記也會看不到 1.5 倍速的車尾燈），也比較符合自己平常要寫程式時，遇到學過但不熟東西時先查自己的筆記再上網查的習慣。
小結
以上就是關於這三十天挑戰的一些想法，我覺得這個挑戰下來最大的成長是，能夠有自信可以用純粹的 JavaScript 就快速實作出各種在別的網站上看到的各種功能。
但值得注意的是，在課程中其實對於底層 JS 的著墨不多（Closure、Prototype 等），大多是對於寫網頁的功能還有 DOM、Window 的運用。對於底層 JS 的學習感覺還是這個合適一點。
無用題外話
在課程中有學到客製化影片播放器的概念，剛好也可以用來操作別的網頁中的影片。例如大部分線上課程的影片播放速度上線通常都設在 2 倍，但有時候課程的速度實在是太慢的時候，可以透過 dev tool 去調整影片速度。
叫出 Chrome dev tool 中 console 的方法為： 對網頁按左鍵 > 檢查 > 點選 console
接下來在 console 中貼上這段程式碼搭配你想要的速度就可以突破限制了！
document.querySelector('video').playbackRate = 數字倍數;例如：三倍速
document.querySelector('video').playbackRate = 3;但如果網頁中的影片不只一個可能就要先知道影片的 class name 才能做選取囉！