Benyi Hsia

我是Benyi,這裡存放關於資訊科技的文章

macOS Sierra 安裝 php7 及 MongoDB driver

| Comments

一直以來,都是使用 Mac 內建的 apache2 及 PHP 模組。
其實只要打幾個勾,去掉 LoadMoudule 前面的註解,設定一下就可以用了。

不過,因為 Laravel 對於系統的要求愈來愈高,
加上我的 Mac 內建的是 5.5 版,再也無法安裝 Laravel 5.2 以上的版本。

也因為最近因為要使用 jessenger/laravel-mongodb 這個套件,

我利用 Homebrew 安裝完 php70
在內建的 apache 準備 LoadModule ,結果找不到這個 .so 檔的路徑

又 MongoDB 的 driver 不知道怎麼搞的,
在 brew install 的結果顯示 already installed 但在 phpinfo() 裡面又找不到。
(而且還有 php55-mongophp55-mongodb 這兩種..)

反正就是經過種種原因,覺得乾脆移除內建的 apache 再把全部東西都用 Homebrew 安裝好了。

以上抱怨完之後,把過程寫下來希望可以幫助到其他人= =||

1. 移除內建的 apache

先讓 apache 暫停服務
sudo apachectl stop
移除內建的 apache
sudo launchctl unload -w /System/Library/LaunchDaemons/org.apache.httpd.plist 2>/dev/null

2. 使用 Homebrew 安裝所要的軟體

安裝 apache (apache 在這邊叫作 httpd)
brew install httpd24
安裝 php 7

-with-apache 很重要一定要加,因為加上去才會自動幫我們把 LoadModule 設定加到 httpd.conf 裡面
(不然還要自己找 php 路徑)

brew install php70 --with-apache
安裝 MongoDB 的 PHP 驅動
brew install php70-mongodb --with-apache

3. 重新啟動 apache

sudo apachectl restart

大致上已經完成,但是如果打開網頁的話,PHP 可是會直接噴出程式碼的。
所以我們還要設定一下 httpd.conf

4. 設定 apache

打開 httpd.conf 檔案
 sudo vim /usr/local/etc/apache2/2.4/httpd.conf
去除 php 行頭的註解

如果剛剛在安裝的時候,有使用 -with-apache 參數,
那麼你應該可以找到這行,而且是直接啟用的狀態而無需自己去除註解。

LoadModule php7_module        /usr/local/Cellar/php70/7.0.15_8/libexec/apache2/libphp7.so
監聽 80 port

使用 brew 安裝的 apache 會預設監聽 8080 port
看你的需要,如果你想要直接使用 80 而不想在網址後面加上 :8080 那你可以更改設定

Listen 80
增加 PHP 關聯

httpd.conf 的任意處,加上

<FilesMatch \.php$>
    SetHandler application/x-httpd-php
</FilesMatch>

5. 重新啟動 apache

sudo apachectl restart

6. 大工告成

打開終端機,輸入

php --version

應該可以直接看到類似如以下的結果

PHP 7.0.15 (cli) (built: Feb 25 2017 18:17:23) ( NTS )
Copyright (c) 1997-2017 The PHP Group
Zend Engine v3.0.0, Copyright (c) 1998-2017 Zend Technologies

JavaScript if ( A || B ) 的另外一種寫法

| Comments

當我們要使用 JavaScript 撰寫 OR 測試條件的時候
可能會這樣寫

if ( A == 15 || B == 15 || C == 15 ) {

}

或者是

if ( A.isValid() || B.isValid() || C.isValid() ) {

}

這樣其實很容易理解
條件不多的時候,其實程式碼才短短一行,也無所謂。

然而,如果當我們要測試的語句很長,或是 OR 的條件很多
這樣子寫,其實不太容易維護 (萬一要增加新的條件,又要一直 || 下去)

其實我們可以用 indexOf 來改寫

var A = 10;
var B = 11;
var C = 12;

var condition = [
  A == 10,
  B == 15,
  C == 20,
]
// [true, false, false]

if ( condition.indexOf(true) !== -1 ) {
    // 條件成立
}

或者是

var condition = [
  moment(d, 'M-D', true).isValid(),
  moment(d, 'M月D日', true).isValid(),
  moment(d, 'M/D', true).isValid(),
]

if ( condition.indexOf(true) !== -1 ) {
    // 條件成立
}

Array.indexOf(element) 會傳回 elementArray 中的第幾個次序
例如

  var a = ["你", "我", "他"];
  console.log( a.indexOf('我') ) 
  // 1

如果找不到,則會傳回 -1

所以只要檢測 indexOf !== -1,則表示某東西在陣列裡,
也就是如果這個陣列,「只要有 true」,那麼 if or 就會成立。

使用 AngularJS 雙向綁定 Semantic UI Dropdown

| Comments

最近因為需要,使用 AngularJS 與 Semantic UI 作為網站開發的前端框架。
AngularJS 的特性與方便的地方,就是他的雙向資料綁定功能。

然而,Semantic UI 預設是使用 jQuery 來操作他的元件等。

以 Semantic UI 提供的 Dropdown 為例


  

會發現一個有趣的現象,
當下拉選單選取的時候,size 這個 model 會更新
但從 controller 更新 $scope.size 時 (或從另一個 input 更新 size),卻不會同步到 Dropdown 上跟著選取。

原因是 size 雖然與 <select> 綁定了,但 AngularJS 與 Semantic UI 各自為政
想要更新 Dropdown? 沒問題! 請透過 Semantic UI 提供的 jQuery API 來更新。

$('.dropdown').dropdown('set selected', 'XL');

使用 Semantic UI 提供的 API 固然能解決下拉選單的選擇問題,但這樣只有單向呀!

能不能當我選擇下拉選單的時候,size model 跟著更新;而手動指派 size 的時候,下拉選單跟著更新?

有鑑於此,只好使用 AngularJS 的 $watch,監視 $scope.size 的變化。當有變化的時候,手動同步到下拉選單上。

$scope.$watch('size', function (n, o) {
    $timeout(function() {
        angular.element('select[ng-model=size]').dropdown('set selected', n );
    });
}, true);

使用 $scope.$watch 監視 size 的變化,
當一有變化的時候,立刻執行一次 dropdownset selected 方法。

angular.element 的選擇器可以自定,但我習慣直接用 [ng-model=size] 來當作名稱,
因為這樣就不需要另外指定 ID 或 name 了。

如此一來,改變下拉選單,size 本來就會更新,但改變 size 時,下拉選單也可以同步更新了。

算是... 手動綁定吧..

PS. 所需要的 $scope $timeout 記得注入。

解決升級 OS X El Capitan 後內建 Apache 伺服器 Forbidden 的問題

| Comments

蘋果發表了最新的作業系統 OS X 10.11 El Capitan

身為一個兩光的攻城屍,當然要檢查一下自己本機的開發環境有沒有異狀
理所當然,打開隨便一個專案後,發現首頁是 Forbidden 的

檢查一下,發現以下的錯誤訊息

No matching DirectoryIndex (index.html) found, and server-generated directory index forbidden by Options directive

上述的錯誤訊息指的是「找不到 index.html」這個檔案
但其實我們的首頁多是 .php 結尾的 index.php

系統認不得 .php 這個檔名,
原因是每次更新後,內建的 Apache 都會自動把 PHP 模組預設不載入

這個時候,只要到 apache.conf 內,將 PHP 模組載入,就可以了!

  1. 進入設定 apache.conf 設定

    Benyi$ vim /etc/apache2/httpd.conf
    
  2. 將此行取消註解,也就是「要載入此模組」

    #LoadModule php5_module libexec/apache2/libphp5.so
    
  3. 輸入 :wq 存檔離開

  4. 重新啟動 Apache

    Benyi$ sudo apachectl restart
    

在 iPhone 上打字,為什麼我會用拼音輸入法

| Comments

我是蝦米族
我打嘸蝦米從國中二年級開始,到今年已經是第七年(大概也快第八年了吧)
(對了,要正字,是「嘸」蝦米而不是「無」蝦米!)

嘸蝦米的好,是眾所皆知
的確,我在電腦上,使用的是嘸蝦米輸入法
甚至這篇文章,也是用嘸蝦米一字一鍵所打出來的

不過,我今天不是要介紹嘸蝦米輸入法
而是要告訴你,為什麼我在手機上,不是用嘸蝦米,不是用注音,而是使用拼音輸入法

Facebook 設定公開貼文陌生人只能看 不准回覆!

| Comments

其實用 FB 也有好一段時間了

大概是從我國中三年級開始,那時候因為大家在玩「開心農場」,
不玩好像會跟不上流行一樣,於是就辨了一個 Facebook 帳號開始種菜

漸漸地,大家開始使用 Facebook 的社交功能,PO文、上傳照片等等

歷經幾次改版,其實我們的隱私漸漸灘在陽光下
洩露隱私早就不是什麼頭條大新聞,只能祈禱自己不要哪天占用博愛座被肉搜

Mac OS X 10.10 Yosemite Review 新介面概覽

| Comments

Apple 在 WWDC 2014 昭告天下他們即將推出代號為 Yosemite 優勝美地 的 Mac OS X 10.10

當時看到就覺得很心動,介面也是美到一個不行!
不過,依照官方的說法,預計是今年秋季會登場,但已經開放給開發者下載。

據幾個擁有開發者帳號的朋友說,其實最一開始開放給 developer 下載的 Mac OS X 10.10 Yosemite 測試版本 bug 很多

不過,前幾天忽然收到 Apple 的來信,指出新版的 Mac OS X 10.10 Yosemite 已經開放 beta 版供使用者測試了!真是令人期待!


會收到這封信,其實大概是一陣子前,Apple 有開放使用者登記,只要填寫 E-mail 帳號等等,可以嚐鮮的時候就會通知你。終於,當郵差來按門鈴的那一刻,實在是興奮到不能自已!

於是我立馬安裝,可能是一下子太多人下載,一直會下載失敗。不過,重試過程就略過,直接來看 Mac OS X 10.10 Yosemite 的介面和以往有什麼差吧!


版本號是 14A299l 的 Mac OS X 10.10 Yosemite Beta 版


Mission Control 背景改為毛玻璃的模糊特效


畫面底下的 Dock 與 Mavericks 的貢品桌不同


通知中心更美觀了,與以往不同,畫面不會整個往左推,而是直接推出來顯示


可以自行編輯要哪些 widget,也可以自行放上想要的工具,如計算機等


Finder 視窗,滑到下面一點的時候,視窗上面就會變成毛玻璃特效


Safari 也是有毛玻璃特效


原本視窗右上角的全螢幕不見了,而是整合進左上角的紅綠燈中。 如果想要使用先前的 + 功能 (最適視窗大小),只要按一下 option,就可以把視窗縮放到「最適視窗大小」,而不是全螢幕了。


Spotlight 改到螢幕正中央顯示


左上角的電池圖示變的較可愛,有點像 iPhone?


選單底圖也有毛玻璃特效


總結

以上是 Mac OS X 10.10 Yosemite 的概覽
此版本與上一版本 (10.9 Mavericks) 比較,很多介面都有不同之處,Apple 總是大膽創新啊!

個人認為與 iOS 愈來愈像 (比如那個電池圖示和毛玻璃特效)

整體來說,缺少那份 Mac 的 「專業感」,反而有點「玩具」的感覺
不過介面設計的美觀,加上人性化的功能,使用者體驗就會大大加分!

但是,此版本也不是沒有 bug,目前為止遇到幾個比較明顯,也影響的就是:

  1. 有時按 cmd+opt+4+space 想要截取特定視窗會失敗,怎麼按就只有選取範圍 (cmd+opt+4),無法反白視窗擷圖
  2. 不特定應用程式時常閃退
  3. 破圖

這是 Mac OS X 10.10 Yosemite Beta 的概覽,
如果有任何錯誤,還請指正

期待 Mac OS X 10.10 Yosemite 正式版發佈的那天!

CSS 如何把 div 垂直水平置中 (畫面正中央)

| Comments

CSS 要如何把 div 垂直及水平置中,放在畫面的正中央呢?

假設有一塊 div 長這樣

        #block {
            height: 200px; /*高度*/
            width: 400px;  /*寬度*/
            background-color: black;
        }

今天我們要把他放置在畫面的正中間
只要加上

            position: absolute;     /*絕對位置*/
            top: 50%;               /*從上面開始算,下推 50% (一半) 的位置*/
            left: 50%;              /*從左邊開始算,右推 50% (一半) 的位置*/

可是,加上以上的程式碼後
網頁會變成這樣子

雖然上面、左邊都推50%進來了,但是並不是我們想要的效果

這個時候,我們要再加上

            margin-top: -100px;     /*高度的一半*/
            margin-left: -200px;    /*寬度的一半*/

把整個 div 上、左各往回推一半,這樣子就是我們想要的置中效果了。


所有程式碼如下

        #block {
            height: 200px;
            width: 400px;
            background-color: black;

            position: absolute;     /*絕對位置*/
            top: 50%;               /*從上面開始算,下推 50% (一半) 的位置*/
            left: 50%;              /*從左邊開始算,右推 50% (一半) 的位置*/
            margin-top: -100px;     /*高度的一半*/
            margin-left: -200px;    /*寬度的一半*/

        }

Mac 如何移動系統列圖示

| Comments

答案就是按著 Command 再去拖曳圖示

按著 Command 再去拖曳,圖示就可以移動 (如下圖)

請注意此方法只能拖曳系統圖示,如 Wi-Fi、音量、藍牙等

開啟應用程式產生的圖示,只能依照開啟順序排列