2017年3月7日 星期二

手機網頁開發設計注意事項

開發手機網頁有很多地方與開發在電腦上用遊覽器看的網頁有很多不同的地方。
下面列出一些一定要注意的基本事項,藉此提醒同學。

2017年2月1日 星期三

建立你的前端開發環境(一) - Rollup



為了建構一個讓自己可以開心工作的js前端開發環境,嘗試了了Grunt,Gulp,一直到目前最多人的 Webpack

Webpack 真的很不錯,外掛資源也豐富,但是總覺得輸出封裝後的code有些多餘(甚至你不會想要看他),其實有時候只是需要封裝一個小模組,可能一些小演算法,或許用了ES6語法,想輸出處理成乾乾淨淨的js。這時候可以考慮使用 Rollup.js , 比起 Webpack 它更小更快,還能刪除多餘的程式碼(沒有用到的模組,rollup不會把它封裝到你的js),但是最大的重點就是,我實在不想為了寫個小東西就去建構一個肥大的webpack環境....

建立你的前端開發環境(一) - Rollup

2016年10月18日 星期二

Sublime Text 整理 vue Template

自從開始用Vue框架後,一直很快樂的在coding前端,不但學習曲線低,效能也上得了檯面
最棒的是可以像React自訂Component,不但架構清晰,如果規劃的好,Component還可以拿去別的專案使用。
vue.js 允許你自己定義 .vue 檔(Component檔),你可以把Template,js,css(less、sass..) 全部封裝在裡面,最後透過 像是 webpack 或者 rollup 打包進你的專案使用。
筆者本身使用 Sublime Text 作為開發IDE,你可上去 packagecontrol.io上查看vue的相關資源,目前有以下三個。
  • Vuejs Snippets - 提供vue Snippets
  • Vue Syntax Highlight - vue語法支援
  • Vuejs Complete Package - vue語法自動完整
有了以上這些掛件,基本上可以讓你在Sublime Text很開心的開發vue.js
最後你如果有使用版型整理,會發現並沒有支援.vue檔的掛件 (這件事曾將讓我這偏執狂很很不開心XD)
但是只細觀察後你會發現一件事,.vue的內容,其實是可以符合html規範的,所以當你想要整理.vue的Template時,只要把你平常整理html的方法拿來整理.vue就行了。
詳情請見以下連結
碼農們! 繼續快樂的開發吧!

2016年10月13日 星期四

新一代的js套件管理工具yarn - 取代npm的工具

談一下突然爆紅的Yarn,這是Facebook最近發布的一款依賴包安裝工具。

比較npm有什麼看得見的優勢? 首先,他非常快,快到見鬼XD

祥請見我新部落格.. https://cainmaila.github.io/2016/10/14/use-yern/

2016年10月7日 星期五

node-rados安裝與使用 - nodejs與Ceph通訊

最近開始使用nodejs與公司的Ceph串接資料,中間需要透過一個叫做node-rados的掛件工具,不過一開始就在安裝時踩了不少坑,這裡做一下備忘,也提醒之後要使用的人。

詳細請見
https://cainmaila.github.io/2016/10/07/how-to-install-node-rados/