又到了年度總結的季節 ﹣ 我的 2017 前端開發回顧

從最初的失望與後悔,到最後的興奮與感動,2017 年可以算是充滿挑戰與機遇的一年。雖然我依然是一個非科班學生,但是這沒有阻止我轉行成為前端工程師,反而成為向前邁進的動力之一。如果沒有這些經歷,我也不會發現自己對於編程的那份熱愛。在此,就讓我回顧一下這一年在自學編程轉行的經歷吧。在開始這篇文章之前,我先戴上頭盔,以防意外。

學習 JavaScript

JavaScript 可以說是前端工程師必須學習的語言之一。

一開始的時候,我是跟著知乎上面的一些學習方法,並整理為 打好 JavaScript 基礎的 6 個步驟。我抱著好奇心的心態在 Facebook 的台灣前端社區裡面發文,沒想到的是,這篇文章吸引了很多讀者,讓我堅定了自己學習的路線。

我的博客

Imgur
Imgur

這個博客是 2017 年 1 月 時創建的。當時是 Hexo + Github Pages 的靜態構建博客系統來完成,它的概念是很不錯的,把網站的主題和文章分開,要修改主題的時候就直接修改源代碼就行,不會影響到文章。但是還是有一個問題,就是文章需要放置在當前目錄裡面,也就是說沒有做到異地修改文章的功能。

最初的樣子
最初的樣子

網上有一些配置,比如說 Hexo-Admin,我也是有修改一番,但是改著改著,越來越多功能想要添加。

因此我就開始查找其他的解決方法,最初我是沒有用 GatsbyJS 的,因為它使用的 GraphQL 蠻難去學習的。

過了一陣子,React 官網 使用 GatsbyJS,讓我也很好奇到底為什麼會使用它。

博客初版

Imgur
Imgur

相關文章:

  1. 為什麼要寫技術博客?
  2. 【圖多】《遠征成功﹣﹣一個香港人北上杭州豬場的前端面試之路》
  3. 2017 年香港開源年會後記

前端框架

不管黑貓白貓,能抓到老鼠的就是好貓。這裡就先簡單說說我對他們的感覺吧。

一開始學習前端開發的時候,我是利用 Angular 去開發小型項目的。在那個戰火紛飛的時代(雖然現在也是),Angular 給我一種大教堂的感覺,可以在裡面找到我所需要的東西,不需要自己去配置那麼多。可能是當時對於 node.js 和 npm 不太了解,所以經常會遇到各種package 找不到的問題

在利用 React 開發網站的時候,感覺 React 很簡單,純潔,給我一種菜市場的感覺。我可以根據需求,去市場自己挑貨。如果看過那些工具上的源代碼,都不喜歡的話,自己寫一個也是可以的。當我在挑貨的時候,便會需要考慮到各方面的因素,比如說是否繼續有人維護,Github 上面的 Stars 數目,npm 每個月下載量等等。

暑假的時候,我到了深圳實習,寫 Vue.js。它確實一個不錯的框架,對於初學者也是非常的友善。

在使用過這些框架之後,我覺得其實框架只是一個輔助的工具,好好地寫代碼才是重點。對於那些選擇困難癥的患者,更加是應該碼上起行。

前端工具

在開發網站的過程中,也是對於一些前端的常見工具有了一點的了解。比如說 Webpack, Babel, ESLint。這些也算是標配吧。

相關文章:

UI

一開始的話,我是用 Bootstrap 3 來構建一個很普通的網站。詳見 HackJam,當時是直接寫進去 HTML 的。也沒有用什麼框架幫忙。

HackJam 2016
HackJam 2016

現在開發的時候,如果可以配置 SCSS 預處理器,我會盡量以 SCSS 代替純 CSS 來寫樣式,因為它可以簡單處理 CSS 比重問題,以及提高代碼複用性。

黑客松

我曾經參加八次黑客松,並在微軟舉辦的 ImagineHack 中取得第二名,最受歡迎獎,並在 TechCrunch 2017 黑客松深圳站取得第三名。

作為一個科大學生,參加科大舉辦的比賽也是很正常的吧,賽後寫了 HackUST 2017 回顧

ImagineHack 比賽時,我是沒有期待自己會獲勝的,畢竟自己初出茅廬,而且那個時候掌握的技能非常有限。這次比賽讓我發現原來參加黑客松是那麼的有趣。

而 TechCrunch 黑客松,則是讓我開啟了前往中國之路。也是之後我到深圳南山工作的伏筆吧。

相關文章: 參加八次黑客馬拉松的個人體會與總結

印象最深刻的事

  1. 兼容不同的瀏覽器,例如 IE。

一些非常好用的屬性是不能用的,因為舊版本的 IE 沒有支持這些屬性。

box-shadow: IE 9

flex: IE 10, 11 (Partially Supported)

更多的兼容性要求可以在 Can I use ? 網站 裡面查詢。

  1. 為什麼 Caps Lock 和 Control 互換了?

Imgur
Imgur

學習時遇到的趣事

The Nature of Code 教如何利用 p5.js 模擬一些大自然的生命變化。這個時候,我發現原來用 Mac 寫代碼是可以那麼有趣的。

互聯網上有非常多的教學,免費教人學習編程。例如 MIT, Harvard,它們將課程的影片,素材以及功課上傳,並且可以互相交流。

展望 2018 年

  1. 用心把 SICP 看完,做完。
  2. 繼續學習 (CI/CD)
  3. Node.js
  4. 做一個全棧的項目
  5. 研究研究白色相簿 2

延伸文章 (2018 年)

參考資料

關於 Calpa

Calpa 擅長使用 TypeScriptReact.jsVue.js 建立 Responsive Website。

他積極參與開源社區,曾在 2019 年的香港開源大會上擔任講者,提供工作經驗和見解。此外,他也在 GitHub 上公開分享個人博客程式碼,已獲得超過 300 顆星星和 60 個分支的支持。

他熱愛學習新技術,並樂意分享經驗。他相信,唯有不斷學習才能跟上快速演變的技術環境。

熱門文章

最新文章

圖片管理中心
管理圖片資源
IP 查詢
快速查詢和定位 IP 地址的地理位置和相關信息
Python 運行器
無需後端、無需登入,只需打開瀏覽器即可運行 Python 代碼(由 Pyodide 提供支持)
封面圖生成器
自動創建適合各種平台的文章封面圖
原作(青山剛昌)產生器
一鍵創建原作(青山剛昌)的封面圖
日本色彩
探索和使用傳統日本色彩
部落格內容洞察儀表板
以視覺化儀表板方式追蹤文章成效、分享熱度與分類分布,協助創作者掌握內容表現。
蒙特卡羅估算 π
使用蒙特卡羅方法演示 π 值的估算過程
LLM
使用 LLM 模型進行聊天
活動圖生成器
一鍵創建活動的封面圖
Wagmi Card
一鍵創建 Wagmi 的封面圖
Facebook Quote
Facebook Quote
Music Macro Language (MML) Studio
用程式語法編寫旋律,用音符構築想像
Blurhash
一鍵創建 Blurhash
文字分類器
使用 MediaPipe TextClassifier 分類文字
前端工程師免費工具資源
前端工程師免費工具資源
後端工程師免費工具資源
後端工程師免費工具資源
全端工程師免費工具資源
全端工程師免費工具資源
Web3 工程師免費工具資源
Web3 工程師免費工具資源
紫微斗數排盤系統|結合 AI 的命盤性格與事業財務分析生成器
紫微斗數排盤工具,輸入生日與時辰,自動生成完整命盤分析提示(Prompt)。結合最專業紫微理論與 AI 助力,助你深入解析性格、事業、財務與人際課題。免費使用,適合命理師及紫微愛好者。
PixAI Prompt 組合器|快速打造可用於 AI 繪圖的語言拼圖
使用 PixAI 卻不會寫 prompt?這個工具幫你一鍵組裝角色、表情、風格語彙,輸出高品質繪圖提示語句(Prompt),可直接貼入 PixAI 使用。適合插畫師、創作者、AI 新手與 VTuber 角色開發者。