laravel的相關.htaccess設定

laravel 的index.php進入點是放在「public」目錄下，透過「.htaccess」來改變進入點： PS：這裡不討論透過.htaccess來處理是否最佳的作法，只是提供一個方法。

RewriteEngine on
RewriteCond %{HTTP_HOST} ^example.com$ [NC,OR]
RewriteCond %{HTTP_HOST} ^example.com$
RewriteCond %{REQUEST_URI} !public/
RewriteRule (.*) /public/$1 [L]

如何使用CKEditor？

http://ckeditor.com/

1、HTML碼：

<textarea class="editor_class" id="editor_id" name="editor_name"></textarea>

2、首先引入JS檔：

<script src="/ckeditor/ckeditor.js"></script>

3、取代：
若一個頁面確定只要一個html編輯器的話，可使用取代「id」方式：

<script> CKEDITOR.replace( 'editor_id' ); </script>

若有一頁會有多個html編輯器的話，可使用取代「class」方式：

<script> CKEDITOR.replaceAll('editor_class'); </script>

註：replaceAll裡面若不加參數，會取代所有textarea標籤。

透過PHP程式執行bash指令

有時需要執行一些patch檔時，但又沒有ssh權限，可透過php的「passthru()」指令來處理。

<?php
print("<PRE>");
passthru("/bin/bash patch_name.sh");
print("</PRE>");
?>

另有兩個相關的指令：
system() 輸出並返回最後一行shell結果。
exec() 不輸出結果，返回最後一行shell結果，所有結果可以保存到一個返回的數組裡面。
passthru() 只調用命令，把命令的運行結果直接輸出到螢幕。

簡單的hover陰影效果

今天看到一個簡單的hover效果還滿喜歡的，就記錄下來囉：

sublime text 3 基本設定和常用套件安裝

下載完檔案後

把「Default.sublime-package」放到

Sublime Text Build 3047 資料夾\Data\Installed Packages

- See more at: http://ilowkey.net/4cht-sublime-text/?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed%3A+zkm+%28%E4%BD%8E%E8%AA%BF%E4%B8%80%E9%BB%9E%29#sthash.RmuHQEsi.dpuf

1、Sublime有內建HTML5的snippet
! + tab
html:5 + tab

2、選取引號內字串
"string"利用滑鼠從第一個引號拉到後面那個。或輸入：command + d 即可完成

3、貼上符合縮排
有時候從網站上複製一段code，常常貼上的部份本身就有縮排，貼完卻只有第一行有縮排，其他跑到前面。
複製完後，輸入：shift + ctrl + v 就可以解決！

table表格利用CSS加圓角的方式

HTML的table表格若要加上圓角，不好實現，查到一個方法：利用陰影的方式來呈現。

直接上語法：

.table{

border-collapse: collapse;

width: 100%;

border-style: hidden;

box-shadow: 0 0 0 1px #000;

border-radius: 4px;

}

.table td{

border: 1px solid #000;

}

Swiper開源、免費、強大的行動端觸摸滑動插件

Swiper常用於mobile網站的內容觸摸滑動，簡單配置即可實現手機、平板網站大部分觸摸功能。

Swiper是純javascript打造的滑動特效插件，可單獨使用無需jQuery，亦可結合jQuery，面向手機、平板電腦等移動終端。

Swiper能實現觸屏焦點圖、觸屏Tab切換、觸屏多圖切換、觸摸滑動導航等常用效果。

Swiper開源、免費、穩定、使用簡單、功能強大，是架構移動終端網站的重要選擇！

簡中網：http://www.swiper.com.cn/
英文網：http://www.idangero.us/swiper/#.VYtZnvmqpBc

Windows 8 的Metro風格前端框架--Metro UI CSS

Metro UI CSS是一個Windows 8風格的前端框架，跟Bootstrap很相似，有空時可以玩看看。

 它的特色是用LESS編寫的，兼容AngularJS，open source，MIT licensing，網格佈局系統、超過20個的插件，超過300個內建的圖標。

有很多方便的插件可以使用。像是Form validator、Notify system、Calendar...等。

官網：http://metroui.org.ua/

使用 CSS 偽元素:before & :after 製作「三角形」icon

在切版中，常常會有需要用到「三角形」的小icon，每次都要切圖也很麻煩，此時可以利用CSS的偽元素來產生，樣式有點醜，再自行調整吧。

語法如下：

a:after{
    content: '';
    display: inline-block;
    width: 0;
    height: 0;
    border: 10px solid transparent;
    border-left-color: red;
}

document.cookie don't work in android

在利用cordova打包html和js時，發現document.cookie竟然寫不進手機裡，查資料才知道在android 3.1以上需要打開cookie寫入，操作如下：

1、打開專案底下的「\platforms\android\src\com\example\MainActivity.java」：

2、先「import android.webkit.CookieManager;」，

3、在 onCreate function裡面「CookieManager.setAcceptFileSchemeCookies(true);」

php接收跨域請求

通常表單只能送給同網域的程式來處理 (基於安全性考量)，若要跨域的話，會有幾種作法，這邊只討論W3C - CORS (Cross-Origin Resource Sharing)方式。

這是W3C 所制定的方式，目前主流的瀏覽器都有支援，這是透過 HTTP Header 來確認存取權限，算比較寬鬆性的解決跨域方法。

CORS的運作流程：

1、如果瀏覽器有實作 CORS，在發送跨域 Request 之前，會先發出一個 OPTION Request 來詢問目的網站是否接受跨域的 Request。

2、若是這個 OPTION 沒有回應允許傳送的 CORS Headers，那麼原本要發送的 Request 就不會被傳送。若是回應了符合條件的 CORS Headers，瀏覽器就會接著發送跨域的POST Request。

PhotoSwipe - 行動開發必備的iOS 風格相冊

PhotoSwipe 是一個專門針對行動設備的圖像畫廊，它的靈感來自iOS 的圖片瀏覽器和Google行動端圖像。 PhotoSwipe 提供熟悉和直觀的界面，能夠與行動網站上的圖像進行互動。

有lightbox效果、圖像放大、手滑等功能。

官網：http://photoswipe.com/

div裡面包img時，會多4px的間隙

當塊元素包裹圖片時，圖片下面出現了4px的間隙。找不到具體的原因，還好有解決方式：

一、將圖片轉換為塊元素

設定：img {display:block;} 

二、設定圖片的垂直對齊方式

設定「vertical-align」，不管設定「top、middle、bottom」哪一種都可以，

img {vertical-align:top;}