簡介 React-Three-Fiber,淺談 WebGL 及 Three.js

WebGL (Web Graphics Library) 是一個基於 OpenGL ES 2.0 的 JavaScript API,允許瀏覽器在無需任何插件的情況下,透過 <canvas> 元素進行 2D 或 3D 的繪圖。

其中,OpenGL ES (OpenGL for Embedded System) 是 OpenGL 的精簡版本,專門為了嵌入式系統、行動裝置和瀏覽器設計。其渲染(Rendering)的基礎原理是將給定的數據計算後,產生出最終畫面。

繼續閱讀

Hexo Icarus 顯示瀏覽量(三):Hack Icarus 頁面,串接瀏覽量 API

上一講透過 Google Analytics 加上 AWS Lambda,我們完成了透過 Page Path 來取得 View Count 的 API,接下來便是將瀏覽量顯示在 Hexo Icarus 主題中的預覽及內文了。

由於 Icarus 本身提供的設定檔支援的是不蒜子,和我使用 Google Analytics 作為瀏覽量資料庫的方式不同,只能另尋他法。

在瀏覽一些其他的實作方法後,發現有些方式能夠透過修改 Icarus 的模板來加上自訂內容,然而在當下專案我所使用的 hexo 5.4 和 icarus 4.3 並沒有發現類似的模板可供修改,直接進入 node_modules 修改 Icarus 產出的頁面顯然會在重新安裝時被覆蓋,不是個太好的辦法。

因為我想加入的自訂內容僅僅是「瀏覽數」而已,所以在不變更 Hexo、Icarus 的版本前提下,我選擇了一個可能也不太「乾淨」的方法來達成目的,Hack Hexo Icarus 的頁面的 HTML 來插入內容。

繼續閱讀

SCSS 筆記

本篇記錄前端 SCSS 的一些筆記。

SCSS 和 Sass 的差別在哪裡?

Sass 為 Syntactically Awesome Style Sheets 的簡稱,是一種預處理腳本語言(Pre-processor scripting language),將 SASS File 編譯後可得到一般的 CSS File。

那麼,SCSS 呢?

繼續閱讀