發表文章

目前顯示的是 2013的文章

AngularJS and jQuery 近期專案開發心得

圖片
最近好久沒寫文章了,因為這陣子遇到的事情太多太雜...,但是學到很多...,可是我沒有辦法一一記錄下來,...一時也提不起勁啊,這篇只好用一種當作日記的心情來寫寫了,請大家看看就好,不用太認真 xd,真的。

還有我不想跟大家筆戰,我只是分享一個專案同時使用 AngularJS 跟 jQuery 的感覺是什麼,是『AngularJS and jQuery』,而不是『AngularJS v.s jQuery』,更何況每個專案的體質本來就不同。



AngularJS  (logo來源)
前陣子社群非常活躍的一套 JavaScript Framework,我一直很想嘗試看看使用 AngularJS 是什麼感覺,但是我想一路走來的人都能理解,有時候寫玩具跟真正用在專案上是真的不太一樣的感覺 (當然自己的玩具也叫做專案xd),只是有客戶的苛求,比較能夠往更多地方鑽研,如果什麼事情都照著工程師的想法做,那當然做什麼都比較順,因為我們都知道,『怎麼做對自己比較方便,而且可以達到一樣的功能』,恩...有點離題了。

所以這次用在工作的專案上,因為專案的需求,會使用到較多的 Ajax 的 Request,來替換頁面上的內容,因為 AngularJS 順暢的 Data Binding 的特性,以及 View Template,因此感覺蠻適合使用 AngularJS 作為這次專案想用的 Framework,從學習怎麼用 $http 到串到專案的功能,大約不會超過4天。 (我必須說明這次真的有太多的時間花在學習 AngularJS 的架構)。

說實在的,如果我今天很熟練 AngularJS,我想時間開支不會超過4天,以開發速度來說,AngualarJS 真的是不錯的選擇,再加上我第一次認真用過MV* 架構的 Framework,寫起來程式碼真的有架構許多,說實在的,如果還有機會,我是一定會再使用 AngularJS,或是學習其他 Framework,工具雖然學不完,但是這些架構跟 Framework 的設計真的蠻值得學習。

不過從 jQuery 寫到 Angular,一定要完全忘記 DOM 這件事情,剛開始用 Angular 有點不習慣,動不動我就想要用 selector,但是... 真的,要學會『綁手綁腳』的使用 Angular,我現在也正在努力適應這件事。:)



jQuery
jQuery 算…

[Node.js Web Framework] Sails 檔案目錄結構

圖片
上一篇 [Node.js Web Framework] Sails 介紹與安裝 提到,如何安裝 sails 。
這一篇會接續上一篇所建立的 sails 的 web 目錄做一些簡單的說明。

1. sails new newProject
2. cd newProject

上次第一個步驟我們使用sails new 專案名稱,初始化一個新的專案,叫做 yourNewProjectName , 不過在今天這個範例我是把我的 project name 叫做 newProject。接著我們打開 (cd) 這個 newProject 資料夾。


[Node.js Web Framework] Sails 介紹與安裝

圖片
官網連結:sailsjs.org Sails 是一套執行在 Node 環境下的 Web Framework,其實它主要提供的功能跟 Express 是蠻類似的,一樣具有 MVC 架構,快速架設等優點,如果你平常都使用 Express,不仿試試看 Sails。

Sails 的優勢 具有自動產生 RESTful JSON API 的功能(REST Blueprints)。預設的情況下,當你每次 gen (產生,我都用 gen 代表 generate) 一個 controller 的時候,都是預設產生 CRUD 的方法 (method),當然也可以自己客製化 controller 裡面所有的 method。
而且可以利用指令的方式就可以產生 controller 以及 model 的 files,有些人認為這種 scaffolding 的方式跟 ROR 很像,不過這個就讓有學過 ROR 的朋友來感覺看看了,因為我沒寫過 ROR。

Node.js 開發環境的好工具 Nodemon

圖片
此圖截自 Nodemon 官網


Nodemon 官網:http://remy.github.io/nodemon/Nodemon github:https://github.com/remy/nodemon

今天要來推薦一個還不錯的工具給大家,Nodemon 這個工具非常適合在開發環境使用,可以隨時監控你檔案的儲存動作,然後幫你重啟 server,可以避免讓你一直 node ... node ... node ... 某一隻檔案,某種程度上我認為他跟 grunt-contrib-watch 一樣好用。相見恨晚啊...另外他也可以監控其他類型的檔案,像是 coffee-script 等等。



安裝方式:
npm install -g nodemon
-g 是全域的安裝方式,通常我也這麼做,這樣就不用在意一定要在特定的 folder 才能使用 nodemon,任何電腦的資料夾底下都可以用。


nodemon 某隻檔案:
nodemon [your node app]
Example:
nodemon app.js

最基本的用法大概是這樣,他應該還有其他有用的功能,只是我現在主要只有用最基本的這種。不過我記得我剛學 node 時好像還有另外一套叫做什麼 forever 的,忘記了 xdd
NPM 有很多工具常常會讓我驚訝 :)


使用 Node.js + SQLite3

npm 的 SQLite3 網址: https://npmjs.org/package/sqlite3SQLite 的官網:http://www.sqlite.org/index.html

SQLite 算是比較輕便型的資料儲存方式,適合開發時的時候使用,但如果是真的 Production 的環境就沒這麼適合。其實我以前沒想過 SQLite 這麼方便,大學還在學 PHP 時看到 SQLite 的章節是直接跳過的,因為當時的公司也沒使用 SQLite :P

SQLite 有以下幾點的特質:

輕薄短小,使用簡單沒有資料庫的伺服器,它是用檔案或是 memory 的方式儲存適合開發階段使用,儲存少量資料帶資料存在硬碟,存取速度稍慢沒有 user 權限設定的功能,較不適合儲存個人或私密資料

Node Knockout TW 2013 參賽心得

圖片
活動官網:http://nodeknockout.nodejs.tw/
時間 : 2013/11/9 ~ 2013/11/10


今年至今報了兩次黑客松,yahoo 的沒上,還好 node.js knockout tw 不需要審核,就在網路上跟別人組隊報名了。

人生的第一場黑客松


黑客松如果不知道自己為什麼要參加,或是不熟那項技能,腦袋的想法就會有點乾渴,今年的我就是這種心情,關於 node.js 我也僅僅用過 socket.io ,除此之外,我只會 frontend,然後...沒了。
( 其實出去比賽不是什麼難事,我自己個人比較擔心自己的能力沒有辦法 match 到自己的組員 )

安裝 Compass

圖片
compass簡介:

Compass 使用 Sass,而 sass 是一種 Css Preprocessor / Css Extension,
Compass & Sass 都是需要 Ruby 編譯
Compass 是一個 css 編寫 Framework (css authoring framework)
(題外話,像 Sass 這種透過編譯的方式就可以產出 Css 的 通常稱之為 CSS 預處理器(css preprocessor),當然世界上不止 Sass,很多人也聽過 less, stylus 等等的,可以看看 8 CSS preprocessors to speed up development time)

通常大家都會 Sass 搭配 Compass 做使用,為什麼?因為 Sass 搭配 Compass 更強大,這也是為什麼很多網路上的教學都會把這兩個一起做教學。

比方說 Compass 讓我覺得最主要的功能是 @import ,比方說我們需要用到 border-shawow,會幫你寫好所有的 css 前綴,像這樣:
@import'compass/css3/box-shadow'h1@includebox-shadow(3px) 而編譯後會得到的結果是:
h1 { -moz-box-shadow: 3px; -webkit-box-shadow: 3px; box-shadow: 3px; }
要開始用 Compass 以及想要擁有 import, sprites 等等的功能,你必須要有可以編譯 compass 的環境,或者是一些現成的工具,以下是介紹用 CLI 安裝 Compass。
compass 有很多很神奇之處,之後再聊 :) 我歡迎有人陪我一起學習。

Setup Compass Environment 主旨:說明如何安裝 Compass需要 Ruby環境我的作業系統是 Maccompass 官網的 install 說明

前端工作流程筆記

最近剛好在看一些前端工作流程 (Frontend Workflow) 的文章或是 slide,說到前端的工作流程,不外乎就是想要做到自動化,要『省時, 省力, 省麻煩...』,不過以我自己的認知,一個團隊,有人是負責 follow 這些流程的人,當然也有制定流程跟規則的人,不知道為什麼,以最近接觸 Grunt 的程度來說,我覺得一個團隊負責處理這些自動化流程的人真是挺不簡單,以 Grunt 來說,有這麼多 plugin,身為制定自動化流程的人,或許要很熟悉什麼套件做什麼事情,才會更適合某個專案使用。算了,其實我現在也沒到這個等級 ,這邊就不多談了xdd

以下是筆記的部分:
關於自動化工作流程,幾乎網路上的文章,都會提到 Bower, Grunt, Yeoman

Grunt 與 Bower

Bower 是 Twitter 開發的前端套件管理工具 (Frontend Package Manager)。Bower 需要 node.js 環境以及 npm。安裝: npm install -g bower。bower.json 可以先設定一些預設的相依性套件 ( bower 在 0.9.0 以前是使用 component.json , 0.9.0 之後使用 bower.json )
(這個跟 npm install 時要用的 package.json 很像)。如果編輯完 bower.json 之後還有其他相依性套件 (dependencies) 要使用,可以重新下指令:bower install 或是使用 bower install packagename --save。Grunt,一個可以處自動化工作流程的工具,如同 bower 一樣需要 node.js 環境以及使用 npm。Gruntfile.js 通常會放在你的根目錄下。這時候我有點疑惑...,有點分不清楚 Grunt 跟  Bower 的差別,上網找了一下解答

Sass 線上編輯器 : Sass meister

圖片
網址:http://sassmeister.com/ 功能: 線上編輯 Sass, SCSS使用如 Compass 等 Extension可 github 登入,可 Save Gist
像我昨天在寫 for 迴圈,只透過自己本機 watch 跟 compiler 效率很低,這種工具真的是太方便了。真是學習 Sass 的利器 :)

改變 yii 的 registerScriptFile/registerCoreScript 的檔案出現位置...

圖片
通常在 yii 載入其他 JavaScript 或是 CSS 檔案,都會用
Yii::app()->clientScript->registerCoreScript('jquery'); 
或是
Yii::app()->clientScript->registerScriptFile(Yii::app()->request->baseUrl.'/js/admin/bootstrap.min.js');

但是用這兩種方法載入 JavaScript 或是 CSS 的位置都很讓我頭疼...,完全插入在 <head>標籤之後。



這樣的安插位子有時候實在很讓人不解,因為這樣瀏覽器要 render 我的頁面的時候是這樣:

[快快樂樂學SASS系列] 四種 Sass 編譯後的風格(Output Style)

圖片
說明網址

Sass 編譯的風格總共有四種:

nested (預設的樣式) : 巢狀顯示expanded : 不要巢狀compact : 簡潔樣式,縮進成一行compressed :壓縮模式實測:

[快快樂樂學SASS系列] Sass v.s SCSS

這兩個名詞實在有夠饒舌,
Sass 跟 SCSS 對我來說只是寫法不同,
或許有些人習慣 css 寫法有 { } ,結尾有 ; 分號 ,
那麼你可能會喜歡用 SCSS。
簡單來說 SCSS 可以讓你直接使用 CSS 的寫法,
但附檔名是名是 .scss,也有人說這是 Sassy CSS。

如果要寫 Sass,要用縮排 ( indented syntax ) 表示,
我比較喜歡這種,我比較懶 :P,懶得一直補 { }... xd,
如果第一次寫 sass 要小心別踩到雷,可能需要練習,
( 結尾不能有 ; 分號,width:100% 編譯不會過,:後面要有一個空格,改成 width: 100%)
初學者可以選擇先從 SCSS 上手,
會用一些技巧之後轉用縮排的寫法,
也就是改用 Sass。

剛剛實驗了一下同樣的效果用 sass 跟 scss 寫的差別:
style.sass:
$primary_color : #fff $content_width : 980px body color : $primary_color width : $content_width - 20px a color : $primary_color
style.scss:
$primary_color : #fff; $content_width : 980px; body{ color : $primary_color; width : $content_width - 20px; } a{ color : $primary_color; }

不過編譯出來的結果都一樣:
body { color: white; width: 960px; } a { color: white; }
大概是這樣子,這種東西還真的不知道能寫什麼,真的是多寫才知道...
不過,這類的 CSS extension 實現了讓你用變數, 程式邏輯去控制 css 撰寫,的確是蠻有趣的。

雖然說當了一年多的前端現在才開始接觸這樣的 CSS extension,
不過不知道為什麼沒有相見恨晚的感覺,
我還是覺得手刻有手刻的好,
畢竟要在這些 CSS extension 大展身手也需要經過基本的手刻…

[快快樂樂學SASS系列] Sass 開發環境設定 (搭配 Grunt)

圖片
+  (Grunt img source : http://gruntjs.com/img/grunt-logo.png)
(Sass img source :http://sass-lang.com/assets/img/logo-235e394c.png)

SASS 開發環境設定,搭配 Grunt 

SASS需要 Ruby 才能編譯。
所以你一定要有 Ruby 的環境,若只裝 Grunt 是無法編譯的。
Grunt 只是 Task Runner,別誤會一定要用 Grunt...。
SASS 是 CSS 的 Extension Language,可以用比較靈活, 寫 SASS,最後透過 Grunt,幫你去處理編譯的工作 (猜測 Grunt 會請 ruby 編譯),最後產出 css 檔案。

當初選擇 Grunt 是考慮到整個開發方式最後也需要使用 Grunt 進行 css 壓縮等整合的功能,所以選擇 Grunt。對了,不是說一定要 Grunt 才能編譯 SASS,再次強調它只是幫你做事情的工具。
若你以透過 ruby 安裝 SASS :

sudo gem install sass
你可以直接透過 command line 編譯 sass 產出 css 檔案:
sass style.scss output_style.css
就先談到這裡,剩下的留到之後再講,SASS 太多人在用了,歡迎大家上網爬好文。


環境必需品 (我是 Mac)
每種作業系統有不同的裝法,可參考 http://sass-lang.com/install(你也可以選擇使用一些現有的 Application)。

安裝 ruby  ( Mac本來就有 ruby的環境 )安裝 sass ( sudo gem install sass) 要有 node.js 環境並且安裝 NPM (node package manager)
注意,如果你安裝的 Grunt 版本大於 0.4.x , 那你的 node.js 版本要高於 0.8.0安裝 Grunt註: 檢測是否有ruby : ruby -v檢測使否有node: node -v檢測是否有裝 npm: npm -v 檢測使否有 grunt : grunt -V (大寫V)若以上帶 -v 有檢視版本訊息,應該不會有問題,至少我是這樣看的...。
編輯器語法變色設定

Sublime Text…

Jekyll 到 Semantic UI 三天完成公司 Blog

圖片
最近的 Task 就是完成公司的 blog 架設。
其實 blog 的部署方式非常多,現成的像是 Blogger, Wordpress, 自己架設的像是 Joomla 等等都是很好的選擇。

不過這次選擇使用  Jekyll ,Jekyll 可以讓你用 Markdown 的方式寫完文章,再幫你產生靜態的 HTML 頁面(最主要是因為公司也用 Markdown 寫內部技術文章),並且有很多現成的變數可以用,不論你是要取得 文章列表 , 上一篇, 下一篇, 等等...,其實以 Blog 的功能來說也已經夠用了。
(有機會再寫個 Jekyll 教學 :P,還蠻值得接觸看看的)


Jekyll 官網


使用 Jekyll ,需要 Ruby 的環境,以 Mac 來說,比較 friendly,之前曾經陪我朋友一起在 windows 安裝 Jekyll,發現困難重重,除了 ruby 之外,也需要裝一些 Python 的套件。

通常不會只需要 Jekyll ,你還會想要有現成的 Theme (畫面樣式), 可以考慮這套 jekyllbootstrap ,http://jekyllbootstrap.com/usage/jekyll-quick-start.html (不過他畫面改版了我不太會用....)。

用 Jekyll 的好處是沒有任何 Database 的事情需要處理,基本上都是靜態頁面,而且只需要用 Markdown 編輯。另外也可以 Host 到自己的 github,使用 github.io 專頁,部署自己的 Blog 。


像公司之前使用 jekyllbootstrap.com 的 Theme,用起來的 UI 大概是像這樣:
不過因為是內部文件,不方便公開內容。

以我的自己 host 在 github.io 的 blog 使用 jekyllbootstrap 來說,我有改過一些 css 樣式,部署起來像這樣:



不過,因為樣式很難脫離現在在線上找得到的 Theme ,我自己還蠻想要一些不太一樣的感覺,因此我才會想到用個 Semantic UI 來另外寫個 Theme 來套用。



Semantic UI
http://semantic-ui.com/


Semantic UI,我第一次用,有種相見恨晚的感覺,也許是之前太常用 bootstrap,突然換個口味,感覺不錯,如果你要問我他像什…

[AngularJS] ch01:Introduction to AngularJS 讀書筆記

圖片
書目資訊
* ch01 : Introduction to AngularJS
* 網址:AngularJS
[更新,文章有些error,可搭配errata觀看。]

說到 angularJS,身邊的朋友都已經 an 很久了,我現在正起步...,打算把英文原書慢慢看過,不想急著看...,到底會不會看完我也不能保證 :P。第一章內容還算客氣了,至少我還看得懂70%,而且只有 9 頁。可是講的觀念也夠多了。
希望大家能夠自己去發掘書中的內容跟表達的意思,畢竟這只是我的個人筆記(不是教學哦...只是筆記...),如果有錯誤就請糾正我唄!


第一章主要分成幾個部分 Concepts 概念 MVC Pattern MVC架構Data Binding  資料綁定Dependency Injection(DI) 相依性注入HTML Directives HTML的 (Attritube) 的擴充還有一個範例(Shopping Cart)

Concepts 概念 AngularJS 可以說是一個具有 MVC 架構的 Framework。AngularJS 神奇的地方之處: 可以不用透過 HTML 的 id 或是 class 去附加任何的事件。可以不用註冊事件也可以不用寫 callback。使用的觀念跟過去所學的 jQuery 不太一樣,以前 jQuery 所學的觀念都是從抓到 DOM 的觀念開始...,而 Angular 給我的感覺是縱觀整個 Web Application,以及資料的部分,不單單只有 DOM selector / 事件綁定等等。Client-side Template 的觀念,個人覺得這裡要講的事情其實跟後面的 Data Binding 很像。
MVC架構
前面講到 MVC 最核心的精神就是 資料/試圖/控制器 ,分別處理資料 ( Model ); 頁面的邏輯 ( Controller ); 以及視圖 ( view )。

當要處理資料面時,controller 就會出來幫忙,做些回應,再跟 view 說,決定最後呈現給user的資料跟畫面。這樣子的 MVC 架構其實挺熟悉的,讓我想到 PHP Framework 像是 Codeigniter, Yii 好像也是差不多這樣子的運作方式。


然而,AngularJS 的 MVC 是這樣運作的: 對 AngularJS來說,View 的…

JavaScript 抓 ID 對上(v.s) jQuery 抓 ID

圖片
我以為,document.getElementById('AAA') 會跟 jQuery 的 selector 抓到一樣的東西,換句話說...我以為他們會指到一樣的東西,但是我錯了(慚愧,當了一年多的前端現在才懂...)。


這種事情發生在我在 maintain 原生 JavaScript 跟 jQuery 並存的 js 檔。
比方說我把原本的 $player 改成用 jQuery 的 selector:
$player = document.getElementById('player'); $player = $('#player'); 但如果真的這樣改就毀了。


因為...
getElementById 抓到的是 HTML DOM Object;
而 jQuery 的 selector 抓到的是 jQuery Object。

如果要把 jQuery 抓到的東西變成 HTML DOM Object,必須明確的指到該 jQuery Object 的第一個元素,像這樣:
var $player = $('#player')[0];

截一下 console.log 的比較:


不知道以上的解釋o不ok,
不過學習就這樣樣,答案就是找出來的,而我目前只找到這樣的解法,
如果錯誤還麻煩大大們幫忙指正:)



參考:
document.getElementById vs jQuery $()

利用 onerror 事件偵測圖片沒出現

JavaScript 有個事件叫做 onerror,是說我也是今天才知道,可以用在當你圖片沒抓到時,出現叉燒包及 server responded status 403,可以做一些事情。

通常在網路上爬到的範例,都是將 onerror 的事件偵測寫在行內,像下面這一行這樣,
以這個例子來說,當 demo.jpg 找不到時,就會去做寫在 onerror 裡面的事情,當然啦,假如有 demo.jpg,應該不會觸發 onerror 事件。
<img src="demo.jpg" onerror="alert('no image');"/>


那麼像我不習慣把事件綁在 HTML tag 上,
所以用 jQuery 的事件綁定 (bind) 來做:
當抓到 error 時,把該 img 標籤的 src 取代成預設的圖片。

有趣的是,上面的做法只適合非 Ajax 產生的 img ,我只有第一次載入畫面的時候,會做這件事情,當我點按是用 ajax 處理的分頁時,這下 high 了, 怎麼處理呢?

這時候想到 jQuery 有個 ajaxStop,可以偵測到當你切換頁面,也就是透過 ajax 切換畫面時且在 AJAX 請求結束後執行ajaxStop() 。

真有趣 :)


參考網址:

Detect AJAX requests in the browser (client side)Does a 403 response to an HTTP request for an image resource trigger the JavaScript error event?

關於 JavaScript 清空 Array 的方法

[觀念更正]
Array = [ ] 其實不能算是清空Array的方式,只能說有人會這樣做,
但是意義並不是清空的意思。
詳情就參考我 po 在 ithelp 的文章吧!
感謝 fillano 指正文章內容:)

[國慶連假交作業] Shell Script 練習 - BMI 計算

圖片
剛開始練習 shell 時不是很習慣

常常不小心行尾加 ; 分號。不然就是=左右加空白。
比方說 m=100 跟 m = 100 是不一樣,看顏色變化就知道。



BMI 值計算
運用 read 指令取得 stdin 的值,存到變數,參數 -p 是提示文字。(ex: read -p "你的名字是" your_name)做簡單的加減乘除計算 BMI,雖然要做到加減乘除要利用 expr,可是 expr 只能取到整數,因此改用 echo scale=2...的方式去做。 scale 的值表示要取到小數第幾位。
執行結果:

[媽!我上台了] 從 PHPConf 2013 Lighting Talk 學到的事

圖片
今年 PHPConf 2013 ,很高興被大大們推坑xd,講了一場 Lighting Talk,本來覺得自己有點害羞,一直不知道該講什麼,想了好一陣子,最後還是不好意思拒絕,於是也就答應了。

其實難的不是主題,因為只要能跟 PHP 有關係,什麼主題都能講,而是我不知道怎麼講,怎麼把情境帶到我最後想要表達的事情,跟以前大學在報告專題是完全不一樣的方式。

經過這次的 Lighting Talk,發覺以前在學校的自己根本沒什麼改進。
先有企劃書,然後才有 PowerPoint,這個步驟好奇怪...。就算上台報告了,竟然是 PowerPoint 帶領自己要講什麼,主角變成了 PPT ,而不是講者自己內心想講的事情,我發覺我以前講話好像都沒有先釐清自己要講什麼...。 最後的結論就是,為了五分鐘的 Lighting Talk,花了好多時間在家學講話,實在很搞笑,但也很真實,這就是需要訓練表達能力的開始...。
雖然我不能說自己講的不錯,不過我也盡力了,希望大家有機會也可以多嘗試這樣上台說說話的機會,當你從一個  Listener 到  sharer ,我不敢說會讓你大開眼界,但絕對有另外一層體會。
接著我朋友在youtube發現有人錄下了Lighting Talk,真是太好了,雖然我完全沒有勇氣聽自己的聲音...(影片來源網址:https://www.youtube.com/watch?v=pQFIvqknnrY | 作者: locy69)








Node for Front End Developers : chapter01 讀書筆記

圖片
本篇轉載於我的github.io

書籍資訊 : Node for Front-End Developers by Garann Means(O'Reilly).copyright 2012 Garann Means, 978-1-449-31883-3參考網址:Node for Front-End Developers本書目錄: Chapter 1 Getting Node Set UpChapter 2 Serving Simple ContentChapter 3 Interaction with the ClientChapter 4 Server-Side TemplatesChapter 5 Data Sources and Flow ControlChapter 6 Model-View-Controller and Sharing Code我的前言 這本書今年暑假以600多元台幣購入(蠻貴的...),等了快兩週才寄來,至今才開始看:P內容只有 6 個章節,僅僅45頁。雖然 node 之於我,我並非熟手,但老實說這本書應該不像是給初學者看的,建議裝過 node.js,裝過 npm 的人看看。作為 Front-End 寫 node.js,會有一些不適應症,我覺得這是正常的,但這也才是有趣的地方,一直要去想 How about write JavaScript on Back-End,跟自己所熟悉的 browser 的環境,完全是不同的兩世界。輕鬆學就好,雖然目前工作沒有大量使用,不過 Nice to Know。

Day7 visual studio 2012 模擬器(Simulator)的介紹

圖片
之前的文章列表:
22 Sep 2013 » Day7 visual studio 2012 模擬器(Simulator)的介紹22 Sep 2013 » Day7 介紹空白應用程式 Blank App21 Sep 2013 » Day6 Windows API For Windows App(二) WinJS20 Sep 2013 » Day5 Windows API For Windows App(一) WinRT19 Sep 2013 » Day4 Programming Windows 8 Apps with HTML CSS and JavaScript ~ ch01讀書筆記18 Sep 2013 » Day3 學習 Windows 8 App 的資源列表18 Sep 2013 » Day3 介紹 Windows 8 App 開發方式17 Sep 2013 » Day2 windows 8 的界面設計(Windows UI)16 Sep 2013 » Day1 開場白與環境介紹 或看我的第六屆鐵人賽文章列表

這篇要向大家介紹的是 visual studio 2012 的 Simulator(模擬器)


掐指算一算,感覺我寫的東西需要加快速度了...,不然有些我想寫的我怕寫不到XD之前有提到過,如果要在 visual studio 跑自己正在編寫的專案,可以點按『本機電腦』的那顆按鈕,就會幫你執行你的 App 在 windows 8 的系統上,現在,你有另外一種選擇,那就是模擬器。為什麼要特別提這個東西呢? 哦哦也只是一個工具啦!~,不喜歡也可以不用,只是模擬器提供更多的功能,所以才叫模擬器。執行於本機的模式,環境是真的屬於你的本機,但模擬器,可以模擬出你本機電腦做不到的事。

我的blog有第二站

Dear All:

大家好,要跟大家說一件事,

考慮到發文效率與管理的關係,

強烈地感受到 markdown 的編寫快速,排版一致的感覺很不錯。

未來會把文章放到github
http://winwu.github.io/
我把它當作 『win.心得小筆記』 第二站。


還麻煩大家多多包涵!

新 blog 暫時不會有舊的文章,但有機會移駕過去,看時間吧 Orz..。

但是舊的 blog 會有新的文章,只是不知道會維持到什麼時候。

可以依照自己習慣看哪個 blog 做選擇,兩邊的留言我都會管到,老實說也是不太想放棄這邊,畢竟這裡有我這一兩年的心血。

目前新 blog 還很空洞,如果有任何建議,也歡迎告知,謝謝:)


祝 順心
Win

一起來參加『2013第六屆it邦幫忙鐵人賽』吧!!

圖片
活動官網: http://ithelp.ithome.com.tw/ironman6/earlybird 有興趣的話趕快找個主題報名吧!!

今年我也參加了
不過不知道能不能稱到30天 xd
主題選了冷門的 Windows 8 App,不過,是我自己想玩玩看啦

順利的話,那文章都會也轉載到這邊來。
希望大家多多支持。

Joomla! 3.X.X [工具] AcyMailing Starter 介紹

圖片
Extension 介紹網址:
http://extensions.joomla.org/extensions/content-sharing/newsletter/10341

AcyMailing Starter可以做些什麼呢?
一個可以讓你寄送電子報的工具。~
我裝了之後才覺得好用,實在太神奇了。
裝起來在後台看起來就像這樣:

查看用戶有多少,並且設定是否寄送電子報給該用戶的設定,可以匯出所有的會員,也可以匯入。(其實也不一定要說是電子報,簡單來講就是寄送 email 給 user)列表可看出你寄出去了哪些電子報。提供電子報的編輯,以及內建預設有四種形式的電子報範本可以供你使用。佇列是管理準備發送的信件統計非常好用,你可以知道你寄出去信,使否有被user打開過(有在信箱點選『顯示圖片』的user才算)設置裡面有蠻多的設定,可以自行去看看,因為蠻雜的,包含外掛的設定也在此。

這是用戶的清單:



新增電子報:

注意右側要點選收件者是誰(群組)



編輯好之後你可以選擇要先儲存,還是就直接預覽/發送,我在這邊是直接選預覽/發送。



預覽/發送的樣子:


我直接點選發送(在此不送測試信):





然後到信箱收信:

接著再回到統計的頁面: 因為我後來又在追加應外一位user寄出此封信件,因此在這裡總共是寄給兩個人。




大致上的功能都很齊全,也非常好用。 想要更多功能嗎?那就~請~購~買~更高級的版本。

Node.js Taiwan Party 36 筆記 (屬雜記,請忽略我)

這偏是比較屬於個人雜記的部分,請忽略我...(應該只有我自己看得懂...)
Node.js TW 36th Party Note Topic : Express Starter need...* node * npm * git * grunt.js Express → web base framework express as cli- e (ejs) -j(jhtml) -H(hogan) - jade(as default) - call help - c(css) - s(session) express as css- -css - stylus (as default) * why need template engine -> m”v”c run express cliexpress [-option] [app_name] folder structurerouter (like controller + router)static file (at Public folder)app.js is init file setting in Expressapp.listen (open port 3000)app.configure (read enviroment variable, ex: develpoment,production…)app.set, app.getapp.enable, app.disable (ex, 不啓動view engine)app.use user --> Middleware --> route --> view middleware : app.use , will excute every route. app.getapp.postapp.deleteapp.updateapp.allapp.locals (少用) req get parameterreq.params(抓url) req (像是讀檔案)reponse (寫) app.get('/happymen/:id', function(req, res){ var id = req.params.id; }); req.query (取get的資料)req.bod…

TQC 雲端技術與網路服務 考後心情

圖片
(其實這張上週就來了,只是我今天才去考場拿XDD) 說到考 TQC,我也算是老屁股了,從大二考到現在,平均一年考個一張左右,雖然對工作也沒什麼幫助,不過也習慣這樣一直考下去。
關於這張雲端技術,原本想寫個心得,但覺得實在沒什麼心得可言... 心情嘛...,老實說在準備這張的時候就已經有點失望了,以我考過其他科目的比較來說,這張的失望指數蠻高的,為什麼呢?

考試範圍過大(簡直包山包海了),但卻沒有可以參考的書目如果有在開發web的工作上打滾過,看了這題目會覺得..對工作有幫助的章節實在不多...,長知識倒是可以。我實在不曉得為什麼...為什麼 gmail 跟 google 日曆的題目怎麼會這麼多? 這麼多可以跟雲端扯上關係的服務很多啊。第四類跟第六類的題目反而我覺得挺有價值的,會考些 IaaS, PaaS, MapReduce, Hadoop 等一些比較基本的觀念,我覺得這才是我想讀的...,但好像就只有蜻蜓點水如果純粹當做長知識而來讀這科,是還ok然後我沒有勸大家不要考的意思XD 每個人預期的結果不同,如果你想考還是可以考,而且準備起來蠻輕鬆的,就當做平常的課外讀物花個幾天念一下應該就差不多了。

Pure CSS 實作練習:homepage

圖片
又到了練習的時間了...,其實這昨天就弄好了只是沒力寫文。
這篇是延續好久好久以前寫的兩篇筆記,只是看看文章而已會讓我覺得學習中斷,感覺不是很好,後來我還是覺得想弄點什麼東西出來。
之前的兩篇是這個:

認識 Pure CSS 之筆記一:了解Base, Grids, Forms認識 Pure CSS 之筆記二:了解Buttons, Tables, MenusDemo頁面:http://winwu.github.io/pureCSS-practice/homepage/先來看看練習的結果:
主要是要練習 pureCSS 的 Grid,然後整格排版設計是參考某家搜尋網站的首頁做改造:P,icon 部分搭配的是 Font-Awesome ,Font-Awesome 的使用方式跟在用 bootstrap 的時候一樣,所以非常順手。至於配色就別跟我這個前端挑了(><),這個練習的重點是在做前端不是Art (Orz)。


我的 Vim 指令筆記

Gist url : 我的 Vim 指令筆記 (markdown文檔)

vim 的三種模式 模式輸入模式:輸入內文。指揮模式:也叫指令模式,主要是進入到可以對文件做修改,複製,剪下貼上,游標移動等動作。執行模式:文件存檔,離開等等行為。 常用模式的切換輸入模式 -> 指揮模式 : 鍵盤 Esc指揮模式 -> 輸入模式 : 鍵盤 i, a, o指揮模式 -> 執行模式 : 鍵盤 : 如何進入 vim 編輯器指令 vim 本身就可以開啓 vim 編輯器,跳出請先到執行模式再按 q(:q) 然後 Enter 鍵。指令 vim 檔名 可開啓某檔案。 如何離開 vim:q : 直接離開(在文件沒有被編輯過的情況下可以用)。:q! : 強制離開(不儲存你的修改強制離開)。:wq : 儲存並離開 (wq順序不能反)。:x : 儲存並離開。 進入輸入模式的幾個方式Append: a: 游標前插入文字。A: 游標移到此行最後一個字元。Insert: i: 游標後插入文字。 I: 游標移到此行第一個字元。Open a new line: o: 游標所在的那一行,向下插入新的一行。O: 游標所在的那一行,向上插入新的一行。 指揮模式下的常用指令(注意大小寫有別)針對現在畫面跳到上中下區域: H : 跳到畫面上面。M : 跳到畫面中間。L : 跳到畫面下方。上下左右移動: h : 往左移動。j : 往下移動。k : 往上移動。l : 往右移動。數字 + [h, j, k ,l] : 往左,下,右,上移動幾個字元。gg : 跳到第一行。G : 跳到最後一行。數字 + gg : 跳到該數字那一行。數字 + G : 跳到該數字那一行。b : 移動到上一個字的第一個字元。w : 移動到下一個字的第一個字元。W : 移動到下一個字的第一個字元(以空白鍵或是tab鍵當區隔的跳法)。ctrl + f : 下一頁(forward)。ctrl + b : 上一頁(back)。ctrl + g : 顯示你目前位於整份文件的哪一行。^ : 移到此行的第一個字元。$ : 移到此行的最後一個字元。 指令模式下的操作:q : 直接離開(在文件沒有被編輯過的情況下可以用)。:q! : 強制離開(不儲存你的修改強制離開)。:wq : 儲存並離開 (wq順序不能反)。:x : 儲存並離開。:s…

Joomla! 3.1.5 解決網址加上?tp=1不work問題

圖片
我先講一下在 joomla 的網站,網址加上 ?tp=1 是要做什麼,
類似這樣-->範例網址寫法:http://joomla_blog.localhost/?tp=1
?tp=1 主要是可以在畫面上看出各個模組的位置是在哪裡,像這樣:


這個有趣的做法可以方便你在後台設定模組位置的時候知道其position在哪。
但如果你加了 ?tp=1 不成功的話,可能是設定沒有開,檢查一下:

系統 --> 全站設定 --> 佈景主題管理 --> 將『預覽模組位置』改為『啓用的』。(中)
Sysyem --> Global Configuration --> Template Manager --> set "Preview Module Positions" to 'Enabled'(英)


Joomla! 3.X.X 一些基本的權限管理

這是今天在公司做的微分享,
晚一點我會把一些文字敘述補在下面。

只是一些簡單的基本介紹而已,我還沒有研究到很深啦。



補充第15頁的部分,
如何客制Admin的Menu?


關於這個部分,建議大家參考這邊文章,Customizing the Admin Menu
雖然文章是 2. 多的版本,不過在 3. 多也是通用,
需要注意的是,default_enable.php 的路徑在 3. 多版本已經換了,
以我的joomla是3.1.5版本來說路徑是在:
/YOUR_SITE_DIR/administrator/modules/mod_menu/tmpl/default_enabled.php

我的範例主要是在實作,有些 menu 只給特定的群組看。

另外如何知道使用者群組的id是多少?
使用者群組(user group)的記錄是寫在 前綴字_usergroups 這張資料表。

我撈sql的是這樣撈的:

mysql> use 你的site的資料庫名稱;
mysql> show tables;
mysql> select * from 你的table前綴字_usergroups;


撈出來的結果如下:

mysql> select * from tbrxm_usergroups; +----+-----------+-----+-----+------------------------------+ | id | parent_id | lft | rgt | title | +----+-----------+-----+-----+------------------------------+ | 1 | 0 | 1 | 24 | Public | | 2 | 1 | 8 | 19 | Registered | | 3 | 2 | 9 | 16 | Author | | 4 | 3 | 10 | 13 | Editor | | 5 | …

Joomla! 3.X.X 實作多國語系

第一次碰多國語系的設定...
心得是: 有點複雜,
剛剛做成了文件,雖然還是很複雜,不過我已經盡量簡化了。
希望有幫助到你。

文件連結:
[建議看文件連結比較不辛苦]
Joomla! 3.X.X 實作多國語系 (doc)Joomla! 3.x.x 實作多國語系 (pdf) 補充:
前幾天有朋友跟我說有一套 joomlafish也可以做到多國語系的功能,不過我個人是第一次摸Joomla ,所以沒有很清楚這些過去的種種方式,但我剛剛看了一下joomlafish 好像還沒有支援到 joomla!3 ,如果各位朋友有什麼其他的方式也歡迎推薦。


Joomla! 3.X.X 之怎麼辦語系裝不起來...

圖片
假如你在 joomla 3 的版本要安裝語系有遇到這樣的 Warning:
     JFolder::create: Could not create directory Path: ...        Aborting language installation: Failed to create directory ...        Package Install: There was an error installing an extension: ....


不敢肯定我的解法是唯一的解法,只是給大家一個參考,如果你跟我一樣在安裝其他語言時有出現 warning ,請先檢查 joomla 目錄底下所有資料夾的權限是可以寫入的,建議你先到後台的:
System -> System Information

[yii] 判斷表單送出是否有錯誤

判斷表單送出是否有 Error 才顯示某個 widget 或是才顯示什麼,
參考官方文件之 hasErrors()
http://www.yiiframework.com/doc/api/1.1/CModel#hasErrors-detail
if($model->hasErrors()) { //echo '你沒有填哦'; //echo '你沒有填哦'; }


*雖然這篇文章很簡短,但主要是記錄一些身在使用 yii 開發 web 的前端人員需要多留意的事。

[yii] 如何在 widget 使用 renderPartial

文章的標題是『如何在widget使用renderPartial』。
其實事情是這樣的,我要把一些 html code 包裝到 widget,這樣子下 widget 只要一兩行,頂多帶幾個參數就可以解決寫好幾行 code,並且把一些會重複用到的 html 模組做成 widget 也是前端的樂趣之一。

本來在view file這樣寫:
$this->renderPartial('_search',array( 'model'=>$model, )); 這樣寫本來就沒有什麼問題。


不過如果要一個 html 結構寫成 widget 的話,
在 widget 就不能這樣用了,
因為直接使用的話會出現:

__你的__Widget and its behaviors do not have a method or closure named "renderPartial".

因此在widget的時候請使用:

$this->controller->renderPartial('_search',array( 'model'=>$model, ));

參考:
http://www.yiiframework.com/forum/index.php/topic/27311-how-to-renderpartial-in-widget/


[yii] 如何客製或 extend 自己的 CButtonColumn 樣式

圖片
[yii] 如何客製自己的 CButtonColumn 樣式 [yii] How to customize CButtonColumn

這個文章的內容主要是要講怎麼換掉用 CGridView 產生的 CbuttonColumn 樣式,下圖就是用 CbuttonColumn 預設產生出來的三個 icon: 在 yii 另外使用 Gii 產生出來的 CRUD 的 view files,基本上會包含 admin.php, index.php, create.php, update.php, view.php 還有一些用下底線開頭的 _form.php, _search.php, _view.php 檔案,簡單瞭解了一下其產生列表的方式,會在需要產生列表的檔案去使用這個 widget:
$this->widget('zii.widgets.CGridView', array(....) );
其中,在後面所帶的array裡,會看到 : array( 'class'=>'CButtonColumn', ),
這些預設產生的 Button 就是在這個 Array 產生的,接下來可以看一下官網提供的一些設定api,基本上,這些 Button 的 class, 內容文字, 連結, 底圖都能換。




設定很多,我以我會用到的一些需求為例:
template 屬性:
可以定義icon的出現順序,但若比方說你只寫 'template'=>{view} 那麼只會出現檢視的那顆icon。
array( 'class'=>'CButtonColumn', 'template'=>'{view}{delete}{update}', ),


deleteButtonOptions 屬性 : 設定 delete icon 的基本屬性 , 以我的例子為例,我想使用 glyphicons 的 icon , 就必須把 delete button class 改成我要的 glyphicon glyphicon-trash。





ar…

認識 Pure CSS 之筆記二:了解Buttons, Tables, Menus

此篇是延續上一篇的內容:認識 Pure CSS 之筆記一:了解Base, Grids, Forms


Buttons:
button一直是我覺得網站上應該要蠻單純的元件,統一風格,大小不要忽大忽小是我最喜歡的狀態。在這裡介紹一下 Pure 的 Button ,幾個大方向要記而已,還蠻單純的。

如果要產生一般的button,使用 class name :pure-button (不論用在<a>還是<button>)。如果要 disable 效果,請累加 class name : pure-button-disabled ,例:pure-button pure-button-disabled。如果要 active 效果,請累加 class name : pure-button-active ,例:pure-button pure-button-active。primary效果,例:pure-button pure-button-primary。客制化你自己的 button , 希望你的客制化 button 的 css 命名可以 follow pure 的命名方式,如 pure-button-red, pure-button-success, pure-button-info,...。pure button 的 size有分幾種等級:xsmall : pure-button  pure-button-xsmallsmall :  pure-button pure-button-smalldefault : pure-button large :  pure-button  pure-button-largexlarge :  pure-button pure-button-xlargebutton 裡要有 icon嗎? 沒問題,pure 是搭配 Font Awesome ,詳情的載入方式請看pure button 介紹,使用的時候是類似在 pure-button 裡面包 <i class="icon-XXX"></i>。
Tables:

猜猜看pure 的 table 要加什麼樣的 class name 在 table 的標籤上 ? 前面 button 用的是 pure-button,table 則是使用 pu…

認識 Pure CSS 之筆記一:了解Base, Grids, Forms

圖片
最近本來看一點 Bootstrap 3 RC1,因為 RC1 是我一直有點興趣的 Flat Design 的風格,不過目前用起來沒有想像中 Flat (目前我正在期待正式版),突然想到還有另一套可以用,那就是 Pure 了(是說他也出來一陣子了XD)!
簡單逛了一下 Pure 的網站,只能說我是越看越喜歡,他主打的是輕量而且符合 RWD,又有 Flat Design, 輕又簡單明瞭,大概是我喜歡它的主因吧!另一方面是被網站上的範例給迷住 ,感覺得會讓人很有自信的去使用。


Pure 把一般網站上會用得到元素分成幾大類,也就是在官網上面看到的那幾類,就連從github下載下來也以這幾類作為資料夾的分類:

Base主要是使用 normalize.css,你可以把 normalize.css 想成是跟 reset.css '類似' 功能的css檔(說是類似但還是有些不一樣), normalize.css 是一套支援 HTML5 標準的 css reset,然後目前 normalize.css 已經出到 v.2.x 的版本了,不過在 Pure 的文件明確地寫到,目前 Pure 使用 v.1.x 版本,因為 v.1.x 較能支援比較老舊的 IE 版本 ( 原文參考 : We use Normalize v1.x because it supports older versions of Internet Explorer. )。另一件事情是,所有的 Pure 的模組都是建立在 normalize.css 之下。H1~H6 的字型大小的單位是使用 em。關於 ol, ol, dl, Pure都有預設的樣式,如果是想要用這些做 Menus 的東西,建議你另外看 Menus 的系列。Grids( and Responsive Grids)grid ,如果有用過 grid 的人,看文件應該不會太難理解,不過我從以前就沒有好好理解過 grid,可能是我不喜歡這麼多 class name 加在 html 標籤裡。Pure 的 grid , 只用一個 pure-g 就是一個 row 或是一個 grid, 使用 pure-u-*-* 代表 pure-g 裡面的 columns 或是 units 。 每個 pure-g 可以包含好幾個 pure-u-*-*。pure-u-*-*…