HcwXd
Published in

HcwXd

三十天寫三十個網站後,我學到的事

Takeaways from completing JS30 challenge

Src: https://javascript30.com/

三十天寫三十個網站的挑戰來自 JavaScript30,連續三十天每天用原生的 JavaScript 寫一個小網站或是一個特定主題的練習。

上個學期用 JavaScript 寫了一些好玩的網站,但開始用 React 或其他框架的時候,總覺得有點不踏實,應該要對原生的 JavaScript(或稱 Vanilla JS)下更多功夫才行。而也剛好看到 JS30 這個挑戰,就決定回過頭來練習用純粹的 JS 寫網頁,順便學習別人的程式碼。

這三十天的每個網站都有提供影片教學,關於影片的學習筆記我都放在 Github 上,歡迎在上面跟我交流 :) 。

以下就分享三個自己在這三十天的想法。

一、學習「不知道自己不知道」的事

JS30 的挑戰是每天都會實作一個網站的功能,而這些功能很多是在開始挑戰前,沒有想過可以用純 JS 實作的。

這樣的學習體驗跟一般線上學習「為了實作某個功能才去查要如何達成」很不一樣,因為你不知道自己不知道這種功能是可以簡單用 JS 完成。白話點說,這些功能是我們比較不會「主動去學」的,而這些功能又可以分為兩種:

沒有嘗試過的領域

沒有嘗試過的領域如:電腦的 Webcam 攝影機、網頁原生的語音辨識、 網頁原生的地圖定位等等。

這些領域的網頁功能在沒有想做相關的專案時,通常比較難碰到。但透過別人指定給你功能的挑戰,才會去研究發現這些功能原來都可以用原生的 JS 達成。

舉例來說,想到地理定位也許很多人跟我一樣,直覺就想到也許可以用 Google Map 的 Api,但其實 JavaScript 可以簡單使用一行程式碼 :

navigator.geolocation.watchPosition();

就能向使用者要求取得的地理定位,再搭配簡單的判斷就可以顯示使用者移動的速度跟方位等。甚至還可以透過 Xcode 內建的 Simulator,模擬使用者的各種通勤方式,如:跑步、騎腳踏車等,以方便 Debug。

Nice-to-have 的功能

Nice-to-have 的功能則是一些非必要,但發現可以額外加的功能。雖然這些功能大部分炫砲成分居多,但用的好也許也能優化使用者的體驗。

這些 Nice-to-have 的功能如搜尋框的 Autocomplete、實作客製化的影片播放器、幫 Webcam 影像做色彩處理、在網頁裡埋彩蛋等。

而其中有一個自己還蠻喜歡的例子是實作 Stripe 官網上那個蠻別出心裁的導覽列。當然一般的導覽列可以很簡單用像網頁書籤資料夾的方式實作(滑鼠移到資料夾上就把裡面的網頁書籤吐出來),但用 Stripe 這樣讓導覽列內容像是隨著滑鼠移動的方式顯然是酷多了。

二、多看別人的程式碼

網頁的功能通常都有不只一種實作的方式,而同一種實作的方式也可以用不同程式碼的寫法達成。

舉例來說:假設我們要在一個自製的影片播放器內提供一些參數讓使用者調整影片設定,例如在這個播放器中可以讓使用者調整影片音量跟播放速度這兩個參數。

要運用這兩個參數去調整影片,直覺上當然可以直接實作兩個 function 去分別處理 input 的變化。但這樣其實讓程式碼有部分重複又減少 function 可重複利用的能力。

此時,如果我們在 input 的 HTML tag 上把 name 屬性好好對應到影片的 property 時,一個 function 就可以處理所有 input 的變化了。我們的 HTML 寫成:

<input type="range" name="volume" class="player__slider">
<input type="range" name="playbackRate" class="player__slider">

而 JS 監聽每個 input 的事件就只要一個 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 才能做選取囉,祝學習愉快!

Want to Learn More? Weekly I/O!

Weekly I/O is a project where I share my learning Input/Output. Every Sunday, I write an email newsletter with five things I discovered and learned that week.

Sign up here and let me share a curated list of learning Input/Output with you 🎉

--

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Cheng-Wei Hu | 胡程維

Cheng-Wei Hu | 胡程維

Voracious learner | Software developer | Cornell Tech student | Better Medium Stats: bit.ly/2RH8Jsf | Medium Articles List: chengweihu.com/blog

More from Medium

Postman Mock API

Postman Poster

Comprehensive Testing with JavaScript Workshop

Selenium Element Interactions: JavaScript Alerts

Experience during the Research Management tool using MERN Stack group project — (Application…