嗯~已經 富奸 了幾個多月,拖欠了一拖拉庫想寫的 Blog 文章還沒打,在趕稿前,就先來說說這個月究竟都在忙些什麼,也順便紀錄當個 里程碑!
# 關於想寫的文章
其實從 七月 開始,就已經積欠了幾篇想寫的 Blog 文章,包含七月 小凱蘿生日 的台東遊、各地的美食食記、每月看電影 的心得整理和一些技術相關的心得文章等。太多想寫的東西,但也太懶太拖了,嗯 … 繼續加油吧!
# 最近在忙的事
投影片 Framework
上個月在臉書的 Front-End Developers Taiwan 看到幾位大大推薦幾個有趣的 投影片 framework,最吸引我的就是 reveal.js 和 impress.js!尤其是後者,很容易上手,也很讓人驚嘆,雖然後來我才發現開發者的靈感是來自頗負盛名的 Prezi,但對於能以這樣的方式呈現投影片,只能說真的 太 酷 惹!
台灣製造!?
在玩過 impress.js 後,很想立刻推薦給朋友;不過,對於要製作一個好玩好看 impress.js 投影片,除了要有良好的 呈現設計 外,還要略懂 HTML 和 CSS (嚴格來說…啦);如果因為這樣就錯過這麼棒的東西實在太可惜了!
雖然 impress.js 的 wiki 有一些製作工具,BUT!基於 超想分享,加上正在學習 React,再再加上總想來點 台灣製造 的情懷,於是就熱血地展開這個月的開發之路 XDD
動機已經提過了,現在來聊聊目的,其實很簡單,就是讓想製作 impress.js 投影片的人,能有一個 WYSIWYG (所見即所得) 的編輯器,在不用撰寫任何程式碼 (這裡指的是 HTML、CSS 和 JS) 的情況下,作出作品來 炫耀 分享給朋友看!
# 練習 & 開發
Start with…
這個作品主要是以 React 搭配 Redux 開發製作 impress.js 的編輯器。
我的 開發環境 是用 Cloud9,這是近來習慣使用的 Online Editor,原因無它,就是 方便 和 好 DEMO。
而開始的樣板是使用 Dan 的 react-hot-boilerplate,為的是它提供的 Webpack、webpack-dev-server、react-hot-loader 等,使用這個樣板省了不少建置開發環境的時間;不過,就在開發到一半時,Dan 在 README 中寫了 This Is Experimental and Incomplete! … 尷尬 XDD
練習項目
除了邊學邊寫 React 和 Redux 外,在開發過程中也幾乎使用 ES6 (ES2015) 和 SCSS (SASS) 作撰寫,讓自己更熟悉它們。
因需求所致,我也選了幾個 framework 和 library 來學習和使用:
- 整體框架 : react-bootstrap
- HTML 編輯器: react-tinymce
- 教學導覽 : react-joyride
- 部分動畫呈現: Animate.css
正在改善
在大致的功能上已經完成,但於 各家瀏覽器 和 螢幕尺寸 的支援度上還有很大的問題;而目前在 Mobile 和 Pad 上的體驗不佳,所以基本上目前是不支援的,所以還有很多的問題需要思考和改善!
# 這就是 [ Oi ]
為什麼叫作 [ Oi ] 呢?
是因為在看到 impress.js 當下真的讓我很興奮,我也希望這個編輯器,能讓人感到興奮,而且很 印象深刻!
所以,[ Oi ] 就是希望能讓人感到 Oh! impressive!,哈。
後記
以上,就是為什麼會累積這麼多文章沒寫,歡迎捧捧場,可以的話麻煩給些鼓勵和建議唷! - [ Oi ]。
也非常感謝給我 的大大們,希望這個作品能讓更多人知道,也希望能有更多人能一起開發!
That’s it, DONE!