基於 GatsbyJS 的博客系統正式開源:gatsby-starter-calpa-blog,及其使用方法
感謝各位這些年來閱讀我的博客文章,以及優化博客系統框架,現在,我將為你帶來一個前後端徹底分離,而且可以一鍵啟動的博客框架。
....繼續閱讀全文內容感謝各位這些年來閱讀我的博客文章,以及優化博客系統框架,現在,我將為你帶來一個前後端徹底分離,而且可以一鍵啟動的博客框架。
....繼續閱讀全文內容上次我們提到 GatsbyJS,它是一個可以獲取任意數據,並生成靜態化網站的系統。這一次,就讓我們以 Calpa 的技術博客作為例子來開始架構網站吧。
....繼續閱讀全文內容GatsbyJS 是一個現代化開發網站的網站產生系統,擁有完整、豐富且開源的生態圈。它利用 React + GraphQL 產生的多頁面應用,讓前端工程師,編輯,用戶都感到滿意。就讓我們一步步地探索這個系統吧。
....繼續閱讀全文內容在程序員的日常精進之中,閱讀優秀的代碼是必不可少的。透過 TDD 的開發模式,可以模仿那些優秀的代碼,從而提升自己代碼水平。下面介紹如何從零開始搭建 TDD 環境,並構建 isEven 代碼。
....繼續閱讀全文內容在寫測試代碼時,以往我們需要翻閱文檔,學習各種 API 才能明白如何操作斷言。而現在我們可以透過 power-assert 的 assert 方法來減輕調試壓力。不僅如此,它還提供更加直觀,具體的運行效果,幫助 DEBUG。寫測試代碼,其實可以很容易。
....繼續閱讀全文內容對於代碼裡面的 if else,我們可以使用邏輯判斷式,或更好的三元判斷式來優化代碼。除了可以降低維護項目的成本之外,還可以提升代碼可讀性。就讓我們從最簡單的 if else 例子開始吧。
....繼續閱讀全文內容在日常開發中,我們少不了使用 Promise,而透過封裝抽象方法,可以避免造輪子,寫出更加優雅的代碼。例如:將任意函數,化為具有異步能力的函數、改裝成具有並發上千萬請求的函數、使用 Web Worker 來使用不同線程、暫停若干秒再繼續。這裡就讓我們一起來動手封裝這些方法吧。
....繼續閱讀全文內容世界上不同的程序員,因開源活動而連接一起。這次 Hacktoberfest 活動除了可以拿到活動的限量衣服和貼紙之外,更可以認識到世界上不同的程序員。我看著不斷而來的討論和 PR,我找回了自己在編程上的熱情。如果你有興趣參與開源活動,但不知道如何入手的話,它會是一個不錯的起點。
....繼續閱讀全文內容為了提升用戶的加載頁面速度,我們可以使用懶加載這個方法。當用戶打開頁面的時候,只需要載入首屏的資源,從而節省流量,提升加載速度。而用戶滾動到圖片佔用位置,瀏覽器才載入圖片資源。利用 `lozad.js`,我們可以簡單容易地懶加載圖片。它是一個可以單獨運行的工具,gzip 後的體積只有 910B,可以說是超輕量的工具庫。除了加載圖片之外,它還可以加載任意元素,例如 iframe,影片。在過去的一年,博客就已經啟動這個懶加載的功能了,也算是通過了眾多不同用戶的考驗了。
....繼續閱讀全文內容