[筆記] Alpha Camp 第三學期 期末回顧 關於自學

學寫程式的過程旅途上,「自學」在不知不覺中就成為身體中記憶的一部分。畢竟寫程式卡關的問題有百百種,有時只是單純打錯字、也有可能是一開始的邏輯設計就出了毛病。這時,運用搜尋「關鍵字」和用「關鍵字找關鍵字」,爬遍各大論壇(如:Stack Overflow)、眾多部落格內文,可以幫助你在無形中養成一種寫程式的語感,就像是說自己的母語那樣。

每一次遇到的無論大小問題,只要自己覺得值得記錄,就會寫下一篇文章。這個習慣是參考梅問題這網站所得到的靈感。這樣短小一篇、字數不多的文章,很適合繁忙且資訊量爆炸的現代人閱讀。

reflective and reflection

P.S. 由於文章排程的緣故,案例1的連結會在 2019/7/29 的 09:30 以後可以瀏覽;案例2的連結會在 2019/7/30 的 09:30 以後可以瀏覽。


案例分享

1. Heroku 佈署問題:如何將 Git 的子資料夾專案推上雲端?

頭一次運用 Heroku 佈署自己的本機端專案到雲端,扣除掉教材內一時疏忽所造成的錯誤後,最後發現 Heroku 始終讀不到 package.json 的檔案。這時便開始海量搜尋眾多關鍵字,如 “heroku deployment error” 或是將 heroku 在終端機上顯示的錯誤訊息一行行貼到 Google 上爬文。在經過了兩個小時的嘗試後,最後在 Deploy Git subdirectory to Heroku 找到可能的解答。

在這兩小時的掙扎中,其實也一度想要直接求教於助教群,不過若要讓助教群可以理解你卡關的地方,勢必得先說明已經試過的方法、猜測可能的問題。我記得那天應該嘗試了將近不下30次吧,最後發現問題往往出在你想不到的地方 – 你的資料夾架構和教案有一點點不同。同時也更了解了 Git 的使用和設定方式。

詳細的指令和完整過程,可以點右邊網址觀看:Heroku 佈署問題:如何將 Git 的子資料夾專案推上雲端?

2. JavaScript 雙層選單篩選連動

這個問題是在設計篩選器時發現的。當前端傳送參數到後端查找資料時,要同時回傳使用者所得的資料和原先傳遞出來的參數才行。換言之,當你在設計網址的時候,就要預先留下他們的位置。
原先我一直以為只要在後端將傳入的值儲存成一個全域變數,這樣就可以隨時調用的到。殊不知,事情沒有想像中那麼簡單。由於 JavaScript 語言本身又具有非同步處理的特性,這樣一來事情就變得更棘手了。
在嘗試了將近四個小時後,外加上都無法進行成功篩選的情況下,決定看一下同學的作法:
1. 運用事件監聽的方法:當使用者點選下拉按鈕時,將網址改變
2. 每次都將使用者前次提供的參數一同回傳。這樣一來,只要你的網址設計時多留欄位就好
經由這個過程,又將原先的前端語法複習了一下。另外也理解到要設計給非英語母語的人使用的網站,運用 JSON 的格式將資料建立起來放在後端取用會是比較方便的作法。

詳細的指令和完整過程,可以點右邊網址觀看:JavaScript 雙層選單篩選連動


好用資源分享

陳之藩曾經說到:「得之於人者太多,出之於己者太少。因為需要感謝的人太多了,就感謝天罷。」以下整理出一些常常自己搜尋的文章和網站:
1. JavaScript 陣列處理:找東西 – indexOf、$.inArray 與 filter
2. JavaScript:使用 Array.map、Object.values 和 Object.keys 處理一連串的資料
3. Bootstrap 4 繁體中文手冊
4. 程式前沿
5. CSDN
6. MDN Web Docs


展望

在社群網絡發達的時代,人們已經很幸運的不需要背下那麼多的資料於腦海中,可以透過線上發問、社群協作平台來找你要的答案。寫程式時所遇到的問題自然也不例外。不過,如何抽絲剝繭自己的問題真正卡關的位置,需要靠每一次遇到問題時的經驗累積。同時,不要吝於分享自己的解題經驗於網路上。部落格會是一個我認為比較好的方式,畢竟在社交媒體平台(如Facebook, ptt, Line) 等分享的文字,是很難被搜尋引擎收錄完整的。若真的要在網路時代下留下的自身的一點學習痕跡,那麼寫點記錄並發表在能被搜尋引擎完整收錄的平台才是長久之策。


程式自學記錄

  • [指南] npm 安裝操作教學
  • [筆記] 運用 Heroku 佈署的初始化步驟
  • [筆記] 線上正規表示式測試器
  • [筆記] TinyURL 服務串接
  • 運用 Node.js 建網站的初始化步驟
  • [筆記] Terminal 終端機上的文字編輯器 VIM Editor 操作指南
  • [筆記] JavaScript 雙層選單篩選連動
  • [筆記] Heroku 佈署問題:如何將 Git 的子資料夾專案推上雲端?
  • [指南] RSS 檢測與故障排除
  • [筆記] MongoDB 在運用正則表達式使用變數
  • [筆記] Google, Facebook, Github OAuth 認證設定申請
  • [筆記] Homebrew Mac 上的好用套件管理工具
  • Mongo DB 條件操作符
  • Express Validator 操作介紹
  • 安裝 MongoDB 出現 SocketException: Address already in use 錯誤
  • [筆記] Handlebars Register Helper 自定義 Helper 用法
  • [筆記] Google Place API 串接 (Google Map 系列服務)
  • [筆記] JavaScript Disabled 屬性
  • [筆記] Bootstrap Modal 互動視窗 操作指南和除錯
  • [筆記] Pagination 分頁功能 實作 JavaScript
  • [筆記] RWD 自適應版型 漢堡選單實作與故障排除
  • [筆記] Git 忽略 .DS_Store 等排除檔案
  • [筆記] Git 更新分支、解除衝突方法一覽
  • [筆記] KeyCode & querySelectorAll 全部加上事件
  • [筆記] Can I Use 查詢語法在各瀏覽器上可否正常使用
  • [筆記] JavaScript 將兩個 array 合併一個 array
  • [筆記] 純 CSS 製作圖片輪撥效果
  • [筆記] API 串接, Axios 和綁定DOM事件
  • [筆記] CSS ul li 水平置中方法
  • [筆記] Async 非同步處理和 JSON Object 取值
  • [筆記] textContent, event.target 和 innerHTML
  • [筆記] BootStrap Card + Grid System + Modal 彈出視窗
  • [筆記] Lorem Picsum 網頁開發自動生成縮圖
  • [筆記] Visual Studio 網頁前端開發新手套件
  • [部落格經營] Contact form 7 表格自動縮放
  • 按讚加入粉絲團

    延伸閱讀