這幾年使用 Linux 當一般作業系統的感受

banner

上圖是我的 Linux 現在的樣子:

  • 發行版:Manjaro Linux
  • 桌面環境:KDE 5 Plasma
  • 佈景:Maia Theme

Linux 在我大學期間就開始嘗試拿來作為一般的作業系統使用,但那段期間其實一直都在 Windows 跟 Linux 之間切換(你知道的,遊戲),後來這兩年開始固定用 Linux,工作時用 Mac,基本上已經沒怎麼碰 Windows 了。

當然,這個過程並沒有讓我成為什麼 Linux 大師,我也沒有這個打算,只是嘗試能在日常生活中使用而已。前一陣子看到這篇文章後覺得很有趣,於是決定也來寫篇自己的經歷以及感受。以下我會將這篇文章分成數個大項目來做探討。

裏面一些資訊可能與印象有所不同,請見諒。

React/Redux 一個月的開發感想

banner

之前自學 React 時寫了一個簡單的線上簡歷,而我也確實靠他加分而拿到了工作,之後進去也是開始用 React 建立頁面,之後加上了 Redux;雖然這兩個總天數加起來大概就一個月,不敢說自己有摸清這些東西,不過還是就開發經驗來寫一些感想。

先講結論

React 其實不討厭,還算是喜歡的;但若是要我向別人推荐的話,我會建議學 Vue.js 入門,熟了再考慮要不要碰 React。若是不排斥用其他語言轉換成 js 的話,Elm 看起來是個不錯的選擇,但 ES6 開始普及之後我對這方面的興趣不大,所以這個建議比較不負責任一點。

摸新東西當然都會面臨挫折、觀念轉變以及學習曲線的問題,但事實上,不把前後分離這件事考慮進去的話(畢竟這是前端 framework 最主要的目的),失去的不會比獲得的感受來的少多少,頂多接近打平,剩下的端看你的 M 體質點多高來去彌補。說實在的,當初把玩 Rust 語言被摧殘到躺地板時我覺得還比較爽一點。

React.js 筆記 - Flux 的個人理解

banner

React.jsFlux 的部份我看了好久還是不太能理解他的意思,這幾天總算理出點頭緒(雖然不知道對不對…),在這邊做一點紀錄。

簡單介紹

Flux 算是一套前端的處理流程,一般的講法就是前端版的 MVC,主要分四大部份:

  • Action: 事件觸發或是跟後端溝通後,發送資料給 Dispatcher。
  • Dispatcher: 根據資料內容,分派至對應的函式做處理(通常是參照資料裡面的一個 type 屬性)。
  • Store: 儲存負責處理資料的函式,向 Dispatcher 註冊後,再由 Dispatcher 負責分發。
  • View: 接收處理後的結果並更新頁面。

這邊所指的資料在 React.js 裡叫作 state,當 state 更新之後 View 就會對頁面做相對應的更新。

用 jQuery 當範例

以點擊按鈕就新增一張卡片為例,一開始用 jQuery 寫時,大概會像下面這樣子:

1
2
3
4
5
6
7
$('#addCard').click(function() {
//- 新增數據
/* do something */

//- 生成 html 並放進網頁裡
/* do something */
});

記憶中看過最不尊重設計的一件事

banner

這件事其實很久了,只是最近又想到它,所以乾脆紀錄下來好了。

思源黑體,一套完整的中文字體,可以在網頁上完整顯示,不會因為找不到字而出現豆腐框為主要目標,現在應該很多人都知道這個字體了;Google 那邊則另外命名叫 Noto Sans,不過重點不在這,這邊只是要紀錄一下思源黑體剛發佈時發生的事。

當時在 Adobe Typekit Blog 上,官方發文介紹了這個字體的誕生,談了一下設計的人員,以及講解一些中文字在使用漢字的國家之間寫法的差異。

但有個傢伙卻開始在留言中大談古字的真善美,談台灣教育部的不是,義正辭嚴的要求遵循「正統」繁體中文的字體寫法,鬧了一輪後還去辦了個 GitHub 帳號跑去發 issue 再來一次,硬要這群國外設計團隊也該當個考古學者;在這串上面大放厥詞拍拍屁股後,直到現在再也沒有在任何 issue 裡出現過。

網路留言看久了之後感覺,那種習慣把自己叫「在下」的人,要馬只是單純宅了點,要馬就是個白目。

D3 + p5.js 筆記 - 自訂 preload 的 Ajax

p5.js 已經內建數種檔案請求的方式,這邊紀錄一下自己建立 ajax 請求註冊到 preload() 的方式(以 D3 為例)。

這邊要注意的是,在第 10 行的部份,請求後的資料不能直接指定給預先宣告的變數,否則 setup() 取資料時會是 undefined,或者可以這樣宣告:

1
2
3
4
5
'use strict'

// load function
let tmp = { list: [] };
// ---

在取得資料後直接將資料指定給 tmp.list,在 setup() 裡直接以 data.list 的方式取值即可,而範例裡的 returncallback 都是必要的,省略任何一樣都會出現 undefined

不用 new 的方式可以到這裡檢視。

D3 + p5.js 筆記 - 介紹 p5

先來大致介紹一下 p5.js

這是 Processing 團隊移植的 web 版本,除了 p5 之外還有一個是由 jQuery 作者自己實現,叫 Processingjs 的函式庫,可別搞混了。

為什麼選擇 p5?

以前大學時有教授教過 Processing 算是因素之一,入門上不算太難。

在圖片繪製上,p5 也簡化了一些步驟,比如畫線的時候,canvas 的畫法是

1
2
canvas.moveTo(x, y);
canvas.lineTo(x2, y2);

p5 只要一個 line 就可以解決。稍微試過 Pixi.jsEaselJS,這兩個基本上跟 canvas 原本的畫法差不了多少,畢竟定位是遊戲引擎,p5 是繪圖函式庫。

D3 + p5.js 筆記 - 前言

這陣子看了點 D3,並找了官方 wiki 的範例來試試,不過不是用 SVG,而是用 canvas 來畫。

之前要寫的網站要生成簡易的圖表,但因為沒學過 D3 的經驗(當時也來不及),所以找了現成的 Chart.js 來用,除了這套之外,之後也在 feedly 看了不少圖表生成的套件介紹,蠻多都是用 canvas 的。不過這倒也不是什麼選擇 canvas 的原因。

單純犯賤罷了…

然而,D3 對 canvas 的支援不好,不過這也不是很意外。問題在於要怎麼用 D3 把處理後的資料給 canvas 畫,根據這裡的介紹,第三種方式算是我在網路上最常看見的,基本上就是處理資料並創建虛假的元素,假裝自己在操作 SVG,然後再把這些假元素吐出來再用 canvas 的方式畫出來,怎麼看都覺得…蠻蠢的。所以我比較偏好第二種方式,讓 D3 負責處理資料、生成刻度等等,再用 p5.js 直接畫上去。

總之,之後會加減從 D3 官方的範例裡面先挑簡單的例子來練習,也會原始碼放到 GitHub 上。