不要被 builtwith / Wappalyzer 知道你是用 Laravel

這標題是下得有點好笑，可是確實是我的用意。就是不想被知道我是用 PHP，也不想被知道我是用 Laravel，只是好奇做個測試。

首先～我是用 ubuntu，裝的是 apache。

編輯  vi /etc/apache2/apache2.conf，將這些設定加入:

ServerSignature Off (預設本來就 Off)
ServerTokens Prod
Header unset Server
Header unset X-Powered-By

(如果沒有啟用 apache 的 header 的話，要下 a2enmod headers，然後再重啟 apache2，service apache2 restart)

ㄜ ...當初改完的時候沒有沒有立即看到效果，可是幾天後回去看就好了....


參考:
How to install apache module mod_headers in ubuntu?
How to hide Laravel from Wappalyzer plugin

點擊圖片, play 播放鍵再載入 Youtube 影片

以前一直沒什麼機會遇到一個頁面要載入一堆 youtube 影片，大概是我很討厭網頁裡面嵌 youtube (我比較喜歡 host 影片在自己的 server)，所以也不怎麼在乎。但試過之後才發現，一個頁面擺一堆影片完全拖垮瀏覽速度，卡到不行...，雖然我早有預期會有這個狀況，但沒想到如此淒慘。

後來輾轉之下，我也沒想到什麼好辦法，唯一目前想到的途徑就是，先去 youtube 要該影片的 thumbnail (縮圖檔) ，有些 api 可以用，這個 stackoverflow 問題的解答已經說得詳細了。

有了 thumbnail 之後，接著就是考驗 HTML / CSS 技術，通常，會在 thumbnail 之上，疊一個 play 按鍵，你可以利用 css 的 :before 或是 :after 的 content 屬性，塞入該 play 鍵的 url，或是放 background，也可以，看你怎麼設計跟規劃。

至於 thumbnail 的顯示，由於他本來就是一張圖片，但你也未必要用 img 標籤，像我的話是走一般的 div 或是其他 tag，設定 background，習慣上我喜歡用 background，然後再用 background-size 去 fit 那張圖的大小到 width 跟 height。

以上我說的做法，HTML 大致的輪廓如下 :
(這些 code 可能未必 run 的起來，我在寫文章，所以只是在盲打，我只在描述『方法』而已 )

<div
  class="thumbnail"
  data-youtube-id="HB09QpIf7_A"
  data-video="https://www.youtube.com/embed/HB09QpIf7_A?&autoplay=1"
  style="background-image: url('http://img.youtube.com/vi/HB09QpIf7_A/sddefault.jpg')">
</div>

Note:
如果想要一點擊，接著就替換為 iframe 時就要自動播放，那 youtube 網址要加上 &autoplay=1。

最後，還是得寫 JavaScript，偵測 play 按鈕或是 thumbnail 被點擊的事件，一旦這個 div 被點擊，就把自己替換為 iframe。

$('.thumbnail').click(function() {
    
  var thisYoutubeId = $(this).attr('data-youtube-id');
  
  var video = 
      ''
      + '<iframe id="video' + thisYoutubeId + '"'
      + 'src="'+ $(this).attr('data-video') +'"'
      + ' webkitAllowFullScreen mozallowfullscreen allowFullScreen'
      + ' frameBorder="0"
      + ' data-ytid="'+thisYoutubeId+'"></iframe>';

  $(this).replaceWith(video);

  });

Note:
如果不想要 iframe 有個灰色邊筐，要設定 frameBorder = " 0 "。

See the Pen VYbJXK by winwu (@winwu) on CodePen.

如果有更好的方法，希望你可以留言，分享一下 :)

讓 Youtube 影片符合螢幕寬度縮放 (RWD)

老掉牙的問題了，但每次都忘記，直接把 code 貼過來。

iframe, object, embed 前面最好都加上『上一層』的 selector。

iframe,
object,
embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

DEMO: JS Bin

Note: Laravel Project deploy on Ubuntu (DigitalOcean)

Laravel Project 部署在 Ubuntu 上有百百種方法，但不管怎樣都比放在 shared hosting 簡單。以下紀錄我常用的方法跟遇到的問題:


在這之前如果你還沒有嘗試過部署這件事情，有些參考文章還不錯:
INSTALL LARAVEL 4 ON UBUNTU 12.04 LTS (A HOW-TO TUTORIAL)
當然還有很多啦，只是我只有記錄到這個 :P，這其實也是我很久之前的筆記，只是最近有空一一整理起來而已...


找出 php.ini 的位置

sudo php -i | grep 'Configuration File'



確認/安裝 MySQL

通常 digitalOcean 會搭配，如果你一開始有選的話 LAMP 架構之類的。
沒有的話還是要記得安裝..



安裝相關需要的套件

apt-get install php5-mcrypt
sudo apt-get install openssl
sudo apt-get install unzip
sudo apt-get install curl
sudo php5enmod mcrypt
(裝完記得『重啟』 apache2 server)



安裝 composer

curl -sS https://getcomposer.org/installer | php
sudo mv composer.phar /usr/local/bin/composer


網站的資料夾該放哪?

這個嘛... 要看你 apache 怎麼裝
我是放在 /var/www/
Ex: 專案 Folder 為 myproject
就放在 /var/www/myproject


apache site-available 設定

這個也是模稜兩可，我的 apache 設定是在 /etc/apache2/sites-available/000-default.conf，通常我會把 000-default.conf 備份一個最原始的版本為 000-default.conf.bak，然後再修改 000-default.conf 為我要的。

然後 documentRoot 是指到專案下的 public 資料夾
Example: DocumentRoot /var/www/YOUR_PROJECT/public



遇到 file_put_contents failed to open stream: Permission denied 訊息

修改路徑: /etc/apache2/apache2.conf
把 apache2.conf 的所有的 AllowOverride None 改成 ALL。



遇到所有的 route 都出現 404 error

sudo a2enmod rewrite
sudo service apache2 restart


記得把 app/storage 打開權限
某則無法紀錄 log 或是 session 等~
必要時你可以開啟 debug mode，直接看錯在哪裡比較快



重啟 apache 出現 Could not reliably determine the server's fully qualified domain name, using 127.0.0.1 for ServerName

到 /etc/apache2 的 apache.conf 加這一行 ServerName localhost

python3 notebook 環境安裝紀錄

Mac 電腦在我印象中，好像本來就有 python 的環境，至於是 python 多少的版本，我是一點概念都沒有，但我這台老筆電經歷過用 mac port, homebrew 之後，當時在安裝 python3 (我的版本是 3.4)  時，因為第一次使用官網下載的 pkg 沒有成功，所以又用 homebrew 再裝一次，導致於安裝的路徑有問題。

後來也是走先把所有的 python3 都刪除，重新安裝。Uninstall python3，我是參考這篇文章的方法 (推 140 幾的那個答案，把 2.7 改為 3.4 就可以)。之後改回只用 homebrew 安裝。

brew install python3

brew linkapps

python3 (確認 python3 活著)

pip3 install jinja2

pip3 install pyzmq

pip3 install tornado

ipython3 notebook，開啟 http://localhost:8888/tree