VECTOR COOL 威得數位行銷 - 第 19 頁，總計 43 頁

PHP 解決 Fatal error: Uncaught Error: Call to undefined function set_magic_quotes_runtime()

set_magic_quotes_runtime()於 PHP5.3後棄用

在 PHP.net 官方文件中有提到，set_magic_quotes_runtime()於PHP5.3已經棄用，雖然不會造成Fatal error而中斷程式，但會發送E_DEPRECATED的過時警告，而在PHP4.0+已被棄用，所以PHP4.0之後不會有set_magic_quotes_runtime()這function，所以會跳出下列錯誤：

Call to undefined function set_magic_quotes_runtime()

官方說明：
http://php.net/manual/en/function.set-magic-quotes-runtime.php

解決方法：

移除所有 set_magic_quotes_runtime() 程式碼。

替代方案：

[……]

CSS get an element use :nth-child() not :eq()

用 index 在重複元素中獲取一個元素

在 jQuery 是使用 :eq(2) ，雖然jQuery跟CSS選取器(selector)有很多相似之處，但還是有些差異，在CSS中要在重複元素中獲取一個元素是用偽類 :nth-child(2)

比如說我要指定定Apple 的樣式為紅色：

<div>
    <div id="bar1" class="foo">banana</div>
    <div id="bar2" class="foo">Apple</div>
    <div id="bar3" class="foo">Orange</div>
</div>

我們可以這麼做，都可以達到相同效果：

#bar2{
	color:red;
}
div.foo:nth-child(2){
	color:red;
}
.foo:nth-child(2){
	color:red;
}

同場加映

除了:nth-child()還有其他用在取得元素的偽類，都很常用到優

:first-child
:second-child
:third-child
:last-child
:nth-child

參考資料：

[……]

CSS RWD 響應式斷點 @media 及常用尺寸速查

我常用的方法

這作法雖有違背行動優先的概念，但我實務上遇到比較多還是先做電腦版，再依照電腦版樣式改成手機版本，概念歸概念，能能解決問題的就是好方法，提供大家參考

行動優先-響應式斷點

介紹完我常用的斷點，也介紹一下比較正規的做法，下列這就是行動優先下的響應式斷點，先決定手機版樣式，再針對平板或電腦的樣式進行調整

https://getbootstrap.com/docs/4.3/layout/overview/#responsive-breakpoints

Bootstrap 4 – RWD Layout

這是Bootstrap定義的斷點

https://getbootstrap.com/docs/4.3/layout/overview/#responsive-breakpoints

WordPress Elementor CSS breakpoint

Refrence: https://v123.tw/wordpress-elementor-css-breakpoint/

[……]

Plesk Onyx on CentOS 7 AWS AMI 一鍵安裝

有什麼比一鍵安裝更快樂呢

千呼萬喚始出來，AWS有Plesk官方的AMI囉!

相信很多接觸過虛擬主機的人都應該用過Plesk，Plesk是一套主流的主機管理系統，雖然cpanal也是主流的主機管理系統，但我還是習慣使用Plesk，可能是介面比較漂亮吧，以貌取程式，之前要在AWS上安裝還要從OS一個一個裝，慢慢去調校，期待有沒有AMI的解決方案，Plesk官方發布了一篇新文章，裡面有提到已經可以透過AWS AMI一鍵安裝AWS環境及Plesk

作業系統版本

提供3種不同作業系統的映像檔

OS
AWS AMI

Plesk十天試用

預先配置

講簡單一點就是都幫你配好好的拉，你只要點一下就好

預先安裝的 Plesk Extensions

Plesk Premium郵件由Kolab提供 – 安全的業務類電子郵件和協作工具，最多10個郵箱
Plesk電子郵件安全包（卡巴斯基AV / Magicspam） – 保護您的電子郵件
Plesk防火牆保護
ModSecurity – 保護您的服務器免受惡意攻擊
Symantec免費SSL證書（基本） – 來自全球安全領導者的網站安全*
WordPress工具包 – 只需點擊幾下即可在單個服務器上大量管理多個WordPress實例
Plesk安全顧問 – 如果你不是安全專家，這個嚮導是！
Amazon Route 53 DNS
Boldgrid – 快速，輕鬆的網站建設者在WordPress之上工作*

預配置為性能和安全性

服務提供商視圖
開啟防火牆
使用Atomicorp的基本規則開啟Web應用程序防火牆
開啟Fail2Ban禁用IP地址過濾
PHP 7-FPM（FastCGI Process Manager）
由NGINX服務

如果你是AWS新用戶，還送你 $500 美金 AWS credits

Plesk on AWS：

[……]

PHP include vs require

PHP include 與 require 到底有什麼差異阿?

相信 include() 跟 require() 大家並不陌生，都是用來引入文件，如果都一樣又為何要分成 include() 與require()呢，其實還是有些差異拉，我把在網路上看到的差異做成了比較表，方便大家選擇最適合的。

include

require

用到時才載入
一開始就加載

檔案發生錯誤的話，會顯示警告，不會立刻停止
會顯示錯誤，立刻終止程式，不再往下執行。

需要處裡文件檢查、速度相對較慢
速度比較快

適合動態態載入檔案
適合靜態檔案

適合用來引入動態的程式碼
適合用來引入靜態的內容

可以用在迴圈
–

有返回值
-[……]

PHP in_array comparing two arrays

PHP in_array() 無法比較兩個陣列，這邊採取替代的作法，使用array_intersect()，取得值的交集

/*
    VECTOR COOL
    https://vector.cool	
*/
$arr1 = array(1,2,3);
$arr2 = array(1,2,3,4,5,6,7);
$arr = array_intersect($arr1, $arr2);
if (count($arr) > 0) {
   // do something
}

參考資料：

[……]

YouYube 影片線上下載器 – 可自動轉MP3 – 很快、很簡單、很好用

功能&特色：

免費
YouYube 影片線上下載
YouYube 播放清單下載
YouYube 轉MP3
YouYube MP4影片
YouYube MP4影片(HD)
可以一次下載多個影片

這大概是我用過最快最好用的影片下載器吧，非常推薦，簡單、直覺，直接就可以在網頁上把影片的音樂轉成MP3，如果你有習慣將喜歡的音樂或影片建立成撥放清單的話，也可以直接輸入播放清單的網址，它可以直接抓回整個播放清單所有的影片，可以直接在網路上點選批次下載，就不用一個網址一個網址打到手痠。

另外，的是這個下載器有提供兩種下載方式，一個是在他官網上輸入網址，另一個是直接在YouTube官網，你整個可以忘了這網站的連結，非常簡單

方法一、從官網下載：

看到這畫面應該不用多說什麼，一看就知道怎麼用了吧

方法二、從官網下載：

網址連結：

[……]

[懶人CSS陰影]還在用PS上陰影嗎？用CSS為你的圖片或色塊加一點變化！

在設計網頁時為了不要讓圖片或色塊死板板的，有的人會傻傻的先用Photoshop上陰影再以圖片的格式上傳，今天我們直接為圖片和色塊加上CSS吧。

CSS實在有許多好用之處，今天要來跟大家介紹小編做網站時常常使用的CSS box-shadow！

顏色從淺到深的陰影色塊

.card {
    background-color: #f5f5f5;
    border-radius: 2px;
    display: block;
    height: 300px;
    margin: 1rem;
    position: relative;
    width: 300px;
}

.card {
    background-color: #f5f5f5;
    border-radius: 2px;
    display: block;
    height: 300px;
    margin: 1rem;
    position: relative;
    width: 300px;
}
.card-1 {
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}

.card {
    background-color: #f5f5f5;
    border-radius: 2px;
    display: block;
    height: 300px;
    margin: 1rem;
    position: relative;
    width: 300px;
}
.card-2 {
  box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}

.card {
    background-color: #f5f5f5;
    border-radius: 2px;
    display: block;
    height: 300px;
    margin: 1rem;
    position: relative;
    width: 300px;
}
.card-3 {
  box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}

.card {
    background-color: #f5f5f5;
    border-radius: 2px;
    display: block;
    height: 300px;
    margin: 1rem;
    position: relative;
    width: 300px;
}
.card-4 {
  box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}

.card {
    background-color: #f5f5f5;
    border-radius: 2px;
    display: block;
    height: 300px;
    margin: 1rem;
    position: relative;
    width: 300px;
}
.card-5 {
  box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
}

特殊陰影處理

HTML

<div class="box effect1">
<h3>Effect 1</h3>
</div>

<div class="box effect2">
<h3>Effect 2</h3>
</div>

<div class="box effect3">
<h3>Effect 3</h3>
</div>

<div class="box effect4">
<h3>Effect 4</h3>
</div>

<div class="box effect5">
<h3>Effect 5</h3>
</div>

<div class="box effect6">
<h3>Effect 6</h3>
</div>

<div class="box effect7">
<h3>Effect 7</h3>
</div>

<div class="box effect8">
<h3>Effect 8</h3>
</div>

CSS

.box h3 {
    text-align: center;
    position: relative;
    top: 80px;
}

.box {
    width: 70%;
    height: 200px;
    background: #FFF;
    margin: 40px auto;
}


/*==================================================
 * Effect 1
 * ===============================================*/

.effect1 {
    -webkit-box-shadow: 0 10px 6px -6px #777;
    -moz-box-shadow: 0 10px 6px -6px #777;
    box-shadow: 0 10px 6px -6px #777;
}


/*==================================================
 * Effect 2
 * ===============================================*/

.effect2 {
    position: relative;
}

.effect2:before,
.effect2:after {
    z-index: -1;
    position: absolute;
    content: "";
    bottom: 15px;
    left: 10px;
    width: 50%;
    top: 80%;
    max-width: 300px;
    background: #777;
    -webkit-box-shadow: 0 15px 10px #777;
    -moz-box-shadow: 0 15px 10px #777;
    box-shadow: 0 15px 10px #777;
    -webkit-transform: rotate(-3deg);
    -moz-transform: rotate(-3deg);
    -o-transform: rotate(-3deg);
    -ms-transform: rotate(-3deg);
    transform: rotate(-3deg);
}

.effect2:after {
    -webkit-transform: rotate(3deg);
    -moz-transform: rotate(3deg);
    -o-transform: rotate(3deg);
    -ms-transform: rotate(3deg);
    transform: rotate(3deg);
    right: 10px;
    left: auto;
}


/*==================================================
 * Effect 3
 * ===============================================*/

.effect3 {
    position: relative;
}

.effect3:before {
    z-index: -1;
    position: absolute;
    content: "";
    bottom: 15px;
    left: 10px;
    width: 50%;
    top: 80%;
    max-width: 300px;
    background: #777;
    -webkit-box-shadow: 0 15px 10px #777;
    -moz-box-shadow: 0 15px 10px #777;
    box-shadow: 0 15px 10px #777;
    -webkit-transform: rotate(-3deg);
    -moz-transform: rotate(-3deg);
    -o-transform: rotate(-3deg);
    -ms-transform: rotate(-3deg);
    transform: rotate(-3deg);
}


/*==================================================
 * Effect 4
 * ===============================================*/

.effect4 {
    position: relative;
}

.effect4:after {
    z-index: -1;
    position: absolute;
    content: "";
    bottom: 15px;
    right: 10px;
    left: auto;
    width: 50%;
    top: 80%;
    max-width: 300px;
    background: #777;
    -webkit-box-shadow: 0 15px 10px #777;
    -moz-box-shadow: 0 15px 10px #777;
    box-shadow: 0 15px 10px #777;
    -webkit-transform: rotate(3deg);
    -moz-transform: rotate(3deg);
    -o-transform: rotate(3deg);
    -ms-transform: rotate(3deg);
    transform: r[......]閱讀更多

Plesk 設定排程任務，定時瀏覽指定網頁

Plesk是一套很方便的主機系統管理程式，也是主流主機管理程式之一，很多主機商也都用Plesk來進行主機系統管理，本篇要介紹如何設定排程任務

什麼是排程任務?

有時我們在寫程式的時候會希望主機自動在某一個時間區間執行某些任務，例如：每日午夜12:00，進行購物車訂單出貨拋轉作業，當然也可以人工每天12點去瀏覽這支程式，只是非常愚蠢，偷懶是工程師的美德，於是我們需要一個像計時器的東西，時間到去做某些動作，達成自動化目的。

建立任務處理程式

我習慣會寫一支程式，專門執行某些特定任務，比如說：購物車訂單出貨拋轉作業，這支程式可透過瀏覽網頁的方式去驗證是否正常運行，確定一切都正常，接著我們需要一個觸發程式的瀏覽者，這我們就透過Plesk的排程任務達成。

設定Plesk

登入Plesk ，到指定網域的管理頁面，右上角有一個叫計畫的任務
PS. 如果您的Plesk管理面板中沒出現這個選單，那就是這功能管理者沒開放，就需聯絡你的主機商，如果他們不願意開這功能就換家主機商吧。

添加一個任務

設定執行時間

我選擇獲取URL選項，讓Plesk排程任務，在指定時間瀏覽我的某一支檔案。
輸入要執行的檔案URL
設定時間及週期
發送通知，可以選擇僅發送異常通知就好
選擇通知對象
儲存

驗證

設定完成後，一定要檢查是否有在指定時間及周期中執行，可以寫個小程式，去紀錄執行時間，以驗證程式有正常運行。
承上點，若你確定你的程式運行完全正常沒有問題，但排程卻沒正常運行，請檢查排程設定，若也都沒錯，請聯絡主機商。

安全設定

眼尖的朋友應該會看到我的執行URL加了個c參數，後面跟了一堆亂碼，這是一個簡單的安全設定，為了避免爬蟲或有心人士，在非排程定義執行區間去執行此程式，所做的驗證機制，在我的php檔最前方加入下方程式碼，若沒有正確的key，此頁將返回hTTP 404錯誤，當作根本就沒這頁的存在
```
<?php
if($_GET['c']!='B598FCD1B61E79D8249C5A8AAEC2D585'){
header("HTTP/1.0 404 Not Found");
exit;
}
```

設定 .htaccess 檔，該URL只允許執行某一 IP執行

RewriteEngine On
RewriteCond %{REMOTE_ADDR} !=123.123.123.123
RewriteCond %{REQUEST_URI} ^/basic/test.php [NC]
RewriteRule ^ - [R=404,L]

參考資料：

[……]

Win10 清除DNS快取

Windows 清除DNS快取

滑鼠移至左下角開始功能表，按右鍵。
選擇 Windows PowerShell
貼上下方文字
```
ipconfig /flushdns
```
清除DNS完成

[……]

set_magic_quotes_runtime()於 PHP5.3後棄用

解決方法：

替代方案：

用 index 在重複元素中獲取一個元素

比如說我要指定定Apple 的樣式為紅色：

我們可以這麼做，都可以達到相同效果：

同場加映

我常用的方法

行動優先-響應式斷點

Bootstrap 4 – RWD Layout

WordPress Elementor CSS breakpoint

有什麼比一鍵安裝更快樂呢

千呼萬喚始出來，AWS有Plesk官方的AMI囉!

作業系統版本

CentOS

Ubuntu

Windows

Plesk十天試用

預先配置

預先安裝的 Plesk Extensions

預配置為性能和安全性

Plesk on AWS：

PHP include 與 require 到底有什麼差異阿?

include

require

PHP in_array() 無法比較兩個陣列，這邊採取替代的作法，使用array_intersect()，取得值的交集

功能&特色：

方法一、從官網下載：

方法二、從官網下載：

顏色從淺到深的陰影色塊

特殊陰影處理

HTML

CSS

什麼是排程任務?

建立任務處理程式

設定Plesk

添加一個任務

設定執行時間

驗證

安全設定

參考資料：

Windows 清除DNS快取