個人的 CSS 習慣

這邊紀錄一下個人寫 CSS 時的習慣,不是 BEM、ATOMIC 那些命名,只是紀錄程式的排列方式,有些我也還沒嚴格遵守,透過這篇整理來做為往後的參考。

紀錄不包含 postcss 的部份

css

轉轉徵人頁面開發記事

banner

徵人頁面

這次的專案需求相對自由,不用管 IE 死活,對技術也沒特別要求,加上只有單一頁面,所以我決定用最單純的開發環境來進行。

主要架構

  • 主框架:Polymer,用官方的 polymer-cli 創建專案。
  • 輔助工具:BrowsersyncSVGOMG(線上 SVG 壓縮工具)

沒有 webpack,只有用 polymer-cli 預設的指令打包壓縮。

Next.js 試用感想

在使用過 Vue 社群的 Nuxt.js 開發過一次專案後,便對 React 方的 Next.js 抱有很大的興趣,尤其在知道 Nuxt 是由此啟發之後,對他抱的期待又更高了,於是在專案上線後,就轉去摸索了 Next 幾天,來試試看能不能把很久之前的 React 專案搬到上面,以下大概講一下那段時間的心得。

以下以 3.0.1-beta.X 為主

Vue.js 大型專案開發心得

歷時數月的田田蔬果終於正式上線了。

這次專案是用 Vue 作為主軸來進行開發,對公司以及對我來講,不只是第一次的體驗,也是第一次將此類技術直接用在一個完整專案,來達到前後端分離的目標。

Vue

摸索 Elm

banner

前陣子在考慮摸索 Elm,剛好在那時候也在找當季蔬果的資料,後來想想,乾脆用這些資料來當作摸索的題材,於是這網站就誕生了,以下來大概講一下感想。

選 Elm 的原因

很大一部份其實是逃避現實,由於 JavaScript 的 framework 跟 library 大量出現,而且不僅是前後端,還延伸到桌面軟體、APP 甚至是 IoT 上。以前只是將 ES6 轉成 ES5 的 Babel,現在除了將可能會有的 ECMAScript 語法轉換以外,還可以讓 JS 支援一些不存在的語法(比如 Flow),再配上 webpack 還可以進一步定義更深的語法結構,雖然不是說非得全包全學不可,但五花八門的輪子不斷冒出,當下感覺是非常的吃不消。

當時摸的是 React,雖然我個人挺喜歡這 library JSX 語法我很討厭,加上圍繞著 React 衍生的各種有的沒的花樣,輕則只是加點功能,重則有如在這之上又加了自創的語法一般,導致整個檔案看起來就像是三四種語言或語法風格的大雜燴,但不得不說,React 生態系真的把 JS 玩得很溜,比如 styled-components 又是一絕,但又要多塞一種風格在裡面我得考慮考慮。

原本下一個想碰的是 Cycle.js,但後來想想,Redux 跟 Cycle.js 都有跟 Elm 借鑒一些東西,加上繼 Redux 出現之後,Elm 被關注的程度似乎有上升的趨勢,不如就直接學 Elm 看看,而這也是我第一個學的轉 JS 的語言。

elm

這幾年使用 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 裡出現過。

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