2019-03-15JavaScript 

如何利用 Stack Overflow 高效學習 JavaScript?

帶著問題去學習,會比單純看書的效果好得多。而 Stack Overflow 網站雲集世界上不同程序員遇到的問題,我們可以透過它來高效學習技能,比如說前端工程師的技能:JavaScript。

....繼續閱讀全文內容

如何透過 ZEIT 方便快捷地部署免費的 Node.js 項目?

ZEIT 平台提供了免費的網站空間平台給開發者,我們可以透過 ZEIT 平台來部署 Node.js, Express.js, Koa.js 等應用。如果你有寫過 Node.js 應用,又想找個免費空間部署這些應用的話,那麼 ZEIT 會是一個不錯的選擇。

....繼續閱讀全文內容

為什麼函數式組件需要引進 React?

在編寫組件時,最讓我迷惑的是在我編寫純函數組件,為什麼沒有在代碼裡面調用 React 都需要導入 React。經過一番調研,我發現是因為 JSX 轉譯的設定。不過,人是比較懶惰的,透過安裝 babel-plugin-react-require 插件,達到自動導入 React 的效果。這篇文章將會講述我的調研經歷和一點反思。

....繼續閱讀全文內容

React 渲染 Markdown 的方法

Markdown 提供了編寫文章的方便,我們可以透過 Remarkable,Marked 等一些解析 Markdown 工具來獲取 HTML,然後透過 React 原生的 dangerouslySetInnerHTML 方法直接放到組件裡面。

....繼續閱讀全文內容
2019-02-17Nelify ZEIT 

那些超好用的全棧項目部署構建平台 - Netlify, ZEIT

如果你想要部署自己的前端項目的話,那麼 Netlify 提供了一個一站式的解決方法,讓你可以持續部署,以及自動開啟 HTTPS。如果你想要部署 Node.js 應用的話,那麼 ZEIT 會是另外一個解決方案。

....繼續閱讀全文內容
2019-01-20CSS 回顧 

十年挑戰之水平垂直置中

相比起當年的水平置中手法,現在達到相同效果的方法多了很多,例如 Flex, Grid 等。就讓我們趁著 Facebook 回顧當年今日的浪潮重溫一下吧。

....繼續閱讀全文內容

GatsbyJS 入門(三):從零開始架構 React 靜態網站

GatsbyJS 提供了一個簡單易用的命令行工具,我們可以透過它來構建一個基本的 React 網站,並實時看到修改代碼所帶來的變化。

....繼續閱讀全文內容

從博客系統回顧我的 2018 年前端生涯

時光飛逝,我已從大學畢業成為前端工程師。回想這一年,我完成了三件事情:改版博客系統,讓不同用戶可以快速啟動項目,它是我第一個過百 Star 數的項目;翻譯並校對技術文章,學習了不少前端實用的技術;對博客系統框架的 GatsbyJS,ReactJS 技術研究。

....繼續閱讀全文內容
2018-12-03閱讀 

基於 GatsbyJS 的博客系統正式開源:gatsby-starter-calpa-blog,及其使用方法

感謝各位這些年來閱讀我的博客文章,以及優化博客系統框架,現在,我將為你帶來一個前後端徹底分離,而且可以一鍵啟動的博客框架。

....繼續閱讀全文內容

GatsbyJS 入門(二):如何以 Starter 快速架構網站

上次我們提到 GatsbyJS,它是一個可以獲取任意數據,並生成靜態化網站的系統。這一次,就讓我們以 Calpa 的技術博客作為例子來開始架構網站吧。

....繼續閱讀全文內容
2018-11-16閱讀 

GatsbyJS 入門(一):打造開箱即用的現代化前端網站

GatsbyJS 是一個現代化開發網站的網站產生系統,擁有完整、豐富且開源的生態圈。它利用 React + GraphQL 產生的多頁面應用,讓前端工程師,編輯,用戶都感到滿意。就讓我們一步步地探索這個系統吧。

....繼續閱讀全文內容

前端工程師的日常修煉清單

學習如逆水行舟,不進則退。透過這個清單,我可以不斷學習前端知識,掌握更新的技能,天天進化。

....繼續閱讀全文內容

透過 TDD 模式學習如何實現各種 npm 工具

在程序員的日常精進之中,閱讀優秀的代碼是必不可少的。透過 TDD 的開發模式,可以模仿那些優秀的代碼,從而提升自己代碼水平。下面介紹如何從零開始搭建 TDD 環境,並構建 isEven 代碼。

....繼續閱讀全文內容
2018-10-25JavaScript 

power assert - 更智能、優雅的全方位 assert 斷言庫

在寫測試代碼時,以往我們需要翻閱文檔,學習各種 API 才能明白如何操作斷言。而現在我們可以透過 power-assert 的 assert 方法來減輕調試壓力。不僅如此,它還提供更加直觀,具體的運行效果,幫助 DEBUG。寫測試代碼,其實可以很容易。

....繼續閱讀全文內容

深入淺出代碼優化﹣if/else

對於代碼裡面的 if else,我們可以使用邏輯判斷式,或更好的三元判斷式來優化代碼。除了可以降低維護項目的成本之外,還可以提升代碼可讀性。就讓我們從最簡單的 if else 例子開始吧。

....繼續閱讀全文內容

關於那些變化萬千,開箱即用的 Promise 高度封裝方法

在日常開發中,我們少不了使用 Promise,而透過封裝抽象方法,可以避免造輪子,寫出更加優雅的代碼。例如:將任意函數,化為具有異步能力的函數、改裝成具有並發上千萬請求的函數、使用 Web Worker 來使用不同線程、暫停若干秒再繼續。這裡就讓我們一起來動手封裝這些方法吧。

....繼續閱讀全文內容

Hackoberfest 2018 ﹣ 面向所有人群的開源社區最大活動

世界上不同的程序員,因開源活動而連接一起。這次 Hacktoberfest 活動除了可以拿到活動的限量衣服和貼紙之外,更可以認識到世界上不同的程序員。我看著不斷而來的討論和 PR,我找回了自己在編程上的熱情。如果你有興趣參與開源活動,但不知道如何入手的話,它會是一個不錯的起點。

....繼續閱讀全文內容
2018-09-27閱讀 

lozad.js ﹣ 高性能、無依賴的純 JS 任意元素懶加載插件

為了提升用戶的加載頁面速度,我們可以使用懶加載這個方法。當用戶打開頁面的時候,只需要載入首屏的資源,從而節省流量,提升加載速度。而用戶滾動到圖片佔用位置,瀏覽器才載入圖片資源。利用 `lozad.js`,我們可以簡單容易地懶加載圖片。它是一個可以單獨運行的工具,gzip 後的體積只有 910B,可以說是超輕量的工具庫。除了加載圖片之外,它還可以加載任意元素,例如 iframe,影片。在過去的一年,博客就已經啟動這個懶加載的功能了,也算是通過了眾多不同用戶的考驗了。

....繼續閱讀全文內容

網站性能調優開發工具: Lighthouse, Puppeteer 以及進階部分丨 Google 開發者大會 2018

這次 Google 開發者大會請來了 Lighthouse 的工程師 - Eric Bidelman ,分享如何簡單地使用 Lighthouse, Puppeteer 來自動化我們日常的流程。它是一個開源的自動化工具,用於改進網絡應用質量。您只需要提供網址,它就測試該頁面,並生成頁面性能報告。你可以看看採取哪些措施來改進您的應用。

....繼續閱讀全文內容

如何使用輕量級的 day.js 處理複雜日期?

day.js 可以提供處理日期的方法,並且和 Moment.js 擁有一模一樣的方法。使用輕量 day.js 能夠大大省下用戶需要加載的體積,加速網站加載速度。

....繼續閱讀全文內容

【譯】以申請大學流程來解釋 JavaScript 的 filter 方法

如果你熟悉申請大學流程的話,你也可以理解 JavaScript 的 filter 方法。相對於 JavaScript 裡面的 map() 和 reduce() 方法來說,filter() 方法也許是最一目了然的方法。

....繼續閱讀全文內容
2018-09-08工具 

GitGuardian - 開箱即用的 GitHub 敏感信息洩露自動提示平台

Github 作為程序員必爭之地,上傳的代碼無可避免地遭到 24x7 的自動機器人掃描。百密一疏,就算是安全意識良好的同學也會不小心上傳敏感信息。若是使用 GitGuardian 的話,我們可以馬上收到通知,處理問題,及時止血。

....繼續閱讀全文內容

Google Chrome 69 地址欄隱藏子域名後暴露的安全問題

定期更新軟件可以修復其自身的漏洞,即使是 Google Chrome,它的更新也是有安全問題的。在 Chrome 69 的版本裡面,`www` 被認定為 `trivial` 的子域名,因而隱藏了它之前的字眼。雖然可以提升一點用戶體驗,但卻帶來了另外一個風險點。。。

....繼續閱讀全文內容

vtop ﹣ 一個你用了就會愛不釋手的圖形化進程管理工具

當我查看 CPU 和系統狀態時,我希望可以更加快捷,直觀地找出問題所在。 vtop 則可以幫助我們節省分析過多數據,還提供 hjkl 一樣的 vim 鍵位,非常方便易用。如同 top 一樣,它可以顯示系統中各個進程中資源佔用狀況,並終止特定進程。

....繼續閱讀全文內容

來杭工作兩個月後的生活與工作總結

時光飛逝,轉眼已經離開香港兩個月。上有天堂,下有蘇杭。我也開始習慣這裡的生活,無論是生活節奏,還是工作習慣,都有所不同。這就是我這些天來最大的體會。

....繼續閱讀全文內容
2018-07-29JavaScript 

Uncaught ReferenceError: regeneratorRuntime is not defined 解決方法

async/await 能讓開發者享受異步操作的快感,解決回調地獄的問題。然而,編譯器對於 async/await 的編譯有時候卻不和我們想象中的一樣。透過安裝正確插件,或改回 Promise 版本,我們可以解決這個問題。

....繼續閱讀全文內容
2018-05-01閱讀 

關於作者

時光荏苒,歲月如梭。不知不覺之間,我就已經來到杭州網易從事前端開發的事業。過去,我在香港科技大學就讀化學及環境工程,期間自學前端技術。

....繼續閱讀全文內容

【方法】在直接複製貼上內容的時候,可能已經不知不覺注入了一段不可視的「空白」

趁著深夜有空,我就翻譯了一篇有趣的文章。這篇文章是說如何插入任意文本到任意文本。有時候,文章都會被某些網站會直接引用博客內容。。。這一類的插入空白字符串方法,可以成為其中一個有力的追蹤源頭的線索。

....繼續閱讀全文內容
2018-03-28閱讀 

知乎無限 live 數據流網站

一直收聽知乎無限 live 的時候,我都會想:如何才能更有效率地收聽這些計畫內的 live 呢?於是我心血來潮,把無限 live 的資料拿了下來,然後做一個數據流的網站。這個網站展示和源碼已經放在 Github。這個項目可能適合那些喜歡看到很多數據的同學。。。

....繼續閱讀全文內容

Gatsbyjs async/await 更新報錯解決方法

當我在更新 gatsbyjs 本體和 `gatsbyjs-*` 插件後,就發現構建 JavaScript 代碼的時候失敗。解決問題的過程,需要多聯想關鍵字。但簡單來說,只要安裝正確的 babel 轉換插件,就可以解決這個問題。

....繼續閱讀全文內容

Gitalk Error: Validation Failed. 442 報錯解決方法

最近忙著大學的事情,少了時間寫博客文章。可是沒想到在過去那一篇文章發佈之後,就遇到 Gitalk 評論區出現 Error: Validation Failed. 這樣的問題,在 Github 上面和網友討論之後,想出了一個解決方法,希望可以拋磚引玉。

....繼續閱讀全文內容

美化 console.log 輸出

console.log() 這一個方法可以說是前端工程師最常用的調試方法之一。當我在研究音樂播放器 Aplayer 源碼的時候,發現其中有一行有趣的代碼,可以在 console 裏面輸出自帶顏色的圖案,故在此記錄一下。

....繼續閱讀全文內容
2018-02-13閱讀 

博客域名續期

在域名過期之前的大約一個月,Namecheap 這一家域名公司就已經提醒我要續期了。現在我的域名是使用 Namecheap 這一家公司,無論是收費還是服務,都是不錯的。如無意外的話,我應該會繼續用這一家公司,避免搬運域名的麻煩工序。

....繼續閱讀全文內容

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

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

....繼續閱讀全文內容

Node-prune﹣﹣專門移除 node_modules 不必要檔案的輕量工具

如果你有試過打包整個 Node 項目到服務器上,那麼你發現自己的項目體積比較大,其中一個原因是 `node_modules` 文件夾包含很多不必要的檔案。在使用 npm 安裝不同插件時,往往會包含很多不必要的文件夾,例如`example`, `doc`。要麼我們就是手動刪除它們,要麼我們就是自己寫一個自動腳本。而開發 Koa、Co、Express 的 TJ 大神則提供了一個簡單輕巧的工具。我們可以學習一下他的思路,以及使用這個工具。

....繼續閱讀全文內容

你可能不知道的 JavaScript 代碼規範

良好的代碼規範,能夠提高代碼的可閱性,使得項目維護更友好。除了自己設定一個規範外,我們也可以借鑒一下現在流行的代碼規範,讓我們成長之後,再去看細節。

....繼續閱讀全文內容

參加八次黑客馬拉松的個人體會與總結

與其說黑客馬拉松是一場比賽,不如說它是一場程序員的盛會。作為一個前端開發者,也是蠻喜歡參加這樣的比賽。畢竟可以把自己的想法,在 24 小時之內把自己的想法,或是按著比賽主題做個原型出來。無論你是什麼技術背景的人,都歡迎你來參與這些盛會。

....繼續閱讀全文內容

前端程序員的必備工具清單(MacOS)

工欲善其事,必先利其器。一套完善的工具可以幫助我們事半功倍。而作為前端程序員的我,也是花了點時間為自己配置了一套工具。如果你也是使用 MacOS 作為你的開發系統的話,那麼你可以看一下這篇文章。

....繼續閱讀全文內容

【圖多】《遠征成功﹣﹣一個香港人北上杭州豬場的前端面試之路》

首先,我要感謝網易。作為一個香港人,能夠拿到杭州的面試機會,實屬機會難得。這次的兩輪技術面試,考察點廣泛而深入。雖然問題比較深入,但這讓我感覺對於技術要求比較高,這是一件好事,因為可以反映公司對於技術的重視。在大四的這一年裡,我會繼續努力,爭取時間學習一個。本文將會記錄我面試時遇過的問題,以及作為一個香港人在杭州遇到的困難。。。

....繼續閱讀全文內容

異步操作見聞錄

異步操作是非常常見的操作,也是其中一題常見的前端工程師面試題目。在日常開發中,我們會和伺服器交互,或者是和用戶的行動作出反應,比如說監聽某些點擊事件。這個時候,其實我們是執行了異步操作,我們需要等待對方若干時間才能收到返回值,甚至是一個錯誤的值。。。因此,異步操作很容易產生一些誤會。這裡,我會說一下異步操作,及其返回的處理方法。

....繼續閱讀全文內容

React-markdown -- 實時渲染 Markdown 的 React 工具

React-markdown 可以把 markdown 語句轉譯為 React 組件,十分方便使用。

....繼續閱讀全文內容
2017-08-27React 前端 

React 應用輕量化(一)Source Map

create-react-app 提供了很方便的創建 React 應用途徑。它已經把 webpack, Babel, Autoprefixer, ESLint, Jest 等常用工具打包進去。可以說是一個非常方便,好用的製造 React 應用工具。當我打算把包裝好的檔案推上去的時候,我卻發現打包之後的檔案大小有點大,因此我就開始優化這個網頁應用了。第一點我優化的地方就是 Source Map。

....繼續閱讀全文內容

善用 Github Issue 的開源評論插件 -- Gitalk

以前,我的博客是用 Disqus 的評論插件,但是無論是載入速度,還是樣式上,都是有所缺乏的。我一直沒有安裝其他的評論插件,因為覺得搬家有點麻煩。但是當我試用一下之後,我就覺得這個插件安裝很方便,功能也很實用,尤其是可以寫 Markdown 評論,讓我非常喜歡這個插件了。

....繼續閱讀全文內容

項目代碼調試:提問前要做的六個步驟

上天對於每個地球人都是公平的,每個人都一天只有 24 小時。為什麼有的人會停留不前,有的人卻會不斷有所成長?其中一個原因是當遇到問題時,他們解決問題的方法是非常不同的。同樣是遇到問題,與其伸手,等其他程序員幫助去解決問題,倒不如自己先嘗試各種方法,然後才問人家。。。我會在這篇文章簡單說一下在你提問之前,你可以做的六個步驟。

....繼續閱讀全文內容

簡單易用的開源 JavaScript 動畫圖標庫 -- Titanic

如果你用過 Font Awesome 等圖標,你可能會覺得它們很好看,用起來很很方便。但是,在用戶點擊這些圖標的時候,它們是不會有反應的。如果有這些圖標會動的話,那就更加好。Titanic 提供一系列的動畫圖標,以及以 JavaScript 的調用圖標動畫的方法。

....繼續閱讀全文內容

神兵利器 -- HHKB Pro 2 開箱文

我一開始拿到 Happy Hacking KeyBoard Pro 2 時,我就問為什麼鍵盤可以完全沒有字的,那叫我如何輸入。。。雖然我可以盲打(不看鍵盤直接輸入),但也許我未必可以有能力使用這樣的鍵盤。但寫了一天代碼之後,我才發現,原來這一切都是自己的猜疑而已。這個鍵盤打起來就是一個字,爽。

....繼續閱讀全文內容

2017 年香港開源年會後記

大約兩個星期之前,我在 Facebook 上看到 2017 年的香港開源年會的消息。我想,我是不是可以透過這個機會,認識一下不同領域的程序員呢。於是,我在 EventBrite 上面買了學生票。但最終我拿到 VIP 票了,感覺有點激動。我把這一次的會議做了幾點筆記,也許,每一個人都應該參加最少一次如此有規模的大會。我會在這裡說說我參與這次會議所發生的一些事。

....繼續閱讀全文內容

香港開放數據平台 - 從入門到放棄

經過 2017 年香港開源年會之後,我都沒有去看香港的開放數據做得怎麼樣。今天香港正懸掛八號風球,正好是一個機會去了解一下。香港政府有一個開放數據平台,資料一線通,以多種檔案格式提供多個政府部門類別,機構的一些查詢資料,比如說天氣預報,中學教育統計資料。值得注意的是,這些檔案並不是 ODF,而是 xls, xml, csv, json, gif, txt, tif。。。

....繼續閱讀全文內容

5分鐘製作 Markdown PowerPoint

利用 markdown 製作投影片,其實可以很簡單。

....繼續閱讀全文內容

JavaScript Array.map(parseInt) 錯誤解決方案

如果我想轉換數組裡面的字符串為數字的話,很自然就會想到 `map` 和 `parseInt` 這兩個方法。但是用起來的時候卻不是我想要的結果。

....繼續閱讀全文內容
2017-05-30閱讀 

為什麼要寫技術博客?

從第一篇《Hello World》文章,我已經開始寫博客半年了,一共寫三十多篇,平均一個禮拜出一篇文章。其實,我沒有想那麼多,直接就開始寫文章了。可能我的博客沒有其他人寫得那麼好,但是我依然堅持寫博客。每一篇文章是需要一點時間構思、撰寫,但是這點時間是很值得的。

....繼續閱讀全文內容

打好 JavaScript 基礎的6個步驟

平日開發的時候,我們會選擇使用一些框架來避免重複製造輪子,減輕我們的工作量。然而,我們卻不能透過使用更好的工具,或者更換框架來解決一些基礎開發問題。因此打好基礎很重要,不但決定前端程序員解決基礎問題的能力,還決定了面對日新月異框架時的掌握能力。當我開發 React 應用的時候,遇到的問題多是我對於 JavaScript 的理解不夠充分。因此,我在這裡寫一下如何打好 JavaScript 基礎,希望拋磚引玉 XD

....繼續閱讀全文內容

深入 ECMAScript 的數據類型

每一種編程語言都有數據結構,但他們各有不同之處。JavaScript 是一種動態語言,變數的類型不用提前聲明,你可以使用同一個變數來保存不同的數據類型。

....繼續閱讀全文內容

初探正則表達式

正則表達式是一個非常簡單的語法,但它也是神兵利器,可以說是程序員必須要理解的工具之一。它就像一本會不斷成長的寶刀,隨著程序員對它的理解,它的威力也跟著增強。

....繼續閱讀全文內容

CreateListFromArrayLike called on non-object 報錯的解決方法

如果你遇到 CreateListFromArrayLike 的報錯的話,那麼可以看看代碼裡面調用 apply 方法的地方,call 是用0個或者更多的參數,而 apply 則是用一個數組。

....繼續閱讀全文內容
2017-04-23閱讀 

hackUST 2017 後記

經過一天的努力,我們成功進入最後5強。這次比賽都幾好玩,基本上由第一天中午吃到晚上,然後第二天回來也是吃吃吃。雖然最後沒有取得獎金,但也是學到很多的知識。比如說如何解決安裝npm package問題,更新npm package問題。

....繼續閱讀全文內容
2017-04-08HTTP 

14種常見的HTTP狀態碼

當用戶向伺服器發出請求時,狀態碼能夠描述伺服器返回的結果。

....繼續閱讀全文內容
2017-04-01閱讀 

Git多人合作開發工作流程

個人開發項目和與他人一同開發項目是兩回事來的

....繼續閱讀全文內容

localStorage vs sessionStorage

LocalStorrage 和 SessionStorage 的對比

....繼續閱讀全文內容